/* =========================================================================
   pidetupipa.com — sistema de estilos
   Dirección: psicodelia de cartel (Moscoso, Wilson) pasada por tipografía
   variable actual. Colores que vibran entre sí, tipo ancho y elástico.
   Todo se construye con tokens. No metas valores sueltos aquí abajo.
   ========================================================================= */

:root{
  /* --- tinta base: noche profunda, no negro --- */
  --tinta:      #0B0616;
  --tinta-2:    #150C28;
  --tinta-3:    #241443;

  /* --- los cuatro que vibran --- */
  --lima:       #C6FF3D;
  --magenta:    #FF3DA5;
  --naranja:    #FF7A1A;
  --cian:       #35E7FF;
  --violeta:    #8B5CF6;

  --hueso:      #F6F1E6;

  /* Degradado del titular: los tres colores estan MUESTREADOS del arco del
     propio logotipo, no elegidos a ojo. Cian -> azul -> violeta. */
  --grad-a:     #16D5FB;
  --grad-b:     #0B92E2;
  --grad-c:     #B228FB;

  /* roles */
  --fondo:      var(--tinta);
  --fondo-alt:  var(--tinta-2);
  --texto:      var(--hueso);
  --texto-sec:  #C3B8D8;
  --texto-ter:  #8E7FAC;
  --borde:      #2E1D52;
  --acento:     var(--lima);
  --acento-2:   var(--magenta);
  --acento-txt: #0B0616;
  --tarjeta:    #150C28;
  --sombra:     0 0 0 1px rgba(198,255,61,.06), 0 24px 60px -30px rgba(255,61,165,.5);

  /* --- tipografía --- */
  --display: "Anybody", "Archivo Expanded", "Arial Black", system-ui, sans-serif;
  --texto-f: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-xs: .8rem;
  --t-sm: .9rem;
  --t-base: 1rem;
  --t-md: 1.075rem;
  --t-lg: clamp(1.15rem, .95rem + .75vw, 1.45rem);
  --t-h3: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --t-h2: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem);
  /* MEDIDO: el titular ocupa 16,2 px de ancho por cada px de cuerpo. Con
     1200 px de contenedor, el maximo que cabe en UNA linea son 74 px; se
     deja en 70,4 (4,4 rem) para tener margen. El tramo en vw sale de la
     misma cuenta sobre el ancho de ventana menos los margenes. */
  --t-h1: clamp(2.1rem, 5.6vw, 4.4rem);

  --e1: .375rem;  --e2: .625rem;  --e3: 1rem;
  --e4: 1.5rem;   --e5: 2.25rem;  --e6: 3.5rem;
  --e7: 5rem;     --e8: 7.5rem;

  --r-sm: 4px;  --r-md: 10px;  --r-lg: 20px;  --r-pil: 999px;
  --ancho: 1200px;
  --trans: 200ms cubic-bezier(.2,.8,.3,1);
}

/* La psicodelia vive en oscuro. En claro se conserva la misma paleta pero
   invertida en luminancia, para que quien tenga el sistema en claro no reciba
   un muro de neón sobre blanco. */
@media (prefers-color-scheme: light){
  :root:not([data-tema="oscuro"]){
    --fondo:      #F6F1E6;
    --fondo-alt:  #EDE4D6;
    --texto:      #180B2E;
    --texto-sec:  #4A3768;
    --texto-ter:  #6D5C8C;
    --borde:      #D3C0E8;
    --acento:     #6A17C7;
    --acento-2:   #C2005F;
    --acento-txt: #FFFFFF;
    --tarjeta:    #FFFFFF;
    --sombra:     0 2px 0 rgba(24,11,46,.9), 0 20px 40px -28px rgba(194,0,95,.45);
    --grad-a:     #0A7FA0;
    --grad-b:     #0A5CAE;
    --grad-c:     #6B18B0;
  }
}
:root[data-tema="claro"]{
  --fondo:#F6F1E6; --fondo-alt:#EDE4D6; --texto:#180B2E; --texto-sec:#4A3768;
  --texto-ter:#6D5C8C; --borde:#D3C0E8; --acento:#6A17C7; --acento-2:#C2005F;
  --acento-txt:#FFFFFF; --tarjeta:#FFFFFF;
  --grad-a:#0A7FA0; --grad-b:#0A5CAE; --grad-c:#6B18B0;
  --sombra:0 2px 0 rgba(24,11,46,.9), 0 20px 40px -28px rgba(194,0,95,.45);
}

/* En movil los mismos ritmos verticales del escritorio dejan 240 px muertos
   entre seccion y seccion: mucho scroll para no ver nada. Se recorta el
   escalon alto de la escala, no cada regla una por una. */
@media (max-width:700px){
  :root{ --e6:2.5rem; --e7:3rem; --e8:4rem; }
}

/* ---------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
#inicio{ scroll-margin-top:var(--alto-cab,72px); }   /* el logo lleva arriba del todo, sin tapar la tira verde */
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--texto-f);
  font-size:var(--t-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* halos de color que se mueven despacio detrás de todo. Puro CSS: ni una
   petición de red, y con reduced-motion se quedan quietos. */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 18%, color-mix(in srgb, var(--acento-2) 34%, transparent), transparent 62%),
    radial-gradient(42vw 42vw at 88% 12%, color-mix(in srgb, var(--cian) 24%, transparent), transparent 62%),
    radial-gradient(46vw 46vw at 72% 82%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 62%),
    radial-gradient(34vw 34vw at 22% 88%, color-mix(in srgb, var(--violeta) 30%, transparent), transparent 62%);
  filter:blur(30px);
  animation:deriva 34s ease-in-out infinite alternate;
}
@keyframes deriva{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(-3%,2%,0) scale(1.08); }
  100% { transform:translate3d(2%,-3%,0) scale(1.03); }
}

/* grano: textura de cartel serigrafiado, en SVG embebido */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{
  font-family:var(--display); margin:0;
  font-weight:800; font-stretch:118%;
  line-height:.95; letter-spacing:-.02em;
  text-transform:uppercase;
}
h1{ font-size:var(--t-h1); font-stretch:125%; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.08; font-stretch:110%; }
p{ margin:0; }
b,strong{ font-weight:700; }
img,svg{ max-width:100%; }
a{ color:inherit; }

/* el truco de cartel: la palabra que importa, rellena de degradado vibrante */
.vibra{
  background:linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 40%, var(--grad-c) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@supports not (background-clip: text){ .vibra{ color:var(--grad-b); -webkit-text-fill-color:currentColor; } }

.oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:var(--e3); top:-5rem; z-index:100;
  background:var(--acento); color:var(--acento-txt);
  padding:var(--e2) var(--e4); border-radius:var(--r-pil);
  text-decoration:none; font-weight:700; transition:top var(--trans);
}
.saltar:focus{ top:var(--e3); }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cian);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.ojo{
  font-family:var(--display); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; font-stretch:112%;
  color:var(--acento-2); margin-bottom:var(--e3);
}
.entrada{ font-size:var(--t-lg); color:var(--texto-sec); max-width:56ch; line-height:1.5; }
.entrada--centro{ margin-inline:auto; text-align:center; }

/* -------------------------------------------------------------- botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:50px; padding:0 var(--e4);
  font-family:var(--display); font-size:var(--t-sm); font-weight:800;
  font-stretch:112%; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--r-pil); border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background var(--trans), color var(--trans), border-color var(--trans),
             transform var(--trans), box-shadow var(--trans);
}
.btn--primario{
  background:var(--acento); color:var(--acento-txt);
  box-shadow:4px 4px 0 var(--acento-2);
}
.btn--primario:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--acento-2); }
.btn--primario:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--acento-2); }
.btn--linea{ border-color:var(--acento); color:var(--acento); background:transparent; }
.btn--linea:hover{ background:var(--acento); color:var(--acento-txt); }
.btn--fantasma{ color:var(--texto-sec); background:transparent; }
.btn--fantasma:hover{ color:var(--cian); }
.btn--sm{ min-height:44px; padding:0 var(--e3); font-size:var(--t-xs); }
.btn--lg{ min-height:60px; padding:0 var(--e5); font-size:var(--t-base); }

/* ------------------------------------------------------------- cabecera --- */
.cab{
  position:sticky; top:0; z-index:40;
  /* rejilla y no flex: con 1fr a cada lado, la columna del medio queda
     centrada en la barra pase lo que pase con la marca o con el boton */
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:var(--e4);
  max-width:var(--ancho); margin-inline:auto;
  padding:var(--e3) var(--e4);
}
.cab::before{
  content:""; position:absolute; inset:0; z-index:-1;
  left:50%; transform:translateX(-50%); width:100vw;
  background:color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:2px solid var(--borde);
}
@supports not (backdrop-filter: blur(1px)){ .cab::before{ background:var(--fondo); } }
.cab__marca{
  display:flex; align-items:center; gap:var(--e2); min-height:44px;
  font-family:var(--display); font-weight:800; font-stretch:120%;
  font-size:clamp(1rem, .9rem + .4vw, 1.25rem);
  letter-spacing:-.01em; text-decoration:none; text-transform:lowercase;
}
/* El emblema va grande junto a la palabra y asoma un poco por debajo de la
   barra. El margen negativo evita que la barra crezca por ello. */
.cab__logo{
  width:clamp(46px, 5.4vw, 66px); height:auto; flex:none; display:block;
  margin-block:-4px calc(-0.12 * clamp(46px, 5.4vw, 66px));
  position:relative; z-index:2;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.5));
}
.cab__marca{ position:relative; z-index:2; }
.cab__tld{ color:var(--texto-ter); font-weight:400; }
.cab__cta{ gap:.3em; justify-self:end; }
.cab__nav{ display:flex; gap:var(--e5); justify-self:center; }
.cab__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-base); font-weight:600; color:var(--texto); text-decoration:none;
  transition:color var(--trans);
}
.cab__nav a:hover{ color:var(--acento); }
.cab__nav a{ white-space:nowrap; }
/* seis enlaces y el boton no caben holgados por debajo de 1240: se aprietan
   antes de que la barra se parta en dos lineas o empuje la pagina de lado */
@media (max-width:1240px){
  .cab__nav{ gap:var(--e3); }
  .cab__cta .largo{ display:none; }
}
@media (max-width:1080px){
  .cab{ gap:var(--e3); }
  .cab__nav a{ font-size:var(--t-sm); }
  .cab__tld{ display:none; }
}
@media (max-width:900px){
  .cab{ grid-template-columns:1fr auto; }   /* sin menu: marca y boton */
  .cab__nav{ display:none; }
}
@media (max-width:700px){
  .heroe{ padding-block:146px 134px; padding-inline:var(--e4); }
  .tira--alta{ top:30px; transform:rotate(-3.5deg); }
  .tira--baja{ bottom:18px; transform:rotate(3.5deg); }
  .cinta__pista{ gap:var(--e3); }
}
@media (max-width:560px){
  .cab{ padding:var(--e2) var(--e3); gap:var(--e2); }
  .cab__marca{ font-size:.95rem; min-width:0; }
  .cab__tld{ display:none; }
  .cab__cta{ padding:0 var(--e3); white-space:nowrap; }
  .cab__cta .largo{ display:none; }
}

/* ---------------------------------------------------------------- héroe --- */
.heroe{
  padding-block:198px 188px;        /* hueco de las tiras, ver arriba */
  padding-inline:max(var(--e4), calc((100% - var(--ancho)) / 2));
  text-align:center;
}
/* La imagen mas grande de la web y lo primero que se ve: prioridad alta y
   cotas declaradas, para que no baile el contenido al cargar. */
.heroe__logo{
  width:clamp(200px, 25vw, 300px); height:auto;
  display:block; margin:0 auto var(--e4);
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.55));
}
.heroe h1{ margin-bottom:var(--e4); }
/* las dos mitades del titular van seguidas: UNA SOLA LINEA de 600 px para
   arriba, y por debajo parten solas donde toque */
.heroe h1 .linea{ display:inline; }
@media (min-width:600px){ .heroe h1{ white-space:nowrap; } }
.heroe .entrada{ margin-inline:auto; margin-bottom:var(--e5); }
.heroe__botones{ display:flex; gap:var(--e3); justify-content:center; flex-wrap:wrap; }
.pruebas{
  list-style:none; margin:var(--e6) 0 0; padding:0;
  display:flex; gap:var(--e2); flex-wrap:wrap; justify-content:center;
}
.pruebas li{
  font-family:var(--display); font-size:var(--t-xs); font-weight:700;
  font-stretch:108%; letter-spacing:.06em; text-transform:uppercase;
  padding:var(--e2) var(--e3);
  border:2px solid var(--borde); border-radius:var(--r-pil);
  color:var(--texto-sec);
}
.pruebas li b{ color:var(--acento); }


/* ==================== TIRAS DE IDIOMAS EN EL HEROE ======================
   Dos bandas macizas cruzadas en diagonal, arriba y abajo del heroe, con las
   palabras corriendo en sentidos opuestos. El heroe lleva overflow:hidden
   para que las tiras salgan por los dos lados sin arrastrar scroll.

   OJO CON EL HUECO: la banda mide 120 % de ancho y va girada, asi que sus
   extremos SUBEN Y BAJAN respecto al centro (a 2,75 grados y 1340 px de
   ancho son unos 32 px arriba y abajo). Por eso el heroe reserva 168 px
   arriba y 176 abajo: si no, el titular choca con la punta de la banda.
   ======================================================================== */
.heroe{
  position:relative; overflow:hidden;
  /* bandas finas: el protagonismo es del logo y el titular */
  --pad-tira:clamp(4px, .2vw + 3px, 7px);
  --letra-tira:clamp(1rem, .8rem + .55vw, 1.35rem);
}

.tira{
  position:absolute; left:-10%; width:120%; z-index:1;
  /* banda con aire: la palabra no puede rozar los bordes ni perder las
     descendentes; el alto crece con la letra */
  padding:var(--pad-tira) 0;
  overflow:hidden;
  border-block:2px solid var(--fondo);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.9);
}
.tira--alta{
  top:52px; transform:rotate(-2.75deg);   /* deja pasar el emblema que asoma */
  background:var(--acento); color:var(--acento-txt);
}
.tira--baja{
  bottom:28px; transform:rotate(2.75deg);
  background:var(--acento-2); color:#fff;
}

/* PRIMER PANTALLAZO: el heroe mide justo lo que queda de pantalla bajo la
   cabecera (--alto-cab lo pone el JS con la altura real), con la tira verde
   pegada arriba y la rosa pegada abajo: las dos se ven al entrar, sin tocar
   nada. Entre ellas se reserva el alto de la banda mas lo que sube y baja su
   punta al ir girada; lo de dentro se encoge (ajustaHeroe, en app.js) si no
   cabe en lo que queda. */
.heroe{
  --alto-tira:calc(2 * var(--pad-tira) + 1.2 * var(--letra-tira) + 4px);
  /* la punta visible de una banda girada 2,75 grados sube o baja medio ancho
     de pantalla por el seno: 2,4vw. Las tiras se separan eso del borde para
     que ninguna esquina se corte, y el hueco interior lo cuenta tambien */
  --punta:2.4vw;
  --hueco-tira:calc(12px + var(--punta) + var(--alto-tira) + 1.6vw + 8px);
  box-sizing:border-box;
  height:calc(100vh - var(--alto-cab, 72px));
  height:calc(100svh - var(--alto-cab, 72px));
  min-height:320px;
  padding-block:var(--hueco-tira);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.heroe .tira--alta{ top:calc(12px + var(--punta)); }
.heroe .tira--baja{ bottom:calc(12px + var(--punta)); }
@media (max-width:700px){ .heroe{ --punta:3.1vw; } }   /* alli giran 3,5 grados */
.heroe__cuerpo{ width:100%; transform-origin:50% 50%; }
.heroe__logo{ width:clamp(130px, min(32vw, 36vh), 430px); margin-bottom:var(--e3); }
/* el titular va en una linea y usa todo el ancho de pantalla, no el de la
   rejilla: 5,6vw es lo maximo que cabe sin salirse por la derecha */
.heroe{ padding-inline:var(--e4); }
.heroe h1{ font-size:clamp(2.1rem, 5.6vw, 6.5rem); margin-bottom:var(--e3); }
/* lo secundario, apretado: el sitio que libera va al logo y al titular */
.heroe .entrada{ max-width:64ch; margin-bottom:var(--e4); }
.heroe .pruebas{ margin-top:var(--e4); }
@media (max-width:600px){
  .heroe .entrada{ font-size:1rem; }
  .heroe__botones{ flex-wrap:nowrap; gap:var(--e2); }
  .heroe__botones .btn{ padding-inline:var(--e3); font-size:.75rem; }
  .heroe .pruebas{ gap:var(--e1); }
  .heroe .pruebas li{ padding:var(--e1) var(--e2); font-size:.62rem; }
}
@media (min-width:1100px){
  .heroe .pruebas{ flex-wrap:nowrap; gap:var(--e1); }
  .heroe .pruebas li{ padding:var(--e1) var(--e2); white-space:nowrap; }
}

.cinta__pista{
  display:flex; align-items:center; gap:var(--e4);
  margin:0; padding:0; list-style:none; width:max-content;
  will-change:transform;
}
/* la animacion solo arranca cuando el JS ha duplicado la lista */
.tira--alta .cinta__pista.doble{ animation:corre-izq 44s linear infinite; }
.tira--baja .cinta__pista.doble{ animation:corre-der 56s linear infinite; }
@keyframes corre-izq{ from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }
@keyframes corre-der{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* al pasar el raton o al tabular dentro se para: si no, no se puede leer */
.tira:hover .cinta__pista,
.tira:focus-within .cinta__pista{ animation-play-state:paused; }

.cinta__pista li{
  display:flex; align-items:baseline; gap:.4em;
  flex:none; white-space:nowrap;
}
.cinta__pal{
  font-family:var(--display), "Noto Sans", "Segoe UI", sans-serif;
  font-weight:800; font-stretch:110%;
  font-size:var(--letra-tira); line-height:1.2;
  color:inherit;
}
.cinta__idi{
  font-family:var(--texto-f), "Noto Sans", sans-serif;
  font-size:clamp(.7rem, .55rem + .35vw, .8rem); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.85;
}

@media (prefers-reduced-motion: reduce){
  .cinta__pista{ animation:none !important; }
  .tira{ overflow-x:auto; }        /* se puede recorrer a mano */
}

/* =================== EL ESTUDIO: VISOR + OPCIONES =======================
   Dos columnas: el visor se queda pegado mientras se recorren los modulos,
   que es lo que permite ver el efecto de cada eleccion sin perderla de vista.
   ======================================================================== */
.estudio{
  display:grid; grid-template-columns:7fr 5fr; gap:var(--e5);
  align-items:start; margin-top:var(--e6);
}
@media (max-width:980px){ .estudio{ grid-template-columns:1fr; } }

.visor{
  position:sticky; top:96px;
  background:var(--tarjeta); border:2px solid var(--borde);
  border-radius:var(--r-lg); padding:var(--e4); box-shadow:var(--sombra);
}


.visor__barra{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); }
.visor__vivo{
  display:inline-flex; align-items:center; gap:var(--e2);
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-sec);
}
.visor__vivo i{
  width:9px; height:9px; border-radius:50%; background:var(--acento);
  animation:latido 2s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* Cuantos quemadores lleva la combinacion, arriba y siempre a la vista:
   es lo que de verdad cambia de una a otra. */
.visor__tomas{
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--acento-txt); background:var(--acento);
  padding:5px var(--e3); border-radius:var(--r-pil);
}

/* ======================= LA RULETA DE MODELOS =========================
   Los nueve modelos giran en una sola imagen. La pieza del centro es la
   elegida; las de al lado asoman mas pequenas y apagadas para que se vea que
   hay mas y hacia donde girar. Todas apoyan en la MISMA linea de suelo
   (align-items:end), que es lo que hace que parezca un giro y no un salto.
   ====================================================================== */
.ruleta{
  /* El ancho de celda es el PASO de la ruleta, no el tamano de la pipa: con
     celdas anchas las vecinas se van fuera del recorte y no asoma ninguna.
     Medido: a 52% caian en el borde justo. */
  --pieza:38%;
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--e2); margin:var(--e4) 0 var(--e3);
}
.ruleta__ventana{
  position:relative; overflow:hidden;
  border-radius:var(--r-md); background:var(--halo);
  padding:var(--e4) 0 var(--e5);
  /* pan-y deja pasar el scroll vertical: arrastrar de lado gira la ruleta,
     arrastrar hacia abajo sigue recorriendo la pagina */
  touch-action:pan-y;
}
.ruleta__ventana::after{
  content:""; position:absolute; left:50%; bottom:calc(var(--e4) - 4px);
  width:42%; height:20px; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
.ruleta__pista{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-end;
  will-change:transform;
  /* una curva mas larga y con menos rebote: el giro se lee como un frenado
     de ruleta y no como un salto */
  transition:transform .52s cubic-bezier(.22,.61,.24,1);
}
.ruleta__pieza{
  flex:0 0 var(--pieza);
  display:grid; place-items:end center;
  cursor:pointer;
  opacity:.16; transform:scale(.46); transform-origin:50% 100%;
  /* la misma curva y el mismo tiempo que la pista: si no coinciden, la pipa
     acaba de crecer despues de haber llegado al centro y se ve a destiempo */
  will-change:transform, opacity;
  transition:opacity .52s cubic-bezier(.22,.61,.24,1),
             transform .52s cubic-bezier(.22,.61,.24,1);
}
.ruleta__pieza--vecina{ opacity:.5; transform:scale(.66); }
.ruleta__pieza--activa{ opacity:1; transform:scale(1); cursor:default; }
.ruleta__foto{
  /* Es un <canvas>, no un <img>: manda el ALTO, y el ancho lo pone su propia
     proporcion. width:auto sobre un canvas respeta su relacion de aspecto. */
  display:block; width:auto; height:auto;
  max-width:100%; max-height:340px;
  /* la pipa que entra aparece en vez de dar un salto en blanco */
  animation:asoma .3s ease both;
}
@keyframes asoma{ from{ opacity:.25 } to{ opacity:1 } }

.ruleta__giro{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.5rem; line-height:1;
  color:var(--texto); background:var(--tarjeta);
  border:2px solid var(--borde); cursor:pointer;
  transition:border-color var(--trans), color var(--trans), opacity var(--trans);
}
.ruleta__giro:hover:not(:disabled){ border-color:var(--acento); color:var(--acento); }
.ruleta__giro:disabled{ opacity:.28; cursor:default; }
.ruleta__giro:focus-visible{ outline:3px solid var(--cian); outline-offset:3px; }

/* los puntos son radios de verdad: las flechas del teclado ya funcionan */
.ruleta__puntos{ display:flex; justify-content:center; flex-wrap:wrap; gap:2px; }
/* El punto se ve de 10 px, pero la zona que se toca mide 44: con nueve
   modelos en un movil, un blanco de 22 px es imposible de acertar. */
.pt{
  cursor:pointer; display:grid; place-items:center;
  min-height:44px; min-width:30px; padding:0;
}
.pt input{ position:absolute; opacity:0; width:1px; height:1px; }
.pt > span{
  display:block; width:10px; height:10px; border-radius:50%;
  border:2px solid var(--texto-ter); background:transparent;
  transition:background var(--trans), border-color var(--trans), transform var(--trans);
}
.pt:hover > span{ border-color:var(--texto); }
.pt input:checked + span{
  background:var(--acento); border-color:var(--acento); transform:scale(1.35);
}
.pt input:focus-visible + span{ outline:3px solid var(--cian); outline-offset:4px; }

/* nombre, precio y lema del modelo que esta en el centro */
.visor__cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e3); margin-top:var(--e4);
}
.visor__nombre{ margin:0; font-size:var(--t-h3); }
.visor__precio{
  font-family:var(--display); font-weight:800; font-size:var(--t-sm);
  color:var(--texto-ter); white-space:nowrap;
}
.visor__precio b{
  font-weight:900; font-stretch:118%; font-size:1.5rem; color:var(--acento);
  font-variant-numeric:tabular-nums;
}
.visor__lema{
  margin-top:var(--e2); font-size:var(--t-sm);
  color:var(--texto-sec); line-height:1.55;
}

.visor__ficha{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e2);
  margin:var(--e4) 0 0; padding-top:var(--e3); border-top:2px solid var(--borde);
}
.visor__ficha > div{
  background:color-mix(in srgb, var(--fondo) 60%, transparent);
  border:1px solid var(--borde); border-radius:var(--r-md); padding:var(--e2);
}
.visor__ficha dt{
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.visor__ficha dd{
  margin:2px 0 0; font-family:var(--display); font-weight:800;
  font-size:var(--t-sm); color:var(--acento); font-variant-numeric:tabular-nums;
}


/* ---- el visor en una sola columna ----
   Va DESPUES de las reglas base a proposito: comparten especificidad, asi que
   el que gana es el ultimo. Puesto antes, .visor__foto{max-height:420px} se
   comia el limite de aqui y el visor ocupaba el 88 % de la pantalla.
   Sigue pegado arriba: tocas una opcion mas abajo y ves cambiar la foto sin
   tener que subir a buscarla. La cabecera mide 56 px, se cuelga justo debajo. */
@media (max-width:980px){
  .visor{
    position:sticky; top:56px; z-index:6;
    padding:var(--e3);
    box-shadow:0 18px 30px -22px rgba(0,0,0,.9);
  }
  /* En una columna los dos botones se comian 88 de los 326 px de ancho y la
     ventana se quedaba en 206. Aqui van ENCIMA de la ventana, no al lado: la
     ruleta recupera el ancho entero y las vecinas tienen sitio para asomar. */
  .ruleta{ --pieza:42%; display:block; margin:var(--e3) 0 var(--e2); }

  .ruleta__giro{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    background:color-mix(in srgb, var(--tarjeta) 82%, transparent);
    backdrop-filter:blur(6px);
  }
  .ruleta__giro--izq{ left:var(--e1); }
  .ruleta__giro--der{ right:var(--e1); }
  .ruleta__ventana{ padding:var(--e3) 0 var(--e4); }
  .ruleta__foto{ max-height:26vh; }
  .ruleta__giro{ width:44px; height:44px; font-size:1.25rem; }  /* minimo tactil */
  .visor__cab{ margin-top:var(--e3); }
  .visor__lema{ display:none; }          /* el lema se lee en el catalogo */
  /* el resumen de una linea repite el nombre, el chip de quemadores y la
     ficha, que estan justo encima: en movil solo roba altura */
  .lienzo__pie{ display:none; }
  .visor__ficha{ margin-top:var(--e2); padding-top:var(--e2); gap:var(--e1); }
  .visor__ficha > div{ padding:var(--e1) var(--e2); }
  .visor__ficha dd{ font-size:var(--t-xs); }
}
/* En pantallas bajas se encoge mas, para que siempre quede sitio donde tocar. */
@media (max-width:980px) and (max-height:720px){
  .ruleta__foto{ max-height:23vh; }
  .visor__ficha{ display:none; }
}

/* ---- EN EL MOVIL, DOS TIEMPOS: ELEGIR Y LUEGO CONFIGURAR ----
   Ruleta y opciones juntas no caben en un movil: la pipa salia diminuta y las
   opciones quedaban debajo de todo. Primero solo el carrusel, grande; al
   elegir una (boton o tocando la del centro) se abre a pantalla completa con
   la pipa agrandada arriba y los pasos debajo. En escritorio no cambia nada. */
.visor__volver, .visor__elegir{ display:none; }
@media (max-width:980px){
  /* 1 · eligiendo */
  .estudio:not(.estudio--abierta) .pasos-cfg,
  .estudio:not(.estudio--abierta) .visor__ficha{ display:none; }
  .estudio:not(.estudio--abierta) .visor{ position:relative; top:auto; }
  .estudio:not(.estudio--abierta) .ruleta{ --pieza:56%; }
  .estudio:not(.estudio--abierta) .ruleta__foto{ max-height:42vh; }
  .estudio:not(.estudio--abierta) .visor__lema{ display:block; }
  .estudio:not(.estudio--abierta) .ruleta__pieza--activa{ cursor:pointer; }
  .visor__elegir{ display:flex; width:100%; margin-top:var(--e4); }

  /* 2 · configurando: capa a pantalla completa */
  .estudio--abierta{
    position:fixed; inset:0; z-index:150; margin:0;
    display:block; overflow-y:auto; overscroll-behavior:contain;
    /* sin anclaje: al encoger la pipa el navegador subia el scroll para
       compensar, volvia arriba, la pipa crecia otra vez... en bucle */
    overflow-anchor:none;
    background:var(--fondo);
    padding:0 var(--e3) env(safe-area-inset-bottom, 0px);
    animation:abreEstudio .34s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes abreEstudio{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  .estudio--abierta .visor{
    position:sticky; top:0; z-index:6;
    margin:0 calc(-1 * var(--e3)); border-radius:0; border-width:0 0 2px;
    padding:calc(var(--e2) + env(safe-area-inset-top, 0px)) var(--e3) var(--e2);
  }
  .estudio--abierta .visor__volver{
    display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e3);
    font-family:var(--display); font-size:var(--t-xs); font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--texto); background:transparent;
    border:2px solid var(--borde); border-radius:var(--r-pil); cursor:pointer;
  }
  .estudio--abierta .visor__vivo,
  .estudio--abierta .ruleta__puntos,
  .estudio--abierta .visor__elegir,
  .estudio--abierta .visor__lema{ display:none; }
  /* solo la elegida, y mas grande que en el carrusel */
  .estudio--abierta .ruleta{ --pieza:80%; margin:var(--e2) 0 0; }
  .estudio--abierta .ruleta__ventana{ padding:var(--e2) 0 var(--e3); }
  .estudio--abierta .ruleta__pieza:not(.ruleta__pieza--activa){ opacity:0; }
  .estudio--abierta .ruleta__foto{
    max-height:min(48vh, 420px);
    transition:max-height .28s cubic-bezier(.2,.8,.3,1);
  }
  /* al bajar a las opciones la pipa se encoge pero sigue arriba, a la vista */
  .estudio--compacta .ruleta__foto{ max-height:19vh; }
  .estudio--compacta .ruleta__ventana::after{ display:none; }
  .estudio--abierta .flujo__barra .flujo__nav{ display:none; }

  /* TODO el menu de edicion a la vista: las etapas una debajo de otra, sin
     asistente que lleve de la mano, y la barra de pasos fija bajo la pipa
     para saltar a cualquiera. Las flechas siguen: se cambia de modelo sin
     salir y sin perder lo elegido. --alto-visor lo pone el JS. */
  .estudio--abierta .etapa[hidden]{ display:block; }
  .estudio--abierta .etapa{
    animation:none; padding-bottom:var(--e5);
    scroll-margin-top:calc(var(--alto-visor, 300px) + 60px);
  }
  .estudio--abierta .etapa + .etapa{ padding-top:var(--e4); border-top:2px solid var(--borde); }
  .estudio--abierta .flujo__barra{
    position:sticky; top:var(--alto-visor, 300px); z-index:5;
    margin:0 calc(-1 * var(--e3)); padding:var(--e1) var(--e3);
    background:var(--fondo); border-bottom:2px solid var(--borde);
  }
  .estudio--abierta .flujo__pie{ display:none; }
  .estudio--abierta .visor__cab{ margin-top:var(--e2); }
  .estudio--abierta .visor__ficha{ display:none; }
  /* alto minimo: con la pipa encogida siempre queda recorrido de scroll y la
     capa no rebota entre grande y pequena con las etapas cortas */
  .estudio--abierta .pasos-cfg{ padding:var(--e4) 0 0; min-height:calc(100svh - 160px); align-content:start; }
  .estudio--abierta .flujo{ min-height:calc(100svh - 190px); grid-template-rows:auto 1fr auto; }
  .estudio--abierta .flujo__vista{ min-height:0; }
  .estudio--abierta .flujo__pie{
    position:sticky; bottom:0; z-index:5;
    margin:0 calc(-1 * var(--e3)); padding:var(--e3);
    background:var(--fondo); border-top:2px solid var(--borde);
  }
  .estudio--abierta .flujo__pie .btn{ padding-inline:var(--e3); white-space:nowrap; }
  html.cfg-abierta{ overflow:hidden; }
}

/* ================= LAS OPCIONES, DE UNA EN UNA ==========================
   Cada pregunta ocupa el sitio entera y al contestarla deja paso a la
   siguiente. Nada de recorrer una lista larga: no hay scroll dentro del
   configurador, hay pasos.
   ======================================================================== */
.flujo{ display:grid; gap:var(--e4); }

.flujo__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); flex-wrap:wrap;
}
.flujo__barra .flujo__nav{
  min-height:44px; padding:0 var(--e3);
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-sec); background:transparent;
  border:2px solid var(--borde); border-radius:var(--r-pil); cursor:pointer;
  transition:border-color var(--trans), color var(--trans), opacity var(--trans);
}
.flujo__barra .flujo__nav:hover:not(:disabled){ border-color:var(--acento); color:var(--acento); }
.flujo__nav:disabled{ opacity:.3; cursor:default; }

/* el progreso: cuatro marcas que se encienden segun avanzas */
.flujo__pasos{
  list-style:none; display:flex; gap:var(--e2); margin:0; padding:0;
  flex:1; justify-content:flex-end; flex-wrap:wrap;
}
.flujo__pasos li{
  font-family:var(--display); font-size:.6rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-ter);
  padding-top:6px; border-top:3px solid var(--borde);
  flex:1 1 0; min-width:52px; text-align:center;
  transition:color var(--trans), border-color var(--trans);
}
.flujo__pasos li.hecho{ color:var(--texto-sec); border-top-color:var(--acento-2); }
.flujo__pasos li.viva{ color:var(--acento); border-top-color:var(--acento); }
/* cada marca es un boton: se salta a cualquier paso, sin ir en orden */
.flujo__pasos button{
  all:unset; box-sizing:border-box; display:block; width:100%;
  min-height:32px; cursor:pointer; color:inherit; font:inherit;
  letter-spacing:inherit; text-transform:inherit; text-align:center;
}
.flujo__pasos li:hover{ color:var(--texto); }
.flujo__pasos button:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; border-radius:4px; }

/* La vista tiene suelo propio: si cada etapa dejase la altura a su contenido,
   el bloque daria un brinco en cada paso. */
.flujo__vista{ position:relative; min-height:420px; }
.etapa[hidden]{ display:none; }
.etapa--der{ animation:entraDer .34s cubic-bezier(.2,.8,.3,1) both; }
.etapa--izq{ animation:entraIzq .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes entraDer{ from{ opacity:0; transform:translateX(26px) } to{ opacity:1; transform:none } }
@keyframes entraIzq{ from{ opacity:0; transform:translateX(-26px) } to{ opacity:1; transform:none } }

.flujo__pie{ display:flex; gap:var(--e3); }
.flujo__pie .btn{ flex:1; }
.flujo__pie .btn[hidden]{ display:none; }

/* la ultima etapa es el pedido: en una columna estrecha va apilado */
.etapa--pedido .pedido__caja{
  display:grid; grid-template-columns:1fr; gap:var(--e4);
  background:var(--tarjeta); border:2px solid var(--acento);
  border-radius:var(--r-lg); padding:var(--e4);
}
.etapa--pedido .pedido__precio{
  text-align:left; border-left:0; padding-left:0;
  border-top:2px solid var(--borde); padding-top:var(--e3);
}
.etapa--pedido .pedido__nota{ margin-left:0; max-width:none; }
.etapa--pedido .pedido__peso{ margin-left:0; max-width:none; }

/* ---- los tres modulos, todos a la vista ----
   Antes iban en pestanas con un boton de "siguiente paso". Eso obliga a
   navegar para ver que hay, y sobre todo esconde el efecto de cada eleccion.
   Ahora se leen de corrido y el visor se queda pegado al lado. */
.pasos-cfg{ display:grid; gap:var(--e6); }
.bloque{ display:block; }
.bloque + .bloque{ padding-top:var(--e5); border-top:2px solid var(--borde); }
.bloque--primero{ padding-top:0; border-top:0; }
.bloque__t{ font-size:var(--t-h3); margin-bottom:var(--e1); }
.bloque__d{ font-size:var(--t-sm); color:var(--texto-sec); margin-bottom:var(--e4); }
.bloque__aviso{
  margin-top:var(--e4); padding:var(--e3);
  border:1px solid var(--acento-2); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--acento-2) 8%, transparent);
  font-size:var(--t-xs); color:var(--texto-sec); line-height:1.5;
}

/* ---- ficha de cada opcion: nombre, material, precio y para que sirve ---- */
.opts{ display:grid; gap:var(--e2); margin-bottom:var(--e4); }
.opt{ cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.opt__caja{
  display:block; padding:var(--e3);
  border:2px solid var(--borde); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--fondo) 45%, transparent);
  transition:border-color var(--trans), background var(--trans);
}
.opt:hover .opt__caja{ border-color:var(--texto-ter); }
.opt input:checked + .opt__caja{
  border-color:var(--acento);
  background:color-mix(in srgb, var(--acento) 9%, transparent);
}
.opt input:focus-visible + .opt__caja{ outline:3px solid var(--cian); outline-offset:3px; }
.opt input:disabled + .opt__caja{ opacity:.38; cursor:not-allowed; }
.opt__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); }
.opt__n{
  display:block; font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:var(--t-base); color:var(--texto);
}
.opt__mat{
  display:block; font-size:var(--t-xs); font-weight:600;
  color:var(--acento); letter-spacing:.02em; margin-top:1px;
}
.opt__precio{
  flex:none; font-family:var(--display); font-weight:800; font-size:var(--t-xs);
  letter-spacing:.04em; color:var(--texto-sec); white-space:nowrap;
}
.opt__desc{ display:block; font-size:var(--t-sm); color:var(--texto-sec); margin-top:var(--e2); line-height:1.45; }

/* ---- la ficha del modelo enseña la pipa, no solo su nombre ---- */
.opt--foto .opt__caja{ display:flex; align-items:stretch; gap:var(--e3); padding:0;
  background:var(--halo), color-mix(in srgb, var(--fondo) 45%, transparent); }
.opt__mini{
  flex:0 0 96px; align-self:center; width:96px; height:auto;
  object-fit:contain; padding:var(--e2) 0 var(--e2) var(--e2);
}
.opt__txt{ flex:1; min-width:0; padding:var(--e3) var(--e3) var(--e3) 0; }
@media (max-width:400px){
  .opt--foto .opt__caja{ flex-direction:column; }
  .opt__mini{ flex:none; width:100%; height:160px; padding:var(--e3) 0 0; }
  .opt__txt{ padding:0 var(--e3) var(--e3); }
}
.opt__spec{
  display:block; margin-top:var(--e2); padding-top:var(--e2);
  border-top:1px solid var(--borde);
  font-size:var(--t-xs); color:var(--texto-ter); letter-spacing:.02em;
}

/* ---- el desglose, como una factura corta ---- */
.desglose{
  list-style:none; margin:var(--e3) 0 0; padding:var(--e3) 0 0;
  border-top:1px solid var(--borde); display:grid; gap:var(--e1);
}
.desglose li{
  display:flex; justify-content:space-between; gap:var(--e3);
  font-size:var(--t-xs); color:var(--texto-ter);
}
.desglose b{ color:var(--texto-sec); white-space:nowrap; }

/* --------------------------------------------------------- configurador --- */
.panel{
  max-width:960px; margin:0 auto; padding:0 var(--e4);
  display:grid; grid-template-columns:minmax(230px,1fr) 1.25fr; gap:var(--e5);
  align-items:center;
}
.panel__lienzo{
  background:var(--tarjeta); border:2px solid var(--borde);
  border-radius:var(--r-lg); box-shadow:var(--sombra);
  padding:var(--e4) var(--e3) var(--e2); text-align:center;
}
.panel__lienzo svg{ width:100%; max-width:290px; height:auto; margin-inline:auto; display:block; }
.lienzo__pie{
  font-family:var(--display); font-size:var(--t-xs); color:var(--texto-ter);
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding-top:var(--e3);
}
.cfg{ display:grid; gap:var(--e4); }
.cfg__grupo{ border:0; margin:0; padding:0; }
.cfg__grupo legend{
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acento-2);
  padding:0 0 var(--e2);
}
.opciones{ display:flex; gap:var(--e2); flex-wrap:wrap; }
/* seis formas no caben en fila: rejilla de tres, dos filas */
/* ocho formas: rejilla de cuatro, dos filas (dos columnas en movil) */
.opciones--formas{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:560px){ .opciones--formas{ grid-template-columns:repeat(2,1fr); } }
.op{ flex:1 1 0; min-width:66px; cursor:pointer; }
.op input{ position:absolute; opacity:0; width:1px; height:1px; }
.op > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:58px; padding:var(--e2);
  border:2px solid var(--borde); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--tarjeta) 70%, transparent);
  font-family:var(--display); font-weight:800; font-size:var(--t-base);
  font-stretch:110%; line-height:1.1;
  transition:border-color var(--trans), background var(--trans),
             color var(--trans), box-shadow var(--trans);
}
.op > span small{
  font-family:var(--texto-f); font-size:.7rem; font-weight:500;
  color:var(--texto-ter); letter-spacing:.02em; margin-top:3px; text-transform:none;
}
.op:hover > span{ border-color:var(--texto-ter); }
.op input:checked + span{
  border-color:var(--acento); color:var(--acento);
  background:color-mix(in srgb, var(--acento) 12%, transparent);
  box-shadow:3px 3px 0 var(--acento-2);
}
.op input:checked + span small{ color:var(--acento); }
.op input:focus-visible + span{ outline:3px solid var(--cian); outline-offset:3px; }

.opciones--color{ gap:var(--e3); }
.op--color{ flex:0 0 auto; min-width:0; text-align:center; }
/* el color sale del style de cada muestra, no de su posicion: asi anadir o
   quitar un acabado no descoloca a los demas */
.op--color > span{
  width:46px; height:46px; min-height:46px; border-radius:50%; padding:0;
  border:3px solid var(--borde); background:var(--pla,#ccc); box-shadow:none;
}
.op--color input:checked + span{
  /* la regla general de .op tinta el fondo al marcar, y eso se comia el color
     de la muestra: aqui se devuelve el suyo */
  background:var(--pla,#ccc);
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--fondo), 0 0 0 6px var(--acento-2);
}
.op--color small{ display:block; font-size:.68rem; font-weight:600; color:var(--texto-ter); margin-top:var(--e1); }
.op--color input:checked ~ small{ color:var(--acento); }

/* Cada acabado mide lo que su etiqueta, no lo que el circulo. En movil se
   ponen en rejilla de cuatro columnas iguales para que entren justos. */
@media (max-width:560px){
  .opciones--color{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:var(--e1); justify-items:center;
  }
  .op--color{ width:100%; }
  .op--color small{ font-size:.6rem; letter-spacing:0; }
}

.cfg__grupo--extras{ display:grid; gap:var(--e2); }
.check{
  display:flex; align-items:flex-start; gap:var(--e2);
  min-height:46px; padding:var(--e2);
  border:2px solid transparent; border-radius:var(--r-md);
  cursor:pointer; transition:background var(--trans), border-color var(--trans);
}
.check:hover{ background:var(--fondo-alt); }
.check input{ width:20px; height:20px; margin:3px 0 0; accent-color:var(--acento-2); flex:none; cursor:pointer; }
.check span{ font-size:var(--t-sm); font-weight:600; line-height:1.35; }
.check span small{ display:block; font-weight:400; color:var(--texto-ter); font-size:var(--t-xs); }
.check:has(input:checked){ border-color:var(--acento-2); background:color-mix(in srgb, var(--acento-2) 10%, transparent); }

@media (max-width:820px){ .panel{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- pedido --- */
.pedido{ max-width:960px; margin:var(--e6) auto 0; padding:0 var(--e4) var(--e8); }
.pedido__caja{
  display:grid; grid-template-columns:1.4fr auto auto; gap:var(--e5); align-items:center;
  background:var(--tarjeta); border:2px solid var(--acento);
  border-radius:var(--r-lg); box-shadow:6px 6px 0 var(--acento-2);
  padding:var(--e4) var(--e5);
}
.pedido__etq{
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--texto-ter); margin-bottom:var(--e1);
}
.pedido__linea{ font-size:var(--t-sm); font-weight:500; color:var(--texto-sec); line-height:1.45; }
.pedido__precio{ text-align:right; border-left:2px solid var(--borde); padding-left:var(--e5); }
.pedido__cifra{
  font-family:var(--display); font-weight:900; font-stretch:125%;
  font-size:3rem; line-height:1; color:var(--acento);
}
.pedido__peso{
  font-size:var(--t-xs); color:var(--texto-sec);
  margin-top:var(--e1); max-width:24ch; margin-left:auto;
}
.pedido__nota{ font-size:var(--t-xs); color:var(--texto-ter); max-width:22ch; margin-left:auto; margin-top:var(--e1); }
.pedido__acciones{ display:grid; gap:var(--e2); }
.pedido__aviso{
  min-height:1.6em; margin-top:var(--e3); text-align:center;
  font-size:var(--t-sm); font-weight:700; color:var(--cian);
}
@media (max-width:900px){
  .pedido__caja{ grid-template-columns:1fr; gap:var(--e4); }
  .pedido__precio{ text-align:left; border-left:0; padding-left:0;
                   border-top:2px solid var(--borde); padding-top:var(--e3); }
  .pedido__nota{ margin-left:0; }
}

/* ------------------------------------------------------------ secciones --- */
.seccion{ max-width:var(--ancho); margin-inline:auto; padding:var(--e8) var(--e4); }
.seccion > .ojo, .seccion > h2{ text-align:center; }
.seccion > h2{ margin-bottom:var(--e5); max-width:18ch; margin-inline:auto; }

/* ---------------------------------------------------------- la historia --- */
.historia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--e5) var(--e4); margin-top:var(--e6);
}
.hito{
  position:relative; padding:var(--e5) var(--e4) var(--e4);
  background:var(--tarjeta); border:2px solid var(--borde); border-radius:var(--r-lg);
  transition:border-color var(--trans), transform var(--trans);
}
.hito:hover{ border-color:var(--acento); transform:translateY(-4px); }
.hito__cuando{
  font-family:var(--display); font-weight:900; font-stretch:118%;
  font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--acento-txt); background:var(--acento);
  display:inline-block; padding:3px var(--e2); border-radius:var(--r-pil);
  position:absolute; top:-14px; left:var(--e4);
}
.hito:nth-child(2n) .hito__cuando{ background:var(--acento-2); color:#fff; }
.hito:nth-child(3n) .hito__cuando{ background:var(--cian); color:#0B0616; }
/* La referencia visual de cada hito: dibujada en SVG, no una foto. No hay
   fotografia de dominio publico de una cazoleta de Lalibela ni de un
   shuiyandai concreto, y una imagen de archivo mal atribuida es peor que
   ninguna. Ademas asi pesa cero y hereda el color de la tarjeta. */
.hito{ --fig:var(--acento); }
.hito:nth-child(2n){ --fig:var(--acento-2); }
.hito:nth-child(3n){ --fig:var(--cian); }
.hito__fig{
  height:138px; margin:0 0 var(--e4);
  display:grid; place-items:center;
  border:1px solid var(--borde); border-radius:var(--r-md);
  background:linear-gradient(180deg,
             color-mix(in srgb, var(--fig) 9%, transparent), transparent 78%);
}
.hito__fig svg{ height:116px; width:auto; display:block; }
.hito__fig .l{ fill:none; stroke:var(--fig); stroke-width:2.4;
               stroke-linejoin:round; stroke-linecap:round; }
.hito__fig .f{ fill:color-mix(in srgb, var(--fig) 17%, transparent);
               stroke:var(--fig); stroke-width:2.4; stroke-linejoin:round; }
.hito__fig .d{ fill:none; stroke:var(--fig); stroke-width:1.5; opacity:.45;
               stroke-linecap:round; }

.hito h3{ margin-bottom:var(--e2); }
.hito p{ font-size:var(--t-sm); color:var(--texto-sec); }
.historia__pie{
  margin-top:var(--e6); text-align:center; font-size:var(--t-sm);
  color:var(--texto-ter); max-width:62ch; margin-inline:auto;
}

/* --------------------------------------------------------------- pasos --- */
.pasos{
  list-style:none; margin:var(--e6) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--e5);
}
.pasos li{ padding-top:var(--e4); border-top:3px solid var(--borde); }
.pasos li:nth-child(1){ border-top-color:var(--acento); }
.pasos li:nth-child(2){ border-top-color:var(--cian); }
.pasos li:nth-child(3){ border-top-color:var(--acento-2); }
.pasos li:nth-child(4){ border-top-color:var(--naranja); }
.pasos__n{
  display:block; font-family:var(--display); font-weight:900; font-stretch:125%;
  font-size:2rem; line-height:1; margin-bottom:var(--e2); color:var(--texto-ter);
}
.pasos h3{ margin-bottom:var(--e2); }
.pasos p{ font-size:var(--t-sm); color:var(--texto-sec); }

/* ------------------------------------------------------------- el taller ---
   Nada de parrafos: un banco de trabajo con la Granada montada, despiezada
   y por dentro (laminas sacadas de sus propios STL), con numeros que se
   tocan, y seis datos que se dan la vuelta. El texto aparece cuando se pide. */
.taller{
  margin-top:var(--e6);
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--e5); align-items:center;
}
@media (max-width:900px){ .taller{ grid-template-columns:1fr; } }

.banco{ display:grid; gap:var(--e3); justify-items:center; min-width:0; }
/* los siete modelos como etiquetas sueltas: si no caben, bajan de linea
   y se ven todos, nunca escondidos tras un scroll lateral */
.banco__tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:100%; }
.banco__tabs button{
  min-height:40px; padding:0 var(--e3); white-space:nowrap;
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-sec); background:var(--tarjeta);
  border:2px solid var(--borde); border-radius:var(--r-pil); cursor:pointer;
  transition:background var(--trans), color var(--trans), border-color var(--trans);
}
.banco__tabs button:hover{ border-color:var(--acento); color:var(--texto); }
.banco__tabs button[aria-selected="true"]{ background:var(--acento); border-color:var(--acento); color:var(--acento-txt); }
.banco__tabs button:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; }

.banco__mesa{
  --h:min(64vh, 540px);
  position:relative; width:100%; height:var(--h);
  display:grid; place-items:center;
  border-radius:var(--r-lg);
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--violeta) 22%, transparent), transparent 75%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--texto) 5%, transparent) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--texto) 5%, transparent) 0 1px, transparent 1px 32px);
}
/* la foto del modelo; al cambiar de modelo se funde y vuelve a entrar */
.lamina{
  grid-area:1 / 1; position:relative; margin:0; line-height:0;
  opacity:0; visibility:hidden; transform:scale(.94);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.3,1), visibility 0s .35s;
}
.lamina--viva{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.lamina img{
  display:block; width:auto; height:auto; max-width:100%; max-height:calc(var(--h) - 24px);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.65));
}
/* los numeros se colocan en % de la lamina, que mide lo mismo que su foto */
.punto{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  font-family:var(--display); font-size:.9rem; font-weight:900;
  color:var(--acento-txt); background:var(--acento);
  border:3px solid var(--fondo); cursor:pointer;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--acento) 60%, transparent);
  animation:llama 2.2s ease-out infinite;
}
.punto::before{ content:""; position:absolute; inset:-6px; border-radius:50%; }   /* 46 px de zona tactil */
.punto[aria-expanded="true"]{ background:var(--acento-2); color:#fff; animation:none; }
.punto:focus-visible{ outline:3px solid var(--cian); outline-offset:3px; }
@keyframes llama{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); }
  70%,100%{ box-shadow:0 0 0 14px transparent; }
}
/* la frase del numero va DEBAJO del banco, no encima de la pipa: asi no
   tapa ningun otro numero. Sin numero abierto, dice que se toquen. */
.nota{
  width:min(100%, 460px); min-height:3.2em; margin:0; padding:var(--e2) var(--e4);
  display:grid; place-items:center; text-align:center;
  font-size:var(--t-sm); font-weight:600; line-height:1.4; color:var(--texto);
  border:2px solid var(--acento-2); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--acento-2) 10%, var(--tarjeta));
  animation:sube .25s ease both;
}
.nota--pista{
  border-color:transparent; background:transparent; animation:none;
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-ter);
}
@keyframes sube{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* seis datos grandes; al tocarlos se dan la vuelta y dicen el porque */
.datos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e3);
}
.dato{
  position:relative; display:block; width:100%; min-height:150px; padding:0;
  border:0; background:none; color:inherit; font:inherit; text-align:left;
  cursor:pointer; perspective:900px;
}
.dato__cara, .dato__dorso{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:var(--e3) var(--e4); border-radius:var(--r-lg); border:2px solid var(--borde);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), border-color var(--trans);
}
.dato__cara{ background:var(--tarjeta); }
.dato__cara b{
  font-family:var(--display); font-weight:900; font-stretch:125%;
  font-size:clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem); line-height:1; color:var(--acento);
}
.dato__cara b small{ font-size:.4em; margin-left:.15em; color:var(--texto-sec); }
.dato__cara > span{
  margin-top:var(--e1); font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-sec);
}
.dato__dorso{
  transform:rotateY(180deg);
  background:color-mix(in srgb, var(--acento-2) 14%, var(--tarjeta));
  border-color:var(--acento-2);
  font-size:var(--t-sm); font-weight:600; line-height:1.45; color:var(--texto);
}
.dato[aria-pressed="true"] .dato__cara{ transform:rotateY(-180deg); }
.dato[aria-pressed="true"] .dato__dorso{ transform:rotateY(0); }
.dato:hover .dato__cara{ border-color:var(--cian); }
.dato:focus-visible{ outline:3px solid var(--cian); outline-offset:3px; border-radius:var(--r-lg); }
@media (max-width:420px){ .dato{ min-height:136px; } .dato__cara, .dato__dorso{ padding:var(--e3); } }

@media (prefers-reduced-motion: reduce){
  .punto{ animation:none; }
  .lamina{ transform:none; }
  .dato__cara, .dato__dorso{ transition:opacity .2s ease; transform:none !important; }
  .dato__dorso{ opacity:0; }
  .dato[aria-pressed="true"] .dato__cara{ opacity:0; }
  .dato[aria-pressed="true"] .dato__dorso{ opacity:1; }
}

/* ====================== CATALOGO: LAS CINCO PIPAS =======================
   Las fotos vienen del render de producto y traen su propio fondo claro. En
   vez de pelearse con el, la caja de la foto USA ese mismo tono: asi la pieza
   flota en un rectangulo limpio en vez de recortarse mal contra el morado.
   ======================================================================== */
/* Las fotos llegan recortadas contra transparente, asi que no hace falta
   ninguna cartulina clara detras: la pieza se apoya en un halo suave y en una
   sombra eliptica, y el morado del sitio se ve por debajo. */
:root{
  --halo: radial-gradient(58% 52% at 50% 54%,
            color-mix(in srgb, var(--texto) 11%, transparent), transparent 72%);
}

.catalogo{
  margin-top:var(--e6);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:var(--e5) var(--e4);
}
.carta{
  position:relative; display:flex; flex-direction:column;
  background:var(--tarjeta); border:2px solid var(--borde);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--trans), transform var(--trans);
}
.carta:hover{ border-color:var(--cian); transform:translateY(-3px); }

.carta__foto{
  position:relative;
  background:var(--halo);
  display:grid; place-items:center;
  padding:var(--e5) var(--e3) var(--e4);
  min-height:330px;
}
/* la sombra que el render no trae, porque viene recortado */
.carta__foto::after{
  content:""; position:absolute; left:50%; bottom:calc(var(--e4) - 6px);
  width:52%; height:18px; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
.carta__img{
  position:relative; z-index:1;
  display:block; width:auto; height:auto;
  max-width:100%; max-height:290px; object-fit:contain;
}
.carta__info{
  /* flex:1 para que absorba el alto sobrante de la carta; sin esto el
     margin:auto de las fichas no tiene contra que empujar */
  flex:1; display:flex; flex-direction:column; gap:var(--e3);
  padding:var(--e5) var(--e4) var(--e4);
}
.carta__cinta{
  /* va sobre la foto y no dentro del texto: si no, la carta que la lleva
     baja el titular y se descuadra de las demas */
  position:absolute; top:var(--e3); left:var(--e3); z-index:1;
  background:var(--acento-2); color:#fff;
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px var(--e3); border-radius:var(--r-pil);
}
.carta h3{ margin:0; }
.carta__lema{ font-size:var(--t-sm); color:var(--texto-sec); line-height:1.55; }

.carta__puntos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e1); }
.carta__puntos li{
  position:relative; padding-left:var(--e4);
  font-size:var(--t-sm); color:var(--texto-sec);
}
.carta__puntos li::before{
  content:""; position:absolute; left:2px; top:.68em;
  width:11px; height:3px; background:var(--acento-2);
}

/* de aqui abajo todo se ancla al pie de la carta: con las cartas de la
   misma fila a la misma altura, las fichas y los botones quedan alineados
   aunque un modelo tenga dos lineas mas de texto que otro. */
.carta__specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e2);
  margin:auto 0 0; padding-top:var(--e3); border-top:2px solid var(--borde);
}
.carta__specs dt{
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.carta__specs dd{
  margin:2px 0 0; font-family:var(--display); font-weight:800;
  font-size:var(--t-sm); color:var(--acento); line-height:1.25;
}

/* ---- cuantos quemadores, en la propia carta ----
   Cambian la foto Y el precio a la vez: son la misma decision. */
.quemadores{ border:0; margin:0; padding:0; }
.quemadores legend{
  padding:0; margin-bottom:var(--e2);
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.quemadores__fila{ display:flex; gap:var(--e2); }
.q{ flex:1; cursor:pointer; }
.q input{ position:absolute; opacity:0; width:1px; height:1px; }
.q > span{
  display:grid; place-items:center; min-height:44px;
  font-family:var(--display); font-weight:800; font-size:var(--t-md);
  color:var(--texto-sec); background:transparent;
  border:2px solid var(--borde); border-radius:var(--r-md);
  transition:background var(--trans), color var(--trans), border-color var(--trans);
}
.q:hover > span{ border-color:var(--texto-ter); color:var(--texto); }
.q input:checked + span{
  background:var(--acento); color:var(--acento-txt); border-color:var(--acento);
}
.q input:focus-visible + span{ outline:3px solid var(--cian); outline-offset:3px; }

/* ---- los colores de junta ----
   El <legend> no se comporta como hijo normal en flex, asi que las muestras
   van en su propia fila dentro del fieldset. */
.acabados{ border:0; margin:0; padding:0; }
.acabados legend{
  padding:0; margin-bottom:var(--e2);
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.acabados__fila{ display:flex; flex-wrap:wrap; gap:var(--e3); }
.tono{ cursor:pointer; text-align:center; }
.tono input{ position:absolute; opacity:0; width:1px; height:1px; }
.tono__m{
  display:block; width:34px; height:34px; border-radius:50%;
  background:var(--pla); border:2px solid var(--borde);
  transition:box-shadow var(--trans), border-color var(--trans);
}
.tono:hover .tono__m{ border-color:var(--texto-ter); }
.tono input:checked + .tono__m{
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--tarjeta), 0 0 0 6px var(--acento);
}
.tono input:focus-visible + .tono__m{ outline:3px solid var(--cian); outline-offset:3px; }
.tono i{
  display:block; margin-top:4px; font-style:normal;
  font-size:.68rem; font-weight:600; color:var(--texto-ter);
}
.tono input:checked ~ i{ color:var(--acento); }

.carta__precio{
  display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap;
  padding-top:var(--e2);
}
.carta__precio b{
  font-family:var(--display); font-weight:900; font-stretch:118%;
  font-size:1.7rem; line-height:1; color:var(--texto);
}
.carta__precio span{ font-size:var(--t-xs); color:var(--texto-ter); }
.carta__btn{ width:100%; }

/* La destacada ocupa el ancho entero y pone la foto al lado, no encima:
   es la unica que tiene render en alta y aguanta verse grande. */
@media (min-width:820px){
  .carta--destacada{
    grid-column:1 / -1;
    flex-direction:row; align-items:stretch;
    border-color:var(--acento); box-shadow:8px 8px 0 var(--acento-2);
  }
  .carta--destacada .carta__foto{ flex:0 0 42%; min-height:0; padding:var(--e5); }
  .carta--destacada .carta__img{ max-height:460px; }
  .carta--destacada .carta__info{ flex:1; justify-content:center; padding:var(--e6) var(--e5); }
}

.catalogo__nota{
  margin-top:var(--e4); text-align:center;
  font-size:var(--t-xs); color:var(--texto-ter);
}

/* ------------------------------------------------------------------ faq --- */
.faq{ max-width:780px; margin:var(--e6) auto 0; }
.faq details{ border-bottom:2px solid var(--borde); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  min-height:64px; padding:var(--e3) 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:800; font-stretch:108%;
  font-size:var(--t-h3); line-height:1.15; text-transform:uppercase;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; font-family:var(--texto-f);
  font-size:1.7rem; font-weight:400; color:var(--acento);
  transition:transform var(--trans);
}
.faq details[open] summary{ color:var(--acento); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq summary:hover{ color:var(--cian); }
.faq details p{ padding:0 0 var(--e4); max-width:65ch; font-size:var(--t-sm); color:var(--texto-sec); }

/* ---------------------------------------------------------------- cierre --- */
.cierre{
  text-align:center; max-width:var(--ancho); margin-inline:auto;
  padding:var(--e8) var(--e4); border-top:2px solid var(--borde);
}
.cierre__logo{
  width:min(300px, 66vw); height:auto; display:block;
  margin:0 auto var(--e4);
}
.cierre h2{ margin-bottom:var(--e4); }
.cierre__botones{ display:flex; gap:var(--e3); justify-content:center; flex-wrap:wrap; margin-top:var(--e5); }
/* el aviso sanitario es obligado y tiene que leerse, no esconderse */
.cierre__legal{
  margin:var(--e6) auto 0; max-width:62ch; text-align:left;
  font-size:var(--t-xs); color:var(--texto-ter); line-height:1.6;
  border-top:1px solid var(--borde); padding-top:var(--e4);
  display:grid; gap:var(--e2);
}
.cierre__legal b{ color:var(--texto-sec); }

/* ------------------------------------------------------------------- pie --- */
.pie{
  background:var(--fondo-alt); border-top:2px solid var(--borde);
  padding:var(--e6) var(--e4);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--e5);
}
.pie__col{ display:flex; flex-direction:column; gap:var(--e2); font-size:var(--t-sm); color:var(--texto-sec); }
.pie__col a{ display:inline-flex; align-items:center; min-height:44px; color:var(--texto-sec); text-decoration:none; }
.pie__col a:hover{ color:var(--acento); text-decoration:underline; }
.pie__logo{ width:96px; height:auto; display:block; margin-bottom:var(--e2); }
.pie__marca{
  font-family:var(--display); font-weight:800; font-stretch:120%;
  color:var(--texto); font-size:var(--t-base); text-transform:lowercase;
}
.pie__edad{
  margin-top:var(--e2); display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--acento-2); color:var(--acento-2);
  font-family:var(--display); font-weight:900; font-size:var(--t-sm);
}

/* --------------------------------------------------- puerta de edad +18 --- */
/* La puerta se puede RECORRER. Mientras esta abierta el body va con
   overflow:hidden, asi que si la caja no cabe y aqui no hay scroll, el boton
   de "si" queda fuera de alcance y la web no se puede abrir. Pasa de verdad:
   en 360x640 la caja pedia 882 px.
   El centrado va con margin:auto y no con place-items, porque place-items
   centra recortando por ARRIBA cuando el contenido desborda, y ahi es donde
   esta el logo. */
.puerta{
  position:fixed; inset:0; z-index:200;
  display:flex; padding:var(--e4);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:blur(10px);
}
.puerta[hidden]{ display:none; }
.puerta__caja{
  margin:auto;
  background:var(--tarjeta); border:2px solid var(--acento);
  border-radius:var(--r-lg); box-shadow:8px 8px 0 var(--acento-2);
  padding:var(--e6) var(--e5); max-width:440px; text-align:center;
}
.puerta__logo{
  width:min(240px, 62vw); height:auto; display:block;
  margin:0 auto var(--e4);
}

/* Y en pantallas bajas se aprieta, en tres escalones, para que quepa entera
   sin tener que recorrerla. Medido pieza a pieza: el logo se lleva 149 px y la
   nota del pie otros 125 con su separador, que son los dos bultos grandes.
     - 780 px: movil grande tumbado o ventana baja
     - 700 px: el movil corriente (640 px utiles)
     - 580 px: los pequenos tipo iPhone SE */
@media (max-height:780px){
  .puerta{ padding:var(--e3); }
  .puerta__caja{ padding:var(--e4); }
  .puerta__logo{ width:min(110px, 30vw); margin-bottom:var(--e3); }
  .puerta__ojo{ font-size:.68rem; letter-spacing:.12em; }
  .puerta__caja h2{ font-size:1.4rem; margin-bottom:var(--e2); }
  .puerta__caja p{ font-size:var(--t-xs); line-height:1.5; }
  .puerta__botones{ margin-top:var(--e3); gap:var(--e1); }
  .puerta__nota{ margin-top:var(--e2); padding-top:var(--e2); }
}
/* La nota se va la primera: repite lo que ya dicen el pie y las condiciones.
   El aviso de la Ley 28/2005, que es el que importa aqui, se queda siempre. */
@media (max-height:700px){
  .puerta__nota{ display:none; }
}
@media (max-height:580px){
  .puerta__logo{ width:min(76px, 22vw); margin-bottom:var(--e2); }
  .puerta__caja h2{ font-size:1.2rem; }
  .puerta__caja p{ line-height:1.45; }
}
.puerta__ojo{
  font-family:var(--display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acento-2);
  margin-bottom:var(--e2);
}
.puerta__nota{
  margin-top:var(--e3); padding-top:var(--e3);
  border-top:1px solid var(--borde);
  font-size:var(--t-xs) !important; color:var(--texto-ter) !important;
}
.puerta__caja h2{ font-size:2rem; margin-bottom:var(--e3); }
.puerta__caja p{ font-size:var(--t-sm); color:var(--texto-sec); }
.puerta__botones{ display:grid; gap:var(--e2); margin-top:var(--e5); }

/* ---- muestras de estampado ----
   No son fotos: cada una insinua su patron con degradados, que pesan cero.
   El estampado de verdad lo dibuja el canvas sobre la pipa. */
.opciones--est{ display:flex; flex-wrap:wrap; gap:var(--e3); }
.est{ cursor:pointer; text-align:center; }
.est input{ position:absolute; opacity:0; width:1px; height:1px; }
.est__m{
  display:block; width:46px; height:46px; border-radius:var(--r-md);
  border:2px solid var(--borde);
  background-color:color-mix(in srgb, var(--cian) 30%, var(--tinta-3));
  transition:border-color var(--trans), box-shadow var(--trans);
}
.est__m--liso{ background-image:none; }
.est__m--hojas{
  background-image:radial-gradient(ellipse 5px 9px at 30% 30%, rgba(0,0,0,.6) 60%, transparent 62%),
                   radial-gradient(ellipse 5px 9px at 75% 72%, rgba(0,0,0,.6) 60%, transparent 62%);
  background-size:22px 22px;
}
.est__m--flores{
  background-image:radial-gradient(circle 3px at 50% 30%, rgba(0,0,0,.6) 70%, transparent 72%),
                   radial-gradient(circle 3px at 30% 62%, rgba(0,0,0,.6) 70%, transparent 72%),
                   radial-gradient(circle 3px at 70% 62%, rgba(0,0,0,.6) 70%, transparent 72%);
  background-size:20px 20px;
}
.est__m--panal{
  background-image:repeating-linear-gradient(60deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 9px),
                   repeating-linear-gradient(-60deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 9px);
}
.est__m--ondas{
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 2px, transparent 2px 9px);
}
.est:hover .est__m{ border-color:var(--texto-ter); }
.est input:checked + .est__m{
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--fondo), 0 0 0 6px var(--acento);
}
.est input:focus-visible + .est__m{ outline:3px solid var(--cian); outline-offset:4px; }
.est small{ display:block; margin-top:4px; font-size:.68rem; font-weight:600; color:var(--texto-ter); }
.est input:checked ~ small{ color:var(--acento); }

/* ---- el formulario del pedido ----
   Sale al pulsar "Mandar a fabricar" o "Pedir por correo": sin direccion no
   hay envio, y sin texto de grabado no se puede grabar nada. */
.ficha-envio{ display:grid; gap:var(--e3); margin-top:var(--e4); }
.ficha-envio[hidden]{ display:none; }
.campo{ display:grid; gap:4px; }
.campo > span{
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.campo > span b{ color:var(--acento-2); }
.campo input, .campo textarea{
  width:100%; min-height:46px; padding:var(--e2) var(--e3);
  font-family:var(--texto-f); font-size:var(--t-sm); color:var(--texto);
  background:color-mix(in srgb, var(--fondo) 60%, transparent);
  border:2px solid var(--borde); border-radius:var(--r-md);
  transition:border-color var(--trans);
}
.campo textarea{ min-height:84px; resize:vertical; }
.campo input:focus, .campo textarea:focus{ outline:0; border-color:var(--acento); }
.campo input:focus-visible, .campo textarea:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; }
.campo--mal input, .campo--mal textarea{ border-color:var(--acento-2); }
.ficha-envio__nota{ font-size:var(--t-xs); color:var(--texto-ter); line-height:1.5; }

/* ============ AJUSTES DE UNA COLUMNA, AL FINAL A PROPOSITO =============
   Comparten especificidad con las reglas de arriba, asi que tienen que ir
   DESPUES para ganar. Puestas junto al bloque de la ruleta, las reglas base
   las pisaban y no se aplicaba ninguna.
   ====================================================================== */
@media (max-width:980px){
  /* once modelos son once puntos: a 30 px no caben en una fila de 358 */
  .ruleta__puntos{ gap:0; }
  .pt{ min-width:24px; }

  /* la barra del flujo se partia igual: el boton arriba y las marcas debajo */
  .flujo__barra{ flex-direction:column; align-items:stretch; gap:var(--e2); }
  .flujo__barra .flujo__nav{ align-self:flex-start; }
  .flujo__pasos{ justify-content:stretch; }
  .flujo__pasos li{ min-width:0; font-size:.55rem; letter-spacing:.06em; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ------------------------------------------------------- páginas legales --- */
.legal{ max-width:760px; margin-inline:auto; padding:var(--e7) var(--e4) var(--e8); }
.legal h1{ font-size:clamp(2rem,1.4rem+2.6vw,3.2rem); margin-bottom:var(--e3); }
.legal h2{ font-size:var(--t-h3); margin:var(--e6) 0 var(--e2); color:var(--acento); }
.legal p, .legal li{ font-size:var(--t-base); color:var(--texto-sec); }
.legal p + p{ margin-top:var(--e3); }
.legal ul{ margin:var(--e3) 0 0; padding-left:var(--e4); display:grid; gap:var(--e2); }
.legal a{ color:var(--cian); }
.legal .fecha{ font-size:var(--t-sm); color:var(--texto-ter); }
.rellenar{
  background:color-mix(in srgb, var(--acento-2) 28%, transparent);
  border-bottom:2px solid var(--acento-2);
  padding:0 .25em; font-weight:700; color:var(--texto);
}
.nota-taller{
  margin-top:var(--e6); padding:var(--e4);
  border:2px dashed var(--acento-2); border-radius:var(--r-md); font-size:var(--t-sm);
}
.nota-taller b{ color:var(--acento-2); }

/* ============================== LA FÁBRICA ==============================
   El visor es una impresora 3D: bastidor, cama y cabezal, y en la cama la
   pipa montada con los renders reales de cada pieza. Al fabricar, el cabezal
   recorre la capa viva mientras la pieza sube; después queda la pipa entera.
   ======================================================================== */
.impresora{ position:relative; padding:var(--e3) var(--e3) var(--e4); }
.impresora__marco{
  position:relative; aspect-ratio:4 / 5; border-radius:var(--r-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fondo) 70%, transparent), color-mix(in srgb, var(--tinta-3) 60%, transparent)),
    var(--halo);
  border:2px solid var(--borde); overflow:hidden;
}
/* bastidor: dos montantes y el travesaño */
.impresora__marco::before, .impresora__marco::after{
  content:""; position:absolute; top:4%; bottom:9%; width:14px; border-radius:4px;
  background:linear-gradient(90deg, #2a1d4d, #4a3a7a 40%, #2a1d4d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.impresora__marco::before{ left:4%; } .impresora__marco::after{ right:4%; }
.impresora__travesano{
  position:absolute; left:4%; right:4%; top:4%; height:16px; border-radius:4px;
  background:linear-gradient(180deg, #4a3a7a, #2a1d4d); box-shadow:0 6px 18px -8px #000;
}
.impresora__cama{
  position:absolute; left:8%; right:8%; bottom:5%; height:14px; border-radius:3px;
  background:linear-gradient(180deg, #3b2b66, #1b1232);
  box-shadow:0 0 0 1px rgba(198,255,61,.15), 0 10px 30px -12px var(--acento);
}
.impresora__cama::before{
  content:""; position:absolute; inset:2px 0 auto; height:2px;
  background:repeating-linear-gradient(90deg, rgba(198,255,61,.35) 0 6px, transparent 6px 12px);
}
.impresora__lienzo{ position:absolute; left:8%; right:8%; top:8%; bottom:7%; width:84%; height:85%; display:block; }
/* el cabezal: solo durante la impresión */
.impresora__cabezal{
  position:absolute; width:34px; height:22px; margin:-28px 0 0 -17px; opacity:0;
  background:linear-gradient(180deg, #e9e4f5, #9a8fb8); border-radius:4px 4px 2px 2px;
  box-shadow:0 2px 0 #3a2d5c; transition:opacity .25s; pointer-events:none;
}
.impresora__cabezal::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:8px; height:8px; margin-left:-4px;
  background:#c7b8e8; clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.impresora--imprimiendo .impresora__cabezal{ opacity:1; }
.impresora--imprimiendo .impresora__cama{ box-shadow:0 0 0 1px rgba(198,255,61,.5), 0 10px 30px -8px var(--acento); }
.impresora__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3); margin-top:var(--e3); flex-wrap:wrap;
}
.impresora__estado{ margin:0; font-size:var(--t-sm); color:var(--texto-sec); min-height:1.4em; }
.impresora--hecha .impresora__estado{ color:var(--acento); font-weight:600; }
/* las bandejas de piezas */
.bandeja{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--e2); }
.pieza{ cursor:pointer; }
.pieza input{ position:absolute; opacity:0; width:1px; height:1px; }
.pieza__caja{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--e2);
  border:2px solid var(--borde); border-radius:var(--r-md); text-align:center;
  background:color-mix(in srgb, var(--fondo) 45%, transparent); transition:border-color var(--trans), background var(--trans);
}
.pieza:hover .pieza__caja{ border-color:var(--texto-ter); }
.pieza input:checked + .pieza__caja{ border-color:var(--acento); background:color-mix(in srgb, var(--acento) 9%, transparent); }
.pieza input:focus-visible + .pieza__caja{ outline:3px solid var(--cian); outline-offset:3px; }
.pieza__img{ width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pieza__n{ font-family:var(--display); font-weight:800; font-size:var(--t-sm); color:var(--texto); }
.pieza__p{ font-family:var(--display); font-weight:800; font-size:var(--t-xs); letter-spacing:.04em; color:var(--acento); }
.pieza__d{ font-size:var(--t-xs); color:var(--texto-sec); line-height:1.35; }
@media (prefers-reduced-motion: reduce){ .impresora__cabezal{ transition:none; } }
/* panel de la impresora, la pista de giro y la pieza que vuela */
.impresora__lienzo{ cursor:grab; touch-action:pan-y; outline:none; }
.impresora__lienzo:active{ cursor:grabbing; }
.impresora__lienzo:focus-visible{ box-shadow:inset 0 0 0 3px var(--cian); }
.impresora__hud{
  position:absolute; left:8%; right:8%; top:calc(4% + 22px); display:flex; gap:var(--e3); align-items:center;
  font-family:var(--display); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--texto-sec);
  pointer-events:none;
}
.hud__dato{ display:flex; flex-direction:column; line-height:1.1; }
.hud__dato small{ font-size:.6rem; opacity:.7; }
.hud__dato b{ color:var(--acento); font-variant-numeric:tabular-nums; }
.hud__progreso{ flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.hud__progreso i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--cian), var(--acento)); transition:width .2s linear; }
.impresora__pista{
  position:absolute; left:0; right:0; bottom:calc(5% + 20px); margin:0; text-align:center; pointer-events:none;
  font-family:var(--display); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-ter);
}
.impresora--imprimiendo .impresora__pista{ opacity:0; }
.impresora__cabezal::before{
  content:""; position:absolute; left:50%; bottom:-12px; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,243,168,.9), rgba(255,122,26,.5) 45%, transparent 70%);
  animation:latido .6s ease-in-out infinite;
}
.pieza__vuelo{ position:fixed; z-index:60; pointer-events:none; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(198,255,61,.45)); }
.impresora--hecha .impresora__marco{ box-shadow:0 0 0 2px var(--acento), 0 0 60px -10px var(--acento); transition:box-shadow .6s; }
@media (max-width:980px){ .impresora__hud{ gap:var(--e2); } }
.pieza--pronto{ cursor:default; }
.pieza--pronto .pieza__caja{ opacity:.45; border-style:dashed; }
.pieza--pronto .pieza__p::after{ content:" · en breve"; color:var(--texto-ter); }
.pieza--pronto .pieza__img{ visibility:hidden; }
.impresora--pasa .impresora__estado{ color:var(--naranja); font-weight:600; }

/* ================== RECAMBIOS, GARANTIA Y "TU PIPA" =====================
   Lo que hace volver: piezas sueltas a precio cerrado, cambio de diseno sin
   comprar otra pipa, garantia de media pieza y la ficha que abre el QR
   grabado en la base. Todo se pide igual que la pipa: se prepara el mensaje
   y lo envia el cliente desde su correo o su WhatsApp.
   ======================================================================== */
.campo > span small{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--texto-ter); margin-left:.3em; }
.campo select{
  width:100%; min-height:46px; padding:var(--e2) var(--e3);
  font-family:var(--texto-f); font-size:var(--t-sm); color:var(--texto);
  background:color-mix(in srgb, var(--fondo) 60%, transparent);
  border:2px solid var(--borde); border-radius:var(--r-md);
}
.campo select:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; }
.campo--mal select{ border-color:var(--acento-2); }
.campo--amigo{ margin-top:var(--e3); }

.garantia{
  max-width:780px; margin:var(--e5) auto 0; padding:var(--e3) var(--e4);
  display:flex; flex-wrap:wrap; gap:var(--e1) var(--e3); align-items:baseline; justify-content:center;
  text-align:center; border:2px solid var(--acento); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--acento) 8%, transparent);
  font-size:var(--t-sm); color:var(--texto-sec);
}
.garantia > b{
  font-family:var(--display); font-weight:900; font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--acento);
}
.garantia span b{ color:var(--texto); }

.rec{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e5);
  align-items:start; margin-top:var(--e6);
}
@media (max-width:860px){ .rec{ grid-template-columns:1fr; } }
.rec__col{
  display:grid; gap:var(--e3); min-width:0;
  background:var(--tarjeta); border:2px solid var(--borde);
  border-radius:var(--r-lg); padding:var(--e4);
}
.rec__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e2); }
.pieza{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--e2) var(--e3); align-items:center;
  padding:var(--e2) var(--e3); border:2px solid var(--borde); border-radius:var(--r-md);
  transition:border-color var(--trans), background var(--trans);
}
.pieza--elegida{ border-color:var(--acento-2); background:color-mix(in srgb, var(--acento-2) 10%, transparent); }
.pieza__txt{ min-width:0; }
.pieza__txt b{ display:block; font-size:var(--t-sm); }
.pieza__txt small{ display:block; font-size:var(--t-xs); color:var(--texto-ter); line-height:1.4; }
.pieza__txt s{ opacity:.7; }
.pieza__precio{
  font-family:var(--display); font-weight:900; font-stretch:115%;
  color:var(--acento); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cant{ display:flex; align-items:center; border:2px solid var(--borde); border-radius:var(--r-pil); }
.cant button{
  width:40px; height:40px; border:0; background:transparent; color:var(--texto);
  font-family:var(--display); font-size:1.15rem; font-weight:800; cursor:pointer; border-radius:var(--r-pil);
}
.cant button:hover:not(:disabled){ color:var(--acento); }
.cant button:disabled{ opacity:.3; cursor:default; }
.cant button:focus-visible{ outline:3px solid var(--cian); outline-offset:1px; }
.cant output{ min-width:1.6em; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
@media (max-width:420px){
  .pieza{ grid-template-columns:1fr auto; }
  .pieza__txt{ grid-column:1 / -1; }          /* abajo: precio a un lado, cantidad al otro */
}
.rec__fila{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e3); }
@media (max-width:420px){ .rec__fila{ grid-template-columns:1fr; } }
.rec__total{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px var(--e3);
  padding-top:var(--e3); border-top:2px solid var(--borde);
}
.rec__total span{
  font-family:var(--display); font-size:.62rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-ter);
}
.rec__total b{
  font-family:var(--display); font-weight:900; font-stretch:118%; font-size:2rem;
  color:var(--acento); font-variant-numeric:tabular-nums;
}
.rec__total small{ grid-column:1 / -1; font-size:var(--t-xs); color:var(--texto-ter); }

/* la ficha que abre el QR: una hoja sobre la pagina, no otra pagina */
.mipipa{
  width:min(560px, calc(100% - 2 * var(--e3))); max-height:calc(100dvh - 2 * var(--e3));
  padding:var(--e5) var(--e4) var(--e4); overflow-y:auto;
  color:var(--texto); background:var(--tarjeta);
  border:2px solid var(--acento); border-radius:var(--r-lg); box-shadow:var(--sombra);
  text-align:center;
}
.mipipa::backdrop{ background:rgba(6, 3, 14, .78); backdrop-filter:blur(4px); }
.mipipa[open]{ display:grid; gap:var(--e3); }
.mipipa .ojo{ margin:0; }
.mipipa__cerrar{
  position:absolute; top:var(--e2); right:var(--e2); width:44px; height:44px;
  border:2px solid var(--borde); border-radius:50%; background:transparent;
  color:var(--texto); font-size:1.4rem; line-height:1; cursor:pointer;
}
.mipipa__cerrar:focus-visible{ outline:3px solid var(--cian); outline-offset:2px; }
.mipipa__nombre{ margin:0; font-size:var(--t-h3); }
.mipipa__serie{ margin:0; font-size:var(--t-xs); color:var(--texto-ter); letter-spacing:.06em; }
.mipipa__serie b{ color:var(--texto); font-variant-numeric:tabular-nums; }
.mipipa__foto{
  display:block; margin:0 auto; width:auto; height:auto;
  max-width:100%; max-height:min(42vh, 360px);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
}
.mipipa__datos{ text-align:left; }
.mipipa__acciones{ display:grid; gap:var(--e2); }
.mipipa__amigo{
  display:grid; gap:var(--e2); padding:var(--e3); text-align:left;
  border:1px solid var(--acento-2); border-radius:var(--r-md);
  background:color-mix(in srgb, var(--acento-2) 8%, transparent);
  font-size:var(--t-sm); color:var(--texto-sec);
}
.mipipa__amigo b{ color:var(--texto); }
.mipipa__codigo{ display:flex; align-items:center; justify-content:space-between; gap:var(--e2); flex-wrap:wrap; }
.mipipa__codigo code{
  font-family:var(--display); font-weight:900; font-size:1.05rem; letter-spacing:.06em;
  color:var(--acento); user-select:all;
}
.mipipa__garantia{ margin:0; font-size:var(--t-xs); color:var(--texto-ter); }

@media (max-width:420px){ .banco__tabs button{ min-height:38px; padding:0 var(--e2); letter-spacing:.03em; } }