/* ============================================================
   Levante Dual — shared stylesheet
   Layout: editorial-industrial trading house. Heavy grotesque
   headlines, mono eyebrows, serif body. Timber = warm, polymers = cool.
   ============================================================ */
:root{
  --bg:#f3efe8; --surface:#faf8f3; --surface-2:#eae4d8; --fg:#18140f; --muted:#6d6456;
  --line:#d9d2c4; --line-strong:#b9b0a0;
  --accent:#a7601f; --wood:#9c6324; --poly:#3f5f64;
  --max:1180px;
  --fd:"Calibri","Carlito","Segoe UI",system-ui,-apple-system,sans-serif;
  --fb:"Calibri","Carlito","Segoe UI",system-ui,-apple-system,sans-serif;
  --fm:"Calibri","Carlito","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131110; --surface:#1b1815; --surface-2:#242019; --fg:#f0ebe1; --muted:#9f9789;
  --line:#2e2a23; --line-strong:#433d33;
  --accent:#cf8a3e; --wood:#d59a52; --poly:#74a3a9; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#131110; --surface:#1b1815; --surface-2:#242019; --fg:#f0ebe1; --muted:#9f9789;
  --line:#2e2a23; --line-strong:#433d33;
  --accent:#cf8a3e; --wood:#d59a52; --poly:#74a3a9; color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--fb); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%}
[hidden]{display:none !important}

/* faint material grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.6}}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.6}

.wrap{position:relative; z-index:1; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,56px)}

a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--fd); font-weight:800; margin:0; line-height:1.03; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}

.eyebrow{
  font-family:var(--fm); font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); display:inline-block}

/* ---------- header / nav ---------- */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
.brand{font-family:var(--fd); font-weight:900; font-size:19px; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:11px}
.brand .mark{width:16px; height:16px; flex:none; position:relative}
.brand .mark::before,.brand .mark::after{content:""; position:absolute; inset:0; border:1.5px solid var(--fg)}
.brand .mark::after{transform:translate(5px,5px); border-color:var(--accent); background:var(--bg)}
nav.main{display:flex; gap:28px; font-family:var(--fm); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
nav.main a{transition:color .2s; position:relative; padding-block:4px}
nav.main a:hover{color:var(--fg)}
nav.main a.active{color:var(--fg)}
nav.main a.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent)}
.lang{display:flex; font-family:var(--fm); font-size:12px; font-weight:500; border:1px solid var(--line-strong); border-radius:2px; overflow:hidden; flex:none}
.lang button{font:inherit; background:transparent; color:var(--muted); border:0; padding:7px 11px; cursor:pointer; letter-spacing:.06em}
.lang button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}

/* ---------- hero slider (home) ---------- */
.slider{position:relative; width:100%; height:clamp(380px,62vh,620px); overflow:hidden; background:#000; border-bottom:1px solid var(--line)}
.slides{position:absolute; inset:0}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; background-size:cover; background-position:center}
.slide.is-active{opacity:1}
.slide::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,8,6,.72), rgba(10,8,6,.28) 55%, rgba(10,8,6,.5)),
             linear-gradient(0deg, rgba(10,8,6,.55), transparent 42%)}
@media (prefers-reduced-motion:no-preference){
  .slide.is-active{animation:kenburns 7.5s ease-out forwards}
}
@keyframes kenburns{from{transform:scale(1.001)}to{transform:scale(1.07)}}

/* slide materials */
.s-madera{background-image:url('img/hero-madera.jpg')}
.s-tableros{background-image:url('img/hero-tableros.jpg')}
.s-granza{background-image:url('img/hero-granza.jpg')}
.s-lamina{background-image:url('img/hero-lamina.jpg')}
.s-wood{background-color:#4a3118;
  background-image:linear-gradient(118deg,rgba(120,78,38,.55),rgba(32,21,12,.85)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.27  0 0 0 0 0.13  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-blend-mode:multiply; background-size:cover}
.s-panel{background-color:#caa877;
  background-image:repeating-linear-gradient(1deg,
    #e8d2a6 0 7px,#c69b63 7px 9px,#d9bd8c 9px 17px,#b4844f 17px 19px,#e3cb9e 19px 27px,#a9773f 27px 29px)}
.s-pellet{background-color:#2a4448;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(190,222,226,.9) 0 30%, rgba(120,165,170,.25) 34%, transparent 46%),
    linear-gradient(130deg,#36565b,#1a2e31);
  background-size:30px 30px,100% 100%; background-position:0 0,0 0}
.s-film{background-color:#2c3f47;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.14) 0 14%, transparent 30% 70%, rgba(255,255,255,.08) 86%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px),
    linear-gradient(140deg,#43636e,#1d2c32)}

.slide-overlay{position:absolute; left:0; right:0; bottom:clamp(34px,7vh,72px); z-index:3; color:#f6f1e7}
.slide-overlay .eyebrow{color:#e7b074}
.slide-overlay .eyebrow::before{background:#e7b074}
.slide-overlay h1{color:#fff; font-size:clamp(34px,6.2vw,78px); font-weight:900; letter-spacing:-.025em; margin-top:18px; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.4)}
.slide-cap{position:absolute; right:clamp(16px,5vw,40px); top:clamp(18px,4vh,30px); z-index:3;
  font-family:var(--fm); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82);
  background:rgba(10,8,6,.4); border:1px solid rgba(255,255,255,.2); padding:7px 12px; backdrop-filter:blur(4px)}
.slide-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:4; display:flex; gap:9px}
.slide-dots button{width:30px; height:3px; border:0; padding:0; background:rgba(255,255,255,.35); cursor:pointer; transition:background .25s}
.slide-dots button[aria-current="true"]{background:#e7b074}

/* ---------- generic section ---------- */
.sec{padding-block:clamp(56px,9vh,104px); border-bottom:1px solid var(--line)}
.sec.tight{padding-block:clamp(44px,6vh,72px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(24px,5vw,72px); align-items:end}
.sec-head h2{font-size:clamp(30px,4.6vw,54px)}
.sec-head .intro{color:var(--muted); font-size:18px; max-width:52ch}
.lead{font-size:clamp(18px,2.1vw,22px); color:var(--muted); max-width:56ch; line-height:1.55}

/* page hero (interior pages) */
.phero{padding-block:clamp(48px,8vh,96px) clamp(30px,5vh,56px); border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(40px,7vw,88px); font-weight:900; letter-spacing:-.025em; margin-top:22px; max-width:15ch}
.phero .lead{margin-top:26px}

/* buttons */
.cta-row{margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn{font-family:var(--fm); font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:14px 24px; border:1px solid var(--fg); display:inline-flex; align-items:center; gap:10px; transition:all .2s; cursor:pointer; background:transparent; color:var(--fg)}
.btn.primary{background:var(--fg); color:var(--bg)}
.btn.primary:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn .arr{transition:transform .2s} .btn:hover .arr{transform:translateX(4px)}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.23s}.reveal.d4{animation-delay:.32s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none; opacity:1; transform:none}}

/* intro + stat (home) */
.intro-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,6vw,80px); align-items:start}
.intro-grid .body p{color:var(--muted); font-size:18.5px; margin-bottom:20px}
.intro-grid .body p:last-child{margin-bottom:0}
.intro-grid .body strong{color:var(--fg); font-weight:500}
.yearscard{border:1px solid var(--line); background:var(--surface); padding:clamp(26px,3vw,38px); position:relative}
.yearscard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.yearscard .num{font-family:var(--fd); font-weight:900; font-size:clamp(66px,9vw,104px); line-height:.9; letter-spacing:-.04em; color:var(--accent)}
.yearscard .lab{font-family:var(--fm); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px; display:block}

/* reasons */
.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:50px; border:1px solid var(--line); background:var(--surface)}
.reason{padding:clamp(26px,3vw,40px); border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0}
.reason:last-child{border-right:0}
.reason .n{font-family:var(--fm); font-size:12px; color:var(--accent); letter-spacing:.16em}
.reason h3{font-family:var(--fd); font-size:clamp(21px,2.4vw,26px); font-weight:800; margin-top:22px; letter-spacing:-.01em}
.reason p{color:var(--muted); font-size:16px; margin-top:14px; line-height:1.55}

/* product cards */
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:50px}
.prod{border:1px solid var(--line); background:var(--surface); padding:clamp(26px,3.2vw,44px); position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0}
.prod::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--chip)}
.prod[data-kind="wood"]{--chip:var(--wood)} .prod[data-kind="poly"]{--chip:var(--poly)}
.prod .idx{font-family:var(--fm); font-size:12px; color:var(--chip); letter-spacing:.14em}
.prod h3{font-size:clamp(24px,3vw,34px); margin-top:18px; font-weight:800}
.prod .desc{color:var(--muted); margin-top:14px; font-size:16.5px}
.prod ul{list-style:none; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.prod li{font-family:var(--fm); font-size:13.5px; letter-spacing:.02em; color:var(--fg); display:flex; align-items:flex-start; gap:12px}
.prod li::before{content:""; width:6px; height:6px; flex:none; background:var(--chip); margin-top:.6em}

/* operativa steps */
.ops{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:50px; border:1px solid var(--line); background:var(--surface)}
.op{padding:clamp(24px,2.6vw,36px); border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0}
.op:last-child{border-right:0}
.op .n{font-family:var(--fm); font-size:12px; color:var(--accent); letter-spacing:.14em}
.op h3{font-family:var(--fd); font-size:21px; font-weight:700; margin-top:20px; letter-spacing:-.01em}
.op p{color:var(--muted); font-size:15.5px; margin-top:12px; line-height:1.55}

/* about / split */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(28px,6vw,80px); align-items:start}
.split .big{font-family:var(--fd); font-weight:800; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.02em; line-height:1.14}
.split .body p{color:var(--muted); font-size:18px; margin-bottom:20px}
.split .body p:last-child{margin-bottom:0}
.split .body strong{color:var(--fg); font-weight:500}

/* contact */
.contact{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,6vw,80px); align-items:end}
.contact h2{font-size:clamp(34px,6vw,72px); font-weight:900; letter-spacing:-.025em}
.cdetails{display:flex; flex-direction:column; gap:22px}
.cdetail .k{font-family:var(--fm); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.cdetail .v{font-family:var(--fd); font-size:19px; font-weight:600; margin-top:6px}
.cdetail .v.sel{font-family:var(--fm); font-weight:500; font-size:16px; user-select:all}
.cdetail .v a:hover{color:var(--accent)}

/* cross-links */
.xrow{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.xlink{border:1px solid var(--line); background:var(--surface); padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; transition:border-color .2s,transform .2s}
.xlink:hover{border-color:var(--accent); transform:translateY(-2px)}
.xlink .t{font-family:var(--fd); font-weight:700; font-size:18px}
.xlink .a{font-family:var(--fm); color:var(--accent)}

/* footer */
footer{padding-block:38px; color:var(--muted)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 28px; align-items:center; font-family:var(--fm); font-size:12px; letter-spacing:.04em}
.foot nav{display:flex; gap:20px; flex-wrap:wrap}
.foot a:hover{color:var(--fg)}

/* responsive */
@media (max-width:860px){
  .sec-head{grid-template-columns:1fr; align-items:start; gap:16px}
  .intro-grid,.split,.contact{grid-template-columns:1fr; gap:28px}
  .contact{align-items:start}
  .reasons{grid-template-columns:1fr}
  .reason{border-right:0; border-bottom:1px solid var(--line)} .reason:last-child{border-bottom:0}
  .prod-grid{grid-template-columns:1fr}
  .ops{grid-template-columns:1fr 1fr}
  .op:nth-child(2){border-right:0}.op:nth-child(1),.op:nth-child(2){border-bottom:1px solid var(--line)}
  .xrow{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ops{grid-template-columns:1fr}
  .op{border-right:0; border-bottom:1px solid var(--line)} .op:last-child{border-bottom:0}
}

/* quick nav — buttons to the 4 pages, under the hero on the home */
.quicknav{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--surface)}
.quicknav a{flex:1 1 160px; min-width:0; padding:20px clamp(18px,2.4vw,28px); border-right:1px solid var(--line); font-family:var(--fd); font-weight:700; font-size:16px; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:background .2s,color .2s}
.quicknav a:last-child{border-right:0}
.quicknav a .ar{color:var(--accent); transition:transform .2s}
.quicknav a:hover{background:var(--bg); color:var(--accent)}
.quicknav a:hover .ar{transform:translateX(4px)}

/* mobile header: keep the page links visible on every page */
@media (max-width:760px){
  .bar{flex-wrap:wrap; height:auto; padding-block:12px; row-gap:12px}
  .brand{order:1}
  .lang{order:2; margin-left:auto}
  nav.main{order:3; flex-basis:100%; gap:14px 18px; flex-wrap:wrap; font-size:12px}
}
@media (max-width:620px){
  .quicknav a{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line)}
  .quicknav a:last-child{border-bottom:0}
}

/* legal pages */
.legal{max-width:72ch}
.legal h2{font-family:var(--fd); font-size:clamp(19px,2.3vw,25px); font-weight:700; letter-spacing:-.01em; margin-top:38px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted); font-size:16.5px; line-height:1.62; margin-top:14px}
.legal ul{margin-top:12px; padding-left:20px}
.legal li{margin-top:8px}
.legal strong{color:var(--fg); font-weight:700}
.legal a{color:var(--accent); text-decoration:underline}
.legal .ph{color:var(--accent); font-weight:700; background:color-mix(in srgb,var(--accent) 12%,transparent); padding:0 4px; border-radius:2px}
.legal .updated{font-family:var(--fm); font-size:13px; color:var(--muted); margin-top:18px}

/* footer legal links */
.foot-legal{flex-basis:100%; display:flex; flex-wrap:wrap; gap:18px; padding-top:16px; margin-top:6px; border-top:1px solid var(--line)}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--fg)}

/* cookie notice */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--surface); border-top:1px solid var(--line-strong);
  padding:14px clamp(16px,4vw,40px); padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; box-shadow:0 -8px 30px rgba(0,0,0,.08)}
.cookiebar p{color:var(--muted); font-size:14px; line-height:1.5; flex:1 1 320px; min-width:0; margin:0}
.cookiebar a.ck-more{color:var(--accent); text-decoration:underline; white-space:nowrap; font-size:14px}
.cookiebar button{font-family:var(--fd); font-weight:700; font-size:14px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); padding:10px 20px; cursor:pointer; white-space:nowrap}
.cookiebar button:hover{background:var(--accent); border-color:var(--accent); color:#fff}

/* centered section headers (home) */
.sec-head.center{display:block; text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center h2{margin-top:16px; margin-inline:auto; max-width:24ch}