/* =========================================================================
   VOLTERIX HOME — hoja de estilos
   ========================================================================= */

:root{
  /* ---- Texto ---- */
  --tinta:#171717;
  --tinta-2:#4F4F4F;
  --tinta-3:#8A8A8A;
  --blanco:#FFFFFF;

  /* ---- Fondos ---- */
  --arena:#F6F6F4;          /* gris muy claro, sustituye al beige */
  --arena-2:#ECECE8;
  --linea:#E3E3E0;
  --linea-2:#F0F0EC;
  --oscuro:#141414;

  /* ---- Amarillo Volterix ----
     Es el acento de la marca. Los nombres --madera se conservan porque
     los usan muchas reglas de la hoja; ahora apuntan al amarillo.      */
  --amarillo:#FFC629;
  --amarillo-osc:#E9AC00;
  --amarillo-cl:#FFE9A8;
  --madera:#B58600;         /* amarillo oscuro, legible sobre blanco */
  --madera-cl:#FFC629;

  /* ---- WhatsApp ---- */
  --wa:#25D366;
  --wa-osc:#128C7E;

  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --r-xl:24px;

  --sh-s:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --sh-m:0 2px 6px rgba(0,0,0,.05), 0 14px 38px rgba(0,0,0,.08);
  --sh-l:0 30px 80px rgba(0,0,0,.14);

  --f-d:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-t:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:1240px;
  --pad:clamp(20px, 5vw, 40px);
  --sec-y:clamp(56px, 8vw, 100px);
  --hdr-h:74px;
  --top-h:40px;             /* barra superior amarilla */
}

*,*::before,*::after{box-sizing:border-box}

/* El atributo hidden debe ganar siempre. Sin esta regla, cualquier clase
   con display propio lo anula y el elemento queda visible aunque el
   JavaScript lo haya ocultado. Paso exactamente eso con el aviso de
   "no hay repisas con esos filtros", que se mostraba de forma
   permanente bajo el catálogo. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 12px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--f-t);
  font-size:16px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}

h1,h2,h3,h4{font-family:var(--f-d); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.4rem, 6.4vw, 4.05rem)}
h2{font-size:clamp(1.85rem, 4.1vw, 2.85rem)}
h3{font-size:clamp(1.1rem, 2vw, 1.32rem); line-height:1.25}
h4{font-size:.94rem; font-family:var(--f-t); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
p{margin:0}
em{font-style:italic}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

.skip{position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff; padding:12px 18px; z-index:999; border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--madera); outline-offset:3px; border-radius:4px}

.eyebrow{
  font-size:.76rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--madera); margin-bottom:14px;
}
.lead{font-size:clamp(1.02rem,1.5vw,1.12rem); color:var(--tinta-2); line-height:1.7}

/* ---------------------------- Animación ---------------------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1)}
.reveal.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
}

/* ---------------------------- Botones ------------------------------ */
.btn{
  --bg:var(--tinta); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:100px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  font-size:.93rem; font-weight:600; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:16px 30px; font-size:1rem}
.btn--block{width:100%}
.btn--wa{--bg:var(--wa); --fg:#0A2E1C}
.btn--wa:hover{--bg:#1FBE5B}
.btn--dark{--bg:var(--tinta); --fg:#fff}
.btn--am{--bg:var(--amarillo); --fg:#171717}
.btn--am:hover{--bg:var(--amarillo-osc)}
.btn--ghost{--bg:transparent; --fg:var(--tinta); --bd:var(--linea)}
.btn--ghost:hover{--bd:var(--tinta); --bg:transparent}
.ico-wa{width:19px; height:19px; flex:none}

/* ---------------------------- Header ------------------------------- */
.hdr{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease;
}
.hdr.scrolled{border-bottom-color:var(--linea-2); box-shadow:0 6px 22px rgba(27,25,23,.05)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--hdr-h)}

.logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--tinta)}
.logo__mark{color:var(--madera); display:flex}
.logo__txt{display:flex; flex-direction:column; line-height:1}
.logo__txt strong{font-size:1.02rem; font-weight:600; letter-spacing:.19em}
.logo__txt em{font-family:var(--f-d); font-style:italic; font-size:.86rem; color:var(--madera); letter-spacing:.03em; margin-top:3px}

.nav{display:flex; align-items:center; gap:5px}
.nav>a:not(.btn){
  padding:9px 13px; border-radius:100px; text-decoration:none;
  font-size:.92rem; font-weight:500; color:var(--tinta-2);
  transition:color .2s ease, background .2s ease;
}
.nav>a:not(.btn):hover{color:var(--tinta); background:var(--arena)}
.nav>a.active{color:var(--tinta); background:var(--arena-2)}
.nav__cta{margin-left:10px; padding:11px 20px}

.burger{display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:11px; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:2px; background:var(--tinta); border-radius:2px; transition:transform .3s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width:1100px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--linea-2);
    padding:14px var(--pad) 26px;
    box-shadow:0 24px 44px rgba(27,25,23,.1);
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:transform .28s ease, opacity .22s ease, visibility .28s;
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
  }
  .nav.open{transform:none; opacity:1; visibility:visible}
  .nav>a:not(.btn){padding:14px 12px; font-size:1.04rem; border-radius:var(--r-s)}
  .nav__cta{margin:14px 0 0; padding:16px 24px; font-size:1rem}
}

/* El bloque del hero antiguo se retiró: el marcado ya no lo usa.
   Las reglas vigentes están más abajo, en el tema amarillo. */

/* ---------------------------- Franja ------------------------------- */
.strip{background:var(--oscuro); color:#F3EEE7}
.strip__in{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,36px); padding-block:clamp(28px,4vw,44px)}
.strip__i{display:flex; gap:13px; align-items:flex-start}
.strip__n{font-family:var(--f-d); font-size:.9rem; color:var(--madera-cl); flex:none; padding-top:2px}
.strip__i p{font-size:.92rem; line-height:1.5; color:#D9D1C6}
@media (max-width:780px){ .strip__in{grid-template-columns:1fr 1fr; gap:20px} }
@media (max-width:440px){ .strip__in{grid-template-columns:1fr} }

/* ---------------------------- Secciones ---------------------------- */
.sec{padding-block:var(--sec-y)}
.sec--sand{background:var(--arena)}
.sec--dark{background:var(--oscuro); color:#F3EEE7}
.sec--dark .eyebrow{color:var(--madera-cl)}

.sec__hd{max-width:60ch; margin-bottom:clamp(34px,4.5vw,54px)}
.sec__hd--center{margin-inline:auto; text-align:center}
.sec__sub{margin-top:16px; color:var(--tinta-2); font-size:1.02rem}

/* ---------------------------- Categorías --------------------------- */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:46px}
.cat{
  display:flex; gap:15px; align-items:flex-start; text-align:left;
  padding:22px; border:1px solid var(--linea); border-radius:var(--r-m);
  background:#fff; cursor:pointer; text-decoration:none;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cat:hover{border-color:var(--madera-cl); transform:translateY(-3px); box-shadow:var(--sh-s)}
.cat__ic{flex:none; width:44px; height:44px; border-radius:11px; background:var(--arena); display:grid; place-items:center; color:var(--madera)}
.cat__ic svg{width:26px; height:26px}
.cat h3{font-size:1.03rem; margin-bottom:5px}
.cat p{font-size:.86rem; color:var(--tinta-2); line-height:1.5}
@media (max-width:900px){ .cats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .cats{grid-template-columns:1fr} }

/* ---------------------------- Acabados ----------------------------- */
.finish{
  display:grid; grid-template-columns:1fr auto; gap:26px 40px; align-items:center;
  padding:clamp(24px,3.4vw,34px); border-radius:var(--r-l);
  background:var(--arena); margin-bottom:46px;
}
.finish__hd h3{margin-bottom:6px}
.finish__hd p{font-size:.92rem; color:var(--tinta-2)}
.finish__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px}
.finish__i{display:flex; flex-direction:column; align-items:center; gap:8px; width:78px}
.finish__sw{width:52px; height:52px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(27,25,23,.09), var(--sh-s)}
.finish__sw--bd{box-shadow:inset 0 0 0 1px var(--linea), var(--sh-s)}
.finish__i span{font-size:.79rem; font-weight:500; color:var(--tinta-2); text-align:center}
.finish__note{grid-column:1/-1; font-size:.79rem; color:var(--tinta-3); margin-top:-6px}
@media (max-width:720px){ .finish{grid-template-columns:1fr} }

/* ---------------------------- Filtros ------------------------------ */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px}
.chip{
  padding:9px 18px; border-radius:100px; border:1.5px solid var(--linea);
  background:#fff; font-size:.88rem; font-weight:500; color:var(--tinta-2); cursor:pointer;
  transition:all .2s ease;
}
.chip:hover{border-color:var(--tinta-3); color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:#fff}

/* ---------------------------- Grilla ------------------------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(16px,2vw,24px)}
.card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--linea-2); border-radius:var(--r-m); background:#fff;
  transition:transform .3s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--linea)}
.card__media{
  position:relative; width:100%; aspect-ratio:1/1; background:#fff;
  border:0; padding:0; cursor:zoom-in; overflow:hidden; display:block;
}
.card__media img{width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.035)}
.card__media svg{width:100%; height:100%}
.card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border:1px solid var(--linea-2); color:var(--tinta-2);
  font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
}
.card__body{padding:20px; display:flex; flex-direction:column; gap:12px; flex:1}
.card__body h3{font-size:1.06rem}
.card__dims{display:flex; flex-wrap:wrap; gap:6px}
.dim{
  font-size:.75rem; font-weight:600; letter-spacing:.02em;
  padding:4px 10px; border-radius:6px; background:var(--arena); color:var(--tinta-2);
}
.card__desc{font-size:.87rem; color:var(--tinta-2); line-height:1.55; flex:1}
.card__acts{display:flex; gap:8px; margin-top:2px}
.card__acts .btn{flex:1; padding:11px 14px; font-size:.85rem}
.card__more{
  background:none; border:0; padding:0; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--madera); cursor:pointer; text-align:left; text-decoration:underline; text-underline-offset:3px;
}
.grid__empty{text-align:center; color:var(--tinta-3); padding:50px 0}

.grid__foot{
  margin-top:44px; padding:clamp(26px,4vw,40px); border-radius:var(--r-l);
  background:var(--arena); display:flex; flex-wrap:wrap; gap:18px;
  align-items:center; justify-content:space-between;
}
.grid__foot p{font-family:var(--f-d); font-size:clamp(1.2rem,2.4vw,1.55rem)}

/* Ficha vectorial (producto sin fotografía) */
.svgcard{width:100%; height:100%; display:block; background:#fff}
.svgcard text{font-family:var(--f-t); fill:#6C645B}

/* ---------------------------- Personalización ---------------------- */
.custom{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center}
.custom__list{list-style:none; counter-reset:c; margin:30px 0 0; padding:0; display:grid; gap:12px}
.custom__list li{
  counter-increment:c; position:relative; padding-left:44px;
  font-size:.93rem; color:var(--tinta-2);
}
.custom__list li::before{
  content:counter(c,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--f-d); font-size:.82rem; color:var(--madera);
  width:30px; height:30px; border-radius:50%; background:#fff;
  border:1px solid var(--linea); display:grid; place-items:center;
}
.custom__list span{display:block; font-weight:600; color:var(--tinta); font-size:.93rem}
.custom__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.custom__img{margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-m)}
.custom__img img{width:100%; aspect-ratio:1/1; object-fit:cover}
@media (max-width:860px){
  .custom{grid-template-columns:1fr}
  .custom__img{order:-1}
  .custom__img img{aspect-ratio:4/3}
}

/* ---------------------------- Instalación -------------------------- */
.install__hd{max-width:56ch; margin-bottom:clamp(34px,4.5vw,50px)}
.install__hd .lead{margin-top:18px}
.install__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.icard{padding:clamp(24px,3vw,32px); border:1px solid var(--linea); border-radius:var(--r-m); background:#fff}
.icard__ic{width:46px; height:46px; border-radius:12px; background:var(--arena); display:grid; place-items:center; color:var(--madera); margin-bottom:18px}
.icard__ic svg{width:24px; height:24px}
.icard h3{margin-bottom:9px}
.icard p{font-size:.9rem; color:var(--tinta-2); line-height:1.6}
@media (max-width:820px){ .install__grid{grid-template-columns:1fr} }

.ph{
  margin-top:22px; padding:clamp(38px,6vw,64px) 24px; text-align:center;
  border:1.5px dashed var(--linea); border-radius:var(--r-l); background:var(--arena);
  color:var(--tinta-2);
}
.ph__ic{width:52px; height:52px; margin:0 auto 16px; color:var(--madera-cl)}
.ph__ic svg{width:100%; height:100%}
.ph strong{color:var(--tinta); font-size:1.02rem}
.ph__sub{font-size:.88rem; margin-top:8px; max-width:46ch; margin-inline:auto}

/* ---------------------------- Por qué ------------------------------ */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.09); border-radius:var(--r-m); overflow:hidden}
.why__i{padding:clamp(26px,3.4vw,36px); background:var(--oscuro)}
.why__i h3{color:#fff; margin-bottom:10px; font-size:1.08rem}
.why__i p{font-size:.9rem; color:#B9B1A6; line-height:1.6}
@media (max-width:860px){ .why{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .why{grid-template-columns:1fr} }

/* ---------------------------- Qué incluye -------------------------- */
.incl{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; align-items:stretch}
.incl__i{
  padding:clamp(24px,3vw,32px); border-radius:var(--r-m);
  background:#fff; border:1px solid var(--linea);
}
.incl__i--yes{border-color:var(--madera-cl); box-shadow:var(--sh-s)}
.incl__badge{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 11px; border-radius:100px;
  background:#E6F3EA; color:#1E6B3C; margin-bottom:16px;
}
.incl__badge--alt{background:#F5EADB; color:#8A6218}
.incl__i h3{margin-bottom:12px}
.incl__i p{font-size:.9rem; color:var(--tinta-2); line-height:1.65}
.incl__i p + p{margin-top:10px}
.incl__i ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.incl__i li{position:relative; padding-left:26px; font-size:.89rem; color:var(--tinta-2); line-height:1.55}
.incl__i li::before{
  content:""; position:absolute; left:0; top:.45em; width:13px; height:7px;
  border-left:2px solid var(--madera); border-bottom:2px solid var(--madera);
  transform:rotate(-45deg);
}
.incl__note{font-size:.83rem !important; color:var(--tinta-3) !important}
.steps__note{margin-top:32px; font-size:.86rem; color:var(--tinta-3); max-width:62ch}
@media (max-width:900px){ .incl{grid-template-columns:1fr} }

/* ---------------------------- Nosotros ----------------------------- */
.about{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center}
.about__img{margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-m)}
.about__img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.about__txt p{color:var(--tinta-2); margin-top:16px; line-height:1.75}
.mv{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px}
.mv__i{padding:24px; border-radius:var(--r-m); background:var(--arena); border:1px solid var(--linea-2)}
.mv__eyebrow{margin-top:34px !important; color:var(--madera) !important}
.mv__i--ancho{grid-column:1 / -1}
.mv__i h3{margin:0 0 8px; font-size:1.06rem}
.mv__i p{margin-top:0; font-size:.89rem; line-height:1.6}
.mv__note{font-size:.78rem !important; color:var(--tinta-3) !important; margin-top:14px !important}
.tag{display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:5px}
.tag--draft{background:#FBEFD8; color:#8A6218}
@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .about__img img{aspect-ratio:4/3}
}
@media (max-width:520px){ .mv{grid-template-columns:1fr} }

/* ---------------------------- FAQ ---------------------------------- */
.faq{max-width:820px; margin-inline:auto}
/* Listado largo (contacto.html). Son <details> nativos, no botones:
   hay que quitar el triangulo del navegador y sacar el titulo de la
   serif de titulares, que lo dejaba enorme y apretado. */
.faq__list{display:grid; gap:10px}
.faq__i{border-bottom:0}
.faq__list .faq__i{
  border:1px solid var(--linea); border-radius:var(--r-m); background:#fff;
  padding:0 18px; transition:border-color .18s ease, box-shadow .18s ease
}
.faq__list .faq__i:hover{border-color:#D5D5D0}
.faq__list .faq__i[open]{border-color:var(--amarillo); box-shadow:var(--sh-s)}
.faq__list .faq__i summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px; padding:16px 0
}
.faq__list .faq__i summary::-webkit-details-marker{display:none}
.faq__list .faq__i summary h3{
  margin:0; font-family:var(--f-t); font-size:.95rem; font-weight:600;
  line-height:1.45; color:var(--tinta)
}
.faq__list .faq__i summary:hover h3{color:var(--madera)}
.faq__list .faq__i summary::after{
  content:""; flex:none; width:9px; height:9px; margin-top:5px;
  border-right:2px solid var(--madera); border-bottom:2px solid var(--madera);
  transform:rotate(45deg); transition:transform .25s ease
}
.faq__list .faq__i[open] summary::after{transform:rotate(-135deg); margin-top:9px}
.faq__list .faq__i summary:focus-visible{
  outline:2px solid var(--amarillo); outline-offset:3px; border-radius:4px
}
.faq__list .faq__a p{
  margin:0; padding:13px 0 17px; border-top:1px solid var(--linea-2);
  font-size:.9rem; line-height:1.7; color:var(--tinta-2)
}
.faq__list .faq__a a{color:var(--madera); font-weight:600}
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 4px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-d); font-size:clamp(1.02rem,2vw,1.16rem); font-weight:500; color:var(--tinta);
}
.faq__q:hover{color:var(--madera)}
.faq__q svg{flex:none; width:20px; height:20px; margin-top:3px; transition:transform .3s ease; color:var(--madera)}
.faq__i.open .faq__q svg{transform:rotate(45deg)}
.faq__a{overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.22,.7,.3,1)}
/* Estas preguntas son <details> nativos: al abrirlas hay que soltar el
   max-height, o la respuesta queda invisible aunque este desplegada. */
.faq__i[open] .faq__a{max-height:none; overflow:visible}
.faq__a p{padding:0 44px 24px 4px; font-size:.94rem; color:var(--tinta-2); line-height:1.7}
.faq__foot{margin-top:32px; text-align:center; font-size:.94rem; color:var(--tinta-2)}
.faq__foot a{color:var(--madera); font-weight:600}

/* ---------------------------- Contacto ----------------------------- */
.contact{display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(30px,4.4vw,58px); align-items:start}
.contact__side .lead{margin:18px 0 28px}
.contact__data{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:2px; border-top:1px solid var(--linea)}
.contact__data li{display:flex; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--linea)}
.contact__data svg{width:20px; height:20px; flex:none; color:var(--madera)}
.contact__data b{display:block; font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-3)}
.contact__data a,.contact__data span{font-size:.97rem; color:var(--tinta); text-decoration:none; font-weight:500}
.contact__data a:hover{color:var(--madera)}

.contact__form{padding:clamp(26px,3.6vw,40px); border:1px solid var(--linea); border-radius:var(--r-l); background:var(--arena)}
.contact__form h3{margin-bottom:8px}
.form__intro{font-size:.9rem; color:var(--tinta-2); margin-bottom:26px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){ .f2{grid-template-columns:1fr} }
.field{margin-bottom:14px; display:flex; flex-direction:column; gap:7px}
.field label{font-size:.83rem; font-weight:600; color:var(--tinta)}
.field label span{color:var(--madera)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--linea); border-radius:var(--r-s);
  background:#fff; font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical; min-height:88px; font-family:inherit}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A534B' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:19px; padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--madera); box-shadow:0 0 0 3px rgba(168,124,79,.13)}
.field input[aria-invalid="true"]{border-color:#C4553D; box-shadow:0 0 0 3px rgba(196,85,61,.12)}
.field .err{font-size:.78rem; color:#B44A34}

.form__photo{
  display:flex; gap:12px; align-items:flex-start; margin:6px 0 22px; padding:15px 16px;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-s);
  font-size:.85rem; color:var(--tinta-2); line-height:1.55;
}
.form__photo svg{width:19px; height:19px; flex:none; color:var(--madera); margin-top:2px}
.form__photo strong{color:var(--tinta)}
.form__legal{font-size:.76rem; color:var(--tinta-3); margin-top:14px; line-height:1.55; text-align:center}
.form__legal a{color:var(--tinta-2)}

@media (max-width:880px){ .contact{grid-template-columns:1fr} }

/* ---------------------------- Footer ------------------------------- */
.ft{background:var(--oscuro); color:#CFC7BC; padding-top:clamp(50px,6vw,76px)}
.ft__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:clamp(26px,3.4vw,44px); padding-bottom:46px}
.ft .logo{color:#fff}
.ft .logo__mark{color:var(--madera-cl)}
.ft .logo__txt em{color:var(--madera-cl)}
.ft__brand p{margin-top:18px; font-size:.89rem; line-height:1.65; max-width:34ch; color:#A9A198}
.ft__social{display:flex; gap:10px; margin-top:22px}
.ft__social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:#CFC7BC;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ft__social a:hover{background:#fff; color:var(--oscuro); border-color:#fff}
.ft__social svg{width:19px; height:19px}
.ft__nav h4{color:#fff; margin-bottom:18px; font-size:.76rem; letter-spacing:.13em}
.ft__nav a{display:block; padding:6px 0; font-size:.89rem; color:#A9A198; text-decoration:none; transition:color .2s ease}
.ft__nav a:hover{color:#fff}
.ft__wa span{color:#fff}
.ft__bot{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  padding-block:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem; color:#8C847B;
}
.ft__legal{display:flex; gap:22px}
.ft__legal a{text-decoration:none; color:#8C847B}
.ft__legal a:hover{color:#fff}
@media (max-width:900px){ .ft__in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ft__in{grid-template-columns:1fr; gap:30px} }

/* ---------------------------- FAB ---------------------------------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 20px; border-radius:100px;
  background:var(--wa); color:#0A2E1C; text-decoration:none;
  font-size:.93rem; font-weight:600;
  box-shadow:0 10px 30px rgba(37,211,102,.36);
  transform:translateY(90px); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.22,.7,.3,1), opacity .3s ease, box-shadow .25s ease;
}
.fab{transform:none; opacity:1; pointer-events:auto}   /* siempre visible */
.fab:hover{box-shadow:0 14px 38px rgba(37,211,102,.5)}
.fab svg{width:23px; height:23px}
@media (max-width:560px){ .fab{right:14px; bottom:14px; padding:15px} .fab span{display:none} }

.sec__sub--center{margin-left:auto; margin-right:auto; text-align:center}
.sec--dark .sec__sub{color:rgba(255,255,255,.72)}

/* ------------------- Encabezado de página interior ------------------ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pagehd{
  padding:clamp(34px,5vw,60px) 0 clamp(26px,3.6vw,40px);
  background:linear-gradient(180deg,#fff 0%,var(--arena) 100%);
  border-bottom:1px solid var(--linea);
}
.pagehd h1{font-size:clamp(2rem,4.6vw,3.15rem); margin:6px 0 14px}
.pagehd__sub{font-size:clamp(1rem,1.7vw,1.12rem); color:var(--tinta-2); max-width:56ch; line-height:1.65}
.migas{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.82rem; margin-bottom:18px; color:var(--tinta-3)}
.migas a{color:var(--tinta-2)}
.migas a:hover{color:var(--madera)}
.migas b{font-weight:500; color:var(--tinta-3)}

/* ---------------------------- Guía rápida --------------------------- */
.guia{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r-m); background:#fff}
.guia table{width:100%; border-collapse:collapse; min-width:640px}
.guia th, .guia td{padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--linea-2)}
.guia thead th{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-2); background:var(--arena); font-weight:600;
}
.guia tbody th{font-size:.92rem; font-weight:600; width:26%}
.guia td{font-size:.9rem; color:var(--tinta-2); line-height:1.6}
.guia td:nth-child(2){color:var(--tinta); font-weight:500}
.guia tbody tr:last-child th, .guia tbody tr:last-child td{border-bottom:0}
.guia a{color:var(--madera); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ------------------------------ Blog -------------------------------- */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px}
.posts--all{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post__card{
  display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.8vw,28px);
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post__card:hover{transform:translateY(-3px); box-shadow:var(--sh-m); border-color:var(--madera-cl)}
.post__card--img{padding:0; overflow:hidden}
.post__thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--arena-2)}
.post__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.post__card--img:hover .post__thumb img{transform:scale(1.04)}
.post__card--img > :not(.post__thumb){margin-inline:clamp(20px,2.6vw,26px)}
.post__card--img > .post__meta{margin-top:20px}
.post__card--img > .post__more{margin-bottom:22px}

.post__img{margin:0 0 32px; border-radius:var(--r-l); overflow:hidden; background:var(--arena-2)}
.post__img img{width:100%; aspect-ratio:16/9; object-fit:cover}

.post__meta{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3)}
.post__card h3{font-size:1.12rem; line-height:1.32}
.post__card p{font-size:.88rem; color:var(--tinta-2); line-height:1.6; flex:1}
.post__more{font-size:.85rem; font-weight:600; color:var(--madera)}

.post{padding:clamp(30px,4.5vw,54px) 0 clamp(40px,5vw,70px)}
.post__in{max-width:74ch}
.post__hd{margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--linea)}
.post__hd h1{font-size:clamp(1.85rem,4.2vw,2.85rem); margin-top:10px; line-height:1.16}
.post h2{font-size:clamp(1.3rem,2.5vw,1.62rem); margin:38px 0 14px}
.post h2:first-of-type{margin-top:26px}
.post p{margin-bottom:16px; line-height:1.78; color:var(--tinta-2)}
.post__lead{font-size:1.08rem; color:var(--tinta) !important; line-height:1.7 !important}
.post ul{margin:0 0 20px; padding-left:0; list-style:none; display:grid; gap:11px}
.post ul li{position:relative; padding-left:26px; line-height:1.68; color:var(--tinta-2)}
.post ul li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--madera-cl);
}
.post strong{color:var(--tinta); font-weight:600}
.post__cta{
  margin-top:38px; padding:clamp(22px,3vw,30px); border-radius:var(--r-m);
  background:var(--arena); border:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.post__cta p{margin:0 !important; font-size:.95rem; max-width:44ch}

/* --------------------------- CTA final ------------------------------ */
.cta{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.cta h2{margin-bottom:10px}
.cta p{color:rgba(255,255,255,.78); max-width:52ch; line-height:1.68}
.cta__btns{display:flex; flex-wrap:wrap; gap:12px}
.btn--light{background:#fff; color:var(--tinta); border:1.5px solid #fff}
.btn--light:hover{background:transparent; color:#fff}
.ft__loc{font-size:.83rem; color:var(--tinta-3); margin-top:10px}

/* ------------------ Tipo de consulta (contacto) ---------------------- */
.tipos{border:0; padding:0; margin:0 0 22px}
.tipos legend{
  padding:0; margin-bottom:12px;
  font-size:.8rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-2);
}
.tipos legend span{color:var(--madera)}
.tipos .err{display:block; margin-top:10px}
.tipos__g{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.tipo{
  display:flex; align-items:flex-start; gap:11px; text-align:left;
  padding:14px 15px; border-radius:var(--r-m); cursor:pointer;
  background:#fff; border:1px solid var(--linea);
  font:inherit; color:var(--tinta); transition:border-color .14s, background .14s;
}
.tipo:hover{border-color:var(--amarillo-osc)}
.tipo svg{width:22px; height:22px; flex:none; color:var(--madera); margin-top:1px}
.tipo span{display:flex; flex-direction:column; gap:2px; min-width:0}
.tipo b{font-size:.89rem; font-weight:700; line-height:1.3}
.tipo em{font-style:normal; font-size:.76rem; color:var(--tinta-3); line-height:1.4}
.tipo[aria-checked="true"]{
  background:var(--arena); border-color:var(--amarillo);
  box-shadow:inset 0 0 0 1px var(--amarillo);
}
.tipo[aria-checked="true"] svg{color:var(--tinta)}
.tipo:focus-visible{outline:2px solid var(--amarillo-osc); outline-offset:2px}

/* Campos que dependen del tipo elegido */
.field[data-tipos][hidden], .form__photo[hidden]{display:none}

/* --------------------- Medidas en el formulario --------------------- */
.medidas{
  border:1px solid var(--linea); border-radius:var(--r-m);
  padding:16px 18px 18px; margin:0 0 18px; background:var(--arena);
}
.medidas[hidden]{display:none}
.medidas legend{
  padding:0 8px; font-size:.8rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-2);
}
.f3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:520px){ .f3{grid-template-columns:1fr} }

/* Categorías en paneles: foto y texto a la par, numeradas ------------- */
.cats--filas{grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px)}
.catf{
  display:flex; align-items:stretch; overflow:hidden;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.catf:hover{border-color:var(--amarillo); box-shadow:var(--sh-m); transform:translateY(-3px)}
.catf--inv{flex-direction:row-reverse}
.catf .cat__img{
  flex:0 0 42%; aspect-ratio:4/3; background:var(--arena);
  display:block; overflow:hidden;
}
.catf .cat__img img{width:100%; height:100%; object-fit:cover; mix-blend-mode:normal}
.catf__tx{
  flex:1 1 auto; min-width:0; padding:clamp(16px,1.8vw,24px);
  display:flex; flex-direction:column; justify-content:center; gap:0;
}
.catf__n{
  font-family:var(--f-t); font-weight:800; font-size:.9rem;
  color:var(--madera); letter-spacing:.08em; margin-bottom:6px;
}
.catf h3{
  font-family:var(--f-t); font-weight:700; font-size:1.02rem;
  line-height:1.25; margin-bottom:7px; text-wrap:balance;
}
.catf p{font-size:.85rem; color:var(--tinta-2); line-height:1.55; margin-bottom:14px}
.catf__b{
  align-self:flex-start; padding:9px 17px; border-radius:100px;
  background:var(--amarillo); color:#171717;
  font-size:.8rem; font-weight:700; white-space:nowrap;
  transition:background .2s ease;
}
.catf:hover .catf__b{background:var(--amarillo-osc)}

/* Si la cuenta es impar, el último panel ocupa la fila entera */
.cats--filas .catf:last-child:nth-child(odd){grid-column:1 / -1}
.cats--filas .catf:last-child:nth-child(odd) .cat__img{flex:0 0 21%}

@media (max-width:860px){
  .cats--filas{grid-template-columns:1fr}
  .cats--filas .catf:last-child:nth-child(odd) .cat__img{flex:0 0 42%}
}
@media (max-width:480px){
  .catf, .catf--inv{flex-direction:column}
  .catf .cat__img,
  .cats--filas .catf:last-child:nth-child(odd) .cat__img{flex:none; aspect-ratio:16/10}
}

/* ---------------------------- Carrusel ------------------------------ */
.carr{position:relative}
.carr__pista{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; margin:0 -4px;
  scrollbar-width:thin; scrollbar-color:var(--linea) transparent;
}
.carr__pista::-webkit-scrollbar{height:6px}
.carr__pista::-webkit-scrollbar-thumb{background:var(--linea); border-radius:100px}
.carr__pista::-webkit-scrollbar-track{background:transparent}
.carr__cel{flex:0 0 clamp(240px,26vw,300px); scroll-snap-align:start}
.carr__cel .card{height:100%}
.carr__nav{
  position:absolute; top:38%; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--linea); background:#fff; color:var(--tinta);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  box-shadow:var(--sh-m); transition:opacity .2s ease, background .2s ease;
}
.carr__nav svg{width:20px; height:20px}
.carr__nav:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.carr__nav:disabled{opacity:0; pointer-events:none}
.carr__nav--prev{left:-18px}
.carr__nav--next{right:-18px}
@media (max-width:900px){
  .carr__nav{display:none}
  .carr__cel{flex:0 0 min(74vw,290px)}
}

/* --------------------- Libro de Reclamaciones ---------------------- */
.ft__libro{
  display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 2*var(--pad));
  margin:0 auto 28px; padding:14px 22px; border-radius:var(--r-m);
  border:1.5px solid rgba(255,255,255,.22); color:#fff;
  transition:border-color .2s ease, background .2s ease;
}
.ft__libro:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.ft__libro svg{width:26px; height:26px; flex:none}
.ft__libro span{display:flex; flex-direction:column; gap:2px; font-size:.76rem; color:rgba(255,255,255,.6); line-height:1.4}
.ft__libro b{font-size:.92rem; color:#fff; font-weight:600}
@media (max-width:520px){
  .ft__libro{width:auto; margin-left:var(--pad); margin-right:var(--pad)}
  .ft__libro span{font-size:.72rem}
}

/* ------------------------ Manual de instalación -------------------- */
.manual{max-width:78ch}
.manual__h{font-size:clamp(1.28rem,2.5vw,1.62rem); margin:44px 0 18px}
.manual__h:first-of-type{margin-top:0}
.manual__p{color:var(--tinta-2); line-height:1.78}

.aviso{
  padding:18px 22px; border-radius:var(--r-m); margin-bottom:38px;
  background:#FDF6E7; border:1px solid #E8D5A8; color:#6B5417;
  font-size:.92rem; line-height:1.68;
}
.aviso strong{color:#4A3A0F}

.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.tool{
  padding:16px 18px; border-radius:var(--r-s); background:#fff;
  border:1px solid var(--linea); display:grid; gap:3px;
}
.tool b{font-size:.9rem}
.tool span{font-size:.8rem; color:var(--tinta-3); line-height:1.45}
.tool--inc{border-color:var(--madera-cl); background:var(--arena)}

.pasos{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.pasos__i{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--linea-2)}
.pasos__i:last-child{border-bottom:0}
.pasos__n{font-family:var(--f-d); font-size:1.5rem; color:var(--madera-cl); line-height:1.1}
.pasos__i h3{font-size:1.04rem; margin-bottom:7px}
.pasos__i p{font-size:.92rem; color:var(--tinta-2); line-height:1.7; margin:0}

.modelos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.modelo{padding:22px 24px; border-radius:var(--r-m); background:#fff; border:1px solid var(--linea)}
.modelo h3{font-size:1.02rem; margin-bottom:9px}
.modelo p{font-size:.89rem; color:var(--tinta-2); line-height:1.68; margin:0}

.errores{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.errores li{position:relative; padding-left:30px; font-size:.92rem; color:var(--tinta-2); line-height:1.68}
.errores li::before{
  content:"!"; position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:#FBEAE5; color:#B4402B; font-size:.72rem;
  font-weight:700; display:grid; place-items:center;
}
.errores b{color:var(--tinta)}

/* ---------------------------- Buscador ----------------------------- */
.search{position:relative; flex:none; margin-left:auto}
.search__t{
  width:44px; height:44px; border:1.5px solid var(--linea); border-radius:50%;
  background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--tinta);
  transition:border-color .2s ease;
}
.search__t:hover{border-color:var(--tinta)}
.search__t svg{width:20px; height:20px}
.search.open .search__t{background:var(--tinta); color:#fff; border-color:var(--tinta)}

.search__box{
  position:absolute; top:calc(100% + 12px); right:0; width:min(430px,calc(100vw - 32px));
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#fff; border:1px solid var(--linea); border-radius:100px; box-shadow:var(--sh-m);
}
.search__box[hidden]{display:none}
.search__ico{width:19px; height:19px; flex:none; color:var(--tinta-3)}
.search__box input{
  flex:1; border:0; outline:0; background:none; font-size:1rem; min-width:0;
  -webkit-appearance:none; appearance:none;
}
.search__box input::-webkit-search-cancel-button{display:none}
.search__x{
  width:30px; height:30px; flex:none; border:0; border-radius:50%; background:var(--arena);
  cursor:pointer; display:grid; place-items:center; color:var(--tinta-2);
}
.search__x:hover{background:var(--tinta); color:#fff}
.search__x svg{width:15px; height:15px}

.search__res{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  box-shadow:var(--sh-m); overflow:hidden; max-height:min(64vh,440px); overflow-y:auto;
}
.search__res[hidden]{display:none}
.sres{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left;
  padding:11px 14px; border:0; border-bottom:1px solid var(--linea-2);
  background:#fff; cursor:pointer;
}
.sres:last-child{border-bottom:0}
.sres:hover{background:var(--arena)}
.sres__img{width:48px; height:48px; flex:none; border-radius:7px; overflow:hidden; background:#fff; border:1px solid var(--linea-2)}
.sres__img img,.sres__img svg{width:100%; height:100%; object-fit:contain}
.sres__tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.sres__tx strong{font-size:.9rem; font-weight:600; line-height:1.25}
.sres__tx span{font-size:.78rem; color:var(--tinta-3)}
.sres__no{padding:20px 16px; font-size:.88rem; color:var(--tinta-2); line-height:1.55}
.sres__no a{color:var(--madera); font-weight:600}

@media (max-width:1100px){
  .search{margin-left:auto}
  .search__box{position:fixed; top:calc(var(--hdr-h) + 10px); left:16px; right:16px; width:auto}
  .search__res{position:fixed; top:calc(var(--hdr-h) + 66px); left:16px; right:16px}
}

/* ---------------------------- Modelos futuros ---------------------- */
.soon{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.soon__i{margin:0; border-radius:var(--r-m); overflow:hidden; background:#fff; border:1px solid var(--linea)}
.soon__i--on img{width:100%; aspect-ratio:1/1; object-fit:cover}
.soon__i figcaption{padding:14px 16px; display:grid; gap:4px}
.soon__i figcaption strong{font-size:.93rem}
.soon__i figcaption span{font-size:.81rem; color:var(--tinta-2)}
.soon__ph{
  aspect-ratio:1/1; display:grid; place-content:center; justify-items:center; gap:12px;
  background:repeating-linear-gradient(45deg,#fff,#fff 11px,var(--arena) 11px,var(--arena) 22px);
  border:1.5px dashed var(--linea); border-radius:var(--r-m); color:var(--tinta-3);
}
.soon__ph svg{width:38px; height:38px; color:var(--linea)}
.soon__ph span{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.soon__i:not(.soon__i--on){border:0; background:none}
.soon__cta{
  margin-top:34px; padding:clamp(26px,3.6vw,38px); border-radius:var(--r-l); background:#fff;
  border:1px solid var(--linea); display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between;
}
.soon__cta h3{font-size:clamp(1.15rem,2.2vw,1.42rem); margin-bottom:8px; max-width:24ch}
.soon__cta p{font-size:.92rem; color:var(--tinta-2); line-height:1.65; max-width:52ch}
.soon__btns{display:flex; flex-wrap:wrap; gap:10px; flex:none}

/* ---------------------------- Carrito ------------------------------ */
.cartbtn{
  position:relative; width:44px; height:44px; flex:none; margin-left:4px;
  border:1.5px solid var(--linea); border-radius:50%; background:#fff;
  cursor:pointer; display:grid; place-items:center; color:var(--tinta);
  transition:border-color .2s ease, background .2s ease;
}
.cartbtn:hover{border-color:var(--tinta)}
.cartbtn svg{width:21px; height:21px}
.cartbtn__n{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px;
  padding:0 5px; border-radius:100px; background:var(--madera); color:#fff;
  font-size:.68rem; font-weight:700; display:grid; place-items:center;
}
.cartbtn__n[hidden]{display:none}
@media (max-width:1100px){ .cartbtn{margin-left:auto} }

.card__price{font-family:var(--f-d); font-size:1.3rem; color:var(--tinta); line-height:1}
.mbody__price{font-family:var(--f-d); font-size:1.9rem; margin-bottom:16px; line-height:1}

.cart{position:fixed; inset:0; z-index:130}
.cart[hidden]{display:none}
.cart__bd{position:absolute; inset:0; background:rgba(27,25,23,.5); backdrop-filter:blur(4px); animation:fade .25s ease}
.cart__panel{
  position:absolute; top:0; right:0; height:100%; width:min(430px,100%);
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-24px 0 70px rgba(27,25,23,.2); animation:slidein .32s cubic-bezier(.22,.7,.3,1);
}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion: reduce){ .cart__panel,.cart__bd{animation:none} }
.cart__hd{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-bottom:1px solid var(--linea); flex:none;
}
.cart__hd h2{font-size:1.28rem}
.cart__x{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--linea);
  background:#fff; cursor:pointer; display:grid; place-items:center; flex:none; color:var(--tinta);
}
.cart__x:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.cart__x svg{width:18px; height:18px}
.cart__body{flex:1; overflow-y:auto; padding:8px 22px}
.cart__empty{text-align:center; padding:60px 10px; color:var(--tinta-2); display:grid; gap:16px; justify-items:center}
.cart__empty svg{width:52px; height:52px; color:var(--linea)}
.cart__ft{padding:20px 22px; border-top:1px solid var(--linea); background:var(--arena); flex:none; display:grid; gap:10px}
.cart__ft:empty{display:none}
.cart__tot{display:flex; justify-content:space-between; align-items:baseline}
.cart__tot span{font-size:.9rem; color:var(--tinta-2)}
.cart__tot strong{font-family:var(--f-d); font-size:1.5rem}
.cart__nota{font-size:.78rem; color:var(--tinta-3); line-height:1.5}

.citem{display:grid; grid-template-columns:74px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--linea-2)}
.citem__img{width:74px; height:74px; border-radius:9px; overflow:hidden; background:#fff; border:1px solid var(--linea-2)}
.citem__img img,.citem__img svg{width:100%; height:100%; object-fit:contain}
.citem__in h3{font-size:.95rem; line-height:1.3; font-family:var(--f-t); font-weight:600}
.citem__sub{font-size:.78rem; color:var(--tinta-3); margin-top:3px}
.citem__row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}
.citem__row strong{font-size:.98rem}
.citem__del{
  background:none; border:0; padding:6px 0 0; font-size:.76rem; color:var(--tinta-3);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.citem__del:hover{color:#B44A34}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--linea); border-radius:100px; overflow:hidden}
.qty button{
  width:32px; height:32px; border:0; background:#fff; cursor:pointer;
  font-size:1.05rem; line-height:1; color:var(--tinta);
}
.qty button:hover{background:var(--arena)}
.qty span{min-width:30px; text-align:center; font-size:.9rem; font-weight:600}

.cart__linea{display:flex; justify-content:space-between; align-items:baseline; font-size:.85rem; gap:14px}
.cart__linea span{color:var(--tinta-2)}
.cart__linea em{font-style:normal; color:var(--tinta-3); text-align:right}
.cart__tot{padding-top:10px; border-top:1px solid var(--linea)}

/* Estimado de envío */
.envio{display:grid; gap:3px; margin-top:8px}
.envio__ok{font-size:.86rem; font-weight:600; color:#1E6B3C}
.envio__pend{font-size:.8rem; color:var(--tinta-3); line-height:1.5}
.envio__nota{font-size:.74rem; color:var(--tinta-3); line-height:1.45}
.opt{font-weight:400; color:var(--tinta-3); text-transform:none; letter-spacing:0}

/* Selector de cantidad dentro de la ficha de producto */
.mqty{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.mqty__lbl{font-size:.82rem; color:var(--tinta-2); font-weight:500}
.mqty__sub{font-family:var(--f-d); font-size:1.2rem; margin-left:auto}
.qty--lg button{width:38px; height:38px; font-size:1.15rem}
.qty--lg span{min-width:36px; font-size:.95rem}

/* Preguntas dentro de la ficha de producto */
.mfaq{margin-top:26px; padding-top:22px; border-top:1px solid var(--linea)}
.mfaq .eyebrow{margin-bottom:12px}
.mfaq__i{border-bottom:1px solid var(--linea-2)}
.mfaq__i summary{
  cursor:pointer; padding:12px 0; font-size:.89rem; font-weight:500;
  list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.mfaq__i summary::-webkit-details-marker{display:none}
.mfaq__i summary::after{
  content:"+"; font-size:1.15rem; color:var(--madera); flex:none; line-height:1;
}
.mfaq__i[open] summary::after{content:"−"}
.mfaq__i summary:hover{color:var(--madera)}
.mfaq__i p{font-size:.85rem; color:var(--tinta-2); line-height:1.65; padding:0 0 14px}

.cart__back{
  background:none; border:0; padding:14px 0 6px; cursor:pointer;
  font-size:.85rem; color:var(--tinta-2); font-family:inherit;
}
.cart__back:hover{color:var(--tinta)}
.paybox{
  margin:6px 0 18px; padding:16px 18px; border-radius:var(--r-m);
  background:var(--arena); border:1px solid var(--linea);
}
.paybox__t{font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:12px}
.paybox ul{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:12px}
.paybox li{display:grid; gap:2px}
.paybox li b{font-size:.8rem; color:var(--tinta-2); font-weight:600}
.paybox li span{font-size:.95rem; font-variant-numeric:tabular-nums; word-break:break-all}
.paybox__cci{font-size:.78rem !important; color:var(--tinta-3)}
.paybox__n{font-size:.79rem; color:var(--tinta-3); line-height:1.55}
.paybox__n + .paybox__n{margin-top:5px}
.paybox__n strong{color:var(--tinta-2)}

/* ---------------------------- Modal -------------------------------- */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px}
.modal[hidden]{display:none}
.modal__bd{position:absolute; inset:0; background:rgba(27,25,23,.55); backdrop-filter:blur(4px); animation:fade .25s ease}
.modal__box{
  position:relative; width:min(940px,100%); max-height:92dvh; overflow:auto;
  background:#fff; border-radius:var(--r-l); box-shadow:var(--sh-l);
  animation:pop .3s cubic-bezier(.22,.7,.3,1);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .modal__bd,.modal__box{animation:none} }
.modal__x{
  position:absolute; top:14px; right:14px; z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--linea);
  background:rgba(255,255,255,.92); cursor:pointer; display:grid; place-items:center; color:var(--tinta);
}
.modal__x:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.modal__x svg{width:19px; height:19px}
.modal__in{display:grid; grid-template-columns:1fr 1fr}
.mgal{background:var(--arena); padding:22px; display:flex; flex-direction:column; gap:12px}
.mgal__main{aspect-ratio:1/1; background:#fff; border-radius:var(--r-m); overflow:hidden; display:grid; place-items:center}
.mgal__main img{width:100%; height:100%; object-fit:contain}
.mgal__main svg{width:100%; height:100%}
.mgal__thumbs{display:flex; gap:8px; flex-wrap:wrap}
.mgal__t{
  width:60px; height:60px; padding:0; border-radius:9px; overflow:hidden; cursor:pointer;
  border:1.5px solid var(--linea); background:#fff;
}
.mgal__t[aria-current="true"]{border-color:var(--tinta)}
.mgal__t img{width:100%; height:100%; object-fit:contain}
.mbody{padding:clamp(24px,3.2vw,38px)}
.mbody .eyebrow{margin-bottom:10px}
.mbody h3{font-size:clamp(1.35rem,2.6vw,1.7rem); margin-bottom:14px}
.mbody__desc{font-size:.95rem; color:var(--tinta-2); line-height:1.7; margin-bottom:22px}
.mspecs{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--linea)}
.mspecs li{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:.89rem}
.mspecs b{color:var(--tinta-3); font-weight:500}
.mspecs span{font-weight:600; text-align:right}
.mfeat{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px}
.mfeat li{position:relative; padding-left:26px; font-size:.87rem; color:var(--tinta-2); line-height:1.55}
.mfeat li::before{
  content:""; position:absolute; left:0; top:.5em; width:14px; height:8px;
  border-left:2px solid var(--madera); border-bottom:2px solid var(--madera);
  transform:rotate(-45deg);
}
.mcolors{display:flex; gap:9px; margin-bottom:24px; flex-wrap:wrap}
.mcolors i{width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(27,25,23,.1)}
@media (max-width:760px){
  /* En el celular la columna de compra sube justo debajo de la foto.
     Antes había que pasar toda la ficha técnica para llegar al botón.
     display:contents saca los hijos de .mgal para poder intercalarlos
     con .mbody en una sola columna. */
  .modal__in{display:flex; flex-direction:column}
  .mgal{display:contents}
  .mgal__main{
    order:1; aspect-ratio:4/3;
    margin:clamp(14px,4vw,20px) clamp(14px,4vw,20px) 0;
    /* Sin el fondo de .mgal, la foto quedaría blanca sobre blanco */
    border:1px solid var(--linea);
  }
  .mgal__thumbs{order:2; padding:12px clamp(14px,4vw,20px) 0}
  .mbody{order:3; padding-bottom:10px}
  .mspecs{order:4; margin:0 clamp(14px,4vw,20px) 20px}
  .mfeat{order:5; margin:0 clamp(14px,4vw,20px) 26px}
}

/* ---------------------------- Páginas legales ---------------------- */
.legal{padding-block:clamp(50px,7vw,90px)}
.legal__in{max-width:760px; margin-inline:auto}
.legal h1{font-size:clamp(2rem,4.4vw,2.8rem); margin-bottom:10px}
.legal__date{font-size:.85rem; color:var(--tinta-3); margin-bottom:40px}
.legal h2{font-size:clamp(1.2rem,2.4vw,1.5rem); margin:38px 0 14px}
.legal p,.legal li{color:var(--tinta-2); line-height:1.78; font-size:.97rem}
.legal p+p{margin-top:14px}
.legal ul{margin:14px 0; padding-left:22px; display:grid; gap:8px}
.legal a{color:var(--madera)}
.legal .note{
  padding:18px 20px; background:#FBEFD8; border-radius:var(--r-s);
  font-size:.88rem; color:#6E4E13; margin-top:14px;
}
.legal__back{display:inline-flex; align-items:center; gap:8px; margin-bottom:34px; font-size:.9rem; color:var(--tinta-2); text-decoration:none}
.legal__back:hover{color:var(--madera)}

/* ------------------- Ficha individual de producto ------------------- */
.pficha{padding:clamp(26px,4vw,44px) 0 clamp(40px,5vw,64px)}
.pficha__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start}
.pficha__info h1{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:8px}
.pficha__esp{font-size:.92rem; color:var(--tinta-3); margin-bottom:18px}
.pficha__desc{color:var(--tinta-2); line-height:1.72; margin-bottom:20px}
.pficha__precio{font-family:var(--f-d); font-size:2.1rem; line-height:1; margin:22px 0 16px}
.pficha__nota{font-size:.8rem; color:var(--tinta-3); margin-top:14px; text-align:center}

.pgal{display:grid; gap:12px}
.pgal__main{border-radius:var(--r-l); overflow:hidden; background:var(--arena-2); border:1px solid var(--linea)}
.pgal__main img{width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff}
.pgal__main--vacio{aspect-ratio:1/1; display:grid; place-content:center; text-align:center; gap:8px; color:var(--tinta-3)}
.pgal__nota{font-size:.84rem}
.pgal__ts{display:flex; gap:10px; flex-wrap:wrap}
.pgal__t{
  width:76px; height:76px; padding:0; border-radius:var(--r-s); overflow:hidden;
  border:1.5px solid var(--linea); background:#fff; cursor:pointer;
}
.pgal__t[aria-current="true"]{border-color:var(--madera)}
.pgal__t img{width:100%; height:100%; object-fit:contain}

.pficha__abajo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
  margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3.6vw,44px);
  border-top:1px solid var(--linea);
}
.pficha__abajo h2{font-size:clamp(1.15rem,2vw,1.34rem); margin-bottom:14px}
.pficha__uso{font-size:.92rem; color:var(--tinta-2); line-height:1.72}
.pficha__uso a{color:var(--madera); font-weight:600; text-decoration:underline; text-underline-offset:3px}

.pspecs{width:100%; border-collapse:collapse}
.pspecs th, .pspecs td{padding:11px 0; text-align:left; border-bottom:1px solid var(--linea-2); font-size:.9rem}
.pspecs th{color:var(--tinta-3); font-weight:500; width:44%}
.pspecs td{color:var(--tinta)}
.pspecs tr:last-child th, .pspecs tr:last-child td{border-bottom:0}

.mbody__ficha{
  display:inline-block; font-size:.86rem; font-weight:600; color:var(--madera);
  margin-bottom:14px; text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:880px){
  .pficha__in{grid-template-columns:1fr}
  .pficha__abajo{grid-template-columns:1fr; gap:32px}
}

/* =========================================================================
   TEMA AMARILLO Y NEGRO — barra superior, hero deslizable y confianza
   ========================================================================= */

/* ------------------------- Barra superior --------------------------- */
.topbar{background:var(--amarillo); color:#171717; font-size:.8rem}
.topbar__in{
  display:flex; align-items:center; gap:26px;
  min-height:var(--top-h); flex-wrap:wrap;
}
.topbar__i{display:inline-flex; align-items:center; gap:7px; font-weight:500}
.topbar__i svg{width:16px; height:16px; flex:none}
.topbar__wa{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:auto; font-weight:700; text-decoration:none; color:#171717;
}
.topbar__wa svg{width:15px; height:15px}
.topbar__wa:hover{text-decoration:underline; text-underline-offset:3px}
@media (max-width:1100px){ .topbar__i--op{display:none} }
@media (max-width:560px){
  .topbar__in{gap:14px; justify-content:space-between}
  .topbar{font-size:.74rem}
}

/* ---------------------------- Hero ---------------------------------- */
/* La fotografía ocupa todo el ancho y el texto va encima, sobre un
   degradado que garantiza el contraste de lectura.                    */
.hero{position:relative; padding:0; background:var(--tinta); overflow:hidden; isolation:isolate}
.hero__vp{position:relative; min-height:clamp(460px,62vh,640px)}

.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s;
}
.slide.on{opacity:1; visibility:visible; position:relative}
@media (prefers-reduced-motion: reduce){ .slide{transition:none} }

.slide__img{position:absolute; inset:0; z-index:0}
.slide__img img{width:100%; height:100%; object-fit:cover; object-position:center}
.slide__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.92) 26%,
    rgba(255,255,255,.62) 46%,
    rgba(255,255,255,.10) 66%,
    rgba(255,255,255,0) 80%);
}

.slide__tx{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center;
  padding-block:clamp(38px,6vw,72px);
}
.slide__cont{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
}
.slide__t{
  font-family:var(--f-t); font-weight:800;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.04;
  letter-spacing:-.025em; text-transform:uppercase;
  margin-bottom:16px; max-width:14ch;
}
.slide__t em{color:var(--amarillo-osc); font-style:normal}
.slide__s{
  font-size:clamp(.98rem,1.4vw,1.1rem); color:var(--tinta-2);
  line-height:1.62; max-width:38ch; margin-bottom:26px;
}
.slide__cta{display:flex; flex-wrap:wrap; gap:12px}
.btn--ghost-cl{--bg:rgba(255,255,255,.85); --fg:var(--tinta); --bd:var(--tinta)}
.btn--ghost-cl:hover{--bg:var(--tinta); --fg:#fff}

.hero__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); color:var(--tinta);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-m);
  transition:background .2s ease;
}
.hero__nav:hover{background:var(--amarillo)}
.hero__nav svg{width:20px; height:20px}
.hero__nav--prev{left:16px}
.hero__nav--next{right:16px}

.hero__ps{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero__p{
  width:26px; height:5px; border-radius:100px; border:0; cursor:pointer;
  background:rgba(23,23,23,.28); transition:background .25s ease, width .25s ease;
}
.hero__p.on{background:var(--amarillo-osc); width:38px}

/* En pantallas angostas el degradado cubre casi todo, para que el texto
   siga siendo legible sobre cualquier zona de la fotografía. */
@media (max-width:860px){
  .hero__vp{min-height:clamp(430px,72vh,560px)}
  .slide__img img{object-position:72% center}
  .slide__img::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.58) 72%,
      rgba(255,255,255,.30) 100%);
  }
  .slide__t{max-width:100%; font-size:clamp(1.85rem,7vw,2.6rem)}
  .slide__s{max-width:100%}
  .hero__nav{display:none}
}
@media (max-width:560px){
  .slide__cta{flex-direction:column; align-items:stretch}
  .slide__cta .btn{width:100%}
  .slide__s{font-size:.95rem; margin-bottom:22px}
}

/* ------------------------ Franja de confianza ----------------------- */
.trust{background:var(--tinta); color:#fff; padding:clamp(20px,2.6vw,30px) 0}
.trust__in{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px)}
.trust__i{display:flex; gap:12px; align-items:flex-start}
.trust__i svg{width:26px; height:26px; flex:none; color:var(--amarillo)}
.trust__i span{display:flex; flex-direction:column; gap:2px; font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.45}
.trust__i b{font-size:.9rem; color:#fff; font-weight:600}
@media (max-width:900px){ .trust__in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .trust__in{grid-template-columns:1fr; gap:16px} }

/* --------------------- Categorías con fotografía -------------------- */
.cats--foto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.cats--foto .cat{
  display:block; padding:0; overflow:hidden; background:#fff;
  border:1px solid var(--linea); border-radius:var(--r-m);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cats--foto .cat:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--amarillo)}
.cat__img{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--arena)}
.cat__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.cat__tx{display:block; padding:16px 18px 20px}
.cats--foto .cat__ic{display:none}
.cats--foto .cat h3{font-family:var(--f-t); font-weight:700; font-size:.98rem; margin-bottom:6px}
.cats--foto .cat p{font-size:.82rem; color:var(--tinta-2); line-height:1.55; margin-bottom:10px}
.cat__ver{font-size:.8rem; font-weight:700; color:var(--madera)}

/* -------------------- Encabezados de sección ------------------------ */
.sec--gris{background:var(--arena)}
.sec__hd--fila{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.sec__link{font-size:.88rem; font-weight:700; color:var(--madera); white-space:nowrap}
.sec__link:hover{text-decoration:underline; text-underline-offset:3px}

/* Los títulos de sección pasan a la tipografía de texto, en mayúsculas,
   para acompañar el tono más comercial del nuevo tema. */
.sec__hd h2, .cta h2{
  font-family:var(--f-t); font-weight:800; letter-spacing:-.015em;
  text-transform:uppercase;
}
.pagehd h1{font-family:var(--f-t); font-weight:800; text-transform:uppercase; letter-spacing:-.02em}

/* --------------------- Ajustes del tema amarillo -------------------- */
.eyebrow{color:var(--madera)}
.hdr{background:rgba(255,255,255,.94)}
.nav>a.active, .nav>a[aria-current="page"]{
  color:var(--tinta); background:transparent;
  box-shadow:inset 0 -3px 0 var(--amarillo);
  border-radius:0;
}
.cartbtn__n{background:var(--amarillo); color:#171717}
.card__price{font-family:var(--f-t); font-weight:800}
.pficha__precio{font-family:var(--f-t); font-weight:800}
.incl__badge{background:var(--amarillo-cl); color:#6B5100}
.incl__i--yes{border-color:var(--amarillo)}
.strip{background:var(--tinta)}
.ft{background:var(--oscuro)}

/* --------------- Encabezado de sección más compacto ----------------- */
.h2--sm{font-size:clamp(1.5rem,2.8vw,2.05rem) !important; max-width:22ch; margin-inline:auto}
.sec__hd--ap{margin-bottom:clamp(24px,3vw,34px)}
.sec__hd--ap .sec__sub{margin-top:8px; font-size:.95rem}

/* ------------- Tarjetas de producto más compactas ------------------- */
.carr__cel{flex:0 0 clamp(210px,22vw,250px)}
.carr__cel .card__media{aspect-ratio:1/1}
.carr__cel .card__body{padding:14px 16px 16px; gap:7px}
.carr__cel .card__desc{display:none}
.carr__cel .card__dims{gap:5px}
.carr__cel .card__dims .dim{font-size:.68rem; padding:3px 7px}
.carr__cel .card h3{font-size:.92rem}
.carr__cel .card__price{font-size:1.18rem; margin-top:2px}
.carr__cel .card__more{display:none}
.carr__cel .card__acts{margin-top:8px}
.carr__cel .card__acts .btn{padding:10px 16px; font-size:.83rem; width:100%}
.carr__cel .card__acts .btn--ghost{display:none}
@media (max-width:900px){ .carr__cel{flex:0 0 min(62vw,230px)} }

/* =========================================================================
   PÁGINA DE REPISAS — encabezado, barra lateral de filtros y grilla
   ========================================================================= */

/* ---------------------- Encabezado del catálogo --------------------- */
.rhd{background:var(--arena); border-bottom:1px solid var(--linea)}
.rhd__in{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,48px); align-items:center}
.rhd__tx{padding-block:clamp(26px,3.6vw,44px)}
.rhd h1{
  font-family:var(--f-t); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,2.9rem); letter-spacing:-.025em; margin:4px 0 12px;
}
.rhd h1 em{color:var(--amarillo-osc); font-style:normal}
.rhd__sub{color:var(--tinta-2); font-size:clamp(.94rem,1.4vw,1.04rem); line-height:1.62; max-width:46ch}
.rhd__pts{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px 26px}
.rhd__pts li{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--tinta-2); line-height:1.3}
.rhd__pts svg{width:24px; height:24px; flex:none; color:var(--madera)}
.rhd__img{margin:0; align-self:stretch; overflow:hidden}
.rhd__img img{width:100%; height:100%; object-fit:cover; min-height:200px}
@media (max-width:860px){
  .rhd__in{grid-template-columns:1fr}
  .rhd__img{display:none}
  .rhd__tx{padding-block:24px}
}

/* --------------------------- Disposición ---------------------------- */
.cat2{padding:clamp(26px,3.6vw,44px) 0 clamp(40px,5vw,64px)}
.cat2__in{display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,2.6vw,34px); align-items:start}
.cat2__main{min-width:0}

.cat2__barra{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--linea);
}
.cat2__cuenta{font-size:.86rem; color:var(--tinta-2)}
.cat2__orden{display:flex; align-items:center; gap:9px; margin-left:auto; font-size:.84rem; color:var(--tinta-2)}
.cat2__orden select{
  padding:8px 12px; border:1px solid var(--linea); border-radius:var(--r-s);
  background:#fff; font-size:.84rem; cursor:pointer;
}
.cat2__vf{display:none}

.cat2__vacio{
  text-align:center; padding:56px 20px; border:1.5px dashed var(--linea);
  border-radius:var(--r-m); display:grid; gap:10px; justify-items:center;
}
.cat2__vacio p{font-size:.94rem; color:var(--tinta-2)}
.cat2__vacio .btn{margin-top:8px}

/* ------------------------ Barra de filtros --------------------------- */
.filtros{
  border:1px solid var(--linea); border-radius:var(--r-m); background:#fff;
  padding:18px; position:sticky; top:calc(var(--hdr-h) + 14px);
}
.filtros__hd{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.filtros__hd h2{
  font-family:var(--f-t); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.filtros__limpiar{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:.75rem; color:var(--madera); text-decoration:underline; text-underline-offset:3px;
}
.fgrupo{padding:14px 0; border-top:1px solid var(--linea-2)}
.fgrupo h3{
  font-family:var(--f-t); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:10px;
}
.fgrupo__nota{font-size:.74rem; color:var(--tinta-3); line-height:1.5; margin-bottom:9px}
.fop{
  display:flex; align-items:center; gap:9px; padding:6px 0;
  font-size:.86rem; cursor:pointer; color:var(--tinta-2);
}
.fop:hover{color:var(--tinta)}
.fop input{accent-color:var(--amarillo-osc); width:15px; height:15px; cursor:pointer; flex:none}
.fop span{flex:1}
.fop i{font-style:normal; font-size:.72rem; color:var(--tinta-3)}
.fop--link a{font-size:.84rem; color:var(--madera); font-weight:600; padding-left:24px}
.fcolores{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.fcolores li{display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--tinta-2)}
.fcolores i{width:17px; height:17px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fcolores i.bd{box-shadow:inset 0 0 0 1px var(--linea)}

.filtros__cta{
  margin-top:16px; padding:16px; border-radius:var(--r-s);
  background:var(--arena); border:1px solid var(--amarillo); display:grid; gap:10px;
}
.filtros__cta svg{width:24px; height:24px; color:var(--madera)}
.filtros__cta p{font-size:.82rem; color:var(--tinta-2); line-height:1.5; display:flex; flex-direction:column; gap:2px}
.filtros__cta b{font-size:.88rem; color:var(--tinta)}
.filtros__cta .btn{padding:10px 16px; font-size:.84rem; justify-content:center}

/* En móvil la barra se abre como panel */
@media (max-width:900px){
  .cat2__in{grid-template-columns:1fr}
  .cat2__vf{
    display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
    border:1.5px solid var(--tinta); border-radius:100px; background:#fff;
    font-size:.84rem; font-weight:600; cursor:pointer;
  }
  .cat2__vf svg{width:17px; height:17px}
  .filtros{
    position:fixed; inset:0; z-index:120; border-radius:0; border:0;
    background:rgba(20,20,20,.45); padding:0;
    display:none; overflow-y:auto;
  }
  .filtros.open{display:block}
  .filtros__hd, .filtros__cuerpo, .filtros__cta{
    background:#fff; margin:0; padding-inline:20px; max-width:340px;
  }
  .filtros__hd{padding-top:20px; padding-bottom:14px}
  .filtros__cuerpo{padding-bottom:8px}
  .filtros__cta{margin:0 20px 20px; max-width:300px}
  .filtros.open .filtros__hd{position:sticky; top:0; z-index:2; border-bottom:1px solid var(--linea)}
}

/* Franja de confianza en versión clara */
.trust--cl{background:var(--arena); color:var(--tinta); border-block:1px solid var(--linea)}
.trust--cl .trust__i span{color:var(--tinta-3)}
.trust--cl .trust__i b{color:var(--tinta)}
.trust--cl .trust__i svg{color:var(--madera)}

/* Grilla algo más densa en esta página */
.cat2 .grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px}

/* =========================================================================
   PÁGINA DE INSTALACIÓN
   ========================================================================= */

/* --------------------------- Encabezado ----------------------------- */
.ihd{background:var(--arena); border-bottom:1px solid var(--linea)}
.ihd__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,48px); align-items:center}
.ihd__tx{padding-block:clamp(28px,4vw,52px)}
.ihd h1{
  font-family:var(--f-t); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.9rem,4.4vw,3.1rem); letter-spacing:-.025em;
  margin:4px 0 14px; line-height:1.04;
}
.ihd h1 em{color:var(--amarillo-osc); font-style:normal; display:block}
.ihd__sub{color:var(--tinta-2); font-size:clamp(.95rem,1.4vw,1.06rem); line-height:1.62; max-width:44ch}
.ihd__pts{list-style:none; margin:24px 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:14px 28px}
.ihd__pts li{display:flex; align-items:center; gap:9px; font-size:.77rem; color:var(--tinta-2); line-height:1.3}
.ihd__pts svg{width:23px; height:23px; flex:none; color:var(--madera)}
.ihd__cta{display:flex; flex-wrap:wrap; gap:12px}
.ihd__img{margin:0; align-self:stretch; overflow:hidden}
.ihd__img img{width:100%; height:100%; object-fit:cover; min-height:230px}
@media (max-width:860px){
  .ihd__in{grid-template-columns:1fr}
  .ihd__img{order:-1}
  .ihd__img img{aspect-ratio:16/10; min-height:0}
  .ihd__tx{padding-block:26px}
}
@media (max-width:560px){
  .ihd__cta{flex-direction:column; align-items:stretch}
  .ihd__cta .btn{width:100%}
}

/* --------------------------- Cuatro pasos --------------------------- */
.pasos4{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative;
}
.pasos4__i{
  position:relative; padding:26px 20px 22px; text-align:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
}
.pasos4__n{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  background:var(--amarillo); color:#171717;
  font-size:.86rem; font-weight:800; display:grid; place-items:center;
}
.pasos4__i svg{width:38px; height:38px; color:var(--madera); margin:6px auto 14px}
.pasos4__i h3{font-family:var(--f-t); font-weight:700; font-size:.98rem; margin-bottom:8px}
.pasos4__i p{font-size:.83rem; color:var(--tinta-2); line-height:1.6}
@media (max-width:900px){ .pasos4{grid-template-columns:1fr 1fr; gap:24px 16px} }
@media (max-width:480px){ .pasos4{grid-template-columns:1fr} }

/* ------------------------ Tres respuestas --------------------------- */
.ic3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ic3__i{
  padding:clamp(22px,2.8vw,30px); border-radius:var(--r-m);
  background:#fff; border:1px solid var(--linea); display:flex; flex-direction:column; gap:12px;
}
.ic3__i--am{background:var(--arena); border-color:var(--amarillo)}
.ic3__i svg{width:30px; height:30px; color:var(--madera)}
.ic3__i h3{font-family:var(--f-t); font-weight:700; font-size:1.02rem}
.ic3__i p{font-size:.88rem; color:var(--tinta-2); line-height:1.65; flex:1}
.ic3__i .btn{align-self:flex-start; padding:10px 18px; font-size:.85rem}
@media (max-width:880px){ .ic3{grid-template-columns:1fr} }

/* ---------------------- Incluye / no incluye ------------------------ */
.inc2{display:grid; grid-template-columns:1fr .8fr 1fr; gap:16px; align-items:stretch}
.inc2__i{padding:clamp(22px,2.8vw,30px); border-radius:var(--r-m); border:1px solid var(--linea); background:#fff}
.inc2__i h3{font-family:var(--f-t); font-weight:700; font-size:1.02rem; margin-bottom:16px}
.inc2__i ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.inc2__i li{position:relative; padding-left:28px; font-size:.88rem; color:var(--tinta-2); line-height:1.55}
.inc2__i--si{border-color:#BFE3CC; background:#F5FBF7}
.inc2__i--si h3{color:#1E6B3C}
.inc2__i--si li::before{
  content:""; position:absolute; left:2px; top:.4em; width:12px; height:7px;
  border-left:2.2px solid #2E8B57; border-bottom:2.2px solid #2E8B57; transform:rotate(-45deg);
}
.inc2__i--no{border-color:#F0CFC7; background:#FDF7F5}
.inc2__i--no h3{color:#B4402B}
.inc2__i--no li::before{
  content:"×"; position:absolute; left:4px; top:-1px;
  color:#B4402B; font-size:1.1rem; font-weight:700; line-height:1.5;
}
.inc2__img{margin:0; border-radius:var(--r-m); overflow:hidden; background:var(--arena)}
.inc2__img img{width:100%; height:100%; object-fit:cover; min-height:220px}
@media (max-width:980px){
  .inc2{grid-template-columns:1fr 1fr}
  .inc2__img{grid-column:1 / -1; order:2}
  .inc2__img img{aspect-ratio:21/9; min-height:0}
}
@media (max-width:640px){ .inc2{grid-template-columns:1fr} }

/* ------------------------ Prepare su espacio ------------------------ */
.prep{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.prep__i{display:flex; gap:13px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--linea); border-radius:var(--r-m)}
.prep__i svg{width:26px; height:26px; flex:none; color:var(--madera)}
.prep__i p{display:flex; flex-direction:column; gap:3px; font-size:.8rem; color:var(--tinta-2); line-height:1.5}
.prep__i b{font-size:.88rem; color:var(--tinta)}
@media (max-width:900px){ .prep{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .prep{grid-template-columns:1fr} }

/* --------------------- Preguntas en dos columnas -------------------- */
/* Este bloque usa <details> nativo, no el acordeón con JavaScript de
   contacto.html. Por eso hay que anular el max-height:0 de .faq__a, que
   dejaba la respuesta invisible aunque la pregunta estuviera abierta. */
/* align-items:start es lo que evita el hueco en blanco: sin ello las dos
   tarjetas de una misma fila crecen a la altura de la mas alta. */
.faq2{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;
      align-content:start; align-items:start}

.faq2 .faq__i{
  border:1px solid var(--linea); border-radius:var(--r-m);
  background:#fff; margin-bottom:10px; padding:0 18px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.faq2 .faq__i:hover{border-color:#D5D5D0}
.faq2 .faq__i[open]{border-color:var(--amarillo); box-shadow:var(--sh-s)}

/* La pregunta: sin el triángulo del navegador y con la tipografía de
   texto, no con la serif de titulares, que la agrandaba de más. */
.faq2 .faq__i summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 0;
}
.faq2 .faq__i summary::-webkit-details-marker{display:none}
.faq2 .faq__i summary h3{
  margin:0; font-family:var(--f-t); font-size:.9rem; font-weight:600;
  line-height:1.45; color:var(--tinta);
}
.faq2 .faq__i summary:hover h3{color:var(--madera)}
.faq2 .faq__i summary::after{
  content:""; flex:none; width:8px; height:8px; margin-top:6px;
  border-right:2px solid var(--madera); border-bottom:2px solid var(--madera);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq2 .faq__i[open] summary::after{transform:rotate(-135deg); margin-top:9px}
.faq2 .faq__i summary:focus-visible{
  outline:2px solid var(--amarillo); outline-offset:3px; border-radius:4px
}

/* La respuesta */
.faq2 .faq__a{max-height:none; overflow:visible}
.faq2 .faq__a p{
  margin:0; padding:12px 0 15px; font-size:.87rem; line-height:1.65;
  color:var(--tinta-2); border-top:1px solid var(--linea-2);
}
.faq2 .faq__a a{color:var(--madera); font-weight:600}

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

/* ============================ BLOG =================================
   Portada del blog: cabecera con buscador, filtros por categoría,
   rejilla de artículos y barra lateral. El filtrado es progresivo:
   sin JavaScript se ven los ocho artículos, que es lo que rastrean
   los buscadores.
   ================================================================== */

/* ---- Cabecera ---- */
.blogh{background:var(--arena); border-bottom:1px solid var(--linea)}
.blogh__in{
  display:grid; grid-template-columns:1fr .85fr; gap:clamp(24px,4vw,56px);
  align-items:center; padding:clamp(28px,4vw,52px) 0
}
.blogh h1{
  font-family:var(--f-d); font-weight:600; line-height:1.1;
  font-size:clamp(1.9rem,4.2vw,2.9rem); margin:6px 0 0; text-wrap:balance
}
.blogh h1 em{font-style:normal; color:var(--madera)}
.blogh__sub{
  margin:14px 0 0; color:var(--tinta-2); font-size:1rem;
  line-height:1.65; max-width:46ch
}
.blogh__buscar{
  margin-top:22px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  padding:11px 15px; max-width:420px;
  transition:border-color .18s ease, box-shadow .18s ease
}
.blogh__buscar:focus-within{border-color:var(--amarillo); box-shadow:var(--sh-s)}
.blogh__buscar svg{width:19px; height:19px; flex:none; color:var(--tinta-3)}
.blogh__buscar input{
  flex:1; border:0; outline:0; background:none; font:inherit;
  font-size:.94rem; color:var(--tinta); min-width:0
}
.blogh__buscar input::-webkit-search-cancel-button{-webkit-appearance:none}
.blogh__img{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-m)}
.blogh__img img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3}
@media (max-width:860px){
  .blogh__in{grid-template-columns:1fr}
  .blogh__img{order:-1}
  .blogh__img img{aspect-ratio:16/9}
}

/* ---- Filtros por categoría ---- */
.blogcats{background:#fff; border-bottom:1px solid var(--linea)}
.blogcats__in{
  display:flex; gap:6px; overflow-x:auto; padding:10px 0;
  scrollbar-width:none
}
.blogcats__in::-webkit-scrollbar{display:none}
.blogcat{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:96px; padding:12px 10px 10px; border:1px solid transparent;
  border-radius:var(--r-m); background:none; cursor:pointer;
  font:inherit; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinta-3); transition:color .18s ease, background-color .18s ease
}
.blogcat svg{width:24px; height:24px}
.blogcat:hover{color:var(--tinta); background:var(--arena)}
.blogcat.on{color:var(--madera); background:var(--arena)}
.blogcat.on svg{color:var(--amarillo-osc)}
.blogcat:focus-visible{outline:2px solid var(--amarillo); outline-offset:2px}

/* ---- Disposición general ---- */
.blogl{display:grid; grid-template-columns:1fr 290px; gap:clamp(20px,3vw,34px); align-items:start}
@media (max-width:980px){ .blogl{grid-template-columns:1fr} }

.blogl__cuenta{
  margin:0 0 16px; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3)
}
.blogl__vacio{
  margin:0; padding:44px 20px; text-align:center; color:var(--tinta-2);
  background:#fff; border:1px dashed var(--linea); border-radius:var(--r-m)
}
.blogl__vacio[hidden]{display:none}
.blogl__vacio button{
  display:block; margin:14px auto 0; padding:9px 18px; cursor:pointer;
  border:1px solid var(--linea); border-radius:999px; background:#fff;
  font:inherit; font-size:.85rem; font-weight:600; color:var(--madera)
}
.blogl__vacio button:hover{border-color:var(--amarillo); background:var(--arena)}

/* ---- Tarjetas ---- */
.bposts{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:18px}
.bpost[hidden]{display:none}
.bpost__lk{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  overflow:hidden; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease
}
.bpost__lk:hover{border-color:#D5D5D0; box-shadow:var(--sh-m); transform:translateY(-3px)}
.bpost__lk:focus-visible{outline:2px solid var(--amarillo); outline-offset:3px}

.bpost__thumb{position:relative; display:block; background:var(--arena)}
.bpost__thumb img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover}
.bpost__tag{
  position:absolute; left:11px; bottom:11px;
  background:var(--amarillo); color:#2A2118;
  font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 9px 4px; border-radius:4px
}

.bpost__cuerpo{display:flex; flex-direction:column; gap:8px; padding:15px 16px 17px; flex:1}
.bpost__t{
  font-family:var(--f-t); font-size:.98rem; font-weight:700;
  line-height:1.35; color:var(--tinta); text-wrap:balance
}
.bpost__lk:hover .bpost__t{color:var(--madera)}
.bpost__d{font-size:.83rem; line-height:1.55; color:var(--tinta-2)}
.bpost__meta{
  display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:10px;
  font-size:.72rem; color:var(--tinta-3); font-style:normal
}
.bpost__meta em{font-style:normal}
.bpost__meta i{font-style:normal; opacity:.5}
.bpost__more{font-size:.8rem; font-weight:700; color:var(--madera)}

/* ---- Barra lateral ---- */
.blogl__side{display:grid; gap:16px; position:sticky; top:88px}
@media (max-width:980px){ .blogl__side{position:static} }
.bside{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:18px}
.bside__t{
  font-family:var(--f-t); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 12px
}

.bside__cats{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.bside__cats button{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 10px; border:0; border-radius:var(--r-s); background:none; cursor:pointer;
  font:inherit; font-size:.86rem; color:var(--tinta-2); text-align:left;
  transition:background-color .16s ease, color .16s ease
}
.bside__cats button span{
  font-size:.75rem; color:var(--tinta-3); font-variant-numeric:tabular-nums;
  background:var(--arena); border-radius:999px; padding:2px 8px
}
.bside__cats button:hover{background:var(--arena); color:var(--tinta)}
.bside__cats button.on{background:var(--amarillo-cl); color:var(--tinta); font-weight:600}
.bside__cats button.on span{background:#fff}
.bside__cats button:focus-visible{outline:2px solid var(--amarillo); outline-offset:1px}

.bside__dest{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.bside__dest a{
  display:flex; gap:11px; align-items:center; padding:8px; border-radius:var(--r-s);
  text-decoration:none; color:inherit; transition:background-color .16s ease
}
.bside__dest a:hover{background:var(--arena)}
.bside__dest img{
  width:56px; height:56px; flex:none; border-radius:var(--r-s);
  object-fit:cover; background:var(--arena)
}
.bside__dest span{display:grid; gap:3px}
.bside__dest b{font-size:.82rem; font-weight:600; line-height:1.35; color:var(--tinta)}
.bside__dest a:hover b{color:var(--madera)}
.bside__dest time{font-size:.72rem; color:var(--tinta-3)}

/* ---- Cierre con WhatsApp ---- */
.bcta{background:var(--arena); border-top:1px solid var(--linea)}
.bcta__in{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,36px);
  align-items:center; padding:clamp(26px,3.5vw,42px) 0
}
.bcta__img{margin:0; width:132px; border-radius:var(--r-m); overflow:hidden; flex:none}
.bcta__img img{width:100%; height:auto; display:block; aspect-ratio:1; object-fit:cover}
.bcta__tx h2{
  font-family:var(--f-d); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.6rem);
  margin:0; line-height:1.2; text-wrap:balance
}
.bcta__tx p{margin:9px 0 0; color:var(--tinta-2); font-size:.94rem; line-height:1.6; max-width:52ch}
@media (max-width:820px){
  .bcta__in{grid-template-columns:1fr; text-align:left}
  .bcta__img{width:96px}
}

/* ========================== CONTACTO ===============================
   Cabecera, formulario y columna de canales. El formulario sigue
   abriendo WhatsApp con el mensaje redactado: una web estática no
   recibe envíos por sí sola.
   ================================================================== */

/* ---- Cabecera ---- */
.chd{background:var(--arena); border-bottom:1px solid var(--linea)}
.chd__in{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,56px);
  align-items:center; padding:clamp(26px,3.6vw,48px) 0
}
.chd h1{
  font-family:var(--f-d); font-weight:600; line-height:1.1; margin:6px 0 0;
  font-size:clamp(1.9rem,4.2vw,2.8rem); text-wrap:balance
}
.chd h1 em{font-style:normal; color:var(--madera)}
.chd__lead{margin:14px 0 0; color:var(--tinta-2); font-size:1rem; line-height:1.65; max-width:44ch}

.chd__vent{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 20px
}
.chd__vent li{display:flex; gap:11px; align-items:flex-start}
.chd__vent svg{width:24px; height:24px; flex:none; color:var(--amarillo-osc); margin-top:1px}
.chd__vent b{display:block; font-size:.86rem; font-weight:700; color:var(--tinta); margin-bottom:2px}
.chd__vent span{font-size:.79rem; line-height:1.5; color:var(--tinta-2)}
@media (max-width:560px){ .chd__vent{grid-template-columns:1fr} }

.chd__lado{position:relative; display:grid; gap:14px}
.chd__img{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-m)}
.chd__img img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover}
.chd__card{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  padding:20px; box-shadow:var(--sh-s)
}
.chd__card h2{
  font-family:var(--f-t); font-size:1rem; font-weight:700; margin:0 0 6px; color:var(--tinta)
}
.chd__card p{margin:0 0 15px; font-size:.86rem; line-height:1.55; color:var(--tinta-2)}
@media (max-width:900px){ .chd__in{grid-template-columns:1fr} }

/* ---- Formulario y columna lateral ---- */
.cgrid{display:grid; grid-template-columns:1fr 340px; gap:clamp(20px,3vw,32px); align-items:start}
@media (max-width:980px){ .cgrid{grid-template-columns:1fr} }

.cform{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:clamp(22px,3.2vw,36px)
}
.cform h2{
  font-family:var(--f-t); font-size:1.06rem; font-weight:700; margin:0;
  letter-spacing:.01em; color:var(--tinta)
}
.cform__intro{margin:7px 0 22px; font-size:.87rem; line-height:1.55; color:var(--tinta-2)}

.field__lbl{font-size:.8rem; font-weight:600; color:var(--tinta-2)}
.field__nota{margin:6px 0 0; font-size:.72rem; line-height:1.45; color:var(--tinta-3)}

.radios{display:flex; gap:18px; align-items:center; padding:9px 0 2px}
.radios label{display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.88rem; color:var(--tinta)}
.radios input{width:17px; height:17px; accent-color:var(--amarillo-osc); cursor:pointer}

.check2{
  display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px;
  font-size:.82rem; line-height:1.5; color:var(--tinta-2); cursor:pointer
}
.check2 input{width:17px; height:17px; flex:none; margin-top:1px; accent-color:var(--amarillo-osc); cursor:pointer}
.check2 a{color:var(--madera); font-weight:600}
.check2 .err{display:block; width:100%}

/* La lista de canales, dentro de su tarjeta */
.cside{display:grid; gap:16px; position:sticky; top:88px}
@media (max-width:980px){ .cside{position:static} }
.cbox{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:18px}
.cbox__t{
  font-family:var(--f-t); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 6px
}
.cbox .contact__data{margin:0; border-top:0}
.cbox .contact__data li:last-child{border-bottom:0; padding-bottom:0}

.cfaq{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px}
.cfaq a{
  display:block; padding:11px 4px; border-bottom:1px solid var(--linea-2);
  font-size:.85rem; line-height:1.4; color:var(--tinta); text-decoration:none;
  transition:color .16s ease
}
.cfaq li:last-child a{border-bottom:0}
.cfaq a:hover{color:var(--madera)}

.cbox__ver{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:.82rem; font-weight:700; color:var(--madera); text-decoration:none
}
.cbox__ver:hover span{transform:translateX(3px)}
.cbox__ver span{transition:transform .18s ease}

/* La pregunta a la que se llega desde la barra lateral */
.faq__list .faq__i:target{
  border-color:var(--amarillo-osc);
  box-shadow:0 0 0 3px var(--amarillo-cl)
}

/* ========================= PÁGINA DE PEDIDO ========================
   Datos de entrega a la izquierda, resumen del carrito a la derecha.
   El cobro no ocurre aquí: se muestran los medios de pago y el total
   con envío se confirma por WhatsApp.
   ================================================================== */

.ped{display:grid; grid-template-columns:1fr 340px; gap:clamp(20px,3vw,32px); align-items:start; margin-top:26px}
@media (max-width:980px){ .ped{grid-template-columns:1fr} }

.ped__form{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:clamp(20px,3vw,32px)
}
.ped__t{
  font-family:var(--f-t); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 14px
}
.ped__form .ped__t{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--linea-2)
}
.ped__form .ped__t:first-child{margin-top:0; padding-top:0; border-top:0}

.ped__res{
  background:var(--arena); border:1px solid var(--linea); border-radius:var(--r-m);
  padding:20px; position:sticky; top:88px
}
@media (max-width:980px){ .ped__res{position:static} }

.ped__items{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px}
.ped__items li{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  font-size:.84rem; line-height:1.4; color:var(--tinta-2)
}
.ped__items em{font-style:normal; font-weight:600; color:var(--tinta); white-space:nowrap; font-variant-numeric:tabular-nums}

.ped__linea{
  display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  font-size:.86rem; color:var(--tinta-2); border-top:1px solid var(--linea)
}
.ped__linea em{font-style:normal; color:var(--tinta); font-variant-numeric:tabular-nums}
.ped__tot{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin:6px 0 16px; padding-top:12px; border-top:1px solid var(--tinta-3);
  font-size:.9rem
}
.ped__tot strong{font-size:1.24rem; font-weight:700; font-variant-numeric:tabular-nums}

.ped__res .btn{margin-bottom:9px}
.ped__nota{margin:6px 0 0; font-size:.74rem; line-height:1.5; color:var(--tinta-3)}
.ped__volver{
  display:inline-block; margin-top:14px; font-size:.82rem; font-weight:600;
  color:var(--madera); text-decoration:none
}
.ped__volver:hover{text-decoration:underline}

.ped__vacio{
  grid-column:1/-1; text-align:center; padding:56px 20px; background:#fff;
  border:1px dashed var(--linea); border-radius:var(--r-m)
}
.ped__vacio p{margin:0 0 18px; color:var(--tinta-2)}

/* Selector de acabado dentro de la ficha. Deja de ser una muestra
   decorativa: es un campo obligatorio del pedido. */
.mcolors{display:flex; flex-wrap:wrap; gap:8px}
.mcolor{
  display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px;
  border:1.5px solid var(--linea); border-radius:999px; background:#fff;
  font:inherit; font-size:.8rem; color:var(--tinta-2); cursor:pointer;
  transition:border-color .16s ease, color .16s ease
}
.mcolor i{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.14)}
.mcolor:hover{border-color:var(--tinta-3); color:var(--tinta)}
.mcolor.on{border-color:var(--amarillo-osc); color:var(--tinta); font-weight:600}
.mcolor:focus-visible{outline:2px solid var(--amarillo); outline-offset:2px}
.mcolors__av{margin:8px 0 0; font-size:.78rem; color:#B4241B; font-weight:600}
.mcolors__av[hidden]{display:none}
.req{color:var(--madera)}
.btn[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none}
#pProv[hidden]{display:none}

.ped__ok{
  grid-column:1/-1; max-width:560px; margin-inline:auto; text-align:left;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:clamp(24px,4vw,40px)
}
.ped__ok__t{
  font-family:var(--f-d); font-size:1.4rem; font-weight:600; margin:0 0 10px;
  color:var(--tinta)
}
.ped__ok > p{margin:0 0 18px; color:var(--tinta-2); font-size:.94rem; line-height:1.65}
.ped__ok .ped__items{margin-top:18px}
.ped__ok .btn{margin-top:20px}

/* Canales de venta. Los logotipos de las tiendas no se usan: los unicos
   archivos disponibles son favicons de 22 px y se verian pixelados. El
   nombre compuesto en la tipografia del sitio se lee mejor. */
/* Cinco canales en una sola fila: con cuatro quedaba uno solo abajo y
   la seccion se veia a medio llenar. */
.canales{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.canal{
  display:flex; flex-direction:column; gap:7px;
  padding:20px 18px 18px; background:#fff; text-decoration:none;
  border:1px solid var(--linea); border-radius:var(--r-m); color:var(--tinta);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.canal:hover{transform:translateY(-3px); box-shadow:var(--sh-m); border-color:var(--amarillo)}
.canal__logo{
  width:44px; height:44px; border-radius:var(--r-s); margin-bottom:5px;
  display:grid; place-items:center; background:var(--arena); color:var(--tinta);
}
.canal__logo svg{width:24px; height:24px}
.canal__k{
  font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--madera);
}
.canal__n{font-family:var(--f-t); font-size:1.06rem; font-weight:700; line-height:1.2}
.canal__d{font-size:.79rem; line-height:1.5; color:var(--tinta-2)}
.canal__ir{
  margin-top:auto; padding-top:10px; font-size:.8rem; font-weight:700;
  color:var(--madera); display:inline-flex; align-items:center; gap:5px;
}
.canal__ir::after{content:"→"; font-size:.95rem; transition:transform .2s ease}
.canal:hover .canal__ir::after{transform:translateX(3px)}

/* Cada canal con el color que lo identifica */
.canal--wa{background:var(--amarillo); border-color:var(--amarillo)}
.canal--wa .canal__k{color:#5B4600}
.canal--wa .canal__d{color:#453604}
.canal--wa .canal__ir{color:#171717}
.canal--wa .canal__logo{background:rgba(255,255,255,.55); color:#128C7E}
.canal--fb .canal__logo{background:#EAF1FB; color:#1877F2}
.canal--oe .canal__logo{background:#FDEAF1; color:#C8005A}
.canal--pv .canal__logo{background:#FDEBEA; color:#D0021B}
.canal--pm .canal__logo{background:#FFF0E2; color:#E8590C}

@media (max-width:1080px){ .canales{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .canales{grid-template-columns:1fr 1fr; gap:12px} }
@media (max-width:420px){ .canales{grid-template-columns:1fr} }
a.canal:hover{border-color:var(--amarillo-osc)}
a.canal:focus-visible{outline:2px solid var(--amarillo); outline-offset:3px}

/* ---------------------------- Cierre -------------------------------- */
.icta{background:var(--oscuro); color:#fff; padding:clamp(32px,4.5vw,52px) 0}
.icta__in{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.icta h2{font-family:var(--f-t); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px}
.icta p{color:rgba(255,255,255,.72); font-size:.95rem; max-width:48ch}
.icta__btns{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:560px){
  .icta__btns{flex-direction:column; align-items:stretch; width:100%}
  .icta__btns .btn{width:100%}
}

/* Aviso dentro de las tarjetas de instalación */
.ic3__aviso{
  font-size:.8rem !important; color:var(--tinta-3) !important;
  padding:10px 12px; border-radius:var(--r-s);
  background:var(--arena); border-left:3px solid var(--amarillo); flex:none !important;
}
.ic3__aviso a{color:var(--madera); font-weight:600}

/* Precio del servicio dentro de la tarjeta de instalación */
.ic3__precio{
  font-family:var(--f-t); font-weight:800; font-size:2rem;
  color:var(--tinta) !important; line-height:1; flex:none !important;
}
/* Nota bajo la casilla de instalación del carrito */
.check__n{display:block; font-style:normal; font-size:.75rem; color:var(--tinta-3); margin-top:3px}

/* =========================================================================
   CONFIGURADOR A MEDIDA
   ========================================================================= */
.conf{display:grid; grid-template-columns:1fr 340px; gap:clamp(20px,2.6vw,32px); align-items:start}
.conf__pasos{display:grid; gap:14px; min-width:0}

.cpaso{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:clamp(18px,2.4vw,24px); background:#fff;
  border:1px solid var(--linea); border-radius:var(--r-m);
}
.cpaso__n{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--amarillo); color:#171717;
  font-size:.84rem; font-weight:800; display:grid; place-items:center;
}
.cpaso__in{min-width:0}
.cpaso h3{font-family:var(--f-t); font-weight:700; font-size:1rem; margin-bottom:4px}
.cpaso__ay{font-size:.82rem; color:var(--tinta-3); margin-bottom:14px; line-height:1.5}

/* Tipos */
.ctipos{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px}
.ctipo{
  display:grid; justify-items:center; gap:8px; padding:14px 8px; cursor:pointer;
  background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s);
  font-size:.78rem; font-weight:600; color:var(--tinta-2); transition:border-color .2s ease, background .2s ease;
}
.ctipo svg{width:30px; height:30px; color:var(--tinta-3)}
.ctipo:hover{border-color:var(--tinta-3)}
.ctipo[aria-pressed="true"]{border-color:var(--amarillo); background:var(--arena); color:var(--tinta)}
.ctipo[aria-pressed="true"] svg{color:var(--madera)}

/* Medidas */
.campo-cm{position:relative; display:flex; align-items:center}
.campo-cm input{width:100%; padding-right:38px}
.campo-cm span{position:absolute; right:12px; font-size:.82rem; color:var(--tinta-3); pointer-events:none}
.field__ay{font-size:.72rem; color:var(--tinta-3); margin-top:5px}

/* Acabados */
.ccolores{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px}
.ccolor{
  display:grid; justify-items:center; gap:8px; padding:12px 8px; cursor:pointer;
  background:#fff; border:1.5px solid var(--linea); border-radius:var(--r-s);
  font-size:.78rem; font-weight:600; color:var(--tinta-2);
}
.ccolor i{width:100%; height:38px; border-radius:var(--r-s); display:block}
.ccolor i.bd{box-shadow:inset 0 0 0 1px var(--linea)}
.ccolor[aria-pressed="true"]{border-color:var(--amarillo); background:var(--arena); color:var(--tinta)}

/* Instalación */
.cradios{display:grid; gap:10px}
.cradio{
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:var(--r-s); background:#fff;
}
.cradio input{accent-color:var(--amarillo-osc); margin-top:2px; flex:none}
.cradio span{display:flex; flex-direction:column; gap:2px; font-size:.88rem; font-weight:600}
.cradio em{font-style:normal; font-size:.76rem; color:var(--tinta-3); font-weight:400}
.cradio:has(input:checked){border-color:var(--amarillo); background:var(--arena)}

/* Comentarios y foto */
.cpaso textarea{width:100%; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r-s); resize:vertical}
.cfoto{
  display:flex; gap:12px; align-items:flex-start; margin-top:12px;
  padding:13px 15px; border-radius:var(--r-s); background:var(--arena); border:1px dashed var(--linea);
}
.cfoto svg{width:26px; height:26px; flex:none; color:var(--madera)}
.cfoto span{display:flex; flex-direction:column; gap:2px; font-size:.78rem; color:var(--tinta-2); line-height:1.5}
.cfoto b{font-size:.85rem; color:var(--tinta)}

/* Columna lateral */
.conf__lado{position:sticky; top:calc(var(--hdr-h) + 14px); display:grid; gap:14px}
.cprev, .cres{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:18px}
.cprev__t, .cres__t{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:12px;
}
.cprev__box{background:var(--arena); border-radius:var(--r-s); overflow:hidden}
.cprev__box svg{width:100%; height:auto; display:block}
.cprev__n{font-size:.72rem; color:var(--tinta-3); line-height:1.5; margin-top:10px}

/* Referencias fotográficas del configurador */
.cref{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:18px; margin-top:14px}
.cref[hidden]{display:none}
.cref__t{
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 12px; font-weight:600
}
.cref__l{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.cref__i{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden;
  background:var(--arena); transition:border-color .18s ease
}
a.cref__i:hover{border-color:var(--amarillo)}
a.cref__i:focus-visible{outline:2px solid var(--amarillo); outline-offset:2px}
.cref__i img{width:100%; height:auto; display:block; background:#fff}
.cref__m{
  display:block; padding:7px 8px 8px; font-size:.68rem; line-height:1.35;
  color:var(--tinta-2); text-align:center; font-variant-numeric:tabular-nums
}
.cref__x{
  display:block; margin:0 8px 8px; padding:3px 6px; border-radius:999px;
  background:var(--amarillo); color:#2A2118; font-size:.6rem; font-weight:700;
  letter-spacing:.03em; text-align:center
}
.cref__n{font-size:.72rem; color:var(--tinta-3); line-height:1.5; margin-top:11px}
@media (max-width:640px){ .cref__l{grid-template-columns:repeat(3,1fr)} }

.cres__l{margin:0 0 14px; display:grid; gap:9px}
.cres__l div{display:flex; justify-content:space-between; gap:12px; font-size:.85rem}
.cres__l dt{color:var(--tinta-3); margin:0}
.cres__l dd{margin:0; font-weight:600; text-align:right}
.cres__fila{display:flex; justify-content:space-between; gap:12px; font-size:.86rem; padding:5px 0}
.cres__fila--tot{
  border-top:1px solid var(--linea); margin-top:6px; padding-top:11px;
  font-size:1rem;
}
.cres__fila--tot b{font-family:var(--f-t); font-weight:800; font-size:1.3rem}
.cres__cotiza{
  padding:14px; border-radius:var(--r-s); background:var(--arena);
  border:1px dashed var(--amarillo); text-align:center;
  font-size:.9rem; font-weight:700; color:var(--tinta);
}
.cres__n{font-size:.75rem; color:var(--tinta-3); line-height:1.55; margin:10px 0 14px}
.cres .btn + .btn{margin-top:9px}

.pasos4--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1080px){ .pasos4--5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .pasos4--5{grid-template-columns:1fr 1fr} }

@media (max-width:980px){
  .conf{grid-template-columns:1fr}
  .conf__lado{position:static}
}
@media (max-width:520px){
  .cpaso{grid-template-columns:1fr; gap:12px}
  .cpaso__n{margin-bottom:-4px}
}

/* Aviso destacado dentro del bloque de datos de pago */
.paybox__n--dest{
  margin-top:10px !important; padding:10px 12px; border-radius:var(--r-s);
  background:#FFF8E3; border-left:3px solid var(--amarillo);
  color:var(--tinta-2) !important;
}
.ped__ok2{font-size:.88rem; color:var(--tinta-2); line-height:1.6; margin-top:10px}

/* Bloque destacado del manual: lo que el cliente NO tiene que hacer */
.destacado{
  padding:22px 24px; border-radius:var(--r-m); margin-bottom:18px;
  background:var(--tinta); color:#fff;
}
.destacado__t{
  font-family:var(--f-t); font-weight:800; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:-.01em; margin-bottom:10px; color:var(--amarillo);
}
.destacado p{font-size:.93rem; line-height:1.68; color:rgba(255,255,255,.82)}
.destacado p + p{margin-top:10px}
.destacado strong{color:#fff}

/* Lista de verificación final del manual */
.errores--ok li::before{
  content:""; background:none; width:12px; height:7px; border-radius:0;
  border-left:2.2px solid #2E8B57; border-bottom:2.2px solid #2E8B57;
  transform:rotate(-45deg); top:.45em; left:2px;
}

/* ------------------------ Fotos del taller -------------------------- */
.taller{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,2vw,22px); margin-top:34px;
}
.taller__i{margin:0; position:relative; display:flex; flex-direction:column}
.taller__i img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r-m); background:var(--arena);
}
.taller__n{
  position:absolute; top:12px; left:12px; z-index:1;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--amarillo); color:var(--tinta);
  font-family:var(--f-t); font-weight:800; font-size:.95rem;
}
.taller__i figcaption{padding:14px 2px 0; font-size:.88rem; color:var(--tinta-2); line-height:1.6}
.taller__i figcaption b{display:block; color:var(--tinta); font-size:.95rem; margin-bottom:3px}

/* ---------------------------- Reseñas ------------------------------- */
.resenas{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.resena{
  margin:0; padding:24px 22px; background:#fff; border-radius:var(--r-m);
  border:1px solid var(--linea); display:flex; flex-direction:column; gap:14px;
}
.resena__c{width:28px; height:28px; color:var(--amarillo); flex:none}
.resena blockquote{
  margin:0; font-size:.95rem; line-height:1.68; color:var(--tinta); flex:1;
}
.resena figcaption{display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--linea-2)}
.resena__ini{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--amarillo); color:#171717;
  display:grid; place-items:center; font-weight:800; font-size:1rem;
}
.resena figcaption span span, .resena figcaption > span:last-child{
  display:flex; flex-direction:column; gap:1px;
}
.resena figcaption b{font-size:.9rem; font-weight:700}
.resena figcaption em{font-style:normal; font-size:.78rem; color:var(--tinta-3)}

/* Estrellas. Cada una lleva encima una copia recortada por ancho, que es
   lo que permite mostrar media estrella sin dibujar otro icono. */
.estrellas{display:inline-flex; gap:2px; line-height:0}
.estrellas .est{position:relative; display:block; width:17px; height:17px}
.estrellas svg{width:17px; height:17px; fill:var(--linea-2); display:block}
.estrellas .est__f{
  position:absolute; inset:0 auto 0 0; overflow:hidden; display:block;
}
.estrellas .est__f svg{fill:var(--amarillo-osc)}
.estrellas--lg .est, .estrellas--lg svg{width:23px; height:23px}

/* Promedio, bajo el título de la sección */
.resenas__prom{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:6px 12px; margin-top:14px;
}
.resenas__prom b{font-family:var(--f-t); font-size:1.15rem; font-weight:800; color:var(--tinta)}
.resenas__prom span{font-size:.83rem; color:var(--tinta-3)}

.resenas__cta{
  margin-top:26px; padding:26px; border-radius:var(--r-m);
  background:#fff; border:1px solid var(--amarillo);
  display:grid; grid-template-columns:1fr 1fr; gap:26px 34px; align-items:start;
}
.resenas__cta h3{font-family:var(--f-t); font-weight:700; font-size:1.15rem; margin-bottom:6px}
.resenas__cta p{font-size:.87rem; color:var(--tinta-2); line-height:1.6}
@media (max-width:760px){
  .resenas__cta{grid-template-columns:1fr; text-align:left}
}

/* ---- Formulario de reseña ---- */
.rf h3{font-family:var(--f-t); font-weight:700; font-size:1rem; margin-bottom:4px}
.rf__ay{font-size:.8rem; color:var(--tinta-3); margin-bottom:14px}
.rf__estrellas{display:flex; gap:4px; margin-bottom:16px}
.rf__e{
  background:none; border:0; padding:2px; cursor:pointer; line-height:0;
  border-radius:var(--r-s);
}
.rf__e svg{width:31px; height:31px; fill:var(--linea-2); transition:fill .12s}
.rf__e:hover svg, .rf__e.on svg{fill:var(--amarillo-osc)}
.rf__e:focus-visible{outline:2px solid var(--amarillo-osc); outline-offset:2px}
.rf__err{
  font-size:.82rem; color:#B44A34; margin:-4px 0 12px;
}
.rf iframe{display:none}
.rf__ok{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding:22px 8px;
}
.rf__ok svg{width:44px; height:44px; color:#2E8B57}
.rf__ok p{font-size:.9rem; color:var(--tinta-2); line-height:1.6}

/* Casilla con texto al costado (reseñas y carrito) */
.check{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:.85rem; color:var(--tinta-2); line-height:1.5; margin-bottom:14px;
}
.check input{
  width:17px; height:17px; flex:none; margin-top:1px;
  accent-color:var(--amarillo-osc); cursor:pointer;
}

/* Libro de Reclamaciones y Cambios, uno al lado del otro */
.ft__legales{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin:0 auto 28px; padding-inline:var(--pad); max-width:var(--wrap);
}
.ft__legales .ft__libro{margin:0}
.ft__libro--alt svg{width:24px; height:24px}
@media (max-width:640px){
  .ft__legales{flex-direction:column; align-items:stretch}
  .ft__legales .ft__libro{width:auto; margin:0}
}

/* Elección de destino en el pedido */
.destino{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px}
.destino__b{
  display:flex; gap:12px; align-items:center; padding:15px 16px; cursor:pointer;
  border:1.5px solid var(--linea); border-radius:var(--r-s); background:#fff; text-align:left;
  font:inherit; transition:border-color .2s ease, background .2s ease;
}
.destino__b svg{width:26px; height:26px; flex:none; color:var(--tinta-3)}
.destino__b span{display:flex; flex-direction:column; gap:2px}
.destino__b b{font-size:.92rem; font-weight:700}
.destino__b span span, .destino__b span{font-size:.76rem; color:var(--tinta-3)}
.destino__b:hover{border-color:var(--tinta-3)}
.destino__b[aria-pressed="true"]{border-color:var(--amarillo); background:var(--arena)}
.destino__b[aria-pressed="true"] svg{color:var(--madera)}
@media (max-width:520px){ .destino{grid-template-columns:1fr} }

/* Acabado como preferencia en el filtro */
.fcolores{display:grid; gap:7px}
.fcolor{
  display:flex; align-items:center; gap:9px; padding:7px 9px; cursor:pointer;
  border:1.5px solid transparent; border-radius:var(--r-s); background:none;
  font:inherit; font-size:.84rem; color:var(--tinta-2); text-align:left; width:100%;
}
.fcolor i{width:17px; height:17px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fcolor i.bd{box-shadow:inset 0 0 0 1px var(--linea)}
.fcolor:hover{background:var(--arena)}
.fcolor[aria-pressed="true"]{border-color:var(--amarillo); background:var(--arena); color:var(--tinta); font-weight:600}

/* Aviso del acabado elegido en la ficha */
.mcolors__sel{
  margin:0 0 14px; padding:9px 11px; border-radius:var(--r-s);
  background:var(--arena); border-left:3px solid var(--amarillo);
  font-size:.79rem; color:var(--tinta-2); line-height:1.5;
}
.mcolors__sel[hidden]{display:none}