/* ───────────────────────────────────────────────────────────
   TEMA — negro AMOLED, acento naranja, superficies translúcidas
   Se carga después del <style> de cada página y lo sobrescribe.
   ─────────────────────────────────────────────────────────── */

:root {
  --bg:        transparent;
  --bg2:       transparent;
  --bg3:       rgba(255,255,255,0.038);
  --surface:   rgba(255,255,255,0.038);
  --surface-2: rgba(255,255,255,0.068);
  --border:    #1B1B1E;
  --green:     #FF6B2C;
  --green-dim: #E2551A;
  --orange:    #FF6B2C;
  --white:     #F5F5F7;
  --gray:      #8A8A8F;
  --gray-dim:  #4E4E53;
}

html { background:#000; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:transparent; }
::selection { background:#FF6B2C; color:#000; }
nav, section, footer, main { position:relative; z-index:1; }

/* ─── FONDO ANIMADO ─────────────────────────────────────── */
.fondo { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:#000; }
.fondo-blob { position:absolute; border-radius:50%; will-change:transform; }
.fondo-blob.b1 { width:75vw; height:75vw; top:-26vw; left:-16vw;
  background:radial-gradient(circle closest-side, rgba(255,107,44,0.13), transparent 100%);
  animation:deriva1 38s ease-in-out infinite alternate; }
.fondo-blob.b2 { width:62vw; height:62vw; top:34vh; right:-20vw;
  background:radial-gradient(circle closest-side, rgba(255,107,44,0.085), transparent 100%);
  animation:deriva2 51s ease-in-out infinite alternate; }
.fondo-blob.b3 { width:58vw; height:58vw; bottom:-18vw; left:22vw;
  background:radial-gradient(circle closest-side, rgba(150,150,165,0.075), transparent 100%);
  animation:deriva3 63s ease-in-out infinite alternate; }
@keyframes deriva1 { from { transform:translate3d(0,0,0) scale(1); }   to { transform:translate3d(9vw,7vh,0) scale(1.18); } }
@keyframes deriva2 { from { transform:translate3d(0,0,0) scale(1.1); } to { transform:translate3d(-11vw,-9vh,0) scale(0.9); } }
@keyframes deriva3 { from { transform:translate3d(0,0,0) scale(0.95); }to { transform:translate3d(7vw,-6vh,0) scale(1.2); } }
.fondo-puntos, .fondo-foco { position:absolute; inset:-2px;
  background-image:radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
  background-size:32px 32px; }
.fondo-puntos { opacity:0.055;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
          mask-image:linear-gradient(#000 0%, rgba(0,0,0,0.55) 55%, transparent 100%); }
.fondo-foco { opacity:0; transition:opacity 0.6s ease;
  -webkit-mask-image:radial-gradient(260px circle at var(--mx,-500px) var(--my,-500px), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%);
          mask-image:radial-gradient(260px circle at var(--mx,-500px) var(--my,-500px), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%); }
.fondo.activo .fondo-foco { opacity:0.32; }
.fondo-vineta { position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 85% at 50% 0%, transparent 40%, rgba(0,0,0,0.75) 100%); }

/* el fondo viejo de grillas y destellos ya no hace falta */
.hero-grid, .hero-glow, .hero-glow-right, #ta-bg { display:none !important; }

/* ─── TIPOGRAFÍA ────────────────────────────────────────── */
body { font-size:17px; line-height:1.65; }
h1 { font-weight:500; letter-spacing:-0.04em; line-height:1.0; }
h2 { font-weight:500; letter-spacing:-0.032em; line-height:1.1; }
h3 { font-weight:500; letter-spacing:-0.018em; }
h4 { font-weight:500; }
.tag { font-weight:500; letter-spacing:0.14em; }
.section-sub { font-size:19px; line-height:1.6; letter-spacing:-0.01em; }

/* ─── SUPERFICIES Y FORMAS ──────────────────────────────── */
.content-block, .deliverable-item, .problema-card, .servicio-card, .agente-card,
.area-block, .demo-win, .for-who-item, .cta-card, .contacto-nota, .nota {
  background:rgba(255,255,255,0.038) !important;
  border-color:transparent !important;
  border-radius:22px !important;
}
.deliverable-item:hover, .servicio-card:hover, .agente-card:hover,
.problema-card:hover, .for-who-item:hover {
  background:rgba(255,255,255,0.068) !important;
  border-color:transparent !important;
}
.contacto-nota { border-radius:18px !important; }

/* ─── BOTONES ───────────────────────────────────────────── */
.btn-primary, .nav-cta { background:var(--white) !important; color:#000 !important; border-radius:100px !important; font-weight:500 !important; }
.btn-primary:hover, .nav-cta:hover { background:var(--white) !important; opacity:0.86; box-shadow:none !important; }
.btn-secondary, .back-link { background:rgba(255,255,255,0.068) !important; border-color:transparent !important; color:var(--white) !important; border-radius:100px !important; }
.btn-secondary:hover, .back-link:hover { background:rgba(255,255,255,0.11) !important; border-color:transparent !important; }
.btn-whatsapp { background:#FF6B2C !important; color:#000 !important; border-radius:100px !important; font-weight:500 !important; }
.pill { background:rgba(255,107,44,0.10) !important; border-color:transparent !important; color:#FF6B2C !important; }
.pill-new { background:#FF6B2C !important; color:#000 !important; }

/* ─── NAV ───────────────────────────────────────────────── */
nav.scrolled { background:rgba(0,0,0,0.72) !important; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
.nav-dropdown-inner { background:rgba(14,14,15,0.86) !important; border-radius:16px !important; }
.nav-dropdown-inner a { border-radius:11px !important; }
.nav-dropdown-inner a:hover { background:rgba(255,255,255,0.068) !important; }
.logo { font-weight:500 !important; }

/* ─── DETALLES ──────────────────────────────────────────── */
.step-num-small, .step-num { border-color:#FF6B2C !important; color:#FF6B2C !important; }
.servicio-num, .servicio-tag, .agente-role, .scan-tag, .area-num { color:#FF6B2C !important; }
.del-check, .check { color:#FF6B2C !important; }
#ticker { background:rgba(255,255,255,0.026) !important; border-color:var(--border) !important; }
.photo-badge { background:#FF6B2C !important; color:#000 !important; border-radius:100px !important; }
.photo-frame { border-radius:20px !important; }
.photo-frame img { border-radius:20px !important; filter:grayscale(0.5) contrast(1.02) brightness(0.95); }

@media (prefers-reduced-motion: reduce) {
  .fondo-blob { animation:none; }
  .fondo-foco { display:none; }
}
@media (max-width:768px) {
  .fondo-foco { display:none; }
  .fondo-puntos { background-size:26px 26px; opacity:0.04; }
}

/* Fondo v2: aurora cálida + trama técnica. */
.fondo { background:#020202; isolation:isolate; }
.fondo::before { content:""; position:absolute; inset:-35%; opacity:.28;
  background:
    repeating-linear-gradient(115deg, transparent 0 82px, rgba(255,107,44,.055) 83px, transparent 84px 166px),
    repeating-linear-gradient(25deg, transparent 0 118px, rgba(255,255,255,.022) 119px, transparent 120px 238px);
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 55% 24%, #000 0%, transparent 76%);
          mask-image:radial-gradient(ellipse 70% 62% at 55% 24%, #000 0%, transparent 76%);
  animation:trama-viva 34s linear infinite; }
.fondo::after { content:""; position:absolute; width:72vw; height:72vw; min-width:720px; min-height:720px; top:-48vw; right:-16vw; border-radius:50%;
  background:conic-gradient(from 20deg, transparent 0 58%, rgba(255,107,44,.12) 68%, transparent 78% 100%);
  filter:blur(44px); opacity:.68; animation:halo-giro 48s linear infinite; }
.fondo-blob { filter:blur(12px); }
.fondo-blob.b1 { width:78vw; height:78vw; top:-31vw; left:-24vw;
  background:radial-gradient(circle closest-side, rgba(255,78,20,.19), rgba(255,107,44,.075) 47%, transparent 100%);
  animation:deriva-v2-1 28s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.fondo-blob.b2 { width:64vw; height:64vw; top:28vh; right:-28vw;
  background:radial-gradient(circle closest-side, rgba(255,138,87,.11), rgba(255,107,44,.035) 50%, transparent 100%);
  animation:deriva-v2-2 41s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.fondo-blob.b3 { width:52vw; height:52vw; bottom:-24vw; left:18vw;
  background:radial-gradient(circle closest-side, rgba(118,103,97,.09), transparent 100%);
  animation:deriva-v2-3 54s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes deriva-v2-1 { from { transform:translate3d(-2vw,-2vh,0) scale(.96); } to { transform:translate3d(12vw,10vh,0) scale(1.14); } }
@keyframes deriva-v2-2 { from { transform:translate3d(0,4vh,0) scale(1.06); } to { transform:translate3d(-14vw,-8vh,0) scale(.9); } }
@keyframes deriva-v2-3 { from { transform:translate3d(-5vw,2vh,0) scale(.92); } to { transform:translate3d(10vw,-9vh,0) scale(1.18); } }
@keyframes trama-viva { to { transform:translate3d(166px,-84px,0); } }
@keyframes halo-giro { to { transform:rotate(360deg); } }
.fondo-puntos, .fondo-foco { inset:-40px; background-size:34px 34px; }
.fondo-puntos { opacity:.055; animation:puntos-deriva 26s linear infinite;
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,.5) 48%, transparent 90%);
          mask-image:linear-gradient(#000 0%, rgba(0,0,0,.5) 48%, transparent 90%); }
@keyframes puntos-deriva { to { transform:translate3d(34px,34px,0); } }
.fondo-foco { opacity:0; transition:opacity .7s ease;
  background-image:radial-gradient(circle, rgba(255,142,94,.95) 1px, transparent 1.4px);
  -webkit-mask-image:radial-gradient(300px circle at var(--mx,-500px) var(--my,-500px), #000 0%, rgba(0,0,0,.5) 42%, transparent 74%);
          mask-image:radial-gradient(300px circle at var(--mx,-500px) var(--my,-500px), #000 0%, rgba(0,0,0,.5) 42%, transparent 74%); }
.fondo.activo .fondo-foco { opacity:.42; }
.fondo-vineta { z-index:5; background:
  linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.4)),
  radial-gradient(ellipse 115% 80% at 50% 12%, transparent 32%, rgba(0,0,0,.82) 100%); }

/* Portada comercial: foco y prueba. */
.focus-grid, .evidence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.focus-card, .evidence-card { position:relative; overflow:hidden; min-height:100%; padding:28px; border:1px solid rgba(255,255,255,.065); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)); }
.focus-card { display:flex; flex-direction:column; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.focus-card::after, .evidence-card::after { content:""; position:absolute; inset:auto -20% -55% 30%; height:150px; background:radial-gradient(circle,rgba(255,107,44,.14),transparent 68%); }
.focus-card:hover { transform:translateY(-5px); border-color:rgba(255,107,44,.26); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,107,44,.025)); }
.focus-kicker, .evidence-kicker { color:var(--orange); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.focus-card h3, .evidence-card h3 { margin:14px 0 10px; font-size:23px; }
.focus-card p, .evidence-card p { color:var(--gray); font-size:15px; line-height:1.6; }
.focus-link { position:relative; z-index:1; margin-top:auto; padding-top:22px; color:var(--white); font-size:13px; }
#evidencia { background:linear-gradient(180deg,rgba(255,255,255,.018),transparent); }
.evidence-outcome { display:block; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); color:var(--white); font-size:14px; line-height:1.5; }
.evidence-note { margin-top:24px; color:var(--gray-dim); font-size:13px; }
.evidence-note a { color:var(--gray); text-decoration:underline; text-underline-offset:3px; }
.trust-line { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px; color:var(--gray); font-size:13px; }
.trust-line span::before { content:"✓"; margin-right:8px; color:var(--orange); }

@media (max-width:900px) {
  .focus-grid, .evidence-grid { grid-template-columns:1fr; }
  .focus-card, .evidence-card { padding:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fondo::before, .fondo::after, .fondo-blob, .fondo-puntos { animation:none; }
}
@media (max-width:768px) {
  .fondo::before { opacity:.18; }
  .fondo::after { min-width:560px; min-height:560px; right:-360px; top:-320px; }
  .fondo-blob.b1 { width:130vw; height:130vw; left:-70vw; top:-35vw; }
  .fondo-blob.b2 { width:120vw; height:120vw; right:-80vw; }
  .fondo-puntos { background-size:28px 28px; opacity:.035; }
}