/* SECCION: encabezado · portada con la animación firma
   Vive dentro del panel Soft White de la portada (.panel--portada), con el menú montado arriba.
   El panel sigue hacia abajo: ahí entra la tarjeta de Vida Agéntica con el tríptico (tramo 2).
   Celular: escena (foto + símbolo como luz) arriba, texto y botones abajo; el botón principal
   se ve completo en la primera pantalla a 375 × 812. Escritorio: texto a la izquierda, escena a la derecha.
   Solo usa variables de tokens.css. */

.encabezado {
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: calc(var(--menu-alto) + var(--space-2)) var(--gutter) var(--space-6);
}

/* ---------- Texto ---------- */
.encabezado__texto { position: relative; z-index: 2; order: 2; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--t-eyebrow);
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.eyebrow::before { /* rótulo editorial: filete corto + texto */
  content: "";
  width: 24px;
  height: 2px;
  background: var(--cta);
  flex: none;
}

.encabezado__titulo {
  font-size: var(--t-headline);
  line-height: 1.02;
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-headline);
  text-wrap: balance;
}
.encabezado__titulo .linea-mask { padding: 0.12em 0.1em 0.14em 0; margin: -0.12em -0.1em -0.14em 0; }

.encabezado__intro {
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--tinta);
  text-wrap: pretty; /* evita una palabra sola en la última línea */
}

.encabezado__acciones {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Botones: el sistema compartido vive en base.css (lo usan también las páginas legales). Aquí solo la luz de la firma. */
/* La luz de la firma: una franja Chispa a 56° que cruza el botón una vez, detrás del texto */
.boton__luz {
  position: absolute;
  inset: -50% auto -50% -40%; /* fuera del botón hasta que la firma la hace cruzar */
  width: 22%;
  z-index: 0;
  background: var(--grad-chispa);
  opacity: 0.5;
  transform: skewX(-34deg); /* 90° − 56° */
  pointer-events: none;
}

/* ---------- Escena: símbolo como luz + foto ---------- */
.encabezado__escena {
  position: relative;
  order: 1;
  height: 280px; /* celular: deja el titular y el botón en la primera pantalla incluso a 360 × 740 */
}

.simbolo-luz {
  position: absolute;
  z-index: 0;
  /* Luz detrás de la foto, no forma protagonista: más chica y asomando por la izquierda de Victor */
  left: 26%; /* la vertical asoma por el borde izquierdo de la foto, como en escritorio */
  top: 26%;
  width: 70%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  opacity: var(--opacidad-luz-portada); /* estado final de la firma: luz suave (encabezado.js lo lee de aquí) */
}
.simbolo-luz__halo { opacity: 1; }
.simbolo-luz__entero { opacity: var(--opacidad-silueta-portada); }

.encabezado__foto {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 210px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0% 26%, 22% 0%, 100% 0%, 100% 100%, 0% 100%); /* el corte a 56° */
}
.encabezado__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.vidrio {
  position: absolute;
  z-index: 2;
  max-width: 220px;
  padding: 12px 14px;
  border-radius: var(--radio-tarjeta);
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(140%);
  backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(140%);
  color: var(--tinta);
}
.vidrio__ceja {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--digital-blue-700);
}
.vidrio__texto { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.35; font-weight: var(--peso-medium); }
.vidrio--a { left: 0; bottom: 18px; }
.vidrio--b { display: none; }

/* Estados de entrada: solo con JS, con rescate a los 4 s */
.js .encabezado [data-in] { visibility: hidden; animation: rescate 0s 4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .js .encabezado [data-in] { visibility: visible; animation: none; }
}

/* ---------- Tablet: misma composición apilada, foto más grande ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  .encabezado__escena { height: 400px; }
  .encabezado__foto { width: 320px; right: 4%; }
  .simbolo-luz { left: 45%; top: 30%; width: 46%; } /* la vertical asoma por el borde izquierdo de la foto */
}

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  .encabezado {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: var(--space-4); /* columna de texto más ancha: el párrafo cierra en tres líneas, sin "tú." sola */
    padding-top: var(--menu-alto);
    padding-bottom: var(--space-6);
  }
  .encabezado__texto { order: 1; }
  .encabezado__escena { order: 2; height: auto; aspect-ratio: 6 / 5.4; }
  .encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  /* La foto baja un poco y el símbolo sube: la punta de la diagonal (su extremo Chispa) asoma por arriba
     de la foto como luz que se escapa; la vertical queda a la izquierda. Mismo tamaño de símbolo. */
  .encabezado__foto { width: 62%; right: 6%; top: 18%; }
  .simbolo-luz { left: 22%; top: 22%; width: 80%; }
  .encabezado__intro { max-width: 31rem; }
  .vidrio--a { left: 4%; bottom: 10%; }
  .vidrio--b { display: block; right: -2%; top: 46%; }
}