/* lifemusic.app · la landing viva, segunda version (22-10-2026).
   Identidad «03 · Pulso» y logo «la nota es el pulso» (Brand/logo/2026-10-22-nota-pulso).
   Nova («A · La mirada») es la anfitriona: aparece al abrir, mira, parpadea y acompana el recorrido.
   Regla de CG (22-10): nada de recursos tipicos de IA. Sin punticos de color delante de los textos, sin puntos que
   titilan, sin esfera de particulas ni etiquetas en monoespaciada sobre cada bloque (memoria nada-de-patrones-ia).
   Normas: WCAG 2.2 AA (ISO/IEC 40500): contraste >= 4,5:1 en texto, foco visible, objetivos tactiles de 44 px,
   movimiento reducido respetado. */

@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fuentes/geist.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fuentes/geist-mono.woff2") format("woff2")}

:root{
  --fondo:#F5F5F3; --texto:#111111; --gris:#5F5F5C; --tenue:#8A8A86;
  --linea:rgba(17,17,17,.1); --linea-suave:rgba(17,17,17,.06);
  --boton:#111111; --boton-texto:#F5F5F3; --superficie:#FFFFFF; --pie:rgba(17,17,17,.035);
  --pulso:#FF6B3D; --fondo-vivo:var(--fondo); --fondo-barra:rgba(245,245,243,.85);
  --sombra:0 30px 60px -30px rgba(17,17,17,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0E0E0E; --texto:#F2F2EF; --gris:#A1A19D; --tenue:#7D7D79;
    --linea:rgba(242,242,239,.12); --linea-suave:rgba(242,242,239,.07);
    --boton:#F2F2EF; --boton-texto:#111111; --superficie:#171716; --pie:rgba(242,242,239,.035);
    --fondo-barra:rgba(14,14,14,.85); --sombra:0 30px 60px -30px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;overflow-x:clip;background:var(--fondo-vivo);color:var(--texto);
  font:400 17px/1.6 "Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .9s ease}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:8px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:12px;top:-60px;z-index:60;padding:12px 16px;border-radius:10px;background:var(--boton);color:var(--boton-texto);text-decoration:none}
.salto:focus{top:12px}
.ancho{max-width:1240px;margin:0 auto;padding:0 48px}
.gris{color:var(--gris)}

/* ── El logo y su simbolo ─────────────────────────────────────────────── */
.logo{display:block;height:26px;width:138px;overflow:visible}
.logo text{fill:currentColor;font-family:"Geist",system-ui,sans-serif}
.nota{fill:var(--pulso);transition:fill .9s ease}
.simbolo{display:block;width:21px;height:19px;flex:none;overflow:visible}

/* ── Botones ─────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 24px;border:0;border-radius:14px;background:var(--boton);color:var(--boton-texto);
  text-decoration:none;font:500 16px/1 "Geist",system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:transform .2s ease}
.boton:hover{transform:translateY(-1px)}
.boton.chico{min-height:44px;padding:0 16px;border-radius:12px;font-size:14px;gap:10px}
.boton.chico .simbolo{width:18px;height:16px}
.enlace-accion{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 6px;border:0;background:none;cursor:pointer;color:var(--texto);
  font:500 16px/1 "Geist",system-ui,sans-serif;text-decoration:underline;text-decoration-color:var(--linea);text-decoration-thickness:2px;text-underline-offset:6px}
.enlace-accion:hover{text-decoration-color:var(--texto)}
.enlace-accion svg{width:16px;height:16px;fill:currentColor}
.enlace-accion .pausa,.enlace-accion[aria-pressed="true"] .play{display:none}
.enlace-accion[aria-pressed="true"] .pausa{display:block}

/* ── La barra: el logo, la cancion que avanza con el scroll y la descarga ─ */
.barra{position:sticky;top:0;z-index:40;background:var(--fondo-barra);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linea-suave);transition:background-color .9s ease}
.barra .ancho{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px;height:76px}
.marca{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;color:var(--texto)}
/* La firma de CG LABS bajo el logo, como en la landing anterior. */
.firma{display:flex;align-items:center;gap:6px;padding-left:1px;font-size:11.5px;line-height:1;color:var(--gris);white-space:nowrap}
.firma img{width:14px;height:14px}
.tiempo{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px;font:500 13px/1 "Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.tiempo span:last-child{text-align:right;color:var(--gris)}
.linea-t{position:relative;height:30px}
.linea-t .base{position:absolute;left:0;right:0;top:14px;height:2px;border-radius:1px;background:var(--linea)}
.linea-t .relleno{position:absolute;left:0;top:14px;width:0;height:2px;border-radius:1px;background:var(--texto)}
/* El cabezal de reproduccion es una linea, como en una mesa de edicion. */
.linea-t .cabezal{position:absolute;left:0;top:5px;width:2px;height:20px;margin-left:-1px;border-radius:1px;background:var(--pulso);transition:background-color .9s ease}
.marcador{position:absolute;top:0;height:30px;padding:0 0 0 6px;border:0;background:none;cursor:pointer;transform:translateX(-1px)}
.marcador i{position:absolute;left:0;top:10px;width:1px;height:10px;background:var(--tenue)}
.marcador span{position:absolute;left:7px;top:-1px;white-space:nowrap;font:500 11px/1 "Geist",system-ui,sans-serif;color:var(--gris)}
.marcador.activo span{color:var(--texto)}
.marcador.activo i{background:var(--texto)}
/* Con musica, la linea respira: se vuelve la onda de lo que suena. */
.linea-t .base,.linea-t .relleno{transition:opacity .4s ease}
.linea-t .onda{position:absolute;left:0;top:0;width:100%;height:30px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.linea-t.con-onda .onda{opacity:1}
.linea-t.con-onda .base,.linea-t.con-onda .relleno{opacity:0}

/* ── Intro: Nova presenta la app ─────────────────────────────────────── */
.heroe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;min-height:calc(100svh - 76px);padding:24px 0 48px}
.heroe h1{position:relative;font-size:96px;line-height:.93;font-weight:600;letter-spacing:-.055em}
/* El titular se canta como una letra sincronizada: palabra por palabra al abrir, y con musica la palabra del golpe
   salta y se subraya con el pulso (el subrayado lo pone el navegador bajo la linea base, sin tapar la otra linea). */
.heroe h1 .w{display:inline-block;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.07em;text-underline-offset:.1em;
  transition:color .3s ease,text-decoration-color .15s ease,transform .22s cubic-bezier(.3,1.7,.5,1)}
.heroe h1.cantando .w{color:var(--tenue)}
.heroe h1.cantando .w.cantada{color:var(--texto)}
.heroe h1 .w.golpe{text-decoration-color:var(--pulso);transform:translateY(-.05em)}
.sub{max-width:31em;margin-top:28px;font-size:19px;line-height:1.55;color:var(--gris)}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:36px}
/* El contador de descargas: ruedas de numeros, como un contador mecanico. */
.cuenta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:30px}
.odometro{display:inline-flex;color:var(--texto);font:600 34px/1.1 "Geist",system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.odometro .dig{display:inline-block;height:1.1em;overflow:hidden}
.odometro .tira{display:flex;flex-direction:column;transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.odometro .tira span{display:block;height:1.1em}
.odometro.quieto .tira{transition:none}
.cuenta-texto{font-size:16px;color:var(--gris)}
.cuenta.chica{margin-top:22px}
.cuenta.chica .odometro{font-size:26px}
.hechos{max-width:34em;margin-top:8px;font-size:15px;color:var(--gris)}
.escenario{position:relative;display:grid;justify-items:center;align-content:center;gap:18px;min-height:520px;touch-action:pan-y}
.escenario > *{position:relative;z-index:1}
/* Las notas que suben: cabezas de nota del logo, del color de lo que suena. */
.lienzo-notas{position:absolute;pointer-events:none;z-index:0}
.escenario > .lienzo-notas{left:-15%;top:-12%;width:130%;height:100%}
.acompana > .lienzo-notas{right:-24px;bottom:24px;width:150px;height:260px}
.nova-grande{width:min(380px,82vw);aspect-ratio:1;transform:scale(.06);opacity:0;transform-origin:50% 50%}
.nova-grande.llega{transition:transform 1.15s cubic-bezier(.18,1.35,.32,1),opacity .4s ease}
.nova-grande.lista{transform:scale(1);opacity:1}
.nova-grande svg,.nova-chica svg{display:block;width:100%;height:100%;overflow:visible}
.dice{min-height:3.2em;max-width:22em;text-align:center;font-size:18px;line-height:1.45;color:var(--texto);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.dice.visible{opacity:1;transform:none}
.dice .quien{display:block;margin-bottom:4px;font-size:13px;color:var(--gris)}

/* Nova acompana el recorrido: pequena, abajo a la derecha, con su globo de texto. */
.acompana{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:flex-end;gap:12px;flex-direction:row-reverse;pointer-events:none;
  opacity:0;transform:translateY(16px) scale(.9);transform-origin:100% 100%;transition:opacity .35s ease,transform .35s ease}
.acompana.visible{opacity:1;transform:none}
.nova-chica{width:72px;height:72px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:auto}
.globo{max-width:min(340px,calc(100vw - 140px));padding:14px 16px;border-radius:16px 16px 4px 16px;background:var(--superficie);color:var(--texto);
  box-shadow:var(--sombra),0 0 0 1px var(--linea-suave);font-size:15px;line-height:1.45;pointer-events:auto;
  opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease}
.globo.visible{opacity:1;transform:none}

/* ── Las caratulas de ejemplo ─────────────────────────────────────────── */
.discos{padding:40px 0 56px;border-top:1px solid var(--linea)}
.discos-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin-bottom:24px}
.discos-cab h2{font-size:24px;font-weight:500;letter-spacing:-.02em}
.discos-cab p{font-size:14px;color:var(--gris)}
.fila-discos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding-top:60px}
.disco{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--texto)}
/* Cada caratula es una funda: la elegida saca su vinilo, que gira mientras suena. */
.funda{position:relative;display:block;width:100%;aspect-ratio:1;perspective:700px}
.disco .caratula{position:absolute;inset:0;z-index:1;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06);
  transform:translateY(var(--sube,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:box-shadow .3s ease,transform .18s ease}
.disco:hover .caratula{--sube:-3px}
.disco[aria-pressed="true"] .caratula{box-shadow:0 0 0 3px var(--c),0 14px 30px -12px var(--c)}
.vinilo{position:absolute;left:5%;top:5%;width:90%;height:90%;z-index:0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.vinilo .giro{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12) inset;
  background:radial-gradient(circle,var(--c) 0 29%,#0B0B0B 30% 31%,transparent 31.5%),
    conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.16) 13%,transparent 19% 58%,rgba(255,255,255,.12) 63%,transparent 69%),
    repeating-radial-gradient(circle,#2A2A2A 0 1px,#121212 1px 3px);
  animation:gira 1.8s linear infinite paused}
.vinilo svg{width:17%;height:17%;color:#fff;overflow:visible}
.disco[aria-pressed="true"] .vinilo{transform:translateY(-31%)}
.sonando .disco[aria-pressed="true"] .vinilo .giro{animation-play-state:running}
@keyframes gira{to{transform:rotate(360deg)}}
.disco b{margin-top:10px;font-size:16px;font-weight:500;letter-spacing:-.02em}
.disco > span:last-child{font-size:14px;color:var(--gris)}
.d1{--c:#FF6B3D}.d1 .caratula{background:radial-gradient(circle at 50% 40%,#FFB49A 0 29%,transparent 30%),linear-gradient(#FF6B3D 0 64%,#C9431C 64%)}
.d2{--c:#3B6CF6}.d2 .caratula{background:radial-gradient(circle at 32% 66%,#FF4FA3 0 20%,transparent 21%),linear-gradient(140deg,#0D1B3D,#3B6CF6)}
.d3{--c:#8B5CF6}.d3 .caratula{background:radial-gradient(circle,#F8FAFC 0 7%,transparent 8%),radial-gradient(circle,transparent 0 30%,#B4A2F6 31% 33%,transparent 34%),#140F2A}
.d4{--c:#1F9D6B}.d4 .caratula{background:repeating-linear-gradient(120deg,rgba(0,0,0,.18) 0 6px,transparent 6px 18px),linear-gradient(200deg,#0F3D2E,#1F9D6B)}
.d5{--c:#D98A00}.d5 .caratula{background:radial-gradient(circle at 34% 30%,#FBD38D,#B7791F 48%,#3D2208)}

/* ── Las partes de la cancion ─────────────────────────────────────────── */
.parte{padding:120px 0;border-top:1px solid var(--linea)}
.viva .parte{will-change:opacity,transform}
/* El tiempo de cada parte, como en una hoja de letra con tiempos: grande y fino, a la izquierda. */
.parte-cab{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px;margin-bottom:64px;align-items:start}
.cuando{display:grid;gap:6px}
.cuando .tc{font-size:44px;line-height:1;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cuando .nombre{font-size:15px;color:var(--gris)}
.parte h2{font-size:64px;line-height:1;font-weight:600;letter-spacing:-.05em}
.parte h2 + p{max-width:36em;margin-top:22px;font-size:19px;color:var(--gris)}

/* Verso: la app de verdad */
.recorrido{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:72px;align-items:center}
.telefono{margin:0}
.telefono .marco-tel{padding:10px;border-radius:44px;background:#0B0B0B;box-shadow:var(--sombra),0 0 0 1px rgba(255,255,255,.06) inset}
.telefono img{width:100%;border-radius:34px}
.telefono figcaption{margin-top:16px;font-size:14px;color:var(--gris);text-align:center}
.funciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 48px;margin:0}
.funcion{padding:0;border:0;background:none;text-align:left;color:var(--texto);cursor:default}
.funcion dt{font-size:26px;font-weight:500;letter-spacing:-.03em}
.funcion dd{margin:8px 0 0;color:var(--gris)}

/* Puente: el TV */
.tv-demo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.pantalla-tv{margin:0}
.pantalla-tv .marco-tv{position:relative;padding:12px;border-radius:18px;background:#0B0B0B;box-shadow:var(--sombra)}
.pantalla-tv img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;transition:opacity .35s ease}
.pantalla-tv .pata{width:30%;height:10px;margin:0 auto;border-radius:0 0 10px 10px;background:#0B0B0B;opacity:.85}
.temas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.temas button{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1px var(--linea);color:var(--texto);cursor:pointer;font:500 14px/1 "Geist",system-ui,sans-serif}
.temas button[aria-pressed="true"]{background:var(--boton);color:var(--boton-texto);box-shadow:none}
.tv-texto .url{display:block;margin:6px 0 18px;font:500 40px/1.1 "Geist Mono",ui-monospace,monospace;letter-spacing:-.03em;overflow-wrap:anywhere}
.tv-texto p{color:var(--gris)}
.tv-texto .boton{margin-top:28px}
.tv-texto .estado-tv{margin-top:18px;font-size:14px;color:var(--gris)}

/* Coro: instalar */
.instalar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.tarjeta-descarga{padding:40px;border-radius:24px;background:var(--superficie);box-shadow:var(--sombra),0 0 0 1px var(--linea-suave)}
.tarjeta-descarga .grande{width:84px;height:76px}
.tarjeta-descarga h3{margin-top:28px;font-size:30px;font-weight:600;letter-spacing:-.035em}
.tarjeta-descarga p{margin-top:8px;color:var(--gris)}
.tarjeta-descarga .boton{margin-top:28px;width:100%;justify-content:center}
.tarjeta-descarga .ligera{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;color:var(--gris)}
.al-telefono{display:grid;grid-template-columns:116px minmax(0,1fr);gap:18px;align-items:center;margin-top:26px;padding-top:24px;border-top:1px solid var(--linea)}
.al-telefono[hidden]{display:none}
.al-telefono canvas{width:116px;height:116px;border-radius:10px;background:#fff}
.tarjeta-descarga .al-telefono p{margin:0;font-size:14px}
.al-telefono b{display:block;margin-bottom:2px;color:var(--texto);font-weight:500}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:30px}
.paso{counter-increment:paso;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:baseline}
.paso::before{content:counter(paso);font-size:40px;line-height:1;font-weight:300;letter-spacing:-.04em;color:var(--tenue)}
.paso b{display:block;font-size:22px;font-weight:500;letter-spacing:-.025em}
.paso p{margin-top:4px;color:var(--gris)}
.carro{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px;margin-top:88px;padding-top:40px;border-top:1px solid var(--linea)}
.carro h3{font-size:24px;font-weight:500;letter-spacing:-.025em}
.carro p{max-width:40em;color:var(--gris)}
.carro-accion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.carro-accion p{max-width:26em;font-size:14px}
/* El boton del carro espera apagado hasta su primera beta (lo enciende landing.js leyendo GitHub). */
.boton.apagado{background:transparent;color:var(--tenue);box-shadow:inset 0 0 0 1px var(--linea);cursor:not-allowed}
.boton.apagado:hover{transform:none}
.boton.apagado .nota{fill:var(--tenue)}

/* Lo que entra al bajar: sube un poco y aparece, en orden. */
.viva .revela{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.viva .revela.visto{opacity:1;transform:none}
.marco-tel,.marco-tv{will-change:transform}

/* Final: lo nuevo, las preguntas y los avisos */
.final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.final-grid h3{font-size:24px;font-weight:500;letter-spacing:-.025em;margin-bottom:22px}
.novedades{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.novedades b{display:block;font-weight:500}
.novedades span{color:var(--gris)}
.todas{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-weight:500}
.preguntas details{border-top:1px solid var(--linea)}
.preguntas details:last-child{border-bottom:1px solid var(--linea)}
.preguntas summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.preguntas details[open] summary::after{transform:rotate(-135deg)}
.preguntas details p{padding:0 0 20px;max-width:38em;color:var(--gris)}
/* Calificar sin salir de la pagina: las mismas cinco notas de /calificar (estilos de las notas y campos en paginas.css). */
.califica-rapido{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px;align-items:start;margin-bottom:88px;padding:40px;border-radius:24px;
  background:var(--superficie);box-shadow:var(--sombra),0 0 0 1px var(--linea-suave)}
.califica-arriba{padding:0 0 32px}
.califica-rapido h2{font-size:34px;font-weight:600;letter-spacing:-.04em}
.nota-arriba{margin-top:6px;font-size:15px;color:var(--gris)}
.nota-arriba a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:inherit}
.nota-arriba a:hover b{text-decoration:underline}
.nota-arriba b,.cr-promedio b{color:var(--texto);font-weight:600}
.cr-promedio{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;color:var(--gris)}
.cr-texto p{margin-top:12px;color:var(--gris)}
.cr-form fieldset{margin:0;padding:0;border:0;min-width:0}
.cr-form .fila-notas{margin-top:0}
.cr-form .campo{margin-top:18px}
.cr-enviar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.cr-enviar .aviso-datos{flex:1 1 220px;margin:0}
.avisos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:88px;padding-top:40px;border-top:1px solid var(--linea)}
.aviso h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0}
.aviso p{margin-top:8px;color:var(--gris)}
.hecho-en{margin-top:72px;font-size:28px;font-weight:300;letter-spacing:-.03em}
.hecho-en b{font-weight:500}

/* ── El pie ───────────────────────────────────────────────────────────── */
.pie{padding:56px 0 140px;background:var(--pie)}
.pie-arriba{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:32px}
.pie-arriba picture img{height:24px;width:auto}
.pie nav{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px}
.pie nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.pie nav a:hover{text-decoration:underline}
.legal{max-width:62em;margin-top:20px;padding-top:24px;border-top:1px solid var(--linea);font-size:14px;color:var(--gris)}

/* ── Telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .heroe h1{font-size:clamp(56px,7.4vw,80px)}
  .recorrido{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:40px}
  .funciones{grid-template-columns:minmax(0,1fr);gap:28px}
  .tv-demo,.instalar,.final-grid,.califica-rapido{grid-template-columns:minmax(0,1fr);gap:48px}
  .califica-rapido{gap:24px}
}
@media (max-width: 760px){
  html{scroll-padding-top:72px}
  .ancho{padding:0 20px}
  .barra .ancho{gap:14px;height:64px}
  .logo{height:22px;width:117px}
  .marca{gap:5px}
  .firma{font-size:10.5px;gap:5px}
  .firma img{width:12px;height:12px}
  .linea-t .onda{display:none}
  .tiempo{grid-template-columns:minmax(0,1fr);gap:0}
  .tiempo span:last-child,.marcador{display:none}
  .tiempo span:first-child{text-align:center}
  .linea-t{position:absolute;left:0;right:0;bottom:-1px;height:3px}
  .linea-t .base,.linea-t .relleno{top:0;height:3px;border-radius:0}
  .linea-t .cabezal{top:-3px;height:9px}
  .heroe{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0;padding:12px 0 40px}
  .escenario{order:-1;min-height:0;gap:10px}
  .nova-grande{width:min(250px,64vw)}
  .heroe h1{font-size:48px}
  .sub{font-size:17px;margin-top:18px}
  .acciones{margin-top:26px}
  .acciones .boton{flex:1 1 100%;justify-content:center}
  .dice{font-size:16px}
  .fila-discos{display:flex;overflow-x:auto;gap:14px;padding-top:42px;padding-bottom:6px;scroll-snap-type:x mandatory}
  .odometro{font-size:28px}
  .cuenta{margin-top:24px}
  .disco{flex:0 0 138px;scroll-snap-align:start}
  .parte{padding:76px 0}
  .parte-cab,.carro{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:40px}
  .cuando{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:12px}
  .cuando .tc{font-size:28px}
  .parte h2{font-size:38px}
  .parte h2 + p{font-size:17px}
  .recorrido{grid-template-columns:minmax(0,1fr);gap:40px}
  .telefono{max-width:260px;margin:0 auto}
  .funcion dt{font-size:22px}
  .tv-texto .url{font-size:26px}
  .tarjeta-descarga{padding:28px}
  .paso{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .paso::before{font-size:32px}
  .avisos{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:56px}
  .califica-rapido{grid-template-columns:minmax(0,1fr);padding:24px;margin-bottom:56px}
  .califica-rapido h2{font-size:28px}
  .hecho-en{font-size:22px}
  .pie-arriba{flex-direction:column;align-items:flex-start}
  .acompana{right:12px;bottom:12px}
  .nova-chica{width:60px;height:60px}
  .globo{max-width:calc(100vw - 100px)}
}
@media (prefers-reduced-motion: reduce){
  body,.nota,.barra,.linea-t .cabezal,.dice,.globo,.acompana,.boton{transition:none}
  .nova-grande{transform:none;opacity:1}
  .disco:hover .caratula,.boton:hover{transform:none}
  .disco .caratula{--sube:0;--rx:0deg;--ry:0deg}
  .vinilo,.odometro .tira,.heroe h1 .w{transition:none}
  .vinilo .giro{animation:none}
}
.califica-rapido .gracias h3{font-size:28px;font-weight:600;letter-spacing:-.03em}
.califica-rapido .gracias a{font-weight:500}
.cr-promedio[hidden],.nota-arriba[hidden]{display:none}