/* StemView: diseño elegido por Hans el 26-oct-2026 (maquetas en bike-data-screen/web/maquetas).
   Héroe oscuro de "instrumento"; "Un día" y "Lo que necesitas" claros de "pleno sol"; piezas y despiece de "taller". */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --asfalto:#16181b; --carbon:#202328; --borde:#33373d; --niebla:#9aa0a8; --blanco:#f3f4f1;
  --ambar:#ffb300; --lcd:#d6d8cd;
  --dia:#f6f8f7; --tinta:#24272b; --gris:#5d636b; --linea:#dce1df; --enlace:#1e63d6;
  --ancho:1180px;
}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{line-height:1.55;font-size:1.0625rem;color:var(--tinta);background:var(--dia)}
img{max-width:100%;height:auto;display:block}
a{color:var(--enlace)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.titular{font-stretch:68%;font-weight:850;letter-spacing:-.01em;line-height:.93}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:16px;top:16px;z-index:9;background:#fff;color:#000;padding:8px 12px;border-radius:8px}

/* Zona oscura: barra, héroe y pie */
.oscuro{background:var(--asfalto);color:var(--blanco)}
.oscuro a{color:inherit}
header.barra{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;font-size:1.15rem}
.marca img{width:34px;height:34px;border-radius:8px}
header nav{display:flex;align-items:center;gap:26px;font-size:.95rem;color:var(--niebla)}
header nav a{text-decoration:none}
header nav a:hover{color:var(--blanco)}
.idioma{border:1px solid var(--borde);border-radius:999px;padding:5px 12px;font-size:.85rem}
.heroe{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center;padding:48px 0 100px}
.heroe h1{font-size:clamp(3.2rem,7.2vw,6.4rem)}
.heroe .bajada{max-width:31ch;margin-top:26px;font-size:1.25rem;color:#d3d6da}
.acciones{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem}
.btn.lleno{background:var(--ambar);color:#1a1300}
.btn.linea{box-shadow:inset 0 0 0 1.5px var(--borde);color:var(--blanco)}
.precio{margin-top:22px;color:var(--niebla);font-size:.95rem}
.precio b{color:var(--blanco);font-weight:600}
/* La placa anotada */
.escena{position:relative;width:520px;height:640px}
.equipo{position:absolute;left:80px;top:20px;width:360px;padding:26px 24px 40px;background:linear-gradient(160deg,#2b2f35,#1d2024);border-radius:34px;box-shadow:inset 0 1px 0 #4a4f57,0 40px 80px -30px #000}
.equipo::after{content:"";position:absolute;left:50%;bottom:-38px;width:120px;height:38px;transform:translateX(-50%);background:#24272c;border-radius:0 0 14px 14px}
.lcd{background:var(--lcd);border-radius:6px;overflow:hidden;aspect-ratio:3/4}
.lcd img{width:100%;height:100%;mix-blend-mode:multiply;image-rendering:pixelated}
.nota{position:absolute;font-size:.86rem;color:var(--niebla);line-height:1.3;width:124px}
.nota b{display:block;color:var(--blanco);font-weight:600}
.nota::before{content:"";position:absolute;top:.62em;height:1px;width:var(--l);background:var(--ambar)}
.nota::after{content:"";position:absolute;top:calc(.62em - 3px);width:7px;height:7px;border-radius:50%;background:var(--ambar)}
.nota.izq{text-align:right}
.nota.izq::before{left:calc(100% + 8px)}
.nota.izq::after{left:calc(100% + 8px + var(--l))}
.nota.der::before{right:calc(100% + 8px)}
.nota.der::after{right:calc(100% + 8px + var(--l))}

/* Zona clara */
section{padding:100px 0}
section+section{border-top:1px solid var(--linea)}
section h2{font-size:clamp(2.4rem,4.6vw,3.8rem)}
.entrada{margin-top:16px;max-width:58ch;color:#3d4249;font-size:1.15rem}
.blanco{background:#fff}

/* Un día con StemView */
.dia{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:28px;margin-top:56px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px}
.momento{scroll-snap-align:start;display:grid;gap:12px;align-content:start}
.momento time{font-weight:600;color:var(--enlace)}
.momento .lcd{box-shadow:0 0 0 10px #2c3035}
.momento h3{font-size:1.25rem;margin-top:12px}
.momento p{color:#4a5058;font-size:.98rem}

/* Lo que necesitas */
.suma{display:flex;align-items:stretch;gap:20px;margin-top:56px;flex-wrap:wrap}
.suma>div{flex:1 1 240px;padding-top:8px;border-top:3px solid var(--tinta)}
.suma .signo{flex:0 0 auto;align-self:center;font-size:2.4rem;color:var(--gris);border:0;padding:0}
.suma h3{font-size:1.4rem;margin-top:14px}
.suma .cifra{font-size:2.2rem;font-weight:800;font-stretch:80%;margin-top:4px}
.suma p{color:#4a5058;margin-top:6px}
.suma a{font-weight:600}
.insignias{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.insignias img{height:46px;width:auto}
.insignia-texto{display:inline-flex;align-items:center;height:46px;padding:0 16px;border-radius:9px;background:#000;color:#fff!important;text-decoration:none;font-weight:600;font-size:.95rem}
.insignia-texto.pronto{background:#e3e6e4;color:var(--gris)!important}

/* Piezas y despiece */
.taller{display:grid;gap:48px;margin-top:48px}
.taller figure{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:40px;align-items:center}
.despiece{position:relative;margin-right:28px}
.globo{position:absolute;width:30px;height:30px;margin:-15px 0 0 8px;border-radius:50%;background:var(--tinta);color:#fff;font-weight:700;font-size:.9rem;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
.leyenda{display:grid;gap:14px;padding:0;list-style:none;counter-reset:g}
.leyenda li{counter-increment:g;display:flex;gap:12px;align-items:baseline;font-size:1.05rem}
.leyenda li::before{content:counter(g);flex:0 0 22px;height:22px;border-radius:50%;background:var(--tinta);color:#fff;font-size:.75rem;font-weight:700;display:grid;place-items:center}
.leyenda span{color:var(--gris)}
table.piezas{width:100%;border-collapse:collapse;font-size:.98rem}
.piezas th{text-align:left;font-weight:600;font-size:.85rem;color:var(--gris);padding:0 12px 12px 0;border-bottom:1px solid var(--tinta)}
.piezas td{padding:16px 12px 16px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.piezas td.n,.piezas th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.piezas td b{font-weight:600;display:block}
.piezas td small{color:var(--gris);font-size:.88rem}
.piezas td small.movil{display:none}
.piezas tr.opcional td{color:var(--gris)}
.piezas tfoot td{border-bottom:0;font-weight:700;font-size:1.1rem;padding-top:20px}
.etiqueta{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:99px;background:#fff4d6;color:#7a5600;margin-left:6px;font-weight:600}
.donde a{display:inline-block;margin-right:10px;white-space:nowrap}
.afiliado{margin-top:14px;font-size:.85rem;color:var(--gris)}

/* Armado */
.pasos{margin-top:44px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-left:1px solid var(--linea);counter-reset:paso;padding:0}
.pasos li{list-style:none;padding:0 20px 0 18px;border-right:1px solid var(--linea);counter-increment:paso}
.pasos li::before{content:counter(paso);display:block;font-weight:850;font-stretch:68%;font-size:3rem;color:var(--ambar);line-height:1;margin-bottom:10px}
.pasos h3{font-size:1.08rem;margin-bottom:6px}
.pasos p{font-size:.95rem;color:#4a4e54}

/* Relojes y preguntas */
.relojes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 28px;margin-top:40px}
.relojes h3{font-size:1rem}
.relojes p{color:#4a5058;font-size:.95rem}
.aviso{margin-top:28px;color:var(--gris)}
details{border-top:1px solid var(--linea);padding:22px 0}
details:last-of-type{border-bottom:1px solid var(--linea)}
summary{cursor:pointer;font-weight:600;font-size:1.15rem}
details p{margin-top:10px;max-width:64ch;color:#4a5058}

footer.pie{padding:56px 0 64px;font-size:.88rem;color:var(--niebla)}
footer.pie nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px}
footer.pie nav a{color:var(--blanco);text-decoration:none}
footer.pie p+p{margin-top:8px}

/* Páginas de texto (instalador, privacidad) */
.pagina{max-width:760px;padding:64px 0 96px}
.pagina h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.pagina h2{font-size:1.5rem;margin:40px 0 10px;font-stretch:80%;font-weight:800}
.pagina p,.pagina li{color:#3d4249}
.pagina ul{padding-left:1.2em;display:grid;gap:8px}
.resumen{margin-top:28px;padding:22px 24px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--linea)}
.instalar-caja{margin-top:32px;padding:32px;border-radius:24px;background:var(--asfalto);color:var(--blanco)}
.instalar-caja p{color:#d3d6da}
esp-web-install-button button[slot=activate]{background:var(--ambar);color:#1a1300;border:0;border-radius:999px;padding:15px 26px;font:700 1rem Archivo,sans-serif;cursor:pointer;margin-top:18px}
.no-serial{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:#3a2f10;color:#ffe3a3}
ol.guia{margin-top:36px;padding-left:1.3em;display:grid;gap:14px}

@media (max-width:980px){
  .heroe{grid-template-columns:1fr}
  .escena{margin:0 auto;transform:scale(.86);transform-origin:top center;height:580px}
  .taller figure{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr;border-left:0}
  .pasos li{border-right:0;border-top:1px solid var(--linea);padding:18px 0}
  header nav a:not(.idioma){display:none}
  .suma .signo{display:none}
}
@media (max-width:560px){
  .escena{transform:none;width:100%;height:auto;margin:0}
  .equipo{position:relative;left:auto;top:auto;width:min(100%,320px);margin:0 auto 38px;padding:18px 16px 28px;border-radius:26px}
  .escena .nota{display:none}
  .heroe h1{font-size:clamp(2.8rem,13vw,3.6rem)}
  .piezas th:nth-child(2),.piezas td:nth-child(2){display:none}
  .piezas td small.movil{display:block;font-weight:400;margin-top:2px}
  section{padding:72px 0}
}

/* Interruptor Human / Machine (como cloudflare.com/connect): la versión Machine es la misma página en Markdown */
.modo{display:inline-flex;gap:4px;padding:5px;margin-bottom:26px;border-radius:999px;background:#0f1113;box-shadow:inset 0 0 0 1px var(--borde);font-family:ui-monospace,Menlo,monospace;font-size:.95rem}
.modo>*{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;color:var(--niebla)!important;text-decoration:none}
.modo>*::before{content:"";width:7px;height:7px;border-radius:50%;background:#5c6168}
.modo .activo{background:var(--carbon);color:var(--blanco)!important}
.modo .activo::before{background:var(--ambar)}
.modo a:hover{color:var(--blanco)!important}