/* Poppins auto-hospedada — subconjunto latino, 3 pesos, ~23 KB en total.
   El manual de marca ZUCA exige Poppins únicamente. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-700.woff2) format('woff2')}

/* ==========================================================================
   ZUCA retail — dirección «Frente»
   Tokens del manual de marca ZUCA. Poppins únicamente. Azul 60 / oro 10.
   ========================================================================== */
:root{
  --azul:#1A4FA0; --azul-mid:#15407F; --azul-luz:#E8EFFA;
  --tinta:#071730; --tinta-2:#0C2444; --tinta-3:#102E52;
  --oro:#F5A623; --oro-luz:#FFD48A; --oro-tinta:#7A4E05;
  --papel:#F7F9FC; --carta:#FFFFFF; --linea:#DCE4F0; --linea-2:#EDF2F9;
  --texto:#0F1B2D; --pizarra:#56657D; --pizarra-2:#7E8CA3;

  --disp:'Poppins','Avenir Next',system-ui,sans-serif;

  --t-hero:clamp(2.6rem,1.5rem + 4.2vw,5.4rem);
  --t-h2:clamp(1.9rem,1.3rem + 2.2vw,3.2rem);
  --t-h3:clamp(1.1rem,1rem + .5vw,1.45rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.09rem);
  --t-sm:.9rem;
  --t-label:.71rem;

  --banda:clamp(4rem,2.8rem + 4.4vw,8rem);
  --canal:clamp(1.25rem,5vw,5rem);
  --max:1240px;

  --r-carta:8px;   /* manual: 8px tarjeta */
  --r-boton:4px;   /* manual: 4px botón  */
  --sombra:0 26px 60px -28px rgba(7,23,48,.42);
  --resorte:cubic-bezier(.34,1.4,.5,1);
  --suave:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --azul:#5C93E0; --azul-mid:#7BAAEC; --azul-luz:#12294B;
    --tinta:#04101F; --tinta-2:#0A1E38; --tinta-3:#123054;
    --oro:#F7B742; --oro-luz:#FFD48A; --oro-tinta:#FFDFA6;
    --papel:#081525; --carta:#0D1F35; --linea:#1D3651; --linea-2:#152A42;
    --texto:#E7EEF8; --pizarra:#9FB1C8; --pizarra-2:#7C8EA6;
    --sombra:0 26px 60px -28px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --azul:#5C93E0; --azul-mid:#7BAAEC; --azul-luz:#12294B;
  --tinta:#04101F; --tinta-2:#0A1E38; --tinta-3:#123054;
  --oro:#F7B742; --oro-luz:#FFD48A; --oro-tinta:#FFDFA6;
  --papel:#081525; --carta:#0D1F35; --linea:#1D3651; --linea-2:#152A42;
  --texto:#E7EEF8; --pizarra:#9FB1C8; --pizarra-2:#7C8EA6;
  --sombra:0 26px 60px -28px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --azul:#1A4FA0; --azul-mid:#15407F; --azul-luz:#E8EFFA;
  --tinta:#071730; --tinta-2:#0C2444; --tinta-3:#102E52;
  --oro:#F5A623; --oro-luz:#FFD48A; --oro-tinta:#7A4E05;
  --papel:#F7F9FC; --carta:#FFFFFF; --linea:#DCE4F0; --linea-2:#EDF2F9;
  --texto:#0F1B2D; --pizarra:#56657D; --pizarra-2:#7E8CA3;
  --sombra:0 26px 60px -28px rgba(7,23,48,.42);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--disp); font-weight:400; font-size:var(--t-body);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:700; line-height:1.06; letter-spacing:-.03em; text-wrap:balance; margin:0}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2.5px solid var(--oro); outline-offset:3px; border-radius:2px}
::selection{background:var(--oro); color:#071730}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.banda{padding-block:var(--banda); padding-inline:var(--canal)}
.wrap{max-width:var(--max); margin-inline:auto}
.oscura{background:var(--tinta); color:#EAF1FB}
.oscura h2,.oscura h3,.oscura h4{color:#fff}

.rotulo{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:var(--t-label); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azul);
}
.rotulo::before{content:''; width:26px; height:2px; background:var(--oro); flex:none}
.oscura .rotulo{color:var(--oro-luz)}

.bajada{font-size:clamp(1.05rem,1rem + .4vw,1.32rem); color:var(--pizarra); max-width:62ch; line-height:1.58}
.oscura .bajada{color:#A9BFDC}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:.94rem; padding:.95rem 1.7rem;
  border-radius:var(--r-boton); border:1.5px solid transparent; cursor:pointer;
  transition:transform .3s var(--suave), background .3s, border-color .3s, color .3s;
}
.btn-oro{background:var(--oro); color:#08182F}
.btn-oro:hover{background:var(--oro-luz); transform:translateY(-2px)}
.btn-linea{border-color:rgba(255,255,255,.32); color:#fff}
.btn-linea:hover{border-color:var(--oro); color:var(--oro-luz); transform:translateY(-2px)}
.btn-azul{background:var(--azul); color:#fff}
.btn-azul:hover{background:var(--azul-mid); transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem var(--canal);
  background:rgba(7,23,48,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.marca{display:flex; align-items:baseline; gap:.4rem; font-weight:700; font-size:1.2rem; color:#fff; letter-spacing:-.03em}
.marca span{font-weight:400; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--oro)}
.nav-links{display:flex; gap:1.6rem; margin-left:1.5rem}
.nav-links a{font-size:.9rem; font-weight:500; color:rgba(255,255,255,.78); position:relative; padding-block:.2rem}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--oro); transition:width .32s var(--suave)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-fin{margin-left:auto; display:flex; align-items:center; gap:.85rem}
.idioma{display:flex; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-boton); overflow:hidden}
.idioma button{
  font-family:inherit; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  padding:.36rem .6rem; border:0; background:none; color:rgba(255,255,255,.6); cursor:pointer; transition:.25s;
}
.idioma button[aria-pressed="true"]{background:var(--oro); color:#08182F}
.nav .btn{padding:.6rem 1.15rem; font-size:.84rem}
@media (max-width:900px){ .nav-links{display:none} }

/* ==========================================================================
   HERO — el anaquel vivo
   ========================================================================== */
.hero{
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(26,79,160,.34), transparent 62%),
    linear-gradient(180deg,#071730 0%,#061228 100%),
    var(--tinta);
  color:#fff; padding:clamp(3rem,6vw,5.5rem) var(--canal) 0; overflow:hidden;
}
.hero-in{max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2rem,4vw,4.5rem); align-items:center}
@media (max-width:960px){ .hero-in{grid-template-columns:1fr; gap:2.5rem} }

.hero-copy{display:flex; flex-direction:column; gap:1.5rem; padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero h1{font-size:var(--t-hero); max-width:13ch}
.hero h1 .oroh{color:var(--oro)}
.hero .bajada{color:#A6BDDB; max-width:46ch}
.hero-acts{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.3rem}

.hero-datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-carta); overflow:hidden; margin-top:.6rem;
}
.hero-datos div{background:var(--tinta-2); padding:.9rem 1rem 1rem}
.hero-datos b{display:block; font-size:1.5rem; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; color:var(--oro)}
.hero-datos small{display:block; margin-top:.4rem; font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:#8AA4C6; line-height:1.45}

/* --- la góndola interactiva --- */
.gondola{
  position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(.5rem,1.4vw,1rem); padding-block:clamp(1.5rem,3vw,3rem);
}
.gondola-cap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:var(--t-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6E8CB0;
}
.gondola-cap b{color:var(--oro); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; font-size:.9rem}

.riel{
  position:relative; height:clamp(58px,9vw,86px);
  display:flex; align-items:flex-end; gap:4px;
  padding:0 4px 5px; border-bottom:3px solid var(--oro);
  border-radius:2px;
}
.riel::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.9),transparent);
  opacity:0; transition:opacity .4s;
}
.riel.pulso::after{opacity:1}

.frente{
  flex:1 1 0; min-width:0; height:100%;
  appearance:none; padding:0; font:inherit;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,rgba(120,168,235,.62),rgba(92,147,224,.18));
  border:1px solid rgba(146,190,247,.34); border-bottom:0;
  transform-origin:bottom center;
  transition:transform .55s var(--resorte), opacity .4s ease, background .3s;
  cursor:pointer;
  position:relative;
}
.frente::before{
  content:''; position:absolute; inset:auto 22% 26% 22%; height:3px; border-radius:2px;
  background:rgba(255,255,255,.3);
}
.frente:hover{background:linear-gradient(180deg,rgba(160,200,250,.8),rgba(120,168,235,.28))}
.frente.tomado{transform:translateY(-46px) scale(.9); opacity:0}
.frente.vacio{
  background:repeating-linear-gradient(45deg,rgba(192,52,29,.3) 0 4px,transparent 4px 8px);
  border:1px dashed rgba(240,120,92,.5); border-bottom:0; cursor:default;
}
.frente.dorado{background:linear-gradient(180deg,var(--oro),rgba(245,166,35,.24)); border-color:rgba(245,166,35,.6)}

.gondola-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-size:.76rem; color:#7E9AC0; margin-top:.4rem;
}
.gondola-pie kbd{
  font-family:inherit; font-size:.68rem; font-weight:600; letter-spacing:.06em;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  padding:.2rem .45rem; border-radius:3px; color:#BBD0EA;
}

/* ==========================================================================
   Bandas de contenido
   ========================================================================== */
.enc{display:flex; flex-direction:column; gap:1.1rem; max-width:66ch; margin-bottom:clamp(2rem,4vw,3.2rem)}

/* --- comprador: las tres respuestas --- */
.tres{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-carta); overflow:hidden}
.tres article{background:var(--carta); padding:1.6rem 1.5rem 1.8rem; display:flex; flex-direction:column; gap:.7rem; transition:background .3s var(--suave)}
.tres article:hover{background:var(--linea-2)}
.tres .miedo{font-size:var(--t-label); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--pizarra-2)}
.tres h3{font-size:var(--t-h3); color:var(--azul)}
.tres p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.58}

/* --- catálogo estilo ficha --- */
.familias{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(1rem,2vw,1.6rem)}
.fam{
  background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-carta);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--suave), box-shadow .4s var(--suave), border-color .3s;
}
.fam:hover{transform:translateY(-5px); box-shadow:var(--sombra); border-color:var(--azul)}
.fam-vis{
  aspect-ratio:16/10; background:var(--tinta); position:relative; overflow:hidden;
  display:grid; place-items:center; padding:1.2rem;
}
.fam-vis svg{width:100%; height:100%; overflow:visible}
.fam:hover .fam-vis svg{transform:scale(1.04)}
.fam-vis svg{transition:transform .5s var(--suave)}
.fam-n{
  position:absolute; top:.75rem; left:.85rem;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; color:var(--oro);
  font-variant-numeric:tabular-nums;
}
.fam-ref{
  position:absolute; bottom:.75rem; right:.85rem;
  font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#5F7EA5;
}
.fam-txt{padding:1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1}
/* la tarjeta es clara aunque la banda sea oscura: el titular no puede heredar blanco */
.oscura .fam-txt h3{font-size:1.12rem; color:var(--texto)}
.fam-txt ul{display:flex; flex-direction:column; gap:.42rem}
.fam-txt li{font-size:var(--t-sm); color:var(--pizarra); line-height:1.5; padding-left:1.1rem; position:relative}
.fam-txt li::before{content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--oro); border-radius:1px}
.fam-pie{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:.78rem; font-weight:600; color:var(--azul);
}
.fam-pie span{color:var(--pizarra-2); font-weight:400; font-variant-numeric:tabular-nums}
.fam-pie .fl{transition:transform .3s var(--suave)}
.fam:hover .fam-pie .fl{transform:translateX(4px)}

/* --- consumibles --- */
.cons{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3.5rem); align-items:center}
@media (max-width:860px){ .cons{grid-template-columns:1fr} }
.cons-lista{display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-carta); overflow:hidden}
.cons-lista > div{background:var(--tinta-2); padding:1rem 1.2rem; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:baseline; transition:background .3s}
.cons-lista > div:hover{background:var(--tinta-3)}
.cons-lista b{font-weight:600; font-size:.98rem; color:#fff}
.cons-lista p{font-size:.8rem; color:#93AECD; margin-top:.15rem}
.cons-lista em{font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--oro-luz); white-space:nowrap}

/* --- proceso --- */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-carta); overflow:hidden; counter-reset:p}
.pasos article{background:var(--carta); padding:1.5rem 1.4rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; position:relative; transition:background .3s}
.pasos article:hover{background:var(--linea-2)}
.pasos article::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  font-size:.8rem; font-weight:700; color:var(--oro); letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.pasos h3{font-size:1.06rem}
.pasos p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.55}

/* --- capacidades --- */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-carta); overflow:hidden}
.caps article{background:var(--tinta-2); padding:1.5rem 1.4rem 1.7rem; display:flex; flex-direction:column; gap:.55rem; transition:background .35s var(--suave)}
.caps article:hover{background:var(--tinta-3)}
.caps .k{font-size:var(--t-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro)}
.caps h3{font-size:1.1rem}
.caps p{font-size:var(--t-sm); color:#A0B8D6; line-height:1.55}

/* --- cotización --- */
.cot{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.75rem,3.5vw,4rem); align-items:start}
@media (max-width:860px){ .cot{grid-template-columns:1fr} }
.form{
  background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-carta);
  padding:clamp(1.4rem,3vw,2.2rem); display:grid; gap:1rem;
  grid-template-columns:1fr 1fr; box-shadow:var(--sombra);
}
.campo{display:flex; flex-direction:column; gap:.4rem}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:var(--t-label); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--pizarra-2)}
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:.95rem; color:var(--texto);
  padding:.75rem .85rem; border:1.5px solid var(--linea); border-radius:var(--r-boton);
  background:var(--papel); transition:border-color .25s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul); outline:none}
.campo textarea{resize:vertical; min-height:96px}
.consent{grid-column:1/-1; display:flex; gap:.65rem; align-items:flex-start; font-size:.78rem; color:var(--pizarra); line-height:1.5}
.consent input{margin-top:.25rem; accent-color:var(--azul); flex:none; width:16px; height:16px}
.form .btn{grid-column:1/-1; justify-content:center}
.nota{grid-column:1/-1; font-size:.76rem; color:var(--pizarra-2); text-align:center}

/* --- pie --- */
.pie{background:var(--tinta); color:#A0B8D6; padding:clamp(2.8rem,5vw,4.5rem) var(--canal) 2rem; border-top:3px solid var(--oro)}
.pie-in{max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem}
@media (max-width:760px){ .pie-in{grid-template-columns:1fr 1fr} }
.pie h4{font-size:var(--t-label); font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#6E88AB; margin-bottom:.9rem}
.pie ul{display:flex; flex-direction:column; gap:.5rem}
.pie a{font-size:.88rem; transition:color .25s}
.pie a:hover{color:var(--oro-luz)}
.pie-legal{max-width:var(--max); margin:2.5rem auto 0; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.11); font-size:.76rem; color:#5F7EA5; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between}

/* --- revelado al scroll --- */
.rev{opacity:0; transform:translateY(22px); transition:opacity .7s var(--suave), transform .7s var(--suave)}
.rev.visto{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .rev{opacity:1; transform:none}
}

/* ==========================================================================
   Páginas interiores — añadido por build.py
   ========================================================================== */
.logo{height:100%; width:auto; color:inherit}
.marca{height:34px; color:#fff}
.marca-pie{height:38px; margin-bottom:1rem}
.pie-desc{font-size:.88rem; max-width:36ch}

.idioma{align-items:stretch}
.idioma span,.idioma a{
  display:flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  padding:.36rem .6rem; color:rgba(255,255,255,.6); transition:.25s;
}
.idioma span[aria-current]{background:var(--oro); color:#08182F}
.idioma a:hover{color:#fff}

.banda-tope{padding-top:clamp(2.6rem,5vw,4.5rem)}
.enc-plano{margin-bottom:0}
.enc h1{font-size:var(--t-h2)}
.nota-suave{font-size:var(--t-sm); color:#93AECD; max-width:52ch}
.puntos{display:flex; flex-direction:column; gap:.6rem; margin-top:.5rem}
.puntos li{font-size:var(--t-sm); color:var(--pizarra); padding-left:1.1rem; position:relative}
.puntos li::before{content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--oro); border-radius:1px}

/* tarjeta de familia como enlace */
a.fam{color:inherit}
.fam-res{font-size:var(--t-sm); color:var(--texto); font-weight:600; line-height:1.45}
.oscura .fam-res{color:var(--texto)}

/* hero de familia */
.fam-hero{background:var(--tinta); color:#fff; padding:clamp(2.6rem,5vw,4.6rem) var(--canal)}
.fam-hero-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media (max-width:860px){ .fam-hero-in{grid-template-columns:1fr} }
.fam-hero h1{font-size:var(--t-h2); margin:.8rem 0 1rem; color:#fff; max-width:16ch}
.fam-hero .bajada{color:#A9BFDC; margin-bottom:1.4rem}
.fam-hero-vis{background:var(--tinta-2); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-carta); padding:clamp(1.2rem,3vw,2.4rem)}
.fam-hero-vis svg{width:100%; height:auto}

/* configuraciones */
.cfgs{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.cfg{background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-carta); padding:1.2rem 1.3rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem; transition:transform .4s var(--suave), box-shadow .4s var(--suave)}
.cfg:hover{transform:translateY(-4px); box-shadow:var(--sombra)}
.cfg-vis{background:var(--tinta); border-radius:6px; padding:.9rem; margin-bottom:.3rem}
.cfg-vis svg{width:100%; height:auto}
.oscura .cfg h3{font-size:1rem; color:var(--texto); letter-spacing:-.02em}
.cfg p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.5}

/* pasos sin numeración (beneficios) */
.pasos-sin-numero article::before{content:none}

/* categorías de aplicación */
.cats{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem)}
.cats li{font-size:.86rem; font-weight:600; color:var(--azul); background:var(--azul-luz);
  border:1px solid var(--linea); border-radius:var(--r-boton); padding:.55rem 1rem}

/* avisos y cierres */
.aviso{background:var(--tinta-2); border:1px solid rgba(255,255,255,.14); border-left:4px solid var(--oro);
  border-radius:var(--r-carta); padding:1.4rem 1.5rem; margin-top:clamp(1.5rem,3vw,2.4rem); max-width:78ch}
.aviso h3{font-size:1.1rem; margin-bottom:.5rem; color:#fff}
.aviso p{font-size:var(--t-sm); color:#A0B8D6; line-height:1.6}
.aviso-claro{background:var(--carta); border-color:var(--linea); border-left-color:var(--oro)}
.aviso-claro h3{color:var(--texto)}
.aviso-claro p{color:var(--pizarra)}

.dos-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,3vw,3rem)}
.dos-col h3{font-size:var(--t-h3); margin-bottom:.6rem; color:var(--azul)}
.dos-col p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.6}

.cierre{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
  background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-carta); padding:clamp(1.4rem,3vw,2.2rem)}
.cierre h3{font-size:var(--t-h3); margin-bottom:.4rem}
.cierre p{font-size:var(--t-sm); color:var(--pizarra); max-width:46ch}
.cierre-acts{display:flex; flex-wrap:wrap; gap:.7rem}
.btn-fantasma{border-color:var(--linea); color:var(--texto)}
.btn-fantasma:hover{border-color:var(--azul); color:var(--azul); transform:translateY(-2px)}

.legal{display:flex; flex-direction:column; gap:1.5rem; max-width:72ch}
.legal h3{font-size:var(--t-h3); margin-bottom:.4rem; color:var(--azul)}
.legal p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.65}

.pie-in{grid-template-columns:1.5fr 1fr 1fr 1fr}
@media (max-width:900px){ .pie-in{grid-template-columns:1fr 1fr} }
.pie-legal a{transition:color .25s}
.pie-legal a:hover{color:var(--oro-luz)}

/* ==========================================================================
   Hero con diorama — reemplaza la composición a dos columnas
   ========================================================================== */
.hero{
  background:
    linear-gradient(95deg, #071730 0%, rgba(7,23,48,.96) 30%, rgba(7,23,48,.55) 52%, rgba(7,23,48,.12) 70%, transparent 84%),
    image-set(url(../img/web/hero-diorama.webp) type("image/webp"), url(../img/web/hero-diorama.jpg) type("image/jpeg"))
      right center / cover no-repeat,
    #071730;
  padding-block:clamp(3.5rem,7vw,7rem);
  min-height:min(76vh,720px);
  display:flex; align-items:center;
}
.hero-in{max-width:var(--max); margin-inline:auto; width:100%; display:block}
.hero-copy{max-width:min(52ch,54%); padding-bottom:0}
.hero-datos{max-width:640px}

@media (max-width:900px){
  .hero{
    background:
      linear-gradient(180deg, rgba(7,23,48,.94) 0%, rgba(7,23,48,.9) 55%, rgba(7,23,48,.99) 100%),
      image-set(url(../img/web/hero-diorama.webp) type("image/webp"), url(../img/web/hero-diorama.jpg) type("image/jpeg"))
        center / cover no-repeat,
      #071730;
    min-height:0;
  }
  .hero-copy{max-width:none}
}

/* La góndola pasa a sección de demostración propia */
.demo{background:var(--tinta-2); color:#fff}
.demo-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media (max-width:900px){ .demo-in{grid-template-columns:1fr} }
.demo .gondola{padding-block:0}

/* Renders generados: imagen en vez de line-art */
.fam-vis{padding:0}
.fam-vis img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--suave)}
.fam:hover .fam-vis img{transform:scale(1.045)}
.fam-vis .fam-n,.fam-vis .fam-ref{z-index:2; text-shadow:0 1px 6px rgba(7,23,48,.9)}
.fam-hero-vis{padding:0; overflow:hidden}
.fam-hero-img{width:100%; height:auto; display:block}
.cfg-ref{font-size:.66rem; font-weight:700; letter-spacing:.14em; color:var(--oro-tinta); font-variant-numeric:tabular-nums}
.oscura .cfg-ref{color:var(--oro-tinta)}
.cfg{padding-top:1.3rem}

/* Galería de equipos (punto de pago) */
.galeria{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1rem,2vw,1.6rem); margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.equipo{margin:0; background:var(--carta); border:1px solid var(--linea); border-radius:var(--r-carta); overflow:hidden; transition:transform .4s var(--suave), box-shadow .4s var(--suave)}
.equipo:hover{transform:translateY(-4px); box-shadow:var(--sombra)}
.equipo img{width:100%; height:auto; display:block}
.equipo figcaption{padding:1.1rem 1.25rem 1.35rem}
.oscura .equipo h3{color:var(--texto); font-size:1.08rem; margin-bottom:.35rem}
.equipo p{font-size:var(--t-sm); color:var(--pizarra); line-height:1.55}

/* Video de demostración en página de familia */
.video-demo{margin:clamp(1.6rem,3vw,2.6rem) 0 0; border-radius:var(--r-carta); overflow:hidden; border:1px solid var(--linea); box-shadow:var(--sombra); max-width:960px}
.video-demo video{width:100%; height:auto; display:block}
.video-demo figcaption{padding:.85rem 1.1rem; font-size:var(--t-sm); color:var(--pizarra); background:var(--carta)}
@media (prefers-reduced-motion:reduce){ .video-demo video{display:none} }

/* Hero animado: la tienda que se ordena sola.
   El video corre una vez y congela en el último fotograma, que es
   exactamente la imagen de fondo — si no carga, no se nota. */
.hero{position:relative}
.hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg, #071730 0%, rgba(7,23,48,.96) 30%, rgba(7,23,48,.55) 52%, rgba(7,23,48,.12) 70%, transparent 84%);
}
.hero-in{position:relative; z-index:2}
@media (prefers-reduced-motion:reduce){ .hero-vid{display:none} }
@media (max-width:900px){
  .hero-vid{display:none}
  .hero::before{background:linear-gradient(180deg, rgba(7,23,48,.94) 0%, rgba(7,23,48,.9) 55%, rgba(7,23,48,.99) 100%)}
}

/* Miniaturas en la lista de consumibles */
.cons-lista > div{grid-template-columns:auto minmax(0,1fr) auto; align-items:center}
.cons-thumb{width:104px; height:58px; object-fit:cover; border-radius:6px; border:1px solid rgba(255,255,255,.14)}
@media (max-width:560px){ .cons-thumb{width:72px; height:44px} }

/* Cabecera de consumibles con bodegón destacado */
.cons-cabecera{margin-bottom:clamp(1.6rem,3vw,2.6rem); align-items:center}
.cons-cabecera .enc{margin-bottom:0}
.cons-destacada{width:100%; height:auto; border-radius:var(--r-carta); border:1px solid rgba(255,255,255,.14); box-shadow:var(--sombra)}

/* honeypot: invisible para humanos, presente para bots */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}