:root{
  --placa:#0B5D3B; --placa-fuerte:#084A2F; --placa-claro:#E6F0EA;
  --cobre:#C9822F; --cobre-claro:#F7EEE2;
  --cobre-txt:#96570F;        /* cobre legible en texto pequeno sobre claro */
  --cobre-sv:#E9A24B;         /* cobre sobre fondo verde oscuro */
  --tinta:#14201C; --tinta-suave:#4C5B55;
  --carcasa:#E7EAE5; --papel:#FAFBF8; --superficie:#FFFFFF;
  --linea:#CBD3CD; --linea-fina:#E1E6E0;
  --sombra:0 1px 2px rgba(20,32,28,.05), 0 12px 30px -18px rgba(20,32,28,.26);
  --radio:16px; --max:1140px;
  --sobre-verde:#FFFFFF;
  --radio-chico:12px;
  --radio-grande:24px;
  --vidrio:rgba(255,255,255,.68);
  --vidrio-borde:rgba(255,255,255,.75);
  --tarjeta:rgba(255,255,255,.72);
  --sombra-media:0 2px 6px rgba(20,32,28,.05), 0 20px 44px -22px rgba(20,32,28,.3);
}

/* Un solo sitio para la trampa que nos ha mordido cuatro veces: el atributo
   hidden trae un display:none de baja prioridad y cualquier display:flex o
   display:grid se lo come. Con esta línea deja de hacer falta acordarse.
   Viene del CSS de Interno, donde estaba desde el principio. */
[hidden]{display:none !important}


:root[data-theme="dark"]{
  --placa:#3FBE85; --placa-fuerte:#0E2A20; --placa-claro:#16261F;
  --cobre:#E0A155; --cobre-claro:#241C12;
  --cobre-txt:#E0A155;
  --cobre-sv:#E9A24B;
  --tinta:#E9EFEA; --tinta-suave:#93A49C;
  --carcasa:#1B2420; --papel:#0F1512; --superficie:#161E1A;
  --linea:#2C3A34; --linea-fina:#222D28;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  --sobre-verde:#E9EFEA;
  --vidrio:rgba(28,38,33,.62);
  --vidrio-borde:rgba(255,255,255,.10);
  --tarjeta:rgba(30,40,35,.62);
  --sombra-media:0 2px 8px rgba(0,0,0,.45), 0 20px 44px -22px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--papel); color:var(--tinta);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.09; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--placa)}
img,svg{max-width:100%}
.env{max-width:var(--max); margin:0 auto; padding:0 24px}
.cod{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--placa)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--cobre); outline-offset:3px; border-radius:2px}
.saltar{position:absolute; left:-9999px}
.saltar:focus{left:24px; top:10px; z-index:99; background:var(--placa); color:var(--sobre-verde); padding:10px 16px; border-radius:4px}

/* barra */
/* padding-top con env(): en el iPhone la barra quedaria bajo el reloj. */
.barra{position:sticky; top:0; z-index:50; padding-top:env(safe-area-inset-top); background:color-mix(in srgb, var(--papel) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea-fina)}
.barra .env{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--tinta)}
.marca svg{width:31px; height:31px; flex:none}
.marca .txt{display:grid; line-height:1.05}
.marca .n{font-family:Archivo,sans-serif; font-weight:800; font-size:17.5px; letter-spacing:-.02em}
.marca .s{white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--placa)}
/* Sin `nowrap` los enlaces se partian en dos lineas («Hogar y / autonomos») y
   la barra quedaba desordenada. Y antes de que eso pase, se aprieta el hueco
   entre ellos en vez de romperse. */
.nav{display:flex; align-items:center; gap:22px; flex-wrap:nowrap}
.nav a{white-space:nowrap}
@media(max-width:1180px){.nav{gap:16px} .nav a:not(.btn){font-size:14.5px}}

.nav a:not(.btn){font-size:15px; text-decoration:none; color:var(--tinta-suave); font-weight:500}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current]{color:var(--placa)}
/* Medido: los seis enlaces mas el logo y el selector piden unos 1100 px.
   Por debajo se esconden y manda el boton de menu, en vez de apretarse
   hasta partirse en dos lineas. */
@media(max-width:1080px){.nav .oculta{display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--placa); color:var(--sobre-verde); text-decoration:none; font-weight:600; font-size:15.5px; padding:12px 20px; border-radius:var(--radio); border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease; white-space:nowrap; cursor:pointer}
/* En móviles de 320 px un botón largo («¿Montas un negocio? Plan Arranque»)
   no cabía en una línea y la página se movía de lado: ahí se deja partir. */
@media(max-width:400px){.btn{white-space:normal; text-align:center}}
a[href^="mailto:"]{overflow-wrap:anywhere}
:root[data-theme="dark"] .btn:not(.fantasma){color:#06140D}

.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(11,93,59,.55)}
.btn.fantasma{background:transparent; color:var(--placa); border-color:var(--linea)}
.btn.grande{font-size:17px; padding:15px 26px}
.btn svg{width:18px; height:18px; fill:currentColor; flex:none}

/* portada */
.portada{padding:70px 0 0}
.portada h1{font-size:clamp(34px,5.8vw,62px); max-width:17ch}
.portada .lead{font-size:clamp(17px,2vw,20.5px); color:var(--tinta-suave); margin-top:22px; max-width:60ch}
@media(max-width:900px){.portada{padding-top:46px}}

/* puertas */
.puertas{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
@media(max-width:840px){.puertas{grid-template-columns:1fr}}
.puerta{display:grid; gap:14px; align-content:start; text-decoration:none; color:inherit; background:var(--superficie); border:1px solid var(--linea); border-top:4px solid var(--placa); border-radius:var(--radio); padding:30px; box-shadow:var(--sombra); transition:transform .15s ease, border-color .15s ease}
.puerta:hover{transform:translateY(-3px); border-color:var(--placa)}
.puerta.b{border-top-color:var(--cobre)}
.puerta .et{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-suave)}
.puerta h2{font-size:clamp(22px,2.8vw,29px)}
.puerta p{color:var(--tinta-suave); font-size:16px}
.puerta ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px; color:var(--tinta-suave)}
.puerta li{padding-left:20px; position:relative}
.puerta li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; border:2.5px solid var(--placa)}
.puerta.b li::before{border-color:var(--cobre)}
.puerta .ir{font-weight:600; color:var(--placa); font-size:15.5px; margin-top:4px}

/* franja */
.franja{background:var(--carcasa); border-top:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina); margin-top:64px}
.franja .env{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:0; padding-bottom:0}
@media(max-width:820px){.franja .env{grid-template-columns:repeat(2,1fr)}}
.dato{padding:26px 0}
.dato .n{font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(20px,2.8vw,27px); letter-spacing:-.02em; color:var(--placa)}
.dato .d{font-size:14px; color:var(--tinta-suave); margin-top:4px; line-height:1.45}

section{padding:78px 0}
.enc{max-width:62ch; margin-bottom:40px}
.enc h2{font-size:clamp(26px,3.6vw,40px); margin-top:14px}
.enc p{color:var(--tinta-suave); margin-top:14px; font-size:17.5px}
.gris{background:var(--carcasa); border-top:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina)}

/* tarjetas genéricas */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:16px}
.tarj{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:24px; display:flex; flex-direction:column; gap:11px; transition:border-color .15s ease, transform .15s ease}
.tarj:hover{border-color:var(--placa); transform:translateY(-2px)}
.tarj h3{font-size:19.5px}
.tarj .cliente{font-size:14.5px; color:var(--tinta-suave); font-style:italic}
.tarj p{font-size:15.5px; color:var(--tinta-suave); line-height:1.55}
.tarj .precio{margin-top:auto; padding-top:14px; border-top:1px solid var(--linea-fina); font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; color:var(--placa); font-variant-numeric:tabular-nums}

/* planes */
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.planes{grid-template-columns:1fr}}
.plan{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:26px; display:flex; flex-direction:column; gap:14px}
/* El plan recomendado se marca en COBRE, no en verde. Desde que el verde
   quiere decir «lo tienes debajo del raton» o «es el que te ha salido en la
   calculadora», dejarlo tambien como marca fija del recomendado hacia que
   pareciera elegido siempre, y confundia. Dos significados, dos colores.
   Mismo truco que en el hover: anillo por dentro y borde de 1px, para que
   las tres tarjetas midan exactamente lo mismo. */
.plan.destaca{border-color:var(--cobre); box-shadow:inset 0 0 0 1px var(--cobre), var(--sombra)}
.plan.destaca .et{color:var(--cobre-txt)}
.plan .et{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-suave)}
.plan h3{font-size:24px}
.plan .quien{font-size:14.5px; color:var(--tinta-suave)}
.plan .cuota-pedir{font-family:inherit; font-size:17px}
.plan .cuota-pedir a{color:var(--placa); text-decoration:none; display:inline-block; padding:10px 0}
.plan .cuota-pedir a:hover{text-decoration:underline}
.plan .cuota{font-family:"IBM Plex Mono",monospace; font-size:23px; font-weight:600; color:var(--placa); font-variant-numeric:tabular-nums; padding:12px 0; border-top:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina)}
.plan .cuota small{display:block; font-size:12px; font-weight:400; color:var(--tinta-suave); letter-spacing:.05em; margin-top:3px}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px}
.plan li{padding-left:22px; position:relative; line-height:1.45}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--placa); font-weight:700}
.plan .pie{margin-top:auto; padding-top:8px}

/* Al pasar el raton, cualquier plan se contornea como el destacado. Se hace con
   box-shadow y NO engordando el borde: pasar de 1px a 2px mueve la tarjeta dos
   pixeles y da un salto cada vez que entra y sale el raton.
   `hover:hover` deja fuera al movil: alli no hay raton y el hover se queda
   pegado despues de tocar, con lo que la tarjeta se quedaria marcada sola. */
@media(hover:hover){
  .plan{transition:border-color .15s ease, box-shadow .15s ease}
  .plan:hover{border-color:var(--placa); box-shadow:inset 0 0 0 1px var(--placa), var(--sombra)}
}
@media(prefers-reduced-motion:reduce){.plan{transition:none}}

/* El plan que ha salido en la calculadora. Es el mismo contorno que el del
   raton, pero se queda puesto, que es lo unico que sirve en un movil. */
.plan.elegido{border-color:var(--placa); box-shadow:inset 0 0 0 1px var(--placa), var(--sombra)}

/* El verde manda sobre el cobre: si la tarjeta recomendada es ademas la que te
   ha salido en la calculadora, o la tienes debajo del raton, se ve verde. Se
   escriben los dos selectores a proposito en vez de confiar en que este mas
   abajo en el archivo: quien mueva estas reglas de sitio no rompe nada. */
.plan.destaca.elegido{border-color:var(--placa); box-shadow:inset 0 0 0 1px var(--placa), var(--sombra)}
@media(hover:hover){
  .plan.destaca:hover{border-color:var(--placa); box-shadow:inset 0 0 0 1px var(--placa), var(--sombra)}
}

/* La barra de arriba es sticky: sin esto, al saltar a un plan se queda medio
   tapado por ella. */
.plan{scroll-margin-top:100px}

/* --- pastillas de estado ---
   El mismo semaforo que usa el inventario en los informes: bien, hay que
   vigilar, hay que arreglarlo. Estaba SOLO en el CSS del inventario, asi que
   la primera version de la pagina «en abierto» salia con las palabras sueltas
   y sin color, que era como no decir nada. */
.pastilla{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:100px;
  background:var(--carcasa); color:var(--tinta-suave); font-weight:600; white-space:nowrap}
.pastilla.ok{background:var(--placa-claro); color:var(--placa)}
.pastilla.aviso{background:var(--cobre-claro); color:var(--cobre-txt)}


/* La tarjeta de plan entera se puede pulsar, no solo su boton.

   Se probo con el truco de estirar el enlace del pie con un ::after que cubre
   la tarjeta y NO funcionaba con un raton de verdad, aunque en las pruebas
   automaticas pareciera que si. Ademas ese ::after tapa el texto y no deja
   seleccionarlo. Ahora el clic lo reparte realce.js, que busca el enlace de la
   tarjeta y lo pulsa; el enlace sigue existiendo, o sea que el tabulador y el
   teclado siguen funcionando igual. */
.plan{position:relative; cursor:pointer}

/* La chapa del plan recomendado. La pone realce.js con el texto en los tres
   idiomas; aqui solo esta el aspecto. */
.plan .chapa{position:absolute; top:0; left:26px; transform:translateY(-50%);
  background:var(--cobre); color:var(--tinta); font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; white-space:nowrap; z-index:2}
:root[data-theme="dark"] .plan .chapa{color:#1B2420}




/* pasos */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:var(--superficie)}
@media(max-width:900px){.pasos{grid-template-columns:1fr}}
.paso{padding:26px 24px; border-right:1px solid var(--linea-fina); display:grid; gap:9px; align-content:start}
.paso:last-child{border-right:none}
@media(max-width:900px){.paso{border-right:none; border-bottom:1px solid var(--linea-fina)} .paso:last-child{border-bottom:none}}
.paso .n{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--cobre-txt)}
.paso h3{font-size:18px}
.paso p{font-size:15px; color:var(--tinta-suave); line-height:1.55}

/* bloque verde */
.verde{background:var(--placa-fuerte); color:var(--sobre-verde); border-radius:8px; padding:clamp(28px,5vw,54px); display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center}
:root[data-theme="dark"] .verde{border:1px solid var(--linea)}

@media(max-width:820px){.verde{grid-template-columns:1fr; gap:26px}}
.verde h2{font-size:clamp(24px,3.4vw,36px)}
.verde p{margin-top:16px; opacity:.88; font-size:17px; max-width:52ch}
.verde .cod{color:var(--cobre-sv)}
/* En claro el verde es más luminoso y --cobre-sv se queda en 3,7:1 con letra
   de 11,5 px. Este cobre más claro da 5:1 (25/09/2026, GUIA-WEBS.md). */
:root:not([data-theme="dark"]) .verde .cod{color:#F6C48A}
.check{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.check li{display:flex; gap:12px; font-size:16px; line-height:1.45}
.check .t{color:var(--cobre-sv); font-weight:700; flex:none}

/* tabla */
.tablabox{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie)}
table{border-collapse:collapse; width:100%; min-width:560px}
th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--linea-fina); font-size:15px; vertical-align:top}
th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); background:var(--carcasa); white-space:nowrap}
tr:last-child td{border-bottom:none}
td.n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; color:var(--placa)}

/* faq */
.faq{border-top:1px solid var(--linea)}
details{border-bottom:1px solid var(--linea)}
summary{cursor:pointer; padding:20px 44px 20px 0; font-weight:600; font-size:17.5px; list-style:none; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:8px; top:16px; font-family:"IBM Plex Mono",monospace; font-size:25px; font-weight:400; color:var(--placa); transition:transform .18s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 40px 22px 0; color:var(--tinta-suave); font-size:16.5px; max-width:72ch}

/* socios */
.socios{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:760px){.socios{grid-template-columns:1fr}}
.socio{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:26px; display:grid; gap:10px; align-content:start}
.socio .rol{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--cobre-txt)}
.socio h3{font-size:21px}
.socio p{font-size:15.5px; color:var(--tinta-suave)}

/* contacto */
.vias{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:32px}
.via{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:22px; display:grid; gap:7px; text-decoration:none; color:var(--tinta); transition:border-color .15s ease}
.via:hover{border-color:var(--placa)}
.via .et{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave)}
.via .v{font-weight:600; font-size:17px}
.via .n{font-size:14px; color:var(--tinta-suave)}

.nota{border-left:3px solid var(--cobre); padding:2px 0 2px 16px; color:var(--tinta-suave); font-size:15px; line-height:1.6; max-width:70ch}

/* pie */
footer{background:var(--tinta); color:var(--papel); padding:52px 0 34px}
:root[data-theme="dark"] footer{background:var(--superficie); color:var(--tinta); border-top:1px solid var(--linea)}

footer .rejilla-pie{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
@media(max-width:820px){footer .rejilla-pie{grid-template-columns:1fr 1fr; gap:26px}}
@media(max-width:520px){footer .rejilla-pie{grid-template-columns:1fr}}
footer h2{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px; opacity:.6; font-weight:500}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
footer a{color:inherit; text-decoration:none; opacity:.85; font-size:15px}
footer a:hover{opacity:1; text-decoration:underline}
/* Redes: enlace con icono, nunca el widget incrustado (mete cookies de terceros). */
footer .redes{display:flex; gap:10px; margin-top:18px}
footer .redes a{width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.22)}
footer .redes a:hover{text-decoration:none; border-color:currentColor}
footer .redes svg{width:19px; height:19px}
footer .redes .trazo{fill:none; stroke:currentColor; stroke-width:1.8}
footer .redes .trazo .punto{fill:currentColor; stroke:none}
footer .redes .relleno{fill:currentColor}
footer .legal{margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; opacity:.6; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between}
:root[data-theme="dark"] footer .legal{border-top-color:var(--linea)}

.flota{position:fixed; right:18px; bottom:18px; z-index:60; box-shadow:0 8px 26px -8px rgba(11,93,59,.7)}
@media(min-width:900px){.flota{display:none}}

/* ---------- configurador ---------- */
.conf{display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start}
@media(max-width:980px){.conf{grid-template-columns:1fr}}
fieldset{border:0; margin:0 0 34px; padding:0}
legend{padding:0; margin-bottom:6px}
.paso-t{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.paso-t .n{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--cobre-txt); font-weight:600}
.paso-t h2{font-size:clamp(21px,2.6vw,27px)}
.paso-ay{color:var(--tinta-suave); font-size:15.5px; margin:8px 0 18px; max-width:60ch}

.ops{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.op{position:relative}
.op input{position:absolute; opacity:0; width:1px; height:1px}
.op label{display:grid; gap:6px; cursor:pointer; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px; transition:border-color .12s ease, background .12s ease; height:100%}
.op label:hover{border-color:var(--placa)}
.op input:checked + label{border-color:var(--placa); border-width:2px; padding:15px 17px; background:var(--placa-claro)}
.op input:focus-visible + label{outline:3px solid var(--cobre); outline-offset:2px}
.op .t{font-weight:600; font-size:16.5px}
.op .d{font-size:14px; color:var(--tinta-suave); line-height:1.45}
.op .p{font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:600; color:var(--placa); font-variant-numeric:tabular-nums}

.niveles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.nv label{display:grid; gap:8px; cursor:pointer; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:18px; height:100%}
.nv input{position:absolute; opacity:0; width:1px; height:1px}
.nv input:checked + label{border-color:var(--placa); border-width:2px; padding:17px; background:var(--placa-claro)}
.nv input:focus-visible + label{outline:3px solid var(--cobre); outline-offset:2px}
.nv .t{font-family:Archivo,sans-serif; font-weight:800; font-size:19px}
.nv .d{font-size:14px; color:var(--tinta-suave); line-height:1.45}
.nv .p{font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:600; color:var(--placa); font-variant-numeric:tabular-nums; border-top:1px solid var(--linea-fina); padding-top:9px; margin-top:2px}

.extras{display:grid; gap:10px}
.ex{display:flex; align-items:flex-start; gap:12px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:14px 16px; cursor:pointer}
.ex:hover{border-color:var(--placa)}
.ex input{width:19px; height:19px; margin:2px 0 0; accent-color:var(--placa); flex:none}
.ex .cuerpo{display:grid; gap:2px; flex:1}
.ex .t{font-weight:600; font-size:15.5px}
.ex .d{font-size:13.5px; color:var(--tinta-suave); line-height:1.4}
.ex .p{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; color:var(--placa); white-space:nowrap; font-variant-numeric:tabular-nums}

/* --- configurador: las piezas, una fila por categoría --- */
.piezas{display:grid; gap:10px}
.pz{display:grid; grid-template-columns:1fr auto; gap:4px 14px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:12px 16px}
.pz-c{grid-column:1/2; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave)}
.pz-p{grid-column:2/3; grid-row:1/3; align-self:center; font-family:"IBM Plex Mono",monospace; font-size:14.5px; font-weight:600; color:var(--placa); white-space:nowrap; font-variant-numeric:tabular-nums}
.pz-s{grid-column:1/2; width:100%; font:inherit; font-size:15.5px; padding:8px 10px; border:1px solid var(--linea); border-radius:4px; background:var(--papel); color:var(--tinta); max-width:100%}
.pz-s:focus-visible{outline:3px solid var(--cobre); outline-offset:2px}
.pz-a{grid-column:1/-1; font-size:13px; color:var(--tinta-suave); line-height:1.45}
.piezas-avisos{display:grid; gap:6px; margin-top:12px; background:var(--placa-claro); border-left:3px solid var(--cobre); border-radius:4px; padding:12px 14px; font-size:14px; line-height:1.5}
.aviso-cat{background:var(--placa-claro); border-left:3px solid var(--cobre); border-radius:4px; padding:16px 18px; font-size:15.5px; line-height:1.55}
/* Las advertencias del configurador: el precio es de hoy y lo que no sale en
   la lista se consigue igual. Van fuera de los pasos, entre el 4 y el 5. */
.nota-conf{display:grid; gap:10px; margin:0 0 26px; background:var(--carcasa); border:1px solid var(--linea);
  border-radius:6px; padding:16px 18px; font-size:14.5px; line-height:1.55; color:var(--tinta-suave)}
.nota-conf b{color:var(--tinta)}
.nota-conf[hidden]{display:none}
.resumen .desglose{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tinta-suave); text-align:right; margin-top:6px; font-variant-numeric:tabular-nums}
@media(max-width:520px){
  .pz{grid-template-columns:1fr}
  .pz-p{grid-column:1/2; grid-row:auto; text-align:right; margin-top:-2px}
}
.resumen{position:sticky; top:88px; background:var(--superficie); border:1px solid var(--linea); border-radius:6px; box-shadow:var(--sombra); overflow:hidden}
@media(max-width:980px){.resumen{position:static}}
.resumen .cabr{background:var(--placa-fuerte); color:var(--sobre-verde); padding:15px 18px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center}
:root[data-theme="dark"] .resumen .cabr{color:var(--tinta)}

.resumen .cuerpo{padding:6px 18px 18px}
.resumen .vacio{padding:26px 18px; color:var(--tinta-suave); font-size:15px; line-height:1.5}
.linea{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--linea-fina); font-size:14.5px; align-items:baseline}
.linea:last-of-type{border-bottom:none}
.linea .c{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); display:block; margin-bottom:2px}
.linea .v{font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace; font-size:13.5px; white-space:nowrap; color:var(--tinta-suave)}
.total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; padding-top:14px; border-top:2px solid var(--linea)}
.total .et{font-weight:600; font-size:15px}
.total .v{font-family:Archivo,sans-serif; font-weight:800; font-size:27px; color:var(--placa); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.avisop{font-size:13px; color:var(--tinta-suave); line-height:1.5; margin-top:14px; padding-top:14px; border-top:1px solid var(--linea-fina)}

.formu{display:grid; gap:14px; max-width:560px}
.campo{display:grid; gap:6px}
.campo label{font-size:14.5px; font-weight:600}
.campo .ay{font-size:13px; color:var(--tinta-suave); font-weight:400}
.campo input,.campo textarea{font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie); color:var(--tinta); width:100%}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--cobre); outline-offset:1px; border-color:var(--placa)}
.campo textarea{min-height:96px; resize:vertical}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.aviso-form{font-size:13.5px; color:var(--tinta-suave); line-height:1.5; max-width:60ch}
.error{color:#B4451F; font-size:14px; font-weight:500}
:root[data-theme="dark"] .error{color:#F0916A}


/* ---------- interruptor de tema ---------- */
.tema{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radio); border:1px solid var(--linea); background:var(--superficie); color:var(--tinta-suave); cursor:pointer; padding:0; flex:none}
.tema:hover{border-color:var(--placa); color:var(--placa)}
.tema svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:none}
:root[data-theme="dark"] .tema .luna{display:block}

/* movil: el descriptor del logo se partia en tres lineas */
@media(max-width:560px){
  .marca .s{display:none}
  .marca .n{font-size:19px}
  .barra .env{height:60px}
  .resumen{top:70px}
}

/* En un telefono no caben a la vez el nombre, el selector de idioma, el
   interruptor de modo y el boton de Contacto: se cortaba el logo y «Contacto»
   se salia de la pantalla. Se quita el boton, que abajo esta la burbuja de
   WhatsApp y el contacto tambien esta en el pie. */
@media(max-width:520px){
  .barra .env{gap:8px}
  .nav{gap:8px}
  .nav .btn{display:none}
  .marca{gap:8px}
  .marca .n{font-size:17px}
  .idiomas summary{padding:6px 5px}
}

/* el boton flotante no debe tapar el final de la pagina */
@media(max-width:899px){ body{padding-bottom:78px} }

/* ---- burbuja de contacto ---- */
.burbuja{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.burbuja-boton{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:#25D366;
  display:grid;place-items:center;box-shadow:0 6px 22px -6px rgba(20,32,28,.45);transition:transform .15s ease}
.burbuja-boton:hover{transform:scale(1.06)}
.burbuja-boton svg{width:30px;height:30px;fill:#fff}
.burbuja-boton .cerrar-x{display:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.burbuja.abierta .burbuja-boton{background:var(--placa)}
.burbuja.abierta .burbuja-boton .wa{display:none}
.burbuja.abierta .burbuja-boton .cerrar-x{display:block}

.burbuja-panel{width:min(330px,calc(100vw - 40px));background:var(--superficie);border:1px solid var(--linea);
  border-radius:14px;box-shadow:0 18px 50px -18px rgba(20,32,28,.5);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
.burbuja.abierta .burbuja-panel{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.burbuja-panel{transition:none}}
.burbuja-panel .cab{background:var(--placa-fuerte);color:var(--sobre-verde);padding:15px 18px;display:flex;gap:11px;align-items:center}
:root[data-theme="dark"] .burbuja-panel .cab{color:var(--tinta)}
.burbuja-panel .cab svg{width:30px;height:30px;flex:none}
.burbuja-panel .cab .n{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;line-height:1.1}
.burbuja-panel .cab .s{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:6px}
.burbuja-panel .cab .punto{width:7px;height:7px;border-radius:50%;background:#5AD79E;display:inline-block}
.burbuja-panel .charla{padding:16px 18px 6px}
/* El error de la mini ficha de la burbuja («Que me llamen»). Lo pone contacto.js */
.burbuja-error{margin:0;font-size:13px;line-height:1.4;color:#B4451F}
.burbuja-error:empty{display:none}
:root[data-theme="dark"] .burbuja-error{color:#F0916A}
.burbuja-datos [aria-invalid="true"]{border-color:#B4451F;box-shadow:inset 0 0 0 1px #B4451F}
:root[data-theme="dark"] .burbuja-datos [aria-invalid="true"]{border-color:#F0916A;box-shadow:inset 0 0 0 1px #F0916A}
.burbuja-panel .globo{background:var(--carcasa);border-radius:4px 14px 14px 14px;padding:12px 14px;
  font-size:14.5px;line-height:1.5;color:var(--tinta)}
.burbuja-panel .opciones{padding:12px 18px 18px;display:grid;gap:8px}
.burbuja-panel .opciones button{text-align:left;background:var(--superficie);border:1px solid var(--linea);
  border-radius:10px;padding:11px 14px;cursor:pointer;font:inherit;font-size:14px;color:var(--tinta);font-weight:500}
.burbuja-panel .opciones button:hover{border-color:var(--placa);color:var(--placa)}
.burbuja-panel .pie{border-top:1px solid var(--linea-fina);padding:11px 18px;font-size:12px;color:var(--tinta-suave)}
.burbuja-panel .pie a{color:var(--placa)}

/* ---- pagina de contacto ---- */
.contacto-rejilla{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
@media(max-width:880px){.contacto-rejilla{grid-template-columns:1fr;gap:26px}}
/* Sin minmax(0,…) la columna crecía hasta el texto más largo de las tarjetas
   (el correo) y a 375 px la página medía 414: se movía de lado (25/09/2026). */
@media(max-width:880px){.contacto-rejilla{grid-template-columns:minmax(0,1fr)}}
.tarjeta-form{background:var(--superficie);border:1px solid var(--linea);border-radius:8px;padding:26px;box-shadow:var(--sombra)}
.form-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-campos{grid-template-columns:1fr}}
.form-campo{display:grid;gap:6px}
.form-campo.ancho{grid-column:1/-1}
.form-campo label{font-size:14px;font-weight:600}
.form-campo input,.form-campo select,.form-campo textarea{font:inherit;font-size:16px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel);color:var(--tinta);width:100%}
.form-campo textarea{min-height:120px;resize:vertical}
.form-campo input:focus,.form-campo select:focus,.form-campo textarea:focus{outline:3px solid var(--cobre);outline-offset:1px;border-color:var(--placa)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-form{font-size:13px;color:var(--tinta-suave);line-height:1.5;margin-top:14px}
.resultado{margin-top:16px;padding:14px 16px;border-radius:var(--radio);font-size:15px;line-height:1.5}
.resultado.bien{background:var(--placa-claro);color:var(--placa);border:1px solid var(--placa)}
.resultado.mal{background:#FBEDE8;color:#B4451F;border:1px solid #B4451F}
:root[data-theme="dark"] .resultado.mal{background:#2A1811;color:#F0916A;border-color:#F0916A}
/* Error al lado de su campo. Lo pone validar.js; mismo color que .resultado.mal */
.form-campo [aria-invalid="true"],.panel-carrito .form-carrito [aria-invalid="true"],.formu [aria-invalid="true"]{border-color:#B4451F;box-shadow:inset 0 0 0 1px #B4451F}
.error-campo{font-size:13.5px;line-height:1.4;color:#B4451F;margin:0}
:root[data-theme="dark"] .form-campo [aria-invalid="true"],:root[data-theme="dark"] .panel-carrito .form-carrito [aria-invalid="true"],:root[data-theme="dark"] .formu [aria-invalid="true"]{border-color:#F0916A;box-shadow:inset 0 0 0 1px #F0916A}
:root[data-theme="dark"] .error-campo{color:#F0916A}
.vias-contacto{display:grid;gap:14px}
.via-grande{display:flex;gap:14px;align-items:flex-start;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px;text-decoration:none;color:var(--tinta)}
.via-grande:hover{border-color:var(--placa)}
.via-grande .ico{width:38px;height:38px;border-radius:9px;background:var(--placa-claro);display:grid;place-items:center;flex:none}
.via-grande .ico svg{width:19px;height:19px;fill:none;stroke:var(--placa);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.via-grande .t{font-weight:600;font-size:16px;display:block}
.via-grande .d{font-size:14px;color:var(--tinta-suave);margin-top:2px;display:block}
.via-grande > span{min-width:0}
.via-grande .t,.via-grande .d{overflow-wrap:anywhere}

/* ---------- tienda ---------- */
/* El buscador de la tienda. Va encima del índice de secciones: con ochenta
   productos, quien sabe lo que quiere no debería tener que adivinar en qué
   sección lo hemos metido. */
.revisado{margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.06em; color:var(--tinta-suave)}
.buscar-tienda{margin-bottom:16px; max-width:420px}
.buscar-tienda label{display:block; font-size:13px; color:var(--tinta-suave); margin-bottom:6px}
.buscar-tienda input{width:100%; font:inherit; font-size:16px; padding:11px 14px;
  border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie); color:var(--tinta)}
.buscar-tienda input:focus{border-color:var(--placa); outline:3px solid var(--cobre); outline-offset:1px}
.indice-tienda{display:flex; flex-wrap:wrap; gap:8px}
.indice-tienda a{text-decoration:none; font-size:14.5px; font-weight:600; color:var(--tinta-suave);
  background:var(--superficie); border:1px solid var(--linea); border-radius:100px; padding:8px 16px}
.indice-tienda a:hover{border-color:var(--placa); color:var(--placa)}
/* Los mismos botones, pero filtran en vez de saltar. El número dice cuántos
   productos hay dentro: sin eso no se sabe si merece la pena entrar. */
.indice-tienda .chip{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
  font-size:14.5px; font-weight:600; color:var(--tinta-suave); background:var(--superficie);
  border:1px solid var(--linea); border-radius:100px; padding:8px 16px}
.indice-tienda .chip:hover{border-color:var(--placa); color:var(--placa)}
.indice-tienda .chip:focus-visible{outline:3px solid var(--cobre); outline-offset:2px}
.indice-tienda .chip .n{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  color:var(--tinta-suave); background:var(--carcasa); border-radius:100px; padding:1px 7px; font-variant-numeric:tabular-nums}
.indice-tienda .chip[aria-pressed="true"]{background:var(--placa); border-color:var(--placa); color:var(--sobre-verde)}
:root[data-theme="dark"] .indice-tienda .chip[aria-pressed="true"]{color:#06140D}
.indice-tienda .chip[aria-pressed="true"] .n{background:rgba(255,255,255,.22); color:inherit}
.seccion-tienda[hidden]{display:none}
.seccion-tienda{padding:60px 0; border-top:1px solid var(--linea-fina)}
.seccion-tienda .enc{margin-bottom:30px}
.rejilla-prod{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px}
.prod{background:var(--superficie); border:1px solid var(--linea); border-radius:8px; padding:18px;
  display:flex; flex-direction:column; gap:8px}
.prod:hover{border-color:var(--placa); box-shadow:var(--sombra)}
.prod .foto{background:var(--carcasa); border-radius:6px; aspect-ratio:4/3; display:grid; place-items:center;
  color:var(--placa); overflow:hidden}
.prod .foto svg{width:64%; height:auto}
.prod .foto img{width:100%; height:100%; object-fit:cover}
/* Foto entera: nada se recorta. Fondo blanco porque las fotos de producto
   vienen casi siempre sobre blanco y así no se ve el marco. */
.prod .foto.con-foto{background:#fff; box-shadow:inset 0 0 0 1px var(--linea-fina)}
.prod .foto.entera img{object-fit:contain; padding:8px}
.prod .foto.recortada img{object-fit:cover}
.prod .foto.recortada.foco-arriba img{object-position:50% 15%}
.prod .foto.recortada.foco-abajo img{object-position:50% 85%}
.prod h3{font-size:17px; letter-spacing:-.015em; margin-top:4px}
.prod p{font-size:14.5px; color:var(--tinta-suave); line-height:1.5; flex:1}
.prod .precio{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--cobre-txt)}
.prod .precio.sin{color:var(--tinta-suave); font-weight:500; opacity:.85}
@media(max-width:520px){.rejilla-prod{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .prod{padding:12px} .prod h3{font-size:15.5px} .prod p{font-size:13.5px}}

/* ---------- la lista de la compra ---------- */
.prod .anadir{width:100%; justify-content:center; margin-top:4px; font-size:14.5px; padding:9px 14px}
.prod .anadir:active{transform:translateY(1px)}

/* El carrito va donde el de WhatsApp, justo encima: redondo, del mismo tamaño
   y con la cuenta en rojo. Así no se confunde con los botones de las fichas. */
.barra-carrito{position:fixed; right:20px; bottom:90px; z-index:71; width:58px; height:58px;
  border-radius:50%; border:none; cursor:pointer; background:var(--placa); color:var(--sobre-verde);
  display:grid; place-items:center; padding:0; box-shadow:0 6px 22px -6px rgba(20,32,28,.4);
  transition:transform .12s ease}
.barra-carrito:hover{transform:scale(1.06)}
.barra-carrito svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.barra-carrito .cuenta{position:absolute; top:-3px; right:-3px; min-width:23px; height:23px; padding:0 6px;
  border-radius:100px; background:#D93025; color:#fff; font-size:12.5px; font-weight:700; line-height:23px;
  text-align:center; border:2px solid var(--papel); font-variant-numeric:tabular-nums}
@media(max-width:560px){.barra-carrito{right:16px; bottom:84px}}

.aviso-carrito{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:70;
  background:var(--tinta); color:var(--papel); font-size:14.5px; padding:11px 18px; border-radius:100px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; max-width:88vw; text-align:center}
.aviso-carrito.visible{opacity:1; transform:translate(-50%,0)}

.panel-carrito{border:none; border-radius:10px; padding:0; width:min(560px,94vw); max-height:88vh;
  background:var(--superficie); color:var(--tinta); box-shadow:0 30px 80px -30px rgba(20,32,28,.55)}
.panel-carrito::backdrop{background:rgba(20,32,28,.45)}
.panel-carrito .cab{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--linea-fina)}
.panel-carrito .cab h2{font-size:19px}
.panel-carrito .cerrar{background:none; border:none; font-size:26px; line-height:1; cursor:pointer;
  color:var(--tinta-suave); padding:0 4px}
.panel-carrito .cuerpo{padding:20px 22px 24px; overflow:auto; max-height:calc(88vh - 66px)}
.panel-carrito .lineas{list-style:none; margin:0 0 18px; padding:0}
.panel-carrito .lineas li{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--linea-fina)}
.panel-carrito .que{font-size:15px; line-height:1.35}
.panel-carrito .que .sec{display:block; font-size:12.5px; color:var(--tinta-suave); margin-top:2px}
.panel-carrito .cant{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--linea);
  border-radius:100px; padding:2px}
.panel-carrito .cant button{width:28px; height:28px; border:none; background:none; cursor:pointer;
  font-size:17px; line-height:1; color:var(--tinta); border-radius:100px}
.panel-carrito .cant button:hover{background:var(--carcasa)}
.panel-carrito .cant span{min-width:20px; text-align:center; font-variant-numeric:tabular-nums; font-size:14.5px}
.panel-carrito .quitar{background:none; border:none; color:var(--tinta-suave); font:inherit; font-size:13.5px;
  cursor:pointer; text-decoration:underline; padding:0}
.panel-carrito .quitar:hover{color:var(--rojo,#B3261E)}
.panel-carrito .nota-carrito{font-size:14.5px; color:var(--tinta-suave); line-height:1.55; margin-bottom:18px}
.panel-carrito .acciones-carrito{display:flex; flex-direction:column; gap:10px}
.panel-carrito .acciones-carrito .btn{width:100%; justify-content:center}
.panel-carrito .o-bien{margin:18px 0 2px; text-align:center; font-size:13px; color:var(--tinta-suave);
  display:flex; align-items:center; gap:12px}
.panel-carrito .o-bien::before,.panel-carrito .o-bien::after{content:''; flex:1; height:1px; background:var(--linea-fina)}
.panel-carrito .form-carrito{display:grid; gap:12px; margin-top:14px}
.panel-carrito .vaciar-lista{display:block; margin:18px auto 0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--tinta-suave); text-decoration:underline; text-underline-offset:3px;
  padding:6px 10px; border-radius:var(--radio-chico)}
.panel-carrito .vaciar-lista:hover{color:var(--tinta)}
.panel-carrito .form-carrito label{display:grid; gap:5px; font-size:13.5px; color:var(--tinta-suave)}
.panel-carrito .form-carrito input,.panel-carrito .form-carrito textarea{font:inherit; font-size:15.5px;
  padding:10px 12px; border:1px solid var(--linea); border-radius:var(--radio); background:var(--papel);
  color:var(--tinta); width:100%; resize:vertical}
.panel-carrito .form-carrito input:focus,.panel-carrito .form-carrito textarea:focus{border-color:var(--placa); outline:2px solid var(--cobre)}
.panel-carrito .resultado{font-size:14.5px; padding:10px 12px; border-radius:var(--radio)}
.panel-carrito .resultado.bien{background:var(--placa-claro); color:var(--placa)}
.panel-carrito .resultado.mal{background:var(--cobre-claro); color:var(--cobre-txt)}

/* ---------- selector de idioma ---------- */
/* El selector de idioma es un <details>, así que le caen encima los estilos de
   las preguntas frecuentes: la raya de abajo y el "+" de abrir. Se quitan. */
details.idiomas{border-bottom:0}
.idiomas summary::after{content:none}
.idiomas{position:relative; margin-right:2px}
.idiomas summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:3px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  color:var(--tinta-suave); padding:7px 8px; border-radius:4px; border:1px solid transparent}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary:hover{color:var(--placa); background:var(--carcasa)}
.idiomas summary:focus-visible{outline:3px solid var(--cobre); outline-offset:2px}
.idiomas[open] summary{color:var(--placa); background:var(--placa-claro); border-color:var(--linea)}
.idiomas summary .v{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .12s ease}
.idiomas[open] summary .v{transform:rotate(180deg)}
.idi-lista{position:absolute; right:0; top:calc(100% + 6px); z-index:60; display:grid; min-width:158px;
  background:var(--superficie); border:1px solid var(--linea); border-radius:5px; box-shadow:var(--sombra); padding:4px; gap:1px}
.idi-lista .idi{font-size:14px; padding:8px 10px; border-radius:4px; text-decoration:none; color:var(--tinta); white-space:nowrap}
.idi-lista a.idi:hover{background:var(--carcasa); color:var(--placa)}
.idi-lista .idi.activo{color:var(--placa); background:var(--placa-claro); font-weight:600}
@media(max-width:900px){.idiomas{margin-right:0} .idiomas summary{padding:6px 6px}}

/* ============================================================
   El menú del móvil.
   Por debajo de 880 px los enlaces de la barra se ocultan, y antes no había
   nada en su lugar: en un teléfono no se podía ir a Empresas, Hogar ni Tienda
   sin bajar hasta el pie. Ahora hay un botón que los despliega.
   ============================================================ */
.abrir-nav{display:none}
@media(max-width:1080px){
  .barra{position:sticky}
  .abrir-nav{display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; border:1px solid var(--linea); border-radius:10px;
    background:var(--superficie); color:var(--tinta); cursor:pointer; order:-1}
  .abrir-nav svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
  .abrir-nav .equis{display:none}
  .barra.nav-abierta .abrir-nav{background:var(--placa); border-color:var(--placa); color:#fff}
  .barra.nav-abierta .abrir-nav .rayas{display:none}
  .barra.nav-abierta .abrir-nav .equis{display:block}

  /* OJO: `display:flex` pisa al atributo `hidden`, que solo trae un
     `display:none` de baja prioridad. Sin esta linea el menu se queda abierto
     para siempre por mucho que el atributo diga lo contrario. */
  .nav-movil[hidden]{display:none}
  /* A pantalla completa desde el 26/09/2026: una cortina de papel baja desde
     la barra y los enlaces suben uno a uno desde detrás de una máscara, como
     entradas de la bitácora. No puede ser position:fixed: el backdrop-filter
     de la barra convierte a la barra en su caja de referencia. */
  .nav-movil{position:absolute; top:100%; left:0; right:0; z-index:60;
    height:calc(100dvh - var(--alto-barra, 68px)); overflow-y:auto; overscroll-behavior:contain;
    display:flex; flex-direction:column; padding:28px 24px calc(28px + env(safe-area-inset-bottom));
    background:var(--papel); border-bottom:1px solid var(--linea)}
  .nav-movil::after{content:""; position:absolute; right:-70px; bottom:-40px; width:300px; height:300px; pointer-events:none; opacity:.07;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230B5D3B' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M58.10 14.92 A36 36 0 0 1 85.08 41.90'/%3E%3Cpath d='M85.08 58.10 A36 36 0 0 1 58.10 85.08'/%3E%3Cpath d='M41.90 85.08 A36 36 0 0 1 14.92 58.10'/%3E%3Cpath d='M14.92 41.90 A36 36 0 0 1 41.90 14.92'/%3E%3C/g%3E%3Cpath d='M50 20 L59 50 L41 50 Z' fill='%23C9822F'/%3E%3Cpath d='M50 80 L59 50 L41 50 Z' fill='%230B5D3B'/%3E%3C/svg%3E")}
  :root[data-theme="dark"] .nav-movil::after{filter:invert(1) hue-rotate(180deg)}
  .nav-movil a{display:flex; align-items:baseline; gap:16px; padding:14px 0; text-decoration:none; color:var(--tinta)}
  .nav-movil a + a{border-top:1px solid var(--linea-fina)}
  .nav-movil .num{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em; color:var(--cobre-txt); min-width:22px}
  .nav-movil .mascara{display:block; overflow:hidden; padding-bottom:.08em}
  .nav-movil .mascara > span{display:block; font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(26px,7vw,36px); letter-spacing:-.02em; line-height:1.1}
  .nav-movil a.btn{margin-top:22px; padding:16px; border-top:none; justify-content:center;
    background:var(--placa); color:#fff; border-radius:var(--radio); font-size:17px}
  html.nav-bloqueo{overflow:hidden}
  html.nav-bloqueo .burbuja{display:none}   /* el WhatsApp no tapa el menú abierto */
}

/* ══════════════════════════════════════════════════════════════════════
   EL REDISEÑO
   Materiales, radios y ritmo tipográfico. Vivió en `materia.css` desde el
   09/09/2026 mientras se decidía si gustaba; se fundió aquí el mismo día.
   Las variables ya están arriba, en el :root de siempre: aquí solo hay
   reglas. Lo que se mueve lo llevan fluido.js y movimiento.js.
   ══════════════════════════════════════════════════════════════════════ */

/* Fondo con dos halos muy suaves. Fijos: un fondo grande que se mueve marea. */
body{background:var(--papel)}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 46vw at 12% -8%, color-mix(in srgb, var(--placa) 12%, transparent), transparent 70%),
    radial-gradient(52vw 40vw at 96% 4%, color-mix(in srgb, var(--cobre) 10%, transparent), transparent 68%);
}

/* ── Tipografía: el tracking es propio de cada tamaño ─────────────────── */
h1{letter-spacing:-.035em; line-height:1.03}
h2{letter-spacing:-.028em; line-height:1.08}
h3{letter-spacing:-.018em}
.lead{letter-spacing:-.006em}

/* ── Barra: capa flotante, sin raya fija ──────────────────────────────── */
.barra{
  background:var(--vidrio);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
/* La raya solo cuando de verdad hay contenido pasando por debajo */
.barra.pegada{border-bottom-color:var(--linea-fina); box-shadow:0 10px 30px -26px rgba(20,32,28,.6)}
.nav a:not(.btn){padding:7px 11px; border-radius:10px; letter-spacing:-.004em}
.nav a:not(.btn):hover{background:color-mix(in srgb, var(--tinta) 6%, transparent)}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{border-radius:999px; letter-spacing:-.006em; box-shadow:var(--sombra)}
.btn:hover{transform:none; box-shadow:var(--sombra-media)}   /* el empujón lo da el muelle */
.btn.fantasma{background:color-mix(in srgb, var(--tinta) 7%, transparent); border-color:transparent; color:var(--tinta)}
.tema{border-radius:999px; border-color:transparent; background:color-mix(in srgb, var(--tinta) 7%, transparent)}
.tema:hover{border-color:transparent; background:color-mix(in srgb, var(--tinta) 12%, transparent)}

/* ── Superficies: material, no caja con borde ─────────────────────────── */
.puerta,.tarj,.plan,.socio,.via,.tablabox,.resumen,.pasos,.op label,.nv label,.ex,.pz,.nota-conf{
  background:var(--tarjeta);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-color:var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.puerta{border-radius:var(--radio-grande); padding:30px; overflow:hidden; position:relative}
/* La franja de color de arriba se va: la identidad la lleva el halo de abajo */
.puerta,.puerta.b{border-top:1px solid var(--vidrio-borde)}
/* El filo claro de arriba: la luz dando en el canto del material. La franja
   de color que marcaba cada puerta pasa a ser un halo por debajo. */
.puerta::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
:root[data-theme="dark"] .puerta::before{background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent)}
.puerta::after{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:70%; pointer-events:none; z-index:0;
  background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--placa) 20%, transparent), transparent 70%);
}
.puerta.b::after{background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--cobre) 24%, transparent), transparent 70%)}
.puerta > *{position:relative; z-index:1}
.puerta:hover{transform:none; border-color:var(--vidrio-borde); box-shadow:var(--sombra-media)}
.tarj:hover{transform:none; border-color:var(--vidrio-borde); box-shadow:var(--sombra-media)}
.via:hover{border-color:var(--vidrio-borde); box-shadow:var(--sombra-media)}

/* La franja de datos deja de ser una banda a todo lo ancho y pasa a ser una
   pieza con su propio material. */
.franja{background:none; border:0; padding:0 24px}
.franja .env{
  background:var(--tarjeta); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--vidrio-borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:6px 18px;
}
/* La franja usaba el ancho del .env CON su relleno (1140) y el resto de
   tarjetas el de dentro (1092): sobresalía 24 px por cada lado (25/09/2026). */
.franja .env{max-width:calc(var(--max) - 48px)}
.gris{background:color-mix(in srgb, var(--carcasa) 55%, transparent); border-color:transparent}

/* El bloque verde: degradado y un halo de cobre, en vez de un plano liso */
.verde{
  border-radius:var(--radio-grande); position:relative; overflow:hidden;
  /* Con var(), no con el verde escrito a mano: nueva-web.sh cambia --placa
     por el color de cada cliente y este bloque tiene que seguirlo. */
  background:linear-gradient(150deg, var(--placa-fuerte), var(--placa) 55%, color-mix(in srgb, var(--placa-fuerte) 60%, var(--placa)));
  box-shadow:var(--sombra-media);
}
:root[data-theme="dark"] .verde{background:linear-gradient(150deg, color-mix(in srgb, var(--placa-fuerte) 80%, #000), var(--placa-fuerte) 60%, color-mix(in srgb, var(--placa-fuerte) 90%, #000))}
.verde::after{
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; height:140%;
  background:radial-gradient(closest-side, rgba(233,162,75,.22), transparent 70%); pointer-events:none;
}
.verde > *{position:relative}
.check li{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  padding:12px 15px; border-radius:var(--radio-chico); align-items:flex-start;
}

/* Formularios y campos */
.campo input,.campo textarea,.pz-s{border-radius:var(--radio-chico); border-color:var(--vidrio-borde); background:var(--tarjeta)}
.pastilla{border-radius:999px}

/* Preguntas frecuentes: sin rayas duras, separación por aire */
.faq{border-top:0}
details{border-bottom:1px solid var(--linea-fina)}

/* Pie */
footer{border-radius:var(--radio-grande) var(--radio-grande) 0 0; margin-top:24px}

/* ── Entrada al hacer scroll ──────────────────────────────────────────── */
.sube{opacity:0}
.sube.visible{opacity:1}

/* ── Preferencias del sistema ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sube{opacity:1!important; transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .barra,.puerta,.tarj,.plan,.socio,.via,.tablabox,.resumen,.pasos,.franja .env,.op label,.nv label,.ex,.pz{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--superficie); border-color:var(--linea);
  }
  body::before{display:none}
}
@media (prefers-contrast:more){
  .puerta,.tarj,.plan,.socio,.via,.franja .env{background:var(--superficie); border-color:var(--tinta)}
}

/* ── Lo que salió de pasar la capa por las guías de interfaz ──────────── */

/* 1. Lo que responde al dedo tiene que decirlo el CSS: sin touch-action el
      móvil se guarda 300 ms por si era un doble toque, y el resalte gris del
      sistema se suma al muelle y se ve el feedback dos veces. */
.btn,.tema,.puerta,.via,.plan,.burbuja-boton{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
/* Arrastrar sobre una tarjeta seleccionaba su texto en vez de pulsarla */
.puerta,.plan,.via{-webkit-user-select:none; user-select:none}
.puerta p,.plan li,.via .v{-webkit-user-select:text; user-select:text}

/* 2. Los controles nativos (selects, barras de scroll) salían en claro
      dentro del tema oscuro: no lo sabían. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* 3. La barra fija tapaba el elemento recién enfocado al tabular. */
:target,[id]{scroll-margin-top:90px}

/* 4. La única transición que queda se apaga con el ajuste del sistema. */
@media (prefers-reduced-motion:reduce){ .barra{transition:none} }

/* ── La barra tiene que caber SIEMPRE ─────────────────────────────────────
   Iba justa de antes y esta capa la desbordó: los enlaces llevan ahora su
   propio relleno (5 × 22 px). Medido a 1100 px: el contenido pedía 1104 px y
   solo había 1052, así que la marca se encogía y su descriptor, que va en
   una sola línea, se salía por encima de «Empresas».

   Se arregla por orden de importancia, no a base de apretar:
     1. la marca no se encoge nunca
     2. el descriptor del logo se va antes de que estorbe (está en el pie)
     3. y solo después se esconden los enlaces y manda el botón de menú */
.barra .env{gap:12px}
.marca{flex:none}                     /* sin esto se encoge y desborda */
.nav{min-width:0; flex-wrap:nowrap}
.nav a:not(.btn){padding:7px 9px}

/* El descriptor sale de la barra en TODOS los tamaños. No es un ajuste fino:
   `.env` está limitado a 1140 px, o sea que el ancho útil de la barra es
   siempre 1092 px por mucho monitor que haya, y con el descriptor el
   contenido pedía 1098. Desbordaba en escritorio ancho también, no solo en
   un rango. Y sobra: «Sistemas · Soporte · Software» ya está en el pie y en
   la portada, y el logo se lee mejor con el nombre solo. */
.marca .s{display:none}
@media(max-width:1080px){ .nav .oculta{display:none} }

/* ---------- vídeo de presentación (25/09/2026) ----------
   Fondo de la portada: bucle de 12 s en blanco con trazos de marca. El blanco
   desaparece con multiply; en oscuro se invierte y se suma con screen, así un
   solo vídeo vale para los dos temas. La máscara lo aparta del titular. */
.portada{position:relative; isolation:isolate}
.portada-fondo{position:absolute; inset:0 0 auto 0; height:min(100%,760px); z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.45) 58%,#000 82%), linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,rgba(0,0,0,.45) 58%,#000 82%), linear-gradient(180deg,#000 55%,transparent 100%); mask-composite:intersect}
.portada-fondo video{width:100%; height:100%; object-fit:cover; object-position:right top; opacity:.16; mix-blend-mode:multiply}
:root[data-theme="dark"] .portada-fondo video{filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; opacity:.2}
/* En el móvil el titular ocupa todo el ancho: la máscara de los lados
   escondía el vídeo entero y, con el 10 % de opacidad, no se veía nada.
   Aquí se ve arriba y se desvanece hacia abajo, antes de las tarjetas. */
@media(max-width:840px){
  .portada-fondo{height:min(100%,620px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 88%); -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 88%); mask-composite:add}
  /* 20/10/2026: en el móvil las frases del fondo quedan justo detrás del
     titular y se mezclaban con él; más tenues, para que el titular mande. */
  .portada-fondo video{opacity:.08; object-position:72% top}
  :root[data-theme="dark"] .portada-fondo video{opacity:.08}
}

.video-caja{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center}
.video-caja .enc{margin-bottom:0}
@media(max-width:900px){ .video-caja{grid-template-columns:1fr; gap:26px} }
.video-abrir{position:relative; display:block; width:100%; padding:0; border:1px solid var(--linea); border-radius:var(--radio-grande,var(--radio)); overflow:hidden; background:#070A09; cursor:pointer; box-shadow:var(--sombra); aspect-ratio:16/9}
.video-abrir img, .video-abrir video{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.video-abrir:hover img, .video-abrir:hover video{transform:scale(1.02)}
/* La vista previa va sin sonido: lo dice el altavoz tachado de la esquina */
.video-mudo{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,10,9,.55); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none}
.video-mudo svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.video-abrir:focus-visible{outline:3px solid var(--placa); outline-offset:3px}
.video-play{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; padding:12px 20px 12px 16px; border-radius:999px; background:var(--placa); color:#fff; font-weight:600; font-size:15.5px; white-space:nowrap; box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
:root[data-theme="dark"] .video-play{color:#0F1512}
.video-play svg{width:20px; height:20px; fill:currentColor}
.video-dlg{width:min(1100px,94vw); max-width:none; padding:0; border:0; border-radius:var(--radio); background:#000; overflow:visible}
.video-dlg::backdrop{background:rgba(7,10,9,.82)}
.video-dlg video{display:block; width:100%; height:auto; border-radius:var(--radio); background:#000}
.video-cerrar{position:absolute; top:-46px; right:0; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer}
.video-cerrar:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .video-abrir img, .video-abrir video{transition:none} .video-abrir:hover img, .video-abrir:hover video{transform:none} }
/* 20/10/2026: el vídeo de «Una semana cualquiera» ya no se abre ni suena; es un
   bucle mudo de adorno en el ordenador y una foto fija en el móvil (video.js).
   Nada en él se puede pulsar, ni los controles del navegador. */
.video-fijo{cursor:default; pointer-events:none; user-select:none}
.video-fijo:hover video{transform:none}
/* El titular que sube palabra a palabra (movimiento.js, 3a). */
h1 .mt{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em}
h1 .mt > span{display:inline-block}

/* ---------- transición entre páginas ----------
   26/09/2026: una franja verde en escalera cruzaba la pantalla. 20/10/2026:
   Jean Michel la vio caótica (verde a pantalla completa en cada clic), así que
   ahora es un fundido corto: la página vieja se apaga subiendo un poco y la
   nueva llega desde un poco más abajo, con la curva de los muelles de la web
   (sale rápido y se posa). La barra lleva su propio nombre y no se mueve.
   Es la función de transiciones entre documentos del navegador: en Chrome y
   Safari recientes se ve; en los demás se cambia de página como siempre. */
@view-transition{navigation:auto}
.barra{view-transition-name:barra}
::view-transition-group(root){animation-duration:.36s}
::view-transition-old(root){animation:vt-sale .18s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entra .36s cubic-bezier(.16,1,.3,1) .06s both}
@keyframes vt-sale{to{opacity:0; transform:translateY(-8px)}}
@keyframes vt-entra{from{opacity:0; transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ── Zona de toque de los botones pequeños (28/09/2026) ─────────────────
   En el móvil el interruptor de modo (38 px), el botón del menú (42 px), el
   selector de idioma (33 px de alto) y los círculos de las redes (40 px) se
   quedaban por debajo de los 44 px que pide un dedo. Se agranda solo la zona
   que recibe el toque, con un pseudoelemento: lo que se ve no cambia. */
.tema,.abrir-nav,.idiomas summary,footer .redes a{position:relative}
.tema::before,.abrir-nav::before,.idiomas summary::before,footer .redes a::before{
  content:""; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px);
  transform:translate(-50%,-50%); border-radius:inherit}
/* Los enlaces del pie van en columna a 37 px de distancia: se estira su zona
   hasta casi tocarse (sin montarse) para no tener que acertar en 20 px. */
footer ul a{display:inline-block; padding:6px 0; margin:-6px 0}
/* Con el dedo, los chips de la tienda (41 px), «Pedir precio» (37 px) y los
   desplegables del configurador (41 px) también llegan a 44. Con ratón se
   quedan como estaban. */
@media (pointer:coarse){
  .prod .anadir,.indice-tienda .chip,.pz-s{min-height:44px}
}

/* El resumen del configurador va pegado arriba y, con un sobremesa completo,
   mide unos 970 px: en un portátil de 800 px de alto el «Total con IVA»
   quedaba por debajo de la pantalla mientras se cambiaban piezas, y solo se
   veía al llegar al final de la página. Ahora el resumen no pasa del alto de
   la ventana, se desplaza por dentro y el total se queda siempre a la vista. */
@media(min-width:981px){
  .resumen{max-height:calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain}
  .resumen .total{position:sticky; bottom:0; z-index:1; background:var(--superficie); padding-bottom:12px}
}

/* Saludo según la hora (ajustes.js, saludar()). Arriba a la derecha, por
   encima de todo, y en el móvil debajo de la barra para no tapar el menú. */
.saludo{position:fixed;top:calc(env(safe-area-inset-top) + 84px);right:16px;z-index:9999;max-width:min(340px, calc(100vw - 32px));
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:start;padding:14px 14px 14px 18px;
  background:var(--superficie);color:var(--tinta);border-radius:16px;box-shadow:var(--sombra-media, var(--sombra));
  border-left:4px solid var(--placa);cursor:pointer;
  opacity:0;transform:translateY(-10px);transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1)}
.saludo.dentro{opacity:1;transform:none}
.saludo b{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;grid-column:1}
.saludo span{grid-column:1;font-size:14.5px;color:var(--tinta-suave);line-height:1.4}
.saludo-x{grid-column:2;grid-row:1 / span 2;background:none;border:0;color:var(--tinta-suave);font-size:22px;line-height:1;
  width:44px;height:44px;margin:-8px -6px -8px 0;border-radius:50%;cursor:pointer}
.saludo-x:hover{background:color-mix(in srgb, var(--tinta) 8%, transparent)}
/* En el móvil, una sola línea pegada a la derecha: a ancho completo tapaba la
   etiqueta y el titular de la portada durante los siete segundos. */
@media(max-width:700px){
  .saludo{left:auto;right:12px;max-width:calc(100vw - 24px);top:calc(env(safe-area-inset-top) + 70px);
    padding:6px 6px 6px 14px;align-items:center;border-radius:999px}
  .saludo b{font-size:15.5px}
  .saludo span{display:none}
  .saludo-x{grid-row:1;margin:0}
}

/* Enlaces del pie con zona de toque de verdad en el móvil (revisión del
   20/10/2026: medían 20 px de alto y hacen falta unos 44). */
@media(max-width:700px){
  footer a{display:inline-block; padding:12px 0; min-height:44px; box-sizing:border-box}
}

/* «← Volver» (ajustes.js): solo sale si se llega desde otra página de la web. */
.volver-env{padding-top:14px}
.volver-atras{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; margin-left:-14px; border-radius:999px;
  color:var(--placa); font-weight:600; font-size:15px; text-decoration:none}
.volver-atras:hover{background:color-mix(in srgb, var(--placa) 10%, transparent)}
.volver-atras:focus-visible{outline:3px solid var(--placa); outline-offset:2px}