/* ==========================================================================
   EXERGÍA V7 — Sistema de diseño
   Lenguaje visual: tipografía a gran escala, mucho aire, listas de trabajo,
   contraste alto y micro-interacciones. Paleta EXERGÍA.
   ========================================================================== */

:root{
  --ink:#0E1116;
  --ink-soft:#4A525C;
  --paper:#F4F2EE;
  --paper-2:#EAE7E1;
  --azul:#174C73;
  --azul-deep:#0D2438;
  --naranja:#FF751F;
  --linea:rgba(14,17,22,.14);
  --linea-dark:rgba(255,255,255,.16);

  --pad:clamp(20px, 4.2vw, 80px);
  --maxw:1680px;

  --f-display:clamp(2.6rem, 8.4vw, 9.5rem);
  --f-h1:clamp(2.2rem, 5.6vw, 5.4rem);
  --f-h2:clamp(1.7rem, 3.4vw, 3.2rem);
  --f-h3:clamp(1.15rem, 1.7vw, 1.6rem);
  --f-body:clamp(1rem, 1.05vw, 1.16rem);
  --f-small:clamp(.72rem, .78vw, .82rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter','Poppins',system-ui,-apple-system,sans-serif;
  font-size:var(--f-body);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><path fill='%23FF751F' stroke='%23174C73' stroke-width='0.8' stroke-linejoin='round' d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/></svg>") 6 3, auto;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Tipografía ---------- */
.display{
  font-size:var(--f-display); font-weight:700; line-height:.92;
  letter-spacing:-.045em; text-wrap:balance;
}
h1,.h1{ font-size:var(--f-h1); font-weight:700; line-height:1.02; letter-spacing:-.035em; }
h2,.h2{ font-size:var(--f-h2); font-weight:700; line-height:1.08; letter-spacing:-.028em; }
h3,.h3{ font-size:var(--f-h3); font-weight:600; line-height:1.25; letter-spacing:-.012em; }
.lead{ font-size:clamp(1.05rem,1.45vw,1.42rem); line-height:1.5; color:var(--ink-soft); max-width:62ch; }
.eyebrow{
  font-size:var(--f-small); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hl{ color:var(--naranja); }

/* ---------- Header ---------- */
.v7-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(14px,1.6vw,26px) var(--pad);
  mix-blend-mode:normal;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.v7-header.scrolled{
  background:rgba(244,242,238,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.v7-logo{ display:flex; align-items:center; gap:12px; }
.v7-logo img{ height:clamp(34px,3.4vw,48px); width:auto; border-radius:8px; }
.v7-header-right{ display:flex; align-items:center; gap:clamp(12px,1.8vw,30px); }
.v7-mail{ font-size:var(--f-small); letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.v7-mail:hover{ color:var(--naranja); }

.v7-burger{
  display:flex; align-items:center; gap:10px;
  font-size:var(--f-small); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--linea); border-radius:100px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.v7-burger:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.v7-burger .bars{ display:inline-flex; flex-direction:column; gap:3px; width:16px; }
.v7-burger .bars span{ height:1.5px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease); }
.v7-burger .bars span:nth-child(2){ width:70%; }

/* ---------- Menú overlay ---------- */
.v7-nav{
  position:fixed; inset:0; z-index:90; background:var(--azul-deep); color:#fff;
  clip-path:circle(0% at calc(100% - 90px) 40px);
  transition:clip-path .75s var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.v7-nav.open{ clip-path:circle(150% at calc(100% - 90px) 40px); }
.v7-nav-inner{
  min-height:100%; padding:clamp(90px,10vh,140px) var(--pad) clamp(40px,6vh,70px);
  display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,5vw,80px); align-content:start;
  max-width:var(--maxw); margin:0 auto;
}
.v7-nav-close{
  position:fixed; top:clamp(14px,1.6vw,26px); right:var(--pad); z-index:95;
  font-size:var(--f-small); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; padding:10px 16px; border:1px solid var(--linea-dark); border-radius:100px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.v7-nav.open ~ .v7-nav-close, .v7-nav-close.show{ opacity:1; pointer-events:auto; }
.v7-nav-close:hover{ background:#fff; color:var(--azul-deep); }

.v7-nav-primary{ display:flex; flex-direction:column; }
.v7-nav-primary a{
  font-size:clamp(1.9rem,4.4vw,4rem); font-weight:700; line-height:1.06; letter-spacing:-.035em;
  padding:clamp(6px,.7vw,12px) 0; border-bottom:1px solid var(--linea-dark);
  display:flex; align-items:baseline; gap:16px;
  transition:color .3s var(--ease), padding-left .4s var(--ease);
}
.v7-nav-primary a .num{ font-size:var(--f-small); font-weight:600; letter-spacing:.1em; color:var(--naranja); }
.v7-nav-primary a:hover{ color:var(--naranja); padding-left:18px; }

.v7-nav-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,40px); }
.v7-nav-col h4{
  font-size:var(--f-small); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--naranja); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--linea-dark);
}
.v7-nav-col a{ display:block; padding:6px 0; font-size:clamp(.86rem,.95vw,.98rem); color:rgba(255,255,255,.76); transition:color .25s var(--ease), transform .25s var(--ease); }
.v7-nav-col a:hover{ color:#fff; transform:translateX(6px); }
.v7-nav-foot{
  grid-column:1/-1; margin-top:clamp(20px,4vh,50px); padding-top:24px; border-top:1px solid var(--linea-dark);
  display:flex; flex-wrap:wrap; gap:8px 30px; font-size:var(--f-small); color:rgba(255,255,255,.66);
}

/* ---------- Hero ---------- */
.hero-v7{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(110px,14vh,180px) 0 clamp(28px,4vh,54px);
  position:relative; overflow:hidden;
}
.hero-v7 .wrap{ display:grid; gap:clamp(22px,3.4vh,44px); }
.hero-title{ }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line > span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease); }
.hero-title.in .line > span{ transform:translateY(0); }
.hero-title .line:nth-child(2) > span{ transition-delay:.09s; }
.hero-title .line:nth-child(3) > span{ transition-delay:.18s; }

.hero-bottom{
  display:grid; grid-template-columns:1.1fr auto; gap:clamp(20px,3vw,60px); align-items:end;
  border-top:1px solid var(--linea); padding-top:clamp(18px,2.4vh,30px);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:var(--f-small);
  letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-naranja{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
.btn-naranja:hover{ background:var(--ink); border-color:var(--ink); }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.scroll-cue{
  display:flex; align-items:center; gap:10px; font-size:var(--f-small);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}
.scroll-cue .dot{ width:7px; height:7px; border-radius:50%; background:var(--naranja); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.9); opacity:.35 } }

/* Lienzo de fondo del hero */
#v7-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.55; }

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  overflow:hidden; padding:clamp(12px,1.4vw,20px) 0; background:var(--paper-2);
}
.marquee-track{ display:flex; gap:clamp(24px,3vw,56px); width:max-content; animation:slide 38s linear infinite; }
.marquee-track span{
  font-size:clamp(.95rem,1.5vw,1.5rem); font-weight:700; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:clamp(24px,3vw,56px); white-space:nowrap;
}
.marquee-track span::after{ content:'●'; color:var(--naranja); font-size:.5em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Secciones ---------- */
.sec{ padding:clamp(60px,10vh,140px) 0; }
.sec-dark{ background:var(--azul-deep); color:#fff; }
.sec-dark .lead,.sec-dark .eyebrow{ color:rgba(255,255,255,.66); }
.sec-dark .btn{ border-color:rgba(255,255,255,.4); }
.sec-dark .btn-solid{ background:#fff; color:var(--azul-deep); border-color:#fff; }
.sec-dark .btn-ghost:hover{ background:#fff; color:var(--azul-deep); }

.sec-head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.6vw,50px);
  align-items:start; padding-bottom:clamp(26px,4vh,54px);
}
.sec-head .idx{ font-size:var(--f-small); font-weight:700; letter-spacing:.18em; color:var(--naranja); padding-top:.6em; }

/* ---------- Lista de trabajo (patrón principal) ---------- */
.work-list{ border-top:1px solid var(--linea); }
.sec-dark .work-list{ border-color:var(--linea-dark); }
.work-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) auto;
  gap:clamp(12px,2vw,40px); align-items:center;
  padding:clamp(18px,2.8vw,38px) 0; border-bottom:1px solid var(--linea);
  position:relative; transition:padding-left .45s var(--ease), color .35s var(--ease);
}
.sec-dark .work-row{ border-color:var(--linea-dark); }
.work-row::before{
  content:''; position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:0; bottom:0;
  background:var(--ink); transform:scaleY(0); transform-origin:bottom; z-index:0;
  transition:transform .45s var(--ease);
}
.sec-dark .work-row::before{ background:var(--naranja); }
.work-row:hover::before{ transform:scaleY(1); transform-origin:top; }
.work-row:hover{ color:var(--paper); padding-left:clamp(10px,1.4vw,26px); }
.sec-dark .work-row:hover{ color:#fff; }
.work-row > *{ position:relative; z-index:1; }
.work-title{ font-size:clamp(1.3rem,3vw,2.7rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; }
.work-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.work-tags span{
  font-size:var(--f-small); letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:5px 12px; border:1px solid currentColor; border-radius:100px; opacity:.72;
}
.work-go{
  width:clamp(38px,3.4vw,52px); height:clamp(38px,3.4vw,52px); border-radius:50%;
  border:1px solid currentColor; display:grid; place-items:center; flex:0 0 auto;
  transition:transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.work-row:hover .work-go{ transform:rotate(45deg); background:var(--naranja); border-color:var(--naranja); color:#fff; }
.sec-dark .work-row:hover .work-go{ background:#fff; border-color:#fff; color:var(--naranja); }

/* ---------- Statement grande ---------- */
.statement{ font-size:clamp(1.6rem,4.6vw,4.2rem); font-weight:700; line-height:1.08; letter-spacing:-.035em; max-width:20ch; }
.statement .muted{ color:var(--ink-soft); }
.sec-dark .statement .muted{ color:rgba(255,255,255,.42); }

/* ---------- Grid de tarjetas ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(14px,1.6vw,26px); }
.card{
  background:#fff; border:1px solid var(--linea); border-radius:18px;
  padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; gap:12px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.sec-dark .card{ background:rgba(255,255,255,.05); border-color:var(--linea-dark); }
.card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(14,17,22,.12); border-color:var(--naranja); }
.card .num{ font-size:var(--f-small); font-weight:700; letter-spacing:.16em; color:var(--naranja); }
.card p{ color:var(--ink-soft); font-size:clamp(.92rem,1vw,1.02rem); }
.sec-dark .card p{ color:rgba(255,255,255,.72); }
.card .card-link{ margin-top:auto; padding-top:10px; font-size:var(--f-small); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--naranja); display:inline-flex; gap:8px; align-items:center; }
.card:hover .card-link .arrow{ transform:translateX(4px); }
.card .card-link .arrow{ transition:transform .35s var(--ease); }

/* ---------- Cifras ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:clamp(18px,2.4vw,40px); }
.stat .big{ font-size:clamp(2.4rem,5.4vw,5rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.stat .lbl{ font-size:var(--f-small); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; font-weight:600; }
.sec-dark .stat .lbl{ color:rgba(255,255,255,.6); }

/* ---------- Aliados ---------- */
.aliados{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:clamp(14px,2vw,34px); align-items:center; }
.aliado{
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:clamp(18px,2vw,30px);
  display:grid; place-items:center; min-height:120px;
  transition:transform .4s var(--ease), border-color .35s var(--ease);
}
.aliado img{ max-height:56px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .4s var(--ease), opacity .4s var(--ease); }
.aliado:hover{ transform:translateY(-5px); border-color:var(--naranja); }
.aliado:hover img{ filter:none; opacity:1; }

/* ---------- Footer ---------- */
.v7-footer{ background:var(--ink); color:#fff; padding:clamp(50px,8vh,100px) 0 clamp(24px,3vh,40px); }
.v7-footer .cta-big{ font-size:clamp(2rem,7vw,7rem); font-weight:700; letter-spacing:-.045em; line-height:.98; display:inline-flex; align-items:center; gap:.3em; }
.v7-footer .cta-big:hover{ color:var(--naranja); }
.v7-footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:clamp(20px,3vw,50px);
  margin-top:clamp(36px,6vh,80px); padding-top:clamp(24px,3.4vh,44px); border-top:1px solid var(--linea-dark);
}
.v7-footer h4{ font-size:var(--f-small); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--naranja); margin-bottom:14px; }
.v7-footer a,.v7-footer p{ color:rgba(255,255,255,.72); font-size:clamp(.88rem,.96vw,1rem); }
.v7-footer a{ display:block; padding:3px 0; transition:color .25s var(--ease), transform .25s var(--ease); }
.v7-footer a:hover{ color:#fff; transform:translateX(5px); }
.v7-footer-bottom{
  margin-top:clamp(28px,4vh,56px); padding-top:20px; border-top:1px solid var(--linea-dark);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:var(--f-small); color:rgba(255,255,255,.5);
}

/* ---------- Reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }

/* ---------- Barra de progreso de scroll ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; background:var(--naranja); z-index:99; width:0; }

/* ---------- Página interior ---------- */
.page-hero{ padding:clamp(130px,17vh,220px) 0 clamp(40px,6vh,80px); border-bottom:1px solid var(--linea); }
.breadcrumb{ font-size:var(--f-small); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--naranja); }

.prose{ max-width:78ch; display:grid; gap:1.1em; }
.prose p{ color:var(--ink-soft); }
.prose strong{ color:var(--ink); font-weight:600; }
.sec-dark .prose p{ color:rgba(255,255,255,.76); }
.sec-dark .prose strong{ color:#fff; }
.prose ul{ list-style:none; display:grid; gap:.6em; }
.prose ul li{ padding-left:1.5em; position:relative; color:var(--ink-soft); }
.prose ul li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--naranja); border-radius:2px; transform:rotate(45deg); }

.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(24px,4vw,70px); align-items:start; }

/* ---------- Formulario ---------- */
.form-v7{ display:grid; gap:16px; max-width:640px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:var(--f-small); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field textarea,.field select{
  font:inherit; color:var(--ink); background:#fff; border:1px solid var(--linea); border-radius:12px;
  padding:14px 16px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px rgba(255,117,31,.16);
}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .v7-nav-inner{ grid-template-columns:1fr; }
  .hero-bottom{ grid-template-columns:1fr; }
  .work-row{ grid-template-columns:1fr auto; }
  .work-tags{ grid-column:1/-1; }
}
@media (max-width:620px){
  .v7-mail{ display:none; }
  .v7-nav-cols{ grid-template-columns:1fr; }
  .work-row:hover{ padding-left:0; }
  .v7-footer-bottom{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .hero-title .line > span{ transform:none; }
}