/* ============================================================
   CLON — estilos propios encima del CSS original (css/origen-extraido.css).
   Aquí va solo lo que el original resuelve con JavaScript (Swiper, rueda
   de fechas, Lottie, modal) o lo que cambia entre el original y el clon.
   Índice: 1 base · 2 cuestionario · 3 paywall · 4 modal de pago · 5 celular
   ============================================================ */

/* ---------- 1. base ---------- */
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #142933; color: #fff; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; }
/* como el original: html/body fijos y #root es el único elemento con scroll */
#root { height: 100%; position: relative; overflow: auto; }
[hidden] { display: none !important; }
button { font: inherit; }
img { display: block; }
/* el original oculta la barra de scroll global */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 2. cuestionario ---------- */
/* transición entre pantallas (opacidad, como el original) */
#paso { transition: opacity .25s ease; }

/* carrusel de signos (sustituye a Swiper): caja de 300 px, 3 visibles, el del centro más grande */
/* en el original la hoja de .7dE16a__text carga ANTES que la del carrusel; en el CSS unido el orden quedó al revés,
   así que se fija aquí el estilo del nombre del signo (medido: 14 px / 16.8, 700, Philosopher, #f2e6c4) */
.style-module-scss-module__1T2Piq__slide_title.style-module-scss-module__1T2Piq__slide_title { color: var(--content-primary-solid, #f2e6c4); font-family: var(--mixins-h7-bold-short-font-family); font-size: var(--mixins-h7-bold-short-font-size); font-weight: var(--mixins-h7-bold-short-font-weight); letter-spacing: var(--mixins-h7-bold-short-letter-spacing); line-height: var(--mixins-h7-bold-short-line-height); margin-top: 8px; }
/* medidas del Swiper original: slides de 90 px + 15 de separación, slide con padding 15 0, el activo baja 15 px y crece a 80 px */
.carrusel { width: 300px; min-height: 160px; margin: 0 auto; overflow: hidden; position: relative; }
.carrusel-pista { display: flex; transition: transform .3s ease; will-change: transform; }
.carrusel-slide { width: 90px; margin-right: 15px; flex: 0 0 90px; display: flex; justify-content: center; align-items: flex-start; transition: margin-top .5s; }
.carrusel-slide.activo { margin-top: 15px; }
.carrusel-slide.activo .style-module-scss-module__1T2Piq__slide { opacity: 1; width: 80px; }
.carrusel-slide.activo .style-module-scss-module__1T2Piq__slide_image_wrapper { width: 80px; height: 80px; }
/* pantallas bajas (≤740 px de alto, la mayoría de celulares con la barra del navegador): el original (CSS del 15-oct-2026)
   achica los signos a 44/56 px, quita el alto mínimo del carrusel y deja el botón «Continuar» en el flujo (no fijo) */
@media (max-height: 740px) {
  .carrusel, .style-module-scss-module__1T2Piq__swiper { min-height: 0; }
  .carrusel-slide.activo { margin-top: 0; }
  .carrusel-slide.activo .style-module-scss-module__1T2Piq__slide { width: 56px; }
  .carrusel-slide.activo .style-module-scss-module__1T2Piq__slide_image_wrapper { width: 56px; height: 56px; }
  .style-module-scss-module__1T2Piq__slide { padding: var(--spacings-fixed-f_mini) 0; width: 44px; }
  .style-module-scss-module__1T2Piq__slide_image_wrapper { width: 44px; height: 44px; }
  .style-module-scss-module__1T2Piq__slide_title.style-module-scss-module__1T2Piq__slide_title { margin-top: var(--spacings-fixed-f_mini); }
  .style-module-scss-module__PBhrSq__picker_screen > [data-height=full] { min-height: auto; padding-block: 0; }
  .style-module-scss-module__PBhrSq__picker_screen > [data-slot=quiz_action_area] { position: static; }
}

/* rueda (wheel picker) con columnas desplazables; el original mueve las columnas con transform */
.WheelPicker-module-scss-module__xE6hcq__root .rueda-col {
  min-height: 0 !important; height: 220px; overflow-y: auto; overflow-x: hidden; flex: 1 1 0; min-width: 0;
  scroll-snap-type: y mandatory; padding: 88px 0; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none;
}
.WheelPicker-module-scss-module__xE6hcq__root .rueda-col::-webkit-scrollbar { display: none; }
.WheelPicker-module-scss-module__xE6hcq__root .rueda-col [data-slot=item] { scroll-snap-align: center; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; }
.WheelPicker-module-scss-module__xE6hcq__root .rueda-col [data-slot=item][data-vacio] { color: var(--content-dark_alpha-invert-base); }

/* lista de sugerencias del lugar de nacimiento: flota bajo el campo (como el original) */
.style-module-scss-module__659iFq__place_field_wrapper { position: relative; }
.style-module-scss-module__rCmBZW__autocomplete_container { position: absolute; left: 0; right: 0; top: 64px; z-index: 5; max-height: 150px; overflow-y: auto; }

/* globos de la astróloga: las letras entran una a una (el original pone .visible por JS) */
.style-module-scss-module__68_riG__char { opacity: 0; transition: opacity .2s; }
.style-module-scss-module__68_riG__char.style-module-scss-module__68_riG__visible { opacity: 1; }

/* el disco de la rueda natal va dentro del halo (en el original se superponen) */
.style-module-scss-module__3EM3EG__wrapper .style-module-scss-module__qLPZ4W__birth_chart,
.style-module-scss-module__3EM3EG__wrapper .style-module-scss-module__O_JwtW__birth_chart { position: relative; z-index: 10; overflow: hidden; }
/* animación Lottie dentro de la rueda natal */
.lottie-carta svg, .lottie-palma svg, .lottie-fondo-a svg, .lottie-fondo-b svg { display: block; }
.lottie-fondo-a, .lottie-fondo-b { pointer-events: none; }

/* tarjeta «Tú»: «Tus datos» se abre y se cierra con las animaciones del CSS original (filas a los 3/4/5/6 s, cierre a 7,5 s) */

/* pantalla de la palma: los chips los coloca el CSS original por :nth-child (van antes de la animación en el HTML) */
.palma-aviso { color: #F2E6C4; font-size: 12px; line-height: 17px; text-align: center; max-width: 300px; margin: 60px auto 0; }
/* el QR del original lleva al teléfono; en el clon es decorativo (no hay cámara de servidor) */
/* el marco blanco (12 px de relleno, radio 20) lo pone .mjWXQa__code_wrapper del original: aquí solo el SVG de 185 px */
.qr-falso { width: 185px; height: 185px; }
.qr-falso svg { display: block; }

/* correo */
.correo-cuerpo { width: 100%; display: flex; flex-direction: column; align-items: center; }
.correo-cuerpo .style-module-scss-module__wfYwPa__form, .correo-cuerpo .style-module-scss-module__EAjCWG__notification_wrapper, .correo-cuerpo .correo-ofertas, .correo-cuerpo .correo-error { width: 100%; box-sizing: border-box; }
.correo-ofertas { font-size: 12px; line-height: 16px; color: #ffffffb3; margin: 8px 28px 16px 44px; }
.correo-error { color: #f27067; font-size: 12px; line-height: 16.2px; margin: 4px 0 0; width: 100%; } /* medido: 12/16.2, #f27067, a ras del aviso */

/* analizando: 4 fases con fundido de 400 ms (react-spring en el original); icono «fancy» de 102×102 (js/iconos-zodiaco.js) */
.fase-analizando { transition: opacity .4s; }
/* Escáner de la palma (js/palma-escaner.js): cámara y escaneo a pantalla completa, como el original */
.palma-camara, .palma-escaneo { height: 100%; min-height: 100%; }
.palma-camara .style-module-scss-module__0imZBW__canvas { top: 0; }
.palma-camara .style-module-scss-module__0imZBW__shape { z-index: 1; }
.palma-camara .style-module-scss-module__0imZBW__footer { margin-top: auto; }
.palma-camara .style-module-scss-module__0imZBW__warning { z-index: 5; }
.palma-escaneo .style-module-scss-module__X15geG__photo { display: block; }
.palma-aviso-capa { position: fixed; inset: 0; z-index: 300; background: #00000099; display: flex; align-items: center; justify-content: center; padding: 24px; }
.palma-aviso { background: #1e3b48; border-radius: 20px; padding: 28px 24px 20px; width: 100%; max-width: 340px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.palma-aviso p { color: #ffffffcc; margin: 0; }
/* «Precisión de las previsiones»: el % del original mide 75×26 (interlineado 25,6 px del componente Text) */
.styles-module-scss-module__Noce6W__percent { line-height: 25.6px; }

/* variables del original definidas en #root (el extractor no las trae): separación entre bloques del paywall (24 px)
   y altura de la cabecera «¡La lectura… está lista!» = 100svh - 24 px (medido en celular: 788 px de 812) */
#root { --layout-landing-section-gap: var(--spacings-fixed-f_huge); --layout-landing-fullscreen-peek: var(--spacings-fixed-f_large); }
/* botón fijo en celular: el original ajusta el texto a 2 líneas (21 px medidos a 375 px de ancho) */
@media (max-width: 450px) { .style-module-scss-module__UQOn6q__fixed .style-module-scss-module__UQOn6q__buttonTitleStyle span { font-size: 21px; line-height: 1.15; } }
.zodiaco-analizando { width: 102px; height: 102px; } /* respaldo (tema oscuro): glifo dentro de las órbitas */
.zodiaco-analizando .style-module-scss-module__UcjQcG__zodiac_shell { width: 102px; height: 102px; display: block; }
.zodiaco-analizando svg.style-module-scss-module__UcjQcG__zodiac_icon { width: 66px !important; height: auto; }
.signo-analizando { width: 102px; height: 102px; object-fit: contain; border-radius: 50%; } /* respaldo si no cargan los SVG */
.style-module-scss-module__HgEc9W__info { transition: opacity .4s; }
.style-module-scss-module__u6QvxW__bg { overflow: hidden; }

/* fase «Trazando tu carta astral…»: en el original el halo mide 270 px de alto (su hoja carga después que la del halo genérico, de 300) */
.style-module-scss-module__O_JwtW__gradient_bg_image.style-module-scss-module__O_JwtW__gradient_bg_image { min-height: 270px; }

/* ---------- 3. paywall (resultado.html) ---------- */
/* «Pago seguro garantizado»: en el original va pegado al texto legal (margen 0, medido) */
#plans .style-module-scss-module__QsdpEa__content { margin: 0; }
.pw-palma-foto { width: 200px; height: 272px; object-fit: cover; border-radius: 24px; }
.style-module-scss-module__L434NW__palmCard { background-size: cover; background-position: center; }
.style-module-scss-module__13tBdW__marquee_content { animation: marquesina 16s linear infinite; }
@keyframes marquesina { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pw-aviso-stripe { margin: 8px 24px 0; padding: 10px 14px; border-radius: 12px; background: #f9d05d22; border: 1px solid #f9d05d88; color: #f9d05d; font-size: 13px; line-height: 18px; text-align: center; }
.pw-aviso-stripe[hidden] { display: none !important; }
button[data-pago-boton][disabled] { opacity: .5; cursor: not-allowed; }
/* el botón fijo usa las reglas del original (left:0; right:0; margin:auto); aquí solo el estado oculto */
.style-module-scss-module__UQOn6q__fixed.oculto { opacity: 0; visibility: hidden; }

/* ---------- 4. modal de pago ---------- */
/* Modal de pago = hoja pegada al borde inferior, como el original (D-DzFG__overlay #c0c0c08c + modal fixed bottom:0,
   max-width 440, radio 30 30 0 0, overflow-y scroll; medido en celular: 375×792 a bottom 0; en escritorio 440 de ancho) */
.modal-fondo { position: fixed; inset: 0; background: #c0c0c08c; z-index: 200; /* por encima del botón fijo (z-index 100) */ }
.modal-fondo[hidden] { display: none !important; }
.style-module-scss-module__D-DzFG__modal { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; max-height: 100%; overflow-y: scroll; background: #fff; border-radius: 30px 30px 0 0; color: #2d2d2d; margin: 0; }
/* medidas del original: Apple Pay 50 px / radio 5; Google Pay 40 px / radio 4; PayPal 55 px / radio 4 y margen superior 16 */
.modal-boton-pago { display: flex; width: 100%; height: 50px; border: 0; border-radius: 5px; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; cursor: pointer; }
.modal-boton-pago.apple { background: #000; color: #fff; font-family: -apple-system, "Segoe UI", sans-serif; }
.modal-boton-pago.google { background: #000; color: #fff; height: 40px; border-radius: 4px; }
.modal-boton-pago.paypal { background: #ffc439; color: #003087; font-style: italic; font-weight: 800; height: 55px; border-radius: 4px; margin-top: 16px; }
/* miniatura del informe en el modal: 18×35 en el original */
.style-module-scss-module__fqDzAW__img { width: 18px !important; height: 35px; object-fit: cover; }
/* «Total hoy»: 13 px / 600 en el original */
.style-module-scss-module__QZ0Z0a__largeText { font-size: 13px !important; }
.modal-boton-pago[disabled] { opacity: .5; cursor: not-allowed; }
.modal-tarjeta-boton { width: 100%; height: 72px; border: 0; border-radius: 36px; background: #16786C; color: #fff; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .5px; cursor: pointer; }
.modal-tarjeta-boton[disabled] { opacity: .5; cursor: not-allowed; }
.modal-campos { display: grid; gap: 14px; margin: 20px 0 24px; }
.modal-campos label { font-size: 14px; font-weight: 600; color: #2d2d2d; display: block; margin-bottom: 6px; }
.modal-campos .falso { height: 50px; border: 1px solid #d9dde3; border-radius: 6px; display: flex; align-items: center; padding: 0 14px; color: #a7adb6; font-size: 16px; background: #fff; }
.modal-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modal-nota { font-size: 12px; color: #6b7280; text-align: center; margin: 8px 0 0; }
/* campos reales de Stripe dentro de las casillas del original (15-oct-2026) */
.modal-campos .falso.stripe-campo { display: block; padding: 15px 14px 0; color: #2d2d2d; }
.modal-campos .falso.stripe-campo.StripeElement--focus { border-color: #16786C; }
.modal-campos .falso.stripe-campo.StripeElement--invalid { border-color: #d70015; }
.modal-error { color: #d70015; font-size: 14px; line-height: 20px; margin: -10px 0 14px; text-align: left; }

/* ---------- 5. celular ---------- */
@media (max-width: 480px) {
  .carrusel { width: 300px; }
}

/* versión A: línea de renovación bajo «Iniciar prueba y continuar» (16-oct-2026) */
.pw-renovacion { margin: 10px 16px 4px; text-align: center; font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .62); }
/* etiqueta de las reseñas de ejemplo (17-oct-2026): visible, bajo la cifra, antes de las 3 tarjetas */
.pw-etiqueta-resenas { margin: -8px 0 12px; text-align: center; font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .55); }

/* paso del correo, versión «unico» de la prueba A/B de formato: casilla de términos como la de Estanela (16-oct-2026) */
.correo-acepto { display: flex; align-items: flex-start; gap: 10px; margin: 14px 16px 4px 15px; font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); text-align: left; cursor: pointer; }
.correo-acepto input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #27baa7; cursor: pointer; }
.correo-acepto a { color: #f2e6c4; text-decoration: underline; }

/* ventana de pago de la versión A: Google Pay / Apple Pay de verdad (Stripe Express Checkout), 16-oct-2026 */
.modal-express { margin: 0 0 8px; width: 100%; align-self: stretch; }
.billetera-espera { visibility: hidden; }