/* ==========================================================================
   MOLINA REYFORMAS — Sistema visual del sitio
   Concepto: "Carta de Materiales". Muestrario de obra: yeso, roble y cinta.
   Reglas duras: radio 0, sombra 0, un solo chaflán de 10 mm abajo a la derecha,
   profundidad por bordes de 1 px y por cambio de fondo.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --bg:#F2EFE9;          /* yeso */
  --surface:#FBFAF7;     /* superficie */
  --ink:#191714;         /* tinta */
  --green:#2E4A3C;       /* verde obra */
  --orange:#D8562B;      /* naranja cinta (solo texto grande / fondos) */
  --orange-dk:#A93E1B;   /* naranja para texto pequeño sobre claro */
  --orange-lt:#EE8A55;   /* naranja para texto sobre verde/tinta */
  --sand:#B9A88C;
  --line:#DCD6C8;
  --grey:#6E6A61;
  --blue:#0F5C6B;
  --rule-light:rgba(242,239,233,.30);

  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max:1280px;
  --gut:24px;
  --pad:40px;
  --edge:max(var(--pad), calc((100vw - var(--max)) / 2));
  --cham:10px;
  --hdr:74px;

  --d-xl:clamp(2.75rem, 7vw, 6rem);
  --d-l:clamp(2rem, 4vw, 3.25rem);
  --d-m:clamp(1.5rem, 2.6vw, 2.125rem);
  --h3:1.5rem;
  --fs:1.0625rem;
  --lead:1.25rem;
  --ms:0.6875rem;

  /* simulador (los pinta el JS) */
  --sim-frentes:#B98A4E;
  --sim-encimera:#EFEBE3;
  --sim-pared:#F2EFE9;
}
@media (max-width:900px){
  :root{ --pad:20px; --gut:16px; --hdr:60px; }
}

/* 2. RESET ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
img{display:block;height:auto}
button{font:inherit;color:inherit}
a{color:inherit}
address{font-style:normal}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* 3. TIPOGRAFÍA ------------------------------------------------------------ */
h1,h2,h3{font-weight:400;letter-spacing:-0.03em;line-height:1.03;text-wrap:balance}
.d-xl{font-size:var(--d-xl);line-height:0.95;letter-spacing:-0.035em}
.d-l{font-size:var(--d-l);line-height:1.03}
.d-m{font-size:var(--d-m)}
h3{font-size:var(--h3);letter-spacing:-0.02em}
p{max-width:68ch}
.lead{font-size:var(--lead);line-height:1.5;max-width:58ch}
.prose p + p{margin-top:1.15em}
.mono{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.02em;line-height:1.6}
.label,.sec__label,.mcard__meta,.measure__k,.field label,.filter,.btn,.swatch__tag,.tape__n{
  font-family:var(--mono);
  font-size:var(--ms);
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.4;
}
.label{color:var(--grey);display:block}

/* enlaces de texto: subrayado 1 px que salta a naranja y engorda */
.lnk{
  color:inherit;text-decoration:none;position:relative;
  box-shadow:inset 0 -1px 0 0 var(--sand);
  transition:box-shadow .15s linear,color .15s linear;
}
.lnk:hover{color:var(--orange-dk);box-shadow:inset 0 -2px 0 0 var(--orange-dk)}
.lnk--light{box-shadow:inset 0 -1px 0 0 var(--rule-light)}
.lnk--light:hover{color:var(--orange-lt);box-shadow:inset 0 -2px 0 0 var(--orange-lt)}

/* foco: marco naranja desplazado */
:focus{outline:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.band--green :focus-visible,.mbar :focus-visible,.ftr :focus-visible{outline-color:var(--orange-lt)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--bg);padding:12px 18px;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

/* 4. RETÍCULA -------------------------------------------------------------- */
.wrap{padding-inline:var(--edge)}
.sec{padding-block:clamp(56px,7vw,110px)}
.sec--hero{padding-block:clamp(40px,5vw,72px) 0}
.sec--rail{padding-bottom:clamp(40px,5vw,72px)}

.sec__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.sec__aside{grid-column:1 / span 3;position:sticky;top:calc(var(--hdr) + 28px);align-self:start}
.sec__body{grid-column:4 / span 9;min-width:0}
.sec__num{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--orange-dk);display:block}
.sec__label{display:block;margin-top:8px;color:var(--ink)}

@media (max-width:900px){
  .sec__grid{grid-template-columns:minmax(0,1fr)}
  .sec__aside{
    position:static;grid-column:auto;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
    border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:24px;
  }
  .sec__label{margin-top:0}
  .sec__body{grid-column:auto}
}

/* 5. MOTIVOS: chaflán y cinta de medida ------------------------------------ */
.cham,.btn,.mcard,.fig img,.swatch,.chip,.badge-sweater,.cta__form{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
}

.tape{display:block;padding-block:8px 0}
.tape__n{display:block;color:var(--grey);margin-bottom:6px}
.tape__rule{
  display:block;height:5px;
  border-top:1px solid var(--sand);
  background-image:repeating-linear-gradient(90deg,var(--sand) 0 1px,transparent 1px 8px);
  transform-origin:left center;
}
.tape--light .tape__n{color:var(--bg);opacity:.7}
.tape--light .tape__rule{
  border-top-color:var(--rule-light);
  background-image:repeating-linear-gradient(90deg,var(--rule-light) 0 1px,transparent 1px 8px);
}

/* 6. HEADER + NAVEGACIÓN --------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hdr.is-scrolled{border-bottom-color:var(--sand)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:var(--hdr);padding-inline:var(--edge)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand__chip{width:40px;height:40px;flex:0 0 40px;display:block}
.brand__chip svg{width:40px;height:40px;display:block}
.brand__name{white-space:nowrap}

.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,2vw,28px)}
.nav a{
  position:relative;display:inline-block;padding-block:6px;
  font-size:0.9375rem;text-decoration:none;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);opacity:0;transition:opacity .15s linear,height .15s linear,background-color .15s linear;
}
.nav a:hover::after{opacity:1;height:2px;background:var(--orange-dk)}
.nav a[aria-current="page"]::after{opacity:1}

.hdr__tel{
  font-family:var(--mono);font-size:0.9375rem;color:var(--orange-dk);
  text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 -1px 0 0 transparent;transition:box-shadow .15s linear;
}
.hdr__tel:hover{box-shadow:inset 0 -2px 0 0 var(--orange-dk)}

.burger{
  display:none;align-items:center;gap:10px;background:none;border:1px solid var(--line);
  padding:10px 14px;cursor:pointer;
}
.burger__lines{display:block;width:18px}
.burger__lines i{display:block;height:1px;background:var(--ink)}
.burger__lines i + i{margin-top:5px}
.burger__txt{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto}
  .hdr__tel{order:-1}
  .brand__name{display:none}
}

/* menú de página completa */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:20px var(--edge) 32px;
}
.menu[hidden]{display:none}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:calc(var(--hdr) - 20px)}
.menu__close{background:none;border:1px solid var(--line);padding:10px 14px;cursor:pointer;font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase}
.menu__nav ul{border-top:1px solid var(--line)}
.menu__nav li{border-bottom:1px solid var(--line)}
.menu__nav a{
  display:block;padding-block:14px;font-size:clamp(1.75rem,9vw,2.75rem);
  letter-spacing:-0.03em;text-decoration:none;
}
.menu__nav a[aria-current="page"]{color:var(--grey)}
.menu__foot{color:var(--grey)}
.menu__tel{font-size:1.75rem;color:var(--orange-dk);text-decoration:none;letter-spacing:-0.02em}

/* barra inferior fija (solo móvil) */
.mbar{display:none}
@media (max-width:900px){
  .mbar{
    display:grid;grid-template-columns:1fr 1fr 1.35fr;
    position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;
    background:var(--surface);border-top:1px solid var(--line);
  }
  .mbar a{
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
    border-left:1px solid var(--line);
  }
  .mbar a:first-child{border-left:0}
  .mbar__call{background:var(--orange);color:var(--ink)}
  body{padding-bottom:64px}
  body[data-page="simulador"]{padding-bottom:0}
  body[data-page="simulador"] .mbar{display:none}
}

/* 7. BOTONES-MUESTRA ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 22px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  text-decoration:none;cursor:pointer;
  transition:background-color .18s linear,color .18s linear,border-color .18s linear;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--orange:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--light{border-color:var(--bg);color:var(--bg)}
.btn--light:hover{background:var(--bg);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;max-width:none}

/* 8. FIGURAS --------------------------------------------------------------- */
.fig{margin:0}
.fig img{width:100%;border:1px solid var(--line);background:var(--line);object-fit:cover}
.fig figcaption{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-top:10px;padding-top:8px;border-top:1px solid var(--line);
}
.fig--hero{margin-top:clamp(32px,5vw,56px)}
.fig--hero img{max-height:62vh;border-left:0;border-right:0}
.fig--hero figcaption{padding-inline:var(--edge);border-top:0;margin-top:8px}
@media (max-width:900px){
  .fig--hero img{max-height:none;aspect-ratio:4/5}
}

/* 9. HERO ------------------------------------------------------------------ */
.hero__eyebrow{margin-bottom:clamp(20px,4vw,40px)}
.hero__h1{max-width:16ch}
.hero__cols{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(28px,4vw,56px);
}
.hero__cols .lead{grid-column:1 / span 6}
.hero__act{grid-column:8 / span 5}
.hero__act .btnrow{margin-top:0}
.hero__tel{margin-top:20px;color:var(--grey)}
.hero__tel a{color:var(--orange-dk);text-decoration:none;font-size:1.0625rem;box-shadow:inset 0 -1px 0 0 var(--sand)}
.hero__tel a:hover{box-shadow:inset 0 -2px 0 0 var(--orange-dk)}
@media (max-width:900px){
  .hero__cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero__cols .lead,.hero__act{grid-column:auto}
}

/* 10. RAIL / MUESTRARIO A SANGRE ------------------------------------------- */
.rail{
  display:flex;gap:var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:clamp(28px,4vw,48px) var(--edge) 20px;
  cursor:grab;
  scrollbar-color:var(--sand) transparent;scrollbar-width:thin;
}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail > *{flex:0 0 clamp(250px,24vw,320px);scroll-snap-align:start}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-track{background:var(--line)}
.rail::-webkit-scrollbar-thumb{background:var(--sand)}
.rail__hint{color:var(--grey)}
@media (max-width:900px){
  .rail > *{flex-basis:74vw}
}

/* tarjeta-muestra */
.mcard{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  text-decoration:none;transition:background-color .18s linear;
}
.mcard img{aspect-ratio:1/1;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.mcard__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mcard__n{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--grey)}
.mcard h3{transition:color .15s linear}
.mcard p{font-size:0.9375rem;line-height:1.5;color:var(--ink)}
.mcard__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--orange-dk)}
.mcard:hover{background:var(--bg)}
.mcard:hover h3{color:var(--orange-dk)}

/* 11. FICHAS NUMERADAS ----------------------------------------------------- */
.fichas{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.ficha{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--gut);
  padding-block:32px;border-bottom:1px solid var(--line);
}
.ficha__n{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--orange-dk);padding-top:6px}
.ficha__c h3{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-bottom:10px}
.ficha__c p + p{margin-top:14px}
@media (max-width:600px){
  .ficha{grid-template-columns:minmax(0,1fr);gap:10px}
  .ficha__n{padding-top:0}
}

/* 12. BADGE SUDADERA ------------------------------------------------------- */
.badge-wrap{margin-top:36px;max-width:none}
.badge-sweater{
  display:inline-block;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;transform:rotate(-2deg);
}

/* 13. BANDAS --------------------------------------------------------------- */
.band{padding-block:clamp(48px,6vw,96px)}
.band--green{background:var(--green);color:var(--bg)}
.band--green .sec__label,.band--green h2{color:var(--bg)}
.band--green .sec__num{color:var(--orange-lt)}
.band--surface{background:var(--surface);border-block:1px solid var(--line)}
.band__head{margin-top:clamp(28px,4vw,48px)}
.band__link{margin-top:36px}

.measures{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(36px,5vw,64px);
  border-top:1px solid var(--rule-light);
}
.measure{padding:28px 20px 0;border-left:1px solid var(--rule-light)}
.measure:first-child{border-left:0;padding-left:0}
.measure__k{display:block;color:var(--orange-lt)}
.measure__v{display:block;font-size:var(--d-m);letter-spacing:-0.03em;line-height:1.1;margin-top:10px}
.measure p{margin-top:12px;font-size:0.9375rem;line-height:1.5;color:rgba(242,239,233,.82);max-width:32ch}
@media (max-width:820px){
  .measures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .measure{padding:24px 16px 24px;border-top:1px solid var(--rule-light)}
  .measure:nth-child(odd){border-left:0;padding-left:0}
  .measure:nth-child(-n+2){border-top:0}
}
@media (max-width:480px){
  .measures{grid-template-columns:minmax(0,1fr)}
  .measure{padding:22px 0;border-left:0}
  .measure:first-child{border-top:0}
}

/* 14. FICHA DE DATOS (mono) ------------------------------------------------ */
.spec{margin-top:28px;border-top:1px solid var(--line)}
.spec > div{display:flex;justify-content:space-between;gap:10px;padding-block:9px;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.spec dd{font-family:var(--mono);font-size:var(--ms);letter-spacing:.06em;text-align:right}
@media (max-width:900px){.spec{width:100%;margin-top:16px}}

/* 15. SPLIT (texto + figura) ----------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--gut);align-items:start}
.split__t{grid-column:1 / span 5}
.split .fig{grid-column:6 / span 4;position:sticky;top:calc(var(--hdr) + 28px)}
@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split__t,.split .fig{grid-column:auto}
  .split .fig{position:static;margin-top:32px}
}
.split .prose{margin-top:24px}

.limit{
  margin-top:32px;padding:24px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--orange);
}
.limit p{font-size:var(--lead);line-height:1.45;letter-spacing:-0.01em}

/* 16. BLOQUE LLAMADA (cierre de las seis páginas) -------------------------- */
.cta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:clamp(32px,4vw,56px)}
.cta__main{grid-column:1 / span 6}
.cta__form{grid-column:8 / span 5;background:var(--bg);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.cta__main h2{margin-top:14px;max-width:16ch}
.cta__tel{
  display:inline-block;margin-top:clamp(24px,3vw,40px);
  font-family:var(--mono);font-size:var(--d-l);line-height:1;letter-spacing:-0.02em;
  color:var(--orange);text-decoration:none;
}
.cta__tel:hover{color:var(--ink)}
.cta__hours{margin-top:14px;color:var(--grey)}
.cta__formtitle{font-size:1.25rem;letter-spacing:-0.02em}
.cta__formnote{color:var(--grey);margin-top:6px}
@media (max-width:1000px){
  .cta__grid{grid-template-columns:minmax(0,1fr)}
  .cta__main,.cta__form{grid-column:auto}
  .cta__form{margin-top:48px}
}

/* 17. FORMULARIOS ---------------------------------------------------------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gut);margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1 / -1}
.field label{color:var(--grey)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--sand);
  border-radius:0;padding:9px 0;width:100%;
  transition:border-color .15s linear;
}
.field textarea{resize:vertical;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--orange);outline:none}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.field__err,.field__hint{font-family:var(--mono);font-size:var(--ms);letter-spacing:.04em;text-transform:none;color:var(--orange-dk)}
.field__err{display:none}
.field input:user-invalid ~ .field__err,
.field textarea:user-invalid ~ .field__err{display:block}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:var(--orange)}
.field__hint[hidden]{display:none}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form__foot p{color:var(--grey);max-width:none}
.form__foot a{color:var(--orange-dk)}
.form__done{
  border:1px solid var(--line);background:var(--bg);padding:24px;margin-top:24px;
  font-size:var(--lead);line-height:1.45;
}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}

/* 18. FILTROS Y MUESTRAS DE COLOR (catálogo / simulador) ------------------- */
.filters{
  position:sticky;top:var(--hdr);z-index:40;background:var(--bg);
  padding-block:16px 0;border-bottom:1px solid var(--line);
}
.filters__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:12px}
.filters__k{color:var(--grey);flex:0 0 110px}
.filter{
  border:1px solid var(--line);background:transparent;padding:9px 13px;cursor:pointer;
  transition:background-color .15s linear,color .15s linear,border-color .15s linear;
}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters__count{margin-left:auto;font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
@media (max-width:700px){.filters__k{flex-basis:100%}}

.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
@media (max-width:1000px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.swatch{
  position:relative;display:block;background:var(--surface);border:1px solid var(--line);
  text-align:left;width:100%;padding:0;cursor:default;overflow:hidden;
}
.swatch[hidden]{display:none}
.swatch__color{display:block;aspect-ratio:1/1;background:var(--sw,var(--line))}
.swatch__tag{display:block;padding:11px 12px 14px;color:var(--ink)}
.swatch__tag b{display:block;font-weight:400;letter-spacing:.06em}
.swatch__tag span{display:block;color:var(--grey);margin-top:4px}
.swatch__note{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--surface);border-top:1px solid var(--line);
  padding:12px;font-family:var(--mono);font-size:var(--ms);line-height:1.5;letter-spacing:.02em;
  opacity:0;transform:translateY(4px);transition:opacity .15s linear,transform .15s linear;
}
.swatch:hover .swatch__note,.swatch:focus-visible .swatch__note,.swatch:focus-within .swatch__note{opacity:1;transform:none}
.empty{border:1px solid var(--line);padding:40px;text-align:left;font-size:var(--lead)}

/* chips de 40 px */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.chip{
  flex:0 0 40px;width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--c,var(--line));
}
.chip[aria-pressed="true"]{outline:2px solid var(--orange);outline-offset:2px}

/* 19. SIMULADOR (esqueleto reutilizable) ----------------------------------- */
.sim{display:grid;grid-template-columns:60% 40%;min-height:100vh}
.sim__bar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--pad);
}
.sim__bar a{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.sim__bar .sim__tel{color:var(--orange-dk)}
.sim__canvas{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:96px var(--pad) 120px;position:relative;
}
.sim__canvas svg{width:100%;max-width:720px;height:auto}
.sim__tracks{
  background:var(--surface);border-left:1px solid var(--line);
  padding:96px var(--pad) 120px;
}
.sim__note{
  position:absolute;left:var(--pad);bottom:96px;
  background:var(--surface);border:1px solid var(--line);padding:12px 14px;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.02em;
  opacity:0;transition:opacity .2s linear;pointer-events:none;
}
.sim__note.is-on{opacity:1}
.track{margin-bottom:32px}
.track__k{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.sim__readout{
  position:fixed;left:0;right:0;bottom:0;z-index:30;min-height:64px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px var(--gut);
  background:var(--ink);color:var(--bg);padding:12px var(--pad);
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.1em;text-transform:uppercase;
}
.sim__readout .btn{padding:12px 16px}
.sim__readout .btn--light{border-color:var(--bg);color:var(--bg)}
.sim__actions{margin-left:auto;display:flex;gap:10px}
@media (max-width:900px){
  .sim{grid-template-columns:minmax(0,1fr)}
  .sim__canvas{padding:80px var(--pad) 32px}
  .sim__tracks{border-left:0;border-top:1px solid var(--line);padding:32px var(--pad) 140px}
  .sim__note{position:static;margin-top:20px;display:inline-block}
}

/* 20. FOOTER --------------------------------------------------------------- */
.ftr{background:var(--green);color:var(--bg)}
.ftr__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);
  padding-block:clamp(48px,6vw,80px) 40px;
}
.ftr .label{color:rgba(242,239,233,.7);margin-bottom:16px}
.ftr a{text-decoration:none}
.map{width:100%;height:auto;color:var(--bg);opacity:.85}
.ftr__hours{margin-top:14px;color:rgba(242,239,233,.75)}
.ftr__tel{
  display:inline-block;font-family:var(--mono);font-size:1.75rem;letter-spacing:-0.01em;
  color:var(--orange-lt);text-decoration:none;margin-bottom:10px;
}
.ftr__tel:hover{color:var(--bg)}
.ftr__nav{margin-top:22px}
.ftr__nav ul{display:flex;flex-wrap:wrap;gap:6px 16px}
.ftr__nav a{font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.8)}
.ftr__nav a:hover{color:var(--orange-lt)}
.ftr__sign{color:rgba(242,239,233,.85);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;line-height:2}
.ftr__bottom{border-top:1px solid var(--rule-light);padding-block:20px 24px;font-size:var(--ms);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,233,.7)}
@media (max-width:900px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px var(--gut)}
}
@media (max-width:520px){
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
}

/* 21. MOVIMIENTO REDUCIDO -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rail{scroll-snap-type:none}
}

/* ==========================================================================
   PÁGINA REFORMAS — índice sticky + fichas técnicas de servicio
   ========================================================================== */

body[data-page="reformas"] .rf-h1{max-width:19ch}

/* --- documento 4/8 con índice sticky ------------------------------------- */
body[data-page="reformas"] .rf-doc{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);
}
body[data-page="reformas"] .rf-idx{
  grid-column:1 / span 3;
  position:sticky;top:calc(var(--hdr) + 28px);align-self:start;
}
body[data-page="reformas"] .rf-idx__k{margin-bottom:12px}
body[data-page="reformas"] .rf-idx__list{border-top:1px solid var(--line)}
body[data-page="reformas"] .rf-idx a{
  display:flex;gap:10px;align-items:baseline;
  padding:11px 0 11px 14px;border-left:1px solid var(--line);
  text-decoration:none;color:var(--grey);font-size:0.9375rem;line-height:1.3;
  transition:color .15s linear,border-color .15s linear;
}
body[data-page="reformas"] .rf-idx a:hover{color:var(--ink);border-left-color:var(--ink)}
body[data-page="reformas"] .rf-idx__n{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--sand);
  transition:color .15s linear;
}
body[data-page="reformas"] .rf-idx a[aria-current="location"]{
  color:var(--ink);border-left:2px solid var(--orange);padding-left:13px;
}
body[data-page="reformas"] .rf-idx a[aria-current="location"] .rf-idx__n{color:var(--orange-dk)}
body[data-page="reformas"] .rf-idx__foot{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--grey);
}
body[data-page="reformas"] .rf-idx__foot a{color:var(--orange-dk);text-decoration:none;font-size:1rem}
body[data-page="reformas"] .rf-idx__foot a:hover{box-shadow:inset 0 -2px 0 0 var(--orange-dk)}

body[data-page="reformas"] .rf-col{grid-column:4 / span 9;min-width:0}

/* --- secciones ------------------------------------------------------------ */
body[data-page="reformas"] .rf-sec{
  padding-block:clamp(44px,5.5vw,84px) 0;
  scroll-margin-top:calc(var(--hdr) + 24px);
}
body[data-page="reformas"] .rf-sec:first-child{padding-top:clamp(28px,3vw,44px)}
body[data-page="reformas"] .rf-kicker{margin:20px 0 12px}
body[data-page="reformas"] .rf-lead{margin-top:18px}
body[data-page="reformas"] .rf-sec .fig{margin-top:clamp(26px,3vw,40px)}
body[data-page="reformas"] .rf-sec .prose{margin-top:clamp(24px,3vw,32px)}
body[data-page="reformas"] .rf-fig--wide img{aspect-ratio:3/2;object-fit:cover}
body[data-page="reformas"] .rf-two{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  margin-top:clamp(26px,3vw,40px);
}
body[data-page="reformas"] .rf-two .fig{margin-top:0}
body[data-page="reformas"] .rf-two img{aspect-ratio:1/1;object-fit:cover}

/* --- lista de materiales -------------------------------------------------- */
body[data-page="reformas"] .rf-mat{margin-top:clamp(26px,3vw,36px)}
body[data-page="reformas"] .rf-mat > div{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--gut);
  padding-block:18px;border-top:1px solid var(--line);
}
body[data-page="reformas"] .rf-mat > div:last-child{border-bottom:1px solid var(--line)}
body[data-page="reformas"] .rf-mat dt{font-size:1.0625rem;letter-spacing:-0.01em}
body[data-page="reformas"] .rf-mat__ref{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
body[data-page="reformas"] .rf-mat dd{font-size:1rem;line-height:1.55;max-width:60ch}

/* --- subtítulo y par A/B -------------------------------------------------- */
body[data-page="reformas"] .rf-sub{margin-top:clamp(30px,3.5vw,44px)}
body[data-page="reformas"] .rf-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:20px;
}
body[data-page="reformas"] .rf-pair__c{
  border-top:1px solid var(--line);padding-top:16px;
}
body[data-page="reformas"] .rf-pair__k{color:var(--orange-dk);margin-bottom:8px;letter-spacing:.14em;text-transform:uppercase;font-size:var(--ms)}
body[data-page="reformas"] .rf-pair p{font-size:1rem;line-height:1.55}

/* --- nota práctica -------------------------------------------------------- */
body[data-page="reformas"] .rf-note{margin-top:clamp(26px,3vw,36px)}
body[data-page="reformas"] .rf-note p{font-size:1.125rem;line-height:1.5}

/* --- "esto lo decides tú" ------------------------------------------------- */
body[data-page="reformas"] .rf-decide{
  margin-top:clamp(28px,3.5vw,40px);
  background:var(--surface);border:1px solid var(--line);
  padding:clamp(20px,2.5vw,28px);
}
body[data-page="reformas"] .rf-decide .label{color:var(--ink);margin-bottom:14px}
body[data-page="reformas"] .rf-list li{
  display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:var(--gut);
  padding-block:12px;border-top:1px solid var(--line);
  font-size:1rem;line-height:1.55;
}
body[data-page="reformas"] .rf-list__r{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-dk);padding-top:3px;
}
body[data-page="reformas"] .rf-decide__link{margin-top:16px;font-size:1rem}

/* --- ficha de medidas ----------------------------------------------------- */
body[data-page="reformas"] .rf-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--ink);
}
body[data-page="reformas"] .rf-fact{padding:18px 18px 0;border-left:1px solid var(--line)}
body[data-page="reformas"] .rf-fact:first-child{border-left:0;padding-left:0}
body[data-page="reformas"] .rf-fact__k{
  display:block;font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}
body[data-page="reformas"] .rf-fact__v{
  display:block;margin-top:8px;font-size:var(--d-m);line-height:1.05;letter-spacing:-0.03em;
}
body[data-page="reformas"] .rf-fact p{margin-top:10px;font-size:0.9375rem;line-height:1.5;color:var(--grey);max-width:28ch}

/* --- chips de cocina ------------------------------------------------------ */
body[data-page="reformas"] .rf-chiprow{
  display:flex;flex-wrap:wrap;gap:var(--gut);
  margin-top:clamp(28px,3.5vw,40px);padding-top:20px;border-top:1px solid var(--line);
}
body[data-page="reformas"] .rf-chip{
  display:flex;align-items:center;gap:12px;text-decoration:none;
}
body[data-page="reformas"] .rf-chip .chip{border-color:var(--sand)}
body[data-page="reformas"] .rf-chip__t{color:var(--grey);line-height:1.45}
body[data-page="reformas"] .rf-chip:hover .chip{outline:2px solid var(--orange);outline-offset:2px}
body[data-page="reformas"] .rf-chip:hover .rf-chip__t{color:var(--ink)}
body[data-page="reformas"] .rf-said{
  margin-top:clamp(26px,3vw,36px);font-size:var(--lead);line-height:1.45;
  border-left:3px solid var(--orange);padding-left:18px;
}

/* --- reformas menores: asimetría invertida -------------------------------- */
body[data-page="reformas"] .rf-flip{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(26px,3vw,40px);align-items:start;
}
body[data-page="reformas"] .rf-flip__fig{
  grid-column:1 / span 4;margin-top:0;position:sticky;top:calc(var(--hdr) + 28px);
}
body[data-page="reformas"] .rf-flip__fig img{aspect-ratio:3/4;object-fit:cover}
body[data-page="reformas"] .rf-flip__t{grid-column:5 / span 5;min-width:0}
body[data-page="reformas"] .rf-mini{margin-top:26px;border-top:1px solid var(--line)}
body[data-page="reformas"] .rf-mini li{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:12px;
  padding-block:13px;border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.5;
}
body[data-page="reformas"] .rf-mini__k{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--sand);padding-top:3px;
}

/* --- lo que no hacemos (banda verde) -------------------------------------- */
body[data-page="reformas"] .rf-no-band{scroll-margin-top:var(--hdr)}
body[data-page="reformas"] .rf-no-lead{margin-top:20px;color:rgba(242,239,233,.85)}
body[data-page="reformas"] .rf-no{margin-top:clamp(32px,4vw,52px)}
body[data-page="reformas"] .rf-no__item{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gut);
  padding-block:26px;border-top:1px solid var(--rule-light);
}
body[data-page="reformas"] .rf-no__item:last-child{border-bottom:1px solid var(--rule-light)}
body[data-page="reformas"] .rf-no__h{display:flex;gap:14px;align-items:baseline}
body[data-page="reformas"] .rf-no__n{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--orange-lt);
}
body[data-page="reformas"] .rf-no__h h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
body[data-page="reformas"] .rf-no__c p{color:rgba(242,239,233,.88);max-width:52ch}
body[data-page="reformas"] .rf-no__alt{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-light);
  color:var(--orange-lt);letter-spacing:.04em;font-size:var(--ms);line-height:1.7;text-transform:none;
}
body[data-page="reformas"] .rf-no__seal{
  margin-top:clamp(30px,4vw,48px);
  display:inline-block;border:1px solid var(--rule-light);padding:14px 18px;
  font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--bg);
}

/* --- recap del cierre ----------------------------------------------------- */
body[data-page="reformas"] .rf-recap{
  grid-column:8 / span 5;background:var(--bg);border:1px solid var(--line);
  padding:clamp(22px,3vw,32px);align-self:start;
}
body[data-page="reformas"] .rf-recap .spec{margin-top:20px}
body[data-page="reformas"] .rf-recap__link{margin-top:20px;font-size:1rem}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  body[data-page="reformas"] .rf-flip{grid-template-columns:minmax(0,1fr)}
  body[data-page="reformas"] .rf-flip__fig{grid-column:auto;position:static;max-width:420px}
  body[data-page="reformas"] .rf-flip__t{grid-column:auto;margin-top:8px}
}
@media (max-width:1000px){
  body[data-page="reformas"] .rf-recap{grid-column:auto;margin-top:48px}
}
@media (max-width:900px){
  /* el índice se convierte en una tira horizontal pegada bajo el header */
  body[data-page="reformas"] .rf-doc{grid-template-columns:minmax(0,1fr)}
  body[data-page="reformas"] .rf-idx{
    grid-column:auto;position:sticky;top:var(--hdr);z-index:35;
    background:var(--bg);
    margin-inline:calc(-1 * var(--edge));padding-inline:0;
    border-bottom:1px solid var(--line);
  }
  body[data-page="reformas"] .rf-idx__k,
  body[data-page="reformas"] .rf-idx__foot{display:none}
  body[data-page="reformas"] .rf-idx__list{
    display:flex;border-top:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-inline:var(--edge);
  }
  body[data-page="reformas"] .rf-idx__list::-webkit-scrollbar{display:none}
  body[data-page="reformas"] .rf-idx li{flex:0 0 auto}
  body[data-page="reformas"] .rf-idx a{
    border-left:0;border-bottom:2px solid transparent;
    padding:14px 20px 12px 0;white-space:nowrap;
  }
  body[data-page="reformas"] .rf-idx a:hover{border-left:0;border-bottom-color:var(--line)}
  body[data-page="reformas"] .rf-idx a[aria-current="location"]{
    border-left:0;padding-left:0;border-bottom-color:var(--orange);
  }
  body[data-page="reformas"] .rf-col{grid-column:auto}
  body[data-page="reformas"] .rf-sec{scroll-margin-top:calc(var(--hdr) + 56px)}
  body[data-page="reformas"] .rf-mat > div{grid-template-columns:minmax(0,1fr);gap:8px}
  body[data-page="reformas"] .rf-pair{grid-template-columns:minmax(0,1fr);gap:0}
  body[data-page="reformas"] .rf-pair__c + .rf-pair__c{margin-top:20px}
  body[data-page="reformas"] .rf-facts{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
  body[data-page="reformas"] .rf-fact{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}
  body[data-page="reformas"] .rf-fact p{max-width:none}
  body[data-page="reformas"] .rf-no__item{grid-template-columns:minmax(0,1fr);gap:14px}
  body[data-page="reformas"] .rf-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body[data-page="reformas"] .rf-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  body[data-page="reformas"] .rf-list__r{padding-top:0}
  body[data-page="reformas"] .rf-chiprow{gap:14px var(--gut)}
}

/* ==========================================================================
   COCINAS — composición propia de la página (acotada con body[data-page])
   ========================================================================== */

/* 01 · Cabecera: la foto entra pegada al nav, el titular va debajo --------- */
body[data-page="cocinas"] .sec--khero{padding-block:0 clamp(8px,2vw,20px)}
body[data-page="cocinas"] .fig--top{margin-top:0}
body[data-page="cocinas"] .fig--top img{max-height:54vh}
body[data-page="cocinas"] .khero__head{margin-top:clamp(30px,4.5vw,58px)}
body[data-page="cocinas"] .khero__head .hero__h1{max-width:17ch}
@media (max-width:900px){
  body[data-page="cocinas"] .fig--top img{max-height:none;aspect-ratio:4/3}
}

/* 02 · Columna sticky: contador de decisión ------------------------------- */
body[data-page="cocinas"] .dec-prog{
  display:block;margin-top:22px;max-width:none;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);
}
body[data-page="cocinas"] .dec-prog__n b{font-weight:400;color:var(--orange-dk)}
body[data-page="cocinas"] .dec-prog__bar{
  display:block;margin-top:9px;height:5px;
  border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px);
  position:relative;
}
body[data-page="cocinas"] .dec-prog__bar i{
  display:block;position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:var(--orange);transform:scaleX(.0833);transform-origin:left center;
  transition:transform .3s linear;
}
body[data-page="cocinas"] .dec-prog__note{
  margin-top:20px;color:var(--grey);max-width:30ch;text-transform:none;letter-spacing:.02em;
}
@media (max-width:900px){
  body[data-page="cocinas"] .dec-prog{display:none}
  body[data-page="cocinas"] .dec-prog__note{flex:1 0 100%;margin-top:8px;max-width:60ch}
}

/* 02 · Las doce decisiones ------------------------------------------------ */
body[data-page="cocinas"] .decs{
  margin-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--line);
}
body[data-page="cocinas"] .dec{
  position:relative;
  padding:26px 0 26px 24px;
  border-bottom:1px solid var(--line);
}
body[data-page="cocinas"] .dec::before{
  content:"";position:absolute;left:0;top:28px;width:2px;height:14px;
  background:var(--line);
  transition:background-color .25s linear,height .25s linear;
}
body[data-page="cocinas"] .dec.is-current::before{
  background:var(--orange);height:calc(100% - 54px);
}
body[data-page="cocinas"] .dec__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  max-width:none;margin-bottom:9px;
}
body[data-page="cocinas"] .dec__n,
body[data-page="cocinas"] .dec__meta{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;
}
body[data-page="cocinas"] .dec__n{color:var(--grey);transition:color .25s linear}
body[data-page="cocinas"] .dec.is-current .dec__n{color:var(--orange-dk)}
body[data-page="cocinas"] .dec__meta{color:var(--grey);text-align:right}
body[data-page="cocinas"] .dec h3{
  font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:8px;max-width:22ch;
}
body[data-page="cocinas"] .dec p{max-width:62ch}
@media (max-width:700px){
  body[data-page="cocinas"] .dec{padding:22px 0 22px 16px}
  body[data-page="cocinas"] .dec__top{flex-direction:column;gap:4px;align-items:flex-start}
  body[data-page="cocinas"] .dec__meta{text-align:left}
}

/* 04 · Franja verde del simulador ---------------------------------------- */
body[data-page="cocinas"] .ktext{margin-top:22px;max-width:56ch}
body[data-page="cocinas"] .ktext p{color:rgba(242,239,233,.88)}
body[data-page="cocinas"] .kcombo{
  display:flex;flex-wrap:wrap;gap:12px 32px;
  margin-top:32px;padding-top:20px;border-top:1px solid var(--rule-light);
}
body[data-page="cocinas"] .kcombo li{display:flex;align-items:center;gap:12px}
body[data-page="cocinas"] .kcombo__sw{
  display:block;width:44px;height:30px;flex:0 0 44px;
  border:1px solid var(--rule-light);
}
body[data-page="cocinas"] .kcombo .mono{
  font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,239,233,.9);
}
body[data-page="cocinas"] .ksim__note{
  margin-top:26px;color:var(--orange-lt);
  font-size:var(--ms);letter-spacing:.14em;
}

/* 05 · Fila de medidas sobre fondo yeso ---------------------------------- */
body[data-page="cocinas"] .mrow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--line);
}
body[data-page="cocinas"] .md{padding:24px 18px 0;border-left:1px solid var(--line)}
body[data-page="cocinas"] .md:first-child{border-left:0;padding-left:0}
body[data-page="cocinas"] .md__k{
  display:block;font-family:var(--mono);font-size:var(--ms);
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);
}
body[data-page="cocinas"] .md__v{
  display:block;font-size:clamp(1.35rem,2.2vw,1.75rem);
  letter-spacing:-0.03em;line-height:1.1;margin-top:10px;
}
body[data-page="cocinas"] .md p{
  margin-top:11px;font-size:0.9375rem;line-height:1.5;color:var(--grey);max-width:30ch;
}
body[data-page="cocinas"] .kplazos{margin-top:clamp(32px,4vw,48px)}
@media (max-width:820px){
  body[data-page="cocinas"] .mrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="cocinas"] .md{padding:22px 16px 22px;border-top:1px solid var(--line)}
  body[data-page="cocinas"] .md:nth-child(odd){border-left:0;padding-left:0}
  body[data-page="cocinas"] .md:nth-child(-n+2){border-top:0}
}
@media (max-width:480px){
  body[data-page="cocinas"] .mrow{grid-template-columns:minmax(0,1fr)}
  body[data-page="cocinas"] .md{padding:20px 0;border-left:0}
  body[data-page="cocinas"] .md:first-child{border-top:0;padding-top:22px}
}

/* 06 · Sudadera ----------------------------------------------------------- */
body[data-page="cocinas"] .ksweat{
  display:inline-block;margin-top:26px;padding:10px 14px;
  border:1px solid var(--line);background:var(--surface);
  font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
body[data-page="cocinas"] .ksweat + p{margin-top:20px}

/* 07 · Checklist del bloque de llamada ------------------------------------ */
body[data-page="cocinas"] .kchk{margin-top:24px;border-top:1px solid var(--line)}
body[data-page="cocinas"] .kchk li{padding-block:14px;border-bottom:1px solid var(--line)}
body[data-page="cocinas"] .kchk__n{
  display:block;font-family:var(--mono);font-size:var(--ms);
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);
}
body[data-page="cocinas"] .kchk p{margin-top:6px;font-size:0.9375rem;line-height:1.5}
body[data-page="cocinas"] .kchk__foot{margin-top:18px;color:var(--grey)}
body[data-page="cocinas"] .cta__form .btnrow{margin-top:18px}

@media (prefers-reduced-motion:reduce){
  body[data-page="cocinas"] .dec::before,
  body[data-page="cocinas"] .dec-prog__bar i{transition:none}
}

/* ==========================================================================
   CATÁLOGO — composición propia sobre el sistema del sitio
   ========================================================================== */

/* Cabecera funcional ------------------------------------------------------ */
body[data-page="catalogo"] .cat-hero__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end;
}
body[data-page="catalogo"] .cat-hero__t{grid-column:1 / span 8}
body[data-page="catalogo"] .cat-hero__t .lead{margin-top:clamp(22px,3vw,34px)}
body[data-page="catalogo"] .cat-hero__meter{
  grid-column:10 / span 3;border-top:1px solid var(--ink);padding-top:14px;
}
body[data-page="catalogo"] .cat-hero__n{
  display:block;font-size:var(--d-l);line-height:.9;letter-spacing:-0.04em;color:var(--ink);
}
body[data-page="catalogo"] .cat-hero__meter .label{margin-top:8px}
body[data-page="catalogo"] .cat-hero__meter .spec{margin-top:20px}
body[data-page="catalogo"] .cat-warn{
  margin-top:clamp(28px,4vw,44px);color:var(--grey);max-width:72ch;
  border-left:3px solid var(--sand);padding-left:14px;
}
body[data-page="catalogo"] .cat-hero .tape{margin-top:clamp(32px,4vw,52px)}
@media (max-width:900px){
  body[data-page="catalogo"] .cat-hero__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  body[data-page="catalogo"] .cat-hero__t,
  body[data-page="catalogo"] .cat-hero__meter{grid-column:auto}
  body[data-page="catalogo"] .cat-hero__meter{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
  body[data-page="catalogo"] .cat-hero__meter .spec{flex:0 0 100%}
}

/* Barra de filtros -------------------------------------------------------- */
body[data-page="catalogo"] .filters{border-bottom:0;padding-bottom:0}
body[data-page="catalogo"] .filters::after{
  content:"";display:block;height:5px;
  border-top:1px solid var(--sand);
  background-image:repeating-linear-gradient(90deg,var(--sand) 0 1px,transparent 1px 8px);
}
body[data-page="catalogo"] .filters__row{border-top:1px solid var(--line);padding-top:12px}
body[data-page="catalogo"] #filter-groups > .filters__row:first-child{border-top:0;padding-top:0}
body[data-page="catalogo"] .filters__foot{align-items:center}
body[data-page="catalogo"] .filters__count{color:var(--ink)}
body[data-page="catalogo"] .filters__toggle{display:none}

@media (max-width:700px){
  body[data-page="catalogo"] .filters.is-ready .filters__toggle{
    display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
    background:transparent;border:1px solid var(--ink);padding:12px 13px;cursor:pointer;
    font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:12px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
  }
  body[data-page="catalogo"] .filters__toggle b{font-weight:400;color:var(--orange-dk)}
  body[data-page="catalogo"] .filters__row{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  body[data-page="catalogo"] .filters__row::-webkit-scrollbar{display:none}
  body[data-page="catalogo"] .filters__k{
    flex:0 0 auto;position:sticky;left:0;z-index:1;
    background:var(--bg);padding-right:10px;
  }
  body[data-page="catalogo"] .filter{white-space:nowrap}
  body[data-page="catalogo"] .filters__foot{flex-wrap:wrap;overflow:visible}
  body[data-page="catalogo"] .filters__count{margin-left:auto}
}

/* Índice de familias (columna sticky) ------------------------------------- */
body[data-page="catalogo"] .famidx{margin-top:24px;border-top:1px solid var(--line)}
body[data-page="catalogo"] .famidx li{border-bottom:1px solid var(--line)}
body[data-page="catalogo"] .famidx button{
  display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:10px;
  background:none;border:0;padding:11px 0;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.1em;text-transform:uppercase;
  transition:color .15s linear,background-color .15s linear,padding .15s linear;
}
body[data-page="catalogo"] .famidx button:hover{color:var(--orange-dk)}
body[data-page="catalogo"] .famidx em{font-style:normal;color:var(--grey)}
body[data-page="catalogo"] .famidx button[aria-pressed="true"]{
  background:var(--ink);color:var(--bg);padding-inline:10px;
}
body[data-page="catalogo"] .famidx button[aria-pressed="true"] em{color:var(--sand)}

@media (max-width:900px){
  body[data-page="catalogo"] .famidx{
    flex:0 0 100%;margin-top:6px;border-top:0;
    display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  }
  body[data-page="catalogo"] .famidx::-webkit-scrollbar{display:none}
  body[data-page="catalogo"] .famidx li{border-bottom:0;flex:0 0 auto}
  body[data-page="catalogo"] .famidx button{
    border:1px solid var(--line);padding:8px 12px;white-space:nowrap;
  }
  body[data-page="catalogo"] .famidx button[aria-pressed="true"]{padding-inline:12px;border-color:var(--ink)}
  body[data-page="catalogo"] .famidx em{display:none}
}

/* Cómo se lee una referencia ---------------------------------------------- */
body[data-page="catalogo"] .refkey{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:clamp(26px,3vw,36px);padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
}
body[data-page="catalogo"] .refkey__big{
  font-size:var(--d-m);line-height:1;letter-spacing:-.02em;color:var(--orange-dk);
}
body[data-page="catalogo"] .refkey p{max-width:52ch;color:var(--ink)}

/* Rejilla --------------------------------------------------------------- */
body[data-page="catalogo"] .gridhint{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  margin:26px 0 18px;padding-bottom:10px;color:var(--grey);
  border-bottom:1px solid var(--line);max-width:none;
}
body[data-page="catalogo"] #muestrario{scroll-margin-top:calc(var(--hdr) + 130px)}
body[data-page="catalogo"] .swatch{transition:border-color .15s linear}
body[data-page="catalogo"] .swatch:hover{border-color:var(--ink)}
body[data-page="catalogo"] .swatch.is-open .swatch__note{opacity:1;transform:none}
body[data-page="catalogo"] .swatch__tag span{letter-spacing:.1em}

/* textura de 1 px: maderas y encimeras */
body[data-page="catalogo"] .swatch--wood .swatch__color{
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 19px);
}
body[data-page="catalogo"] .swatch--stone .swatch__color{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 6px);
}

body[data-page="catalogo"] .empty{margin-top:20px}
body[data-page="catalogo"] .gridfoot{margin-top:28px;color:var(--grey);max-width:none}
body[data-page="catalogo"] .gridfoot a{color:var(--orange-dk);text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--sand)}
body[data-page="catalogo"] .gridfoot a:hover{box-shadow:inset 0 -2px 0 0 var(--orange-dk)}

/* Muestrario fotográfico -------------------------------------------------- */
body[data-page="catalogo"] .rail--photos > *{flex:0 0 clamp(260px,30vw,400px)}
body[data-page="catalogo"] .ph img{aspect-ratio:1/1;object-fit:cover}
body[data-page="catalogo"] .ph p{margin-top:12px;font-size:.9375rem;line-height:1.5}
body[data-page="catalogo"] .ph__go{margin-top:12px}
body[data-page="catalogo"] .ph__go button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
}
body[data-page="catalogo"] .ph__go .lnk{display:inline-block}
@media (max-width:900px){
  body[data-page="catalogo"] .rail--photos > *{flex-basis:78vw}
}

/* Aside del cierre -------------------------------------------------------- */
body[data-page="catalogo"] .cat-aside .spec{margin-top:22px}
body[data-page="catalogo"] .cat-aside__txt{margin-top:18px;color:var(--grey)}
body[data-page="catalogo"] .cat-aside .btnrow{margin-top:20px}

/* ==========================================================================
   SIMULADOR — página con layout propio (sin nav ni footer)
   Todo acotado con body[data-page="simulador"].
   ========================================================================== */

/* barra superior mínima */
body[data-page="simulador"] .sim__bar{
  height:56px;padding:0 var(--pad);
  background:var(--bg);border-bottom:1px solid var(--line);
}
body[data-page="simulador"] .sim__bar a{padding-block:6px;transition:color .15s linear,box-shadow .15s linear}
body[data-page="simulador"] .sim__back{box-shadow:inset 0 -1px 0 0 transparent}
body[data-page="simulador"] .sim__back:hover{color:var(--orange-dk);box-shadow:inset 0 -2px 0 0 var(--orange-dk)}
body[data-page="simulador"] .sim__tel{box-shadow:inset 0 -1px 0 0 transparent}
body[data-page="simulador"] .sim__tel:hover{box-shadow:inset 0 -2px 0 0 var(--orange-dk)}

/* lienzo */
body[data-page="simulador"] .sim__canvas{
  position:sticky;top:0;height:100vh;align-self:start;
  padding:80px var(--pad) 112px;
}
body[data-page="simulador"] .simcanvas{width:100%;max-width:760px;margin:0}
body[data-page="simulador"] .simcanvas svg{
  --cham:28px;
  width:100%;height:auto;display:block;
  border:1px solid var(--line);background:var(--surface);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
}
body[data-page="simulador"] .simcanvas svg rect,
body[data-page="simulador"] .simcanvas svg path{transition:fill .25s linear,stroke .15s linear,stroke-width .15s linear}
body[data-page="simulador"] .simcanvas figcaption{max-width:none}

/* zona resaltada al pasar por su pista */
body[data-page="simulador"] .sim.hl-frentes [data-zone="frentes"] > *,
body[data-page="simulador"] .sim.hl-encimera [data-zone="encimera"] > *,
body[data-page="simulador"] .sim.hl-pared [data-zone="pared"] > *{
  stroke:var(--orange);stroke-width:2;
}

/* nota de Pilar */
body[data-page="simulador"] .sim__note{max-width:34ch;color:var(--ink)}

/* panel de pistas */
body[data-page="simulador"] .sim__tracks{padding:80px var(--pad) 152px}
body[data-page="simulador"] .simhead h1{margin-top:14px;max-width:16ch}
body[data-page="simulador"] .simhead__p{margin-top:16px;max-width:46ch}
body[data-page="simulador"] .steps{
  display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:22px;padding-top:14px;
  border-top:1px solid var(--line);color:var(--grey);max-width:none;
}
body[data-page="simulador"] .steps span{
  font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
}
body[data-page="simulador"] .tape{margin-block:34px 26px}

/* cabecera de bloque (reusa .track__k) */
body[data-page="simulador"] .track__k h2{font-size:1.25rem;letter-spacing:-0.02em}
body[data-page="simulador"] .track__c{color:var(--grey);white-space:nowrap;align-self:flex-end}
body[data-page="simulador"] .track__p{margin-top:14px;font-size:0.9375rem;line-height:1.55;max-width:46ch}

/* combinaciones de partida */
body[data-page="simulador"] .presets__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:18px;
}
body[data-page="simulador"] .preset{
  display:grid;gap:8px;align-content:start;text-align:left;
  background:var(--surface);border:1px solid var(--line);padding:12px;cursor:pointer;
  transition:background-color .15s linear,border-color .15s linear;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
}
body[data-page="simulador"] .preset:hover{border-color:var(--ink)}
body[data-page="simulador"] .preset[aria-pressed="true"]{border-color:var(--ink);background:var(--bg)}
body[data-page="simulador"] .preset__sw{display:flex;gap:4px}
body[data-page="simulador"] .preset__sw i{
  display:block;width:22px;height:22px;background:var(--c,var(--line));border:1px solid var(--line);
}
body[data-page="simulador"] .preset__az1{
  background-color:#F7F5F1;
  background-image:linear-gradient(#C6BEB0 1px,transparent 1px),linear-gradient(90deg,#C6BEB0 1px,transparent 1px);
  background-size:11px 6px;
}
body[data-page="simulador"] .preset__n{font-size:0.9375rem;line-height:1.25;letter-spacing:-0.01em}
body[data-page="simulador"] .preset__r{color:var(--grey);font-size:var(--ms);letter-spacing:.06em}

/* pistas y grupos de familia */
body[data-page="simulador"] .track{margin-bottom:0}
body[data-page="simulador"] .tgroup{margin-top:20px}
body[data-page="simulador"] .tgroup__k{
  display:block;font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:9px;
}
body[data-page="simulador"] .tgroup__note{margin-top:10px;color:var(--grey);max-width:44ch}
body[data-page="simulador"] .chips{padding:4px 4px 12px;margin-left:-4px}
body[data-page="simulador"] .chip{transition:border-color .15s linear}
body[data-page="simulador"] .chip:hover{border-color:var(--ink)}
body[data-page="simulador"] .chip--az1{
  background-color:#F7F5F1;
  background-image:linear-gradient(#C6BEB0 1px,transparent 1px),linear-gradient(90deg,#C6BEB0 1px,transparent 1px);
  background-size:20px 10px;
}
body[data-page="simulador"] .chip--az2{
  background-color:#F2EFE9;
  background-image:
    linear-gradient(45deg,#2E4A3C 25%,transparent 25%,transparent 75%,#2E4A3C 75%),
    linear-gradient(45deg,#2E4A3C 25%,transparent 25%,transparent 75%,#2E4A3C 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
body[data-page="simulador"] .chip--az3{
  background-color:#F2EFE9;
  background-image:
    linear-gradient(90deg,#0F5C6B 45%,transparent 45%),
    linear-gradient(#A9B7BC 45%,transparent 45%);
  background-size:10px 10px;
}
body[data-page="simulador"] .switch{display:flex;flex-wrap:wrap;gap:8px}

/* aviso honesto */
body[data-page="simulador"] .sim__warn{
  margin-top:26px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);max-width:44ch;
}

/* cierre del panel */
body[data-page="simulador"] .simend h2{margin-top:12px;max-width:18ch}
body[data-page="simulador"] .simend__p{margin-top:16px;font-size:0.9375rem;line-height:1.55;max-width:46ch}
body[data-page="simulador"] .simend__list{margin-top:22px;border-top:1px solid var(--line)}
body[data-page="simulador"] .simend__list li{
  display:flex;justify-content:space-between;gap:12px;
  padding-block:9px;border-bottom:1px solid var(--line);
  font-size:var(--ms);letter-spacing:.12em;text-transform:uppercase;
}
body[data-page="simulador"] .simend__list span{color:var(--grey)}
body[data-page="simulador"] .simend__tel{margin-top:22px;color:var(--grey)}
body[data-page="simulador"] .simend__tel a{
  font-size:var(--d-m);line-height:1.1;letter-spacing:-0.02em;color:var(--orange);text-decoration:none;
}
body[data-page="simulador"] .simend__tel a:hover{color:var(--ink)}
body[data-page="simulador"] .simend__nav{margin-top:26px}
body[data-page="simulador"] .simend__nav ul{display:flex;flex-wrap:wrap;gap:8px 20px}
body[data-page="simulador"] .simend__nav a{font-size:0.9375rem}

/* lector de referencias */
body[data-page="simulador"] .sim__readout{border-top:1px solid var(--ink)}
body[data-page="simulador"] .sim__refs{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0;max-width:none;
}
body[data-page="simulador"] .rd{display:inline-flex;align-items:baseline;gap:8px}
body[data-page="simulador"] .rd + .rd{border-left:1px solid rgba(242,239,233,.25);padding-left:18px}
body[data-page="simulador"] .rd__k{color:var(--sand)}
body[data-page="simulador"] .rd b{font-weight:400}
body[data-page="simulador"] .rd__ref{color:var(--orange-lt)}
body[data-page="simulador"] .rd__nm{color:var(--bg)}
body[data-page="simulador"] .rd__toggle{
  display:none;background:transparent;border:1px solid rgba(242,239,233,.35);color:var(--bg);
  padding:8px 12px;cursor:pointer;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
}
body[data-page="simulador"] .rd__toggle:hover{border-color:var(--bg)}

/* ---------- móvil: el lienzo se queda pegado arriba ---------------------- */
@media (max-width:900px){
  body[data-page="simulador"] .sim__canvas{
    position:sticky;top:56px;height:auto;z-index:5;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:14px var(--pad) 16px;
  }
  body[data-page="simulador"] .simcanvas svg{--cham:18px}
  body[data-page="simulador"] .simcanvas figcaption{margin-top:8px;padding-top:6px}
  body[data-page="simulador"] .sim__note{
    position:absolute;left:var(--pad);right:var(--pad);bottom:44px;
    margin:0;display:block;max-width:none;
  }
  body[data-page="simulador"] .sim__tracks{padding:28px var(--pad) 190px;border-top:0}
  body[data-page="simulador"] .rd__toggle{display:inline-block;order:3}
  body[data-page="simulador"] .sim__refs{gap:6px 12px;order:1;flex:1 1 100%}
  body[data-page="simulador"] .rd + .rd{padding-left:12px}
  body[data-page="simulador"] .rd__nm{display:none}
  body[data-page="simulador"] .sim__readout.is-open .rd__nm{display:inline}
  body[data-page="simulador"] .sim__readout.is-open .rd{flex:1 1 100%}
  body[data-page="simulador"] .sim__readout.is-open .rd + .rd{border-left:0;padding-left:0}
  body[data-page="simulador"] .sim__actions{order:4;margin-left:auto}
}

@media (max-width:560px){
  body[data-page="simulador"] .sim__actions{flex:1 1 100%;margin-left:0}
  body[data-page="simulador"] .sim__actions .btn{flex:1 1 auto;text-align:center}
  body[data-page="simulador"] .simend__tel a{font-size:1.75rem}
}

/* el detalle fino desaparece cuando el dibujo se hace pequeño */
@media (max-width:480px){
  body[data-page="simulador"] .sim-detail{display:none}
}

/* ==========================================================================
   CONTACTO — composición propia (tokens y clases del sistema)
   ========================================================================== */

/* 01 · Cabecera: teléfono como pieza gráfica + ficha de datos --------------- */
body[data-page="contacto"] .hero-contact{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(28px,4vw,56px);align-items:start;
}
body[data-page="contacto"] .hero-contact__main{grid-column:1 / span 7;min-width:0}
body[data-page="contacto"] .hero-contact__side{grid-column:9 / span 4;min-width:0}

body[data-page="contacto"] .telblock{
  margin:clamp(28px,4vw,48px) 0 0;max-width:none;
  border-top:1px solid var(--line);padding-top:clamp(18px,2vw,26px);
}
body[data-page="contacto"] .tel-mega{
  display:inline-block;
  font-family:var(--mono);font-weight:400;
  font-size:clamp(3rem,11.5vw,6.5rem);
  line-height:0.92;letter-spacing:-0.03em;white-space:nowrap;
  color:var(--orange);text-decoration:none;
  transition:color .18s linear;
}
body[data-page="contacto"] .tel-mega:hover{color:var(--ink)}
body[data-page="contacto"] .tel-mega__hours{
  margin-top:14px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--ms);
}
body[data-page="contacto"] .hero-contact__main .btnrow{margin-top:30px}
body[data-page="contacto"] .badge-wrap{margin-top:32px}

body[data-page="contacto"] .idcard{border-top:1px solid var(--line)}
body[data-page="contacto"] .idcard > div{padding-block:14px 15px;border-bottom:1px solid var(--line)}
body[data-page="contacto"] .idcard dt{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
body[data-page="contacto"] .idcard dd{
  margin:6px 0 0;font-family:var(--mono);font-size:0.8125rem;line-height:1.65;letter-spacing:.02em;
}
body[data-page="contacto"] .idcard a{text-decoration:none}

@media (max-width:900px){
  body[data-page="contacto"] .hero-contact{grid-template-columns:minmax(0,1fr);gap:36px}
  body[data-page="contacto"] .hero-contact__main,
  body[data-page="contacto"] .hero-contact__side{grid-column:auto}
}

/* 02 · Pasos numerados con su medida --------------------------------------- */
body[data-page="contacto"] .steps{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
body[data-page="contacto"] .step{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--gut);
  padding-block:30px 34px;border-bottom:1px solid var(--line);
}
body[data-page="contacto"] .step__n{
  display:block;font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;color:var(--orange-dk);
}
body[data-page="contacto"] .step__v{
  display:block;margin-top:8px;font-size:var(--d-m);line-height:1.05;letter-spacing:-0.03em;
}
body[data-page="contacto"] .step__k{
  display:block;margin-top:8px;font-family:var(--mono);font-size:var(--ms);
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
body[data-page="contacto"] .step__c h3{margin-bottom:10px}
body[data-page="contacto"] .step__c p + p{margin-top:14px}

body[data-page="contacto"] .fig--step{margin-block:clamp(28px,4vw,44px)}
body[data-page="contacto"] .fig--step img{aspect-ratio:16/9;object-position:center 45%}

@media (max-width:640px){
  body[data-page="contacto"] .step{grid-template-columns:minmax(0,1fr);gap:14px}
  body[data-page="contacto"] .step__m{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  }
  body[data-page="contacto"] .step__v,
  body[data-page="contacto"] .step__k{margin-top:0}
  body[data-page="contacto"] .step__v{font-size:1.5rem}
  body[data-page="contacto"] .fig--step img{aspect-ratio:4/3}
}

/* 03 · Tarjeta de formulario ----------------------------------------------- */
body[data-page="contacto"] .formcard{
  margin-top:clamp(28px,3.5vw,44px);
  background:var(--surface);border:1px solid var(--line);
  padding:clamp(22px,3vw,38px);
}
body[data-page="contacto"] .formcard__note{color:var(--grey)}
body[data-page="contacto"] .formcard .form{margin-top:20px}
body[data-page="contacto"] .formcard__after{margin-top:20px;color:var(--grey);max-width:56ch}
body[data-page="contacto"] .hint--grey{color:var(--grey)}

/* selector de hora: botones-muestra con radios reales */
body[data-page="contacto"] .hourpick{border:0;padding:0;margin:0;min-width:0}
body[data-page="contacto"] .hourpick legend{
  padding:0;font-family:var(--mono);font-size:var(--ms);
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
body[data-page="contacto"] .hourpick__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body[data-page="contacto"] .hourpick input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
body[data-page="contacto"] .hourpick label{
  border:1px solid var(--line);background:transparent;padding:9px 13px;cursor:pointer;
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
  transition:background-color .15s linear,color .15s linear,border-color .15s linear;
}
body[data-page="contacto"] .hourpick label:hover{border-color:var(--ink)}
body[data-page="contacto"] .hourpick input:checked + label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body[data-page="contacto"] .hourpick input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}

/* 04 · Dónde estamos -------------------------------------------------------- */
body[data-page="contacto"] .place{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);
  gap:clamp(24px,4vw,52px);align-items:start;margin-top:clamp(28px,3.5vw,44px);
}
body[data-page="contacto"] .place__p{margin-top:22px;max-width:46ch}
body[data-page="contacto"] .place__t > p:last-child{margin-top:22px}
body[data-page="contacto"] .map--big{
  width:100%;height:auto;color:var(--ink);opacity:1;
  background:var(--surface);border:1px solid var(--line);padding:0;
}
body[data-page="contacto"] .map--big text{font-family:var(--mono)}
body[data-page="contacto"] .map__cap{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--grey);text-transform:uppercase;letter-spacing:.14em;font-size:var(--ms);
}
@media (max-width:820px){
  body[data-page="contacto"] .place{grid-template-columns:minmax(0,1fr)}
}

/* 05 · Antes de llamar ------------------------------------------------------ */
body[data-page="contacto"] .before{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
body[data-page="contacto"] .before__it{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--gut);
  padding-block:26px;border-bottom:1px solid var(--line);
}
body[data-page="contacto"] .before__k{
  font-family:var(--mono);font-size:var(--ms);letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-dk);padding-top:5px;
}
@media (max-width:640px){
  body[data-page="contacto"] .before__it{grid-template-columns:minmax(0,1fr);gap:10px}
  body[data-page="contacto"] .before__k{padding-top:0}
}

/* 06 · Panel del cierre (sustituye al formulario de la home) ---------------- */
body[data-page="contacto"] .cta__aside{
  grid-column:8 / span 5;background:var(--bg);border:1px solid var(--line);
  padding:clamp(22px,3vw,32px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);
}
body[data-page="contacto"] .cta__asidep{margin-top:12px;font-size:0.9375rem;line-height:1.55;color:var(--ink)}
body[data-page="contacto"] .cta__links{margin-top:20px;border-top:1px solid var(--line)}
body[data-page="contacto"] .cta__links li{padding-block:11px;border-bottom:1px solid var(--line);font-size:0.9375rem}
body[data-page="contacto"] .cta__asidenote{margin-top:18px;color:var(--grey);text-transform:uppercase;letter-spacing:.14em;font-size:var(--ms)}
@media (max-width:1000px){
  body[data-page="contacto"] .cta__aside{grid-column:auto;margin-top:48px}
}