/* Sangar S. XXI · web premium v2 (26/10/2026)
   Paleta: piedra clara + carbón + dorado del logo. Display: Cormorant Garamond · marca: Cinzel · texto: Hanken Grotesk.
   Las clases antiguas (.c .k .oro .btn .btn2 .s .alt .dos .lst .pasos .ct .barra .wa) se mantienen para las páginas de servicio. */
:root{
  --ink:#141416; --ink2:#1d1d21; --ink3:#2a2a30;
  --stone:#f3efe8; --stone2:#e9e3d8; --paper:#fbf9f5;
  --gold:#a8822f; --gold2:#d6b46a; --gold3:#efd9a4;
  --mute:#6b665e; --mute-d:#aaa49a; --line:#ddd5c7; --line-d:#34343b;
  --display:"Cormorant Garamond",Georgia,serif; --brand:Cinzel,Georgia,serif; --text:"Hanken Grotesk",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.c{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.04;margin:0;letter-spacing:-.01em;text-wrap:balance}
h3{font-weight:600}
.oro{color:var(--gold);font-style:italic}
.k{font-family:var(--brand);color:var(--gold);font-size:12.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;display:block;margin-bottom:18px}
.lead{color:var(--mute);font-size:18.5px;max-width:640px;margin:20px 0 0}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper)!important;text-decoration:none;font:600 15px var(--text);letter-spacing:.04em;padding:17px 28px;border:1px solid var(--ink);border-radius:0;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--gold);border-color:var(--gold)}
.btn2{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;color:inherit;text-decoration:none;font:600 15px var(--text);letter-spacing:.04em;padding:16px 26px;transition:background .25s,color .25s}
.btn2:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* cabecera */
header{position:fixed;top:0;left:0;right:0;z-index:50;color:#fff;background:#0b0b0d;box-shadow:0 1px 0 rgba(168,130,47,.35);transition:background .35s,color .35s,box-shadow .35s}
header.sol{background:#0b0b0d;color:#fff;box-shadow:0 1px 0 rgba(168,130,47,.35)}
.hd{display:flex;align-items:center;justify-content:space-between;height:86px;gap:24px}
.hd .logo{height:54px;width:auto}
.hd .logo-c{display:none}
/* cabecera siempre negra (26/10, pedido por Natalia): siempre el logo dorado */
nav{display:flex;align-items:center;gap:30px}
nav a{text-decoration:none;font-weight:500;font-size:14.5px;letter-spacing:.06em;opacity:.92}
nav a:hover{color:var(--gold2);opacity:1}
header.sol nav a:hover{color:var(--gold2)}
nav .btn{padding:12px 20px;font-size:13.5px;background:transparent;border-color:currentColor;color:inherit!important}
nav .btn:hover{background:var(--gold);border-color:var(--gold);color:#fff!important}
.mb{display:none;background:none;border:0;color:inherit;font-size:26px;cursor:pointer}

/* hero */
.hero{position:relative;min-height:clamp(620px,96vh,980px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.hero .media{position:absolute;inset:0}
.hero .media img{width:100%;height:100%;object-fit:cover;animation:zoom 22s ease-out both}.hero .media video{width:100%;height:100%;object-fit:cover}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,13,.82) 0%,rgba(11,11,13,.55) 45%,rgba(11,11,13,.25) 75%),linear-gradient(180deg,rgba(11,11,13,.35) 0%,rgba(11,11,13,0) 40%,rgba(11,11,13,.85) 100%)}
.hero .c{position:relative;z-index:2;width:100%;padding-top:130px;padding-bottom:64px}
.hero h1{font-size:clamp(46px,7.4vw,104px);max-width:1000px}
.hero h1 em{font-style:italic;color:var(--gold3)}
.hero p{font-size:19px;color:#e9e5dd;max-width:560px;margin:24px 0 34px}
.hero .bts{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn{background:var(--gold);border-color:var(--gold);color:#fff!important}
.hero .btn:hover{background:#fff;color:var(--ink)!important;border-color:#fff}
.hero .btn2{color:#fff}.hero .btn2:hover{background:#fff;color:var(--ink);border-color:#fff}
.franja{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.22);margin-top:56px}
.franja div{padding:20px 20px 0 0}
.franja b{display:block;font-family:var(--display);font-size:26px;font-weight:500;color:#fff}
.franja span{font-size:13.5px;color:#cfc9bf;letter-spacing:.03em}

/* bloques */
section.s{padding:130px 0}
.s h2{font-size:clamp(38px,4.6vw,64px);max-width:860px}
.alt{background:var(--stone)}
.osc{background:var(--ink);color:var(--paper)}
.osc .lead,.osc p{color:var(--mute-d)}
.dos{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.dos img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* manifiesto */
.manif{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:end}
.manif .big{font-family:var(--display);font-size:clamp(30px,3.3vw,46px);line-height:1.18;font-weight:500}
.manif .big em{color:var(--gold)}
.manif img{aspect-ratio:3/4;object-fit:cover;width:100%}
.firma{margin-top:30px;display:flex;gap:40px;flex-wrap:wrap;color:var(--mute);font-size:14.5px}
.firma b{display:block;font-family:var(--display);font-size:34px;color:var(--ink);font-weight:500}

/* servicios (lista editorial con imagen) */
.servs{margin-top:64px;border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:70px 1.1fr 1.4fr 180px 40px;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .3s}
.srow:hover{padding-left:12px}
.srow .n{font-family:var(--brand);color:var(--gold);font-size:13px;letter-spacing:.2em}
.srow h3{font-size:clamp(26px,2.6vw,36px)}
.srow p{margin:0;color:var(--mute);font-size:15.5px}
.srow .zona{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:6px 10px;justify-self:start}
.srow .zona.mad{color:var(--gold);border-color:var(--gold)}
.srow .fl{font-size:24px;color:var(--gold);transition:transform .3s}
.srow:hover .fl{transform:translateX(6px)}
.preview{position:fixed;width:340px;aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .25s,transform .25s;background:center/cover;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* proyectos */
.proy{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:60px}
.pj{position:relative;overflow:hidden;background:var(--ink2);color:#fff;cursor:pointer;border:0;padding:0;text-align:left;font:inherit}
.pj img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.pj:hover img{transform:scale(1.05)}
.pj .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.pj .cap b{display:block;font-family:var(--display);font-size:24px;font-weight:500}
.pj .cap span{font-size:13px;color:#ddd;letter-spacing:.06em}
.pj.a{grid-column:span 7;aspect-ratio:7/5}.pj.b{grid-column:span 5;aspect-ratio:5/5}
.pj.c3{grid-column:span 4;aspect-ratio:4/5}.pj.d{grid-column:span 8;aspect-ratio:8/5}
.nota{color:var(--mute);font-size:12.5px;margin-top:14px;letter-spacing:.03em}

/* antes / después */
.ad{position:relative;margin-top:60px;aspect-ratio:16/8;overflow:hidden;user-select:none;background:var(--ink2)}
.ad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad .despues{clip-path:inset(0 0 0 50%)}
.ad .barra-ad{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px)}
.ad .barra-ad:after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:700;letter-spacing:4px}
.ad .et{position:absolute;top:18px;font-family:var(--brand);font-size:12px;letter-spacing:.25em;color:#fff;background:rgba(0,0,0,.45);padding:7px 12px}
.ad .et.i{left:18px}.ad .et.d{right:18px}
.ad input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* proceso */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid var(--line-d)}
.paso{padding:34px 28px 0 0;border-top:0}
.paso .n{font-family:var(--display);font-size:60px;color:var(--gold2);line-height:1}
.paso h3{font-size:28px;margin:14px 0 10px}
.paso p{margin:0;font-size:15.5px}
.alt .pasos,.s:not(.osc) .pasos{border-color:var(--line)}
.s:not(.osc) .paso .n{color:var(--gold)}
.s:not(.osc) .paso p{color:var(--mute)}

/* garantías */
.gar{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:60px}
.gar div{border-top:1px solid var(--ink);padding-top:22px}
.gar h3{font-size:26px;margin-bottom:10px}
.gar p{margin:0;color:var(--mute);font-size:15.5px}

/* lista (páginas de servicio) */
.lst{list-style:none;padding:0;margin:30px 0 0}
.lst li{padding:15px 0 15px 34px;border-bottom:1px solid var(--line);position:relative}
.lst li:before{content:"";position:absolute;left:0;top:27px;width:18px;height:1px;background:var(--gold)}
.lst b{font-weight:600}.lst span{color:var(--mute);display:block;font-size:14.5px}

/* zona */
.zonas{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.zonas div{background:var(--paper);padding:40px;border:1px solid var(--line)}
.zonas b{font-family:var(--display);font-size:34px;font-weight:500;display:block;margin-bottom:8px}
.zonas p{margin:0;color:var(--mute)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--display);font-size:24px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary:after{content:"+";color:var(--gold);font-family:var(--text);font-weight:300;font-size:28px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mute);max-width:760px;margin:12px 0 0}

/* cta + contacto */
.cta{position:relative;color:#fff;padding:140px 0;background:var(--ink) center/cover;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background:rgba(20,20,22,.72)}
.cta .c{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta h2{font-size:clamp(40px,5vw,72px);max-width:900px}
.cta p{color:#ddd8cf;max-width:560px;margin:20px auto 34px;font-size:18px}
.cta .bts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta .btn{background:var(--gold);border-color:var(--gold)}.cta .btn:hover{background:#fff;color:var(--ink)!important;border-color:#fff}
.cta .btn2{color:#fff}.cta .btn2:hover{background:#fff;color:var(--ink);border-color:#fff}
.ct{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.ct .info a{display:flex;gap:14px;align-items:center;text-decoration:none;font-size:18px;font-weight:600;margin:16px 0}
.ct .info a span{color:var(--gold);width:22px}
form{background:#fff;border:1px solid var(--line);padding:38px}
form .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:16px 0 7px}
input,select,textarea{width:100%;background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:0;padding:14px;font:inherit;font-size:15.5px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--mute);margin:18px 0;text-transform:none;letter-spacing:0;font-weight:400}
.ck input{width:auto;margin-top:3px}
form .btn{width:100%;justify-content:center}
.ok{display:none;margin-top:14px;color:#2f7d4b;font-weight:600}
.err{display:none;margin-top:10px;color:#b4472e;font-size:13.5px}

footer{background:var(--ink);color:var(--mute-d);padding:80px 0 34px;font-size:14px}
footer .fr{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer img{height:54px;width:auto}
footer h4{font-family:var(--brand);color:var(--gold2);font-size:12px;letter-spacing:.25em;font-weight:600;margin:0 0 16px}
footer a{color:var(--mute-d);text-decoration:none;display:block;margin:6px 0}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid var(--line-d);margin-top:56px;padding-top:24px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
footer .legal a{display:inline;margin:0 0 0 18px}

.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:45}
.barra{display:none}

/* entrada suave (siempre visible si no hay JS) */
.rv{transition:opacity .9s,transform .9s}
.js .rv:not(.in){opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.hero .media img,.hero .media video{animation:none}.js .rv:not(.in){opacity:1;transform:none}}

@media(max-width:1000px){
  nav{display:none;position:absolute;top:86px;left:0;right:0;background:#0b0b0d;color:#fff;padding:20px 24px 26px;flex-direction:column;align-items:flex-start;gap:16px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
  nav.abierto{display:flex}
  .mb{display:block}
  .franja{grid-template-columns:1fr 1fr;row-gap:16px}
  section.s{padding:86px 0}
  .dos,.manif,.ct,.zonas{grid-template-columns:1fr;gap:44px}
  .srow{grid-template-columns:44px 1fr 30px;gap:6px 14px}
  .srow p{grid-column:2/3}.srow .zona{grid-column:2/3}.srow .fl{grid-row:1;grid-column:3}
  .proy{grid-template-columns:1fr 1fr}.pj.a,.pj.b,.pj.c3,.pj.d{grid-column:span 2;aspect-ratio:4/3}
  .pasos,.gar{grid-template-columns:1fr 1fr;gap:28px}
  .ad{aspect-ratio:4/3}
  footer .fr{grid-template-columns:1fr}
  .barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:10px;padding:10px 12px;background:rgba(251,249,245,.97);border-top:1px solid var(--line)}
  .barra a{flex:1;justify-content:center;padding:14px 10px;font-size:14.5px}
  .barra .btn2{color:var(--ink)}
  .wa{display:none} body{padding-bottom:72px}
  .preview{display:none}
}
@media(max-width:560px){ .pasos,.gar,.franja{grid-template-columns:1fr} form{padding:24px} form .fila{grid-template-columns:1fr} .hd .logo{height:40px} }

/* vídeos reales de obra */
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;max-width:900px}
.clips video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:4px;display:block}

@media(max-width:560px){.clips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory}.clips video{scroll-snap-align:start}}

/* banner cookies */
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:620px;margin:0 auto;background:#0b0b0d;color:#eee;border:1px solid rgba(168,130,47,.5);padding:16px 18px;display:flex;gap:16px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:14px;line-height:1.5}
.ckb[hidden]{display:none}.ckb p{margin:0}.ckb a{color:var(--gold3)}.ckb button{background:var(--gold);color:#fff;border:0;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
/* más servicios */
.mas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:36px}.mas span{color:var(--mute);font-size:14px;margin-right:4px}
.mas a{border:1px solid var(--line);padding:9px 14px;text-decoration:none;color:inherit;font-size:14px;background:#fff;transition:border-color .3s}.mas a:hover{border-color:var(--gold)}.mas a.todo{border-color:var(--gold);color:var(--gold);font-weight:600}
.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

a.pj{display:block;text-decoration:none}