/* ============================================================
   DIPM — styles.css
   ------------------------------------------------------------
   ÍNDICE (busca con Ctrl+F):
   01. TOKENS Y BASE ......... colores, fuentes, reset
   02. BOTONES
   03. NAVEGACIÓN Y MENÚ MÓVIL
   04. HERO
   05. MARQUEE (cinta de servicios)
   06. ESTADÍSTICAS
   07. SECCIONES GENÉRICAS
   08. SERVICIOS (acordeón)
   09. PROYECTOS (galería + filtros)
   10. PROCESO
   11. MATERIALES
   12. TESTIMONIOS
   13. CTA
   14. CONTACTO
   15. FOOTER
   16. FLOTANTES (WhatsApp, subir)
   17. RESPONSIVE
   18. LIGHTBOX (visor de fotos)
   19. HERO SLIDER (plano ↔ cocina terminada)
   ============================================================ */

/* ============ 01. TOKENS Y BASE ============
   🎨 EDITA AQUÍ los colores y fuentes de toda la web. */
:root{
  --ink:#181310;        /* fondo oscuro principal (casi negro cálido) */
  --ink-2:#221a13;
  --ink-3:#2c221a;
  --bone:#f1eadf;       /* fondo claro principal (hueso) */
  --bone-2:#e9e1d2;
  --card:#f8f4ea;
  --amber:#e0a43c;      /* ⭐ color de acento (ámbar madera) */
  --amber-2:#c8862a;
  --steel:#97a3ab;      /* gris acero (detalles metal) */
  --steel-d:#39434c;
  --line:rgba(24,19,16,.16);
  --line-l:rgba(241,234,223,.16);
  --disp:'Bricolage Grotesque',sans-serif;  /* títulos */
  --body:'Instrument Sans',sans-serif;      /* párrafos */
  --mono:'Space Mono',monospace;            /* etiquetas técnicas */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--body);background:var(--bone);color:var(--ink);line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--amber-2);border:2px solid var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.wrap{width:min(1200px,92%);margin:auto}
.mono{font-family:var(--mono)}
.sec{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}

/* textura de grano global */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:2000;pointer-events:none;opacity:.055;mix-blend-mode:overlay}

/* revelado al hacer scroll */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ============ 02. BOTONES ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;font:700 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.6rem;border:2px solid var(--ink);color:var(--ink);background:var(--amber);box-shadow:5px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s;text-decoration:none;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--bone);box-shadow:5px 5px 0 var(--amber)}
.btn.ghost:hover{box-shadow:8px 8px 0 var(--amber)}
.btn.sm{padding:.65rem 1.1rem;font-size:.68rem;box-shadow:4px 4px 0 var(--ink)}
.btn.wa{background:#25d366}
.btn svg{width:18px;height:18px;fill:currentColor}

/* ============ 03. NAVEGACIÓN Y MENÚ MÓVIL ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:960;padding:1.1rem 0;transition:padding .3s,background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav.scrolled{background:var(--ink);padding:.65rem 0;box-shadow:0 12px 34px rgba(0,0,0,.4);border-bottom:1px solid var(--line-l)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--bone)}
.brand svg{width:36px;height:36px;flex:none}
.brand img{height:46px;width:auto;flex:none;background:#fff;padding:4px 8px;border-radius:8px;transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;position:relative;z-index:2}
.brand:hover img{transform:scale(1.15);box-shadow:0 10px 28px rgba(0,0,0,.4)} /* Ajustado a 1.15 para zoom elegante */
.brand b{font:800 1.4rem/1 var(--disp);letter-spacing:.03em}
.brand small{display:block;font:400 .48rem var(--mono);letter-spacing:.26em;opacity:.6;text-transform:uppercase;margin-top:.2rem}
.nav-links{display:flex;gap:1.7rem}
.nav-links a{font:700 .7rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);text-decoration:none;position:relative;padding:.35rem 0;opacity:.85}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;background:none;border:2px solid var(--bone);cursor:pointer;z-index:970}
.burger span{display:block;width:20px;height:2px;background:var(--bone);margin:4px auto;transition:.3s}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.menu-open{overflow:hidden}

/* menú móvil a pantalla completa */
.mmenu{position:fixed;inset:0;background:var(--ink);z-index:940;display:flex;flex-direction:column;justify-content:center;padding:6rem 8% 3rem;transform:translateY(-102%);transition:transform .55s cubic-bezier(.77,0,.18,1)}
body.menu-open .mmenu{transform:none}
.mmenu a.big{font:800 clamp(1.9rem,8.5vw,2.8rem)/1.1 var(--disp);text-transform:uppercase;color:var(--bone);text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--line-l);display:flex;justify-content:space-between;align-items:baseline;opacity:0;transform:translateY(22px);transition:opacity .4s,transform .4s,color .2s,padding .2s}
.mmenu a.big span{font:700 .7rem var(--mono);color:var(--amber)}
body.menu-open .mmenu a.big{opacity:1;transform:none}
.mmenu a.big:nth-child(1){transition-delay:.15s}.mmenu a.big:nth-child(2){transition-delay:.22s}.mmenu a.big:nth-child(3){transition-delay:.29s}.mmenu a.big:nth-child(4){transition-delay:.36s}.mmenu a.big:nth-child(5){transition-delay:.43s}.mmenu a.big:nth-child(6){transition-delay:.5s}
.mmenu a.big:hover{color:var(--amber);padding-left:.6rem}
.mmenu .mfoot{margin-top:2.2rem;font:400 .68rem var(--mono);letter-spacing:.12em;color:rgba(241,234,223,.55)}

/* ============ 04. HERO ============ */
.hero{background:var(--ink);color:var(--bone);padding:9.5rem 0 5.5rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(241,234,223,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(241,234,223,.045) 1px,transparent 1px);background-size:52px 52px}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 70% 20%,transparent 40%,rgba(0,0,0,.5) 100%);pointer-events:none}
.hero-ruler{position:absolute;left:0;top:0;bottom:0;width:34px;border-right:1px solid var(--line-l);z-index:3;background-image:repeating-linear-gradient(to bottom,rgba(241,234,223,.45) 0 1px,transparent 1px 12px),repeating-linear-gradient(to bottom,rgba(241,234,223,.7) 0 1px,transparent 1px 60px);background-size:9px 100%,20px 100%;background-position:14px 0,14px 0;background-repeat:no-repeat}
.hero .wrap{position:relative;z-index:4}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.kicker{font:700 .68rem/1 var(--mono);letter-spacing:.22em;color:var(--amber);text-transform:uppercase;display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.kicker::before{content:"";width:36px;height:2px;background:var(--amber);flex:none}
.kicker .dot{width:8px;height:8px;background:var(--amber);border-radius:50%;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{font:800 clamp(2.7rem,6.2vw,5.2rem)/0.98 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--bone)}
.hero h1 .amb{color:var(--amber)}
.lede{max-width:46ch;color:rgba(241,234,223,.78);font-size:1.06rem;margin:1.5rem 0 2.1rem}
.rotor b{color:var(--amber);font-weight:700;display:inline-block;border-bottom:2px solid var(--amber);transition:opacity .3s,transform .3s}
.rotor b.out{opacity:0;transform:translateY(9px)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-meta{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.4rem;font:400 .66rem var(--mono);letter-spacing:.1em;color:rgba(241,234,223,.6);list-style:none}
.hero-meta li::before{content:"✓ ";color:var(--amber);font-weight:700}
.hero-plan{position:relative}
.blueprint{background:#2b343b;border:1px solid rgba(241,234,223,.2);box-shadow:0 34px 70px rgba(0,0,0,.5);padding:10px;transform:rotate(1.3deg);transition:transform .4s}
.hero-plan:hover .blueprint{transform:rotate(0deg)}
.blueprint figcaption{font:400 .58rem var(--mono);letter-spacing:.18em;color:rgba(241,234,223,.55);padding:.6rem .3rem .2rem;text-transform:uppercase}
.chip{position:absolute;background:var(--bone);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--amber);padding:.55rem .85rem;font:700 .6rem var(--mono);letter-spacing:.12em;z-index:5}
.chip-a{top:-18px;right:-10px;animation:bob 5s ease-in-out infinite}
.chip-b{bottom:-16px;left:-14px;animation:bob 6.5s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateY(-9px)}}
.hero-bottom{display:flex;justify-content:space-between;margin-top:4rem;font:400 .62rem var(--mono);letter-spacing:.2em;color:rgba(241,234,223,.45);text-transform:uppercase}
.hero-bottom .arr{display:inline-block;animation:down 1.6s infinite}
@keyframes down{50%{transform:translateY(6px)}}

/* dibujo animado del plano */
.bp .d{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.6,0,.3,1) forwards;animation-delay:var(--dd,0s)}
.bp .f{opacity:0;animation:fdin .8s forwards;animation-delay:var(--fd,1.5s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fdin{to{opacity:1}}

/* ============ 05. MARQUEE ============ */
.marquee{background:var(--amber);border-block:2px solid var(--ink);padding:.85rem 0;overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 32s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font:800 1rem var(--disp);text-transform:uppercase;letter-spacing:.05em;padding:0 1rem;white-space:nowrap;color:var(--ink)}
.mq-track i{font-style:normal;color:var(--ink-3)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ 06. ESTADÍSTICAS ============ */
.stats{background:var(--ink-2);color:var(--bone);border-bottom:1px solid var(--line-l)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:2.4rem 1.6rem;border-left:1px solid var(--line-l)}
.stat:first-child{border-left:0}
.stat b{font:800 clamp(2.2rem,4.5vw,3.4rem)/1 var(--disp);color:var(--amber);display:block}
.stat span{font:400 .62rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(241,234,223,.6);display:block;margin-top:.6rem}

/* ============ 07. SECCIONES GENÉRICAS ============ */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
.sec-title{font:800 clamp(2.1rem,4.8vw,3.6rem)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.shead p{max-width:44ch;color:rgba(24,19,16,.65)}
.on-dark .shead p{color:rgba(241,234,223,.65)}

/* ============ 08. SERVICIOS (acordeón) ============ */
.svc-list{border-bottom:1px solid var(--line)}
.svc{border-top:1px solid var(--line)}
.svc-head{width:100%;display:grid;grid-template-columns:70px 1fr auto 46px;align-items:center;gap:1.2rem;padding:1.35rem .9rem;background:none;border:0;cursor:pointer;text-align:left;position:relative;isolation:isolate;color:var(--ink);font-family:var(--body)}
.svc-head::before{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.65,0,.35,1);z-index:-1}
.svc:hover .svc-head::before,.svc.open .svc-head::before{transform:scaleX(1)}
.svc-num{font:700 .8rem var(--mono);color:var(--amber-2)}
.svc-title{font:700 clamp(1.15rem,2.4vw,1.7rem)/1.1 var(--disp);text-transform:uppercase}
.svc-tags{font:400 .6rem var(--mono);letter-spacing:.14em;color:rgba(24,19,16,.55);text-transform:uppercase}
.svc-x{font:300 2rem/1 var(--disp);justify-self:end;transition:transform .3s}
.svc.open .svc-x{transform:rotate(45deg)}
.svc-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.65,0,.35,1)}
.svc-body-in{padding:.2rem .9rem 1.7rem calc(70px + 2.1rem);max-width:66ch}
.svc-body-in p{color:rgba(24,19,16,.75);margin-bottom:.9rem}
.svc-link{font:700 .66rem var(--mono);letter-spacing:.16em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber-2);padding-bottom:.2rem;transition:.2s}
.svc-link:hover{background:var(--ink);color:var(--amber);border-color:var(--ink)}

/* ============ 09. PROYECTOS (galería + filtros) ============ */
#proyectos{background:var(--bone-2)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.fbtn{font:700 .64rem var(--mono);letter-spacing:.12em;padding:.55rem .95rem;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:.2s;text-transform:uppercase}
.fbtn:hover{background:var(--card)}
.fbtn.on{background:var(--ink);color:var(--amber)}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;grid-auto-flow:dense}
.pj{background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,opacity .25s}
.pj:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--amber-2)}
.pj.w2{grid-column:span 2}
.pj.dim{opacity:0;transform:scale(.96)}
.pj.off{display:none}
.pj-art{border-bottom:2px solid var(--ink);aspect-ratio:4/3;overflow:hidden;background:#ddd}
.pj.w2 .pj-art{aspect-ratio:2.05/1}
.pj-art svg{width:100%;height:100%;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.pj:hover .pj-art svg{transform:scale(1.045)}
.pj-art img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.pj:hover .pj-art img{transform:scale(1.06)}
.pj-info{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.pj-top{display:flex;justify-content:space-between;align-items:center}
.pj-cat{background:var(--amber);border:1.5px solid var(--ink);padding:.25rem .55rem;font:700 .58rem var(--mono);letter-spacing:.14em}
.pj-arr{font-size:1.1rem;transition:transform .25s}
.pj:hover .pj-arr{transform:translate(4px,-4px)}
.pj h3{font:700 1.3rem var(--disp);text-transform:uppercase}
.pj-meta{font:400 .62rem var(--mono);letter-spacing:.1em;color:rgba(24,19,16,.55);text-transform:uppercase}

/* micro-animaciones de las ilustraciones al pasar el cursor */
.steam,.hoodlight{transition:opacity .4s}
.pj:hover .steam{opacity:.85}
.pj:hover .hoodlight{opacity:.95}
.sun,.sunring{transition:transform .8s;transform-box:fill-box}
.pj:hover .sun{transform:translateY(-9px)}
.pj:hover .sunring{transform:translateY(-9px) scale(1.15)}
.sh{transition:opacity .6s}
.pj:hover .sh{opacity:.14}
.hg{transform-box:fill-box;transform-origin:top center;transition:transform .5s}
.pj:hover .hg{transform:rotate(2.5deg)}
.streak{transition:transform .7s}
.pj:hover .streak{transform:translateX(16px)}
.bulbglow,.halo,.halo2,.pcone,.lcone,.scr,.plight{transition:opacity .4s,fill .4s}
.pj:hover .bulbglow{opacity:.5}
.pj:hover .bulb{fill:#ffe3a3}
.pj:hover .halo{opacity:1}
.pj:hover .halo2{opacity:.42}
.pj:hover .pcone{opacity:.22}
.pj:hover .lcone{opacity:.24}
.pj:hover .scr{fill:#4d6272}
.pj:hover .plight{fill:#ffe3a3}

/* ============ 10. PROCESO ============ */
#proceso{background:var(--ink);color:var(--bone)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.steps::before{content:"";position:absolute;top:30px;left:3%;right:3%;border-top:2px dashed rgba(241,234,223,.22)}
.step{position:relative}
.step-num{font:800 3.1rem/1 var(--disp);color:transparent;-webkit-text-stroke:1.5px var(--amber);display:block;width:max-content;padding-right:.7rem;background:var(--ink);position:relative;margin-bottom:1.1rem;transition:color .3s}
.step:hover .step-num{color:var(--amber)}
.step svg{width:38px;height:38px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.step h3{font:700 1.05rem var(--disp);text-transform:uppercase;margin-bottom:.5rem}
.step p{color:rgba(241,234,223,.68);font-size:.92rem}

/* ============ 11. MATERIALES ============ */
.mats{display:flex;gap:1.1rem}
.mat{flex:1;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;transition:flex .5s cubic-bezier(.65,0,.35,1);position:relative;overflow:hidden;min-height:320px}
.mat:hover{flex:1.9}
.mat-tag{position:absolute;top:1.1rem;left:1.1rem;font:700 .58rem var(--mono);letter-spacing:.16em;background:var(--ink);color:var(--amber);padding:.3rem .6rem}
.mat h3{font:800 1.4rem var(--disp);text-transform:uppercase}
.mat p{font-size:.86rem;max-width:28ch;opacity:.9}
.mat.wood{background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.32)),repeating-linear-gradient(92deg,#6f4722 0 5px,#5d3a1b 5px 11px,#7d5227 11px 18px,#54331a 18px 23px);color:var(--bone)}
.mat.metal{background:repeating-linear-gradient(90deg,#9aa6ad 0 2px,#c6cfd4 2px 4px,#87939b 4px 6px);color:var(--ink)}
.mat.gyp{background:linear-gradient(160deg,#f6f3ec,#d9d3c6);color:var(--ink)}
.mat.led{background:#171310;color:var(--bone)}
.mat.led::before{content:"";position:absolute;left:12%;right:12%;top:38%;height:4px;background:var(--amber);box-shadow:0 0 18px 4px rgba(224,164,60,.85),0 0 64px 22px rgba(224,164,60,.35)}
.mat.wood h3{text-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ============ 12. TESTIMONIOS ============ */
.quotes{background:var(--bone-2)}
.q-box{max-width:840px;position:relative;min-height:220px}
.q-mark{font:800 5.5rem/0.5 var(--disp);color:var(--amber-2);display:block;margin-bottom:1.6rem}
.qt{display:none}
.qt.on{display:block;animation:qin .5s ease}
@keyframes qin{from{opacity:0;transform:translateY(14px)}}
.q-text{font:600 clamp(1.25rem,2.6vw,1.8rem)/1.45 var(--disp)}
.q-auth{font:700 .66rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-2);margin-top:1.3rem;display:block}
.q-ctrl{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.q-btn{width:44px;height:44px;border:2px solid var(--ink);background:var(--card);font-size:1.1rem;cursor:pointer;transition:.2s;display:grid;place-items:center}
.q-btn:hover{background:var(--amber)}
.q-dots{display:flex;gap:.5rem}
.q-dot{width:10px;height:10px;border:2px solid var(--ink);background:transparent;cursor:pointer;padding:0;transition:.2s}
.q-dot.on{background:var(--amber)}

/* ============ 13. CTA ============ */
.cta{background:var(--amber);border-block:2px solid var(--ink);position:relative;padding:4rem 0}
.cta::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:repeating-linear-gradient(45deg,var(--ink) 0 14px,transparent 14px 28px)}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta h2{font:800 clamp(1.8rem,4.5vw,3rem)/1 var(--disp);text-transform:uppercase}
.cta p{font-weight:600;margin-top:.6rem}
.cta .btn{background:var(--ink);color:var(--bone);box-shadow:5px 5px 0 rgba(24,19,16,.35)}
.cta .btn:hover{box-shadow:8px 8px 0 rgba(24,19,16,.35)}

/* ============ 14. CONTACTO ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:start}
.form-card{background:var(--card);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:clamp(1.5rem,3vw,2.4rem)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{margin-bottom:1.1rem}
.fld label{display:block;font:700 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.45rem}
.fld input,.fld select,.fld textarea{width:100%;padding:.85rem 1rem;border:2px solid var(--ink);background:#fff;font:400 .95rem var(--body);color:var(--ink);transition:.2s;border-radius:0;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23181310' stroke-width='2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 1rem center}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--amber-2);box-shadow:4px 4px 0 var(--amber)}
.fnote{font:400 .6rem var(--mono);letter-spacing:.14em;color:rgba(24,19,16,.55);margin-top:1rem;text-transform:uppercase}
.form-ok{display:none;text-align:center;padding:2.5rem 1rem}
.form-ok svg{width:74px;margin:0 auto 1.2rem}
.form-ok circle{stroke:var(--amber-2);stroke-width:2.5;fill:none;stroke-dasharray:230;stroke-dashoffset:230;animation:draw2 1s .1s forwards}
.form-ok path{stroke:var(--ink);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw2 .6s .8s forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
.form-ok h3{font:800 1.6rem var(--disp);text-transform:uppercase;margin-bottom:.6rem}
.form-card.sent .form-fields{display:none}
.form-card.sent .form-ok{display:block}
.info-card{background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),repeating-linear-gradient(92deg,#2a211a 0 5px,#241c15 5px 11px,#2e241c 11px 18px);color:var(--bone);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--amber-2);padding:clamp(1.5rem,3vw,2.2rem)}
.info-card h3{font:800 1.5rem var(--disp);text-transform:uppercase;margin-bottom:.4rem}
.info-card .sub{font:400 .62rem var(--mono);letter-spacing:.16em;color:var(--amber);text-transform:uppercase;margin-bottom:1.4rem;display:block}
.irow{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-l);align-items:flex-start}
.irow:last-of-type{border-bottom:0}
.irow .ic{width:42px;height:42px;flex:none;border:2px solid var(--amber);display:grid;place-items:center}
.irow .ic svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.irow b{font:700 .95rem var(--disp);text-transform:uppercase;letter-spacing:.03em;display:block}
.irow span{font-size:.85rem;color:rgba(241,234,223,.7)}
.info-card .btn{width:100%;justify-content:center;margin-top:1.4rem}

/* ============ 15. FOOTER ============ */
footer{background:var(--ink);color:var(--bone);padding:4.5rem 0 2rem;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot-brand p{color:rgba(241,234,223,.65);max-width:34ch;margin:1rem 0 1.4rem;font-size:.92rem}
.socials{display:flex;gap:.7rem}
.socials a{width:42px;height:42px;border:2px solid var(--line-l);display:grid;place-items:center;transition:.2s}
.socials a svg{width:19px;height:19px;stroke:var(--bone);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.socials a:hover{background:var(--amber);border-color:var(--amber);transform:translateY(-3px)}
.socials a:hover svg{stroke:var(--ink)}
footer h4{font:700 .66rem var(--mono);letter-spacing:.22em;color:var(--amber);text-transform:uppercase;margin-bottom:1.1rem}
.flinks{list-style:none}
.flinks a{display:inline-block;color:rgba(241,234,223,.75);text-decoration:none;padding:.28rem 0;font-size:.92rem;transition:.2s}
.flinks a:hover{color:var(--amber);transform:translateX(6px)}
.foot-word{font:800 clamp(5rem,19vw,15rem)/0.85 var(--disp);text-align:center;color:transparent;-webkit-text-stroke:1px rgba(241,234,223,.13);user-select:none;margin-top:3rem;letter-spacing:.02em}
.foot-bar{border-top:1px solid var(--line-l);margin-top:1.5rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:400 .6rem var(--mono);letter-spacing:.14em;color:rgba(241,234,223,.5);text-transform:uppercase}

/* ============ 16. FLOTANTES ============ */
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25d366;border:2px solid var(--ink);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);z-index:900;transition:transform .2s}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #25d366;animation:pulse 2s infinite}
@keyframes pulse{to{transform:scale(1.55);opacity:0}}
.to-top{position:fixed;right:29px;bottom:96px;width:44px;height:44px;background:var(--ink);color:var(--amber);border:2px solid var(--amber);display:grid;place-items:center;z-index:890;font-size:1.15rem;cursor:pointer;opacity:0;pointer-events:none;transition:.25s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--amber);color:var(--ink)}

/* ============ 17. RESPONSIVE ============ */
@media(max-width:1024px){
  .grain{display:none} /* ✅ BLINDAJE MÓVIL: evita glitch de pantalla blanca */
  .hero-inner{grid-template-columns:1fr}
  .hero-plan{max-width:560px;margin:1rem auto 0}
  .pj-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:2.5rem 2rem}
  .steps::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat{border-top:1px solid var(--line-l)}
  .stat:nth-child(-n+2){border-top:0}
}
@media(max-width:960px){
  .nav-links,.nav .nav-cta{display:none}
  .burger{display:block}
}
@media(max-width:760px){
  .hero{padding-top:8rem}
  .hero-ruler{display:none}
  .pj-grid{grid-template-columns:1fr}
  .pj.w2{grid-column:auto}
  .pj.w2 .pj-art{aspect-ratio:4/3}
  .svc-head{grid-template-columns:44px 1fr 40px}
  .svc-tags{display:none}
  .svc-body-in{padding-left:.9rem}
  .mats{flex-direction:column}
  .mat{min-height:170px}
  .contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .shead{display:block}
  .shead p{margin-top:1rem}
  .cta .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-bottom{flex-direction:column;gap:.6rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .bp .d{stroke-dasharray:none;stroke-dashoffset:0}
  .bp .f{opacity:1}
}

/* ============ 18. LIGHTBOX (visor de fotos) ============ */
.pj{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:3000;background:rgba(15,12,9,.95);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:1.2rem}
.lb.open{opacity:1;visibility:visible}
.lb-fig{max-width:min(1100px,94vw);display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0}
.lb-img{max-width:100%;max-height:72vh;object-fit:contain;border:2px solid var(--bone);box-shadow:0 30px 80px rgba(0,0,0,.6);background:#0d0b09;opacity:0;transform:scale(.97);transition:opacity .25s ease,transform .3s ease}
.lb.open .lb-img{transform:scale(1)}
.lb-img.show{opacity:1}
.lb-cap{text-align:center;color:var(--bone);max-width:60ch}
.lb-cat{display:inline-block;background:var(--amber);color:var(--ink);border:1.5px solid var(--ink);padding:.2rem .55rem;font:700 .56rem var(--mono);letter-spacing:.14em;margin-bottom:.5rem}
.lb-title{display:block;font:700 clamp(1.05rem,2.4vw,1.4rem) var(--disp);text-transform:uppercase;line-height:1.2}
.lb-meta{display:block;font:400 .66rem var(--mono);letter-spacing:.1em;color:rgba(241,234,223,.72);margin-top:.35rem;text-transform:uppercase}
.lb-count{position:absolute;top:1.3rem;left:1.5rem;font:700 .74rem var(--mono);letter-spacing:.18em;color:var(--amber)}
.lb-close{position:absolute;top:1rem;right:1.2rem;width:48px;height:48px;border:2px solid var(--bone);background:transparent;color:var(--bone);font-size:1.25rem;cursor:pointer;transition:.2s;z-index:2;display:grid;place-items:center;line-height:1}
.lb-close:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:2px solid var(--bone);background:rgba(24,19,16,.45);color:var(--bone);font-size:2rem;line-height:1;cursor:pointer;transition:.2s;display:grid;place-items:center;z-index:2}
.lb-prev{left:1.1rem}
.lb-next{right:1.1rem}
.lb-prev:hover,.lb-next:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
@media(max-width:640px){
  .lb{padding:.6rem}
  .lb-prev,.lb-next{width:42px;height:42px;font-size:1.5rem;top:auto;bottom:1rem;transform:none}
  .lb-prev{left:1rem}.lb-next{right:1rem}
  .lb-img{max-height:60vh}
  .lb-cap{margin-bottom:3.4rem}
}

/* ============ 19. HERO SLIDER (plano ↔ cocina terminada) ============ */
.hero-slider{position:relative;aspect-ratio:13/10;overflow:hidden;border:1px solid rgba(241,234,223,.2);box-shadow:0 34px 70px rgba(0,0,0,.5);background:#2b343b;transform:rotate(1.3deg);transition:transform .4s}
.hero-plan:hover .hero-slider{transform:rotate(0deg)}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-slider .slide.active{opacity:1}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 6s ease}
.hero-slider .slide.active img{transform:scale(1.13)}
.slide-tag{position:absolute;left:14px;bottom:14px;background:var(--ink);color:var(--amber);border:1.5px solid var(--amber);padding:.4rem .7rem;font:700 .6rem var(--mono);letter-spacing:.16em;text-transform:uppercase;z-index:2}
.slider-dots{position:absolute;right:14px;bottom:16px;display:flex;gap:.5rem;z-index:3}
.sdot{width:10px;height:10px;border:2px solid var(--bone);background:transparent;cursor:pointer;padding:0;transition:.2s;border-radius:50%}
.sdot.active{background:var(--amber);border-color:var(--amber)}

/* ============ ARREGLO SLIDER EN MÓVIL ============ */
@media(max-width:760px){
  .hero-slider {
    transform: rotate(0deg) !important; /* Endereza para que no se corte */
    box-shadow: 0 15px 30px rgba(0,0,0,.4); /* Sombra más suave para móvil */
    min-height: 260px; /* Altura de respaldo por si el navegador no soporta aspect-ratio */
  }
  .hero-plan {
    margin-top: 2rem;
  }
}