/* =====================================================================
   ESKALA GROUP — Sistema de diseño
   Reconstruido a partir de las maquetas de /Referencias.
   Paleta muestreada píxel a píxel; tipografía Plus Jakarta Sans.
   ===================================================================== */

:root {
  /* ---- Superficie ---- */
  --paper:      #FBFBFC;   /* fondo general */
  --paper-2:    #F5F6FA;   /* bandas alternas muy claras */
  --white:      #FFFFFF;
  --line:       #E8EAF2;   /* borde de tarjeta */
  --line-2:     #DDE0EC;

  /* ---- Oscuros (muestreados de las maquetas) ---- */
  --navy-hero:  #05091F;   /* panel oscuro del hero */
  --navy-band:  #030E31;   /* banda de soluciones */
  --navy-card:  #031335;   /* tarjeta sobre oscuro */
  --navy-cta:   #0A1231;   /* cierre */
  --navy-deep:  #011031;   /* hero oscuro de compañía */
  --marquee:    #0C0737;   /* marquesina */

  /* ---- Tinta ---- */
  --ink:        #0B1233;   /* titulares */
  --ink-2:      #494E85;   /* subtítulos */
  --ink-3:      #606881;   /* cuerpo */
  --ink-light:  rgba(255,255,255,.72);
  --ink-light-2:rgba(255,255,255,.52);

  /* ---- Acentos ---- */
  --violet:     #5139F5;
  --violet-2:   #6C59F9;   /* itálicas */
  --violet-3:   #6B3FE8;   /* eyebrow: 5.55 sobre la banda suave */
  --violet-wash:#EFECFE;
  --teal:       #4EE2CA;
  --green:      #10B28D;
  /* El verde de marca como TEXTO sobre papel: #10B28D da 2.61:1 y hay
     que llegar a 4.5. Este llega a 5.12 sin cambiar de tono. */
  --green-txt:  #0A7A61;
  /* El mismo verde como FONDO de boton con texto blanco: #10B28D da
     2.7:1. Este llega a 4.65 y sigue leyendose como el verde de ARIN. */
  --green-btn:  #0A8468;

  /* ---- Tipografía ---- */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Métrica ---- */
  /* Crece con la ventana hasta 1500: en un monitor grande el sitio
     deja de verse como una franja estrecha, pero la linea de texto no
     llega a ser incomoda de leer. */
  --maxw: min(1500px, 92vw);
  --gut:  24px;
  --nav-h: 72px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --band: clamp(64px, 7vw, 104px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* =====================================================================
   TIPOGRAFÍA
   Titulares muy cerrados y de altura de x alta, como en la maqueta.
   ===================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
h2 { font-size: clamp(27px, 3.2vw, 38px); }
h3 { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -0.022em; }
h4 { font-size: 17px; letter-spacing: -0.018em; }

p { margin: 0; }
p + p { margin-top: 1em; }

/* Palabra acentuada en itálica violeta — la firma de la marca */
.em {
  color: var(--violet-2);
  font-style: italic;
  font-weight: 800;
}

.lead {
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.68;
  color: var(--ink-3);
  max-width: 46ch;
}

/* Rótulo superior en versalitas espaciadas */
.eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-3);
}
.eyebrow--light { color: #9E8BFF; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* =====================================================================
   BOTONES
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary { background: #0B1638; color: #fff; }
.btn-primary:hover { background: #16225A; transform: translateY(-1px); }

.btn-line { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--violet); color: var(--violet); }

.btn-violet { background: var(--violet); color: #fff; }
.btn-violet:hover { background: #4229E8; transform: translateY(-1px); }

.btn-green { background: var(--green-btn); color: #fff; }
.btn-green:hover { background: #097358; }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,0,0,.22); }

/* Enlace con flecha */
.go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--violet);
}
.go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.go:hover svg { transform: translateX(4px); }

/* Botón circular con flecha (tarjetas oscuras) */
.go-round {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.go-round svg { width: 14px; height: 14px; }

/* =====================================================================
   PÍLDORAS Y ETIQUETAS
   ===================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.pill--dark {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }

/* Etiqueta pequeña de sector bajo cada logo */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* =====================================================================
   BANDAS
   ===================================================================== */

.band { padding: var(--band) 0; }
.band--paper   { background: var(--paper); }
.band--soft    { background: var(--paper-2); }


/* =====================================================================
   NAVEGACIÓN
   ===================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violet); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-size: 13px; font-weight: 600;
}
.skip:focus { left: 0; }

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(251,251,252,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
  /* Sin `overflow` de ningun tipo: en un elemento `sticky` crea un
     contenedor de desplazamiento propio, lo que anadia una segunda
     barra a la derecha y dejaba la sombra dentro de la caja recortada.
     El bloque de la marca no se sale, asi que no hay nada que cortar. */
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(251,251,252,.97);
  box-shadow: 0 6px 24px rgba(11, 18, 51, .09);
}
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* La marca vive en un bloque oscuro que corta en diagonal. Nace en el
   borde izquierdo de la ventana, no en el margen del contenido, asi
   que sale del ancho util con un margen negativo. */
.nav-marca {
  display: flex; align-items: center;
  align-self: stretch;
  /* Se recorta a si mismo: el clip-path no crea contenedor de
     desplazamiento, a diferencia de overflow. */
  margin-left: calc(-1 * var(--gut) - max(0px, (100vw - var(--maxw)) / 2));
  padding: 0 clamp(30px, 4vw, 58px) 0
           calc(var(--gut) + max(0px, (100vw - var(--maxw)) / 2));
  background: var(--navy-hero);
  /* El corte: el borde derecho baja hacia la izquierda */
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.nav-marca .brand-name { color: #fff; }
.nav-marca .brand-sub { color: rgba(198, 202, 224, .68); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 30px; height: 30px; border-radius: 6px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-size: 17px; font-weight: 800; color: var(--ink);
  letter-spacing: 0.12em;
}
.brand-sub {
  font-size: 8.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 0.3em; margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }

/* La llamada a la accion repite el corte de la marca, en espejo: las
   dos puntas del encabezado hablan el mismo idioma. */
.nav-cta {
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-left: 26px; padding-right: 26px;
}
.nav-cta:hover { transform: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px;
  font-size: 13.5px; font-weight: 500; color: #3C4560;
  border-radius: var(--r-sm);
  position: relative;
  transition: color .18s;
}
.nav-link svg { width: 11px; height: 11px; opacity: .6; transition: transform .2s; }
.nav-link:hover { color: var(--violet); }
.nav-link[aria-current] { color: var(--violet); }
.nav-link[aria-current]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--violet); border-radius: 2px;
}

.nav-cta { padding: 12px 18px; font-size: 13px; }

.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.burger svg { width: 20px; height: 20px; }

/* Desplegable */
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 232px; padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(11,18,51,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.has-menu:hover .nav-link svg { transform: rotate(180deg); }
.menu-ancho { min-width: 290px; }
.menu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: #3C4560;
}
.menu a:hover { background: var(--violet-wash); color: var(--violet); }

/* Cada entrada nombra el servicio y, debajo, que resuelve. */
.menu-tit {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  transition: color .16s;
}
.menu-des {
  display: block; margin-top: 2px;
  font-size: 11.8px; line-height: 1.45; color: var(--ink-3);
}
.menu a:hover .menu-tit { color: var(--violet); }
.menu-precio {
  font-size: 11.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--violet-wash); color: var(--violet);
  white-space: nowrap;
}

/* Separador y enlace de cierre: cada desplegable termina en una salida. */
.menu-sep {
  display: block; height: 1px; margin: 7px 10px;
  background: var(--line);
}
.menu a.menu-pie {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.6px; font-weight: 700; color: var(--violet);
  transition: gap .18s var(--ease);
}
.menu a.menu-pie svg { width: 14px; height: 14px; }
.menu a.menu-pie:hover { gap: 11px; background: var(--violet-wash); }

/* =====================================================================
   HERO
   ===================================================================== */

.hero { padding: clamp(38px, 5vw, 62px) 0 0; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero h1 { margin: 20px 0 18px; }
.hero .lead { margin-bottom: 26px; }

/* Desvio para el otro publico: discreto, para no competir con la
   propuesta principal, pero visible para quien busca justo eso. */
.hero-bifurca {
  margin-top: 20px;
  font-size: 13.2px; line-height: 1.6;
  color: var(--ink-3);
}
.hero-bifurca a {
  color: var(--violet); font-weight: 700;
  border-bottom: 1px solid rgba(81,57,245,.3);
  transition: border-color .18s;
}
.hero-bifurca a:hover { border-bottom-color: var(--violet); }

/* Fila de datos del héroe: cifras que el propio sitio respalda */
.hero-datos {
  display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 3vw, 44px);
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-datos b {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 3px;
}
.hero-datos span {
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
  display: block; max-width: 15ch;
}

/* En pantallas anchas la columna crece con la pantalla: sin esto el
   titular de 52 px flota en un tercio vacío del ancho disponible. */
@media (min-width: 1600px) {
  .hero h1 { font-size: 66px; }
  .hero .lead { font-size: 17px; max-width: 46ch; }
  .hero-grid { gap: 64px; }
  .hero-datos b { font-size: 27px; }
  .hero-datos span { font-size: 12.5px; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Panel oscuro con la esquina superior izquierda recortada */
.stage {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--navy-hero);
  border-radius: var(--r-xl);
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 12%);
}
.stage svg.orbit { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Fichas flotantes sobre el panel */
.stage .chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  background: rgba(12,18,44,.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm);
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.stage .chip svg { width: 13px; height: 13px; opacity: .8; }

.chip-card {
  position: absolute;
  padding: 13px 15px;
  background: rgba(14,20,48,.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  max-width: 190px;
}
.chip-card b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #fff; }
.chip-card p { margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.62); }
.chip-card .live { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9.5px; color: var(--teal); }

/* =====================================================================
   MARQUESINA
   ===================================================================== */

.marquee {
  background: var(--marquee);
  overflow: hidden;
  padding: 11px 0;
  --speed: 42s;
}
.marquee-track { display: flex; width: max-content; animation: slide var(--speed) linear infinite; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.86); white-space: nowrap;
}
.marquee i { color: var(--violet-2); font-style: normal; font-size: 9px; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* =====================================================================
   REJILLAS Y TARJETAS
   ===================================================================== */

.head-center { text-align: center; max-width: 720px; margin: 0 auto; }
.head-center h2 { margin: 14px 0 14px; }
.head-center .lead { margin: 0 auto; max-width: 60ch; color: var(--ink-2); }

.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(11,18,51,.07); border-color: var(--line-2); }

/* Tarjeta de logo de cliente */
.logo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.logo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(11, 18, 51, .10);
  border-color: rgba(81, 57, 245, .28);
}
/* Los logos llegan con fuerzas muy distintas: unos a todo color y otros
   lavados. En gris la rejilla se lee pareja, y el color vuelve donde
   estas mirando, que es donde importa. */
.logo-card img {
  height: 30px; width: auto; object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-card:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* El sector entero se declara cuando apuntas a una de sus tarjetas. */
.sector { transition: border-color .3s, box-shadow .3s; }
.sector:hover { border-color: rgba(81, 57, 245, .22); }
.sector:hover .sector-title { color: var(--violet); }

.note {
  text-align: center; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-3); max-width: 62ch; margin: 26px auto 0;
}

/* Tarjeta sobre fondo oscuro */
.dcard {
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .22s;
}
.dcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); }
.dcard h3 { margin-bottom: 9px; }
.dcard p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.6); }
.dcard .go-round { margin-top: auto; align-self: flex-end; }
.dcard:hover .go-round { background: var(--violet); border-color: var(--violet); }

/* Icono en cuadrado redondeado */
.ic {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.ic svg { width: 21px; height: 21px; }
.ic--violet { background: rgba(81,57,245,.14); color: #A78BFF; border: 1px solid rgba(129,105,255,.28); }
.ic--teal   { background: rgba(78,226,202,.12); color: var(--teal); border: 1px solid rgba(78,226,202,.26); }

/* Icono circular claro */
.ic-round {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line);
  color: var(--violet);
}
.ic-round svg { width: 22px; height: 22px; }

/* La categoria de un articulo lleva informacion, asi que se queda.
   Pero como etiqueta que se puede mirar, no como rotulo que se salta. */
.categoria {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--violet-wash);
  color: var(--violet);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em;
}

/* =====================================================================
   CONSTELACION REACTIVA
   'translate' y no 'transform': los nodos entran con una animacion
   forwards que fija su transform, y escribir encima seria pelearse con
   su relleno. Las dos propiedades se componen.
   ===================================================================== */

.conste-nodo {
  transition: translate .42s cubic-bezier(.16, 1, .3, 1),
              border-color .3s, background .3s;
}
.conste-nodo.tirando { transition: translate .14s linear; }

/* El nodo al que apuntas se declara: borde vivo y LED encendido. */
.conste-nodo.cerca { border-color: rgba(158, 139, 255, .55); }
.conste-nodo .conste-led { transition: box-shadow .3s, background .3s; }
.conste-nodo.cerca .conste-led {
  background: #4EE2CA;
  box-shadow: 0 0 14px rgba(78, 226, 202, 1);
}

.conste-nucleo { transition: translate .5s cubic-bezier(.16, 1, .3, 1); }
.conste.tirando .conste-nucleo { transition: translate .2s linear; }

@media (prefers-reduced-motion: reduce) {
  .conste-nodo, .conste-nucleo { translate: none !important; transition: none; }
}
@media (hover: none) {
  .conste-nodo, .conste-nucleo { translate: none !important; }
}

/* =====================================================================
   AURORA
   Las bandas oscuras eran color plano. Ahora respiran: tres manchas
   que derivan muy despacio y se cruzan. A 38 s por vuelta nadie lo lee
   como una animacion; se lee como profundidad. Van detras del texto y
   no capturan el raton, asi que no estorban a nadie.
   ===================================================================== */

.aurora { position: relative; }
.aurora-capa {
  position: absolute; inset: -18%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(42% 46% at 18% 28%, rgba(124, 92, 255, .62), transparent 62%),
    radial-gradient(38% 42% at 82% 24%, rgba(78, 226, 202, .34), transparent 60%),
    radial-gradient(46% 40% at 52% 84%, rgba(81, 57, 245, .5), transparent 64%);
  filter: blur(52px);
  animation: aurora-deriva 38s ease-in-out infinite alternate;
  will-change: transform;
}
/* El contenido de la banda va por encima de la aurora. */
.aurora > .wrap, .aurora > * { position: relative; z-index: 1; }
.aurora > .aurora-capa { z-index: 0; }

@keyframes aurora-deriva {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.09); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
}

/* Detenida sigue siendo profundidad, solo que quieta. */
@media (prefers-reduced-motion: reduce) {
  .aurora-capa { animation: none; }
}

/* Tres capas de blur 52px animadas cuestan GPU, y un telefono la gasta
   en bateria. En pantalla pequena la aurora se queda, pero quieta y
   con menos desenfoque: la profundidad no depende del movimiento. */
@media (max-width: 760px) {
  .aurora-capa { animation: none; filter: blur(38px); opacity: .45; }
}
}

/* =====================================================================
   DINAMISMO
   La competencia del rubro pone una foto de archivo y no se mueve mas.
   Aqui el titular se escribe, los botones acusan la cercania del raton
   y las tarjetas tienen volumen. Nada de esto se repite en bucle: el
   movimiento perpetuo cansa, el que responde no.
   ===================================================================== */

/* --- El titular entra palabra por palabra --- */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; }
.palabra > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%);
  animation: palabra-sube .72s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 62ms);
}
@keyframes palabra-sube { to { transform: translateY(0); } }

/* --- Boton magnetico: se inclina hacia el cursor antes de pulsarlo --- */
.iman {
  transform: translate(var(--ix, 0px), var(--iy, 0px));
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.iman.cerca { transition: transform .1s linear; }

/* --- Volumen en las tarjetas: giran hacia donde apuntas --- */
.volumen {
  transform: perspective(900px)
             rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
             translateZ(0);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s;
}
.volumen.apuntada { transition: transform .1s linear; }

/* --- El panel del heroe se queda atras al desplazar --- */
.paralaje { transform: translateY(var(--py, 0px)); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .palabra > i { transform: none; animation: none; }
  .iman, .volumen, .paralaje { transform: none !important; transition: none; }
}
@media (hover: none) {
  .iman, .volumen { transform: none !important; }
}

/* =====================================================================
   INTERACCION
   Nada de esto decora: cada pieza responde a algo que hace la persona
   -desplazar, apuntar, pulsar- y desaparece cuando pide menos
   movimiento o cuando el dedo sustituye al raton.
   ===================================================================== */

/* --- Avance de lectura ---
   Una pagina larga no dice cuanto queda. Esta linea si. */
.avance {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 120;
  transform-origin: 0 50%;
  transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--violet), var(--teal));
  pointer-events: none;
}

/* --- Luz que sigue al cursor ---
   La tarjeta acusa recibo de donde estas mirando. Es un reflejo, no un
   halo: nace en el punto del cursor y muere a 320px. */
.luz { position: relative; }
.luz::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(81, 57, 245, .09), transparent 68%);
}
.luz:hover::after { opacity: 1; }
/* Sobre fondo oscuro el reflejo es claro, no violeta. */
.band--navy .luz::after, .close-full .luz::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .07), transparent 68%);
}

/* --- El panel del heroe se inclina hacia el cursor ---
   Muy poco: tres grados bastan para que se lea como un objeto y no
   como una captura pegada. */
.hero-panel-3d {
  transform: perspective(1100px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.hero-panel-3d.apuntado { transition: transform .12s linear; }

/* --- La flecha de los botones viaja al pasar --- */
.btn svg { transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.994); }

/* --- El menu subraya con un trazo que crece desde el centro --- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; border-radius: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transition: transform .26s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current]::after { transform: scaleX(1); }

/* --- Quien pide menos movimiento se queda con el estado, no el viaje --- */
@media (prefers-reduced-motion: reduce) {
  .avance { transition: none; }
  .hero-panel-3d { transform: none !important; transition: none; }
  .btn:hover svg { transform: none; }
  .nav-link::after { transition: none; }
}

/* --- El dedo no apunta: en tactil sobra el seguimiento --- */
@media (hover: none) {
  .luz::after { display: none; }
  .hero-panel-3d { transform: none !important; }
}

/* =====================================================================
   SUPERFICIES DEL NAVEGADOR
   Seleccion, barra de desplazamiento y anillo de foco vienen con los
   colores del navegador, que no son de nadie. Se visten con la paleta.
   ===================================================================== */

::selection { background: rgba(81, 57, 245, .22); color: var(--ink); }
.foot ::selection, .band--navy ::selection, .close-full ::selection {
  background: rgba(158, 139, 255, .32); color: #fff;
}

/* Firefox usa dos valores; Chromium, el pseudoelemento de abajo. */
html { scrollbar-color: rgba(81, 57, 245, .42) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(81, 57, 245, .34);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(81, 57, 245, .58); background-clip: content-box; }

/* Un foco visible que pertenece a la marca, no al navegador. */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.foot :focus-visible, .band--navy :focus-visible { outline-color: #B7A6FF; }

/* Las cifras se comparan mejor si ocupan el mismo ancho. */
.hero-datos b { font-variant-numeric: tabular-nums; }

/* =====================================================================
   FOOTER
   ===================================================================== */

.foot { background: var(--navy-cta); color: rgba(255,255,255,.6); padding: 56px 0 0; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}
.foot h3 { color: #fff; font-size: 13px; margin-bottom: 16px; letter-spacing: -0.01em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .18s; }
.foot a:hover { color: #fff; }
.foot .brand-name { color: #fff; }
.foot .brand-sub { color: rgba(255,255,255,.45); }
.foot-tag { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); max-width: 30ch; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  font-size: 12.5px;
}
.foot-bottom nav { display: flex; gap: 24px; }
.social { display: flex; gap: 9px; margin-top: 18px; }
.social a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}
.social svg { width: 15px; height: 15px; }
.social a:hover { background: var(--violet); border-color: var(--violet); }

/* =====================================================================
   ACCESIBILIDAD Y MOVIMIENTO
   ===================================================================== */

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

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

/* =====================================================================
   TIENDA VIRTUAL - planes, comparativa, pasos y rubros
   ===================================================================== */

/* Ruta de migas: ubica al visitante que llega desde una busqueda */
.migas { font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.migas a { color: var(--ink-3); }
.migas a:hover { color: var(--violet); }
.migas span { margin: 0 6px; }
.migas span[aria-current] { margin: 0; color: var(--ink-2); font-weight: 600; }

/* Solo para lectores de pantalla */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Los tres planes ---- */
.planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px 22px;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,18,51,.08); border-color: var(--line-2); }

/* El plan recomendado se eleva sobre los otros dos, como en la referencia */
.plan--destacado {
  background: linear-gradient(170deg, #F3F0FE 0%, var(--white) 46%);
  border-color: var(--violet-2);
  box-shadow: 0 18px 44px rgba(81,57,245,.13);
}
.plan--completo {
  background: linear-gradient(170deg, #EDF7FC 0%, var(--white) 46%);
  border-color: #7FD8E8;
}

.plan-cinta {
  position: absolute; left: 50%; top: -14px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(81,57,245,.34);
}
.plan-cinta svg { width: 14px; height: 14px; flex: none; }
.plan-cinta--teal { background: #0B7C9C; box-shadow: 0 8px 20px rgba(11,124,156,.32); }

.plan-top { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.plan-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: var(--violet-wash);
  color: var(--violet);
}
.plan-ic svg { width: 23px; height: 23px; }
.plan--destacado .plan-ic { background: var(--violet); color: #fff; }
.plan--completo .plan-ic { background: #DFF3F9; color: #0E7FA6; }

.plan-top h3 { font-size: 21px; font-weight: 800; letter-spacing: .02em; margin: 0 0 2px; }
.plan-sub { font-size: 12.2px; color: var(--ink-3); }

.plan-precio {
  font-size: 46px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1;
  color: var(--ink); margin: 0;
}
.plan-precio span { font-size: 25px; font-weight: 700; margin-right: 3px; vertical-align: 6px; }
.plan--destacado .plan-precio { color: var(--violet); }
.plan--completo .plan-precio { color: #0E7FA6; }
.plan-pago { font-size: 13px; color: var(--ink-3); margin: 6px 0 14px; }

.plan-dominio {
  display: inline-block; align-self: flex-start;
  padding: 7px 14px; border-radius: 999px;
  background: var(--violet-wash); color: var(--violet);
  font-size: 12px; font-weight: 700;
}
.plan--completo .plan-dominio { background: #DFF3F9; color: #0E7FA6; }

.plan-para {
  margin: 18px 0; padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.plan-para b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.plan-para span { font-size: 12.3px; line-height: 1.5; color: var(--ink-3); }

.plan-lista { list-style: none; display: grid; gap: 11px; margin: 0 0 22px; padding: 0; }
.plan-lista li {
  position: relative;
  padding-left: 27px;
  font-size: 13.3px; line-height: 1.45; color: var(--ink-2);
}
/* La marca de verificacion se dibuja en CSS: un icono menos que cargar */
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--violet);
}
.plan-lista li::after {
  content: ""; position: absolute; left: 5.5px; top: 5.5px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.plan--completo .plan-lista li::before { background: #0E9BC4; }
.plan-lista b { font-weight: 700; color: var(--ink); }

/* El boton cierra la tarjeta: se pega abajo aunque las listas midan distinto */
.plan-btn { margin-top: auto; justify-content: center; width: 100%; }

/* Los botones flotantes ocupan la esquina inferior derecha: sin este
   respiro tapaban el boton de la ultima tarjeta. */
.planes { padding-bottom: 8px; }
@media (max-width: 980px) { .planes { padding-bottom: 76px; } }

/* ---- Franja de lo que incluyen todos ---- */
.incluyen {
  margin-top: 26px; padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.incluyen-tit { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.incluyen-fila {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 14px 30px;
}
.incluyen-fila span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.incluyen-fila svg { width: 18px; height: 18px; flex: none; color: var(--violet); }
.incluyen-nota {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.4px; line-height: 1.55; color: var(--ink-3);
}

/* ---- Tabla comparativa ---- */
.tabla-comp {
  margin-top: 36px; overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tabla-comp table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabla-comp th, .tabla-comp td {
  padding: 15px 18px; text-align: left;
  font-size: 13.4px; line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.tabla-comp thead th {
  font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
}
.tabla-comp tbody th { font-weight: 700; color: var(--ink); width: 34%; }
.tabla-comp td { color: var(--ink-3); }
.tabla-comp tr:last-child th, .tabla-comp tr:last-child td { border-bottom: 0; }
/* La columna propia se distingue para que la comparacion se lea de un vistazo */
.tabla-comp .es-nuestro { background: var(--violet-wash); color: var(--ink-2); }
.tabla-comp thead .es-nuestro { color: var(--violet); background: #E9E4FE; }
.tabla-comp td.es-nuestro b { color: var(--ink); }
.tabla-nota { margin-top: 14px; font-size: 12.2px; line-height: 1.6; color: var(--ink-3); }

/* ---- Pasos numerados ---- */
.pasos {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.pasos li {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px 20px;
}
.paso-n {
  display: block;
  font-size: 30px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  /* Decorativo: va con aria-hidden */
  color: var(--violet); opacity: .42;
  margin-bottom: 12px;
}
.pasos h3 { font-size: 15.5px; line-height: 1.3; margin: 0 0 8px; }
.pasos p { font-size: 12.9px; line-height: 1.6; color: var(--ink-3); margin: 0; }

/* ---- Rubros ---- */
.rubros {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 34px;
}
.rubros span {
  padding: 10px 17px; border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: border-color .18s, color .18s;
}
.rubros span:hover { border-color: var(--violet-2); color: var(--violet); }
.rubros-nota {
  margin: 22px auto 0; max-width: 62ch;
  text-align: center; font-size: 13px;
  line-height: 1.6; color: var(--ink-3);
}

@media (max-width: 980px) {
  .planes { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pasos { grid-template-columns: 1fr; }
  .plan-precio { font-size: 40px; }
  .incluyen-fila { gap: 12px 20px; }
  .incluyen-fila span { font-size: 12.3px; }
}

/* =====================================================================
   CONSTELACION DE SERVICIOS
   Seis nodos alrededor del nucleo. Los pulsos viajan del centro hacia
   afuera porque esa es la direccion del relato: de Eskala salen las
   soluciones. Nada se mueve por decoracion.
   ===================================================================== */

.sol-tit {
  margin: 14px 0 12px;
  font-size: clamp(25px, 3vw, 38px);
  color: #fff;
  max-width: 19ch;
}
.sol-lead {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(215, 212, 240, .74);
  max-width: 58ch;
  margin-bottom: 34px;
}
.em--light { color: #9E8BFF; }

.conste {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1000 / 560;
  min-height: 430px;
}

.conste-cables {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Los cables se dibujan solos al entrar en pantalla y luego quedan */
.conste-cable {
  fill: none;
  stroke: url(#cbl);
  stroke-width: 1.4;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: conste-trazar 1.1s var(--ease) forwards;
}
.conste-cable:nth-of-type(1) { animation-delay: .10s; }
.conste-cable:nth-of-type(2) { animation-delay: .20s; }
.conste-cable:nth-of-type(3) { animation-delay: .30s; }
.conste-cable:nth-of-type(4) { animation-delay: .40s; }
.conste-cable:nth-of-type(5) { animation-delay: .50s; }
.conste-cable:nth-of-type(6) { animation-delay: .60s; }
@keyframes conste-trazar { to { stroke-dashoffset: 0; } }

.conste-anillo {
  fill: none;
  stroke: rgba(160, 140, 255, .17);
  stroke-width: 1;
  transform-origin: 500px 280px;
}
/* Sentidos opuestos: dos planos en vez de un disco plano */
.conste-anillo--1 { stroke-dasharray: 3 11; animation: conste-girar 48s linear infinite; }
.conste-anillo--2 { stroke: rgba(78,226,202,.13); stroke-dasharray: 2 16; animation: conste-girar 66s linear infinite reverse; }
@keyframes conste-girar { to { transform: rotate(360deg); } }

.conste-aura { animation: conste-latir 6s ease-in-out infinite alternate; transform-origin: 500px 280px; }
@keyframes conste-latir { from { opacity: .62; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }

.conste-pulso { fill: #A896FF; filter: drop-shadow(0 0 7px rgba(140,110,255,.95)); }
.conste-pulsos circle:nth-child(2n) { fill: #4EE2CA; filter: drop-shadow(0 0 7px rgba(78,226,202,.9)); }

/* ---- Nucleo ---- */
.conste-nucleo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 25%; aspect-ratio: 1;
  min-width: 138px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #291D7A 0%, #140F45 55%, #0A0A2B 100%);
  border: 1px solid rgba(160, 140, 255, .32);
  box-shadow: 0 0 60px rgba(81, 57, 245, .45), inset 0 0 40px rgba(81, 57, 245, .22);
  text-align: center;
  z-index: 2;
}
.conste-nucleo img { width: 40px; height: 40px; margin-bottom: 8px; }
.conste-nucleo b {
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 800;
  letter-spacing: .1em; color: #fff; line-height: 1;
}
.conste-sub {
  margin-top: 5px;
  font-size: clamp(9.5px, 1vw, 11.5px);
  letter-spacing: .04em;
  color: rgba(200, 195, 245, .72);
}

/* El halo respira: el nucleo esta vivo, no es un sello */
.conste-halo {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(124, 92, 255, .35);
  animation: conste-halo 4.4s ease-in-out infinite;
}
@keyframes conste-halo {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.09); opacity: .25; }
}

/* ---- Nodos ---- */
.conste-nodo {
  position: absolute;
  display: flex; align-items: center; gap: 11px;
  width: 244px; max-width: 30%;
  padding: 14px 16px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #fff;
  z-index: 2;
  /* Entra desde el nucleo: la tarjeta llega de donde sale el cable */
  opacity: 0;
  animation: conste-entrar .62s var(--ease) forwards;
  transition: border-color .24s, background .24s, transform .24s var(--ease), box-shadow .24s;
}
.conste-nodo:nth-of-type(1) { animation-delay: .55s; }
.conste-nodo:nth-of-type(2) { animation-delay: .66s; }
.conste-nodo:nth-of-type(3) { animation-delay: .77s; }
.conste-nodo:nth-of-type(4) { animation-delay: .88s; }
.conste-nodo:nth-of-type(5) { animation-delay: .99s; }
.conste-nodo:nth-of-type(6) { animation-delay: 1.10s; }
@keyframes conste-entrar {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.86); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Posiciones: tres a la izquierda, tres a la derecha */
/* Por posicion entre hermanos, no por el atributo style: leer el
   style inline con [style*=...] se rompe en cuanto el JS escribe
   cualquier propiedad en ese mismo atributo y lo reserializa. */
.conste-nodo:nth-of-type(1) { left: 1%;  top: 12%; --dx: 90px;  --dy: 60px; }
.conste-nodo:nth-of-type(2) { right: 1%; top: 12%; --dx: -90px; --dy: 60px; }
.conste-nodo:nth-of-type(3) { left: 0;   top: 50%; margin-top: -30px; --dx: 90px;  --dy: 0; }
.conste-nodo:nth-of-type(4) { right: 0;  top: 50%; margin-top: -30px; --dx: -90px; --dy: 0; }
.conste-nodo:nth-of-type(5) { left: 1%;  bottom: 12%; --dx: 90px;  --dy: -60px; }
.conste-nodo:nth-of-type(6) { right: 1%; bottom: 12%; --dx: -90px; --dy: -60px; }

.conste-n {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .42);
  flex: none;
}
.conste-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  background: rgba(124, 92, 255, .22);
  border: 1px solid rgba(160, 140, 255, .26);
  color: #C9BCFF;
  transition: background .24s, color .24s, transform .24s var(--ease);
}
.conste-ic svg { width: 18px; height: 18px; }
.conste-nodo b {
  font-size: 12.6px; font-weight: 700;
  line-height: 1.3; letter-spacing: .01em;
  min-width: 0;
}

/* El led parpadea con el pulso del cable: el nodo recibe energia */
.conste-led {
  width: 7px; height: 7px; flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: #4EE2CA;
  box-shadow: 0 0 9px rgba(78, 226, 202, .9);
  animation: conste-led 3.2s ease-in-out infinite;
}
.conste-nodo:nth-of-type(1) .conste-led { animation-delay: 0s; }
.conste-nodo:nth-of-type(2) .conste-led { animation-delay: .53s; }
.conste-nodo:nth-of-type(3) .conste-led { animation-delay: 1.06s; }
.conste-nodo:nth-of-type(4) .conste-led { animation-delay: 1.6s; }
.conste-nodo:nth-of-type(5) .conste-led { animation-delay: 2.13s; }
.conste-nodo:nth-of-type(6) .conste-led { animation-delay: 2.66s; }
@keyframes conste-led {
  0%, 74%, 100% { opacity: .3; transform: scale(1); }
  84%           { opacity: 1;  transform: scale(1.5); }
}

.conste-nodo:hover {
  background: rgba(255, 255, 255, .105);
  border-color: rgba(160, 140, 255, .48);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.conste-nodo:hover .conste-ic { background: var(--violet); color: #fff; transform: scale(1.08); }

@media (max-width: 1080px) {
  .conste-nodo { width: 210px; padding: 12px 13px; gap: 9px; }
  .conste-nodo b { font-size: 11.8px; }
}

/* En el telefono la constelacion no cabe: se convierte en lista y los
   nodos entran al hacer scroll, sin desplazamiento lateral. */
@media (max-width: 860px) {
  .conste {
    aspect-ratio: auto; min-height: 0;
    display: grid; gap: 12px;
    padding-top: 172px;
  }
  .conste-cables { display: none; }
  .conste-nucleo {
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 152px; min-width: 0;
  }
  .conste-nodo {
    position: static;
    width: 100%; max-width: 100%;
    margin: 0;
    --dx: 0; --dy: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conste-cable, .conste-nodo { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .conste-anillo, .conste-aura, .conste-halo, .conste-led { animation: none; }
  .conste-pulsos { display: none; }
}

/* =====================================================================
   BOTONES FLOTANTES - WhatsApp y consultor
   ===================================================================== */

.flot {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 80;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px;
}

.flot-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 12px;
  border: 0; border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  color: #fff; cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.flot-btn:hover { transform: translateY(-2px) scale(1.03); }
.flot-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.flot-ic svg { width: 100%; height: 100%; }

/* --- WhatsApp --- */
.flot-wa {
  background: linear-gradient(135deg, #2BD14F, #14A83B);
  box-shadow: 0 10px 26px rgba(20, 168, 59, .40);
}
.flot-wa:hover { box-shadow: 0 14px 32px rgba(20, 168, 59, .52); }

/* El salto se repite cada 9 s: llama la atencion sin volverse un
   parpadeo constante. La onda del boton sale del mismo latido. */
@media (prefers-reduced-motion: no-preference) {
  .flot-wa { animation: flot-salto 9s ease-in-out infinite; }
  .flot-wa::before {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(43, 209, 79, .65);
    animation: flot-onda 9s ease-out infinite;
  }
}
@keyframes flot-salto {
  0%, 82%, 100%   { transform: translateY(0)    rotate(0); }
  85%             { transform: translateY(-11px) rotate(-5deg); }
  88%             { transform: translateY(0)    rotate(4deg); }
  91%             { transform: translateY(-6px) rotate(-3deg); }
  94%             { transform: translateY(0)    rotate(2deg); }
  97%             { transform: translateY(-2px) rotate(0); }
}
@keyframes flot-onda {
  0%, 82%  { transform: scale(1);    opacity: 0; }
  85%      { transform: scale(1);    opacity: .9; }
  100%     { transform: scale(1.38); opacity: 0; }
}
/* Mientras el puntero esta encima el boton se queda quieto: ya tiene
   la atencion, seguir saltando solo estorba al hacer clic. */
.flot-wa:hover { animation-play-state: paused; }
.flot-wa:hover::before { animation-play-state: paused; }

.flot-globo {
  position: absolute; top: -5px; right: -3px;
  display: grid; place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  /* Blanco sobre #FF3B5C daba 3.48:1 y el numero es diminuto (10.5px).
     Este rojo llega a 4.98:1 sin perder el caracter de aviso. */
  background: #D91E43;
  border: 2px solid var(--paper);
  font-size: 11.5px; font-weight: 800; color: #fff;
}

/* --- Consultor --- */
.flot-bot {
  background: linear-gradient(135deg, var(--violet-2), var(--violet));
  box-shadow: 0 10px 26px rgba(81, 57, 245, .38);
}
.flot-bot:hover { box-shadow: 0 14px 32px rgba(81, 57, 245, .5); }
.flot-bot[aria-expanded="true"] { filter: saturate(.75) brightness(.92); }

.bot-ia {
  display: inline-block;
  padding: 2px 6px; margin-left: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .22);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
}

/* --- Ventana del consultor --- */
.bot {
  width: min(340px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(11, 18, 51, .20);
  overflow: hidden;
  transform-origin: bottom right;
  animation: bot-abrir .26s var(--ease);
}
@keyframes bot-abrir {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.bot-top {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 13px;
  background: linear-gradient(135deg, #2A1F86, var(--navy-card));
  color: #fff;
}
.bot-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #C9BCFF;
}
.bot-avatar svg { width: 20px; height: 20px; }
.bot-top b { display: block; font-size: 13.5px; font-weight: 700; }
.bot-top .bot-ia { background: rgba(255, 255, 255, .2); }
.bot-estado {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: 11.5px; color: rgba(210, 206, 245, .8);
}
.bot-estado .dot { width: 6px; height: 6px; background: var(--teal); }
.bot-cerrar {
  margin-left: auto; padding: 6px;
  background: none; border: 0; border-radius: 8px;
  color: rgba(255, 255, 255, .7); cursor: pointer;
  transition: background .18s, color .18s;
}
.bot-cerrar svg { width: 17px; height: 17px; display: block; }
.bot-cerrar:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.bot-cuerpo {
  padding: 16px 14px 6px;
  max-height: min(340px, 44vh);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper-2);
}
.bot-msj {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px; line-height: 1.55;
  animation: bot-msj .3s var(--ease);
}
@keyframes bot-msj { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.bot-msj--bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--ink-2);
}
.bot-msj--yo {
  align-self: flex-end;
  background: var(--violet);
  border-bottom-right-radius: 5px;
  color: #fff;
}
.bot-msj a { color: var(--violet); font-weight: 700; text-decoration: underline; }
.bot-msj--yo a { color: #fff; }
.bot-msj b { color: var(--ink); font-weight: 700; }
.bot-msj--yo b { color: #fff; }

/* Los tres puntos: el consultor esta redactando */
.bot-escribe { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.bot-escribe i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  animation: bot-punto 1.25s ease-in-out infinite;
}
.bot-escribe i:nth-child(2) { animation-delay: .18s; }
.bot-escribe i:nth-child(3) { animation-delay: .36s; }
@keyframes bot-punto {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

.bot-ops {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.bot-op {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line-2);
  font-family: inherit;
  font-size: 12.3px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.bot-op:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-1px); }
.bot-op--cta { background: var(--violet); border-color: var(--violet); color: #fff; }
.bot-op--cta:hover { filter: brightness(1.1); }
.bot-op--wa { background: #14A83B; border-color: #14A83B; color: #fff; }
.bot-op--wa:hover { background: #0F8F31; border-color: #0F8F31; }

.bot-pie {
  padding: 10px 14px;
  background: var(--white);
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-3); text-align: center;
}

/* En pantallas estrechas las etiquetas sobran: solo los iconos */
@media (max-width: 640px) {
  .flot-txt { display: none; }
  .flot-btn { padding: 12px; }
  .flot-ic { width: 25px; height: 25px; }
  .bot { width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .flot-wa, .flot-wa::before, .bot, .bot-msj, .bot-escribe i { animation: none; }
}

@media print { .flot { display: none; } }

/* =====================================================================
   PIE DE PAGINA
   Cuatro columnas de enlaces y, separada, una tarjeta de contacto: el
   pie no es solo un mapa del sitio, es la ultima ocasion de que
   escriban. Los sellos afirman cosas comprobables, no adjetivos.
   ===================================================================== */

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 46px;
  align-items: start;
}

.foot-cols {
  display: grid;
  grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.foot-col h3 {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin-bottom: 15px;
}
.foot-col ul { gap: 9px; }
.foot-col a { font-size: 12.9px; display: inline-block; transition: color .18s, transform .18s var(--ease); }
.foot-col a:hover { transform: translateX(2px); }

.foot-marca .brand { margin-bottom: 14px; }
.foot-tag {
  font-size: 12.8px; line-height: 1.7;
  color: rgba(198, 202, 224, .62);
  max-width: 34ch; margin-bottom: 14px;
}
.foot-mas {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.8px; font-weight: 700;
  color: #9E8BFF;
  transition: gap .18s var(--ease);
}
.foot-mas svg { width: 14px; height: 14px; }
.foot-mas:hover { gap: 11px; color: #B7A6FF; }

/* --- Tarjeta de contacto --- */
.foot-tarjeta {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .038);
  border: 1px solid rgba(255, 255, 255, .10);
}
.foot-tarjeta h3 {
  font-size: 12px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; text-align: center;
  margin-bottom: 18px;
}
.foot-tel, .foot-correo {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #fff;
  transition: background .18s, color .18s;
  word-break: break-word;
}
.foot-tel { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.foot-tel svg { width: 19px; height: 19px; flex: none; color: var(--teal); }
.foot-correo { font-size: 13px; color: rgba(198, 202, 224, .82); }
.foot-correo svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.foot-tel:hover, .foot-correo:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.foot-horario {
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  display: grid; gap: 9px;
}
.foot-horario-tit {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(198, 202, 224, .55);
  text-align: center; margin-bottom: 3px;
}
.foot-horario span {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.3px; line-height: 1.45;
  color: rgba(198, 202, 224, .74);
}
.foot-horario svg { width: 15px; height: 15px; flex: none; color: #9E8BFF; }
.foot-lugar svg { color: var(--teal); }

.foot-cta { width: 100%; justify-content: center; }

.foot-respuesta {
  margin-top: 11px; text-align: center;
  font-size: 11.6px; color: rgba(198,202,224,.55);
}

.foot-redes { margin-top: 20px; }
.foot-redes > span {
  display: block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(198, 202, 224, .55);
}
.foot-redes .social { margin-top: 0; }

/* --- Franjas: tecnologia propia y sectores --- */
.foot-franjas {
  display: grid; grid-template-columns: auto 1fr;
  gap: 20px 54px;
  margin-top: 38px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.foot-franja-tit {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(198, 202, 224, .5);
  margin-bottom: 11px;
}
.foot-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.foot-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  font-size: 12.5px; font-weight: 700; color: #fff;
  transition: background .18s, border-color .18s;
}
a.foot-chip:hover { background: rgba(158, 139, 255, .16); border-color: rgba(158, 139, 255, .42); }
.foot-chip span {
  font-size: 11.5px; font-weight: 600;
  color: rgba(198, 202, 224, .58);
}
.foot-chip-plano { font-weight: 600; color: rgba(210, 213, 235, .78); }

/* --- Sellos --- */
.foot-sellos {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 26px;
}
.foot-sellos span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .10);
  font-size: 12.3px; font-weight: 600;
  color: rgba(210, 213, 235, .8);
}
.foot-sellos svg { width: 16px; height: 16px; flex: none; color: var(--teal); }

.foot-bottom .foot-nota {
  margin: 0; font-size: 11.8px;
  color: rgba(198, 202, 224, .48);
}
.foot-copy { color: rgba(198, 202, 224, .62); }

@media (max-width: 1180px) {
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .foot-marca { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .foot-top { grid-template-columns: 1fr; gap: 34px; }
  .foot-tarjeta { max-width: 420px; }
  .foot-franjas { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .foot-marca { grid-column: 1 / -1; }
  .foot-bottom { flex-wrap: wrap; }
  .foot-tarjeta { max-width: 100%; }
  .foot-sellos span { font-size: 11.8px; padding: 9px 13px; }
}
@media (max-width: 460px) {
  .foot-cols { grid-template-columns: 1fr; }
  .foot-tel { font-size: 17px; }
}

/* =====================================================================
   CATALOGO DE SERVICIOS
   Cuatro familias agrupadas por el problema que resuelven. Cada una
   abre con su numero y su entradilla, y lista sus servicios como filas
   anchas: se leen mas rapido que una rejilla de tarjetas iguales.
   ===================================================================== */

.catalogo { display: grid; gap: 34px; margin-top: 42px; }

.cat-fam {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.cat-cab {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 20px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cat-n {
  font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  /* Decorativo: va con aria-hidden, no es texto que haya que leer */
  color: var(--violet); opacity: .42;
  flex: none;
}
.cat-fam--teal .cat-n { color: var(--green-txt); }
.cat-cab h3 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.cat-cab p { font-size: 13.4px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 62ch; }

.cat-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.cat-item {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border-radius: 13px;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.cat-item:hover {
  background: var(--paper-2);
  border-color: var(--line);
  transform: translateX(3px);
}

.cat-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: var(--violet-wash);
  color: var(--violet);
  transition: background .2s, color .2s;
}
.cat-ic svg { width: 20px; height: 20px; }
.cat-fam--teal .cat-ic { background: #DCF6EF; color: var(--green-txt); }
.cat-item:hover .cat-ic { background: var(--violet); color: #fff; }
.cat-fam--teal .cat-item:hover .cat-ic { background: var(--green); color: #fff; }

.cat-txt { min-width: 0; }
.cat-txt b {
  display: block;
  font-size: 14.2px; font-weight: 700;
  color: var(--ink); margin-bottom: 3px;
}
.cat-txt > span {
  display: block;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
}

/* La etiqueta marca lo nuevo o el precio de entrada sin gritar */
.cat-tag {
  display: inline-block;
  margin-left: 8px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--violet);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .03em; color: #fff;
  vertical-align: 1px;
}
.cat-fam--teal .cat-tag { background: var(--green-btn); }

.cat-go {
  width: 17px; height: 17px; flex: none;
  margin-left: auto;
  color: var(--ink-3); opacity: 0;
  transition: opacity .2s, transform .2s var(--ease), color .2s;
}
.cat-item:hover .cat-go { opacity: 1; transform: translateX(3px); color: var(--violet); }
.cat-fam--teal .cat-item:hover .cat-go { color: var(--green-txt); }

@media (max-width: 860px) {
  .cat-items { grid-template-columns: 1fr; }
  .cat-fam { padding: 20px; }
  .cat-cab h3 { font-size: 18.5px; }
  /* En pantalla tactil no hay puntero: la flecha se muestra siempre */
  .cat-go { opacity: .5; }
}

/* En monitores anchos el contenido tiene mas sitio: los textos largos
   y las rejillas se ajustan para que el espacio ganado se note. */
@media (min-width: 1500px) {
  .head-center { max-width: 820px; }
  .head-center .lead { max-width: 68ch; }
  .cat-items { gap: 12px; }
  .foot-cols { gap: 38px; }
}

/* =====================================================================
   FORMULARIO CORTO DEL CIERRE
   Va sobre banda oscura: los campos son translucidos en vez de
   blancos, porque un rectangulo blanco sobre fondo marino pesa
   demasiado y roba la atencion al titular.
   ===================================================================== */

.close-form { margin-top: 24px; max-width: 460px; }
.close-campos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.close-form .field { margin-bottom: 10px; min-width: 0; }

.close-form input,
.close-form textarea,
.close-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: inherit; font-size: 13.6px;
  transition: border-color .18s, background .18s;
}
.close-form textarea { resize: vertical; min-height: 54px; }
.close-form input::placeholder,
.close-form textarea::placeholder { color: rgba(210,213,240,.55); }
.close-form select {
  /* La flecha propia del sistema no se ve sobre fondo oscuro */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2D5F0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 36px;
  cursor: pointer;
}
.close-form select option { background: var(--navy-card); color: #fff; }
.close-form select:invalid, .close-form select option[value=""] { color: rgba(210,213,240,.55); }

.close-form input:focus,
.close-form textarea:focus,
.close-form select:focus {
  outline: none;
  border-color: rgba(160,140,255,.6);
  background: rgba(255,255,255,.11);
}
/* El campo que falta se marca al intentar enviar, no mientras escribe */
.close-form .field.is-invalid input,
.close-form .field.is-invalid textarea,
.close-form .field.is-invalid select { border-color: #FF8FA3; }

.close-enviar { margin-top: 4px; }
.close-alt {
  margin-top: 12px;
  font-size: 12.4px;
  color: rgba(210,213,240,.66);
}
.close-alt a { color: #A896FF; font-weight: 600; border-bottom: 1px solid rgba(168,150,255,.35); }
.close-alt a:hover { border-bottom-color: #A896FF; }

.close-ok {
  margin-top: 14px; padding: 11px 14px;
  border-radius: 11px;
  background: rgba(78,226,202,.13);
  border: 1px solid rgba(78,226,202,.32);
  font-size: 13px; font-weight: 600;
  color: #7DEBD5;
}

@media (max-width: 560px) {
  .close-campos { grid-template-columns: 1fr; }
  .close-form { max-width: 100%; }
}

/* =====================================================================
   ENTREGABLES
   Listas concretas de lo que recibe quien contrata. Se leen en
   diagonal, asi que cada bloque abre con su icono y su titulo y los
   puntos van cortos.
   ===================================================================== */

.entregas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.entrega {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.entrega:hover {
  border-color: var(--line-2);
  box-shadow: 0 14px 34px rgba(11,18,51,.06);
  transform: translateY(-2px);
}

.entrega header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.entrega-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: var(--violet-wash);
  color: var(--violet);
}
.entrega-ic svg { width: 20px; height: 20px; }
.entrega h3 { font-size: 15.5px; line-height: 1.25; margin: 0; }

.entrega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.entrega li {
  position: relative;
  padding-left: 20px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-3);
}
/* El punto se dibuja en CSS: un icono menos que cargar por viñeta */
.entrega li::before {
  content: ""; position: absolute;
  left: 2px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
  opacity: .55;
}
.entrega li b { color: var(--ink); font-weight: 700; }

/* Lo que NO esta incluido: se dice, no se esconde */
.entrega-fuera {
  margin-top: 20px; padding: 20px 22px;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.entrega-fuera p {
  margin: 0; max-width: 88ch;
  font-size: 13px; line-height: 1.7;
  color: var(--ink-3);
}
.entrega-fuera b { color: var(--ink); font-weight: 700; }

@media (max-width: 560px) {
  .entregas { grid-template-columns: 1fr; }
  .entrega { padding: 20px 18px; }
}

/* =====================================================================
   CASOS DE CLIENTE
   Los genera tools/gen_casos.py desde tools/casos.json. Cada tarjeta
   abre con el negocio y cierra con el enlace a la tienda real: lo que
   convence no es la cita, es poder ir a verla.
   ===================================================================== */

.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.caso {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.caso:hover {
  border-color: var(--line-2);
  box-shadow: 0 16px 38px rgba(11,18,51,.07);
  transform: translateY(-3px);
}

.caso-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.caso-top h3 { font-size: 17px; line-height: 1.25; margin: 0 0 3px; }
.caso-rubro { font-size: 12.3px; color: var(--ink-3); }
.caso-plan {
  flex: none;
  padding: 5px 11px; border-radius: 999px;
  background: var(--violet-wash); color: var(--violet);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* La cifra es lo que se recuerda: va grande y sola */
.caso-dato {
  font-size: 19px; font-weight: 800;
  line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 14px;
}
.caso-detalle { font-size: 13px; line-height: 1.6; color: var(--ink-3); margin: 0 0 14px; }

.caso-cita {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--violet-2);
  border-radius: 0 10px 10px 0;
}
.caso-cita p {
  margin: 0 0 8px;
  font-size: 13.2px; line-height: 1.6;
  font-style: italic; color: var(--ink-2);
}
.caso-cita cite {
  font-style: normal; font-size: 12px;
  font-weight: 700; color: var(--ink-3);
}

.caso-ver {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.2px; font-weight: 700;
  color: var(--violet);
  transition: gap .18s var(--ease);
}
.caso-ver svg { width: 15px; height: 15px; flex: none; }
.caso-ver:hover { gap: 11px; }

@media (max-width: 560px) {
  .casos { grid-template-columns: 1fr; }
  .caso-dato { font-size: 17.5px; }
}

/* =====================================================================
   PROGRAMA DE LANZAMIENTO
   Lo que se muestra mientras no hay casos reales. Se retira solo en
   cuanto casos.json tenga tiendas publicadas.
   ===================================================================== */

.primeros {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 48px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, #F4F1FE 0%, var(--white) 58%);
  border: 1px solid var(--violet-2);
}
.primeros h2 { margin: 12px 0 14px; font-size: clamp(23px, 2.5vw, 32px); }
.primeros .lead { margin-bottom: 16px; max-width: 54ch; }

.primeros-trato {
  padding: 15px 17px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13.6px; line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.primeros-trato b { color: var(--violet); font-weight: 700; }

.primeros-lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.primeros-lista li {
  position: relative; padding-left: 26px;
  font-size: 13.2px; line-height: 1.5; color: var(--ink-3);
}
/* La marca de verificacion en CSS: un icono menos por punto */
.primeros-lista li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--violet); opacity: .9;
}
.primeros-lista li::after {
  content: ""; position: absolute; left: 5px; top: 6px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.primeros-lista b { color: var(--ink); font-weight: 700; }

.primeros-nota {
  display: flex; gap: 13px;
  padding: 20px;
  border-radius: 14px;
  background: var(--navy-card);
  color: rgba(214, 216, 240, .82);
}
.primeros-nota svg { width: 22px; height: 22px; flex: none; color: var(--teal); }
.primeros-nota p { margin: 0; font-size: 12.8px; line-height: 1.65; }
.primeros-nota b { color: #fff; font-weight: 700; }

@media (max-width: 880px) {
  .primeros { grid-template-columns: 1fr; }
}

/* =====================================================================
   DIAGNOSTICO GRATUITO
   Resuelve la falta de casos sin inventar ninguno: en vez de pedir
   confianza, ofrece una prueba. La ficha de la derecha lista lo que
   el visitante se lleva, que es lo que decide si agenda o no.
   ===================================================================== */

.diag {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 46px);
  align-items: start;
}

.diag h2 { margin: 13px 0 14px; font-size: clamp(24px, 2.7vw, 34px); }
.diag .lead { margin-bottom: 28px; max-width: 54ch; }

.diag-pasos { display: grid; gap: 18px; margin-bottom: 28px; }
.diag-pasos > div { display: flex; gap: 14px; align-items: flex-start; }
.diag-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 13.5px; font-weight: 800;
}
.diag-pasos b {
  display: block;
  font-size: 14.5px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px;
}
.diag-pasos span:not(.diag-n) {
  display: block;
  font-size: 13.2px; line-height: 1.6;
  color: var(--ink-3);
  max-width: 56ch;
}

/* Ficha de lo que se lleva: es la respuesta a «¿y a mi que me toca?» */
.diag-ficha {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 38px rgba(11,18,51,.05);
}
.diag-ficha h3 {
  font-size: 15.5px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.diag-ficha ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.diag-ficha li {
  position: relative; padding-left: 26px;
  font-size: 13.2px; line-height: 1.55;
  color: var(--ink-3);
}
/* Marca de verificacion en CSS: un icono menos por punto */
.diag-ficha li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--green-txt);
}
.diag-ficha li::after {
  content: ""; position: absolute; left: 5px; top: 6px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.diag-ficha b { color: var(--ink); font-weight: 700; }

.diag-nota {
  display: flex; gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.diag-nota svg { width: 18px; height: 18px; flex: none; color: var(--violet); margin-top: 1px; }
.diag-nota p { margin: 0; font-size: 12.4px; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 900px) {
  .diag { grid-template-columns: 1fr; }
}

/* =====================================================================
   PERFIL DEL FUNDADOR
   Lo genera tools/gen_equipo.py. La ficha se queda fija al desplazar
   -la cara acompana mientras se leen los proyectos- y el enlace a
   LinkedIn es lo que convierte la afirmacion en algo comprobable.
   ===================================================================== */

.fundador {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-top: 40px;
}

.fund-ficha {
  position: sticky; top: calc(var(--nav-h) + 20px);
  padding: 26px 22px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 38px rgba(11,18,51,.05);
}
.fund-foto { margin-bottom: 16px; }
.fund-foto img {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--violet-wash);
}
/* Sin foto, las iniciales: mejor eso que un avatar generico */
.fund-ini {
  display: inline-grid; place-items: center;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--violet-2), var(--violet));
  color: #fff;
  font-size: 36px; font-weight: 800; letter-spacing: .02em;
}
.fund-ficha h3 { font-size: 19px; margin: 0 0 4px; }
.fund-cargo { display: block; font-size: 13px; color: var(--ink-3); }
.fund-anios {
  display: inline-block; margin-top: 12px;
  padding: 5px 13px; border-radius: 999px;
  background: var(--violet-wash); color: var(--violet);
  font-size: 12px; font-weight: 700;
}
.fund-resumen {
  margin: 16px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.65;
  color: var(--ink-3); text-align: left;
}
.fund-in {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; padding: 11px 14px;
  border-radius: 11px;
  background: #0A66C2; color: #fff;
  font-size: 13px; font-weight: 700;
  transition: filter .18s, transform .18s var(--ease);
}
.fund-in svg { width: 16px; height: 16px; flex: none; }
.fund-in:hover { filter: brightness(1.1); transform: translateY(-1px); }

.fund-tit {
  font-size: 15px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.fund-proys { list-style: none; padding: 0; margin: 0; }
.fund-proys li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.fund-proys li:last-child { border-bottom: 0; }

.fund-donde {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.fund-donde b { font-size: 16px; font-weight: 700; color: var(--ink); }
.fund-sector {
  padding: 3px 10px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
.fund-cuando { font-size: 12px; color: var(--ink-3); }
.fund-proys p {
  margin: 0 0 8px;
  font-size: 13.8px; line-height: 1.6;
  color: var(--ink-2); max-width: 64ch;
}
.fund-rol {
  display: inline-block;
  font-size: 12.3px; font-weight: 700;
  color: var(--violet);
}

@media (max-width: 860px) {
  .fundador { grid-template-columns: 1fr; }
  .fund-ficha { position: static; max-width: 340px; margin: 0 auto; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1080px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stage { aspect-ratio: 16/12; }
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  :root { --gut: 18px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .g-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .btn-row .btn { flex: 1 1 100%; }
  .nav-cta { display: none; }
}

/* =====================================================================
   PORTADA — componentes propios
   ===================================================================== */

/* ---- Banda de soluciones (oscura) ---- */
.solutions { padding: clamp(44px, 5vw, 62px) clamp(24px, 4vw, 46px); }
.solutions::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 300px at 88% -10%, rgba(81,57,245,.28), transparent 62%),
    radial-gradient(520px 260px at 4% 108%, rgba(78,226,202,.10), transparent 64%);
  pointer-events: none;
}
.solutions > * { position: relative; }
.solutions .eyebrow { margin-bottom: 26px; }

/* ---- Productos ---- */
.prod {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 26px;
  display: grid;
  gap: 20px;
  transition: box-shadow .24s, border-color .24s;
}
.prod:hover { box-shadow: 0 18px 46px rgba(11,18,51,.08); border-color: var(--line-2); }
.prod-head { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 34px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.wordmark--bixo { color: var(--violet); }
.wordmark--arin { color: var(--green-txt); }
.badge-round {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet-wash); color: var(--violet);
}
.badge-round svg { width: 16px; height: 16px; }
.badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(16,178,141,.1); border: 1px solid rgba(16,178,141,.3);
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-txt);
}
.prod h3 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 10px; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.prod-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--ink-2);
}
.prod-tag svg { width: 12px; height: 12px; color: var(--violet); }
.by {
  display: flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 11.5px; color: var(--ink-3);
}
.by img { width: 15px; height: 15px; border-radius: 3px; }
.by b { color: var(--ink); font-weight: 700; }

/* Maqueta de interfaz dentro de la tarjeta de producto */
.ui {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  font-size: 11px;
}
.ui-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.ui-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.ui-bar span {
  flex: 1; margin-left: 6px; padding: 4px 9px;
  background: var(--white); border: 1px solid var(--line); border-radius: 5px;
  font-size: 9.5px; color: var(--ink-3);
}
.ui-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px; background: var(--white);
  border: 1px solid var(--line); border-radius: 7px;
}
.ui-row + .ui-row { margin-top: 7px; }
.ui-thumb { width: 34px; height: 34px; border-radius: 5px; background: var(--paper-2); flex: none; }
.ui-row b { display: block; font-size: 11px; font-weight: 700; color: var(--ink); }
.ui-row em { font-style: normal; font-size: 10px; color: var(--ink-3); }
.ui-chip {
  margin-left: auto; padding: 3px 8px; border-radius: 5px;
  background: var(--violet-wash); color: var(--violet);
  font-size: 9px; font-weight: 700;
}

/* Burbujas de conversación (ARIN) */
.bub {
  padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.45;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
}
.bub + .bub { margin-top: 8px; }
.bub--me { background: var(--violet-wash); border-color: rgba(81,57,245,.18); color: var(--ink); }
.ui-ask {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  padding: 8px 11px; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--ink-3);
}
.ui-ask span { flex: 1; }
.ui-ask i {
  width: 20px; height: 20px; border-radius: 50%; background: var(--green);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.ui-ask svg { width: 10px; height: 10px; }

/* ---- Proceso con arco conectado ---- */
.flow { position: relative; }
.flow-arc { position: absolute; top: 26px; left: 0; width: 100%; height: 66px; pointer-events: none; }
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; position: relative; }
.flow-step { text-align: left; }
.flow-step h4 { margin: 14px 0 7px; }
.flow-step p { font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ---- Cierre oscuro con cintas de luz ---- */
.close {
  position: relative; overflow: hidden;
  background: var(--navy-cta);
  border-radius: var(--r-xl);
  padding: clamp(44px, 5vw, 66px) clamp(24px, 4vw, 50px);
  color: var(--ink-light);
}
.close svg.ribbons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.close-in { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: center; }
.close h2 { color: #fff; margin-bottom: 14px; }
.close p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.66); max-width: 42ch; margin-bottom: 24px; }
.close-note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.8);
}
.close-note svg { width: 22px; height: 22px; flex: none; color: var(--teal); opacity: .9; }

@media (max-width: 900px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .flow-arc { display: none; }
  .close-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flow-steps { grid-template-columns: 1fr; }
  .prod { padding: 20px; }
  .wordmark { font-size: 28px; }
}

/* =====================================================================
   AJUSTES CONTRA LA MAQUETA
   ===================================================================== */

/* El icono dentro del rótulo de la ficha heredaba el tamaño del contenedor */
.chip-card b svg { width: 15px; height: 15px; flex: none; }
.chip-card { max-width: 176px; padding: 12px 14px; }

/* En la maqueta los dos botones del hero van en la misma línea */
.hero .btn { padding: 13px 17px; font-size: 13px; }
.hero .btn-row { flex-wrap: nowrap; }

/* Órbita más presente, como en la referencia */
.stage { aspect-ratio: 16 / 10.5; }


/* Tarjetas de logo con más aire y logo más grande, como en la maqueta */
.logo-card { padding: 26px 16px 18px; gap: 18px; }
.logo-card img { height: 34px; }

/* Tarjetas oscuras algo más altas */
.dcard { padding: 26px; min-height: 224px; }
.dcard h3 { font-size: 20px; }
.solutions .grid { gap: 16px; }

/* Producto a dos columnas: texto a la izquierda, maqueta a la derecha */
.prod { grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); align-items: start; row-gap: 22px; }
.prod > div:first-child { grid-column: 1; }
.prod .ui { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
.prod > .btn { grid-column: 1; align-self: end; }

/* Proceso: el arco arranca y termina sobre los iconos */
.flow-arc { top: 24px; height: 58px; }
.ic-round { width: 54px; height: 54px; box-shadow: 0 3px 12px rgba(11,18,51,.05); }

/* Cierre: la nota flota a la derecha como en la maqueta */
.close-in { grid-template-columns: 1.2fr .8fr; gap: 40px; }
.close h2 { font-size: clamp(26px, 3vw, 36px); }

@media (max-width: 1000px) {
  .prod { grid-template-columns: 1fr; }
  .prod .ui { grid-column: 1; grid-row: auto; }
  .prod > .btn { grid-column: 1; }
}
@media (max-width: 560px) {
  .hero .btn-row { flex-wrap: wrap; }
  .hero .btn { flex: 1 1 100%; }
}

/* Órbita: giro lento y estelas con respiración */


/* Arco del proceso, más marcado */
.flow-arc path { stroke: #BDB6F2; stroke-width: 1.6; }

/* Lienzo WebGL del hero; sustituye a la órbita SVG cuando arranca */
.stage.has-gl .orbit .rings,
.stage.has-gl .orbit .trails,

/* =====================================================================
   SERVICIOS
   ===================================================================== */

/* Tarjeta de capacidad: icono circular tintado, título a dos líneas */
.svc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  display: flex; flex-direction: column;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(11,18,51,.08); border-color: var(--line-2); }
.svc .ic-round { margin: 0 auto 16px; }
.svc h3 { font-size: 17.5px; margin-bottom: 10px; }
.svc p { font-size: 12.8px; line-height: 1.58; color: var(--ink-3); }
.svc .go { margin-top: auto; padding-top: 18px; justify-content: center; font-size: 12.5px; }

.ic-round--violet { background: #F1EEFE; border-color: #E2DCFB; color: var(--violet); }
.ic-round--teal   { background: #E9FBF6; border-color: #D3F4EA; color: var(--green-txt); }

/* Tarjeta partida: dos públicos unidos por un nodo central */
.duo {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 42px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
}
.duo-side h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.duo-side > p { font-size: 13px; line-height: 1.6; color: var(--ink-3); margin-bottom: 18px; }
.duo-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.duo-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.2px; color: var(--ink-2); }
.duo-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.duo-node {
  width: 92px; height: 92px; border-radius: 50%;
  background: #0B1030;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(81,57,245,.07), 0 0 0 26px rgba(81,57,245,.035);
  position: relative;
}
.duo-node img { width: 34px; height: 34px; border-radius: 7px; }
.duo-node::before, .duo-node::after {
  content: ""; position: absolute; top: 50%; width: clamp(18px, 3vw, 44px); height: 1px;
  background: repeating-linear-gradient(90deg, #CFCAF3 0 4px, transparent 4px 9px);
}
.duo-node::before { right: 100%; margin-right: 14px; }
.duo-node::after  { left: 100%;  margin-left: 14px; }

/* Proceso numerado con conectores */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.step { position: relative; }
.step-top { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.step-num { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--violet); }
.step h4 { margin-bottom: 7px; }
.step p { font-size: 12.8px; line-height: 1.58; color: var(--ink-3); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; left: calc(100% - 30px); width: 34px; height: 1px;
  background: repeating-linear-gradient(90deg, #CFCAF3 0 4px, transparent 4px 9px);
}

@media (max-width: 1080px) { .grid.g-6.svc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo-node { margin: 0 auto; }
  .duo-node::before, .duo-node::after { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
  .step::after { display: none; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* El pie pasó a seis columnas al añadir "Conversemos" */
.foot-grid { grid-template-columns: 1.35fr repeat(5, minmax(0,1fr)); gap: 26px; }
.foot .social { margin-top: 14px; }
@media (max-width: 1180px) { .foot-grid { grid-template-columns: 1.3fr repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Cierre: la nota y su botón forman una sola tarjeta */
.close-panel {
  padding: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
}
.close-panel .close-note { padding: 0; background: none; border: 0; backdrop-filter: none; margin-bottom: 16px; }
.close-panel .btn { width: 100%; }

/* =====================================================================
   PRODUCTOS
   ===================================================================== */

/* Cabecera de página sin panel oscuro */
.phead { padding: clamp(40px, 5vw, 68px) 0 clamp(28px, 3vw, 44px); position: relative; overflow: hidden; }
.phead h1 { margin: 16px 0 16px; max-width: 17ch; }
.phead .lead { max-width: 52ch; }
.phead-rule { width: 62px; height: 3px; background: var(--violet); border-radius: 2px; margin-top: 26px; }

/* Bloque de producto */
.pblock { border-radius: var(--r-xl); padding: clamp(26px, 3.4vw, 46px); }
.pblock--light { background: var(--paper-2); border: 1px solid var(--line); }
.pblock--dark  { background: var(--navy-band); color: var(--ink-light); position: relative; overflow: hidden; }
.pblock--dark h2, .pblock--dark h3, .pblock--dark h4 { color: #fff; }
.pblock--dark::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 76% 10%, rgba(78,226,202,.16), transparent 64%),
              radial-gradient(560px 300px at 8% 96%, rgba(81,57,245,.20), transparent 66%);
  pointer-events: none;
}
.pblock--dark > * { position: relative; }
.pgrid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(24px, 3.4vw, 46px); align-items: start; }
.pblock h2 { font-size: clamp(23px, 2.5vw, 31px); margin: 14px 0 14px; }
.pblock .pgrid > div > p { font-size: 13.8px; line-height: 1.65; color: var(--ink-3); max-width: 44ch; }
.pblock--dark .pgrid > div > p { color: rgba(255,255,255,.66); }

/* Rejilla de prestaciones */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.feat {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.feat > svg { width: 17px; height: 17px; flex: none; color: var(--violet); margin-top: 2px; }
.feat b { display: block; font-size: 12.8px; font-weight: 700; color: var(--ink); }
.feat span { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

/* Prestaciones sobre oscuro: en fila y sin caja */
.feats--bare { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.feats--bare .feat { flex-direction: column; gap: 9px; background: none; border: 0; padding: 0; }
.feats--bare .feat .ic { margin: 0; width: 38px; height: 38px; }
.feats--bare .feat b { color: #fff; font-size: 12.4px; line-height: 1.4; }

/* Cadena: tu negocio → producto → clientes */
.chain { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.chain-node { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.chain-node .ic-round { width: 44px; height: 44px; }
.chain-node span { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.chain-node--on .ic-round { background: var(--violet); border-color: var(--violet); color: #fff; }
.chain-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #CFCAF3 0 4px, transparent 4px 9px); margin-bottom: 22px; }

/* Maqueta de aplicación */
.app {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 18px 48px rgba(11,18,51,.10);
}
.app-top { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.app-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.app-top b { margin-left: 8px; font-size: 12px; font-weight: 800; color: var(--violet); letter-spacing: -.03em; }
.app-body { display: grid; grid-template-columns: 118px minmax(0,1fr); }
.app-side { border-right: 1px solid var(--line); padding: 10px 8px; display: grid; gap: 2px; align-content: start; }
.app-side span {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 5px;
  font-size: 10.5px; color: var(--ink-3);
}
.app-side .on { background: var(--violet-wash); color: var(--violet); font-weight: 700; }
.app-side svg { width: 12px; height: 12px; flex: none; }
.app-main { padding: 12px; }
.app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.app-head b { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.app-head em { font-style: normal; padding: 4px 9px; background: var(--violet); color: #fff; border-radius: 5px; font-size: 9.5px; font-weight: 700; }
.app-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
.app-tabs span { padding-bottom: 7px; font-size: 10px; color: var(--ink-3); }
.app-tabs .on { color: var(--violet); font-weight: 700; box-shadow: inset 0 -2px 0 var(--violet); }
.app-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--paper-2); }
.app-row u { text-decoration: none; font-size: 9.5px; color: var(--ink-3); width: 64px; flex: none; }
.app-row .th { width: 26px; height: 26px; border-radius: 5px; background: var(--paper-2); flex: none; }
.app-row b { flex: 1; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.app-row em { font-style: normal; padding: 3px 8px; border-radius: 4px; font-size: 8.5px; font-weight: 700; background: var(--violet-wash); color: var(--violet); }
.app-row em.ok { background: #E4F7F0; color: var(--green-txt); }

/* Panel de conversación de ARIN */
.chat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 14px; }
.chat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chat-top b { font-size: 13px; font-weight: 800; color: var(--teal); letter-spacing: -.02em; }
.dbub { padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); }
.dbub + .dbub { margin-top: 8px; }
.dbub--me { background: rgba(78,226,202,.14); color: #D8FFF6; }
.bars { margin-top: 14px; display: grid; gap: 7px; }
.bar { display: flex; align-items: center; gap: 9px; font-size: 10px; color: rgba(255,255,255,.6); }
.bar u { text-decoration: none; width: 82px; flex: none; }
.bar i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar i::after { content: ""; display: block; height: 100%; width: var(--w, 60%); background: linear-gradient(90deg, #4EE2CA, #7C5CFF); border-radius: 3px; }

/* Fuentes conectadas */
.src { display: grid; gap: 8px; }
.src-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); }
.src-item svg { width: 16px; height: 16px; color: var(--teal); flex: none; }
.src-item b { display: block; font-size: 11.5px; font-weight: 700; color: #fff; }
.src-item span { font-size: 10px; color: rgba(255,255,255,.55); }

/* Comparativa con nodo central */
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.cmp-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.cmp-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cmp-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.6px; color: var(--ink-2); }
.cmp-card li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cmp-plus {
  width: 40px; height: 40px; border-radius: 50%; background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
  box-shadow: 0 0 0 8px rgba(81,57,245,.09);
}

@media (max-width: 1000px) {
  .pgrid { grid-template-columns: 1fr; }
  .feats--bare { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cmp { grid-template-columns: 1fr; }
  .cmp-plus { margin: 0 auto; }
}
@media (max-width: 600px) {
  .feats { grid-template-columns: 1fr; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .chain-node span { font-size: 8.5px; }
}

/* La maqueta de la aplicación se centra respecto a la columna de texto */
#bixo .pgrid { align-items: center; }

/* El botón del cierre no debe ocupar todo el ancho de su columna */
.close-in > div > .btn { width: auto; }
.close-in > div:last-child { justify-self: start; }

/* =====================================================================
   COMPAÑÍA
   ===================================================================== */

/* Hero a página completa sobre oscuro */
.dhero {
  background: var(--navy-deep);
  color: var(--ink-light);
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 6vw, 84px) 0;
}
.dhero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 380px at 74% 24%, rgba(81,57,245,.30), transparent 64%),
              radial-gradient(560px 300px at 96% 84%, rgba(78,226,202,.14), transparent 66%);
  pointer-events: none;
}
.dhero > * { position: relative; }
.dhero h1 { color: #fff; margin: 20px 0 20px; }
.dhero p { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.7); max-width: 44ch; margin-bottom: 26px; }

/* Diagrama de tres nodos alrededor de la marca */
.tri { position: relative; aspect-ratio: 1 / .82; }
.tri > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tri-node { position: absolute; display: flex; align-items: flex-start; gap: 11px; max-width: 200px; }
.tri-node .ic-round {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  color: var(--teal); flex: none; width: 46px; height: 46px;
}
.tri-node b { display: block; font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.tri-node span { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.6); }
.tri-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%;
  background: #0B1030; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px rgba(124,92,255,.10), 0 0 46px rgba(124,92,255,.5);
}
.tri-core img { width: 32px; height: 32px; border-radius: 7px; }

/* Tarjeta de principio con flecha */
.prin { display: flex; flex-direction: column; }
.prin .ic-round { margin-bottom: 16px; }
.prin h3 { font-size: 17px; margin-bottom: 9px; }
.prin p { font-size: 12.8px; line-height: 1.58; color: var(--ink-3); }
.prin .go { margin-top: auto; padding-top: 18px; }

/* Franja de logos agrupada por sector (maqueta de detalle) */
.sector-band { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 44px; }
.sector-title {
  text-align: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--violet-3);
  margin-bottom: 26px;
}
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sector {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px;
}
.sector-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sector-head svg { width: 20px; height: 20px; flex: none; }
.sector-head b { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.sector-head i { flex: 1; height: 1px; background: var(--line-2); }
.sector-head u { text-decoration: none; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sector-logos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.sector-logos.one { grid-template-columns: 1fr; }
.sector-logos > div {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  min-height: 74px; display: flex; align-items: center; justify-content: center; padding: 12px;
  transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s;
}
.sector-logos > div:hover {
  transform: translateY(-3px);
  border-color: rgba(81, 57, 245, .3);
  box-shadow: 0 12px 26px rgba(11, 18, 51, .09);
}
/* Los logos llegan con fuerzas muy distintas -unos a todo color, otros
   lavados-, asi que la rejilla se leia irregular. En gris se lee pareja,
   y el color vuelve donde estas mirando. */
.sector-logos img {
  max-height: 32px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .58;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.sector-logos > div:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* Tarjetas oscuras de navegación interna */
.navcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.navcard {
  background: var(--navy-card); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .22s;
}
.navcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
.navcard h3 { color: #fff; margin: 16px 0 9px; font-size: 19px; }
.navcard p { font-size: 12.8px; line-height: 1.58; color: rgba(255,255,255,.6); }
.navcard .go { color: #fff; margin-top: auto; padding-top: 20px; justify-content: space-between; }
.navcard .go i { flex: 1; height: 1px; background: rgba(255,255,255,.2); margin: 0 12px; }

/* Canales de contacto */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.way {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; display: flex; gap: 12px; align-items: flex-start;
}
.way .ic-round { width: 42px; height: 42px; flex: none; }
.way b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.way span { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.way--on { background: #0B1233; border-color: #0B1233; }
.way--on b { color: #fff; }
.way--on span { color: rgba(255,255,255,.6); }
.way--on .ic-round { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--teal); }
.way--on .go { color: #fff; }

@media (max-width: 1000px) {
  .sectors { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .navcards { grid-template-columns: 1fr; }
  .ways { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tri { aspect-ratio: 1 / 1; margin-top: 26px; }
}
@media (max-width: 640px) {
  .sectors { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .tri-node { position: static; max-width: none; margin-bottom: 14px; }
  .tri { aspect-ratio: auto; }
  .tri svg, .tri-core { display: none; }
}

/* Los tres nodos se centran sobre el extremo de su línea, en columna */
.tri-node { transform: translate(-50%, -50%); width: 168px; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: none; }
.tri-node > span:last-child { display: block; }
@media (max-width: 640px) { .tri-node { transform: none; width: auto; flex-direction: row; text-align: left; } }

/* =====================================================================
   ACORDEÓN (preguntas)
   ===================================================================== */

.acc { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.acc-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.acc-item[open] { border-color: var(--line-2); box-shadow: 0 8px 26px rgba(11,18,51,.06); }

.acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 17px 20px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.012em; text-align: left; cursor: pointer;
  list-style: none;
}
/* La pregunta es un h3 para que Google pueda usarla en un fragmento
   destacado, pero hereda todo del summary: no cambia nada a la vista. */
.acc-h {
  margin: 0; flex: 1; min-width: 0;
  font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit;
  color: inherit;
}

.acc-q::-webkit-details-marker { display: none; }
.acc-q:hover { color: var(--violet); }
.acc-q svg {
  width: 17px; height: 17px; flex: none; color: var(--violet);
  transition: transform .24s var(--ease);
}
.acc-item[open] .acc-q svg { transform: rotate(45deg); }

.acc-a { padding: 0 20px 19px; font-size: 13.6px; line-height: 1.68; color: var(--ink-3); max-width: 66ch; }

/* Bloque de página interior: cabecera compacta con miga */
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-3); }
.crumbs a:hover { color: var(--violet); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

/* Celda simple dentro de una rejilla */
.cell { padding: 20px; }
.cell h4 { margin-bottom: 8px; }
.cell p { font-size: 12.9px; line-height: 1.6; color: var(--ink-3); }

/* Ficha de datos del servicio */
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 18px; background: var(--white); }
.fact span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fact b { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.facts-note { padding: 13px 18px; background: var(--paper-2); font-size: 11.8px; line-height: 1.55; color: var(--ink-3); }

/* =====================================================================
   FORMULARIO
   ===================================================================== */

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field .label { margin-bottom: 0; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #A8AEC0; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(81,57,245,.12);
}
.field-hint { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* Estado inválido. El :not(:focus) evita que anule el foco violeta. */
.field-error { display: none; font-size: 11.5px; color: #B3261E; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input:not(:focus),
.field.is-invalid textarea:not(:focus) { border-color: #B3261E; }

/* Selección de materia */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
.chip:hover { border-color: var(--violet); color: var(--violet); }
.chip.is-active {
  background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 600;
}

.footnote { font-size: 11.5px; line-height: 1.6; color: var(--ink-3); max-width: 62ch; }

/* =====================================================================
   TARJETAS DE NOTA
   ===================================================================== */

/* La nota aun no esta escrita, pero el tema si tiene donde seguir:
   el enlace lleva al servicio del que trata. Antes era una etiqueta
   muerta que dejaba al visitante sin camino. */
.note-link {
  /* Una sola fila obligaba al nombre del servicio a partirse en tres
     lineas antes de que la insignia cediera. Ahora la insignia baja. */
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; row-gap: 7px;
  margin: 16px 20px 20px 20px;
  align-self: flex-start;
  font-size: 12.4px; font-weight: 700;
  color: var(--violet);
  transition: gap .18s var(--ease);
}
.note-link svg { width: 14px; height: 14px; flex: none; order: 0; }
/* Nombre y flecha en una fila; la insignia toma la suya entera. */
.note-link span { order: 1; flex-basis: 100%; max-width: max-content; }
.note-link span {
  padding: 3px 8px;
  border: 1px dashed var(--line-2);
  border-radius: 5px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  /* Entera o en su propia fila: partida dentro de la pildora se lee peor. */
  white-space: nowrap;
  color: var(--ink-3);
}
.note-link:hover { gap: 11px; color: var(--violet-2); }

/* La nota de cierre del listado */
.blog-nota {
  max-width: 62ch; margin: 26px auto 0;
  text-align: center;
  font-size: 13px; line-height: 1.65;
  color: var(--ink-3);
}
.blog-nota a { color: var(--violet); font-weight: 600; }
.blog-nota a:hover { text-decoration: underline; }

/* Ilustración de cada nota. El degradado queda de fondo mientras carga
   la imagen; la imagen cubre el hueco sin deformarse. */
.note-art {
  display: block; height: 132px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0B1030 0%, #14164A 55%, #0A2E42 100%);
}
.note-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* La escala deja margen para que el vaivén y el acercamiento no
     descubran los bordes. `scale` va aparte de `transform` para que el
     hover no pise la animación. */
  scale: 1.08;
  transition: scale .45s var(--ease);
}

/* Las ilustraciones respiran: el mismo vaivén para todas, desfasado
   para que no suban y bajen en bloque. Al pasar el cursor la tarjeta
   se levanta y su ilustración se acerca. */
@media (prefers-reduced-motion: no-preference) {
  .note-art img { animation: nota-vaiven 7s ease-in-out infinite alternate; }
  .grid .note-row:nth-child(2) .note-art img { animation-delay: -2.3s; }
  .grid .note-row:nth-child(3) .note-art img { animation-delay: -4.6s; }
  .grid .note-row:nth-child(4) .note-art img { animation-delay: -1.2s; }
  .grid .note-row:nth-child(5) .note-art img { animation-delay: -3.5s; }
  .grid .note-row:nth-child(6) .note-art img { animation-delay: -5.8s; }
}
@keyframes nota-vaiven {
  from { transform: translateY(3px); }
  to   { transform: translateY(-3px); }
}
.note-row:hover .note-art img, .feature:hover .note-art img { scale: 1.16; }
.feature { transition: transform .22s var(--ease), box-shadow .22s; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,18,51,.07); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 700px) {
  .fgrid { grid-template-columns: 1fr; }
}

/* Las fichas de datos llevan textos largos sin espacios (correos, URLs).
   Sin esto desbordan el ancho en pantallas estrechas. */
.fact b { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.fact span { min-width: 0; }
@media (max-width: 560px) {
  .fact { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fact b { text-align: left; }
}

/* =====================================================================
   RESPONSIVE — bloque final
   Va al final a propósito: los ajustes que se añadieron después de las
   consultas de medios anteriores las anulaban en todos los anchos.
   Estas reglas cierran el archivo y son las que mandan.
   ===================================================================== */

@media (max-width: 1000px) {
  .pgrid,
  .cmp,
  .duo,
  .close-in            { grid-template-columns: 1fr !important; }
  .navcards            { grid-template-columns: 1fr; }
  .feats--bare         { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cmp-plus            { margin: 0 auto; }
  .duo-node            { margin: 0 auto; }
  .duo-node::before,
  .duo-node::after     { display: none; }
}

@media (max-width: 900px) {
  .hero-grid           { grid-template-columns: 1fr !important; }
  .nav-links           { display: none; }
  .burger              { display: inline-flex; }
  .steps               { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
  .step::after         { display: none; }
  .flow-steps          { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .flow-arc            { display: none; }
  .g-3, .g-4           { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sectors             { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ways                { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tri                 { aspect-ratio: 1 / 1; margin-top: 26px; }
  .close-in > div:last-child { justify-self: stretch; }
}

@media (max-width: 820px) {
  .foot-grid           { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .fgrid               { grid-template-columns: 1fr; }
  .app-body            { grid-template-columns: 1fr; }
  .app-side            { display: none; }
}

@media (max-width: 640px) {
  :root                { --gut: 18px; }
  .g-2, .g-3, .g-4     { grid-template-columns: 1fr; }
  .g-6                 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps,
  .flow-steps,
  .sectors,
  .ways,
  .feats,
  .feats--bare         { grid-template-columns: 1fr; }
  .foot-bottom         { flex-direction: column; align-items: flex-start; }
  .hero .btn-row       { flex-wrap: wrap; }
  .hero .btn           { flex: 1 1 100%; }
  .nav-cta             { display: none; }
  .prod                { padding: 20px; }
  .wordmark            { font-size: 28px; }

  /* El diagrama de compañía pasa a lista simple */
  .tri                 { aspect-ratio: auto; }
  .tri > svg,
  .tri-core            { display: none; }
  .tri-node            { position: static; transform: none; width: auto;
                         flex-direction: row; text-align: left; margin-bottom: 14px; }

  /* Las fichas de datos apilan clave y valor */
  .fact                { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fact b              { text-align: left; }

  .close               { padding: 30px 20px; }
  .close-panel .btn    { width: 100%; }
}

/* Ningún bloque debe empujar el ancho de la página */
/* body overflow-x retirado: las causas del desbordamiento están corregidas */
/* .close se excluye: al ser tambien .wrap, max-width:100% anulaba su
   ancho maximo y lo dejaba pegado a los bordes. */
.pblock, .duo, .app { max-width: 100%; }

/* La rejilla de capacidades se declaró como .grid.g-6.svc-grid, con más
   especificidad que .g-6. Hay que igualarla para que ceda en móvil. */
@media (max-width: 900px) { .grid.g-6.svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .grid.g-6.svc-grid { grid-template-columns: 1fr; } }

/* El correo del pie no tiene espacios y desbordaba en columnas estrechas */
.foot a, .foot li { overflow-wrap: anywhere; }
.foot ul { min-width: 0; }

/* =====================================================================
   AJUSTE FINO CONTRA LAS MAQUETAS
   Medido comparando las capturas con /Referencias lado a lado.
   ===================================================================== */

/* ---- Ritmo vertical: las maquetas son más compactas ---- */
:root {
  /* El ancho util lo define la regla adaptable del inicio del archivo.
     Aqui solo se ajusta el ritmo vertical. */
  --band: clamp(50px, 5vw, 78px);
}

/* ---- Bandas oscuras de borde a borde, como en la maqueta ---- */
.band-dark-full {
  background: var(--navy-band);
  color: var(--ink-light);
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 4.4vw, 60px) 0;
}
.band-dark-full::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(860px 330px at 88% -12%, rgba(81,57,245,.30), transparent 62%),
    radial-gradient(560px 280px at 4% 110%, rgba(78,226,202,.11), transparent 64%);
  pointer-events: none;
}
.band-dark-full > * { position: relative; }
.band-dark-full h2, .band-dark-full h3, .band-dark-full h4 { color: #fff; }
.band-dark-full .solutions { padding: 0; border-radius: 0; background: none; }
.band-dark-full .solutions::before { display: none; }
.band-dark-full .eyebrow { margin-bottom: 22px; }

/* ---- Cierre de borde a borde ---- */
.close-full {
  background: var(--navy-cta);
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 4.8vw, 68px) 0;
}
.close-full .close {
  background: none;
  border-radius: 0;
  /* Conserva el margen lateral del contenedor: con padding:0 el titular
     quedaba pegado al borde izquierdo de la pantalla. */
  padding: 0 var(--gut);
  position: relative;
  z-index: 1;
}
.close-full .ribbons {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ---- Hero: el panel oscuro sangra hasta el borde derecho ---- */
.hero { padding-top: clamp(26px, 3.2vw, 44px); }
.hero-grid { gap: clamp(24px, 3vw, 44px); align-items: center; }
.stage {
  margin-right: calc(-1 * var(--gut));
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  aspect-ratio: 16 / 10;
}
@media (min-width: 1281px) {
  .stage { margin-right: calc((var(--maxw) - 100vw) / 2 - var(--gut)); }
}

/* ---- Tarjetas de cliente: más altas y con el logo mayor ---- */
.logo-card { padding: 30px 16px 20px; gap: 20px; border-radius: var(--r); }
.logo-card img { height: 40px; }
.tag { font-size: 11.5px; padding: 4px 14px; }

/* ---- Cabecera de sección algo más apretada ---- */
.head-center h2 { margin: 12px 0 12px; }
.band { padding: var(--band) 0; }

/* ---- Tarjetas de solución: proporción de la maqueta ---- */
.dcard { padding: 22px; min-height: 196px; }
.dcard h3 { font-size: 18.5px; }
.dcard p { font-size: 12.8px; }
.dcard .ic { width: 40px; height: 40px; margin-bottom: 14px; }

/* ---- Proceso: arco más marcado y iconos con anillo ---- */
.flow-arc { top: 22px; height: 62px; }
.flow-arc path { stroke: #B9B1EE; stroke-width: 1.5; }
.ic-round { box-shadow: 0 0 0 5px rgba(81,57,245,.05); }

/* ---- Productos en la portada: tarjetas algo mayores ---- */
.prod { padding: 22px; border-radius: var(--r-lg); }

@media (max-width: 900px) {
  .stage { margin-right: 0; border-radius: var(--r-xl); }
}

/* Cierre: al pasar a borde a borde el titular se estiraba a una linea */
.close-full { padding: clamp(52px, 5.6vw, 84px) 0; }
.close-in { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.close h2 { max-width: 15ch; font-size: clamp(26px, 2.9vw, 36px); }
.close p { max-width: 40ch; margin-bottom: 22px; }

/* Bandas oscuras: tarjetas algo mas altas, como en la maqueta */
.band-dark-full { padding: clamp(46px, 5vw, 72px) 0; }
.dcard { min-height: 214px; padding: 24px; }

/* Productos de la portada: mas aire interior */
.prod { padding: 26px; }

/* Altura interior de las tarjetas: en la maqueta respiran mas */
.logo-card { padding: 34px 16px 22px; gap: 22px; }
.logo-card img { height: 42px; }
.dcard { min-height: 236px; padding: 26px; }
.dcard h3 { margin-bottom: 11px; }
.prod { padding: 28px; row-gap: 24px; }
.prod h3 { font-size: clamp(20px, 2vw, 25px); }
.ui { padding: 14px; }
.flow-step p { font-size: 12.6px; }
.flow { padding: 6px 0 4px; }

/* Compactar a la medida de las maquetas */
.close-full { padding: clamp(34px, 3.6vw, 54px) 0; }
.close p { margin-bottom: 18px; }
.duo { padding: clamp(22px, 2.6vw, 34px); }
.duo-list { gap: 8px; margin-bottom: 18px; }
.duo-side > p { margin-bottom: 14px; }
.duo-side h3 { margin-bottom: 8px; }
.duo-node { width: 78px; height: 78px; }
.foot { padding: 44px 0 0; }
.foot-grid { padding-bottom: 30px; gap: 22px; }
.foot ul { gap: 8px; }
.head-center .lead { font-size: 14px; }
.steps { gap: 18px; }

/* Ritmo medido contra las maquetas, seccion por seccion */
:root { --band: clamp(36px, 3.5vw, 54px); }
.head-center h2 { margin: 10px 0 10px; }
.head-center .lead { font-size: 13.5px; }

/* "Soluciones para cada realidad": sobraban ~196 px */
.duo { padding: clamp(20px, 2.2vw, 30px); }
.duo-list { gap: 7px; margin-bottom: 16px; }
.duo-list li { font-size: 12.6px; }
.duo-side > p { font-size: 12.6px; margin-bottom: 12px; }
.duo-side h3 { font-size: 19px; }
.duo-side .ic-round { width: 42px; height: 42px; }
.duo-node { width: 68px; height: 68px; }
.duo-node img { width: 28px; height: 28px; }

/* Enfoque operativo: sobraban ~112 px */
.steps { gap: 16px; }
.step-top { margin-bottom: 10px; }
.step h4 { margin-bottom: 5px; }
.step p { font-size: 12.4px; line-height: 1.52; }
.ic-round { width: 46px; height: 46px; }
.ic-round svg { width: 19px; height: 19px; }

/* Cierre: sobraban ~142 px */
.close-full { padding: clamp(28px, 3vw, 44px) 0; }
.close h2 { font-size: clamp(24px, 2.6vw, 32px); }
.close p { font-size: 13.5px; margin-bottom: 16px; }

/* Pie: sobraban ~84 px */
.foot { padding: 36px 0 0; }
.foot-grid { padding-bottom: 24px; }
.foot h3 { margin-bottom: 12px; }
.foot a, .foot li > span { font-size: 12.8px; }
.foot-bottom { padding: 16px 0; }

/* Ultimo ajuste por seccion contra las medidas de las maquetas */
.svc { padding: 28px 20px; }
.svc .ic-round { margin-bottom: 18px; }
.svc h3 { font-size: 17px; margin-bottom: 12px; }
.svc p { font-size: 12.5px; }
.svc .go { padding-top: 20px; }

.duo { padding: clamp(18px, 2vw, 26px); }
.duo-list { gap: 6px; margin-bottom: 14px; }
.duo-side .btn { padding: 11px 16px; font-size: 12.5px; }

.steps { gap: 14px; }
.step p { font-size: 12.2px; }

.close-full { padding: clamp(24px, 2.6vw, 38px) 0; }
.close h2 { font-size: clamp(23px, 2.5vw, 30px); }

.foot { padding: 30px 0 0; }
.foot-grid { padding-bottom: 20px; gap: 20px; }
.foot-tag { margin-top: 12px; font-size: 12.6px; }
.foot .social { margin-top: 12px; }
.foot .social a { width: 30px; height: 30px; }
.foot-bottom { padding: 14px 0; font-size: 12px; }

/* =====================================================================
   RECURSOS
   ===================================================================== */

/* Pestañas Notas / Talleres */
.tabs {
  display: flex;
  gap: 34px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 2px 15px;
  font-size: 15px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.tab svg { width: 18px; height: 18px; }
.tab:hover { color: var(--violet); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }

/* Nota destacada: ilustración a la izquierda, texto a la derecha */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
}
.feature-art { height: 100%; min-height: 260px; }
.feature-body { padding: clamp(22px, 2.6vw, 38px) clamp(22px, 2.6vw, 38px) clamp(22px, 2.6vw, 38px) 0; }
.feature h2 { font-size: clamp(21px, 2.2vw, 28px); margin: 12px 0 14px; }
.feature p { font-size: 13.6px; line-height: 1.66; color: var(--ink-3); max-width: 46ch; margin-bottom: 18px; }

/* Fila de nota: ilustración pequeña a la izquierda */
.note-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.note-row:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,18,51,.07); border-color: var(--line-2); }
.note-row .note-art { height: 100%; min-height: 152px; }
.note-row-body { padding: 18px 18px 16px; display: flex; flex-direction: column; }
.note-row h3 { font-size: 15.5px; line-height: 1.3; margin: 8px 0 8px; }
.note-row p { font-size: 12.2px; line-height: 1.55; color: var(--ink-3); }
.note-row .note-state { margin: 14px 0 0; }

/* Talleres sobre banda oscura */
.shop {
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .22s;
}
.shop:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
.shop h3 { color: #fff; font-size: 18px; margin: 16px 0 9px; }
.shop p { font-size: 12.7px; line-height: 1.58; color: rgba(255,255,255,.6); }
.shop-art {
  margin-top: 18px; height: 96px; border-radius: var(--r-sm);
  background: linear-gradient(140deg, rgba(124,92,255,.22), rgba(78,226,202,.14));
  border: 1px solid rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
.shop-art::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%,-50%) rotate(45deg);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(158,139,255,.9), rgba(81,57,245,.4));
  box-shadow: 0 0 26px rgba(124,92,255,.5);
}
.shop-art--redonda::after { border-radius: 50%; transform: translate(-50%,-50%); }
.shop-art--teal::after { background: linear-gradient(135deg, rgba(78,226,202,.85), rgba(81,57,245,.4)); box-shadow: 0 0 26px rgba(78,226,202,.45); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature-body { padding: 22px; }
  .feature-art { min-height: 180px; }
}
@media (max-width: 520px) {
  .note-row { grid-template-columns: 1fr; }
  .note-row .note-art { min-height: 116px; }
  .tabs { gap: 22px; }
}

/* Nodos con icono sobre el panel del hero (recursos) */
.node-ic {
  position: absolute;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,18,44,.72);
  border: 1px solid rgba(158,139,255,.34);
  color: #C3B2FF;
  backdrop-filter: blur(6px);
}
.node-ic svg { width: 18px; height: 18px; }
.node-ic:nth-of-type(2n) { color: var(--teal); border-color: rgba(78,226,202,.34); }

/* =====================================================================
   PRODUCTOS — móvil superpuesto y orbe de ARIN
   ===================================================================== */

/* El panel de BIXO aloja el móvil en su esquina */
.app-wrap { position: relative; }
.app-wrap .app { position: relative; z-index: 1; }

.phone {
  position: absolute;
  right: -14px;
  bottom: -26px;
  z-index: 2;
  width: 148px;
  border-radius: 20px;
  background: #0B1030;
  border: 5px solid #0B1030;
  box-shadow: 0 20px 44px rgba(11,18,51,.28);
  overflow: hidden;
}
.phone-in { background: var(--white); border-radius: 15px; overflow: hidden; }
.phone-top {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 9px 7px;
  font-size: 8px; color: var(--ink-3);
}
.phone-top i { width: 14px; height: 14px; border-radius: 50%; background: var(--violet-wash); flex: none; }
.phone-top b { font-size: 8.5px; font-weight: 700; color: var(--ink); display: block; }

.phone-hero {
  margin: 0 9px; padding: 11px 10px; border-radius: 8px;
  background: linear-gradient(135deg, #2A1E6E, #4A2FC2);
  color: #fff;
}
.phone-hero b { display: block; font-size: 10px; font-weight: 700; line-height: 1.25; }
.phone-hero span {
  display: inline-block; margin-top: 7px; padding: 3px 8px;
  background: rgba(255,255,255,.16); border-radius: 20px; font-size: 7px;
}

.phone-cats { display: flex; gap: 5px; padding: 9px 9px 0; }
.phone-cats i { flex: 1; height: 26px; border-radius: 6px; background: var(--paper-2); }

.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 9px 10px; }
.phone-grid i { height: 40px; border-radius: 6px; background: var(--paper-2); display: block; }
.phone-bar { display: flex; gap: 4px; padding: 0 9px 9px; }
.phone-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.phone-bar i:first-child { background: var(--violet); }

/* Orbe luminoso de ARIN con su red de conexiones */
.orb-wrap { position: relative; display: grid; place-items: center; min-height: 168px; }
.orb-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #0F2C36, #061821);
  border: 1px solid rgba(78,226,202,.45);
  box-shadow: 0 0 0 10px rgba(78,226,202,.06), 0 0 46px rgba(78,226,202,.42);
}
.orb img { width: 34px; height: 34px; border-radius: 8px; }
.orb::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid rgba(78,226,202,.22);
  animation: orbe 4.6s ease-in-out infinite;
}
@keyframes orbe {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.14); opacity: .12; }
}

@media (max-width: 1000px) {
  .phone { position: static; width: 158px; margin: 16px auto 0; }
}
@media (max-width: 600px) {
  .phone { width: 100%; max-width: 190px; }
}

/* ARIN: conversacion, orbe y fuentes en fila, como en la maqueta */
.arin-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .92fr);
  gap: 12px;
  align-items: center;
}
.arin-cols .orb-wrap { min-height: 0; width: 128px; }
.arin-cols .orb { width: 66px; height: 66px; }
.arin-cols .orb img { width: 27px; height: 27px; }
#arin .pgrid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.chat { padding: 12px; }
.dbub { font-size: 11px; padding: 8px 11px; }
.bar { font-size: 9.5px; }
.bar u { width: 68px; }
.src-item { padding: 9px 11px; }

/* El cierre de Productos es una tarjeta con margenes, no una franja */
#productos-close.close-full { background: none; padding: 0 0 var(--band); }
#productos-close .close {
  background: var(--navy-cta);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 42px);
}

@media (max-width: 1100px) {
  .arin-cols { grid-template-columns: 1fr; }
  .arin-cols .orb-wrap { width: auto; min-height: 120px; }
  #arin .pgrid { grid-template-columns: 1fr; }
}

/* Rotulo pequeno en versalitas. Se usaba en contacto y talleres pero
   nunca llego a definirse al cambiar de sistema: las etiquetas del
   formulario salian en 16 px normal. */
.label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field .label { color: var(--ink-2); }

/* Lista sin icono (temario de los talleres): necesita su propia vineta */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.plain-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.8px; line-height: 1.55; color: var(--ink-2);
}
.plain-list li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet);
}

/* =====================================================================
   RITMO VERTICAL — corregido franja por franja
   Media anterior: perseguia la altura total de la maqueta, pero esa
   maqueta no incluye el pie y la pagina si. El pie compensaba, el total
   cuadraba y cada seccion quedaba mas apretada de la cuenta.
   Estos valores salen de medir cada franja por separado.
   ===================================================================== */

:root { --band: clamp(52px, 5vw, 74px); }

.hero { padding-top: clamp(40px, 4.4vw, 66px); padding-bottom: clamp(20px, 2.2vw, 34px); }
.stage { aspect-ratio: 16 / 10.8; }

.marquee { padding: 15px 0; }

.close-full { padding: clamp(46px, 4.6vw, 68px) 0; }
.close h2 { font-size: clamp(25px, 2.7vw, 34px); }
.close p { font-size: 14px; margin-bottom: 20px; }

.band-dark-full { padding: clamp(48px, 4.8vw, 70px) 0; }

/* Al hero le faltaban 88 px frente a la maqueta */
.hero { padding-top: clamp(52px, 5.4vw, 84px); padding-bottom: clamp(30px, 3vw, 46px); }
.stage { aspect-ratio: 16 / 11.4; }
.hero h1 { margin: 22px 0 20px; }
.hero .lead { margin-bottom: 30px; }

/* =====================================================================
   PUNTOS QUE RECORREN LA ORBITA (respaldo sin WebGL)
   Tecnica: animacion a lo largo de una trayectoria con offset-path.
   Los puntos dejan de estar quietos y viajan por la elipse.
   ===================================================================== */


/* Sin soporte de offset-path el punto se queda quieto pero visible */
@supports not (offset-path: path("M0 0")) {
}

/* =====================================================================
   ANIMACIONES DEL SITIO
   Tres técnicas, todas nativas del navegador y sin JavaScript:

   1. Trayectoria (offset-path)  — puntos que recorren una órbita.
   2. Trazo progresivo (stroke-dasharray/offset) — líneas que se dibujan
      o que fluyen, como la corriente de un circuito.
   3. Revelado al entrar en pantalla (animation-timeline: view()).

   La tercera es la delicada: el contenido está SIEMPRE visible por
   defecto y solo se anima donde el navegador soporta la técnica. Nunca
   se oculta nada a la espera de un script, que es como se rompía la
   versión anterior del sitio.
   ===================================================================== */

/* ---------- 2. Trazo que fluye ---------- */

/* Arco del proceso: la línea se dibuja sola */
.flow-arc path {
  stroke-dasharray: 6 7;
  animation: fluir 26s linear infinite;
}
@keyframes fluir { to { stroke-dashoffset: -260; } }

/* Conectores entre etapas y en la cadena de producto */
.step:not(:last-child)::after,
.chain-line,
.duo-node::before,
.duo-node::after {
  background-size: 200% 100%;
  animation: correr 3.2s linear infinite;
}
@keyframes correr { to { background-position: -18px 0; } }

/* Red de ARIN y diagrama de compañía: corriente por los cables */
.orb-net path,
.tri path {
  stroke-dasharray: 5 8;
  animation: fluir 18s linear infinite;
}
.orb-net path:nth-child(2n) { animation-duration: 22s; animation-direction: reverse; }
.tri path:nth-child(2n)     { animation-duration: 24s; animation-direction: reverse; }

/* Estelas del cierre: la luz recorre la cinta */


/* ---------- Latido de los puntos vivos ---------- */
.dot, .badge-live .dot {
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78,226,202,.5); }
  70%      { box-shadow: 0 0 0 6px rgba(78,226,202,0); }
}

/* Orbe de ARIN y núcleo: respiración del halo */
.orb { animation: respirar 5.2s ease-in-out infinite; }
@keyframes respirar {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.16); }
}

/* ---------- 3. Revelado al entrar en pantalla ---------- */
/* Solo se activa donde el navegador soporta animation-timeline. En el
   resto el contenido se ve tal cual, sin depender de nada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .logo-card,
    .dcard,
    .svc,
    .card,
    .prod,
    .cmp-card,
    .note-row,
    .shop,
    .step,
    .flow-step,
    .way,
    .sector,
    .acc-item,
    .feature {
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 26%;
    }

    /* Las bandas grandes entran con un desplazamiento más corto */
    .head-center,
    .phead h1,
    .hero h1 {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 22%;
    }
  }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Micro-interacciones ---------- */

/* La tarjeta de logo levanta y el logo gana color al pasar por encima */
/* El filtro de estas imagenes se declara una sola vez, con el resto
   del comportamiento de .logo-card. Aqui solo estorbaba. */


/* El icono de la tarjeta de servicio gira levemente */
.svc .ic-round, .prin .ic-round { transition: transform .35s var(--ease), background .25s; }
.svc:hover .ic-round, .prin:hover .ic-round { transform: rotate(-6deg) scale(1.08); }

/* El botón circular de las tarjetas oscuras empuja la flecha */
.dcard .go-round svg { transition: transform .25s var(--ease); }
.dcard:hover .go-round svg { transform: translateX(3px); }

/* Las fichas del hero flotan muy despacio */


/* ---------- Respeto absoluto al movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-arc path,
  .orb-net path,
  .tri path,
  .ribbons path,
  .dot,
  .orb, .tri-core,
    .orbit .viaje,
  .step:not(:last-child)::after,
  .chain-line,
  .duo-node::before, .duo-node::after {
    animation: none !important;
  }
}

/* Al imprimir o exportar a PDF no debe quedar nada a medio revelar */
@media print {
  .logo-card, .dcard, .svc, .card, .prod, .cmp-card, .note-row, .shop,
  .step, .flow-step, .way, .sector, .acc-item, .feature,
  .head-center, .phead h1, .hero h1 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Las barras de ARIN se llenan al entrar en pantalla: es una demo de
   producto, y el movimiento ahi comunica que el sistema esta vivo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bar i::after {
      animation: llenar linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
  }
}
@keyframes llenar { from { width: 0; } to { width: var(--w, 60%); } }

/* Deriva ambiental muy lenta en las bandas oscuras: el resplandor se
   desplaza en lugar de quedarse clavado. */


@media (prefers-reduced-motion: reduce) {
  .bar i::after,
  .band-dark-full::before,
  .pblock--dark::before,
  .dhero::before { animation: none !important; }
}

/* =====================================================================
   VELOCIDAD Y PRESENCIA DEL MOVIMIENTO
   Las duraciones anteriores eran demasiado largas: 78 s para una vuelta
   del anillo y hasta 22 s para un punto. A simple vista parecia quieto.
   ===================================================================== */

/* Los anillos giran a un ritmo perceptible */

/* Los puntos recorren la orbita bastante mas rapido y se ven mas */
/* En SVG currentColor no hereda del fill, asi que el resplandor se
   define explicitamente por color de punto. */

/* Mas puntos viajando, para que el movimiento se lea de un vistazo */

/* Estelas y destellos con mas contraste y mas ritmo */

/* El nucleo late de forma visible */

/* Corriente por los cables, tambien mas viva */
.flow-arc path { animation-duration: 12s; }
.orb-net path  { animation-duration: 8s; }
.tri path      { animation-duration: 10s; }
.orb-net path:nth-child(2n) { animation-duration: 10s; }
.tri path:nth-child(2n)     { animation-duration: 12s; }

/* Cintas del cierre */


/* Marquesina algo mas rapida */
.marquee { --speed: 30s; }

/* =====================================================================
   ÓRBITA 3D EN CSS
   Perspectiva real con transformaciones 3D del navegador. Sustituye a la
   escena WebGL: pesa cero, funciona en cualquier navegador y no la puede
   bloquear la protección anti-identificación (Brave, Firefox estricto),
   que sí desactiva WebGL.
   ===================================================================== */

.orb3d {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}

/* Resplandor de fondo */
.orb3d::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(124,92,255,.55) 0%,
              rgba(81,57,245,.22) 38%,
              transparent 68%);
  filter: blur(6px);
  animation: orb3d-latir 6s ease-in-out infinite;
}
@keyframes orb3d-latir {
  0%, 100% { opacity: .78; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.09); }
}

/* La escena entera bascula muy despacio: da sensación de volumen */
/* La escena ocupa todo el panel: con width/height 0 los anillos, que se
   miden en porcentaje, colapsaban a 2x1 px y no se veia nada girar. */
.orb3d-escena {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: orb3d-bascular 26s ease-in-out infinite alternate;
}
@keyframes orb3d-bascular {
  from { transform: rotateX(-4deg) rotateY(-9deg); }
  to   { transform: rotateX(7deg)  rotateY(11deg); }
}

/* ---- Anillos ---- */
.anillo {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(158,139,255,.42);
  border-radius: 50%;
  transform-style: preserve-3d;
  translate: -50% -50%;
}
.anillo::after {
  /* Realce en un tramo del anillo, como luz reflejada */
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(195,178,255,.95);
  border-right-color: rgba(78,226,202,.6);
}

.anillo--1 { width: 78%; aspect-ratio: 1; transform: rotateX(74deg) rotateZ(0deg);   animation: giro 17s linear infinite; }
.anillo--2 { width: 62%; aspect-ratio: 1; transform: rotateX(66deg) rotateY(26deg);  animation: giro 13s linear infinite reverse; border-color: rgba(78,226,202,.34); }
.anillo--3 { width: 94%; aspect-ratio: 1; transform: rotateX(80deg) rotateZ(38deg);  animation: giro 23s linear infinite; border-color: rgba(158,139,255,.24); }
.anillo--4 { width: 50%; aspect-ratio: 1; transform: rotateX(58deg) rotateY(-32deg); animation: giro 10s linear infinite reverse; border-color: rgba(195,178,255,.5); }

@keyframes giro { to { rotate: z 360deg; } }

/* ---- Puntos que orbitan sobre cada anillo ---- */
.orbe-punto {
  position: absolute;
  left: 50%; top: 0;
  width: 9px; height: 9px;
  margin-left: -4.5px; margin-top: -4.5px;
  border-radius: 50%;
  background: #C3B2FF;
  box-shadow: 0 0 10px 2px rgba(195,178,255,.9);
}
.orbe-punto--teal { background: #4EE2CA; box-shadow: 0 0 10px 2px rgba(78,226,202,.9); }
.orbe-punto--sm   { width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; }

/* Se colocan en distintos puntos del anillo */
.anillo > .orbe-punto:nth-child(1) { transform: rotate(0deg)   translateY(0); }
.anillo > .orbe-punto:nth-child(2) { top: 50%; left: 100%; margin-top: -4.5px; }
.anillo > .orbe-punto:nth-child(3) { top: 100%; left: 50%; }

/* ---- Núcleo ---- */
.orb3d-nucleo {
  position: absolute; left: 50%; top: 50%;
  width: 116px; height: 116px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #1B1650, #070B24 70%);
  border: 1px solid rgba(158,139,255,.45);
  display: grid; place-items: center;
  box-shadow: 0 0 0 12px rgba(124,92,255,.07),
              0 0 60px rgba(124,92,255,.55),
              inset 0 0 30px rgba(124,92,255,.3);
  z-index: 2;
}
.orb3d-nucleo img { width: 46px; height: 46px; border-radius: 10px; }
.orb3d-nucleo::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(124,92,255,.32);
  animation: orb3d-onda 3.4s ease-out infinite;
}
@keyframes orb3d-onda {
  0%   { transform: scale(.92); opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---- Polvo estelar de fondo ---- */
.orb3d-polvo { position: absolute; inset: 0; }
.orb3d-polvo i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(195,178,255,.85);
  animation: orb3d-brillo 3s ease-in-out infinite;
}
.orb3d-polvo i:nth-child(3n)   { background: rgba(78,226,202,.85); }
.orb3d-polvo i:nth-child(2n)   { width: 2px; height: 2px; animation-delay: -1.1s; }
.orb3d-polvo i:nth-child(3n+1) { animation-delay: -2.2s; }
@keyframes orb3d-brillo { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 640px) {
  .orb3d-nucleo { width: 88px; height: 88px; }
  .orb3d-nucleo img { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb3d-escena, .anillo, .orb3d::before,
  .orb3d-nucleo::after, .orb3d-polvo i { animation: none !important; }
}

/* =====================================================================
   VIDA EN LAS MAQUETAS DE INTERFAZ
   Criterio: dentro de una misma composición no puede haber una pieza
   animada junto a otra congelada. El orbe de ARIN latía mientras su
   panel de conversación, sus barras y sus fuentes estaban muertos.

   Y el movimiento aquí significa algo: son maquetas de software, así
   que se comportan como software en marcha — pedidos que entran,
   respuestas que se escriben, fuentes que confirman conexión.
   ===================================================================== */

/* ---------- Panel de pedidos: las filas entran en cascada ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .app-row {
      animation: fila-entra linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 40%;
    }
    .app-row:nth-child(2) { animation-delay: 0s; }
  }
}
@keyframes fila-entra {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* El pedido más reciente destaca: es el que acaba de llegar */
.app-row:first-of-type em,
.ui-row:last-child .ui-chip {
  animation: recien 2.8s ease-in-out infinite;
}
@keyframes recien {
  0%, 100% { box-shadow: 0 0 0 0 rgba(81,57,245,.45); }
  60%      { box-shadow: 0 0 0 5px rgba(81,57,245,0); }
}

/* ---------- Conversación de ARIN ---------- */
/* Las burbujas aparecen una tras otra, como una respuesta real */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dbub, .bub {
      animation: burbuja linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 34%;
    }
    .dbub:nth-child(3), .bub:nth-child(2) { animation-range: entry 14% entry 44%; }
  }
}
@keyframes burbuja {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Cursor que parpadea en el campo de consulta */
.ui-ask span::after {
  content: "";
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: cursor 1.1s steps(2) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }

/* El botón de enviar respira, indicando que está listo */
.ui-ask i { animation: listo 3s ease-in-out infinite; }
@keyframes listo {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(78,226,202,.4); }
  55%      { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(78,226,202,0); }
}

/* ---------- Fuentes conectadas: confirman enlace por turnos ---------- */
.src-item { position: relative; }
.src-item::after {
  content: "";
  position: absolute; right: 12px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: var(--teal);
  animation: enlace 4.2s ease-in-out infinite;
}
.src-item:nth-child(2)::after { animation-delay: -0.8s; }
.src-item:nth-child(3)::after { animation-delay: -1.6s; }
.src-item:nth-child(4)::after { animation-delay: -2.4s; }
.src-item:nth-child(5)::after { animation-delay: -3.2s; }
@keyframes enlace {
  0%, 100% { opacity: .25; box-shadow: 0 0 0 0 rgba(78,226,202,.5); }
  40%      { opacity: 1;   box-shadow: 0 0 0 5px rgba(78,226,202,0); }
}

/* ---------- Ventana de la aplicación: barra de dirección viva ---------- */
.app-top span, .ui-bar span { position: relative; overflow: hidden; }


/* Pestaña activa con subrayado que respira */


/* ---------- Móvil: reflejo que recorre la pantalla ---------- */
.phone-in { position: relative; overflow: hidden; }


/* La cabecera del móvil respira igual que el resto */


/* ---------- Maquetas de la portada ---------- */
/* Las tarjetas de producto de la portada llevan las mismas maquetas,
   así que heredan todo lo anterior. Solo falta el catálogo. */


/* ---------- Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-row, .dbub, .bub,
  .app-row:first-of-type em, .ui-row:last-child .ui-chip,
  .ui-ask span::after, .ui-ask i,
  .src-item::after, .app-top b, .app-tabs .on,
  .phone-in::after, .phone-hero span, .ui-thumb {
    animation: none !important;
  }
  .ui-ask span::after { display: none; }
}

/* =====================================================================
   COHERENCIA DEL MOVIMIENTO
   Piezas que quedaban congeladas dentro de composiciones ya vivas.
   ===================================================================== */

/* ---------- Ilustraciones de las notas ----------
   Son marcadores a la espera de la ilustración definitiva. Congelados
   parecían un error de carga; con la figura girando despacio se leen
   como lo que son: un espacio reservado, no algo roto. */


/* El anillo exterior respira, igual que el núcleo del hero */


/* ---------- Tarjetas oscuras de navegación (compañía) ----------
   Estaban quietas junto a tarjetas claras que sí respiraban. */


/* La línea del enlace se extiende al pasar por encima */
.navcard .go i { transition: background .35s var(--ease); }
.navcard:hover .go i { background: var(--teal); }

/* ---------- Las dos mitades de "cada realidad" ----------
   El nodo central latía y los dos lados estaban muertos. */


/* Los criterios se marcan uno tras otro al entrar en pantalla */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .duo-list li {
      animation: criterio linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 38%;
    }
  }
}
@keyframes criterio {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Pestañas de recursos ---------- */


/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
      .duo-list li, .tab.is-on {
    animation: none !important;
  }
}

/* =====================================================================
   HERO: equilibrio entre la columna de texto y el panel
   El texto iba centrado contra un panel mucho mas alto, lo que dejaba
   92 px de vacio arriba y 93 px de panel sobrante abajo.
   Ahora ambos arrancan a la misma altura y el panel se acorta.
   ===================================================================== */

.hero-grid { align-items: start; }
.hero-grid > div:first-child { padding-top: 6px; }
.stage { aspect-ratio: 16 / 9.4; }

/* En movil vuelven a apilarse, sin alineacion forzada */
@media (max-width: 900px) {
  .hero-grid { align-items: stretch; }
  .hero-grid > div:first-child { padding-top: 0; }
  .stage { aspect-ratio: 16 / 11; }
}

/* =====================================================================
   SEPARAR EL CIERRE DEL PIE
   Los dos usaban el mismo #0A1231 y se leian como una sola masa oscura:
   no se distinguia donde acababa la llamada a la accion y empezaba el
   pie. La diferencia no es decorativa, es de jerarquia:

     el cierre INVITA  -> mas claro, con energia y resplandor violeta
     el pie ORDENA     -> mas oscuro y plano, se retira de la vista
   ===================================================================== */

:root {
  --navy-cierre: #101A4A;   /* llamada a la accion: sube y se acerca */
  --navy-pie:    #060A1C;   /* referencia: baja y se aleja */
}

/* ---------- Cierre: la franja que invita ---------- */
.close-full {
  background:
    radial-gradient(1100px 420px at 76% -20%, rgba(124,92,255,.34), transparent 62%),
    radial-gradient(700px 340px at 6% 120%, rgba(78,226,202,.13), transparent 64%),
    var(--navy-cierre);
}

/* ---------- Pie: la franja que ordena ---------- */
.foot {
  background: var(--navy-pie);
  /* Filete superior: marca el corte sin necesidad de una linea dura */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

/* El texto del pie baja un punto de contraste, acorde a su papel */
.foot a, .foot li > span { color: rgba(255,255,255,.55); }
.foot a:hover { color: #fff; }
.foot h3 { color: rgba(255,255,255,.92); }

/* ---------- El corte entre ambos ----------
   Una transicion corta del tono del cierre al del pie, para que el
   cambio se lea como una decision y no como un salto brusco. */
.close-full::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--navy-pie));
  pointer-events: none;
  z-index: 0;
}

/* Los cierres que van como tarjeta (productos) conservan su color y no
   necesitan el degradado, porque ya los separa el margen. */
#productos-close .close { background: var(--navy-cierre); }
#productos-close.close-full::after { display: none; }

/* La banda oscura intermedia tambien se distingue del cierre */
.band-dark-full { background: var(--navy-band); }

@media (prefers-reduced-motion: reduce) {
  .close-full::after { transition: none; }
}

/* =====================================================================
   RITMO ENTRE FRANJAS DE DISTINTO FONDO
   Entre la nota de experiencia y las tarjetas oscuras se acumulaban
   72 px de la seccion clara + 69 px de la oscura = 141 px de aire.
   Cuando el fondo ya cambia, no hace falta tanto margen: el propio
   corte de color separa. Se reduce el relleno de la banda oscura y el
   de la seccion que la precede.
   ===================================================================== */

.band-dark-full { padding: clamp(38px, 3.8vw, 54px) 0; }

/* La seccion clara justo antes de una banda oscura cierra mas corto */
.band:has(+ .band-dark-full) { padding-bottom: clamp(30px, 3vw, 44px); }
.band-dark-full + .band { padding-top: clamp(34px, 3.4vw, 48px); }

/* La nota legal ya no necesita tanto margen superior */
.note { margin-top: 22px; }

/* El rotulo de la banda oscura llevaba 22 px de margen sobre un relleno
   ya generoso: el grueso del hueco estaba ahi, no en la seccion. */
.band-dark-full .eyebrow { margin-bottom: 14px; }

/* Barras dentro de la maqueta clara de la portada */
.ui .bars { margin: 10px 0 0; }
.ui .bar { color: var(--ink-3); }
.ui .bar u { color: var(--ink-2); }
.ui .bar i { background: var(--line); }

/* =====================================================================
   TARJETA DE PRODUCTO: el boton sigue al texto
   Estaba anclado abajo para igualar la altura del panel, lo que dejaba
   106 px de hueco en medio de la columna de texto. Igualar por relleno
   dos columnas de contenido distinto es forzar el diseno: mejor que
   cada una tome su altura y el sobrante quede al final, no en medio.
   ===================================================================== */

.prod > .btn { align-self: start; margin-top: 4px; }
.prod .by { margin-top: 16px; }

/* El boton ya vive dentro de la columna de texto */
.prod { grid-template-rows: auto; }
.prod > div:first-child .btn { margin-top: 20px; }
.prod .ui { grid-row: 1; }

/* =====================================================================
   NIVEL DE ENCABEZADO CORRECTO SIN CAMBIAR EL ASPECTO
   Estas piezas usaban h4 dentro de secciones tituladas con h2, lo que
   creaba un salto de nivel que confunde a un lector de pantalla. Pasan
   a h3, que es el nivel que corresponde, y conservan su tamano.
   ===================================================================== */

.cell h3, .step h3, .flow-step h3 {
  font-size: 17px;
  letter-spacing: -0.018em;
  line-height: 1.25;
}
.cell h3 { margin-bottom: 8px; }
.step h3 { margin-bottom: 5px; }
.flow-step h3 { margin: 14px 0 7px; }

/* El rotulo quedaba justo en el limite de contraste AA (4.50 sobre un
   minimo de 4.5). Se oscurece un punto para tener margen real. */
.eyebrow { color: #6D3FE8; }
/* Esa regla, por venir despues, tambien pisaba la variante clara y
   dejaba el rotulo violeta oscuro sobre las bandas oscuras: 3.17:1.
   Se restaura aqui, donde ya nada la sobreescribe. */
.eyebrow--light { color: #9E8BFF; }

@media (max-width: 900px) {
  /* El bloque diagonal ocuparia casi toda la barra en una pantalla
     estrecha: se queda con el ancho de la marca y sin corte. */
  .nav-marca {
    padding-right: 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  }
  .nav-links { margin: 0; }
}

/* =====================================================================
   MENÚ MÓVIL
   El boton anadia la clase is-open pero no existia ninguna regla que la
   usara: en el telefono la barra no daba acceso a ninguna seccion. Se
   llegaba a servicios, productos o compania solo por el pie.
   ===================================================================== */

@media (max-width: 900px) {
  .nav { position: relative; }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    position: absolute;
    left: 0; right: 0;
    top: var(--nav-h);

    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(11,18,51,.10);

    padding: 8px var(--gut) 14px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    z-index: 90;
  }

  /* Cada bloque es una sección con su lista debajo: en un teléfono no
     hay puntero, así que desplegar al pasar por encima no sirve. */
  .nav-links.is-open .has-menu {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav-links.is-open .has-menu:last-child { border-bottom: 0; }

  /* La flecha es un botón aparte: el título sigue llevando a la sección
     y la flecha solo despliega su lista. */
  .nav-desplegar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }
  .nav-desplegar svg { width: 18px; height: 18px; transition: transform .18s ease; }
  .has-menu.abierto .nav-desplegar { color: var(--violet); }
  .has-menu.abierto .nav-desplegar svg { transform: rotate(180deg); }

  .nav-links.is-open .nav-link {
    display: flex;
    justify-content: space-between;
    padding: 15px 2px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .nav-links.is-open .nav-link svg { display: none; }

  /* El submenú deja de ser flotante; plegado hasta que se pide */
  .nav-links.is-open .menu { display: none; }
  .nav-links.is-open .has-menu.abierto .menu {
    grid-column: 1 / -1;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    display: grid;
    gap: 2px;
  }
  .nav-links.is-open .menu a {
    padding: 9px 2px;
    font-size: 14px;
    color: var(--ink-3);
  }
  .nav-links.is-open .menu a:hover { background: none; color: var(--violet); }
  .nav-links.is-open .menu-tit { font-size: 14px; }
  /* En movil la descripcion sobra: el pulgar busca destinos, no prosa. */
  .nav-links.is-open .menu-des { display: none; }
  .nav-links.is-open .menu-sep { margin: 6px 2px; }
  .nav-links.is-open .menu a.menu-pie { padding: 9px 2px; }

  /* La llamada a la acción vuelve, al final del desplegable. La regla
     necesita más peso que el «display: none» general, de ahí el .is-open. */
  .nav-links.is-open .nav-cta-movil {
    display: flex;
    justify-content: center;
    margin: 14px 0 4px;
    width: 100%;
  }
}

/* Fuera del desplegable estos dos controles no existen: en escritorio ya
   está la llamada del encabezado y los submenús se abren al pasar por
   encima. Cuentan por si la ventana se agranda con el menú ya montado. */
.nav-cta-movil { display: none; }
@media (min-width: 901px) { .nav-desplegar { display: none; } }
.burger[aria-expanded="true"] { background: var(--violet-wash); color: var(--violet); }

/* =====================================================================
   FICHAS DE ESCENOGRAFIA
   Las fichas del panel del heroe son <span>, no enlaces. Heredaban de
   .chip el cursor de mano y el hover violeta -.chip:hover va despues
   en el archivo y pesa lo mismo-, asi que aparentaban ser pulsables y
   ademas perdian contraste al pasar por encima. Aqui se les devuelve
   lo suyo: no reaccionan, porque no hacen nada.
   ===================================================================== */
.stage .chip,
.stage .chip:hover,
.chip-card .chip,
.chip-card .chip:hover {
  cursor: default;
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}

/* =====================================================================
   BARRA DE PRECIO (solo tienda virtual, solo movil)
   La pagina mide mas de diez mil pixeles en un telefono. Sin esto, el
   precio se ve una vez y no vuelve nunca.
   ===================================================================== */
.barra-precio {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(8, 12, 32, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.barra-precio.se-ve { transform: none; }
.barra-precio-txt { display: grid; gap: 1px; min-width: 0; }
.barra-precio-txt b { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.barra-precio-txt span { color: rgba(198, 202, 224, .72); font-size: 11.5px; }
.barra-precio .btn { padding: 10px 16px; font-size: 13px; flex: none; }

@media (max-width: 760px) {
  .barra-precio { display: flex; }
  /* Los botones flotantes suben para no taparse con la barra. */
  body:has(.barra-precio.se-ve) .flot { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-precio { transition: none; }
}

/* =====================================================================
   FLOTANTES QUE CEDEN EL PASO
   Dos botones fijos sobre una pagina larga acaban tapando justo lo que
   se esta leyendo. Mientras se baja se apartan; al subir -que es cuando
   se busca algo- vuelven. No desaparecen nunca del todo en el cierre,
   donde ya no estorban.
   ===================================================================== */
.flot {
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), opacity .34s;
}
.flot.apartado {
  transform: translateY(calc(100% + 26px));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .flot { transition: opacity .2s; }
  .flot.apartado { transform: none; }
}

/* =====================================================================
   AGENDA
   Elegir un hueco concreto antes de escribir. Sin servidor: el mensaje
   sale con el dia y la hora dentro, y una persona confirma.
   ===================================================================== */
.agenda { margin-top: 22px; }
.agenda-tit {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.agenda-dias, .agenda-horas {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.agenda-op {
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 12.8px; font-weight: 650; color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease);
}
.agenda-op:hover { border-color: var(--violet); transform: translateY(-1px); }
.agenda-op[aria-pressed="true"] {
  background: var(--violet); border-color: var(--violet); color: #fff;
}
.agenda-op b { display: block; font-size: 11px; font-weight: 700; opacity: .72; }
.agenda-horas[hidden] { display: none; }
.agenda-nota {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .agenda-op, .agenda-op:hover { transform: none; }
}