/* =========================================================
   VÓRTEX — Design tokens
   Ink (bg)      #0C0B0A   Stone (card bg)  #19160F
   Paper (light) #F3EEE4   Copper (accent)  #C4802E
   Gold (hover)  #E3B067   Text light #F1ECE2  Text muted #A69C8D
   ========================================================= */
:root{
  --ink:#0C0B0A;
  --ink-2:#141210;
  --stone:#1A1712;
  --stone-2:#221E17;
  --paper:#F3EEE4;
  --paper-2:#EAE3D4;
  --copper:#C4802E;
  --gold:#E3B067;
  --text:#F1ECE2;
  --text-muted:#A69C8D;
  --text-ink:#2A251E;
  --line:rgba(241,236,226,0.12);
  --radius:2px;
  --display:'Jost', sans-serif;
  --body:'Work Sans', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0 0 .5em;letter-spacing:.02em;}
p{margin:0 0 1em;color:var(--text-muted);}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--copper);
  display:inline-block;
  margin-bottom:1em;
}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.section-dark{background:var(--ink);}
.section-stone{background:var(--stone);}
.section-paper{background:var(--paper);color:var(--text-ink);}
.section-paper p{color:#5C5548;}
.section-paper h2,.section-paper h3{color:var(--text-ink);}

.center{text-align:center;}
.max-56{max-width:640px;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  padding:16px 30px;border:1px solid transparent;
  border-radius:var(--radius);cursor:pointer;transition:all .25s ease;
}
.btn-copper{background:var(--copper);color:var(--ink);}
.btn-copper:hover{background:var(--gold);}
.btn-outline{border-color:var(--line);color:var(--text);}
.btn-outline:hover{border-color:var(--copper);color:var(--copper);}
.btn-outline-dark{border-color:rgba(42,37,30,.3);color:var(--text-ink);}
.btn-outline-dark:hover{border-color:var(--copper);color:var(--copper);}
.btn-small{padding:11px 20px;font-size:.7rem;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,11,10,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;padding:16px 32px;}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.brand-word{font-family:var(--display);font-size:1.15rem;letter-spacing:.24em;color:var(--text);}
.x-accent{color:var(--copper);}
.main-nav ul{display:flex;gap:30px;}
.main-nav a{
  font-family:var(--display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);transition:color .2s ease;
  position:relative;padding:6px 0;
}
.main-nav a:hover,.main-nav a.active{color:var(--text);}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--copper);
}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:1.5px;background:var(--text);}

@media (max-width: 900px){
  .main-nav{
    position:fixed;inset:73px 0 0 0;background:var(--ink);
    transform:translateY(-110%);transition:transform .3s ease;
    padding:20px 32px;border-top:1px solid var(--line);
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:4px;}
  .main-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:130px 0 100px;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(196,128,46,0.14), transparent 55%),
    var(--ink);
  text-align:center;
}
.hero-emblem{margin:0 auto 32px;width:120px;height:120px;}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.3em;
}
.hero .lede{
  font-family:var(--display);font-weight:300;font-size:clamp(1rem,2vw,1.3rem);
  color:var(--gold);letter-spacing:.02em;max-width:680px;margin:0 auto 28px;
}
.hero .sub{max-width:600px;margin:0 auto 40px;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- Vortex convergence diagram (signature element) ---------- */
.vortex-diagram{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:56px;
}
.vortex-diagram::before{
  content:"";
  position:absolute;left:50%;top:-40px;width:1px;height:40px;
  background:linear-gradient(var(--copper),transparent);
  transform:translateX(-50%);
  display:none;
}
.vortex-node{
  background:var(--stone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 26px;
  text-align:left;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
  display:flex;flex-direction:column;
  gap:14px;
}
.vortex-node:hover{
  transform:translateY(-6px);
  border-color:var(--copper);
  background:var(--stone-2);
}
.vortex-node .num{
  font-family:var(--display);color:var(--copper);font-size:.75rem;letter-spacing:.2em;
}
.vortex-node h3{font-size:1.35rem;margin-bottom:.2em;}
.vortex-node p{font-size:.92rem;margin-bottom:0;flex-grow:1;}
.vortex-node .go{
  font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;
}
.vortex-node:hover .go{color:var(--gold);}

@media (max-width:900px){
  .vortex-diagram{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .vortex-diagram{grid-template-columns:1fr;}
}

/* ---------- Generic content grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;gap:36px;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
}

/* ---------- Discipline / service list items ---------- */
.disc-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px;}
.disc-item{
  background:var(--ink);padding:22px 26px;display:flex;align-items:center;gap:18px;
}
.disc-item .tag{
  font-family:var(--display);font-size:.68rem;color:var(--copper);
  letter-spacing:.18em;text-transform:uppercase;min-width:120px;
}
.disc-item p{margin:0;color:var(--text);font-size:.95rem;}
.disc-item.new .tag{color:var(--gold);}
.disc-item.new::after{
  content:"Nuevo";
  margin-left:auto;font-family:var(--display);font-size:.62rem;letter-spacing:.14em;
  color:var(--ink);background:var(--gold);padding:4px 10px;border-radius:20px;
  text-transform:uppercase;
}

/* ---------- Step process (Valida) ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px;}
.step{background:var(--ink);padding:32px 24px;position:relative;}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--display);font-size:.75rem;color:var(--copper);letter-spacing:.2em;
  display:block;margin-bottom:14px;
}
.step h4{font-size:1.05rem;margin-bottom:.35em;}
.step p{font-size:.88rem;margin-bottom:0;}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* ---------- Cards ---------- */
.card{
  background:var(--stone);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;transition:border-color .25s ease, transform .25s ease;
}
.card:hover{border-color:var(--copper);transform:translateY(-4px);}
.card h3{font-size:1.15rem;}
.card p{font-size:.92rem;margin-bottom:0;}
.card .icon{color:var(--copper);margin-bottom:16px;}

/* ---------- Case highlight (Proyecta example project) ---------- */
.case{
  background:var(--stone);border:1px solid var(--line);border-radius:var(--radius);
  padding:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin-top:56px;
}
@media (max-width:900px){.case{grid-template-columns:1fr;padding:32px;}}
.case .badge{
  display:inline-block;font-family:var(--display);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:5px 12px;
  border-radius:20px;margin-bottom:16px;
}
.case ul{margin-top:18px;display:grid;gap:10px;}
.case ul li{
  padding-left:20px;position:relative;color:var(--text);font-size:.94rem;
}
.case ul li::before{content:"—";position:absolute;left:0;color:var(--copper);}

/* ---------- Placeholder image blocks ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(196,128,46,0.09) 0 2px, transparent 2px 14px),
    linear-gradient(155deg,var(--stone-2),var(--ink-2));
  border:1px solid var(--line);
  display:flex;align-items:flex-end;
  aspect-ratio:4/3;
}
.ph.ph-tall{aspect-ratio:3/4;}
.ph.ph-wide{aspect-ratio:16/9;}
.ph.ph-square{aspect-ratio:1/1;}
.ph-label{
  padding:16px 18px;width:100%;
  background:linear-gradient(to top, rgba(12,11,10,0.85), transparent);
  font-family:var(--display);font-size:.7rem;letter-spacing:.1em;color:var(--text-muted);
  text-transform:uppercase;
}
.ph-label strong{display:block;color:var(--text);font-size:.82rem;letter-spacing:.04em;margin-bottom:2px;text-transform:none;}

/* ---------- Portfolio ---------- */
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;}
.filter-btn{
  font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--line);border-radius:20px;color:var(--text-muted);
  background:transparent;cursor:pointer;transition:all .2s ease;
}
.filter-btn:hover,.filter-btn.active{border-color:var(--copper);color:var(--copper);}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.portfolio-card{cursor:pointer;}
.portfolio-card .meta{margin-top:14px;}
.portfolio-card .meta .cat{
  font-family:var(--display);font-size:.66rem;letter-spacing:.16em;color:var(--copper);
  text-transform:uppercase;
}
.portfolio-card h3{font-size:1.1rem;margin:.3em 0 .2em;}
.portfolio-card .loc{font-size:.82rem;color:var(--text-muted);}
@media (max-width:900px){.portfolio-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.portfolio-grid{grid-template-columns:1fr;}}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--stone), var(--ink-2));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:80px 0;text-align:center;
}
.cta-band h2{font-size:clamp(1.6rem,3.5vw,2.4rem);}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
.contact-item .lbl{
  font-family:var(--display);font-size:.7rem;letter-spacing:.14em;color:var(--copper);
  text-transform:uppercase;min-width:140px;
}
.contact-item a{color:var(--text);}
.contact-item a:hover{color:var(--gold);}

.form-field{margin-bottom:20px;}
.form-field label{
  display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.form-field input,.form-field textarea,.form-field select{
  width:100%;background:var(--stone);border:1px solid var(--line);color:var(--text);
  padding:14px 16px;border-radius:var(--radius);font-family:var(--body);font-size:.95rem;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-field input:focus,.form-field textarea:focus{border-color:var(--copper);outline:none;}

.qr-box{
  display:flex;align-items:center;gap:20px;background:var(--stone);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:32px;
}
.qr-ph{width:84px;height:84px;flex-shrink:0;background:repeating-conic-gradient(var(--stone-2) 0% 25%, var(--ink-2) 0% 50%) 0 0/12px 12px;border:1px solid var(--line);}
.qr-box p{margin:0;font-size:.86rem;}

.rep-card{
  background:var(--stone);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;margin-top:16px;
}
.rep-card .role{color:var(--copper);font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
.rep-card h4{margin:.3em 0 .1em;font-size:1.15rem;}

/* ---------- Real photos (auto-loaded) ---------- */
.ph-real{ padding:0; cursor:pointer; }
.ph-real img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ph-real .ph-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; }
.ph-count{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(12,11,10,0.75); color:var(--text);
  font-family:var(--display); font-size:.7rem; letter-spacing:.05em;
  padding:4px 9px; border-radius:20px;
}
.ph-real:hover img{ filter:brightness(1.08); }
.ph-real:focus-visible{ outline:2px solid var(--copper); outline-offset:2px; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(9,8,7,0.94);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1100px,90vw); max-height:82vh; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.06); border:1px solid var(--line);
  color:var(--text); width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:var(--copper); color:var(--ink); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox-count{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:.75rem; letter-spacing:.1em; color:var(--text-muted);
}
@media (max-width:640px){
  .lightbox{padding:16px;}
  .lightbox-prev,.lightbox-next{width:38px;height:38px;}
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 80ms); }

/* ---------- Stats / counters ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.stat{ text-align:center; }
.stat .num{
  font-family:var(--display); font-size:clamp(2rem,4vw,3rem); color:var(--copper);
  display:block; line-height:1;
}
.stat .lbl{
  font-size:.82rem; color:var(--text-muted); margin-top:8px; display:block;
  letter-spacing:.02em;
}
@media (max-width:700px){ .stats-row{grid-template-columns:1fr 1fr;} }

/* ---------- Equipo ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.team-card{background:var(--stone);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;}
.team-card .avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  background:linear-gradient(155deg,var(--copper),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);color:var(--ink);font-size:1.2rem;
}
.team-card .role{font-family:var(--display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);display:block;margin-bottom:8px;}
.team-card h4{font-size:1.02rem;margin:0;}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr;}}

/* ---------- Section heads ---------- */
.section-head{max-width:680px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}