/* ==========================================================
   VARIABLES — cambiá estos valores para ajustar colores globales
   ========================================================== */
:root{
  --bg: #111110;
  --bg-alt: #16150f;
  --text: #f2f1ec;
  --text-muted: #a5a39b;
  --text-dim: #8c8a85;
  --text-faint: #6f6d68;
  --accent: #c9c4ba;
  --card-bg: #161513;
  --stripe-a: #1b1a17;
  --stripe-b: #201f1c;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Archivo', sans-serif;
  --mono: 'Space Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--bg); }
a{ color:inherit; }
.italic{ font-style:italic; color:#cfcdc5; }
.accent{ color:var(--accent); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px; background:rgba(17,17,16,0.6);
  backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.07);
}
.brand{ text-decoration:none; display:flex; align-items:baseline; gap:10px; }
.brand-name{ font-size:25px; font-weight:200; letter-spacing:.02em; }
.brand-sub{ font-family:var(--mono); font-size:9px; letter-spacing:.28em; color:var(--text-faint); text-transform:uppercase; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim); transition:color .35s;
}
.nav-contact{
  padding:9px 18px; border:1px solid rgba(255,255,255,0.22); border-radius:100px; color:var(--text);
}
.nav-contact:hover{ border-color:var(--text); background:var(--text); color:var(--bg); }
.nav-toggle{
  display:none; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:9px 18px; border:1px solid rgba(255,255,255,0.22); border-radius:100px; color:var(--text); background:transparent;
  transition:all .35s;
}
.nav-toggle:hover, .nav-toggle.is-open{ border-color:#f2f1ec; background:#f2f1ec; color:#111110; }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 40px 60px; max-width:1300px; margin:0 auto;
}
.hero-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:34px; }
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.hero-eyebrow span:last-child{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--text-muted); }
.hero-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(48px,8.2vw,118px); line-height:0.96;
  letter-spacing:-0.01em; margin:0; max-width:14ch;
}
.hero-text{ margin:38px 0 0; max-width:46ch; font-size:17px; line-height:1.65; color:var(--text-muted); }
.hero-actions{ margin-top:48px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn-primary{
  text-decoration:none; display:inline-flex; align-items:center; gap:12px; padding:15px 28px;
  background:var(--text); color:var(--bg); border:none; border-radius:100px; font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:transform .4s;
}
.btn-primary:hover{ transform:translateY(-3px); }
.scroll-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--text-faint); text-transform:uppercase; }

/* ---------- SHOWREEL ---------- */
.showreel-section{ max-width:1300px; margin:0 auto; padding:0 40px 120px; position:relative; }
.showreel{
  position:relative; cursor:pointer; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
  aspect-ratio:21/9; background:#161513;
}
.showreel-media{
  position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
  background:repeating-linear-gradient(125deg,#1a1916 0 18px,#1e1d1a 18px 36px);
}
.showreel-label{ position:absolute; left:20px; top:18px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--text-faint); }
.showreel-overlay{ position:absolute; inset:0; opacity:0; transition:opacity .7s; background:radial-gradient(circle at center,rgba(20,20,18,0.2),rgba(10,10,9,0.6)); }
.showreel:hover .showreel-overlay{ opacity:1; }
.showreel:hover .showreel-media{ transform:scale(1.05); }
.showreel-pill{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); opacity:0.85;
  transition:all .6s cubic-bezier(.2,.7,.2,1); display:flex; align-items:center; gap:13px; padding:16px 26px;
  border:1px solid rgba(255,255,255,0.45); border-radius:100px; backdrop-filter:blur(6px);
}
.play-icon{ width:0; height:0; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.showreel-pill span:last-child{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:#fff; text-transform:uppercase; }
.showreel-caption{ position:absolute; left:24px; bottom:20px; font-family:var(--serif); font-size:28px; color:#fff; }

/* ---------- SECTION HEADERS ---------- */
.section-intro, .section{ position:relative; max-width:1300px; margin:0 auto; padding:56px 40px; }
.section{ padding:70px 40px 56px; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  border-top:1px solid rgba(255,255,255,0.1); padding-top:34px; flex-wrap:wrap; margin-bottom:34px;
}
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.section-title{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,76px); line-height:1; margin:0; }
.section-desc{ margin:0; max-width:34ch; font-size:14px; line-height:1.6; color:var(--text-dim); }

/* ---------- PROJECT (cada hotel) ---------- */
.project{ position:relative; max-width:1300px; margin:0 auto; padding:0 40px 56px; }
.project-head{ display:flex; align-items:baseline; gap:22px; margin-bottom:30px; flex-wrap:wrap; }
.project-n{ font-family:var(--mono); font-size:12px; color:var(--text-faint); letter-spacing:.18em; }
.project-name{ font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(30px,4.4vw,52px); line-height:1; margin:0; }
.project-place{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }

/* ---------- GRIDS ---------- */
.grid{ display:grid; gap:18px; }
.grid-wide{ grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); }
.grid-portrait{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }

/* ---------- TILE ---------- */
.tile{ position:relative; cursor:pointer; overflow:hidden; border:1px solid rgba(255,255,255,0.07); background:var(--card-bg); }
.tile-16-9{ aspect-ratio:16/9; }
.tile-4-5{ aspect-ratio:4/5; }
.tile-inner{ position:relative; width:100%; height:100%; overflow:hidden; }
.tile-media{
  position:absolute; inset:0; transition:transform 1s cubic-bezier(.2,.7,.2,1);
  background-size:cover; background-position:center;
  background-color:var(--stripe-a);
  background-image: repeating-linear-gradient(135deg,var(--stripe-a) 0 16px,var(--stripe-b) 16px 32px);
}
.tile:hover .tile-media{ transform:scale(1.06); }
.tile-code{ position:absolute; left:14px; top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--text-faint); }
.tile-overlay{ position:absolute; inset:0; opacity:0; transition:opacity .6s; background:linear-gradient(to top,rgba(10,10,9,0.55),transparent 60%); }
.tile:hover .tile-overlay{ opacity:1; }
.tile-pill{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(10px); opacity:0;
  transition:all .55s cubic-bezier(.2,.7,.2,1); display:flex; align-items:center; gap:10px; padding:12px 20px;
  border:1px solid rgba(255,255,255,0.5); border-radius:100px; backdrop-filter:blur(5px);
}
.tile:hover .tile-pill{ opacity:1; transform:translate(-50%,-50%) translateY(0); }
.tile-pill .play-icon-sm{ width:0; height:0; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.tile-pill span:last-child{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:#fff; text-transform:uppercase; }
.tile-bottom-fade{ position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(to top,rgba(8,8,7,0.7),transparent); }
.tile-footer{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.tile-title{ font-family:var(--serif); font-size:23px; color:#fff; line-height:1.05; }
.tile-year{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#c2c0b9; }

/* ---------- ABOUT ---------- */
.about{ background:var(--bg-alt); border-top:1px solid rgba(255,255,255,0.08); }
.about-inner{ max-width:1300px; margin:0 auto; padding:100px 40px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
.about-portrait{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.about-portrait-placeholder{
  aspect-ratio:4/5; background:repeating-linear-gradient(135deg,#1b1a16 0 16px,#201f1b 16px 32px); position:relative;
}
.about-photo{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-portrait-placeholder span{ position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--text-faint); }
.about-title{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.4vw,56px); line-height:1.08; margin:0 0 26px; }
.about-text{ margin:0 0 18px; font-size:16px; line-height:1.7; color:var(--text-muted); max-width:52ch; }
.about-stats{ display:flex; gap:48px; margin:38px 0 34px; flex-wrap:wrap; }
.stat-num{ font-family:var(--serif); font-size:40px; line-height:1; }
.stat-label{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-top:8px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.about-tags span{ padding:8px 16px; border:1px solid rgba(255,255,255,0.16); border-radius:100px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#bdbbb5; }

/* ---------- CONTACT ---------- */
.contact{ border-top:1px solid rgba(255,255,255,0.08); }
.contact-inner{ max-width:1000px; margin:0 auto; padding:110px 40px 90px; text-align:center; }
.contact-title{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,7vw,92px); line-height:1; margin:0 0 18px; }
.contact-text{ margin:0 auto 44px; max-width:46ch; font-size:16px; line-height:1.65; color:var(--text-muted); }
.contact-form{ max-width:560px; margin:0 auto; display:grid; gap:20px; text-align:left; }
.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form input, .contact-form textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.18); padding:12px 2px;
  color:var(--text); font-size:15px; outline:none; font-family:inherit; resize:none; transition:border-color .3s;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--text); }
.contact-form .btn-primary{ margin-top:10px; justify-self:start; border:none; }
.contact-links{ margin-top:56px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
.contact-links a{ text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:#bdbbb5; transition:color .3s; }
.contact-links a:hover{ color:#fff; }
.contact-links .sep{ width:4px; height:4px; border-radius:50%; background:#4a4843; }

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid rgba(255,255,255,0.08); padding:30px 40px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.footer-brand{ font-family:var(--serif); font-size:20px; font-weight:600; }
.footer-copy{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.footer-top{ text-decoration:none; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.footer-top:hover{ color:#fff; }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:6vh 5vw; background:rgba(8,8,7,0.9); backdrop-filter:blur(10px);
}
.lightbox[hidden]{ display:none; }
.lightbox-inner{ position:relative; width:min(1080px,100%); }
.lightbox-media-box{
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.14); background:#000;
  aspect-ratio:16/9; max-height:80vh; margin:0 auto; display:flex; align-items:center; justify-content:center;
  transition:aspect-ratio .2s ease;
}
.lightbox-media-box.is-empty{
  background-image:repeating-linear-gradient(135deg,#1a1916 0 18px,#201f1b 18px 36px);
}
.lightbox-media-box.is-vertical{ aspect-ratio:9/16; max-width:min(460px,90vw); }
.lb-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; transition:opacity .35s ease; }
.lb-placeholder{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.lb-placeholder[hidden]{ display:none; }
.play-icon-lg{ width:0; height:0; border-left:22px solid rgba(255,255,255,0.85); border-top:14px solid transparent; border-bottom:14px solid transparent; }
#lb-placeholder-text{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:#86847d; text-transform:uppercase; }

.lb-gallery-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:rgba(8,8,7,0.55); color:#fff; font-size:20px; cursor:pointer;
  transition:all .3s; backdrop-filter:blur(4px);
}
.lb-gallery-btn:hover{ background:rgba(255,255,255,0.9); color:#111110; }
.lb-gallery-prev{ left:16px; }
.lb-gallery-next{ right:16px; }
.lb-gallery-count{
  position:absolute; right:16px; bottom:14px; z-index:2; padding:6px 12px; border-radius:100px;
  background:rgba(8,8,7,0.55); backdrop-filter:blur(4px); font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:#f2f1ec;
}

.lightbox-media-box.is-grid{
  aspect-ratio:auto; height:auto; max-height:80vh; overflow-y:auto; display:block;
  background-image:none; padding:14px;
}
.lb-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.lb-grid img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#000;
}

.lightbox-meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:22px; }
.lb-title{ font-family:var(--serif); font-style:italic; font-size:34px; line-height:1; }
.lb-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-top:12px; }
.lb-desc{ margin:14px 0 0; max-width:56ch; font-size:14px; line-height:1.6; color:var(--text-muted); }
.lb-desc:empty{ display:none; }
.lightbox-controls{ display:flex; gap:12px; }
.lightbox-controls button, .lb-close{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.22); background:transparent;
  color:var(--text); cursor:pointer; font-size:18px; transition:all .3s;
}
.lightbox-controls button:hover, .lb-close:hover{ background:var(--text); color:var(--bg); }
.lb-close{ position:fixed; top:20px; right:20px; width:42px; height:42px; background:var(--bg); font-size:16px; z-index:310; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav-links{ gap:16px; }
  .nav-links a:not(.nav-contact){ display:none; }
  .about-inner{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .nav{ padding:16px 20px; }
  .brand-sub{ display:none; }
  .hero{ padding:120px 20px 50px; }
  .showreel-section, .section-intro, .section, .project, .contact-inner, .about-inner, .footer{
    padding-left:20px; padding-right:20px;
  }
  .grid-wide{ grid-template-columns:1fr; }
  .grid-portrait{ grid-template-columns:1fr; }
  .contact-row{ grid-template-columns:1fr; }
  .lightbox{ padding:3vh 4vw; }
  .lightbox-meta{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer{ flex-direction:column; align-items:flex-start; }

  .nav-toggle{ display:inline-flex; align-items:center; gap:0; }
  .nav-links{
    display:flex; position:absolute; top:calc(100% + 12px); right:20px; left:auto;
    flex-direction:column; align-items:stretch; min-width:200px; gap:0;
    background:rgba(17,17,16,0.85); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.18);
    border-radius:20px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.35);
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ display:block !important; width:100%; padding:14px 22px; border-bottom:1px solid rgba(255,255,255,0.08); text-align:right; }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links .nav-contact{ border-radius:0; border:none; background:transparent; padding:14px 22px; }
  .nav-links .nav-contact:hover{ background:transparent; color:var(--text); }

  .lb-grid{ grid-template-columns:1fr; }
  .showreel{ aspect-ratio:9/16; }
  .tile-wide{ grid-column: span 1; }
}