/* =============================================================
   CSS DEL EMBUDO (review · quiz · promo · checkout)
   Complementa css/style.css (que trae reset, tipografía, header,
   footer y la pantalla de bienvenida).

   ÍNDICE
   20. TOKENS DEL EMBUDO
   21. HEADER: botón atrás y chip de email
   22. ESQUELETO DE PANTALLA
   23. TÍTULOS
   24. BOTÓN DE OPCIÓN (lista)
   25. TARJETAS DE GÉNERO
   26. PANTALLAS INFORMATIVAS
   27. FECHA DE NACIMIENTO
   28. SELECCIÓN MÚLTIPLE
   29. PANTALLA DE ANÁLISIS
   30. MODALES
   31. PÁGINA REVIEW
   32. PÁGINA PROMO-CODE
   33. CHECKOUT / PAYWALL
   ============================================================= */


/* =============================================================
   20. TOKENS DEL EMBUDO  (valores reales del tema HeroUI + Tailwind)
   ============================================================= */
:root {
  --blue:            rgb(6, 111, 222);   /* bg-blue / blue-700 */
  --blue-50:         rgb(237, 250, 255);
  --violet-25:       rgb(250, 247, 253);
  --violet-100:      rgb(215, 191, 239);
  --violet-400:      rgb(144, 78, 210);
  --violet-500:      rgb(120, 40, 200);
  --violet-600:      rgb(99, 33, 165);
  --purple-50:       rgb(250, 245, 255);
  --slate-600:       rgb(71, 85, 105);
  --slate-700:       rgb(51, 65, 85);
  --slate-800:       rgb(30, 41, 59);
  --zinc-500:        rgb(113, 113, 122);
  --gray-50:         rgb(250, 250, 250);
  --grey-300:        rgb(212, 212, 216);
  --default:         hsl(240 4.88% 83.92%);
  --default-100:     hsl(240 4.76% 95.88%);
  --default-600:     hsl(240 5.2% 33.92%);
  --foreground-500:  hsl(240 3.83% 46.08%);
  --primary:         hsl(212.02 100% 46.67%);
  --radius-small:    8px;
  --radius-medium:   12px;
  --radius-large:    14px;
  --shadow-small:    0 0 5px 0 rgba(0,0,0,.02), 0 2px 10px 0 rgba(0,0,0,.06), 0 0 1px 0 rgba(0,0,0,.3);
  --shadow-medium:   0 0 15px 0 rgba(0,0,0,.03), 0 2px 30px 0 rgba(0,0,0,.08), 0 0 1px 0 rgba(0,0,0,.3);
}


/* =============================================================
   21. HEADER — variantes del embudo
   ============================================================= */
/* flecha «atrás» del cuestionario */
.hdr-back {
  position: absolute;
  inset-inline-start: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-medium);
  background: transparent;
  color: rgb(17, 24, 28);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, background-color .25s ease;
}
.hdr-back:hover  { background: hsl(240 4.88% 83.92% / .4); }
.hdr-back:active { transform: translateY(-50%) scale(.97); }
.hdr-back .iconify-inline { width: 24px; height: 24px; margin-inline-end: 8px; }
@media (max-width: 767px) { .hdr-back { inset-inline-start: 16px; } }

/* La barra de progreso del cuestionario, como en el original: una
   línea morada de 3 px pegada al borde inferior de la cabecera que
   avanza con cada pregunta. La cabecera es `position: sticky`, así
   que la barra viaja con ella. quiz.js la esconde en las pantallas
   que no son preguntas. */
.hdr-progreso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.hdr-progreso[hidden] { display: none; }
.hdr-progreso__fill {
  height: 100%;
  width: 0;
  background: var(--violet-500);
  border-radius: 0 3px 3px 0;
  transition: width .45s ease;
}

/* alineación del logo cuando hay chip de email */
.site-header__inner--start { justify-content: flex-start; }

/* chip con el email del usuario */
.user-chip {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  width: 33.333%;
  max-width: fit-content;
  padding-inline-end: 8px;
  background: var(--gray-50);
  border-radius: 9999px;
}
.user-chip__avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #d4d4d8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
}
.user-chip__avatar svg { position: absolute; inset: -1px; }
.user-chip__mail {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .625rem;
  line-height: 14px;
  font-weight: 500;
  color: var(--slate-700);
}
@media (min-width: 1024px) { .user-chip { inset-inline-end: 32px; } }


/* =============================================================
   22. ESQUELETO DE PANTALLA
   ============================================================= */
.funnel-main {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* mismo contenedor que la home, más h-full */
.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 16px;
  max-width: 576px;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .screen { padding: 72px 16px; } }

/* CTA pegado abajo, idéntico al de la home */
.screen__cta {
  position: sticky;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 8px 0;
}


/* =============================================================
   23. TÍTULOS
   ============================================================= */
.q-title {
  display: block;
  width: 100%;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}
.q-subtitle {
  display: block;
  width: 100%;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  text-wrap: balance;
  color: var(--slate-700);
}


/* =============================================================
   24. BOTÓN DE OPCIÓN (lista con emoji)
   ============================================================= */
.opt-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.opt {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 80px;
  min-height: 56px;
  height: auto;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  background-color: var(--blue-50);
  color: #000;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translateZ(0);
  outline: none;
  transition-property: transform, color, background, background-color, border-color, opacity;
  transition-timing-function: ease;
  transition-duration: .25s;
}
/* el borde azul marca la respuesta ya elegida (lo aplica js/quiz.js) */
.opt--active { border-color: var(--blue); }
.opt:hover  { background-color: var(--blue); color: #fff; }
.opt:active { transform: scale(.97); }
.opt:focus-visible { z-index: 10; outline: 2px solid var(--blue); outline-offset: 2px; }

.opt__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  gap: 24px;
}
.opt__emoji { font-size: 26px; line-height: 1; }


/* =============================================================
   25. TARJETAS DE GÉNERO
   ============================================================= */
.gender-row { display: flex; gap: 12px; width: 100%; justify-content: space-between; }

.gender-card {
  position: relative;
  z-index: 0;
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 288px;
  min-width: 80px;
  min-height: 56px;
  height: auto;
  padding: 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  background-color: var(--blue-50);
  color: rgb(17, 24, 28);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition-property: transform, color, background-color, border-color, opacity;
  transition-timing-function: ease;
  transition-duration: .25s;
}
.gender-card--active { border-color: var(--blue); }
.gender-card:hover  { background-color: var(--blue); color: #fff; }
.gender-card:active { transform: scale(.97); }

.gender-card__inner { display: flex; flex-direction: column; height: 100%; gap: 12px; }
.gender-card__art   { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; }
.gender-card__art img { max-width: 147px; width: 100%; height: auto; }


/* =============================================================
   26. PANTALLAS INFORMATIVAS
   ============================================================= */
/* El original tiene DOS variantes de pantalla informativa.

   a) «¡Genial!» — sin h-full, texto a 18px centrado y equilibrado,
      y las dos líneas en colores distintos (slate-600 / slate-700). */
.screen--awesome {
  gap: 0;
  height: auto;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  text-wrap: balance;
}
.screen--awesome > *:nth-child(1) { margin-bottom: 28px; }
.screen--awesome > *:nth-child(2) { margin-bottom: 12px; }
.screen--awesome > *:nth-child(3) { color: var(--slate-600); }
.screen--awesome > *:nth-child(4) { margin-bottom: 28px; color: var(--slate-700); }

/* b) «¡Es bueno saberlo!» y «Es un reto para muchos» — con h-full
      y margen inferior en los hijos 1, 3 y 4. */
.screen--note { gap: 0; }
.screen--note > *:nth-child(1),
.screen--note > *:nth-child(3),
.screen--note > *:nth-child(4) { margin-bottom: 28px; }
.screen--note > *:nth-child(2) { margin-bottom: 12px; }

/* Caja lila donde va la animación.
   La altura tiene que ser DEFINIDA (no sólo min-height): si no, el
   lienzo de Rive se redimensiona a sí mismo y la caja crece sola. */
.art-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 215px;
  min-height: 215px;
  padding: 8px;
  border-radius: var(--radius-small);
  background-color: var(--violet-25);
}
/* la variante «box-sm» (min-h-0 en el original) acaba midiendo 231px */
.art-box--sm { height: 231px; min-height: 0; }
.art-box canvas { width: 100%; height: 100%; vertical-align: top; }
.art-box__inner { width: 100%; height: 100%; }

/* animación grande de «Tu artista ha comenzado» */
.art-big {
  margin: -48px auto;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;
}

/* El canvas NECESITA esta regla. Sin ella se queda en su tamaño
   intrínseco (300x150, que Rive dobla a 600x300 por el devicePixelRatio)
   y se sale de la pantalla: medido en un móvil de 375px, la página
   se desplazaba 241px de lado justo en esta pantalla.

   `.art-box canvas` ya la tenía; a `.art-big` se le olvidó.          */
.art-big canvas { width: 100%; height: 100%; vertical-align: top; }

/* píldora «Dibujando ahora», con el punto pulsante del original */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background-color: var(--purple-50);
}
.pill p { font-size: 12px; line-height: 16px; color: var(--violet-500); }

.pill__dot { position: relative; display: flex; width: 8px; height: 8px; flex-shrink: 0; }
.pill__dot span { border-radius: 9999px; }
.pill__dot span:first-child {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  background: var(--violet-400);
  opacity: .75;
  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.pill__dot span:last-child {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  background: var(--violet-500);
}
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pill__dot span:first-child { animation: none; } }


/* =============================================================
   27. FECHA DE NACIMIENTO
   ============================================================= */
.screen--birthday { flex: 1 1 auto; }
.bd-head { display: flex; flex-direction: column; gap: 12px; }

.zodiac-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 0;
  width: 100%;
}
.zodiac-side { display: flex; flex-direction: column; align-items: center; opacity: .5; }
.zodiac-side img { width: 48px; height: 48px; }
.zodiac-side span { width: 80px; font-size: 14px; line-height: 20px; text-align: center; }

.zodiac-main { width: 112px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.zodiac-main img { width: 112px; height: 112px; }
.zodiac-main span { width: 100%; font-size: 16px; line-height: 24px; font-weight: 700; text-align: center; }

.bd-field-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
  max-width: 400px;
  margin: 0 auto;
}
.bd-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 64px;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  background-color: var(--default-100);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  cursor: text;
  transition: background-color .15s;
}
.bd-field:hover { background-color: hsl(240 5.88% 90%); }
.bd-field__label { display: block; width: 100%; font-size: 16px; line-height: 24px; color: var(--default-600); }
.bd-segments {
  display: flex;
  align-items: center;
  height: 24px;
  width: 100%;
  gap: 2px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.bd-seg {
  padding: 0 2px;
  border-radius: 6px;
  outline: none;
  color: var(--foreground-500);
  caret-color: transparent;
  transition: background-color .15s, color .15s;
}
.bd-seg[data-filled="true"] { color: rgb(17, 24, 28); }
.bd-seg:focus { background-color: hsl(240 4.88% 83.92% / .5); color: #000; }
.bd-sep { color: var(--foreground-500); }


/* =============================================================
   28. SELECCIÓN MÚLTIPLE
   ============================================================= */
.screen--multi { height: 90%; overflow-y: auto; }
@media (min-width: 768px) { .screen--multi { height: 100%; } }

.multi-list { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; }

.multi-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;   /* texto a la izquierda, casilla a la derecha */
  width: 100%;
  margin: 0;
  padding: 16px;
  gap: 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  background-color: var(--blue-50);
  color: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color .3s, background-color .3s;
}
.multi-item input {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .0001;
  z-index: 1;
  cursor: pointer;
  margin: 0;
}
.multi-item__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
  border-radius: calc(var(--radius-medium) * .6);
  overflow: hidden;
}
.multi-item__box::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--default);
  border-radius: 7px;                /* la casilla redondeada del original */
  box-sizing: border-box;
}
.multi-item__box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: var(--primary);
  transform: scale(.5);
  opacity: 0;
  transform-origin: center;
  transition: transform .2s, opacity .2s;
}
.multi-item__box svg { position: relative; z-index: 1; width: 12px; height: 9px; color: #fff; opacity: 0; }
.multi-item input:checked ~ .multi-item__box::after { transform: scale(1); opacity: 1; }
.multi-item input:checked ~ .multi-item__box svg { opacity: 1; }
/* la clase la pone quiz.js (más fiable que :has en navegadores antiguos) */
.multi-item.is-checked { color: #fff; background-color: var(--blue); }
@media (hover: hover) { .multi-item:hover { background-color: var(--blue); color: #fff; } }
/* el contenido es la misma fila que las opciones: emoji 26px + texto 18/28 */
.multi-item__text {
  width: 100%;
  max-width: calc(100% - 35px);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

/* barra inferior fija en móvil */
.multi-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-top: 1px solid rgb(235, 235, 236);
}
@media (min-width: 768px) {
  .multi-footer { position: relative; padding: 0; border-top: 0; background: transparent; }
}


/* =============================================================
   29. PANTALLA DE ANÁLISIS
   ============================================================= */
.screen--analyzing { display: flex; flex-direction: column; width: 100%; justify-content: space-between; height: 100%; }

.bar-group { display: flex; flex-direction: column; width: 100%; gap: 16px; }
.bar-head  { display: flex; justify-content: space-between; }
.bar-head__label { font-size: 14px; line-height: 20px; font-weight: 600; }
.bar-head__pct   { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--zinc-500);
                   font-variant-numeric: tabular-nums; }
.bar-track { position: relative; z-index: 0; overflow: hidden; height: 8px;
             border-radius: var(--radius-small); background-color: var(--violet-100); }
.bar-fill  { height: 100%; border-radius: var(--radius-small); background-color: var(--violet-600);
             transition: transform .5s linear; }


/* =============================================================
   30. MODALES
   ============================================================= */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  width: 100vw;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}
.backdrop[hidden] { display: none; }

/* Los popups del análisis («¿Te consideras una persona espiritual?»)
   difuminan y oscurecen todo lo de detrás, cabecera incluida, como
   en el original. El fondo deja de competir con la pregunta. */
#modal-question {
  background: rgba(24, 24, 27, .38);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}
#modal-question .modal__body h2 { font-size: 18px; line-height: 26px; }
#modal-question .modal__body { padding: 20px 16px 0; gap: 12px; }
#modal-question .modal__emoji { font-size: 44px; }
#modal-question .modal { max-width: 340px; margin: 4px 16px; }
/* La hoja del correo iba pegada abajo en movil, como una hoja
   deslizante. Se pasa al CENTRO en todos los tamanos: pegada al
   borde inferior, el titular y la pregunta quedan a la altura del
   pulgar y hay que bajar la vista para leerlos justo cuando le
   estas pidiendo el dato mas importante del embudo.

   Al centro se lee de un vistazo y el teclado del movil, al
   abrirse, empuja la hoja hacia arriba sin taparla. */
.backdrop--bottom { align-items: center; }

.modal {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  outline: none;
  overflow-y: hidden;
  margin: 4px 18px;
  max-width: 448px;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
}
@media (min-width: 640px) { .modal { margin: 64px 24px; } }

.modal__body { display: flex; flex: 1 1 0%; flex-direction: column; align-items: center;
               gap: 16px; padding: 24px 16px 0; }
.modal__emoji { font-size: 50px; line-height: 1; }
.modal__body h2 { text-align: center; font-size: 24px; line-height: 32px; font-weight: 400; }
.modal__footer { display: flex; flex-direction: row; gap: 8px; justify-content: flex-end;
                 padding: 16px 16px 24px; }
.modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  min-height: 48px;
  height: 48px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  text-transform: capitalize;
  transition: opacity .25s ease, transform .25s ease;
}
.modal__btn:hover  { opacity: .8; }
.modal__btn:active { transform: scale(.97); }

/* hoja inferior (advertencia y email) */
.sheet {
  /* Deja de ser una hoja pegada al borde: al ir centrada, las
     cuatro esquinas se redondean y se separa de los lados. */
  margin: 0 16px;
  max-width: none;
  border-radius: var(--radius-large);
  box-shadow: none;
  align-items: center;
  padding: 20px;
}
@media (min-width: 640px) {
  .sheet { max-width: 420px; border-radius: var(--radius-medium); border: 1px solid var(--grey-300); }
}
.sheet--email { padding: 20px; }
@media (min-width: 640px) { .sheet--email { padding: 32px; } }

.warn-kicker { display: block; width: 100%; text-align: center; font-size: 24px; line-height: 32px;
               font-weight: 700; text-transform: uppercase; color: rgb(234, 179, 8); }
.warn-body   { margin-top: 12px; margin-bottom: 8px; text-align: center; }
.warn-note   { display: flex; align-items: center; justify-content: center; gap: 6px;
               width: 100%; margin: 20px 0; font-size: 14px; line-height: 20px; color: var(--slate-600); }

/* campo de email */
.email-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 56px;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  background: var(--default-100);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  transition: background-color .15s;
}
.email-field:hover { background: hsl(240 5.88% 90%); }
.email-field label {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transform-origin: top left;
  color: var(--foreground-500);
  font-size: 14px;
  transition: transform .2s ease-out, color .2s ease-out;
}
.email-field label::after { content: '*'; color: rgb(243, 18, 96); margin-inline-start: 2px; }
.email-field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  /* 16px NO es capricho de estilo: Safari en iPhone hace zoom solo
     al tocar cualquier campo con letra menor de 16px, y deja la
     página ampliada y descuadrada. Pasaba justo en el campo de
     correo, la última puerta antes de pagar.

     `maximum-scale=1` del <meta viewport> no lo evita: iOS lo
     ignora desde la versión 10 por accesibilidad.                 */
  font-size: 16px;
  color: rgb(17, 24, 28);
  padding-top: 14px;
}
.email-field:focus-within label,
.email-field.is-filled label { transform: scale(.85) translateY(-11px); color: var(--default-600); }

/* Aviso bajo el campo de correo: erratas de dominio y correos incompletos.
   Ocupa el mismo ancho que el campo para que no descuadre el formulario. */
.email-aviso {
  width: 100%; max-width: 400px; margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.45; color: var(--slate-600);
  text-align: left;
}
.email-aviso--error { color: rgb(190, 30, 45); }
.email-aviso__fix {
  font: inherit; font-weight: 600; color: var(--blue);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.email-aviso__fix:hover { opacity: .8; }

.consent { display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: 400px;
           font-size: 12px; line-height: 16px; color: var(--slate-600); cursor: pointer; }
.consent input { margin-top: 2px; accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; }
.consent a { text-decoration: underline; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  min-height: 56px;
  height: auto;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  background-color: var(--blue);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  white-space: normal;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased;
  outline: none;
  transition-property: transform, color, background-color, border-color, opacity;
  transition-timing-function: ease;
  transition-duration: .25s;
}
.btn-primary:hover    { opacity: .8; }
.btn-primary:active   { transform: scale(.97); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }
@media (min-width: 1024px) { .btn-primary { width: 400px; } }


/* =============================================================
   31. PÁGINA REVIEW  (/es/soulmate/review)
   ============================================================= */
/* el <main> del original mide el 100% del shell y desborda por debajo
   del header: sin flex-shrink:0 el navegador lo encogería a 843px */
.review-main { height: 100%; width: 100%; flex-shrink: 0; }
.review-bg   { height: 100%; width: 100%; background: var(--violet-25); }
.screen--review { background: var(--violet-25); height: 95%; }

.review-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-medium);
  background: #fff;
  box-shadow: var(--shadow-medium);
}
.review-top   { display: flex; justify-content: space-between; align-items: center; }
.review-who   { display: inline-flex; align-items: center; gap: 8px; }
/* el avatar existe en el original pero va oculto (clase `hidden`) */
.review-avatar { display: none; }
.review-who__txt { display: inline-flex; flex-direction: column; align-items: flex-start; }
.review-name  { font-size: 12px; line-height: 16px; font-weight: 500; }
.review-date  { font-size: .625rem; line-height: 14px; font-weight: 500; color: rgb(100, 116, 139); }
.review-stars { display: flex; gap: 4px; font-size: 14px; color: rgb(251, 146, 60); }
@media (min-width: 640px) { .review-stars { font-size: 20px; } }
.review-quote { font-size: 14px; line-height: 20px; font-weight: 500; }
.review-body  { font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(100, 116, 139); }

/* la marquesina de esta página va sobre fondo lila */
.press__viewport--violet { background: var(--violet-25); }

.trust-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.trust-item { display: flex; gap: 12px; align-items: center; }
.trust-icon { display: flex; align-items: center; justify-content: center;
              min-width: 40px; min-height: 40px; border-radius: var(--radius-small);
              background: rgb(241, 245, 249); }
.trust-icon .iconify-inline { width: 24px; height: 24px; }
.trust-item span { font-size: 16px; line-height: 24px; }
.trust-item b { font-weight: 600; color: #000; }


/* =============================================================
   32. PÁGINA PROMO-CODE  (/es/promo-code)
   ============================================================= */
.promo-art { height: 168px; width: 100%; }
.promo-box {
  width: 100%;
  max-width: 400px;
  padding: 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgb(209, 213, 219);
  background: var(--gray-50);
  border-radius: var(--radius-medium);
}
.promo-box span { color: var(--slate-700); font-weight: 500; }
.btn-primary--xl { border-radius: var(--radius-medium); }


/* =============================================================
   34. PIEZAS SUELTAS DE LOS MODALES
   ============================================================= */
.warn { width: 100%; }
.email-head { padding: 0; }
.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
}
@media (min-width: 640px) { .email-form { padding-top: 24px; } }

/* El titular de la hoja del correo. En el original va como titulo
   de pagina; aqui va encima del subtitulo, mas pequeno, para que
   la jerarquia siga siendo: promesa -> pregunta -> campo. */
.email-head__k {
  display: block;
  margin-bottom: 6px;
  font-size: 15px; line-height: 1.35; font-weight: 600;
  color: var(--slate-600);
  text-wrap: balance;
}

/* -------------------------------------------------------------
   LA TARJETA DEL CORREO
   -------------------------------------------------------------
   Solo esta pantalla. El resto de modales se quedan como estaban:
   tocar `.backdrop` a secas cambiaria tambien el aviso de
   ADVERTENCIA y cualquier otro que venga despues, y no es lo que
   se ha pedido.

   Fondo atenuado y tarjeta blanca con sombra, como el original. No
   es estetica: separa lo que hay que rellenar de la pantalla de
   carga que sigue corriendo detras. Antes el formulario flotaba
   sobre las barras de progreso sin ningun borde, y no quedaba
   claro que era una sola cosa.
------------------------------------------------------------- */
/* COMO EN EL ORIGINAL: una pantalla entera. Fondo gris azulado, el
   titular grande arriba como cabecera de página, el retrato borroso
   debajo y la tarjeta blanca pegada al borde inferior a todo el
   ancho, con las esquinas de arriba redondeadas. */
#modal-email {
  /* Debajo de la cabecera, que sigue a la vista con el logo. */
  top: 57px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  background: #DDE0E8;
  overflow: hidden;
}

.email-pagina {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 0;
  pointer-events: none;
}
.email-pagina__titulo {
  display: block;
  width: 100%;
  max-width: 400px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  color: rgb(17, 24, 28);
  text-wrap: balance;
}
.email-fondo {
  width: 311px;
  max-width: 82%;
  height: 350px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 8px;
}
.email-fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: blur(8px);
  transform: scale(1.06);
}

#modal-email .sheet--email {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 30px rgba(24, 24, 27, .10);
  padding: 20px 16px 22px;
}
@media (min-width: 640px) {
  #modal-email .sheet--email { max-width: 448px; margin: 0 auto; }
}
#modal-email .email-form { padding-top: 16px; }
#modal-email .btn-primary { min-height: 56px; font-size: 18px; }

/* La casilla de los términos: 20 px y redondeada, como la suya. */
.consent input {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: 0;
  border: 2px solid var(--default, #d4d4d8);
  border-radius: 7px;
  background: #fff;
  display: inline-grid; place-items: center;
  cursor: pointer;
}
.consent input::before {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.consent input:checked { background: var(--blue); border-color: var(--blue); }
.consent input:checked::before { opacity: 1; }
.consent { align-items: center; font-size: 13px; line-height: 18px; }


/* -------------------------------------------------------------
   LOS TRES CHIPS Y LA LINEA DE PRIVACIDAD
   -------------------------------------------------------------
   Van DEBAJO del boton, no encima. Encima empujarian el campo de
   correo fuera de la primera pantalla en un movil pequeno, y el
   campo es lo que la persona ha venido a rellenar.

   Tres columnas iguales para que los chips queden alineados
   aunque los textos midan distinto («Femenino» contra «30-40»).
   Debajo de 340px se apilan: apretarlos a la fuerza parte las
   palabras y eso se ve barato justo donde hay que dar confianza.
------------------------------------------------------------- */
.email-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
@media (max-width: 340px) {
  .email-chips { grid-template-columns: 1fr; }
}

.email-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  min-width: 0;
}

.email-chip__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: hsl(240 5.88% 94%);
  color: var(--violet-500);           /* el icono en morado, como el original */
  margin-bottom: 2px;
}
.email-chip__ico svg { width: 20px; height: 20px; display: block; }

.email-chip__et {
  font-size: 12px; line-height: 1.2;
  color: rgb(82, 82, 91);
}
.email-chip__v {
  font-size: 14px; line-height: 1.25; font-weight: 600;
  color: rgb(24, 24, 27);
  overflow-wrap: anywhere;
}

/* La promesa de privacidad, justo donde se pide el correo. Es el
   sitio donde sirve: dicha en cualquier otro paso no la lee nadie. */
.email-privacidad {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 2px 0 0;
  font-size: 14px; line-height: 1.4;
  color: var(--slate-700);
  text-align: left;
}
.email-privacidad__escudo { flex: 0 0 auto; line-height: 0; margin-top: 1px; }
.email-privacidad__escudo svg { width: 16px; height: 16px; display: block; }


/* =============================================================
   EL ENLACE DE RESCATE  (gracias.html)
   =============================================================
   Aparece entre el texto de confirmacion y el boton de «Ver mi
   informe». Tiene que leerse como un aviso util, no como letra
   pequena: quien no lo lea y cambie de aparato pierde lo que
   acaba de pagar.

   Fondo violeta muy claro para que destaque sobre el blanco sin
   parecer una alerta de error.
   ============================================================= */
.rescate {
  width: 100%;
  margin: 4px 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-large, 16px);
  background: #F6F1FD;
  border: 1px solid #E3D6F7;
  text-align: left;
}

.rescate__t {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
  color: #4A2183;
}

.rescate__d {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5A5566;
}

.rescate__caja {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 16px obligatorio: por debajo, el Safari del iPhone hace zoom
   solo al tocar el campo y descoloca la pantalla entera. */
.rescate__url {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #D9CBEF;
  border-radius: 10px;
  background: #fff;
  color: #14121C;
  /* El enlace es larguisimo. Que se pueda ver el principio y se
     desplace dentro del campo, en vez de romper la caja. */
  text-overflow: ellipsis;
}

.rescate__btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #6321A5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.rescate__btn:active { background: #4A2183; }

/* A 320 px el campo y el boton juntos no caben con holgura. */
@media (max-width: 360px) {
  .rescate__caja { flex-direction: column; }
  .rescate__btn  { width: 100%; padding: 11px 16px; }
}

/* =============================================================
   LA RUEDA DE FECHA DE NACIMIENTO
   =============================================================
   Tres columnas que se arrastran con el pulgar, como el original.

   COMO FUNCIONA, PORQUE NO ES OBVIO
   ---------------------------------
   No hay JavaScript moviendo nada. Cada columna es un contenedor
   con scroll normal y `scroll-snap-type: y mandatory`: el navegador
   se encarga de la inercia y de encajar la fila en su sitio. Eso da
   el tacto nativo del movil gratis, y funciona igual en un iPhone
   que en un Android viejo.

   El JavaScript solo mira, cuando el dedo suelta, que fila quedo en
   el centro, y pone el relleno del <ul> (mitad de las filas visibles
   menos una) para que la primera opcion pueda llegar al centro.

   CUANTAS FILAS SE VEN LO DECIDE EL ALTO DEL MOVIL
   -----------------------------------------------
   `--bd-filas` vale 7 por defecto, 5 en moviles bajos y 9 en los
   altos. Alto de rueda, banda y velos salen de ahi por `calc()`.
   El alto de fila (36px) tambien esta en `quiz.js` como `ALTO`: si
   cambias uno, cambia el otro.

   EL DESVANECIDO SON DOS VELOS, NO UNA MASCARA
   --------------------------------------------
   Antes la rueda llevaba `mask-image` encima del propio elemento
   que hace scroll y Chrome en Android la repintaba en cada pixel:
   se veia a tirones. Ahora son dos degradados fijos (`.bd-velo`)
   por encima de las columnas, que no cuestan nada al desplazar.
   ============================================================= */
.screen--birthday {
  --bd-filas: 7;
  --bd-alto-fila: 36px;
  /* Cabe entero en la pantalla: nada de scroll de pagina con el
     boton pisando la rueda. `svh` es el alto con las barras del
     navegador puestas; si no existe, `vh`. */
  height: auto;
  min-height: calc(100vh - 57px);
  min-height: calc(100svh - 57px);
  gap: 16px;
  padding: 24px 16px 0;
  justify-content: flex-start;
}
/* El boton se queda pegado abajo del todo, con su propio aire. */
.screen--birthday .screen__cta { margin-top: auto; padding: 8px 0 12px; }

/* -------------------------------------------------------------
   LA CAJA, CUANDO LLEVA RUEDAS
   -------------------------------------------------------------
   `.bd-field` nacio para una sola linea de texto y por eso tiene
   `height: 64px` clavado. Aqui se suelta la altura solo para esta
   variante. La etiqueta se esconde a la vista pero SIGUE existiendo
   para los lectores de pantalla.
------------------------------------------------------------- */
.bd-field--ruedas {
  height: auto;
  align-items: stretch;
  padding: 0;
}
.bd-field--ruedas,
.bd-field--ruedas:hover { background: #fff; box-shadow: none; }
.bd-field--ruedas .bd-field__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bd-ruedas {
  position: relative;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: stretch;
  height: calc(var(--bd-filas) * var(--bd-alto-fila));
  overflow: hidden;
}

/* La banda gris que marca la fila elegida. Va DEBAJO del texto:
   pinta el fondo, no lo tapa. */
.bd-banda {
  position: absolute;
  top: calc((var(--bd-filas) - 1) / 2 * var(--bd-alto-fila));
  left: 0; right: 0;
  height: var(--bd-alto-fila);
  background: #F1EFF5;
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}

/* Los velos: blanco arriba y abajo que se funde hacia el centro.
   Por encima de las columnas, sin recibir el dedo. */
.bd-velo {
  position: absolute;
  left: 0; right: 0;
  height: calc((var(--bd-filas) - 1) / 2 * var(--bd-alto-fila));
  pointer-events: none;
  z-index: 2;
}
.bd-velo--arriba { top: 0;    background: linear-gradient(to bottom, #fff 12%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%); }
.bd-velo--abajo  { bottom: 0; background: linear-gradient(to top,    #fff 12%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%); }

.bd-rueda {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  outline: none;
  text-align: center;
  scrollbar-width: none;
}
.bd-rueda::-webkit-scrollbar { display: none; }

.bd-rueda ul {
  list-style: none;
  margin: 0;
  /* El relleno real lo pone quiz.js al medir; esto es el valor
     para 7 filas por si el script tarda. */
  padding: calc((var(--bd-filas) - 1) / 2 * var(--bd-alto-fila)) 0;
}

.bd-rueda li {
  height: var(--bd-alto-fila);
  line-height: var(--bd-alto-fila);
  scroll-snap-align: center;
  font-size: 16px;
  color: #A9A4B4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .14s ease;
  -webkit-user-select: none;
          user-select: none;
}
.bd-rueda li[aria-selected="true"] {
  color: #14121C;
  font-weight: 700;
  font-size: 17px;
}

/* Con el teclado (escritorio) se ve cual columna esta activa. */
.bd-rueda:focus-visible { box-shadow: 0 0 0 2px #C9B4E8; border-radius: 10px; }

/* A 320 px las tres columnas se aprietan; el mes es el que mas
   texto lleva, asi que se le baja un punto la fuente. */
@media (max-width: 360px) {
  .bd-rueda--mes li { font-size: 15px; }
}

/* MOVILES BAJOS (un Android con la barra de Chrome ronda los 700 px):
   zodiaco mas pequeño y menos aire; siguen cabiendo 7 filas. */
@media (max-height: 780px) {
  .screen--birthday { gap: 10px; padding-top: 16px; }
  .screen--birthday .screen__cta { padding: 4px 0 8px; }
  .screen--birthday .bd-head { gap: 6px; }
  .screen--birthday .q-title { font-size: 22px; line-height: 28px; }
  .screen--birthday .q-subtitle { font-size: 16px; line-height: 22px; }
  .screen--birthday .zodiac-row { padding: 0; gap: 20px; }
  .screen--birthday .zodiac-main { width: 96px; gap: 6px; }
  .screen--birthday .zodiac-main img { width: 84px; height: 84px; }
  .screen--birthday .zodiac-side img { width: 40px; height: 40px; }
  .screen--birthday .zodiac-side span { font-size: 13px; }
}
/* Muy bajos (iPhone SE, navegadores con dos barras): 5 filas. */
@media (max-height: 640px) {
  .screen--birthday { --bd-filas: 5; }
  .screen--birthday .q-subtitle { display: none; }
  .screen--birthday .zodiac-main img { width: 64px; height: 64px; }
  .screen--birthday .zodiac-side img { width: 32px; height: 32px; }
}
/* MOVILES ALTOS: 9 filas, como se ve en el original. */
@media (min-height: 900px) {
  .screen--birthday { --bd-filas: 9; }
}

/* =============================================================
   LAS ANIMACIONES PROPIAS  (js/animaciones.js)
   =============================================================
   Movimientos cortos y lentos a proposito. Estas pantallas duran
   unos segundos y la persona esta leyendo una frase: una animacion
   que se agita compite con el texto en vez de acompanarlo.
   ============================================================= */
.anim { display: block; width: 100%; height: 100%; max-height: 260px; }

/* LOS TRANSFORM DE ESTAS ANIMACIONES SON *SOLO* EL MOVIMIENTO.
   Nada de `translate(100px, 80px)` dentro de un keyframe para
   recolocar el dibujo: eso ya lo hace el `<g>` de fuera con su
   atributo, y repetirlo aqui lo movia el doble. Cuando el giro
   necesita un centro que no es el del propio dibujo, se dice con
   `transform-origin`, no metiendolo en el fotograma.

   `transform-box: fill-box` hace que `center` signifique el centro
   del dibujo y no el del lienzo entero. Sin eso, el corazon late
   creciendo hacia una esquina. */

/* Late como un corazon de verdad: dos tiempos seguidos y una pausa
   larga. Un pulso regular parece un boton parpadeando. */
@keyframes anim-latido {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.1); }
  16%      { transform: scale(1); }
  24%      { transform: scale(1.07); }
  32%      { transform: scale(1); }
}
.anim-late {
  animation: anim-latido 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes anim-chispeo {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-6px); }
}
.anim-chispas circle { animation: anim-chispeo 2.8s ease-in-out infinite; }
.anim-chispas circle:nth-child(2) { animation-delay: .5s; }
.anim-chispas circle:nth-child(3) { animation-delay: 1.1s; }
.anim-chispas circle:nth-child(4) { animation-delay: 1.7s; }

@keyframes anim-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.anim-flota { animation: anim-flotar 3.4s ease-in-out infinite; }

/* Las dos ideas dando vueltas al cerebro. Van dibujadas donde tocan
   dentro del lienzo y giran sobre el centro del cerebro. */
@keyframes anim-girar { to { transform: rotate(360deg); } }
.anim-orbita {
  animation: anim-girar 7s linear infinite;
  transform-box: view-box;
  transform-origin: 100px 80px;
}
.anim-orbita--lenta { animation-duration: 11s; animation-direction: reverse; }

/* Las dos figuras se acercan hasta juntarse y se quedan. */
@keyframes anim-izq { 0% { transform: translateX(-16px); } 60%, 100% { transform: translateX(0); } }
@keyframes anim-der { 0% { transform: translateX(16px);  } 60%, 100% { transform: translateX(0); } }
.anim-acerca-izq { animation: anim-izq 3.6s ease-out infinite; }
.anim-acerca-der { animation: anim-der 3.6s ease-out infinite; }

@keyframes anim-clavar {
  0%, 12% { transform: translate(26px, -26px); opacity: 0; }
  26%     { transform: translate(0, 0);        opacity: 1; }
  100%    { transform: translate(0, 0);        opacity: 1; }
}
.anim-clava { animation: anim-clavar 3.2s ease-out infinite; }

@keyframes anim-saltar {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  30%      { transform: translateY(-10px) rotate(-3deg); }
  60%      { transform: translateY(0)     rotate(2deg); }
}
.anim-salta {
  animation: anim-saltar 2.9s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Se balancea colgada del cruce del palo con el brazo, no de su
   propio centro: una balanza que gira por la mitad no es balanza. */
@keyframes anim-balanceo {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
.anim-balancea {
  animation: anim-balanceo 3.6s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 100px 34px;
}

/* Quien pide que la pantalla no se mueva, ve el dibujo quieto. */
@media (prefers-reduced-motion: reduce) {
  .anim * { animation: none !important; }
}


/* =============================================================
   GRACIAS · el artista dibuja y el boceto aparece
   ============================================================= */
.artista-progreso { width: 100%; max-width: 400px; margin: 4px auto 18px; }
.artista-progreso__barra { height: 6px; border-radius: 999px; background: #E4E4E7; overflow: hidden; }
.artista-progreso__fill { height: 100%; width: 4%; border-radius: 999px; background: var(--violet-500, #7828C8); transition: width .6s ease; }
.artista-progreso__txt { margin: 8px 0 0; font-size: 13px; color: var(--slate-600, #475569); text-align: center; }
/* Alto fijo, no `aspect-ratio`: dentro de `.screen` (flex en columna)
   el alto automático se quedaba en 0 y el boceto salía aplastado. */
.retrato-final { width: 260px; height: 260px; max-width: 80vw; max-height: 80vw; flex: 0 0 auto;
                 margin: 8px auto 18px; border-radius: 16px; overflow: hidden;
                 box-shadow: 0 18px 44px -16px rgba(24,24,27,.45); background: #efe9e0;
                 animation: retrato-aparece .7s ease both; }
.retrato-final img { display: block; width: 100%; height: 100%; object-fit: cover; }
.retrato-final[hidden] { display: none; }
@keyframes retrato-aparece { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }