/* Sunridge Labs · "Negro": fondo negro, el producto en grande y una luz cálida detrás del teléfono. */
/* La letra: en iPhone y Mac es la del sistema (SF). En los demás, Geist, guardada en esta misma web (fonts/). */
/* Letras: Inter (la de muchas webs de producto) para el texto, Inter Display para los títulos, e Instrument Serif en cursiva
   para las palabras doradas. Todas guardadas en esta misma web (fonts/), con licencia OFL. */
@font-face { font-family: 'Inter'; src: url(fonts/Inter-Regular.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/Inter-Medium.woff) format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url(fonts/InterDisplay-Medium.woff) format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url(fonts/InterDisplay-SemiBold.woff) format('woff'); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
  --bg: #000; --raise: #121214; --raise2: #1c1c1f; --fg: #f5f5f7; --fg2: #c2c2c7; --mute: #8e8e93; --line: #26262a; --line2: #3a3a3f;
  --gold: #e4c387; --gold2: #c9a463; --link: #2997ff; --on-light: #0b0b0c;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --measure: 68ch;
  --gut-l: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scrollbar-color: var(--line2) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(228, 195, 135, .35); color: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
input { caret-color: var(--gold); }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--display); }
p { text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Barra de arriba: fija, translúcida, fina. */
.top { position: sticky; top: 0; z-index: 10; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.mark { font: 600 17px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.mark .logo { width: 22px; height: 22px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.by { font-size: 12px; color: var(--mute); text-decoration: none; white-space: nowrap; }
nav.main { display: flex; align-items: center; gap: 4px 20px; font-size: 13px; color: var(--fg2); }
nav.main a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
nav.main a[aria-current] { color: var(--fg); }
nav.main .lang { color: var(--mute); letter-spacing: .04em; }
@media (max-width: 560px) { nav.main .opt { display: none; } .by { display: none; } }
@media (hover: hover) and (pointer: fine) { nav.main a:hover, .by:hover { color: var(--fg); } }
.logo-sun { fill: var(--gold); }
.logo-ridge { fill: var(--bg); stroke: var(--fg); stroke-width: 1.4; stroke-linejoin: round; }

/* Botones y enlaces */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font: 500 17px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; background: var(--fg); color: var(--on-light); transition: transform 160ms var(--ease), background-color 200ms ease, opacity 200ms ease; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--fg); color: var(--on-light); }
.btn.gold { background: var(--gold); color: #1a1408; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #fff; } .btn.gold:hover { background: #ecd09c; } }
.more { color: var(--link); text-decoration: none; font-size: 17px; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.more::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); margin-left: 6px; }
@media (hover: hover) and (pointer: fine) { .more:hover { text-decoration: underline; text-decoration-color: currentColor; } }
.ctas { display: flex; align-items: center; justify-content: center; gap: 10px 26px; flex-wrap: wrap; }

/* El teléfono: marco oscuro, la pantalla real de la app adentro. */
.iphone { --w: 300px; position: relative; margin: 0; width: var(--w); max-width: 100%; flex: none; border-radius: calc(var(--w) * .16); padding: calc(var(--w) * .032);
  background: linear-gradient(150deg, #4a4a4e 0%, #1b1b1d 22%, #0d0d0e 60%, #2a2a2d 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .005) #6d6d72, inset 0 0 0 calc(var(--w) * .012) #111, 0 calc(var(--w) * .14) calc(var(--w) * .26) calc(var(--w) * -.06) rgba(0, 0, 0, .9); }
.iphone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border-radius: calc(var(--w) * .128); background: #0a0a0b; }
.iphone::after { content: ''; position: absolute; top: calc(var(--w) * .06); left: 50%; width: calc(var(--w) * .29); height: calc(var(--w) * .086); transform: translateX(-50%); background: #000; border-radius: 999px; }

/* Portadas */
.hero { text-align: center; padding-top: clamp(56px, 9vw, 96px); }
.hero h1 { font-size: clamp(44px, 8.6vw, 96px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; max-width: 11ch; margin: 0 auto; color: var(--fg); }
.hero h1 em, .hero h1 .g { font-style: normal; color: var(--gold); }
.hero h1.words { max-width: 13ch; }
.hero h1 .w { display: inline-block; }

/* Quiénes somos: una frase grande que se va iluminando palabra por palabra al bajar. */
.manifesto .big { margin: 0; font: 700 clamp(30px, 4.8vw, 58px)/1.14 var(--display); letter-spacing: -0.035em; max-width: 24ch; text-wrap: pretty; }
.manifesto .mw { color: var(--fg); transition: color 450ms ease; }
.manifesto .mw.g { color: var(--gold); }
.manifesto.lit .mw { color: #3b3b40; }
.manifesto.lit .mw.on { color: var(--fg); }
.manifesto.lit .mw.g.on { color: var(--gold); }
.hero .sub { margin: 18px auto 0; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; letter-spacing: -0.015em; color: var(--fg2); max-width: 32ch; }
.hero .ctas { margin-top: 26px; }
.app-icon { width: 88px; height: 88px; border-radius: 22.5%; margin: 0 auto 22px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
main { overflow-x: clip; }
.stage { position: relative; display: flex; justify-content: center; margin-top: clamp(48px, 7vw, 72px); padding-bottom: 24px; }
.stage::before { content: ''; position: absolute; left: 50%; top: 12%; width: min(780px, 130vw); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 200, 125, .62), rgba(214, 160, 80, .26) 40%, rgba(0, 0, 0, 0) 72%); filter: blur(14px); }
.stage .iphone { --w: clamp(250px, 30vw, 340px); translate: 0 calc(var(--p, 0) * -36px); scale: calc(1 + var(--p, 0) * .045); }
.stage::before { opacity: calc(.72 + var(--p, 0) * .5); }
.soon-note { margin: 14px 0 0; color: var(--mute); font-size: 14px; }

/* Secciones */
.band { padding-block: clamp(72px, 10vw, 120px) 0; }
.band:last-of-type { padding-bottom: clamp(72px, 10vw, 120px); }
.band h2 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.band h2 em { font-style: normal; color: var(--gold); }
.band .h2sub { color: var(--fg2); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; margin: 12px 0 0; max-width: 40ch; }
.band-head { margin-bottom: 32px; }

/* Celdas con pantallas */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cell { position: relative; background: var(--raise); border-radius: 28px; overflow: hidden; min-height: 520px; padding: 32px 28px 0; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); text-decoration: none; }
.cell h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; line-height: 1.12; font-weight: 700; max-width: 15ch; }
.cell h3 em { font-style: normal; color: var(--gold); }
.cell p { color: var(--fg2); font-size: 15.5px; line-height: 1.45; margin: 10px 0 0; max-width: 30ch; }
.cell .iphone { --w: 240px; margin-top: 28px; }
.bento.two .cell { min-height: 560px; }
.bento.two .cell .iphone { --w: 260px; }
.cell.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; text-align: left; gap: 18px; padding: 26px 28px; flex-wrap: wrap; }
.cell.wide .app-icon { width: 64px; height: 64px; margin: 0; }
.cell.wide .t { flex: 1 1 220px; }
.cell.wide .t b { font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; display: block; }
.cell.wide .t span { color: var(--mute); font-size: 15px; }
.cell.wide .ctas { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .cell:not(.rv-wait):hover .iphone, .cell.rv-on:hover .iphone { translate: 0 -10px; transition: translate 500ms var(--ease); } }
@media (max-width: 860px) { .bento, .bento.two { grid-template-columns: minmax(0, 1fr); } .cell, .bento.two .cell { min-height: 480px; } .cell.wide { min-height: 0; } .cell.wide .ctas { justify-content: flex-start; } }

/* Lo demás que trae: una lista, no tarjetas. */
.facts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.facts li { border-top: 1px solid var(--line); padding: 20px 0 8px; min-width: 0; }
.facts b { display: block; font: 600 17px/1.3 var(--display); letter-spacing: -0.015em; }
.facts span { display: block; color: var(--mute); font-size: 15px; line-height: 1.45; margin-top: 6px; }
@media (max-width: 860px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* Promesas */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.promises li { display: grid; gap: 12px; align-content: start; color: var(--fg2); font-size: 15.5px; line-height: 1.4; min-width: 0; }
.ico { width: 28px; height: 28px; flex: none; color: var(--gold); }
@media (max-width: 860px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

/* Planes */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plan-card { background: var(--raise); border-radius: 28px; padding: 30px 28px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.plan-card.pro { box-shadow: inset 0 0 0 1.5px var(--gold2); background: linear-gradient(180deg, #19160f 0%, var(--raise) 55%); }
.plan-card h3 { font-size: 24px; letter-spacing: -0.03em; font-weight: 700; }
.amount { margin: 8px 0 18px; color: var(--mute); font-size: 15px; line-height: 1.4; }
.amount span { display: block; color: var(--fg); font: 700 40px/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.plan-card.pro .amount span { color: var(--gold); }
.plan-card ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan-card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--fg2); font-size: 15.5px; line-height: 1.45; }
.tick { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }
.fine { color: var(--mute); font-size: 14px; margin: 22px 0 0; max-width: 72ch; line-height: 1.5; }
.fine a { color: var(--fg2); }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Documentos de la app */
.docs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.docs li { border-top: 1px solid var(--line); min-width: 0; }
.docs a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 17px; text-decoration: none; }
.docs a span:last-child { color: var(--mute); font-size: 15px; text-align: right; }
@media (hover: hover) and (pointer: fine) { .docs a:hover span:first-child { color: var(--gold); } }
@media (max-width: 700px) { .docs { grid-template-columns: minmax(0, 1fr); } .docs a { flex-direction: column; gap: 2px; } .docs a span:last-child { text-align: left; } }

/* Lista de espera */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.espera { display: grid; gap: 10px; max-width: 520px; margin: 28px auto 0; text-align: left; }
.espera .field { display: flex; flex-wrap: wrap; gap: 10px; }
.espera input[type=email] { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2); background: var(--raise); color: var(--fg); font: 400 17px/1 var(--font); transition: border-color 200ms ease, box-shadow 200ms ease; }
.espera input[type=email]::placeholder { color: var(--mute); }
.espera input[type=email]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(228, 195, 135, .18); }
.espera input[aria-invalid=true] { border-color: #ff8a7a; }
.espera button.btn { min-height: 48px; flex: 0 0 auto; }
@media (max-width: 520px) { .espera button.btn { flex: 1 1 100%; } }
.espera button.btn:disabled { opacity: .55; cursor: progress; transform: none; }
.espera .note { margin: 0; color: var(--mute); font-size: 13.5px; text-align: center; }
.espera .note a { color: var(--fg2); }
.espera .msg { margin: 0; font-size: 15px; color: var(--fg2); min-height: 1.5em; text-align: center; }
.espera .msg.ok { color: var(--gold); }
.espera .msg.err { color: #ff9f8f; }
.espera.done .field { display: none; }
.soon { cursor: default; }
.close { text-align: center; }
.close h2 { max-width: 16ch; margin: 0 auto; }
.close .h2sub { margin-left: auto; margin-right: auto; }

/* Empresa: nosotros y contacto */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; }
.about-text { margin: 18px 0 0; color: var(--fg2); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; max-width: 40ch; }
.contact { background: var(--raise); border-radius: 28px; padding: 30px 28px; display: grid; gap: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); min-width: 0; }
.contact .lbl { margin: 0; color: var(--mute); font-size: 15px; }
.contact .row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.mail { font: 600 21px/1.3 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; user-select: all; }
.copy { font: 500 14px/1 var(--font); color: var(--on-light); background: var(--fg); border: 0; border-radius: 999px; padding: 0 16px; min-height: 36px; cursor: pointer; transition: transform 160ms var(--ease), background-color 200ms ease; }
.copy:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .copy:hover { background: #fff; } }
.contact p { margin: 0; color: var(--fg2); font-size: 15.5px; }
.contact p a { color: var(--fg); }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Documentos legales */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 56px 88px; }
@media (min-width: 900px) { .doc { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } .toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; } }
.doc h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.meta { color: var(--mute); font-size: 14px; margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.toc { font-size: 14px; color: var(--fg2); min-width: 0; }
.toc details > summary { cursor: pointer; color: var(--fg); font-weight: 600; font-size: 14px; padding-block: 6px; min-height: 44px; display: flex; align-items: center; }
.toc ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.toc a { display: grid; grid-template-columns: 2.2em 1fr; text-decoration: none; padding-block: 5px; }
.toc a .n { color: var(--mute); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--fg); } }
.text { min-width: 0; max-width: var(--measure); }
.text .intro p { font-size: 19px; color: var(--fg2); }
.text section { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 32px; scroll-margin-top: 72px; }
.text h2 { font: 600 19px/1.35 var(--display); letter-spacing: -0.015em; margin: 16px 0 6px; display: grid; grid-template-columns: 2.2em 1fr; }
.text h2 .n { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 500; }
.text p, .text ul { margin: 10px 0; color: var(--fg2); overflow-wrap: anywhere; }
.text a { color: var(--link); text-decoration: none; }
.text ul { padding-left: 1.2em; }
.text li { margin: 5px 0; }
.text li::marker { color: var(--gold); }
.ui { color: var(--fg); }
.caps { font-size: 15px; letter-spacing: 0; }

/* Soporte */
.help { padding-block: 56px 96px; display: grid; gap: 40px; }
.help h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; }
.help h1 em { font-style: normal; color: var(--gold); }
.help .contact { max-width: 640px; }
.faq { max-width: var(--measure); }
.faq details { border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; font-weight: 600; letter-spacing: -0.015em; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 8px; height: 8px; border: solid var(--mute); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.faq .a { padding-bottom: 18px; color: var(--fg2); }
.faq .a p { margin: 0 0 10px; }
.faq .a ul { margin: 0 0 10px; padding-left: 1.2em; }
.faq .a a { color: var(--link); text-decoration: none; }
.notfound { padding-block: 96px 120px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.notfound h1 { font-size: clamp(40px, 7vw, 72px); letter-spacing: -0.045em; font-weight: 700; line-height: 1.04; }
.notfound p { color: var(--fg2); margin: 0; }

footer { border-top: 1px solid var(--line); padding-block: 24px 44px; color: var(--mute); font-size: 12.5px; line-height: 1.6; margin-top: 0; }
footer .wrap { display: grid; gap: 10px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer nav a { text-decoration: none; color: var(--fg2); min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { footer nav a:hover { color: var(--fg); } }

/* Movimiento: un solo momento al abrir (el título sube y la luz se enciende detrás del teléfono);
   al bajar, las tarjetas aparecen suave. Nada se mueve si la persona pidió "reducir movimiento". */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: sube 900ms var(--ease) both; }
  .hero > h1.words { animation: none; }
  .hero h1 .w { animation: palabra 1000ms var(--ease) both; }
  .hero h1 .w:nth-child(2) { animation-delay: 60ms; } .hero h1 .w:nth-child(3) { animation-delay: 120ms; } .hero h1 .w:nth-child(4) { animation-delay: 180ms; }
  .hero h1 .w:nth-child(5) { animation-delay: 240ms; } .hero h1 .w:nth-child(6) { animation-delay: 300ms; } .hero h1 .w:nth-child(7) { animation-delay: 360ms; } .hero h1 .w:nth-child(8) { animation-delay: 420ms; }
  .cell .iphone { transition: translate 600ms var(--ease); }
  .cell.rv-wait .iphone { translate: 0 64px; }
  .cell.rv-wait.rv-on .iphone { translate: 0 0; transition: translate 1200ms var(--ease) calc(var(--rv-d, 0s) + 140ms); }
  .hero > :nth-child(2) { animation-delay: 70ms; } .hero > :nth-child(3) { animation-delay: 140ms; } .hero > :nth-child(4) { animation-delay: 210ms; } .hero > :nth-child(5) { animation-delay: 280ms; }
  .stage .iphone { animation: sube 1100ms var(--ease) 260ms both; }
  .stage::before { animation: luz 2400ms var(--ease) 420ms both; }
  .rv-wait { opacity: 0; transform: translateY(24px); }
  .rv-wait.rv-on { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: var(--rv-d, 0s); }
  .espera .msg.ok { animation: sube 500ms var(--ease) both; }
}
@keyframes sube { from { opacity: 0; transform: translateY(22px); } }
@keyframes palabra { from { opacity: 0; transform: translateY(.3em); filter: blur(10px); } }
@keyframes luz { from { opacity: 0; transform: translateX(-50%) scale(.82); } }

/* ===== Diseño 2 (oct 2026): "el mundo". Un cielo que pasa de noche a amanecer, el iPhone en 3D y todo moviéndose al bajar. ===== */
/* El logo: "sunridge" en minúsculas; el punto de la i es un medio sol dorado. */
.wm { display: inline-flex; align-items: baseline; font: 650 21px/1 var(--display); letter-spacing: -0.045em; color: var(--fg); }
.wm-i { display: inline-block; position: relative; width: .27em; height: .74em; margin: 0 .035em; vertical-align: baseline; }
.wm-i::before { content: ''; position: absolute; left: 50%; bottom: 0; width: .125em; height: .53em; transform: translateX(-50%); background: currentColor; border-radius: .015em; }
.wm-i::after { content: ''; position: absolute; left: 50%; top: 0; width: .23em; height: .115em; transform: translateX(-50%); background: linear-gradient(180deg, #f3cf86, #c8913a); border-radius: .115em .115em 0 0; }
.wm.full { flex-direction: column; align-items: center; gap: .3em; }
.wm.full .wm-l { font-size: .26em; letter-spacing: .5em; margin-left: .5em; color: var(--mute); font-weight: 500; }
.mark .wm { font-size: 22px; }
.by { display: inline-flex; align-items: baseline; gap: 6px; }
.by .wm { font-size: 14px; color: var(--fg2); }
.btn.mini { min-height: 34px; padding: 0 16px; font-size: 14px; }
@media (max-width: 560px) { nav.main .btn.mini { display: none; } }

/* Las capas: el cielo y el teléfono quedan fijos detrás; el texto pasa por encima. */
/* Los dos lienzos van sueltos (sin caja) para que las letras gigantes de fondo puedan quedar entre el cielo y el teléfono. */
.mundo-c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#cielo { z-index: 0; background: #020309; }
#tel { z-index: 1; opacity: 0; }
#grano { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background-size: 160px 160px; }
main.con-mundo { overflow-x: clip; }
main.con-mundo .capa { position: relative; z-index: 2; }
main.con-mundo ~ footer { position: relative; z-index: 2; background: #000; }
body:has(.con-mundo) .top { background: rgba(4, 5, 12, .82); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .06); }

/* Escenas: cada una llena la pantalla. El texto va a un lado y el teléfono al otro. */
.esc { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 96px var(--gut-r) 96px var(--gut-l); --p: .5; --q: 1; }
.esc .caja { width: min(500px, 42vw); }
.esc.lado-izq .caja { justify-self: start; margin-left: max(0px, calc((100vw - 1180px) / 2)); }
.esc.lado-der .caja { justify-self: end; margin-right: max(0px, calc((100vw - 1180px) / 2)); }
.esc.centro { justify-items: center; text-align: center; }
.esc.centro .caja { width: min(760px, 100%); }
.caja.ancha { width: min(640px, 52vw); }
.ceja { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.esc h2 { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
/* Las palabras doradas van en una serif cursiva: le da el toque elegante. */
.esc h2 em, .esc h3 em, .hero3 h1 em, .band h2 em, .about h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; color: var(--gold); font-size: 1.06em; }
.esc h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; margin-top: 22px; }
.esc h2 + h3 { margin-top: 30px; }
.esc .caja > p:not(.ceja):not(.gigante):not(.big), .esc .caja > div > p { color: var(--fg2); font-size: clamp(18px, 1.55vw, 21px); line-height: 1.45; margin: 16px 0 0; max-width: 34ch; }
.esc.centro .caja > p { margin-left: auto; margin-right: auto; }
/* Al bajar, el texto entra desde abajo, se queda quieto en el centro y se va hacia arriba (con --p que pone mundo.js). */
@media (prefers-reduced-motion: no-preference) {
  .esc .caja > *, .esc .wrap > * { opacity: clamp(0, calc(var(--q) * 2.6 - .2), 1); transform: translate3d(0, calc((.5 - var(--p)) * 110px), 0); }
  .esc .caja > :nth-child(2), .esc .wrap > :nth-child(2) { transform: translate3d(0, calc((.5 - var(--p)) * 150px), 0); }
  .esc .caja > :nth-child(3), .esc .wrap > :nth-child(3) { transform: translate3d(0, calc((.5 - var(--p)) * 190px), 0); }
  .esc .caja > :nth-child(n+4) { transform: translate3d(0, calc((.5 - var(--p)) * 230px), 0); }
  .esc.hero3 .hero3-t > * { opacity: 1; transform: translate3d(0, calc(var(--p) * -160px), 0); }
}

/* Portada */
.esc.hero3 { align-items: start; text-align: center; padding-top: clamp(96px, 15vh, 170px); overflow: hidden; }
.hero3-t { max-width: 920px; margin: 0 auto; }
.hero3 h1 { font-size: clamp(48px, 7.4vw, 96px); line-height: .98; letter-spacing: -0.045em; font-weight: 600; max-width: 12ch; margin: 0 auto; }
.hero3 h1 .g { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; color: var(--gold); font-size: 1.06em; }
.hero3 .sub { margin: 18px auto 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--fg2); max-width: 40ch; }
.hero3 .ctas { margin-top: 28px; }
.hero3 .espera { margin-top: 26px; }
.hero3 h1.words .w { display: inline-block; }
.gigante-fondo { position: absolute; left: 50%; top: 58%; z-index: 0; font: 800 clamp(110px, 25vw, 440px)/.8 var(--display); letter-spacing: -0.075em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(228, 195, 135, .3); pointer-events: none; user-select: none;
  transform: translate(-50%, -50%) scale(calc(1 + var(--p, .5) * .35)); opacity: calc(1.25 - var(--p, .5) * 1.7); }
.gigante-fondo.marca { color: rgba(255, 255, 255, .035); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14); font-weight: 600; letter-spacing: -0.06em; top: 76%; }
.gigante-fondo.marca .wm-i::after { opacity: .85; }
.baja { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 54px; background: rgba(255, 255, 255, .14); overflow: hidden; z-index: 2; }
.baja span { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold); animation: baja 1.8s var(--ease) infinite; }
@keyframes baja { to { top: 110%; } }

/* Números gigantes (salen de la app: sonidos, frases, versículos). */
.gigante { margin: 0; font: 600 clamp(120px, 17vw, 250px)/.82 var(--display); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; color: var(--fg); }
.gigante + h2 { margin-top: 8px; }
.numero h2 { font-size: clamp(34px, 4.4vw, 56px); }

/* Quiénes somos / la frase que se ilumina */
main.con-mundo .manifesto .big { font-size: clamp(30px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.035em; max-width: 22ch; }
main.con-mundo .manifesto .mw.g { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Respirar: el círculo crece 4 s, se queda 7 s y baja 8 s. */
.respira { display: flex; align-items: center; gap: 26px; margin-top: 28px; }
.respira .aro { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid var(--gold); box-shadow: 0 0 40px -6px rgba(228, 195, 135, .5), inset 0 0 30px -10px rgba(228, 195, 135, .6); flex: none; transform: scale(.55); }
@media (prefers-reduced-motion: no-preference) { .respira .aro { animation: respira 19s ease-in-out infinite; } }
@keyframes respira { 0% { transform: scale(.55); } 21% { transform: scale(1); } 58% { transform: scale(1); } 100% { transform: scale(.55); } }
.respira ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--fg2); font-size: 15px; }
.respira b { color: var(--fg); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Sonidos: barras que suben y bajan, y una cinta con los nombres reales. */
.eq { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 26px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--gold), rgba(228, 195, 135, .25)); transform-origin: bottom; transform: scaleY(.25); }
@media (prefers-reduced-motion: no-preference) { .eq i { animation: eq 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); } }
@keyframes eq { 0% { transform: scaleY(.15); } 50% { transform: scaleY(.85); } 100% { transform: scaleY(.35); } }
.cinta { position: absolute; left: 0; right: 0; bottom: 7%; overflow: hidden; z-index: 0; opacity: .8; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cinta div { display: flex; gap: 10px; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .cinta div { animation: cinta 70s linear infinite; } }
.cinta span { white-space: nowrap; padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--fg2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Tu noche: el medidor de 0 a 100. */
.dial { position: relative; width: 168px; height: 168px; margin-top: 26px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 5; }
.dial-f { stroke: rgba(255, 255, 255, .08); }
.dial-v { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2s var(--ease) .2s; }
.visto .dial-v { stroke-dashoffset: 25; }
.dial > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial b { font: 300 58px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dial span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }

/* Amanecer: suena la alarma. */
.esc.amanecer { grid-template-rows: auto 1fr auto; align-items: stretch; }
.amanecer-t { align-self: start; }
.amanecer-b { align-self: end; }
.amanecer-b p { color: var(--fg2); font-size: clamp(17px, 1.5vw, 20px); max-width: 44ch; margin: 0 auto; }
.gigante-fondo.hora { top: 50%; color: rgba(228, 195, 135, .06); -webkit-text-stroke: 1.5px rgba(228, 195, 135, .28); font-variant-numeric: tabular-nums; transform: translate(-50%, -50%) scale(calc(.9 + var(--p, .5) * .25)); opacity: clamp(0, calc(var(--q, 1) * 2), 1); }
.ondas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; }
.ondas i { position: absolute; left: -28vh; top: -28vh; width: 56vh; height: 56vh; border-radius: 50%; border: 1.5px solid rgba(228, 195, 135, .5); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .amanecer.visto .ondas i { animation: onda 3s var(--ease) infinite; } .ondas i:nth-child(2) { animation-delay: 1s !important; } .ondas i:nth-child(3) { animation-delay: 2s !important; } }
@keyframes onda { 0% { opacity: .7; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }

/* Retos para apagarla */
.retos { display: grid; gap: 10px; margin-top: 26px; }
.reto { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color 200ms ease, transform 300ms var(--ease); }
.reto-n { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(228, 195, 135, .12); }
.reto h3 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.reto p { margin: 0 !important; font-size: 15px !important; color: var(--mute) !important; }
@media (hover: hover) and (pointer: fine) { .reto:hover { background: rgba(255, 255, 255, .08); transform: translateX(6px); } }
.nota { font-size: 14px !important; color: var(--mute) !important; }

/* Tócalo: los puntos dorados sobre el teléfono. */
.esc.explora .caja { justify-self: start; margin-left: max(0px, calc((100vw - 1180px) / 2)); width: min(420px, 36vw); }
.info { margin-top: 26px; padding: 24px; border-radius: 26px; background: rgba(18, 18, 20, .66); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); min-height: 170px; }
.info h3 { margin: 0; font-size: 26px; }
.info p { margin: 8px 0 0 !important; font-size: 17px !important; }
.info.nuevo h3, .info.nuevo p { animation: aparece 500ms var(--ease) both; }
@keyframes aparece { from { opacity: .25; transform: translateY(6px); } }
.volver { margin-top: 16px; font: 500 14px/1 var(--font); color: var(--fg2); background: rgba(255, 255, 255, .08); border: 0; border-radius: 999px; padding: 0 16px; min-height: 36px; cursor: pointer; }
.lista-alt { display: none; }
.puntos { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 400ms ease; }
.puntos.on { opacity: 1; }
.puntos button { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; pointer-events: none; }
.puntos.on button { pointer-events: auto; }
.puntos button span { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(228, 195, 135, .28), 0 6px 18px rgba(0, 0, 0, .6); transition: transform 200ms var(--ease), background-color 200ms ease; }
.puntos button::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .puntos.on button::after { animation: punto 2.2s var(--ease) infinite; } }
@keyframes punto { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
.puntos button[aria-pressed=true] span { background: #fff; transform: scale(1.25); }
@media (hover: hover) and (pointer: fine) { .puntos button:hover span { transform: scale(1.3); } }

/* Promesas, planes, cierre y documentos sobre el cielo */
.promesas3 h2 { margin-bottom: 40px; }
.promesas3 .promises li { text-align: left; }
.planes3, .docs3 { position: relative; z-index: 2; }
.esc.cierre3 { min-height: 115vh; align-items: start; padding-top: 20vh; }
.cierre3 .espera .note, .cierre3 .h2sub { color: var(--fg); }
.credito { color: var(--mute); }
.credito a { color: var(--fg2); }

/* Formas de hacer apps (Sunridge Labs) */
.tres { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.tres li { padding: 30px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.tres-n { font: italic 400 46px/1 var(--serif); color: var(--gold); }
.tres h3 { margin-top: 18px; font-size: 26px; }
.tres p { color: var(--fg2); margin: 8px 0 0; }
.app-line { display: flex; align-items: center; gap: 18px; }
.app-line .app-icon { width: 76px; height: 76px; margin: 0; }
.app-line .h2sub { margin: 6px 0 0 !important; font-size: 17px !important; color: var(--mute) !important; }
.ctas.izq { justify-content: flex-start; margin-top: 26px; }
.contacto3 .about { width: 100%; max-width: 1080px; }


/* Lo que hace cada parte: una lista fina, sin cajas. */
.hace { list-style: none; margin: 26px 0 0; padding: 0; display: grid; max-width: 440px; }
.hace li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.hace li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hace b { font: 500 16.5px/1.3 var(--font); letter-spacing: -0.01em; color: var(--fg); }
.hace span { font-size: 15px; line-height: 1.45; color: var(--mute); }
.hace.fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; max-width: 900px; margin: 0 auto; text-align: left; }
.hace.fila li { border-bottom: 0; }
.hora-ceja { display: flex; align-items: baseline; gap: 12px; }
.hora-ceja time { font: 500 13px/1 var(--font); letter-spacing: .04em; color: var(--gold); font-variant-numeric: tabular-nums; text-transform: none; }
.hora-ceja span { color: var(--mute); }
.hora-ceja span::before { content: ''; display: inline-block; width: 22px; height: 1px; background: rgba(228, 195, 135, .5); vertical-align: middle; margin-right: 12px; }
.esc.centro .hora-ceja { justify-content: center; }
.grupos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0 !important; font-size: 15px !important; color: var(--fg2) !important; }
.grupos span:not(:last-child)::after { content: '·'; margin-left: 14px; color: var(--mute); }
@media (max-width: 819px) { .hace.fila { grid-template-columns: minmax(0, 1fr); } .hace.fila span { display: none; } .hace.fila li { padding: 8px 0; } .hace { margin-top: 18px; } .hace li { padding: 11px 0; } }


/* ===== Pase de "taste-skill" + Emil Kowalski (27 oct): un solo tipo de letra y un color por título, sin rayitas, sin
   sombras, sin etiquetas pequeñas, texto en tinta llena, cinco tamaños. El dorado queda para la acción y el sol. ===== */
.esc h2 em, .esc h3 em, .hero3 h1 em, .hero3 h1 .g, .band h2 em, .about h2 em, main.con-mundo .manifesto .mw.g { font: inherit; letter-spacing: inherit; color: inherit; }
.h-hora { color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.esc h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.035em; }
main.con-mundo .manifesto .big { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.22; letter-spacing: -0.025em; max-width: 26ch; }
main.con-mundo .manifesto.lit .mw { color: #6d6d74; }
main.con-mundo .manifesto.lit .mw.on { color: var(--fg); }
.esc .caja > p:not(.gigante):not(.big), .esc .caja > div > p { color: var(--fg); font-size: 18px; line-height: 1.5; max-width: 40ch; }
.hero3 .sub { color: var(--fg); font-size: clamp(18px, 1.6vw, 21px); max-width: 44ch; }
.hace { gap: 22px; margin-top: 30px; max-width: 46ch; }
.hace li, .hace li:last-child { border: 0; padding: 0; gap: 4px; }
.hace b { font-size: 18px; font-weight: 500; }
.hace span { font-size: 17px; color: var(--fg2); line-height: 1.5; }
.hace.fila { gap: 0 40px; }
body:has(.con-mundo) .top, .top { border-bottom: 0; }
footer { border-top: 0; font-size: 14px; }
.credito { font-size: 13px; }
.docs li { border-top: 0; }
.docs a { padding-block: 14px; }
.plan-card, .plan-card.pro { box-shadow: none; background: #121214; }
.plan-card.pro { background: #1a1710; }
.plan-card ul { border-top: 0; padding-top: 6px; }
.contact { box-shadow: none; background: #121214; }
.app-icon { box-shadow: none; }
.iphone { background: #1b1b1d; box-shadow: none; }
.promesas-lista { list-style: none; margin: 36px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; max-width: 900px; text-align: left; }
.promesas-lista li { font: 500 clamp(22px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -0.025em; color: var(--fg); }
.tres li { border-top: 0; padding-top: 0; }
.tres h3 { margin-top: 0; }
.tres p { color: var(--fg2); font-size: 17px; }
.formas h2 { margin-bottom: 8px; }
.espera .note { font-size: 14px; }
.fine { font-size: 14px; }
/* Planes como un menú: sin tarjetas ni íconos; el precio manda. */
.planes3 .plan-card, .planes3 .plan-card.pro { background: transparent; padding: 0; border-radius: 0; }
.planes3 .plan-card .tick { display: none; }
.planes3 .plan-card li { grid-template-columns: 1fr; color: var(--fg); font-size: 16px; }
.planes3 .plans { gap: 56px; }
.planes3 .amount span { font-size: clamp(40px, 4.2vw, 60px); }
.fine { max-width: 60ch; }
main.con-mundo .manifesto .big { max-width: 40ch; }
/* Movimiento (Emil): cada control responde al tocarlo y al pasar el mouse; curvas fuertes, rápidas. */
.more { transition: opacity 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .more:hover { opacity: .8; text-decoration: none; } .docs a { transition: transform 220ms var(--ease); } .docs a:hover { transform: translateX(6px); } }
.btn, .copy, .volver { transition: transform 160ms var(--ease), background-color 200ms ease; }
.btn:active, .copy:active { transform: scale(0.97); }
@media (max-width: 819px) {
  .hace { max-width: none; }
  .promesas-lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .esc .caja > p:not(.gigante):not(.big), .esc .caja > div > p { font-size: 17px; }
  main.con-mundo .manifesto .big { font-size: 24px; }
}

/* Aviso de idioma (abajo, pequeño) */
.idioma { position: fixed; z-index: 20; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #16161a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -12px rgba(0, 0, 0, .8); font-size: 14px; color: var(--fg2); white-space: nowrap; max-width: calc(100vw - 32px); }
.idioma a { color: var(--gold); text-decoration: none; font-weight: 500; }
.idioma button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--fg2); font-size: 18px; cursor: pointer; }
@media (max-width: 420px) { .idioma span { display: none; } }
/* Sin 3D (computadora sin WebGL): se ven las pantallas normales al lado del texto. */
.alt3d { display: none; }
html.sin3d .alt3d { display: flex; justify-content: center; position: relative; z-index: 2; }
html.sin3d .esc.lado-izq, html.sin3d .esc.lado-der { grid-template-columns: 1fr 1fr; gap: 40px; }
html.sin3d .esc.lado-der .alt3d { order: -1; }
html.sin3d .esc .caja { width: auto; margin: 0; }
html.sin3d .alt3d .iphone { --w: 280px; }
html.sin3d .lista-alt { display: grid; gap: 12px; list-style: none; padding: 0; margin: 20px 0 0; color: var(--fg2); }
html.sin3d .info, html.sin3d .puntos { display: none; }

/* Teléfono: el texto arriba y el iPhone abajo. */
@media (prefers-reduced-motion: no-preference) {
  .hero3-t > * { animation: sube 1000ms var(--ease) both; }
  .hero3-t > :nth-child(2) { animation-delay: 90ms; } .hero3-t > :nth-child(3) { animation-delay: 180ms; } .hero3-t > :nth-child(4) { animation-delay: 270ms; }
  .hero3-t > h1.words { animation: none; }
  .hero3 h1 .w { animation: palabra 1000ms var(--ease) both; }
  .hero3 h1 .w:nth-child(2) { animation-delay: 70ms; } .hero3 h1 .w:nth-child(3) { animation-delay: 140ms; } .hero3 h1 .w:nth-child(4) { animation-delay: 210ms; } .hero3 h1 .w:nth-child(5) { animation-delay: 280ms; } .hero3 h1 .w:nth-child(6) { animation-delay: 350ms; } .hero3 h1 .w:nth-child(7) { animation-delay: 420ms; }
  .gigante-fondo { animation: fondo 2600ms var(--ease) 250ms both; }
}
@keyframes fondo { from { opacity: 0; letter-spacing: -0.02em; } }
@media (max-width: 819px) {
  .esc { align-items: start; padding-top: 92px; padding-bottom: 56px; }
  .esc .caja, .esc.explora .caja, .caja.ancha { width: 100%; margin: 0 !important; justify-self: stretch; }
  .esc h2 { font-size: clamp(36px, 10vw, 48px); }
  .esc h3 { font-size: 26px; }
  .gigante { font-size: clamp(96px, 30vw, 150px); }
  .esc.amanecer { padding-bottom: 40px; }
  .tres { grid-template-columns: minmax(0, 1fr); }
  .info { min-height: 0; padding: 18px; }
  .respira { margin-top: 18px; }
  .respira .aro { width: 72px; height: 72px; }
  .dial { width: 130px; height: 130px; }
  .dial b { font-size: 44px; }
  .cinta, .eq, .dial, .respira { display: none; }
  /* En el celular, cada parte lleva su pantalla debajo del texto (nítida y liviana); el 3D queda para la portada y la alarma. */
  .alt3d { display: flex; justify-content: center; position: relative; z-index: 2; margin-top: 30px; }
  .alt3d .iphone { --w: min(290px, 74vw); }
  .esc.hero3 .alt3d { display: none; }
  .esc:not(.hero3) .caja > *, .esc:not(.hero3) .wrap > * { transform: none !important; }
  html.sin3d .esc.hero3 .alt3d { display: flex; }
  .esc.hero3 .gigante-fondo { top: 74%; }
  .esc .caja > p:not(.ceja):not(.gigante):not(.big), .esc .caja > div > p { font-size: 17px; }
  html.sin3d .esc.lado-izq, html.sin3d .esc.lado-der { grid-template-columns: minmax(0, 1fr); }
}