/* Monza — sistema visual: estructura ALSO + colores Thansen (docs/diseno/sistema-monza.md) */
:root{
  --azul:#00529C; --azul-noche:#023869; --azul-link:#3071A9;
  --verde:#1FA347; --verde-osc:#178a3b; --amarillo:#FFB700;
  --papel:#F7F7F5; --tarjeta:#fff; --gris:#F2F2F2; --linea:#DEDEDA;
  --tinta:#151515; --tinta-2:#5C5C5C;
  --f-titulo:"Barlow",system-ui,sans-serif;
  --f-etiqueta:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --f-cuerpo:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sombra:0 2px 0 var(--azul-noche);
  --gap:80px; --ancho:1200px;
}
@media(max-width:700px){:root{--gap:48px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 16px/1.55 var(--f-cuerpo)}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--f-titulo);margin:0;font-weight:800}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
.eyebrow{font:700 13px/1.3 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;margin:0 0 16px;color:var(--azul)}
.display{font-size:clamp(40px,8vw,72px);line-height:.95;letter-spacing:-.03em}
.h1{font-size:clamp(36px,6.4vw,60px);line-height:.97;letter-spacing:-.03em}
.h2{font-size:clamp(28px,5vw,44px);line-height:1;letter-spacing:-.02em}
.h3{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.bajada{font-size:clamp(18px,2.4vw,22px);line-height:1.4;max-width:38ch;margin:20px 0 28px;color:var(--tinta-2)}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* botones: pildora + sombra dura (ALSO) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:9999px;border:0;
  font:700 15px/1 var(--f-etiqueta);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:var(--sombra);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn-verde{background:var(--verde);color:#fff}.btn-verde:hover{background:var(--verde-osc)}
.btn-borde{background:var(--tarjeta);color:var(--tinta);outline:1.5px solid var(--tinta);outline-offset:-1.5px}
.btn svg{width:20px;height:20px;fill:currentColor}
.acciones{display:flex;flex-wrap:wrap;gap:14px}

/* barra de anuncio */
.anuncio{background:var(--azul-noche);color:#fff;font:700 12px/1.3 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;text-align:center;padding:10px 16px}
.anuncio b{color:var(--amarillo)}

/* header: barra entera azul (Thansen) */
header{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.top{display:flex;align-items:center;gap:16px;height:68px;background:var(--azul);padding-right:16px}
.marca{display:flex;align-items:center;gap:14px;align-self:stretch;color:#fff;text-decoration:none;padding:0 20px;flex-shrink:0;background:none;border:0;cursor:pointer}
.marca .nombre{font:700 34px/1 var(--f-titulo);letter-spacing:-.025em;padding-bottom:3px}
.hamb{display:grid;gap:5px;width:22px;background:none;border:0;padding:0;cursor:pointer}
.hamb span{height:2.5px;background:#fff;border-radius:2px;display:block}
.marca-wrap{display:flex;align-items:center;align-self:stretch;padding-left:20px;gap:14px}
.marca-wrap .marca{padding:0 20px 0 0}
.buscar{flex:1;max-width:520px;display:flex;align-items:center;background:#fff;border-radius:9999px;height:44px;padding:0 6px 0 18px}
.buscar input{flex:1;border:0;background:none;font:400 15px var(--f-cuerpo);color:var(--tinta);min-width:0;height:100%}
.buscar input:focus{outline:none}
.buscar button{border:0;background:none;color:var(--azul);width:36px;height:36px;border-radius:50%;cursor:pointer}
.buscar svg{width:18px;height:18px;margin:auto}
.wa-top{margin-left:auto;font:700 13px/1 var(--f-etiqueta);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:8px;color:#fff;background:var(--verde);border-radius:9999px;padding:10px 16px;box-shadow:var(--sombra);white-space:nowrap}
.wa-top svg{width:20px;height:20px;fill:#fff}
nav.menu{display:flex;gap:28px;overflow-x:auto;padding:12px 0;font:500 15px/1 var(--f-titulo);scrollbar-width:none}
nav.menu::-webkit-scrollbar{display:none}
nav.menu a{text-decoration:none;white-space:nowrap;padding-bottom:6px;border-bottom:2px solid transparent}
nav.menu a:hover,nav.menu a[aria-current]{color:var(--azul);border-color:var(--azul)}
.panel{display:none;background:#fff;border-bottom:1px solid var(--linea)}
.panel.abierto{display:block}
.panel .wrap{display:grid;gap:4px;padding-top:12px;padding-bottom:16px}
@media(min-width:800px){.panel .wrap{grid-template-columns:repeat(3,1fr)}}
.panel a{display:block;padding:12px 0;text-decoration:none;font:500 17px var(--f-titulo);border-bottom:1px solid var(--gris)}
@media(max-width:700px){.buscar{display:none}.marca .nombre{font-size:28px}.marca-wrap{padding-left:16px}}
@media(max-width:380px){.wa-top span{display:none}.wa-top{padding:10px}.marca-wrap .marca{padding-right:8px}}

/* migas */
.migas{font-size:14px;color:var(--tinta-2);margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.migas li+li::before{content:"›";margin-right:6px}
.migas a{color:var(--tinta-2)}

/* hero */
.hero{padding:48px 0 8px}

/* Mi moto (Thansen) */
.mimoto{background:var(--azul);color:#fff;border-radius:24px;padding:28px;margin-top:40px;display:grid;gap:20px}
@media(min-width:900px){.mimoto{grid-template-columns:1fr 2fr;align-items:center;padding:36px 40px}}
.mimoto .eyebrow{color:var(--amarillo)}
.mimoto h2{font-size:30px;line-height:1.02;letter-spacing:-.02em}
.selects{display:grid;gap:12px}
@media(min-width:700px){.selects{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
.campo label{display:block;font:700 12px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;opacity:.9}
.campo select{width:100%;height:50px;border-radius:12px;border:0;padding:0 14px;font:500 16px var(--f-titulo);color:var(--tinta);background:#fff}
.campo select:disabled{background:#d9e4ef;color:#5f7489}

/* secciones */
section{padding-top:var(--gap)}
.cab{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.cab a{font:700 13px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;color:var(--azul);text-decoration:none;white-space:nowrap}
.cab p.muted{margin:12px 0 0;color:var(--tinta-2);max-width:60ch}

.grid{display:grid;gap:16px}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.g5{grid-template-columns:repeat(5,1fr)}}
.g-marcas{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:800px){.g-marcas{grid-template-columns:repeat(5,minmax(0,1fr))}}

.puerta{position:relative;background:var(--tarjeta);border-radius:12px;padding:20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;border:1px solid var(--linea)}
.puerta:hover{border-color:var(--azul)}
.puerta .cont{font:700 12px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2)}
.puerta strong{font:800 clamp(22px,2.4vw,30px)/1 var(--f-titulo);letter-spacing:-.03em;overflow-wrap:anywhere}
.puerta .cont{padding-right:40px}
.flecha{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--tinta);display:grid;place-items:center;color:var(--azul);font-size:16px}

.tarjeta{background:var(--tarjeta);border-radius:12px;padding:22px;text-decoration:none;display:block;border:1px solid var(--linea)}
a.tarjeta:hover{border-color:var(--azul)}
.tarjeta h3{font-size:24px;letter-spacing:-.02em}
.tarjeta p{margin:8px 0 0;color:var(--tinta-2);font-size:15px}
.chip{display:inline-block;font:700 12px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;background:var(--gris);border-radius:9999px;padding:6px 10px;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--tarjeta);border:1px solid var(--linea);border-radius:9999px;padding:8px 14px;font:500 15px var(--f-titulo)}
.chips a{text-decoration:none}

/* tabla "que le va" */
.lista-va{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin:0;padding:0;list-style:none}
.lista-va li{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--gris)}
.lista-va li:last-child{border-bottom:0}
.lista-va b{font:700 17px var(--f-titulo)}
.lista-va span{color:var(--tinta-2);text-align:right}

/* promesas (Thansen) */
.promesas{background:var(--gris);border-radius:24px;padding:28px;display:grid;gap:24px}
@media(min-width:800px){.promesas{grid-template-columns:repeat(3,1fr);padding:40px}}
.promesa svg{width:36px;height:36px;stroke:var(--azul);fill:none;stroke-width:1.6;margin-bottom:14px}
.promesa h3{font-size:20px;letter-spacing:-.01em}
.promesa p{margin:6px 0 0;color:var(--tinta-2);font-size:15px}

/* seccion dada vuelta (ALSO) */
.vuelta{background:var(--azul);color:#fff;margin-top:var(--gap);padding:var(--gap) 0}
.vuelta .eyebrow{color:var(--amarillo)}
.vuelta .h2{max-width:20ch}
.vuelta p{max-width:56ch;font-size:18px;opacity:.94;margin-top:16px}

/* prosa */
.prosa{max-width:68ch;font-size:17px}
.prosa h2{font-size:28px;letter-spacing:-.02em;margin:40px 0 12px}
.prosa ul{padding-left:1.2em}.prosa li{margin-bottom:.5em}

/* preguntas con respuesta visible (arboles AlsoAsked) */
.preguntas{display:grid;gap:16px}
@media(min-width:800px){.preguntas{grid-template-columns:1fr 1fr}}
.qa{background:var(--tarjeta);border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:12px;padding:22px}
.qa h3{font-size:21px;letter-spacing:-.01em;margin-bottom:8px}
.qa p{margin:0;color:var(--tinta-2)}
.qa p+p{margin-top:16px}
.tarjeta .mas{margin-top:14px;font:700 13px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;color:var(--azul)}
.mas-bloque{margin:24px 0 0;font-size:16px;color:var(--tinta-2)}
.mas-bloque a{color:var(--azul);font-weight:600}
.prosa p{color:var(--tinta)}

/* FAQ */
.faq details{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:18px 20px;font:700 18px/1.3 var(--f-titulo);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--azul);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px;margin:0;color:var(--tinta-2)}

/* formulario */
.form{background:var(--tarjeta);border:1px solid var(--linea);border-radius:24px;padding:28px;max-width:620px}
.form .f{margin-bottom:16px}
.form label{display:block;font:700 12px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.form input,.form textarea,.form select{width:100%;min-height:50px;border:1px solid #212121;border-radius:12px;padding:12px 14px;font:400 16px var(--f-cuerpo);background:#fff;color:var(--tinta)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.form .nota{font-size:13px;color:var(--tinta-2);margin:12px 0 0}
.estado{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;font-weight:600}
.estado.ok{display:block;background:#e6f4ea;color:#14532d}.estado.err{display:block;background:#fdecec;color:#7f1d1d}
.hp{position:absolute;left:-9999px}

/* pie */
footer{margin-top:var(--gap);background:var(--azul-noche);color:#cfd9e6;padding:48px 0 120px;font-size:15px}
footer a{color:#fff}
footer .cols{display:grid;gap:28px}
@media(min-width:800px){footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{font:700 13px/1 var(--f-etiqueta);letter-spacing:.07em;text-transform:uppercase;color:var(--amarillo);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:8px}
footer .marca-pie{font:700 30px/1 var(--f-titulo);color:#fff;letter-spacing:-.025em;margin-bottom:12px}
footer .legal{border-top:1px solid #ffffff22;margin-top:32px;padding-top:20px;font-size:13px}

/* WhatsApp flotante (sagrado, regla WebTu) */
.wa-flot{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:var(--verde);display:grid;place-items:center;box-shadow:var(--sombra);z-index:30}
.wa-flot svg{width:30px;height:30px;fill:#fff}