:root{
  --black:#141311;
  --white:#ffffff;
  --off:#F5F4F1;
  --sub:#6b6a66;
  --line:#e4e2dc;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:'Poppins',sans-serif; background:var(--white); color:var(--black); -webkit-font-smoothing:antialiased; opacity:0; animation:pageIn .6s ease forwards;}
@keyframes pageIn{ to{opacity:1;} }
body.fade-out{opacity:0 !important; transition:opacity .34s ease;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3,.display{font-family:'Aldrich',sans-serif; text-transform:uppercase; letter-spacing:0.01em;}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}

/* ===== NAV ===== */
nav{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5vw; background:rgba(20,19,17,.92); backdrop-filter:blur(6px);
  transition:padding .3s ease;
}
nav img.logo{height:46px; width:auto; object-fit:contain;}
.navlinks{display:flex; gap:40px; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); font-weight:400;}
.navlinks a{opacity:.82; transition:opacity .2s; position:relative; padding-bottom:4px;}
.navlinks a:hover{opacity:1;}
.navlinks a.active{opacity:1;}
.navlinks a.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--white);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:22px; background:none; border:none; cursor:pointer; padding:0; z-index:210;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--white); transition:transform .3s ease, opacity .3s ease;}
nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
body.menu-open{overflow:hidden;}

/* ===== HERO ===== */
.hero{position:relative; height:82vh; min-height:520px; overflow:hidden;}
.hero .kb{position:absolute; inset:-4%; animation:kenburns 22s ease-in-out infinite alternate;}
@keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.09);} }
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,17,.25) 0%, rgba(20,19,17,.2) 40%, rgba(20,19,17,.88) 100%);}
.hero-content{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 5vw 60px;}
.hero .eyebrow{color:var(--white); opacity:.8;}
.hero h1{color:var(--white); font-size:clamp(28px,4.2vw,54px); line-height:1.12; max-width:840px;}
.hero p{color:var(--white); opacity:.85; font-size:15px; max-width:460px; margin-top:16px; line-height:1.7; font-weight:300;}
.scroll-cue{position:absolute; right:5vw; bottom:34px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--white); opacity:.7; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:36px; background:var(--white); opacity:.6; animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ===== HERO INTERACTIVO "RAYO X" ===== */
/* Requiere 2 fotos del MISMO encuadre: exterior cerrado (hero-exterior-xray.jpg)
   e interior abierto (hero-interior-xray.jpg). Ver checklist de fotos. */
.hero.xray .reveal-layer{
  -webkit-mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,45%), black 0%, black 190px, transparent 260px);
  mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,45%), black 0%, black 190px, transparent 260px);
}
.hero.xray .hint{
  margin-top:22px; display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--white); opacity:.8;
  transition:opacity .4s ease;
}
.hero.xray .hint .pulse{width:6px; height:6px; border-radius:50%; background:var(--white); animation:heroPulse 1.6s infinite;}
@keyframes heroPulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@media(max-width:880px){
  .hero.xray .reveal-layer{
    -webkit-mask-image:radial-gradient(circle 170px at var(--mx,50%) var(--my,45%), black 0%, black 120px, transparent 170px);
    mask-image:radial-gradient(circle 170px at var(--mx,50%) var(--my,45%), black 0%, black 120px, transparent 170px);
  }
}

/* ===== PILL BUTTONS ===== */
.pill-btn{
  display:inline-block; padding:15px 34px;
  border:1.5px solid var(--white); border-radius:40px; color:var(--white);
  font-size:12.5px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500;
  transition:all .25s;
}
.pill-btn:hover{background:var(--white); color:var(--black);}
.pill-btn.dark{border-color:var(--black); color:var(--black);}
.pill-btn.dark:hover{background:var(--black); color:var(--white);}

/* ===== SECTIONS ===== */
section{padding:100px 5vw;}
section.off{background:var(--off);}
.section-title{font-size:clamp(26px,3.4vw,42px); text-align:center; margin-bottom:20px;}
.section-sub{text-align:center; color:var(--sub); font-size:14.5px; max-width:560px; margin:0 auto 60px; font-weight:300; line-height:1.7;}
.eyebrow{display:block; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--sub); margin-bottom:20px; font-weight:500;}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(30px) scale(.98); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* hero content parallax (set via JS) */
.hero-content{will-change:transform, opacity;}

/* ===== PILLARS strip ===== */
/* Franja negra entre el hero y la tira de fotos (solo home): 32px en móvil, 72px desde 1600px */
.hero-franja{height:clamp(32px, 4.5vw, 72px); background:var(--black);}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.pillars .p{background:var(--white); aspect-ratio:1/0.85; display:flex; flex-direction:column; justify-content:flex-end; padding:32px; position:relative; overflow:hidden;}
.pillars .p img{position:absolute; inset:0; z-index:0; transition:transform .6s ease;}
.pillars .p:hover img{transform:scale(1.06);}
.pillars .p::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,17,0) 30%, rgba(20,19,17,.75) 100%); z-index:1;}
.pillars .p h3{position:relative; z-index:2; color:var(--white); font-size:20px;}
/* ===== two-col media/text ===== */
.split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center;}
.split.rev{grid-template-columns:1.05fr 0.95fr;}
.split .visual{aspect-ratio:4/5; overflow:hidden;}
.split blockquote{font-size:clamp(17px,1.8vw,21px); line-height:1.7; font-weight:300; color:#2a2924;}

/* ===== REVIEWS ===== */
.review-slider{position:relative; padding:0 56px; overflow:hidden;}
.review-track{display:flex; gap:28px; transition:transform .55s cubic-bezier(.16,.8,.24,1);}
.review-card{flex:0 0 100%; background:var(--white); border:1px solid var(--line); padding:38px 32px; box-sizing:border-box;}
.review-card .stars{color:#b8934a; letter-spacing:.2em; font-size:13px; margin-bottom:18px;}
.review-card blockquote{font-size:14.5px; font-weight:300; line-height:1.85; color:#2a2924; margin-bottom:20px; min-height:110px;}
.review-card cite{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); font-style:normal;}
.review-arrow{position:absolute; top:50%; transform:translateY(-50%); background:var(--white); border:1px solid var(--line); width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:16px; z-index:2; transition:background .2s;}
.review-arrow:hover{background:var(--off);}
.review-arrow.prev{left:0;}
.review-arrow.next{right:0;}
.review-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.review-dots span{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, transform .2s;}
.review-dots span.active{background:var(--black); transform:scale(1.3);}
@media(min-width:881px){
  .review-card{flex-basis:calc(33.333% - 19px);}
}
@media(max-width:880px){
  .review-slider{padding:0 44px;}
}

/* ===== process timeline ===== */
.timeline{position:relative;}
.tstep{display:grid; grid-template-columns:120px 1fr 1fr; gap:36px; align-items:center; padding:50px 0; border-top:1px solid var(--line);}
.tstep:first-child{border-top:none;}
.tstep .num{font-family:'Aldrich',sans-serif; font-size:44px; color:var(--line); line-height:1;}
.tstep .visual{aspect-ratio:5/4; overflow:hidden;}
.tstep h3{font-size:20px; margin-bottom:12px;}
.tstep p{color:var(--sub); font-size:14.5px; line-height:1.75; font-weight:300;}

/* ===== gallery + filters ===== */
.filters{display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap;}
.filters button{
  background:transparent; border:1px solid var(--line); color:var(--sub);
  padding:10px 22px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; border-radius:30px; transition:all .2s; font-family:'Poppins',sans-serif; font-weight:500;
}
.filters button.active{background:var(--black); border-color:var(--black); color:var(--white);}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery .ph{aspect-ratio:4/5; overflow:hidden; position:relative; transition:opacity .3s, transform .3s;}
.gallery .ph img{transition:transform .6s ease;}
.gallery .ph:hover img{transform:scale(1.06);}
.gallery .ph .cap{position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(0deg, rgba(20,19,17,.8), transparent); color:var(--white); font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:opacity .3s;}
.gallery .ph:hover .cap{opacity:1;}
.gallery .ph.hide{display:none;}

/* ===== testimonial ===== */
.testimonial-block{text-align:center; max-width:720px; margin:0 auto;}
.testimonial-block blockquote{font-size:clamp(18px,2.2vw,25px); font-weight:300; line-height:1.6; margin-bottom:20px;}
.testimonial-block cite{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); font-style:normal;}

/* ===== contact band ===== */
.contact-band{background:var(--black); color:var(--white); text-align:center;}
.contact-band h2{color:var(--white); margin-bottom:22px;}
.contact-band p{color:#c9c7c1; font-size:14.5px; margin-bottom:34px; font-weight:300;}

/* ===== footer ===== */
footer{background:var(--black); color:#a8a6a0; padding:50px 5vw 30px; font-size:12.5px;}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid #2a2924; margin-bottom:24px;}
.footer-top img.logo{height:44px; width:auto; object-fit:contain; margin-bottom:16px;}
.footer-top p{color:#8f8d87; font-weight:300; line-height:1.7; max-width:280px;}
.footer-col h4{color:var(--white); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-weight:500; font-family:'Poppins',sans-serif;}
.footer-col a{display:block; color:#a8a6a0; padding:6px 0; transition:color .2s;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; color:#6f6d68;}
.footer-legal{display:flex; flex-wrap:wrap; gap:6px 20px;}
.footer-legal a{color:inherit; transition:color .2s;}
.footer-legal a:hover{color:var(--white);}

/* ===== breadcrumb / page header ===== */
.page-header{padding:160px 5vw 60px; background:var(--off); text-align:center;}
.page-header .eyebrow{justify-content:center; display:flex;}
.page-header h1{font-size:clamp(30px,4.5vw,50px);}
.page-header p{color:var(--sub); max-width:560px; margin:18px auto 0; font-weight:300; line-height:1.7; font-size:14.5px;}

@media(max-width:880px){
  .split, .split.rev{grid-template-columns:1fr; gap:32px;}
  .pillars{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .tstep{grid-template-columns:1fr; gap:16px;}
  nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(20,19,17,.97);}
  .nav-toggle{display:flex;}
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(78vw,320px); z-index:205;
    background:var(--black); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:30px; padding:0 42px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .45s cubic-bezier(.16,.8,.24,1), visibility 0s linear .45s;
  }
  nav.nav-open .navlinks{transform:translateX(0); visibility:visible; transition-delay:0s;}
  .navlinks a{font-size:16px; opacity:1;}
  .footer-top{grid-template-columns:1fr 1fr; gap:28px;}
  .footer-bottom{flex-direction:column; gap:10px; text-align:center;}
  .footer-legal{justify-content:center;}
}


/* ===== AVISO DE COOKIES (popup) ===== */
.cookie-banner{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(20,19,17,.6); opacity:0; transition:opacity .25s ease;
}
.cookie-banner.show{opacity:1;}
.cookie-box{
  background:var(--black); color:var(--white); width:min(480px,100%); max-height:100%; overflow:auto;
  padding:32px 30px 28px; border:1px solid rgba(255,255,255,.14);
  transform:translateY(12px); transition:transform .25s ease;
}
.cookie-banner.show .cookie-box{transform:translateY(0);}
.cookie-box h2{font-size:20px; margin-bottom:14px;}
.cookie-box p{font-size:13.5px; line-height:1.7; font-weight:300; opacity:.9;}
.cookie-box p a{text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:12px; margin-top:24px;}
.cookie-banner-actions button{
  flex:1; padding:14px 18px; border:1.5px solid var(--white); border-radius:40px; background:transparent; color:var(--white);
  font-family:'Poppins',sans-serif; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
}
.cookie-banner-actions button:hover, .cookie-banner-actions button:focus-visible{background:var(--white); color:var(--black); outline:none;}
body.cookie-lock{overflow:hidden;}
@media(max-width:480px){ .cookie-box{padding:26px 22px 22px;} }
.cookie-box:focus{outline:none;}