/* =========================================================
   Grupo D'abb — sitio web
   Estética: negro volcánico, vidrio, líneas de luz roja/azul/dorada
   ========================================================= */
:root{
  --bg:#050403;
  --bg-2:#0b0907;
  --glass:rgba(255,255,255,0.035);
  --glass-2:rgba(255,255,255,0.06);
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);
  --text:#f2f0ee;
  --text-2:#c9c6c3;
  --text-dim:#8e8a86;
  --red:#9d2b33;
  --red-glow:#e0444f;
  --blue:#30679c;
  --blue-glow:#4d8fe0;
  --gold:#d9a54c;
  --gold-soft:#e7bf93;
  --max:1180px;
  --radius:18px;
  --font:'Figtree', 'Open Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.05; letter-spacing:-0.02em; font-weight:700; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 40px; position:relative; z-index:3; }

.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:12px;
  font-weight:500;
  color:var(--text-dim);
}

/* Titulares con brillo metálico (blanco arriba, gris abajo) */
.metal{
  background:linear-gradient(180deg,#ffffff 0%,#f1efed 45%,#9d9995 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.metal-soft{ color:#b3afab; }

/* ============ Logo ============ */
.logo{ display:inline-flex; flex-direction:column; line-height:1; font-family:'Open Sans', sans-serif; }
.logo .name{ font-size:22px; font-weight:400; letter-spacing:-0.02em; color:#fff; }
.logo .name b{ font-weight:800; }
.logo .tag{ font-size:10px; color:var(--text-2); margin-top:2px; padding-left:36px; }

/* ============ Botones de vidrio ============ */
.btn{
  --b:rgba(255,255,255,.38);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:13px 24px;
  border-radius:999px;
  font-size:14.5px; font-weight:500; color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 60%,rgba(255,255,255,.07));
  border:1px solid var(--b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 16px rgba(0,0,0,.35),
    0 0 18px rgba(255,255,255,.06),
    0 10px 24px -10px rgba(0,0,0,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer; white-space:nowrap;
  transition:transform .2s, box-shadow .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -8px 16px rgba(0,0,0,.3), 0 0 26px rgba(255,255,255,.12), 0 14px 28px -12px rgba(0,0,0,.8); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn.silver{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(170,166,162,.16) 55%,rgba(255,255,255,.18));
  border-color:rgba(255,255,255,.55);
}
.btn.ghost{ padding:10px 20px; font-size:13.5px; background:rgba(255,255,255,.02); --b:rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.btn.lg{ padding:16px 38px; font-size:15.5px; }

.play-link{ display:inline-flex; align-items:center; gap:14px; font-size:14px; color:var(--text-2); line-height:1.4; }
.play-circle{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.45);
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.12),rgba(0,0,0,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 16px rgba(255,255,255,.07);
  transition:transform .2s, border-color .2s;
}
.play-circle svg{ width:14px; height:14px; margin-left:2px; }
.play-link:hover .play-circle{ transform:scale(1.06); border-color:#fff; }

/* ============ Nav ============ */
header.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled, header.nav.open{
  background:rgba(5,4,3,.72);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:26px 40px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}
nav.links{ display:flex; gap:34px; font-size:13.5px; color:var(--text-2); }
nav.links a{ position:relative; padding:8px 0; transition:color .2s; }
nav.links a:hover{ color:#fff; }
nav.links a[aria-current="page"]{ color:#fff; font-weight:500; }
nav.links a[aria-current="page"]::after{
  content:''; position:absolute; left:-2px; right:-2px; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
  box-shadow:0 0 10px rgba(217,165,76,.8);
}
.nav-cta{ display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-toggle svg{ width:18px; height:18px; }

/* ============ Líneas de luz ============ */
.glow{ position:absolute; pointer-events:none; z-index:1; overflow:visible; }
.glow path, .glow line{ fill:none; stroke-linecap:round; }
.glow.red{ filter:drop-shadow(0 0 4px rgba(224,68,79,.95)) drop-shadow(0 0 14px rgba(224,68,79,.6)) drop-shadow(0 0 34px rgba(224,68,79,.35)); }
.glow.blue{ filter:drop-shadow(0 0 4px rgba(77,143,224,.95)) drop-shadow(0 0 14px rgba(77,143,224,.6)) drop-shadow(0 0 34px rgba(77,143,224,.35)); }
.glow.gold{ filter:drop-shadow(0 0 4px rgba(217,165,76,.95)) drop-shadow(0 0 14px rgba(217,165,76,.55)) drop-shadow(0 0 30px rgba(217,165,76,.3)); }
.glow.white{ filter:drop-shadow(0 0 4px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.35)); }

/* ============ Rocas / cráteres ============ */
.rocks{
  position:absolute; left:50%; bottom:0; z-index:0; pointer-events:none;
  width:max(100%,1400px); transform:translateX(-50%);
  height:auto; user-select:none;
}
.rocks + .rocks-fade, .rocks-fade{
  position:absolute; left:0; right:0; bottom:0; height:80px; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
/* niebla de color que tiñe el horizonte */
.haze{
  position:absolute; inset:auto 0 0 0; height:70%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 40% 55% at 0% 70%,rgba(224,68,79,.16),transparent 70%),
    radial-gradient(ellipse 40% 55% at 100% 60%,rgba(77,143,224,.14),transparent 70%),
    radial-gradient(ellipse 30% 40% at 60% 55%,rgba(217,165,76,.08),transparent 70%);
}

/* Separador con línea de luz */
.divider{ position:relative; height:1px; z-index:2; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); }

/* ============ HERO (inicio) ============ */
.hero{ position:relative; min-height:780px; padding:150px 0 110px; overflow:hidden; isolation:isolate; }
.hero .stats{ flex-wrap:nowrap; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:30px; align-items:center; }
.hero h1{ font-size:clamp(42px,5.6vw,72px); font-weight:700; margin:22px 0 26px; letter-spacing:-0.035em; line-height:1; }
.hero .lead{ font-size:clamp(16px,1.5vw,19px); color:var(--text-2); max-width:470px; line-height:1.55; margin-bottom:42px; }
.hero-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:58px; }
.side-label{
  position:absolute; right:40px; top:-40px; z-index:4;
  font-size:11px; letter-spacing:.32em; line-height:2.2; color:var(--text-2); text-transform:uppercase;
}
.side-label::after{ content:''; display:block; width:48px; height:1px; margin-top:14px; background:rgba(255,255,255,.45); }

/* Stats */
.stats{ display:flex; flex-wrap:wrap; row-gap:22px; }
.stat{ display:flex; flex-direction:column; gap:10px; padding:0 26px; white-space:nowrap; border-left:1px solid rgba(255,255,255,.18); }
.stat:first-child{ padding-left:0; border-left:none; }
.stat .num{ font-size:clamp(24px,2.3vw,30px); font-weight:500; color:#fff; letter-spacing:-0.01em; }
.stat .lbl{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-2); }
.dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot.red{ background:var(--red-glow); box-shadow:0 0 8px var(--red-glow); }
.dot.blue{ background:var(--blue-glow); box-shadow:0 0 8px var(--blue-glow); }
.dot.gold{ background:var(--gold); box-shadow:0 0 8px var(--gold); }

/* ============ Laptop ============ */
.laptop-stage{ position:relative; perspective:1800px; margin-right:-60px; }
.laptop{ position:relative; transform:rotateY(-16deg) rotateX(4deg) rotateZ(1deg); transform-style:preserve-3d; transform-origin:30% 50%; }
.lid{
  position:relative;
  padding:12px 12px 16px;
  border-radius:18px 18px 6px 6px;
  background:linear-gradient(145deg,#3a3835,#121110 18%,#0a0908 70%,#2a2826);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 3px #050404,
    0 40px 80px -20px rgba(0,0,0,.9);
}
.lid::before{ /* cámara */
  content:''; position:absolute; top:5px; left:50%; width:5px; height:5px; border-radius:50%;
  background:#1d1c1b; box-shadow:inset 0 0 1px rgba(255,255,255,.3); transform:translateX(-50%);
}
.screen{
  position:relative; overflow:hidden; border-radius:8px;
  background:radial-gradient(ellipse 80% 60% at 70% 0%,#1a1816,#0c0b0a 60%);
  padding:22px 22px 20px;
  aspect-ratio:16/10.4;
  display:flex; flex-direction:column; gap:14px;
}
.screen::after{ /* reflejo del vidrio */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03));
}
.scr-logo{ font-family:'Open Sans',sans-serif; font-size:15px; color:#fff; line-height:1; }
.scr-logo b{ font-weight:800; }
.scr-logo small{ display:block; font-size:6px; color:var(--text-dim); padding-left:24px; margin-top:1px; }
.scr-cols{ display:grid; grid-template-columns:22% 1fr; gap:14px; flex:1; min-height:0; }
.scr-side{ display:flex; flex-direction:column; gap:4px; }
.scr-side span{ display:flex; align-items:center; gap:7px; font-size:9.5px; color:var(--text-dim); padding:7px 8px; border-radius:6px; }
.scr-side span svg{ width:11px; height:11px; flex-shrink:0; }
.scr-side span.on{ background:rgba(255,255,255,.07); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.scr-main{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.scr-top{ display:flex; justify-content:space-between; align-items:center; }
.scr-top b{ font-size:13px; font-weight:600; }
.scr-top span{ font-size:8px; color:var(--text-2); border:1px solid var(--line); border-radius:5px; padding:4px 7px; }
.scr-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.scr-kpi{ border-radius:8px; padding:10px 10px 6px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.scr-kpi small{ display:block; font-size:8px; color:var(--text-2); margin-bottom:4px; }
.scr-kpi b{ display:block; font-size:15px; font-weight:500; color:#fff; }
.scr-kpi svg{ display:block; width:100%; height:26px; margin-top:4px; }
.scr-chart{ flex:1; border-radius:8px; padding:10px 12px 8px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); display:flex; flex-direction:column; min-height:0; }
.scr-chart small{ font-size:8.5px; color:var(--text-2); }
.scr-bars{ flex:1; display:flex; align-items:flex-end; gap:12%; padding:8px 8px 0; min-height:40px; }
.scr-bars i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg,#5d6470,#262a31); }
.scr-bars i:last-child{ background:linear-gradient(180deg,#9aa3b2,#3a3f48); box-shadow:0 0 12px rgba(154,163,178,.25); }
.scr-months{ display:flex; gap:12%; padding:5px 8px 0; }
.scr-months span{ flex:1; text-align:center; font-size:6.5px; color:var(--text-dim); }
.base{
  position:relative; height:16px; margin:0 -7%;
  background:linear-gradient(180deg,#4a4845 0%,#1c1b1a 35%,#0b0a09 100%);
  border-radius:3px 3px 14px 14px;
  box-shadow:0 30px 40px -10px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.25);
}
.base::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:16%; height:6px; border-radius:0 0 8px 8px; background:#0d0c0b; box-shadow:inset 0 1px 2px rgba(0,0,0,.8); }
.base::after{ content:''; position:absolute; left:2%; right:2%; bottom:-10px; height:12px; border-radius:50%; background:rgba(0,0,0,.8); filter:blur(8px); z-index:-1; }

/* Tarjeta flotante de vidrio */
.glass-card{
  position:absolute; right:-2%; bottom:10%; z-index:6;
  width:200px; padding:20px 20px 16px;
  border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 24px 50px -16px rgba(0,0,0,.9), 0 0 30px rgba(255,255,255,.05);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  font-size:13.5px; line-height:1.45; color:#fff;
}
.glass-card svg{ width:20px; height:20px; }
.glass-card p{ margin:14px 0 10px; }
.glass-card .arrow{ display:flex; justify-content:flex-end; }
.glass-card .arrow svg{ width:16px; height:16px; }

/* ============ Secciones ============ */
section{ position:relative; }
.section{ padding:110px 0; position:relative; overflow:hidden; isolation:isolate; }
.section.tight{ padding:80px 0; }
.sec-head{ display:grid; grid-template-columns:1.7fr 1fr; gap:48px; align-items:end; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(32px,3.6vw,44px); margin-top:18px; }
.sec-head h2 .sub{ display:block; font-size:.5em; font-weight:400; color:var(--text-2); letter-spacing:-0.01em; margin-top:14px; }
.sec-head .desc{ font-size:15px; color:var(--text-2); line-height:1.6; padding-left:26px; border-left:1px solid rgba(255,255,255,.2); max-width:360px; }

/* ============ Tarjetas de solución ============ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  --c:255,255,255;
  position:relative; overflow:hidden;
  padding:30px 28px 28px;
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 60% at 100% 100%,rgba(var(--c),.16),transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 0%,rgba(var(--c),.08),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(var(--c),.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 30px rgba(var(--c),.05), 0 0 24px rgba(var(--c),.12), 0 30px 60px -30px rgba(0,0,0,.9);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:transform .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 30px rgba(var(--c),.08), 0 0 36px rgba(var(--c),.22), 0 36px 60px -30px rgba(0,0,0,.9); }
.card.blue{ --c:77,143,224; }
.card.red{ --c:224,68,79; }
.card.gold{ --c:217,165,76; }
.card .card-arc{ position:absolute; right:-2px; bottom:-2px; width:62%; height:78%; pointer-events:none; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; position:relative; z-index:2; }
.card-icon{ width:44px; height:44px; color:rgb(var(--c)); filter:drop-shadow(0 0 8px rgba(var(--c),.6)); }
.card-icon svg{ width:44px; height:44px; }
.corner{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .3s, background .3s;
}
.corner svg{ width:13px; height:13px; }
.card:hover .corner{ transform:rotate(45deg); background:rgba(255,255,255,.12); }
.card h3{ font-size:25px; font-weight:600; margin-bottom:14px; position:relative; z-index:2; }
.card p{ font-size:15px; line-height:1.55; color:var(--text-2); margin-bottom:28px; position:relative; z-index:2; max-width:280px; }
.card .btn{ position:relative; z-index:2; margin-top:auto; }
.card-top{ align-self:stretch; }
.card ul{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:10px; position:relative; z-index:2; }
.card li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text-2); line-height:1.45; }
.card li::before{ content:''; width:6px; height:6px; margin-top:7px; border-radius:50%; flex-shrink:0; background:rgb(var(--c)); box-shadow:0 0 8px rgb(var(--c)); }

/* ============ Resultados / testimonio ============ */
.res-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.res-grid h2{ font-size:clamp(32px,3.8vw,46px); margin:18px 0 38px; }
.quote{
  position:relative;
  padding:34px 36px 30px;
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.quote-body{ display:grid; grid-template-columns:40px 1fr; gap:10px; }
.quote-mark{ font-family:Georgia,serif; font-size:52px; line-height:.8; color:var(--text-dim); font-weight:700; }
.quote-text{ font-size:16px; line-height:1.6; color:var(--text); min-height:104px; transition:opacity .3s; }
.quote-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-left:50px; gap:16px; }
.quote-who{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--text-2); }
.quote-who::before{ content:''; width:16px; height:1px; background:var(--text-dim); }
.q-nav{ display:flex; gap:12px; }
.q-btn{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .2s, border-color .2s;
}
.q-btn:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.q-btn svg{ width:16px; height:16px; }
.q-dots{ display:flex; gap:10px; justify-content:center; margin-top:22px; }
.q-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.2); transition:background .2s, box-shadow .2s; }
.q-dots button.on{ background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ============ Banda CTA ============ */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; padding:78px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.cta-grid{ display:grid; grid-template-columns:1fr 2.2fr 1fr; gap:30px; align-items:center; }
.cta-label{ font-size:11.5px; letter-spacing:.32em; line-height:2; color:var(--text-2); text-transform:uppercase; }
.cta-label::after{ content:''; display:block; width:56px; height:1px; margin-top:14px; background:rgba(255,255,255,.45); }
.cta-mid{ text-align:center; }
.cta-mid h2{ font-size:clamp(24px,2.5vw,32px); font-weight:500; margin-bottom:12px; }
.cta-mid p{ font-size:15px; color:var(--text-2); }
.cta-grid .btn-wrap{ display:flex; justify-content:flex-end; }

/* ============ Footer ============ */
footer{ position:relative; overflow:hidden; isolation:isolate; padding:60px 0 64px; background:linear-gradient(180deg,#070605,#030202); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot nav{ display:flex; gap:40px; font-size:13.5px; color:var(--text-2); flex-wrap:wrap; }
.foot nav a:hover{ color:#fff; }
.foot-right{ display:flex; align-items:center; gap:28px; }
.socials{ display:flex; gap:22px; color:var(--text-2); }
.socials a{ display:flex; transition:color .2s, transform .2s; }
.socials a:hover{ color:#fff; transform:translateY(-1px); }
.socials svg{ width:19px; height:19px; }
.foot-tag{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2); padding-left:28px; border-left:1px solid rgba(255,255,255,.2); line-height:3; }
.foot-legal{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-dim); }

/* ============ Hero de páginas internas ============ */
.page-hero{ position:relative; overflow:hidden; isolation:isolate; padding:190px 0 150px; min-height:560px; }
.page-hero h1{ font-size:clamp(40px,5.2vw,66px); letter-spacing:-0.035em; margin:22px 0 24px; max-width:820px; line-height:1.02; }
.page-hero .lead{ font-size:clamp(16px,1.5vw,19px); color:var(--text-2); max-width:560px; line-height:1.6; }
.crumbs{ display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }
.crumbs a:hover{ color:#fff; }

/* ============ Proceso (pasos) ============ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:step; }
.steps::before{ content:''; position:absolute; left:0; right:0; top:27px; height:1px; background:linear-gradient(90deg,var(--red-glow),var(--gold),var(--blue-glow)); opacity:.7; box-shadow:0 0 10px rgba(217,165,76,.5); }
.step{ position:relative; padding:0 28px 0 0; }
.step .n{
  position:relative; z-index:2;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:#fff;
  background:radial-gradient(circle at 50% 30%,#2a2724,#0b0a09);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 20px rgba(0,0,0,.8);
  margin-bottom:26px;
}
.step h3{ font-size:20px; font-weight:600; margin-bottom:10px; }
.step p{ font-size:14.5px; line-height:1.6; color:var(--text-2); }

/* ============ Paneles de vidrio genéricos ============ */
.panel{
  position:relative;
  border-radius:var(--radius);
  padding:34px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.9);
}
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split h2{ font-size:clamp(30px,3.4vw,42px); margin:18px 0 22px; }
.split p.body{ font-size:16px; line-height:1.7; color:var(--text-2); }
.split p.body + p.body{ margin-top:16px; }

/* Servicios detallados */
.service{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; padding:70px 0; border-top:1px solid var(--line-soft); }
.service:first-of-type{ border-top:none; }
.service.flip .service-text{ order:2; }
.service h2{ font-size:clamp(30px,3.4vw,42px); margin:18px 0 20px; }
.service .body{ font-size:16px; line-height:1.7; color:var(--text-2); margin-bottom:28px; }
.service .card{ padding:34px; }

/* Grilla de marcas */
.brands{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.brand{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px; border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s, transform .3s;
}
.brand:hover{ border-color:rgba(255,255,255,.28); transform:translateY(-3px); }
.brand img{ width:62px; height:62px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 8px 20px -6px rgba(0,0,0,.8); background:#fff; }
.brand b{ display:block; font-size:16.5px; font-weight:600; margin-bottom:3px; }
.brand span{ font-size:13px; color:var(--text-dim); }

/* Valores */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value{ padding:34px 30px; }
.value .v-n{ font-size:13px; letter-spacing:.3em; color:var(--text-dim); margin-bottom:34px; display:flex; align-items:center; gap:12px; }
.value .v-n::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.4; }
.value h3{ font-size:26px; margin-bottom:12px; font-weight:600; }
.value p{ font-size:15px; color:var(--text-2); line-height:1.6; }

/* Números grandes */
.bignums{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.bignum{ padding:10px 30px; border-left:1px solid rgba(255,255,255,.14); }
.bignum:first-child{ border-left:none; padding-left:0; }
.bignum .num{ font-size:clamp(38px,4.4vw,58px); font-weight:600; letter-spacing:-0.03em; }
.bignum .lbl{ display:flex; align-items:center; gap:9px; margin-top:10px; font-size:14px; color:var(--text-2); }

/* ============ Contacto ============ */
.contact-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:start; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:15px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c6c3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; }
.field select option{ background:#0b0907; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:rgba(217,165,76,.7); box-shadow:0 0 0 3px rgba(217,165,76,.15), 0 0 18px rgba(217,165,76,.15); }
.form .actions{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:6px; }
.form .note{ font-size:13px; color:var(--text-dim); }
.form-status{ grid-column:1/-1; font-size:14px; color:var(--gold-soft); min-height:1em; }
.contact-list{ display:grid; gap:16px; }
.contact-item{ display:flex; gap:16px; align-items:center; padding:22px; }
.contact-item .ci-icon{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.04); }
.contact-item .ci-icon svg{ width:18px; height:18px; }
.contact-item small{ display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }
.contact-item b{ font-weight:500; font-size:15.5px; }
.contact-item:hover b{ color:var(--gold-soft); }

/* FAQ */
.faq{ display:grid; gap:14px; max-width:820px; }
.faq details{ border-radius:14px; padding:0 24px; background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.1); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:16.5px; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:22px; font-weight:300; color:var(--text-2); transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 0 22px; font-size:15px; line-height:1.65; color:var(--text-2); }

/* ============ Animación de entrada ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .laptop-stage{ margin-right:0; }
  .glass-card{ right:0; }
  nav.links{ gap:22px; }
}
@media (max-width:920px){
  .wrap, .nav-inner{ padding-left:24px; padding-right:24px; }
  .nav-inner{ grid-template-columns:1fr auto; padding-top:18px; padding-bottom:18px; }
  .menu-toggle{ display:inline-flex; }
  .nav-cta .btn{ display:none; }
  .nav-cta{ grid-row:1; grid-column:2; }
  nav.links{
    display:none; grid-column:1/-1;
    flex-direction:column; gap:0; padding:6px 0 10px;
  }
  header.nav.open nav.links{ display:flex; }
  nav.links a{ padding:15px 0; font-size:16px; border-top:1px solid var(--line-soft); }
  nav.links a[aria-current="page"]::after{ left:0; right:auto; width:28px; bottom:8px; }
  .hero{ padding:130px 0 80px; min-height:0; }
  .hero-grid{ grid-template-columns:1fr; gap:60px; }
  .hero .stats{ flex-wrap:wrap; }
  .side-label{ display:none; }
  .laptop{ transform:rotateY(-8deg) rotateX(3deg); }
  .sec-head, .res-grid, .split, .service, .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .service.flip .service-text{ order:0; }
  .sec-head .desc{ max-width:none; }
  .cards, .values{ grid-template-columns:1fr; }
  .brands{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .steps::before{ display:none; }
  .bignums{ grid-template-columns:1fr 1fr; row-gap:34px; }
  .bignum:nth-child(3){ border-left:none; padding-left:0; }
  .cta-grid{ grid-template-columns:1fr; text-align:left; gap:22px; }
  .cta-mid{ text-align:left; }
  .cta-grid .btn-wrap{ justify-content:flex-start; }
  .foot{ flex-direction:column; align-items:flex-start; }
  .foot nav{ gap:24px; }
  .page-hero{ padding:150px 0 120px; min-height:0; }
  .glow.gold{ display:none; }
  .card .card-arc{ display:block; }
}
@media (max-width:560px){
  .wrap, .nav-inner{ padding-left:16px; padding-right:16px; }
  .hero h1{ font-size:42px; }
  .eyebrow{ letter-spacing:.2em; font-size:11px; }
  .hero .stats{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; }
  .stat{ padding:0 14px; white-space:normal; }
  .stat .lbl{ font-size:12px; align-items:flex-start; }
  .stat .lbl .dot{ margin-top:4px; }
  .glow{ opacity:.6; }
  .screen{ padding:12px; gap:8px; }
  .scr-side{ display:none; }
  .scr-cols{ grid-template-columns:1fr; }
  .glass-card{ position:relative; right:auto; bottom:auto; width:auto; margin-top:28px; }
  .laptop{ transform:none; }
  .brands, .steps, .form{ grid-template-columns:1fr; }
  .quote{ padding:26px 22px; }
  .quote-body{ grid-template-columns:28px 1fr; }
  .quote-foot{ padding-left:0; }
  .panel{ padding:24px; }
  .foot-right{ flex-wrap:wrap; }
  .foot-tag{ padding-left:0; border-left:none; }
  .bignum{ padding:0 16px; }
}

/* =========================================================
   v2 — servicios, consultorías, clientes, equipo
   ========================================================= */
.card.silver{ --c:220,216,212; }
.cards.four{ grid-template-columns:repeat(4,1fr); gap:20px; }
.cards.four .card{ padding:26px 22px 24px; }
.cards.four .card h3{ font-size:21px; }
.cards.four .card p{ font-size:14.5px; margin-bottom:22px; }
.cards.four .card-icon, .cards.four .card-icon svg{ width:38px; height:38px; }

/* Banda destacada de consultorías */
.consult-banner{
  --c:217,165,76;
  margin-top:24px;
  display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  padding:30px 34px; border-radius:var(--radius);
  background:
    radial-gradient(ellipse 50% 120% at 100% 50%,rgba(var(--c),.16),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(var(--c),.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(var(--c),.12);
  position:relative; overflow:hidden;
}
.consult-banner .card-icon{ color:rgb(var(--c)); filter:drop-shadow(0 0 8px rgba(var(--c),.6)); }
.consult-banner .card-icon svg{ width:44px; height:44px; }
.consult-banner h3{ font-size:24px; font-weight:600; margin-bottom:8px; }
.consult-banner p{ color:var(--text-2); font-size:15px; line-height:1.55; }
.consult-banner .tiers{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; font-size:13px; color:var(--text-2);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
  transition:border-color .2s, color .2s, background .2s;
}
a.chip:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.chip.gold{ color:var(--gold-soft); border-color:rgba(217,165,76,.45); }

/* Sub-navegación de servicios */
.subnav{
  position:sticky; top:84px; z-index:20;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:14px 0; margin-bottom:10px;
}
.subnav .chip{ background:rgba(5,4,3,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.subnav .chip.on{ color:#fff; border-color:var(--gold); box-shadow:0 0 12px rgba(217,165,76,.35); }

/* Planes */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{
  --c:255,255,255;
  position:relative; display:flex; flex-direction:column;
  padding:32px 28px 28px; border-radius:var(--radius);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(var(--c),.10),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(var(--c),.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.9);
}
.plan.featured{ --c:217,165,76; border-color:rgba(217,165,76,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 30px rgba(217,165,76,.16), 0 30px 60px -30px rgba(0,0,0,.9); }
.plan.red{ --c:224,68,79; }
.plan.blue{ --c:77,143,224; }
.plan .badge{
  position:absolute; top:-12px; left:28px;
  padding:5px 12px; border-radius:999px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:#1a1206; background:linear-gradient(180deg,#f2c26b,#d9a54c); box-shadow:0 0 16px rgba(217,165,76,.55);
}
.plan .p-kicker{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
.plan h3{ font-size:26px; font-weight:600; margin-bottom:10px; }
.plan .p-sub{ font-size:14.5px; color:var(--text-2); line-height:1.55; margin-bottom:18px; }
.plan .p-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.plan ul{ list-style:none; padding:22px 0 0; margin:0 0 26px; display:grid; gap:11px; border-top:1px solid var(--line-soft); }
.plan li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text-2); line-height:1.45; }
.plan li::before{ content:''; width:6px; height:6px; margin-top:7px; border-radius:50%; flex-shrink:0; background:rgb(var(--c)); box-shadow:0 0 8px rgba(var(--c),.9); }
.plan li.plus{ color:#fff; font-weight:500; }
.plan li.plus::before{ display:none; }
.plan .btn{ margin-top:auto; align-self:flex-start; }
.plan .p-block{ margin-bottom:18px; }
.plan .p-block b{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
.plan .p-block p{ font-size:14.5px; color:var(--text-2); line-height:1.6; }

/* Sesiones de la consultoría express */
.sessions{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:6px 0 0; position:relative; }
.sessions::before{ content:''; position:absolute; left:28px; right:28px; top:27px; height:1px; background:linear-gradient(90deg,var(--gold),rgba(217,165,76,.2)); box-shadow:0 0 10px rgba(217,165,76,.5); }
.session{ position:relative; padding-right:24px; }
.session .n{ position:relative; z-index:2; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; background:radial-gradient(circle at 50% 30%,#2a2724,#0b0a09); border:1px solid rgba(217,165,76,.55); box-shadow:0 0 16px rgba(217,165,76,.2); margin-bottom:20px; }
.session small{ display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; }
.session h4{ font-size:20px; font-weight:600; margin-bottom:8px; }
.session p{ font-size:14.5px; color:var(--text-2); line-height:1.6; }

.note-line{ margin-top:26px; font-size:14px; color:var(--text-2); display:flex; gap:10px; align-items:flex-start; }
.note-line::before{ content:'✎'; color:var(--gold); }

/* Tabla comparativa */
.compare{ width:100%; border-collapse:collapse; font-size:15px; }
.compare th{ text-align:left; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:500; padding:0 18px 14px; }
.compare td{ padding:18px; border-top:1px solid var(--line-soft); color:var(--text-2); vertical-align:top; }
.compare td:first-child{ color:#fff; font-weight:600; white-space:nowrap; }
.compare-wrap{ overflow-x:auto; }

/* Condiciones */
.conds{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; }
.cond{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--line-soft); font-size:14.5px; }
.cond b{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); font-weight:500; padding-top:2px; }
.cond span{ color:var(--text-2); line-height:1.55; }

/* Muro de logos */
.logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.logo-tile{
  aspect-ratio:4/3; border-radius:16px; display:flex; align-items:center; justify-content:center; padding:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.logo-tile:hover{ border-color:rgba(255,255,255,.28); transform:translateY(-3px); box-shadow:0 0 22px rgba(255,255,255,.06); }
.logo-tile img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.logo-tile img.round{ width:88px; height:88px; border-radius:50%; object-fit:cover; }

/* Carrusel de logos en el inicio */
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; gap:18px; width:max-content; animation:marquee 45s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .logo-tile{ width:170px; flex-shrink:0; }
@keyframes marquee{ to{ transform:translateX(calc(-50% - 9px)); } }

/* Equipo */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.member{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.9);
  transition:transform .3s, border-color .3s;
}
.member:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.28); }
.member .photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:radial-gradient(ellipse 80% 70% at 50% 30%,#1d1a17,#070605); }
.member .photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
.member .photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,4,3,.95),transparent 45%); }
.member .initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:84px; font-weight:700; letter-spacing:-0.04em; }
.member .m-body{ position:relative; margin-top:-86px; z-index:2; padding:0 26px 26px; }
.member .role{ display:inline-block; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; }
.member h3{ font-size:24px; font-weight:600; margin-bottom:12px; }
.member .ig{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text-2); transition:color .2s; }
.member .ig svg{ width:16px; height:16px; }
.member .ig:hover{ color:#fff; }

@media (max-width:1080px){
  .cards.four{ grid-template-columns:1fr 1fr; }
  .logos{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:920px){
  .plans, .team{ grid-template-columns:1fr; }
  .sessions{ grid-template-columns:1fr; gap:28px; }
  .sessions::before{ display:none; }
  .conds{ grid-template-columns:1fr; }
  .consult-banner{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(3,1fr); }
  .subnav{ top:76px; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .subnav .chip{ flex-shrink:0; }
  .team{ max-width:420px; }
}
@media (max-width:560px){
  .cards.four{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(2,1fr); }
  .cond{ grid-template-columns:1fr; gap:6px; }
  .plan{ padding:30px 22px 24px; }
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* Proyecto destacado */
.project{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; overflow:hidden; padding:0; }
.cover{
  position:relative; min-height:340px; padding:44px 44px 34px 52px;
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%,rgba(157,43,51,.55),transparent 70%),
    radial-gradient(ellipse 60% 70% at 10% 90%,rgba(90,20,24,.6),transparent 70%),
    linear-gradient(135deg,#1a0b0c,#0b0606);
  overflow:hidden;
}
.cover::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#e0444f; box-shadow:0 0 18px rgba(224,68,79,.8); }
.cover::after{ /* textura de billetes */
  content:''; position:absolute; inset:0; opacity:.18; mix-blend-mode:screen;
  background:repeating-linear-gradient(28deg,transparent 0 38px,rgba(255,255,255,.05) 38px 40px),repeating-linear-gradient(-62deg,transparent 0 60px,rgba(255,120,120,.06) 60px 62px);
}
.cover .c-kicker{ position:relative; z-index:1; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#ff6b74; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.cover .c-kicker::before{ content:''; width:22px; height:2px; background:#e0444f; }
.cover h3{ position:relative; z-index:1; font-size:clamp(46px,6vw,76px); font-weight:800; letter-spacing:-0.03em; color:#fff; line-height:.95; }
.cover .c-line{ position:relative; z-index:1; width:44px; height:3px; background:#e0444f; margin:20px 0 16px; }
.cover p{ position:relative; z-index:1; font-size:14.5px; color:#e6d9d9; max-width:340px; line-height:1.55; }
.cover .c-by{ position:relative; z-index:1; margin-top:30px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#b99a9b; }
.project .p-info{ padding:40px 40px 36px; display:flex; flex-direction:column; justify-content:center; }
.project .p-info h3{ font-size:28px; font-weight:600; margin:16px 0 14px; }
.project .p-info p{ font-size:15.5px; color:var(--text-2); line-height:1.65; margin-bottom:20px; }
.project .p-info .p-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
@media (max-width:920px){ .project{ grid-template-columns:1fr; } .cover{ min-height:280px; padding:36px 28px 28px 34px; } .project .p-info{ padding:28px; } }

/* Trabajos: métricas, galería y visor */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:44px; }
.metric{ padding:24px 22px; border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); }
.metric .num{ font-size:clamp(28px,3vw,38px); font-weight:600; letter-spacing:-0.03em; }
.metric .lbl{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; font-size:13.5px; color:var(--text-2); line-height:1.45; }
.metric .lbl .dot{ margin-top:5px; }
.metric small{ display:block; margin-top:8px; font-size:12px; color:var(--text-dim); }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.filters button{ cursor:pointer; }
.filters button.on{ color:#fff; border-color:var(--gold); box-shadow:0 0 12px rgba(217,165,76,.3); }

.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.work{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:14px; cursor:zoom-in; padding:0;
  border:1px solid rgba(255,255,255,.1); background:#0b0908;
  transition:transform .3s, border-color .3s;
}
.work:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.3); }
.work img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s; }
.work:hover img{ transform:scale(1.04); }
.work span{
  position:absolute; left:0; right:0; bottom:0; padding:28px 10px 9px; text-align:left;
  font-size:11.5px; line-height:1.3; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
}
.work span b{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin-bottom:2px; }
.work[hidden]{ display:none; }

.viewer{ border:none; padding:0; background:transparent; max-width:min(92vw,720px); max-height:92vh; overflow:visible; }
.viewer::backdrop{ background:rgba(3,2,2,.88); backdrop-filter:blur(6px); }
.viewer img{ max-width:min(92vw,720px); max-height:84vh; width:auto; border-radius:14px; margin:0 auto; box-shadow:0 30px 80px rgba(0,0,0,.8); }
.viewer p{ text-align:center; color:var(--text-2); font-size:14px; margin-top:12px; }
.viewer .close{ position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%; cursor:pointer; background:rgba(20,18,16,.9); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:20px; line-height:1; }

.work-strip{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; align-items:stretch; margin-top:36px; }
.work-strip .work{ aspect-ratio:4/5; }
.work-strip .more{ display:flex; align-items:center; }

@media (max-width:1080px){ .gallery{ grid-template-columns:repeat(4,1fr); } .metrics{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .gallery{ grid-template-columns:repeat(3,1fr); } .work-strip{ grid-template-columns:repeat(2,1fr); } .work-strip .more{ grid-column:1/-1; } }
@media (max-width:460px){ .gallery{ grid-template-columns:repeat(2,1fr); } .metrics{ grid-template-columns:1fr; } }
.fine{ margin-top:18px; font-size:12.5px; line-height:1.6; color:var(--text-dim); max-width:760px; }
.work[data-cat="carteleria"] img{ object-position:center; }
.logo-tile img.round{ width:auto; height:100%; aspect-ratio:1; }
.work[data-cat="ads"] img{ object-position:left 30%; }
.ads-strip{ grid-template-columns:repeat(3,1fr) auto; }
.ads-strip .work{ aspect-ratio:16/10; }
.ads-strip .work img{ object-position:left top; }
@media (max-width:700px){ .ads-strip{ grid-template-columns:1fr; } }
.ads-strip .work span{ padding:18px 10px 7px; font-size:10.5px; }
.logos:not(.all) .logo-tile.extra{ display:none; }
.more-logos{ display:flex; justify-content:center; margin-top:24px; }
.more-logos .btn span{ color:var(--gold-soft); }
.logo-tile img.tile{ max-height:100%; border-radius:12px; }
.more-logos[hidden]{ display:none; }