/* =====================================================================
   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:   #8053F8;   /* eyebrow */
  --violet-wash:#EFECFE;
  --teal:       #4EE2CA;
  --green:      #10B28D;

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

  /* ---- Métrica ---- */
  --maxw: 1200px;
  --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); color: #fff; }
.btn-green:hover { background: #0E9C7C; }

.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: 10.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: 9px;
  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,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(251,251,252,.96); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.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; }
.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 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); }

/* =====================================================================
   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; }

/* 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: 62px; }
  .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(-3px); box-shadow: 0 12px 30px rgba(11,18,51,.07); }
.logo-card img { height: 30px; width: auto; object-fit: contain; }

.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; }

/* =====================================================================
   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 h4 { 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;
  }
}

/* =====================================================================
   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); }
.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);
}
.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); }

/* 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.3px; 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); }

/* 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;
}
.sector-logos img { max-height: 32px; width: auto; object-fit: contain; }

/* 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;
}
.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
   ===================================================================== */

.note-state {
  margin: 16px 20px 20px 20px;
  align-self: flex-start;
  padding: 4px 11px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* 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 {
  --maxw: 1280px;
  --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: 8.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 h4 { 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 */
.logo-card img { transition: transform .3s var(--ease), filter .3s ease; filter: saturate(.9); }
.logo-card:hover img { transform: scale(1.06); filter: saturate(1.15); }

/* 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 h4 { 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; }

/* =====================================================================
   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); }

  /* 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); }