/* Zunika · landing
   Paleta de marca: grafito, cobalto y plata. Tipografías: Jost (títulos, cercana a Futura) y Barlow (texto, cercana a DIN). */
:root{
  --graphite:#343448; --graphite-deep:#272739; --cobalt:#0E4CA1; --cobalt-deep:#0A3A7D; --sky:#5A98F2; --silver:#C5C8CF;
  --paper:#FFFFFF; --tint:#F0F2F6; --ink:#232334; --muted:#505468; --line:#D6D9E1;
  --f-head:"Jost","Futura","Century Gothic","Trebuchet MS",sans-serif;
  --f-body:"Barlow","DIN Alternate",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --pad:clamp(64px,8vw,128px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
p,h1,h2,h3,ul,ol,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--f-head);font-weight:500;letter-spacing:-.012em}
h1{line-height:1.02}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.06;max-width:18ch;color:var(--graphite)}
h3{font-size:1.35rem;line-height:1.2}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cobalt);color:#fff;font-weight:600;padding:.7em 1.1em;text-decoration:none;border-radius:8px}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.dark :focus-visible{outline-color:#fff}

/* Destello: el motivo de la marca, usado como viñeta y como acento */
.sp{width:1em;height:1em;flex:none;fill:currentColor}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;max-width:56ch;margin-top:22px}
.muted{color:var(--muted)}
.dark .muted{color:var(--silver)}

/* ---------- Secciones ---------- */
.band{padding-block:var(--pad);background:var(--paper)}
.band.tint{background:var(--tint)}
.band.dark,.hero{color:#fff}
.band.dark h2,.band.dark h3{color:#fff}
.cobalt{background:var(--cobalt)}
.graphite{background:var(--graphite)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.75em 1.6em;font:600 1.05rem/1.1 var(--f-body);text-decoration:none;border:2px solid transparent;border-radius:999px;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-lg{min-height:60px;font-size:1.1rem;padding-inline:1.6em}
.btn-primary,.btn-wa{background:var(--cobalt);color:#fff}
.btn-primary:hover,.btn-wa:hover{background:var(--cobalt-deep)}
.btn-light{background:#fff;color:var(--graphite)}
.btn-light:hover{background:var(--silver)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:#fff;color:var(--graphite);border-color:#fff}
.btn-outline-dark{border-color:var(--graphite);color:var(--graphite)}

/* ---------- Navegación ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:78px}
.brand{display:block;flex:none}
.brand img{height:54px;width:auto}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(18px,2.4vw,36px)}
.nav ul a{font-weight:500;color:var(--graphite);text-decoration:none;padding:.4em 0;background:linear-gradient(var(--cobalt),var(--cobalt)) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease),color .2s ease}
.nav ul a:hover,.nav ul a.is-active{background-size:100% 2px}
.nav ul a.is-active{color:var(--cobalt)}
.nav .btn{min-height:46px;padding:.5em 1.3em;font-size:1rem}
.menu-btn{display:none;min-height:46px;padding:.5em 1.1em;font:600 1rem var(--f-body);color:var(--graphite);background:none;border:2px solid var(--graphite);border-radius:999px;cursor:pointer}
html[data-antes-despues="off"] [data-ba]{display:none}

/* ---------- Hero: vidrio empañado que se limpia ---------- */
.hero{background:var(--graphite-deep);padding-block:clamp(56px,8vw,120px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.6rem);font-weight:500}
.hero h1 .l{display:block}
.hero h1 .hl{color:var(--sky)}
.hero .lead{color:#E4E6EB;margin-top:28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero .micro{margin-top:18px;color:var(--silver);font-size:.98rem}
.hero-art{display:grid;justify-items:center;gap:16px}
.glass{position:relative;width:min(100%,540px);aspect-ratio:1/1;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='19' fill='rgba(255,255,255,.08)' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 22 22,crosshair}
.glass .glint{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.glint .star{transform-box:fill-box;transform-origin:center;animation:enter 1.1s var(--ease) .2s both}
.glint .star.s{animation-delay:.45s}
@keyframes enter{from{opacity:0;transform:scale(.6) rotate(-20deg)}to{opacity:1;transform:none}}
.glint .spec{opacity:.5}
.glint .sweep{animation:sweep 8s ease-in-out 3s infinite;transform:translateX(-40px)}
.glint .sweep2{transform:translateX(-40px)}
@keyframes sweep{0%{transform:translateX(-40px)}16%,100%{transform:translateX(190px)}}
.fog{position:absolute;inset:-6%;width:112%;height:112%;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}
.wipe-hint{display:inline-flex;align-items:center;gap:8px;color:var(--silver);font-size:.95rem;transition:opacity .8s ease}
.wipe-hint .sp{color:var(--sky);width:.9em;height:.9em}
.wiped .wipe-hint{opacity:0}
html:not(.js) .fog,html:not(.js) .wipe-hint{display:none}

/* ---------- Franja de confianza ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust li{display:flex;gap:12px;align-items:flex-start;padding:28px clamp(14px,2vw,28px);font:500 1.08rem/1.35 var(--f-body);color:var(--graphite)}
.trust li + li{border-left:1px solid var(--line)}
.trust li:first-child{padding-left:0}
.trust .sp{color:var(--cobalt);width:1.4em;height:1.4em;margin-top:.05em}

/* ---------- Método ---------- */
.method .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.for-panel{position:relative;overflow:hidden;background:var(--graphite);border-radius:6px;padding:clamp(28px,3.4vw,48px);min-height:100%}
.for-panel .sp-bg{position:absolute;right:-18%;bottom:-14%;width:78%;height:auto;fill:var(--cobalt);opacity:.9;transition:transform .9s var(--ease)}
.for-panel:hover .sp-bg{transform:rotate(45deg)}
.for-panel .for-title{position:relative;font:500 1.2rem var(--f-head);color:var(--silver);margin-bottom:14px}
.spaces{position:relative}
.spaces button{display:flex;align-items:center;gap:0;width:100%;padding:.28em 0;text-align:left;background:none;border:0;color:#fff;font:500 clamp(1.6rem,2.6vw,2.3rem)/1.15 var(--f-head);letter-spacing:-.01em;cursor:pointer;opacity:.62;transition:opacity .25s ease,gap .3s var(--ease)}
.spaces .sp{width:0;height:.55em;fill:var(--sky);opacity:0;transition:width .3s var(--ease),opacity .25s ease}
.spaces button:hover,.spaces button:focus-visible{opacity:1;gap:.35em}
.spaces button:hover .sp,.spaces button:focus-visible .sp{width:.55em;opacity:1}
html:not(.js) .spaces button{opacity:1;cursor:default}
.for-hint{position:relative;margin-top:20px;color:var(--silver);font-size:.98rem}
html:not(.js) .for-hint{display:none}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin-top:34px}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);font-weight:500;color:var(--graphite)}
.checks .sp{color:var(--cobalt);margin-top:.28em}
.cta-row{margin-top:40px}

/* ---------- Diferenciadores ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,5vw,64px);border-top:1px solid rgba(255,255,255,.35)}
.diff-col{padding:32px clamp(16px,2.4vw,36px) 8px}
.diff-col + .diff-col{border-left:1px solid rgba(255,255,255,.35)}
.diff-col:first-child{padding-left:0}
.diff-col h3{font-size:1.6rem;margin-bottom:20px}
.diff-col li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:#EAF0FA}
.diff-col .sp{margin-top:.3em;color:var(--silver)}
.diff-cta{margin-top:clamp(28px,4vw,48px)}

/* ---------- Antes / después ---------- */
.ba-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 64px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.ba-head .lead{margin-top:0}
.ba{--pos:50%;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#222;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba .before,.ba .after{position:absolute;inset:0}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .before img{filter:grayscale(.55) sepia(.45) contrast(.78) brightness(.62)}
.ba .tagl{position:absolute;bottom:16px;z-index:2;background:var(--graphite);color:#fff;font:500 1rem var(--f-body);padding:.35em .9em;border-radius:999px}
.ba .tagl.a{right:16px;background:#fff;color:var(--graphite)}
.ba .tagl.b{left:16px}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:3}
.ba .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff}
.ba .knob{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--cobalt);border:3px solid #fff;display:grid;place-items:center;color:#fff;transition:transform .15s ease}
.ba:hover .knob,.ba:focus-visible .knob,.ba.drag .knob{transform:scale(1.1)}
.ba .knob svg{width:26px;height:26px}
.ba:focus-visible{outline-offset:6px}
.ba-note{margin-top:34px}

/* ---------- Servicios: el color barre la fila como un trapo ---------- */
.svc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.svc-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-photos img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--line)}
.svc-photos .p2{margin-top:clamp(0px,3vw,40px)}
.svc-list{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--graphite)}
.svc-row{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--graphite);font:500 clamp(1.4rem,2.9vw,2.4rem)/1.12 var(--f-head);letter-spacing:-.01em;transition:color .3s ease,padding .45s var(--ease)}
.svc-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cobalt);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.svc-row:hover,.svc-row:focus-visible{color:#fff;padding-inline:clamp(14px,2vw,28px)}
.svc-row:hover::before,.svc-row:focus-visible::before{transform:scaleX(1)}
.svc-row:focus-visible{outline-offset:2px}
.svc-row.more{color:var(--cobalt)}
.svc-row.more:hover,.svc-row.more:focus-visible{color:#fff}
.svc-row .go{display:inline-flex;align-items:center;gap:14px;flex:none;font:600 1rem var(--f-body);letter-spacing:0}
.svc-row .go i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;transition:background-color .3s ease,color .3s ease,transform .5s var(--ease)}
.svc-row .go svg{width:20px;height:20px}
.svc-row:hover .go i,.svc-row:focus-visible .go i{background:#fff;border-color:#fff;color:var(--cobalt);transform:rotate(90deg)}
.also{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);gap:16px 40px}
.also h3{color:var(--graphite)}
.also ul{display:flex;flex-wrap:wrap;gap:10px 32px}
.also li{display:flex;gap:10px;align-items:center}
.also .sp{color:var(--cobalt);width:.9em;height:.9em}
.also a{font-weight:500;color:var(--graphite);text-underline-offset:4px}
.also a:hover{color:var(--cobalt)}

/* ---------- Clientes ---------- */
.client-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,56px)}
.client-logos li{position:relative;overflow:hidden;aspect-ratio:4/3;padding:clamp(8px,1.2vw,14px);border-radius:6px;background:#fff}
.client-logos li:nth-child(2){background:#152A3F}
.client-logos li:nth-child(4){background:#A71821;padding:0}
.client-logos img{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;height:100%;padding:inherit;object-fit:contain}
.client-logos li:nth-child(4) img{object-fit:cover;object-position:center}
.roll{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:clamp(32px,4vw,52px);padding-top:28px;border-top:1px solid rgba(255,255,255,.25)}
.roll li{display:flex;gap:10px;align-items:center;font-weight:500;color:#EDEFF4}
.roll .sp{color:var(--silver);width:.85em;height:.85em}
.clients-foot{margin-top:clamp(32px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ---------- Cotizador ---------- */
.quote-head{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.quote-head h2{max-width:20ch}
.quote-spark{width:clamp(72px,10vw,140px);height:auto;flex:none;fill:var(--cobalt);overflow:visible}
.contact{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px}
.contact a{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--graphite);text-underline-offset:4px}
.contact svg{width:1.3em;height:1.3em;color:var(--cobalt)}
.panel{margin-top:clamp(32px,4vw,56px);background:var(--tint);border-radius:10px;padding:clamp(22px,3.4vw,48px)}
.qsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:clamp(26px,3.4vw,40px)}
.qsteps li{font-weight:600;font-size:.95rem;color:var(--muted);transition:color .3s ease}
.qsteps li::before{content:"";display:block;height:4px;margin-bottom:10px;border-radius:4px;background:var(--line) linear-gradient(var(--cobalt),var(--cobalt)) 0 0/0 100% no-repeat;transition:background-size .5s var(--ease)}
.qsteps li.done{color:var(--graphite)}
.qsteps li.done::before{background-size:100% 100%}
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px clamp(28px,5vw,72px)}
.panel fieldset{border:0;padding:0;min-width:0}
.panel legend{padding:0}
.panel legend h3{color:var(--graphite)}
.hint{color:var(--muted);margin:4px 0 16px;font-size:.98rem}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:.55em;min-height:48px;padding:.5em 1.1em;font:500 1.02rem/1.15 var(--f-body);color:var(--graphite);background:#fff;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.opt:hover{border-color:var(--graphite)}
.opt .sp{width:0;margin-left:-.55em;opacity:0;transition:width .15s ease,margin .15s ease,opacity .15s ease}
.opt[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.opt[aria-pressed="true"] .sp{width:1em;margin-left:0;opacity:1}
.opt.flash{animation:flash 1.2s ease-out 1}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(14,76,161,.5)}100%{box-shadow:0 0 0 14px rgba(14,76,161,0)}}
.send{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px clamp(28px,5vw,72px);margin-top:clamp(28px,4vw,48px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.fields h3{margin-bottom:16px;color:var(--graphite)}
.fields label{display:block;margin-bottom:14px;font-weight:500;color:var(--graphite)}
.fields input,.fields textarea{display:block;width:100%;margin-top:6px;padding:.7em .9em;font:400 1.02rem var(--f-body);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:8px}
.fields textarea{min-height:110px;resize:vertical}
.out{display:grid;justify-items:start;align-content:start;gap:14px}
.out-label{font-weight:500;color:var(--muted)}
.phone{width:min(100%,400px);padding:9px;border-radius:30px;background:var(--graphite);box-shadow:0 24px 40px -22px rgba(20,20,40,.55)}
.ph-top{display:flex;align-items:center;gap:12px;padding:12px 14px 13px;color:#fff}
.ph-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cobalt)}
.ph-av .sp{width:18px;height:18px;fill:#fff}
.ph-top b{display:block;font-weight:600;line-height:1.2}
.ph-top small{color:var(--silver);font-size:.85rem}
.ph-chat{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;min-height:200px;padding:22px 14px 24px;border-radius:22px;background:#E8ECF3 radial-gradient(rgba(14,76,161,.10) 1px,transparent 1.5px) 0 0/16px 16px}
.ph-msg{max-width:90%;padding:10px 12px 6px;border-radius:12px 12px 3px 12px;background:#DCE8FB;color:var(--ink);box-shadow:0 1px 1px rgba(20,20,40,.1);overflow-wrap:anywhere}
.ph-msg span{display:block}
.ph-meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:4px;color:var(--muted);font-size:.75rem}
.ph-meta svg{width:17px;height:11px;color:var(--cobalt)}
.btn-wa.ready{animation:flash 1.4s ease-out 1}
.send-note{color:var(--muted);font-size:.95rem}
.send-note a{color:var(--cobalt);font-weight:600;text-underline-offset:3px}

/* ---------- Footer ---------- */
.foot{background:var(--graphite-deep);padding-block:clamp(48px,6vw,80px) clamp(40px,5vw,64px)}
.foot .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 64px;align-items:start}
.foot-logo{width:clamp(200px,22vw,290px);height:auto}
.foot p{color:var(--silver);max-width:36ch}
.foot .links{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.2)}
.foot .links a{text-underline-offset:4px}
.foot .links a,.foot .links span{color:#E4E6EB;font-weight:500}

/* ---------- Botón flotante (aparece al salir del hero) y barra móvil ---------- */
.fab{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:.7em 1.4em .7em 1.15em;background:var(--cobalt);color:#fff;font-weight:600;text-decoration:none;border:2px solid #fff;border-radius:999px;box-shadow:0 6px 20px rgba(20,20,40,.32);transition:background-color .18s ease,opacity .35s ease,transform .35s var(--ease),visibility .35s}
.fab:hover{background:var(--cobalt-deep)}
.fab svg{width:26px;height:26px}
.js .fab:not(.show){opacity:0;visibility:hidden;transform:translateY(18px)}
.mbar{display:none}

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .nav nav{display:none}
  .menu-btn{display:inline-flex;align-items:center;margin-left:auto}
  .nav .btn{display:none}
  .nav.open nav{display:block;position:absolute;left:0;right:0;top:100%;margin:0;background:#fff;border-bottom:1px solid var(--line);padding:12px var(--gutter) 20px}
  .nav.open ul{display:grid;gap:2px}
  .nav.open ul a{display:block;font-size:1.25rem;padding:.6em 0;background:none}
  .hero .wrap,.method .wrap,.svc-top,.ba-head,.steps,.send{grid-template-columns:1fr}
  .hero-art{order:-1}
  .glass{width:min(72%,320px)}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust li:nth-child(3){border-left:0;padding-left:0}
  .trust li:nth-child(n+3){border-top:1px solid var(--line)}
  .diff-grid{grid-template-columns:1fr}
  .diff-col,.diff-col:first-child{padding-inline:0}
  .diff-col + .diff-col{border-left:0;border-top:1px solid rgba(255,255,255,.35)}
  .also{grid-template-columns:1fr}
  .fab{display:none}
  .mbar{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
  .mbar .btn{min-height:50px;white-space:nowrap;padding-inline:1.1em;font-size:1rem}
  body{padding-bottom:72px}
}
@media (max-width:640px){
  .checks{grid-template-columns:1fr}
  .client-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-row .go > span{display:none}
  .svc-photos .p2{margin-top:0}
  .foot .wrap{grid-template-columns:1fr}
  .quote-spark{display:none}
  .qsteps li{font-size:.85rem}
}
@media (max-width:440px){.mbar .long{display:none}}
@media (max-width:380px){.trust ul{grid-template-columns:1fr}.trust li,.trust li:nth-child(n){border-left:0;padding-left:0}.trust li + li{border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glint .star{animation:none}
  .glint .sweep{animation:none;opacity:0}
  .fog,.wipe-hint{display:none}
  .glass{cursor:default}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Aviso de privacidad (.legal) ---------- */
.legal{padding-top:clamp(40px,6vw,88px)}
.legal h1{font-size:clamp(2.4rem,6vw,4.6rem);color:var(--graphite);overflow-wrap:anywhere}
.legal-date{margin-top:20px;color:var(--muted);font-weight:500}
.legal-body{max-width:70ch;margin-top:clamp(28px,4vw,48px)}
.legal-body h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:2em 0 .5em;max-width:none}
.legal-body h2:first-child{margin-top:0}
.legal-body p + p{margin-top:1em}
.legal-body a{color:var(--cobalt);font-weight:600;text-underline-offset:4px;overflow-wrap:anywhere}
.legal-back{font-weight:600;color:var(--cobalt);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:380px){.legal-back{font-size:.92rem}}

/* Campos pendientes en el aviso de privacidad (borrar la clase al llenarlos) */
.ph{background:#FFE98A;color:#232334;padding:.05em .3em;border-radius:3px;font-weight:600}