/* American Car Wash Chile — estilos compartidos. Sitio estático, sin build. */

@font-face{font-family:"Staatliches";src:url("/fonts/staatliches-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* color: negro de la van, azul y rojo del logotipo */
  --negro:#0B0B0D; --grafito:#121316; --carbon:#1A1C21;
  --linea:rgba(255,255,255,.12); --linea-fuerte:rgba(255,255,255,.26);
  --blanco:#FFFFFF; --platino:#A6AAB2; --gris:#7C8088;
  --azul:#3E507E; --azul-claro:#6D86C8; --azul-texto:#A7BCEC;
  --rojo:#B9192F; --rojo-vivo:#D8213B; --rojo-texto:#FF6B79;
  --cristal:rgba(255,255,255,.04);

  /* tipografía */
  --display:"Staatliches","Arial Narrow",Impact,sans-serif;
  --sans:"Barlow","Segoe UI",system-ui,Arial,sans-serif;
  --t-display:clamp(3.25rem,8.5vw,7rem); --t-titulo:clamp(2.25rem,5vw,4rem); --t-subtitulo:1.75rem; --t-precio:2.75rem;
  --t-cuerpo-g:1.125rem; --t-cuerpo:1rem; --t-menor:.875rem; --t-dato:.8125rem;
  --lh-cuerpo:1.6;

  /* Alias de la regla C3 (16-09-2026): los nombres fijos del espacio de trabajo apuntan a los tokens de esta marca.
     Lo nuevo se escribe con estos nombres; lo existente conserva los suyos. */
  --color-fondo:var(--negro); --color-texto:var(--platino); --color-texto-suave:var(--gris); --color-acento:var(--azul-texto); --color-linea:var(--linea); --color-foco:var(--azul-claro);
  --fuente-texto:var(--sans); --fuente-titulos:var(--display);
  --t-1:var(--t-cuerpo-g); --t-2:var(--t-subtitulo); --t-3:var(--t-subtitulo); --t-4:var(--t-precio); --t-5:var(--t-titulo); --t-6:var(--t-display);
  --dur-1:var(--dur-corta); --dur-2:var(--dur); --dur-3:var(--dur-salida); --ancho-lectura:68ch;

  /* espaciado: la escala vertical entre bloques es 96 / 128 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
  --alto-cabecera:72px;

  /* forma */
  --r1:4px; --r2:10px; --r3:16px; --rp:999px;

  /* movimiento: curvas fuertes (Emil Kowalski). ease-out para entradas y feedback,
     ease-in-out para lo que se mueve en pantalla, ease-panel para el menú, ease para color y hover */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-panel:cubic-bezier(.32,.72,0,1); --ease-suave:cubic-bezier(.16,1,.3,1); --ease:ease;
  /* --ease-suave: entradas largas de la escena de bienvenida; arranca fuerte y se asienta despacio */
  --dur-pulso:140ms; --dur-corta:160ms; --dur:200ms; --dur-panel:240ms; --dur-salida:150ms;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--alto-cabecera) + var(--e4))}
/* el scroll suave lo hace interacciones.js solo en clics de puntero sobre anclas; el foco y el teclado saltan sin animar */
body{margin:0;background:var(--negro);color:var(--platino);font:400 var(--t-cuerpo-g)/var(--lh-cuerpo) var(--sans);-webkit-font-smoothing:antialiased}
body.menu-abierto{overflow:hidden}
::selection{background:var(--azul);color:var(--blanco)}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--blanco);margin:0;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
h1{font-size:var(--t-display);line-height:.92;letter-spacing:-.012em}
h2{font-size:var(--t-titulo);line-height:.98;letter-spacing:-.008em}
h3{font-size:var(--t-subtitulo);line-height:1.1}
p{margin:0;text-wrap:pretty}
p+p{margin-top:var(--e4)}
strong{color:var(--blanco);font-weight:600}

a,button{-webkit-tap-highlight-color:transparent}
button,summary,label,.ficha-precio{touch-action:manipulation}
.nowrap{white-space:nowrap}
a{color:var(--blanco);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--linea-fuerte);touch-action:manipulation;transition:text-decoration-color var(--dur-salida) var(--ease),color var(--dur-salida) var(--ease)}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-color:var(--rojo-texto)}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:var(--r1)}

.saltar{position:absolute;left:var(--e4);top:calc(-1 * var(--e9));z-index:20;background:var(--blanco);color:var(--negro);padding:var(--e3) var(--e4);border-radius:var(--r1);text-decoration:none}
.saltar:focus{top:var(--e3)}
main:focus{outline:none}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.contenedor{max-width:1120px;margin-inline:auto;padding-inline:var(--e5)}
.bloque{padding-block:var(--e10)}
.bloque-oscuro{background:var(--grafito);border-block:1px solid var(--linea)}
.etiqueta{font-size:var(--t-dato);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-texto);margin-bottom:var(--e4)}
.intro{max-width:640px;margin-top:var(--e5)}
.intro+.nota{max-width:640px;margin-top:var(--e3)}
@media (max-width:599px){.bloque{padding-block:var(--e8)}}

/* aparición al entrar en pantalla: solo las tres tarjetas con foto (escalonadas con --i) y la foto de la banda.
   El resto del contenido se lee y se usa: no se mueve. Solo con JS. */
html.js .banda .banda-foto{opacity:0;transform:scale(1.04);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
html.js .banda.visible .banda-foto{opacity:1;transform:none}

/* iconos de un trazo */
.icono{width:28px;height:28px;flex:none;color:var(--azul-texto)}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:48px;padding:var(--e3) var(--e5);background:var(--rojo);color:var(--blanco);font:600 var(--t-menor)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:var(--r2);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-pulso) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.boton:hover{background:var(--rojo-vivo);box-shadow:0 0 0 4px rgba(216,33,59,.18)}}
.boton:active{transform:scale(.97)}
.boton:disabled{cursor:default}
.boton-contenido{display:inline-block;transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.boton[aria-busy="true"]{pointer-events:none}
.boton[aria-busy="true"] .boton-contenido{filter:blur(2px);opacity:.7}
.boton-secundario{background:transparent;border-color:var(--linea-fuerte);color:var(--blanco)}
@media (hover:hover) and (pointer:fine){.boton-secundario:hover{background:var(--cristal);border-color:var(--blanco);box-shadow:none}}
.boton-grande{min-height:56px;padding-inline:var(--e6);font-size:var(--t-cuerpo)}
.boton svg{width:18px;height:18px}
.acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}

/* cabecera */
.cabecera{position:sticky;top:0;z-index:10;background:rgba(11,11,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.cabecera-fila{display:flex;align-items:center;gap:var(--e5);min-height:var(--alto-cabecera)}
.marca{display:block;flex:none;line-height:0}
.marca img{width:auto;height:44px}
.nav{margin-left:auto}
.menu{position:relative;display:flex;gap:var(--e5);list-style:none;margin:0;padding:0}
.menu a{font-size:var(--t-menor);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--platino);padding-block:var(--e2);transition:color var(--dur-salida) var(--ease)}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--blanco)}}
.menu a[aria-current="true"]{color:var(--blanco)}
/* un solo subrayado que viaja entre enlaces (lo mide interacciones.js) */
.menu-indicador{position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--rojo-vivo);border-radius:1px;transform-origin:left center;transform:scaleX(0);opacity:0;transition:transform 220ms var(--ease-in-out),opacity var(--dur-salida) var(--ease);pointer-events:none}
.menu-indicador.visible{opacity:1}
.cabecera-acciones{display:flex;align-items:center;gap:var(--e4)}
.icono-red{display:inline-flex;padding:9px;margin:-9px;color:var(--platino);transition:color var(--dur-salida) var(--ease)}
.icono-red svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.icono-red:hover{color:var(--blanco)}}

.menu-boton{display:none;position:relative;width:48px;height:48px;margin-right:calc(-1 * var(--e3));background:none;border:0;cursor:pointer;color:var(--blanco);transition:transform var(--dur-pulso) var(--ease-out)}
.menu-boton:active{transform:scale(.92)}
.menu-boton span{position:absolute;left:12px;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--dur) var(--ease-in-out)}
.menu-boton span:first-child{top:19px}
.menu-boton span:last-child{top:27px}
.menu-boton[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-boton[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:839px){
  :root{--alto-cabecera:64px}
  .marca img{height:36px}
  .cabecera-acciones{margin-left:auto}   /* el nav sale del flujo en móvil: el grupo de redes y menú se va a la derecha */
  .cabecera-acciones .icono-red{padding:11px;margin:-11px}
  .menu-boton{display:block}
  .nav{display:none;position:fixed;inset:var(--alto-cabecera) 0 0 0;z-index:9;margin:0;padding:var(--e6) var(--e5) var(--e8);background:var(--grafito);overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-8px);transition:opacity var(--dur-salida) var(--ease-out),transform var(--dur-salida) var(--ease-out),display var(--dur-salida) allow-discrete}
  .nav[data-abierto="true"]{display:flex;flex-direction:column;opacity:1;transform:none;transition-duration:var(--dur-panel);transition-timing-function:var(--ease-panel)}
  @starting-style{.nav[data-abierto="true"]{opacity:0;transform:translateY(-8px)}}
  .menu-indicador{display:none}
  .menu li{opacity:0;transform:translateY(6px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
  .nav[data-abierto="true"] .menu li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 35ms)}
  @starting-style{.nav[data-abierto="true"] .menu li{opacity:0;transform:translateY(6px)}}
  /* backdrop-filter crea un bloque contenedor para los hijos fijos: se apaga mientras el panel está abierto */
  body.menu-abierto .cabecera{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--grafito)}
  .menu{flex-direction:column;gap:var(--e3)}
  .menu a{display:block;font:400 44px/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--blanco);padding-block:var(--e2)}
  .menu a[aria-current="true"]{text-underline-offset:10px}
}

/* portada */
.portada{position:relative;min-height:min(calc(100svh - var(--alto-cabecera)),880px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.portada-foto{position:absolute;inset:0;z-index:-3;overflow:hidden}
.portada-fondo{width:100%;height:112%;object-fit:cover;object-position:62% 60%}
@media (min-width:840px) and (pointer:fine){.portada-fondo{will-change:transform}}
.portada::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(11,11,13,.15) 0%,rgba(11,11,13,.45) 50%,var(--negro) 100%),linear-gradient(90deg,rgba(11,11,13,.85) 0%,rgba(11,11,13,.35) 45%,rgba(11,11,13,0) 70%)}
.portada-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 85% 15%,rgba(62,80,126,.45),transparent 70%),radial-gradient(45% 40% at 8% 95%,rgba(185,25,47,.25),transparent 70%)}
.portada-contenido{width:100%;padding-block:var(--e10) var(--e8)}
.portada h1{max-width:12ch}
.portada h1 .linea{display:inline-block}
.portada-texto{max-width:560px;margin-top:var(--e5);color:var(--blanco)}
.claqueta{border-top:1px solid var(--linea);background:rgba(11,11,13,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.claqueta dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.claqueta div{display:flex;flex-direction:column;gap:var(--e1);padding:var(--e5) 0}
.claqueta div+div{padding-left:var(--e6);border-left:1px solid var(--linea)}
.claqueta dt{font:400 28px/1 var(--display);letter-spacing:.02em;color:var(--blanco)}
.claqueta dd{margin:0;font-size:var(--t-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--platino)}
@media (max-width:839px){.portada-fondo{object-position:44% 62%}}
@media (max-width:599px){
  .portada-contenido{padding-block:var(--e8) var(--e7)}
  .claqueta dl{grid-template-columns:1fr}
  .claqueta div{padding:var(--e3) 0}
  .claqueta div+div{padding-left:0;border-left:0;border-top:1px solid var(--linea)}
  .claqueta dt{font-size:1.375rem}
}

/* tarjetas */
.tarjetas{display:grid;gap:var(--e4);margin-top:var(--e7)}
.tres{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:var(--e3);padding:var(--e6);background:var(--cristal);border:1px solid var(--linea);border-radius:var(--r3);transition:border-color var(--dur-salida) var(--ease)}
@media (hover:hover) and (pointer:fine){.tarjeta:hover{border-color:var(--linea-fuerte)}}
.tarjeta-con-foto{padding-top:0}
.tarjeta-foto{margin:0 calc(-1 * var(--e6)) var(--e4);aspect-ratio:3/2;overflow:hidden;border-radius:var(--r3) var(--r3) 0 0;border-bottom:1px solid var(--linea);background:var(--grafito)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tarjeta-con-foto:hover .tarjeta-foto img{transform:scale(1.02)}}
.tarjeta-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--e3)}
.numero{font-family:var(--display);font-size:var(--t-dato);letter-spacing:.2em;color:var(--rojo-texto)}
.tarjeta h3{margin-top:var(--e2)}
.tarjeta-texto{font-size:var(--t-cuerpo)}

/* precios: selector de tamaño */
.tamanos-titulo{margin-top:var(--e7);font-size:var(--t-dato);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--platino)}
.tamanos{position:relative;display:flex;gap:var(--e1);width:fit-content;max-width:100%;margin:var(--e3) 0 0;padding:var(--e1);border:1px solid var(--linea-fuerte);border-radius:var(--rp);background:var(--carbon)}
.tamanos legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tamano-opcion{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--e2) var(--e5);border-radius:var(--rp);cursor:pointer;transition:background var(--dur-salida) var(--ease),transform var(--dur-pulso) var(--ease-out)}
.tamano-opcion:active{transform:scale(.98)}
.tamano-opcion input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tamano-letra{font:400 24px/1 var(--display);color:var(--blanco)}
.tamano-veh{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--platino);white-space:nowrap}
/* sin JS el fondo rojo cambia de golpe; con JS lo pinta la copia activa recortada */
html:not(.js) .tamano-opcion:has(input:checked){background:var(--rojo)}
html:not(.js) .tamano-opcion:has(input:checked) .tamano-veh{color:var(--blanco)}
.tamanos-activo{position:absolute;inset:var(--e1);display:flex;gap:var(--e1);background:var(--rojo);border-radius:var(--rp);color:var(--blanco);pointer-events:none;opacity:0;clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 220ms var(--ease-out),opacity var(--dur-salida) var(--ease)}
.tamanos-activo.visible{opacity:1}
.tamanos-activo .tamano-opcion{cursor:default}
.tamanos-activo .tamano-veh{color:var(--blanco)}
.tamano-opcion:has(input:focus-visible){outline:2px solid var(--azul-claro);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tamano-opcion:not(:has(input:checked)):hover{background:var(--cristal)}}
@media (max-width:599px){.tamanos{width:100%}.tamano-opcion{flex:1;padding-inline:var(--e2)}.tamano-veh{display:none}}

/* precios: fichas por tamaño (lavado y pulido) */
.fichas{display:grid;gap:var(--e4);margin-top:var(--e6)}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--e6);align-items:start;padding:var(--e6);background:var(--cristal);border:1px solid var(--linea);border-radius:var(--r3)}
.ficha-texto p{margin-top:var(--e3);font-size:var(--t-cuerpo)}
.ficha-texto .boton{margin-top:var(--e5)}
.ficha-precios{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)}
.ficha-precio{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tamano precio" "detalle precio";column-gap:var(--e4);align-items:center;padding:var(--e3) var(--e4);min-height:76px;border:1px solid var(--linea);border-radius:var(--r2);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur-pulso) var(--ease-out)}
.ficha-precio:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.ficha-precio:hover{border-color:var(--linea-fuerte)}}
.ficha-precio .tamano{grid-area:tamano}
.ficha-precio .detalle{grid-area:detalle}
.ficha-precio .precio{grid-area:precio;justify-self:end;font-size:var(--t-precio);transform:scale(.75);transform-origin:right center;transition:transform var(--dur) var(--ease-out)}
body[data-tamano] .ficha-precio{opacity:.5}
body[data-tamano] .ficha-precio .precio{transform:scale(.6)}
body[data-tamano="s"] .ficha-precio[data-tamano="s"],body[data-tamano="m"] .ficha-precio[data-tamano="m"],body[data-tamano="xl"] .ficha-precio[data-tamano="xl"]{opacity:1;border-color:var(--rojo-vivo);background:rgba(216,33,59,.08)}
body[data-tamano="s"] .ficha-precio[data-tamano="s"] .precio,body[data-tamano="m"] .ficha-precio[data-tamano="m"] .precio,body[data-tamano="xl"] .ficha-precio[data-tamano="xl"] .precio{transform:none}
@media (max-width:899px){.ficha{grid-template-columns:1fr;gap:var(--e5)}.ficha-texto .boton{margin-top:var(--e4)}}

.tamano{font-size:var(--t-dato);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-texto)}
.precio{font-family:var(--display);line-height:1;color:var(--blanco);letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.precio small{font:500 var(--t-dato)/1 var(--sans);letter-spacing:.1em;color:var(--platino);margin-left:var(--e1)}
.desde{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--platino);margin-right:var(--e1)}
.detalle{font-size:var(--t-menor);color:var(--platino)}

/* precios: carta tipo diner (tapiz y extras) */
.carta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);margin-top:var(--e4)}
.carta-grupo{padding:var(--e6);background:var(--cristal);border:1px solid var(--linea);border-radius:var(--r3)}
.carta-grupo>p{margin-top:var(--e3);font-size:var(--t-cuerpo)}
.carta-lista{list-style:none;margin:var(--e5) 0 0;padding:0}
.carta-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e2) var(--e4);padding:var(--e4) 0;border-top:1px solid var(--linea)}
.carta-item .icono{grid-row:1/span 3;margin-top:2px}
.carta-item.sin-icono{grid-template-columns:minmax(0,1fr)}
.carta-fila{display:flex;align-items:baseline;gap:var(--e3);min-width:0}
.carta-fila .tamano{flex:none}
.guia{flex:1;min-width:12px;border-bottom:2px dotted var(--linea-fuerte);transform:translateY(-5px)}
.carta-fila .precio{font-size:1.75rem;flex:none}
.carta-item .detalle{font-size:var(--t-menor)}
.carta-accion{justify-self:start;padding-block:var(--e3);margin-block:calc(-1 * var(--e3));font-size:var(--t-dato);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-texto);text-decoration-color:transparent;transition:text-decoration-color var(--dur-salida) var(--ease),transform var(--dur-pulso) var(--ease-out)}
.carta-accion:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.carta-accion:hover{text-decoration-color:var(--rojo-texto)}}
@media (max-width:899px){.carta{grid-template-columns:1fr}}
@media (max-width:420px){.carta-fila{flex-wrap:wrap}.guia{display:none}}

/* banda con la van */
.banda{position:relative;isolation:isolate;min-height:600px;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--linea)}
.banda-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;z-index:-2}
.banda::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,11,13,.1) 0%,rgba(11,11,13,.7) 50%,rgba(11,11,13,.94) 100%)}
.banda-contenido{width:100%;padding-block:var(--e9)}
.banda-caja{max-width:520px;margin-left:auto}
.banda-caja h2{margin-top:var(--e4)}
.banda-caja p{margin-top:var(--e4)}
.banda-caja .boton{margin-top:var(--e6)}
.sticker{display:inline-block;padding:var(--e2) var(--e3);background:var(--blanco);color:var(--negro);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-radius:var(--r1);transform:rotate(-4deg);box-shadow:0 2px 0 rgba(0,0,0,.5)}
@media (max-width:899px){
  .banda{display:block;min-height:0}
  .banda-foto{position:static;aspect-ratio:4/5;object-position:50% 55%}
  .banda::before{display:none}
  .banda-contenido{padding-block:var(--e7)}
  .banda-caja{max-width:none;margin-left:0}
}

/* preguntas frecuentes */
.preguntas{max-width:820px;margin-top:var(--e7);border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e5) 0;cursor:pointer;list-style:none;font:500 var(--t-cuerpo-g)/1.4 var(--sans);color:var(--blanco);transition:transform var(--dur-pulso) var(--ease-out)}
.pregunta summary:active{transform:scale(.99)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";flex:none;width:11px;height:11px;margin:0 6px 4px 0;border-right:2px solid var(--rojo-texto);border-bottom:2px solid var(--rojo-texto);transform:rotate(45deg);transition:transform 220ms var(--ease-out)}
.pregunta[open]:not([data-cerrando]) summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.pregunta-cuerpo{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dur-salida) var(--ease-out),opacity var(--dur-salida) var(--ease-out)}
.pregunta-interior{overflow:hidden}
.pregunta[open]:not([data-cerrando]) .pregunta-cuerpo{grid-template-rows:1fr;opacity:1;transition-duration:220ms}
@starting-style{.pregunta[open]:not([data-cerrando]) .pregunta-cuerpo{grid-template-rows:0fr;opacity:0}}
.pregunta p,.pregunta ul{max-width:640px;padding:0 0 var(--e5)}
.pregunta ul{margin:0;padding-left:1.1em}
.pregunta li+li{margin-top:var(--e2)}
.pregunta li::marker{color:var(--azul-texto)}

/* contacto */
.dos-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e8);align-items:start}
@media (max-width:899px){.dos-columnas{grid-template-columns:1fr;gap:var(--e7)}}
.datos{list-style:none;margin:var(--e6) 0 0;padding:0;display:grid;gap:var(--e3)}
.datos li{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);align-items:baseline;font-size:var(--t-cuerpo)}
.datos a,.pie-enlaces a{overflow-wrap:anywhere}
.datos span{font-size:var(--t-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.redes{display:flex;gap:var(--e4);margin-top:var(--e5)}

.formulario{display:grid;gap:var(--e4);padding:var(--e6);background:var(--cristal);border:1px solid var(--linea);border-radius:var(--r3)}
.campo{display:grid;gap:var(--e2)}
.campo label{font-size:var(--t-dato);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--platino)}
.campo input,.campo textarea{width:100%;padding:var(--e3) var(--e4);background:var(--carbon);color:var(--blanco);border:1px solid var(--linea-fuerte);border-radius:var(--r2);font:400 var(--t-cuerpo)/1.4 var(--sans);transition:border-color var(--dur-salida) var(--ease)}
.campo input:focus,.campo textarea:focus{border-color:var(--azul-claro);transition-duration:0ms}
.campo textarea{min-height:120px;resize:vertical}
.campo [aria-invalid="true"]{border-color:var(--rojo-vivo)}
.error{font-size:var(--t-dato);color:var(--rojo-texto)}
.estado{font-size:var(--t-menor);color:var(--blanco)}
.error,.estado{opacity:1;transform:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),display var(--dur) allow-discrete}
.error:empty,.estado:empty{display:none;opacity:0;transform:translateY(-4px)}
@starting-style{.error:not(:empty),.estado:not(:empty){opacity:0;transform:translateY(-4px)}}
.formulario-acciones{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
.nota{font-size:var(--t-dato);color:var(--gris)}

}

/* pie */
.pie{border-top:1px solid var(--linea);padding-block:var(--e8) var(--e6);background:var(--grafito)}
.pie-fila{display:grid;grid-template-columns:1fr auto;gap:var(--e6) var(--e8);align-items:start}
.pie-marca{display:inline-block;line-height:0}
.pie-marca img{height:40px;width:auto}
.pie-texto{margin-top:var(--e4);max-width:420px;font-size:var(--t-menor)}
.pie-derivacion{margin-top:var(--e3);max-width:420px;font-size:var(--t-dato);color:var(--gris)}
.pie-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3);font-size:var(--t-menor)}
.pie-enlaces a{display:inline-block;padding-block:var(--e1);margin-block:calc(-1 * var(--e1))}
.pie-legal{grid-column:1/-1;margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linea);font-size:var(--t-dato);color:var(--gris);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e3)}
@media (max-width:599px){.pie-fila{grid-template-columns:1fr}}

/* páginas breves */
.breve{min-height:60vh;display:grid;align-content:center}
.breve h1{font-size:var(--t-titulo)}
.breve p{margin-top:var(--e5);max-width:560px}
.columna{max-width:680px}
.columna h2{font-size:var(--t-subtitulo);margin-top:var(--e7)}
.columna h2+p{margin-top:var(--e3)}
.columna ul{padding-left:1.2em;margin:var(--e3) 0 0}
.columna li+li{margin-top:var(--e2)}

/* coreografía de bienvenida (Mejora 3, «Cortina de taller»): solo con html.bienvenida (una vez por sesión, la pone el <head>)
   y arranca con html.bienvenida-va cuando la foto de portada está decodificada. La foto no participa: es el LCP.
   Orden: luz, etiqueta, titular línea a línea con desenfoque, bajada, botones, claqueta. Termina a los 840 ms. */
html.bienvenida .portada-luz,html.bienvenida .portada .etiqueta,html.bienvenida .portada h1 .linea,html.bienvenida .portada-texto,html.bienvenida .portada .acciones .boton,html.bienvenida .claqueta{opacity:0}
html.bienvenida-va .portada-luz{animation:intro-luz 520ms var(--ease-suave) 0ms both}
html.bienvenida-va .portada .etiqueta{animation:intro-sube 260ms var(--ease-suave) 60ms both}
html.bienvenida-va .portada h1 .linea{animation:intro-linea 380ms var(--ease-suave) both}
html.bienvenida-va .portada h1 .linea:nth-child(1){animation-delay:120ms}
html.bienvenida-va .portada h1 .linea:nth-child(2){animation-delay:190ms}
html.bienvenida-va .portada-texto{animation:intro-sube 320ms var(--ease-suave) 300ms both}
html.bienvenida-va .portada .acciones .boton{animation:intro-boton 300ms var(--ease-out) both}
html.bienvenida-va .portada .acciones .boton:nth-child(1){animation-delay:380ms}
html.bienvenida-va .portada .acciones .boton:nth-child(2){animation-delay:430ms}
html.bienvenida-va .claqueta{animation:intro-claqueta 360ms var(--ease-suave) 440ms both}
@keyframes intro-luz{from{opacity:0}to{opacity:1}}
@keyframes intro-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes intro-linea{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-boton{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes intro-claqueta{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* reducción de movimiento: se conservan opacidad y color; se quitan desplazamientos, escalas, recortes y escalonados */
@media (prefers-reduced-motion:reduce){
  .boton:active,.ficha-precio:active,.tamano-opcion:active,.pregunta summary:active,.carta-accion:active,.menu-boton:active{transform:none}
  html.js .banda .banda-foto{transform:none;transition:opacity 300ms var(--ease)}
  .nav,.nav[data-abierto="true"]{transform:none}
  .menu li,.nav[data-abierto="true"] .menu li{transform:none;transition-delay:0ms}
  .menu-indicador{transition:opacity var(--dur-salida) var(--ease)}
  .tamanos-activo{transition:opacity var(--dur-salida) var(--ease)}
  .ficha-precio .precio{transition:none}
  .tarjeta-foto img{transition:none}
  .tarjeta-con-foto:hover .tarjeta-foto img{transform:none}
  .pregunta-cuerpo,.pregunta[open]:not([data-cerrando]) .pregunta-cuerpo{transition:opacity var(--dur-salida) var(--ease)}
  .pregunta summary::after{transition:none}
  .error,.estado{transform:none}
  .error:empty,.estado:empty{transform:none}
}


/* Aviso de cookies de dos botones (regla 5, 15-09-2026; lo crea consentimiento.js): tarjeta fija abajo con los tokens del sitio. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.aviso-cookies[hidden]{display:none}
.aviso-cookies{position:fixed;left:var(--e4);right:var(--e4);bottom:var(--e4);z-index:30;max-width:640px;margin:0 auto;padding:var(--e4) var(--e5);background:var(--grafito);color:var(--platino);border:1px solid var(--linea-fuerte);border-radius:var(--r2);font-size:var(--t-menor);line-height:1.5;opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.aviso-cookies.visible{opacity:1;transform:none}
.aviso-cookies p{margin:0 0 var(--e3);max-width:56ch}
.aviso-cookies a{color:var(--azul-texto);text-decoration-color:currentColor}
.aviso-cookies-acciones{display:flex;flex-wrap:wrap;gap:var(--e3)}
.aviso-cookies button{min-height:44px;padding:0 var(--e4);border:1px solid var(--linea-fuerte);border-radius:var(--r2);background:transparent;color:var(--blanco);font:600 var(--t-menor)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
.aviso-cookies button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .aviso-cookies button:hover{border-color:var(--blanco);background:var(--cristal)}
}
@media (max-width:560px){
  .aviso-cookies{left:var(--e3);right:var(--e3);bottom:calc(var(--e3) + env(safe-area-inset-bottom));padding:var(--e4)}
  .aviso-cookies-acciones{flex-wrap:nowrap;gap:var(--e2)}
  .aviso-cookies button{flex:1 1 0;min-width:0;padding:0 var(--e2)}
}
@media (max-height:500px) and (min-width:561px){
  .aviso-cookies{bottom:var(--e2);padding:var(--e3) var(--e4)}
}
@media (prefers-reduced-motion:reduce){
  .aviso-cookies{transform:none;transition:opacity var(--dur) var(--ease)}
  .aviso-cookies button:active{transform:none}
}
@media print{.aviso-cookies{display:none}}
/* «Preferencias de cookies» en el pie: un botón con el mismo aspecto que los enlaces */
.pie-enlaces .enlace{display:inline-block;background:none;border:0;padding:var(--e1) 0;margin-block:calc(-1 * var(--e1));font:inherit;color:var(--blanco);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--linea-fuerte);cursor:pointer;touch-action:manipulation;transition:text-decoration-color var(--dur-salida) var(--ease)}
@media (hover:hover) and (pointer:fine){.pie-enlaces .enlace:hover{text-decoration-color:var(--blanco)}}
/* Política de privacidad: subtítulos y tabla de cookies */
.columna h3{font-size:var(--t-cuerpo-g);font-family:var(--sans);font-weight:600;margin:var(--e5) 0 0}
.columna h3+p{margin-top:var(--e2)}
.tabla-cookies{margin-top:var(--e4);overflow-x:auto}
.tabla-cookies table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--t-menor);line-height:1.4}
.tabla-cookies th,.tabla-cookies td{text-align:left;vertical-align:top;padding:var(--e2) var(--e3) var(--e2) 0;border-bottom:1px solid var(--linea)}
.tabla-cookies th{color:var(--azul-texto);font-weight:600}
.tabla-cookies code{font-family:Menlo,Consolas,monospace;font-size:.8125rem;color:var(--blanco)}