@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+20AC,U+2013,U+2014,U+2018-201F,U+00B7}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+20AC,U+2013,U+2014,U+2018-201F,U+00B7}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+20AC,U+2013,U+2014,U+2018-201F,U+00B7}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+20AC,U+2013,U+2014,U+2018-201F,U+00B7}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+20AC,U+2013,U+2014,U+2018-201F,U+00B7}

/* ==========================================================================
   Solventium · hoja de estilo (05-09-2026, segunda vuelta)
   Negro cálido y neutros de arena como en @solventium_, fotografía real a gran
   tamaño con un grano fino, y el rojo Guardsman (#CA0000) como hilo: la acción
   principal y la línea de energía. Tema oscuro por defecto; el claro se elige.
   ========================================================================== */
:root{
  --ink:#0D0C0B; --sup:#161412; --sup2:#1F1C19; --sup3:#2B2723;
  --tinta:#F3EEE6; --texto:#BDB5AA; --tenue:#877E73; --arena:#9A948C;
  --linea:rgba(243,238,230,.09); --linea2:rgba(243,238,230,.18);
  --red:#CA0000; --red2:#E01818; --rojo-tx:#F0524A; --ok:#6CC58A;
  --vidrio:rgba(255,255,255,.12); --vidrio-b:rgba(255,255,255,.28);
  --sombra:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
  --sombra2:0 2px 8px rgba(0,0,0,.5),0 40px 80px -28px rgba(0,0,0,.9);
  --sf:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  /* Titulares en Archivo 700, la misma cara que el presupuestador que recibe
     el cliente: el presupuesto y la web se leen como una sola marca. El cuerpo
     sigue en Inter. */
  --disp:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --exp:cubic-bezier(.16,1,.3,1);
  --ancho:1200px; --r1:12px; --r2:20px; --r3:28px;
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
html[data-tema="claro"]{
  --ink:#F7F4EF; --sup:#EFEBE4; --sup2:#E6E0D7; --sup3:#D9D2C7;
  --tinta:#161412; --texto:#4A4540; --tenue:#7A736C; --arena:#6F6862;
  --linea:rgba(22,20,18,.10); --linea2:rgba(22,20,18,.18);
  --red2:#A60000; --rojo-tx:#B00000; --ok:#1E7A3E;
  --sombra:0 1px 2px rgba(0,0,0,.05),0 14px 34px -14px rgba(0,0,0,.18);
  --sombra2:0 2px 6px rgba(0,0,0,.06),0 26px 52px -22px rgba(0,0,0,.26);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;accent-color:var(--red);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-padding-top:84px}
body{font-family:var(--sf);background:var(--ink);color:var(--texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.004em;overflow-x:hidden;font-feature-settings:"cv05","cv11","ss03"}
::selection{background:rgba(202,0,0,.35);color:#fff}
input,textarea{caret-color:var(--red)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{color:var(--tinta);font-weight:600;letter-spacing:-.024em;line-height:1.08;text-wrap:balance}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.8vw,74px);letter-spacing:-.028em;line-height:1.03}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.024em;line-height:1.08}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.018em;line-height:1.22}
h4{font-size:17px;letter-spacing:-.012em;line-height:1.3}
p{text-wrap:pretty}
b,strong{font-weight:600}
.env{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.estrecho{max-width:780px}
.ancho{max-width:1400px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a.oculto:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip-path:none;background:var(--ink);color:var(--tinta);padding:10px 14px;border-radius:8px;z-index:100;box-shadow:var(--sombra2)}
[id]{scroll-margin-top:84px}
.grano{position:relative}
.grano::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grano);opacity:.09;mix-blend-mode:overlay;z-index:1}

/* ---------------- cabecera ---------------- */
header.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ink) 55%,transparent);-webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
body.desplazado header.top{border-bottom-color:var(--linea);background:color-mix(in srgb,var(--ink) 80%,transparent)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){header.top{background:var(--ink)}}
.barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:68px;max-width:var(--ancho);margin:0 auto;padding:0 28px}
.barra>.men{justify-self:center}
.barra>.accesos{justify-self:end}
.marca{display:inline-flex;align-items:center;flex:0 0 auto}
.marca .logo{height:28px;width:auto;display:block}
.marca .oscuro{display:none}
html[data-tema="claro"] .marca .claro{display:none}
html[data-tema="claro"] .marca .oscuro{display:block}
.pie-marca .logo{height:20px;margin-bottom:18px}
@media(max-width:620px){.marca .logo{height:19px}}
nav.men{display:flex;align-items:center;gap:2px}
nav.men a{padding:8px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--texto);transition:color .18s,background-color .18s}
nav.men a:hover{color:var(--tinta);background:var(--sup2)}
nav.men a[aria-current]{color:var(--tinta);font-weight:600}
.accesos{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tel{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--tinta);white-space:nowrap;padding:8px 6px;font-variant-numeric:tabular-nums}
.tel svg{width:15px;height:15px;color:var(--tenue)}
.tema,.abrir,.idioma{width:36px;height:36px;flex:0 0 auto;border-radius:999px;border:1px solid var(--linea2);background:transparent;color:var(--texto);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.tema:hover,.abrir:hover,.idioma:hover{background:var(--sup2);color:var(--tinta);border-color:var(--tenue)}
.tema svg{width:16px;height:16px}
.tema .luna{display:none}
html[data-tema="claro"] .tema .sol{display:none}
html[data-tema="claro"] .tema .luna{display:block}
.abrir{display:none}
.abrir svg{width:18px;height:18px}
.idioma{font-size:12px;font-weight:600;letter-spacing:.06em}
.accesos .btn.peq{padding:10px 18px;font-size:14px;white-space:nowrap}
@media(max-width:1080px){.accesos .btn.peq{display:none}}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sf);font-weight:600;font-size:15px;line-height:1;padding:14px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;background:var(--red);color:#fff;letter-spacing:-.005em;transition:transform .18s var(--exp),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:hover{background:var(--red2);box-shadow:0 8px 24px -10px rgba(202,0,0,.6)}
.btn:active{transform:scale(.98);transition:transform .04s linear}
.btn svg{width:16px;height:16px}
.btn.lin{background:transparent;color:var(--tinta);border-color:var(--linea2)}
.btn.lin:hover{background:var(--sup2);border-color:var(--tenue);box-shadow:none}
.btn.osc{background:var(--tinta);color:var(--ink)}
.btn.osc:hover{background:var(--texto);box-shadow:none}
.btn.gr{padding:17px 30px;font-size:16px}
@media(hover:none),(pointer:coarse){.btn:hover{background:var(--red);box-shadow:none}.btn.lin:hover{background:transparent;border-color:var(--linea2)}}
.vidrio{width:44px;height:44px;border-radius:999px;border:1px solid var(--vidrio-b);background:var(--vidrio);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s var(--exp)}
.vidrio:hover{background:rgba(255,255,255,.24)}
.vidrio:active{transform:scale(.95);transition:transform .04s linear}
.vidrio svg{width:18px;height:18px}

/* ---------------- secciones y ritmo de los títulos ---------------- */
section{padding:clamp(72px,9vw,128px) 0}
section.sup{background:var(--sup)}
section.calido{background:linear-gradient(180deg,var(--sup) 0%,var(--ink) 100%)}
.rotulo,.kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--arena);margin-bottom:14px}
.entradilla{font-size:clamp(17px,1.7vw,19px);color:var(--texto);max-width:60ch;margin-top:16px;line-height:1.6;letter-spacing:-.006em}
.entradilla b{color:var(--tinta);font-weight:600}
.entradilla a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:4px;transition:text-decoration-color .18s}
.entradilla a:hover{text-decoration-color:var(--tinta)}
.centro{text-align:center}
.centro .entradilla,.centro h1,.centro h2{margin-left:auto;margin-right:auto}
.cab{max-width:760px}
.cab .ver{margin-top:18px}
.cabecera-seccion{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cabecera-seccion .cab{max-width:720px}
.cabecera-seccion .ctrl{margin:0 0 6px}

/* ---------------- portada (hero2) ---------------- */
.hero2{padding:clamp(20px,2.4vw,40px) 0 0;position:relative;overflow:clip}
/* Se descuenta lo que ocupan las cifras para que entren también en la
   primera pantalla, sin que la foto llegue a asomar. */
.hero2>.env{min-height:calc(100svh - 68px - clamp(20px,2.4vw,40px));display:flex;flex-direction:column;justify-content:center}

.hero2 .env{position:relative;z-index:2}
.hero2 h1{max-width:20ch;margin:16px auto 0}
.hero2 .entradilla{max-width:56ch;font-size:clamp(17px,1.8vw,20px);margin-top:22px}
.hero2 .acciones{justify-content:center;margin-top:32px}
.sello-google{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:13.5px;color:var(--tenue);flex-wrap:wrap;justify-content:center}
.sello-google b{color:var(--tinta);font-weight:600}
.sello-google a{transition:color .18s}
.sello-google a:hover{color:var(--tinta)}
.estrellas{color:var(--tinta);letter-spacing:1px;font-size:11px}
/* la escena: la línea de energía baja desde el titular y la tarjeta crece al hacer scroll */
.escena{--hueco:clamp(72px,9vw,110px);position:relative;max-width:1180px;margin:0 auto;padding:var(--hueco) 28px 0;z-index:2}
.escena .linea{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:6px;height:calc(var(--hueco) - 14px);z-index:3;pointer-events:none;overflow:visible}
.escena .linea line{stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));vector-effect:non-scaling-stroke}
.escena .linea circle{fill:var(--red);opacity:calc(var(--p,0) * var(--p,0))}
.tarjeta-video{touch-action:pan-y;position:relative;border-radius:var(--r3);overflow:hidden;background:var(--sup2);aspect-ratio:16/10;max-height:min(80vh,720px);margin:0 auto;box-shadow:var(--sombra2);transform:scale(calc(.92 + .08 * var(--p,0)));transition:transform .1s linear;isolation:isolate}
.tarjeta-video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.tarjeta-video>img.activa{opacity:1;animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.tarjeta-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);pointer-events:none}
.tarjeta-video::before{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.10;mix-blend-mode:overlay;z-index:2;pointer-events:none}
.tarjeta-video .pie-escena{position:absolute;left:clamp(18px,3vw,36px);right:120px;bottom:clamp(16px,2.6vw,30px);z-index:3;color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.tarjeta-video .pie-escena b{display:block;font-size:clamp(16px,1.6vw,21px);letter-spacing:-.02em;text-transform:none;font-weight:600;margin-top:4px;transition:opacity .5s}
.tarjeta-video .puntos{display:flex;gap:6px;margin-top:12px}
.tarjeta-video .puntos i{width:22px;height:2px;background:rgba(255,255,255,.35);border-radius:2px;transition:background .4s}
.tarjeta-video .puntos i.on{background:#fff}
.tarjeta-video .nav{position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:3;display:flex;gap:8px}
@media(prefers-reduced-motion:reduce){.tarjeta-video{transform:none}.tarjeta-video>img.activa{animation:none}.escena .linea line{stroke-dashoffset:0}}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);align-items:start;margin:0 auto;padding:clamp(40px,5vw,64px) 28px 0;max-width:var(--ancho)}
@media(max-width:820px){.datos{grid-template-columns:repeat(2,1fr)}}
.dato{text-align:center;min-width:0}
.dato .cifra{font-size:clamp(28px,3.2vw,40px);font-weight:600;color:var(--tinta);letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.dato .cifra span{color:inherit;font-weight:inherit}
.dato .txt,.dato .pie{display:block;font-size:13px;color:var(--tenue);margin-top:5px}
.js .sube{opacity:0;transform:translateY(22px);animation:subir .9s var(--exp) forwards}
.js .sube.s1{animation-delay:.05s}.js .sube.s2{animation-delay:.15s}.js .sube.s3{animation-delay:.25s}.js .sube.s4{animation-delay:.35s}.js .sube.s5{animation-delay:.5s}
@keyframes subir{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .sube{opacity:1;transform:none;animation:none}}

/* ---------------- marcas (cinta) ---------------- */
.marcas{padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.marcas p{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-bottom:22px}
.cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta .pista{display:flex;gap:clamp(40px,6vw,88px);width:max-content;animation:cinta 38s linear infinite}
.cinta span{font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:.08em;color:var(--tenue);white-space:nowrap;text-transform:uppercase}
.cinta:hover .pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cinta .pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------------- carrusel (scroll-snap, flechas y arrastre) ---------------- */
.carrusel-env{position:relative;margin-top:clamp(28px,4vw,44px)}
.carrusel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 28px 12px;margin:0 -28px;-webkit-overflow-scrolling:touch;scroll-padding:0 28px;cursor:grab;user-select:none;-webkit-user-select:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel.arrastre{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carrusel>*{scroll-snap-align:start;flex:0 0 auto}
.carrusel figure{width:min(78vw,440px);margin:0}
.carrusel figure .cuadro{aspect-ratio:4/5;border-radius:var(--r2);overflow:hidden;background:var(--sup2);position:relative}
.carrusel figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--exp);-webkit-user-drag:none;pointer-events:none}
@media(hover:hover) and (pointer:fine){.carrusel figure:hover img{transform:scale(1.035)}}
.carrusel figcaption{margin-top:12px;font-size:13.5px;color:var(--tenue);display:flex;justify-content:space-between;gap:12px}
.carrusel figcaption b{color:var(--texto);font-weight:500}
.carrusel.apaisado figure{width:min(84vw,640px)} .carrusel.apaisado figure .cuadro{aspect-ratio:16/9}
.ctrl{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.ctrl button{width:46px;height:46px;border-radius:999px;border:1px solid var(--linea2);background:var(--sup);color:var(--tinta);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .18s,border-color .18s,opacity .2s,transform .16s var(--exp)}
.ctrl button:hover{background:var(--sup2);border-color:var(--tenue)}
.ctrl button:active{transform:scale(.94);transition:transform .04s linear}
.ctrl button svg{width:18px;height:18px}
.ctrl button[disabled]{opacity:.3;cursor:default}
.ctrl .cuenta-c{align-self:center;margin-right:auto;font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums}
/* pase: una foto a la vez (equipos y fichas) */
.pase{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:4/5;background:var(--sup2);isolation:isolate}
.pase .pista{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pase .pista::-webkit-scrollbar{display:none}
.pase .pista.arrastre{cursor:grabbing;scroll-snap-type:none}
.pase .pista>div{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;position:relative}
.pase .pista img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.pase .pista>div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%);pointer-events:none}
.pase .pie-pase{position:absolute;left:18px;bottom:18px;right:112px;color:#fff;font-size:13px;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pase .nav{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.pase .nav .vidrio{width:40px;height:40px}
.pase .puntos{position:absolute;left:18px;top:16px;display:flex;gap:5px;z-index:2}
.pase .puntos i{width:18px;height:2px;background:rgba(255,255,255,.35);border-radius:2px;transition:background .3s}
.pase .puntos i.on{background:#fff}
.pase.cuadrado{aspect-ratio:1/1}

/* ---------------- cargadores (showcase) ---------------- */
.show{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
.show article{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--sup);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.show article img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1s var(--exp)}
.show article::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%)}
.show .info{position:relative;z-index:2;padding:22px 20px;color:#fff}
.show .marca-eq{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.show h3{color:#fff;font-size:21px;margin:6px 0 2px;letter-spacing:-.024em}
.show .titular{font-size:13.5px;color:rgba(255,255,255,.72)}
.show .precio{margin-top:12px;gap:8px}
.show .precio .et,.show .precio .d{color:rgba(255,255,255,.65)}
.show .precio .n{color:#fff;font-size:22px}
.show .ver{color:#fff;margin-top:12px;font-size:14px}
.show .ver svg{color:rgba(255,255,255,.7)}
@media(hover:hover) and (pointer:fine){.show article:hover img{transform:scale(1.05)}}
@media(max-width:1100px){.show{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.show{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:28px -20px 0;padding:0 20px 8px}.show::-webkit-scrollbar{display:none}.show article{flex:0 0 78vw;scroll-snap-align:start;min-height:420px}}

/* ---------------- vídeo vertical y clips ---------------- */
.decerca{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(28px,4vw,44px)}
.decerca .texto h3{margin-top:28px;font-size:18px}
.decerca .texto ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.decerca .texto li{display:flex;gap:12px;font-size:15.5px;color:var(--texto);align-items:flex-start}
.decerca .texto li svg{width:16px;height:16px;flex:0 0 auto;color:var(--arena);margin-top:5px}
.vertical{position:relative;aspect-ratio:9/16;width:100%;max-width:min(400px,calc(78vh * 9 / 16));margin:0 auto;border-radius:var(--r3);overflow:hidden;background:var(--sup2);box-shadow:var(--sombra2);isolation:isolate}
.vertical img,.vertical video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vertical video[hidden]{display:none}
.vertical .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));border:0;cursor:pointer;color:#fff;width:100%;z-index:2}
.vertical .play span{display:inline-flex;align-items:center;gap:12px;font-family:var(--sf);font-weight:600;font-size:15px;padding:14px 22px 14px 16px;border-radius:999px;background:var(--vidrio);border:1px solid var(--vidrio-b);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .2s var(--exp)}
.vertical .play:hover span{background:rgba(255,255,255,.24);transform:scale(1.03)}
.vertical .play svg{width:20px;height:20px}
.vertical .etiqueta{position:absolute;left:20px;right:20px;bottom:20px;color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.9;pointer-events:none;z-index:2}
.vertical .etiqueta b{display:block;font-size:17px;letter-spacing:-.02em;text-transform:none;font-weight:600;margin-top:4px}
.vertical.activo .play,.vertical.activo .etiqueta{display:none}
.clip{position:relative;cursor:pointer;border:0;padding:0;background:none;text-align:left;font:inherit;color:inherit}
.clip .cuadro{position:relative}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.clip.viendo video{opacity:1}
.clip .icono{position:absolute;left:14px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.clip .icono i{width:30px;height:30px;border-radius:999px;background:var(--vidrio);border:1px solid var(--vidrio-b);display:inline-flex;align-items:center;justify-content:center}
.clip .icono svg{width:13px;height:13px}
.clip.viendo .icono{opacity:0}
@media(max-width:900px){.decerca{grid-template-columns:1fr}.vertical{max-width:380px}}

/* ---------------- proceso con línea de energía ---------------- */
.proceso{position:relative;margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.proceso .pasos{margin-top:0;border-top:0;position:relative;padding-left:34px}
.proceso .pasos::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--linea2)}
.proceso .pasos::after{content:"";position:absolute;left:8px;top:8px;width:1px;height:calc(100% - 16px);background:var(--red);transform:scaleY(var(--p,0));transform-origin:top}
.proceso .pasos li{grid-template-columns:1fr;gap:6px;border-bottom:0;padding:18px 0}
.proceso .pasos li::before{position:absolute;left:-30px;margin-top:4px;content:"";width:9px;height:9px;border-radius:50%;background:var(--sup3);border:1px solid var(--linea2);padding:0}
.proceso .pasos li.luz::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(202,0,0,.18)}
.proceso .pasos h3{font-size:20px;margin-bottom:4px}
.proceso .pasos p{font-size:15px}
.proceso .lado{position:sticky;top:96px}
.proceso .lado .cuadro{border-radius:var(--r2);overflow:hidden;aspect-ratio:4/5;background:var(--sup2);position:relative}
.proceso .lado img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.proceso{grid-template-columns:1fr}.proceso .lado{position:static}.proceso .lado .cuadro{aspect-ratio:3/2}}

/* ---------------- simulador ---------------- */
.simulador{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);background:var(--sup);border-radius:var(--r3);padding:clamp(24px,3.5vw,44px);position:relative;overflow:hidden}
.simulador::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 100% 0%,rgba(210,193,166,.07),transparent 70%);pointer-events:none}
.simulador>*{position:relative}
.mando{padding:18px 0;border-top:1px solid var(--linea)}
.mando:first-child{border-top:0;padding-top:0}
.mando .et{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);margin-bottom:12px}
.mando .et output{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tinta);font-variant-numeric:tabular-nums}
.rango{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.rango::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red) var(--v,40%),var(--sup3) var(--v,40%))}
.rango::-moz-range-track{height:3px;border-radius:2px;background:var(--sup3)}
.rango::-moz-range-progress{height:3px;border-radius:2px;background:var(--red)}
.rango::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--tinta);border:4px solid var(--sup);box-shadow:0 0 0 1px var(--linea2);margin-top:-9.5px;transition:transform .15s}
.rango::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--tinta);border:4px solid var(--sup);box-shadow:0 0 0 1px var(--linea2)}
.rango:active::-webkit-slider-thumb{transform:scale(1.15);transition-duration:.04s}
/* Con el dedo en el deslizador la respuesta es continua (Apple: el feedback va durante el gesto, no al final); los 0,7 s de suavidad se quedan para los chips */
[data-sim].tocando .barras .barra .lleno,[data-sim].tocando .aro .lleno,[data-sim].tocando .dias i::after{transition-duration:.06s}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-family:var(--sf);font-size:14px;font-weight:500;color:var(--texto);background:transparent;border:1px solid var(--linea2);border-radius:999px;padding:10px 16px;cursor:pointer;transition:border-color .18s,background-color .18s,color .18s,transform .16s var(--exp)}
.chips button:hover{border-color:var(--tenue);color:var(--tinta)}
.chips button:active{transform:scale(.97);transition:transform .04s linear}
.chips button.on{border-color:var(--tinta);background:var(--tinta);color:var(--ink)}
.chips.dos button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px;padding:10px 14px;text-align:left}
.chips.dos b{font-size:14px;color:inherit;font-weight:600}
.chips.dos small{font-size:11.5px;color:var(--tenue)}
.chips.dos button.on small{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.paneles{display:grid;gap:12px}
.panel{background:var(--ink);border:1px solid var(--linea);border-radius:var(--r2);padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center}
.panel .titulo{grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.panel .cifra{font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.panel .cifra small{font-size:max(12px,.4em);font-weight:500;color:var(--tenue);letter-spacing:-.01em;margin-left:4px}
.panel .cap{grid-column:1/-1;font-size:13px;color:var(--tenue);line-height:1.5}
.barras{grid-column:1/-1;display:grid;gap:8px;margin-top:4px}
/* Acotada a .barras: si no, pisa a la .barra de la cabecera, que es otra cosa
   y se declara antes. Con la rejilla de 76px 1fr 64px encima, el logo se
   encogía y los accesos de la derecha se salían de la ventana. */
.barras .barra{display:grid;grid-template-columns:76px 1fr 64px;gap:10px;align-items:center;font-size:12.5px;color:var(--tenue)}
.barras .barra b{font-weight:500;color:var(--texto)}
/* La clase .pista se usa para tres cosas distintas: la cinta de marcas, el
   carrusel y esta barra. Las genéricas le meten display:flex, width:max-content
   y la animación de la cinta, y con un hijo vacío eso colapsaba la barra a 0 px
   de ancho: las de «Gasolina» y «En casa» no se han visto nunca. Se neutraliza. */
.barras .barra .pista{display:block;width:auto;min-width:0;animation:none;overflow:hidden;height:10px;border-radius:6px;background:var(--sup2)}
.barras .barra .lleno{height:100%;width:100%;border-radius:6px;background:var(--tenue);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .7s var(--exp)}
.barras .barra.casa .lleno{background:var(--tinta)}
.barras .barra .eur{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:500}
.aro{width:88px;height:88px;grid-row:2/4}
.aro circle{fill:none;stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.aro .fondo{stroke:var(--sup2)}
.aro .lleno{stroke:var(--tinta);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,.6));transition:stroke-dashoffset .8s var(--exp)}
.aro .veinte{stroke:var(--sup3);stroke-dasharray:1;stroke-dashoffset:.8}
.aro text{fill:var(--tenue);font-size:11px;text-anchor:middle;font-family:var(--sf);font-weight:500}
.dias{grid-column:1/-1;display:flex;gap:6px;margin-top:4px}
.dias i{flex:1;height:22px;border-radius:6px;background:var(--sup2);position:relative;overflow:hidden}
.dias i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--tinta);transform:scaleX(var(--c,0));transform-origin:left;transition:transform .6s var(--exp)}
.dias i span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--tenue);mix-blend-mode:difference;letter-spacing:.06em}
.simulador .nota{grid-column:1/-1;font-size:12.5px;color:var(--tenue);line-height:1.6;border-top:1px solid var(--linea);padding-top:14px;margin-top:4px}
.simulador .nota a{color:var(--texto);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.simulador{grid-template-columns:1fr}.panel{grid-template-columns:1fr auto}}

/* ---------------- reseñas (marquesina) ---------------- */
.resenas-cab{text-align:center;max-width:720px;margin:0 auto}
.resenas-cab .nota{display:inline-flex;align-items:baseline;gap:12px;margin-top:8px}
.resenas-cab .nota b{font-size:clamp(44px,6vw,72px);font-weight:600;letter-spacing:-.05em;color:var(--tinta);line-height:1;font-variant-numeric:tabular-nums}
.resenas-cab .nota span{font-size:14px;color:var(--tenue);text-align:left}
.marquesina{overflow:hidden;margin-top:clamp(28px,4vw,44px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquesina+.marquesina{margin-top:14px}
.marquesina .pista{display:flex;gap:14px;width:max-content;animation:cinta 150s linear infinite}
.marquesina.reves .pista{animation-direction:reverse;animation-duration:170s}
.marquesina:hover .pista{animation-play-state:paused}
.resena{width:360px;flex:0 0 auto;background:var(--ink);border:1px solid var(--linea);border-radius:var(--r2);padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.resena .estrellas{font-size:11px}
.resena p{font-size:14.5px;line-height:1.55;color:var(--tinta);letter-spacing:-.008em}
.resena .quien{font-size:12.5px;color:var(--tenue);margin-top:auto;display:flex;align-items:center;gap:10px}
.resena .quien b{color:var(--texto);font-weight:500}
.resena .quien i{width:28px;height:28px;border-radius:50%;background:var(--sup3);color:var(--arena);font-style:normal;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.resena .quien span{margin-left:auto}
@media(max-width:560px){.resena{width:300px}}
@media(prefers-reduced-motion:reduce){.marquesina{mask-image:none;-webkit-mask-image:none}.marquesina .pista{animation:none;flex-wrap:wrap;width:auto}.marquesina.reves{display:none}}
.resenas-pie{text-align:center;margin-top:26px;font-size:13.5px;color:var(--tenue)}
.resenas-pie a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:4px}

/* ---------------- incluido (foto + lista editorial) ---------------- */
.incluido2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(28px,4vw,44px)}
.incluido2 .lado{position:sticky;top:96px}
.incluido2 .lado .cuadro{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;background:var(--sup2)}
.incluido2 .lado img{width:100%;height:100%;object-fit:cover}
.incluido2 .lado .cuadro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.incluido2 .lado .pie-foto{position:absolute;left:20px;bottom:18px;right:20px;color:#fff;font-size:13px;z-index:2}
.incluido2 .lado .pie-foto b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em}
.lista-inc{list-style:none;counter-reset:inc;border-top:1px solid var(--linea)}
.lista-inc li{counter-increment:inc;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--linea);align-items:start}
.lista-inc li::before{content:"0" counter(inc);font-size:12px;font-weight:600;color:var(--arena);letter-spacing:.08em;padding-top:5px;font-variant-numeric:tabular-nums}
.lista-inc h3{font-size:18px;margin-bottom:4px}
.lista-inc p{font-size:15px;color:var(--texto);max-width:56ch}
@media(max-width:900px){.incluido2{grid-template-columns:1fr}.incluido2 .lado{position:static}.incluido2 .lado .cuadro{aspect-ratio:4/3}}

/* ---------------- cierre con foto ---------------- */
.cierre{border-radius:var(--r3);padding:clamp(48px,7vw,96px) clamp(24px,5vw,64px);text-align:center;background:var(--sup2);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cierre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.85)}
.cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,12,11,.55),rgba(13,12,11,.82))}
.cierre::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.10;mix-blend-mode:overlay;pointer-events:none}
.cierre h2{color:#fff;max-width:18ch;margin:0 auto;position:relative;z-index:1}
.cierre .entradilla{color:rgba(255,255,255,.8);margin:18px auto 0;position:relative;z-index:1}
.cierre .acciones{justify-content:center;position:relative;z-index:1}
.cierre .btn.lin{color:#fff;border-color:rgba(255,255,255,.4)}
.cierre .btn.lin:hover{background:rgba(255,255,255,.12);border-color:#fff}
.garantias{display:flex;gap:12px 28px;justify-content:center;flex-wrap:wrap;margin-top:32px;font-size:13.5px;position:relative;z-index:1}
.garantias span{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:rgba(255,255,255,.85)}
.garantias svg{width:14px;height:14px;color:var(--arena)}
.zonas{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.zonas span{font-size:13px;color:var(--texto);background:var(--sup);border:1px solid var(--linea);border-radius:999px;padding:6px 13px}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ---------------- cargadores (listado y fichas) ---------------- */
.equipo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(40px,5.5vw,64px) 0;border-top:1px solid var(--linea)}
.equipo:first-of-type{border-top:0;padding-top:clamp(28px,4vw,44px)}
.equipo.vuelta .pase,.equipo.vuelta .foto{order:2}
.foto{background:var(--sup);border-radius:var(--r3);overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:inset 0 0 0 1px var(--linea)}
.foto img{width:100%;height:100%;object-fit:cover}
.equipo .marca-eq{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--arena)}
.equipo h3{margin:8px 0 2px;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.026em}
.equipo .titular{color:var(--tenue);font-weight:500;font-size:15px}
.equipo .resumen{margin-top:16px;line-height:1.65;max-width:56ch}
.precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:22px}
.precio .et{font-size:12px;font-weight:600;color:var(--tenue);text-transform:uppercase;letter-spacing:.12em}
.precio .n{font-size:28px;font-weight:600;color:var(--tinta);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.precio .d{font-size:13px;color:var(--tenue)}
.precio.sinprecio .n{font-size:21px}
.rasgos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rasgos span{font-size:12.5px;font-weight:500;color:var(--texto);background:var(--sup2);border-radius:999px;padding:6px 12px}
.ver{margin-top:22px;display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;color:var(--tinta);transition:gap .2s var(--exp)}
.ver svg{width:14px;height:14px;color:var(--arena);transition:color .2s}
.ver:hover{gap:10px}
.ver:hover svg{color:var(--tinta)}
.tabla-env{overflow-x:auto;margin-top:44px;border:1px solid var(--linea);border-radius:var(--r2);background:var(--ink)}
table.comp{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
table.comp th,table.comp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
table.comp thead th{background:var(--sup);color:var(--tinta);font-weight:600;font-size:13px;white-space:nowrap;vertical-align:bottom}
table.comp thead th span{display:block;margin-top:8px}
table.comp thead th img{width:92px;height:70px;object-fit:cover;border-radius:10px;background:var(--sup2)}
table.comp tbody th{font-weight:600;color:var(--tinta);white-space:nowrap;font-size:13px}
table.comp tbody tr:last-child th,table.comp tbody tr:last-child td{border-bottom:0}
table.comp td{color:var(--texto)}
table.comp .eur{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinta);font-size:15px}
.minisinfoto{display:block;width:92px;height:70px;border-radius:10px;border:1px dashed var(--linea2)}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.ficha .pase{position:sticky;top:88px}
.ficha .titular{color:var(--tenue);font-weight:500;font-size:16px;margin-top:8px}
.ficha>div>h2:not(.oculto){margin-bottom:18px;font-size:clamp(24px,2.6vw,30px)}
dl.specs{margin-top:28px;border-top:1px solid var(--linea)}
dl.specs>div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--linea)}
dl.specs dt{font-weight:600;color:var(--tinta);font-size:14px}
dl.specs dd{color:var(--texto);font-size:14px}
dl.specs dd a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:3px}
.contacto-datos{margin-top:28px}
.foto.sinfoto{flex-direction:column;gap:6px;border:1px dashed var(--linea2);background:var(--sup);box-shadow:none}
.foto.sinfoto span{font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.03em;color:var(--tenue)}
.foto.sinfoto small{font-size:12.5px;color:var(--tenue)}

/* ---------------- listas de valor ---------------- */
.incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:44px}
.incluye div{background:var(--sup);border-radius:var(--r2);padding:28px 26px;transition:transform .35s var(--exp),box-shadow .35s var(--exp)}
section.sup .incluye div{background:var(--ink)}
@media(hover:hover) and (pointer:fine){.incluye div:hover{transform:translateY(-3px);box-shadow:var(--sombra)}}
.incluye h3{font-size:17px;letter-spacing:-.015em;line-height:1.3;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.incluye h3 svg{width:16px;height:16px;color:var(--arena);flex:0 0 auto;margin-top:3px}
.incluye p{font-size:14.5px;line-height:1.6;color:var(--texto)}
.pasos{counter-reset:p;margin-top:44px;display:grid;list-style:none;border-top:1px solid var(--linea)}
.pasos li{counter-increment:p;padding:26px 0;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;border-bottom:1px solid var(--linea)}
.pasos li::before{content:"0" counter(p);font-weight:500;font-size:13px;color:var(--arena);letter-spacing:.06em;font-variant-numeric:tabular-nums;padding-top:5px}
.pasos h3{font-size:19px;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}
.pasos p{font-size:15px;max-width:60ch}
.opiniones{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:44px}
.opinion{background:var(--sup);border-radius:var(--r2);padding:28px;display:flex;flex-direction:column;gap:14px}
.opinion p{color:var(--tinta);font-size:16px;line-height:1.6}
.opinion p:first-of-type{font-size:11px;letter-spacing:1px}
.opinion .quien{font-size:13px;color:var(--tenue);margin-top:auto}
.preguntas{margin-top:40px;border-top:1px solid var(--linea)}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{padding:22px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary h3{font-size:17px;font-weight:500;letter-spacing:-.015em;transition:color .18s}
.preguntas summary:hover h3{color:var(--tinta)}
.preguntas summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(45deg);flex:0 0 auto;transition:transform .3s var(--exp);margin:-4px 6px 0 0}
.preguntas details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
@supports (interpolate-size:allow-keywords){
  html{interpolate-size:allow-keywords}
  .preguntas details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--exp),content-visibility .3s allow-discrete}
  .preguntas details[open]::details-content{block-size:auto}
}
.preguntas .resp{padding:0 0 24px;font-size:15.5px;line-height:1.7;max-width:70ch;color:var(--texto)}

/* ---------------- pie ---------------- */
footer{border-top:1px solid var(--linea);padding:64px 0 32px;background:var(--ink)}
.pie{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.pie h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);font-weight:600;margin-bottom:16px}
.pie ul{list-style:none;display:grid;gap:10px}
.pie a{font-size:14px;color:var(--texto);transition:color .18s}
.pie a:hover{color:var(--tinta)}
.pie .dir{font-size:13.5px;line-height:1.85;color:var(--tenue)}
.pie .dir a{color:var(--texto)}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tenue)}
.legal nav{display:flex;gap:18px;flex-wrap:wrap}
.legal a:hover{color:var(--tinta)}

/* ---------------- portada antigua (madrid) ---------------- */
.portada{background:var(--ink);padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,88px);position:relative;overflow:clip}
.portada::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 40% at 30% 0%,rgba(202,0,0,.08),transparent 72%);pointer-events:none}
.portada .fondo,.portada .velo,.chispazo,.flujo,.ambiente img,.ambiente .velo{display:none}
.portada .env{position:relative;z-index:2}
.portada h1{max-width:16ch}
.portada .entradilla{max-width:54ch}
.portada .datos{justify-content:flex-start;padding:28px 0 0;margin-top:48px;border-top:1px solid var(--linea)}
.portada .dato{text-align:left}
.sello{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linea2);border-radius:999px;padding:7px 14px 7px 12px;font-size:13px;color:var(--texto);margin-bottom:26px}
.sello b{color:var(--tinta);font-weight:600}
.ambiente{position:relative;overflow:clip;background:var(--sup)}
.ambiente .env{position:relative;z-index:2}

/* ---------------- responsive ---------------- */
@media(max-width:980px){
  .equipo,.ficha{grid-template-columns:1fr;gap:26px}
  .equipo.vuelta .pase,.equipo.vuelta .foto{order:0}
  .ficha .pase{position:static}
  .pie{grid-template-columns:1fr 1fr}
  .pie>div:first-child{grid-column:1/-1}
}
@media(max-width:820px){
  /* El menú no aparece de golpe: entra y sale por el mismo camino (8 px desde arriba, origen en el botón que lo abre) */
  nav.men{position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid var(--linea);padding:10px 20px 16px;flex-direction:column;align-items:stretch;gap:2px;box-shadow:var(--sombra2);opacity:0;visibility:hidden;transform:translateY(-8px);transform-origin:top right;transition:opacity .2s var(--exp),transform .2s var(--exp),visibility 0s linear .2s}
  nav.men.abierta{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--exp),transform .2s var(--exp),visibility 0s}
  nav.men a{padding:13px 12px;font-size:16px;border-radius:10px}
  .abrir{display:inline-flex}
  .tel span{display:none}
  .tel{padding:8px}
  header.top{position:sticky}
  .datos{gap:22px 36px}
  .dato{flex:1 1 40%}
}
@media(max-width:620px){
  body{font-size:15.5px}
  .env{padding:0 20px}
  .barra{padding:0 20px;height:58px}
  .acciones .btn{width:100%}
  .escena{padding-left:14px;padding-right:14px}
  .tarjeta-video{border-radius:var(--r2);aspect-ratio:4/5}
  .tarjeta-video .pie-escena{right:20px;bottom:74px}
  .foto{border-radius:var(--r2)}
  .pie{grid-template-columns:1fr}
  .pasos li{grid-template-columns:44px 1fr;gap:14px}
  .carrusel{padding:6px 20px 12px;margin:0 -20px}
  .simulador{padding:22px 18px;border-radius:var(--r2)}
  .panel{padding:16px}
  .aro{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Menos movimiento no es cero feedback (Apple): los fundidos de opacidad y color se quedan, cortos; las animaciones y lo que se desplaza, no */
  *,*::before,*::after{transition-duration:.15s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media(prefers-reduced-transparency:reduce){
  header.top,body.desplazado header.top{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .vidrio{background:rgba(0,0,0,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-contrast:more){
  header.top,body.desplazado header.top{background:var(--ink);border-bottom-color:var(--tinta)}
  .vidrio{background:#000;border-color:#fff}
}

/* ---------------- formulario ---------------- */
.formulario{border-radius:var(--r3);padding:clamp(24px,3.5vw,36px);background:var(--sup)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:7px}
.campo .opc{color:var(--tenue);font-weight:400}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--sf);font-size:16px;color:var(--tinta);background:var(--ink);border:1px solid var(--linea2);border-radius:var(--r1);padding:13px 14px;outline:none;transition:border-color .18s,box-shadow .18s;appearance:none;-webkit-appearance:none}
.campo textarea{resize:vertical;min-height:88px;line-height:1.55}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23877E73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta);box-shadow:0 0 0 3px color-mix(in srgb,var(--tinta) 10%,transparent);outline:none}
.campo input.err,.campo select.err,.campo textarea.err{border-color:var(--rojo-tx);box-shadow:0 0 0 3px rgba(202,0,0,.14)}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consiento{display:flex;gap:11px;align-items:flex-start;margin:20px 0;font-size:13.5px;line-height:1.55;cursor:pointer;color:var(--texto)}
.consiento input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--red)}
.consiento a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.formulario .btn{width:100%;margin-top:14px}
.cf-turnstile{margin-top:4px}
.aviso{margin-top:14px;font-size:14px;min-height:1.2em;text-align:center}
.aviso.bien{color:var(--ok)}
.aviso.mal{color:var(--rojo-tx)}
.aviso a{color:inherit;text-decoration:underline}
.rgpd{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea);font-size:12px;color:var(--tenue);line-height:1.6}
.rgpd b{color:var(--texto);font-weight:600}
.rgpd a{color:var(--texto);text-decoration:underline;text-underline-offset:2px}

/* ---------------- calculadoras antiguas (compatibilidad) ---------------- */
.calc{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;align-items:end;border-radius:var(--r2);padding:clamp(22px,3vw,30px);background:var(--sup)}
.cc label{display:block;font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:7px}
.cc input,.cc select{width:100%;font-family:var(--sf);font-size:16px;font-variant-numeric:tabular-nums;color:var(--tinta);background:var(--ink);border:1px solid var(--linea2);border-radius:var(--r1);padding:12px 14px;outline:none;transition:border-color .18s;appearance:none;-webkit-appearance:none}
.resultado{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:22px;margin-top:6px}
.resultado .et{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)}
.resultado .gr{font-size:clamp(34px,5vw,48px);font-weight:600;color:var(--tinta);letter-spacing:-.04em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.resultado .nota{font-size:14px;color:var(--texto);margin-top:8px}
.letrapequena{font-size:12.5px;color:var(--tenue);margin-top:16px;line-height:1.6;max-width:70ch}
.rotulete{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin:24px 0 10px}

/* ---------------- textos legales y blog ---------------- */
.legaltx h2{font-size:20px;margin:36px 0 10px;letter-spacing:-.022em}
.legaltx p{font-size:15px;line-height:1.75;margin-bottom:10px}
.legaltx b{color:var(--tinta);font-weight:600}
.legaltx a{color:var(--tinta);text-decoration:underline;text-underline-offset:2px}
.entradas{display:grid;gap:14px}
.entrada{background:var(--ink);border-radius:var(--r2);padding:28px;transition:transform .35s var(--exp),box-shadow .35s var(--exp)}
section:not(.sup) .entrada{background:var(--sup)}
@media(hover:hover) and (pointer:fine){.entrada:hover{transform:translateY(-3px);box-shadow:var(--sombra)}}
.entrada .fechas{font-size:12.5px;color:var(--tenue);margin-bottom:10px}
.entrada h2{font-size:clamp(20px,2.1vw,24px);letter-spacing:-.024em;margin-bottom:10px}
.entrada h2 a{transition:color .18s}
.entrada h2 a:hover{color:var(--texto)}
.entrada p{font-size:15px;line-height:1.6}
.entrada .ver{margin-top:14px;font-size:14.5px}
.articulo .rotulo a{color:inherit}
.articulo .fechas{font-size:13.5px;color:var(--tenue);margin-top:16px;padding-bottom:22px;border-bottom:1px solid var(--linea)}
.cuerpo{margin-top:30px}
.cuerpo h2{font-size:clamp(22px,2.4vw,27px);margin:40px 0 12px}
.cuerpo h3{font-size:19px;margin:28px 0 10px}
.cuerpo p{font-size:16.5px;line-height:1.75;margin-bottom:16px;max-width:70ch}
.cuerpo ul{margin:0 0 18px 20px;display:grid;gap:9px}
.cuerpo li{font-size:16.5px;line-height:1.65;max-width:68ch}
.cuerpo b{color:var(--tinta);font-weight:600}
.cuerpo a{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:3px}
.cuerpo a:hover{text-decoration-color:var(--tinta)}
.cuerpo img{border-radius:var(--r2);margin:28px 0}
.listaenlaces{list-style:none;display:grid;gap:0;margin-top:20px;border-top:1px solid var(--linea)}
.listaenlaces a{font-size:16px;font-weight:500;color:var(--tinta);border-bottom:1px solid var(--linea);padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .18s}
.listaenlaces a::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--tenue);border-top:1.5px solid var(--tenue);transform:rotate(45deg);flex:0 0 auto}
.listaenlaces a:hover{color:var(--texto)}
.entrada.con-foto{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.entrada .mini{border-radius:14px;overflow:hidden;background:var(--sup2);aspect-ratio:16/9}
.entrada .mini img{width:100%;height:100%;object-fit:cover}
.articulo .portada{border-radius:var(--r2);margin-top:26px;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sup2);padding:0;min-height:0;display:block}
@media(max-width:640px){.entrada.con-foto{grid-template-columns:1fr;gap:16px}}

/* ---------------- entrada escalonada (.ap) ---------------- */
.js .ap{opacity:0;transform:translateY(16px)}
.js .ap.dentro{opacity:1;transform:none;transition:opacity .7s var(--exp),transform .7s var(--exp)}
.js .ap.r1{transition-delay:.08s}.js .ap.r2{transition-delay:.16s}.js .ap.r3{transition-delay:.24s}.js .ap.r4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.js .ap{opacity:1;transform:none;transition:none}}

/* ---------------- idioma, migas, cookies ---------------- */
nav.men .idi{font-size:10px;font-weight:600;letter-spacing:.08em;border:1px solid var(--linea2);border-radius:4px;padding:1px 4px;margin-left:5px;color:var(--tenue);vertical-align:2px}
.idi{font-size:.62em;letter-spacing:.08em;opacity:.7;margin-left:.35em;vertical-align:.15em}
.migas{max-width:var(--ancho);margin:0 auto;padding:16px 28px 0}
.migas ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--tenue)}
.migas li+li::before{content:"›";margin-right:8px;opacity:.6}
.migas a{color:inherit;transition:color .18s}
.migas a:hover{color:var(--tinta)}
.migas [aria-current]{color:var(--texto)}
@media(max-width:640px){.migas{padding:12px 20px 0;font-size:12px}}
#ckb{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:0 16px 16px;transform:translateY(120%);transition:transform .32s var(--exp)}
#ckb.ver{transform:none}
.ckb-in{max-width:min(720px,100%);margin:0 auto;background:var(--sup);border:1px solid var(--linea);border-radius:16px;padding:18px 20px;box-shadow:var(--sombra2);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ckb-in p{margin:0;flex:1 1 22rem;font-size:13.5px;line-height:1.55;color:var(--texto)}
.ckb-in b{color:var(--tinta)}
.ckb-in a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.ckb-bt{display:flex;gap:8px;flex:0 0 auto}
.ckb-bt button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:10px 18px;border-radius:999px;border:1px solid var(--linea2);background:transparent;color:var(--tinta);transition:background .15s,border-color .15s}
.ckb-bt button:hover{background:var(--sup2);border-color:var(--tenue)}
.ckb-bt button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media(max-width:560px){#ckb{padding:0 10px 10px}.ckb-in{padding:16px}.ckb-bt{width:100%}.ckb-bt button{flex:1}}
@media(prefers-reduced-motion:reduce){#ckb{transition:none}}

/* ---------------- ajustes finos del simulador ---------------- */
.finos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.finos label{display:grid;gap:6px;font-size:12.5px;font-weight:500;color:var(--tenue)}
.finos input{font-family:var(--sf);font-size:15px;font-variant-numeric:tabular-nums;color:var(--tinta);background:var(--ink);border:1px solid var(--linea2);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .18s;width:100%}
.finos input:focus{border-color:var(--tinta)}
@media(max-width:480px){.finos{grid-template-columns:1fr}}

/* Tabla de precios. No usa .comp a propósito: aquella lleva min-width:760px
   porque compara seis cargadores con foto, y esta son cuatro columnas cortas
   que caben en un móvil. Por debajo de 620 px se apila: cada cargador pasa a
   ser un bloque de dos líneas, que se lee mejor que arrastrar la tabla. */
.tprecio{width:100%;border-collapse:collapse;font-size:15px}
.tprecio th,.tprecio td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea)}
.tprecio thead th{background:var(--sup);color:var(--tinta);font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:uppercase}
.tprecio tbody th{font-weight:600;color:var(--tinta)}
.tprecio tbody th a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linea)}
.tprecio tbody th a:hover{text-decoration-color:currentColor}
.tprecio td.num{text-align:right;font-variant-numeric:tabular-nums}
.tprecio tbody tr:last-child th,.tprecio tbody tr:last-child td{border-bottom:0}
@media(max-width:620px){
  .tprecio thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tprecio,.tprecio tbody,.tprecio tr,.tprecio th,.tprecio td{display:block}
  .tprecio tbody tr{display:grid;grid-template-columns:1fr auto;align-items:baseline;
    column-gap:14px;padding:16px 0;border-bottom:1px solid var(--linea)}
  .tprecio th,.tprecio td{padding:0;border:0}
  .tprecio tbody th{font-size:17px;grid-column:1}
  .tprecio td:nth-of-type(1){grid-column:1;color:var(--tenue);font-size:13.5px;margin-top:3px}
  .tprecio td.num:nth-of-type(2){grid-column:2;grid-row:1;font-size:18px;font-weight:700;color:var(--tinta)}
  .tprecio td.num:nth-of-type(3){grid-column:2;grid-row:2;color:var(--tenue);font-size:13.5px;text-align:right;margin-top:3px}
}

/* Comparativa: la columna de etiquetas fijada. En un móvil solo cabe el 41 %
   de la tabla, así que al arrastrar se perdía de vista qué fila se estaba
   mirando y comparar era imposible. Ahora «Modelo», «Desde», «Potencia»… se
   quedan pegadas a la izquierda mientras pasan los cargadores. (comparativa fijada) */
.tabla-env{position:relative;scroll-behavior:smooth}
table.comp thead th:first-child,
table.comp tbody th{position:sticky;left:0;z-index:2;background:var(--ink)}
table.comp thead th:first-child{z-index:3;background:var(--sup)}
table.comp tbody th::after,
table.comp thead th:first-child::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--linea)}
@media(max-width:820px){
  table.comp{min-width:640px}
  table.comp th,table.comp td{padding:13px 14px}
  table.comp tbody th{max-width:104px;white-space:normal}
  .tabla-env::after{content:"Desliza para comparar";position:sticky;left:0;display:block;
    padding:10px 14px;font-size:12.5px;color:var(--tenue);border-top:1px solid var(--linea);width:max-content}
}

/* En escritorio la escena dejaba las cifras (+2.500 instalaciones, la nota de
   Google…) a 1.714 px con la ventana en 900: casi dos pantallas. Se recorta el
   aire de encima y se le pone techo a la foto, que medía 653 px de alto. La
   foto sigue sin asomar al cargar, que era la otra condición.
   (escena mas compacta) */
@media(min-width:821px){
  .escena{--hueco:52px}
  .escena .tarjeta-video{max-width:1000px}
}

.datos a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linea)}
.datos a:hover{text-decoration-color:currentColor}

.hero2 .datos{margin-top:clamp(32px,4vw,52px)}

.cifra.nota{display:inline-flex;align-items:center;gap:.18em;justify-content:center}
.estrellita{width:.46em;height:.46em;color:var(--arena);flex:0 0 auto;translate:0 -.02em}

/* El rayo de marca cierra la línea que baja del titular hacia la foto. Se
   rellena conforme bajas, atado a la misma --p que la línea, y se queda: no
   es un bucle. Sobre negro y con el rojo de marca, que es el único sitio
   donde ese rojo pinta algo. */
.escena .rayo-esc{position:absolute;left:50%;translate:-50% 0;top:calc(var(--hueco) - 30px);
  width:20px;height:20px;z-index:3;pointer-events:none;
  opacity:calc(var(--p,0) * var(--p,0));scale:calc(.72 + .28 * var(--p,0))}
.escena .rayo-esc path{fill:var(--red)}
@media(prefers-reduced-motion:reduce){
  .escena .rayo-esc{opacity:1;scale:1}
}
.nota .estrellita.gr{width:clamp(20px,2.6vw,31px);height:clamp(20px,2.6vw,31px);align-self:center;margin-right:.12em;translate:0 -9px;color:var(--arena)}

/* ---------------- tercera vuelta (06-09-2026) ---------------- */
.escena .rayo-esc{display:none}
.escena .linea::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--red);transform:translateX(-50%);opacity:calc(var(--p,0) * var(--p,0));box-shadow:0 0 0 4px rgba(202,0,0,.16)}
.carrusel.apaisado figure{width:min(84vw,420px)}
/* ingenieros: foto del montaje + argumentos de la propuesta */
.ingenieros{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.ingenieros .lado .cuadro{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;background:var(--sup2)}
.ingenieros .lado img{width:100%;height:100%;object-fit:cover}
.ingenieros .lado .cuadro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.ingenieros .lado .pie-foto{position:absolute;left:20px;bottom:18px;right:20px;color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;z-index:2;opacity:.9}
.ingenieros .lado .pie-foto b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;text-transform:none;margin-top:3px}
.razones{list-style:none;margin-top:26px;border-top:1px solid var(--linea)}
.razones li{padding:16px 0;border-bottom:1px solid var(--linea)}
.razones h3{font-size:17px;margin-bottom:4px}
.razones p{font-size:14.5px;color:var(--texto);max-width:58ch}
@media(max-width:900px){.ingenieros{grid-template-columns:1fr}.ingenieros .lado .cuadro{aspect-ratio:4/3}}
/* formulario largo (el embudo de la landing en una pantalla) */
.ficha.contacto{align-items:start}
.bloque-f{border:0;padding:0;margin:0 0 22px}
.bloque-f legend{font-size:15px;font-weight:600;color:var(--tinta);margin-bottom:12px;letter-spacing:-.012em}
.bloque-f legend .opc,.et-f .opc{font-weight:400;color:var(--tenue);font-size:13px}
.et-f{font-size:13px;font-weight:600;color:var(--texto);margin:12px 0 8px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.dos-col{grid-template-columns:1fr}}
.chips-f{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;font-size:14px;font-weight:500;color:var(--texto);background:var(--ink);border:1px solid var(--linea2);border-radius:999px;padding:10px 15px;transition:border-color .18s,background-color .18s,color .18s,transform .16s var(--exp)}
.chip:hover span{border-color:var(--tenue);color:var(--tinta)}
.chip input:checked+span{border-color:var(--tinta);background:var(--tinta);color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--tinta);outline-offset:2px}
.cond[hidden]{display:none}
.consiento.interruptor{background:var(--ink);border:1px solid var(--linea);border-radius:var(--r1);padding:12px 14px}
.consiento.interruptor b{color:var(--tinta)}
.consejo{font-size:15px;border-left:2px solid var(--red);padding-left:14px}
/* garaje isométrico en tres momentos (mismo dibujo que la propuesta comunitaria) */
.garaje-env{margin-top:clamp(28px,4vw,44px);--band:#8E1111;--gold:#D2C1A6;--line:var(--linea);--quick:var(--texto);--dim:var(--tenue);--body:var(--sf)}
.gz{border:1px solid var(--linea);background:linear-gradient(168deg,var(--sup2) 0%,var(--ink) 68%);border-radius:var(--r2);overflow:hidden}
.gz__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.gz__seg{display:inline-flex;border:1px solid var(--linea2);border-radius:999px;padding:3px;background:rgba(255,255,255,.04);position:relative}
.gz__seg button{font-family:var(--sf);font-size:13px;font-weight:500;color:var(--texto);background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;transition:.18s;white-space:nowrap}
.gz__seg button:hover{color:var(--tinta)}
.gz__seg button.on{background:var(--tinta);color:var(--ink);font-weight:600}
.gz__seg button b{font-weight:inherit;color:inherit}
.gz__seg button i{display:none;font-style:normal}
.gz__step{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue);font-weight:600;display:flex;align-items:center;gap:10px}
.gz__auto{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;animation:pulso 2s ease-in-out infinite}
.gz.stop .gz__auto{display:none}
.gz__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 4px}
.gz svg{width:100%;height:auto;display:block}
.gz__cap{padding:6px 24px 20px;display:grid;gap:6px;min-height:96px}
.gz__cap h4{font-size:16px;font-weight:600;color:var(--tinta)}
.gz__cap p{font-size:14px;color:var(--texto);max-width:78ch;line-height:1.6}
.gz__leg{display:flex;flex-wrap:wrap;gap:11px 26px;padding:15px 24px 20px;border-top:1px solid var(--linea)}
.gz__hint{display:none;font-size:11.5px;color:var(--tenue);padding:0 24px 14px}
.leg{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--texto)}
.leg i{width:15px;height:3px;border-radius:2px;display:block;flex:none}
.leg i.dot{width:9px;height:9px;border-radius:50%}
.gz .ly--pre,.gz .ly--ind{transition:opacity .6s ease,transform .6s ease}
.gz .ly--ind{transform:translateY(9px)}
.gz .ly--p0{transition:opacity .42s ease}
.gz .lb{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.gz[data-e="1"] .ly--pre,.gz[data-e="1"] .ly--ind,.gz[data-e="2"] .ly--ind{opacity:0}
.gz[data-e="2"] .ly--pre,.gz[data-e="3"] .ly--pre,.gz[data-e="3"] .ly--ind{opacity:1}
.gz[data-e="3"] .ly--ind{transform:translateY(0)}
.gz[data-e="1"] .lb--1,.gz[data-e="2"] .lb--2,.gz[data-e="3"] .lb--3{opacity:1;transform:translateY(0)}
.gz .tz{stroke-dasharray:var(--dl);stroke-dashoffset:var(--dl);transition:stroke-dashoffset 1.5s cubic-bezier(.35,0,.15,1)}
.gz[data-e="2"] .tz,.gz[data-e="3"] .tz{stroke-dashoffset:0}
.gz .tzB,.gz .tz0{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.02);transition:transform .9s cubic-bezier(.28,0,.1,1)}
.gz[data-e="2"] .tzB,.gz[data-e="3"] .tzB,.gz[data-e="2"] .tz0,.gz[data-e="3"] .tz0{transform:scaleX(1)}
.gz[data-e="3"] .ly--p0{opacity:.42}
.gz .fl{stroke-dasharray:9 13}
.gz[data-e="3"] .fl{animation:flujo 1s linear infinite}
.gz .pulseLed{animation:led 1.8s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes flujo{to{stroke-dashoffset:-22}}
@keyframes led{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:760px){.gz__scroll{padding:12px 12px 2px}.gz svg{min-width:770px}.gz__hint{display:block}.gz__bar{padding:13px 16px;gap:10px}.gz__seg{width:100%}.gz__seg button{flex:1;padding:9px 4px;font-size:11px}.gz__seg button b{display:none}.gz__seg button i{display:inline}.gz__step{font-size:10px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){.gz .ly--pre,.gz .ly--ind,.gz .lb,.gz .tz,.gz .tzB,.gz .tz0{transition:none}.gz .fl,.gz .pulseLed,.gz__auto{animation:none}}
/* pie SEO: municipios y búsquedas largas, plegado */
.seo-pie{margin-top:44px;border-top:1px solid var(--linea);padding-top:18px}
.seo-pie summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}
.seo-pie summary::-webkit-details-marker{display:none}
.seo-pie summary h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);font-weight:600;margin:0}
.seo-pie summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(45deg);flex:0 0 auto;transition:transform .3s var(--exp);margin-right:6px}
.seo-pie details[open] summary::after{transform:rotate(-135deg)}
.seo-cols{display:grid;grid-template-columns:2fr 1fr;gap:24px 40px;margin-top:18px}
.seo-cols ul{list-style:none;columns:2;column-gap:28px}
.seo-cols ul+ul{columns:1}
.seo-cols li{font-size:13px;line-height:1.5;padding:3px 0;break-inside:avoid}
.seo-cols a{color:var(--tenue);transition:color .18s}
.seo-cols a:hover{color:var(--tinta)}
.listaenlaces.columnas{columns:2;column-gap:32px}
.listaenlaces.columnas li{break-inside:avoid}
@media(max-width:820px){.seo-cols{grid-template-columns:1fr}.seo-cols ul{columns:1}.listaenlaces.columnas{columns:1}}

/* ---------------- cuarta vuelta (06-09, noche): hero simétrico y formulario por pasos ---------------- */
.hero2 .env{text-align:center}
.hero2 .kicker{color:var(--tenue)}
.hero2 .datos{max-width:960px;padding-left:0;padding-right:0;gap:clamp(16px,2.5vw,32px)}
.hero2 .dato .cifra{font-size:clamp(28px,3vw,38px)}
.hero2 .dato .txt{max-width:18ch;margin-left:auto;margin-right:auto}
.hero2 .dato .txt a{color:inherit;text-decoration:none}
.pasos-f{position:relative}
.paso{border:0;padding:0;margin:0;min-width:0}
.paso-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:28px}
.paso-n{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-left:auto}
.volver{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.5px;font-weight:500;color:var(--texto);background:none;border:0;cursor:pointer;padding:4px 0}
.volver svg{width:14px;height:14px;transform:rotate(180deg)}
.volver:hover{color:var(--tinta)}
.paso-t{font-size:clamp(20px,2.2vw,26px);margin-bottom:14px;letter-spacing:-.024em}
.paso-sub{font-size:14.5px;color:var(--texto);margin:-6px 0 18px;line-height:1.55}
.paso-nota{font-size:12.5px;color:var(--tenue);margin-top:12px;text-align:center}
.paso .btn.gr{width:100%;margin-top:18px}
.chips-f.grandes{display:grid;gap:10px}
.chips-f.grandes .chip span{display:block;width:100%;padding:16px 18px;border-radius:14px;font-size:15.5px}
.afinar-f{margin-top:18px;border-top:1px solid var(--linea);padding-top:14px}
.afinar-f summary{font-size:14px;font-weight:500;color:var(--texto);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.afinar-f summary::-webkit-details-marker{display:none}
.afinar-f summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(45deg);margin-top:-3px;transition:transform .25s var(--exp)}
.afinar-f[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.afinar-f summary:hover{color:var(--tinta)}
.js .paso.entra{animation:pasoEntra .35s var(--exp)}
.js .paso.entra-atras{animation:pasoAtras .35s var(--exp)}
@keyframes pasoEntra{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes pasoAtras{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.listo{text-align:center;padding:12px 0}
.listo>svg{width:44px;height:44px;color:var(--ok);margin:0 auto 12px}
.listo p{font-size:15px;color:var(--texto);max-width:44ch;margin:0 auto}
.listo p a{color:var(--tinta);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.js .paso.entra,.js .paso.entra-atras{animation:none}}

/* ---------------- botones flotantes (08-09-2026, Arman) ----------------
   Dos, y con papeles distintos: «volver arriba» en todas las pantallas, porque las
   páginas de municipio y la de cargadores son largas; y el atajo al presupuesto SOLO
   en móvil, porque por debajo de 820px la cabecera esconde el botón y se queda sin
   llamada a la acción. Salen pasada una pantalla y pico: en el primer pliegue ya hay
   dos botones y taparlos con un tercero sería ruido. Si el aviso de cookies está en
   pantalla se apartan, que si no se pisan. */
.flotantes{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;visibility:hidden;translate:0 10px;pointer-events:none;
  transition:opacity .22s var(--exp),translate .22s var(--exp),visibility 0s linear .22s}
body.lejos .flotantes{opacity:1;visibility:visible;translate:0;pointer-events:auto;transition-delay:0s}
html.ckb-on .flotantes{opacity:0!important;visibility:hidden!important;pointer-events:none}
.flot-arriba{width:44px;height:44px;border-radius:999px;border:1px solid var(--linea2);cursor:pointer;
  background:color-mix(in srgb,var(--ink) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .18s,border-color .18s,transform .16s var(--exp)}
.flot-arriba svg{width:16px;height:16px;rotate:-90deg}   /* la flecha del sitio apunta a la derecha */
.flot-arriba:hover{background:var(--sup2);border-color:var(--tenue)}
.flot-arriba:active{transform:scale(.94);transition:transform .04s linear}
.flot-cta{display:none}
@media(max-width:820px){
  .flot-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sf);font-weight:600;font-size:15px;
    line-height:1;padding:13px 20px;border-radius:999px;background:var(--red);color:#fff;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.75)}
  .flot-cta svg{width:15px;height:15px}
  .flot-cta:active{transform:scale(.97);transition:transform .04s linear}
}
@media(prefers-reduced-motion:reduce){
  .flotantes{translate:none;transition:opacity .15s linear,visibility 0s}
  body.lejos .flotantes{translate:none}
}

/* ---------------- impresión (08-09-2026, Arman) ----------------
   La web es negra: imprimirla tal cual se lleva medio cartucho y encima no se lee.
   Se pasa a negro sobre blanco, se quita todo lo que en papel no sirve (cabecera,
   menús, cintas, la escena del hero, los propios botones flotantes) y se escribe la
   dirección al lado de cada enlace del texto, porque en papel un enlace no se pulsa.
   El caso de uso real es alguien que imprime /precio/ o /ayudas/ para comparar. */
.pie-impresion{display:none}
@media print{
  @page{margin:1.5cm}
  html,body{background:#fff!important;color:#000!important}
  *,*::before,*::after{background:transparent!important;color:#000!important;
    box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  header.top,#ckb,.flotantes,.cinta,.marquesina,.marcas,.escena,.tarjeta-video,.ctrl,.puntos,
  .migas,.pie,.pie-seo,.legal nav,a.oculto,video,.clip,.vertical,.show,.carrusel{display:none!important}
  main{padding-top:0!important}
  section{padding:0 0 .6cm!important}
  a{text-decoration:underline}
  .cuerpo a[href^="/"]::after,.entradilla a[href^="/"]::after{content:" (solventium.es" attr(href) ")";font-size:9pt}
  .cuerpo a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  a[href^="#"]::after,a[href^="tel:"]::after,a[href^="mailto:"]::after{content:""!important}
  h1{font-size:22pt} h2{font-size:15pt} h3{font-size:12pt}
  h1,h2,h3{page-break-after:avoid}
  p,li{font-size:11pt;line-height:1.45}
  img{max-width:100%!important;page-break-inside:avoid}
  table,tr,li,.incluye div,.entrada,.opinion,.resena{page-break-inside:avoid}
  .tabla-env{overflow:visible!important}
  table.comp,.tprecio{min-width:0!important;width:100%!important;font-size:9.5pt}
  table,th,td{border-color:#999!important}
  .pie-impresion{display:block!important;margin-top:1cm;padding-top:.4cm;
    border-top:1px solid #999;font-size:9pt;text-align:center}
}

/* ── Sugerencias de dirección de Google (11-09-2026) ───────────────────────────
   La lista cuelga del <body> con posición fija: dentro del formulario la recorta
   cualquier contenedor con overflow, que es exactamente lo que llevaba pasando en
   el CRM sin que nadie lo viera. Los colores salen de los tokens del sitio, así
   que funciona igual en claro y en oscuro. */
.sv-sug{position:fixed;z-index:9999;max-height:250px;overflow:auto;border-radius:12px;
  background:var(--sup2);border:1px solid var(--linea2);box-shadow:var(--sombra2);display:none}
.sv-sug.on{display:block}
.sv-op{display:block;width:100%;text-align:left;padding:10px 13px;border:0;background:none;
  font:inherit;color:var(--tinta);cursor:pointer;line-height:1.35}
.sv-op b{display:block;font-size:15px;font-weight:600}
.sv-op span{display:block;font-size:12.5px;color:var(--tenue);margin-top:1px}
.sv-op:hover,.sv-op.on{background:var(--sup3)}
.sv-ok{font-size:12.5px;color:var(--ok);margin-top:5px;display:none}
.sv-ok.on{display:block}