/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --ink-deep:   #081226;
  --ink-mid:    #12305c;
  --ink-jungle: #0d2247;

  --blue-vivid: #2F7DD1;
  --blue-neon:  #64B5FF;

  --coral:      #FF6B4A;
  --orange:     #FF9F45;
  --gold:       #F7C948;
  --gold-light: #FFE38A;

  --teal:       #17B8A6;
  --cyan:       #4FD6E8;

  --white:      #FFFFFF;
  --off-white:  #F3F7FC;

  --font-display: 'Baloo 2', 'Bebas Neue', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 48px;

  --shadow-blue: 0 0 32px rgba(47,125,209,.35);
  --shadow-gold: 0 0 32px rgba(247,201,72,.3);

  --bg: var(--ink-deep);
  --bg-card: rgba(47,125,209,.07);
  --bg-card-strong: rgba(47,125,209,.12);
  --border: rgba(100,181,255,.20);
  --text: #FFFFFF;
  --text-dim: rgba(255,255,255,.62);
  --text-dimmer: rgba(255,255,255,.42);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--off-white);
    --bg-card: #FFFFFF;
    --bg-card-strong: #FFFFFF;
    --border: rgba(44,95,138,.18);
    --text: #0a1628;
    --text-dim: rgba(10,22,40,.65);
    --text-dimmer: rgba(10,22,40,.45);
  }
}
:root[data-theme="light"] {
  --bg: var(--off-white);
  --bg-card: #FFFFFF;
  --bg-card-strong: #FFFFFF;
  --border: rgba(44,95,138,.18);
  --text: #0a1628;
  --text-dim: rgba(10,22,40,.65);
  --text-dimmer: rgba(10,22,40,.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Evita el rebote elastico de iOS al tirar del scroll mas alla del
     limite (arriba o abajo del todo) - durante ese rebote, Safari puede
     dejar de pintar un instante los elementos position:sticky/fixed que
     quedan fuera del area visible real (aqui, el propio .landing-navbar
     y su velo difuminado). Ver la nota mas detallada en style.css, la
     hoja de la app ya logueada, donde se detecto este bug primero. */
  overscroll-behavior-y: none;
}
/* Salvaguarda: varias clases de aqui abajo fijan su propio "display"
   (ej. .btn, .aviso-cookies) que anularia el atributo "hidden" del
   navegador en un empate de cascada normal - esto garantiza que "hidden"
   siempre gane. */
[hidden] { display: none !important; }
body.landing-body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a { text-decoration: none; color: inherit; }
button, input { font-family: inherit; }
button { cursor: pointer; }

.container { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 20px; }

/* ─── NAVBAR ────────────────────────────────────────────────────── */
/* IMPORTANTE: este navbar es position:sticky, y a proposito NO lleva
   backdrop-filter ni transform - esa combinacion (sticky + backdrop-filter
   en el MISMO elemento) tiene bugs reales y documentados en WebKit/iOS
   Safari, donde el elemento puede "perder" su capa de composicion a
   mitad de scroll y desengancharse (se detecto primero en el navbar de
   la app ya logueada - ver style.css para el relato completo). El navbar
   se queda solido/casi opaco; todo el difuminado de verdad vive en
   .landing-velo-difuminado de aqui abajo, que es position:fixed (no
   sticky) y no tiene ese problema. */
.landing-navbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  background: rgba(8,18,38,.97); /* respaldo si el navegador no entiende color-mix() */
  background: linear-gradient(
    to bottom, rgba(8,18,38,.97) 0%, rgba(8,18,38,.97) 78%,
    color-mix(in srgb, rgba(8,18,38,.97) 45%, var(--bg) 55%) 100%
  );
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .landing-navbar {
    background: rgba(255,255,255,.97);
    background: linear-gradient(
      to bottom, rgba(255,255,255,.97) 0%, rgba(255,255,255,.97) 78%,
      color-mix(in srgb, rgba(255,255,255,.97) 45%, var(--bg) 55%) 100%
    );
    box-shadow: 0 2px 16px rgba(10,22,40,.12);
  }
}
:root[data-theme="light"] .landing-navbar {
  background: rgba(255,255,255,.97);
  background: linear-gradient(
    to bottom, rgba(255,255,255,.97) 0%, rgba(255,255,255,.97) 78%,
    color-mix(in srgb, rgba(255,255,255,.97) 45%, var(--bg) 55%) 100%
  );
  box-shadow: 0 2px 16px rgba(10,22,40,.12);
}

/* Velo de difuminado progresivo, igual que en la app ya logueada (ver la
   nota larga en style.css): varias capas apiladas, cada una con MAS
   desenfoque y una mascara en degradado mas alta que la anterior, para
   que el fondo animado del hero (el resplandor de .hero-bg y el movil
   con las capturas girando) se vea entrar nitido poco a poco segun se
   aleja del navbar en vez de cortarse en seco - asi el navbar "esmerilado"
   que tenia antes queda integrado con la animacion del hero en vez de
   ser una barra sólida aparte.

   Aqui se queda encendido SIEMPRE (a diferencia del navbar de la app, que
   solo se difumina al hacer scroll): el diseño original de esta barra ya
   era translucida en reposo, asi que el efecto tiene que verse desde el
   primer pantallazo, con el propio hero detras. */
.landing-velo-difuminado {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 140px;
  z-index: 9; /* justo por debajo del navbar (10) */
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.landing-velo-difuminado span { position: absolute; inset: 0; display: block; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* Las mascaras se anclan en PIXELES (no en %) a partir de los 62px
     reales del navbar - igual que en style.css (ver la nota larga ahi):
     medir en % del contenedor entero hacia desvanecer las capas DENTRO
     de la zona que tapa el propio navbar, asi que la mas fuerte nunca
     llegaba a verse. Ahora la transicion entera pasa DESPUES del borde
     del navbar. */
  .landing-velo-difuminado span:nth-child(1) {
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 128px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 128px);
  }
  .landing-velo-difuminado span:nth-child(2) {
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 112px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 112px);
  }
  .landing-velo-difuminado span:nth-child(3) {
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 96px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 96px);
  }
  .landing-velo-difuminado span:nth-child(4) {
    -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 80px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 62px, transparent 80px);
  }
}
.landing-navbar-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 21px; letter-spacing: .5px;
  background: linear-gradient(90deg, var(--blue-neon), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.landing-navbar-cta {
  background: linear-gradient(135deg, var(--blue-vivid), var(--teal)); color: #fff;
  font-weight: 800; font-size: 13px; padding: 9px 18px; border-radius: var(--r-xl); border: none;
}

/* ─── INSTALL BANNER (PWA) ──────────────────────────────────────── */
.install-banner {
  position: fixed; z-index: 41; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto; padding: 16px 40px 16px 16px;
  background: var(--bg-card-strong); border: 1px solid var(--border); border-radius: var(--r-lg);
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.install-banner h3 { font-size: 15px; margin-bottom: 6px; }
.install-banner p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.install-banner .close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1;
}
.install-banner #btn-install { margin-top: 10px; }
/* Punta que "apunta" hacia el icono Compartir de la barra de Safari,
   justo debajo del banner - por eso el banner va centrado. */
.install-banner-flecha {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 9px solid var(--bg-card-strong);
}

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero { position: relative; padding: 48px 0 40px; overflow: hidden; z-index: 1; }
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 15% -5%,  rgba(47,125,209,.55) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 95% 20%,  rgba(79,214,232,.28) 0%, transparent 52%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(247,201,72,.22) 0%, transparent 58%);
  animation: heroPulse 9s ease-in-out infinite alternate;
}
@keyframes heroPulse { 0% { filter: brightness(1) saturate(1); } 100% { filter: brightness(1.1) saturate(1.15); } }
.hero-decor {
  position: absolute; top: 26px; right: 22px; width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.16), rgba(47,125,209,.28));
  border: 2px solid rgba(100,181,255,.35); border-radius: 50%;
  box-shadow: 0 8px 40px rgba(47,125,209,.3);
  animation: decorFloat 5s ease-in-out infinite;
}
@keyframes decorFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(14px) rotate(-8deg); } }
.hero-content { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(47,125,209,.14); border: 1px solid rgba(100,181,255,.4); border-radius: var(--r-xl);
  padding: 6px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--blue-neon); margin-bottom: 18px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

.hero-promo-banner {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(247,201,72,.16), rgba(255,107,74,.12));
  border: 1px solid rgba(247,201,72,.45); border-radius: var(--r-xl);
  padding: 9px 16px; margin-bottom: 18px;
  animation: promoGlow 2.4s ease-in-out infinite;
}
@keyframes promoGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(247,201,72,.1); }
  50% { box-shadow: 0 0 26px rgba(247,201,72,.32); }
}
.hero-promo-tachado {
  text-decoration: line-through; text-decoration-color: var(--coral);
  color: var(--text-dimmer); font-size: 13px; font-weight: 600;
}
.hero-promo-gratis {
  font-family: var(--font-display); font-size: 17px; letter-spacing: .3px;
  color: var(--gold-light); font-weight: 800;
}

.precio-tachado { text-decoration: line-through; text-decoration-color: var(--coral); color: var(--text-dimmer); font-size: .55em; font-weight: 600; }
.precio-gratis { color: var(--gold-light); }
.texto-gratis { color: var(--gold); }
.field-hint s { color: inherit; opacity: .7; }
.hero-title {
  font-family: var(--font-display); font-size: clamp(40px, 13vw, 58px);
  line-height: .98; letter-spacing: .2px; margin-bottom: 16px; font-weight: 800;
}
.hero-title .t-blue { background: linear-gradient(90deg, var(--blue-neon) 0%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-title .t-gold { background: linear-gradient(90deg, var(--gold) 0%, var(--coral) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 14.5px; font-weight: 500; line-height: 1.6; color: var(--text-dim); margin-bottom: 26px; max-width: 380px; }
.hero-sub strong { color: var(--text); font-weight: 700; }
.cta-group { display: flex; flex-direction: column; gap: 10px; }
.btn-lg {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 15px; padding: 15px 28px; border-radius: var(--r-lg);
}

/* ─── STATS STRIP ───────────────────────────────────────────────── */
.strip {
  background: linear-gradient(90deg, var(--ink-jungle), var(--ink-mid), var(--teal), var(--ink-mid), var(--ink-jungle));
  background-size: 200% 100%; animation: stripSlide 6s ease-in-out infinite alternate;
  padding: 16px 0; position: relative; z-index: 1;
}
@keyframes stripSlide { 0%{background-position:0%} 100%{background-position:100%} }
.strip-inner { display: flex; justify-content: space-around; align-items: center; }
.strip-stat { text-align: center; }
.strip-num { font-family: var(--font-display); font-size: 24px; letter-spacing: .5px; color: #fff; line-height: 1; }
.strip-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: 3px; }
.strip-div { width: 1px; height: 32px; background: rgba(255,255,255,.22); }

/* ─── SECCIONES ─────────────────────────────────────────────────── */
.section-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue-neon); margin-bottom: 8px; }
.section-title { font-family: var(--font-display); font-size: clamp(28px, 8vw, 38px); line-height: .98; letter-spacing: .2px; margin-bottom: 8px; font-weight: 800; }
.section-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 24px; }
.landing-section { position: relative; z-index: 1; padding: 40px 0; }

.feat-grid { display: flex; flex-direction: column; gap: 12px; }
.feat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 16px; display: flex; gap: 14px; align-items: flex-start;
  position: relative; overflow: hidden;
}
.feat-card.tiene-captura { flex-wrap: wrap; }
.feat-icon { font-size: 26px; line-height: 1; }
.feat-body h3 { font-size: 15px; margin-bottom: 4px; }
.feat-body p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ─── Capturas dentro de las tarjetas de "por que EVA PRO" ──────────
   Se revelan con zoom al entrar en pantalla (IntersectionObserver) y
   luego quedan con un zoom in/out continuo tipo Ken Burns. */
.feat-shot {
  flex-basis: 100%;
  position: relative;
  margin-top: 4px;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 390 / 300;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.55);
  opacity: 0;
  transform: scale(.88) translateY(18px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.feat-shot.en-vista { opacity: 1; transform: scale(1) translateY(0); }
.feat-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transform: scale(1);
}
.feat-shot.en-vista img { animation: featKenBurns 9s ease-in-out infinite; }
@keyframes featKenBurns {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(-1.5%, -1.5%); }
}
/* Brillo de color alrededor de la propia captura (no detras, que quedaria
   tapado por la imagen): una sombra de color, no negra, tintada por
   tarjeta - eso sí se ve, encima del fondo blanco o del cristal oscuro. */
.feat-card[data-accent="coral"] .feat-shot.en-vista { box-shadow: 0 22px 45px -16px rgba(255,107,74,.5), 0 0 0 1px rgba(255,107,74,.18); }
.feat-card[data-accent="cyan"]  .feat-shot.en-vista { box-shadow: 0 22px 45px -16px rgba(79,214,232,.5), 0 0 0 1px rgba(79,214,232,.18); }
.feat-card[data-accent="teal"]  .feat-shot.en-vista { box-shadow: 0 22px 45px -16px rgba(23,184,166,.5), 0 0 0 1px rgba(23,184,166,.18); }
.feat-card[data-accent="gold"]  .feat-shot.en-vista { box-shadow: 0 22px 45px -16px rgba(247,201,72,.55), 0 0 0 1px rgba(247,201,72,.2); }
.feat-card.tiene-captura {
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card) 55%);
}

@media (prefers-reduced-motion: reduce) {
  .feat-shot { transition-duration: .2s; }
  .feat-shot.en-vista img { animation: none; }
}

.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 16px; }
.step-left { display: flex; flex-direction: column; align-items: center; }
.step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-vivid), var(--teal)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.step-line { flex: 1; width: 2px; background: var(--border); min-height: 24px; }
.step:last-child .step-line { display: none; }
.step-body { padding-bottom: 24px; }
.step-body h3 { font-size: 15px; margin-bottom: 4px; }
.step-body p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.app-footer { text-align: center; padding: 28px 18px 24px; }
.app-footer-mark { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.app-footer p { font-size: 12px; color: var(--text-dimmer); line-height: 1.6; }
.app-footer p a { color: var(--text-dim); text-decoration: underline; }

.aviso-cookies {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  max-width: 560px; margin: 0 auto;
  background: var(--bg-card-strong); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.aviso-cookies p { font-size: 12.5px; color: var(--text-dim); flex: 1; min-width: 200px; margin: 0; }
.aviso-cookies a { color: var(--blue-neon); font-weight: 700; }
.aviso-cookies button { white-space: nowrap; }
.landing-footer { position: relative; z-index: 1; padding: 32px 0 48px; }

/* ─── AUTH (login / registro / recuperar / restablecer) ────────── */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 32px 0 60px; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo img { width: 56px; height: 56px; border-radius: 15px; box-shadow: var(--shadow-blue); }
.auth-logo h1 {
  font-family: var(--font-display); font-size: clamp(34px, 10vw, 46px); letter-spacing: .5px; line-height: .98;
  background: linear-gradient(90deg, var(--blue-neon), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-top: 10px; font-weight: 800;
}
.auth-logo p { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.tab { padding: 15px; font-size: 14px; font-weight: 700; text-align: center; color: var(--text-dimmer); background: transparent; border: none; }
.tab.active { color: var(--blue-neon); background: rgba(47,125,209,.10); border-bottom: 2px solid var(--blue-neon); }
.panel { padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.panel.hidden { display: none; }
.panel form { display: flex; flex-direction: column; gap: 10px; }

.field { display: flex; align-items: center; gap: 10px; background: rgba(127,127,127,.08); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
/* 16px minimo, nunca menos: por debajo de eso iOS Safari hace zoom el
   solo al enfocar el campo (login, registro, recuperar contraseña...),
   y el zoom no siempre vuelve a su sitio al cerrar el teclado. */
.field input { background: none; border: none; outline: none; width: 100%; color: var(--text); font-size: 16px; font-weight: 500; }
.field input::placeholder { color: var(--text-dimmer); }
.field-hint { font-size: 11px; color: var(--text-dimmer); padding-left: 2px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--r-md); font-weight: 800; cursor: pointer; padding: 14px 20px; font-size: 15px; transition: transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--blue-vivid), var(--teal)); color: #fff; box-shadow: var(--shadow-blue); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--orange)); color: var(--ink-deep); box-shadow: var(--shadow-gold); }
.btn-ghost { background: rgba(127,127,127,.1); color: var(--text); border: 1px solid var(--border); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; pointer-events: none; }

.error-box { background: rgba(255,107,74,.14); border: 1px solid rgba(255,107,74,.4); color: #FFB3A1; border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; }
.success-box { background: rgba(23,184,166,.14); border: 1px solid rgba(23,184,166,.4); color: #6EE7D8; border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; }

.auth-links { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.auth-links a { color: var(--blue-neon); font-weight: 700; }

.check-terminos {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-dim); line-height: 1.4;
}
.check-terminos input { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.check-terminos a { color: var(--blue-neon); font-weight: 600; }

.link-contacto { color: var(--blue-neon); font-weight: 700; }
.contacto-form { margin-top: 8px; }
.field-textarea { align-items: flex-start; }
.field-textarea textarea {
  background: none; border: none; outline: none; width: 100%; resize: vertical;
  color: var(--text); font-size: 16px; font-weight: 500; font-family: inherit; min-height: 80px;
}
.field-textarea textarea::placeholder { color: var(--text-dimmer); }
.campo-señuelo { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ─── Reviews (estrellas + comentario, caseras) ─────────────────────── */
.reviews-resumen { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; }
.reviews-media {
  font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.reviews-resumen-detalle { display: flex; flex-direction: column; gap: 2px; }
.reviews-estrellas-estaticas { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
.reviews-total { font-size: 12.5px; color: var(--text-dim); }
.reviews-grid { display: flex; flex-direction: column; gap: 12px; }
.review-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px;
}
.review-card .reviews-estrellas-estaticas { display: block; margin-bottom: 8px; }
.review-comentario { font-size: 14px; color: var(--text); line-height: 1.5; font-style: italic; }
.review-autor { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; font-weight: 600; }

.simple-page { max-width: 420px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.simple-page .emoji { font-size: 44px; margin-bottom: 12px; }
.simple-page h1 { font-family: var(--font-display); font-size: 28px; margin-bottom: 10px; font-weight: 800; }
.simple-page p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

/* ─── ESCAPARATE ANIMADO (capturas reales, tipo movil que gira) ────── */
.showcase-wrap {
  perspective: 1400px;
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.showcase-phone {
  position: relative;
  width: min(240px, 62vw);
  background: linear-gradient(160deg, #1a2b4d, var(--ink-deep));
  border-radius: 34px;
  padding: 8px;
  box-shadow:
    0 40px 70px -25px rgba(0,0,0,.65),
    0 0 0 1px rgba(100,181,255,.25),
    0 0 40px rgba(47,125,209,.25);
  transform-style: preserve-3d;
  animation: showcaseFloat 6s ease-in-out infinite;
}
@keyframes showcaseFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(2deg) translateY(0); }
  50% { transform: rotateY(6deg) rotateX(-1deg) translateY(-10px); }
}
.showcase-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 16px; background: var(--ink-deep);
  border-radius: 0 0 14px 14px; z-index: 3;
}
.showcase-screen {
  position: relative; width: 100%;
  /* Misma proporcion exacta que las capturas (390x844) para que nunca se
     recorte ningun borde de la interfaz real. */
  aspect-ratio: 390 / 844;
  border-radius: 26px; overflow: hidden; background: var(--off-white);
  transform-style: preserve-3d;
}
.showcase-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
  opacity: 0;
  transform: rotateY(50deg) scale(.9);
  transform-origin: left center;
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.showcase-slide.es-activa { opacity: 1; transform: rotateY(0deg) scale(1); z-index: 1; }
.showcase-slide.es-saliendo { opacity: 0; transform: rotateY(-50deg) scale(.9); transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  .showcase-phone { animation: none; }
  .showcase-slide { transition-duration: .3s; }
}