@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#FFFFFF;
  --bg-2:#F4F5F2;      /* cal */
  --surface:#FFFFFF;
  --ink:#1E2226;       /* grafito */
  --muted:#5D646B;
  --line:#E3E5E0;
  --accent:#2450A6;    /* azul plano */
  --accent-soft:#EAF0FA;
  --on-accent:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121417; --bg-2:#181B1F; --surface:#1C1F23; --ink:#ECEDEA; --muted:#A3A9AF;
    --line:#2A2E33; --accent:#86A8EC; --accent-soft:#1D2738; --on-accent:#0F1A2E;
  }
}
:root[data-theme="dark"]{
  --bg:#121417; --bg-2:#181B1F; --surface:#1C1F23; --ink:#ECEDEA; --muted:#A3A9AF;
  --line:#2A2E33; --accent:#86A8EC; --accent-soft:#1D2738; --on-accent:#0F1A2E;
}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); scroll-behavior:smooth;}
*{margin:0; padding:0; box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-weight:600; letter-spacing:-0.02em; line-height:1.12;}
a{color:inherit;}
img,svg{max-width:100%;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; max-width:1140px; margin:0 auto; padding:0 28px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none; letter-spacing:-0.01em;}
.brand .logo-mark{width:34px; height:34px; flex-shrink:0;}
.wordmark{font-size:19px; font-weight:400; letter-spacing:-0.03em; color:var(--muted);}
.wordmark b{font-weight:700; color:var(--ink);}
@media(max-width:400px){.wordmark{font-size:17px;}}
.nav-links{display:flex; gap:32px; font-size:15px; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--muted); transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;}
.menu-btn{display:none; background:none; border:none; color:var(--ink); cursor:pointer; width:40px; height:40px; align-items:center; justify-content:center;}
.menu-btn svg{width:24px; height:24px;}
@media(max-width:820px){
  .nav-links{
    position:fixed; left:0; right:0; top:calc(68px + env(safe-area-inset-top,0px));
    background:var(--bg); flex-direction:column; gap:0; padding:8px 28px 24px;
    border-bottom:1px solid var(--line); font-size:18px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink);}
  .nav-links.open{opacity:1; transform:none; pointer-events:auto;}
  .nav-cta{display:none;}
  .menu-btn{display:flex;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:background .15s, border-color .15s;}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 88%, var(--ink));}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface);}
.btn-ghost:hover{border-color:var(--ink);}

/* ---------- hero ---------- */
.hero{padding:72px 0 88px;}
.hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,64px); max-width:13ch;}
.hero .lead{margin-top:24px; font-size:18px; color:var(--muted); max-width:44ch;}
.hero-actions{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap;}
.hero-phone{margin-top:22px; font-size:15px; color:var(--muted);}
.hero-phone a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line);}
.hero-phone a:hover{border-color:var(--ink);}
.photo{position:relative; border-radius:14px; overflow:hidden; background:#EEF0EC;}
.service .photo{border-radius:10px;}
.photo .scene{border-radius:0;}
.photo img, .compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.compare .layer{position:absolute; inset:0;}
.scene{border-radius:14px; overflow:hidden; display:block; width:100%; height:auto; background:#EEF0EC;}
@media(max-width:880px){
  .hero{padding:40px 0 64px;}
  .hero-grid{grid-template-columns:1fr; gap:36px;}
}

/* ---------- common section ---------- */
.section{padding:96px 0;}
.section.alt{background:var(--bg-2);}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.6vw,42px); max-width:16ch;}
.section-head p{color:var(--muted); max-width:44ch; justify-self:end;}
@media(max-width:820px){
  .section{padding:72px 0;}
  .section-head{grid-template-columns:1fr; gap:14px; margin-bottom:36px;}
  .section-head p{justify-self:start;}
}

/* ---------- services ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.service .scene{border-radius:10px;}
.service h3{margin-top:22px; font-size:22px;}
.service p{margin-top:10px; color:var(--muted); font-size:15.5px;}
@media(max-width:880px){.services{grid-template-columns:1fr; gap:44px;}}

/* ---------- before / after ---------- */
.compare{position:relative; aspect-ratio:1619/971; max-width:900px; margin:0 auto; border-radius:14px; overflow:hidden; --pos:50%; user-select:none; background:#EEF0EC;}
.compare svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.compare .after{clip-path:inset(0 0 0 var(--pos));}
.compare .pill{z-index:2;}
.compare .divider{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#FFFFFF; pointer-events:none;}
.compare .knob{position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 10px rgba(20,30,50,.25); display:flex; align-items:center; justify-content:center;}
.compare .knob svg{position:static; width:22px; height:22px;}
.compare input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0;}
.compare input:focus-visible ~ .divider .knob{outline:2px solid var(--accent); outline-offset:3px;}
.pill{position:absolute; top:16px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(255,255,255,.92); color:#1E2226; pointer-events:none;}
.pill.l{left:16px;} .pill.r{right:16px;}
.compare-note{max-width:900px; margin:12px auto 0; font-size:14px; color:var(--muted);}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; border-top:1px solid var(--accent);}
.step{position:relative; padding:28px 28px 0 0;}
.step::before{content:""; position:absolute; top:-7px; left:0; width:1px; height:13px; background:var(--accent);}
.step:last-child::after{content:""; position:absolute; top:-7px; right:0; width:1px; height:13px; background:var(--accent);}
.step .n{display:inline-flex; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px;}
.step h3{margin-top:18px; font-size:19px;}
.step p{margin-top:8px; color:var(--muted); font-size:15px; max-width:26ch;}
@media(max-width:820px){
  .steps{grid-template-columns:1fr; border-top:none; border-left:1px solid var(--accent); padding-left:24px; gap:32px;}
  .step{padding:0;}
  .step::before{top:6px; left:-31px; width:13px; height:1px;}
  .step:last-child::after{display:none;}
}

/* ---------- why ---------- */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.why-grid > *{min-width:0;}
.why h2{font-size:clamp(28px,3.6vw,42px);}
.checks{list-style:none; margin-top:32px; display:flex; flex-direction:column;}
.checks li{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); font-size:16px;}
.checks li:last-child{border-bottom:1px solid var(--line);}
.checks svg{width:22px; height:22px; flex-shrink:0; margin-top:2px; color:var(--accent);}
.reviews{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:32px 32px 22px; min-width:0;}
.rev-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; gap:0;}
.rev-track::-webkit-scrollbar{display:none;}
.rev{flex:0 0 100%; scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; padding-right:4px;}
.stars{display:flex; gap:3px;}
.stars svg{width:20px; height:20px;}
.stars .on{fill:#F2A93B;} .stars .off{fill:var(--line);}
.rev blockquote{margin-top:18px; font-size:20px; line-height:1.45; letter-spacing:-0.01em; flex:1;}
.rev .who{margin-top:24px; display:flex; align-items:center; gap:14px; font-size:14px; color:var(--muted);}
.rev .who strong{display:block; color:var(--ink); font-weight:600; font-size:15px;}
.avatar{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; font-size:16px; letter-spacing:.02em; position:relative; overflow:hidden;}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.av1{background:#E3ECFB; color:#2450A6;} .av2{background:#FCEBD2; color:#9A5B06;} .av3{background:#E2EEDF; color:#3F6B3A;} .av4{background:#EFE3F3; color:#7A3E8C;}
.rev-controls{margin-top:22px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.rev-dots{display:flex; gap:8px;}
.rev-dots button{width:8px; height:8px; border-radius:50%; border:none; padding:0; background:var(--line); cursor:pointer; transition:background .15s, width .15s;}
.rev-dots button[aria-current="true"]{background:var(--accent); width:22px; border-radius:4px;}
.rev-nav{display:flex; gap:8px;}
.rev-nav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s;}
.rev-nav button:hover{border-color:var(--ink);}
.rev-nav button:disabled{opacity:.35; cursor:default; border-color:var(--line);}
.rev-nav svg{width:18px; height:18px;}
@media(max-width:520px){.reviews{padding:24px 22px 18px;} .rev blockquote{font-size:18px;}}
@media(max-width:880px){.why-grid{grid-template-columns:1fr; gap:40px;}}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;}
.contact h2{font-size:clamp(28px,3.6vw,42px);}
.contact .lead{margin-top:16px; color:var(--muted); max-width:40ch;}
.info{margin-top:36px; display:flex; flex-direction:column; gap:0;}
.info a, .info div{display:flex; gap:16px; align-items:center; padding:16px 0; border-top:1px solid var(--line); text-decoration:none;}
.info > :last-child{border-bottom:1px solid var(--line);}
.info .ico{width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info .ico svg{width:19px; height:19px;}
.info small{display:block; font-size:13px; color:var(--muted);}
.info span{font-weight:600;}
.contact-actions{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap;}
.btn svg{width:20px; height:20px; margin-right:9px; flex-shrink:0;}
.map-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px;}
@media(min-width:881px){
  .contact-grid{align-items:stretch;}
  .map-card{display:flex; flex-direction:column; min-height:0; height:100%;}
  .map-card .map{flex:1 1 0; min-height:0; height:100%;}
}
.map{display:block; width:100%; height:auto; border-radius:9px; background:#CADCEF;}
.map .town circle{fill:#2A2F35; stroke:#FFFFFF; stroke-width:2; transition:r .2s, fill .2s;}
.map .town text{font-family:'Instrument Sans', Arial, sans-serif; font-size:13px; fill:#2A2F35; font-weight:500; paint-order:stroke; stroke:#F7F7F4; stroke-width:3px; stroke-linejoin:round; transition:fill .2s;}
.map .town.sea text{stroke:#CADCEF;}
.map .town.capital circle{fill:#2450A6; r:8;}
.map .town.capital text{font-size:16px; font-weight:700; fill:#2450A6;}
.map[data-active] .town circle{fill:#A7ABAF;}
.map[data-active] .town text{fill:#8B9096;}
.map[data-active="barcelona"] .town[data-z="barcelona"] circle,
.map[data-active="baix"] .town[data-z="baix"] circle,
.map[data-active="valles"] .town[data-z="valles"] circle,
.map[data-active="maresme"] .town[data-z="maresme"] circle{fill:#2450A6; r:7;}
.map[data-active="barcelona"] .town[data-z="barcelona"] text,
.map[data-active="baix"] .town[data-z="baix"] text,
.map[data-active="valles"] .town[data-z="valles"] text,
.map[data-active="maresme"] .town[data-z="maresme"] text{fill:#1E2226; font-weight:700;}
.zones{display:flex; flex-wrap:wrap; gap:6px; padding:12px 2px 2px;}
.zone{font-family:inherit; font-size:13.5px; font-weight:500; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s, color .15s;}
.zone:hover{border-color:var(--ink);}
.zone[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.map-note{padding:10px 2px 2px; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px;}
.map-note i{display:inline-block; width:22px; height:12px; border-radius:3px; border:1.5px dashed #2450A6; background:rgba(36,80,166,.12); flex-shrink:0;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr; gap:40px;}}
@media(max-width:520px){.map .town text{font-size:15px;} .map .town.capital text{font-size:18px;} .map .comarca{display:none;}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:32px 0 40px; font-size:14px; color:var(--muted);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 32px;}
.foot-brand strong{display:block; color:var(--ink); font-weight:600; font-size:15px;}
.foot-meta{display:flex; flex-wrap:wrap; gap:10px 14px;}
.foot-item{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500;}
.foot-item svg{width:17px; height:17px; color:var(--accent); flex-shrink:0;}
.foot-item.ssl svg{color:#1E8E4E;}
.foot-copy{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:13px;}

/* ---------- whatsapp ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:60;
  width:56px; height:56px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18); text-decoration:none; transition:transform .15s ease;
}
.whatsapp-float:hover{transform:scale(1.06);}
.whatsapp-float svg{width:30px; height:30px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ajustes de publicación */
.menu-btn .i-close{display:none}
.info a span,.info p span{overflow-wrap:break-word}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.foot-legal a{color:var(--muted);font-size:13px;text-decoration:none}
.foot-legal a:hover{color:var(--accent);text-decoration:underline}
.foot-bottom{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.foot-bottom .foot-copy{margin:0;padding:0;border:0}
/* páginas legales y 404 */
.legal{max-width:760px;margin:0 auto;padding:48px 20px 72px}
.legal h1{font-size:clamp(28px,4vw,38px);line-height:1.15;margin:0 0 8px}
.legal h2{font-size:20px;margin:36px 0 10px}
.legal p,.legal li{color:var(--muted);line-height:1.65}
.legal a{color:var(--accent)}
.legal .upd{font-size:13px;margin-bottom:28px}
.legal-top{border-bottom:1px solid var(--line)}
.legal-top .nav{justify-content:space-between}
.back{font-weight:600;color:var(--accent);text-decoration:none}
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.nf h1{font-size:clamp(30px,5vw,44px);margin:0 0 10px}
.nf p{color:var(--muted);margin:0 0 24px}