*, *::before, *::after { box-sizing: border-box; }
html { background: #08090a; }
body { margin: 0; background: #0d0e12; color: #cbd0da; font-family: 'Chivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #7a3bff; color: #fff; }
a { color: #b494ff; text-decoration: none; }
a:hover { color: #ece3ff; }
@keyframes ade-pulse { 0%,100% { opacity: .25 } 50% { opacity: .9 } }
@keyframes ade-sweep { 0% { transform: translateY(-100%) } 100% { transform: translateY(400%) } }
@keyframes ade-drift { 0% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-14px,0) } 100% { transform: translate3d(0,0,0) } }
@keyframes ade-blink { 0%,45% { opacity: 1 } 50%,95% { opacity: 0 } 100% { opacity: 1 } }
@keyframes ade-marquee { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes ade-glow { 0%,100% { box-shadow: 0 0 30px rgba(242,240,236,0.10) } 50% { box-shadow: 0 0 70px rgba(242,240,236,0.26) } }
@keyframes ade-float { 0%,100% { transform: translate3d(0,-10px,0) } 50% { transform: translate3d(0,10px,0) } }
@keyframes ade-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes ade-ring { 0% { transform: scale(0.12); opacity: 0 } 12% { opacity: .85 } 100% { transform: scale(3.4); opacity: 0 } }
@keyframes ade-ping { 0% { transform: scale(0.07); opacity: 0 } 14% { opacity: .85 } 100% { transform: scale(1); opacity: 0 } }

/* hover states (were style-hover="" attrs in the design source) */
.hv-0:hover { opacity:1 !important; }
.hv-1:hover { opacity:1 !important; }
.hv-2:hover { opacity:1 !important; }
.hv-3:hover { color:#f2f0ec !important; }
.hv-4:hover { color:#f2f0ec !important; }
.hv-5:hover { color:#f2f0ec !important; }
.hv-6:hover { border-color:rgba(20,22,29,0.34) !important; }
.hv-7:hover { transform:scale(1.06) !important; }
.hv-8:hover { border-color:rgba(20,22,29,0.34) !important; }
.hv-9:hover { transform:scale(1.06) !important; }
.hv-10:hover { border-color:rgba(20,22,29,0.34) !important; }
.hv-11:hover { transform:scale(1.06) !important; }
.hv-12:hover { border-color:rgba(20,22,29,0.34) !important; }
.hv-13:hover { transform:scale(1.06) !important; }
.hv-14:hover { background:#6626e6 !important; }
.hv-15:hover { border-color:rgba(255,92,0,0.45) !important; background:#181b23 !important; transform:translateY(-6px) !important; }
.hv-16:hover { border-color:rgba(122,59,255,0.45) !important; background:#181b23 !important; transform:translateY(-6px) !important; }
.hv-17:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-18:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-19:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-20:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-21:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-22:hover { background:#14161d !important; transform:translateY(-5px) !important; }
.hv-23:hover { background:#7a3bff !important; color:#ffffff !important; }
.hv-24:hover { color:#ffffff !important; }

/* ===================================================================
   Responsive
   El diseño original viene con todo en style="" inline y sin una sola
   clase, así que acá se sobreescribe por el valor inline y con
   !important — un style= inline le gana a cualquier regla de clase.
   Si cambiás un padding o un grid en el template, actualizá el string
   que lo matchea acá abajo.
   =================================================================== */

@media (max-width: 1024px) {
  /* padding lateral: 64px se come un tercio de una pantalla chica */
  [data-head],
  [style*="padding:0 64px"],
  [style*="padding:80px 64px"],
  [style*="padding:96px 64px 44px"],
  [style*="padding:150px 64px"],
  [style*="padding:160px 64px 0"],
  [style*="padding:180px 64px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* la tira de 4 fichas de hardware queda ilegible a 4 columnas */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"] { grid-template-columns: 1fr !important; }

  /* el marquee full-bleed se sale del padding: asume los 64px del diseño */
  [style*="width:calc(100% + 128px)"] { width: calc(100% + 64px) !important; margin-left: -32px !important; }

  /* la guía vertical fija se superpone con el texto al angostarse */
  [data-spine] { display: none !important; }

  /* El panel de operacion pasa de tres columnas a bloques apilados; las lineas
     divisorias verticales se vuelven horizontales. */
  [data-ops-body] { grid-template-columns: 1fr !important; }
  [data-ops-body] > div { border-right: 0 !important; border-left: 0 !important; }
  [data-ops-body] > div + div { border-top: 1px solid rgba(242,240,236,0.08) !important; }
}

@media (max-width: 760px) {
  [data-head],
  [style*="padding:0 64px"],
  [style*="padding:80px 64px"],
  [style*="padding:96px 64px 44px"],
  [style*="padding:150px 64px"],
  [style*="padding:160px 64px 0"],
  [style*="padding:180px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* todo a una columna */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="gap:80px"] { gap: 44px !important; }

  /* el marquee full-bleed se sale del padding: asume los 64px del diseño */
  [style*="width:calc(100% + 128px)"] { width: calc(100% + 40px) !important; margin-left: -20px !important; }

  /* el nav no entra a 390px: del logo queda solo "ADE" (se van el guión
     y el subtítulo) y se aprietan los links */
  [data-head] > a > span:not(:first-child) { display: none !important; }
  [data-head] nav { gap: 13px !important; font-size: 9px !important; }
  [data-head] nav a, [data-head] nav button { font-size: 9px !important; letter-spacing: 0.12em !important; white-space: nowrap !important; }

  /* la meta del hero es una fila nowrap que se corta */
  [data-hero-meta] { flex-wrap: wrap !important; gap: 8px 16px !important; font-size: 8.5px !important; }

  /* el selector de hero flota sobre el contenido */
  [data-takebar] { bottom: 14px !important; gap: 2px !important; padding: 5px 6px !important; }
  [data-takebar] > span { display: none !important; }
  [data-takebar] button { padding: 6px 9px !important; font-size: 8.5px !important; }
}