/* OVVOZ — sitio de presentación. Estático: sin JavaScript ni dependencias. */

:root{
  --bg:#050606; --bg2:#0a0b0b; --paper:#efede7; --ink:#111212;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.24); --line-dark:rgba(0,0,0,.16);
  --soft:#d4d3cf; --mute:#a3a49f; --mute-dark:#5d5a53; --ok:#14d45c; --aviso:#ff9b89;
  --max:1440px; --pad:48px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* La cabecera queda fija arriba: al saltar a una seccion se le reserva su altura para que no la tape. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:#fff;font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.light :focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 14px;font-family:var(--mono);font-size:12px;z-index:100}
.skip:focus{left:8px;top:8px}
.page{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* Cabecera */
header{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,rgba(5,6,6,.92),rgba(5,6,6,.74))}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between}
/* El simbolo acompana al nombre, en cabecera y pie. Va en currentColor: hereda el color del contexto. */
.logo{display:inline-flex;align-items:center;gap:13px;font-size:28px;letter-spacing:.14em}
.logo-mark{display:block;flex:none;width:30px;height:30px}
.nav-links{display:flex;align-items:center;gap:34px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:34px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg2)}
.lang button{appearance:none;border:0;background:transparent;color:#a3a49f;font:400 13px/1 var(--sans);letter-spacing:.06em;padding:11px 16px;cursor:pointer}
.lang button:hover{color:#fff}
.lang button[aria-pressed="true"]{background:#ebebee;color:#111212;cursor:default}
.lang button:focus-visible{outline-offset:-3px}

/* Portada */
/* El cuerpo del titular manda: de el salen el alto del video y su alineacion. */
.hero{--h1:118px;--h1-lineas:3;background:radial-gradient(1200px 600px at 78% 22%,rgba(255,255,255,.08),transparent 38%),linear-gradient(180deg,#050606,#060707)}
.hero-inner{min-height:820px;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;padding-top:34px}
.small{font-family:var(--mono);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--mute);margin:0}
.hero-left{padding-top:38px}
.hero h1{margin:26px 0 18px;font-size:var(--h1);line-height:.92;letter-spacing:-.06em;font-weight:200}
.hero-copy{max-width:520px;color:var(--soft);font-size:19px;line-height:1.45;margin:0}
.download-link{display:inline-flex;align-items:center;gap:18px;margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.42)}
.platforms{margin:22px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
/* El video de portada es la imagen de la seccion: ocupa el sitio y el lema va debajo, alineado a la derecha.
   Va sin sonido y en bucle para que ningun navegador lo bloquee, y se queda quieto si el visitante pidio
   menos movimiento. */
/* El video arranca a la altura de la primera linea del titular y mide lo mismo que el bloque entero.
   El desvio de arriba es lo que ocupan el antetitulo y el margen del h1 en la columna de la izquierda. */
.hero-right{align-self:start;padding-top:calc(38px + 13px + 26px);display:flex;justify-content:flex-end}
.hero-video{height:calc(var(--h1) * .92 * var(--h1-lineas));width:auto;max-width:100%;aspect-ratio:16/9;
            object-fit:cover;display:block;background:var(--bg2);border:1px solid var(--line)}
.signal-rail{grid-column:1/-1;align-self:end;padding-bottom:24px}
.signal-line{height:1px;background:var(--line2)}
.signal-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin:14px 0 0}
.signal-cols dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.signal-cols dd{margin:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#d0cdc4}
.signal-cols>div:nth-child(2),.signal-cols>div:nth-child(3){text-align:center}
.signal-cols>div:last-child{text-align:right}
.rail-note{margin:14px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7d7f7a}

/* Secciones */
section.dark{background:var(--bg2);border-top:1px solid var(--line)}
section.light{background:var(--paper);color:var(--ink)}
.panel{display:grid;grid-template-columns:72px 1.12fr 1.28fr;column-gap:26px;align-items:start;min-height:260px;padding-block:32px 36px}
.num-col{display:flex;gap:12px;padding-top:4px}
.num{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.bar{width:24px;height:1px;background:currentColor;opacity:.65;margin-top:10px}
.title-col h2,.path-title h2{margin:0;font-size:62px;line-height:.96;letter-spacing:-.05em;font-weight:250}
.strap{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#d1cec4}
.light .strap{color:#66635a}
.desc{margin:22px 0 0;max-width:400px;font-size:16px;line-height:1.5;color:#d0cec7}
.light .desc{color:#4f4c46}
.data-side{position:relative;min-width:0}
.divider{position:absolute;left:-14px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.09)}
.light .divider{background:var(--line-dark)}
.mono{font-family:var(--mono)}

/* 01 Bit perfect */
.bp-top{display:grid;grid-template-columns:1fr 66px 1fr;gap:22px;align-items:end}
.bp-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#d0cdc4;margin-bottom:10px}
.bp-bits{font-family:var(--mono);font-size:18px;letter-spacing:.12em;margin:0}
.bp-arrow{text-align:center;font-size:34px;padding-bottom:6px}
.right{text-align:right}
.bp-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:28px;padding-top:18px;margin-bottom:0}
.bp-stats dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d1cec4}
.bp-stats dd{margin:6px 0 0;font-size:16px}
.bp-note{margin:20px 0 0;max-width:560px;font-size:14px;line-height:1.55;color:#b9b7b0}
.bp-note b{font-weight:500;color:#fff}
.light .bp-note b{color:var(--ink)}
/* Bit perfect va sobre marfil: sus etiquetas y lineas se oscurecen para que se lean. */
.light .bp-label,.light .bp-stats dt{color:var(--mute-dark)}
.light .bp-stats{border-top-color:var(--line-dark)}
.light .bp-note{color:#4f4c46}

/* 02 Continuo */
.ct-pledges{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;margin:0;padding-top:4px}
.ct-pledges>div{border-top:1px solid var(--line2);padding-top:14px}
.ct-pledges dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#d1cec4}
.ct-pledges dd{margin:10px 0 0;font-size:15px;line-height:1.5;color:#d0cec7}
.ct-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px;padding-block:8px 30px;border-top:1px solid var(--line)}
.ct-figs figure{margin:0;padding-top:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
/* El dibujo va acotado y su texto sube de cuerpo, para que se lea igual en menos alto. */
.ct-figs svg{display:block;width:100%;max-width:430px;height:auto}
.ct-figs .plot-txt{font-size:13.5px}
.ct-figs figcaption{font-size:14px;line-height:1.55;color:#d0cec7;max-width:620px}
.ct-figs figcaption b{font-weight:500;color:#fff}
.plot-zero{stroke:rgba(255,255,255,.24);stroke-width:1;stroke-dasharray:3 4;fill:none}
.plot-mark{stroke:#a3a49f;stroke-width:1;stroke-dasharray:2 3;fill:none}
.plot-band{fill:rgba(255,255,255,.06);stroke:none}
.plot-wave{stroke:#f4f3ef;stroke-width:1.6;fill:none;stroke-linejoin:round}
.plot-wave.fade{stroke:var(--ok)}
.plot-hit{fill:#f06a4f;stroke:none}
.plot-step{stroke:#f06a4f;stroke-width:2.2;fill:none}
.plot-txt{fill:#a3a49f;font-family:var(--mono);font-size:10.5px}
.plot-txt.hot{fill:#f06a4f}
.plot-txt.cool{fill:var(--ok)}

/* 06 El sistema. Reusa .ct-pledges y las clases .plot-* de Continuo. */
.plot-bar{stroke:rgba(255,255,255,.5);stroke-width:3;stroke-linecap:round;fill:none}
.plot-bar.over{stroke:#f06a4f}
/* Segunda fila del panel: reparte las mismas dos columnas, asi el grafico queda bajo el titulo
   y su explicacion al lado, bajo las tres promesas. El texto del grafico sube de cuerpo porque va mas chico. */
.sy-fig{grid-column:2/4;align-self:start;margin:30px 0 0;display:grid;grid-template-columns:1.12fr 1.28fr;column-gap:26px;align-items:center}
.sy-fig svg{display:block;width:100%;max-width:520px;height:auto;min-width:0}
.sy-fig .plot-txt{font-size:12px}
.sy-fig figcaption{font-size:14px;line-height:1.55;color:#b9b7b0;max-width:430px}
.sy-fig figcaption b{font-weight:500;color:#fff}

/* 03 Rango dinámico */
.dr-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:start}
.dr-display{display:flex;align-items:baseline;gap:22px}
.dr-tag{font-size:56px;line-height:1}
.dr-value{font-size:86px;line-height:.93;letter-spacing:-.06em;white-space:nowrap}
.dr-value small{font-size:28px;letter-spacing:0;margin-left:8px}
.dr-meter{margin-top:34px}
.dr-meter-line{position:relative;height:1px;background:rgba(0,0,0,.28)}
.dr-meter-line .ticks{position:absolute;left:0;right:0;top:-5px;height:10px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 5%)}
.dr-meter-line .mark{position:absolute;left:66%;top:-14px;width:2px;height:28px;background:#141414}
.scale{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--mute-dark)}
.dr-items{margin:0}
.dr-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding-block:6px}
.dr-item dt{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-dark)}
.dr-item dd{margin:0;font-size:18px}
.flags{margin:26px 0 0;font-size:14px;line-height:1.55;color:#4f4c46;max-width:420px}

/* 03 Análisis en tiempo real */
.rt-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:34px}
.monitor-list{display:grid;grid-template-columns:auto 1fr;row-gap:12px;column-gap:28px;margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;line-height:1.5;padding-top:10px}
.monitor-list dt{color:#d0cdc4;text-transform:uppercase;letter-spacing:.18em;font-size:11px}
.monitor-list dd{margin:0}
.now-playing{border-left:1px solid rgba(255,255,255,.12);padding-left:26px;padding-top:8px}
.np-title{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#d1cec4;text-transform:uppercase;margin:0}
.time{font-family:var(--mono);font-size:32px;margin:14px 0 0;white-space:nowrap}
.progress{height:1px;background:rgba(255,255,255,.22);margin:18px 0 0;position:relative}
.progress:after{content:"";position:absolute;left:0;top:-1px;height:3px;width:38%;background:#e8e6de}
.np-caption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-family:var(--mono);font-size:11px;color:#cbc7bd}
.active{margin-top:14px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}

/* 04 Ruta de la señal */
.path-grid{display:grid;grid-template-columns:72px 1.12fr 1.28fr;column-gap:26px;align-items:start;padding-block:32px 40px}
.path-title h2{font-size:58px}
.path-top{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#66635c;margin-top:8px}
.path-desc{margin:24px 0 0;max-width:430px;font-size:16px;line-height:1.5;color:#4f4c46}
.path-right{padding-top:18px}
.path{display:grid;grid-template-columns:repeat(5,1fr);column-gap:10px;list-style:none;margin:0;padding:0}
.path-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.path-track{display:block;position:relative;height:7px;margin:14px 0}
.path-track:before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(0,0,0,.28)}
.path-track:after{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#1b1b1b}
.path-val{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute-dark);text-transform:uppercase}
.path-note{margin:30px 0 0;max-width:560px;font-size:14px;line-height:1.55;color:#4f4c46}

/* 05 Una plataforma */
.platform-grid,.download-grid{display:grid;grid-template-columns:72px .95fr 1.33fr;column-gap:26px;min-height:210px;padding-block:24px 40px}
.platform-grid .title-col h2,.download-grid .title-col h2{font-size:58px}
.platform-right{position:relative;padding-left:18px}
.platform-right .divider{left:0}
.platform-features{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:8px}
.head{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.head:after{content:"";display:block;margin-top:10px;width:88%;height:1px;background:rgba(0,0,0,.22)}
.mini{margin:16px 0 0;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.1em;color:#5d5a53;text-transform:uppercase}
.formats{margin-top:38px}
.formats .mini{margin-top:12px}
.formats .not-yet{color:#8a877f}

/* 06 Descarga */
.download-right{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.download-center{display:flex;flex-direction:column;align-items:flex-start;padding-top:26px}
.btn{width:250px;height:86px;background:#f4f3ef;color:#050606;display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
/* Mientras no haya instalador el boton va en contorno; al publicarlo vuelve al relleno marfil. */
.btn[aria-disabled="true"]{background:transparent;color:var(--mute);border:1px solid var(--line2);cursor:not-allowed}
.btn-note{margin:14px 0 0;max-width:290px;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.08em;color:var(--mute)}

/* Lista de espera. Ocupa el sitio del boton de descarga y guarda su misma forma: dos bloques de 250 apilados. */
.espera{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:250px;max-width:100%}
.espera-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.espera-fila{display:flex;flex-direction:column;gap:12px;width:100%}
.espera-correo{width:100%;height:56px;padding:0 16px;background:transparent;color:#f0efe8;border:1px solid var(--line2);
               font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.espera-correo::placeholder{color:var(--mute);opacity:1}
.espera-correo:disabled{opacity:.5}
.espera .btn{width:100%;border:0;cursor:pointer}
.espera .btn:disabled{background:transparent;color:var(--mute);border:1px solid var(--line2);cursor:progress}
/* Apuntado: se retira el campo, para que el aviso sea lo unico que quede. */
.espera.hecho .espera-label,.espera.hecho .espera-fila{display:none}
/* La trampa para robots: fuera de la pantalla en vez de display:none, que algunos saben detectar. */
.espera-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.espera-estado{margin:0;min-height:1.6em;max-width:290px;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.08em;color:var(--mute)}
.espera-estado[data-tono="bien"]{color:var(--ok)}
.espera-estado[data-tono="mal"]{color:var(--aviso)}
.download-facts{margin-top:18px;max-width:360px;color:#f0efe8;font-size:15px;line-height:1.7;letter-spacing:.04em;text-transform:uppercase}
.download-links{border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;gap:16px;padding-top:2px}
.download-links details{border-bottom:1px solid rgba(255,255,255,.2)}
.download-links summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:10px;display:flex;justify-content:space-between}
.download-links summary::-webkit-details-marker{display:none}
.download-links summary:after{content:"+"}
.download-links details[open] summary:after{content:"−"}
.details-body{padding:4px 0 18px;font-size:14px;line-height:1.55;color:#d0cec7}
.details-body ul,.details-body ol{margin:0 0 12px;padding-left:20px}
.details-body li{margin-bottom:6px}
.details-body strong{font-weight:400;color:#fff}

/* Pie. Lleva linea propia porque ahora la franja de Descarga tambien es oscura. */
footer{background:#050606;border-top:1px solid var(--line)}
.footer-inner{min-height:104px;display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:18px}
.word{display:inline-flex;align-items:center;gap:11px;font-size:24px;letter-spacing:.14em}
.footer-brand .logo-mark{width:25px;height:25px}
.sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#a4a39d;text-transform:uppercase}
.footer-links{display:flex;gap:34px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f0efe8}
.footer-year{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#a4a39d}

/* Pantallas medianas */
@media(max-width:1100px){
  :root{--pad:28px}
  .hero-inner{grid-template-columns:1fr;min-height:auto;padding-bottom:50px}
  .hero{--h1:84px}
  .hero-right{padding-top:0}
  .hero-video{height:auto;width:100%}
  .panel,.platform-grid,.download-grid,.path-grid{grid-template-columns:56px 1fr;row-gap:24px}
  .data-side,.platform-right,.download-center,.download-right,.path-right,.sy-fig{grid-column:2}
  .dr-layout,.rt-grid,.download-right{grid-template-columns:1fr}
  .platform-features{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr;padding-block:22px;gap:18px}
  .now-playing{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
  .download-links{border-left:0;padding-left:0}
  .path{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Móvil */
@media(max-width:760px){
  html{scroll-padding-top:84px}
  /* La portada tiene que caber de un vistazo: desde el titular hasta el final del video, sin cortar el video.
     Por eso aqui se recorta el aire vertical en vez de encoger el video, que es lo que se quiere ver. */
  .hero-inner{padding-top:12px;gap:20px}
  .hero-left{padding-top:0}
  /* El rotulo de arriba, en una sola linea: a .36em partia en dos y costaba 13 px de alto. */
  .hero .small{letter-spacing:.2em}
  .hero h1{margin:14px 0 12px}
  .hero-copy{font-size:15px}
  .download-link{margin-top:20px}
  .platforms{margin-top:12px}
  /* Opaca: en movil la cabecera son dos filas y el degradado al 74% dejaba pasar el titular de debajo. */
  header{background:var(--bg)}
  .nav{height:auto;flex-wrap:wrap;row-gap:12px;padding-block:14px}
  .nav-right{display:contents}
  .logo{order:1;font-size:24px;gap:11px}
  .logo-mark{width:25px;height:25px}
  .lang{order:2;margin-left:auto}
  .lang button{padding:9px 13px;font-size:12px}
  .nav-links{order:3;width:100%;gap:22px;font-size:10px}
  .hero{--h1:52px}
  .hero-copy{font-size:16px}
  .signal-cols{grid-template-columns:1fr 1fr;row-gap:18px}
  .signal-cols>div{text-align:left!important}
  .signal-cols dd{margin-top:8px}
  .panel,.platform-grid,.download-grid,.path-grid{grid-template-columns:1fr}
  .data-side,.platform-right,.download-center,.download-right,.path-right{grid-column:1}
  .title-col h2,.path-title h2,.platform-grid .title-col h2,.download-grid .title-col h2{font-size:42px}
  .bp-top{grid-template-columns:1fr}
  .bp-arrow{text-align:left}
  .bp-top .right{text-align:left}
  .bp-bits{font-size:15px}
  .bp-stats,.platform-features,.ct-pledges{grid-template-columns:1fr}
  .bp-stats,.ct-pledges{row-gap:18px}
  .ct-figs{grid-template-columns:1fr;gap:8px}
  .ct-figs svg{max-width:none}
  .ct-figs .plot-txt{font-size:20px}
  .plot-txt{font-size:13px}
  .sy-fig{grid-column:1;grid-template-columns:1fr;row-gap:16px}
  .sy-fig svg{max-width:none}
  .sy-fig .plot-txt{font-size:18px}
  .dr-value{font-size:64px}
  .dr-tag{font-size:40px}
  .monitor-list{grid-template-columns:auto 1fr}
  .path{grid-template-columns:1fr 1fr;row-gap:22px}
  .platform-right{padding-left:0}
  .platform-right .divider,.divider{display:none}
  .btn{width:100%}
  .espera{width:100%}
}