@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fuentes/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* escala neutra (la de Aceternity/Tailwind) — el fondo NO es negro puro */
  --n-950:#0a0a0a;
  --n-900:#171717;
  --n-850:#1e1e1e;
  --n-800:#262626;
  --n-700:#404040;
  --n-600:#525252;
  --n-500:#8a8a8a;   /* subido de #737373: en texto pequeno daba 3,78:1 y no pasa AA */
  --n-400:#a3a3a3;
  --n-300:#d4d4d4;
  --n-200:#e5e5e5;
  --blanco:#fff;

  --marca:#173cff;
  --marca-2:#3a5bff;
  /* se perdio al reescribir el estilo: sin ella, toda regla que la usa
     quedaba en silencio (el logo salia transparente) */
  --marca-claro:#5b7bff;
  --marca-tenue:rgba(23,60,255,.14);

  --ancho:1280px;
  --pad:24px;

  /* modo app (PWA/Home Screen): 0 en navegador normal, > 0 solo con
     viewport-fit=cover + notch/isla dinámica */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* la sombra en capas característica de Aceternity */
  --sombra:0 0 24px rgba(34,42,53,.06), 0 1px 1px rgba(0,0,0,.05),
           0 0 0 1px rgba(34,42,53,.04), 0 0 4px rgba(34,42,53,.08),
           0 16px 68px rgba(47,48,55,.05), 0 1px 0 rgba(255,255,255,.1) inset;
}
@media (min-width:768px){ :root{ --pad:40px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:clip }
body{
  margin:0; background:var(--n-900); color:var(--n-300);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
p{ margin:0 }
img{ max-width:100%; display:block }
p,li,h1,h2,h3,h4{ overflow-wrap:break-word }
h1,h2,h3,h4{ margin:0; color:var(--blanco); letter-spacing:-.025em; line-height:1.1 }

.envoltorio{ max-width:var(--ancho); margin:0 auto; padding:0 var(--pad); width:100% }
.seccion{ padding:88px 0 }
@media (min-width:768px){ .seccion{ padding:120px 0 } }

/* ─── SENSACIÓN DE APP (aunque no esté instalada) ───
   El flash gris al tocar y el :hover que se queda "pegado" tras un tap son
   lo que delata que esto es una web y no una app. Solo se toca lo que
   REALMENTE es interactivo (enlaces, botones, sumario del FAQ): a una
   tarjeta decorativa no se le pone respuesta táctil, porque no hace nada
   al tocarla y fingir que sí engaña. */
*{ -webkit-tap-highlight-color:transparent }
a, button, .btn, .cat-f, summary, label.captcha, label.consiente{
  touch-action:manipulation;
}
@media (hover:none){
  .nav-links a:active, .panel-nav a:active, .pie-col a:active,
  .prosa a:active, .login-ayuda:active, .consiente-txt a:active{
    opacity:.6; transition:opacity .1s ease;
  }
  .faq summary:active, .cat-f:active{
    background:var(--n-800); transition:background .1s ease;
  }
  .captcha:active, .consiente:active{
    border-color:var(--n-600); transition:border-color .1s ease;
  }
}
/* inercia nativa en las tiras que se desplazan de lado (tablas, filtros) */
.tabla-env, .panel-facts, .panel-nav{ -webkit-overflow-scrolling:touch }

/* ─── CABECERA DE SECCIÓN ─── */
.cab{ max-width:620px; margin:0 auto 56px; text-align:center }
.cab .etq{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--n-400);
  border:1px solid var(--n-800); border-radius:4px; padding:6px 14px; margin-bottom:20px;
  background:var(--n-850);
}
.cab h1, .cab h2{ font-size:clamp(28px,4.4vw,44px); font-weight:600; margin-bottom:16px }
.cab p{ color:var(--n-400); font-size:16px }

/* ─── BOTONES ─── */
/* Botones: la sombra en capas de Aceternity está pensada para fondo CLARO y
   sobre negro no se ve nada — por eso quedaban planos. Lo que da relieve en
   oscuro es: degradado propio + filo interior arriba + halo de color + un
   barrido de luz al pasar. */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:4px;
  font-size:14px; font-weight:600; letter-spacing:-.01em; text-align:center; cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
/* barrido de luz */
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.20) 48%, transparent 62%);
  transform:translateX(-140%);
  transition:transform .65s cubic-bezier(.3,.7,.3,1);
}
.btn:hover::after{ transform:translateX(140%) }
.btn:active{ transform:translateY(1px) scale(.99) }

/* principal · azul de marca */
.btn.azul{
  color:#fff;
  background:linear-gradient(180deg, #486bff 0%, var(--marca) 55%, #1230cc 100%);
  border-color:#2f52ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.5),
    0 10px 26px -10px rgba(23,60,255,.85);
}
.btn.azul:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 2px 4px rgba(0,0,0,.5),
    0 16px 38px -12px rgba(23,60,255,1);
}

/* claro · para la nav */
.btn.claro{
  color:#0b0b0e;
  background:linear-gradient(180deg, #fff 0%, #e9ecf5 100%);
  border-color:rgba(255,255,255,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 1px 2px rgba(0,0,0,.55),
    0 10px 26px -12px rgba(255,255,255,.28);
}
.btn.claro:hover{ transform:translateY(-2px); filter:brightness(1.04) }

/* oscuro · secundario con cuerpo */
.btn.oscuro{
  color:var(--blanco);
  background:linear-gradient(180deg, #26262e 0%, #131318 100%);
  border-color:#33333d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.6),
    0 10px 24px -14px rgba(0,0,0,.9);
}
.btn.oscuro:hover{ transform:translateY(-2px); border-color:#454552 }

/* fantasma · filo degradado, no un borde plano */
.btn.fantasma{
  color:var(--n-300);
  background:
    linear-gradient(180deg, rgba(30,30,38,.9), rgba(16,16,22,.9)) padding-box,
    linear-gradient(180deg, rgba(120,140,220,.55), rgba(60,60,80,.28)) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 18px -12px rgba(0,0,0,.9);
}
.btn.fantasma:hover{
  color:var(--blanco); transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(28,36,72,.95), rgba(16,20,44,.95)) padding-box,
    linear-gradient(180deg, rgba(143,166,255,.85), rgba(60,80,180,.4)) border-box;
}
.btn.ancho{ display:flex; width:100% }
@media (prefers-reduced-motion:reduce){ .btn::after{ transition:none } }

/* ─── NAV ─── */
.nav{ position:sticky; top:0; z-index:50; padding:calc(14px + var(--safe-t)) 0 22px; pointer-events:none }
.nav .envoltorio{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:24px; height:60px;
  padding:0 8px 0 22px; pointer-events:auto;
  background:rgba(23,23,23,.66); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08); border-radius:999px;
  box-shadow:0 12px 34px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s ease, background .25s ease;
}
.marca{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color:var(--blanco) }
.marca-icono{
  width:24px; height:22px; flex:none; background:var(--blanco);
  -webkit-mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
  mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
}
.nav-links{ display:none; gap:2px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
@media (min-width:900px){ .nav-links{ display:flex } }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--n-400); padding:9px 16px; border-radius:999px;
  transition:color .18s ease, background .18s ease;
}
.nav-links a:hover{ color:var(--blanco); background:rgba(255,255,255,.06) }
.nav-links a.act{ color:var(--blanco); background:var(--n-800) }
.nav-acciones{ display:flex; align-items:center; gap:8px }
.nav-acciones .btn{ padding-top:9px; padding-bottom:9px }
.nav-acciones .btn.claro{ border-radius:999px }
.nav-acciones .btn.fantasma{ border-radius:999px; border-color:transparent }
.nav-acciones .btn.fantasma:hover{ background:rgba(255,255,255,.06) }

/* ─── BARRA INFERIOR (estilo app, solo móvil) ───
   Nada de iconos de librería: el hueco de "Inicio" lo lleva el logo de la
   marca (el mismo `.marca-icono` de la píldora de arriba) y el resto van
   numerados en mono, como las secciones `[ 01 ]` del sistema de la casa.
   El activo se marca con el punto verde de "en servicio", no con relleno
   de color — es el mismo lenguaje que ya usa el sitio en el panel del VPS
   y en el pie ("Todos los sistemas en servicio"), no un patrón nuevo. */
.tabbar{ display:none }
@media (max-width:899px){
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    justify-content:space-between; align-items:stretch;
    padding:8px 10px calc(8px + var(--safe-b));
    background:rgba(10,10,14,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--n-800);
  }
  /* deja hueco para que el pie no quede tapado detrás de la barra */
  body{ padding-bottom:calc(60px + var(--safe-b)) }
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  flex:1; min-width:0; padding:4px 2px;
  color:var(--n-500); font-size:10px; font-weight:500; letter-spacing:.02em;
}
.tabbar .tb-ic{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:20px; border:1px solid var(--n-800); border-radius:4px;
  background:var(--n-900); font-family:var(--mono,ui-monospace,monospace);
  font-size:9px; font-weight:600; color:var(--n-500); letter-spacing:0;
  transition:border-color .18s ease, color .18s ease;
}
.tabbar .tb-ic .marca-icono{ width:12px; height:11px; background:var(--n-500) }
.tabbar a span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.tabbar a.act{ color:var(--n-200) }
.tabbar a.act .tb-ic{ border-color:var(--marca); color:var(--marca-claro) }
.tabbar a.act .tb-ic .marca-icono{ background:var(--marca-claro) }
.tabbar a.act .tb-ic::after{
  content:''; position:absolute; top:-3px; right:-3px; width:6px; height:6px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 5px rgba(34,197,94,.9), 0 0 0 2px var(--n-950);
  animation:latir 2s ease-in-out infinite;
}
@media (hover:none){ .tabbar a:active .tb-ic{ background:var(--n-800) } }

/* ─── HERO ─── */
.hero{
  position:relative; overflow:hidden;
  margin-top:calc(-96px - var(--safe-t)); min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(168px + var(--safe-t)) 0 0; text-align:center;
}
/* rejilla girada 45°, el fondo propio de Aceternity */
.hero-rejilla{
  position:absolute; inset:-40%; z-index:0; pointer-events:none;
  transform:rotate(-45deg);
  background-image:linear-gradient(90deg, var(--n-800) 1px, transparent 1px);
  background-size:180px 100%;
  mask:radial-gradient(closest-side at 50% 50%, #000 10%, transparent 85%);
  -webkit-mask:radial-gradient(closest-side at 50% 50%, #000 10%, transparent 85%);
  opacity:.9;
}
.hero .envoltorio{ position:relative; z-index:1 }
.hero h1{
  font-size:clamp(34px,6.4vw,72px); font-weight:600; letter-spacing:-.035em;
  max-width:19ch; margin:0 auto 22px; text-wrap:balance; color:var(--n-200);
}
/* entrada palabra a palabra, de desenfocado a nítido */
.hero h1 .w{ display:inline-block; animation:entra .45s cubic-bezier(.22,.7,.3,1) both; animation-delay:calc(var(--i) * 55ms) }
@keyframes entra{ from{ filter:blur(10px); opacity:0; transform:translateY(10px) } to{ filter:blur(0); opacity:1; transform:none } }
.hero p.lead{ max-width:52ch; margin:0 auto 34px; color:var(--n-400); font-size:16.5px }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:56px }

/* marco anidado — el recurso visual de la plantilla */
.marco{
  max-width:960px; margin:0 auto; padding:8px;
  border:1px solid rgba(64,64,64,.5); border-radius:8px;
  background:rgba(38,38,38,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@media (min-width:768px){ .marco{ padding:14px } }
.marco-interior{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-950);
  padding:22px; text-align:left;
}
/* panel de estado dibujado, no una foto */
.panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--n-800); margin-bottom:18px }
.panel-t{ font-size:13px; font-weight:600; color:var(--n-300) }
.panel-estado{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--n-400) }
.punto-vivo{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.8); animation:latir 2s ease-in-out infinite }
@keyframes latir{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion:reduce){ .punto-vivo{ animation:none } .hero h1 .w{ animation:none } }

/* ─── REJILLA DE TARJETAS ─── */
.rejilla{ display:grid; gap:20px; grid-template-columns:1fr }
@media (min-width:640px){ .rejilla{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .rejilla.c4{ grid-template-columns:repeat(4,1fr) } .rejilla.c3{ grid-template-columns:repeat(3,1fr) } }
.tarjeta{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:26px; transition:border-color .25s ease, transform .25s ease;
}
.tarjeta:hover{ border-color:var(--n-700); transform:translateY(-3px) }
.tarjeta .ic{
  width:38px; height:38px; border-radius:6px; margin-bottom:18px;
  border:1px solid var(--n-800); background:var(--n-900);
  display:flex; align-items:center; justify-content:center;
}
.tarjeta .ic svg{ width:18px; height:18px; stroke:var(--n-300) }
.tarjeta h3{ font-size:17px; font-weight:600; margin-bottom:8px }
.tarjeta p{ font-size:14px; color:var(--n-400); line-height:1.6 }
.tarjeta .pie-t{ margin-top:18px; padding-top:16px; border-top:1px solid var(--n-800); font-size:13px; color:var(--n-500) }
.tarjeta .pie-t b{ color:var(--n-200); font-weight:600 }

/* ─── PRECIOS ─── */
.plan{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:28px; display:flex; flex-direction:column; position:relative;
  transition:border-color .25s ease;
}
.plan:hover{ border-color:var(--n-700) }
.plan.destacado{ border-color:var(--marca); background:var(--n-800); box-shadow:0 0 0 1px rgba(23,60,255,.35), 0 24px 60px -30px rgba(23,60,255,.5) }
.plan .ribete{
  position:absolute; top:-11px; left:28px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blanco);
  background:linear-gradient(to bottom, var(--marca-2), var(--marca));
  border-radius:4px; padding:4px 12px;
}
.plan .ic{
  width:38px; height:38px; border-radius:6px; margin-bottom:16px; flex:none;
  border:1px solid var(--n-800); background:var(--n-900);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, background .25s ease;
}
.plan .ic svg{ width:18px; height:18px; stroke:var(--n-300); transition:stroke .25s ease }
.plan.destacado .ic{ border-color:var(--marca); background:var(--marca-tenue) }
.plan.destacado .ic svg{ stroke:var(--marca-claro) }
.plan h3{ font-size:16px; font-weight:600; margin-bottom:8px }
.plan .desc{ font-size:13.5px; color:var(--n-400); line-height:1.55; margin-bottom:22px; min-height:58px }
.plan .precio{ display:flex; align-items:baseline; gap:6px; margin-bottom:22px }
.plan .num{ font-size:40px; font-weight:600; color:var(--blanco); letter-spacing:-.04em }
.plan .num.texto{ font-size:24px }
.plan .mo{ font-size:13px; color:var(--n-500) }
.plan ul{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1 }
.plan li{ display:flex; gap:10px; font-size:13.5px; color:var(--n-400); line-height:1.5 }
.plan li svg{ width:15px; height:15px; flex:none; margin-top:3px; stroke:var(--n-500) }

/* ─── TABLA DE PRECIOS (dominios) ─── */
.tabla-env{ max-width:760px; margin:0 auto; overflow-x:auto; border:1px solid var(--n-800); border-radius:8px; background:var(--n-850) }
.tabla-precios{ width:100%; border-collapse:collapse; min-width:520px }
.tabla-precios th, .tabla-precios td{ padding:15px 20px; text-align:left; border-bottom:1px solid var(--n-800); font-size:14px; white-space:nowrap }
.tabla-precios th{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--n-500) }
.tabla-precios td{ color:var(--n-400) }
.tabla-precios td.ext{ color:var(--blanco); font-weight:600 }
.tabla-precios td.num{ color:var(--n-200); font-variant-numeric:tabular-nums }
.tabla-precios tr:last-child td{ border-bottom:none }
.tabla-precios tbody tr:hover td{ background:var(--n-800) }

/* ─── PROSA (páginas legales) ─── */
.prosa{ max-width:720px; margin:0 auto }
.prosa .actualizado{ font-size:13px; color:var(--n-500); margin-bottom:40px; text-align:center }
.prosa h2{ font-size:20px; font-weight:600; color:var(--blanco); margin:44px 0 14px }
.prosa h2:first-of-type{ margin-top:0 }
.prosa h3{ font-size:15px; font-weight:600; color:var(--n-200); margin:24px 0 10px }
.prosa p{ font-size:14.5px; line-height:1.75; color:var(--n-400); margin-bottom:14px }
.prosa ul{ margin:0 0 16px 22px; padding:0 }
.prosa li{ font-size:14.5px; line-height:1.7; color:var(--n-400); margin-bottom:8px }
.prosa a{ color:var(--marca-claro); text-underline-offset:2px }
.prosa a:hover{ color:var(--blanco) }
.prosa strong{ color:var(--n-200); font-weight:600 }

/* ─── PASOS (migración) · en fila, sin foto ─── */
.pasos{ display:grid; gap:20px; grid-template-columns:1fr }
@media (min-width:900px){ .pasos{ grid-template-columns:repeat(3,1fr) } }
.paso{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:28px; transition:border-color .25s ease;
}
.paso:hover{ border-color:var(--n-700) }
.paso .n{
  width:34px; height:34px; border-radius:9px; margin-bottom:18px;
  background:var(--n-900); border:1px solid var(--n-800);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--n-300); font-variant-numeric:tabular-nums;
}
.paso h3{ font-size:16.5px; font-weight:600; margin-bottom:8px }
.paso p{ font-size:14px; color:var(--n-400); line-height:1.6 }

/* ─── FAQ ─── */
.faq{ max-width:760px; margin:0 auto; border:1px solid var(--n-800); border-radius:8px; overflow:hidden; background:var(--n-850) }
.faq details{ border-bottom:1px solid var(--n-800) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  padding:20px 24px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:15.5px; font-weight:500; color:var(--n-200); transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--blanco) }
.faq summary .mas{ flex:none; font-size:20px; color:var(--n-500); line-height:1; transition:transform .3s ease }
.faq details[open] summary .mas{ transform:rotate(45deg) }
.faq-r{ padding:0 24px 22px; font-size:14.5px; color:var(--n-400); line-height:1.7 }
@media (prefers-reduced-motion:reduce){ .faq summary .mas{ transition:none } }

/* ─── CTA ─── */
.cta-caja{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:64px 28px;
}

.cta-caja > *:not(.hero-flota){ position:relative; z-index:1 }
.cta-caja h2{ font-size:clamp(26px,3.8vw,40px); font-weight:600; max-width:20ch; margin:0 auto 16px }
.cta-caja p{ color:var(--n-400); max-width:48ch; margin:0 auto 30px }
.cta-botones{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ─── PIE ─── */
.pie{ border-top:1px solid var(--n-800); padding:56px 0 32px }
.pie-top{ display:grid; gap:36px; grid-template-columns:1fr; padding-bottom:40px; border-bottom:1px solid var(--n-800) }
@media (min-width:640px){ .pie-top{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .pie-top{ grid-template-columns:1.6fr 1fr 1fr 1fr } }
.pie-marca p{ font-size:14px; color:var(--n-500); line-height:1.65; margin-top:14px; max-width:34ch }
.pie-col h3{ font-size:13px; font-weight:600; color:var(--n-200); margin-bottom:16px }
.pie-col li{ margin-bottom:11px; font-size:14px; color:var(--n-500) }
.pie-col a:hover{ color:var(--n-200) }
.pie-bot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:13px; color:var(--n-500) }
.pie-bot .estado{ display:inline-flex; align-items:center; gap:8px }

/* ─── REVELADO ─── */
/* Un solo efecto repetido en toda la web se nota y cansa: hay cinco variantes,
   todas con el mismo motor (opacity+transform+filter, disparadas por .en-vista
   que pone revelado.js vía IntersectionObserver), para que cada tipo de bloque
   entre de la forma que le pega — una tarjeta no debería entrar igual que una
   fila de tabla o que una cifra. Sin valor = sube desde abajo (el por defecto). */
[data-reveal]{ opacity:1; transform:none; filter:none }
html.js [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--retardo,0ms),
             transform .6s cubic-bezier(.16,1,.3,1) var(--retardo,0ms),
             filter .6s cubic-bezier(.16,1,.3,1) var(--retardo,0ms);
}
html.js [data-reveal="izq"]{ transform:translateX(-30px) }
html.js [data-reveal="der"]{ transform:translateX(30px) }
html.js [data-reveal="zoom"]{ transform:scale(.9) translateY(6px) }
html.js [data-reveal="blur"]{ transform:translateY(8px); filter:blur(8px) }
html.js [data-reveal="linea"]{ transform:scaleX(0); transform-origin:0 50% }
html.js [data-reveal].en-vista{ opacity:1; transform:none; filter:blur(0) }
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ transition:none; opacity:1; transform:none; filter:none }
}

/* ─── CIFRAS QUE CUENTAN ─── */
/* El número final ya está en el HTML (SEO y sin-JS lo ven bien); revelado.js
   solo lo pone a cero y lo cuenta hacia arriba cuando entra en pantalla. */
[data-cifra]{ font-variant-numeric:tabular-nums }

/* ═══ RECURSOS PORTADOS DE ACETERNITY ═══ */

/* trama diagonal (pattern.tsx) · textura fina sobre fondos */
.trama{ position:absolute; inset:0; pointer-events:none; opacity:.5 }
.trama::before,.trama::after{
  content:''; position:absolute; inset:0;
  background-size:5px 5px;
}
.trama::before{ background-image:repeating-linear-gradient(315deg, var(--n-800) 0, var(--n-800) 1px, transparent 0, transparent 50%) }
.trama::after{ background-image:repeating-linear-gradient(-315deg, var(--n-800) 0, var(--n-800) 1px, transparent 0, transparent 50%) }

/* rejilla de puntos (square-dots.tsx) */
.puntos{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--n-800) 1px, transparent 1px);
  background-size:16px 16px;
  mask:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  -webkit-mask:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}

/* spotlight que sigue al cursor (card-spotlight) · un solo listener delegado */
.spot{ position:relative; overflow:hidden }
.spot::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(23,60,255,.16), transparent 42%);
  opacity:0; transition:opacity .35s ease;
}
.spot:hover::before{ opacity:1 }
.spot > *{ position:relative; z-index:1 }

/* cinta de logos (logo-cloud) */
.logos{ overflow:hidden; border-top:1px solid var(--n-800); border-bottom:1px solid var(--n-800); padding:26px 0; background:var(--n-850) }
.logos-t{ text-align:center; font-size:12.5px; color:var(--n-500); margin-bottom:20px }
.logos-pista{ display:flex; width:max-content; animation:desliza 38s linear infinite }
@media (prefers-reduced-motion:reduce){ .logos-pista{ animation:none } }
@keyframes desliza{ to{ transform:translateX(-50%) } }
.logo-chip{
  display:inline-flex; align-items:center; gap:10px; padding:0 28px;
  font-size:14.5px; font-weight:500; color:var(--n-500); white-space:nowrap;
}
/* apagados por defecto; recuperan su color de marca al pasar por encima */
.marca-logo{
  flex:none; color:var(--n-600);
  filter:saturate(0); opacity:.75;
  transition:color .35s ease, filter .35s ease, opacity .35s ease;
}
.logo-chip:hover .marca-logo{ color:var(--brand); filter:saturate(1); opacity:1 }
.logo-chip:hover .logo-txt{ color:var(--n-200) }
.logo-txt{ transition:color .35s ease }

/* ═══ RED · ficha técnica por centro de datos ═══ */
.dc{
  position:relative; border:1px solid var(--n-800); border-radius:8px;
  background:var(--n-850); padding:28px; overflow:hidden;
  transition:border-color .25s ease;
}
.dc:hover{ border-color:var(--n-700) }
.dc-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px }
.dc-ciudad{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; color:var(--blanco) }
.dc-ciudad .bandera{ font-size:20px; line-height:1 }
.dc-chip{
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  border-radius:4px; padding:4px 10px; white-space:nowrap;
  border:1px solid rgba(34,197,94,.32); color:#4ade80; background:rgba(34,197,94,.08);
}
.dc-chip.espera{ border-color:var(--n-700); color:var(--n-400); background:var(--n-900) }
.dc-sitio{ font-size:13.5px; color:var(--n-400); margin-bottom:22px }
.dc-specs{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--n-800) }
.dc-spec{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--n-800); font-size:13px;
}
.dc-spec:last-child{ border-bottom:0 }
.dc-spec dt{ color:var(--n-500) }
.dc-spec dd{ margin:0; color:var(--n-200); font-weight:500; text-align:right; font-variant-numeric:tabular-nums }

/* ═══ REMIX ACETERNITY · piezas de varias plantillas ═══ */

/* 1) RIPPLE DE REJILLA · design-development-studio/background-ripple-effect
   Rejilla de celdas: al pulsar una, la onda se propaga con retardo por distancia. */
.ripple{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  z-index:0; width:max-content; max-width:none;
  mask-image:radial-gradient(ellipse 210% 118% at 50% 100%, transparent 0%, #000 44%);
  -webkit-mask-image:radial-gradient(ellipse 210% 118% at 50% 100%, transparent 0%, #000 44%);
}
.ripple-rejilla{ display:grid; }
.celda{
  border:.5px solid var(--n-800); opacity:.4;
  transition:opacity .15s ease, background-color .15s ease;
}
.celda:hover{ opacity:.85; background:var(--n-800) }
.celda.onda{ animation:celda-onda var(--duracion,200ms) ease-out var(--retraso,0ms) 1 }
@keyframes celda-onda{ 0%{ opacity:.4 } 50%{ opacity:.9; background:var(--n-700) } 100%{ opacity:.4 } }
/* velo inferior: la rejilla se funde con el fondo */
.ripple-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 210% 118% at 50% 100%, var(--n-900) 0%, transparent 54%);
}
@media (prefers-reduced-motion:reduce){ .celda.onda{ animation:none } }



/* ═══ HERO v2 · foco de luz + azul medido ═══ */

/* foco cónico desde arriba a la izquierda (Aceternity Spotlight) */
.foco{
  position:absolute; z-index:0; pointer-events:none;
  top:-30%; left:-10%; width:80%; height:150%;
  background:radial-gradient(closest-side, rgba(23,60,255,.30), rgba(23,60,255,.10) 45%, transparent 72%);
  transform:rotate(-28deg);
  filter:blur(30px);
  animation:foco-entra 1.6s cubic-bezier(.22,.7,.2,1) both;
}
.foco.dos{
  left:auto; right:-14%; width:62%; transform:rotate(24deg);
  background:radial-gradient(closest-side, rgba(58,91,255,.20), transparent 68%);
  animation-delay:.25s;
}
@keyframes foco-entra{ from{ opacity:0; transform:translateY(-40px) rotate(-28deg) } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .foco{ animation:none } }

/* resplandor azul justo detrás del titular */
.hero-halo{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:34%; transform:translate(-50%,-50%);
  width:min(760px,92vw); height:300px;
  background:radial-gradient(closest-side, rgba(23,60,255,.22), transparent 70%);
  filter:blur(24px);
}

/* mini-logos flotando por el hero: la misma firma de marca que /login,
   repartida en piezas pequeñas con un vaivén suave en vez de una sola gigante */
.hero-flota{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.hero-mini{
  position:absolute; left:var(--x); top:var(--y); display:block;
  width:var(--s); aspect-ratio:24/22;
  background:var(--marca-claro); opacity:var(--o);
  -webkit-mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
  mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
  animation:hero-flotar 5.5s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes hero-flotar{
  0%, 100%{
    transform:rotate(var(--r)) translateY(0) scale(1);
    filter:drop-shadow(0 0 1px rgba(91,123,255,.15));
  }
  50%{
    transform:rotate(var(--r)) translateY(-16px) scale(1.12);
    filter:drop-shadow(0 0 12px rgba(120,150,255,.95)) brightness(1.6);
  }
}
@media (max-width:640px){ .hero-mini{ display:none } }
@media (prefers-reduced-motion:reduce){ .hero-mini{ animation:none; transform:rotate(var(--r)) } }

/* píldora de anuncio */
.anuncio{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:6px 8px 6px 12px; border-radius:4px;
  border:1px solid var(--n-800); background:var(--n-850);
  font-size:13px; color:var(--n-300);
  transition:border-color .25s ease, transform .2s ease;
}
.anuncio:hover{ border-color:rgba(91,123,255,.45); transform:translateY(-1px) }
.anuncio .pip{
  width:7px; height:7px; border-radius:50%; flex:none; background:var(--marca-cl,#5b7bff);
  box-shadow:0 0 10px rgba(91,123,255,.9); animation:latir 2s ease-in-out infinite;
}
.anuncio .flecha{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--n-800); color:var(--n-300); font-size:11px;
  transition:transform .25s ease, background-color .25s ease;
}
.anuncio:hover .flecha{ transform:translateX(2px); background:var(--marca) ; color:#fff }
@media (prefers-reduced-motion:reduce){ .anuncio .pip{ animation:none } }

/* segunda línea del titular en degradado azul */
/* El degradado va en CADA palabra, no en el contenedor: el filter:blur de la
   animacion crea un contexto propio y rompe el background-clip:text del padre. */
.hero h1 .azul .w{
  background:linear-gradient(180deg, #dbe2ff 0%, #7f97ff 52%, #2b4bff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* el botón principal descansa sobre un halo */
.hero-ctas{ position:relative }
.hero-ctas::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:280px; height:80px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(23,60,255,.35), transparent 70%);
  filter:blur(18px);
}

/* filo azul en el marco del panel */
.marco{ position:relative }
.marco::before{
  content:''; position:absolute; left:22%; right:22%; top:-1px; height:1px; border-radius:4px;
  background:linear-gradient(90deg, transparent, #5b7bff, transparent);
}

/* la rejilla del ripple se tiñe de azul hacia el centro */
.celda:hover{ background:rgba(23,60,255,.22); border-color:rgba(91,123,255,.5) }
@keyframes celda-onda{
  0%{ opacity:.4 }
  50%{ opacity:.95; background:rgba(23,60,255,.30); border-color:rgba(91,123,255,.55) }
  100%{ opacity:.4 }
}

/* ═══ PASADA DE AZUL POR TODA LA WEB + MEJORAS ═══ */

:root{ --azul-tenue:rgba(23,60,255,.10); --azul-borde:rgba(91,123,255,.42) }

/* Foco de teclado visible en TODO lo navegable. Faltaba por completo: quien
   navega con tabulador no veía dónde estaba. */
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible{
  outline:2px solid #5b7bff; outline-offset:3px; border-radius:6px;
}
:focus:not(:focus-visible){ outline:none }

/* Etiqueta de sección con punto azul y borde teñido */
.cab .etq{
  border-color:var(--azul-borde); background:var(--azul-tenue); color:var(--n-300);
  position:relative;
}

/* Separador azul entre secciones */
.seccion + .seccion{ position:relative }
.seccion + .seccion::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(720px,86%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(91,123,255,.34), transparent);
}

/* Tarjetas: filo azul superior y el icono se enciende al pasar */
.tarjeta{ position:relative; overflow:hidden }
.tarjeta::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, #5b7bff, transparent);
  opacity:0; transition:opacity .3s ease;
}
.tarjeta:hover::after{ opacity:1 }
.tarjeta:hover{ border-color:var(--azul-borde) }
.tarjeta:hover .ic{ border-color:var(--azul-borde); background:var(--azul-tenue) }
.tarjeta .ic svg{ transition:stroke .25s ease }
.tarjeta:hover .ic svg{ stroke:#7f97ff }
.tarjeta .pie-t b{ color:#a8b8ff }

/* Planes: los checks en azul y filo superior en el destacado */
.plan li svg{ stroke:#5b7bff }
.plan:hover{ border-color:var(--azul-borde) }
.plan:hover .ic{ border-color:var(--azul-borde); background:var(--azul-tenue) }
.plan:hover .ic svg{ stroke:#7f97ff }
.plan.destacado::before{
  content:''; position:absolute; left:12%; right:12%; top:-1px; height:2px; border-radius:4px;
  background:linear-gradient(90deg, transparent, #5b7bff, transparent);
}

/* Centros de datos: el chip de estado en servicio se queda verde (es semántico),
   pero la ficha gana filo azul al pasar */
.dc:hover{ border-color:var(--azul-borde) }
.dc-spec dd{ color:#cdd6ff }

/* Pasos de migración: número en azul */
.paso .n{ border-color:var(--azul-borde); background:var(--azul-tenue); color:#a8b8ff }
.paso:hover{ border-color:var(--azul-borde) }

/* FAQ: la pregunta abierta se marca en azul y con un filo lateral */
.faq details[open]{ background:var(--azul-tenue) }
.faq details[open] summary{ color:#a8b8ff }
.faq summary:hover{ color:#a8b8ff }
.faq details[open] summary .mas{ color:#5b7bff }
.faq details{ position:relative }
.faq details[open]::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, #5b7bff, transparent);
}

/* Opiniones: comilla azul de fondo y filo al pasar */
.opinion::before{
  content:'\201C'; position:absolute; right:18px; top:2px;
  font-size:86px; line-height:1; color:rgba(91,123,255,.14); pointer-events:none;
}
.opinion:hover{ border-color:var(--azul-borde) }

/* Cinta de logos: bordes teñidos */
.logos{ border-top-color:rgba(91,123,255,.18); border-bottom-color:rgba(91,123,255,.18) }


.nav-links a.act{ background:var(--azul-tenue); color:#cdd6ff }

/* Pie: enlaces en azul al pasar y filo superior teñido */
.pie{ border-top-color:rgba(91,123,255,.2) }
.pie-col a{ transition:color .2s ease }
.pie-col a:hover{ color:#a8b8ff }

/* Botón fantasma: se tiñe de azul */
.btn.fantasma:hover{ border-color:var(--azul-borde); background:var(--azul-tenue); color:#cdd6ff }

/* Barra de desplazamiento a juego */
*{ scrollbar-color:#2f3a6b var(--n-900) }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--n-900) }
::-webkit-scrollbar-thumb{ background:#2f3a6b; border-radius:4px; border:2px solid var(--n-900) }
::-webkit-scrollbar-thumb:hover{ background:#3f4d8a }


/* ═══ BENTO · rejilla asimétrica con imágenes generadas ═══ */
.bento{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .bento{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){
  .bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:220px }
  .bento .b1{ grid-column:span 2; grid-row:span 2 }
  .bento .b2{ grid-column:span 2 }
  .bento .b3{ grid-column:span 1 }
  .bento .b4{ grid-column:span 1 }
}
.celda-bento{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  min-height:220px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; transition:border-color .3s ease, transform .3s ease;
}
.celda-bento:hover{ border-color:var(--azul-borde); transform:translateY(-3px) }
/* velo para que el texto siempre gane a la imagen */
.celda-bento::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,13,16,.35) 0%, rgba(13,13,16,.72) 55%, rgba(13,13,16,.94) 100%);
}
.celda-bento .etiqueta{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#a8b8ff; border:1px solid var(--azul-borde); background:rgba(13,13,16,.6);
  border-radius:4px; padding:5px 11px; margin-bottom:14px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.celda-bento h3{ font-size:19px; font-weight:600; margin-bottom:8px }
.bento .b1 h3{ font-size:24px }
.celda-bento p{ font-size:14px; color:var(--n-300); line-height:1.6; max-width:44ch }
@media (prefers-reduced-motion:reduce){
  .celda-bento img{ transition:none; animation:none !important }
}



/* ═══ «Más elegido» ARREGLADO ═══
   Iba a top:-11px, fuera del borde, y el overflow:hidden del spotlight (.spot)
   lo cortaba por la mitad. Ahora vive DENTRO de la tarjeta. */
.plan.destacado{ padding-top:54px }
.plan .ribete{
  top:18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 18px -8px rgba(23,60,255,.9);
}
.plan .ribete::before{ content:''; width:5px; height:5px; border-radius:50%; background:#fff; opacity:.9 }


/* ═══ PANEL DE ESTADO v2 · estilo página de estado ═══
   Antes era una barra de progreso al 62/48/35 % junto a un «99,98 %»: no
   representaba nada y encima confundía. Ahora son 30 barras = 30 días. */
.panel-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:#4ade80; border:1px solid rgba(34,197,94,.32); background:rgba(34,197,94,.08);
  border-radius:4px; padding:4px 11px;
}
.panel-filas{ display:flex; flex-direction:column; gap:22px }
.nodo-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:9px }
.nodo-n{ font-size:13.5px; font-weight:600; color:var(--n-200); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.nodo-s{ font-size:12px; font-weight:400; color:var(--n-500) }
.nodo-lat{ font-size:11.5px; color:var(--n-500); font-variant-numeric:tabular-nums; white-space:nowrap }

/* las 30 barras del historial */
.barras{ display:flex; gap:3px; align-items:flex-end; height:30px }
.barras i{
  flex:1 1 0; min-width:2px; height:100%; border-radius:2px;
  background:linear-gradient(180deg, #3ddc84, #1f9d55);
  opacity:.85; transition:opacity .2s ease, transform .2s ease;
}
.barras i:hover{ opacity:1; transform:scaleY(1.12) }
.barras i.aviso{ background:linear-gradient(180deg, #f5b942, #c98a12) }
@media (max-width:520px){ .barras i:nth-child(n+21){ display:none } }

.nodo-pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px; font-size:11px; color:var(--n-500);
}
.nodo-pie b{ color:var(--n-300); font-weight:600; font-variant-numeric:tabular-nums }


/* ═══ CTA · fondo elegante con movimiento (azul Hosteate) ═══
   Tres velos que giran y respiran muy despacio + un barrido de luz que cruza.
   Todo con transform/opacity, que van por GPU y no repintan el texto. */
@property --giro{ syntax:'<angle>'; inherits:false; initial-value:0deg }

.cta-caja{ isolation:isolate }

/* velos de color que orbitan */
.cta-caja .velo{
  position:absolute; inset:-40%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(23,60,255,.42), transparent 70%) 18% 30% / 55% 60% no-repeat,
    radial-gradient(closest-side, rgba(91,123,255,.30), transparent 70%) 80% 25% / 48% 55% no-repeat,
    radial-gradient(closest-side, rgba(23,60,255,.24), transparent 72%) 50% 90% / 62% 55% no-repeat;
  filter:blur(38px);
  animation:orbita 26s linear infinite;
}
.cta-caja .velo.b{
  animation:orbita 34s linear infinite reverse;
  opacity:.7; filter:blur(52px);
}
@keyframes orbita{ to{ transform:rotate(1turn) } }

/* barrido de luz que cruza cada tanto */
.cta-caja::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(160,185,255,.10) 48%, transparent 58%);
  transform:translateX(-120%);
  animation:barrido 9s ease-in-out infinite;
}
@keyframes barrido{ 0%,62%{ transform:translateX(-120%) } 100%{ transform:translateX(120%) } }

/* filo giratorio en el borde de la caja */
.cta-caja{
  border:1px solid transparent;
  background:
    linear-gradient(var(--n-850), var(--n-850)) padding-box,
    conic-gradient(from var(--giro), rgba(38,38,38,1) 0deg, #5b7bff 70deg, rgba(38,38,38,1) 150deg, rgba(38,38,38,1) 360deg) border-box;
  animation:girar 8s linear infinite;
}
@keyframes girar{ to{ --giro:360deg } }

/* oscurece bajo el texto para que siempre gane */
.cta-caja h2, .cta-caja p, .cta-botones{ position:relative; z-index:1 }

@media (prefers-reduced-motion:reduce){
  .cta-caja, .cta-caja .velo, .cta-caja .velo.b, .cta-caja::after{ animation:none }
  .cta-caja{ border-color:var(--azul-borde) }
}




/* ═══ CATÁLOGO DE TECNOLOGÍAS (estilo «un clic», con nuestros logos) ═══ */
.cat-filtros{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; justify-content:center }
.cat-f{
  border:1px solid var(--n-800); background:var(--n-850); color:var(--n-400);
  border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.cat-f:hover{ color:var(--n-200); border-color:var(--n-700) }
.cat-f[aria-pressed="true"]{ background:var(--azul-tenue); border-color:var(--azul-borde); color:#cdd6ff }
.cat-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
.cat-item{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:16px 16px; transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.cat-item:hover{ border-color:var(--azul-borde); background:var(--n-800); transform:translateY(-2px) }
.cat-item .marca-logo{ width:22px; height:22px; opacity:1; filter:none; color:var(--brand) }
.cat-item .n{ font-size:14px; color:var(--n-200); font-weight:500; flex:1; min-width:0 }
.cat-item .ir{ font-size:13px; color:var(--n-600); transition:color .2s ease, transform .2s ease }
.cat-item:hover .ir{ color:#8fa6ff; transform:translate(2px,-2px) }
.cat-item[hidden]{ display:none }


/* ═══ PANEL DEL HERO v3 · maqueta de panel de servidor ═══ */
.srv{ display:flex; flex-direction:column; gap:14px; text-align:left }
.srv-fila{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-900); padding:14px 16px;
}
.srv-ico{
  width:34px; height:34px; border-radius:9px; flex:none;
  border:1px solid var(--n-800); background:var(--n-850);
  display:flex; align-items:center; justify-content:center;
}
.srv-ico .marca-icono{ width:17px; height:16px; background:#8fa6ff }
.srv-id{ min-width:0; flex:1 }
.srv-id b{ display:block; font-size:13.5px; color:var(--n-200); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.srv-meta{ display:flex; align-items:center; gap:9px; margin-top:3px; font-size:11.5px; color:var(--n-500) }
.srv-run{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  color:#4ade80; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.3);
  border-radius:4px; padding:3px 9px;
}
/* fila de logos instalados */
.srv-apps{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-900); padding:14px 16px;
}
.srv-apps .marca-logo{ width:20px; height:20px; opacity:.9; filter:none; color:var(--brand) }
.srv-apps .mas{ font-size:12px; color:var(--n-500); margin-left:auto }  /* n-600 daba 2,29:1 */
/* dos tarjetas de uso con minigráfica */
.srv-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.srv-stat{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-900); padding:14px 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.srv-stat .t{ font-size:11.5px; color:var(--n-500); display:block; margin-bottom:6px }
.srv-stat .v{ font-size:22px; font-weight:600; color:var(--n-200); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.chispa{ width:78px; height:30px; flex:none; overflow:visible }
.chispa path{ fill:none; stroke:#5b7bff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.chispa .relleno{ fill:rgba(91,123,255,.14); stroke:none }
@media (max-width:520px){ .srv-stats{ grid-template-columns:1fr } .chispa{ width:64px } }

/* sello flotante tipo «AMD EPYC» */
.marco{ overflow:visible }
.sello{
  position:absolute; top:-16px; right:22px; z-index:3;
  border:1px solid var(--n-700); border-radius:6px; background:var(--n-900);
  padding:9px 14px; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--n-200);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.95);
}
.sello span{ display:block; font-size:9.5px; font-weight:600; color:var(--n-500); letter-spacing:.12em; margin-top:1px }
@media (max-width:600px){ .sello{ right:12px; padding:7px 11px } }


/* ═══ BANNER DE CATÁLOGO (estilo Hostinger, marca propia) ═══ */
.ban{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  display:grid; grid-template-columns:1fr; align-items:center;
}
@media (min-width:940px){ .ban{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.ban > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.7;
  /* el generado traia vetas rosas: se desatura y el azul lo pone el velo */
  filter:saturate(0) contrast(1.08) brightness(.9);
}
.ban::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(75% 120% at 8% 50%, rgba(23,60,255,.34), transparent 62%),
    linear-gradient(90deg, rgba(10,10,14,.94) 0%, rgba(10,10,14,.7) 46%, rgba(10,10,14,.55) 100%);
}
.ban-txt{ padding:46px 40px }
@media (max-width:600px){ .ban-txt{ padding:32px 24px } }
.ban-txt h2{ font-size:clamp(23px,2.7vw,32px); font-weight:600; margin-bottom:14px; max-width:17ch }
.ban-txt p{ font-size:15px; color:var(--n-300); line-height:1.65; margin-bottom:26px; max-width:44ch }

/* mosaico de teselas que se sale por el borde, como el de la referencia */
.ban-vis{
  display:flex; flex-direction:column; gap:10px;
  padding:34px 0 34px 10px; overflow:hidden;
  mask:linear-gradient(90deg, #000 62%, transparent 100%);
  -webkit-mask:linear-gradient(90deg, #000 62%, transparent 100%);
}
@media (max-width:939px){
  .ban-vis{ padding:0 0 30px 24px;
    mask:linear-gradient(90deg, #000 74%, transparent 100%);
    -webkit-mask:linear-gradient(90deg, #000 74%, transparent 100%); }
}
/* cada fila es una pista que rueda; las impares, en sentido contrario */
.ban-fila{ overflow:hidden }
.ban-pista{
  display:flex; gap:10px; width:max-content;
  animation:pista 34s linear infinite;
}
.f1 .ban-pista{ animation-duration:44s; animation-direction:reverse }
.f2 .ban-pista{ animation-duration:38s }
@keyframes pista{ to{ transform:translateX(-50%) } }
/* al pasar el cursor se para, para poder mirarlas */
.ban-vis:hover .ban-pista{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .ban-pista{ animation:none } }

.tesela{
  width:72px; height:72px; flex:none;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--n-800); background:rgba(20,20,26,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
@media (max-width:600px){ .tesela{ width:58px; height:58px } }
.tesela .marca-logo{ width:26px; height:26px; opacity:.5; filter:saturate(0) brightness(1.6) }
.tesela.viva{ border-color:var(--azul-borde); background:rgba(23,60,255,.16) }
.tesela.viva .marca-logo{ opacity:1; filter:none; color:var(--brand) }
.tesela:hover{ transform:translateY(-2px); border-color:var(--azul-borde); background:rgba(23,60,255,.14) }
.tesela:hover .marca-logo{ opacity:1; filter:none; color:var(--brand) }


/* ═══ BANDA DEL MAPA · SVG real + movimiento en CSS ═══
   Se probó animarlo con un vídeo de fal.ai y fue un error: los modelos de
   imagen-a-vídeo DERRITEN los patrones finos — el mapa de puntos salió como
   manchas y hasta se inventó letras. Con CSS el movimiento es constante y la
   geografía no se toca. */
.banda-mapa{ padding:96px 0; position:relative; overflow:hidden }
@media (max-width:860px){ .banda-mapa{ padding:64px 0 } }
.mapa-wrap{
  position:relative; overflow:hidden; border-radius:8px;
  border:1px solid var(--n-800); background:var(--n-950);
  display:grid; grid-template-columns:1fr; align-items:center;
}
@media (min-width:940px){ .mapa-wrap{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) } }
.mapa-wrap::before{
  content:''; position:absolute; left:-8%; top:-30%; width:60%; height:110%; z-index:0;
  background:radial-gradient(closest-side, rgba(23,60,255,.38), transparent 70%);
  filter:blur(20px); pointer-events:none;
  animation:resp 9s ease-in-out infinite;
}
@keyframes resp{ 0%,100%{ opacity:.75; transform:scale(1) } 50%{ opacity:1; transform:scale(1.06) } }

.mapa-txt{ position:relative; z-index:1; padding:52px 44px }
@media (max-width:600px){ .mapa-txt{ padding:34px 22px } }
.mapa-kicker{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8fa6ff;
}
.mapa-kicker .pip{ width:7px; height:7px; border-radius:50%; background:#5b7bff; box-shadow:0 0 10px rgba(91,123,255,.9) }
.mapa-txt h2{ font-size:clamp(28px,3.6vw,46px); font-weight:600; line-height:1.08; margin-bottom:20px }
.mapa-txt h2 .azul{
  background:linear-gradient(180deg,#8fa6ff,#2b4bff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.mapa-raya{ display:block; width:56px; height:2px; border-radius:2px; background:linear-gradient(90deg,#5b7bff,transparent); margin-bottom:22px }
.mapa-txt p{ font-size:15px; color:var(--n-400); line-height:1.7; margin-bottom:30px; max-width:38ch }
.mapa-tarjeta{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid var(--n-800); border-radius:8px; background:rgba(20,20,26,.7); padding:14px 18px;
}
.mapa-tarjeta .ic{
  width:40px; height:40px; border-radius:6px; flex:none;
  border:1px solid var(--azul-borde); background:var(--azul-tenue);
  display:flex; align-items:center; justify-content:center;
}
.mapa-tarjeta .ic svg{ width:19px; height:19px; stroke:#8fa6ff; flex:none }
.mapa-tarjeta b{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8fa6ff; margin-bottom:3px }
.mapa-tarjeta span span{ font-size:13px; color:var(--n-400) }

/* el mapa, con deriva lenta y continua */
.mapa-vis{ position:relative; z-index:1; aspect-ratio:1000/660; width:100%; overflow:hidden }
.mapa-vis > img{
  width:100%; height:100%; object-fit:contain; display:block;
  animation:mapa-deriva 30s ease-in-out infinite alternate;
}
@keyframes mapa-deriva{
  from{ transform:scale(1.02) translate3d(-.8%, .5%, 0) }
  to  { transform:scale(1.07) translate3d(.9%, -.6%, 0) }
}

/* el arco se dibuja y se borra en bucle: movimiento constante */
.mapa-arco{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1 }
.mapa-arco path{
  fill:none; stroke:#7aa2ff; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:420; filter:drop-shadow(0 0 6px rgba(122,162,255,.55));
  animation:trazo-bucle 6s ease-in-out infinite;
}
@keyframes trazo-bucle{
  0%{ stroke-dashoffset:420 } 45%{ stroke-dashoffset:0 }
  75%{ stroke-dashoffset:0; opacity:1 } 100%{ stroke-dashoffset:-420; opacity:.15 }
}

/* chinchetas */
.chincheta{ position:absolute; transform:translate(-50%,-50%); z-index:2 }
.ch-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:#8fbaff;
  box-shadow:0 0 0 6px rgba(91,140,255,.18), 0 0 34px 10px rgba(91,140,255,.75);
  animation:pin-late 2.6s ease-in-out infinite;
}
.ch-linea{
  position:absolute; left:50%; bottom:50%; width:1px; height:46px;
  background:linear-gradient(180deg, rgba(143,166,255,.9), rgba(143,166,255,.15));
}
.ch-eti{
  position:absolute; left:50%; bottom:calc(50% + 46px); transform:translateX(-50%);
  white-space:nowrap; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--n-200); background:rgba(8,8,12,.92); border:1px solid rgba(143,166,255,.35);
  border-radius:8px; padding:7px 12px; box-shadow:0 10px 26px -12px rgba(0,0,0,.95);
}
.ch-izq .ch-linea{ transform:rotate(28deg); transform-origin:bottom center }
.ch-izq .ch-eti{ left:-52px; bottom:calc(50% + 40px) }
@media (max-width:700px){
  .ch-eti{ font-size:9.5px; padding:4px 8px; letter-spacing:.06em }
  .ch-linea{ height:26px }
  .ch-izq .ch-eti{ left:-30px; bottom:calc(50% + 22px) }
  .ch-halo{ width:9px; height:9px; box-shadow:0 0 0 4px rgba(91,140,255,.18), 0 0 22px 6px rgba(91,140,255,.7) }
}
@media (prefers-reduced-motion:reduce){
  .mapa-vis > img, .mapa-arco path, .ch-halo, .mapa-wrap::before{ animation:none }
  .mapa-arco path{ stroke-dashoffset:0 }
}

/* ═══ ANTI-DDoS · consola de mitigación ═══
   Se abandonó replicar la infografía tipo Hostinger: copiar una ilustración
   densa en HTML siempre parece una imitación. Esto es nativo del medio —
   gráfica, cifras y registro en vivo — y cuenta mejor la misma historia:
   el ataque sube y lo que llega a tu servidor se queda plano. */
.ddos{ position:relative; overflow:hidden }
.cons{
  border:1px solid var(--n-800); border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg, #0a0d18 0%, #06080f 100%);
  margin-bottom:16px;
}
.cons-cab{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 22px; border-bottom:1px solid var(--n-800); background:rgba(255,255,255,.015);
}
.cons-t{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--n-200) }
.cons-m{ font-family:var(--mono,ui-monospace,monospace); font-size:11.5px; color:var(--n-500) }

.cons-cuerpo{ display:grid; grid-template-columns:1fr; }
@media (min-width:1000px){ .cons-cuerpo{ grid-template-columns:minmax(0,1fr) 260px } }

/* ── gráfica ── */
.graf{ padding:22px 22px 16px; min-width:0 }
.graf-ley{ display:flex; gap:22px; margin-bottom:16px }
.ly{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--n-400) }
.ly::before{ content:''; width:16px; height:3px; border-radius:2px }
.ly.rojo::before{ background:#ff3d52; box-shadow:0 0 10px rgba(255,61,82,.9) }
.ly.azul::before{ background:#5b8cff; box-shadow:0 0 10px rgba(91,140,255,.9) }
.graf-svg{ width:100%; height:250px; display:block; overflow:visible }
@media (max-width:600px){ .graf-svg{ height:190px } }
.gr line{ stroke:var(--n-800); stroke-width:1; stroke-dasharray:3 6 }
.p-area{ fill:url(#gEnt); opacity:0; animation:area-in 1.1s ease-out .5s forwards }
@keyframes area-in{ to{ opacity:1 } }
.p-ent,.p-srv{ fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2400; stroke-dashoffset:2400 }
.p-ent{ stroke:#ff3d52; filter:drop-shadow(0 0 7px rgba(255,61,82,.65)); animation:trazar 2.1s cubic-bezier(.4,0,.2,1) .25s forwards }
.p-srv{ stroke:#5b8cff; filter:drop-shadow(0 0 7px rgba(91,140,255,.7)); animation:trazar 2.1s cubic-bezier(.4,0,.2,1) .55s forwards }
@keyframes trazar{ to{ stroke-dashoffset:0 } }
.graf-pie{ display:flex; justify-content:space-between; font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; color:var(--n-500); margin-top:10px }

/* ── cifras ── */
.cifras-c{ border-top:1px solid var(--n-800); display:grid; grid-template-columns:1fr 1fr }
@media (min-width:1000px){ .cifras-c{ border-top:0; border-left:1px solid var(--n-800); grid-template-columns:1fr } }
.cifras-c > div{ padding:18px 22px; border-bottom:1px solid var(--n-800) }
.cifras-c > div:nth-child(odd){ border-right:1px solid var(--n-800) }
@media (min-width:1000px){ .cifras-c > div:nth-child(odd){ border-right:0 } .cifras-c > div:last-child{ border-bottom:0 } }
.cifras-c b{ display:block; font-family:var(--mono,ui-monospace,monospace); font-size:24px; font-weight:600;
  color:var(--blanco); letter-spacing:-.03em; margin-bottom:5px }
.cifras-c b i{ font-style:normal; font-size:13px; color:var(--n-400) }
.cifras-c span{ font-size:12px; color:var(--n-500); line-height:1.4 }

/* ── registro ── */
.cons-log{ border-top:1px solid var(--n-800); padding:8px 0; max-height:216px; overflow:hidden }
.lg{
  display:grid; grid-template-columns:104px 132px 1fr auto; gap:14px; align-items:center;
  padding:9px 22px; font-family:var(--mono,ui-monospace,monospace); font-size:11.5px;
  opacity:0; animation:lg-in .5s ease-out forwards var(--r,0ms);
}
@media (max-width:760px){ .lg{ grid-template-columns:96px 1fr auto } .lg .lgd{ display:none } }
@keyframes lg-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.lgt{ font-size:9.5px; font-weight:700; letter-spacing:.08em; border-radius:4px; padding:3px 8px; text-align:center }
.lg.bloq .lgt{ color:#ff6b78; border:1px solid rgba(255,77,94,.35); background:rgba(255,77,94,.09) }
.lg.ok .lgt{ color:#4ade80; border:1px solid rgba(34,197,94,.32); background:rgba(34,197,94,.08) }
.lgi{ color:var(--n-300) }
.lgd{ color:var(--n-500) }
.lgv{ color:var(--n-200); font-variant-numeric:tabular-nums }
.lg.bloq .lgv{ color:#ffb3bb }
@media (prefers-reduced-motion:reduce){
  .p-ent,.p-srv{ stroke-dashoffset:0; animation:none }
  .p-area{ opacity:1; animation:none }
  .lg{ opacity:1; animation:none }
}

/* barra de características */
.rasgos-barra{ display:grid; grid-template-columns:1fr; border:1px solid var(--n-800); border-radius:8px; background:rgba(10,14,30,.5); overflow:hidden }
@media (min-width:700px){ .rasgos-barra{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .rasgos-barra{ grid-template-columns:repeat(4,1fr) } }
.rg{ display:flex; align-items:flex-start; gap:13px; padding:20px 22px; border-right:1px solid var(--n-800) }
.rg:last-child{ border-right:0 }
@media (max-width:1099px){ .rg{ border-right:0; border-bottom:1px solid var(--n-800) } .rg:last-child{ border-bottom:0 } }
.rico{ width:36px; height:36px; border-radius:6px; flex:none; border:1px solid var(--azul-borde); background:rgba(23,60,255,.12); display:flex; align-items:center; justify-content:center }
.rico svg{ width:18px; height:18px; stroke:#8fbaff }
.rg b{ display:block; font-size:13px; font-weight:600; color:var(--n-200); margin-bottom:4px }
.rg span span{ font-size:12.5px; color:var(--n-500); line-height:1.5 }

/* ═══ BENTO · un símbolo por titular ═══
   Los cuatro comparten color, opacidad y tratamiento para que se lean como
   familia, pero cada uno DICE lo que dice su título. */
.celda-bento{ background:linear-gradient(160deg, #12162a 0%, #0b0d18 55%, #090b13 100%) }
.celda-bento::before{ background:linear-gradient(180deg, rgba(9,11,19,.12) 0%, rgba(9,11,19,.7) 56%, rgba(9,11,19,.95) 100%) }
.pat{
  position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; opacity:.9;
  /* el patron se apaga antes de llegar al bloque de texto */
  mask:linear-gradient(180deg, #000 0%, #000 46%, transparent 82%);
  -webkit-mask:linear-gradient(180deg, #000 0%, #000 46%, transparent 82%);
}
/* en las celdas pequeñas el texto ocupa casi todo: el patron vive arriba */
.pat-alto{
  height:92px; inset:0 0 auto 0; opacity:.62;
  mask:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* la celda grande tiene sitio de sobra: su patron llega mas abajo */
.bento .b1 .pat{
  mask:linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
  -webkit-mask:linear-gradient(180deg, #000 0%, #000 62%, transparent 92%);
}

/* 1 · hierro propio → racks con luces */
.racks .rk{ fill:none; stroke:#2f4fd0; stroke-width:1.1; opacity:.4; animation:rk-late 5s ease-in-out infinite var(--r,0ms) }
@keyframes rk-late{ 0%,100%{ opacity:.24 } 50%{ opacity:.6 } }
.racks .lz{ fill:#7aa2ff; animation:lz-par 2.6s steps(1) infinite var(--r,0ms) }
@keyframes lz-par{ 0%,60%{ opacity:.95 } 61%,100%{ opacity:.16 } }

/* 2 · sin sorpresas → tu precio plano, el de otros disparándose */
.precio .gj{ stroke:#1f2a4d; stroke-width:1; stroke-dasharray:3 7 }
.precio .sube{
  fill:none; stroke:#ff5a68; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:4 8;
  opacity:.55; animation:sube-fluye 3.4s linear infinite;
}
@keyframes sube-fluye{ from{ stroke-dashoffset:120 } to{ stroke-dashoffset:0 } }
.precio .plano{
  fill:none; stroke:#5b8cff; stroke-width:2.8; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(91,140,255,.8));
  stroke-dasharray:520; stroke-dashoffset:520; animation:trazar-plano 2.4s ease-out infinite;
}
@keyframes trazar-plano{ 0%{ stroke-dashoffset:520 } 45%,100%{ stroke-dashoffset:0 } }
.precio .ht{ fill:#8fbaff; opacity:0; animation:ht-in .5s ease-out infinite var(--r,0ms); animation-duration:2.4s }
@keyframes ht-in{ 0%,10%{ opacity:0 } 30%,100%{ opacity:.9 } }

/* 3 · soporte → conversación y cursor escribiendo */
.chat .bu{ fill:rgba(30,60,180,.16); stroke:#3f63e0; stroke-width:1.1; opacity:0;
  animation:bu-in .55s cubic-bezier(.2,.7,.3,1) forwards var(--r,0ms) }
@keyframes bu-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:.85; transform:none } }
.chat .b-b{ fill:rgba(91,140,255,.22); stroke:#6f95ff }
.chat .cur{ fill:#8fbaff; animation:cur-par 1.1s steps(2) infinite }
@keyframes cur-par{ 50%{ opacity:0 } }
.chat .ln{ stroke:#3f63e0; stroke-width:2; stroke-linecap:round; opacity:.5 }

/* 4 · mudanza → cajas viajando de un servidor a otro */
.mudanza .srv-o,.mudanza .srv-d{ fill:rgba(30,60,180,.12); stroke:#3f63e0; stroke-width:1.3 }
.mudanza .srv-d{ stroke:#6f95ff; animation:dst-late 3.6s ease-in-out infinite }
@keyframes dst-late{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.mudanza .via{ stroke:#2f4fd0; stroke-width:1.2; stroke-dasharray:4 8; opacity:.6 }
.mudanza .fle{ fill:none; stroke:#8fbaff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85 }
.mudanza .cj{
  fill:rgba(91,140,255,.28); stroke:#8fbaff; stroke-width:1.2;
  animation:cj-viaja 3.6s cubic-bezier(.45,0,.55,1) infinite var(--r,0ms);
}
@keyframes cj-viaja{
  0%{ transform:translateX(110px); opacity:0 }
  14%{ opacity:1 } 80%{ opacity:1 }
  100%{ transform:translateX(360px); opacity:0 }
}

@media (prefers-reduced-motion:reduce){
  .racks .rk,.racks .lz,.precio .sube,.precio .plano,.precio .ht,
  .chat .bu,.chat .cur,.mudanza .cj,.mudanza .srv-d{ animation:none }
  .precio .plano{ stroke-dashoffset:0 } .chat .bu{ opacity:.85 }
  .mudanza .cj{ transform:translateX(220px); opacity:1 }
}

/* ═══ ENTRADA · el logo se rellena y la cortina se retira ═══
   El logo va como MÁSCARA por duplicado: una capa tenue con la silueta y otra
   encima en azul que se descubre de abajo arriba con clip-path. Así se ve
   "llenarse" sin necesidad de trazar el contorno (el path tiene subtrazos y
   un stroke-dasharray quedaría sucio). */
.intro{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--n-900); overflow:hidden;
  animation:intro-sale .7s cubic-bezier(.7,0,.3,1) 1.95s forwards;
}
/* en móvil, solo en el index, sin pantalla de carga (a petición expresa, 6-ago) */
@media (max-width:899px){ body.pagina-inicio #intro{ display:none } }
.intro-halo{
  position:absolute; top:50%; left:50%; width:360px; height:360px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(23,60,255,.30), transparent 72%);
  filter:blur(6px);
  animation:intro-halo-pulso 2.4s ease-in-out infinite;
}
@keyframes intro-halo-pulso{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.92) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06) } }
.intro-marca{ position:relative; width:104px; height:96px }
.li{
  position:absolute; inset:0;
  -webkit-mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
  mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
}
.li-base{ background:var(--n-800) }
.li-fill{
  background:linear-gradient(180deg, #8fa6ff 0%, var(--marca-claro) 45%, var(--marca) 100%);
  clip-path:inset(100% 0 0 0);
  animation:intro-llena 1.25s cubic-bezier(.55,.1,.25,1) .18s forwards;
}
@keyframes intro-llena{ to{ clip-path:inset(0 0 0 0) } }

.intro-nombre{
  font-size:13px; font-weight:700; letter-spacing:.24em; color:var(--n-200);
  opacity:0; animation:intro-texto .6s ease .95s forwards;
}
.intro-barra{ width:132px; height:2px; border-radius:2px; background:var(--n-800); overflow:hidden; margin-top:2px }
.intro-barra i{
  display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--marca), var(--marca-claro));
  animation:intro-barra 1.5s cubic-bezier(.5,.05,.2,1) .1s forwards;
}
@keyframes intro-barra{ to{ transform:scaleX(1) } }
.intro-estado{
  font-size:11px; color:var(--n-600); letter-spacing:.02em;
  opacity:0; animation:intro-texto .6s ease 1.15s forwards;
}
@keyframes intro-texto{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }

/* la cortina se va hacia arriba y deja de estorbar */
@keyframes intro-sale{
  to{ transform:translateY(-101%); visibility:hidden; pointer-events:none }
}
@media (prefers-reduced-motion:reduce){ .intro{ display:none } .intro-halo{ animation:none } }
@media (prefers-reduced-motion:reduce){ .intro{ display:none } }

/* ═══ PORTAL DE CLIENTES · foto generada + maqueta de acceso ═══ */
.ptl{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-950);
  padding:64px 44px;
}
@media (max-width:700px){ .ptl{ padding:40px 22px } }
.ptl > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.5;
  /* el generado sale en gris a propósito: el azul lo pone el velo de abajo */
  filter:saturate(0) contrast(1.1) brightness(.85);
}
.ptl::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 85% at 88% 28%, rgba(23,60,255,.30), transparent 65%),
    linear-gradient(100deg, rgba(10,10,14,.97) 0%, rgba(10,10,14,.88) 40%, rgba(10,10,14,.58) 100%);
}
.ptl-grid{ position:relative; z-index:1; display:grid; gap:48px; grid-template-columns:1fr; align-items:center }
@media (min-width:940px){ .ptl-grid{ grid-template-columns:1fr 1fr } }

.ptl-txt h2{ font-size:clamp(26px,3.4vw,36px); font-weight:600; margin:14px 0 14px; max-width:15ch }
.ptl-txt > p{ color:var(--n-300); font-size:15.5px; line-height:1.65; max-width:42ch; margin-bottom:28px }
.ptl-rasgos{ display:flex; flex-direction:column; gap:15px; margin-bottom:32px }
.ptl-rasgos li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--n-200) }
.ptl-rasgos svg{ width:18px; height:18px; flex:none; margin-top:1px; stroke:var(--marca-claro) }

/* la maqueta es una vista previa clicable, no un formulario real:
   entra de verdad al pulsar en cualquier punto de la tarjeta */
.ptl-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--n-700); border-radius:8px;
  background:rgba(23,23,23,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:24px; max-width:380px; margin:0 auto; width:100%;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transition:border-color .25s ease, transform .25s ease;
}
.ptl-card:hover{ border-color:var(--n-600); transform:translateY(-3px) }
.ptl-card:focus-visible{ outline:2px solid var(--marca-claro); outline-offset:3px }
.ptl-cab{ display:flex; align-items:center; gap:9px; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid var(--n-800); font-size:12.5px; color:var(--n-500) }
.ptl-cab .marca-icono{ width:16px; height:15px }
.ptl-cuerpo h3{ font-size:16px; font-weight:600; margin-bottom:20px; color:var(--blanco) }
.ptl-campo{ display:block; margin-bottom:14px }
.ptl-lbl{ display:block; font-size:12px; color:var(--n-500); margin-bottom:6px }
.ptl-input{
  display:block; border:1px solid var(--n-800); border-radius:4px; background:var(--n-900);
  padding:10px 12px; font-size:13.5px; color:var(--n-400);
}
.ptl-fila{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:12.5px }
.ptl-check{ display:inline-flex; align-items:center; gap:7px; color:var(--n-400) }
.ptl-check span{ width:14px; height:14px; border:1px solid var(--n-700); border-radius:3px; background:var(--n-900) }
.ptl-olvido{ color:var(--n-500) }
.ptl-cuerpo .btn{ margin-bottom:18px; pointer-events:none }
.ptl-seguro{ display:flex; align-items:center; gap:6px; justify-content:center; font-size:11.5px; color:var(--n-500); margin-top:16px }
.ptl-seguro svg{ width:12px; height:12px; stroke:var(--n-500) }

/* ═══ CIFRADO · el logo "envía" datos al sello de conexión cifrada ═══ */
.cifrado{ display:flex; align-items:center; justify-content:center; gap:0; margin-top:18px }
.cifrado-logo{ position:relative; isolation:isolate; width:20px; height:19px; flex:none }
.cifrado-logo .marca-icono{ display:block; width:20px; height:19px; background:var(--blanco); position:relative; z-index:1 }
.cifrado-logo::before{
  content:''; position:absolute; inset:-7px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(91,123,255,.55), transparent 72%);
  animation:cifrado-pulso 2.1s ease-in-out infinite;
}
@keyframes cifrado-pulso{ 0%,100%{ opacity:.3; transform:scale(.8) } 50%{ opacity:.85; transform:scale(1.2) } }

.cifrado-via{ position:relative; width:60px; height:2px; margin:0 10px; background:var(--n-800); border-radius:2px }
.cifrado-via .bit{
  position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--marca-claro); box-shadow:0 0 7px 1px rgba(91,123,255,.9);
  animation:cifrado-viaja 1.7s linear infinite; animation-delay:var(--r); opacity:0;
}
@keyframes cifrado-viaja{
  0%{ left:0; opacity:0; transform:scale(.6) }
  10%{ opacity:1; transform:scale(1) }
  85%{ opacity:1; transform:scale(1) }
  100%{ left:100%; opacity:0; transform:scale(.6) }
}
.cifrado-txt{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--n-500); white-space:nowrap }
.cifrado-txt svg{ width:12px; height:12px; stroke:var(--n-500) }
@media (prefers-reduced-motion:reduce){
  .cifrado-logo::before{ animation:none; opacity:.6 }
  .cifrado-via .bit{ animation:none; opacity:.7; left:50% }
}

/* ═══ PÁGINA /login · pantalla partida ═══ */
.login-nav{ padding:calc(22px + var(--safe-t)) 0 22px }
.login-nav .envoltorio{ display:flex; align-items:center; justify-content:space-between }
.login-ayuda{ font-size:13.5px; color:var(--n-500); transition:color .18s ease }
.login-ayuda:hover{ color:var(--n-300) }

.login-envolt{ min-height:calc(100dvh - 68px); display:grid; grid-template-columns:1fr }
@media (min-width:900px){ .login-envolt{ grid-template-columns:1.15fr 1fr } }

/* sin foto: gradiente de marca + rejilla + marca de agua del logo, para que
   nada compita con las tarjetas de texto que van encima */
.login-foto{
  position:relative; overflow:hidden; isolation:isolate; display:none;
  background:linear-gradient(165deg, var(--n-950) 0%, #0d1338 62%, var(--n-950) 100%);
}
@media (min-width:900px){ .login-foto{ display:block } }
.login-foto::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(52% 60% at 82% 6%, rgba(23,60,255,.32), transparent 70%),
    radial-gradient(48% 55% at 6% 96%, rgba(23,60,255,.24), transparent 70%);
}
.login-foto-rejilla{
  position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  transform:rotate(-35deg);
  background-image:linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 100%;
  mask:radial-gradient(closest-side at 50% 50%, #000 20%, transparent 85%);
  -webkit-mask:radial-gradient(closest-side at 50% 50%, #000 20%, transparent 85%);
}
.login-foto-marca{
  position:absolute; right:-10%; bottom:-14%; width:72%; aspect-ratio:24/22; z-index:-1;
  background:var(--marca-claro); opacity:.08; transform:rotate(-6deg);
  -webkit-mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
  mask:url('assets/icons/v2/logo.svg') no-repeat center/contain;
}
.login-foto-txt{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; padding:64px }
.login-foto-txt h2{ font-size:clamp(28px,2.8vw,36px); font-weight:600; margin:14px 0 32px; line-height:1.2 }

/* rasgos como tarjetas de cristal, no una lista plana */
.ptl-chips{ display:flex; flex-direction:column; gap:11px; max-width:360px }
.ptl-chip{
  display:flex; align-items:center; gap:13px;
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:12px 14px; transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.ptl-chip:hover{ border-color:rgba(91,123,255,.4); background:rgba(23,60,255,.08); transform:translateX(3px) }
.ptl-chip .ic{
  width:32px; height:32px; flex:none; border-radius:6px;
  border:1px solid rgba(91,123,255,.3); background:rgba(23,60,255,.14);
  display:flex; align-items:center; justify-content:center;
}
.ptl-chip .ic svg{ width:15px; height:15px; stroke:var(--marca-claro) }
.ptl-chip span:last-child{ font-size:13.5px; color:var(--n-200); line-height:1.4 }

.login-panel{ display:flex; align-items:center; justify-content:center; padding:56px 24px }
.login-caja{ width:100%; max-width:380px }
.login-caja h1{ font-size:26px; font-weight:600; margin-bottom:8px }
.login-sub{ color:var(--n-400); font-size:14.5px; margin-bottom:30px }
.login-alta{ text-align:center; font-size:13.5px; color:var(--n-500); margin-top:20px }
.login-alta a{ color:var(--marca-claro); font-weight:600 }

/* botón Google · variante neutra (blanca), la única que la marca de Google
   permite sobre cualquier fondo sin pedir el par claro/oscuro completo */
.btn.google{
  color:#3c4043; background:#fff; border-color:#dadce0;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.15);
  margin-bottom:20px;
}
.btn.google:hover{ transform:translateY(-2px); background:#f7f8f8; box-shadow:0 2px 5px rgba(0,0,0,.45) }
.btn.google svg{ width:18px; height:18px }

.login-o{
  display:flex; align-items:center; gap:14px; margin:4px 0 22px;
  color:var(--n-600); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.login-o::before, .login-o::after{ content:''; flex:1; height:1px; background:var(--n-800) }

/* checkbox de aceptar términos, del mismo estilo que el captcha de abajo */
.consiente{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:20px; user-select:none }
.consiente-input{ position:absolute; opacity:0; width:0; height:0 }
.consiente-box{
  width:16px; height:16px; flex:none; margin-top:2px; border:1px solid var(--n-700); border-radius:3px;
  background:var(--n-900); display:flex; align-items:center; justify-content:center;
  transition:border-color .18s ease, background .18s ease;
}
.consiente-box svg{ width:10px; height:10px; opacity:0; transform:scale(.6); stroke:#fff; transition:opacity .18s ease, transform .18s ease }
.consiente-input:checked ~ .consiente-box{ background:linear-gradient(180deg,#486bff,var(--marca)); border-color:var(--marca) }
.consiente-input:checked ~ .consiente-box svg{ opacity:1; transform:scale(1) }
.consiente-input:focus-visible ~ .consiente-box{ outline:2px solid var(--marca-claro); outline-offset:2px }
.consiente-txt{ font-size:12.5px; color:var(--n-500); line-height:1.5 }
.consiente-txt a{ color:var(--n-300); text-decoration:underline; text-underline-offset:2px }
.consiente-txt a:hover{ color:var(--marca-claro) }

/* ═══ CAPTCHA · marca propia, no reCAPTCHA ═══ */
.captcha{
  display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none;
  border:1px solid var(--n-800); border-radius:4px; background:var(--n-900);
  padding:14px 16px; margin-bottom:20px; transition:border-color .18s ease;
}
.captcha:hover{ border-color:var(--n-700) }
.captcha-input{ position:absolute; opacity:0; width:0; height:0 }
.captcha-box{
  width:22px; height:22px; flex:none; border:2px solid var(--n-600); border-radius:4px;
  background:var(--n-950); display:flex; align-items:center; justify-content:center;
  transition:border-color .18s ease, background .18s ease;
}
.captcha-box svg{ width:14px; height:14px; opacity:0; transform:scale(.6); stroke:#fff; transition:opacity .18s ease, transform .18s ease }
.captcha-input:checked ~ .captcha-box{ background:linear-gradient(180deg,#486bff,var(--marca)); border-color:var(--marca) }
.captcha-input:checked ~ .captcha-box svg{ opacity:1; transform:scale(1) }
.captcha-input:focus-visible ~ .captcha-box{ outline:2px solid var(--marca-claro); outline-offset:2px }
.captcha-txt{ flex:1; font-size:13.5px; color:var(--n-200) }
.captcha-marca{ display:flex; align-items:center; gap:7px; padding-left:14px; border-left:1px solid var(--n-800) }
.captcha-marca .marca-icono{ width:19px; height:17px; opacity:.8 }
.captcha-marca-txt{ font-size:9.5px; line-height:1.35; color:var(--n-500); text-align:left }
.captcha-marca-txt i{ display:block; font-style:normal; font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:var(--n-600) }

/* ═══ DEMO · PANEL DE CLIENTE (vista previa de marketing, sin backend) ═══ */
.panel-shell{ display:grid; grid-template-columns:1fr; min-height:100vh; background:var(--n-900) }
@media (min-width:900px){ .panel-shell{ grid-template-columns:248px 1fr } }
.panel-shell > aside, .panel-shell > .panel-col{ min-width:0 }

.panel-lateral{
  display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid var(--n-800); background:var(--n-950);
  padding:calc(16px + var(--safe-t)) 16px 16px;
}
@media (min-width:900px){
  .panel-lateral{ border-bottom:none; border-right:1px solid var(--n-800); position:sticky; top:0; height:100vh; padding:calc(22px + var(--safe-t)) 16px 22px }
}
.panel-marca{ display:flex; align-items:center; gap:10px; padding:4px 10px 18px; flex:none }
.panel-marca .marca-icono{ width:22px; height:20px }
.panel-marca span{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--blanco) }

.panel-nav{ display:flex; flex-direction:row; gap:2px; overflow-x:auto; flex:none }
@media (min-width:900px){ .panel-nav{ flex-direction:column; gap:2px; flex:1; overflow-x:visible } }
.panel-nav a{
  display:flex; align-items:center; gap:11px; flex:none;
  padding:10px 12px; border-radius:6px; font-size:13.5px; font-weight:500; color:var(--n-400);
  transition:background .18s ease, color .18s ease; white-space:nowrap;
}
.panel-nav a svg{ width:17px; height:17px; flex:none; stroke:currentColor }
.panel-nav a:hover{ color:var(--n-200); background:var(--n-900) }
.panel-nav a.act{ color:var(--blanco); background:var(--marca-tenue) }
.panel-nav a.act svg{ stroke:var(--marca-claro) }
@media (max-width:899px){ .panel-nav a span{ display:none } .panel-nav a{ padding:10px } }

.panel-usr{
  display:none; align-items:center; gap:10px; margin-top:auto; padding:14px 10px 4px;
  border-top:1px solid var(--n-800); flex:none;
}
@media (min-width:900px){ .panel-usr{ display:flex } }
.panel-usr .av{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #486bff, var(--marca) 60%, #1230cc);
  font-size:12px; font-weight:700; color:#fff; letter-spacing:0;
}
.panel-usr .nom{ min-width:0 }
.panel-usr .nom b{ display:block; font-size:13px; color:var(--n-200); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.panel-usr .nom small{ font-size:11.5px; color:var(--n-500) }

.panel-col{ min-width:0 }
.panel-topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(16px + var(--safe-t)) 20px 16px; border-bottom:1px solid var(--n-800); background:rgba(23,23,23,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@media (min-width:768px){ .panel-topbar{ padding:calc(18px + var(--safe-t)) 32px 18px } }
.panel-topbar h1{ font-size:16px; font-weight:600; color:var(--blanco) }
.panel-topbar-ac{ display:flex; align-items:center; gap:10px; flex:none }
.panel-ic-btn{
  position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--n-800); border-radius:6px; background:var(--n-850); color:var(--n-400); flex:none;
}
.panel-ic-btn svg{ width:16px; height:16px; stroke:currentColor }
.panel-ic-btn .punto{
  position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--marca-claro); border:2px solid var(--n-950);
}

.panel-contenido{ max-width:1080px; margin:0 auto; padding:28px 18px 100px }
@media (min-width:768px){ .panel-contenido{ padding:36px 32px 110px } }

.panel-ban{ margin-bottom:28px }
.panel-ban .ban-txt{ padding:32px 30px }
.panel-ban .etq{ margin-bottom:14px }

.panel-stats{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:28px }
@media (min-width:640px){ .panel-stats{ grid-template-columns:repeat(4,1fr) } }
.stat-tile{ border:1px solid var(--n-800); border-radius:8px; background:var(--n-850); padding:18px; min-width:0 }
.stat-tile .t{ font-size:12px; color:var(--n-500); margin-bottom:10px; display:block }
.stat-tile .v{ font-size:23px; font-weight:600; color:var(--blanco); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat-tile .d{ display:block; margin-top:6px; font-size:12px; color:var(--n-500) }
.stat-tile .d.ok{ color:#4ade80 }
.stat-tile .d.warn{ color:#fbbf24 }

.panel-h2{ font-size:15px; font-weight:600; color:var(--blanco); margin:0 0 16px }

.panel-svcs{ display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:32px }
@media (min-width:900px){ .panel-svcs{ grid-template-columns:repeat(3,1fr) } }
.svc-card{ border:1px solid var(--n-800); border-radius:8px; background:var(--n-850); padding:18px; display:flex; flex-direction:column; min-width:0 }
.svc-cab{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.svc-cab .ic{
  width:32px; height:32px; border-radius:6px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--n-800); background:var(--n-900);
}
.svc-cab .ic svg{ width:16px; height:16px; stroke:#8fa6ff }
.svc-cab .nom{ min-width:0; flex:1 }
.svc-cab .nom b{ display:block; font-size:13.5px; color:var(--n-200); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.svc-cab .nom small{ font-size:11.5px; color:var(--n-500) }
.svc-card .srv-stats{ margin-top:auto; padding-top:14px }
.svc-datos{ margin-top:2px }
.svc-dato{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; padding:9px 0; border-top:1px solid var(--n-800) }
.svc-dato:first-child{ border-top:none; padding-top:0 }
.svc-dato span:first-child{ color:var(--n-500) }
.svc-dato span:last-child{ color:var(--n-300); font-weight:500; text-align:right }

.panel-inferior{ display:grid; gap:20px; grid-template-columns:1fr }
@media (min-width:900px){ .panel-inferior{ grid-template-columns:1.3fr 1fr } }
.panel-inferior > div{ min-width:0 }

.panel-facts{ border:1px solid var(--n-800); border-radius:8px; background:var(--n-850); overflow:hidden; overflow-x:auto }
.panel-facts table{ width:100%; border-collapse:collapse; min-width:420px }
.panel-facts th, .panel-facts td{ padding:13px 18px; text-align:left; border-bottom:1px solid var(--n-800); font-size:13px; white-space:nowrap }
.panel-facts th{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--n-500) }
.panel-facts td{ color:var(--n-400) }
.panel-facts td.ext{ color:var(--n-200); font-weight:600 }
.panel-facts tr:last-child td{ border-bottom:none }
.pago-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; border-radius:4px; padding:3px 9px }
.pago-pill.ok{ color:#4ade80; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.3) }
.pago-pill.esp{ color:#fbbf24; background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.3) }

.panel-soporte{
  border:1px solid var(--n-800); border-radius:8px; background:var(--n-850);
  padding:30px 24px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.panel-soporte img{ width:104px; height:104px; object-fit:contain; margin-bottom:14px; opacity:.94 }
.panel-soporte h3{ font-size:14.5px; font-weight:600; color:var(--n-200); margin-bottom:6px }
.panel-soporte p{ font-size:12.5px; color:var(--n-500); line-height:1.55; margin-bottom:18px; max-width:30ch }

.panel-preview{
  position:fixed; left:50%; bottom:calc(18px + var(--safe-b)); transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--n-700); border-radius:999px; background:rgba(20,20,24,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:9px 16px 9px 12px; font-size:12.5px; font-weight:500; color:var(--n-300);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.7); white-space:nowrap;
}
.panel-preview svg{ width:14px; height:14px; stroke:var(--marca-claro); flex:none }
.panel-preview a{ color:var(--marca-claro); font-weight:600; text-decoration:underline; text-underline-offset:2px }

/* ═══ FORMULARIOS REALES · CRM (admin + portal cliente) ═══
   mismos tokens que .ptl-input (maqueta de /login) pero para elementos de verdad */
.campo{ display:block; margin-bottom:16px }
.campo-lbl{ display:block; font-size:12px; color:var(--n-500); margin-bottom:6px }
.campo-ayuda{ display:block; font-size:11.5px; color:var(--n-600); margin-top:6px }
.campo-error{ display:block; font-size:11.5px; color:#f87171; margin-top:6px }
input.campo-input, select.campo-input, textarea.campo-input{
  display:block; width:100%; box-sizing:border-box; appearance:none; -webkit-appearance:none;
  border:1px solid var(--n-800); border-radius:4px; background:var(--n-900);
  padding:10px 12px; font:inherit; font-size:13.5px; color:var(--n-200);
  transition:border-color .18s ease, background .18s ease;
}
input.campo-input::placeholder, textarea.campo-input::placeholder{ color:var(--n-600) }
input.campo-input:focus, select.campo-input:focus, textarea.campo-input:focus{
  outline:none; border-color:var(--marca-claro); background:var(--n-950);
}
input.campo-input:disabled{ opacity:.5; cursor:not-allowed }
textarea.campo-input{ resize:vertical; min-height:90px }
select.campo-input{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237a7a7a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:34px;
}
.campo-fila{ display:flex; gap:12px }
.campo-fila > .campo{ flex:1; min-width:0 }

.alerta{ border-radius:6px; padding:12px 14px; font-size:13px; margin-bottom:18px; border:1px solid transparent }
.alerta.err{ color:#fca5a5; background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.3) }
.alerta.ok{ color:#86efac; background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.3) }
.alerta.info{ color:#93c5fd; background:rgba(59,130,246,.09); border-color:rgba(59,130,246,.3) }

.pago-pill.danger{ color:#f87171; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.3) }
.pago-pill.info{ color:#93c5fd; background:rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.3) }
.pago-pill.neutro{ color:var(--n-500); background:rgba(255,255,255,.04); border:1px solid var(--n-800) }

.btn.mini{ padding:7px 13px; font-size:12.5px; border-radius:4px }

/* fila de tabla con campo editable inline (precio/visibilidad de un plan) */
.panel-facts td .campo{ margin-bottom:0 }
.panel-facts td input.campo-input{ padding:6px 9px; font-size:13px; max-width:120px }
.panel-facts td select.campo-input{ padding:6px 26px 6px 9px; font-size:13px }

/* accesos rápidos del admin: contraseña mostrada una sola vez tras aprovisionar */
.secreto-once{
  border:1px dashed rgba(251,191,36,.4); border-radius:6px; background:rgba(251,191,36,.06);
  padding:14px 16px; font-family:var(--mono, ui-monospace, monospace); font-size:13px; color:#fde68a;
  word-break:break-all; margin-bottom:10px;
}