/* ============================================================
   H!G — Héctor Galindo
   Sistema base · Luxury Editorial Executive
   Paleta muestreada de HIG_Master_Document_2026.pdf
   ============================================================ */

:root {
  /* ---- Color ---- */
  --navy:         #0A1A38;
  --navy-alto:    #132644;
  --marfil:       #F5F2EB;
  --marfil-alto:  #FAF8F3;
  --oro:          #C4A464;
  --oro-claro:    #D9C08A;

  /* Las tres expresiones */
  --azul:         #2C5F9E;   /* Business · Consultoría   */
  --azul-claro:   #6E9BD1;   /* el azul sobre fondo navy */
  --verde:        #3F6E4C;   /* Person   · Mentoring     */
  --pensamiento:  var(--oro);/* Thinking · Intelligence  */

  --tinta:            #17171A;
  --tinta-suave:      #6B6862;
  --tinta-inv:        #E9E5DD;
  --tinta-inv-suave:  #9AA3B4;

  --filete:      rgba(23,23,26,.14);
  --filete-inv:  rgba(214,222,236,.18);

  /* ---- Tipografía ---- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Escala tipográfica · cinco niveles ----
     N0  número de capítulo   — azul, marca el capítulo
     N1  RÓTULO               — el section header de verdad
     N2  idea principal       — la frase que define la sección
     N3  descripción          — texto explicativo
     N4  etiqueta / CTA       — funcional
     Nada por debajo puede pesar más que lo de arriba. */
  --t-hero:   clamp(2.9rem, 6.2vw, 5.5rem);
  --t-rotulo: clamp(1.5rem, 2.35vw, 2.15rem);   /* N1 */
  --t-titulo: clamp(1.9rem, 3.4vw, 3rem);       /* N2 */
  --t-manif:  clamp(1.6rem, 2.9vw, 2.5rem);
  --t-sub:    clamp(1.3rem, 1.9vw, 1.7rem);
  --t-dato:   clamp(2.4rem, 3.8vw, 3.5rem);
  --t-lead:   clamp(1.05rem, 1.25vw, 1.2rem);   /* N3 */
  --t-body:   1.0625rem;
  --t-label:  .6875rem;                          /* N4 */

  /* ---- Rejilla ----
     Un solo sistema para las once secciones. */
  --w-pag:    1440px;   /* ancho máximo de página          */
  --w-cap:    1200px;   /* ancho de capítulo               */
  --margen:   clamp(1.5rem, 4.5vw, 4.5rem);
  --carril:   minmax(0, 3.7fr);   /* columna del número     */
  --cuerpo:   minmax(0, 8.3fr);   /* columna de contenido   */
  --gutter:   clamp(1.75rem, 4vw, 4.5rem);

  --banda:    clamp(5.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

body {
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  font-feature-settings: "kern","liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Envoltorio y rejilla ---------- */
.env {
  width: 100%;
  max-width: var(--w-pag);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Anatomía de capítulo: carril del número + columna de contenido.
   El carril no es espacio muerto — sostiene el número y el título. */
.rejilla {
  display: grid;
  grid-template-columns: var(--carril) var(--cuerpo);
  gap: var(--gutter);
  max-width: var(--w-cap);
  margin-inline: auto;
}
.rejilla--ancha { max-width: none; }

/* Medidas de lectura */
.medida    { max-width: 68ch; }
.medida-sm { max-width: 54ch; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  line-height: 1.07;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.prosa p + p { margin-top: 1.3em; }

/* Frase-manifiesto: la idea única de la sección */
.manifiesto {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  font-size: var(--t-manif);
  line-height: 1.32;
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.manifiesto em { font-style: italic; color: var(--oro); }

.filete { height: 1px; background: var(--filete); border: 0; width: 100%; }

/* ---------- Enlaces y CTA ---------- */
.enlace {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--oro); text-decoration: none;
  padding-bottom: .45em;
  border-bottom: 1px solid rgba(196,164,100,.32);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.enlace:hover { border-color: var(--oro); color: var(--oro-claro); }
.enlace .flecha, .cta .flecha { transition: transform .4s var(--ease); }
.enlace:hover .flecha, .cta:hover .flecha { transform: translateX(5px); }

.cta {
  display: inline-flex; align-items: center; gap: 1em;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 1.15rem 2.15rem;
  background: var(--navy); color: var(--marfil-alto);
  border: 1px solid var(--navy);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.cta:hover { background: transparent; color: var(--navy); }

.cta--inv { background: var(--marfil-alto); color: var(--navy); border-color: var(--marfil-alto); }
.cta--inv:hover { background: transparent; color: var(--marfil-alto); }

.cta--linea {
  background: transparent; color: var(--oro);
  border-color: rgba(196,164,100,.45);
  padding: .9rem 1.65rem;
}
.cta--linea:hover { background: transparent; color: var(--oro-claro); border-color: var(--oro); }

/* ============================================================
   MOVIMIENTO
   Regla: LEGIBILIDAD > ANIMACIÓN.

   El texto NUNCA se oculta: no hay opacidad 0 sobre contenido
   ni con JS ni sin él. Lo único que se mueve es el número del
   capítulo — un detalle decorativo que, si falla, no impide
   leer nada.
   ============================================================ */
/* Nada aparece ni desaparece con el scroll. Todo el contenido está
   presente desde el primer momento. Las únicas transiciones del
   sitio son las de hover en botones y enlaces. */
[data-anim] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Utilidades ---------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 880px) {
  .rejilla { grid-template-columns: 1fr; gap: 1.5rem; }
}