:root {
  /* Todo lo que NO es la imagen en la portada: barra superior, relleno del stage y la flecha
     de bajar con su etiqueta. Se afina midiendo, no a ojo. */
  --portada-reserva: 196px;
  --bg: #000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --line: rgba(255, 255, 255, .15);
  --line-strong: rgba(255, 255, 255, .28);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --quiet: #6e6e73;
  --white: #fff;
  --black: #09090a;
  --blue: #0a84ff;
  --danger: #ff453a;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(22px, env(safe-area-inset-bottom));
  /* El aire alrededor de la barra de progreso. Un solo valor para los dos lados: la barra tenia
     6px por arriba y la pregunta caia 111px por debajo, asi que la linea parecia pegada al logo y
     colgando de nada. Los 6px que se restan son lo que el propio nodo deja entre su borde y los
     puntos. */
  --gap-progress: clamp(22px, 3.2vh, 34px);
  /* El hueco entre los cuatro bloques de la portada: titular, subtítulo, nota con estrellas y
     botones. Uno solo, porque tenían tres valores distintos que además se sumaban —el `gap` del
     contenedor y el `margin-top` del bloque de acción— y el salto hasta el botón salía casi el
     doble que los demás. */
  --gap-hero: clamp(24px, 3.6vh, 32px);
  /* La separación entre tarjetas de «Todo lo que incluye tu plan». La flecha que cierra el bloque
     usa la misma: puesta más lejos flotaba entre dos secciones sin pertenecer a ninguna. */
  --gap-bloques: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100svh; overflow-x: hidden; }
body.opening-page { min-height: 100svh; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.surface:focus-visible { outline: none; }

.opening-constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
}
body.opening-page .opening-constellation { opacity: 1; }

.constellation-color-tool {
  position: relative;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
body.opening-page .constellation-color-tool { display: inline-flex; }
/* El panel sí flota: desplegado dentro del pie empujaría la página hacia abajo cada vez que se
   abre. Se ancla al punto y se levanta por encima. */
body.opening-page .constellation-color-tool .constellation-color-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
}
/* Solo el punto de color: sin cápsula gris ni anillo blanco alrededor. Junto a «Aviso legal» tiene
   que leerse como una muestra del color, no como un tercer botón. */
.constellation-color-toggle {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.constellation-color-current {
  width: 14px;
  height: 14px;
  display: block;
  border: 0;
  border-radius: 50%;
}
.constellation-color-toggle:hover .constellation-color-current { transform: scale(1.15); }
.constellation-color-current { transition: transform .16s ease; }
.constellation-color-panel {
  width: 218px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(22, 22, 24, .94);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.constellation-color-handle {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -3px -2px 7px;
  padding: 0 2px 5px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: var(--quiet);
  cursor: grab;
  font-size: 10px;
  font-weight: 650;
  user-select: none;
  touch-action: none;
}
.constellation-color-tool[data-dragging="true"] .constellation-color-handle { cursor: grabbing; }
.constellation-color-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.constellation-color-panel > strong { display: block; padding: 2px 5px 9px; font-size: 13px; }
.constellation-color-presets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 4px 10px; }
.constellation-color-presets button {
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--preset);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  cursor: pointer;
}
.constellation-color-presets button[aria-pressed="true"] { border-color: #fff; transform: scale(1.08); }
.constellation-color-custom {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.constellation-color-custom input { width: 38px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.constellation-color-reset {
  width: 100%;
  margin-top: 7px;
  padding: 7px;
  border-radius: 9px;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}
.constellation-color-reset:hover { background: rgba(255, 255, 255, .05); color: var(--text); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--safe-top) 24px var(--safe-bottom);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.opening-page .app-shell { min-height: 100svh; }
.success-page .app-shell { grid-template-rows: auto minmax(0, 1fr) auto; }

.topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 650; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.progress-label, .reset-button, .sample-plan-link { color: var(--quiet); font-size: 12px; font-weight: 600; }
.sample-plan-link { text-decoration: none; }
.sample-plan-link:hover { color: var(--text); }
.reset-button { padding: 6px 0; background: transparent; cursor: pointer; text-decoration: none; }
.reset-button:hover { color: var(--text); }
.topbar-actions .reset-button {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: .5px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(44, 44, 46, .72);
  color: #f5f5f7;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12), 0 4px 18px rgba(0, 0, 0, .14);
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.16, 1, .3, 1);
}
.topbar-actions .reset-button:hover { border-color: rgba(255, 255, 255, .24); background: rgba(58, 58, 60, .88); }
.topbar-actions .reset-button:active { transform: scale(.96); }
.topbar-actions .reset-button:focus-visible { outline: 3px solid rgba(10, 132, 255, .38); outline-offset: 2px; }
.topbar-actions .route-map-link { border-color: rgba(10, 132, 255, .34); background: rgba(10, 132, 255, .14); color: #64b5ff; }
.topbar-actions .route-map-link:hover { border-color: rgba(10, 132, 255, .52); background: rgba(10, 132, 255, .22); color: #8ac4ff; }
.topbar-actions #reset-button { border-color: rgba(255, 69, 58, .22); background: rgba(255, 69, 58, .1); color: #ff6961; }
.topbar-actions #reset-button:hover { border-color: rgba(255, 69, 58, .4); background: rgba(255, 69, 58, .17); color: #ff817a; }
.route-map-label-short { display: none; }
.progress-track { position: relative; height: 22px; margin-top: calc(var(--gap-progress) - 6px); overflow: visible; }
/* La portada no muestra progreso, pero el nodo conserva su fila para que stage siga ocupando la
   franja flexible y el conjunto central no salte hacia arriba. */
.opening-page .progress-track { height: 0; margin-top: 0; visibility: hidden; }
.progress-line { position: absolute; z-index: 0; top: 9px; right: 10%; left: 10%; height: 4px; border-radius: 999px; background: #242426; overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .46s cubic-bezier(.22, .61, .36, 1); }
.progress-blocks { position: absolute; z-index: 1; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.progress-blocks li { display: grid; place-items: center; }
.progress-blocks i {
  width: 10px;
  height: 10px;
  display: block;
  border: 2px solid #4a4a4f;
  border-radius: 50%;
  background: #1c1c1e;
  box-shadow: 0 0 0 3px #000;
  transition: width .3s cubic-bezier(.22, .61, .36, 1), height .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.progress-blocks li[data-state="complete"] i { border-color: var(--blue); background: var(--blue); }
.progress-blocks li[data-state="active"] i { width: 16px; height: 16px; border: 3px solid #fff; background: var(--blue); box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(10, 132, 255, .42); }

.stage { width: 100%; min-width: 0; min-height: 0; display: grid; align-items: center; justify-items: center; padding: clamp(36px, 5.5vh, 72px) 0 clamp(40px, 6vh, 84px); }
/* Dentro del cuestionario la pregunta cuelga de la barra de progreso, no del centro de la pantalla:
   centrada, la distancia hasta el titulo cambiaba con lo larga que fuera cada pregunta. La portada
   se queda centrada, que es donde esa composicion si es la buena. */
.stage.question-stage { align-items: start; padding-top: calc(var(--gap-progress) - 6px); }
.stage.opening-stage { align-items: center; padding: clamp(30px, 4.5vh, 46px) 0 clamp(46px, 6.5vh, 66px); }

/* La portada tiene dos pisos. El primero ocupa la ventana entera y es lo único que ve quien pulsa
   y sigue; el segundo son los cuatro pilares, que solo encuentra quien baja. Por eso el hero
   reserva su altura y los pilares empiezan claramente por debajo del pliegue. */
/* La portada ocupa UNA pantalla exacta y no una y pico.
   Tienen que caber siempre: el titular, «Continuar», «Continuar donde lo dejaste» cuando existe,
   y la flecha con su etiqueta. Nada de eso se puede encoger —el titular hay que leerlo y los
   botones hay que tocarlos—, asi que la que cede el hueco es la imagen: crece o mengua con lo que
   sobra. Por eso es `flex: 1` y no una proporcion fija, que era lo que se salia del pliegue en
   cuanto aparecia el segundo boton.
   `dvh` y no `vh`: en el movil la barra del navegador aparece y desaparece, y con `vh` la flecha
   se quedaba siempre debajo del corte. */
.opening-hero {
  height: calc(100dvh - var(--portada-reserva));
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Sin tope: la imagen se queda TODO lo que sobra despues de colocar titular, botones y flecha.
   Cuanto mas alta sea la caja, menos hay que recortar. El calculo lo hace el flex solo, y se
   reajusta si aparece el segundo boton o si cambia el alto del telefono. */
.opening-hero__art { flex: 1 1 auto; min-height: 150px; overflow: hidden; }
.opening-hero .opening-message,
.opening-hero .opening-action { flex: 0 0 auto; }

/* Al pulsar la flecha el bloque tiene que quedar pegado arriba del todo, sin que asome una
   franja del bloque anterior. La barra superior no es fija, asi que no hay que reservarle nada:
   el unico margen es lo que la banda de color sobresale por encima de la seccion. */
.opening-pillars { scroll-margin-top: 56px; }

/* Las resenas y las preguntas NO se pegan al borde. Son bloques negros sobre fondo negro: sin aire
   arriba parecen la continuacion del anterior en vez de una seccion nueva.
   El relleno son los mismos 72 px que en los pilares saca la banda gris por encima del titulo, para
   que los dos titulos respiren igual. Y con `scroll-margin` a cero ese relleno es exactamente lo
   que se ve al llegar. */
.opening-reviews { padding-top: var(--aire-titulo, 57px); }
.opening-faq { padding-top: var(--aire-titulo, 57px); }

.opening-reviews,
.opening-faq { scroll-margin-top: 0; }

.opening-pillars {
  /* Esta separacion es lo que mantiene el gris FUERA de la primera pantalla. La banda arranca 72 px
     por encima de la seccion, asi que el margen tiene que ser bastante mayor que eso o en un
     telefono corto asoma una franja gris por abajo nada mas entrar. */
  margin: clamp(160px, 18vh, 200px) auto 0;
  width: min(100%, 720px);
  text-align: left;
}

/* Título de sección. Grande y con el interletrado apretado: es el recurso con el que una página de
   producto marca dónde empieza cada idea sin poner una línea ni un fondo distinto. */
.opening-section-title {
  margin: 0 0 clamp(22px, 3.4vh, 34px);
  /* Aire por encima al llegar saltando con la flecha: pegado al borde de la pantalla el título
     parece cortado y la sección no se lee como una sección. */
  scroll-margin-top: clamp(76px, 13vh, 140px);
  color: var(--text);
  font-size: clamp(26px, 6.4vw, 38px);
  font-weight: 640;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.opening-pillars__list { margin: 0; padding: 0; display: grid; gap: var(--gap-bloques); list-style: none; }

/* El icono va FUERA de la tarjeta, no dentro.
   Metido dentro competía con el relleno y el borde de la tarjeta, así que no podía pasar de unos
   pocos centímetros sin ahogar el texto. Suelto a la izquierda puede ser tan grande como quepa, y
   la tarjeta se queda solo con las palabras. */
.opening-pillar {
  display: grid;
  /* Icono mas estrecho que antes. No es estetica: cada pixel que se le quita al icono se lo lleva
     el texto, que baja de linea y acorta la tarjeta. Es lo que hace que las cuatro quepan. */
  grid-template-columns: clamp(92px, 26vw, 124px) minmax(0, 1fr);
  /* La caja de TEXTO nunca se estira: se queda con su altura natural, asi que jamas puede quedarse
     mas corta que su contenido. Antes iba estirada y el texto salia cortado por abajo en un Chrome
     con SF Pro, donde ocupa un pelo mas que en el navegador donde se probo.
     La que se estira es la baldosa del icono (ver `.opening-pillar__art`), que es lo que consigue
     que las dos columnas midan lo mismo sin arriesgar el texto. */
  align-items: center;
  gap: 14px;
}

/* Las ilustraciones llevan su propia baldosa redondeada, recortada al ras: sobre el negro de la
   página se leen como el icono de una app, sin marco añadido. */
.opening-pillar__art {
  align-self: stretch;
  width: 100%;
  height: 100%;
  display: block;
  /* `contain`, NO `cover`: la baldosa ocupa lo mismo que la caja de texto de al lado, pero el icono
     se ve entero. Con `cover` se recortaba, y eso no se habia pedido. */
  object-fit: contain;
}

.opening-pillar__copy {
  min-width: 0;
  /* `min-content` explicito: la caja no puede encogerse por debajo de su texto ni aunque una regla
     de mas arriba intente darle una altura. */
  min-height: min-content;
  padding: 15px 17px;
  border: .5px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(28, 28, 30, .62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.opening-pillar h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.022em;
  line-height: 1.25;
}

.opening-pillar p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; letter-spacing: -.012em; }

@media (min-width: 720px) {
  /* En dos columnas las tarjetas se juntan, y la flecha las sigue: una sola variable para los dos. */
  :root { --gap-bloques: 14px; }
  .opening-pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opening-pillar { grid-template-columns: 168px minmax(0, 1fr); gap: 16px; }
}

/* Carrusel de valoraciones. Se desplaza con el dedo y se ancla en cada tarjeta; lo hace el
   navegador con `scroll-snap`, sin una línea de JavaScript. El desbordamiento vive AQUÍ y no en la
   página: el cuerpo nunca puede desplazarse en horizontal. */
/* Las flechas que van entre bloques CIERRAN el anterior: van a la misma distancia a la que están
   las tarjetas entre sí, para que se lean como el último elemento de su sección. El aire grande va
   por debajo, separándolas de la siguiente. */
.opening-pillars + .opening-scroll-hint,
.opening-reviews + .opening-scroll-hint { margin-top: var(--gap-bloques); }

.opening-scroll-hint + .opening-reviews,
.opening-scroll-hint + .opening-faq { margin-top: clamp(28px, 5vh, 48px); }

.opening-reviews {
  margin-top: clamp(56px, 10vh, 104px);
  /* Los márgenes negativos sacan el carril hasta los bordes de la pantalla, para que la tarjeta
     siguiente asome y se vea que hay más de una. */
  margin-inline: -24px;
}

.opening-reviews .opening-section-title { padding-inline: 24px; }

.opening-reviews__track {
  margin: 0;
  padding: 4px 24px;
  display: flex;
  gap: 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.opening-reviews__track::-webkit-scrollbar { display: none; }

.opening-review {
  flex: 0 0 min(84%, 340px);
  scroll-snap-align: center;
  padding: 18px 20px;
  border: .5px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(28, 28, 30, .62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  text-align: left;
}

.opening-review__stars { color: #ffd60a; font-size: 13px; letter-spacing: .12em; }
.opening-review h3 { margin: 8px 0 6px; color: var(--text); font-size: 16px; font-weight: 640; letter-spacing: -.02em; line-height: 1.25; }
.opening-review p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; letter-spacing: -.01em; }
.opening-review__by { margin-top: 12px; color: var(--quiet); font-size: 12.5px; font-weight: 600; }

@media (min-width: 720px) {
  .opening-reviews { margin-inline: 0; }
  .opening-reviews .opening-section-title { padding-inline: 0; }
  .opening-reviews__track { padding-inline: 0; }
  .opening-review { flex-basis: min(48%, 360px); }
}

/* Preguntas frecuentes. Acordeón nativo: una lista de filas separadas por una línea fina, que se
   abren al tocarlas. Sin tarjetas ni bordes alrededor — aquí el contenido es texto, y enmarcarlo
   solo añade ruido. */
.opening-faq {
  /* Casi sin margen: el aire sobre el titulo ya lo pone el `padding-top` que iguala esta seccion
     con las otras dos. Sumando los dos salian 140 px de vacio entre el carrusel y el titulo. */
  margin: clamp(6px, 1.4vh, 14px) auto 0;
  width: min(100%, 720px);
  text-align: left;
}

.opening-faq__item { border-top: .5px solid rgba(255, 255, 255, .14); }
.opening-faq__item:last-child { border-bottom: .5px solid rgba(255, 255, 255, .14); }

.opening-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  list-style: none;
}

.opening-faq__item summary::-webkit-details-marker { display: none; }

/* Un más que gira hasta ser un menos: dos trazos y una transición, sin icono que cargar. */
.opening-faq__sign {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--quiet);
  transition: transform .24s cubic-bezier(.33, 1, .68, 1);
}

.opening-faq__sign::before,
.opening-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
}

.opening-faq__sign::after { transform: translateY(-50%) rotate(90deg); transition: opacity .24s ease; }
.opening-faq__item[open] .opening-faq__sign { transform: rotate(180deg); }
.opening-faq__item[open] .opening-faq__sign::after { opacity: 0; }

.opening-faq__item p {
  margin: 0;
  padding: 0 4px 20px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -.012em;
}

@media (prefers-reduced-motion: reduce) {
  .opening-faq__sign, .opening-faq__sign::after { transition: none; }
}

/* La pista de que la portada sigue hacia abajo. Discreta a propósito: si compite con el botón,
   parte la decisión en dos. */
/* La pista de que la portada sigue hacia abajo.
   Separada del botón: pegada parecía parte del bloque de acción y se leía como un tercer botón.
   Y con movimiento, porque en una pantalla negra sin nada cortado por el borde, un elemento quieto
   no dice "hay más": dice "aquí se acaba". */
/* Va DESPUÉS del hero, no dentro.
   Dentro contaba como contenido del bloque centrado y empujaba hacia arriba el titular, la nota y
   el botón: la primera pantalla entera se descolocaba por añadir una flecha. Fuera, el hero
   conserva su altura y su centrado exactos, y la pista se apoya en el hueco que queda hasta el
   borde de la ventana. */
.opening-scroll-hint {
  margin: clamp(24px, 4vh, 40px) auto 0;
  display: flex;
  isolation: isolate;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease;
}

/* Sin pastilla: es un rótulo, no un botón, y encerrarlo competía con el azul de la flecha que
   tiene justo debajo. */
.opening-scroll-hint__label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Círculo con chevron: el gesto de "sigue bajando" de una pantalla de Apple. El aro respira y el
   chevron cae, con el mismo retardo, para que se lean como un solo movimiento. */
.opening-scroll-hint__ring {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 132, 255, .42);
  border-radius: 50%;
  background: rgba(10, 132, 255, .16);
  color: #64b5ff;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 6px 26px rgba(10, 132, 255, .22);
  animation: opening-scroll-ring 2.6s cubic-bezier(.33, 1, .68, 1) infinite;
}

.opening-scroll-hint__ring svg { display: block; animation: opening-scroll-nudge 2.6s cubic-bezier(.33, 1, .68, 1) infinite; }

.opening-scroll-hint:hover .opening-scroll-hint__ring { border-color: rgba(10, 132, 255, .66); background: rgba(10, 132, 255, .26); color: #8ac4ff; }
.opening-scroll-hint:active { transform: scale(.97); }

@keyframes opening-scroll-nudge {
  0%, 55%, 100% { transform: translateY(0); }
  72% { transform: translateY(7px); }
  86% { transform: translateY(2px); }
}

@keyframes opening-scroll-ring {
  0%, 55%, 100% { box-shadow: 0 6px 26px rgba(10, 132, 255, .22), 0 0 0 0 rgba(10, 132, 255, .34); }
  72% { box-shadow: 0 6px 26px rgba(10, 132, 255, .22), 0 0 0 11px rgba(10, 132, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .opening-scroll-hint__ring,
  .opening-scroll-hint__ring svg { animation: none; }
}
.surface { width: min(100%, 760px); min-width: 0; max-width: 100%; text-align: center; animation: surface-in .58s cubic-bezier(.16, 1, .3, 1) both; }
.surface[data-wide="true"] { width: min(100%, 820px); }
.surface[data-step-id="CORE-00"] { position: relative; isolation: isolate; width: min(100%, 920px); }
.surface[data-step-id="CORE-00"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -72px -56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  filter: blur(52px);
  pointer-events: none;
}
.surface[data-step-id="CORE-00"] h1 { max-width: 920px; font-size: clamp(46px, 5.7vw, 68px); line-height: 1.01; letter-spacing: -.058em; }

.surface[data-step-id="CORE-00"] .subtitle { max-width: 700px; margin-top: 28px; }
.surface[data-step-id="CORE-00"] .opening-trust { margin-top: 22px; }
.surface[data-step-id="CORE-00"] .actions { width: min(100%, 420px); margin-top: 38px; }
.surface[data-step-id="CORE-00"] .primary { background: var(--blue); color: var(--white); }
.surface[data-step-id="CORE-00"] .opening-support { margin-top: var(--gap-hero); }
.surface[data-step-id="CORE-00"] .opening-support .subtitle { margin-top: 0; }
.surface[data-step-id="CORE-00"] .opening-action { margin-top: var(--gap-hero); }
.surface[data-step-id="CORE-00"] .opening-action .actions { margin-top: 0; }

/* «Continuar donde lo dejaste» va al lado, no debajo: apilados se comian una fila entera del
   pliegue. Con un solo boton, `flex: 1` le devuelve el ancho completo sin ninguna regla aparte. */
.surface[data-step-id="CORE-00"] .actions { display: flex; flex-direction: row; gap: 10px; }
.surface[data-step-id="CORE-00"] .actions > button { flex: 1 1 0; min-width: 0; }
.surface[data-step-id="CORE-00"] .actions > button.secondary { font-size: 14px; line-height: 1.15; }
.surface[data-step-id="CORE-00"] .opening-meta { margin-top: 16px; font-size: 13px; }
@keyframes surface-in {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: none; }
}

/* Cada nueva pregunta entra como una sola escena y revela sus bloques con una cadencia breve.
   La portada queda fuera porque ya tiene su propia coreografia. */
.surface:not([data-step-id="CORE-00"]) > * {
  animation: step-content-in .62s cubic-bezier(.16, 1, .3, 1) both;
}
.surface:not([data-step-id="CORE-00"]) > :nth-child(1) { animation-delay: .04s; }
.surface:not([data-step-id="CORE-00"]) > :nth-child(2) { animation-delay: .10s; }
.surface:not([data-step-id="CORE-00"]) > :nth-child(3) { animation-delay: .16s; }
.surface:not([data-step-id="CORE-00"]) > :nth-child(n+4) { animation-delay: .22s; }

@keyframes step-content-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Entrada de la portada: cada pieza encuentra su sitio con una cadencia corta, sin bloquear la
   interacción. La curva desacelera pronto, como las transiciones de producto de Apple. */
.surface[data-step-id="CORE-00"] .opening-message h1 {
  animation: opening-copy-in .82s cubic-bezier(.16, 1, .3, 1) .08s both;
}
.surface[data-step-id="CORE-00"] .opening-support .subtitle {
  animation: opening-copy-in .78s cubic-bezier(.16, 1, .3, 1) .20s both;
}
.surface[data-step-id="CORE-00"] .social-proof {
  animation: opening-copy-in .74s cubic-bezier(.16, 1, .3, 1) .32s both;
}
.surface[data-step-id="CORE-00"] .actions .primary {
  border-radius: 999px;
  background: #0a84ff;
  color: var(--white);
  overflow: hidden;
  animation: opening-cta-expand .94s cubic-bezier(.16, 1, .3, 1) .43s both;
}
.surface[data-step-id="CORE-00"] .actions .primary:hover { background: #2492ff; }
.surface[data-step-id="CORE-00"] .actions .secondary[data-resume] {
  border: 0;
  border-radius: 999px;
  background: #2c2c2e;
  color: var(--text);
  animation: opening-copy-in .66s cubic-bezier(.16, 1, .3, 1) .68s both;
}
.surface[data-step-id="CORE-00"] .actions .secondary[data-resume]:hover { background: #3a3a3c; }
.surface[data-step-id="CORE-00"] .opening-meta {
  animation: opening-copy-in .64s cubic-bezier(.16, 1, .3, 1) .72s both;
}

@keyframes opening-copy-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes opening-cta-expand {
  0% { opacity: 0; clip-path: inset(0 49% round 999px); }
  28% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 round 999px); }
}

.creation-surface { width: min(100%, 700px) !important; }
.creation-surface h1 { max-width: 690px; font-size: clamp(46px, 6.2vw, 72px); line-height: 1.01; letter-spacing: -.058em; }
.creation-surface .subtitle { max-width: 610px; margin-top: 24px; }
.creation-progress { width: min(100%, 560px); margin: 48px auto 0; text-align: left; }
.creation-progress-meta { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: -.012em; }
.creation-progress-meta strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.creation-progress-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.creation-progress-track span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width .7s cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
}
.creation-progress-track span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(0, 0, 0, .18) 48%, transparent 76%);
  transform: translateX(-100%);
  animation: progress-sheen 1.8s ease-in-out infinite;
}
.creation-reassurance { max-width: 520px; margin: 18px auto 0; color: var(--quiet); font-size: 13px; line-height: 1.5; text-wrap: balance; }
@keyframes progress-sheen { to { transform: translateX(100%); } }

.eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .055em; }
h1 { max-width: 850px; margin: 0 auto; font-size: clamp(40px, 5.4vw, 60px); line-height: .98; letter-spacing: -.062em; font-weight: 600; text-wrap: balance; }
.subtitle { max-width: 660px; margin: 18px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.48; letter-spacing: -.019em; text-wrap: balance; }
.microcopy, .field-help, .validation-message { max-width: 620px; margin: 13px auto 0; color: var(--quiet); font-size: 13px; line-height: 1.45; }
.opening-trust { max-width: 620px; margin: 25px auto 0; color: var(--text); font-size: 14px; line-height: 1.5; text-wrap: balance; }
.validation-message { color: #ff9f8f; min-height: 19px; }

/* Resalte de la pregunta que falta. Dura poco a proposito: marca donde mirar, no acusa de un
   error —la pregunta no esta mal contestada, esta sin contestar. */
.is-missing {
  animation: senalar-pregunta 1.8s ease-out 1;
  border-radius: 14px;
  scroll-margin-block: 24px;
}

@keyframes senalar-pregunta {
  0%, 55% { box-shadow: 0 0 0 2px rgba(255, 159, 143, .85); }
  100% { box-shadow: 0 0 0 2px rgba(255, 159, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .is-missing { animation: none; box-shadow: 0 0 0 2px rgba(255, 159, 143, .85); }
}

.actions { width: min(100%, 540px); margin: 26px auto 0; display: grid; gap: 10px; }
.primary, .secondary {
  width: 100%; min-height: 56px; border-radius: 999px; padding: 0 22px; cursor: pointer;
  font-weight: 650; letter-spacing: -.018em; transition: transform .16s ease, opacity .16s ease, background .16s ease;
}
.primary { background: var(--white); color: var(--black); }
.surface [data-continue].primary { background: var(--blue); color: var(--white); }
.surface [data-continue].primary:hover { background: #2492ff; }
.secondary { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.surface [data-back].secondary { background: #2c2c2e; color: var(--text); border-color: transparent; }
.surface [data-back].secondary:hover { background: #3a3a3c; }
.button-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.primary:active, .secondary:active, .choice:active { transform: scale(.986); }
/* El boton bloqueado se sigue viendo apagado, pero es pulsable: al pulsarlo lleva a la pregunta
   que falta en vez de no hacer nada. Por eso el cursor no es `not-allowed`. */
.primary:disabled,
.primary[aria-disabled="true"] { opacity: .34; }
.primary:disabled { cursor: not-allowed; }

.privacy-dialog {
  width: min(calc(100% - 32px), 640px);
  max-height: min(88svh, 720px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #111113;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72);
  overflow: auto;
  overscroll-behavior: contain;
}
.privacy-dialog::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(12px); }
.privacy-card { padding: clamp(26px, 5vw, 42px); }
.privacy-card h2 { margin: 0; font-size: clamp(28px, 5vw, 42px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.privacy-card > p:not(.eyebrow, .privacy-links) { margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
/* Confirmacion, con el lenguaje de la propia web y no con el del sistema operativo: tarjeta oscura,
   titulo grande y los mismos botones que usa el cuestionario. La version anterior imitaba el cuadro
   de iOS y parecia pegada de otra aplicacion. */
.confirm-dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100vw;
  max-height: 100svh;
  margin: 0;
  padding: 0 16px max(16px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
.confirm-dialog:focus { outline: none; }
.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, .56);
}
.confirm-card {
  width: min(456px, calc(100vw - 32px));
  max-height: min(calc(100svh - 32px - env(safe-area-inset-bottom)), 780px);
  margin: 0 auto;
  padding: 28px 24px 24px;
  border: .5px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: #1c1c1e;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.confirm-card h2 { margin: 0 0 12px; font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.confirm-card > p { margin: 0 0 12px; font-size: 15px; line-height: 1.47; color: #aeaeb2; }
.confirm-card .actions { display: grid; gap: 12px; margin: 0; }

/* El mapa vive dentro del onboarding sin otra pagina o tarjeta envolvente: solo bloques, preguntas
   y un control para volver. El contexto permanece visible detrás, oscurecido y con un desenfoque corto. */
body.onboarding-map-open { overflow: hidden; }
.onboarding-map-dialog {
  width: min(calc(100% - 32px), 840px);
  max-width: none;
  height: min(92svh, 940px);
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
  animation: onboarding-map-in .46s cubic-bezier(.16, 1, .3, 1) both;
}
.onboarding-map-dialog:focus { outline: none; }
.onboarding-map-dialog::backdrop {
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
}
.onboarding-map-sheet { position: relative; height: 100%; }
.onboarding-map-back {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  width: 116px;
  min-height: 52px;
  padding: 0 20px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(44, 44, 46, .82);
  color: #f5f5f7;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent;
  transition: width .32s cubic-bezier(.2, .8, .2, 1), min-height .32s cubic-bezier(.2, .8, .2, 1), padding .32s cubic-bezier(.2, .8, .2, 1), gap .32s cubic-bezier(.2, .8, .2, 1), background .16s ease, border-color .16s ease, transform .16s ease, font-size .32s cubic-bezier(.2, .8, .2, 1);
}
.onboarding-map-back-icon {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: translateX(1px) rotate(45deg);
}
.onboarding-map-back[data-compact="true"] { width: 92px; min-height: 44px; padding-inline: 15px 17px; gap: 7px; font-size: 13px; }
.onboarding-map-back:hover { border-color: rgba(255, 255, 255, .24); background: rgba(58, 58, 60, .94); }
.onboarding-map-back:active { transform: scale(.96); }
.onboarding-map-back:focus-visible { outline: 3px solid rgba(10, 132, 255, .72); outline-offset: 3px; }
.onboarding-map-scroll {
  height: 100%;
  min-height: 0;
  padding: 76px 8px calc(38px + var(--safe-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.onboarding-map-block + .onboarding-map-block { margin-top: 38px; }
.onboarding-map-block-heading { margin: 0 4px 12px; display: flex; align-items: center; gap: 12px; }
.onboarding-map-block-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #8e8e93;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.onboarding-map-block[data-state="complete"] .onboarding-map-block-number { border-color: rgba(48, 209, 88, .62); background: rgba(48, 209, 88, .16); color: #65d97d; }
.onboarding-map-block[data-state="current"] .onboarding-map-block-number { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(10, 132, 255, .16); }
.onboarding-map-block[data-state="pending"] .onboarding-map-block-heading { color: #8e8e93; }
.onboarding-map-block-heading h3 { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; }
.onboarding-map-question-list { display: grid; gap: 10px; }
.onboarding-map-question {
  width: 100%;
  min-height: 68px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: #1c1c1e;
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.onboarding-map-question[data-state="complete"] { border-color: rgba(48, 209, 88, .68); background: rgba(48, 209, 88, .12); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(48, 209, 88, .04); cursor: pointer; }
.onboarding-map-question[data-state="complete"]:hover { border-color: rgba(48, 209, 88, .86); background: rgba(48, 209, 88, .17); transform: translateY(-1px); }
.onboarding-map-question[data-state="current"] { border-color: rgba(10, 132, 255, .82); background: linear-gradient(135deg, rgba(10, 132, 255, .27), rgba(10, 132, 255, .1)); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .09), 0 10px 32px rgba(10, 132, 255, .09); }
.onboarding-map-question[data-state="pending"] { border-color: rgba(174, 174, 178, .34); color: #aeaeb2; background: rgba(58, 58, 60, .74); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .045); }
.onboarding-map-question:disabled { opacity: 1; cursor: default; }
.onboarding-map-question-number { align-self: stretch; display: grid; place-items: center; color: #6e6e73; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.onboarding-map-question[data-state="complete"] .onboarding-map-question-number { color: #65d97d; }
.onboarding-map-question[data-state="current"] .onboarding-map-question-number { color: #64b5ff; }
.onboarding-map-question-copy { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; font-size: 16px; font-weight: 560; line-height: 1.34; letter-spacing: -.014em; }
.onboarding-map-question-copy small { display: inline-flex; min-height: 20px; padding: 2px 7px; align-items: center; border: .5px solid rgba(255, 214, 10, .38); border-radius: 999px; background: rgba(255, 214, 10, .14); color: #ffd60a; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; box-shadow: 0 0 16px rgba(255, 214, 10, .055); }
/* Distintivo de "aqui lo dejaste". Va en azul y no en el amarillo de "Opcional": no es una nota
   sobre la pregunta, es el sitio al que se vuelve. */
.onboarding-map-question-copy small.onboarding-map-question-resume {
  border-color: rgba(10, 132, 255, .42);
  background: rgba(10, 132, 255, .16);
  color: #64b5ff;
  box-shadow: 0 0 16px rgba(10, 132, 255, .08);
}
.onboarding-map-question-chevron { color: #636366; font-size: 23px; line-height: 1; }
.onboarding-map-question[data-state="complete"] .onboarding-map-question-chevron { color: #65d97d; }
/* La flecha promete que se puede entrar, asi que se ensena exactamente cuando se puede: desde la
   portada eso incluye la pregunta en la que lo dejaste. */
.onboarding-map-question:disabled .onboarding-map-question-chevron { visibility: hidden; }
.onboarding-map-question[data-state="current"]:not(:disabled) .onboarding-map-question-chevron { color: #64b5ff; }
@keyframes onboarding-map-in {
  from { opacity: 0; transform: translateY(22px) scale(.975); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .onboarding-map-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    margin: 0;
  }
  .onboarding-map-back { position: fixed; top: max(16px, var(--safe-top)); left: 16px; }
  .onboarding-map-scroll { padding: calc(84px + var(--safe-top)) 16px calc(30px + var(--safe-bottom)); scrollbar-gutter: auto; }
  .onboarding-map-block + .onboarding-map-block { margin-top: 32px; }
  .onboarding-map-block-heading { margin-inline: 3px; }
  .onboarding-map-block-heading h3 { font-size: 23px; }
  .onboarding-map-question { min-height: 72px; padding: 12px 13px; grid-template-columns: 31px minmax(0, 1fr) auto; column-gap: 8px; border-radius: 15px; }
  .onboarding-map-question-copy { grid-column: 2; font-size: 16px; }
  .onboarding-map-question-copy small { min-height: 19px; padding-inline: 6px; font-size: 9px; }
  .onboarding-map-question-chevron { grid-column: 3; align-self: center; }
}
.cookie-actions { margin-top: 26px !important; }
.cookie-decision,
.cookie-customize { width: 100%; min-height: 54px; border-radius: 14px; padding: 15px 18px; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.015em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, opacity .12s ease, background-color .12s ease; }
/* Aceptar y rechazar son deliberadamente idénticos en tamaño, contraste y orden de capa. */
.cookie-decision { border: 0; background: #fff; color: #000; }
.cookie-customize { border: 0; background: rgba(118, 118, 128, .24); color: var(--text); }
.cookie-reject { background: rgba(118, 118, 128, .24); color: var(--text); }
.cookie-decision:active,
.cookie-customize:active { transform: scale(.98); opacity: .82; }
.cookie-decision:focus-visible,
.cookie-customize:focus-visible,
.cookie-back:focus-visible { outline: 3px solid rgba(10, 132, 255, .72); outline-offset: 3px; }
.cookie-legal-links { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.cookie-legal-links a { color: #8e8e93; font-size: 13px; line-height: 1.4; text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 4px; transition: color .12s ease; }
.cookie-panel-heading { position: relative; min-height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; padding: 0 48px; }
.cookie-panel-heading h2 { margin: 0; text-align: center; font-size: 22px; line-height: 1.2; letter-spacing: -.035em; }
.cookie-back { position: absolute; inset: 50% auto auto 0; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(118, 118, 128, .24); color: #fff; font-size: 0; cursor: pointer; transform: translateY(-50%); -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background-color .12s ease; }
.cookie-back::before { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 2.25px 2.25px; border-radius: 1px; transform: translate(-37%, -50%) rotate(45deg); }
.cookie-back:active { transform: translateY(-50%) scale(.92); background: rgba(118, 118, 128, .32); }
.cookie-preferences { overflow: hidden; border-radius: 16px; background: rgba(118, 118, 128, .20); }
.cookie-preference { position: relative; background: transparent; }
.cookie-preference + .cookie-preference::before { content: ''; position: absolute; z-index: 1; top: 0; right: 0; left: 16px; height: .5px; background: rgba(84, 84, 88, .72); }
.cookie-preference summary { min-height: 74px; padding: 15px 14px 15px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto 13px; align-items: center; gap: 12px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.cookie-preference summary::-webkit-details-marker { display: none; }
.cookie-preference summary > span:first-child strong,
.cookie-preference summary > span:first-child small { display: block; }
.cookie-preference summary::after { content: ''; width: 6px; height: 6px; border: solid #8e8e93; border-width: 0 1.5px 1.5px 0; transform: translate(-1px, -2px) rotate(45deg); transition: transform .16s ease; }
.cookie-preference[open] summary::after { transform: translate(-1px, 2px) rotate(225deg); }
.cookie-preference summary strong { font-size: 16px; font-weight: 600; line-height: 1.28; letter-spacing: -.015em; }
.cookie-preference summary small { margin-top: 3px; color: #8e8e93; font-size: 13px; line-height: 1.3; }
.cookie-preference > p { margin: 0; padding: 0 46px 16px 18px; color: #aeaeb2; font-size: 13px; line-height: 1.5; }
.cookie-switch { position: relative; width: 51px; height: 31px; display: block; flex-shrink: 0; }
.cookie-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cookie-switch > span[aria-hidden="true"],
.cookie-switch.is-required { display: block; width: 51px; height: 31px; border-radius: 999px; background: rgba(120, 120, 128, .32); transition: background .18s ease; }
.cookie-switch > span[aria-hidden="true"]::after,
.cookie-switch.is-required::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .28); transition: transform .18s ease; }
.cookie-switch input:checked + span,
.cookie-switch.is-required { background: var(--blue); }
.cookie-switch input:checked + span::after,
.cookie-switch.is-required::after { transform: translateX(20px); }
.cookie-switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (hover: hover) {
  .cookie-decision:hover { opacity: .92; }
  .cookie-customize:hover,
  .cookie-reject:hover,
  .cookie-back:hover { background: rgba(118, 118, 128, .32); }
  .cookie-legal-links a:hover { color: #f2f2f7; }
}

@media (max-width: 520px) {
  body.opening-page .opening-constellation { opacity: 1; }
  .surface[data-step-id="CORE-00"]::before { inset: -48px -18px; background: rgba(0, 0, 0, .76); filter: blur(38px); }
  .confirm-dialog { padding-inline: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .confirm-card { width: 100%; max-height: calc(100svh - 24px - env(safe-area-inset-bottom)); padding: 24px 18px 20px; border-radius: 26px; }
  .cookie-panel-heading { padding-inline: 44px; }
  .cookie-legal-links { gap: 8px 12px; }
}

@media (max-height: 620px) {
  .confirm-dialog { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .confirm-card { max-height: calc(100svh - 16px - env(safe-area-inset-bottom)); padding-top: 20px; padding-bottom: 16px; }
  .confirm-card h2 { margin-bottom: 8px; font-size: 23px; }
  .confirm-card > p { margin-bottom: 8px; font-size: 14px; line-height: 1.38; }
  .confirm-card .actions { gap: 8px; }
  .cookie-actions { margin-top: 18px !important; }
  .cookie-decision,
  .cookie-customize { min-height: 50px; padding-block: 12px; }
  .cookie-panel-heading { margin-bottom: 14px; }
  .cookie-preference summary { min-height: 68px; padding-block: 12px; }
  .cookie-legal-links { margin-top: 14px; }
}

/* El segundo boton de la portada: existe solo si dejo el cuestionario a medias. */
.opening-action .actions { display: grid; gap: 10px; }
.opening-action .actions .secondary,
.actions .secondary[data-resume] { width: 100%; }

/* Bloque de prueba social de la portada. Ver SOCIAL_PROOF en app.js.
   Las estrellas usan el systemYellow de Apple en fondo oscuro (#FFD60A), sin baldosas: la forma
   amarilla se reconoce como valoracion y no compite con el unico CTA azul.

   `flex-wrap` y `max-width` no son adorno: con `inline-flex` en una sola linea el bloque media mas
   que la pantalla de un iPhone y se salia recortado por los DOS lados, porque al ir centrado el
   desbordamiento se reparte. En movil la nota baja a su propia linea en vez de comprimirse. */
.social-proof { margin: var(--gap-hero) auto 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; color: inherit; text-decoration: none; }
/* Es un enlace a la ficha de la App Store, pero no se pinta como tal: subrayado y azul, un número
   con estrellas parecería un anuncio. Se comporta como enlace al pulsarlo y ahí está lo que
   importa —que el dato se pueda comprobar—. */
a.social-proof:hover .social-proof-note { color: var(--text); }
.social-proof-score { font-size: 29px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff; white-space: nowrap; }
.social-proof-out { margin-left: 3px; font-size: 29px; font-weight: 700; }
.social-proof-stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.social-proof-star { display: inline-flex; align-items: center; justify-content: center; color: #ffd60a; font-size: 23px; font-weight: 700; line-height: 1; }
.social-proof-note { text-align: left; font-size: 13.5px; line-height: 1.3; font-weight: 500; color: #d8d8dc; }

/* Debajo de esto la nota ya no cabe al lado de las estrellas sin partirse en palabras sueltas. */
@media (max-width: 520px) {
  .social-proof { gap: 10px; }
  .social-proof-score, .social-proof-out { font-size: 26px; }
  .social-proof-star { font-size: 21px; }
  .social-proof-note { flex-basis: 100%; text-align: center; font-size: 13px; }
}

/* La casilla de tratamiento, dentro de la pantalla que la necesita y pegada al boton de Continuar.
   Deliberadamente mas discreta que la del modal que sustituye: alli era el unico contenido de un
   dialogo que bloqueaba el paso y se leia como un peaje; aqui acompaña a una pregunta que la
   persona ya esta contestando. */
.inline-consent { margin: 22px 0 0; padding: 15px 16px; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 16px; background: #09090a; cursor: pointer; }
.inline-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.inline-consent span { font-size: 13.5px; line-height: 1.45; color: var(--muted, #a1a1a6); text-align: left; }
.inline-consent a { color: inherit; }
.inline-consent + .actions { margin-top: 16px; }

.privacy-state { margin: 22px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #09090a; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.privacy-required { margin-top: 26px; padding: 17px; display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; border: 1px solid var(--line); border-radius: 18px; background: #09090a; cursor: pointer; }
.privacy-required input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.privacy-required span { font-size: 14px; line-height: 1.45; }
.privacy-links { margin: 13px 0 0; }
.privacy-links a { color: var(--muted); font-size: 13px; }
.privacy-optional { margin-top: 22px; padding: 0 2px; display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; color: var(--muted); cursor: pointer; }
.privacy-optional input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.privacy-optional strong, .privacy-optional small { display: block; }
.privacy-optional strong { color: var(--text); font-size: 14px; font-weight: 620; line-height: 1.35; }
.privacy-optional small { margin-top: 4px; font-size: 12px; line-height: 1.42; }
.privacy-actions { margin-top: 25px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.privacy-actions .primary, .privacy-actions .secondary { min-height: 60px; height: auto; padding: 12px 18px; }
.privacy-actions .primary { background: var(--blue); color: var(--white); }

.measurement-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 12px calc(var(--safe-bottom) - 10px); transform: translateY(16px); opacity: 0; transition: opacity .22s ease, transform .22s ease; }
.measurement-banner[data-visible="true"] { transform: translateY(0); opacity: 1; }
.measurement-banner__card { width: min(100%, 720px); margin: 0 auto; padding: 15px 17px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 20px; background: rgba(17, 17, 19, .96); backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0, 0, 0, .6); }
.measurement-banner__text { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.measurement-banner__text strong { color: var(--text); font-weight: 620; }
.measurement-banner__text a { color: var(--muted); }
.measurement-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.measurement-banner__actions .primary, .measurement-banner__actions .secondary { min-height: 44px; height: auto; padding: 9px 14px; font-size: 14px; }
.measurement-banner__actions .primary { background: var(--blue); color: var(--white); }
/* El aviso flota sobre el contenido; sin este hueco taparia el boton de continuar en moviles bajos. */
body { padding-bottom: var(--measurement-banner-height, 0px); }

/* Navegacion persistente de las preguntas. Son dos piezas de material, no una barra decorativa:
   mantienen el contexto visible debajo y nunca esconden las etiquetas de las acciones. */
.stage:has(.question-actions) { padding-bottom: clamp(132px, 16vh, 172px); }
body:has(.question-actions) .page-footer { padding-bottom: calc(var(--safe-bottom) + 96px); }
.question-actions {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--measurement-banner-height, 0px) + var(--safe-bottom) + 10px);
  width: min(calc(100% - 40px), 620px);
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  transform: translateX(-50%);
  transition: width .32s cubic-bezier(.16, 1, .3, 1), gap .32s cubic-bezier(.16, 1, .3, 1), bottom .32s cubic-bezier(.16, 1, .3, 1);
}
.question-actions .primary,
.question-actions .secondary {
  min-height: 56px;
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 34px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  transition: min-height .32s cubic-bezier(.16, 1, .3, 1), padding .32s cubic-bezier(.16, 1, .3, 1), font-size .32s cubic-bezier(.16, 1, .3, 1), background .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}
.question-actions [data-back].secondary { background: rgba(44, 44, 46, .24); color: var(--text); border-color: rgba(255, 255, 255, .16); }
.question-actions [data-back].secondary:hover { background: rgba(44, 44, 46, .34); }
.question-actions [data-continue].primary { background: rgba(10, 132, 255, .15); color: var(--white); border-color: rgba(10, 132, 255, .3); }
.question-actions [data-continue].primary:hover { background: rgba(10, 132, 255, .24); border-color: rgba(10, 132, 255, .42); }
body.floating-actions-compact .question-actions { width: min(calc(100% - 52px), 440px); gap: 8px; }
body.floating-actions-compact .question-actions .primary,
body.floating-actions-compact .question-actions .secondary { min-height: 44px; padding-inline: 17px; font-size: 13px; }

.choice-list { width: min(100%, 620px); margin: 31px auto 0; display: grid; gap: 9px; text-align: left; }
.choice-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  width: 100%; min-height: 58px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 17px;
  background: #1c1c1e; color: var(--text); cursor: pointer; text-align: left; font-size: 16px; font-weight: 560;
  letter-spacing: -.015em; transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.choice:hover { background: #2c2c2e; border-color: rgba(255, 255, 255, .14); }
.choice[aria-pressed="true"], .choice[aria-pressed="true"]:hover { background: #0a84ff; color: var(--white); border-color: #0a84ff; }
.choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.choice[aria-pressed="true"] small { color: rgba(255, 255, 255, .74); }

.custom-answer { width: min(100%, 620px); margin: 24px auto 0; text-align: left; }
.custom-answer label { display: block; margin: 0 0 10px; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.018em; }
.custom-answer textarea { min-height: 92px; resize: vertical; border: 1px solid var(--line); border-radius: 17px; background: #101011; padding: 15px 16px; }
.custom-answer textarea:focus { border-color: var(--line-strong); }
.custom-answer span { display: block; margin-top: 7px; color: var(--quiet); font-size: 11px; text-align: right; }

.text-shell { width: min(100%, 650px); margin: 22px auto 0; border: 1px solid var(--line); border-radius: 22px; background: #101011; text-align: left; overflow: hidden; }
textarea { width: 100%; min-height: 118px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--text); padding: 19px 19px 10px; font-size: 17px; line-height: 1.48; }
textarea::placeholder, input::placeholder { color: #6d6d72; }
.text-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 13px 11px; color: var(--quiet); font-size: 12px; }
.dictation-control { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 9px; }
.dictation-button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .16s ease, background .16s ease, color .16s ease; }
.dictation-button svg { width: 18px; height: 18px; fill: currentColor; }
.dictation-button.listening { background: var(--blue); color: var(--white); animation: dictation-pulse 1.4s ease-in-out infinite; }
.dictation-button:disabled { color: var(--quiet); cursor: default; opacity: .55; }
.dictation-control span { min-width: 0; line-height: 1.32; white-space: normal; overflow-wrap: anywhere; }
@keyframes dictation-pulse { 50% { box-shadow: 0 0 0 7px rgba(10, 132, 255, .16); } }
.input-mode-switch { width: min(100%, 360px); margin: 32px auto 0; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; background: #101011; }
.mode-button { min-height: 40px; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 620; }
.mode-button.active { background: var(--surface-2); color: var(--text); }
.voice-panel { width: min(100%, 650px); margin: 22px auto 0; padding: 30px; border-radius: 22px; background: #101011; text-align: center; }
.voice-title { margin: 0; font-size: 21px; font-weight: 620; letter-spacing: -.025em; }
.voice-copy { max-width: 470px; margin: 10px auto 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.voice-record { min-height: 48px; margin-top: 24px; padding: 0 20px; border-radius: 14px; background: var(--white); color: var(--black); cursor: pointer; font-weight: 650; }
.voice-record:disabled { background: var(--surface-2); color: var(--quiet); cursor: default; }
.voice-status { margin: 13px 0 0; color: var(--quiet); font-size: 12px; }
.voice-review { margin-top: 24px; text-align: left; }
.voice-review label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 650; }
.voice-review textarea { min-height: 118px; border: 1px solid var(--line); border-radius: 15px; background: #09090a; padding: 14px; }
.text-action { margin-top: 10px; padding: 8px 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }

.composite { width: min(100%, 700px); margin: 31px auto 0; display: grid; gap: 26px; text-align: left; }
.question-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.question-group legend, .field-label { margin: 0 0 14px; color: var(--text); font-size: 17px; line-height: 1.3; font-weight: 680; letter-spacing: -.022em; }
.question-group .choice-list { width: 100%; margin-top: 0; }
.numeric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.numeric-field { display: grid; gap: 8px; }
.numeric-field label { color: var(--text); font-size: 15px; line-height: 1.3; font-weight: 650; }
.numeric-field input { width: 100%; min-width: 0; height: 56px; border: 1px solid var(--line); border-radius: 16px; outline: 0; background: #101011; color: var(--text); padding: 0 15px; font-size: 18px; }
.numeric-field input:focus, textarea:focus { border-color: var(--line-strong); }
.context-note { width: min(100%, 680px); margin: 25px auto 0; padding: 16px 18px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, .025); text-align: left; }
.context-note strong { color: var(--text); font-size: 15px; line-height: 1.35; }
.context-note span, .field-help { color: var(--quiet); font-size: 13px; line-height: 1.45; }
.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 17px; background: #1c1c1e; }
.segmented-control button { min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-weight: 650; cursor: pointer; }
.segmented-control button span { display: block; margin-top: 3px; color: var(--quiet); font-size: 11px; font-weight: 550; }
.segmented-control button[aria-pressed="true"] { background: #0a84ff; color: var(--white); }
.segmented-control button[aria-pressed="true"] span { color: rgba(255, 255, 255, .74); }
.measurement-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 2fr); gap: 12px; align-items: end; }
.measurement-grid > [data-unit-panel] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.measurement-grid > [data-unit-panel][hidden], .conditional-field[hidden] { display: none; }
.split-measure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.input-with-unit { position: relative; }
.conditional-field { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .02); }
.conditional-field .field-help { margin: 10px 0 0; }

.summary { width: min(100%, 690px); margin: 40px auto 0; text-align: left; }
.summary-row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 26px; padding: 14px 18px; }
.summary-row + .summary-row::before { content: ''; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--line); }
.summary-row span:first-child { flex: none; color: var(--muted); font-size: 15px; line-height: 1.5; }
.summary-row span:last-child { max-width: 62%; color: var(--text); font-size: 15px; font-weight: 550; line-height: 1.5; text-align: right; }
.summary-insight { margin: 32px 0 0; padding: 0; color: var(--text); font-size: 20px; line-height: 1.45; letter-spacing: -.025em; }
.summary-insight span { display: block; margin-bottom: 10px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.precision-question { width: min(100%, 650px); margin: 36px auto 0; }
.precision-question p { margin: 0; color: var(--text); font-size: clamp(21px, 3vw, 28px); line-height: 1.35; letter-spacing: -.032em; text-wrap: balance; }

.loader { width: min(100%, 620px); margin: 39px auto 0; text-align: left; }
.loader-bar { height: 4px; background: #171719; border-radius: 999px; overflow: hidden; }
.loader-bar span {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.08), var(--white), rgba(255,255,255,.18));
  border-radius: 999px;
  transform: translateX(-110%);
  animation: loader-travel 1.65s cubic-bezier(.65, 0, .35, 1) infinite;
}
.loader-caption { margin: 16px 0 0; display: flex; align-items: center; gap: 9px; color: var(--quiet); font-size: 12px; font-weight: 600; }
.loader-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--white); animation: loader-pulse 1.2s ease-in-out infinite; }
@keyframes loader-travel { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@keyframes loader-pulse { 0%, 100% { opacity: .28; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
.loader-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.loader-list li { display: flex; justify-content: space-between; gap: 14px; color: var(--quiet); font-size: 14px; }
.loader-list li.active { color: var(--text); }
.loader-list li.done { color: var(--muted); }
.loader-state { font-size: 12px; font-weight: 650; }

.paywall-surface { width: min(100%, 900px); }
.paywall-hero { max-width: 860px; margin: 0 auto; }
.paywall-surface h1 { max-width: 900px; font-size: clamp(48px, 7.8vw, 86px); }
.paywall-intro { max-width: 650px; margin: 28px auto 0; color: var(--muted); font-size: clamp(18px, 2.1vw, 22px); line-height: 1.48; letter-spacing: -.025em; text-wrap: balance; }
.plan-context { margin: 48px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.018em; }
.plan-context span { display: inline-flex; align-items: center; gap: 24px; }
.plan-context span:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--quiet); }
.tangible-proof { max-width: 660px; margin: 32px auto 0; color: var(--text); font-size: 17px; line-height: 1.5; letter-spacing: -.02em; text-wrap: balance; }
.context-reason { max-width: 720px; margin: 62px auto 0; color: var(--text); font-size: clamp(22px, 3vw, 32px); line-height: 1.25; letter-spacing: -.04em; text-wrap: balance; }
.context-reason span { display: block; margin-bottom: 13px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }

.program-preview { width: min(100%, 760px); margin: 124px auto 0; text-align: left; }
.preview-heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.preview-heading span { color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
.preview-heading strong { font-size: 17px; letter-spacing: -.02em; }
.week-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .06em; }
.week-strip span:first-child { color: var(--text); }
.session-outline { margin-top: 38px; display: grid; gap: 14px; }
.session-outline div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 14px; }
.session-outline div span:first-child { color: var(--text); font-weight: 600; }

.plan-outline { margin: 138px auto 0; text-align: left; }
.section-kicker { margin: 0 0 38px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
.plan-proof { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 84px; row-gap: 52px; text-align: left; }
.proof-item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.proof-index { padding-top: 4px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .06em; }
.proof-item h2 { margin: 0; color: var(--text); font-size: 21px; line-height: 1.2; letter-spacing: -.032em; font-weight: 620; }
.proof-item p { margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.48; letter-spacing: -.012em; }

.paywall-close { margin: 148px auto 0; }
.pay-price { margin: 0; color: var(--text); font-size: clamp(36px, 5vw, 54px); line-height: 1; font-weight: 630; letter-spacing: -.055em; }
.pay-price span { color: var(--muted); font-size: .42em; line-height: 1; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.pay-promise { margin: 23px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.paywall-close .actions { margin-top: 36px; }
.trust-line { max-width: 650px; margin: 0 auto 50px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.dev-note { margin: 18px 0 0; color: var(--quiet); font-size: 11px; }

.access-form { width: min(100%, 520px); margin: 38px auto 0; display: grid; gap: 12px; text-align: left; }
.access-form label { color: var(--muted); font-size: 13px; font-weight: 650; }
.access-form input { width: 100%; height: 56px; border: 1px solid var(--line); border-radius: 16px; outline: 0; background: #101011; color: var(--text); padding: 0 16px; font-size: 17px; }
.access-form input:focus { border-color: var(--line-strong); }
.access-form .primary { margin-top: 4px; }
.access-plans { margin-top: 56px; }
.access-plans a { color: var(--text); text-underline-offset: 3px; }

.hold-mark { width: 44px; height: 44px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid rgba(255, 69, 58, .5); border-radius: 50%; color: var(--danger); font-size: 20px; }
.footer { min-height: 36px; display: flex; align-items: center; justify-content: center; color: var(--quiet); font-size: 11px; text-align: center; }
.page-footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 0 calc(var(--safe-bottom) + 10px); }
.page-footer-separator { color: var(--quiet); font-size: 12px; }
.page-footer-link { color: var(--quiet); font-size: 12px; font-weight: 600; text-decoration: none; }
.page-footer-link:hover { color: var(--text); }
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 16px); transform: translateX(-50%) translateY(12px); max-width: calc(100% - 36px); padding: 11px 14px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 30; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 680px) {
  .privacy-dialog { width: calc(100% - 20px); max-height: 94svh; border-radius: 24px; }
  .privacy-card { padding: 25px 20px 20px; }
  .app-shell { padding-inline: 17px; }
  .topbar { height: 43px; }
  .brand span { display: none; }
  .stage { align-items: start; padding-top: 76px; padding-bottom: 72px; }
  .opening-page .app-shell { padding-inline: 20px; }
  .opening-page .topbar { height: 52px; }
  .opening-page .brand span { display: inline; }
  .opening-page .progress-label { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .reset-button { min-height: 36px; padding-inline: 8px; font-size: 11px; }
  .route-map-label-wide { display: none; }
  .route-map-label-short { display: inline; }
  .stage.opening-stage { align-items: center; padding: clamp(28px, 5svh, 48px) 0 28px; }
  h1 { font-size: clamp(38px, 11vw, 50px); line-height: 1.01; }
  .subtitle { margin-top: 18px; font-size: 17px; }
  .eyebrow { margin-bottom: 15px; }
  .actions, .choice-list, .text-shell, .composite, .summary { margin-top: 30px; }
  .choice-list.compact { grid-template-columns: 1fr; }
  .choice { min-height: 56px; }
  .numeric-grid { grid-template-columns: 1fr; gap: 12px; }
  .numeric-field { grid-template-columns: 96px 1fr; align-items: center; }
  .numeric-field input { height: 52px; }
  .context-note { margin-top: 20px; }
  .segmented-control { grid-template-columns: 1fr 1fr; }
  .measurement-grid { grid-template-columns: 1fr; gap: 12px; }
  .measurement-grid > [data-unit-panel] { grid-template-columns: 1fr; }
  .measurement-grid .numeric-field, .conditional-field .numeric-field { grid-template-columns: 110px 1fr; }
  /* Las filas son tarjetas desde que el resumen se agrupo al estilo de Ajustes:
     sin margen interior el texto queda pegado al borde. El separador se sangra
     igual que el rotulo y llega hasta el borde derecho, como en iOS. */
  .summary-row { padding: 14px 16px; }
  .summary-row + .summary-row::before { left: 16px; }
  .input-mode-switch { margin-top: 26px; }
  .voice-panel { padding: 24px 18px; }
  .paywall-surface h1 { font-size: clamp(43px, 12.2vw, 56px); line-height: .99; }
  .surface[data-step-id="CORE-00"] { width: min(100%, 390px); height: auto; display: block; }
  /* Mas pequeno que antes: con la imagen ocupando la mitad de arriba, el titular ya no tiene que
     sostener el solo la pantalla, y bajarlo deja sitio a los dos botones en fila. */
  .surface[data-step-id="CORE-00"] h1 { max-width: 390px; font-size: clamp(30px, 8.2vw, 38px); line-height: 1.06; }
  .surface[data-step-id="CORE-00"] .opening-support { margin-top: var(--gap-hero); }
  .surface[data-step-id="CORE-00"] .opening-support .subtitle { max-width: 350px; margin-top: 0; }
  .surface[data-step-id="CORE-00"] .opening-support .opening-trust { max-width: 350px; margin-top: 24px; }
  .surface[data-step-id="CORE-00"] .opening-action { margin-top: var(--gap-hero); }
  .surface[data-step-id="CORE-00"] .opening-action .actions { margin-top: 0; }

/* «Continuar donde lo dejaste» va al lado, no debajo: apilados se comian una fila entera del
   pliegue. Con un solo boton, `flex: 1` le devuelve el ancho completo sin ninguna regla aparte. */
.surface[data-step-id="CORE-00"] .actions { display: flex; flex-direction: row; gap: 10px; }
.surface[data-step-id="CORE-00"] .actions > button { flex: 1 1 0; min-width: 0; }
.surface[data-step-id="CORE-00"] .actions > button.secondary { font-size: 14px; line-height: 1.15; }
  .surface[data-step-id="CORE-00"] .opening-meta { max-width: 350px; margin-top: 14px; }
  .text-footer { align-items: flex-start; }
  .creation-surface h1 { font-size: clamp(42px, 11.4vw, 54px); }
  .creation-progress { margin-top: 38px; }
  .paywall-intro { margin-top: 24px; font-size: 18px; }
  .plan-context { margin-top: 38px; display: grid; justify-content: stretch; gap: 0; text-align: left; border-top: 1px solid var(--line); }
  .plan-context span { min-height: 45px; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 14px; }
  .plan-context span::after { content: none !important; }
  .context-reason { margin-top: 54px; font-size: 24px; }
  .tangible-proof { margin-top: 28px; font-size: 16px; }
  .program-preview { margin-top: 96px; }
  .preview-heading { align-items: flex-end; }
  .preview-heading strong { max-width: 170px; text-align: right; }
  .plan-outline { margin-top: 104px; }
  .section-kicker { margin-bottom: 34px; }
  .plan-proof { grid-template-columns: 1fr; gap: 38px; }
  .proof-item { grid-template-columns: 26px 1fr; gap: 13px; }
  .proof-item h2 { font-size: 20px; }
  .paywall-close { width: calc(100% - 20px); margin: 112px auto 0; }
  .pay-price { font-size: 43px; }
  .paywall-close .actions { margin-top: 32px; }
  .paywall-close .primary { min-height: 64px; padding-inline: 16px; font-size: 14px; line-height: 1.2; }
}

@media (max-height: 700px) and (max-width: 680px) {
  .stage { padding-top: 42px; }
  .surface:not(.paywall-surface) h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .surface:not(.paywall-surface) .subtitle { margin-top: 16px; }
  .surface:not(.paywall-surface) .actions { margin-top: 26px; }
  .loading-surface .loader { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body.opening-page .opening-constellation { opacity: 0; }
}

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduce"] body.opening-page .opening-constellation { opacity: 0; }

/* Recuperación de acceso: el titular confirma, pero el peso visual va a los planes,
   que es a lo que viene el usuario. Una acción primaria por tarjeta y el resto en segundo plano. */
.access-surface h1 { font-size: clamp(34px, 4.2vw, 52px); }
.access-surface .access-subtitle { margin-top: 14px; }
.plan-list { width: min(100%, 620px); margin: 34px auto 0; display: grid; gap: 14px; text-align: left; }
.plan-card { padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: 22px; background: #101011; }
.plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.plan-card-head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.03em; }
.plan-tag { flex: none; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.plan-card-meta { margin: 7px 0 0; color: var(--quiet); font-size: 14px; line-height: 1.45; }
.plan-card-primary {
  margin-top: 17px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--blue); color: var(--white);
  font-size: 16px; font-weight: 650; letter-spacing: -.018em; text-decoration: none;
}
.plan-card-primary:active { transform: scale(.986); }
.plan-card-links { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px 20px; }
.plan-card-links a { color: var(--quiet); font-size: 13px; text-decoration: none; }
.plan-card-links a:hover { color: var(--text); }

@media (max-width: 620px) {
  .plan-card { padding: 19px 18px 18px; border-radius: 19px; }
  .plan-card-head { flex-direction: column; gap: 5px; }
  .plan-card-head h2 { font-size: 19px; }
}

/* Espera post-pago: la expectativa, las fases reales y que va a recibir. */
.creation-countdown { margin: 22px 0 0; text-align: center; }
.creation-countdown strong { display: block; color: var(--text); font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.creation-countdown span { display: block; margin-top: 6px; color: var(--quiet); font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.creation-countdown[data-done="true"] strong { display: none; }
.creation-countdown[data-done="true"] span { margin-top: 0; color: var(--text); font-size: 17px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.creation-steps { width: min(100%, 560px); margin: 26px auto 0; }
.creation-steps li.done .loader-state { color: var(--blue); }
.creation-deliverable { width: min(100%, 560px); margin: 26px auto 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .03); text-align: left; }
.creation-deliverable span { display: block; margin-bottom: 6px; color: var(--quiet); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.creation-deliverable strong { display: block; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* La frase del usuario abre el resumen: es lo que le hizo empezar y lo que el plan
   tiene que resolver. Sin rotulo, porque no necesita presentacion. */
/* Pantalla de cierre. Casi monocroma: el unico color es el del boton principal.
   La jerarquia la marcan el tamano, el peso y el aire, no el color ni las cajas. */
.summary-quote { margin: 34px auto 0; padding: 0; border: 0; max-width: 26ch; color: var(--text); font-size: clamp(22px, 5.6vw, 27px); font-weight: 480; line-height: 1.3; letter-spacing: -.024em; text-align: center; text-wrap: balance; }

/* Agrupacion tipo Ajustes de iOS: rotulo fuera, tarjeta de superficie dentro y
   separadores que sangran a la izquierda. Es el idioma que hace que se lea como
   Apple sin necesidad de mas color. */
.summary-group { margin-top: 30px; }
.summary-group:first-child { margin-top: 0; }
.summary-group h2 { margin: 0 0 11px 4px; color: var(--muted); font-size: 19px; font-weight: 460; line-height: 1.3; letter-spacing: -.018em; }
.summary-group > .summary-row { background: var(--surface); }
.summary-group > .summary-row:first-of-type { border-radius: 16px 16px 0 0; }
.summary-group > .summary-row:last-of-type { border-radius: 0 0 16px 16px; }
.summary-group > .summary-row:only-of-type { border-radius: 16px; }

/* En escritorio la pantalla debe respirar a lo ancho, no apilar lineas cortas. */
@media (min-width: 861px) {
  .summary-quote { max-width: 100%; font-size: 38px; line-height: 1.22; }
  .summary { width: min(100%, 820px); }
  .summary-row { padding: 16px 22px; }
  .summary-row span:first-child, .summary-row span:last-child { font-size: 16px; }
  /* El cierre usa todo el ancho disponible: las replicas del producto se leen
     mucho mejor con sitio, y la tabla de entrenos necesita sus siete columnas. */
  .surface[data-step-id="CORE-13"] { width: min(100%, 1180px); }
  .surface[data-step-id="CORE-13"] > h1,
  .surface[data-step-id="CORE-13"] > .subtitle { max-width: 860px; margin-inline: auto; }
  .surface[data-step-id="CORE-13"] .program-includes { width: 100%; }
  .surface[data-step-id="CORE-13"] .plan-preview,
  .surface[data-step-id="CORE-13"] .workout-preview,
  .surface[data-step-id="CORE-13"] .program-includes h2,
  .surface[data-step-id="CORE-13"] .includes-grid,
  .surface[data-step-id="CORE-13"] .program-includes__note { width: min(100%, 1020px); margin-inline: auto; }
  .plan-preview__week { padding: 24px 22px 20px; }
}

/* Que recibe por su dinero. Tarjetas con superficie propia en vez de una lista
   plana: hay que dar ganas de leerlo, no solo enumerarlo. */
.program-includes { width: min(100%, 690px); margin: 64px auto 0; padding-top: 44px; border-top: 1px solid var(--line); text-align: left; }
.program-includes h2 { margin: 0 0 20px; color: var(--text); font-size: clamp(22px, 5.4vw, 26px); font-weight: 640; line-height: 1.22; letter-spacing: -.028em; }
.program-includes__second { margin-top: 52px !important; }
.includes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.include-card { position: relative; padding: 20px 18px 18px; border-radius: 18px; background: var(--surface); overflow: hidden; }
.include-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--family); }
.include-card[data-family="plan"] { --family: #2997ff; }
.include-card[data-family="train"] { --family: #ff9f0a; }
.include-card[data-family="nutri"] { --family: #bf5af2; }
.include-card[data-family="track"] { --family: #30d158; }
.include-card[data-family="recov"] { --family: #64d2ff; }
.include-card__index { display: block; margin-bottom: 12px; color: var(--family); font-size: 13px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.include-card strong { display: block; color: var(--text); font-size: 17px; font-weight: 620; line-height: 1.28; letter-spacing: -.016em; }
.include-card p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Replica fiel de la pantalla real de la planificacion. Copia sus colores: acento
   azul #2997ff, tarjeta con degradado 155deg y los tonos por materia. */
.plan-preview { --pp-accent: #2997ff; --pp-line: #3a3a3c; margin: 0 0 34px; }
.plan-preview__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid #48484f; border-radius: 14px; background: #111113; overflow: hidden; }
.plan-preview__kpis div { display: flex; flex-direction: column; justify-content: center; padding: 18px 16px; border-right: 1px solid #48484f; }
.plan-preview__kpis div:last-child { border-right: 0; }
.plan-preview__kpis span { color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.plan-preview__kpis strong { margin: 3px 0 1px; color: var(--text); font-size: 22px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-preview__kpis small { color: var(--quiet); font-size: 10px; }
.plan-preview__phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.plan-preview__phases div { position: relative; padding: 17px 16px 16px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: #111113; overflow: hidden; }
.plan-preview__phases div::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); }
.plan-preview__phases div[data-tone="0"] { --tone: #2997ff; }
.plan-preview__phases div[data-tone="1"] { --tone: #5e5ce6; }
.plan-preview__phases div[data-tone="2"] { --tone: #bf5af2; }
.plan-preview__phases div[data-tone="3"] { --tone: #64d2ff; }
.plan-preview__phases span { display: block; margin-bottom: 7px; color: var(--tone); font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.plan-preview__phases strong { display: block; color: var(--text); font-size: 13px; font-weight: 550; line-height: 1.3; }

.plan-preview__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.plan-preview__metrics div { position: relative; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: #111113; overflow: hidden; }
.plan-preview__metrics div::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); }
.plan-preview__metrics div[data-tone="0"] { --tone: #ff9f0a; }
.plan-preview__metrics div[data-tone="1"] { --tone: #bf5af2; }
.plan-preview__metrics div[data-tone="2"] { --tone: #64d2ff; }
.plan-preview__metrics span { display: block; color: var(--tone); font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.plan-preview__metrics strong { display: block; margin: 5px 0 1px; color: var(--text); font-size: 17px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-preview__metrics small { color: var(--quiet); font-size: 11px; }

.plan-preview__decisions { margin-top: 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: #0d0d0f; overflow: hidden; }
.plan-preview__decisions div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.plan-preview__decisions div:last-child { border-bottom: 0; }
.plan-preview__decisions span { display: inline-flex; align-items: center; gap: 8px; color: var(--signal); font-size: 12px; font-weight: 620; }
.plan-preview__decisions i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.plan-preview__decisions div[data-signal="green"] { --signal: #30d158; }
.plan-preview__decisions div[data-signal="yellow"] { --signal: #ffd60a; }
.plan-preview__decisions div[data-signal="red"] { --signal: #ff453a; }
.plan-preview__decisions p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 620px) {
  .plan-preview__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-preview__decisions div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.plan-preview__week { position: relative; padding: 22px 22px 20px; border: 1px solid var(--pp-line); border-radius: 20px; background: linear-gradient(155deg, #171719 0%, #0e0e10 72%); overflow: hidden; }
.plan-preview__week::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(41, 151, 255, .85), rgba(255, 255, 255, .15), transparent 72%); }
.plan-preview__week header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--pp-line); }
.plan-preview__week header span { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: rgba(41, 151, 255, .13); color: #5eb2ff; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.plan-preview__week header strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.plan-preview__week header em { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .035); color: var(--quiet); font-size: 11px; font-style: normal; white-space: nowrap; }
.plan-preview__week h4 { margin: 14px 0 12px; color: var(--text); font-size: 19px; font-weight: 620; line-height: 1.25; letter-spacing: -.025em; }
.plan-preview__week dl { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); margin: 0; }
.plan-preview__week dt, .plan-preview__week dd { margin: 0; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 13px; line-height: 1.45; }
.plan-preview__week dt { padding-right: 14px; font-weight: 620; }
.plan-preview__week dt[data-tone="0"] { color: #5eb2ff; }
.plan-preview__week dt[data-tone="1"] { color: #ff9f0a; }
.plan-preview__week dt[data-tone="2"] { color: #64d2ff; }
.plan-preview__week dd { color: var(--muted); }

@media (max-width: 620px) {
  .plan-preview__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-preview__kpis div:nth-child(2n) { border-right: 0; }
  .plan-preview__kpis div:nth-child(-n+2) { border-bottom: 1px solid #48484f; }
  .plan-preview__week dl { grid-template-columns: minmax(0, 1fr); }
  .plan-preview__week dt { padding: 12px 0 2px; }
  .plan-preview__week dd { padding: 0 0 12px; border-top: 0; }
}

/* Replica fiel de la pantalla real de entrenamientos. Reutiliza sus mismos colores
   —naranja de acento, superficie #141416— para que lo que ve aqui sea exactamente
   lo que se va a encontrar despues de pagar. */
.workout-preview { --wp-accent: #ff9f0a; --wp-surface: #141416; --wp-line: rgba(255, 255, 255, .09); margin: 0; }
/* Las dos filas del selector copian las del area privada: las diez semanas en una
   rejilla de cinco por dos —ocultar la mitad hacia creer que el plan era mas corto—
   y los dias en una sola fila debajo. */
.workout-preview__weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 5px; border-radius: 16px; background: var(--surface); }
.workout-preview__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 6px 0 14px; padding: 4px; border-radius: 14px; background: var(--surface); }
.workout-preview__weeks span, .workout-preview__days span { display: grid; place-items: center; min-height: 44px; padding: 0 6px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workout-preview__days span { font-size: 13px; }
.workout-preview__weeks span.is-active, .workout-preview__days span.is-active { background: #f5f5f7; color: #050506; }
.workout-preview__session { border: 0; background: transparent; }
.workout-preview__session header { margin-bottom: 10px; padding: 15px 16px 13px; border: 1px solid var(--wp-line); border-radius: 18px; background: rgba(28, 28, 30, .9); }
.workout-preview__marker { display: flex; align-items: baseline; gap: 0; }
.workout-preview__marker span { color: var(--wp-accent); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.workout-preview__marker span::after { content: '·'; margin: 0 8px; color: var(--quiet); }
.workout-preview__marker p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.workout-preview__title { margin-top: 6px; }
.workout-preview__title h3 { margin: 0; color: var(--text); font-size: 17px; font-weight: 620; line-height: 1.25; letter-spacing: -.018em; }
.workout-preview__title p { margin: 3px 0 0; color: var(--quiet); font-size: 12px; }
/* Las sesiones se pintan como en el area privada: cabecera con numero, ilustracion
   y nombre, y una fila por serie. Es una replica, asi que comparte estructura y
   medidas con lo que el usuario vera despues de pagar. */
.workout-preview__exercises { display: grid; gap: 10px; }
.wp-exercise { border: 1px solid var(--wp-line); border-radius: 18px; background: var(--wp-surface); overflow: hidden; }
.wp-exercise__head { display: grid; grid-template-columns: 44px 56px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 14px 12px 0; }
.wp-exercise__order { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: 10px; background: rgba(255, 159, 10, .13); color: var(--wp-accent); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wp-exercise__thumb { width: 56px; height: 56px; border-radius: 13px; background: var(--surface-2); object-fit: cover; }
.wp-exercise__copy { min-width: 0; }
.wp-exercise__copy h4 { margin: 0; color: var(--text); font-size: 15px; font-weight: 620; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: break-word; }
.wp-exercise__more { display: inline-block; margin-top: 8px; color: var(--wp-accent); font-size: 13px; font-weight: 600; }
.wp-set { display: grid; grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr) 54px; border-top: 1px solid var(--wp-line); font-variant-numeric: tabular-nums; }
.wp-set > div { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 52px; padding: 9px 4px; text-align: center; }
.wp-set span { color: var(--quiet); font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.wp-set strong { color: var(--text); font-size: 14px; font-weight: 620; line-height: 1.25; overflow-wrap: break-word; }
.wp-set small { color: var(--quiet); font-size: 10px; }
.wp-set__done i { display: block; width: 18px; height: 18px; border: 1.5px solid #636366; border-radius: 6px; }

/* Pantallas muy estrechas (iPhone SE y similares): el rotulo del descanso y el del
   esfuerzo se comen el sitio del numero de serie, asi que la fila se aprieta. */
@media (max-width: 380px) {
  .wp-exercise__head { grid-template-columns: 38px 48px minmax(0, 1fr); gap: 10px; }
  .wp-exercise__thumb { width: 48px; height: 48px; }
  .wp-set { grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) 44px; }
  .wp-set > div { padding-inline: 2px; }
  .wp-set span { font-size: 8px; letter-spacing: .03em; }
  .wp-set strong { font-size: 13px; }
}

/* Curva de carga y seguimiento: dos piezas mas del documento. */
.plan-preview__curve { margin-top: 14px; padding: 20px 22px 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: #0d0d0f; }
.plan-preview__curve span { display: block; margin-bottom: 16px; color: var(--quiet); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan-preview__curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan-preview__curve .axis { stroke: #48484f; stroke-width: 1; }
.plan-preview__curve .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.plan-preview__curve .tick, .plan-preview__curve .week { fill: #8e8e93; font-size: 13px; }
.plan-preview__curve polyline { fill: none; stroke: #2997ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-preview__curve circle { fill: #2997ff; }
.plan-preview__tracking { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.plan-preview__tracking div { padding: 17px 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: #111113; }
.plan-preview__tracking span { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.plan-preview__tracking p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* El documento continua tras el pago. Blur progresivo, no degradado: la mascara
   hace que empiece suave arriba y llegue opaco hasta el borde inferior, sin dejar
   la franja nitida que quedaba antes. Solo en la planificacion. */
.plan-preview.is-faded { position: relative; }
.plan-preview.is-faded::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  pointer-events: none;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .82) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 62%, #000 100%);
}

/* El aviso de que hay mucho mas: capsula con luz propia, no una linea gris. */
.preview-locked { display: flex; flex-direction: column; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin: -28px auto 0; position: relative; z-index: 2; padding: 16px 26px; border: 1px solid rgba(41, 151, 255, .32); border-radius: 18px; background: rgba(41, 151, 255, .07); text-align: center; }
.preview-locked__lock { width: 15px; height: 12px; margin-bottom: 3px; border: 1.6px solid #5eb2ff; border-radius: 3px; position: relative; }
.preview-locked__lock::before { content: ''; position: absolute; left: 50%; top: -7px; width: 9px; height: 8px; transform: translateX(-50%); border: 1.6px solid #5eb2ff; border-bottom: 0; border-radius: 5px 5px 0 0; }
.preview-locked strong { color: var(--text); font-size: 16px; font-weight: 620; letter-spacing: -.015em; }
.preview-locked em { color: var(--muted); font-size: 13px; font-style: normal; line-height: 1.5; }

@media (max-width: 620px) {
  .plan-preview__tracking { grid-template-columns: minmax(0, 1fr); }
  .plan-preview.is-faded::after { height: 220px; }
  .preview-locked { padding: 14px 20px; }
  .preview-locked strong { font-size: 15px; }
  .preview-locked em { font-size: 12px; }
}

.program-includes__note { margin: 22px 0 0; color: var(--quiet); font-size: 13px; line-height: 1.55; }


/* Acciones superiores del resumen: compra azul y Volver gris, apilados a ancho completo.
   El dock flotante conserva por separado su composicion horizontal y translucida. */
.summary-cta { margin-top: 46px; }
.summary-cta .summary-price { margin-top: 0; }
.summary-cta .actions { width: min(100%, 540px); margin-top: 24px; }
.summary-cta + .summary { margin-top: 68px; }
.summary-purchase-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.summary-purchase-actions .primary,
.summary-purchase-actions .secondary {
  min-height: 56px;
  height: auto;
  padding: 10px 18px;
  border: 1px solid transparent;
  background-clip: padding-box;
  line-height: 1.22;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 34px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.summary-purchase-actions [data-back].secondary { background: rgba(44, 44, 46, .24); color: var(--text); border-color: rgba(255, 255, 255, .16); }
.summary-purchase-actions [data-back].secondary:hover { background: rgba(44, 44, 46, .34); }
.summary-purchase-actions [data-unlock].primary { background: rgba(10, 132, 255, .15); color: var(--white); border-color: rgba(10, 132, 255, .3); }
.summary-purchase-actions [data-unlock].primary:hover { background: rgba(10, 132, 255, .24); border-color: rgba(10, 132, 255, .42); }
.summary-cta .summary-purchase-actions { grid-template-columns: minmax(0, 1fr); }
.summary-cta .summary-purchase-actions [data-unlock].primary { background: #0a84ff; color: var(--white); border-color: #0a84ff; opacity: 1; }
.summary-cta .summary-purchase-actions [data-unlock].primary:hover { background: #2492ff; border-color: #2492ff; }
.summary-cta .summary-purchase-actions [data-back].secondary { background: #2c2c2e; color: var(--text); border-color: #2c2c2e; opacity: 1; }
.summary-cta .summary-purchase-actions [data-back].secondary:hover { background: #3a3a3c; border-color: #3a3a3c; }

/* Cuando el bloque superior sale por arriba, este dock toma el relevo. La capa es
   translucida para conservar el contexto del resumen y no aparece mientras el CTA
   original siga a la vista. */
.stage:has(.summary-purchase-dock) { padding-bottom: clamp(130px, 15vh, 166px); }
body:has(.summary-purchase-dock[data-visible="true"]) .page-footer { padding-bottom: calc(var(--safe-bottom) + 112px); }
.summary-purchase-dock {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: calc(var(--measurement-banner-height, 0px) + var(--safe-bottom) + 10px);
  width: min(calc(100% - 40px), 620px);
  display: grid;
  gap: 9px;
  transform: translate(-50%, 18px) scale(.985);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width .32s cubic-bezier(.16, 1, .3, 1), gap .32s cubic-bezier(.16, 1, .3, 1), opacity .28s ease, transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .38s;
}
.summary-purchase-dock[data-visible="true"] { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.summary-purchase-dock__price { margin: 0; text-align: center; font-variant-numeric: tabular-nums; transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.summary-purchase-dock__price strong { color: var(--text); font-size: 22px; font-weight: 650; line-height: 1.05; letter-spacing: -.035em; transition: font-size .32s cubic-bezier(.16, 1, .3, 1); }
.summary-purchase-dock__price span { margin-left: 7px; color: var(--muted); font-size: 12px; line-height: 1.2; }
.summary-purchase-dock .summary-purchase-actions { width: 100%; margin: 0; }
.summary-purchase-dock .summary-purchase-actions .primary,
.summary-purchase-dock .summary-purchase-actions .secondary { transition: min-height .32s cubic-bezier(.16, 1, .3, 1), padding .32s cubic-bezier(.16, 1, .3, 1), font-size .32s cubic-bezier(.16, 1, .3, 1), background .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease; }
.summary-purchase-dock[data-compact="true"] { width: min(calc(100% - 52px), 440px); gap: 6px; }
.summary-purchase-dock[data-compact="true"] .summary-purchase-dock__price { transform: translateY(2px); opacity: .82; }
.summary-purchase-dock[data-compact="true"] .summary-purchase-dock__price strong { font-size: 17px; }
.summary-purchase-dock[data-compact="true"] .summary-purchase-dock__price span { font-size: 11px; }
.summary-purchase-dock[data-compact="true"] .summary-purchase-actions .primary,
.summary-purchase-dock[data-compact="true"] .summary-purchase-actions .secondary { min-height: 44px; padding: 7px 15px; font-size: 13px; }
.checkout-status { margin: 10px auto 0; max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.checkout-status:empty { display: none; }

@media (max-width: 860px) {
  .summary-cta { margin-top: 36px; }
  .summary-cta .actions { margin-top: 22px; }
  .summary-cta + .summary { margin-top: 54px; }
}

.summary-price { margin: 48px 0 0; text-align: center; color: var(--text); font-size: 34px; font-weight: 620; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.summary-price span { font-size: 15px; font-weight: 450; color: var(--quiet); letter-spacing: 0; }

@media (max-width: 620px) {
  .summary-purchase-actions .primary, .summary-purchase-actions .secondary { padding-inline: 12px; font-size: 14px; }
  .summary-purchase-dock { bottom: calc(var(--measurement-banner-height, 0px) + var(--safe-bottom) + 6px); }
}

/* Objetivos tactiles en movil. Amplia el area de pulsacion sin cambiar el tamano
   visual de ningun control. Los enlaces en linea dentro de un parrafo quedan
   fuera a proposito: WCAG los exceptua y estirarlos romperia el flujo del texto. */
@media (max-width: 860px) {
  .brand { min-height: 44px; }
  .reset-button { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .dictation-button { position: relative; }
  .dictation-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* Aviso cuando el navegador no deja guardar (TikTok, Instagram, modos privados).
   Discreto a proposito: informa sin asustar, y solo aparece si de verdad no hay disco. */
.storage-warning {
  margin: 0 auto;
  max-width: 46rem;
  padding: 0.65rem 1rem;
  border-radius: 0.7rem;
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.28);
  color: #ffcf8a;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}
.storage-warning[hidden] { display: none; }
.storage-warning strong { color: #ffe0b2; }


/* ── Portada por bloques ────────────────────────────────────────────────────
   Cuatro bandas alternas —negra, gris, negra, gris— para que se vea donde
   acaba una seccion y empieza la siguiente sin una sola linea divisoria.
   El color se pinta con un pseudo-elemento a sangre en vez de tocar el ancho
   de la seccion: asi el fondo llega a los bordes de la pantalla y la maqueta
   de dentro se queda exactamente como estaba. */
/* Solo los pilares llevan banda gris. Resenas y preguntas frecuentes van en negro. */
.opening-pillars { position: relative; }

.opening-pillars::before {
  content: '';
  position: absolute;
  /* Arriba, el aire de la banda. Abajo, lo suficiente para envolver la flecha que viene despues
     y que quede dentro del gris. Al vivir en el `::before` de la seccion, se pinta detras de todo
     y no puede tapar ninguna tarjeta. */
  inset: calc(var(--banda-aire, 48px) * -1) calc(50% - 50vw) -132px;
  background: var(--surface);
  z-index: -1;
}

/* La banda gris sube 72 px por encima de la seccion pero el desplazamiento se detiene a 56: se
   para DENTRO del gris, con 16 px de sobra. Cuadrar los dos numeros al milimetro dejaba una franja
   negra de 5 px arriba por el redondeo del navegador. */
.opening-pillars { --banda-aire: 72px; }

/* NO darle aqui su propia banda a la flecha.
   `.opening-scroll-hint` lleva `isolation: isolate`, asi que un `z-index: -1` suyo se queda
   atrapado en su propio contexto y el rectangulo gris acababa pintado ENCIMA del final de la
   ultima tarjeta: se cortaban icono y texto a la misma altura, y parecia un problema de altura
   cuando era de orden de pintado. El gris que rodea a la flecha lo pone la banda de los pilares
   estirandose hacia abajo (ver el `::before` de arriba), que si vive detras de todo. */

/* La imagen de portada, a sangre y antes del titular. */
.opening-hero__art {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: clamp(24px, 4vh, 36px);
}

/* La imagen empieza arriba del todo, no debajo de la barra: STRONNECT, «Mapa» y «Ya tengo mi plan»
   flotan ENCIMA de ella. Se saca la barra del flujo y se anula el relleno superior del escenario;
   lo unico que queda por encima es el area segura del telefono, que la imagen tambien se come.
   Todo expresado con las variables que ya usa el layout, para que no se descuadre con el notch. */
body.opening-page .topbar {
  position: absolute;
  inset: var(--safe-top) 24px auto;
  z-index: 5;
}

body.opening-page .stage.opening-stage { padding-top: 0; }

body.opening-page .opening-hero__art { margin-top: calc(var(--safe-top) * -1); }

/* El alto lo pone el contenedor, que es quien sabe cuanto sobra. La imagen solo decide que parte
   de si misma se ve: se recorta por arriba y por abajo, que es donde solo hay fondo. */
.opening-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anclada ARRIBA. Con `center` el recorte se reparte entre arriba y abajo y se comia parte de
     las cabezas; asi el borde superior de la imagen coincide con el de la caja y todo lo que se
     pierde se pierde por los pies. */
  object-position: center top;
}

@media (min-width: 768px) {
  .opening-hero__art { flex: 0 1 auto; }
  .opening-hero__art img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center 34%;
    /* Medido: a 62vh el boton se salia 10 px del pliegue en una pantalla de 860. A 54vh entra
       entero con aire, y en portatiles de 768 de alto tambien. */
    max-height: 54vh;
  }
  .opening-hero { height: auto; }
}

/* Subtitulo de seccion: el que antes vivia en la portada. */
.opening-section-sub {
  margin: 8px auto clamp(20px, 3.4vh, 32px);
  max-width: 560px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

/* La nota con estrellas ya no esta en la portada, esta aqui arriba del carril
   de resenas: rodeada de las opiniones que la sostienen. */
.opening-reviews .social-proof {
  margin: 14px auto clamp(26px, 4.5vh, 40px);
  justify-content: center;
}


/* ── Ajustes de escritorio de la portada ────────────────────────────────────
   Los cuatro los pidio Toni mirando la pagina a 1440: la imagen cortaba las
   cabezas por arriba, la flecha quedaba justa por abajo, la frase del segundo
   boton era larguisima y las tarjetas de los pilares no median lo mismo. */

@media (min-width: 768px) {
  /* Cuanto alto se le concede a la portada. Todo lo demas se calcula de aqui. */
  /* Medido a 1440x860: con 44vh sobraban 171 px de aire muerto bajo la flecha y la
     ilustracion se quedaba en 673 px sobre una pantalla de 1440, flotando pequena.
     A 57vh ocupa 887 px de ancho y la flecha sigue entrando con holgura, tambien en
     un portatil de 740 de alto. */
  .opening-hero__art { --alto-portada: clamp(280px, 57vh, 620px); }

  /* El corte de las cabezas venia de estirar la caja a 100vw y limitarle el alto:
     con `cover` eso recortaba casi la mitad de la ilustracion por arriba. Ahora
     manda el alto y el ancho sale de el, asi que la imagen entra ENTERA y no se
     recorta nada. Lo que sobra a los lados es negro —los bordes de la ilustracion
     miden 3,3,3— y se funde con el fondo de la pagina sin dejar franja visible. */
  .opening-hero__art {
    width: min(100vw, calc(var(--alto-portada) * 16 / 9));
    margin-inline: auto;
  }

  .opening-hero__art img {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
  }

  /* Titular un punto mas pequeno. No es gusto: son los ~14 px que le faltaban a la
     flecha para no quedarse pegada al borde inferior en un portatil. */
  .surface[data-step-id="CORE-00"] h1 { font-size: clamp(40px, 3.9vw, 54px); }
}

/* Portatil bajo. Medido a 1440x740: con 57vh la flecha se quedaba a 21 px del borde,
   que es lo justo antes de que se vea cortada. Aqui la ilustracion cede un poco de
   alto para que la flecha respire. */
@media (min-width: 768px) and (max-height: 780px) {
  .opening-hero__art { --alto-portada: clamp(240px, 50vh, 420px); }
}

/* La flecha. Antes era un circulo que solo cambiaba de brillo; se quedaba quieta
   justo donde hace falta invitar a bajar. Ahora flota, tiene un halo que late
   detras y responde al raton. La curva es lenta al salir y al volver: un rebote
   duro parece un aviso de error, no una invitacion. */
.opening-scroll-hint__ring {
  position: relative;
  animation: opening-scroll-flota 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

/* El halo va en un pseudo-elemento y no en la sombra del circulo: asi late a su
   propio ritmo, mas lento, sin arrastrar al chevron con el. */
.opening-scroll-hint__ring::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(10, 132, 255, .30);
  animation: opening-scroll-halo 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
  pointer-events: none;
}

.opening-scroll-hint__ring svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

.opening-scroll-hint:hover .opening-scroll-hint__ring {
  transform: translateY(4px) scale(1.07);
  background: rgba(10, 132, 255, .26);
  border-color: rgba(10, 132, 255, .68);
  box-shadow: 0 10px 34px rgba(10, 132, 255, .34);
  animation-play-state: paused;
}

.opening-scroll-hint:hover .opening-scroll-hint__ring svg { transform: translateY(2px); }
.opening-scroll-hint:active .opening-scroll-hint__ring { transform: translateY(6px) scale(.97); }

@keyframes opening-scroll-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes opening-scroll-halo {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.16); opacity: 0; }
}

/* Quien pide menos movimiento se queda con el circulo quieto y el hover, que no
   depende de una animacion en bucle. */
@media (prefers-reduced-motion: reduce) {
  .opening-scroll-hint__ring,
  .opening-scroll-hint__ring::after { animation: none; }
  .opening-scroll-hint__ring::after { opacity: .4; }
}

/* Los cuatro pilares en escritorio. Antes iban en una columna de 720 px con las
   tarjetas midiendo cada una lo que le pedia su texto, asi que sobraba ancho a
   los lados y las cuatro cajas quedaban desiguales. Ahora se reparten el ancho
   real y las de cada fila miden lo mismo. */
@media (min-width: 861px) {
  .surface[data-step-id="CORE-00"] { width: min(100%, 1100px); }
  .opening-pillars { width: min(100%, 1020px); }

  .opening-pillars__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 30px;
    align-items: stretch;
  }

  /* Estirar la fila es lo que iguala las tarjetas. El `min-height: min-content`
     que ya llevaba `__copy` sigue puesto, asi que la caja puede crecer para
     igualar a su vecina pero nunca encoger por debajo de su propio texto, que
     era el fallo antiguo con SF Pro en Chrome. */
  .opening-pillar { align-items: stretch; }

  .opening-pillar__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 22px;
  }
}