/* ============================================================
   OBIFORM — proposta web
   Estil: modern-net, blanc, lleuger. Marca: blau→verd + molinet.
   ============================================================ */

/* ---- Fonts (carregades a l'HTML) ---- */
:root{
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;

  /* Brand palette (default accent) */
  --blue:        #0E86C6;
  --blue-deep:   #0A6CA0;
  --cyan:        #19B2D8;
  --green:       #4DB24A;
  --green-deep:  #2F9A3D;
  --coral:       #E9543B;
  --gold:        #F2B01E;

  /* Accent driven tokens (overridable by tweaks) */
  --accent:      var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-2:    var(--green);
  --grad-brand:  linear-gradient(95deg, var(--blue) 0%, var(--cyan) 48%, var(--green) 100%);

  /* Ink / neutrals */
  --ink:    #14222B;
  --ink-2:  #36474F;
  --muted:  #64767E;
  --line:   #E5ECF0;
  --line-2: #EFF4F7;
  --bg:     #FFFFFF;
  --bg-soft:#F4F8FB;
  --bg-tint:#EAF4F9;

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(20,40,55,.05), 0 2px 8px rgba(20,40,55,.04);
  --shadow:    0 4px 14px rgba(16,80,120,.08), 0 18px 40px rgba(16,80,120,.07);
  --shadow-lg: 0 10px 30px rgba(16,80,120,.12), 0 30px 70px rgba(16,80,120,.10);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(18px, 4vw, 48px);
  --deco-opacity: .9;
}

[data-accent="ocean"]{ --accent:#0A6CA0; --accent-deep:#075a86; --accent-2:#19B2D8;
  --grad-brand:linear-gradient(95deg,#075a86,#0E86C6 55%,#19B2D8); }
[data-accent="forest"]{ --accent:#2F9A3D; --accent-deep:#23802F; --accent-2:#19B2D8;
  --grad-brand:linear-gradient(95deg,#0E86C6,#19B2D8 45%,#4DB24A); }

[data-font="jakarta"]{ --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif; }
[data-font="manrope"]{ --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Foam-cell decoration behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background:url('assets/foam-texture.png');
  background-size:560px;
  opacity:var(--deco-opacity);
  z-index:-2;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(25,178,216,.10), transparent 60%),
    radial-gradient(55% 45% at -5% 8%, rgba(77,178,74,.08), transparent 60%);
  z-index:-2; pointer-events:none;
}
[data-deco="off"] body::before{ display:none; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.1;
  font-weight:700; letter-spacing:-.01em; margin:0; text-wrap:balance; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--grad-brand); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:600; font-size:15px; padding:13px 22px; border-radius:999px;
  border:1px solid transparent; transition:.22s ease; white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px rgba(14,134,198,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(14,134,198,.34); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); transform:translateY(-2px); }
.btn-soft{ background:var(--bg-tint); color:var(--accent-deep); }
.btn-soft:hover{ background:#dceef6; }
.btn-lg{ padding:16px 28px; font-size:16px; }

/* =========================  HEADER  ========================= */
.site-header{ position:sticky; top:0; z-index:50; }
.topbar{
  background:var(--ink);
  color:#cfe0e8; font-size:13.5px;
}
.topbar .wrap{ display:flex; align-items:center; gap:22px; min-height:44px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; color:#cfe0e8; transition:.18s; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:15px; height:15px; color:var(--cyan); }
.topbar .sep{ width:1px; height:16px; background:rgba(255,255,255,.16); }
.topbar .spacer{ flex:1; }
.topsearch{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 12px; }
.topsearch input{ background:transparent; border:0; outline:none; color:#fff; font-size:13px;
  width:140px; font-family:var(--font-body); }
.topsearch input::placeholder{ color:#9fb6c1; }
.topsearch svg{ width:15px; height:15px; }
.lang{ display:flex; align-items:center; gap:2px; }
.lang button{ background:transparent; border:0; color:#8fa8b4; font-size:12.5px; font-weight:700;
  padding:4px 7px; border-radius:7px; letter-spacing:.04em; transition:.16s; }
.lang button[aria-pressed="true"]{ color:#fff; background:rgba(255,255,255,.14); }
.lang button:hover{ color:#fff; }

.site-header .topbar > .wrap, .site-header .mainbar > .wrap{ max-width:1440px; padding-inline:clamp(18px,3vw,34px); }
.mainbar{ background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line); }
.mainbar .wrap{ display:flex; align-items:center; gap:18px; min-height:78px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:42px; width:auto; }
.nav{ display:flex; align-items:stretch; gap:2px; margin-left:auto; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-link{ display:inline-flex; align-items:center; gap:4px; padding:6px 8px; border-radius:9px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink-2);
  transition:.16s; cursor:pointer; white-space:nowrap; }
.nav-link:hover, .nav-item.open .nav-link{ color:var(--accent-deep); background:var(--bg-soft); }
.nav-link .chev{ width:13px; height:13px; transition:.2s; opacity:.7; }
.nav-item.open .nav-link .chev{ transform:rotate(180deg); }
.nav-cta{ margin-left:8px; display:none; }
@media (min-width:1440px){ .nav-cta{ display:inline-flex; } }

/* Mega dropdown */
.mega{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(calc(-50% + var(--mega-shift,0px))) translateY(8px);
  min-width:320px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:14px; opacity:0; visibility:hidden; transition:.2s ease; z-index:60; }
.mega:not(.one-col){ min-width:660px; }
.nav-item.open .mega{ opacity:1; visibility:visible; transform:translateX(calc(-50% + var(--mega-shift,0px))) translateY(0); }
.mega::before{ content:""; position:absolute; top:-6px; left:calc(50% - var(--mega-shift,0px)); transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.mega.one-col{ min-width:340px; }
.mega.one-col .mega-grid{ grid-template-columns:1fr; }
.mega-link{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:10px; transition:.15s; }
.mega-link:hover{ background:var(--bg-soft); }
.mega-ico{ flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--bg-tint); color:var(--accent-deep); }
.mega-ico svg{ width:18px; height:18px; }
.mega-link b{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); display:block; }
.mega-link span{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.mega-foot{ margin-top:8px; padding:12px; border-radius:12px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mega-foot p{ margin:0; font-size:13px; color:var(--ink-2); }
.mega-foot b{ font-family:var(--font-display); }

/* grouped mega (Materials i peces) */
.mega.grouped{ min-width:620px; }
.mega-cols{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.mega-col{ display:flex; flex-direction:column; }
.mega-h{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:8px 12px 8px; margin-bottom:2px; border-bottom:1px solid var(--line-2); transition:.15s; }
a.mega-h:hover{ color:var(--accent-deep); }
a.mega-h::after{ content:""; width:13px; height:13px; margin-left:auto; opacity:.55;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.m-grouphead{ display:block; font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 12px 4px; }

/* Mobile nav toggle */
.burger{ display:none; margin-left:auto; background:#fff; border:1px solid var(--line);
  width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.burger svg{ width:22px; height:22px; color:var(--ink); }

/* =========================  BREADCRUMB  ========================= */
.crumbs{ border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.5); }
.crumbs .wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-block:13px; font-size:13.5px; }
.crumbs a{ color:var(--muted); transition:.15s; }
.crumbs a:hover{ color:var(--accent-deep); }
.crumbs .cur{ color:var(--ink); font-weight:600; }
.crumbs svg{ width:14px; height:14px; color:#b7c6cd; }

/* =========================  SECTIONS  ========================= */
main{ display:block; }
.section{ padding-block:clamp(56px, 8vw, 104px); position:relative; }
.section.soft{ background:linear-gradient(180deg, var(--bg-soft), #fff); }
.section-head{ max-width:680px; margin-bottom:42px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 42px); margin-top:14px; }
.section-head p{ font-size:clamp(16px,1.5vw,18px); color:var(--muted); margin:14px 0 0; }

/* =========================  HERO  ========================= */
/* ---- Full-width video hero (home) ---- */
.hero-v{ position:relative; }
.hero-v-stage{ position:relative; width:100%; overflow:hidden; background:#0a2a3d; }
.hero-v-video, .hero-v-fallback, .hero-v-scrim{ position:absolute; inset:0; width:100%; height:100%; }
.hero-v-fallback{ display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center;
  background:url('assets/home-poster.jpg') center/cover no-repeat; color:#dff1f8; z-index:1; }
.hero-v-fallback .play{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(4px);
  box-shadow:0 10px 40px rgba(0,0,0,.25); transition:.25s; }
.hero-v:hover .hero-v-fallback .play{ background:rgba(255,255,255,.22); transform:scale(1.05); }
.hero-v-fallback .play svg{ width:30px; height:30px; margin-left:5px; color:#fff; }
.hero-v-fallback .ph-label{ font-family:var(--font-display); font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.hero-v-video{ object-fit:cover; z-index:2; opacity:0; transition:opacity .5s; }
.hero-v-video.ready{ opacity:1; }
.hero-v-scrim{ z-index:3; pointer-events:none; }
.hero-v-content h1{ font-size:clamp(36px,5.2vw,64px); line-height:1.04; }
.hero-v-content h1 .grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-v-content .lead{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); margin:22px 0 30px; max-width:46em; }

/* MODE A · overlay (video background, text on top) — default */
[data-hero="overlay"] .hero-v{ min-height:clamp(540px,80vh,800px); display:flex; align-items:center; }
[data-hero="overlay"] .hero-v-stage{ position:absolute; inset:0; height:100%; }
[data-hero="overlay"] .hero-v-content{ position:relative; z-index:5; width:100%; padding-block:clamp(40px,6vw,72px); }
[data-hero="overlay"] .hero-v-content .lead{ max-width:38em; }
[data-hero="overlay"] .hero-v-scrim{
  background:linear-gradient(100deg, rgba(8,24,33,.86) 0%, rgba(8,24,33,.6) 40%, rgba(8,24,33,.12) 100%); }
[data-hero="overlay"] .hero-v-content h1{ color:#fff; }
[data-hero="overlay"] .hero-v-content h1 .grad{ background:linear-gradient(95deg,#5fd6ff,#86eb98);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-hero="overlay"] .hero-v-content .eyebrow{ color:#7fdcff; }
[data-hero="overlay"] .hero-v-content .lead{ color:#d3e6ef; }
[data-hero="overlay"] .hero-v-content .hero-stats .st b{ color:#fff; }
[data-hero="overlay"] .hero-v-content .hero-stats .st b i{ background:linear-gradient(95deg,#5fd6ff,#86eb98);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-hero="overlay"] .hero-v-content .hero-stats .st span{ color:#a9c6d3; }
[data-hero="overlay"] .hero-v .btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; }
[data-hero="overlay"] .hero-v .btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
[data-hero="overlay"] .hero-v-fallback{ align-items:flex-end; justify-content:center;
  padding-right:clamp(36px,7vw,130px); padding-bottom:0; text-align:right; }

/* MODE B · below (video band on top, text below) */
[data-hero="below"] .hero-v-stage{ position:relative; height:clamp(300px,44vw,560px); }
[data-hero="below"] .hero-v-content{ padding-top:clamp(34px,5vw,58px); padding-bottom:4px; }
[data-hero="below"] .hero-v-scrim{ background:linear-gradient(0deg, rgba(8,24,33,.18), transparent 55%); }

@media (prefers-reduced-motion: reduce){ .hero-v-video{ display:none; } }

@media (max-width:720px){
  [data-hero="overlay"] .hero-v{ min-height:clamp(460px,86vh,640px); }
  [data-hero="overlay"] .hero-v-scrim{
    background:linear-gradient(160deg, rgba(8,24,33,.7) 0%, rgba(8,24,33,.8) 100%); }
  [data-hero="overlay"] .hero-v-fallback{ align-items:center; padding-right:0; text-align:center; opacity:.5; }
  [data-hero="below"] .hero-v-stage{ height:clamp(220px,52vw,320px); }
  .hero-v-fallback .play{ width:64px; height:64px; }
  .hero-v-fallback .play svg{ width:24px; height:24px; }
}

/* legacy hero (kept for safety) */
.hero{ position:relative; padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,86px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(36px, 5.2vw, 64px); line-height:1.04; }
.hero h1 .grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); margin:22px 0 30px; max-width:30em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:30px; margin-top:38px; flex-wrap:wrap; }
.hero-stats .st b{ font-family:var(--font-display); font-size:30px; color:var(--ink); display:block; line-height:1; }
.hero-stats .st b i{ font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .st span{ font-size:13px; color:var(--muted); }
.hero-media{ position:relative; }
.hero-media image-slot{ width:100%; height:clamp(340px,42vw,500px); display:block; box-shadow:var(--shadow-lg); }
.hero-badge{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:11px; align-items:center; }
.hero-badge .ico{ width:38px; height:38px; border-radius:10px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.hero-badge .ico svg{ width:20px; height:20px; }
.hero-badge b{ font-family:var(--font-display); font-size:14px; display:block; }
.hero-badge span{ font-size:12px; color:var(--muted); }
.hero-badge.b1{ bottom:24px; left:-22px; }
.hero-badge.b2{ top:24px; right:-18px; }

/* Trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.6); }
.trust .wrap{ display:flex; align-items:center; gap:clamp(20px,4vw,52px); padding-block:22px; flex-wrap:wrap; justify-content:center; }
.trust .t{ display:flex; align-items:center; gap:11px; color:var(--ink-2); font-size:14.5px; font-weight:600; font-family:var(--font-display); }
.trust .t svg{ width:22px; height:22px; color:var(--accent); }

/* =========================  CARD GRID (families / category)  ========================= */
.grid{ display:grid; gap:clamp(18px,2.2vw,26px); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.24s ease; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#d4e6ef; }
.card-media{ position:relative; aspect-ratio:4/3; background:var(--bg-soft); overflow:hidden; }
.card-media image-slot{ width:100%; height:100%; display:block; }
.card-tag{ position:absolute; top:12px; left:12px; z-index:3; background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px); color:var(--accent-deep); font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 11px; border-radius:999px; box-shadow:var(--shadow-sm); }
.card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:19px; }
.card-body p{ font-size:14.5px; color:var(--muted); margin:9px 0 0; flex:1; }
.card-more{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:600; font-size:14px; color:var(--accent-deep); }
.card-more svg{ width:16px; height:16px; transition:.2s; }
.card:hover .card-more svg{ transform:translateX(4px); }

/* Family card (home) — bigger with accent bar */
.fam{ position:relative; }
.fam .card-media{ aspect-ratio:16/11; }
.fam .bar{ height:5px; background:var(--grad-brand); }

/* =========================  CATEGORY HEADER  ========================= */
.cat-hero{ padding-block:clamp(36px,5vw,60px) clamp(28px,4vw,44px); }
.cat-hero h1{ font-size:clamp(32px,4.4vw,52px); }
.cat-hero p{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:46em; margin:18px 0 0; }
.cat-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm); }
.chip svg{ width:15px; height:15px; color:var(--accent); }

/* =========================  PRODUCT DETAIL  ========================= */
.pd-top{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; padding-block:clamp(30px,4vw,52px); }
.gallery{ position:sticky; top:140px; }
.gallery-main{ width:100%; height:clamp(320px,40vw,440px); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.gallery-thumbs image-slot{ width:100%; height:92px; }
.pd-info .eyebrow{ margin-bottom:12px; }
.pd-info h1{ font-size:clamp(30px,3.8vw,46px); }
.pd-info .lead{ font-size:17.5px; color:var(--ink-2); margin:18px 0 24px; }
.pd-actions{ display:flex; gap:13px; flex-wrap:wrap; margin:26px 0; }
.feat-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.feat-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.feat-list .tick{ flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--bg-tint);
  display:grid; place-items:center; color:var(--green-deep); margin-top:1px; }
.feat-list .tick svg{ width:14px; height:14px; }

/* schema-driven detail blocks */
.feat-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 36px; }
.feat-grid li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.feat-grid .tick{ flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--bg-tint);
  display:grid; place-items:center; color:var(--green-deep); margin-top:1px; }
.feat-grid .tick svg{ width:14px; height:14px; }

.tcards{ display:grid; gap:clamp(16px,2vw,22px); }
.tcards.c2{ grid-template-columns:repeat(2,1fr); }
.tcards.c3{ grid-template-columns:repeat(3,1fr); }
.tcard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow-sm); transition:.2s ease; }
.tcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d4e6ef; }
.tcard .tnum{ display:inline-grid; place-items:center; min-width:34px; height:30px; padding:0 8px; border-radius:8px;
  background:var(--bg-tint); color:var(--accent-deep); font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.04em; margin-bottom:13px; }
.tcard b{ font-family:var(--font-display); font-size:17px; display:block; margin-bottom:7px; color:var(--ink); }
.tcard p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }
.pd-aside{ position:sticky; top:140px; }
[data-dir="b"] .tcard{ border-radius:8px; box-shadow:none; border:1.5px solid var(--line); }
[data-dir="b"] .tcard:hover{ border-color:var(--accent); box-shadow:var(--shadow); }

/* horizontal comparison bars (e.g. conductivitat tèrmica) */
.bars{ display:grid; gap:14px; max-width:780px; }
.bar-row{ display:grid; grid-template-columns:140px 1fr auto; gap:16px; align-items:center; }
.bar-row .bl{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); }
.bar-track{ height:14px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:999px; min-width:8px; background:linear-gradient(90deg,#cfe0ea,#b3cedd); }
.bar-row.best .bar-fill{ background:var(--grad-brand); }
.bar-val{ font-family:var(--font-display); font-size:13.5px; color:var(--muted); white-space:nowrap; }
.bar-row.best .bar-val{ color:var(--accent-deep); font-weight:700; }
@media (max-width:560px){ .bar-row{ grid-template-columns:96px 1fr; } .bar-val{ grid-column:2; justify-self:end; margin-top:-6px; } }

.prose{ max-width:760px; }
.prose h2{ font-size:clamp(24px,2.6vw,32px); margin:0 0 16px; }
.prose h3{ font-size:21px; margin:34px 0 12px; }
.prose p{ font-size:16.5px; color:var(--ink-2); margin:0 0 18px; }
.prose ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:11px; }
.prose ul li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:16px; }
.prose ul li::before{ content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:5px;
  background:var(--grad-brand); }
.prose ul li::after{ content:""; position:absolute; left:4.5px; top:13px; width:5px; height:8px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); }

/* sectors cards in detail */
.sector-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
.sector{ display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.sector .ico{ flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.sector .ico svg{ width:22px; height:22px; }
.sector b{ font-family:var(--font-display); font-size:16px; display:block; margin-bottom:4px; }
.sector p{ margin:0; font-size:14px; color:var(--muted); line-height:1.5; }

/* sticky aside quote box */
.aside-quote{ background:var(--ink); color:#dceaf1; border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.aside-quote h3{ color:#fff; font-size:22px; }
.aside-quote p{ font-size:14.5px; color:#a9c2cf; margin:10px 0 18px; }

/* =========================  CTA BAND  ========================= */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(36px,5vw,60px);
  background:linear-gradient(110deg, var(--blue-deep), var(--blue) 45%, var(--green) 120%); color:#fff;
  box-shadow:var(--shadow-lg); }
.cta-band::before{ content:""; position:absolute; inset:0; background:url('assets/foam-texture.png'); background-size:420px;
  opacity:.5; mix-blend-mode:overlay; }
.cta-band .inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:clamp(26px,3vw,38px); max-width:16em; }
.cta-band p{ color:rgba(255,255,255,.85); margin:12px 0 0; max-width:40em; }
.cta-band .btn-primary{ background:#fff; color:var(--blue-deep); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.cta-band .btn-primary:hover{ background:#f3fbff; }
.cta-band .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* sectors strip */
.logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.logo-pill{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); transition:.2s; }
.logo-pill:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.logo-pill .ico{ width:46px; height:46px; border-radius:13px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.logo-pill .ico svg{ width:24px; height:24px; }
.logo-pill span{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-2); }

/* =========================  CONTACT  ========================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line-2); }
.info-row:last-child{ border-bottom:0; }
.info-row .ico{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.info-row .ico svg{ width:19px; height:19px; }
.info-row b{ font-family:var(--font-display); font-size:14px; display:block; }
.info-row span,.info-row a{ font-size:14.5px; color:var(--ink-2); }
.hours{ list-style:none; padding:0; margin:0; }
.hours li{ display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line-2); }
.hours li:last-child{ border-bottom:0; }
.hours li span{ color:var(--muted); }
.hours li.closed b{ color:var(--coral); }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:700; font-family:var(--font-display); margin-bottom:6px; color:var(--ink-2); }
.field input,.field textarea,.field select{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff; outline:none; transition:.16s; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,134,198,.12); }
.field textarea{ resize:vertical; min-height:120px; }
.map{ width:100%; height:300px; border-radius:var(--radius); border:1px solid var(--line); filter:saturate(.92); }

/* generic simple page */
.simple{ padding-block:clamp(34px,5vw,64px); }
.simple .lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:44em; }
.prep{ display:inline-flex; align-items:center; gap:9px; background:var(--bg-tint); color:var(--accent-deep);
  font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:999px; margin-top:18px; }
.prep svg{ width:16px; height:16px; }

/* =========================  FOOTER  ========================= */
.footer{ background:var(--ink); color:#aebfc8; margin-top:clamp(56px,7vw,90px); position:relative; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-brand); }
.footer .wrap{ padding-block:clamp(46px,6vw,72px) 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.footer img.logo{ height:38px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:16px; }
.footer p{ font-size:14px; line-height:1.7; color:#9fb2bc; margin:0 0 18px; max-width:30ch; }
.footer h4{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-display); }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer ul a{ color:#9fb2bc; font-size:14px; transition:.15s; }
.footer ul a:hover{ color:#fff; }
.footer .social{ display:flex; gap:10px; }
.footer .social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.18s; }
.footer .social a:hover{ background:var(--accent); }
.footer .social svg{ width:19px; height:19px; color:#fff; }
.footer .contact-mini li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#9fb2bc; }
.footer .contact-mini svg{ width:17px; height:17px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.footer-bot{ border-top:1px solid rgba(255,255,255,.1); margin-top:46px; padding-block:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#7e96a2; }
.footer-bot a{ color:#7e96a2; }
.footer-bot a:hover{ color:#fff; }

/* =========================  DIRECTION B overrides  ========================= */
[data-dir="b"]{ --radius:8px; --radius-sm:6px; --radius-lg:14px; }
[data-dir="b"] .hero{ background:var(--ink); color:#dfeaf0; border-radius:0; overflow:hidden; position:relative; }
[data-dir="b"] .hero::after{ content:""; position:absolute; inset:0; background:url('assets/foam-texture.png');
  background-size:480px; opacity:.4; mix-blend-mode:screen; pointer-events:none; }
[data-dir="b"] .hero h1{ color:#fff; }
[data-dir="b"] .hero h1 .grad{ background:linear-gradient(95deg,#3fd0ff,#7be886); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-dir="b"] .hero p.lead{ color:#b9cdd7; }
[data-dir="b"] .hero-stats .st b{ color:#fff; }
[data-dir="b"] .hero-stats .st span{ color:#92aab6; }
[data-dir="b"] .hero .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
[data-dir="b"] .hero .btn-ghost:hover{ background:rgba(255,255,255,.1); }
[data-dir="b"] .hero-badge{ background:rgba(255,255,255,.95); }
[data-dir="b"] .mainbar{ border-bottom:2px solid var(--ink); }
[data-dir="b"] .nav-link{ border-radius:0; }
[data-dir="b"] .card{ border-radius:8px; box-shadow:none; border:1.5px solid var(--line); }
[data-dir="b"] .card:hover{ border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-4px); }
[data-dir="b"] .btn{ border-radius:8px; }
[data-dir="b"] .eyebrow::before{ width:30px; }
[data-dir="b"] .fam .bar{ display:none; }
[data-dir="b"] .card-media{ border-bottom:1.5px solid var(--line); }

/* =========================  RESPONSIVE  ========================= */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .logos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1239px){
  .nav, .nav-cta{ display:none !important; }
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .hero-badge{ display:none; }
  .pd-top{ grid-template-columns:1fr; }
  .gallery{ position:static; }
  .pd-aside{ position:static; }
  .pd-intro{ grid-template-columns:1fr !important; }
  .tcards.c3{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:720px){
  .grid-3, .grid-2{ grid-template-columns:1fr 1fr; }
  .sector-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .tcards.c2, .tcards.c3{ grid-template-columns:1fr; }
  .topbar .hide-sm{ display:none; }
  .topsearch{ display:none; }
  .cta-band .inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:22px; }
}

/* mobile menu drawer */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer-bg{ position:absolute; inset:0; background:rgba(8,20,28,.45); opacity:0; transition:.25s; }
.drawer.open .drawer-bg{ opacity:1; }
.drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(380px,86vw); background:#fff;
  transform:translateX(100%); transition:.28s ease; overflow-y:auto; box-shadow:var(--shadow-lg); padding:18px; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.drawer-head img{ height:34px; }
.drawer-close{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; }
.drawer-close svg{ width:20px; height:20px; }
.m-group{ border-bottom:1px solid var(--line-2); }
.m-top{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0;
  padding:15px 6px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); text-align:left; }
.m-top svg{ width:18px; height:18px; transition:.2s; color:var(--muted); }
.m-group.open .m-top svg{ transform:rotate(180deg); }
.m-sub{ display:none; padding:0 6px 12px; }
.m-group.open .m-sub{ display:grid; gap:2px; }
.m-sub a{ padding:10px 12px; border-radius:9px; font-size:14.5px; color:var(--ink-2); }
.m-sub a:hover{ background:var(--bg-soft); color:var(--accent-deep); }
.drawer .btn{ width:100%; justify-content:center; margin-top:16px; }

/* tweaks panel mount */
#tweaks-root{ position:fixed; z-index:120; }

/* ---- Branded image-slot placeholders ---- */
image-slot{ background:var(--bg-soft); }
image-slot::part(frame){
  background:
    url('assets/foam-texture.png') center/300px,
    radial-gradient(120% 120% at 28% 18%, #eef8fc 0%, #e0f0f8 55%, #d6e9f3 100%);
  color:var(--accent-deep);
}
image-slot::part(empty){ color:var(--accent-deep); font-weight:600; }