/* =====================================================================
   SECCIÓN DEL EMBAJADOR (v3, portada en vivo, 26-oct)
   Réplica de la lámina "Embajador" de la landing (EmbajadorCarousel.tsx +
   el tema rojo de SectionSheet.tsx + .emb-legible de index.css), pero como
   SECCIÓN dentro del flujo de la página, bajo la transmisión y Donar.
   La monta TG.embajador.mount(host, opciones) (embajador.js). Todas las
   clases llevan el prefijo "em-".

   ALTO (no es un modal a pantalla completa):
   - La lámina de la landing mide 100% del viewport; acá la sección mide
     "una pantalla, pero acotada": min(100svh, ancho × proporción), entre un
     piso y un techo. Así en un escritorio se ve igual que la lámina (1440x900
     = 900, 1920x1080 = 1080) y no crece sin fin en pantallas enormes.
       · escritorio y tablet apaisada: min(100svh, 75vw), entre 520 y 1200 px
       · tablet en retrato (>= 40rem): min(100svh, 150vw) (820x1180 = 1180)
       · celular en retrato (< 40rem): min(100svh, 230vw) (390x844 = 844)
       · teléfono apaisado (alto <= 500 px): 100svh con piso de 360 px y el
         bloque de texto compacto (ahí la lámina de la landing se pisaba)
   - Es un MÍNIMO: el pie (título, bio, flechas) va en el flujo, así que con
     A++ o pantallas bajas la sección crece en vez de recortar el texto.
   - Las fotos se anclan abajo y miden 80% del alto (66% en celular), como
     en la landing; la franja negra del pie las tapa igual que en la lámina.
   ===================================================================== */

.em {
  /* márgenes del texto (los de la lámina: left-5 / sm:left-10) */
  --em-margen: 20px;
  /* separación del pie sobre la franja (84 y 140 de la lámina, menos los
     ~52 px de la franja, que acá va en el flujo) */
  --em-pie: 32px;
  --em-alto: min(100svh, 230vw);
  --em-piso: 520px;
  --em-techo: 1200px;
  --em-rojo: #f5313e;
  --em-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --em-paso: 650ms;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* a todo el ancho: embajador.js fija --em-ancho y --em-desplaza si el host
     no ocupa el ancho de la ventana */
  width: var(--em-ancho, 100%);
  margin-left: var(--em-desplaza, 0px);
  min-height: clamp(var(--em-piso), var(--em-alto), var(--em-techo));
  background-color: var(--em-rojo);
  color: #fff;
  font-family: var(--tg-font, "Duplet Rounded", ui-rounded, system-ui, sans-serif);
  line-height: 1.5;
  container-type: inline-size;
  container-name: em;
  /* el swipe horizontal lo lee el carrusel; el vertical sigue siendo el
     scroll de la página */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.em *,
.em *::before,
.em *::after { box-sizing: border-box; }
/* el grupo del carrusel llena la sección y apila el pie (y la franja) abajo;
   las capas absolutas (grano, nombre, fotos, scrim) se ubican contra él */
.em-carrusel {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 40rem) {
  .em {
    --em-margen: 40px;
    --em-pie: 88px;
    --em-alto: min(100svh, 75vw);
  }
}
@media (min-width: 40rem) and (orientation: portrait) {
  .em { --em-alto: min(100svh, 150vw); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .em {
    --em-alto: 100svh;
    --em-piso: 360px;
    --em-pie: 28px;
  }
}

/* ---------- capas de fondo ---------- */
/* grano sutil (fractalNoise, el mismo data-URI de la landing, opacidad 0.4) */
.em-grano {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* nombre fantasma "IAÁN" detrás de las fotos: marca de agua blanca al 15%,
   dimensionada por el ancho y anclada al 16% del alto (decorativo, no escala
   con --a11y-fs: en la landing tampoco) */
.em-fantasma {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.em-fantasma span {
  white-space: nowrap;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.15);
  font-size: clamp(140px, 34vw, 460px);
  font-size: clamp(140px, 34cqw, 460px);
}

/* ---------- fotos ---------- */
.em-fotos {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* la CAJA es fija (la del centro) y cada estado se expresa solo con
   transform + opacity + filter (todo por el compositor, como la landing) */
.em-foto {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 66%;
  aspect-ratio: 0.72 / 1;
  transform-origin: 50% 100%;
  transition:
    transform var(--em-paso) var(--em-ease),
    filter var(--em-paso) var(--em-ease),
    opacity var(--em-paso) var(--em-ease);
  will-change: transform, filter, opacity;
  /* lados en celular: ±32 del ancho, escala 20/66 y subida 34/66 */
  --em-lado-x: 32vw;
  --em-lado-y: -51.5152%;
  --em-lado-s: 0.30303;
  --em-oculta-s: 0.27273;
  --em-centro-s: 1;
}
@supports (width: 1cqw) {
  .em-foto { --em-lado-x: 32cqw; }
}
/* 5-nov (revisión final): con A++ en el celular retrato el pie del Embajador crece y el título tapaba las caras;
   la foto sube de 66 a 86 % del alto de la sección (solo visual: no cambia el flujo ni la reserva del Dona aquí).
   Sale de --a11y-fs (1, 1.15 o 1.3): 66 % con A y A+, 86 % con A++ */
@media (orientation: portrait) and (max-width: 39.9375rem) {
  .vt-sec-emb .em-foto { height: clamp(66%, calc(66% + (var(--a11y-fs, 1) - 1.15) * 133.34%), 86%); }
}
.em-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.em-foto--centro {
  transform: translateX(-50%) scale(var(--em-centro-s));
  filter: none;
  opacity: 1;
  z-index: 20;
}
.em-foto--izq,
.em-foto--der {
  filter: blur(2px);
  opacity: 0.85;
  z-index: 10;
}
.em-foto--izq {
  transform: translateX(calc(-50% - var(--em-lado-x))) translateY(var(--em-lado-y)) scale(var(--em-lado-s));
}
.em-foto--der {
  transform: translateX(calc(-50% + var(--em-lado-x))) translateY(var(--em-lado-y)) scale(var(--em-lado-s));
}
.em-foto--oculta {
  transform: translateX(-50%) translateY(var(--em-lado-y)) scale(var(--em-oculta-s));
  filter: blur(4px);
  opacity: 0;
  z-index: 5;
}
@media (min-width: 40rem) {
  .em-foto {
    height: 80%;
    /* lados en tablet y escritorio: ±24 del ancho, escala 30/80, subida 10/80 */
    --em-lado-x: 24vw;
    --em-lado-y: -12.5%;
    --em-lado-s: 0.375;
    --em-oculta-s: 0.325;
    --em-centro-s: 1.12;
  }
  @supports (width: 1cqw) {
    .em-foto { --em-lado-x: 24cqw; }
  }
}

/* scrim: degradado negro desde abajo entre las fotos y el texto (60% en
   celular, 45% desde 40rem), en todos los tamaños */
.em-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 55;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
@media (min-width: 40rem) {
  .em-scrim { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent); }
}

/* ---------- pie: texto, datos y navegación (en el flujo) ---------- */
.em-pie {
  position: relative;
  z-index: 60;
  display: grid;
  /* el aire de arriba solo se nota si el texto hace crecer la sección */
  padding: 24px var(--em-margen) var(--em-pie);
}
/* texto (abajo a la izquierda) y datos (abajo a la derecha) comparten la
   misma celda, como los dos bloques absolutos de la lámina: misma línea base
   y la celda crece con el más alto */
.em-texto,
.em-datos {
  grid-area: 1 / 1;
  min-width: 0;
}
.em-texto {
  justify-self: stretch;
  align-self: end;
  max-width: none;
}
@media (min-width: 40rem) {
  .em-texto {
    justify-self: start;
    width: 100%;
    /* 460 px como la lámina; con A+ y A++ crece con la letra (así el título
       no se parte en escritorio), sin pasar del 58% del ancho */
    max-width: 460px;
    max-width: max(min(460px, 100%), min(calc(460px * var(--a11y-fs, 1)), 58cqw));
  }
}

/* sombra de mitigación del texto blanco que cruza la foto (.emb-legible) */
.em-legible {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 4px 22px rgba(0, 0, 0, 0.38);
}

.em-titulo {
  margin: 0 0 8px;
  font-size: calc(20px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
}
/* edad y lugar en una línea bajo el título (solo celular) */
.em-info {
  margin: 0 0 10px;
  /* portada en vivo (28-oct): 14 px como mínimo (en la landing, 12) */
  font-size: calc(14px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
}
.em-bio {
  margin: 0;
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 400;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 40rem) {
  .em-titulo {
    margin-bottom: 12px;
    font-size: calc(30px * var(--a11y-fs, 1));
  }
  .em-info { display: none; }
  .em-bio {
    margin-bottom: 20px;
    font-size: calc(18px * var(--a11y-fs, 1));
  }
}

/* fila de acciones: las flechas y, si se pide, "Conoce su historia" */
.em-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
/* "Conoce su historia" (opcional, apagado por defecto: la lámina no lo
   tiene). Píldora blanca con texto rojo accesible, del alto de las flechas */
.em-historia {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  color: #e12d39;
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(90, 5, 12, 0.3);
  transition: transform 150ms var(--em-ease);
}
@media (min-width: 40rem) {
  .em-historia { min-height: 56px; padding: 12px 26px; font-size: calc(16px * var(--a11y-fs, 1)); }
}
@media not all and (min-width: 40rem) {
  .em-acciones:has(.em-historia) { margin-top: 14px; }
}
@media (hover: hover) {
  .em-historia:hover { transform: translateY(-1px); }
}

/* flechas: círculos con borde blanco de 2 px (48 / 56 px), como la lámina */
.em-flechas {
  display: flex;
  gap: 10px;
}
.em-flecha {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition:
    transform 150ms var(--em-ease),
    background-color 150ms var(--em-ease);
}
.em-flecha .tg-icon { width: 24px; height: 24px; }
/* la flecha "anterior" es la arrow-right de Lucide en espejo (= arrow-left) */
.em-flecha--ant .tg-icon { transform: scaleX(-1); }
@media (hover: hover) {
  .em-flecha:hover {
    transform: scale(1.08);
    background-color: rgba(255, 255, 255, 0.12);
  }
}
@media (min-width: 40rem) {
  .em-flecha { width: 56px; height: 56px; }
}
/* en celular las flechas son invisibles pero siguen en el árbol de
   accesibilidad (max-sm:sr-only de la landing) y reaparecen con el foco */
@media not all and (min-width: 40rem) {
  .em-flecha:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .em-acciones:focus-within { margin-top: 14px; }
  /* las flechas ocultas no dejan hueco antes de "Conoce su historia" */
  .em-acciones { column-gap: 0; }
  .em-flechas:focus-within { margin-right: 16px; }
}

/* puntos (solo celular, donde las flechas no se ven): indicador tocable de
   la foto activa; aria-hidden y fuera del Tab (el teclado y el lector usan
   las flechas, como en la landing) */
.em-puntos {
  display: none;
}
@media not all and (min-width: 40rem) {
  .em-puntos {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 6px 0 0 -3px;
  }
  /* con los puntos, el pie baja un poco para no subir el texto sobre la foto */
  .em[data-puntos] { --em-pie: 18px; }
}
.em-punto {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.em-punto i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: width var(--em-paso) var(--em-ease), background-color var(--em-paso) var(--em-ease);
}
.em-punto[data-activo] i {
  width: 22px;
  background: #fff;
}

/* edad y lugar abajo a la derecha (solo desde 40rem), a la misma línea base
   que las flechas */
.em-datos {
  display: none;
}
@media (min-width: 40rem) {
  .em-datos {
    display: block;
    justify-self: end;
    align-self: end;
    margin: 0;
    text-align: right;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
  }
}
.em-datos-edad {
  display: block;
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  /* clamp(26px, 4vw, 58px) de la landing, ahora también × --a11y-fs */
  font-size: calc(clamp(26px, 4vw, 58px) * var(--a11y-fs, 1));
  font-size: calc(clamp(26px, 4cqw, 58px) * var(--a11y-fs, 1));
}
.em-datos-lugar {
  display: block;
  margin: 8px 0 0;
  font-size: calc(16px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- franja negra del pie (la huincha de la lámina) ---------- */
.em-huincha {
  position: relative;
  z-index: 70;
  background: #000;
  padding: 14px 24px 16px;
}
@media (min-width: 48rem) {
  .em-huincha { padding-left: 64px; padding-right: 64px; }
}
.em-marquesina {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
}
.em-pista {
  display: flex;
  align-items: center;
  width: max-content;
  flex-wrap: nowrap;
  animation: em-marquesina linear infinite;
  animation-duration: 28s;
  will-change: transform;
}
.em-mitad,
.em-set {
  display: flex;
  align-items: center;
  gap: 56px;
}
.em-mitad { margin-right: 56px; }
.em-item {
  display: flex;
  align-items: center;
  gap: 56px;
}
.em-item-texto {
  white-space: nowrap;
  font-size: calc(13px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}
.em-item .tg-icon {
  width: 16px;
  height: 16px;
  color: var(--em-rojo);
  flex: none;
}
@media (min-width: 48rem) {
  .em-item-texto { font-size: calc(15px * var(--a11y-fs, 1)); }
}
@keyframes em-marquesina {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* fuera de la vista o con la pestaña oculta la cinta no corre (doctrina de
   animaciones ocultas de la landing) */
.em:not([data-en-vista]) .em-pista { animation-play-state: paused; }

/* ---------- foco ---------- */
.em :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.em .em-historia:focus-visible { outline-color: #fff; }

/* ---------- movimiento reducido y "Pausar animaciones" ---------- */
/* sin transición entre fotos (instantáneo) ni cinta en movimiento */
.em[data-quieto] .em-foto,
.em[data-quieto] .em-flecha,
.em[data-quieto] .em-historia,
.em[data-quieto] .em-punto i { transition: none; }
.em[data-quieto] .em-pista { animation: none; transform: none; }
.em[data-quieto] .em-flecha:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .em-foto,
  .em-flecha,
  .em-historia,
  .em-punto i { transition: none; }
  .em-pista { animation: none; transform: none; }
  .em-flecha:hover { transform: none; }
}

/* ---------- alto contraste ---------- */
html[data-contraste="1"] .em-grano { display: none; }
html[data-contraste="1"] .em-fantasma span { color: rgba(255, 255, 255, 0.1); }
html[data-contraste="1"] .em-scrim {
  height: 62%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.7) 45%, transparent 100%);
}
html[data-contraste="1"] .em-legible {
  text-shadow:
    0 1px 2px #000,
    0 0 3px #000,
    0 2px 16px rgba(0, 0, 0, 0.7);
}
html[data-contraste="1"] .em-info,
html[data-contraste="1"] .em-bio,
html[data-contraste="1"] .em-datos-lugar,
html[data-contraste="1"] .em-item-texto { color: #fff; }
html[data-contraste="1"] .em-flecha {
  border-width: 3px;
  background-color: rgba(0, 0, 0, 0.55);
}
html[data-contraste="1"] .em-punto i { background: rgba(255, 255, 255, 0.8); outline: 1px solid #000; }
html[data-contraste="1"] .em-punto[data-activo] i { background: #fff; outline: 2px solid #000; }
html[data-contraste="1"] .em-historia {
  color: #160307;
  border: 2px solid #160307;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-contraste="1"] .em-huincha { border-top: 1px solid rgba(255, 255, 255, 0.5); }
@media (forced-colors: active) {
  .em-flecha { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .em-punto i { background: ButtonText; forced-color-adjust: none; }
  /* 27-oct: el punto activo usaba #fff y en tema claro quedaba blanco sobre blanco */
  .em-punto[data-activo] i { background: Highlight; }
  .em-scrim,
  .em-grano { display: none; }
}

/* ---------- teléfono apaisado: el pie se compacta ----------
   (la lámina de la landing aquí se pisaba): las fotos se corren a la
   derecha, el texto se acota a la izquierda y la edad y el lugar vuelven a
   la línea bajo el título, como en celular */
@media (orientation: landscape) and (max-height: 500px) {
  .em-foto { left: 64%; }
  .em-texto { max-width: min(460px, 46cqw); }
  .em-datos { display: none; }
  .em-info { display: block; margin-bottom: 8px; }
  .em-titulo { font-size: calc(24px * var(--a11y-fs, 1)); margin-bottom: 6px; }
  .em-bio { font-size: calc(16px * var(--a11y-fs, 1)); margin-bottom: 14px; line-height: 1.55; }
  .em-flecha { width: 48px; height: 48px; }
  .em-historia { min-height: 48px; }
  .em-datos-edad { font-size: calc(clamp(26px, 4cqw, 40px) * var(--a11y-fs, 1)); }
  .em-datos-lugar { font-size: calc(14px * var(--a11y-fs, 1)); margin-top: 6px; }
  .em-huincha { padding-top: 10px; padding-bottom: 12px; }
}