:root{
  --noche:#0F0F11; --carbon:#1A1A1E; --champan:#C2A36B; --champan-soft:#d8c191;
  --hueso:#F4F2ED; --niebla:#8A8A8F; --linea:rgba(244,242,237,.08);
  --sans:'Montserrat',sans-serif; --body:'Inter',sans-serif; --serif:'Cormorant Garamond',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--noche);color:var(--hueso);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;opacity:0;animation:pageIn .9s ease forwards}
@keyframes pageIn{to{opacity:1}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--champan);color:var(--noche)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--champan);color:var(--noche);padding:10px 16px;border-radius:2px}
:focus-visible{outline:2px solid var(--champan);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.32em;color:var(--champan);text-transform:uppercase}
.h-sans{font-family:var(--sans);font-weight:300;letter-spacing:.02em;line-height:1.2}
em{font-family:var(--serif);font-style:italic;color:var(--champan);font-weight:300}

.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:15px 34px;border-radius:2px;transition:.3s;cursor:pointer;border:1px solid var(--champan)}
.btn-gold{background:var(--champan);color:var(--noche)}
.btn-gold:hover{background:var(--champan-soft);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--champan)}
.btn-ghost:hover{background:var(--champan);color:var(--noche)}

/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s;padding:18px 0}
header.scrolled{background:rgba(15,15,17,.92);backdrop-filter:blur(10px);padding:10px 0;border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo img{height:54px;width:auto;transition:.4s}
header.scrolled .logo img{height:42px}
.links{display:flex;gap:30px;align-items:center}
.links a{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--niebla);transition:.25s;position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--champan);transition:width .3s}
.links a:not(.btn):hover{color:var(--hueso)}
.links a:not(.btn):hover::after,.links a.active::after{width:100%}
.links a.active{color:var(--hueso)}
.links .btn{padding:11px 22px}
.burger{display:none;background:none;border:none;color:var(--hueso);font-size:24px;cursor:pointer}

/* HERO HOME (slider) */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;background:var(--carbon);overflow:hidden}
.hero-slider{position:absolute;inset:0}
.hero-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 24s infinite}
.hero-slider .slide:nth-child(1){animation-delay:0s}
.hero-slider .slide:nth-child(2){animation-delay:8s}
.hero-slider .slide:nth-child(3){animation-delay:16s}
@keyframes heroFade{0%{opacity:0;transform:scale(1.04)}3%{opacity:1}30%{opacity:1}34%{opacity:0;transform:scale(1.1)}100%{opacity:0}}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,15,17,.94) 0%,rgba(15,15,17,.6) 55%,rgba(15,15,17,.35) 100%)}
.hero-content{position:relative;z-index:2;max-width:660px;animation:rise 1.2s .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(34px,5.5vw,62px);margin:22px 0 20px}
.hero p{font-size:17px;color:var(--niebla);max-width:480px;margin-bottom:36px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-size:10px;letter-spacing:.3em;color:var(--niebla);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:34px;background:var(--champan);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* HERO INTERNO (paginas) */
.hero-inner{height:62vh;min-height:420px;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-inner .bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 20s ease-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero-inner .shade{position:absolute;inset:0;background:linear-gradient(transparent,rgba(15,15,17,.55) 45%,var(--noche))}
.hero-inner .wrap{position:relative;z-index:2;padding-bottom:54px;animation:rise 1.1s .2s ease both}
.hero-inner h1{font-size:clamp(30px,4.6vw,52px);margin-top:14px}

/* SECTIONS */
section{padding:104px 0}
.sec-head{max-width:620px;margin-bottom:54px}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);margin:16px 0 0}
.alt{background:var(--carbon)}

/* SERVICIOS PREVIEW (home) */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.serv{background:var(--noche);padding:46px 36px;transition:.35s;display:block}
.serv:hover{background:var(--carbon)}
.serv .ico{font-size:26px;color:var(--champan);line-height:1}
.serv .tagline{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--niebla);margin-top:20px;display:block}
.serv h3{font-family:var(--sans);font-weight:300;letter-spacing:.03em;font-size:21px;margin:6px 0 12px;color:var(--hueso)}
.serv p{color:var(--niebla);font-size:14.5px;margin-bottom:22px}
.serv .more{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--champan)}

/* GALERIA / PROYECTOS */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.obra{position:relative;aspect-ratio:4/3;background:var(--carbon);border:1px solid var(--linea);overflow:hidden;display:flex;align-items:flex-end}
.obra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.obra:hover img{transform:scale(1.07)}
.obra figcaption{position:relative;z-index:2;width:100%;padding:18px;background:linear-gradient(transparent,rgba(15,15,17,.92));opacity:0;transform:translateY(10px);transition:.4s}
.obra:hover figcaption{opacity:1;transform:none}
.obra .tag{font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--champan);text-transform:uppercase}
.obra .tt{font-family:var(--sans);font-weight:300;font-size:18px}
.obra.tall{grid-row:span 2;aspect-ratio:auto}
.obra.wide{grid-column:span 2}

/* NOSOTROS */
.nos-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.nos-txt h2{font-size:clamp(26px,3.4vw,40px);margin:16px 0 22px}
.nos-txt p{color:var(--niebla);margin-bottom:18px}
.nos-stats{display:flex;gap:36px;margin-top:34px;flex-wrap:wrap}
.nos-stats .v{font-family:var(--serif);font-size:38px;color:var(--champan);font-weight:300;line-height:1}
.nos-stats .l{font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--niebla);margin-top:4px}
.nos-img{aspect-ratio:3/4;background:var(--noche);border:1px solid var(--linea);overflow:hidden}
.nos-img img{width:100%;height:100%;object-fit:cover}

/* CTA BANNER */
.cta-banner{padding:96px 0;text-align:center;background:var(--carbon);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cta-banner h2{font-size:clamp(26px,3.6vw,42px);margin:14px 0 28px}

/* CONTACTO */
.con-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.con-info h2{font-size:clamp(26px,3.4vw,40px);margin:16px 0 24px}
.con-info p{color:var(--niebla);margin-bottom:30px;max-width:400px}
.con-line{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-size:15px}
.con-line b{font-family:var(--sans);font-weight:400;color:var(--champan);font-size:11px;letter-spacing:.15em;text-transform:uppercase;min-width:90px}
.wa{margin-top:24px}
.social{display:flex;gap:14px;margin-top:32px}
.social a{width:42px;height:42px;border:1px solid var(--linea);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--niebla);font-size:16px;transition:.3s}
.social a:hover{border-color:var(--champan);color:var(--champan);transform:translateY(-3px)}
form{display:flex;flex-direction:column;gap:16px}
label{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);margin-bottom:6px;display:block}
input,textarea{width:100%;background:var(--carbon);border:1px solid var(--linea);color:var(--hueso);padding:13px 15px;font-family:var(--body);font-size:15px;border-radius:2px;transition:.25s}
input:focus,textarea:focus{border-color:var(--champan);outline:none}
textarea{resize:vertical;min-height:110px}

/* FOOTER */
footer{background:var(--carbon);border-top:1px solid var(--linea);padding:46px 0 30px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.foot img{height:60px;width:auto}
.foot small{color:var(--niebla);font-size:12px;letter-spacing:.04em}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);transition:.25s}
.foot-links a:hover{color:var(--champan)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:880px){
  .links{position:fixed;inset:0;background:var(--noche);flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:.4s}
  .links.open{transform:none}
  .links a{font-size:14px}
  .burger{display:block;z-index:101}
  .serv-grid,.galeria,.nos-grid,.con-grid{grid-template-columns:1fr}
  .obra.tall{grid-row:auto;aspect-ratio:4/3}
  .obra.wide{grid-column:auto}
  .nos-img{aspect-ratio:4/3}
  .hero-shade{background:linear-gradient(rgba(15,15,17,.55),rgba(15,15,17,.94))}
  section{padding:74px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  body{opacity:1}
  .reveal{opacity:1;transform:none}
  .hero-slider .slide:nth-child(1){opacity:1}
}

/* footer social */
.foot .social{margin-top:0}
.foot .social a{width:38px;height:38px;font-size:15px}

/* ANTES / DESPUÉS (remodelaciones) */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ba-item .ba-cap{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--champan);margin-top:12px;text-align:center}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;border:1px solid var(--linea);user-select:none;background:#111}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .tag{position:absolute;top:12px;padding:5px 12px;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(15,15,17,.72);border-radius:2px;z-index:2}
.ba .t-antes{left:12px}
.ba .t-despues{right:12px;color:var(--champan)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--champan);transform:translateX(-1px);z-index:2}
.ba .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--champan);color:var(--noche);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:ew-resize;box-shadow:0 2px 12px rgba(0,0,0,.4);z-index:3}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.scope{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.scope span{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--niebla);border:1px solid var(--linea);border-radius:2px;padding:8px 14px}
@media(max-width:880px){.ba-grid{grid-template-columns:1fr}}

/* PROYECTOS */
.proj-intro{max-width:680px;margin-bottom:50px}
.proj-feature{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--linea);border-radius:4px;overflow:hidden}
.proj-feature .pf-img{position:relative;aspect-ratio:4/3;overflow:hidden;display:block}
.proj-feature .pf-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.proj-feature:hover .pf-img img{transform:scale(1.05)}
.proj-feature .pf-badge{position:absolute;top:16px;left:16px;z-index:2;background:rgba(15,15,17,.75);color:var(--champan);font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:6px 13px;border-radius:2px}
.proj-feature .pf-body{padding:46px;display:flex;flex-direction:column;justify-content:center;background:var(--carbon)}
.proj-feature .pf-type{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--champan)}
.proj-feature .pf-name{font-family:var(--sans);font-weight:300;font-size:clamp(24px,3vw,34px);letter-spacing:.02em;margin:10px 0 6px}
.proj-feature .pf-loc{color:var(--niebla);font-size:14px;margin-bottom:18px}
.proj-feature .pf-desc{color:var(--niebla);font-size:15px;margin-bottom:22px}
.proj-more{text-align:center;color:var(--niebla);font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:46px}
.proj-more::before,.proj-more::after{content:"";display:inline-block;width:40px;height:1px;background:var(--linea);vertical-align:middle;margin:0 14px}
@media(max-width:880px){.proj-feature{grid-template-columns:1fr}.proj-feature .pf-body{padding:32px}}

/* PESTAÑAS (cortinas por tipo) */
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.tab{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla);border:1px solid var(--linea);background:transparent;padding:11px 20px;border-radius:2px;cursor:pointer;transition:.25s}
.tab:hover{color:var(--hueso);border-color:var(--champan)}
.tab.active{background:var(--champan);color:var(--noche);border-color:var(--champan)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:tabIn .5s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.empty-note{text-align:center;color:var(--niebla);padding:56px 24px;border:1px dashed var(--linea);border-radius:4px;font-size:15px}
.empty-note a{color:var(--champan)}

/* GRID de tarjetas de proyecto (renderización) */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.proj-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;border:1px solid var(--linea);text-decoration:none}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.proj-card:hover img{transform:scale(1.06)}
.proj-card .ov{position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(15,15,17,.92));display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.proj-card .ptype{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--champan)}
.proj-card .pname{font-family:var(--sans);font-weight:300;font-size:22px;letter-spacing:.02em;color:var(--hueso);margin:6px 0 3px}
.proj-card .ploc{color:var(--niebla);font-size:13px}
.proj-card .pgo{margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--champan);opacity:0;transform:translateY(8px);transition:.4s}
.proj-card:hover .pgo{opacity:1;transform:none}