/* ============================================================
   H!G — Capítulos · V3
   Once secciones + dos bandas sin numerar.
   Doce capítulos de una misma historia, no doce tarjetas.

   JERARQUÍA (no romper):
   N1 RÓTULO (con su filete dorado) · N2 idea · N3 descripción · N4 etiqueta
   Los números de capítulo (01…09) se retiraron el 31 ago 2026 —
   el filete dorado que marcaba cada sección ahora vive en el
   propio rótulo (.cap__rotulo::before), no en un número aparte. */

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy); color: var(--tinta-inv);
}
.cabecera__int {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding-block: 1.05rem;
}
.marca { text-decoration: none; line-height: 1; display: block; }
.marca__sigla { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; letter-spacing: .02em; }
.marca__sigla i { color: var(--oro); font-style: normal; }
.marca__nombre {
  display: block; margin-top: .35rem;
  font-size: .5rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--tinta-inv-suave);
}

/* La marca del header, reforzada: primera impresión más presente.
   Logo real (imagen metálica con fondo transparente) + nombre
   editable como texto de verdad, no incrustado en la imagen. */
.cabecera .marca--grande { padding-block: .15rem; display: flex; align-items: center; gap: .9rem; }
.marca__marca-img { height: 2.5rem; width: auto; display: block; }
.marca--grande .marca__nombre {
  margin-top: 0; font-size: .6875rem;
  letter-spacing: .16em; color: var(--oro-claro);
}

/* La marca del footer usa el mismo logo, algo más discreto */
.pie .marca { display: flex; align-items: center; gap: .85rem; }
.marca__marca-img--pie { height: 2.15rem; }
.pie .marca .marca__nombre { font-size: .625rem; letter-spacing: .2em; color: var(--tinta-inv-suave); }
.menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.menu > a {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta-inv);
  opacity: .74; transition: opacity .3s var(--ease);
}
.menu > a:hover { opacity: 1; }

.idioma {
  display: flex; align-items: center; gap: .5rem;
  padding-left: 1.25rem; border-left: 1px solid var(--filete-inv);
}
.idioma button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-inv); opacity: .45;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.idioma button:hover { opacity: .9; }
.idioma button[aria-pressed="true"] { opacity: 1; color: var(--oro); }
.idioma i { font-style: normal; color: var(--filete-inv); font-size: .7rem; }

/* ============================================================
   ANATOMÍA DE CAPÍTULO
   ============================================================ */
.cap { padding-block: var(--banda); position: relative; }
.cap--oscuro { background: var(--navy); color: var(--tinta-inv); }
.cap--oscuro .lead { color: var(--tinta-inv-suave); }
.cap--alto   { background: var(--marfil-alto); }
.cap--linea { border-top: 1px solid var(--filete); }
.cap--oscuro.cap--linea { border-top-color: var(--filete-inv); }

.cap__marca { position: relative; }

/* ---- N1 · El RÓTULO. El section header de verdad ----
   El filete dorado que antes colgaba del número ahora abre el
   rótulo directamente — la marca de sección sigue estando, solo
   que ya no necesita una cifra para sostenerla. */
.cap__rotulo {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-rotulo); font-weight: 500;
  line-height: 1.12; letter-spacing: .02em;
  text-transform: uppercase; color: var(--tinta);
  text-wrap: balance;
}
.cap__rotulo::before {
  content: ""; display: block;
  width: 56px; height: 2px; margin-bottom: 1.35rem;
  background: var(--oro);
}
.cap--oscuro .cap__rotulo { color: var(--tinta-inv); }

/* ---- N2 · La idea principal ---- */
.cap__titulo { font-size: var(--t-titulo); }
.cap__cuerpo > * + * { margin-top: 1.5rem; }
.cap__pie { margin-top: 2.5rem; }

/* Firma de posicionamiento */
.firma-edit {
  margin-top: clamp(2.5rem,5vw,4rem);
  padding-top: clamp(1.5rem,3vw,2.25rem);
  border-top: 1px solid var(--filete-inv);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 96;
  font-size: clamp(1.3rem,2.2vw,1.9rem); line-height: 1.35;
  max-width: 34ch; color: var(--oro-claro);
}

/* ============================================================
   PORTADA
   ============================================================ */
.portada {
  display: grid;
  grid-template-columns: minmax(0,42fr) minmax(0,58fr);
  min-height: min(86vh, 900px);
  background: var(--marfil);
}
.portada__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,6vw,5rem) clamp(1.5rem,4.5vw,5rem);
}
.portada__interior { max-width: 40rem; }
.portada__epigrafe {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro); line-height: 2; margin-bottom: 2.25rem;
}
.portada h1 { font-size: var(--t-hero); margin-bottom: 1.75rem; }
.portada h1 .punto { color: var(--oro); }

/* El gancho: la frase que da curiosidad antes de explicar nada.
   Más grande que el lead, más pequeña que el titular — su propio
   escalón entre la promesa y la explicación. */
.portada__gancho {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 96;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.3; letter-spacing: -.012em;
  color: var(--oro); margin-bottom: 1.75rem;
}
.portada__lead { max-width: 44ch; }
.portada__acciones {
  display: flex; align-items: center; gap: clamp(1.25rem,3vw,2.5rem);
  flex-wrap: wrap; margin-top: 2.75rem;
}

/* ---------- Franja de datos ---------- */
.datos { border-block: 1px solid var(--filete); background: var(--marfil-alto); }
.datos__lista {
  display: grid; grid-template-columns: repeat(3,1fr);
  list-style: none; padding: 0; max-width: var(--w-cap); margin-inline: auto;
}
.datos__lista li { padding: clamp(2.25rem,4vw,3.25rem) clamp(.75rem,2vw,2rem); }
.datos__lista li + li { border-left: 1px solid var(--filete); }
.datos__cifra {
  display: block; font-family: var(--serif); font-weight: 300;
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: var(--t-dato); line-height: 1;
  letter-spacing: -.025em; margin-bottom: .85rem;
}
.datos__cifra em { font-style: normal; color: var(--oro); }
.datos__glosa {
  font-size: var(--t-label); letter-spacing: .15em;
  text-transform: uppercase; color: var(--tinta-suave);
}

/* ============================================================
   01 · QUIÉN SOY — entrada reforzada
   Acento azul: filete grueso que abre el recorrido.
   ============================================================ */
#c01 { border-top: 3px solid var(--azul); }

/* ============================================================
   SLOTS DE FOTOGRAFÍA
   ============================================================ */
.slot { position: relative; overflow: hidden; background: linear-gradient(155deg,#1B3357,#0F2140 62%,#0A1A38); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot__nota { display: none; }
.slot.vacio .slot__nota {
  display: grid; place-content: center; gap: .5rem; text-align: center;
  position: absolute; inset: 0; padding: 1.5rem;
}
.slot__que { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(217,192,138,.55); }
.slot__archivo { font-family: ui-monospace,"SFMono-Regular",Menlo,monospace; font-size: .65rem; color: rgba(233,229,221,.28); }

/* ---- Portada · foto a sangre ----
   Foto real de 724×1086 (30 ago 2026) — resolución suficiente para
   cubrir la columna sin ampliarse en pantallas normales. Sustituye
   a la lámina reducida que usábamos con los recortes anteriores. */
.portada__foto {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 40%, #16294A 0%, #0A1A38 70%);
}
.portada__foto--llena { display: block; padding: 0; }
.portada__foto--llena img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 22%;
  box-shadow: none;
}

.sangre { width: 100vw; margin-left: 50%; transform: translateX(-50%); aspect-ratio: 21/9; margin-block: clamp(3rem,6vw,5rem); }

/* Contenido pendiente de la entrevista */
.pendiente {
  display: inline-block;
  font-family: ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--oro); background: rgba(196,164,100,.1);
  border: 1px dashed rgba(196,164,100,.45);
  padding: .3rem .6rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .proceso__pasos { grid-template-columns: repeat(2,1fr); gap: 0 1.25rem; }
  .proceso__pasos li:nth-child(n+3) { margin-top: 1.25rem; }
}

@media (max-width: 880px) {
  :root { --banda: clamp(3.75rem, 11vw, 5.5rem); }

  .portada { grid-template-columns: 1fr; min-height: 0; }
  /* La lámina se adapta: sin aspect-ratio forzado, la caja se ajusta
     a la foto y no queda espacio muerto. */
  .portada__foto { padding: clamp(2rem,8vw,3rem) var(--margen); }
  .portada__foto--llena { aspect-ratio: 4/5; padding: 0; }

  .datos__lista { grid-template-columns: 1fr; }
  .datos__lista li + li { border-left: 0; border-top: 1px solid var(--filete); }

  .cap__rotulo { font-size: 1.25rem; }
  .cap__rotulo::before { margin-bottom: 1rem; }

  .plp__mov, .via, .voz, .porque { grid-template-columns: 1fr; gap: 1rem; }
  .perfiles, .conector__tres, .fuera { grid-template-columns: 1fr; }
  .perfiles__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .via__areas { grid-template-columns: 1fr; }
  .recorrido li { grid-template-columns: 5rem 1fr; gap: 1rem; }
  .proceso__pasos { grid-template-columns: 1fr; }
  .proceso__pasos li { padding-left: 0 !important; }
  .proceso__pasos li + li { margin-top: 1rem; }

  .menu > a { display: none; }
  .menu > .cta { display: inline-flex; padding: .7rem 1rem; letter-spacing: .1em; }
  .idioma { padding-left: .9rem; }

  /* El nombre completo del header se parte en varias líneas en
     móvil y choca con el CTA — el logo solo ya identifica la marca. */
  .cabecera .marca--grande .marca__nombre { display: none; }
}