/*
Theme Name: Exclusive Construcción
Theme URI: https://exclusiveconstruccion.com
Author: Exclusive Construcción
Description: Editable desde Apariencia > Personalizar. Portada corporativa de Exclusive Construcción: acabados mecanizados de superficies (pañete, estuco y pintura con la línea Sika).
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: exclusive
*/

:root{--c:#E6E4DF;--c2:#D6D3CC;--g:#1F2327;--g2:#4A4F55;--l:#B08D57;--d:#D1B589}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c);color:var(--g);font-family:'Archivo',sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--d);outline-offset:3px}
.grain{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.w{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}
.hero{position:relative;height:800px;color:#fff;overflow:hidden;background:#15181a}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,16,18,.82) 0%,rgba(14,16,18,.45) 55%,rgba(14,16,18,.1) 100%),linear-gradient(180deg,rgba(14,16,18,.55) 0%,rgba(14,16,18,0) 28%,rgba(14,16,18,0) 60%,rgba(14,16,18,.55) 100%)}
.top{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:stretch;justify-content:space-between}
.plaque{background:#111;display:block;padding:6px 22px 6px 40px}
.plaque img{height:76px;width:auto}
.nav{display:flex;align-items:center;gap:34px;padding-right:40px;font-size:16px;color:#fff}
.nav a.l{padding:6px 0;border-bottom:1px solid transparent}
.nav a.l:hover{border-color:#fff}
.btn{display:inline-block;background:var(--d);color:var(--g);font-weight:600;font-size:16px;padding:16px 28px}
.btn:hover{background:#fff}
.btn.dk{background:var(--g);color:#fff}.btn.dk:hover{background:#000}
.tl{font-weight:600;font-size:16px;border-bottom:2px solid var(--d);padding-bottom:3px}
.hero .in{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:84px}
h1{margin:0 0 26px;font-weight:600;font-stretch:114%;font-size:clamp(40px,6.2vw,92px);line-height:1.02;letter-spacing:-.025em;max-width:11.5em}
.hero p{margin:0 0 34px;font-size:20px;line-height:1.55;max-width:30em;color:#E8E6E1}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.stmt{padding-top:112px;padding-bottom:96px;display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
.big{margin:0;font-weight:600;font-stretch:112%;font-size:clamp(30px,4.2vw,60px);line-height:1.08;letter-spacing:-.02em}
.stmt p{margin:0;font-size:19px;line-height:1.6;color:var(--g2);max-width:26em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--g);border-bottom:1px solid var(--g)}
.facts>div{padding:44px 36px 44px 0;display:flex;flex-direction:column;gap:12px}
.facts>div+div{padding-left:36px;border-left:1px solid var(--c2)}
.facts b{font-weight:600;font-stretch:112%;font-size:clamp(34px,4vw,56px);letter-spacing:-.02em;line-height:1}
.facts span{color:var(--g2);font-size:17px;line-height:1.45;max-width:18em}
.sika{flex-direction:row!important;align-items:center;gap:18px!important}
.sika img{height:60px;width:auto;background:#fff;padding:8px 12px}
.cap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding-top:112px;padding-bottom:112px}
.cap h2{margin:0 0 24px}
.cap p{margin:0;font-size:19px;line-height:1.6;color:var(--g2);max-width:24em}
.sec-h{margin:0;font-weight:600;font-stretch:112%;font-size:clamp(30px,3.8vw,54px);line-height:1.05;letter-spacing:-.02em}
svg.sec{width:100%;height:auto;display:block;overflow:visible}
svg.sec text{font-family:'Archivo',sans-serif}
.layer rect{transform-box:fill-box;transform-origin:left center}
.layer{animation:grow .8s cubic-bezier(.2,.7,.2,1) both}
.l3{animation-delay:.1s}.l2{animation-delay:.35s}.l1{animation-delay:.6s}.l0{animation-delay:.85s}
.lab{animation:fade .6s ease both}
.lb3{animation-delay:.5s}.lb2{animation-delay:.75s}.lb1{animation-delay:1s}.lb0{animation-delay:1.25s}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.layer,.lab{animation:none}}
.only-m{display:none}
.svh{padding-bottom:40px}
.svh h2{margin:0 0 40px}
.pn{display:flex;height:600px;gap:0}
.pnl{position:relative;flex:1 1 0;min-width:0;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 32px;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1);background:#222;border-right:1px solid rgba(255,255,255,.25)}
.pnl:last-child{border-right:0}
.pnl:hover,.pnl:focus-within{flex-grow:2.1}
.pnl>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.pnl:hover>img{transform:scale(1.04)}
.pnl:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,16,18,.1) 30%,rgba(14,16,18,.82) 100%)}
.pnl.solid{background:#CDB68A;color:var(--g)}.pnl.solid:before{display:none}
.pnl .t{position:relative;z-index:2;min-height:230px}
.pnl h3{margin:0 0 12px;font-weight:600;font-stretch:112%;font-size:34px;letter-spacing:-.015em;line-height:1.05}
.pnl p{margin:0;font-size:17px;line-height:1.5;max-width:24em}
.sys{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--g)}
.sys>div{padding:44px 40px 52px 0;border-bottom:1px solid var(--g)}
.sys>div:nth-child(even){padding-left:40px;border-left:1px solid var(--c2)}
.sys h3{margin:0 0 14px;font-weight:600;font-stretch:112%;font-size:clamp(26px,2.8vw,38px);letter-spacing:-.015em}
.sys p{margin:0;font-size:18px;line-height:1.6;color:var(--g2);max-width:26em}
.band{position:relative;height:560px;overflow:hidden;color:#fff;background:#222;margin-top:112px}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.band:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,16,18,.78),rgba(14,16,18,.1) 70%)}
.band .in{position:absolute;z-index:2;left:0;right:0;bottom:64px}
.band .big{max-width:14em}
.pr{background:var(--c2)}
.pr .w{padding-top:96px;padding-bottom:104px}
.pr h2{margin:0 0 64px;max-width:14em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative}
.steps:before{content:"";position:absolute;left:0;right:0;top:9px;border-top:2px solid var(--g)}
.st{position:relative;padding-top:44px}
.st:before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--d);border:2px solid var(--g);border-radius:50%}
.st h3{margin:0 0 12px;font-weight:600;font-stretch:112%;font-size:28px}
.st p{margin:0;font-size:18px;line-height:1.55;color:var(--g2);max-width:22em}
.ct{position:relative;background:var(--g);color:#fff}
.ct .w{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end;padding-top:112px;padding-bottom:96px}
.ct h2{margin:0 0 22px;font-weight:600;font-stretch:116%;font-size:clamp(44px,6.4vw,96px);line-height:1;letter-spacing:-.025em}
.ct p{margin:0 0 30px;font-size:19px;line-height:1.55;color:#C9C9C4;max-width:26em}
.info{display:flex;flex-direction:column;gap:18px;font-size:20px;border-top:1px solid #4A4F55;padding-top:24px}
.info a:hover{color:var(--d)}
.info small{display:block;font-size:14px;color:#9A9A94;margin-bottom:2px}
.ft{background:#121416;color:#9A9A94;font-size:14px}
.ft .w{padding-top:22px;padding-bottom:22px}
@media (max-width:900px){
.w{padding-left:24px;padding-right:24px}
.plaque{padding:4px 14px 4px 24px}.plaque img{height:56px}
.nav{padding-right:24px;gap:16px}.nav .l{display:none}.btn{padding:13px 18px;font-size:15px}
.hero{height:680px}.hero .in{padding-bottom:44px}.hero p{font-size:18px}
.stmt{grid-template-columns:1fr;gap:24px;padding-top:64px;padding-bottom:56px}
.facts{grid-template-columns:1fr}.facts>div{padding:26px 0!important;border-left:0!important}.facts>div+div{border-top:1px solid var(--c2)}
.cap{grid-template-columns:1fr;gap:32px;padding-top:64px;padding-bottom:64px}
.only-d{display:none}.only-m{display:block}
.svh h2{margin-bottom:28px}
.pn{flex-direction:column;height:auto}
.pnl{flex:none;height:300px;padding:26px 24px;border-right:0;border-bottom:1px solid rgba(255,255,255,.25)}
.pnl:hover,.pnl:focus-within{flex-grow:0}.pnl h3{font-size:28px}.pnl .t{min-height:0}
.sys{grid-template-columns:1fr}.sys>div,.sys>div:nth-child(even){padding:30px 0!important;border-left:0}
.band{height:380px;margin-top:64px}.band .in{bottom:auto;top:36px}.band:before{background:linear-gradient(180deg,rgba(14,16,18,.78),rgba(14,16,18,.1) 80%)}
.pr .w{padding-top:64px;padding-bottom:64px}.pr h2{margin-bottom:40px}
.steps{grid-template-columns:1fr;gap:34px}
.steps:before{left:9px;right:auto;top:0;bottom:0;border-top:0;border-left:2px solid var(--g)}
.st{padding-top:0;padding-left:48px}
.ct .w{grid-template-columns:1fr;gap:40px;padding-top:64px;padding-bottom:56px}
}

.site{background-color:#E6E4DF;color:#1F2327;font-family:'Archivo',sans-serif}
.screen-reader-text{position:absolute;left:-9999px}
