/* Tema NVIDIA: se carga DESPUÉS del <style> de index.php y lo sobreescribe. */
:root{
  color-scheme:dark;
  --brand:#76B900;--brand-deep:#5a8f00;--brand-ink:#000;
  --accent:#76B900;
  --bg:#000;--bg-2:#0a0a0a;--ink:#fff;--muted:#a7a7a7;--faint:#8c8c8c; /* faint: 5.4:1 sobre #151515 (el #7a7a7a daba 4.25) */
  --line:#1e1e1e;--line-2:#2c2c2c;
  --surface:#0d0d0d;--glow:rgba(118,185,0,.18);
}
body{background:#000;color:#fff}

/* Botones: verde con texto negro */
.btn{transition:transform .16s ease-out,translate .16s ease-out,scale .16s ease-out,background-color .16s,border-color .16s,box-shadow .16s,color .16s}
.btn:active{scale:.97}
.btn-yellow,.btn-brand{color:#000}
.btn-yellow:hover{box-shadow:0 12px 32px -8px rgba(118,185,0,.65)}
.btn-brand:hover{background:#8fd400;color:#000}
.btn-outline-w{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.4)} /* fondo: legible sobre la esfera */
.btn-outline-w:hover{border-color:var(--brand);background:rgba(118,185,0,.1)}

/* Header */
header{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* El logo es negro sobre transparente: se invierte a blanco con un halo verde */
.brand{flex-shrink:0}
.brand .mark{height:44px;filter:invert(1) drop-shadow(0 0 10px rgba(118,185,0,.45))}
/* En teléfonos el logo se aplastaba a 0px: el enlace CRM (también en el footer) cede su sitio */
@media(max-width:420px){.navright .crm-link{display:none}}
/* Menú compacto: en español pedía 1222px (más que los 1200 del contenedor) y entre 901 y 1180px el botón se salía de la pantalla */
@media(min-width:901px){
  nav{gap:18px}
  .navlinks{gap:16px;margin-left:0;font-size:14px}
  .navright{gap:10px}
  .navright .btn{padding:11px 16px;font-size:14px}
}
@media(max-width:1100px) and (min-width:901px){.brand-name{display:none}}
@media(max-width:1000px) and (min-width:901px){nav{gap:14px}.navlinks{gap:10px;font-size:13.5px}.navright .btn{padding:10px 12px;font-size:13px}}

/* Casos: con 1fr a secas una palabra larga ensanchaba su columna y la 4.ª tarjeta salía de la pantalla a 1024px */
.case-card{min-width:0;overflow-wrap:anywhere}

/* Foco visible con el verde de la marca (los anillos por defecto se pierden sobre negro) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* Titulares sin viudas (también en inglés, que es más largo) */
.hero h1,.sec-head h2,.cta-sec h2{text-wrap:balance}

/* Hero */
.hero{background:radial-gradient(ellipse at 78% 38%,rgba(118,185,0,.12),transparent 55%),#000}
.hero::before{background:radial-gradient(circle,var(--glow),transparent 65%);opacity:1}
.hero::after{border-color:rgba(118,185,0,.18)}

/* Franja */
.strip{background:var(--brand)}

/* Secciones y tarjetas: superficie levemente más clara que el fondo */
.sec.gray{background:var(--bg-2)}
.svc,.case-card,.pkg,.testi,.team-card,.os,.chip,details{background-color:var(--surface)}
.svc:hover{box-shadow:0 18px 44px -16px rgba(118,185,0,.35)}
.testi:hover,.team-card:hover{box-shadow:0 18px 44px -18px rgba(118,185,0,.3)}
.svc .ico{background:#151515}
.svc:hover .ico,.chip .mk,.os .osmk,.testi-author .mk,.pkg .ptag{color:#000}
.pkg.featured{box-shadow:0 24px 60px -24px rgba(118,185,0,.4)}
.team-photo{background:#151515}
.team-tag{background:#151515}

/* Resultados y números */
.results-block{background:linear-gradient(135deg,#0f0f0f,#050505);border:1px solid var(--line-2);box-shadow:0 0 90px -34px rgba(118,185,0,.4)}
.nums-bar{background:var(--line)}
.num-item{background:#0d0d0d}
.num-item:hover{background:#151515}
.num-item .nval{color:var(--brand);text-shadow:0 0 28px rgba(118,185,0,.45)}
.num-item .nlbl{color:var(--muted)}
.team-story{background:#0f0f0f;border:1px solid var(--line-2)}
.team-story .ts-badge{background:rgba(118,185,0,.1);border-color:rgba(118,185,0,.3)}
.diag-step .dnum{background:rgba(118,185,0,.12);border-color:rgba(118,185,0,.35)}

/* Plataformas */
.plat-shot{background:#0d0d0d;border-color:var(--line-2);box-shadow:0 30px 70px -30px rgba(118,185,0,.28)}
.plat-bar{background:#111}
.plat-bar .purl{background:#000;border-color:var(--line-2);color:var(--muted)}
.badge-live{background:rgba(118,185,0,.15);color:var(--brand)}
.plat-checks li:before{color:var(--brand)}

/* CTA y formulario */
.cta-sec{background:radial-gradient(ellipse at 15% 20%,rgba(118,185,0,.16),transparent 55%),#000}
.cta-sec::before{background:radial-gradient(circle,var(--glow),transparent 65%);opacity:1}
.form-card{background:var(--surface);color:#fff;border:1px solid var(--line-2)}
.field input,.field select,.field textarea{background:#000;color:#fff;border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{background:#000;border-color:var(--brand);box-shadow:0 0 0 3px rgba(118,185,0,.22)}
.field select option{background:#000;color:#fff}
.form-ok{color:#86efac}.form-err{color:#fca5a5}
/* La suma del captcha venía en azul inline (#1a56db, 3:1 sobre la tarjeta) */
.form-card .field label strong{color:var(--brand)!important}
.robot-row input[type="checkbox"]{accent-color:var(--brand)}

/* Footer: antes usaba var(--ink) como fondo, que ahora es blanco */
footer{background:#050505;border-top:1px solid var(--line);padding-bottom:104px}

/* WhatsApp flotante: texto blanco sobre #25d366 daba 2:1; negro da 10.6:1 (5.1:1 en el extremo oscuro) */
.wa-sticky{color:#000}

/* Hero 3D */
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.hero.no-webgl{background:radial-gradient(ellipse at 78% 40%,rgba(118,185,0,.28),transparent 60%),#000}
.hero.no-webgl #hero3d{display:none}

/* Revelado por scroll */
.rv{opacity:0;translate:0 28px;scale:.97;filter:blur(6px);transition:opacity .7s cubic-bezier(.23,1,.32,1) var(--d,0ms),translate .7s cubic-bezier(.23,1,.32,1) var(--d,0ms),scale .7s cubic-bezier(.23,1,.32,1) var(--d,0ms),filter .7s ease var(--d,0ms)}
.rv.in{opacity:1;translate:none;scale:none;filter:none}

/* Plataformas en perspectiva: --p va de 0 (inclinada) a 1 (recta). Sin JS, --p vale 1. */
.plat{perspective:1400px}
.plat-shot.persp{
  transform:rotateY(calc((1 - var(--p,1)) * var(--dir,-1) * 22deg)) rotateX(calc((1 - var(--p,1)) * 9deg)) translateY(calc((1 - var(--p,1)) * 46px));
  opacity:calc(.25 + var(--p,1) * .75);
  transform-origin:center;
}
/* Reserva el alto de la captura (todas miden 961x929): evita el salto de layout al cargar las lazy */
.plat-shot img{aspect-ratio:961/929;height:auto}

/* Tilt: el brillo es un background-image (no un pseudo-elemento) para no recortar .ptag */
.tilt:not(.rv),.tilt:not(.rv):hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out,border-color .18s,box-shadow .18s;
  background-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(118,185,0,var(--ga,0)),transparent 45%);
  will-change:transform;
}

/* Halo de cursor */
.nv-halo{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;background:radial-gradient(circle,rgba(118,185,0,.10),transparent 65%)}

/* Borde con degradado girando (plan destacado y formulario) */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.pkg.featured,.form-card{
  border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--ang),#76b900,#1a1a1a 30%,#76b900 60%,#1a1a1a 85%,#76b900) border-box;
  animation:nvspin 6s linear infinite;
}
@keyframes nvspin{to{--ang:360deg}}
/* Sin giro en móvil ni con movimiento reducido; nvidia.js lo pausa fuera de pantalla */
@media(prefers-reduced-motion:reduce),(max-width:700px){.pkg.featured,.form-card{animation:none}}
/* Movimiento reducido: sin escala al pulsar, sin transiciones de revelado/tilt/halo */
@media(prefers-reduced-motion:reduce){.btn,.rv,.tilt:not(.rv),.tilt:not(.rv):hover,.nv-halo{transition:none}.btn:active{scale:none}.plat-shot.persp{transform:none;opacity:1}}
@media print{.rv{opacity:1;filter:none;translate:none;scale:none}}