html { scroll-behavior: smooth; }
body { background: #060B14; }

/* Idioma: se muestra solo el texto del idioma activo */
html[lang="es"] [lang="en"], html[lang="en"] [lang="es"] { display: none !important; }

/* Selector de idioma */
.lang-switch { display: inline-flex; border: 1px solid #1C2A3F; border-radius: 10px; overflow: hidden; }
.lang-switch button { min-width: 38px; min-height: 34px; padding: 0 8px; color: #A9B8CC; font-size: .8125rem; font-weight: 800; }
.lang-switch button[aria-pressed="true"] { background: #38BDF8; color: #04202C; }

/* Botón principal */
.cta { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: .85rem clamp(.75rem, 3vw, 1.6rem); border-radius: 16px; color: #04202C; font-weight: 900; font-size: clamp(.95rem, 4.3vw, 1.0625rem); text-align: center; background: linear-gradient(135deg, #00D2FF, #38BDF8); box-shadow: 0 0 26px rgba(0, 210, 255, .45); transition: transform .15s ease, box-shadow .15s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(0, 210, 255, .65); }
.cta:active { transform: translateY(0); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Halo de neón detrás del celular */
.halo { position: absolute; inset: 8% -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 210, 255, .42), rgba(56, 189, 248, .14) 58%, transparent); filter: blur(26px); animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .6; transform: scale(.95); } }

/* Mockup del celular */
.phone { position: relative; width: min(62vw, 290px); aspect-ratio: 540 / 1120; container-type: inline-size; overflow: hidden; background: #000; border: clamp(6px, 1.8vw, 8px) solid #10131A; border-radius: clamp(36px, 10vw, 44px); box-shadow: 0 0 0 1px rgba(56, 189, 248, .35), 0 0 38px rgba(0, 210, 255, .28), 0 26px 60px rgba(0, 0, 0, .6); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.phone video, .phone .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50%) 50%; background-size: cover; background-position: var(--pos, 50%) 50%; }
.phone .shade { position: absolute; inset: 0 0 auto 0; height: 34%; background: linear-gradient(rgba(6, 11, 20, .28), transparent); }
.phone .island { position: absolute; top: 3.6cqw; left: 50%; width: 28cqw; height: 8cqw; margin-left: -14cqw; background: #000; border-radius: 99px; }
.phone .date { position: absolute; top: 16cqw; inset-inline: 0; text-align: center; color: #fff; font-size: 5cqw; font-weight: 800; }
.phone .clock { position: absolute; top: 20.5cqw; inset-inline: 0; text-align: center; color: #fff; font-size: 25cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(18, 48, 95, .5); }
.phone .home { position: absolute; bottom: 2.2cqw; left: 50%; width: 32cqw; height: 1.3cqw; margin-left: -16cqw; background: rgba(255, 255, 255, .95); border-radius: 99px; }

/* Protección de las vistas previas: desalienta guardar con clic o toque largo */
.protected, .protected * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.phone video, .phone .still { pointer-events: none; }
.phone .shield { position: absolute; inset: 0; z-index: 2; }

/* Selector de escenas */
.scenes { scrollbar-width: none; }
.scenes::-webkit-scrollbar { display: none; }
.scene { flex: none; width: 62px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; border: 2px solid #1C2A3F; background-size: cover; background-position: center; opacity: .72; transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease; scroll-snap-align: center; }
.scene:hover { opacity: 1; }
.scene[aria-pressed="true"] { opacity: 1; border-color: #00D2FF; box-shadow: 0 0 16px rgba(0, 210, 255, .55); }

/* Barra flotante en celular */
.floating { transition: transform .25s ease; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.floating.off { transform: translateY(110%); }

/* Preguntas frecuentes */
details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 800; font-size: 1.0625rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: #00D2FF; font-weight: 900; font-size: 1.25rem; line-height: 1; }
details[open] summary::after { content: "–"; }

/* Página legal */
.legal h2 { margin-top: 2.5rem; font-size: 1.5rem; font-weight: 900; scroll-margin-top: 1rem; }
.legal h3 { margin-top: 1.25rem; font-weight: 800; }
.legal p, .legal li { margin-top: .6rem; color: #C6D2E1; font-weight: 500; line-height: 1.55; }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal a { color: #38BDF8; text-decoration: underline; text-underline-offset: 2px; }
.legal label { display: block; margin-top: .9rem; font-weight: 800; font-size: .9375rem; }
.legal input, .legal textarea { width: 100%; margin-top: .3rem; padding: .7rem .85rem; border-radius: 10px; border: 1px solid #2B3D57; background: #060B14; color: #fff; font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone, .halo { animation: none; }
  .cta, .floating { transition: none; }
}