/*
Theme Name: 9rètol — Nouretol
Theme URI: https://nouretol.com/
Author: Diseño web (Stitch + WordPress)
Description: Tema corporativo premium a medida para 9rètol (Nou Rètol, S.L.), rotulación y señalización industrial en Abrera (Barcelona). Paleta de marca, responsive, catalán/español.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: nouretol
*/

/* ============================================================
   9rètol — Design tokens
   ============================================================ */
:root{
  /* marca */
  --verd:#c5e425; --verd-2:#b4d40f; --verd-3:#9bb800; --verd-soft:#eef8bd; --verd-tint:#f4fadd;
  --blau:#2F6F95; --blau-2:#3f86b0; --blau-cel:#e7f1f9;
  --ink:#0b1f33;         /* texto/heros oscuros (navy profundo) */
  --ink-2:#12314a;
  --navy:#0D2337; --navy-2:#0F3B63;
  --text:#26313b; --muted:#5f7180; --muted-2:#8595a2;
  --line:#e6ebef; --line-2:#eef2f5;
  --paper:#ffffff; --paper-2:#f6f8f5; --paper-3:#eef3ee;
  --white:#fff;
  --avis:#860000;

  --radi:12px; --radi-sm:9px; --radi-lg:20px; --radi-xl:28px;
  --sh-1:0 1px 2px rgba(11,31,51,.06), 0 2px 8px rgba(11,31,51,.05);
  --sh-2:0 10px 30px -8px rgba(11,31,51,.16);
  --sh-3:0 30px 60px -18px rgba(11,31,51,.28);
  --sh-green:0 14px 30px -10px rgba(155,184,0,.55);

  --font:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Space Grotesk','Inter',var(--font);

  --wrap:1220px; --wrap-wide:1340px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--paper);
  font-size:17px;line-height:1.72;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--verd);color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--blau-2)}
:focus-visible{outline:3px solid var(--verd);outline-offset:2px;border-radius:4px}
/* Los overlays decorativos NUNCA deben capturar clics */
.hero::before,.hero::after,.strip::before,.cta-band::after,.page-hero::before,
.svc-card__media::after,.hero__frame::after,.site-footer::before{pointer-events:none}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;color:var(--ink);
  margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.35rem,1.4rem + 3.6vw,4.15rem);letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.95rem);letter-spacing:-.03em}
h3{font-size:1.16rem;letter-spacing:-.01em}
p{margin:0 0 1.1rem}

.container{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.container--wide{max-width:var(--wrap-wide)}
.section{padding:clamp(64px,5vw,116px) 0;position:relative}
.section--alt{background:var(--paper-2)}
.section--tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.center{text-align:center}

/* ---------- Eyebrow / section head ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:var(--blau)}
.kicker::before{content:"";width:26px;height:2px;background:var(--verd-2);border-radius:2px}
.center .kicker::before{display:none}
.section-head{max-width:760px;margin:0 auto clamp(38px,4vw,64px)}
.section-head.center{text-align:center}
.section-head p{color:var(--muted);font-size:1.08rem;margin:.7rem 0 0}
.accent-bar{width:64px;height:4px;background:linear-gradient(90deg,var(--verd),var(--verd-3));border-radius:100px;margin:16px 0 0}
.center .accent-bar,.section-head.center .accent-bar{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);
  font-weight:600;font-size:1rem;padding:15px 28px;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
  text-decoration:none;letter-spacing:-.01em;white-space:normal;text-align:center;max-width:100%;line-height:1.25}
.btn svg{width:18px;height:18px;flex:0 0 auto}
/* botons amb text llarg (CTA hero): forma de píndola suau i multilínia */
.btn--lg{border-radius:16px}
.btn--primary{background:linear-gradient(135deg,var(--verd),var(--verd-2));color:var(--ink);box-shadow:var(--sh-green)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(155,184,0,.7);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(11,31,51,.22)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.btn--light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.btn--light:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.btn--lg{padding:17px 34px;font-size:1.06rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:.3s var(--ease)}
.site-header.is-scrolled{background:rgba(255,255,255,.9);border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .3s var(--ease)}
.site-header.is-scrolled .site-header__inner{height:70px}
.brand{display:flex;align-items:center}
.brand-logo{height:56px;width:auto;display:block;transition:height .3s var(--ease)}
.site-header.is-scrolled .brand-logo{height:46px}
.main-nav>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav>ul>li>a{position:relative;color:var(--text);font-weight:500;padding:10px 15px;border-radius:100px;
  font-size:.97rem;letter-spacing:-.01em}
.main-nav>ul>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;background:var(--verd-2);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);border-radius:2px}
.main-nav>ul>li>a:hover{color:var(--ink)}
.main-nav>ul>li>a:hover::after,.main-nav .current-menu-item>a::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:16px}
.lang{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted-2);letter-spacing:.04em}
.lang a{color:var(--muted-2)}
.lang a:hover{color:var(--ink)}
.lang a.active{color:var(--ink)}
.phone-chip{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:600;padding:11px 20px;border-radius:100px;font-size:.95rem;
  transition:.2s var(--ease)}
.phone-chip:hover{background:var(--verd);color:var(--ink);transform:translateY(-1px)}
.phone-chip .ico{display:inline-flex;align-items:center}
.phone-chip svg{width:18px;height:18px}
.nav-extra{display:none}

/* ---------- Mega-menú de serveis ---------- */
.has-mega{position:static}
.main-nav .has-mega>a{display:inline-flex;align-items:center;gap:2px}
.mega-caret{transition:transform .2s var(--ease)}
.has-mega:hover .mega-caret{transform:rotate(180deg)}
.submenu-mobile{display:none}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:70}
.has-mega:hover>.mega,.has-mega:focus-within>.mega,.mega:hover{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:var(--wrap-wide);margin:0 auto;padding:46px 32px 42px;display:flex;gap:52px;align-items:flex-start}
.mega-col{flex:1 1 0;min-width:0}
.mega-cat{margin-bottom:30px}
.mega-cat:last-child{margin-bottom:0}
.mega-cat--cont{margin-top:40px}
.mega-cat--solo{margin-bottom:22px}
.mega-h{display:inline-block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.04rem;
  letter-spacing:-.01em;padding-bottom:11px;margin-bottom:15px;border-bottom:2px solid var(--verd)}
.mega-h:hover{color:var(--verd-3)}
.mega-cat--solo .mega-h{margin-bottom:0}
.mega-grp{margin:0 0 22px}
.mega-grp:last-child{margin-bottom:0}
.mega-sub{display:block;font-family:var(--display);font-weight:600;color:var(--blau);font-size:.73rem;
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.mega-sub:hover{color:var(--ink)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;color:var(--muted);font-size:.93rem;line-height:1.35;padding:6px 0;transition:.15s var(--ease)}
.mega li a:hover{color:var(--ink);padding-left:6px}

/* Índex de serveis (pàgina /serveis/) */
.svc-index{column-count:3;column-gap:34px}
.svc-index__cat{break-inside:avoid;margin:0 0 26px;border:1px solid var(--line);border-radius:var(--radi-lg);padding:22px 24px;background:#fff;box-shadow:var(--sh-1)}
.svc-index__h{display:block;font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--verd)}
.svc-index__h:hover{color:var(--verd-3)}
.svc-index ul{list-style:none;margin:0;padding:0}
.svc-index li{margin:5px 0}
.svc-index li a{color:var(--muted);font-size:.92rem;transition:.15s var(--ease)}
.svc-index li a:hover{color:var(--ink)}
.svc-index__sub{display:block;font-family:var(--display);font-weight:600;color:var(--blau)!important;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px}
.svc-index li ul{padding-left:12px;border-left:2px solid var(--line-2);margin:4px 0 10px}
@media(max-width:900px){.svc-index{column-count:2}}
@media(max-width:600px){.svc-index{column-count:1}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;border-radius:10px}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:3px;margin:5px 0;transition:.25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:radial-gradient(120% 120% at 85% 0%,#123a5c 0%,var(--ink) 55%);
  color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 90% at 80% 10%,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;right:-140px;top:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(197,228,37,.28),transparent 62%);filter:blur(10px)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,68px);
  align-items:center;padding:clamp(66px,7vw,120px) 0}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--verd);position:relative}
.hero .kicker{color:var(--verd)}
.hero .kicker::before{background:var(--verd)}
.hero p.lead{font-size:1.16rem;color:#cddbe7;max-width:54ch;margin-top:1.2rem}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12)}
.hero__trust span{display:inline-flex;align-items:center;gap:9px;color:#b9cad7;font-size:.93rem;font-weight:500}
.hero__trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verd);box-shadow:0 0 0 4px rgba(197,228,37,.18)}
.hero__media{position:relative}
.hero__frame{position:relative;border-radius:var(--radi-lg);overflow:hidden;box-shadow:var(--sh-3);
  aspect-ratio:4/3;background:#0a1826;border:1px solid rgba(255,255,255,.1)}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,20,32,.55))}
.hero__badge{position:absolute;left:-18px;bottom:26px;background:linear-gradient(135deg,var(--verd),var(--verd-2));
  color:var(--ink);font-family:var(--display);font-weight:700;padding:16px 22px;border-radius:16px;
  box-shadow:var(--sh-2);line-height:.95;z-index:2}
.hero__badge b{display:block;font-size:2.15rem}
.hero__badge small{font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.hero__chip{position:absolute;top:22px;right:-14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  color:var(--ink);font-weight:600;font-size:.82rem;padding:10px 16px;border-radius:100px;box-shadow:var(--sh-2);
  display:inline-flex;align-items:center;gap:8px;z-index:2}
.hero__chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verd-3)}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radi-lg);
  padding:34px 30px;transition:.3s var(--ease)}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.value-card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--verd-tint);color:var(--ink);margin-bottom:20px}
.value-card .ic svg{width:26px;height:26px}
.value-card h3{font-size:1.24rem;margin-bottom:.4em}
.value-card p{color:var(--muted);margin:0;font-size:.99rem}

/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radi-lg);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent;color:inherit}
.svc-card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--blau-cel)}
.svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.svc-card:hover .svc-card__media img{transform:scale(1.07)}
.svc-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,31,51,.42))}
.svc-card__media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);color:var(--blau);font-weight:700;font-size:2.6rem;
  background:linear-gradient(135deg,var(--blau-cel),#fff)}
.svc-card__index{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--display);font-weight:600;
  font-size:.74rem;color:#fff;background:rgba(11,31,51,.5);backdrop-filter:blur(4px);
  padding:5px 11px;border-radius:100px;letter-spacing:.05em}
.svc-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;
  border-top:3px solid var(--verd);position:relative}
.svc-card__body h3{color:var(--ink);font-size:1.08rem;margin-bottom:8px;letter-spacing:-.015em}
.svc-card__body p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}
.svc-card__more{margin-top:16px;font-family:var(--display);font-weight:600;color:var(--blau);font-size:.9rem;
  display:inline-flex;align-items:center;gap:7px;transition:gap .25s var(--ease)}
.svc-card:hover .svc-card__more{gap:12px;color:var(--verd-3)}

/* ---------- Stats strip ---------- */
.strip{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.strip::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(90% 120% at 10% 50%,#000,transparent 70%)}
.strip .container{position:relative}
.strip .strip__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,4vw,72px);align-items:center}
.strip h2{color:#fff}
.strip p{color:#c2d2df;max-width:56ch}
.strip .kicker{color:var(--verd)}.strip .kicker::before{background:var(--verd)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radi-lg);
  padding:26px 24px;transition:.3s var(--ease)}
.stat:hover{background:rgba(197,228,37,.08);border-color:rgba(197,228,37,.3)}
.stat b{display:block;font-family:var(--display);font-size:2.3rem;color:var(--verd);line-height:1;letter-spacing:-.03em}
.stat span{color:#b9cad7;font-size:.92rem;margin-top:8px;display:block}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,#0e2a44,#0b1f33)}
.cta-band::after{content:"";position:absolute;right:-100px;bottom:-160px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(197,228,37,.22),transparent 60%)}
.cta-band .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding-top:clamp(48px,5vw,74px);padding-bottom:clamp(48px,5vw,74px);flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0;max-width:20ch}

/* ---------- Content (páginas internas) ---------- */
.page-hero{position:relative;background:radial-gradient(120% 130% at 80% 0%,#123a5c,var(--ink));
  color:#fff;padding:clamp(66px,6vw,104px) 0 clamp(52px,5vw,72px);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(100% 100% at 80% 0%,#000,transparent 70%)}
.page-hero .container{position:relative}
.page-hero h1{color:#fff;margin:0}
.page-hero .kicker{color:var(--verd)}.page-hero .kicker::before{background:var(--verd)}
.page-hero p{color:#c2d2df;max-width:62ch;margin:1rem 0 0}
.page-hero__sub{font-size:1.18rem;color:#d3e0ec;max-width:60ch;margin-top:1rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:.86rem;font-family:var(--display);font-weight:500}
.crumbs a{color:var(--verd)}.crumbs a:hover{color:#fff}
.crumbs span{color:#6f8398}
.crumbs a:last-of-type{color:#cddbe7;pointer-events:none}
/* CTA dins del cos de text */
.prose .body-cta{margin:22px 0}
.prose .body-cta .btn{text-decoration:none}
.prose .btn{text-decoration:none}
.prose{max-width:820px}
.prose p{font-size:1.06rem;color:var(--text)}
.prose h2{margin-top:1.5em}
.prose ul{padding-left:1.1em}.prose li{margin:.35em 0}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* Producte list (servei) */
.servei-featured{margin:0 0 30px;border-radius:var(--radi-lg);overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--line)}
.servei-featured img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover}
.prod-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;list-style:none;padding:0;margin:26px 0}
.prod-list li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radi);
  padding:14px 16px 14px 40px;font-weight:500;color:var(--text);transition:.2s var(--ease)}
.prod-list li::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:3px;background:var(--verd);box-shadow:0 0 0 4px var(--verd-tint)}
.prod-list li:hover{border-color:var(--verd-2);transform:translateY(-2px);box-shadow:var(--sh-1)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 8px}
.gallery__item{display:block;border-radius:var(--radi);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--paper-2);cursor:zoom-in}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery__item:hover img{transform:scale(1.06)}

/* Catàleg PDF */
.catalog-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn--catalog{background:var(--navy);color:var(--white);box-shadow:var(--sh-2)}
.btn--catalog:hover{background:var(--blau);color:var(--white);transform:translateY(-2px)}
.btn--catalog svg{width:20px;height:20px}

/* Lightbox de galeria */
body.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(11,31,51,.92);backdrop-filter:blur(3px)}
.lightbox__stage{position:relative;z-index:2;margin:0;max-width:min(92vw,1200px);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox__img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
  border-radius:var(--radi);box-shadow:var(--sh-3);background:var(--ink)}
.lightbox__cap{color:rgba(255,255,255,.9);font-size:.92rem;text-align:center;letter-spacing:-.01em}
.lightbox__btn{position:absolute;z-index:3;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),transform .2s var(--ease);line-height:1}
.lightbox__btn:hover{background:var(--verd);color:var(--ink);border-color:transparent}
.lightbox__close{top:20px;right:24px;width:46px;height:46px;font-size:30px}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:32px}
.lightbox__prev{left:24px}
.lightbox__next{right:24px}
.lightbox__prev:hover,.lightbox__next:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:560px){
  .lightbox__prev,.lightbox__next{width:44px;height:44px;font-size:26px}
  .lightbox__prev{left:10px}.lightbox__next{right:10px}
  .lightbox__close{top:12px;right:12px}
}

/* ---------- Vídeo responsive (YouTube) ---------- */
.video-frame{max-width:940px;margin:0 auto}
.video-embed{position:relative;padding-top:56.25%;border-radius:var(--radi-xl);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid var(--line);background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,56px);align-items:start}
.contact-cards{display:grid;gap:14px}
.contact-card{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radi-lg);padding:20px 22px;transition:.25s var(--ease)}
.contact-card:hover{box-shadow:var(--sh-2);border-color:transparent;transform:translateY(-2px)}
.contact-card .ic{flex:0 0 50px;height:50px;border-radius:14px;background:var(--verd-tint);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.contact-card .ic svg{width:24px;height:24px}
.contact-card b{display:block;color:var(--ink);font-family:var(--display);font-size:.95rem}
.contact-card a{color:var(--muted)}
.frm-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radi-xl);padding:clamp(24px,3vw,38px);box-shadow:var(--sh-1)}
.frm label.field{display:block;margin-bottom:16px}
.frm .lab{display:block;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--ink);margin-bottom:7px}
.wpcf7 input,.wpcf7 textarea,.frm input,.frm textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radi);
  font-family:inherit;font-size:1rem;background:var(--paper-2);color:var(--text);transition:.2s var(--ease)}
.frm input:focus,.frm textarea:focus{outline:none;border-color:var(--verd-2);background:#fff;
  box-shadow:0 0 0 4px var(--verd-tint)}
.frm textarea{min-height:132px;resize:vertical}
.map-wrap{border-radius:var(--radi-xl);overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(.15)}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--ink);color:#b7c6d3;padding:clamp(56px,5vw,82px) 0 26px;overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--verd),var(--blau),var(--verd))}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(30px,4vw,56px)}
.site-footer h4{font-family:var(--display);color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.site-footer a{color:#b7c6d3}.site-footer a:hover{color:var(--verd)}
.site-footer .brand{display:block;margin-bottom:16px}
.site-footer .brand-logo{height:64px}
.footer-contact li{list-style:none;margin:.55em 0;display:flex;gap:11px;align-items:flex-start}
.footer-contact svg{width:18px;height:18px;color:var(--verd);flex:0 0 18px;margin-top:3px}
.site-footer ul{list-style:none;padding:0;margin:0}
.footer-links li,.footer-legal li{margin:.5em 0}
.footer-links a,.footer-legal a{position:relative;transition:padding .2s var(--ease)}
.footer-links a:hover,.footer-legal a:hover{padding-left:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(40px,4vw,58px);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:#7d90a0}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .hero__grid,.strip .strip__grid{grid-template-columns:1fr;gap:40px}
  .hero__media{max-width:560px}
  .values{grid-template-columns:1fr;gap:16px}
}
@media(max-width:860px){
  .nav-toggle{display:block;order:3}
  .header-tools{gap:10px}
  .lang{display:none}

  /* Botó de trucada verd i clar */
  .phone-chip{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%;
    background:var(--verd);color:var(--ink);order:2}
  .phone-chip:hover{background:var(--verd-2)}
  .phone-chip .lbl{display:none}
  .phone-chip svg{width:20px;height:20px}

  /* Panell de menú (sheet) */
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;
    display:block;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
    box-shadow:var(--sh-3);border-top:1px solid var(--line);border-radius:0 0 22px 22px;
    padding:10px 18px 24px;max-height:calc(100dvh - 66px);overflow-y:auto}
  .main-nav.open{opacity:1;visibility:visible;transform:none}
  .main-nav::before{content:"";position:fixed;left:0;right:0;top:0;bottom:0;
    background:rgba(11,31,51,.42);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:.26s var(--ease);z-index:-1}
  .main-nav.open::before{opacity:1;visibility:visible}

  .main-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .main-nav>ul>li{border-bottom:1px solid var(--line-2)}
  .main-nav>ul>li>a{display:block;padding:17px 4px;font-family:var(--display);font-weight:600;
    font-size:1.12rem;color:var(--ink);border-radius:0}
  .main-nav>ul>li>a::after{display:none}
  .main-nav>ul>li>a:hover{background:transparent;color:var(--verd-3)}

  /* Mega ocult; submenú acordió al mòbil */
  .mega{display:none!important}
  .mega-caret{display:none}
  .has-mega{border-bottom:1px solid var(--line-2)}
  .submenu-mobile{display:block;padding:2px 0 10px}
  .submenu-mobile .msub{list-style:none;margin:0;padding:0}
  .submenu-mobile .msub .msub{padding-left:14px;border-left:2px solid var(--line);margin:2px 0 8px}
  .submenu-mobile li{border:0}
  .submenu-mobile a{display:block;padding:9px 4px;font-family:var(--display);font-weight:500;color:var(--text);font-size:.98rem}
  .submenu-mobile a:hover{color:var(--verd-3)}
  .submenu-mobile details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
    padding:11px 4px;font-family:var(--display);font-weight:600;color:var(--ink);cursor:pointer;font-size:1rem}
  .submenu-mobile details>summary::-webkit-details-marker{display:none}
  .submenu-mobile details>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease);flex:0 0 auto;margin-right:4px}
  .submenu-mobile details[open]>summary::after{transform:rotate(-135deg)}
  .submenu-mobile .msub__see{color:var(--verd-3);font-weight:600;font-size:.86rem;padding:2px 4px 8px}

  .nav-extra{display:flex;flex-direction:column;gap:14px;margin-top:20px}
  .nav-lang{display:flex;gap:10px}
  .nav-lang a{flex:1;text-align:center;padding:12px;border:1.5px solid var(--line);border-radius:100px;
    font-family:var(--display);font-weight:600;color:var(--muted);font-size:.95rem}
  .nav-lang a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .nav-call{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;
    background:var(--paper-2);border:1px solid var(--line);color:var(--ink)}
  .nav-call svg{width:24px;height:24px;color:var(--verd-3);flex:0 0 24px}
  .nav-call small{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
  .nav-call b{font-family:var(--display);font-size:1.18rem;color:var(--ink);line-height:1.2}
  .nav-extra .btn{width:100%;justify-content:center}

  body.nav-open{overflow:hidden}

  .services-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .cta-band .container{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16px}
  .services-grid,.stats,.footer-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .brand-logo{height:46px}
  .phone-chip .lbl{display:none}
  .btn{width:100%;justify-content:center}
  .hero__cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}