/* ========== 1. VARIABLES DE MARCA ========== */
:root{
  --bg:#F7F5F0;          /* Blanco cálido */
  --bg2:#E6E3DC;         /* Gris piedra */
  --text:#242424;        /* Grafito */
  --muted:#77736C;       /* Gris cálido */
  --gold:#C8A96B;        /* Dorado champagne */
  --sage:#7B8975;        /* Verde salvia */
  --card:#FFFFFF;
  --radius:16px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#1d1c1a;--bg2:#2a2926;--text:#F7F5F0;--muted:#b3aea4;--card:#262522}
}
:root[data-theme="dark"]{--bg:#1d1c1a;--bg2:#2a2926;--text:#F7F5F0;--muted:#b3aea4;--card:#262522}

/* ========== 2. BASE ========== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92%);margin:auto}
section{padding:90px 0}
h1,h2,h3{line-height:1.15;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:600;margin-bottom:12px;display:block}
.lead{color:var(--muted);max-width:620px}
.center{text-align:center}.center .lead{margin:0 auto}

/* Botones */
.btn{display:inline-block;padding:14px 30px;border-radius:999px;font-weight:600;border:2px solid var(--gold);background:var(--gold);color:#242424;cursor:pointer;font-size:1rem;font-family:inherit;transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,169,107,.35)}
.btn.ghost{background:transparent;color:var(--text)}
.btn.sage{background:var(--sage);border-color:var(--sage);color:#fff}

/* ========== 3. NAV ========== */
header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--bg2)}
.nav{display:flex;justify-content:space-between;align-items:center;height:80px}
.logo{font-weight:700;font-size:1.2rem;letter-spacing:.04em}
.logo span{color:var(--gold)}
.logo-img{display:block;height:58px;width:auto}
.logo-img.big{height:110px}
.nav ul{display:flex;gap:28px;list-style:none;font-size:.92rem}
.nav ul a{color:var(--muted);transition:.2s}.nav ul a:hover{color:var(--text)}
@media(max-width:760px){.nav ul{display:none}}

/* ========== 4. HERO ========== */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;background:linear-gradient(135deg,var(--bg) 55%,var(--bg2))}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{font-size:1.1rem;margin-bottom:32px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.14);aspect-ratio:4/5;background:var(--bg2)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{aspect-ratio:16/11}}


/* ----- Fondo del hero: apartamento con manguera LED, aparece suave al cargar ----- */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;opacity:0;animation:bgIn 3.2s ease .3s forwards}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.08);animation:bgZoom 9s ease-out .3s forwards}
@keyframes bgZoom{to{transform:scale(1)}}
@keyframes bgIn{to{opacity:.95}}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 28%,color-mix(in srgb,var(--bg) 12%,transparent) 60%,transparent 82%)}
.hero-grid{position:relative;z-index:2;grid-template-columns:1fr !important}
.hero-grid>div{max-width:640px}
.hero .lead{color:color-mix(in srgb,var(--text) 72%,var(--muted))}
.hero h1,.hero .lead{text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 70%,transparent)}
.led{animation:ledGlow 4.5s ease-in-out infinite}
@keyframes ledGlow{0%,100%{opacity:1}50%{opacity:.72}}
@media(max-width:860px){.hero-veil{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,color-mix(in srgb,var(--bg) 20%,transparent) 100%)}}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none;opacity:.95}.hero-bg img{animation:none;transform:none}}

/* ========== 5. BENEFICIOS / SERVICIOS ========== */
.alt{background:var(--bg2)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.card{background:var(--card);padding:34px 28px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--muted) 18%,transparent);transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 20%,transparent);margin-bottom:18px}
.icon svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card:nth-child(even) .icon{background:color-mix(in srgb,var(--sage) 22%,transparent)}
.card:nth-child(even) .icon svg{stroke:var(--sage)}
.card h3{font-size:1.2rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.96rem}
@media(max-width:860px){.cols{grid-template-columns:1fr}}

/* ========== PROYECTOS (galería creativa con scroll) ========== */
.proj{padding:100px 0 40px}
.ph{position:relative;overflow:hidden;border-radius:var(--radius);cursor:zoom-in;background:var(--bg2)}
.ph img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;display:block;will-change:transform}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5));pointer-events:none}
.cap{position:absolute;left:20px;bottom:16px;z-index:2;color:#F7F5F0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.cap b{color:var(--gold);margin-right:8px}
/* Revelado: la imagen se "abre" desde el centro */
.clip{clip-path:inset(14% 10% 14% 10% round 16px);opacity:0;transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1),opacity 1s ease}
.clip.in{clip-path:inset(0 round 16px);opacity:1}
.banner{height:min(80vh,680px);border-radius:0;margin-top:56px}
.banner.clip{clip-path:inset(10% 14% 10% 14%)}.banner.clip.in{clip-path:inset(0)}
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin:90px auto;align-items:start}
.c-a{grid-column:1/6;grid-row:1/3;align-self:stretch}
.c-b{grid-column:6/13;grid-row:1}
.c-c{grid-column:6/13;grid-row:2}
.fl{will-change:transform}
.ba-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:26px;align-items:center;margin:40px auto 20px}
.ba-wrap .t{grid-column:1/-1;text-align:center;margin-bottom:10px}
.ba{position:relative;overflow:hidden;border-radius:var(--radius);--p:50%;user-select:none;background:var(--bg2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .bf{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba i{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--gold);pointer-events:none}
.ba i::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--gold);color:#242424;display:grid;place-items:center;font-style:normal;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba em{position:absolute;top:14px;padding:5px 12px;border-radius:999px;background:rgba(36,36,36,.65);color:#F7F5F0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-style:normal;pointer-events:none}
.ba em.l{left:14px}.ba em.r{right:14px}
.ba1{grid-column:2/6;aspect-ratio:383/687}
.ba2{grid-column:6/13;aspect-ratio:1367/768}
.ba3{grid-column:3/7;aspect-ratio:383/687}
.ba4{grid-column:7/11;aspect-ratio:383/687}
.ba .cap{bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.7);pointer-events:none}
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,20,20,.92);display:none;place-items:center;padding:24px;cursor:zoom-out}
.lb.open{display:grid}.lb img{max-width:100%;max-height:100%;border-radius:10px}
@media(max-width:860px){
  .c-a,.c-b,.c-c,.ba1,.ba2,.ba3,.ba4{grid-column:1/-1;grid-row:auto}
  .c-a{aspect-ratio:4/5;align-self:auto}.collage{margin:50px auto;gap:16px}
  .ba1,.ba3,.ba4{max-width:340px;margin:auto;width:100%}
  .banner{height:56vh}
}
@media(prefers-reduced-motion:reduce){.clip{clip-path:none;opacity:1;transition:none}}

/* ========== 6. SOBRE NOSOTROS ========== */
.about{display:grid;grid-template-columns:1fr;max-width:780px;margin:auto;text-align:center}
.about .lead{margin-left:auto;margin-right:auto}
.about-art{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--bg2)}
.stats{display:flex;gap:48px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.stats b{display:block;font-size:2rem;color:var(--gold)}
.stats span{color:var(--muted);font-size:.88rem}
.about p+p{margin-top:14px}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* ========== 7. TESTIMONIOS ========== */
.quote{font-size:1rem}
.quote q{display:block;quotes:none;font-style:italic;margin-bottom:18px}
.quote small{color:var(--muted)}
.stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px}

.trust{padding:110px 0}
.trust-h{font-size:clamp(2rem,5vw,3.4rem);max-width:820px;margin:0 auto 18px}
.trust-h em{font-style:normal;color:var(--gold)}

/* ========== 8. CONTACTO ========== */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px}
.info p{margin-top:12px;color:var(--muted)}
.info a.line{display:flex;gap:10px;margin-top:18px;font-weight:600;color:var(--text)}
form{background:var(--card);padding:34px;border-radius:var(--radius);display:grid;gap:16px;box-shadow:0 18px 40px rgba(0,0,0,.07)}
label{font-size:.85rem;font-weight:600}
input,select,textarea{width:100%;padding:13px 14px;margin-top:6px;border:1.5px solid var(--bg2);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.note{font-size:.8rem;color:var(--muted)}
@media(max-width:860px){.contact,.two{grid-template-columns:1fr}}

/* ========== 9. FOOTER ========== */
footer{background:#242424;color:#E6E3DC;padding:56px 0 30px}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid #77736C;display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--gold);border-color:var(--gold)}
.socials svg{width:19px;height:19px;stroke:#E6E3DC;fill:none;stroke-width:1.7}
.socials a:hover svg{stroke:#242424}
.copy{margin-top:34px;padding-top:20px;border-top:1px solid #3a3a3a;font-size:.82rem;color:#9a958c}

/* WhatsApp flotante */
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:58px;height:58px;border-radius:50%;background:var(--sage);display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:.25s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ========== 10. ANIMACIONES AL SCROLL ========== */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}