/* ══════════════════════════════════════════════════
   TAP IN — LANDING PAGE
   Paleta: monocromática morada cerrada
   Tipografía: Poppins
   ══════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --c-deep:      #2D2560;
  --c-main:      #4A3CAE;
  --c-mid:       #6B5CE7;
  --c-light:     #9B8EF0;
  --c-xlight:    #EEEDFE;
  --c-surface:   #F2F1F8;
  --c-text:      #2C2B3A;
  --c-muted:     #6B6A7D;
  --c-border:    #BBBAC6;
  --c-white:     #ffffff;
  --c-bg:        #0E0C1E;
  --c-bg2:       #13102A;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  --shadow-card: 0 2px 20px rgba(74,60,174,.10);
  --shadow-card-hover: 0 8px 40px rgba(74,60,174,.18);

  --transition: 0.25s cubic-bezier(.4,0,.2,1);

  --font: 'Poppins', sans-serif;
}

/* ─── RESET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  /* (25/05/2026 v5): clip-margin permite que las box-shadows de los
     elementos cerca del borde lateral bleed sin cortarse. Sin esto, las
     shadows del hover de las cards laterales del carrusel Comunidad
     se cortaban a la altura del borde del viewport. */
  overflow-clip-margin: 120px;
}

/* ─── PERF · PAUSE OFFSCREEN ANIMATIONS ───────────────
   JS añade .is-offscreen a las secciones que no son visibles.
   Esta regla pausa todas sus animaciones y transiciones para
   liberar GPU/CPU en scroll. Al volver a entrar al viewport la
   clase se quita y las animaciones reanudan automáticamente. */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after {
  animation-play-state: paused !important;
}

body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* overflow-x: clip en lugar de hidden — clip NO crea scrolling box,
     no rompe position:sticky en descendants (productos V6 stack lo necesita).
     overflow-clip-margin: permite que box-shadows de cards bleed más allá
     del viewport edge sin cortarse. (v5: subido a 120 — definitivo). */
  overflow-x: clip;
  overflow-clip-margin: 120px;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
ul { list-style: none; }

/* ─── CONTAINER ──────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── REUSABLE ELEMENTS ──────────────────────────── */
.section-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mid);
  background: var(--c-xlight);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}

.kicker-light {
  color: var(--c-light);
  background: rgba(155,142,240,.15);
}

.section-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
  margin-bottom: 16px;
}

.section-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-muted);
  margin-bottom: 0;
}

.section-header.centered { text-align: center; margin-bottom: 56px; }

.card-section {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 40px;
}

/* ─── BUTTONS ────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #7C6EE8 0%, #4A3CAE 100%);
  color: var(--c-white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(107,92,231,.4), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-15deg);
  transition: left .65s ease;
}

.btn-primary:hover::before { left: 130%; }

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(107,92,231,.55), inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  transition: color var(--transition), border-color var(--transition), background var(--transition), gap var(--transition);
}

.btn-ghost:hover {
  color: var(--c-white);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.09);
  gap: 12px;
}

/* ─── PAGE LOAD ANIMATION ───────────────────────── */
/* hero-loading class triggers entrance animations — no overflow restriction */

/* Navbar entrance — smooth fade in */
.hero-loading .nav-inner {
  opacity: 0;
  transform: translateY(-8px);
  animation: navFadeIn 1.2s cubic-bezier(.25,.46,.45,.94) .2s both;
}

@keyframes navFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero content staggered entrance */
.hero-loading .hero-kicker {
  opacity: 0;
  transform: translateY(14px);
  animation: heroElIn .9s cubic-bezier(.25,.46,.45,.94) .6s both;
}

.hero-loading .hero-headline {
  opacity: 0;
  transform: translateY(18px);
  animation: heroElIn 1s cubic-bezier(.25,.46,.45,.94) .8s both;
}

.hero-loading .hero-subhead {
  opacity: 0;
  transform: translateY(14px);
  animation: heroElIn .9s cubic-bezier(.25,.46,.45,.94) 1.1s both;
}

.hero-loading .hero-actions {
  opacity: 0;
  transform: translateY(12px);
  animation: heroElIn .9s cubic-bezier(.25,.46,.45,.94) 1.35s both;
}

.hero-loading .hero-logos {
  opacity: 0;
  transform: translateY(10px);
  animation: heroElIn .9s cubic-bezier(.25,.46,.45,.94) 1.55s both;
}

@keyframes heroElIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── DARK CANVAS — shared bg for hero + problema ── */
.dark-canvas {
  background: var(--c-bg);
  position: relative;
}

/* ─── NAVBAR ─────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 20px; left: 0; right: 0;
  z-index: 100;
  padding: 0 20px;
  pointer-events: none;
}

/* Top shield — hides content scrolling through the 20px gap above
   the floating navbar pill. Without this, you see the bottom edges
   of the prior section bleeding above the navbar, which reads as a
   visual bug when anchor-jumping between sections. The shield is a
   thin gradient that fades to transparent — works on both light
   and dark sections because it's color-neutral at the bottom. */
.nav-shield {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 99;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 8px 0 20px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  background: rgba(18,14,38,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 4px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events: all;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.nav-inner:hover {
  background: rgba(18,14,38,.86);
  border-color: rgba(155,142,240,.16);
  box-shadow:
    0 6px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* ── Wordmark ── */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity .25s ease;
}

.nav-wordmark {
  height: 22px;
  width: auto;
  display: block;
  transition: opacity .25s ease;
}

.nav-logo:hover .nav-wordmark {
  opacity: .65;
}

/* ── Links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  padding: 6px 14px;
  border-radius: 999px;
  transition: color var(--transition), background-color var(--transition);
}

.nav-links a:hover {
  color: var(--c-white);
}

.btn-nav-mobile-wrap {
  display: none;
}

.nav-links a.active {
  color: var(--c-white);
  font-weight: 600;
  background: rgba(255,255,255,.08);
}

/* ── CTA button — glass integrado ── */
.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* glass morado — mismo lenguaje que la pill pero con identidad propia */
  background: rgba(107,92,231,.25);
  color: var(--c-white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 0 16px;
  height: 34px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid rgba(155,142,240,.35);
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

/* shimmer sweep */
.btn-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,.12) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  transition: transform .6s ease;
}

.btn-nav:hover::before {
  transform: translateX(100%);
}

.btn-nav:hover {
  background: rgba(107,92,231,.5);
  border-color: rgba(155,142,240,.6);
  box-shadow: 0 0 20px rgba(107,92,231,.35), 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

.btn-nav:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-nav-arrow {
  flex-shrink: 0;
  opacity: .8;
  transition: transform .25s ease, opacity .25s ease;
}

.btn-nav:hover .btn-nav-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* ── Grupo derecho de la navbar · 3ra pasada (20/05/2026) ──
   Layout:  [Ingresar ▾]  [Agenda una demo gratis →]
   "Ingresar" reutiliza las mismas clases que el dropdown "Soluciones"
   (.nav-li--has-dd / .nav-link--toggle / .nav-dropdown / .nav-dd-item).
   Único override: anclar el dropdown a la derecha (porque "Ingresar" vive
   al borde derecho del navbar, no a la izquierda). */
.nav-cta-group {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Anclar el dropdown a la derecha cuando vive dentro de .nav-cta-ingresar */
.nav-cta-ingresar .nav-dropdown {
  left: auto !important;
  right: -4px !important;
  transform-origin: top right;
}

/* HUÉRFANO 3RA PASADA — revisar si eliminar.
   Reemplazado por las clases canónicas de Soluciones (Agustín 20/05/2026).
   Conservamos definiciones por si se reactiva el patrón ghost en otro lugar. */

/* ── Hamburger ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ─── HERO ───────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  padding: 120px 0 48px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .55;
}

.hero-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #4A3CAE 0%, transparent 70%);
  top: -150px; left: -100px;
}

.hero-orb--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #6B5CE7 0%, transparent 70%);
  top: 100px; right: 0;
  opacity: .35;
}

.hero-orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #9B8EF0 0%, transparent 70%);
  bottom: 50px; left: 40%;
  opacity: .2;
}

.hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .04;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.hero-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-light);
  background: rgba(155,142,240,.15);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 24px;
  display: inline-block;
}

.hero-headline {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--c-white);
  margin-bottom: 18px;
  letter-spacing: -.02em;
}

.hero-headline .hl-light {
  font-weight: 300;
  color: var(--c-white);
}

.hero-headline em {
  font-style: normal;
  color: var(--c-light);
  font-weight: 800;
  display: block;
}

.hero-subhead {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  margin-bottom: 32px;
  max-width: 440px;
}

.hero-subhead strong {
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.hero-logos {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.logos-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: block;
  margin-bottom: 14px;
}

.logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logos-carousel {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.15) 5%,
    rgba(0,0,0,.5) 10%,
    black 20%,
    black 80%,
    rgba(0,0,0,.5) 90%,
    rgba(0,0,0,.15) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.15) 5%,
    rgba(0,0,0,.5) 10%,
    black 20%,
    black 80%,
    rgba(0,0,0,.5) 90%,
    rgba(0,0,0,.15) 95%,
    transparent 100%
  );
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: logosScroll 28s linear infinite;
}

.brand-logo {
  height: 30px;
  width: 60px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity .25s ease;
}

.brand-logo:hover {
  opacity: 0.8;
}

@keyframes logosScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── HERO VISUAL — Layered Stack ───────────────── */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* ── Hero Stack — Layered 3-card system ── */
.hero-stack {
  position: relative;
  width: 480px;
  height: 500px;
  flex-shrink: 0;
}

/* Glow behind stack */
.stack-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(107,92,231,.3) 0%, rgba(74,60,174,.15) 40%, transparent 70%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
}

/* Shared layer styles */
.stack-layer {
  position: absolute;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.layer-card {
  background: rgba(22,17,48,.94);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 24px 64px rgba(0,0,0,.5),
    0 0 0 1px rgba(107,92,231,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── LAYER 1: Dashboard (back) ── */
.stack-layer--back {
  top: -20px;
  right: -110px;
  z-index: 1;
  transform: scale(.82);
  opacity: .65;
}

.layer-dashboard {
  width: 320px;
  padding: 20px;
  background: rgba(22,17,48,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.lc-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.lc-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.lc-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  letter-spacing: .03em;
  white-space: nowrap;
}

.lc-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.lc-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lc-kpi-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -.03em;
}

.lc-kpi-label {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lc-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lc-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
}

.lc-bar-track {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}

.lc-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--c-light);
  transform-origin: left;
}

.lc-bar-fill--mid { background: var(--c-mid); }
.lc-bar-fill--deep { background: var(--c-main); }

/* ── LAYER 2: App del apoderado (middle) ── */
.stack-layer--mid {
  top: 40px;
  right: 40px;
  z-index: 2;
}

.layer-app {
  width: 300px;
  padding: 20px;
  background: rgba(22,17,48,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.app-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-greeting-block {
  display: flex;
  flex-direction: column;
}

.app-hello {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-white);
}

.app-school {
  font-size: 9px;
  color: rgba(255,255,255,.35);
  font-weight: 500;
}

.app-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.app-balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-balance-label {
  font-size: 9px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
}

.app-balance-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -.02em;
}

.app-balance-btn {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

.app-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.app-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.app-service-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-light);
}

.as-food  { background: rgba(155,142,240,.12); }
.as-bus   { background: rgba(107,92,231,.12); }
.as-event { background: rgba(74,60,174,.15); }
.as-pay   { background: rgba(155,142,240,.12); }

.app-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-activity-title {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.app-activity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
}

.app-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-act-dot--green { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.5); }
.app-act-dot--blue  { background: var(--c-mid); box-shadow: 0 0 6px rgba(107,92,231,.5); }

.app-act-text {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  flex: 1;
}

.app-act-time {
  font-size: 9px;
  color: rgba(255,255,255,.3);
  font-weight: 500;
}

/* ── LAYER 3: Notification (front) ── */
.stack-layer--front {
  bottom: 60px;
  left: 0;
  z-index: 4;
}

.layer-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-color: rgba(155,142,240,.3);
  box-shadow:
    0 16px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(107,92,231,.12),
    0 0 40px rgba(107,92,231,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.notif-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(107,92,231,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(107,92,231,.25);
}

.notif-content strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 2px;
}

.notif-content span {
  font-size: 10px;
  color: rgba(255,255,255,.4);
}

/* ── Connection lines between layers ── */
.stack-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.connector-line {
  stroke-dashoffset: 0;
  animation: dashFlow 4s linear infinite;
}

.connector-line--2 {
  animation-delay: 1.5s;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -40; }
}

/* ── Flow dots (data flowing between layers) ── */
.flow-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.flow-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-light);
  box-shadow: 0 0 8px rgba(155,142,240,.6);
  opacity: 0;
  /* Refactor perf: ahora la animación usa `transform` (GPU) en vez
     de `top/right` (que causaba reflow 60fps × 4s = 240 reflows por
     loop). will-change promueve a layer compositada. */
  will-change: transform, opacity;
}

.flow-dot--1 {
  top: 60px;
  right: 100px;
  animation: flowPath1 4s ease-in-out infinite;
}

.flow-dot--2 {
  top: 120px;
  right: 60px;
  animation: flowPath2 4.5s ease-in-out 1.2s infinite;
}

/* Keyframes ahora animan transform (GPU-friendly) · delta calculado
   desde top/right inicial fijado en .flow-dot--1/--2 */
@keyframes flowPath1 {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .7; }
  50%  { transform: translate(-120px, 180px); opacity: .5; }
  85%  { opacity: .6; }
  100% { transform: translate(-240px, 340px); opacity: 0; }
}

@keyframes flowPath2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: .5; }
  60%  { transform: translate(-140px, 180px); opacity: .4; }
  100% { transform: translate(-240px, 310px); opacity: 0; }
}

/* ── Stack entry animations ── */
.hero-stack:not(.animate-in) .stack-layer {
  opacity: 0;
}

.hero-stack.animate-in .stack-layer--back {
  animation: stackLayerIn 1s cubic-bezier(.25,.46,.45,.94) .15s both;
}

.hero-stack.animate-in .stack-layer--mid {
  animation: stackLayerIn 1s cubic-bezier(.25,.46,.45,.94) .4s both;
}

.hero-stack.animate-in .stack-layer--front {
  animation: stackFrontIn .9s cubic-bezier(.25,.46,.45,.94) .75s both;
}

.hero-stack.animate-in .lc-bar-fill {
  animation: barGrow 1s cubic-bezier(.25,.46,.45,.94) 1s both;
}

@keyframes stackLayerIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Override for back layer final state */
.hero-stack.animate-in .stack-layer--back {
  animation-name: stackBackIn;
}

@keyframes stackBackIn {
  from { opacity: 0; transform: scale(.76) translateY(32px); }
  to   { opacity: .65; transform: scale(.82); }
}

@keyframes stackFrontIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── PROBLEMA ───────────────────────────────────── */
.section-problema {
  padding: 0;
  background: transparent;
  position: relative;
}

/* ── Background elements (kept for dark canvas ambience) ── */
.problema-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Boundary bloom — extends DOWN past problema's bottom edge deep into
   productos. Pairs with .productos-bg::before to keep the ambient
   continuous across the boundary (no horizontal cut perception).
   .section-problema has no overflow:hidden, so the bloom can spill below. */
/* Was a heavy ellipse centered ON the boundary (alpha .42 at center) —
   that strong centered band itself read as a horizontal cut. Now reduced
   to a soft spread ambient with a lower peak alpha and a much taller
   ellipse, so no concentrated band appears anywhere. */
.problema-bg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -540px;
  transform: translateX(-50%);
  width: min(1600px, 130vw);
  height: 1080px;
  background: radial-gradient(ellipse 48% 50% at 50% 50%,
    rgba(107,92,231,.18) 0%,
    rgba(107,92,231,.12) 30%,
    rgba(74,60,174,.06) 55%,
    transparent 85%);
  pointer-events: none;
}

/* Off-center accent that breaks any residual horizontal symmetry. */
.problema-bg::before {
  content: '';
  position: absolute;
  left: 18%;
  bottom: -380px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155,142,240,.12) 0%,
    rgba(107,92,231,.06) 40%,
    transparent 75%);
  pointer-events: none;
}

/* problema-fade-bottom unused */
.problema-fade-bottom { display: none; }

.section-problema .container {
  padding-top: 80px;
  padding-bottom: 96px;
  position: relative;
  z-index: 2;
}

/* ── Problema header — centered, smaller than hero ── */
.problema-header {
  text-align: center;
  margin-bottom: 40px;
}

.problema-header .section-kicker {
  color: var(--c-light);
  background: rgba(155,142,240,.12);
}

.problema-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-white);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}

.problema-title-light {
  font-weight: 400;
  color: rgba(255,255,255,.7);
}

.problema-title .hl {
  font-style: normal;
  color: var(--c-light);
}

.problema-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  max-width: 520px;
  margin: 0 auto;
}

.problema-sub strong {
  color: rgba(255,255,255,.75);
  font-weight: 600;
}

/* ── Glassmorphism card ── */
.problema-card {
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  overflow: hidden;
  box-shadow:
    0 8px 48px rgba(107,92,231,.35),
    0 24px 64px rgba(74,60,174,.22),
    inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(45,37,96,.55) 0%,
    rgba(74,60,174,.35) 40%,
    rgba(19,16,42,.6) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(155,142,240,.18);
}

/* ── Soft gradient orbs inside card ── */
.card-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0;
  animation: orbBreath 8s ease-in-out infinite;
}

/* #9B8EF0 — light purple glow top-left */
.sparkle--1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(155,142,240,.18) 0%, transparent 70%);
  top: -30px; left: -30px;
  animation-delay: 0s;
}

/* #6B5CE7 — mid purple glow bottom */
.sparkle--2 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(107,92,231,.15) 0%, transparent 70%);
  bottom: -20px; right: 20%;
  animation-delay: 2.5s;
}

/* #9B8EF0 — accent glow right */
.sparkle--3 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(155,142,240,.12) 0%, transparent 70%);
  top: 25%; right: 5%;
  animation-delay: 5s;
}

/* #4A3CAE — deep accent center */
.sparkle--4 {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(74,60,174,.14) 0%, transparent 70%);
  bottom: 15%; left: 35%;
  animation-delay: 3.5s;
}

@keyframes orbBreath {
  0%, 100% { opacity: 0; transform: scale(.8); }
  30%      { opacity: 1; }
  50%      { opacity: 1; transform: scale(1.1); }
  70%      { opacity: 1; }
}

/* ── Arrow divider ── */
.problema-card-divider {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.problema-card-divider::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,.2);
  transform: translateX(-50%);
}

.divider-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-light);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(107,92,231,.2), inset 0 1px 0 rgba(255,255,255,.08);
  animation: arrowPulse 2.5s ease-in-out infinite;
}

/* Pulse only via transform + opacity — animating box-shadow forces a
   per-frame paint and is one of the worst causes of scroll jank. */
@keyframes arrowPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.08); opacity: 1;   }
}

/* ── Left side: Chaos grid ── */
.problema-card-left {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.chaos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.chaos-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1),
              background .22s cubic-bezier(.4,0,.2,1);
  position: relative;
  cursor: default;
}

/* Disorder tilts */
.chaos-item--1 { transform: rotate(-1.5deg); }
.chaos-item--2 { transform: rotate(1deg) translateY(2px); }
.chaos-item--3 { transform: rotate(-0.8deg) translateY(-2px); }
.chaos-item--4 { transform: rotate(1.2deg) translateY(2px); }
.chaos-item--5 { transform: rotate(-1deg) translateY(-2px); }
.chaos-item--6 { transform: rotate(0.8deg); }

/* Hover — smooth lift + purple glow */
.chaos-item:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(107,92,231,.22), inset 0 1px 0 rgba(255,255,255,.12);
  border-color: rgba(155,142,240,.3);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}

.chaos-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}

.chaos-item:hover .chaos-icon {
  transform: scale(1.12) rotate(-3deg);
}

.ci--app   { background: rgba(155,142,240,.18); color: #c4bbf7; }
.ci--bus   { background: rgba(107,92,231,.18); color: #c4bbf7; }
.ci--wsp   { background: rgba(155,142,240,.15); color: #c4bbf7; }
.ci--sheet { background: rgba(74,60,174,.22); color: #c4bbf7; }
.ci--mail  { background: rgba(155,142,240,.15); color: #c4bbf7; }
.ci--cash  { background: rgba(107,92,231,.18); color: #c4bbf7; }

/* ── Right side: Solution ── */
.problema-card-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 32px;
  position: relative;
}


.solution-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.solution-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-mid), var(--c-main));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  box-shadow: 0 8px 24px rgba(107,92,231,.3);
  margin-bottom: 6px;
  transition: transform .4s ease, box-shadow .4s ease;
}

.solution-block:hover .solution-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 12px 32px rgba(107,92,231,.4);
}

.solution-logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--c-white);
  letter-spacing: -.02em;
}

.solution-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

.solution-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.sol-feat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-light);
}

.sol-feat svg { flex-shrink: 0; color: var(--c-light); }


/* ── Problema entrance animations ──
   will-change promueve a layer GPU para que el filter:blur
   no cause repaint en cada frame. Como son animaciones one-shot,
   el cost de tener el layer permanente es despreciable. */
.problema-header .section-kicker,
.problema-header .problema-title,
.problema-header .problema-sub {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  will-change: opacity, transform, filter;
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
              transform .9s cubic-bezier(.25,.46,.45,.94),
              filter .9s cubic-bezier(.25,.46,.45,.94);
}

.problema-header .section-kicker.anim-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.problema-header .problema-title.anim-in { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .12s; }
.problema-header .problema-sub.anim-in { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .24s; }

/* Card fades in, then children animate individually */
.problema-card {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94) .35s,
              transform .8s cubic-bezier(.25,.46,.45,.94) .35s;
}

.problema-card.anim-in { opacity: 1; transform: translateY(0); }

/* Each chaos item enters with its own delay + lands on its tilt */
.problema-card .chaos-item {
  opacity: 0;
  transform: scale(.7) rotate(0deg);
  filter: blur(4px);
  will-change: opacity, transform, filter;
  transition: opacity .6s cubic-bezier(.25,.46,.45,.94),
              transform .6s cubic-bezier(.25,.46,.45,.94),
              filter .6s cubic-bezier(.25,.46,.45,.94);
}

/* After entrance animation completes, strip delays for instant hover.
   También libera el GPU layer (will-change: auto) ya que no hay más
   filter:blur animado en estos elementos. */
.problema-card.anim-done .chaos-item {
  will-change: auto;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1),
              background .22s cubic-bezier(.4,0,.2,1) !important;
  transition-delay: 0s !important;
}
.problema-card.anim-done { will-change: auto; }
.problema-card.anim-done .solution-block { will-change: auto; }

.problema-card.anim-in .chaos-item--1 { opacity: 1; transform: rotate(-1.5deg); filter: blur(0); transition-delay: .55s; }
.problema-card.anim-in .chaos-item--2 { opacity: 1; transform: rotate(1deg) translateY(2px); filter: blur(0); transition-delay: .65s; }
.problema-card.anim-in .chaos-item--3 { opacity: 1; transform: rotate(-0.8deg) translateY(-2px); filter: blur(0); transition-delay: .75s; }
.problema-card.anim-in .chaos-item--4 { opacity: 1; transform: rotate(1.2deg) translateY(2px); filter: blur(0); transition-delay: .85s; }
.problema-card.anim-in .chaos-item--5 { opacity: 1; transform: rotate(-1deg) translateY(-2px); filter: blur(0); transition-delay: .95s; }
.problema-card.anim-in .chaos-item--6 { opacity: 1; transform: rotate(0.8deg); filter: blur(0); transition-delay: 1.05s; }

/* Divider arrow */
.problema-card .divider-arrow {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease 1.1s, transform .5s cubic-bezier(.25,.46,.45,.94) 1.1s;
}

.problema-card.anim-in .divider-arrow { opacity: 1; transform: scale(1); }

/* Solution block enters after chaos */
.problema-card .solution-block {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(3px);
  will-change: opacity, transform, filter;
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94) 1.2s,
              transform .8s cubic-bezier(.25,.46,.45,.94) 1.2s,
              filter .8s cubic-bezier(.25,.46,.45,.94) 1.2s;
}

.problema-card.anim-in .solution-block { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Check marks draw animation */
.problema-card .sol-feat svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .6s cubic-bezier(.25,.46,.45,.94);
}

.problema-card.anim-in .sol-feat:nth-child(1) svg path { stroke-dashoffset: 0; transition-delay: 1.5s; }
.problema-card.anim-in .sol-feat:nth-child(2) svg path { stroke-dashoffset: 0; transition-delay: 1.65s; }
.problema-card.anim-in .sol-feat:nth-child(3) svg path { stroke-dashoffset: 0; transition-delay: 1.8s; }

/* Orbs kept for bg ambience */
.problema-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
}

/* ─── End of bg elements — new card styles below ─── */

.problema-orb--1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(74,60,174,.35) 0%, transparent 70%);
  top: -200px;
  right: -80px;
  opacity: .8;
  animation: orbDrift1 12s ease-in-out infinite alternate;
}

.problema-orb--2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(107,92,231,.25) 0%, transparent 70%);
  bottom: -80px;
  left: -60px;
  opacity: .7;
  animation: orbDrift2 15s ease-in-out infinite alternate;
}

.problema-orb--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(155,142,240,.18) 0%, transparent 70%);
  top: 40%;
  left: 35%;
  opacity: .6;
  animation: orbDrift3 10s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-30px, 20px); }
}

@keyframes orbDrift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(25px, -15px); }
}

@keyframes orbDrift3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-15px, 10px) scale(1.08); }
}

.problema-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .04;
}

/* Subtle dot grid pattern */
.problema-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(155,142,240,.1) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Floating particles */
.problema-particles {
  position: absolute;
  inset: 0;
}

.p-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-light);
  opacity: 0;
}

.p-particle--1 { top: 12%; left: 8%;   animation: particleFloat 6s ease-in-out 0s infinite; }
.p-particle--2 { top: 55%; left: 82%;  animation: particleFloat 8s ease-in-out 1s infinite; }
.p-particle--3 { top: 28%; left: 52%;  animation: particleFloat 7s ease-in-out 2s infinite; }
.p-particle--4 { top: 72%; left: 22%;  animation: particleFloat 9s ease-in-out 3s infinite; }
.p-particle--5 { top: 42%; left: 92%;  animation: particleFloat 6.5s ease-in-out 1.5s infinite; }
.p-particle--6 { top: 18%; left: 68%;  animation: particleFloat 7.5s ease-in-out .5s infinite; }
.p-particle--7 { top: 65%; left: 45%;  animation: particleFloat 8.5s ease-in-out 2.5s infinite; }
.p-particle--8 { top: 85%; left: 75%;  animation: particleFloat 6s ease-in-out 4s infinite; }

@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: .5; }
  50%  { opacity: .7; transform: translateY(-24px) scale(1.2); }
  75%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(-48px) scale(.5); }
}

/* problema-fade-bottom unused */
.problema-fade-bottom { display: none; }

.section-problema .container {
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
  z-index: 2;
}

.problema-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Old problema styles removed — new card-based layout above */

/* ─── PRODUCTOS ──────────────────────────────────── */
/* ═══════════════════════════════════════════
   PRODUCTOS — Showcase v3
   ═══════════════════════════════════════════ */

/* Respect users who request reduced motion (vestibular sensitivity, epilepsy, preference).
   Pauses all decorative idle animations in the Productos section while preserving
   intentional state transitions (open/close, hover) at much shorter durations. */
@media (prefers-reduced-motion: reduce) {
  .section-productos *,
  .section-productos *::before,
  .section-productos *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .productos-ray,
  .productos-sweep,
  .productos-orb,
  .prod-star,
  .productos-lattice,
  .campus-map-path,
  .campus-map-pulse,
  .campus-map-dot--c,
  .health-soon-pulse,
  .health-soon-heart,
  .connect-phone-bell-dot,
  .connect-feed-check,
  .connect-feed-live,
  .featured-badge-dot,
  .soon-badge-dot,
  .product-pills::after {
    animation: none !important;
  }
}

.section-productos {
  padding: 48px 0 120px;
  background: transparent;
  position: relative;
  /* No overflow:hidden — was clipping productos-bg::before's upward
     extension, which made decoration start abruptly at the section's
     top edge and read as a horizontal cut vs problema. With visible
     overflow the bloom bleeds into problema and the boundary dissolves. */
  /* scroll-margin alineado con el navbar (52px + 20px top + 12px holgura) →
     al llegar desde el CTA del hero, el kicker + título + tabs + top del
     mockup quedan todos visibles en una sola pantalla. */
  scroll-margin-top: 64px;
}

.productos-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* Soft purple bloom at the very top of productos — pairs with
   .problema-bg::after to dissolve the section boundary into a continuous
   ambient halo (no more horizontal cut line). Positioned mostly inside
   productos with a small spillover above (clipped by overflow:hidden). */
.productos-bg::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -540px;
  transform: translateX(-50%);
  width: min(1600px, 130vw);
  height: 1080px;
  background: radial-gradient(ellipse 48% 50% at 50% 50%,
    rgba(155,142,240,.16) 0%,
    rgba(155,142,240,.10) 30%,
    rgba(107,92,231,.06) 55%,
    transparent 85%);
  pointer-events: none;
}

/* Dark mask at productos's bottom — productos has many decorative
   layers (orbs, sweep, rays, stars, lattice) that all add subtle
   purple tint throughout the section, INCLUDING right up to the
   bottom edge. Como::before begins with pure #0E0C1E, so the seam
   was "tinted dark above / pure dark below" → eye reads as a line.
   This pseudo-element fades any residual ambient back to solid
   #0E0C1E in the last band, mirroring como::before's gradient stops
   so the dark→atmospheric ramp is continuous across the section seam.
   z-index 1 so it sits above the orbs (which are inside .productos-bg
   at z-index 0) but below the section .container content. */
.productos-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: radial-gradient(ellipse 140% 95% at 50% 108%,
    #0E0C1E 0%,
    #0E0C1E 40%,
    rgba(14,12,30,.85) 60%,
    rgba(14,12,30,.45) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.productos-orb {
  position: absolute; border-radius: 50%; filter: blur(24px);
}

.productos-orb--1 {
  width: 720px; height: 520px;
  background: radial-gradient(ellipse, rgba(139,92,246,.22) 0%, transparent 70%);
  top: 6%; left: 18%;
  animation: prodOrb1 16s ease-in-out infinite;
}

.productos-orb--2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(74,60,174,.16) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation: prodOrb2 20s ease-in-out infinite;
}

.productos-orb--3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(192,132,252,.13) 0%, transparent 70%);
  top: 38%; left: -120px;
  animation: prodOrb3 24s ease-in-out infinite;
}

.productos-orb--4 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(155,142,240,.1) 0%, transparent 70%);
  top: 58%; right: 22%;
  animation: prodOrb4 19s ease-in-out infinite;
}

@keyframes prodOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 30px) scale(1.06); }
  66% { transform: translate(-40px, 50px) scale(.96); }
}
@keyframes prodOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, -40px) scale(1.1); }
}
@keyframes prodOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .7; }
  50% { transform: translate(60px, -40px) scale(1.12); opacity: 1; }
}
@keyframes prodOrb4 {
  0%, 100% { transform: translate(0, 0) scale(.95); opacity: .55; }
  50% { transform: translate(-50px, 30px) scale(1.08); opacity: 1; }
}

/* Slow rotating conic sweep — gives a subtle "energy" feeling */
.productos-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 1400px; height: 1400px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(155,142,240,.05) 60deg,
    transparent 120deg,
    transparent 240deg,
    rgba(192,132,252,.04) 300deg,
    transparent 360deg
  );
  filter: blur(20px);
  opacity: .6;
  animation: prodSweep 38s linear infinite;
  pointer-events: none;
}
@keyframes prodSweep {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Diagonal aurora rays — soft beams of light drifting across (sides only) */
.productos-ray {
  position: absolute;
  width: 260px; height: 140%;
  top: -20%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(155,142,240,.12) 25%,
    rgba(192,132,252,.18) 50%,
    rgba(155,142,240,.1) 75%,
    transparent 100%
  );
  filter: blur(35px);
  transform-origin: center;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Pinned to left edge — out of the title's path */
.productos-ray--1 {
  left: -2%;
  transform: rotate(-18deg);
  animation: prodRayDrift1 22s ease-in-out infinite;
}
/* Pinned to right edge */
.productos-ray--2 {
  right: -2%;
  transform: rotate(14deg);
  animation: prodRayDrift2 28s ease-in-out infinite;
  animation-delay: -7s;
  opacity: .8;
}
/* Lower-right accent, well below title */
.productos-ray--3 {
  right: 14%;
  top: 30%;
  height: 90%;
  transform: rotate(-22deg);
  animation: prodRayDrift3 26s ease-in-out infinite;
  animation-delay: -12s;
  opacity: .55;
  width: 200px;
}
@keyframes prodRayDrift1 {
  0%, 100% { transform: rotate(-18deg) translateX(0) scaleY(1); opacity: .55; }
  50% { transform: rotate(-22deg) translateX(60px) scaleY(1.08); opacity: 1; }
}
@keyframes prodRayDrift2 {
  0%, 100% { transform: rotate(14deg) translateX(0) scaleY(1); opacity: .45; }
  50% { transform: rotate(18deg) translateX(-80px) scaleY(1.06); opacity: .9; }
}
@keyframes prodRayDrift3 {
  0%, 100% { transform: rotate(-22deg) translateX(0) scaleY(1); opacity: .35; }
  50% { transform: rotate(-26deg) translateX(40px) scaleY(1.1); opacity: .75; }
}

/* Floating star field — subtle twinkling points */
.productos-stars {
  position: absolute; inset: 0; pointer-events: none;
}
.prod-star {
  position: absolute; display: block;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(196,181,253,.85);
  box-shadow: 0 0 6px rgba(196,181,253,.6);
  opacity: 0;
}
.prod-star--1  { top:  9%; left: 14%; animation: prodStarTwinkle 7s  ease-in-out  .0s infinite; }
.prod-star--2  { top: 18%; left: 78%; animation: prodStarTwinkle 9s  ease-in-out 1.2s infinite; }
.prod-star--3  { top: 32%; left: 22%; animation: prodStarTwinkle 8s  ease-in-out 2.5s infinite; }
.prod-star--4  { top: 26%; left: 56%; animation: prodStarTwinkle 6s  ease-in-out  .7s infinite; }
.prod-star--5  { top: 44%; left: 88%; animation: prodStarTwinkle 7.5s ease-in-out 3.1s infinite; }
.prod-star--6  { top: 52%; left:  6%; animation: prodStarTwinkle 9s  ease-in-out 1.8s infinite; }
.prod-star--7  { top: 62%; left: 38%; animation: prodStarTwinkle 8s  ease-in-out 4.0s infinite; }
.prod-star--8  { top: 70%; left: 72%; animation: prodStarTwinkle 6.5s ease-in-out 2.3s infinite; width: 3px; height: 3px; }
.prod-star--9  { top: 78%; left: 18%; animation: prodStarTwinkle 7s  ease-in-out  .4s infinite; }
.prod-star--10 { top: 84%; left: 60%; animation: prodStarTwinkle 9.5s ease-in-out 3.6s infinite; }
.prod-star--11 { top: 14%; left: 42%; animation: prodStarTwinkle 8s  ease-in-out 5.0s infinite; width: 1.5px; height: 1.5px; }
.prod-star--12 { top: 90%; left: 92%; animation: prodStarTwinkle 7s  ease-in-out 1.5s infinite; }

@keyframes prodStarTwinkle {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.5); }
  20%      { opacity: .65; }
  50%      { opacity: 1; transform: translate(6px, -10px) scale(1.15); }
  80%      { opacity: .5; }
}

/* Breathing dot lattice — masked tighter, more discreet */
.productos-lattice {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(155,142,240,.14) 0.6px, transparent 1.2px);
  background-size: 52px 52px;
  background-position: 0 0;
  opacity: .25;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
  animation: prodLattice 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes prodLattice {
  0%, 100% { opacity: .18; background-position: 0 0; }
  50%      { opacity: .32; background-position: 26px 26px; }
}

/* Was a literal 1px gradient line that read as a hard horizontal cut between
   problema and productos. Hidden — the soft bloom on .productos-bg::before
   and .problema-bg::after now carries the boundary instead. */
.productos-divider-top { display: none; }

.section-productos .section-header { position: relative; z-index: 2; margin-bottom: 44px; }
.section-productos .section-title { color: var(--c-white); font-size: 26px; font-weight: 300; }
.section-productos .section-title .hl { font-weight: 600; }
.section-productos .section-title .hl { font-style: normal; color: var(--c-light); }
.section-productos .section-body { color: rgba(255,255,255,.45); }
.section-productos .section-kicker { color: var(--c-light); background: rgba(155,142,240,.12); }
.section-productos .vs-table { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════
   PRODUCT PILLS — Three-column layout
   ═══════════════════════════════════════════ */
.product-pills {
  display: grid;
  grid-template-columns: 1.4fr 1fr .55fr;
  gap: 24px;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}

/* Subtle connector line above the pills — sells the "ecosystem" idea */
.product-pills::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,142,240,.05) 8%,
    rgba(155,142,240,.4) 50%,
    rgba(155,142,240,.05) 92%,
    transparent 100%
  );
  pointer-events: none;
}
.product-pills::after {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-light);
  box-shadow: 0 0 14px rgba(155,142,240,.7), 0 0 0 0 rgba(155,142,240,.5);
  animation: pillsConnectorPulse 3s ease-out infinite;
  pointer-events: none;
}
@keyframes pillsConnectorPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(155,142,240,.7), 0 0 0 0 rgba(155,142,240,.5); }
  60%      { box-shadow: 0 0 14px rgba(155,142,240,.7), 0 0 0 8px rgba(155,142,240,0); }
}

/* ── Base pill ── */
.pill {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  z-index: 2;
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
}

.pill:hover { transform: translateY(-6px) scale(1.01); }

.pill-glow {
  position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.pill:hover .pill-glow { opacity: 1; }

.pill-border {
  position: absolute; inset: -1px; border-radius: inherit; z-index: 0;
  background: conic-gradient(from 0deg, rgba(107,92,231,.4), rgba(155,142,240,.1), rgba(74,60,174,.3), rgba(155,142,240,.2), rgba(107,92,231,.4));
  animation: rotateBorder 6s linear infinite;
  opacity: .25;
  transition: opacity .5s ease;
}
.pill:hover .pill-border { opacity: .7; }

/* Connect gets the vibrant highlighted border */
.pill-border--connect {
  background: conic-gradient(from 0deg, rgba(139,92,246,.7), rgba(192,132,252,.25), rgba(109,40,217,.6), rgba(192,132,252,.35), rgba(139,92,246,.7));
  opacity: .45;
}
.pill--connect:hover .pill-border--connect { opacity: 1; }

/* Animar transform en lugar de hue-rotate — visualmente equivalente
   (el conic gradient gira con el elemento) pero ~70% más barato.
   hue-rotate filter dispara repaint cada frame, transform rotate
   solo recompone (cheaper). */
@keyframes rotateBorder {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pill .card-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .4s ease; border-radius: inherit;
}
.pill:hover .card-spotlight { opacity: 1; }

/* ── Pill inner ── */
.pill-inner {
  position: relative; z-index: 2;
  background: rgba(18,14,42,.92);
  border: 1px solid rgba(107,92,231,.12);
  border-radius: inherit;
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  gap: 0;
  height: 100%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .4s ease, background .4s ease;
}
.pill:hover .pill-inner { border-color: rgba(107,92,231,.3); }

/* Connect = highlighted pill */
.pill-inner--connect {
  background: rgba(28,14,56,.95);
  border-color: rgba(139,92,246,.2);
}
.pill--connect:hover .pill-inner--connect { border-color: rgba(139,92,246,.45); }

/* Health = muted */
.pill-inner--health {
  background: rgba(18,14,42,.85);
  border-color: rgba(155,142,240,.08);
  opacity: .5;
  transition: opacity .5s ease, border-color .4s ease;
}
.pill--health:hover .pill-inner--health { opacity: .75; border-color: rgba(155,142,240,.2); }

/* ── Pill content ── */
.pill-content {
  display: flex; flex-direction: column; gap: 10px;
}

.pill-top-row {
  display: flex; align-items: center; gap: 12px;
}

.pill-top-row--split {
  justify-content: space-between; gap: 14px;
  margin-bottom: 4px;
}

img.pill-logo {
  height: 32px !important; width: auto !important;
  max-width: 135px !important; object-fit: contain; flex-shrink: 0;
}

/* Connect logo — sized to match Campus logo visually */
img.pill-logo--lg {
  height: 32px !important;
  max-width: 128px !important;
  width: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(139,92,246,.2));
}

/* Meta chip on Campus pill (right side of top-row) */
.meta-chip {
  font-size: 9px; font-weight: 700; padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(155,142,240,.1); color: rgba(196,181,253,.85);
  border: 1px solid rgba(155,142,240,.2);
  white-space: nowrap;
  letter-spacing: .02em;
}

.featured-badge {
  font-size: 9px; font-weight: 700; padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(139,92,246,.2); color: #c084fc;
  border: 1px solid rgba(139,92,246,.3);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}

.featured-badge-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #8b5cf6;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139,92,246,.4); }
  50% { opacity: .7; box-shadow: 0 0 0 5px rgba(139,92,246,0); }
}

/* ── Typography ── */
.pill-headline {
  font-size: 18px; font-weight: 400; line-height: 1.25; color: rgba(255,255,255,.85);
  margin-top: 2px;
}
.pill-headline strong {
  font-weight: 700; color: var(--c-white);
}
.pill-headline em {
  font-style: normal; font-weight: 300;
  background: linear-gradient(135deg, var(--c-light), #c4bbff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Connect headline uses vibrant gradient */
.pill-headline--connect em {
  font-weight: 300;
  background: linear-gradient(135deg, #c084fc, #e9d5ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.pill-headline--health {
  font-size: 17px;
}
.pill-headline--health em {
  background: linear-gradient(135deg, rgba(155,142,240,.7), rgba(200,192,255,.7));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.pill-desc {
  font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.45); font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pill--health .pill-desc { font-size: 11.5px; letter-spacing: -.01em; color: rgba(255,255,255,.58); }
.pill-desc strong { color: rgba(255,255,255,.75); font-weight: 600; }

.pill-cta {
  align-self: flex-start; margin-top: 6px; font-size: 12px; padding: 8px 20px;
}

.pill-cta--wide {
  align-self: stretch;
  display: block;
  width: 86%;
  margin: 10px auto 2px auto;
  text-align: center;
  font-size: 12px;
  padding: 9px 20px;
  letter-spacing: .01em;
}

.pill-cta-link {
  font-size: 12px; font-weight: 600; color: var(--c-light);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  transition: color .3s ease, gap .3s ease;
}
.pill-cta-link:hover { color: var(--c-white); gap: 12px; }

.pill-health-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(155,142,240,.1); border: 1px solid rgba(155,142,240,.18);
  display: flex; align-items: center; justify-content: center;
  color: #c4b5fd;
  flex-shrink: 0;
}

.soon-badge-inline {
  font-size: 9px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(155,142,240,.08); color: rgba(155,142,240,.6);
  border: 1px solid rgba(155,142,240,.1); white-space: nowrap;
}

.soon-pill {
  display: inline-block; font-size: 10px; font-weight: 600;
  color: rgba(155,142,240,.45);
  background: rgba(155,142,240,.05);
  padding: 4px 12px; border-radius: var(--r-pill);
  margin-top: auto; border: 1px solid rgba(155,142,240,.08);
}

/* ── Pill glows ── */
.pill--connect .pill-glow {
  background: radial-gradient(ellipse at 50% 60%, rgba(139,92,246,.2), transparent 65%);
}
.pill--connect:hover { box-shadow: 0 24px 60px rgba(139,92,246,.22); }

.pill--campus .pill-glow {
  background: radial-gradient(ellipse at 50% 50%, rgba(107,92,231,.12), transparent 65%);
}
.pill--campus:hover { box-shadow: 0 18px 48px rgba(107,92,231,.14); }

.pill--health .pill-glow {
  background: radial-gradient(ellipse at 50% 50%, rgba(155,142,240,.08), transparent 65%);
}
.pill--health:hover { box-shadow: 0 10px 28px rgba(155,142,240,.06); }

/* ═══════════════════════════════════════════
   CONNECT MOCKUP — Phone with activity feed
   Value: "todo lo que pasa en el colegio, en una app"
   ═══════════════════════════════════════════ */
.pill-mockup {
  margin: 22px 0 22px;
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0;
}

.pill-mockup--connect {
  margin: 22px 0 22px;
  align-items: center;
  min-height: 0;
}

.connect-mockup {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto;
}

/* Static halo removed — hover glow on .connect-phone is preserved */

.connect-phone {
  background: linear-gradient(180deg, rgba(48,28,92,.96), rgba(26,16,58,.96));
  border: 1px solid rgba(139,92,246,.32);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.1) inset, 0 0 28px rgba(139,92,246,.18);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
}
.pill--connect:hover .connect-phone {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 26px 60px rgba(139,92,246,.25), 0 0 0 1px rgba(139,92,246,.12) inset;
}

.connect-phone-body {
  padding: 12px 14px 13px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Header */
.connect-phone-header {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 10px;
  margin: -4px -6px 4px;
  border-bottom: 1px solid rgba(139,92,246,.14);
  background: linear-gradient(180deg, rgba(139,92,246,.18) 0%, rgba(139,92,246,0) 100%);
  border-radius: 12px 12px 0 0;
}
.connect-phone-greet {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.connect-phone-greet-label {
  font-size: 9px; color: rgba(255,255,255,.4); font-weight: 500;
}
.connect-phone-greet-name {
  font-size: 12px; font-weight: 700; color: var(--c-white);
  letter-spacing: -.01em;
}
.connect-phone-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 8px rgba(139,92,246,.35);
  flex-shrink: 0;
}
.connect-phone-bell {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(196,181,253,.85);
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.16);
  flex-shrink: 0;
}
.connect-phone-bell-dot {
  position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 1.5px rgba(28,18,58,.95), 0 0 0 0 rgba(248,113,113,.55);
  animation: connectBellDot 2.6s ease-out infinite;
}
@keyframes connectBellDot {
  0%   { box-shadow: 0 0 0 1.5px rgba(28,18,58,.95), 0 0 0 0 rgba(248,113,113,.55); }
  70%  { box-shadow: 0 0 0 1.5px rgba(28,18,58,.95), 0 0 0 6px rgba(248,113,113,0); }
  100% { box-shadow: 0 0 0 1.5px rgba(28,18,58,.95), 0 0 0 0 rgba(248,113,113,0); }
}
.connect-phone-bell {
  transition: transform .4s cubic-bezier(.22,1,.36,1), color .3s ease, background .3s ease;
}
.pill--connect:hover .connect-phone-bell {
  background: rgba(139,92,246,.2);
  color: #e9d5ff;
  animation: connectBellShake .8s ease-in-out;
}
@keyframes connectBellShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}

/* Hero feed card — full width, prominent */
.connect-feed-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.16);
  transition: background .3s ease, border-color .3s ease;
  position: relative;
}
.pill--connect:hover .connect-feed-hero {
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.3);
  transform: translateX(3px);
}
.connect-feed-hero { transition: background .3s ease, border-color .3s ease, transform .55s cubic-bezier(.22,1,.36,1); }

/* Bottom row: 2 cards side by side */
.connect-feed-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}

.connect-feed-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 10px;
  background: rgba(139,92,246,.05);
  border: 1px solid rgba(139,92,246,.1);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  position: relative;
  min-width: 0;
}
.pill--connect:hover .connect-feed-card {
  background: rgba(139,92,246,.11);
  border-color: rgba(139,92,246,.22);
}
.pill--connect:hover .connect-feed-card--transport { transform: translateY(-2px); transition-delay: .06s; }
.pill--connect:hover .connect-feed-card--event { transform: translateY(-2px); transition-delay: .12s; }

.connect-feed-icon {
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(139,92,246,.15);
  color: #c4b5fd;
  border: 1px solid rgba(139,92,246,.18);
  transition: transform .5s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.pill--connect:hover .connect-feed-card--casino .connect-feed-icon,
.pill--connect:hover .connect-feed-hero.connect-feed-card--casino .connect-feed-icon {
  transform: translateY(-2px) scale(1.08);
}
.pill--connect:hover .connect-feed-card--transport .connect-feed-icon {
  transform: translateX(3px);
  transition-delay: .08s;
}
.pill--connect:hover .connect-feed-card--event .connect-feed-icon {
  transform: rotate(-8deg) scale(1.06);
  transition-delay: .16s;
}
.connect-feed-hero .connect-feed-icon {
  width: 30px; height: 30px; border-radius: 9px;
}
.connect-feed-card--casino .connect-feed-icon,
.connect-feed-hero.connect-feed-card--casino .connect-feed-icon {
  background: rgba(139,92,246,.18); color: #c084fc;
}
.connect-feed-card--transport .connect-feed-icon {
  background: rgba(96,165,250,.15); color: #93c5fd;
  border-color: rgba(96,165,250,.2);
}
.connect-feed-card--pay .connect-feed-icon {
  background: rgba(52,211,153,.13); color: #6ee7b7;
  border-color: rgba(52,211,153,.18);
}
.connect-feed-card--event .connect-feed-icon {
  background: rgba(251,191,36,.12); color: #fcd34d;
  border-color: rgba(251,191,36,.16);
}

.connect-feed-text {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.connect-feed-text strong {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.92);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.connect-feed-text span {
  font-size: 8.5px; color: rgba(255,255,255,.42); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.connect-feed-hero .connect-feed-text strong { font-size: 11.5px; }
.connect-feed-hero .connect-feed-text span { font-size: 9px; }

.connect-feed-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(52,211,153,.15); color: #34d399;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52,211,153,.5);
  animation: connectFeedCheck 3.4s ease-out infinite;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
@keyframes connectFeedCheck {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  10% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
  35% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
}
.pill--connect:hover .connect-feed-check {
  transform: scale(1.15) rotate(-6deg);
  background: rgba(52,211,153,.25);
}

.connect-feed-live {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: #60a5fa;
  flex-shrink: 0;
  margin-right: 4px;
  box-shadow: 0 0 0 0 rgba(96,165,250,.6);
  animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(96,165,250,.55); }
  70% { box-shadow: 0 0 0 7px rgba(96,165,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}

/* Stagger entry of feed cards once pill is visible */
.pill--connect .connect-feed-card,
.pill--connect .connect-feed-hero {
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.pill--connect.prod-in .connect-feed-card,
.pill--connect.prod-in .connect-feed-hero { opacity: 1; transform: translateY(0); }
.pill--connect.prod-in [data-anim='feed-1'] { transition-delay: .55s; }
.pill--connect.prod-in [data-anim='feed-2'] { transition-delay: .70s; }
.pill--connect.prod-in [data-anim='feed-3'] { transition-delay: .85s; }
.pill--connect.prod-in [data-anim='feed-4'] { transition-delay: 1.00s; }

/* ═══════════════════════════════════════════
   CAMPUS MOCKUP — Phone ticket
   Value: "buy ticket, kid eats, you know instantly"
   ═══════════════════════════════════════════ */
.pill-mockup--campus {
  margin: 22px 0 22px; flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0;
}

.campus-mockup {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto;
}

/* Static halo removed — hover glow on .campus-phone is preserved */

.campus-phone {
  background: linear-gradient(180deg, rgba(28,18,58,.96), rgba(18,12,42,.96));
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(107,92,231,.06) inset;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
}
.pill--campus:hover .campus-phone {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(155,142,240,.42);
  box-shadow: 0 22px 50px rgba(107,92,231,.22), 0 0 0 1px rgba(107,92,231,.12) inset;
}

/* Status bar */
.campus-phone-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 0; color: rgba(255,255,255,.5);
  font-size: 8.5px; font-weight: 600;
}
.campus-status-time { letter-spacing: .02em; }
.campus-status-icons { display: flex; align-items: center; gap: 4px; opacity: .8; }

/* App bar (subtle, on-brand) */
.campus-app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(155,142,240,.08);
}
.campus-app-brand {
  display: inline-flex; align-items: center; gap: 7px;
}
.campus-app-iso {
  height: 16px; width: auto; opacity: .95;
  filter: drop-shadow(0 1px 4px rgba(155,142,240,.35));
}
.campus-app-name {
  font-size: 12.5px; font-weight: 800; color: var(--c-white);
  letter-spacing: -.01em;
  line-height: 1;
}
.campus-app-menu {
  display: flex; flex-direction: column; gap: 2px;
}
.campus-app-menu span {
  display: block; width: 12px; height: 1.5px; border-radius: 1px;
  background: rgba(255,255,255,.4);
}

.campus-phone-body {
  padding: 8px 10px 9px;
  display: flex; flex-direction: column; gap: 6px;
}

/* Offers row — line-art style matching El Problema icons */
.campus-offers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.campus-offer {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(155,142,240,.14);
  background: rgba(155,142,240,.05);
  min-width: 0;
  text-align: center;
  transition: background .3s ease, border-color .3s ease;
}
.pill--campus:hover .campus-offer {
  background: rgba(155,142,240,.1);
  border-color: rgba(155,142,240,.22);
}
.campus-offer-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(155,142,240,.18);
  color: #c4bbf7;
  transition: transform .55s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.campus-offer-icon svg { width: 17px; height: 17px; transition: transform .5s ease; }
.pill--campus:hover .campus-offer--pizza .campus-offer-icon {
  transform: rotate(-10deg) scale(1.1);
}
.pill--campus:hover .campus-offer--burger .campus-offer-icon {
  transform: translateY(-3px) scale(1.08);
  transition-delay: .08s;
}
.pill--campus:hover .campus-offer--coffee .campus-offer-icon {
  transform: rotate(8deg) scale(1.1);
  transition-delay: .16s;
}
.pill--campus:hover .campus-offer-icon { background: rgba(155,142,240,.28); }
.campus-offer-label {
  display: flex; flex-direction: column; gap: 0; min-width: 0;
  line-height: 1.05; align-items: center;
}
.campus-offer-label strong {
  font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.92);
  letter-spacing: -.005em;
}
.campus-offer-label em {
  font-size: 7px; font-weight: 700; font-style: normal;
  color: rgba(196,181,253,.7);
  letter-spacing: .05em; text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* Map preview — line-art, no filled gradients */
.campus-map {
  position: relative;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(155,142,240,.08);
  background: rgba(18,14,42,.25);
  height: 46px;
}
.campus-map-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: #c4bbf7;
}
.campus-map-path {
  animation: campusMapFlow 4s linear infinite;
}
@keyframes campusMapFlow {
  to { stroke-dashoffset: -36; }
}
.campus-map-dot--c {
  transform-box: fill-box;
  transform-origin: center;
  animation: campusMapDotBeat 2.4s ease-in-out infinite;
}
@keyframes campusMapDotBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}
.campus-map-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: campusMapPulse 2.4s ease-out infinite;
}
@keyframes campusMapPulse {
  0%   { transform: scale(.4); opacity: .6; }
  100% { transform: scale(3.5); opacity: 0; }
}
.pill--campus:hover .campus-map-path { animation-duration: 1.8s; }
/* Informational chip — not a CTA button */
.campus-map-chip {
  position: absolute; left: 8px; top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(18,12,42,.72);
  color: rgba(196,181,253,.9);
  font-size: 8.5px; font-weight: 600;
  padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid rgba(155,142,240,.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  letter-spacing: .01em;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.pill--campus:hover .campus-map-chip {
  transform: translateY(-2px);
  border-color: rgba(155,142,240,.4);
}
.campus-map-chip svg { color: rgba(196,181,253,.85); }

/* CTA link below mockup */
.campus-cta-link {
  align-self: center;
  margin: 12px auto 2px;
}

/* ═══════════════════════════════════════════
   HEALTH PILL — Abstract "in development" visual
   ═══════════════════════════════════════════ */
.pill-inner--health {
  opacity: .9;
}
.pill--health:hover .pill-inner--health { opacity: 1; }

.soon-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 6px rgba(192,132,252,.6);
  animation: badgePulse 2s ease-in-out infinite;
  display: inline-block;
}

.soon-badge-inline {
  font-size: 8.5px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(155,142,240,.12); color: #c4b5fd;
  border: 1px solid rgba(155,142,240,.2);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}

.pill-mockup--health {
  margin: 22px 0 22px; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 0;
}

.health-soon-eta {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(196,181,253,.7);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(155,142,240,.06);
  border: 1px solid rgba(155,142,240,.14);
  white-space: nowrap;
}

.health-soon {
  position: relative;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

.health-soon-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(155,142,240,.25);
  transform: translate(-50%, -50%);
  animation: healthSoonPulse 3.6s ease-out infinite;
}
.health-soon-pulse--2 {
  width: 76px; height: 76px;
  animation-delay: 1.2s;
  border-color: rgba(155,142,240,.18);
}
.health-soon-pulse--3 {
  width: 102px; height: 102px;
  animation-delay: 2.4s;
  border-color: rgba(155,142,240,.1);
}

@keyframes healthSoonPulse {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: .9; }
  70% { opacity: .15; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

.health-soon-heart {
  position: relative; z-index: 2;
  color: #c4b5fd;
  filter: drop-shadow(0 0 12px rgba(192,132,252,.45));
  animation: healthSoonBeat 2.4s ease-in-out infinite;
}
@keyframes healthSoonBeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.12); }
  40% { transform: scale(1); }
  55% { transform: scale(1.06); }
  70% { transform: scale(1); }
}

.health-cta-link {
  align-self: center;
  margin: 8px auto 2px;
}

/* Health — discreet "we'll let you know" note (not a CTA) */
.health-keep-posted {
  align-self: center;
  margin: 12px auto 4px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em;
  color: rgba(220,212,255,.85);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(155,142,240,.1);
  border: 1px solid rgba(155,142,240,.22);
  transition: color .3s ease, border-color .3s ease, background .3s ease;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.health-keep-posted svg {
  width: 13px; height: 13px;
  color: rgba(220,212,255,.85);
  transition: color .3s ease, transform .3s ease;
}
.pill--health:hover .health-keep-posted {
  color: rgba(196,181,253,.95);
  border-color: rgba(155,142,240,.25);
  background: rgba(155,142,240,.1);
}
.pill--health:hover .health-keep-posted svg {
  color: #c4b5fd;
  transform: rotate(-8deg);
}

/* ── Entrance animations ──
   will-change para GPU promote durante el reveal con filter:blur */
.prod-hidden {
  opacity: 0; transform: translateY(40px) scale(.96); filter: blur(8px);
  will-change: opacity, transform, filter;
  transition: opacity .9s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1),
              filter .9s cubic-bezier(.22,1,.36,1);
}
.prod-hidden.pill { transform: translateY(50px) scale(.94); filter: blur(10px); }
.prod-in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); will-change: auto; }
.pill.prod-in { transform: translateY(0) scale(1); filter: blur(0); will-change: auto; }

/* Per-pill custom entrance delays */
.pill--connect.prod-hidden { transition-duration: 1s; }
.pill--campus.prod-hidden { transition-duration: .85s; }
.pill--health.prod-hidden { transition-duration: .75s; }

/* Internal elements animate after pill enters */
.pill .pill-content { opacity: 0; transform: translateY(12px); transition: opacity .6s .2s ease, transform .6s .2s cubic-bezier(.22,1,.36,1); }
.pill.prod-in .pill-content { opacity: 1; transform: translateY(0); }

.pill .pill-mockup { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .7s .35s ease, transform .7s .35s cubic-bezier(.22,1,.36,1); }
.pill.prod-in .pill-mockup { opacity: 1; transform: translateY(0) scale(1); }

.pill .health-visual { opacity: 0; transform: scale(.85); transition: opacity .7s .4s ease, transform .7s .4s cubic-bezier(.22,1,.36,1); }
.pill.prod-in .health-visual { opacity: 1; transform: scale(1); }

/* Comparación */
.vs-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,.4);
  font-size: 13px;
  position: relative;
  z-index: 2;
}

.vs-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(155,142,240,.08);
  border: 1px solid rgba(155,142,240,.2);
  color: var(--c-light);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -.005em;
  padding: 8px 14px 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    transform .25s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.vs-toggle::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(192,132,252,.25), transparent 60%);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.vs-toggle:hover {
  background: rgba(155,142,240,.16);
  border-color: rgba(155,142,240,.36);
  color: #fff;
  box-shadow: 0 6px 20px rgba(139,92,246,.18);
  transform: translateY(-1px);
}
.vs-toggle:hover::before { opacity: 1; }
.vs-toggle:active { transform: translateY(0) scale(.98); }

.vs-toggle-chevron {
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  opacity: .85;
}
.vs-toggle.open .vs-toggle-chevron { transform: rotate(-180deg); }
.vs-toggle:hover .vs-toggle-chevron { opacity: 1; }

/* Smooth open/close — keyframe-driven for predictable behaviour */
.vs-table {
  display: none;
  overflow: hidden;
  margin-top: 0;
}
.vs-table.open {
  display: block;
  margin-top: 28px;
  overflow-x: auto;
  animation: vsTableOpen .42s cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity, max-height;
}
.vs-table.closing {
  display: block;
  animation: vsTableClose .28s cubic-bezier(.4,0,.7,.2) both;
  will-change: transform, opacity, max-height;
}
@keyframes vsTableOpen {
  0%   { opacity: 0; transform: translateY(-6px); max-height: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); max-height: 800px; }
}
@keyframes vsTableClose {
  0%   { opacity: 1; transform: translateY(0); max-height: 800px; }
  100% { opacity: 0; transform: translateY(-4px); max-height: 0; }
}

/* Staggered row entry — each row fades & rises in turn */
.vs-table tbody tr {
  opacity: 0;
  transform: translateY(6px);
}
.vs-table.open tbody tr {
  animation: vsRowIn .32s cubic-bezier(.22,1,.36,1) forwards;
}
.vs-table.open tbody tr:nth-child(1) { animation-delay: .10s; }
.vs-table.open tbody tr:nth-child(2) { animation-delay: .14s; }
.vs-table.open tbody tr:nth-child(3) { animation-delay: .18s; }
.vs-table.open tbody tr:nth-child(4) { animation-delay: .22s; }
.vs-table.open tbody tr:nth-child(5) { animation-delay: .26s; }
.vs-table.open tbody tr:nth-child(6) { animation-delay: .30s; }

.vs-table thead {
  opacity: 0;
  transform: translateY(6px);
}
.vs-table.open thead {
  animation: vsRowIn .30s cubic-bezier(.22,1,.36,1) .06s forwards;
}

@keyframes vsRowIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Reset row animations when collapsing so they can re-stagger next open */
.vs-table.closing tbody tr,
.vs-table.closing thead {
  animation: none;
  opacity: 1;
  transform: none;
}

.vs-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: rgba(255,255,255,.03);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.vs-table th {
  text-align: left;
  font-weight: 600;
  padding: 14px 16px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.vs-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
}

.vs-row--highlight td {
  background: rgba(107,92,231,.12);
  color: var(--c-light);
  font-weight: 600;
}

.check { color: var(--c-light); font-weight: 700; }
.cross { color: rgba(255,255,255,.2); }

/* ─── CÓMO FUNCIONA ──────────────────────────────────
   Layout:  white section → contained dark stage → 3 personas
            top selector + 4-step timeline + animated mockup
   ─────────────────────────────────────────────────── */
/* Single continuous white surface wrapping como, beneficios, social and
   objeciones. Painting the white ONCE on the wrapper (instead of once
   per section) eliminates all inter-section seams in the light region —
   the bg flows through as a single uninterrupted layer. */
.bg-light-stack {
  background: var(--c-white);
  position: relative;
  overflow: hidden;
}

/* Subtle drifting purple blooms over the white wrapper — adds quiet
   life to a long flat region without competing with content. The
   blooms are very low alpha (so text contrast is preserved) and the
   animation is slow (28s) and uses ease-in-out for organic motion. */
.bg-light-stack::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(ellipse 38% 28% at 18% 22%, rgba(155,142,240,.10) 0%, rgba(155,142,240,.04) 40%, transparent 70%),
    radial-gradient(ellipse 32% 24% at 84% 60%, rgba(107,92,231,.09) 0%, rgba(107,92,231,.03) 40%, transparent 70%),
    radial-gradient(ellipse 26% 20% at 50% 88%, rgba(192,132,252,.07) 0%, rgba(192,132,252,.02) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: bgLightDrift 28s ease-in-out infinite alternate;
}

@keyframes bgLightDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-26px, 14px, 0) scale(1.04); }
  100% { transform: translate3d(22px, -16px, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-light-stack::before { animation: none; }
}

/* Make sure section content sits above the drift layer */
.bg-light-stack > section { position: relative; z-index: 1; }

/* Same idea for the two dark regions (top: hero+problema+productos;
   bottom: contacto+footer). Wrapper paints the dark color ONCE, sections
   inside go transparent — eliminates per-section seams in the dark
   regions and unifies the canvas with the light wrapper. */
.bg-dark-stack {
  background: var(--c-bg);
  position: relative;
}

.section-como {
  /* The atmospheric dark→white blend (::before) is ~120px tall now.
     padding-top: 150 means the kicker pill starts ~30px below where
     the dark zone has fully dissolved — no purple wash on the eyebrow. */
  padding: 150px 0 14px;
  background: transparent;
  position: relative;
  /* Anchor offset so clicking "Cómo funciona" in the nav lands the
     section roughly centered between navbar (52px) and viewport bottom.
     Adapts to viewport height — taller screens get more breathing room. */
  scroll-margin-top: clamp(88px, calc((100vh - 850px) / 2 + 36px), 160px);
}

/* Atmospheric radial transition — replaces a hard wave/cut with a soft
   "bloom on dark canvas" backdrop inspired by the reference image:
   dark productos color extends down into como, fades organically via
   off-center radial blooms (asymmetric for a non-banded feel) and
   dissolves into the white como area. Three layered radials:

     1. Off-center primary purple bloom (top-left focal point) — the
        atmospheric "light source" that gives the area its glow.
     2. Secondary smaller bloom (right side) — adds depth, breaks symmetry.
     3. Dark canvas radial fade — solid dark at the very top, dissolving
        outward to transparent so como's white reads through softly. The
        radial origin is positioned ABOVE the element (50% -10%) so the
        gradient feels like a halo from above rather than a vertical strip. */
.section-como::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background:
    /* Final dissolve-to-white at the very bottom — guarantees the last
       visible pixel of the atmospheric zone is exactly the wrapper's
       white, so there's no perceptible edge where the radial ellipse
       ends. Slim vertical band only at the lower 18% of ::before. */
    linear-gradient(180deg,
      transparent 0%,
      transparent 82%,
      rgba(255,255,255,.55) 92%,
      rgba(255,255,255,.92) 98%,
      var(--c-white) 100%),
    /* Off-center blooms positioned in the lower half of the transition
       zone so they barely contribute at y=0 — the very top edge stays
       pure #0E0C1E to match the dark wrapper above it pixel-for-pixel. */
    radial-gradient(ellipse 55% 60% at 32% 70%,
      rgba(155,142,240,.32) 0%,
      rgba(107,92,231,.14) 42%,
      transparent 75%),
    radial-gradient(ellipse 45% 50% at 78% 74%,
      rgba(192,132,252,.18) 0%,
      rgba(107,92,231,.06) 45%,
      transparent 75%),
    /* Dark canvas: solid #0E0C1E held until 38% radial so the boundary
       with the dark wrapper has zero discontinuity. Many fine alpha
       stops in the upper-purple region so the gradient curve is never
       perceptible as an edge — each pixel changes alpha by tiny amounts. */
    radial-gradient(ellipse 140% 100% at 50% -10%,
      #0E0C1E 0%,
      #0E0C1E 38%,
      #14112C 50%,
      #1B1740 60%,
      rgba(45,37,96,.55) 70%,
      rgba(74,60,174,.32) 78%,
      rgba(107,92,231,.20) 84%,
      rgba(155,142,240,.12) 89%,
      rgba(155,142,240,.06) 93%,
      rgba(155,142,240,.02) 97%,
      transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Soft purple halo continuing into the white area — echoes the
   atmospheric bloom and envelops the stage so the dark panel doesn't
   read as isolated on stark white. Radial (not vertical): two
   asymmetric ellipses, one as title spotlight, one around the stage. */
.section-como::after {
  content: '';
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1300px, 120vw);
  height: 720px;
  background:
    radial-gradient(ellipse 38% 22% at 38% 12%, rgba(155,142,240,.18) 0%, rgba(107,92,231,.08) 50%, transparent 78%),
    radial-gradient(ellipse 65% 40% at 55% 55%, rgba(107,92,231,.12) 0%, rgba(155,142,240,.06) 55%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.section-como > .container {
  position: relative;
  z-index: 2;
}

.section-como .section-title {
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: -.015em;
}
.section-como .section-title em.hl,
.section-como .section-title .hl {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(110deg, var(--c-mid) 0%, var(--c-main) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.como-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-muted);
  max-width: 560px;
  margin: 6px auto 0;
  font-weight: 400;
}

/* Compact section header so the section fits in viewport without scroll */
.section-como .section-header { margin-bottom: 0; }
.section-como .section-title { font-size: clamp(20px, 2.1vw, 24px); margin: 4px 0 0; line-height: 1.2; }

/* ═══ STAGE — dark contained panel ═══ */
.como-stage {
  position: relative;
  margin: 22px 0 32px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(107,92,231,.20) 0%, transparent 55%),
    radial-gradient(140% 100% at 100% 100%, rgba(74,60,174,.24) 0%, transparent 60%),
    linear-gradient(155deg, #15122E 0%, #1B173E 50%, #221C52 100%);
  border: 1px solid rgba(155,142,240,.14);
  /* Tight shadow — reach kept under ~36px so neither the title above
     nor the nota below sits inside the dimming zone. */
  box-shadow:
    0 12px 24px rgba(31,25,72,.28),
    0 4px 10px rgba(74,60,174,.16),
    0 1px 3px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow: hidden;
  isolation: isolate;
  /* Per-persona theming, set via data-active */
  --persona-accent:      #9B8EF0;
  --persona-accent-soft: rgba(155,142,240,.14);
  --persona-glow:        rgba(155,142,240,.28);
  --persona-deep:        #4A3CAE;
}

.como-stage[data-active="colegio"] {
  --persona-accent:      #B6A9F7;
  --persona-accent-soft: rgba(182,169,247,.14);
  --persona-glow:        rgba(182,169,247,.32);
  --persona-deep:        #4A3CAE;
}

.como-stage[data-active="cpa"] {
  --persona-accent:      #9B8EF0;
  --persona-accent-soft: rgba(155,142,240,.14);
  --persona-glow:        rgba(155,142,240,.32);
  --persona-deep:        #5A4BC9;
}

.como-stage[data-active="apoderado"] {
  --persona-accent:      #C5BBFA;
  --persona-accent-soft: rgba(197,187,250,.14);
  --persona-glow:        rgba(197,187,250,.32);
  --persona-deep:        #6B5CE7;
}

/* Stage background — orbs, grid, noise */
.stage-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stage-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(35px);
  opacity: .55;
  transition: opacity .8s ease;
}

.stage-orb--1 {
  width: 360px; height: 360px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(107,92,231,.45) 0%, transparent 70%);
}

.stage-orb--2 {
  width: 420px; height: 420px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(155,142,240,.32) 0%, transparent 70%);
}

.stage-orb--3 {
  width: 260px; height: 260px;
  top: 35%; left: 38%;
  background: radial-gradient(circle, rgba(74,60,174,.26) 0%, transparent 70%);
  opacity: .35;
}

.stage-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 40%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, #000 0%, transparent 80%);
  opacity: .7;
}

.stage-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ═══ PERSONA SELECTOR — top row of 3 minimal pills ═══ */
.como-personas {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(155,142,240,.10);
  border-radius: 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.como-persona {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.62);
  text-align: center;
  font-family: var(--font);
  cursor: pointer;
  transition:
    color .35s ease,
    background .35s ease,
    border-color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
  overflow: hidden;
}

.como-persona::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(155,142,240,.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.como-persona:hover {
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.como-persona:hover::before { opacity: 1; }

.como-persona.active {
  color: var(--c-white);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(155,142,240,.20) 0%, transparent 55%),
    linear-gradient(135deg, rgba(107,92,231,.28) 0%, rgba(74,60,174,.40) 100%);
  border-color: rgba(155,142,240,.50);
  box-shadow:
    0 8px 28px rgba(74,60,174,.42),
    0 0 0 1px rgba(155,142,240,.22) inset,
    inset 0 1px 0 rgba(255,255,255,.12);
}

.como-persona.active::before { opacity: 1; }

.persona-icon {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--c-light);
  transition: all .35s ease;
}

.persona-icon svg { width: 14px; height: 14px; }

.como-persona.active .persona-icon {
  background: linear-gradient(135deg, var(--persona-accent) 0%, var(--c-mid) 100%);
  border-color: var(--persona-accent);
  color: var(--c-white);
  box-shadow:
    0 0 0 2px var(--persona-accent-soft),
    0 4px 12px var(--persona-glow);
}

.persona-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  line-height: 1;
}

/* Persona auto-progress bar — sits flush at the bottom of the active pill,
   always visible while that persona is active so the cycle is legible. */
.persona-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

.como-persona.active .persona-progress { opacity: 1; }

.persona-progress-fill {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--persona-accent) 0%, var(--c-light) 50%, var(--persona-accent) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  box-shadow: 0 0 10px var(--persona-glow);
  transition: width .12s linear;
  animation: progressShimmer 2.4s linear infinite;
}

@keyframes progressShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══ PANELS — split layout: flow + stage ═══ */
/* Panels container has a fixed min-height so the stage rectangle never
   resizes when switching between Colegio / Centro de Padres / Apoderado.
   All three panels overlap absolutely; only the active one is visible.
   min-height tuned to fit the natural height of the panel content. */
.como-panels {
  position: relative;
  z-index: 2;
  min-height: 360px;
}

.como-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 28px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.4,0,.2,1),
    filter .55s ease;
  filter: blur(2px);
}

.como-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  filter: blur(0);
  z-index: 2;
}

/* ── LEFT — flow / steps (full-height, evenly distributed) ── */
.panel-flow {
  display: flex;
  flex-direction: column;
  padding: 4px 4px 4px 6px;
  min-width: 0;
}

.panel-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--persona-accent);
  background: var(--persona-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  width: fit-content;
}

.panel-role::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--persona-accent);
  box-shadow: 0 0 8px var(--persona-glow);
}

.panel-headline {
  font-size: clamp(18px, 1.95vw, 21px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--c-white);
  margin-bottom: 18px;
  letter-spacing: -.015em;
  max-width: 94%;
}

.steps-list {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The vertical rail behind step numbers */
.steps-rail {
  position: absolute;
  left: 28px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.steps-rail-fill {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  background: linear-gradient(180deg, var(--persona-accent) 0%, var(--c-mid) 100%);
  box-shadow: 0 0 14px var(--persona-glow);
  border-radius: 2px;
  transition: height .8s cubic-bezier(.65,0,.35,1);
}

/* Glowing dot that rides the rail at the leading edge of the fill —
   makes progress feel alive, like a pulse traveling down the timeline. */
.steps-rail-fill::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--persona-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 14px var(--persona-glow), 0 0 0 3px var(--persona-accent-soft);
  opacity: 0;
  transition: opacity .35s ease;
}

.steps-rail-fill[style*="height"]::after { opacity: 1; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .35s ease;
}

.step:hover { background: rgba(255,255,255,.03); }

.step-num {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  /* Solid base so the vertical rail behind the column doesn't bleed
     through the circle interior (rail is z-index 0, this is z-index 1). */
  background-color: #1A1638;
  background-image: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    background .55s cubic-bezier(.4,0,.2,1),
    border-color .55s cubic-bezier(.4,0,.2,1),
    box-shadow .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.34,1.56,.64,1);
}

/* Check icon that morphs in when a step completes — emerges with a
   gentle spring. The number inside fades and shrinks out simultaneously
   so the swap reads as a single morph rather than two transitions. */
.step-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 8.4l3.4 3.4L13 4.6' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

.step-num-inner {
  transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), color .35s ease;
}

.step-num-inner {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.4);
}

.step.active .step-num {
  background: linear-gradient(135deg, var(--persona-accent) 0%, var(--c-mid) 60%, var(--c-main) 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 4px var(--persona-accent-soft),
    0 0 30px var(--persona-glow),
    0 4px 14px rgba(74,60,174,.4),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: scale(1.04);
}

.step.active .step-num-inner {
  color: var(--c-white);
  font-weight: 700;
}

.step.done .step-num {
  background-color: #1A1638;
  background-image: linear-gradient(135deg, rgba(155,142,240,.42) 0%, rgba(107,92,231,.26) 100%);
  border-color: rgba(155,142,240,.50);
  box-shadow:
    0 0 16px rgba(155,142,240,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Number fades and shrinks; check fades in at the same time — single morph */
.step.done .step-num-inner {
  opacity: 0;
  transform: scale(.6);
}

.step.done .step-num::after {
  opacity: 1;
  transform: scale(1);
}

.step-body h4 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  margin: 6px 0 2px;
  letter-spacing: -.005em;
  transition: color .45s cubic-bezier(.4,0,.2,1);
}

.step.active .step-body h4 { color: var(--c-white); font-weight: 600; }
.step.done   .step-body h4 { color: rgba(255,255,255,.8); }

.step-body p {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,.5);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height .6s cubic-bezier(.4,0,.2,1),
    opacity .45s cubic-bezier(.4,0,.2,1) .1s,
    transform .5s cubic-bezier(.4,0,.2,1) .05s,
    margin .5s cubic-bezier(.4,0,.2,1);
}

.step.active .step-body p {
  max-height: 80px;
  opacity: 1;
  margin-top: 2px;
  transform: translateY(0);
}

/* (Stats ribbon removed — left column flows steps from headline to bottom) */

/* ── RIGHT — frameless mockup container, just centers the device ── */
.panel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Subtle floating glow under the device — keeps depth without forming a frame */
.panel-stage::after {
  content: '';
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 60%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, var(--persona-glow) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

/* ═══ DEVICES — browser & phone frames ═══ */
.device {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}

/* Browser frame (Colegio + CPA) */
.device--browser {
  width: 100%;
  max-width: 540px;
  background: #0F0C24;
  animation: deviceFloat 9s ease-in-out infinite;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border-bottom: 1px solid rgba(155,142,240,.10);
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.browser-dots i:first-child { background: #FF6B6B; box-shadow: 0 0 6px rgba(255,107,107,.45), inset 0 1px 0 rgba(255,255,255,.30); }
.browser-dots i:nth-child(2) { background: #FFC857; box-shadow: 0 0 6px rgba(255,200,87,.40), inset 0 1px 0 rgba(255,255,255,.30); }
.browser-dots i:nth-child(3) { background: #4ECDC4; box-shadow: 0 0 6px rgba(78,205,196,.40), inset 0 1px 0 rgba(255,255,255,.30); }

.browser-url {
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  background: rgba(0,0,0,.30);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
  text-align: center;
  border: 1px solid rgba(155,142,240,.10);
}

.browser-url-faint { color: rgba(255,255,255,.3); font-weight: 400; }

.browser-body {
  position: relative;
  height: 320px;
  background: linear-gradient(160deg, #15122E 0%, #1B173E 100%);
  overflow: hidden;
}

/* Phone frame (Apoderado) — proportions ~9:18 (real-phone aspect) */
.device--phone {
  width: 185px;
  background: #0A0820;
  border-radius: 32px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.08);
  animation: deviceFloat 9s ease-in-out infinite;
}

.phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 13px;
  background: #050414;
  border-radius: 999px;
  z-index: 5;
}

.phone-body {
  position: relative;
  height: 346px;
  border-radius: 26px;
  background: linear-gradient(180deg, #1B173E 0%, #0F0C24 100%);
  overflow: hidden;
}

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ═══ SCREENS — crossfade between steps ═══ */
.screen {
  position: absolute;
  inset: 0;
  padding: 18px;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition:
    opacity .55s cubic-bezier(.25,.46,.45,.94),
    transform .55s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.device--phone .screen { padding: 26px 11px 11px; }

.screen.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ─────────────────────────────────────────
   COLEGIO SCREENS
   ───────────────────────────────────────── */

/* 1 · Contract */
.screen--contract { justify-content: center; align-items: center; gap: 14px; }

.contract-card {
  width: 84%;
  padding: 24px 22px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(155,142,240,.14) 0%, rgba(74,60,174,.18) 100%);
  border: 1px solid rgba(155,142,240,.3);
  box-shadow: 0 20px 40px rgba(74,60,174,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.contract-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  color: var(--c-white);
  margin-bottom: 4px;
  box-shadow: 0 8px 20px rgba(107,92,231,.4);
}

.contract-card strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-white);
}

.contract-card > span {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.contract-modules {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.cm-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.cm-pill--on {
  color: var(--c-white);
  background: rgba(155,142,240,.22);
  border: 1px solid rgba(155,142,240,.4);
}

.cm-pill--off {
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

/* 2 · Setup */
.screen--setup { gap: 14px; }

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.setup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

.setup-item--done {
  background: rgba(155,142,240,.1);
  border-color: rgba(155,142,240,.3);
  color: var(--c-white);
}

.setup-item--loading {
  background: rgba(155,142,240,.06);
  border-color: rgba(155,142,240,.2);
  color: var(--c-white);
}

.setup-tick {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  color: var(--c-white);
  flex-shrink: 0;
}

.setup-tick--idle {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}

.setup-spin {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(155,142,240,.25);
  border-top-color: var(--c-light);
  flex-shrink: 0;
  animation: setupSpin .9s linear infinite;
}

@keyframes setupSpin { to { transform: rotate(360deg); } }

.setup-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}

.setup-bar-label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}

.setup-bar-track {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
}

.setup-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 68%;
  background: linear-gradient(90deg, var(--c-light) 0%, var(--c-mid) 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--persona-glow);
  animation: setupFill 2.4s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes setupFill {
  from { width: 0%; }
  to   { width: 68%; }
}

.setup-bar-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white);
}

/* 3 · Days */
.screen--days { justify-content: center; align-items: center; gap: 24px; }

.days-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.days-big {
  font-size: 86px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--persona-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 28px var(--persona-glow));
}

.days-big small {
  font-size: 32px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: 0;
  margin-left: 4px;
}

.days-label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.days-checklist {
  list-style: none;
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.days-checklist li {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  padding-left: 30px;
}

.days-checklist li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}

.days-checklist li.dl-on {
  color: var(--c-white);
  background: rgba(155,142,240,.08);
  border-color: rgba(155,142,240,.22);
}

.days-checklist li.dl-on::before {
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 0 8px var(--persona-glow);
}

.days-checklist li.dl-now {
  color: var(--c-white);
  background: rgba(155,142,240,.16);
  border-color: rgba(155,142,240,.4);
  font-weight: 600;
}

.dl-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--persona-accent);
  box-shadow: 0 0 10px var(--persona-accent);
  animation: dlPulse 1.4s ease-in-out infinite;
}

@keyframes dlPulse {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

/* 4 · Dashboard */
.screen--dash { gap: 14px; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dash-kpi {
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(155,142,240,.08) 0%, transparent 60%),
    rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.dk-num {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--c-white);
}

.dk-label {
  font-size: 9.5px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dk-trend {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1;
}
.dk-trend--up {
  color: #6FE89C;
  background: rgba(94,217,138,.14);
  border: 1px solid rgba(94,217,138,.28);
}
.dk-trend--neutral {
  color: var(--persona-accent);
  background: var(--persona-accent-soft);
  border: 1px solid rgba(155,142,240,.28);
}

.dash-chart {
  position: relative;
  flex: 1;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  padding: 26px 12px 12px;
  overflow: hidden;
}

.dash-chart-title {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}

.dash-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dash-live {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  background: rgba(0,0,0,.35);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}

.dash-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5ED98A;
  box-shadow: 0 0 8px #5ED98A;
  animation: dlPulse 1.4s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   CPA SCREENS
   ───────────────────────────────────────── */

/* 1 · Access */
.screen--access { gap: 14px; }

.access-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.access-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 6px 16px var(--persona-glow);
}

.access-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.access-text strong { font-size: 14px; color: var(--c-white); font-weight: 600; }
.access-text span   { font-size: 11px; color: rgba(255,255,255,.55); }

.access-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--persona-accent);
  background: var(--persona-accent-soft);
  border: 1px solid rgba(155,142,240,.3);
  padding: 4px 10px;
  border-radius: 999px;
}

.access-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.access-tile {
  padding: 16px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(155,142,240,.05) 100%);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.at-num {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--c-white) 0%, var(--persona-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.at-lbl {
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.5);
}

/* 2 · Colecta */
.screen--colecta { padding: 18px; }

.colecta-card {
  padding: 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.colecta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.colecta-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 2px;
}

.colecta-head span {
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.colecta-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(94,217,138,.16);
  color: #7DE5A2;
  border: 1px solid rgba(94,217,138,.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.colecta-bar { display: flex; flex-direction: column; gap: 8px; }

.colecta-bar-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
}

.colecta-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 47%;
  background: linear-gradient(90deg, var(--c-light) 0%, var(--c-mid) 100%);
  box-shadow: 0 0 12px var(--persona-glow);
  border-radius: 999px;
  animation: colectaFill 2s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes colectaFill {
  from { width: 0%; }
  to   { width: 47%; }
}

.colecta-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

.colecta-bar-meta strong { color: var(--c-white); font-weight: 600; }

.colecta-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.colecta-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.02);
}

.cr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cr-dot--ok   { background: #5ED98A; box-shadow: 0 0 6px rgba(94,217,138,.6); }
.cr-dot--wait { background: #F2C46A; }

.cr-time {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}

/* 3 · Comunicado */
.screen--comm { padding: 18px; }

.comm-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comm-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comm-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(155,142,240,.18);
  border: 1px solid rgba(155,142,240,.32);
  color: var(--persona-accent);
}

.comm-head strong {
  font-size: 13px;
  color: var(--c-white);
  font-weight: 600;
  flex: 1;
}

.comm-time {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}

.comm-subject {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  padding: 8px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border-left: 2px solid var(--persona-accent);
}

.comm-body-text {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
}

.comm-audience {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.comm-aud-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(155,142,240,.12);
  color: var(--c-white);
  border: 1px solid rgba(155,142,240,.25);
}

.comm-send {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white);
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 8px 22px rgba(107,92,231,.4);
}

/* 4 · Rendición */
.screen--report { padding: 18px; }

.report-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.report-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-white);
}

.report-head span {
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.report-pdf {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(244,68,68,.18);
  color: #F77;
  border: 1px solid rgba(244,68,68,.3);
}

.report-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

.report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.15);
}

.report-row strong { color: var(--c-white); font-weight: 600; }
.report-row--in    { color: #7DE5A2; }
.report-row--in strong { color: #7DE5A2; }
.report-row--out   { color: #F8A78A; }
.report-row--out strong { color: #F8A78A; }
.report-row--total {
  background: linear-gradient(90deg, rgba(155,142,240,.16) 0%, rgba(74,60,174,.16) 100%);
  font-weight: 600;
  color: var(--c-white);
}

.report-foot {
  display: flex;
  justify-content: flex-end;
}

.report-trace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7DE5A2;
}

/* ─────────────────────────────────────────
   APODERADO SCREENS (phone)
   ───────────────────────────────────────── */

/* 1 · Registro */
.screen--register { gap: 12px; padding-top: 38px; }

.register-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.register-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-white);
}

.register-step {
  font-size: 9px;
  color: var(--persona-accent);
  font-weight: 600;
  letter-spacing: .06em;
  background: var(--persona-accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.register-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-white);
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}

.register-field {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(155,142,240,.3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.register-field-label {
  font-size: 9px;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.register-field-value {
  font-size: 14px;
  color: var(--c-white);
  font-weight: 600;
  font-family: 'Poppins', monospace;
}

.register-found {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(155,142,240,.14) 0%, rgba(74,60,174,.14) 100%);
  border: 1px solid rgba(155,142,240,.3);
  animation: registerFound .6s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes registerFound {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rf-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
}

.rf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rf-text strong { font-size: 12px; color: var(--c-white); font-weight: 600; }
.rf-text span   { font-size: 10px; color: rgba(255,255,255,.55); }

.rf-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5ED98A 0%, #3CB97A 100%);
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(94,217,138,.5);
}

.register-cta {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white);
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 10px 24px rgba(107,92,231,.5);
}

/* 2 · Recargar */
.screen--topup { gap: 14px; padding-top: 38px; }

.topup-balance {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(155,142,240,.18) 0%, rgba(74,60,174,.22) 100%);
  border: 1px solid rgba(155,142,240,.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topup-balance-label {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.topup-balance-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-white);
}

.topup-balance-trend {
  font-size: 11px;
  color: #7DE5A2;
  font-weight: 600;
}

.topup-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.topup-chip {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}

.topup-chip--on {
  background: rgba(155,142,240,.18);
  border-color: rgba(155,142,240,.45);
  color: var(--c-white);
  box-shadow: 0 0 0 2px var(--persona-accent-soft);
}

.topup-method {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.topup-method-icon {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(155,142,240,.18);
  color: var(--persona-accent);
}

.topup-method > span:nth-child(2) {
  font-size: 12px;
  color: var(--c-white);
  font-weight: 500;
}

.topup-method-arrow {
  font-size: 16px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}

.topup-cta {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-white);
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 10px 24px rgba(107,92,231,.5);
}

/* 3 · Notificación */
.screen--notif {
  padding-top: 38px;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.notif-time {
  font-size: 56px;
  font-weight: 200;
  color: var(--c-white);
  letter-spacing: -.04em;
  line-height: 1;
  margin-top: 8px;
}

.notif-date {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}

.notif-card {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: notifSlide .6s cubic-bezier(.25,.46,.45,.94) both;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.notif-card--mini {
  margin-top: 8px;
  opacity: .85;
  transform: scale(.95);
  transform-origin: top center;
  animation-delay: .2s;
}

@keyframes notifSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-card--mini { animation-name: notifSlideSmall; }

@keyframes notifSlideSmall {
  from { opacity: 0; transform: translateY(-8px) scale(.95); }
  to   { opacity: .85; transform: translateY(0) scale(.95); }
}

.notif-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-card-icon {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  color: var(--c-white);
}

.notif-card-app {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.85);
  flex: 1;
}

.notif-card-time {
  font-size: 10px;
  color: rgba(255,255,255,.5);
}

.notif-card-title {
  font-size: 12px;
  color: var(--c-white);
  font-weight: 600;
  letter-spacing: -.005em;
}

.notif-card-sub {
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

/* 4 · Feed */
.screen--feed { gap: 12px; padding-top: 38px; }

.feed-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.feed-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
}

.feed-text { display: flex; flex-direction: column; gap: 1px; }
.feed-text strong { font-size: 13px; color: var(--c-white); font-weight: 600; }
.feed-text span   { font-size: 10px; color: rgba(255,255,255,.5); }

.feed-rows { display: flex; flex-direction: column; gap: 6px; }

.feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.fr-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.fr-icon--food  { background: rgba(155,142,240,.18); color: var(--persona-accent); }
.fr-icon--bus   { background: rgba(94,217,138,.16); color: #7DE5A2; }
.fr-icon--event { background: rgba(244,196,106,.16); color: #F2C46A; }

.fr-text strong { font-size: 11px; color: var(--c-white); font-weight: 600; }
.fr-text span   { font-size: 10px; color: rgba(255,255,255,.5); }

.fr-amount {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
}

.fr-amount--ok   { color: #7DE5A2; }
.fr-amount--soft { color: rgba(255,255,255,.55); font-weight: 500; }

/* ═══ FOOTNOTE ═══ */
.como-nota {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  background: var(--c-xlight);
  border-color: rgba(107,92,231,.18);
  padding: 7px 14px;
}

.nota-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  color: var(--c-white);
  box-shadow: 0 6px 14px rgba(107,92,231,.30);
}

.como-nota p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-text);
  margin: 0;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .device--browser,
  .device--phone,
  .dl-pulse,
  .dash-live-dot,
  .setup-spin {
    animation: none !important;
  }
  .screen,
  .step-num,
  .steps-rail-fill,
  .persona-progress-fill {
    transition-duration: .01ms !important;
  }
}

/* ─── LO QUE GANAS ─────────────────────────────────
   Sin bloque contenedor: la escena vive directo sobre la superficie
   blanca (.bg-light-stack). Layout en grid 3 cols × 3 filas — 6 orbs
   distribuidos a izquierda y derecha del wordmark central, las ondas
   se expanden libremente sobre el fondo. El panel de descripción está
   en una franja propia debajo, sin solaparse con ningún orb.
   Diseñada para caber completa en viewport de PC (≈700px).
   ─────────────────────────────────────────────────── */
.section-beneficios {
  padding: 40px 0 48px;
  background: transparent;
  position: relative;
}

.section-beneficios .container { position: relative; z-index: 1; }

.section-beneficios .section-title em.hl,
.section-beneficios .section-title .hl {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(110deg, var(--c-mid) 0%, var(--c-main) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ganancias-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 540px;
  margin: 14px auto 0;
}

.section-beneficios .section-header { margin-bottom: 18px; }

/* ═══ ESCENA — grid 3 cols × 3 filas, sin caja ═══
   Columna izquierda: 3 orbs alineados a la derecha (apuntan al centro).
   Columna central: wordmark + ondas (gan-core), spans 3 filas.
   Columna derecha: 3 orbs alineados a la izquierda. */
.ganancias-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  column-gap: 28px;
  row-gap: 14px;
  height: 360px;
  margin-bottom: 18px;
  /* Permitir que las ondas se expandan más allá del grid sin clipping */
  overflow: visible;
}

/* Blooms ambient — dan color púrpura detrás de las pills glass para que
   el backdrop-filter tenga algo que refractar (sin esto, glassmorphism
   no se aprecia sobre blanco puro). Animación lenta para no recargar. */
.gan-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}
.gan-bloom--1 {
  top: -40px; left: 4%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(155,142,240,.32) 0%, transparent 70%);
}
.gan-bloom--2 {
  bottom: -40px; right: 4%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(107,92,231,.28) 0%, transparent 70%);
}

/* ═══ CORE — wordmark + ondas concéntricas en el centro del grid ═══ */
.gan-core {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

/* Halo blando detrás del wordmark — más sutil ahora que las waves cargan
   la energía visual. */
.gan-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,142,240,.20) 0%, transparent 60%);
  filter: blur(8px);
  animation: ganHaloPulse 4.2s ease-in-out infinite;
  z-index: 0;
}
@keyframes ganHaloPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.05); }
}

/* Ondas orgánicas — 5 anillos no-circulares con border-radius asimétrico
   que rotan mientras se expanden, dando sensación de "ondas reales" en
   vez de círculos perfectos. Cada onda tiene una forma blob distinta. */
.gan-wave {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  border: 1.5px solid rgba(107,92,231,.55);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
/* Cada onda tiene su propia variable de keyframe para que los radios
   asimétricos se animen también, simulando que la "ola" cambia de forma
   mientras se expande (como rizos en agua). */
.gan-wave--1 {
  animation: ganWaveEmit1 8s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 0s;
  border-radius: 38% 62% 55% 45% / 55% 40% 60% 45%;
}
.gan-wave--2 {
  animation: ganWaveEmit2 8s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 1.6s;
  border-radius: 60% 40% 45% 55% / 42% 58% 47% 53%;
}
.gan-wave--3 {
  animation: ganWaveEmit3 8s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 3.2s;
  border-radius: 45% 55% 62% 38% / 58% 45% 55% 42%;
}
.gan-wave--4 {
  animation: ganWaveEmit4 8s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 4.8s;
  border-radius: 55% 45% 38% 62% / 45% 60% 40% 55%;
}
.gan-wave--5 {
  animation: ganWaveEmit5 8s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: 6.4s;
  border-radius: 50% 50% 58% 42% / 60% 40% 50% 50%;
}

/* 5 keyframes con border-radius animado — la onda se "deforma" mientras
   crece. Cada una rota distinto para que se sienta orgánico. */
@keyframes ganWaveEmit1 {
  0%   { opacity: 0;   transform: scale(.30) rotate(-40deg); border-color: rgba(107,92,231,.70); border-radius: 38% 62% 55% 45% / 55% 40% 60% 45%; }
  10%  { opacity: .80; border-color: rgba(107,92,231,.70); }
  55%  { opacity: .35; border-color: rgba(155,142,240,.50); border-radius: 55% 45% 40% 60% / 42% 60% 45% 55%; }
  100% { opacity: 0;   transform: scale(2.7)  rotate(60deg); border-color: rgba(155,142,240,.0); border-radius: 48% 52% 50% 50% / 50% 50% 52% 48%; }
}
@keyframes ganWaveEmit2 {
  0%   { opacity: 0;   transform: scale(.30) rotate(20deg);  border-color: rgba(107,92,231,.70); border-radius: 60% 40% 45% 55% / 42% 58% 47% 53%; }
  10%  { opacity: .75; border-color: rgba(107,92,231,.70); }
  55%  { opacity: .32; border-color: rgba(155,142,240,.50); border-radius: 42% 58% 60% 40% / 58% 42% 50% 50%; }
  100% { opacity: 0;   transform: scale(2.7)  rotate(-30deg); border-color: rgba(155,142,240,.0); border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%; }
}
@keyframes ganWaveEmit3 {
  0%   { opacity: 0;   transform: scale(.30) rotate(-15deg); border-color: rgba(107,92,231,.70); border-radius: 45% 55% 62% 38% / 58% 45% 55% 42%; }
  10%  { opacity: .80; border-color: rgba(107,92,231,.70); }
  55%  { opacity: .30; border-color: rgba(155,142,240,.50); border-radius: 60% 40% 38% 62% / 45% 55% 42% 58%; }
  100% { opacity: 0;   transform: scale(2.7)  rotate(45deg); border-color: rgba(155,142,240,.0); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}
@keyframes ganWaveEmit4 {
  0%   { opacity: 0;   transform: scale(.30) rotate(35deg);  border-color: rgba(107,92,231,.70); border-radius: 55% 45% 38% 62% / 45% 60% 40% 55%; }
  10%  { opacity: .75; border-color: rgba(107,92,231,.70); }
  55%  { opacity: .35; border-color: rgba(155,142,240,.50); border-radius: 42% 58% 55% 45% / 60% 42% 55% 45%; }
  100% { opacity: 0;   transform: scale(2.7)  rotate(-20deg); border-color: rgba(155,142,240,.0); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}
@keyframes ganWaveEmit5 {
  0%   { opacity: 0;   transform: scale(.30) rotate(-25deg); border-color: rgba(107,92,231,.70); border-radius: 50% 50% 58% 42% / 60% 40% 50% 50%; }
  10%  { opacity: .80; border-color: rgba(107,92,231,.70); }
  55%  { opacity: .32; border-color: rgba(155,142,240,.50); border-radius: 58% 42% 45% 55% / 42% 58% 55% 45%; }
  100% { opacity: 0;   transform: scale(2.7)  rotate(50deg); border-color: rgba(155,142,240,.0); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

/* Wordmark — sólido brand purple (sin gradiente que se ve sucio) */
.gan-wordmark {
  position: relative;
  width: 240px;
  height: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  color: var(--c-main);
  filter: drop-shadow(0 4px 12px rgba(74,60,174,.18));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease, color .35s ease;
}
.gan-wordmark svg {
  width: 100%;
  height: auto;
  display: block;
}
.gan-wordmark:hover {
  transform: scale(1.03);
  color: var(--c-deep);
  filter: drop-shadow(0 6px 18px rgba(74,60,174,.28));
}
.gan-wordmark:active { transform: scale(.98); }
.gan-wordmark:focus-visible {
  outline: 2px solid var(--c-mid);
  outline-offset: 8px;
  border-radius: 8px;
}

/* Burst extra cuando se hace click manual en el wordmark */
.gan-core.is-bursting .gan-wave {
  animation: ganWaveBurst 1.4s cubic-bezier(.22,.61,.36,1);
}
@keyframes ganWaveBurst {
  0%   { opacity: 1;   transform: scale(.32) rotate(-30deg); border-width: 2.4px; border-color: rgba(107,92,231,.85); }
  100% { opacity: 0;   transform: scale(3.0) rotate(50deg);  border-width: .5px;  border-color: rgba(107,92,231,.0); }
}

/* ═══ ORBS — pills glassmorphism con sombras profundas ═══ */
.gan-orb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  width: 100%;
  max-width: 280px;
  min-height: 64px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 14px;
  color: var(--c-text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  z-index: 3;
  box-shadow:
    0 18px 40px rgba(74,60,174,.18),
    0 6px 14px rgba(74,60,174,.10),
    0 1px 2px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(155,142,240,.10);
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    opacity .35s ease;
  opacity: 0;
  transform: translateY(8px);
}

/* Posicionamiento dentro del grid 3×3 — col izq alinea a la derecha,
   col der alinea a la izquierda, para que apunten al wordmark */
.gan-orb--1 { grid-column: 1; grid-row: 1; justify-self: end;   }
.gan-orb--2 { grid-column: 3; grid-row: 1; justify-self: start; }
.gan-orb--3 { grid-column: 1; grid-row: 2; justify-self: end;   }
.gan-orb--4 { grid-column: 3; grid-row: 2; justify-self: start; }
.gan-orb--5 { grid-column: 1; grid-row: 3; justify-self: end;   }
.gan-orb--6 { grid-column: 3; grid-row: 3; justify-self: start; }

.gan-orb-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-main) 100%);
  box-shadow: 0 4px 12px rgba(74,60,174,.30), inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}

.gan-orb-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gan-orb-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--c-text);
  white-space: nowrap;
}

.gan-orb-stat {
  font-size: 11.5px;
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.2;
}
.gan-orb-stat strong {
  color: var(--c-main);
  font-weight: 700;
  letter-spacing: -.005em;
}

/* Pulso reactivo a la onda — JS añade .pulse momentáneamente */
.gan-orb.pulse {
  border-color: rgba(155,142,240,.95);
  background: rgba(255,255,255,.72);
  box-shadow:
    0 0 0 4px rgba(155,142,240,.12),
    0 22px 48px rgba(74,60,174,.22),
    0 6px 14px rgba(74,60,174,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.gan-orb.pulse .gan-orb-ico {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(74,60,174,.45), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Hover/focus — estado activo más fuerte que pulse */
.gan-orb:hover,
.gan-orb:focus-visible,
.gan-orb.is-active {
  border-color: rgba(107,92,231,.85);
  background: rgba(255,255,255,.82);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(107,92,231,.20),
    0 28px 56px rgba(74,60,174,.24),
    0 10px 20px rgba(74,60,174,.14),
    0 2px 6px rgba(74,60,174,.10),
    inset 0 1px 0 rgba(255,255,255,1);
  outline: none;
}
.gan-orb:hover .gan-orb-ico,
.gan-orb:focus-visible .gan-orb-ico,
.gan-orb.is-active .gan-orb-ico {
  background: linear-gradient(135deg, var(--c-light) 0%, var(--c-mid) 60%, var(--c-main) 100%);
  box-shadow: 0 6px 18px rgba(74,60,174,.50), inset 0 1px 0 rgba(255,255,255,.30);
}

/* Dim al resto cuando uno está activo */
.ganancias-scene.has-active .gan-orb:not(.is-active) { opacity: .55; }
.ganancias-scene.has-active .gan-orb:not(.is-active):hover { opacity: 1; }

/* Entrance — JS añade .visible */
.gan-orb.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ DETAIL PANEL — franja propia debajo de la escena ═══
   Se posiciona FUERA del grid de orbs para que nunca se solape.
   Comparte la estética glass con las pills. */
.gan-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(660px, 100%);
  margin: 0 auto;
  padding: 12px 20px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 12px;
  text-align: left;
  box-shadow:
    0 12px 32px rgba(74,60,174,.10),
    0 3px 8px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
  transition: border-color .25s ease;
}

.gan-detail-tag {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mid);
  background: rgba(155,142,240,.16);
  padding: 5px 11px;
  border-radius: 999px;
}

.gan-detail-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gan-wave,
  .gan-halo { animation: none; }
}

/* ─── SOCIAL PROOF — COLEGIOS ─────────────────────
   Goal: section reads as ALIVE (drifting orbs + slow conic sweep + floating
   particles, all in palette). Stats are richer cards w/ unique mini-viz.
   Moments use real <img> from Adobe Firefly. Testimonios stay 3-up with the
   center one as a dark hero card. Logos cierran como marquee infinito. */
.section-social {
  /* Compactado 25/05/2026: la sección entera debe caber en el alto de un
     viewport típico de laptop (800-900px) cuando el user clickea "Comunidad"
     en la navbar. scroll-margin-top reducido a 76 (navbar ~52 + 24 de holgura)
     para que el header de la sección quede justo debajo de la navbar.
     z-index: 2 (25/05/2026 v7 · Propuesta 4): la sección se pinta ENCIMA
     de la siguiente (Productos, fondo oscuro). Sin esto, la shadow inferior
     de las cards al hacer hover queda tapada por el bg oscuro de Productos. */
  padding: 64px 0 56px;
  background: transparent;
  position: relative;
  z-index: 2;
  scroll-margin-top: 76px;
  isolation: isolate;
  /* overflow:hidden movido al .colegios-bg para que la sombra del hover
     en testi-card pueda bleed verticalmente sin que el sección la clipee.
     El background decorativo se sigue conteniendo a sí mismo via inset:0
     + overflow:hidden propio. */
}
.section-social > .colegios-bg {
  overflow: hidden;
}

.section-social > .container {
  position: relative;
  z-index: 1;
}

/* Section header overrides para Comunidad — tamaños compactos para que
   el bloque header + carrusel se sienta liviano y deje protagonismo
   al contenido (testimonios + fotos). */
.section-social .section-title {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.18;
}
.section-social .section-kicker {
  font-size: 10px;
  padding: 4px 11px;
  letter-spacing: .14em;
}

/* Background layer */
.colegios-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Subtle blueprint grid — low contrast texture */
.colegios-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(74,60,174,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(74,60,174,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, transparent 95%);
}

/* Slow rotating conic — gentle "light sweeping the room" feel.
   Capped at 1100px so the blurred conic surface stays manageable for the
   GPU on large viewports. Intensidad reducida para no competir con el
   stats panel y los testimonios — el fondo debe sugerir, no protagonizar. */
.colegios-conic {
  position: absolute;
  top: 50%; left: 50%;
  width: min(110vw, 1100px);
  height: min(110vw, 1100px);
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(155,142,240,.05) 40deg,
    rgba(107,92,231,.07) 70deg,
    transparent 110deg,
    transparent 220deg,
    rgba(155,142,240,.03) 250deg,
    rgba(107,92,231,.06) 290deg,
    transparent 360deg
  );
  filter: blur(28px);
  animation: colegiosConicSpin 90s linear infinite;
  opacity: .75;
}
@keyframes colegiosConicSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Soft purple blooms — drift slowly so the area "breathes" */
.colegios-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.colegios-bloom--1 {
  top: -120px; left: -100px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(155,142,240,.22) 0%, transparent 65%);
  animation: bloomDriftA 28s ease-in-out infinite alternate;
}
.colegios-bloom--2 {
  bottom: 60px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(107,92,231,.18) 0%, transparent 65%);
  animation: bloomDriftB 34s ease-in-out infinite alternate;
}
.colegios-bloom--3 {
  top: 45%; left: 55%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(192,132,252,.12) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  animation: bloomDriftC 40s ease-in-out infinite alternate;
}
@keyframes bloomDriftA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.12); }
}
@keyframes bloomDriftB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-100px, -50px) scale(1.08); }
}
@keyframes bloomDriftC {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-40%, -60%) scale(1.18); }
}

/* Flowing data streams — dashed SVG lines that crawl horizontally across
   the section. The dashes move via stroke-dashoffset animation, evoking
   "transactions flowing through Tap In". Speeds vary so they don't sync. */
.colegios-streams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .35;
}
.cs { animation: streamFlow var(--cs-dur, 18s) linear infinite; }
.cs--1 { --cs-dur: 22s; }
.cs--2 { --cs-dur: 28s; animation-direction: reverse; }
.cs--3 { --cs-dur: 18s; }
.cs--4 { --cs-dur: 24s; animation-direction: reverse; }
@keyframes streamFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -200; }
}
@media (prefers-reduced-motion: reduce) {
  .colegios-bloom, .colegios-conic, .cs { animation: none; }
}

/* ─ Constellation network (background) ─
   SVG con nodos+lineas que sugiere "comunidad de colegios conectados".
   Algunos nodos pulsan; el conjunto rota MUY lento alrededor del centro
   para dar vida sin distraer. Ocupa toda la sección con ligero parallax
   visual a través de su mask gradient (centro denso, bordes diluidos). */
.colegios-constellation {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
  animation: constellationDrift 80s linear infinite;
  transform-origin: center;
}
@keyframes constellationDrift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cnst-links { animation: constellationFade 12s ease-in-out infinite; }
@keyframes constellationFade {
  0%, 100% { opacity: .4; }
  50%      { opacity: .85; }
}
.cnst-n { transform-origin: center; }
.cnst-n--lg { filter: drop-shadow(0 0 6px rgba(155,142,240,.6)); }
.pulse-1 { animation: cnstPulse 3.4s ease-in-out infinite; }
.pulse-2 { animation: cnstPulse 4.2s ease-in-out infinite .8s; }
.pulse-3 { animation: cnstPulse 3.8s ease-in-out infinite 1.6s; }
@keyframes cnstPulse {
  0%, 100% { opacity: .65; r: 4; }
  50%      { opacity: 1; r: 6.5; }
}

/* ─ Floating particles ─
   Pequeños puntos que ascienden lentamente desde el bottom hasta el top
   de la sección, dando sensación de "actividad real". Cada partícula
   tiene su propia posición horizontal (--x) y duración (--d). */
.colegios-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cp {
  position: absolute;
  bottom: -12px;
  left: var(--x, 50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #C4B5FD 0%, transparent 70%);
  opacity: 0;
  animation: cpRise var(--d, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes cpRise {
  0%   { transform: translateY(0)    scale(.8); opacity: 0; }
  10%  { opacity: .6; }
  50%  { opacity: .9; }
  90%  { opacity: .4; }
  100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .colegios-constellation { animation: none; }
  .cnst-links { animation: none; opacity: .55; }
  .pulse-1, .pulse-2, .pulse-3 { animation: none; }
  .cp { display: none; }
}

/* Section title — disable italic globally for this section */
.section-social .section-title em.hl,
.section-social .section-title .hl {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(110deg, var(--c-mid) 0%, var(--c-main) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section kicker — solid pill with green pulsing dot */
.section-social .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(107,92,231,.32);
  color: #3b2db0;
  padding: 7px 14px 7px 11px;
  box-shadow:
    0 6px 16px -4px rgba(74,60,174,.14),
    0 1px 2px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,1);
}
.section-social .section-kicker .kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: kickerPulse 2.4s ease-in-out infinite;
}
@keyframes kickerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.04); }
}

/* ─ Stats panel — editorial "data sheet" ──────────
   A SINGLE unified panel with a header row (kicker + live indicator) and
   3 cells separated by vertical dividers. Each cell uses the same vertical
   rhythm (id / number / label / micro-viz / trend) but a unique microvis
   (sparkline / avatar stack / check sequence) — so the row reads as a
   curated infographic, not a generic 3-up SaaS card grid. */
.stats-panel {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(107,92,231,.16);
  border-radius: 24px;
  margin-bottom: 88px;
  overflow: hidden;
  box-shadow:
    0 24px 56px -22px rgba(74,60,174,.20),
    0 4px 10px rgba(74,60,174,.06);
}
.stats-panel::before {
  /* Subtle vertical dash motif on the left edge — Tap In brand cue */
  content: '';
  position: absolute;
  top: 22px; bottom: 22px; left: 0;
  width: 3px;
  background:
    repeating-linear-gradient(
      to bottom,
      #6B5CE7 0 8px,
      transparent 8px 16px
    );
  opacity: .9;
}
.stats-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px dashed rgba(107,92,231,.18);
  background: linear-gradient(180deg, rgba(238,237,254,.55) 0%, transparent 100%);
}
.sp-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3b2db0;
}
.sp-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: -.005em;
}
.sp-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: kickerPulse 2.4s ease-in-out infinite;
}

.stats-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.stat-cell {
  position: relative;
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .35s ease;
}
.stat-cell:hover { background: rgba(238,237,254,.35); }
.stat-cell + .stat-cell::before {
  content: '';
  position: absolute;
  top: 24px; bottom: 24px;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(107,92,231,.18) 20%,
    rgba(107,92,231,.18) 80%,
    transparent 100%);
}
.stat-cell-id {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(107,92,231,.7);
  font-feature-settings: 'tnum';
}
.stat-cell-num {
  font-size: 56px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.04em;
  line-height: .95;
  font-feature-settings: 'tnum';
  margin: 4px 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.stat-num-value { color: inherit; }
.stat-num-suffix {
  /* Sufijo "K+" más liviano y un escalón más chico para que el dígito
     quede como protagonista visual sin perder la noción de magnitud. */
  font-size: .55em;
  font-weight: 700;
  color: rgba(107,92,231,.78);
  letter-spacing: .01em;
  margin-left: 2px;
}
.stat-cell-label {
  font-size: 13.5px;
  color: var(--c-text);
  font-weight: 500;
  line-height: 1.45;
  max-width: 240px;
  margin-bottom: 6px;
}
.stat-cell-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  color: #15803d;
  background: rgba(34,197,94,.12);
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: -.005em;
  white-space: nowrap;
  margin-top: 6px;
}
.stat-cell-trend svg { width: 10px; height: 10px; }

/* Microviz: sparkline — alto unificado a 32px en todas las celdas (ver
   también .stat-cell-avatars y .stat-cell-checks) para que el row tenga
   un baseline horizontal limpio aunque cada microviz sea distinto. */
.stat-cell-viz {
  width: 100%;
  max-width: 180px;
  height: 32px;
  margin-top: 4px;
  opacity: .92;
}

/* Microviz: avatar stack */
.stat-cell-avatars {
  display: flex;
  align-items: center;
  height: 32px;
  margin-top: 4px;
}
.sv-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  border: 2px solid #ffffff;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(74,60,174,.18);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.sv-av:first-child { margin-left: 0; }
.sv-av--1 { background: linear-gradient(135deg, #9B8EF0, #6B5CE7); }
.sv-av--2 { background: linear-gradient(135deg, #C4B5FD, #9B8EF0); }
.sv-av--3 { background: linear-gradient(135deg, #6B5CE7, #4A3CAE); }
.sv-av--4 { background: linear-gradient(135deg, #4A3CAE, #2D2560); }
.sv-av--5 { background: linear-gradient(135deg, #C4B5FD, #6B5CE7); }
.sv-av--more {
  background: #ffffff;
  color: #4A3CAE;
  border: 2px solid rgba(107,92,231,.32);
  font-size: 9.5px;
}
.stat-cell:hover .sv-av { transform: translateY(-2px); }
.stat-cell:hover .sv-av:nth-child(1) { transition-delay: 0s; }
.stat-cell:hover .sv-av:nth-child(2) { transition-delay: .04s; }
.stat-cell:hover .sv-av:nth-child(3) { transition-delay: .08s; }
.stat-cell:hover .sv-av:nth-child(4) { transition-delay: .12s; }
.stat-cell:hover .sv-av:nth-child(5) { transition-delay: .16s; }
.stat-cell:hover .sv-av:nth-child(6) { transition-delay: .20s; }

/* Microviz: check sequence ─ 8 small checkmarks signaling "all clear" */
.stat-cell-checks {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-top: 4px;
}
.stat-cell-checks span {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(107,92,231,.20);
  animation: checksRise .55s cubic-bezier(.22,1,.36,1) backwards;
}
.stat-cell-checks span:nth-child(1) { animation-delay: .05s; }
.stat-cell-checks span:nth-child(2) { animation-delay: .10s; }
.stat-cell-checks span:nth-child(3) { animation-delay: .15s; }
.stat-cell-checks span:nth-child(4) { animation-delay: .20s; }
.stat-cell-checks span:nth-child(5) { animation-delay: .25s; }
.stat-cell-checks span:nth-child(6) { animation-delay: .30s; }
.stat-cell-checks span:nth-child(7) { animation-delay: .35s; }
.stat-cell-checks span:nth-child(8) { animation-delay: .40s; }
.stat-cell-checks .check-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #6B5CE7;
  color: #ffffff;
  display: grid;
  place-items: center;
  margin-left: 4px;
  animation-delay: .50s;
  box-shadow: 0 4px 10px rgba(107,92,231,.45);
}
.stat-cell-checks .check-mark svg { width: 12px; height: 12px; }
@keyframes checksRise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 900px) {
  .stats-panel-body { grid-template-columns: 1fr; }
  .stat-cell + .stat-cell::before {
    top: 0; bottom: auto; left: 24px; right: 24px;
    width: auto; height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(107,92,231,.18) 20%, rgba(107,92,231,.18) 80%, transparent 100%);
  }
}

/* ─ "Moments" — three real-photo cards ────────────
   Slot for AI-generated images. Cards animate in on hover with a soft
   zoom on the photo + lift on the card. Deep purple frame so the photo
   sits on-brand. */
.moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gap más amplio para que las 3 fotos respiren — antes 22px se sentía
     apretado dado que cada card lleva foto + caption con texto. */
  gap: 32px;
  /* Compactado 20/05/2026: antes 90px, ahora 24px — apretamos hacia la
     sección siguiente (Productos). */
  margin-bottom: 24px;
}

/* ─── CARRUSEL DESLIZANTE DE COMUNIDAD (3ra pasada 21/05/2026) ──────────
   3 cards visibles. La del centro es la destacada (opacity 1, scale 1).
   Laterales atenuadas (opacity 0.55, scale 0.92). Track se desplaza
   horizontalmente cada 5s. Click en lateral → esa card se mueve al centro
   Y se abre su panel "Ver más" automáticamente. */
.moments--carousel {
  display: block;
  position: relative;
  /* Max-width reducido de 1200 → 1040 (25/05/2026 v2): las cards quedaban
     muy grandes/apretadas y además las laterales tocaban casi el borde
     del viewport, donde el body con overflow-x:clip cortaba la shadow del
     hover. Achicando el carrusel quedan ~200px de aire a cada lado en
     viewport de 1440 — la shadow ahora respira sin clip. */
  max-width: 1040px;
  margin: 0 auto 12px;
  padding: 0;
}
.moments-viewport {
  position: relative;
  /* overflow-x: clip + overflow-y: visible permite cortar el track horizontal
     PERO dejar que la box-shadow del hover bleed hacia abajo sin clippearse
     (22/05/2026 fix: la shadow se cortaba en la parte inferior).
     overflow-clip-margin agrega "colchón" alrededor del clip para que las
     shadows de las cards laterales puedan bleed hacia los lados también
     sin que el track se desborde realmente. */
  overflow-x: clip;
  overflow-y: visible;
  /* clip-margin a 0 (25/05/2026 v8 · Propuesta 3): ya no necesitamos bleed
     en el viewport porque las shadows viven en el ghost layer (afuera del
     clip). Con margin 0, los clones del wrap-around se esconden de manera
     totalmente limpia — sin peeks de cards extras. */
  overflow-clip-margin: 0;
  padding: 10px 0 8px;
  /* Mask removida (22/05/2026): el degradé blanco lateral no quedaba bien.
     Ahora las cards laterales se ven íntegras hasta el borde del viewport. */
}
.moments-track {
  display: flex;
  align-items: center;
  /* Gap reducido a 24px (Bloque 3 refinamiento) para mayor cohesión visual */
  gap: 24px;
  /* --track-x se setea en .moments--carousel (no acá) para que también lo
     reciba .moments-shadow-track y ambos tracks se muevan sincronizados. */
  transform: translateX(var(--track-x, 0));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  position: relative;
  z-index: 1;
}
.moments-track .moment {
  /* (100% - 2*gap) / 3 cards visibles */
  flex: 0 0 calc((100% - 48px) / 3);
  opacity: 1;
  /* Cards laterales notablemente más oscuras que la centrada (22/05/2026):
     antes era opacity 0.55 → se veían "lavadas/aclaradas" sobre el fondo claro
     de la sección. El user pidió que se vean más OSCURAS — usamos brightness
     + saturate en lugar de opacity para que el efecto sea oscurecimiento real. */
  filter: brightness(0.55) saturate(0.85);
  transform: scale(0.92);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .4s ease;
  cursor: pointer;
}
.moments-track .moment.is-centered {
  opacity: 1;
  filter: none;
  transform: scale(1);
  z-index: 2;
}
.moments-track .moment:hover:not(.is-centered) {
  filter: brightness(0.78) saturate(0.95);
  transform: scale(0.94) translateY(-4px);
}
/* Hover sobre la card centrada — agrandamiento leve adicional + lift
   (22/05/2026): pedido del usuario que también responda al hover, pero
   con un crecimiento más sutil que las laterales. */
.moments-track .moment.is-centered:hover {
  transform: scale(1.025) translateY(-4px);
}
.moments-track .moment.is-centered.is-open:hover {
  /* Cuando ya está abierta con el panel "Ver más", mantenemos el lift sin
     crecer en escala (evita que el panel extra se sienta inestable). */
  transform: scale(1.015) translateY(-6px);
}

/* HUÉRFANO 3RA PASADA — revisar (.moments-dots y .moments-dot ya no se usan)
.moments-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
}
.moments-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(155, 142, 240, .35);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background .3s ease, transform .3s ease;
}
.moments-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.moments-dot:hover { background: rgba(107, 92, 231, .65); transform: scale(1.15); }
.moments-dot.is-active {
  background: var(--c-main);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(107, 92, 231, .14);
}
*/

/* Flechas prev/next del carrusel (Bloque 2 · 21/05/2026) */
.moments-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(155, 142, 240, 0.30);
  box-shadow: 0 8px 22px -8px rgba(74, 60, 174, 0.30);
  color: var(--c-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.moments-arrow:hover {
  color: #2A2058;
  border-color: rgba(107, 92, 231, 0.45);
  box-shadow:
    0 18px 36px -10px rgba(74, 60, 174, 0.35),
    0 3px 8px rgba(74, 60, 174, 0.12);
  transform: translateY(-50%) scale(1.08);
}
.moments-arrow:active {
  transform: translateY(-50%) scale(0.96);
}
/* Flechas fuera del carrusel — centradas en el espacio libre real
   (22/05/2026): el carrusel tiene max 1200px centrados. El espacio libre
   a cada lado es (100vw - 100%)/2. La midline de ese espacio cae a
   (100vw - 100%)/4 del borde de la card. Restamos 22px (mitad del ancho
   del botón = 44/2) para obtener el left de la flecha. Clamp() limita los
   extremos para que en pantallas muy anchas la flecha no quede lejísima
   del usuario, y en intermedias no se solape con la card. */
.moments-arrow--prev {
  left: clamp(-140px, calc(-1 * (100vw - 100%) / 4 - 22px), -52px);
}
.moments-arrow--next {
  right: clamp(-140px, calc(-1 * (100vw - 100%) / 4 - 22px), -52px);
}
.moments-arrow:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: 3px;
}

/* Contador "01 / 04" debajo del track. (25/05/2026 v4): margin-top
   grande (220px) — al click en "Comunidad" el smooth-scroll centra
   header→carrusel y el counter cae deliberadamente bajo el fold (hasta
   en viewports de ~1080). Aparece sólo cuando el user empieza a
   scrollear, como detalle de "hay más para descubrir". */
.moments-counter {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin-top: 220px;
  font-family: var(--font, 'Poppins', sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: rgba(45, 37, 96, 0.55);
}
.moments-counter-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-main);
}
.moments-counter-sep {
  font-size: 14px;
  opacity: 0.5;
}
.moments-counter-total {
  font-size: 13px;
  font-weight: 500;
}

/* Viewports intermedios (>900 pero <1280px): el espacio libre lateral es
   muy estrecho — las flechas vuelven a posición interna para no quedar
   fuera de pantalla ni solaparse con la card. (22/05/2026) */
@media (max-width: 1279px) {
  .moments-arrow--prev { left: 8px; }
  .moments-arrow--next { right: 8px; }
}

/* Teléfonos + TABLETS (≤1279px): carrusel con scroll-snap NATIVO full-bleed.
   R3.2: extendido 640→1279 porque el scroll nativo da el mejor swipe táctil
   (fluido, sigue el dedo) en iOS y llega al borde de la pantalla. El tamaño de
   card se ajusta por orientación más abajo (1 grande en vertical, 3 en
   horizontal). Desktop (≥1280) usa su propio carrusel (sin tocar). */
@media (max-width: 1279px) {
  /* R2.2 · Carrusel a sangre completa (100vw) para que las cards laterales
     lleguen hasta el borde de la pantalla (antes quedaba una barra clara del
     fondo a los costados). Rompe el gutter del .container. */
  .moments--carousel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .moments-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* R2.2 · SIN padding lateral: las cards llegan al borde (peek = ancho de
       card). SIN mask de borde — laterales completas, sólo atenuadas por
       opacidad (.m-active vía JS). */
    padding: 14px 0;
    scrollbar-width: none;
  }
  .moments-viewport::-webkit-scrollbar { display: none; }
  .moments-track {
    transform: none !important;
    gap: 14px;
  }
  .moments-track .moment {
    /* R2.2 · 80% del viewport completo: card grande al centro + peek de las
       laterales que llega hasta el borde de la pantalla. */
    flex: 0 0 80%;
    scroll-snap-align: center;
    opacity: 1;
    /* Transición corta (.3s) para que el cambio de activa se sienta a tiempo
       y repinte menos al deslizar. */
    transition: transform .3s ease, filter .3s ease !important;
  }
  /* R3.3 · Inactivas = MÁS OSCURAS y MÁS CHICAS que la activa (igual que en
     PC). brightness/saturate para oscurecer + scale(.92) para achicar. */
  .moments-track .moment:not(.m-active) {
    filter: brightness(.55) saturate(.85) !important;
    transform: scale(.92) !important;
  }
  .moments-track .moment.m-active {
    filter: none !important;
    transform: scale(1) !important;
  }
  /* R2.2 · Touch: anular transforms de hover/press. En iOS el :hover queda
     "pegado" al tocar y `.moment:hover:not(.is-centered)` achicaba la card
     (scale .94). En mobile la card NO cambia de tamaño al tocarla; el único
     click útil es el botón "Ver más". */
  .moments-track .moment:hover,
  .moments-track .moment:hover:not(.is-centered),
  .moments-track .moment.is-centered:hover,
  .moment:hover {
    transform: none !important;
  }
  .moment:hover .moment-photo img { transform: none !important; }
  /* R2.2 · Durante el salto del loop infinito congelamos las transitions de
     las cards para que el reposicionamiento sea 100% imperceptible. */
  .moments--carousel.m-no-anim .moment,
  .moments--carousel.m-no-anim .moment * {
    transition: none !important;
  }
  /* R2.2 · Pill de la tag del panel "Ver más" más chica para que no se vea
     apretada / partida (ej. "EL CAMBIO EN OPERACIONES"). Especificidad
     .moments-track ... para ganarle a la regla base posterior en el archivo. */
  .moments-track .moment-extra-tag {
    font-size: 9px;
    letter-spacing: .06em;
    padding: 4px 9px;
    margin-bottom: 12px;
  }
  /* R2 · Foto más alta en mobile: con más alto la imagen y el degradé
     respiran y el caption deja de copar la card. aspect 3/4 = foto más
     vertical → se ve foto + degradé + texto. */
  .moments-track .moment .moment-photo {
    aspect-ratio: 3 / 4;
  }
  /* Flechas ocultas en mobile (scroll horizontal cubre el caso) */
  .moments-arrow { display: none; }
  /* Contador igual de visible en mobile, sirve como orientación */
  .moments-counter { margin-top: 10px; }
}

.moment {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1230;
  /* Sin borde morado/negro: la fotografía es la heroína de la card.
     La elevación viene del shadow, no de un stroke duro. */
  border: 0;
  /* SHADOW MOVIDA AL GHOST LAYER (25/05/2026 v8 · Propuesta 3): la shadow
     antes vivía acá pero la clippeaba el overflow:clip del viewport. Ahora
     la dibuja .moment-ghost en .moments-shadow-layer (que está afuera del
     clip). Esta card sólo lleva imagen + contenido. */
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}
.moment:focus-visible {
  outline: 3px solid rgba(107,92,231,.55);
  outline-offset: 3px;
}
.moment:hover {
  transform: translateY(-6px);
}
/* Estado expandido — la card sube un poco más para reforzar que está
   "abierta", sin cambiar dimensiones (la expansión ocurre dentro de la
   foto). El shadow extra lo dibuja el ghost. */
.moment.is-open {
  transform: translateY(-8px);
}

/* ─── GHOST SHADOW LAYER (Propuesta 3 · 25/05/2026 v8) ──────────────────
   Capa de "fantasmas" detrás del viewport. Cada ghost dibuja la shadow de
   su card correspondiente, PERO vive afuera del overflow:clip del viewport.
   Así las shadows nunca se recortan en los costados, manteniendo el
   carrusel intacto en tamaño, posición y funcionamiento. */
.moments-shadow-layer {
  position: absolute;
  /* Misma área visual que el viewport (que tiene padding 10/0/8) */
  top: 10px;
  bottom: 8px;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.moments-shadow-track {
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateX(var(--track-x, 0));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.moment-ghost {
  flex: 0 0 calc((100% - 48px) / 3);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: transparent;
  /* Shadow base SIEMPRE presente — la visibilidad se controla vía opacity
     (no via box-shadow on/off). Razón: con opacity podemos usar transitions
     asimétricos: fade-out rápido (outgoing) + fade-in retrasado (incoming).
     Así, durante el slide del carrusel, la sombra de la card que va saliendo
     desaparece antes de que la nueva entre — evitando que se vea sombra
     "fantasma" en el aire cuando la card que está entrando todavía no llegó. */
  box-shadow:
    0 22px 50px -18px rgba(74,60,174,.32),
    0 5px 12px rgba(74,60,174,.10);
  opacity: 0;
  transform: scale(0.92);
  /* Default (transición CUANDO PIERDE .is-visible): fade-out RÁPIDO sin delay */
  transition:
    opacity 0.28s ease,
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .4s ease;
}
.moment-ghost.is-centered {
  transform: scale(1);
}
.moment-ghost.is-visible {
  opacity: 1;
  /* Transición CUANDO GANA .is-visible: fade-in con DELAY de 0.3s, así la
     sombra aparece recién en la segunda mitad del slide — cuando la card
     ya está visualmente dentro del viewport. */
  transition:
    opacity 0.3s ease 0.32s,
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .4s ease;
}
.moment-ghost.is-visible.is-hovered:not(.is-centered) {
  transform: scale(0.94) translateY(-4px);
  box-shadow:
    0 36px 72px -18px rgba(74,60,174,.48),
    0 10px 22px rgba(74,60,174,.18);
}
.moment-ghost.is-visible.is-centered.is-hovered {
  transform: scale(1.025) translateY(-4px);
  box-shadow:
    0 36px 72px -18px rgba(74,60,174,.48),
    0 10px 22px rgba(74,60,174,.18);
}
.moment-ghost.is-visible.is-open {
  transform: translateY(-8px) scale(1);
  box-shadow:
    0 40px 80px -18px rgba(74,60,174,.55),
    0 12px 26px rgba(74,60,174,.22);
}
.moment-ghost.is-visible.is-centered.is-open.is-hovered {
  transform: scale(1.015) translateY(-6px);
}
/* Snap silencioso: la clase .is-snapping congela las transitions de los
   tracks. Para cards y ghosts, las transitions se manejan inline en JS
   solo durante el wrap-around snap (puntualmente). De esa forma, la clase
   .is-snapping puede quedar permanente después del init (necesaria para
   evitar la animación de "slide" en el posicionamiento inicial) SIN
   romper las transitions de hover sobre las cards. */
.moments--carousel.is-snapping .moments-track,
.moments--carousel.is-snapping .moments-shadow-track {
  transition: none !important;
}

/* Silencio TOTAL durante el snap del wrap-around (31/05/2026).
   Cubre tracks, cards, ghosts y cualquier descendiente — evita que
   QUALQUIER property change durante el snap pueda animar y causar
   parpadeo perceptible. Se aplica solo durante el frame del snap. */
.moments--carousel.is-snapping-deep,
.moments--carousel.is-snapping-deep *,
.moments--carousel.is-snapping-deep *::before,
.moments--carousel.is-snapping-deep *::after {
  transition: none !important;
  animation: none !important;
}

.moment-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(155,142,240,.25) 0%, transparent 60%),
    linear-gradient(160deg, #2D2560 0%, #1a1230 100%);
}
.moment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.moment:hover .moment-photo img { transform: scale(1.06); }

.moment-overlay {
  /* Degradé inferior más oscuro y subido (25/05/2026 v3): empezamos a
     oscurecer desde el 22% (antes 35) y el midpoint a .55→.65 alpha,
     llegando casi opaco al fondo. El texto del caption (tag tiempo +
     título + bajada + atribución + botón) queda claramente legible aun
     en fotos claras tipo la del director. */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14,10,36,0)  18%,
      rgba(14,10,36,.32) 40%,
      rgba(14,10,36,.72) 65%,
      rgba(14,10,36,.92) 85%,
      rgba(14,10,36,.98) 100%);
  pointer-events: none;
}

/* Tag de módulo · esquina superior izquierda de cada foto. Efecto glass
   suave: fondo morado-oscuro semi-transparente + backdrop blur. Texto
   blanco al 92% — legible pero sin el "punch" del morado sólido que
   antes hacía demasiado contraste contra la foto. */
.moment-tag {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  background: rgba(45, 37, 96, 0.42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.moment-tag svg { display: block; opacity: .9; }

.moment-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 24px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.moment-time {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #C4B5FD;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 10px 4px 8px;
  background: rgba(155,142,240,.12);
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 999px;
}
/* Indicador estético "·" del timestamp — antes era un dot verde tipo
   "live" que sugería data en tiempo real (engañoso para una hora fija).
   Ahora es un punto morado neutro que sirve sólo de bullet visual. */
.moment-time-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #C4B5FD;
  flex-shrink: 0;
}
.moment-caption strong {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.moment-caption span {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}
/* Atribución pseudo-anónima por rol — Bloque 3 (21/05/2026) */
.moment-caption .moment-by {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* ─ Moment toggle — botón "Ver más" embebido en el caption ─
   Apariencia tipo "ghost button" sobre el overlay oscuro. Cuando la card
   está abierta el ícono "+" rota a "×" sin cambiar de glyph (truco
   tipográfico: rotación 45deg sobre el path '+'). */
.moment-toggle {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background .35s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1),
    transform .25s ease;
}
.moment-toggle:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}
.moment-toggle:active { transform: scale(.97); }
.moment-toggle:focus-visible {
  outline: 2px solid rgba(196,181,253,.8);
  outline-offset: 2px;
}
.moment-toggle svg {
  width: 12px; height: 12px;
  /* Rotación + → × (25/05/2026 v3): .6s para acompañar el ritmo más
     lento del panel extra (.75s opacity). */
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.moment.is-open .moment-toggle svg {
  transform: rotate(45deg);
}
.moment.is-open .moment-toggle {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.40);
}

/* ─ Fila de acciones del caption: "Ver más" a la izquierda y "Ir a la
   solución" empujado a la esquina inferior derecha, alineados en la misma
   línea horizontal (02/06/2026). */
.moment-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.moment-actions .moment-toggle {
  margin-top: 0;
  align-self: auto;
}

/* ─ Moment CTA — enlace "Ir a la solución" (PROMPT_02, 02/06/2026) ─
   Visible solo con la card abierta. Enlace secundario con flecha (no botón
   sólido): hereda tamaño/peso del toggle y usa el morado de marca. */
.moment-cta {
  display: none;
  align-items: center;
  gap: .4em;
  margin-left: auto;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #c4b5fd;
  text-decoration: none;
  transition: color .25s ease, gap .25s cubic-bezier(.22,1,.36,1);
}
.moment.is-open .moment-cta {
  display: inline-flex;
}
.moment-cta svg { width: 13px; height: 13px; }
.moment-cta:hover {
  color: #ddd4ff;
  gap: .6em;
}
.moment-cta:focus-visible {
  outline: 2px solid rgba(196,181,253,.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─ Moment extra panel — descripción extendida que aparece DENTRO de la
   foto al click. Cubre TODO el alto con un backdrop oscurecido casi
   opaco — el caption original se desvanece para dar espacio limpio al
   contenido extendido (sin solaparse con el título). El botón Cerrar
   se queda en su lugar abajo. */
.moment-extra {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 28px 84px; /* bottom reservado para el botón */
  background:
    linear-gradient(180deg,
      rgba(14,10,36,.85) 0%,
      rgba(14,10,36,.94) 50%,
      rgba(14,10,36,.97) 100%);
  opacity: 0;
  transform: translateY(20px) scale(.98);
  /* Transitions más lentas + fluidas (25/05/2026 v3): duraciones a .75s
     opacidad y .9s transform — el panel se despliega/cierra con un
     "easing" más pausado, dando tiempo a notar el cambio sin sentirlo
     apurado. Comparten curva cubic-bezier para mantener UN solo movimiento. */
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 2;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.moment.is-open .moment-extra {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.moment-extra-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C4B5FD;
  background: rgba(155,142,240,.18);
  border: 1px solid rgba(155,142,240,.32);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.moment-extra p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  letter-spacing: -.005em;
  margin: 0;
}
/* 22/05/2026: el "Ver más" ahora muestra 2 párrafos (antes/hoy). Gap
   pequeño entre ellos para separar narrativa sin generar un salto duro. */
.moment-extra p + p {
  margin-top: 10px;
}
.moment-extra p strong {
  color: #ffffff;
  font-weight: 700;
}

/* Cuando la extra está abierta:
   - El caption original (time + título + bajada) se oculta para no
     solaparse con el texto extendido.
   - El botón se mantiene visible y clickeable, levantado por encima del
     extra-panel. */
.moment.is-open .moment-caption {
  z-index: 3;
}
/* Caption hiding (al abrir Ver más): duración ampliada (25/05/2026 v3)
   para acompañar el ritmo más lento del panel extra. */
.moment.is-open .moment-time,
.moment.is-open .moment-caption > strong,
.moment.is-open .moment-caption > span {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity .45s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}
/* Caption showing (al cerrar): delay más generoso para que el título
   reaparezca después de que el extra termine de fadear-out. */
.moment-time,
.moment-caption > strong,
.moment-caption > span {
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1) .25s,
    transform .65s cubic-bezier(.22,1,.36,1) .25s;
}

/* ─ Testimonio: logo del colegio en el footer del card ─
   Plaquita "credencial" más prominente en la esquina derecha del bloque
   author. Frame con sombra suave + tag arriba "verificado" para reforzar
   la prueba social. */
.testi-school-logo {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 92px;
  height: 56px;
  padding: 0 14px;
  background: linear-gradient(180deg, #ffffff 0%, #FAF9FE 100%);
  border: 1px solid rgba(107,92,231,.18);
  border-radius: 12px;
  box-shadow:
    0 8px 18px -8px rgba(74,60,174,.18),
    0 2px 4px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,1);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.testi-card:hover .testi-school-logo {
  transform: translateY(-2px);
  border-color: rgba(107,92,231,.32);
  box-shadow:
    0 14px 26px -8px rgba(74,60,174,.26),
    0 3px 6px rgba(74,60,174,.10),
    inset 0 1px 0 rgba(255,255,255,1);
}
.testi-school-logo img {
  max-height: 30px;
  max-width: 110px;
  width: auto;
  height: auto;
  opacity: .92;
  filter: grayscale(80%);
  transition: opacity .3s ease, filter .3s ease;
}
.testi-card:hover .testi-school-logo img {
  opacity: 1;
  filter: grayscale(0%);
}

/* (Tag "Verificado" eliminado por feedback — el logo+nombre+rol ya
   transmite credibilidad sin necesidad del badge extra.) */

/* ════════════════════════════════════════════════
   STATS LIVE BOARD — Dark scoreboard interactivo
   ════════════════════════════════════════════════
   Card oscura que destaca contra el fondo claro de la sección. 3 estaciones
   con vizes únicas (line chart, user grid, uptime heatmap). Active state
   rota cada 6s y el usuario puede fijarlo con click. */
.stats-board {
  position: relative;
  margin: 60px 0 70px;
  /* Padding reducido para que la altura del board coincida con la de los
     moments cards justo arriba (~472px en desktop). */
  padding: 20px 24px 18px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(107,92,231,.22) 0%, transparent 60%),
    linear-gradient(180deg, #1B1740 0%, #0E0C1E 100%);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 70px -22px rgba(14,10,36,.5),
    0 10px 22px rgba(14,10,36,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Background layers — grid + 2 glows + curva decorativa */
.sb-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sb-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(155,142,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,142,240,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 100%);
}
.sb-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
}
.sb-bg-glow--1 {
  top: -120px; left: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(155,142,240,.30) 0%, transparent 70%);
  animation: sbGlowDrift1 28s ease-in-out infinite alternate;
}
@keyframes sbGlowDrift1 {
  to { transform: translate(60px, 40px) scale(1.1); }
}

/* Header — más compacto */
.sb-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(196,181,253,.18);
  flex-wrap: wrap;
  gap: 10px;
}
.sb-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C4B5FD;
}
.sb-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.20);
  animation: kickerPulse 2.4s ease-in-out infinite;
}
/* (sb-head-meta y sb-meta-dot eliminados con la simplificación.) */

/* Grid de estaciones — 3 columnas iguales */
.sb-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Estación: card oscura clickeable — todas las vizes comparten el mismo
   chasis (head / num / label / viz) pero el viz interno es único. */
.sb-stat {
  position: relative;
  text-align: left;
  font-family: inherit;
  background: linear-gradient(180deg, rgba(45,37,96,.55) 0%, rgba(27,23,64,.7) 100%);
  border: 1px solid rgba(155,142,240,.14);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition:
    background .4s ease,
    border-color .4s ease,
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}
.sb-stat:hover {
  background: linear-gradient(180deg, rgba(60,49,130,.65) 0%, rgba(38,32,82,.78) 100%);
  border-color: rgba(155,142,240,.32);
  transform: translateY(-2px);
}
.sb-stat:focus-visible {
  outline: 2px solid rgba(196,181,253,.7);
  outline-offset: 3px;
}
.sb-stat.is-active {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(155,142,240,.28) 0%, transparent 65%),
    linear-gradient(180deg, rgba(74,60,174,.55) 0%, rgba(45,37,96,.7) 100%);
  border-color: rgba(196,181,253,.5);
  box-shadow:
    0 24px 48px -16px rgba(74,60,174,.55),
    0 0 0 1px rgba(196,181,253,.22) inset,
    0 0 28px rgba(155,142,240,.22) inset;
  transform: translateY(-3px);
}

/* (Corner brackets eliminados con la simplificación.) */

/* Header de la estación — ahora solo el id (Trend chip eliminado) */
.sb-stat-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.sb-stat-id {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(196,181,253,.7);
  font-feature-settings: 'tnum';
}

/* Número — más compacto para que el board entero coincida con altura
   de las moments cards. */
.sb-stat-num {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  font-feature-settings: 'tnum';
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 2px;
  background: linear-gradient(135deg, #ffffff 0%, #C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sb-stat-num .stat-num-suffix {
  font-size: .38em;
  font-weight: 700;
  background: linear-gradient(135deg, #C4B5FD 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 4px;
}
.sb-num-prefix {
  font-size: .55em;
  font-weight: 700;
  background: linear-gradient(135deg, #C4B5FD 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 2px;
  letter-spacing: -.04em;
}
.sb-stat-num--zero { letter-spacing: -.06em; }

/* Label — más compacto */
.sb-stat-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-stat-label strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.sb-stat-label span {
  font-size: 11px;
  color: rgba(196,181,253,.6);
  line-height: 1.4;
}

/* Visualización container — altura uniforme entre las 3 estaciones */
.sb-viz {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(196,181,253,.10);
}

/* ── Viz tipo 1: Line chart ── */
.sb-viz--line svg {
  width: 100%;
  height: 60px;
  display: block;
}
.sb-line-area {
  opacity: 0;
  animation: sbLineAreaIn .9s ease .15s forwards;
}
.sb-line-stroke {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: sbLineDraw 1.4s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.sb-line-points circle {
  opacity: 0;
  animation: sbPointFade .35s ease forwards;
}
.sb-line-points circle:nth-child(1) { animation-delay: .25s; }
.sb-line-points circle:nth-child(2) { animation-delay: .35s; }
.sb-line-points circle:nth-child(3) { animation-delay: .45s; }
.sb-line-points circle:nth-child(4) { animation-delay: .55s; }
.sb-line-points circle:nth-child(5) { animation-delay: .65s; }
.sb-line-points circle:nth-child(6) { animation-delay: .75s; }
.sb-line-points circle:nth-child(7) { animation-delay: .85s; }
.sb-line-points circle:nth-child(8) { animation-delay: .95s; }
.sb-line-latest-pulse {
  animation: sbLatestPulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sbLineAreaIn  { to { opacity: 1; } }
@keyframes sbLineDraw    { to { stroke-dashoffset: 0; } }
@keyframes sbPointFade   { to { opacity: 1; } }
@keyframes sbLatestPulse {
  0%, 100% { opacity: .25; r: 11; }
  50%      { opacity: .55; r: 14; }
}
/* (sb-viz-axis eliminado con la simplificación.) */

/* ── Viz tipo 2: User grid ──
   Genera una matrix de "user dots" via background-image (gradient repetidos)
   con masking — algunos están "encendidos" (morado vivo) y otros "apagados"
   (morado tenue). Da sensación de comunidad real. */
.sb-user-grid {
  --on:  rgba(155,142,240,.95);
  --off: rgba(155,142,240,.2);
  width: 100%;
  height: 60px;
  background-image:
    radial-gradient(circle at center, var(--on) 30%, transparent 35%),
    radial-gradient(circle at center, var(--off) 30%, transparent 35%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  border-radius: 6px;
  position: relative;
}
/* (Puntos pulsantes extra y leyenda eliminados — el user grid se sostiene
   solo con el pattern de dots morados, sin necesidad de leyenda explicativa.) */

/* ── Viz tipo 3: Uptime heatmap ──
   30 cuadritos representando 30 días, todos verdes (0 errores). Sutil
   fade-in escalonado al volverse activa la estación. */
.sb-heat-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .26em;
  color: rgba(196,181,253,.45);
  margin-bottom: 6px;
}
.sb-heat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.sb-heat-grid span {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(34,197,94,.4), rgba(34,197,94,.7));
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.18);
  opacity: 0;
  animation: sbHeatIn .35s cubic-bezier(.22,1,.36,1) forwards;
}
.sb-heat-grid span:nth-child(7n+1) { background: linear-gradient(135deg, rgba(34,197,94,.32), rgba(34,197,94,.55)); }
.sb-heat-grid span:nth-child(7n)   { background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(34,197,94,.48)); }
.sb-heat-grid span:nth-child(13),
.sb-heat-grid span:nth-child(20),
.sb-heat-grid span:nth-child(27) { background: linear-gradient(135deg, rgba(34,197,94,.55), rgba(34,197,94,.85)); }

/* Stagger escalonado — usamos nth-child para no escribir 30 reglas */
.sb-stat.is-active .sb-heat-grid span:nth-child(1)  { animation-delay: .02s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(2)  { animation-delay: .05s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(3)  { animation-delay: .08s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(4)  { animation-delay: .11s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(5)  { animation-delay: .14s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(6)  { animation-delay: .17s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(7)  { animation-delay: .20s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(8)  { animation-delay: .22s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(9)  { animation-delay: .24s; }
.sb-stat.is-active .sb-heat-grid span:nth-child(10) { animation-delay: .26s; }
@keyframes sbHeatIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
.sb-heat-grid span { opacity: 1; } /* fallback — reveal default visible */
.sb-heat-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(196,181,253,.55);
}
.sb-heat-scale {
  display: inline-flex;
  gap: 3px;
}
.sb-heat-scale span {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.sb-heat-scale span:nth-child(1) { background: rgba(34,197,94,.20); }
.sb-heat-scale span:nth-child(2) { background: rgba(34,197,94,.40); }
.sb-heat-scale span:nth-child(3) { background: rgba(34,197,94,.65); }
.sb-heat-scale span:nth-child(4) { background: rgba(34,197,94,.90); }

/* ── Viz tipo 4: Timeline horizontal de implementación ──
   Track con 4 dots representando los hitos del onboarding. Línea de
   progreso animada que se dibuja al activarse la estación. */
.sb-viz--timeline {
  padding-top: 12px;
}
.sb-timeline {
  position: relative;
  padding: 18px 4px 4px;
}
.sb-tl-track {
  position: absolute;
  top: 22px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: rgba(196,181,253,.18);
  border-radius: 999px;
  overflow: hidden;
}
.sb-tl-progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #9B8EF0, #C4B5FD);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s;
}
.sb-stat.is-active .sb-tl-progress { transform: scaleX(1); }

.sb-tl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.sb-tl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.sb-tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(196,181,253,.32);
  border: 2px solid rgba(27,23,64,.95);
  box-shadow: 0 0 0 1px rgba(196,181,253,.32);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.sb-stat.is-active .sb-tl-step:nth-child(1) .sb-tl-dot { background: #9B8EF0; box-shadow: 0 0 0 1px #9B8EF0, 0 0 8px rgba(155,142,240,.5); transition-delay: .25s; }
.sb-stat.is-active .sb-tl-step:nth-child(2) .sb-tl-dot { background: #9B8EF0; box-shadow: 0 0 0 1px #9B8EF0, 0 0 8px rgba(155,142,240,.5); transition-delay: .5s; }
.sb-stat.is-active .sb-tl-step:nth-child(3) .sb-tl-dot { background: #9B8EF0; box-shadow: 0 0 0 1px #9B8EF0, 0 0 8px rgba(155,142,240,.5); transition-delay: .75s; }
.sb-stat.is-active .sb-tl-step.is-final .sb-tl-dot {
  background: #C4B5FD;
  box-shadow: 0 0 0 1px #C4B5FD, 0 0 12px rgba(196,181,253,.7);
  transform: scale(1.15);
  transition-delay: 1s;
}
.sb-tl-day {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(196,181,253,.6);
  font-feature-settings: 'tnum';
  margin-top: 2px;
}
.sb-tl-name {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: -.005em;
}
.sb-tl-step.is-final .sb-tl-name { color: #C4B5FD; }

/* Footer del board */
.sb-foot {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(196,181,253,.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sb-foot-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(196,181,253,.7);
}
.sb-foot-info strong {
  color: #ffffff;
  font-weight: 700;
}
.sb-foot-mark {
  display: inline-block;
  width: 18px; height: 6px;
  background: repeating-linear-gradient(to right, #9B8EF0 0 3px, transparent 3px 6px);
  border-radius: 1px;
}

/* (sb-foot-stations / sb-foot-time eliminados con la simplificación —
   las estaciones se cambian directo clickeando las cards.) */

/* Mobile responsive */
@media (max-width: 900px) {
  .stats-board { padding: 18px 16px 16px; margin: 56px 0 64px; border-radius: 18px; }
  .sb-grid { grid-template-columns: 1fr; gap: 10px; }
  .sb-foot { gap: 10px; }
  .sb-stat { padding: 16px 16px 14px; }
  .sb-stat-num { font-size: clamp(40px, 11vw, 54px); }
  .sb-viz--line svg { height: 56px; }
  .sb-user-grid { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-bg-glow--1,
  .sb-line-area, .sb-line-stroke,
  .sb-line-points circle, .sb-line-latest-pulse,
  .sb-pulse { animation: none; }
  .sb-line-area { opacity: 1; }
  .sb-line-stroke { stroke-dashoffset: 0; }
  .sb-line-points circle { opacity: 1; }
}

/* ────────────────────────────────────────────────
   STATS COLLAGE — Composición editorial asimétrica (LEGACY — no usado)
   ──────────────────────────────────────────────── */
.stats-collage {
  position: relative;
  margin: 80px 0 90px;
  padding: 36px 36px 28px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, #ffffff 0%, #FAF9FE 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 70px -22px rgba(74,60,174,.18),
    0 6px 14px rgba(74,60,174,.06);
}
/* Fondo sutil con curvas SVG decorativas */
.sc-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
.sc-circuit {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.sc-curve {
  animation: scCurveFlow 30s linear infinite;
}
.sc-curve--2 { animation-duration: 42s; animation-direction: reverse; }
@keyframes scCurveFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -200; }
}

/* Header editorial */
.sc-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px dashed rgba(107,92,231,.20);
  flex-wrap: wrap;
  gap: 12px;
}
.sc-head-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2A2058;
}
.sc-head-mark {
  display: inline-block;
  width: 18px; height: 6px;
  background:
    repeating-linear-gradient(to right,
      #6B5CE7 0 3px,
      transparent 3px 6px);
  border-radius: 1px;
}
.sc-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--c-muted);
  font-weight: 500;
}
.sc-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: kickerPulse 2.4s ease-in-out infinite;
}

/* Grid asimétrico — el hero ocupa más, los side stack a la derecha */
.sc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.sc-hero {
  position: relative;
  grid-row: 1 / span 2;
  padding: 30px 32px 26px;
  background: #ffffff;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(107,92,231,.10);
}
.sc-side {
  position: relative;
  padding: 22px 24px 20px;
  background: #ffffff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(107,92,231,.10);
}
.sc-side--accent {
  background: linear-gradient(170deg, #2A2058 0%, #1B1740 100%);
  color: #ffffff;
}

/* Brackets en las esquinas — corner ticks tipo carta editorial / blueprint.
   Reemplazan el border completo, dándole personalidad sin "encajonar". */
.sc-bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(107,92,231,.55);
  pointer-events: none;
}
.sc-bracket--tl {
  top: 8px; left: 8px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.sc-bracket--br {
  bottom: 8px; right: 8px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}
.sc-side--accent .sc-bracket {
  border-color: rgba(196,181,253,.55);
}

/* Numeración romana editorial */
.sc-roman {
  position: absolute;
  top: 18px; right: 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(107,92,231,.35);
  font-feature-settings: 'tnum';
}
.sc-side .sc-roman {
  position: relative;
  top: auto; right: auto;
  font-size: 12px;
  color: rgba(107,92,231,.55);
}
.sc-side--accent .sc-roman { color: rgba(196,181,253,.55); }
.sc-side .sc-side-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Eyebrow — pequeña etiqueta en uppercase */
.sc-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4A3CAE;
}
.sc-side--accent .sc-eyebrow { color: #C4B5FD; }

/* Hero number + label en disposición horizontal */
.sc-hero-headline {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}
.sc-hero-num {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(64px, 9vw, 112px);
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.045em;
  line-height: .9;
  font-feature-settings: 'tnum';
}
.sc-hero-num .stat-num-suffix {
  font-size: .42em;
  font-weight: 700;
  color: rgba(107,92,231,.78);
  margin-left: 4px;
}
.sc-hero-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 220px;
  padding-bottom: 10px;
}
.sc-hero-label strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.012em;
  margin-top: 2px;
}
.sc-sub {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.45;
  margin-top: 2px;
}

/* Sparkline grande — la "línea de crecimiento" como elemento gráfico,
   no como microviz escondido. */
.sc-spark {
  width: 100%;
  height: 90px;
  display: block;
}

.sc-hero-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(107,92,231,.12);
}
.sc-divider {
  width: 1px;
  height: 14px;
  background: rgba(107,92,231,.25);
}
.sc-foot-meta {
  font-size: 11.5px;
  color: var(--c-muted);
  letter-spacing: -.005em;
}

/* Trend chip — verde compacto */
.sc-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #15803d;
  background: rgba(34,197,94,.12);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.sc-trend svg { width: 10px; height: 10px; }

/* Side stat — número grande en pos. central, body abajo */
.sc-side-num {
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.04em;
  line-height: .95;
  font-feature-settings: 'tnum';
  margin: 4px 0 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sc-side-num .stat-num-suffix {
  font-size: .55em;
  font-weight: 700;
  color: rgba(107,92,231,.78);
  margin-left: 2px;
}
.sc-side--accent .sc-side-num { color: #ffffff; }
.sc-side--accent .sc-side-num .stat-num-suffix { color: rgba(196,181,253,.85); }
.sc-side-num--zero { letter-spacing: -.05em; }
.sc-side-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-side-body strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.005em;
}
.sc-side-body span {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.45;
}
.sc-side--accent .sc-side-body strong { color: #ffffff; }
.sc-side--accent .sc-side-body span   { color: rgba(196,181,253,.78); }

.sc-side-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

/* Microviz: barras crecientes para Comunidad */
.sc-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}
.sc-bars span {
  width: 8px;
  height: calc(28px * var(--h, .5));
  background: linear-gradient(180deg, #9B8EF0, #6B5CE7);
  border-radius: 2px;
  animation: scBarRise .6s cubic-bezier(.22,1,.36,1) backwards;
}
.sc-bars span:nth-child(1) { animation-delay: .05s; }
.sc-bars span:nth-child(2) { animation-delay: .12s; }
.sc-bars span:nth-child(3) { animation-delay: .19s; }
.sc-bars span:nth-child(4) { animation-delay: .26s; }
@keyframes scBarRise {
  from { height: 0; opacity: 0; }
}

/* Microviz: uptime para Confiabilidad — barra horizontal con dot */
.sc-uptime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}
.sc-uptime-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  animation: kickerPulse 2.4s ease-in-out infinite;
}
.sc-uptime-bar {
  width: 70px;
  height: 4px;
  border-radius: 999px;
  background: rgba(196,181,253,.18);
  overflow: hidden;
  position: relative;
}
.sc-uptime-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #9B8EF0, #C4B5FD);
  transform-origin: left;
  animation: scUptimeFill 1.2s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes scUptimeFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Trend dentro de side-accent — verde chip se ajusta sobre fondo oscuro */
.sc-side--accent .sc-trend {
  background: rgba(34,197,94,.18);
  color: #86efac;
}

/* Footer editorial — línea + "publicación" tipográfica */
.sc-foot {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sc-foot-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(107,92,231,.18),
    transparent);
}
.sc-foot-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(107,92,231,.55);
  font-feature-settings: 'tnum';
}

/* Mobile responsive — pasa a una sola columna y reordena para que el
   hero quede arriba y los side stacked debajo. */
@media (max-width: 900px) {
  .stats-collage { padding: 24px 20px 22px; margin: 56px 0 64px; }
  .sc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
  .sc-hero { grid-row: auto; padding: 24px 22px 22px; gap: 18px; }
  .sc-hero-headline { gap: 14px; }
  .sc-hero-num { font-size: clamp(54px, 16vw, 80px); }
  .sc-spark { height: 64px; }
  .sc-side { padding: 18px 18px 16px; }
  .sc-foot { margin-top: 18px; }
}

/* ─ Testimonios carrusel ──────────────────────────
   Track horizontal con snap, 2 cards visibles a la vez en desktop, navegable
   con flechas + dots. Todas las cards usan el mismo estilo (sin variant
   featured). Las palabras en <strong> dentro del texto generan ritmo y
   guían la lectura a los puntos fuertes. */
.testi-carousel {
  position: relative;
  /* margin más amplio abajo para que la sombra del hover (que ahora bleed
     hasta 90px gracias al clip-path) tenga aire antes del bloque partners. */
  margin-bottom: 130px;
  padding: 0 56px; /* Reserva para flechas */
}
/* Reactivar quitando esta clase del HTML (Diego 19/05/2026) */
.testi-carousel--hidden { display: none !important; }

.testi-viewport {
  /* clip-path con bleed vertical (90px) y horizontal (50px) — la sombra
     del hover puede expandirse en los 4 lados. El gap entre cards (50px)
     es exactamente igual al bleed horizontal: la sombra ocupa el gap
     pero el siguiente card off-screen empieza justo donde termina el
     bleed permitido → no se ve "peek" del siguiente. */
  overflow: visible;
  border-radius: 22px;
  clip-path: inset(-90px -50px);
}

.testi-track {
  display: flex;
  gap: 50px;
  /* Transición más fluida: duración más larga + easing tipo "ease-out-quint".
     El movimiento de las cards se siente "deslizante" en vez de "rápido". */
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.testi-card {
  flex: 0 0 calc(50% - 25px);
  background:
    /* Wash sutil morado en la esquina superior izquierda — agrega
       profundidad sin saturar la tarjeta. */
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(155,142,240,.10) 0%, transparent 65%),
    #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(107,92,231,.18);
  /* Padding compacto — la card luce más esbelta y el carrusel total
     pesa menos vertical. Tag y comilla se reposicionaron arriba para
     caber en el padding-top reducido. */
  padding: 34px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  /* Sombra default morada con presencia clara — la card siempre se ve
     "elevada" sin necesidad de hover. Composición de 3 capas:
     1) Halo morado amplio y difuso
     2) Drop shadow morado más definido
     3) Light kiss superior (highlight inset) para contraste de borde. */
  box-shadow:
    0 30px 50px -22px rgba(107,92,231,.32),
    0 14px 28px -10px rgba(74,60,174,.18),
    0 2px 4px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,1);
  /* Transición unificada · más larga + easing tipo "ease-out-quint" para
     que el hover lift se sienta natural en vez de un "salto" brusco. */
  transition: border-color .6s ease, box-shadow .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(107,92,231,.30);
  /* Hover: sombra más sutil. Antes era muy dramática (.45 + .26) y
     dominaba la sección. Ahora elevation clara pero acompañando, no
     gritando. */
  box-shadow:
    0 28px 48px -22px rgba(107,92,231,.32),
    0 16px 28px -10px rgba(74,60,174,.18),
    0 3px 8px rgba(74,60,174,.08),
    0 0 0 1px rgba(155,142,240,.14),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* (Marca decorativa esquinal eliminada por feedback — la card respira
   limpia con el watermark del logo + autor + cita.) */

/* Watermark del logo — versión MUY grande translúcida del logo del
   colegio, posicionada exageradamente hacia la esquina inferior derecha
   (parte se sale del card a propósito). Hace que cada testimonio "lleve
   la marca" del colegio que lo dice, como un sello de procedencia. */
.testi-card .testi-watermark {
  position: absolute;
  bottom: -90px;
  right: -110px;
  width: 360px;
  height: 360px;
  display: grid;
  place-items: center;
  opacity: .07;
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.testi-card .testi-watermark img {
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(100%);
}
.testi-card:hover .testi-watermark {
  opacity: .11;
  transform: scale(1.04) rotate(-4deg);
}

.testi-quote-mark {
  position: absolute;
  top: 10px; right: 20px;
  width: 22px; height: 22px;
  color: rgba(155,142,240,.28);
  pointer-events: none;
  z-index: 0; /* detrás del texto — si el padding-top no fuese suficiente,
                 el texto se ve por encima en vez de chocar con la comilla. */
}
.testi-quote-mark svg { width: 100%; height: 100%; }
.testi-text, .testi-author, .testi-stars { position: relative; z-index: 1; }

/* Tag de módulo · esquina superior izquierda de cada testimonio.
   Le dice al lector en 1 segundo "este testimonio habla de Casino/CPA/etc". */
.testi-tag {
  position: absolute;
  top: 12px; left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  background: rgba(107,92,231,.10);
  color: var(--c-main, #4A3CAE);
  border: 1px solid rgba(107,92,231,.16);
  line-height: 1;
  z-index: 2;
}
.testi-tag svg { width: 10px; height: 10px; }
.testi-tag svg { display: block; }
/* Variantes por módulo retiradas: ahora todos los tags usan el color
   morado de marca (base .testi-tag arriba). Mantiene una identidad
   visual unificada en la sección. */

/* Pills de las cards off-screen (no marcadas como visibles por JS) —
   se ocultan con fade. Esto evita que durante una transición o por sub-pixel
   render se vea un tag asomando desde fuera del viewport. La transición
   acompaña la del scroll del carrusel (~1s). */
.testi-card:not(.is-card-visible) .testi-tag {
  opacity: 0;
  transition: opacity .35s ease;
}
.testi-card.is-card-visible .testi-tag {
  opacity: 1;
  transition: opacity .5s ease .35s;
}

.testi-stars {
  display: inline-flex;
  gap: 3px;
}
.testi-stars span {
  width: 14px; height: 14px;
  background: #FBBF24;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') center/contain no-repeat;
}

.testi-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  font-weight: 400;
  letter-spacing: -.005em;
  flex: 1;
}
.testi-text strong {
  font-weight: 700;
  color: #2A2058;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(107,92,231,.10);
}
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9B8EF0, #6B5CE7);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(107,92,231,.30);
}
.testi-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.testi-meta strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
}
.testi-meta span {
  font-size: 11.5px;
  color: var(--c-muted);
}
.testi-school {
  color: #4A3CAE !important;
  font-weight: 600;
  margin-top: 1px;
}

/* Carousel navigation arrows */
.testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(107,92,231,.18);
  color: #4A3CAE;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow:
    0 12px 28px -10px rgba(74,60,174,.25),
    0 2px 5px rgba(74,60,174,.08);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              border-color .25s ease,
              box-shadow .25s ease,
              opacity .25s ease;
}
.testi-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(107,92,231,.45);
  color: #2A2058;
  box-shadow:
    0 18px 36px -10px rgba(74,60,174,.35),
    0 3px 8px rgba(74,60,174,.12);
}
.testi-arrow:active { transform: translateY(-50%) scale(.96); }
.testi-arrow svg { width: 20px; height: 20px; }
/* Empujamos las flechas hacia afuera del carrusel (-32px) para que NO
   se monten sobre las cards no-visibles cuando éstas hacen peek por
   el gap. Mobile vuelve a 0 para no salir del viewport. */
.testi-arrow--prev { left: -32px; }
.testi-arrow--next { right: -32px; }
@media (max-width: 720px) {
  .testi-arrow--prev { left: 0; }
  .testi-arrow--next { right: 0; }
}
.testi-arrow:disabled,
.testi-arrow.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Carousel dots */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  /* Más aire entre dots y cards arriba — antes 24px se sentía pegado a
     la sombra del hover. 64px da respiro y separa visualmente la zona
     de "lectura" (cards) de la zona de "navegación" (dots). */
  margin-top: 64px;
}
.testi-dot {
  width: 38px; height: 8px;
  border-radius: 999px;
  background: rgba(107,92,231,.22);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, width .35s cubic-bezier(.22,1,.36,1);
}
.testi-dot:hover { background: rgba(107,92,231,.4); }
.testi-dot.is-active {
  background: linear-gradient(90deg, #6B5CE7, #4A3CAE);
  width: 56px;
}

@media (max-width: 900px) {
  .testi-carousel { padding: 0 12px; }
  .testi-card { flex: 0 0 100%; }
  .testi-arrow { display: none; }
}

/* ─ Section Trusted ───────────────────────────────
   Bloque dedicado para el marquee de partners, posicionado entre el hero
   y la sección Comunidad. Sin título grande, solo la cinta — es validación
   silenciosa antes de cualquier copy. */
.section-trusted {
  padding: 36px 0 28px;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(247,245,255,.6) 60%, rgba(247,245,255,1) 100%);
}
.section-trusted .partners { margin-top: 0; }

/* ─ Partners / logos marquee ──────────────────────
   Loop infinito (dos copias del track desplazándose -50% para que el corte
   sea perfecto). Pausa en hover para que el usuario pueda leer los logos.
   Side-fade masks evitan los cortes duros en los extremos. */
.partners {
  text-align: center;
  margin-top: 24px;
  /* Separación visual entre la cinta de partners y el bloque de fotos
     de moments — antes 0, los dos bloques competían por atención. */
  margin-bottom: 64px;
}
.partners-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 24px;
  padding: 0 16px;
  position: relative;
}
.partners-label::before,
.partners-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(107,92,231,.28), transparent);
}
.partners-label::before { right: 100%; }
.partners-label::after  { left: 100%; }

/* ─── TRUST STRIP · primera sección post-hero ────────────────
   Carrusel infinito de logos en loop continuo de derecha a izquierda
   (~60s/vuelta). No pausa al hover (firma de marca, ref OrderEat).
   Background blanco/muy claro, padding chico para que no compita
   visualmente con el hero. */
.section-trust-strip {
  /* Sin background propio — deja que el gradient del <body>
     (#FAFAFE → #F2F1F8) fluya continuo desde el hero hacia abajo.
     Cualquier color sólido o gradient acá rompe la continuidad y
     genera una "banda" visible. */
  background: transparent;
  /* padding compacto: arriba 48 + abajo 44 — antes 56/72. Apretamos el flujo
     hacia la sección Comunidad sin perder aire para el tooltip de los logos. */
  padding: 48px 0 44px;
  position: relative;
  /* overflow visible: el tooltip de cada logo en hover aparece por debajo
     del rectángulo del carousel y necesita poder pintarse fuera del section. */
  overflow: visible;
}
/* HUÉRFANO 3RA PASADA — revisar
.trust-strip-title {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #6B6A7D;
  margin: 0 0 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
*/

/* Trust-strip title rediseñado · pill con borde sutil + dot animado */
.trust-strip-title-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
}
.trust-strip-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(155, 142, 240, 0.08);
  border: 1px solid rgba(155, 142, 240, 0.18);
  border-radius: 999px;
  white-space: nowrap;
}
.trust-strip-title-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6B5CE7;
  box-shadow: 0 0 0 4px rgba(107, 92, 231, 0.12);
  animation: trustStripDotPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes trustStripDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(107, 92, 231, 0.12); }
  50%      { box-shadow: 0 0 0 6px rgba(107, 92, 231, 0.04); }
}
.trust-strip-title-text {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(74, 60, 174, 0.72);
}
@media (max-width: 540px) {
  .trust-strip-title-pill {
    white-space: normal;
    text-align: center;
    padding: 8px 14px;
  }
  .trust-strip-title-text {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}
/* Marquee del trust-strip · usa misma técnica que el backup .partners-marquee:
   overflow:visible + mask-image horizontal + padding-bottom para tooltip.
   No movemos el mask al track porque ahí recorta los tooltips. */
.trust-strip-carousel {
  position: relative;
  overflow: visible;
  padding: 12px 0 56px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-strip-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: trustStripScroll 60s linear infinite;
}
.trust-strip-item {
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  height: 44px;
  cursor: default;
}
.trust-strip-item img {
  height: 44px;
  width: auto;
  opacity: .55;
  filter: grayscale(100%) brightness(.85);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.trust-strip-item:hover img {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

@keyframes trustStripScroll {
  from { transform: translate3d(0, 0, 0); }
  /* -50% porque la lista contiene 2 copias del set para loop seamless */
  to   { transform: translate3d(-50%, 0, 0); }
}

.partners-marquee {
  position: relative;
  /* overflow:hidden recortaba los tooltips que aparecen debajo de cada
     logo. Pasamos a clip-path para mantener el masking horizontal sin
     limitar el alto. */
  overflow: visible;
  padding: 12px 0 56px; /* room para el tooltip */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  /* Sin animación CSS — el scroll lo maneja JS via requestAnimationFrame
     porque cambiar `animation-duration` mid-loop hace saltar la posición
     al recalcular el progreso. La velocidad cambia suavemente de
     normal a slow al hover sin discontinuidad. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Wrapper interactivo para cada logo — soporta tooltip (::after) */
.partner-item {
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  height: 36px;
}
.partner-item img {
  height: 36px;
  width: auto;
  opacity: .55;
  filter: grayscale(100%) brightness(.85);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.partner-item:hover img {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

/* Tooltip — pill con bordes completamente redondeados + triángulo
   superior unidos como UNA sola figura (mismo color sólido suave, sin
   border, triangulo flush contra la pill sin gap). El triángulo se
   genera con un pseudo `::before` que se solapa visualmente con la pill
   para que no se perciba la unión. */
:root {
  --partner-tip-color: #C8BEF1; /* morado claro/lavanda — menos llamativo */
}
.partner-item::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 14px); /* 14px de separación al logo */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--partner-tip-color);
  color: #2A2058;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 7px 14px;
  border-radius: 999px;     /* completamente redondeados */
  border: 0;                /* sin border — evita línea de separación con el triángulo */
  box-shadow:
    0 10px 22px -8px rgba(107,92,231,.32),
    0 2px 6px rgba(74,60,174,.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
  z-index: 10;
}
/* Triángulo apuntando al logo — flush contra la pill (no separado).
   Usamos border-CSS triangle (no rotate) para que el ápice sea
   geométricamente perfecto. Posicionado para que su BASE coincida con
   el borde superior del pill — visualmente queda como UNA sola figura. */
.partner-item::before {
  content: '';
  position: absolute;
  top: calc(100% + 8px); /* 8px = 14px (top del pill) − 6px (alto del tri) → flush */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid var(--partner-tip-color); /* mismo color sólido */
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
  z-index: 10;
}
.partner-item:hover::after,
.partner-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* (keyframes partnersScroll removida — scroll ahora vía JS RAF) */
@media (prefers-reduced-motion: reduce) {
  .partners-track { transform: none !important; }
}

/* Smaller screens — let testimonials stack */
@media (max-width: 900px) {
  .moments,
  .stats-row,
  .testimonios-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── OBJECIONES ─────────────────────────────────── */
.section-objeciones {
  /* padding-bottom must be ≥ .section-objeciones::after height
     so the atmospheric pseudo never overlaps content. The pseudo is
     now 220px (was 360px) — cuts ~160px of empty white space below
     the FAQ before the contacto canvas begins. */
  padding: 96px 0 320px;
  background: transparent;
  position: relative;
  scroll-margin-top: 96px;
}

/* Belt-and-braces: ensure the FAQ list and any expanded answer always
   render above the atmospheric ::after layer. */
.section-objeciones > .container {
  position: relative;
  z-index: 2;
}

/* Atmospheric transition objeciones (white) → contacto (dark) — mirrors
   the radial bloom pattern from productos→como but inverted: white at
   top, atmospheric purple bloom at bottom dissolving into the dark. */
.section-objeciones::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background:
    /* Final dissolve-to-white at the TOP of the ::after so the upper
       edge matches the wrapper's white pixel-for-pixel (mirror of
       como::before's bottom dissolve). */
    linear-gradient(180deg,
      var(--c-white) 0%,
      rgba(255,255,255,.92) 2%,
      rgba(255,255,255,.55) 8%,
      transparent 18%,
      transparent 100%),
    /* Off-center blooms positioned in the upper half of the transition
       zone so they barely contribute at the bottom edge. */
    radial-gradient(ellipse 55% 60% at 32% 30%,
      rgba(155,142,240,.30) 0%,
      rgba(107,92,231,.14) 42%,
      transparent 75%),
    radial-gradient(ellipse 45% 50% at 78% 26%,
      rgba(192,132,252,.16) 0%,
      transparent 75%),
    /* Dark canvas (mirror of como::before): origin BELOW element so
       solid dark fills the bottom. Same fine-grained alpha stops for
       a smooth dissolve with no visible elliptical edge. */
    radial-gradient(ellipse 140% 100% at 50% 110%,
      #0E0C1E 0%,
      #0E0C1E 38%,
      #14112C 50%,
      #1B1740 60%,
      rgba(45,37,96,.55) 70%,
      rgba(74,60,174,.32) 78%,
      rgba(107,92,231,.20) 84%,
      rgba(155,142,240,.12) 89%,
      rgba(155,142,240,.06) 93%,
      rgba(155,142,240,.02) 97%,
      transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.section-objeciones > .container { position: relative; z-index: 2; }

/* ─── FAQ — two-column layout ─────────────────────
   Questions list on the left, single answer panel on the right.
   A morphing highlight pill slides between questions on hover/click;
   slow drifting blobs animate the upper section so the area never
   reads as flat. All motion sits on `transform` so transitions feel
   fluid (no layout thrash, no mask repaint). */
.faq-layout {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: stretch;
}

/* Background container — keeps every decorative layer outside the
   content stacking context so they can never intercept clicks. */
.section-objeciones .faq-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft line-grid — echoes the .contacto-grid aesthetic so the
   landing reads as one design system. Faint cross-hatch with a
   radial mask that fades it out toward the bottom and edges so it
   only hints at structure in the upper region. */
.section-objeciones .faq-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(155,142,240,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,142,240,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 75%);
}

/* "Scan line" — a wide, blurred violet sweep that travels across
   the grid horizontally on a slow loop. Echoes the productos sweep
   (rotating gradient) and the contacto orb glow, but in a subtle
   linear motion that suggests data flowing under the surface — on
   brand for Tap In's "real-time" promise. */
.section-objeciones .faq-scan {
  position: absolute;
  top: 60px;
  left: -25%;
  width: 50%;
  height: 280px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
    rgba(155,142,240,.13) 0%,
    rgba(124,110,232,.05) 45%,
    transparent 75%);
  filter: blur(28px);
  animation: faqScanSweep 26s linear infinite;
}

@keyframes faqScanSweep {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(360%, 0, 0); opacity: 0; }
}

/* Two soft ambient blobs that drift slowly on the upper edges —
   provide subtle color variation underneath the grid + scan layer.
   Lower intensity than before so they don't push purple onto the
   pills. */
.section-objeciones .ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
}

.section-objeciones .ambient-blob--1 {
  top: 40px;
  left: 6%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle,
    rgba(155,142,240,.14) 0%,
    rgba(155,142,240,.05) 45%,
    transparent 72%);
  animation: blobDrift1 22s ease-in-out infinite;
}

.section-objeciones .ambient-blob--2 {
  top: -20px;
  right: 6%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle,
    rgba(192,132,252,.10) 0%,
    rgba(192,132,252,.04) 45%,
    transparent 72%);
  animation: blobDrift2 28s ease-in-out infinite;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(40px, 28px, 0); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-36px, 36px, 0); }
}

/* ─ Orbital rings (lateral izquierdo del FAQ) ─
   Círculos concéntricos finos que orbitan alrededor de un centro común
   en el costado izquierdo. Sugieren "preguntas que orbitan alrededor de
   la decisión". 3 satélites pequeños recorren las órbitas a velocidades
   distintas, dándole vida sin saturar. */
.faq-orbits {
  position: absolute;
  top: 50%;
  left: -180px;
  width: 600px;
  height: 600px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
.faq-orb-glow {
  animation: faqOrbGlow 8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes faqOrbGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}
.faq-orb-ring {
  transform-origin: 300px 300px;
  animation: faqRingSpin 60s linear infinite;
}
.fo-r1 { animation-duration: 38s; }
.fo-r2 { animation-duration: 52s; animation-direction: reverse; }
.fo-r3 { animation-duration: 70s; }
.fo-r4 { animation-duration: 90s; animation-direction: reverse; }
@keyframes faqRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Satellite dots travel along the rings — animated via offset-path */
.faq-orb-sat {
  filter: drop-shadow(0 0 6px rgba(107,92,231,.7));
}
.fo-s1 {
  offset-path: path('M 380 300 A 80 80 0 1 1 220 300 A 80 80 0 1 1 380 300');
  offset-rotate: 0deg;
  animation: orbSatTravel 16s linear infinite;
}
.fo-s2 {
  offset-path: path('M 440 300 A 140 140 0 1 1 160 300 A 140 140 0 1 1 440 300');
  offset-rotate: 0deg;
  animation: orbSatTravel 28s linear infinite reverse;
}
.fo-s3 {
  offset-path: path('M 500 300 A 200 200 0 1 1 100 300 A 200 200 0 1 1 500 300');
  offset-rotate: 0deg;
  animation: orbSatTravel 42s linear infinite;
}
@keyframes orbSatTravel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* ─ Topographic curves (lateral derecho del FAQ) ─
   Líneas curvas paralelas tipo "curvas de nivel" topográficas. Cada
   línea tiene un drift sutil independiente para que la composición no
   lea como estática. */
.faq-topo {
  position: absolute;
  top: 0;
  right: -150px;
  width: 620px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
}
.ftc {
  animation: topoDrift 14s ease-in-out infinite;
  transform-origin: center;
}
.ftc--1 { animation-duration: 12s; animation-delay: 0s; }
.ftc--2 { animation-duration: 14s; animation-delay: -1.5s; }
.ftc--3 { animation-duration: 16s; animation-delay: -3s; }
.ftc--4 { animation-duration: 18s; animation-delay: -2s; }
.ftc--5 { animation-duration: 14s; animation-delay: -4s; }
.ftc--6 { animation-duration: 16s; animation-delay: -1s; }
@keyframes topoDrift {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(-14px); opacity: .9; }
}

/* ─ Floating question glyph (zona superior central) ─
   Un signo de pregunta etéreo, MUY translúcido, que flota detrás del
   header. Conecta la composición con el tema (preguntas) sin gritar. */
.faq-glyph {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: .7;
  animation: faqGlyphFloat 9s ease-in-out infinite;
}
.faq-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes faqGlyphFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -12px); }
}

@media (max-width: 900px) {
  .faq-orbits { left: -260px; width: 480px; height: 480px; opacity: .55; }
  .faq-topo   { right: -200px; width: 480px; opacity: .55; }
  .faq-glyph  { width: 110px; height: 140px; opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-orb-ring, .fo-s1, .fo-s2, .fo-s3,
  .ftc, .faq-glyph, .faq-orb-glow { animation: none; }
}


.faq-aura {
  position: absolute;
  left: -80px;
  top: 50%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155,142,240,.16) 0%,
    rgba(107,92,231,.08) 35%,
    transparent 70%);
  filter: blur(30px);
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
  z-index: 0;
  animation: faqAuraDrift 18s ease-in-out infinite;
}

@keyframes faqAuraDrift {
  0%, 100% { transform: translate3d(0, -50%, 0); }
  50%      { transform: translate3d(40px, calc(-50% + 30px), 0); }
}

.faq-questions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  z-index: 1;
}

/* Morphing highlight pill — single absolutely-positioned element that
   slides between questions via translate3d (GPU-accelerated). Its
   multi-layered halo comes from box-shadow on this same node, so the
   aura tracks the pill without a second moving layer.
   Easing curve `cubic-bezier(.22,1,.36,1)` is an "ease-out-quart" — the
   pill accelerates softly from rest and decelerates over a long tail,
   giving a heavier, more fluid feel than the previous snappier curve. */
.faq-highlight {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 0;
  border-radius: 16px;
  background: #ffffff;
  /* Sin barra lateral: la pill descansa sobre un sutil halo + borde
     reforzado y un inset highlight superior — la pregunta activa se
     diferencia por presencia, no por una marca dura. */
  border: 1.5px solid rgba(107,92,231,.38);
  box-shadow:
    0 22px 46px -12px rgba(74,60,174,.30),
    0 8px 18px rgba(74,60,174,.14),
    inset 0 1px 0 rgba(255,255,255,1);
  transform: translate3d(0, 0, 0);
  transition: transform .85s cubic-bezier(.22,1,.36,1),
              height .85s cubic-bezier(.22,1,.36,1),
              opacity .35s ease;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}

.faq-highlight.is-ready { opacity: 1; }

/* Soft outer glow that breathes underneath the pill — kept tight
   so it doesn't bleed onto neighboring inactive questions. */
.faq-highlight::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: radial-gradient(ellipse at center,
    rgba(155,142,240,.18) 0%,
    rgba(155,142,240,.05) 45%,
    transparent 75%);
  z-index: -1;
  filter: blur(4px);
  animation: faqHaloBreath 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes faqHaloBreath {
  /* Respiración más sutil: opacity range estrecho para que no compita con
     el texto de la respuesta — el halo debe estar presente pero no
     llamar la atención mientras el usuario lee. */
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-highlight::after { animation: none; opacity: .45; }
}

/* Subtle confirmation pulse — al cambiar de pregunta, la pill emite un
   leve pulso blanco radial centrado (no un sweep morado diagonal, que se
   sentía agresivo). Crece y se desvanece en menos de 700ms para confirmar
   el cambio sin distraer. */
.faq-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.35) 40%,
    transparent 72%);
  opacity: 0;
  pointer-events: none;
  transform: scale(.94);
}

.faq-highlight.is-moving::before {
  animation: faqHighlightPulse .65s cubic-bezier(.22,1,.36,1);
}

@keyframes faqHighlightPulse {
  0%   { opacity: 0; transform: scale(.94); }
  35%  { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

.faq-q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 18px 18px 16px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  text-align: left;
  font-family: inherit;
  font-size: 15.5px;
  /* Inactive questions un poco más oscuras que antes (.62 → .78) — todavía
     leen como secundarias frente a la activa pero mejoran contraste WCAG
     y se distinguen mejor en pantallas con brillo bajo. */
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.45;
  color: rgba(36,28,72,.78);
  cursor: pointer;
  z-index: 1;
  transition: color .25s ease, font-weight .25s ease;
}

.faq-q:hover { color: #1a1530; }
.faq-q:focus-visible {
  outline: 2px solid rgba(107,92,231,.55);
  outline-offset: 3px;
}

.faq-q.is-active {
  color: #1a1530;
  font-weight: 600;
}

/* (Indicador dot a la izquierda eliminado por feedback — la pill morphing
   y el cambio de peso/color ya marcan suficientemente la pregunta activa,
   el dot extra agregaba ruido visual.) */

.q-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(107,92,231,.55);
  font-feature-settings: 'tnum';
  width: 22px;
  transition: color .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
}

.faq-q:hover .q-num { color: #6B5CE7; }

.faq-q.is-active .q-num {
  color: #6B5CE7;
  transform: scale(1.08);
}

.q-text { flex: 1; min-width: 0; }

.q-arrow {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: rgba(107,92,231,.4);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1),
              color .3s ease;
}

.q-arrow svg { width: 16px; height: 16px; }

.faq-q:hover .q-arrow,
.faq-q.is-active .q-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #6B5CE7;
}

.faq-panels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
  border-radius: 22px;
  /* Glass-pane look: very pale gradient + saturated border + layered shadow.
     Inner ring highlight on top edge sells the "lifted card" feel. */
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,241,254,.92) 100%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1.5px solid rgba(107,92,231,.32);
  box-shadow:
    0 30px 72px -18px rgba(74,60,174,.28),
    0 8px 22px -4px rgba(74,60,174,.14),
    0 2px 4px rgba(74,60,174,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding: 36px 38px;
  overflow: hidden;
}

.faq-panels::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155,142,240,.18) 0%,
    rgba(155,142,240,.06) 40%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.faq-panel {
  position: absolute;
  inset: 36px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

.faq-panel.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  position: relative;
  inset: auto;
}

/* Panel tag — estilo "label" editorial: sin pill enclosure, solo un
   indicador horizontal de barra + texto en small caps. Diferente al
   section kicker (que sí es pill con borde) para no competir visualmente. */
.panel-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4A3CAE;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 22px;
  box-shadow: none;
}

.panel-tag::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4A3CAE, #6B5CE7);
  flex-shrink: 0;
}

.section-objeciones .section-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3b2db0;
  background: #EEEDFE;
  border: 1.5px solid #6B5CE7;
  padding: 7px 16px;
  box-shadow:
    0 8px 18px -5px rgba(74,60,174,.20),
    0 1px 2px rgba(74,60,174,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.section-objeciones .section-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6B5CE7;
  box-shadow: 0 0 0 3px rgba(107,92,231,.18);
}

.faq-panel p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-muted);
  margin: 0;
  letter-spacing: -.005em;
}

/* (Lista con checks dentro de respuestas eliminada por feedback —
   la respuesta vuelve a ser sólo un párrafo limpio.) */

/* ─── FAQ — Mobile responsive ───
   En <= 900px las dos columnas se apilan, la pill se oculta (su
   geometría depende de un layout horizontal que ya no existe) y cada
   pregunta lee como una lista vertical clara. El panel queda debajo
   con el mismo estilo. */
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq-aura { display: none; }
  /* Pill desactivada: en stacked layout la marca activa ya viene del
     ::before dot + cambio de peso/color, no necesita la pill flotante. */
  .faq-highlight { display: none; }
  .faq-q {
    border: 1px solid rgba(107,92,231,.14);
    background: #ffffff;
    padding: 16px 16px 16px 18px;
  }
  .faq-q.is-active {
    border-color: rgba(107,92,231,.40);
    box-shadow:
      0 12px 28px -10px rgba(74,60,174,.18),
      0 2px 6px rgba(74,60,174,.06);
  }
  .faq-questions { gap: 10px; padding: 0; }
  .faq-panels {
    padding: 28px 24px;
    min-height: auto;
  }
  .faq-panel { inset: 28px 24px; }
  .faq-panel.is-active { inset: auto; }
  .section-objeciones { padding: 72px 0 200px; }
}

@media (max-width: 560px) {
  .faq-q { padding: 14px 14px 14px 16px; font-size: 14.5px; }
  .panel-list li { font-size: 14px; }
}

/* ─── CONTACTO ───────────────────────────────────── */
.section-contacto {
  position: relative;
  /* Fit-in-viewport: section fills the visible area below the fixed
     navbar (top:20 + 52 height = 72px occupied) and centers its content.
     scroll-margin-top aligns the section's top with the navbar's bottom
     edge when CTA links anchor to #contacto, so the centered content
     lands perfectly in the middle of the area below the nav. */
  min-height: calc(100vh - 72px);
  scroll-margin-top: 72px;
  display: flex;
  align-items: center;
  padding: 52px 0;
  background: transparent;
  overflow: hidden;
}

.section-contacto > .container { width: 100%; }

.contacto-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Fade the bottom 22% to transparent so the orb/grid dissolve into
     the footer instead of being clipped at a hard line. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.contacto-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .5;
}

.contacto-orb--1 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #4A3CAE 0%, transparent 70%);
  top: 140px; left: -120px;
  animation: contactoOrbFloat 14s ease-in-out infinite;
}

.contacto-orb--2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, #6B5CE7 0%, transparent 70%);
  bottom: -120px; right: -60px;
  opacity: .32;
  animation: contactoOrbFloat 18s ease-in-out -6s infinite reverse;
}

@keyframes contactoOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(28px, -32px) scale(1.06); }
}

/* Faint geometric grid behind the form to add texture */
.contacto-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(155,142,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,142,240,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 50%, #000 0%, transparent 75%);
  opacity: .9;
}

.contacto-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.contacto-left { padding-top: 0; }

.kicker-light .kicker-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,.7);
  animation: livePulse 2.4s ease-in-out infinite;
  margin-right: 4px;
  vertical-align: middle;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

.contacto-title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--c-white);
  margin-bottom: 14px;
  letter-spacing: -.025em;
  /* Looser line + tiny padding to keep descenders (g, j, p) from being
     clipped by the background-clip:text painting box. */
  line-height: 1.18;
  padding-bottom: 0.06em;
  background: linear-gradient(180deg, #fff 0%, #d6cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contacto-subhead {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
  margin-bottom: 22px;
  max-width: 440px;
}

/* Mini timeline */
.contacto-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  position: relative;
}

/* Connector line drawn ONLY between consecutive steps, never crossing
   the step-num itself — fixes the line bleeding through transparent
   number capsules. */
.contacto-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16.5px;            /* center of the 34px step-num */
  top: 36px;               /* just below the step-num bottom */
  bottom: -12px;           /* extend through the gap to next step */
  width: 1px;
  background: linear-gradient(180deg,
    rgba(155,142,240,.4) 0%,
    rgba(155,142,240,.16) 100%);
  pointer-events: none;
  z-index: 0;
}

.contacto-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  cursor: default;
  border-radius: 14px;
  background: transparent;
  transition: background .4s ease, transform .35s cubic-bezier(.4,0,.2,1);
}

/* Vertical accent rail on the left edge — glows and grows on hover. */
.contacto-step::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c4b5fd 0%, #6B5CE7 100%);
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity .35s ease, transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 14px rgba(196,181,253,.6);
  pointer-events: none;
}

.contacto-step:hover {
  transform: translateX(4px);
}

.contacto-step:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.step-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background-color: #14102e;
  background-image: linear-gradient(135deg, rgba(107,92,231,.32) 0%, rgba(139,92,246,.12) 100%);
  border: 1px solid rgba(155,142,240,.32);
  color: #d8d0ff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
  transition: background-color .35s ease, border-color .35s ease,
              color .35s ease, transform .45s cubic-bezier(.4,0,.2,1),
              box-shadow .35s ease;
}

.contacto-step:hover .step-num {
  background-color: #1d1545;
  background-image: linear-gradient(135deg, rgba(139,92,246,.6) 0%, rgba(196,181,253,.3) 100%);
  border-color: rgba(196,181,253,.7);
  color: #fff;
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 26px rgba(107,92,231,.5),
              0 0 0 4px rgba(155,142,240,.12);
}

.step-body { padding-top: 4px; }

.step-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -.005em;
  transition: color .25s ease;
}

.step-body span {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  transition: color .25s ease;
}

.contacto-step:hover .step-body span {
  color: rgba(255,255,255,.72);
}

/* Trust pills */
.contacto-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust-item {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -.005em;
  cursor: default;
  transition: color .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
}

.trust-item:hover {
  color: #fff;
  transform: translateX(3px);
}

.trust-check {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #14102e;
  background-image: linear-gradient(135deg, rgba(107,92,231,.32), rgba(139,92,246,.18));
  border: 1px solid rgba(155,142,240,.32);
  color: #c4b5fd;
  flex-shrink: 0;
  transition: background-color .3s ease, background-image .3s ease,
              border-color .3s ease, color .3s ease,
              transform .3s ease, box-shadow .3s ease;
}

.trust-item:hover .trust-check {
  background-color: #1d1545;
  background-image: linear-gradient(135deg, rgba(139,92,246,.6), rgba(196,181,253,.32));
  border-color: rgba(196,181,253,.55);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(107,92,231,.4);
}

.trust-check svg { width: 11px; height: 11px; }

/* Animated check-mark draw on hover. The check path is hidden by
   default (full dashoffset) and "drawn" with stroke-dashoffset → 0
   while hovering. Path total length ≈ 14.5; using 22 for safe margin. */
.trust-check svg path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .55s cubic-bezier(.4,0,.2,1) .05s;
}

.trust-item:hover .trust-check svg path {
  stroke-dashoffset: 0;
}

/* ─── FORM CARD ──────────────────────────────────── */
.form-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(38,26,82,.72) 0%, rgba(20,14,48,.88) 100%);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 24px;
  padding: 22px 28px 20px;
  box-shadow:
    0 30px 80px rgba(8,4,30,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* overflow:visible — needed so the custom-select dropdown can escape
     the card's bounds when opened. Glow + corners are sized to live
     within the card so nothing visually leaks out. */
  isolation: isolate;
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,181,253,.55) 30%,
    rgba(196,181,253,.7) 50%,
    rgba(196,181,253,.55) 70%,
    transparent 100%);
}

.form-card-glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 180px;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(139,92,246,.32) 0%,
    rgba(139,92,246,.12) 35%,
    transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}

.form-card-corner {
  position: absolute;
  width: 70px; height: 70px;
  pointer-events: none;
  opacity: .55;
}

.form-card-corner--tl {
  top: -1px; left: -1px;
  border-top: 1px solid rgba(196,181,253,.4);
  border-left: 1px solid rgba(196,181,253,.4);
  border-top-left-radius: 24px;
}

.form-card-corner--br {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid rgba(196,181,253,.4);
  border-right: 1px solid rgba(196,181,253,.4);
  border-bottom-right-radius: 24px;
}

.form-card-header {
  text-align: center;
  margin-bottom: 14px;
  position: relative;
}

.form-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d8d0ff;
  background: rgba(155,142,240,.1);
  border: 1px solid rgba(155,142,240,.26);
  padding: 5px 13px 5px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.form-badge-pulse {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: badgePulse 1.8s ease-out infinite;
}

@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.form-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  letter-spacing: -.018em;
}

.form-card-sub {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin: 0;
}

.demo-form { display: flex; flex-direction: column; gap: 10px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-left: 2px;
}

.input-wrap {
  position: relative;
  display: block;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: rgba(196,181,253,.55);
  pointer-events: none;
  transition: color .25s ease, transform .25s ease;
}

.input-icon svg { width: 100%; height: 100%; display: block; }

.input-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: rgba(196,181,253,.55);
  pointer-events: none;
  transition: color .25s ease, transform .25s ease;
}

.input-chevron svg { width: 100%; height: 100%; display: block; }

.form-group input,
.form-group select {
  font-family: var(--font);
  font-size: 14px;
  color: #fff;
  width: 100%;
  background: rgba(14,10,38,.55);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 12px;
  padding: 10px 14px 10px 38px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  appearance: none;
  -webkit-appearance: none;
}

.input-wrap--select select {
  padding-right: 38px;
  cursor: pointer;
}

.form-group input::placeholder {
  color: rgba(255,255,255,.32);
  font-weight: 400;
}

.form-group select { color: rgba(255,255,255,.45); }
.form-group select:valid { color: #fff; }
.form-group select option {
  background: #1a1340;
  color: #fff;
}

.input-wrap:hover input,
.input-wrap:hover select {
  border-color: rgba(155,142,240,.32);
  background: rgba(20,14,52,.65);
}

.input-wrap:focus-within input,
.input-wrap:focus-within select {
  border-color: rgba(196,181,253,.7);
  background: rgba(28,18,68,.7);
  box-shadow:
    0 0 0 4px rgba(107,92,231,.16),
    0 8px 28px rgba(107,92,231,.18);
}

.input-wrap:focus-within .input-icon,
.input-wrap:focus-within .input-chevron {
  color: #c4b5fd;
}

.input-wrap--select:focus-within .input-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* ─── CUSTOM SELECT (Cargo) ──────────────────────── */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  background: rgba(14,10,38,.55);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 12px;
  padding: 10px 38px 10px 38px;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.custom-select-trigger:hover {
  border-color: rgba(155,142,240,.32);
  background: rgba(20,14,52,.65);
}

.custom-select.is-open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  border-color: rgba(196,181,253,.7);
  background: rgba(28,18,68,.7);
  box-shadow:
    0 0 0 4px rgba(107,92,231,.16),
    0 8px 28px rgba(107,92,231,.18);
}

.custom-select.is-open .custom-select-trigger .input-icon,
.custom-select.is-open .custom-select-trigger .input-chevron {
  color: #c4b5fd;
}

.custom-select.is-open .custom-select-trigger .input-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-trigger.has-value {
  color: #fff;
}

.custom-select-value {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(40,28,90,.96) 0%, rgba(20,14,48,.98) 100%);
  border: 1px solid rgba(155,142,240,.24);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 50;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.4,0,.2,1),
              transform .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.custom-select-options::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,181,253,.5) 50%,
    transparent 100%);
}

.custom-select.is-open .custom-select-options {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background .18s ease, color .18s ease;
}

.custom-select-option:hover,
.custom-select-option.is-active {
  background: rgba(155,142,240,.14);
  color: #fff;
}

.custom-select-option.is-selected {
  background: linear-gradient(135deg,
    rgba(107,92,231,.22) 0%,
    rgba(139,92,246,.12) 100%);
  color: #fff;
}

.custom-select-option.is-selected::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: linear-gradient(180deg, #c4b5fd, #8B5CF6);
  border-radius: 999px;
}

.option-text {
  flex: 1 1 auto;
  min-width: 0;
}

.option-check {
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  color: #c4b5fd;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
}

.option-check svg { width: 100%; height: 100%; display: block; }

.custom-select-option.is-selected .option-check {
  opacity: 1;
  transform: scale(1);
}

/* Error state when invalid on submit */
.custom-select.has-error .custom-select-trigger {
  border-color: rgba(248,113,113,.55);
  box-shadow: 0 0 0 4px rgba(248,113,113,.12);
}

/* ─── SUBMIT BUTTON ──────────────────────────────── */
.btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .005em;
  background: linear-gradient(135deg, #6B5CE7 0%, #8B5CF6 50%, #A78BFA 100%);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 12px 32px rgba(107,92,231,.4),
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
  transition: transform .22s ease, box-shadow .22s ease;
}

.btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #c4b5fd 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 48px rgba(107,92,231,.55),
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
}

.btn-submit:hover::after { opacity: 1; }

.btn-submit:active {
  transform: translateY(0);
  box-shadow:
    0 8px 22px rgba(107,92,231,.4),
    0 1px 0 rgba(255,255,255,.18) inset;
}

.btn-submit-icon {
  display: inline-flex;
  width: 16px; height: 16px;
  transition: transform .22s ease;
}

.btn-submit-icon svg { width: 100%; height: 100%; }

.btn-submit:hover .btn-submit-icon { transform: translateX(4px); }

.btn-submit-shine {
  position: absolute;
  top: 0; bottom: 0; left: -50%;
  width: 50%;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  transform: skewX(-18deg);
  transition: left .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.btn-submit:hover .btn-submit-shine { left: 120%; }

.btn-submit-spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.btn-submit.is-loading {
  pointer-events: none;
}

.btn-submit.is-loading .btn-submit-label,
.btn-submit.is-loading .btn-submit-icon {
  visibility: hidden;
}

.btn-submit.is-loading .btn-submit-spinner {
  opacity: 1;
  animation: btnSpin .7s linear infinite;
}

@keyframes btnSpin { to { transform: rotate(360deg); } }

.form-error {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: #fca5a5;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.22);
  padding: 9px 12px;
  border-radius: 10px;
  margin-top: 8px;
  text-align: left;
}

.form-error.visible { display: flex; }

.form-error svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: #f87171;
}

.form-micro {
  font-size: 11.5px;
  color: rgba(255,255,255,.42);
  text-align: center;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.form-micro-icon {
  width: 12px; height: 12px;
  color: rgba(155,142,240,.6);
  flex-shrink: 0;
}

/* ─── SUCCESS STATE ──────────────────────────────── */
.form-success {
  display: none;
  text-align: center;
  padding: 28px 0 16px;
}

.form-success.visible {
  display: block;
  animation: successFadeIn .5s ease both;
}

@keyframes successFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.success-icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%,
    rgba(107,92,231,.32) 0%,
    rgba(107,92,231,.08) 60%,
    transparent 100%);
  border-radius: 50%;
}

.success-svg {
  width: 64px; height: 64px;
  overflow: visible;
}

.success-svg .success-circle {
  fill: none;
  stroke: rgba(196,181,253,.45);
  stroke-width: 2.5;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transform-origin: center;
  transform: rotate(-90deg);
}

.success-svg .success-check {
  fill: none;
  stroke: #c4b5fd;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  filter: drop-shadow(0 0 12px rgba(196,181,253,.55));
}

.form-success.visible .success-circle {
  animation: successCircle .65s cubic-bezier(.65,0,.45,1) forwards;
}

.form-success.visible .success-check {
  animation: successCheck .45s cubic-bezier(.65,0,.45,1) .45s forwards;
}

@keyframes successCircle { to { stroke-dashoffset: 0; } }
@keyframes successCheck  { to { stroke-dashoffset: 0; } }

.form-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}

.form-success p {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}

/* ─── FOOTER ─────────────────────────────────────── */
.footer {
  /* Transparent — bg-dark-stack wrapper paints the dark continuously
     across contacto+footer, no seam between them. */
  background: transparent;
  padding: 96px 0 0;
  position: relative;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Subtle dot grid — adds professional texture without competing for
   attention. Masked to fade at all four edges so it doesn't read as
   a hard panel. */
.footer-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(155,142,240,.16) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 45%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 45%, #000 30%, transparent 90%);
  opacity: .55;
}

/* Thin gradient divider near the top of the footer — a clean horizontal
   accent that separates contacto from the link block without painting
   a hard line. Fades to transparent at both ends. */
.footer-divider {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(155,142,240,.0) 5%,
    rgba(155,142,240,.32) 50%,
    rgba(155,142,240,.0) 95%,
    transparent 100%);
}

/* Soft vertical light beam behind the brand column — adds depth and
   guides the eye to the brand block as the visual anchor of the footer. */
.footer-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%;
  width: 380px;
  background: radial-gradient(ellipse 60% 55% at 50% 35%,
    rgba(124,110,232,.14) 0%,
    rgba(107,92,231,.06) 40%,
    transparent 70%);
  filter: blur(30px);
}

/* Horizon glow at the very bottom — a wide warm purple bloom that
   anchors the page like a soft sunrise. */
.footer-horizon {
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 1100px;
  max-width: 100%;
  height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 70% at 50% 60%,
    rgba(124,110,232,.30) 0%,
    rgba(107,92,231,.14) 38%,
    transparent 72%);
  filter: blur(20px);
}

.footer-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  align-items: flex-start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.footer-col--brand { gap: 22px; max-width: 360px; }

.footer-col--brand .footer-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: default;  /* no es link, no muestra cursor pointer */
}

.footer-wordmark {
  height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(124,110,232,.28));
  transition: filter .4s ease, transform .35s cubic-bezier(.4,0,.2,1);
}

.footer-col--brand .footer-brand:hover .footer-wordmark {
  filter:
    drop-shadow(0 0 18px rgba(196,181,253,.55))
    drop-shadow(0 4px 24px rgba(124,110,232,.6))
    brightness(1.15);
  transform: translateY(-1px);
}

.footer-tagline {
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255,255,255,.62);
  margin: 0;
  line-height: 1.65;
  max-width: 320px;
}

.footer-locale {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  background: rgba(155,142,240,.06);
  border: 1px solid rgba(155,142,240,.16);
  padding: 7px 13px;
  border-radius: 999px;
  align-self: flex-start;
  letter-spacing: .005em;
  cursor: default;
  transition: color .35s ease;
}

/* Hover acts as a status amplifier, not a button: no border highlight,
   no lift, no shadow. Only the live dot becomes more "alive" and the
   text gains a subtle clarity. Reads as informational, not actionable. */
.footer-locale:hover {
  color: rgba(255,255,255,.9);
}

.locale-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,.7);
  animation: livePulse 2.4s ease-in-out infinite;
  transition: box-shadow .35s ease;
}

/* Sonar-style ring that radiates from the live dot on hover —
   communicates "active signal" without inviting a click. */
.locale-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,222,128,.7);
  opacity: 0;
  pointer-events: none;
}

.footer-locale:hover .locale-dot {
  box-shadow: 0 0 14px rgba(74,222,128,.95);
}

.footer-locale:hover .locale-dot::after {
  animation: localeSonar 1.6s ease-out infinite;
}

@keyframes localeSonar {
  0%   { opacity: .9; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(2.6); }
}

.footer-heading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #fff;
  margin: 0 0 10px;
}

/* Small luminous vertical pip — echoes the rail accent used in
   contacto-steps and FAQ items. Reads as a clean column marker
   without the geometric weight of a diamond or full bar. */
.heading-accent {
  width: 2.5px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #c4b5fd 0%, #6B5CE7 100%);
  box-shadow: 0 0 10px rgba(155,142,240,.55);
  transition: height .35s cubic-bezier(.4,0,.2,1),
              box-shadow .35s ease;
}

/* Hover only on the heading itself (not the link buttons below). */
.footer-heading:hover .heading-accent {
  height: 16px;
  box-shadow: 0 0 16px rgba(196,181,253,.85);
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  width: fit-content;
  position: relative;
  transition: color .2s ease, transform .2s ease;
}

.footer-link::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #c4b5fd;
  opacity: 0;
  transition: opacity .2s ease, left .2s ease;
}

.footer-link:hover {
  color: #fff;
  transform: translateX(6px);
}

.footer-link:hover::before {
  opacity: 1;
  left: -14px;
}

.footer-link--icon svg {
  width: 15px; height: 15px;
  color: #9B8EF0;
  flex-shrink: 0;
}

/* ─── Distinct hovers for the two contact actions ──── */
.footer-link--icon { gap: 10px; align-items: center; }

.contact-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-icon svg { width: 16px; height: 16px; }

/* MAIL link: envelope idle → transforms into a paper plane on hover.
   The envelope fades and scales out as the plane fades in, then takes
   off diagonally with a curved trail drawing behind it. Reads as a
   single metamorphosis, not two icons. */
.footer-link--mail .mail-envelope,
.footer-link--mail .mail-plane,
.footer-link--mail .mail-trail {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}

.footer-link--mail .mail-envelope {
  opacity: 1;
  transform: scale(1);
  transition: opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1),
              color .3s ease;
}

.footer-link--mail .mail-plane {
  opacity: 0;
  transform: scale(.7) translate(-2px, 2px);
  transform-origin: 50% 60%;
  color: #c4b5fd;
  transition: opacity .3s ease .12s,
              transform .55s cubic-bezier(.34,1.56,.64,1) .12s,
              filter .3s ease;
}

.footer-link--mail .mail-trail {
  color: rgba(196,181,253,.7);
  opacity: 0;
}

.footer-link--mail .mail-trail path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1) .25s,
              opacity .3s ease .25s;
}

.footer-link--mail:hover .mail-envelope {
  opacity: 0;
  transform: scale(.6) translateY(2px);
}

.footer-link--mail:hover .mail-plane {
  opacity: 1;
  transform: scale(1) translate(5px, -5px) rotate(-14deg);
  filter: drop-shadow(0 0 10px rgba(196,181,253,.6));
}

.footer-link--mail:hover .mail-trail {
  opacity: 1;
}

.footer-link--mail:hover .mail-trail path {
  stroke-dashoffset: 0;
}

/* CALL link: phone "rings" with a 3-step shake + a pulse ring
   expands outward — communicates "incoming call / ringing". */
@keyframes phoneRing {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(-14deg); }
  30%  { transform: rotate(12deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

@keyframes callPulse {
  0%   { transform: scale(.6); opacity: .65; }
  100% { transform: scale(1.9); opacity: 0; }
}

.footer-link--call .call-svg {
  transform-origin: 50% 60%;
  transition: color .3s ease, filter .3s ease;
}

.footer-link--call:hover .call-svg {
  color: #c4b5fd;
  filter: drop-shadow(0 0 10px rgba(196,181,253,.55));
  animation: phoneRing .85s cubic-bezier(.4,0,.2,1);
}

.call-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(196,181,253,.7);
  opacity: 0;
  pointer-events: none;
}

.footer-link--call:hover .call-pulse {
  animation: callPulse 1.1s ease-out infinite;
}

.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.social-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(155,142,240,.06);
  border: 1px solid rgba(155,142,240,.16);
  color: rgba(255,255,255,.7);
  transition: transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease, color .25s ease;
}

.social-btn:hover {
  background: rgba(107,92,231,.22);
  border-color: rgba(196,181,253,.45);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(107,92,231,.35);
}

.social-btn svg { width: 18px; height: 18px; display: block; }

.footer-bottom {
  position: relative;
  padding: 22px 0 26px;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 12.5px;
  color: rgba(255,255,255,.42);
  letter-spacing: .005em;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.footer-legal a {
  color: rgba(255,255,255,.55);
  font-weight: 500;
  transition: color .2s ease;
}

.footer-legal a:hover { color: #fff; }

.footer-legal span {
  color: rgba(255,255,255,.22);
}

/* ─── ANIMATIONS ─────────────────────────────────── */
/* Entrance reveal — solo opacity + transform (compositor-friendly,
   no fuerzan layout). Curve ease-out enérgica, duración corta. */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2,.8,.25,1), transform .55s cubic-bezier(.2,.8,.25,1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up:nth-child(1) { transition-delay: 0s; }
.fade-up:nth-child(2) { transition-delay: .07s; }
.fade-up:nth-child(3) { transition-delay: .14s; }
.fade-up:nth-child(4) { transition-delay: .21s; }
.fade-up:nth-child(5) { transition-delay: .28s; }
.fade-up:nth-child(6) { transition-delay: .35s; }

/* Pausa global de animaciones mientras el usuario navega vía nav-bar:
   evita que keyframes infinitos compitan con el smooth-scroll y libera
   el thread principal para frames de scroll a 60fps. Las transitions
   de hover/click siguen activas porque solo pausamos animation-play-state. */
.is-scrolling, .is-scrolling *, .is-scrolling *::before, .is-scrolling *::after {
  animation-play-state: paused !important;
}

/* prefers-reduced-motion — entrance sin transform, instantáneo */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
  .product-pills { grid-template-columns: 1fr 1fr; }
  .pill--health { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; }
  .pill-headline { font-size: 17px; }
  .hero { height: auto; min-height: auto; padding: 120px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content { align-items: center; }
  .hero-subhead { max-width: 520px; margin-left: auto; margin-right: auto; }
  .hero-visual {
    justify-content: center;
    margin-top: 24px;
  }

  .hero-stack {
    width: 360px;
    height: 420px;
  }

  .layer-dashboard { width: 280px; }
  .layer-app { width: 260px; }

  .stack-layer--back { transform: translate(8px, 0) scale(.9); }
  .stack-layer--mid { right: 20px; }
  .stack-layer--front { left: -10px; bottom: 40px; }

  /* Cómo funciona — single column on tablet */
  .como-stage { padding: 22px; }
  .como-panel { grid-template-columns: 1fr; gap: 28px; }
  .panel-stage { min-height: auto; padding: 24px 12px; }
  .device--browser { max-width: 520px; }
  .panel-flow { padding: 0; }

  .problema-card { grid-template-columns: 1fr; }
  .problema-card-divider {
    width: 100%; height: 48px;
  }
  .problema-card-divider::before {
    top: 50%; bottom: auto; left: 15%; right: 15%; width: auto; height: 1px;
    transform: translateY(-50%);
  }
  .divider-arrow svg { transform: rotate(90deg); }
  .chaos-grid { grid-template-columns: 1fr 1fr; }

  /* Lo que ganas — en tablet, escena un poco más alta y orbs más estrechos */
  .ganancias-scene {
    grid-template-columns: 1fr minmax(220px, 280px) 1fr;
    column-gap: 18px;
    height: 400px;
  }
  .gan-orb { max-width: 240px; padding: 11px 14px 11px 11px; }
  .gan-orb-ico { width: 34px; height: 34px; }
  .gan-orb-title { font-size: 12.5px; }
  .gan-orb-stat { font-size: 11px; }
  .gan-wordmark { width: 200px; }
  .logos-grid { grid-template-columns: 1fr 1fr; }
  .section-contacto { min-height: 0; padding: 64px 0 56px; }
  .contacto-inner { grid-template-columns: 1fr; gap: 48px; }
  .contacto-left { padding-top: 0; max-width: 560px; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; max-width: 100%; }
}

/* Desktops estrechos (1024-1279): el botón "Ingresar" sigue siendo compacto
   (60-70px) así que no necesita colapsar. Mantiene texto completo. */

@media (max-width: 768px) {
  .nav-links { display: none; }
  .btn-nav { display: none; }
  /* En mobile el botón Ingresar se oculta — el menú hamburguesa abierto
     ya tiene el CTA principal; el acceso a Portal/Apoderado lo pueden
     hacer desde la URL directa (decisión Agustín 20/05/2026). */
  .nav-cta-group .nav-cta-ingresar { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner { gap: 0; }

  /* Trust strip · mobile: padding más chico, gap reducido, logos un poco más bajos */
  .section-trust-strip { padding: 40px 0 48px; }
  /* HUÉRFANO 3RA PASADA — revisar */
  /* .trust-strip-title { font-size: 11px; letter-spacing: .03em; padding: 0 16px; white-space: normal; } */
  .trust-strip-track { gap: 56px; animation-duration: 40s; }
  .trust-strip-item, .trust-strip-item img { height: 36px; }

  /* FAQ — stack columns vertically on mobile. The questions stay
     interactive (the highlight still tracks them) and the panel
     shows the active answer below the list. */
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq-aura {
    left: 50%;
    top: 30%;
    transform: translate3d(-50%, 0, 0);
    width: 360px;
    height: 360px;
  }
  @keyframes faqAuraDrift {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50%      { transform: translate3d(calc(-50% + 30px), 30px, 0); }
  }
  .faq-q { font-size: 14.5px; padding: 16px 14px; gap: 12px; }
  .faq-panels { padding: 28px 22px; min-height: 0; }
  .faq-panel { inset: 28px 22px; }

  /* Mobile nav open state */
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(18,14,38,.86);
    padding: 20px 32px 24px;
    gap: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow:
      0 4px 32px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

  .nav-links.mobile-open a,
  .nav-links.mobile-open .nav-link--toggle {
    font-size: 15px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 12px;
    color: rgba(255,255,255,.7);
    transition: background var(--transition), color var(--transition);
  }

  /* Reset del <button> toggle para que calce exacto con los <a> y quede
     perfectamente centrado como Comunidad/Empresa (chevron pegado al texto) */
  .nav-links.mobile-open .nav-link--toggle {
    background: transparent;
    border: none;
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
    letter-spacing: normal;
    cursor: pointer;
  }

  .nav-links.mobile-open a:hover,
  .nav-links.mobile-open .nav-link--toggle:hover {
    background: rgba(255,255,255,.06);
    color: var(--c-white);
  }

  /* ── Submenú "Soluciones" como ACORDEÓN INLINE (no flotante) ──
     Solo aplica bajo .nav-links.mobile-open, que no existe en desktop,
     así el dropdown flotante de PC queda intacto. Necesita !important
     porque la regla base del .nav-dropdown usa !important en todo. */
  .nav-links.mobile-open .nav-dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2px 0 !important;
    margin: 2px 0 4px !important;
    /* colapsado por defecto */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .28s ease, opacity .2s ease !important;
  }
  /* expandido cuando el JS togglea .is-open en el <li> */
  .nav-links.mobile-open .nav-li--has-dd.is-open .nav-dropdown {
    max-height: 320px;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* sub-ítems = hijos visuales de "Soluciones", centrados con un puntito
     delante (anula opacity/translate del PC) */
  .nav-links.mobile-open .nav-dd-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.6) !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    opacity: 1 !important;
    translate: 0 0 !important;
  }
  .nav-links.mobile-open .nav-dd-item::before {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(155,142,240,.75) !important;
    flex: 0 0 auto !important;
  }
  .nav-links.mobile-open .nav-dd-item:hover,
  .nav-links.mobile-open .nav-dd-item:active {
    background: rgba(255,255,255,.06) !important;
    color: var(--c-white) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── Consistencia al scrollear: el navbar gana .is-dark sobre secciones
     oscuras y `.navbar.is-dark .nav-dropdown/.nav-dd-item` (≈línea 13316)
     re-pinta el submenú con caja (gradiente + borde + sombra). Eso hacía
     que el acordeón se viera distinto del formulario hacia abajo. Estas
     reglas, con mayor especificidad (.navbar.is-dark + .mobile-open), lo
     mantienen plano/transparente igual que en la zona clara, en TODO el
     scroll. Solo mobile → desktop intacto. */
  .navbar.is-dark .nav-links.mobile-open .nav-dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .navbar.is-dark .nav-links.mobile-open .nav-dd-item {
    color: rgba(255,255,255,.6) !important;
  }
  .navbar.is-dark .nav-links.mobile-open .nav-dd-item:hover,
  .navbar.is-dark .nav-links.mobile-open .nav-dd-item:active {
    background: rgba(255,255,255,.06) !important;
    color: var(--c-white) !important;
  }
  /* El panel también debe leerse igual en todo el scroll: fijamos su
     vidrio (mismo color/opacidad/blur) sin que .is-dark lo altere. */
  .navbar.is-dark .nav-links.mobile-open {
    background: rgba(18,14,38,.86) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow:
      0 4px 32px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  /* CTA inside mobile menu */
  .btn-nav-mobile {
    display: none;
  }

  .nav-links.mobile-open .btn-nav-mobile-wrap {
    display: block;
  }

  .nav-links.mobile-open .btn-nav-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #7C6EE8 0%, #4A3CAE 100%);
    color: var(--c-white);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: var(--r-pill);
    margin-top: 8px;
    align-self: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(107,92,231,.4);
  }

  /* HUÉRFANO 3RA PASADA — revisar si eliminar.
     .nav-mobile-divider / .nav-mobile-ghost-wrap / .nav-mobile-ghost removidos
     del HTML (Agustín 20/05/2026): el bug era que los <li> se filtraban en
     desktop (la regla display:none vivía sólo dentro de este media query).
     Conservado el CSS por si se reactiva un acceso directo en mobile. */

  .hero-visual { display: none; }

  .product-pills { grid-template-columns: 1fr; }
  .pill--health { max-width: 100%; }
  .pill-headline { font-size: 16px; }
  .hub-notif { display: none; }

  /* Lo que ganas — mobile: stack vertical, wordmark arriba, orbs en columna */
  .ganancias-scene {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    row-gap: 10px;
    column-gap: 0;
  }
  .gan-core {
    grid-column: 1;
    grid-row: auto;
    height: 160px;
    margin-bottom: 8px;
  }
  .gan-wordmark { width: 160px; }
  .gan-wave { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
  .gan-halo { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .gan-orb {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    max-width: 100%;
  }
  .gan-detail { width: 100%; }
  .stats-row { flex-direction: column; gap: 32px; }
  .card-section { padding: 24px 20px; }
  .form-card { padding: 28px 22px 26px; border-radius: 22px; }
  .form-card-corner { width: 64px; height: 64px; }
  .form-card-title { font-size: 21px; }
  .contacto-steps::before { left: 18px; }
  .step-num { width: 36px; height: 36px; }
  .footer { padding-top: 64px; }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
    padding-bottom: 40px;
  }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-horizon { width: 90%; height: 220px; bottom: -90px; }
  .footer-dots { background-size: 22px 22px; opacity: .45; }
  .footer-beam { left: 0; right: 0; width: auto; }
  .footer-divider { top: 44px; }
  /* Cómo funciona — mobile */
  .como-stage {
    padding: 16px;
    border-radius: 22px;
    margin-top: 40px;
  }
  .como-personas {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }
  .como-persona { padding: 12px 14px; }
  .persona-progress { left: 10px; right: 10px; bottom: 4px; }
  .panel-headline { font-size: 19px; margin-bottom: 22px; }
  .panel-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel-stage { padding: 20px 8px; }
  .device--browser .browser-body { height: 360px; }
  .device--phone { width: 220px; }
  .device--phone .phone-body { height: 420px; }

  .chaos-grid { grid-template-columns: 1fr 1fr; }
  .logos-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   ARQUITECTURA V2 — añadidos para nav dropdown +
   productos tabbed (4 módulos) + páginas de detalle
   ══════════════════════════════════════════════════ */

/* ─── NAVBAR · dropdown Soluciones + zona Empresa ──── */
.nav-li { position: relative; }
.nav-li--has-dd .nav-link--toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-chev {
  transition: transform .25s ease;
}
.nav-li--has-dd:hover .nav-chev,
.nav-li--has-dd.is-open .nav-chev {
  transform: rotate(180deg);
}

/* divider visual entre zona Connect y zona Empresa en navbar */
.nav-li--divider {
  width: 1px;
  height: 18px;
  background: rgba(155,142,240,.3);
  margin: 0 6px;
  display: inline-block;
}

.nav-li--empresa .nav-link {
  color: var(--c-light);
  font-weight: 500;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: rgba(20,16,42,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(155,142,240,.25);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
}
.nav-li--has-dd:hover .nav-dropdown,
.nav-li--has-dd:focus-within .nav-dropdown,
.nav-li--has-dd.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease;
}
.nav-dd-item:hover { background: rgba(107,92,231,.18); }
.nav-dd-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.nav-dd-desc {
  display: block;
  font-size: 11px;
  color: var(--c-muted, #6B6A7D);
  line-height: 1.4;
}

/* ─── PRODUCTOS V3 (TABS) ─────────────────────────── */
.prodv3-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(155,142,240,.15);
  border-radius: 18px;
  padding: 5px;
  max-width: 920px;
  margin: 0 auto 36px;
}
.prodv3-tab {
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  border: 0;
  color: #B8B4D4;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-family: inherit;
  line-height: 1.2;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.prodv3-tab:hover { color: #fff; background: rgba(155,142,240,.08); }
.prodv3-tab.is-active {
  background: linear-gradient(135deg, var(--c-main, #4A3CAE), var(--c-mid, #6B5CE7));
  color: #fff;
  box-shadow: 0 4px 18px rgba(74,60,174,.4);
}
.prodv3-tab-num {
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .75;
  font-weight: 600;
}
.prodv3-tab-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 2px;
}
.prodv3-tab-persona {
  font-size: 10px;
  opacity: .7;
  margin-top: 2px;
}

.prodv3-panels { position: relative; }
.prodv3-pane { display: none; }
.prodv3-pane.is-active {
  display: block;
  animation: prodv3PaneIn .35s ease;
}
@keyframes prodv3PaneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prodv3-pane-intro {
  text-align: center;
  margin-bottom: 28px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.prodv3-pane-title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #fff, var(--c-light, #9B8EF0));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.prodv3-pane-lead {
  font-size: 14px;
  color: #B8B4D4;
  line-height: 1.55;
}

.prodv3-mocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.prodv3-mock {
  background: linear-gradient(180deg, rgba(74,60,174,.1), rgba(74,60,174,.02));
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 16px;
  padding: 18px;
  transition: border-color .25s ease, transform .25s ease;
}
.prodv3-mock:hover {
  border-color: rgba(155,142,240,.4);
  transform: translateY(-3px);
}
.prodv3-mock-canvas {
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, rgba(20,16,42,.7), rgba(13,10,32,.4));
  border: 1px dashed rgba(155,142,240,.3);
  border-radius: 10px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--c-light, #9B8EF0);
  position: relative;
  overflow: hidden;
  padding: 12px;
}
.prodv3-mock-tag {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(155,142,240,.18);
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--c-light, #9B8EF0);
}
.prodv3-mock-label {
  font-size: 12px;
  color: #C5C0E2;
  text-align: center;
}
.prodv3-mock h4 {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.prodv3-mock p {
  font-size: 12px;
  color: #9994B6;
  line-height: 1.5;
  margin: 0;
}

.prodv3-cta { text-align: center; margin-top: 36px; }
.prodv3-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(155,142,240,.3);
  color: #E5E2F7;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.prodv3-cta-link:hover {
  background: rgba(155,142,240,.12);
  border-color: var(--c-light, #9B8EF0);
  transform: translateY(-2px);
}

/* ─── PÁGINAS DE DETALLE (módulos + empresa) ─────── */
.subpage-shell {
  background: var(--c-bg, #0E0C1E);
  color: #E5E2F7;
  min-height: 100vh;
  padding-top: 96px;
}
.subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-light, #9B8EF0);
  text-decoration: none;
  margin: 0 0 18px;
  transition: gap .2s ease;
}
.subpage-back:hover { gap: 10px; }

.subpage-hero {
  text-align: center;
  padding: 36px 24px 56px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(74,60,174,.28), transparent 60%);
}
.subpage-hero .container { max-width: 880px; }
.subpage-badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(155,142,240,.15);
  border: 1px solid rgba(155,142,240,.3);
  border-radius: 999px;
  font-size: 10px;
  color: var(--c-light, #9B8EF0);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 18px;
  font-weight: 600;
}
.subpage-hero h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #fff, var(--c-light, #9B8EF0));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subpage-hero .subpage-lead {
  font-size: 16px;
  color: #B8B4D4;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 24px;
}
.subpage-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.subpage-btn {
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.subpage-btn--primary {
  background: linear-gradient(135deg, var(--c-main, #4A3CAE), var(--c-mid, #6B5CE7));
  color: #fff;
  box-shadow: 0 6px 20px rgba(74,60,174,.4);
}
.subpage-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(74,60,174,.55); }
.subpage-btn--ghost {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(155,142,240,.3);
  color: #E5E2F7;
}
.subpage-btn--ghost:hover { background: rgba(155,142,240,.12); border-color: var(--c-light, #9B8EF0); }

.subpage-mockup {
  max-width: 720px;
  margin: 28px auto 0;
  aspect-ratio: 16/9;
  background:
    linear-gradient(135deg, rgba(155,142,240,.18), rgba(74,60,174,.05)),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(155,142,240,.05) 16px 32px);
  border: 1px dashed rgba(155,142,240,.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-light, #9B8EF0);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}

.subpage-section {
  padding: 56px 24px;
}
.subpage-section .container { max-width: 1080px; }
.subpage-section-header {
  text-align: center;
  margin-bottom: 36px;
}
.subpage-section h2 {
  font-size: clamp(26px, 3vw, 34px);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.subpage-card {
  background: linear-gradient(180deg, rgba(74,60,174,.1), rgba(74,60,174,.02));
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 14px;
  padding: 22px;
  transition: transform .2s ease, border-color .2s ease;
}
.subpage-card:hover { transform: translateY(-2px); border-color: rgba(155,142,240,.4); }
.subpage-card-icon {
  width: 36px; height: 36px;
  background: rgba(155,142,240,.15);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.subpage-card h3 {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 6px;
}
.subpage-card p {
  font-size: 13px;
  color: #B8B4D4;
  line-height: 1.5;
}

.subpage-faq { max-width: 760px; margin: 0 auto; }
.subpage-faq-item {
  background: rgba(74,60,174,.06);
  border: 1px solid rgba(155,142,240,.15);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.subpage-faq-q {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.subpage-faq-q::after {
  content: "+";
  font-size: 22px;
  color: var(--c-light, #9B8EF0);
  transition: transform .2s ease;
}
.subpage-faq-item.is-open .subpage-faq-q::after { transform: rotate(45deg); }
.subpage-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 22px;
  font-size: 13px;
  color: #B8B4D4;
  line-height: 1.6;
}
.subpage-faq-item.is-open .subpage-faq-a {
  max-height: 240px;
  padding: 0 22px 18px;
}

.subpage-cta-block {
  text-align: center;
  padding: 56px 24px;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(74,60,174,.22), transparent 70%);
}

/* Empresa-specific sections */
.empresa-prods {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
}
.empresa-prod {
  background: linear-gradient(180deg, rgba(74,60,174,.12), rgba(74,60,174,.02));
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 18px;
  padding: 32px;
  position: relative;
}
.empresa-prod--star {
  background: linear-gradient(135deg, rgba(107,92,231,.28), rgba(74,60,174,.08));
  border-color: rgba(155,142,240,.4);
}
.empresa-prod-badge {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 10px;
  color: var(--c-light, #9B8EF0);
  background: rgba(155,142,240,.18);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.empresa-prod-badge--coming { color: #6B6A7D; background: rgba(107,106,125,.15); }
.empresa-prod h3 { font-size: 24px; color: #fff; margin: 8px 0; font-weight: 700; }
.empresa-prod-tagline { font-size: 13px; color: var(--c-light, #9B8EF0); margin-bottom: 14px; font-weight: 500; }
.empresa-prod-desc { font-size: 13px; color: #B8B4D4; line-height: 1.55; margin-bottom: 18px; min-height: 56px; }

.empresa-photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
}
.empresa-photo {
  background:
    linear-gradient(135deg, rgba(155,142,240,.18), rgba(74,60,174,.06)),
    repeating-linear-gradient(135deg, transparent 0 30px, rgba(155,142,240,.05) 30px 60px);
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  font-size: 11px;
  color: var(--c-light, #9B8EF0);
  letter-spacing: .04em;
}
.empresa-photo:nth-child(1) { grid-row: span 2; }

.empresa-collabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(155,142,240,.15);
  border-radius: 12px;
  padding: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.empresa-collab {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: #6B6A7D;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.empresa-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.empresa-team-person {
  background: linear-gradient(180deg, rgba(74,60,174,.1), rgba(74,60,174,.02));
  border: 1px solid rgba(155,142,240,.15);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}
.empresa-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-main, #4A3CAE), var(--c-light, #9B8EF0));
  margin: 0 auto 14px;
  box-shadow: 0 4px 16px rgba(74,60,174,.35);
}
.empresa-team-name { font-size: 14px; color: #fff; font-weight: 600; }
.empresa-team-role { font-size: 12px; color: var(--c-light, #9B8EF0); margin-top: 2px; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 980px) {
  .prodv3-tabs { grid-template-columns: 1fr 1fr; }
  .prodv3-mocks, .subpage-grid { grid-template-columns: 1fr; }
  .empresa-prods { grid-template-columns: 1fr; }
  .empresa-photos { grid-template-columns: 1fr; grid-template-rows: auto; }
  .empresa-photos .empresa-photo:nth-child(1) { grid-row: auto; }
  .empresa-collabs { grid-template-columns: repeat(3, 1fr); }
  .empresa-team { grid-template-columns: repeat(2, 1fr); }
  .nav-li--divider { display: none; }
  .nav-dropdown { left: 0; transform: translateX(0) translateY(-6px); min-width: 240px; }
  .nav-li--has-dd:hover .nav-dropdown,
  .nav-li--has-dd:focus-within .nav-dropdown,
  .nav-li--has-dd.is-open .nav-dropdown {
    transform: translateX(0) translateY(0);
  }
}



/* ══════════════════════════════════════════════════
   HERO V3 · LIGHT (cometa-style con mockups flotantes)
   ══════════════════════════════════════════════════ */
.hero--light {
  position: relative;
  background: linear-gradient(180deg, #FAFAFE 0%, #F2F1F8 100%);
  color: var(--c-text, #2C2B3A);
  padding: 120px 24px 72px;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ─── HERO BG · gradient mesh minimalista + "horizonte luminoso" ──
   Base: gradient vertical muy suave (top ligeramente más claro).
   Sobre eso: dos ambient blooms en esquinas opuestas + una banda
   horizontal de luz a la altura del título (efecto "horizonte que
   ilumina el contenido"). Sin patrones, sin grilla, sin dots.
   Un único drift muy lento (60s) para sutil vida sin distraer. */
.hero-light-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    /* Halo blanco central — aclara el centro del hero (núcleo + halo) */
    radial-gradient(ellipse 32% 36% at 50% 50%, rgba(255,255,255,1), rgba(255,255,255,.78) 60%, transparent 85%),
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255,255,255,.7), transparent 80%),
    /* Banda horizontal de luz — a la altura del título */
    radial-gradient(ellipse 75% 18% at 50% 42%, rgba(155,142,240,.18), transparent 75%),
    /* Ambient bloom top-left — tonalidad lavanda suave */
    radial-gradient(ellipse 55% 50% at 12% 18%, rgba(155,142,240,.22), transparent 70%),
    /* Ambient bloom bottom-right — tonalidad lila claro */
    radial-gradient(ellipse 55% 50% at 88% 88%, rgba(192,168,255,.20), transparent 70%),
    /* Base gradient vertical: blanco arriba, leve lavanda abajo */
    linear-gradient(180deg, #FCFBFF 0%, #F4F1FC 100%);
}
/* Capa de "vignette" muy sutil en los bordes — focaliza el centro
   sin oscurecer el contenido. Opacidad mínima (.12). */
.hero-light-dots {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 65% at center, transparent 45%, rgba(74,60,174,.07) 80%, rgba(107,92,231,.14) 100%);
  pointer-events: none;
}
/* Spotlight central que respira muy lento — ahora BLANCO, refuerza
   el halo central en vez de teñirlo lavanda. Posicionado detrás del título. */
.hero-light-bg::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 380px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,255,255,.85), transparent 70%);
  filter: blur(40px);
  animation: heroBgBreathe 22s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroBgBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .85; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1;   }
}
/* Glow esquinas — estáticos, sólo añaden depth a las esquinas extremas */
.hero-light-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}
.hero-light-glow--1 {
  top: -15%; left: -10%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(107,92,231,.16), transparent 70%);
}
.hero-light-glow--2 {
  bottom: -15%; right: -10%;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(155,142,240,.14), transparent 70%);
}
/* Pseudo final: tira fina de luz horizontal central (1px de alto
   tras blur) — sugiere "horizonte" alineado con el título. */
.hero-light-bg::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  filter: blur(2px);
  pointer-events: none;
  opacity: .7;
}

/* ─── INNER CENTER STACK ─────────────────────────── */
.hero-light-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-light-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}
.hero-light-logo-img {
  height: 56px;
  width: auto;
  filter: brightness(0.15);
}

.hero-light-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-text, #2C2B3A);
  margin-bottom: 22px;
}
.hero-light-title .hero-light-accent {
  background: linear-gradient(135deg, var(--c-mid, #6B5CE7), var(--c-light, #9B8EF0));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.hero-light-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--c-muted, #6B6A7D);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 28px;
}

/* ─── TRUST INDICATOR · idéntico al kicker "Los 4 módulos" (3ra pasada 20/05/2026)
   El <p> queda como block normal en el flujo (debajo del CTA). El styling
   pill vive en el span interno .hl-trust-pill para que sea compacto y centrado. */
.hero-light-trust {
  display: block;
  text-align: center;
  margin: 0 auto 26px;
}
.hl-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-main);
  background: rgba(155,142,240,.12);
  padding: 4px 11px;
  border-radius: var(--r-pill);
}
.hero-light-avatars { display: inline-flex; }
.hla {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  background: linear-gradient(135deg, var(--c-mid), var(--c-light));
  box-shadow: 0 2px 6px rgba(74,60,174,0.2);
}
.hla:first-child { margin-left: 0; }
.hla--1 { background: linear-gradient(135deg, #F4A8C0, #E97FA1); }
.hla--2 { background: linear-gradient(135deg, #9DD2C5, #5FB29D); }
.hla--3 { background: linear-gradient(135deg, #F5C77F, #E0A04E); }
.hla--4 { background: linear-gradient(135deg, #9B8EF0, #6B5CE7); }
.hero-light-trust-text {
  font-size: 13px;
  color: var(--c-text, #2C2B3A);
  font-weight: 500;
}
.hero-light-trust-text strong {
  color: var(--c-main, #4A3CAE);
  font-weight: 700;
}

/* ─── CTA ─────────────────────────────────────────── */
.hero-light-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--c-deep, #2D2560), var(--c-main, #4A3CAE));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(45,37,96,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-bottom: 12px;
}
.hero-light-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(45,37,96,0.5);
}
.hero-light-cta svg { transition: transform .25s ease; }
.hero-light-cta:hover svg { transform: translateX(3px); }

.hero-light-microcopy {
  display: block;
  font-size: 12px;
  color: var(--c-muted, #6B6A7D);
  margin-bottom: 64px;
}

/* HUÉRFANO POST-REFACTOR — revisar si eliminar.
   .hero-light-modules / .hero-mod-pill / .hero-mod-icon dejaron de usarse
   en el hero (Diego 19/05/2026). Estilos se reutilizan parcialmente en la
   nueva sección ecosistema (pills del módulo activo). Mantener hasta confirmar. */
/* ─── MODULE PILLS ────────────────────────────────── */
.hero-light-modules {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-mod-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(155,142,240,0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text, #2C2B3A);
  text-decoration: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(74,60,174,0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero-mod-pill:hover {
  transform: translateY(-2px);
  border-color: var(--c-light, #9B8EF0);
  box-shadow: 0 8px 24px rgba(74,60,174,0.18);
  color: var(--c-main, #4A3CAE);
}
.hero-mod-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-main, #4A3CAE), var(--c-mid, #6B5CE7));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── FLOATING MOCKUPS ─────────────────────────── */
.hero-mock {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(45,37,96,0.18));
}
/* Posiciones/transforms canónicos: ver bloque consolidado al final del archivo */

/* Desktop (browser) frame */
.mock-window {
  width: 280px;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(74,60,174,0.1);
}
.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #F2F1F8;
  border-bottom: 1px solid rgba(155,142,240,0.18);
}
.mock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(155,142,240,0.35);
}
.mock-url {
  flex: 1;
  text-align: center;
  font-size: 9px;
  color: var(--c-muted, #6B6A7D);
  background: rgba(255,255,255,0.7);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mock-body { padding: 14px; }

/* CASINO mock */
.mock-casino-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(155,142,240,0.15);
  margin-bottom: 10px;
}
.mock-casino-day { font-size: 10px; color: var(--c-muted); }
.mock-casino-count { font-size: 15px; color: var(--c-main, #4A3CAE); font-weight: 700; }
.mock-casino-list { display: flex; flex-direction: column; gap: 6px; }
.mock-casino-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  color: var(--c-text);
}
.mock-cb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-mid, #6B5CE7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.mock-cb--off {
  background: transparent;
  border: 1.2px solid var(--c-border, #BBBAC6);
}
.mock-name { color: var(--c-text); font-weight: 500; }
.mock-meta { color: var(--c-muted); font-size: 9px; }
.mock-casino-row--ok .mock-name { color: var(--c-text); }

/* CPA mock */
.mock-cpa-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.mock-cpa-name { font-size: 12px; color: var(--c-text); }
.mock-cpa-amount { font-size: 10px; color: var(--c-mid, #6B5CE7); font-weight: 600; }
.mock-cpa-bar {
  height: 6px;
  background: rgba(155,142,240,0.18);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.mock-cpa-bar-fill {
  width: 73%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-mid), var(--c-light));
  border-radius: 3px;
}
.mock-cpa-tx { display: flex; flex-direction: column; gap: 6px; }
.mock-cpa-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--c-text);
}
.mock-cpa-amt { color: #4D8E5F; font-weight: 600; }

/* Mobile (phone) frame */
.mock-phone {
  width: 180px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(45,37,96,0.85),
    0 12px 32px rgba(74,60,174,0.18);
  position: relative;
}
.mock-phone-notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 14px;
  background: rgba(45,37,96,0.85);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.mock-phone-body {
  padding: 26px 14px 16px;
  background: #FAFAFE;
  min-height: 220px;
}

/* LIGAS mock */
.mock-ligas-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.mock-back { font-size: 14px; color: var(--c-muted); }
.mock-ligas-head strong { font-size: 12px; color: var(--c-text); }
.mock-ligas-meta { font-size: 9px; color: var(--c-muted); margin-bottom: 12px; }
.mock-ligas-list { display: flex; flex-direction: column; gap: 8px; }
.mock-ligas-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: rgba(155,142,240,0.06);
  border-radius: 8px;
  font-size: 11px;
  color: var(--c-text);
}
.mock-cb--lg { width: 16px; height: 16px; font-size: 10px; }

/* PROVEEDORES mock */
.mock-prov-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.mock-prov-head strong { font-size: 12px; color: var(--c-text); }
.mock-prov-time { font-size: 9px; color: var(--c-muted); }
.mock-prov-qr {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.mock-prov-qr-grid {
  width: 100%; height: 100%;
  background-image:
    linear-gradient(90deg, var(--c-deep) 50%, transparent 50%),
    linear-gradient(0deg, var(--c-deep) 50%, transparent 50%);
  background-size: 8px 8px, 8px 8px;
  mask-image:
    radial-gradient(circle at 12% 12%, black 14%, transparent 16%),
    radial-gradient(circle at 88% 12%, black 14%, transparent 16%),
    radial-gradient(circle at 12% 88%, black 14%, transparent 16%),
    linear-gradient(black, black);
  mask-composite: add;
}
.mock-prov-sectors { display: flex; flex-direction: column; gap: 6px; }
.mock-sector {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(155,142,240,0.08);
  border-radius: 6px;
  font-size: 10px;
  color: var(--c-text);
}
.mock-sector--done { background: rgba(107,92,231,0.18); color: var(--c-deep); }
.mock-sector--done span:first-child { font-weight: 600; }
.mock-sector-tick { color: var(--c-mid); font-weight: 700; }
.mock-sector:not(.mock-sector--done) .mock-sector-tick { color: var(--c-border, #BBBAC6); }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-mock--tl, .hero-mock--bl { left: -20px; }
  .hero-mock--tr, .hero-mock--br { right: -20px; }
  .mock-window { width: 240px; }
  .mock-phone { width: 150px; }
}
@media (max-width: 820px) {
  .hero--light { padding: 96px 16px 56px; min-height: auto; }
  .hero-mock { display: none; }
  .hero-light-modules { gap: 8px; }
  .hero-mod-pill { padding: 8px 12px; font-size: 12px; }
}

/* ── SOCIAL PROOF · ajustes para "+1.500 familias" ── */
.social-stat-headline {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: var(--c-text, #2C2B3A);
}
.social-stat-headline strong {
  background: linear-gradient(135deg, var(--c-main, #4A3CAE), var(--c-mid, #6B5CE7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
/* Carrusel logos al pie del social */
.social-logos-strip {
  margin-top: 56px;
  padding: 28px 0 12px;
  border-top: 1px solid rgba(74,60,174,0.12);
}
.social-logos-label {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted, #6B6A7D);
  font-weight: 600;
  margin-bottom: 18px;
}
.social-logos-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.social-logos-track {
  display: flex;
  gap: 56px;
  align-items: center;
  width: max-content;
  animation: socialLogosScroll 30s linear infinite;
}
.social-logos-track img {
  height: 36px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(100%);
  transition: opacity .25s ease, filter .25s ease;
}
.social-logos-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
@keyframes socialLogosScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}



/* ══════════════════════════════════════════════════
   ARQUITECTURA V4 · LIGHT THEME GLOBAL + mockups v2
   (Connect landing + páginas de detalle = light)
   (Form + footer mantienen tema dark)
   ══════════════════════════════════════════════════ */

/* ─── Body / global ──────────────────────────────── */
body {
  /* Color sólido = exacto al final del hero (.hero--light termina en
     #F2F1F8). Antes era un gradient estirado a 5000+ px, lo que hacía
     que entre el final del hero y el inicio del trust-strip se viera
     una banda visible (body estaba ~18% del recorrido del gradient,
     mucho más claro que #F2F1F8). Con color sólido todo lo que está
     debajo del hero queda continuo hasta el .bg-light-stack blanco. */
  background: #F2F1F8;
  color: var(--c-text);
}

/* La parte superior dark-canvas (problema + productos) ahora es transparente */
.dark-canvas {
  background: transparent;
}
.dark-canvas .bg-dark-stack {
  background: transparent;
}

/* Hide dark transition fade en productos (estaba para conectar productos→como dark) */
.productos-bg::after {
  display: none !important;
}

/* La transición inferior (productos al siguiente bg) ya no es dark */
.section-productos {
  /* mantenemos padding pero color claro */
}

/* ─── PRODUCTOS · invertir colores para light ───── */
.section-productos .section-title {
  color: var(--c-text);
  font-weight: 700;
}
.section-productos .section-title .hl {
  color: var(--c-main);
  font-weight: 700;
  font-style: normal;
}
.section-productos .section-body {
  color: var(--c-muted);
}
.section-productos .section-kicker {
  color: var(--c-main);
  background: rgba(155,142,240,.12);
  border: 1px solid rgba(155,142,240,.18);
}

/* ─── PROBLEMA · ya casi neutro pero garantizamos texto ── */
.section-problema .section-title { color: var(--c-text); }
.section-problema .section-body { color: var(--c-muted); }

/* ─── PRODUCTOS V3 · adaptación a light ─────────── */
.prodv3-tabs {
  background: rgba(74,60,174,.06);
  border-color: rgba(74,60,174,.18);
}
.prodv3-tab {
  color: var(--c-muted);
}
.prodv3-tab:hover {
  color: var(--c-main);
  background: rgba(155,142,240,.16);
}
.prodv3-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
}
.prodv3-pane-title {
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.prodv3-pane-lead {
  color: var(--c-muted);
}
.prodv3-mock {
  background: #fff;
  border-color: rgba(74,60,174,.14);
  box-shadow: 0 4px 16px rgba(74,60,174,.06);
}
.prodv3-mock h4 { color: var(--c-text); }
.prodv3-mock p { color: var(--c-muted); }
.prodv3-mock-canvas {
  background: linear-gradient(180deg, var(--c-xlight), rgba(238,237,254,.5));
  border-color: rgba(74,60,174,.18);
}
.prodv3-mock-tag {
  background: rgba(74,60,174,.1);
  color: var(--c-main);
}
.prodv3-mock-label { color: var(--c-text); }
.prodv3-cta-link {
  background: rgba(74,60,174,.06);
  border-color: var(--c-light);
  color: var(--c-main);
}
.prodv3-cta-link:hover {
  background: var(--c-light);
  color: #fff;
  border-color: var(--c-light);
}

/* ─── PÁGINAS DE DETALLE · light theme ──────────── */
.subpage-shell {
  background: linear-gradient(180deg, #FAFAFE 0%, #F2F1F8 100%);
  color: var(--c-text);
}
.subpage-back { color: var(--c-main); }
.subpage-hero {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,142,240,.18), transparent 60%);
}
.subpage-badge {
  background: rgba(155,142,240,.12);
  border-color: rgba(155,142,240,.3);
  color: var(--c-main);
}
.subpage-hero h1 {
  background: linear-gradient(135deg, var(--c-deep), var(--c-mid));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.subpage-hero .subpage-lead { color: var(--c-muted); }
.subpage-mockup {
  background:
    linear-gradient(135deg, rgba(155,142,240,.12), rgba(74,60,174,.03)),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(155,142,240,.04) 16px 32px);
  border-color: rgba(155,142,240,.3);
  color: var(--c-main);
}
.subpage-section h2 { color: var(--c-text); }
.subpage-card {
  background: #fff;
  border-color: rgba(74,60,174,.12);
  box-shadow: 0 2px 8px rgba(74,60,174,.04);
}
.subpage-card h3 { color: var(--c-text); }
.subpage-card p { color: var(--c-muted); }
.subpage-card-icon {
  background: rgba(155,142,240,.15);
  color: var(--c-main);
}
.subpage-faq-item {
  background: #fff;
  border-color: rgba(74,60,174,.14);
}
.subpage-faq-q { color: var(--c-text); }
.subpage-faq-a { color: var(--c-muted); }
.subpage-cta-block {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(155,142,240,.16), transparent 70%);
}
.subpage-cta-block h2 { color: var(--c-text) !important; }
.subpage-btn--ghost {
  background: rgba(74,60,174,.06);
  border-color: var(--c-light);
  color: var(--c-main);
}
.subpage-btn--ghost:hover {
  background: var(--c-xlight);
  color: var(--c-main);
}

/* Empresa-specific */
.empresa-prod { background: #fff; border-color: rgba(74,60,174,.14); box-shadow: 0 2px 8px rgba(74,60,174,.04); }
.empresa-prod--star {
  background: linear-gradient(135deg, var(--c-xlight), #fff);
  border-color: var(--c-light);
}
.empresa-prod h3, .empresa-prod-name { color: var(--c-text); }
.empresa-prod-tagline { color: var(--c-main); }
.empresa-prod-desc { color: var(--c-muted); }
.empresa-photo {
  background:
    linear-gradient(135deg, rgba(155,142,240,.18), rgba(74,60,174,.06)),
    repeating-linear-gradient(135deg, transparent 0 30px, rgba(155,142,240,.04) 30px 60px);
  border-color: rgba(74,60,174,.18);
  color: var(--c-main);
}
.empresa-collabs {
  background: #fff;
  border-color: rgba(74,60,174,.12);
  box-shadow: 0 2px 8px rgba(74,60,174,.04);
}
.empresa-collab { color: var(--c-muted); }
.empresa-collab:hover { color: var(--c-main); }
.empresa-team-person { background: #fff; border-color: rgba(74,60,174,.14); box-shadow: 0 2px 8px rgba(74,60,174,.04); }
.empresa-team-name { color: var(--c-text); }
.empresa-team-role { color: var(--c-main); }

/* Module page navbar adjustments — usar tema claro */
.subpage-shell + .footer,
body:has(.subpage-shell) .navbar { /* same navbar, ya luce ok */ }


/* ══════════════════════════════════════════════════
   HERO · MOCKUPS V2 (realistas + animados)
   ══════════════════════════════════════════════════ */

/* Reposicionar mockups para que NO se solapen con la navbar */
.hero--light { padding-top: 140px !important; min-height: 760px; }
.hero-mock {
  filter: drop-shadow(0 24px 48px rgba(45,37,96,0.14)) drop-shadow(0 4px 12px rgba(74,60,174,0.06));
}
/* Posiciones/rotaciones/keyframes: ver bloque consolidado al final del archivo */

/* ─── DESKTOP WINDOW · más realista ─── */
.mock-window {
  width: 320px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(155,142,240,0.18),
    0 12px 32px rgba(74,60,174,0.1);
}
.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #F8F7FB, #F1F0F7);
  border-bottom: 1px solid rgba(155,142,240,0.18);
}
.mock-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.mock-dot--r { background: #FF5F57; }
.mock-dot--y { background: #FEBC2E; }
.mock-dot--g { background: #28C840; }
.mock-url {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--c-muted);
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  margin-left: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid rgba(155,142,240,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mock-url-lock { font-size: 8px; opacity: 0.6; }

.mock-body {
  padding: 14px 16px 16px;
  background: #FCFCFE;
}

/* Variante "bare" — desktop window sin browser chrome (más app-like, menos screenshot) */
.mock-window--bare .mock-body {
  padding: 16px 16px 16px;
}

/* ─── CASINO MOCK · v2 ─── */
.mock-app-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mock-app-titles strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.mock-app-titles span {
  display: block;
  font-size: 9px;
  color: var(--c-muted);
  margin-top: 1px;
}
.mock-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 600;
  color: #4D8E5F;
  background: rgba(40,200,64,0.1);
  padding: 3px 8px;
  border-radius: 999px;
}
.mock-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 6px rgba(40,200,64,0.6);
  animation: mockLivePulse 1.4s ease-in-out infinite;
}
@keyframes mockLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.mock-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--c-xlight);
  border-radius: 8px;
  margin-bottom: 12px;
}
.mock-kpi { display: flex; flex-direction: column; gap: 1px; }
.mock-kpi-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-main);
  letter-spacing: -0.02em;
}
#mockCasCounter { animation: mockCountFlash 4s ease-in-out infinite; }
@keyframes mockCountFlash {
  0%, 50% { color: var(--c-main); }
  51%, 60% { color: var(--c-mid); transform: scale(1.06); }
  100% { color: var(--c-main); transform: scale(1); }
}
.mock-kpi-lab {
  font-size: 8px;
  color: var(--c-muted);
  text-transform: lowercase;
}

.mock-feed { display: flex; flex-direction: column; gap: 6px; }
.mock-feed-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.12);
  border-radius: 8px;
}
.mock-feed-item--new {
  background: rgba(155,142,240,0.08);
  border-color: rgba(155,142,240,0.3);
  animation: mockFeedSlideIn 4s ease-in-out infinite;
}
@keyframes mockFeedSlideIn {
  0%, 18% { opacity: 0; transform: translateY(-8px) scale(0.95); }
  25%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mock-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-avatar--a { background: linear-gradient(135deg, #F4A8C0, #E97FA1); }
.mock-avatar--b { background: linear-gradient(135deg, #9DD2C5, #5FB29D); }
.mock-avatar--c { background: linear-gradient(135deg, #F5C77F, #E0A04E); }
/* Variantes adicionales (d/e) — sin estas, el avatar quedaba transparente
   cuando el JS rotaba a ítems con avatar--d/--e. */
.mock-avatar--d { background: linear-gradient(135deg, #9B8EF0, #6B5CE7); }
.mock-avatar--e { background: linear-gradient(135deg, #B6C6E8, #7B96C9); }
.mock-feed-text { display: flex; flex-direction: column; min-width: 0; }
.mock-feed-text strong { font-size: 10px; font-weight: 600; color: var(--c-text); }
.mock-feed-text span { font-size: 8px; color: var(--c-muted); }
.mock-feed-time {
  font-size: 9px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.mock-feed-time--live {
  color: var(--c-main);
  font-weight: 700;
  animation: mockTimePulse 1.4s ease-in-out infinite;
}
@keyframes mockTimePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ─── CPA MOCK · v2 ─── */
.mock-cpa-card {
  padding: 14px;
  background: linear-gradient(135deg, var(--c-xlight), rgba(238,237,254,0.4));
  border-radius: 10px;
  margin-bottom: 12px;
}
.mock-cpa-label {
  display: block;
  font-size: 9px;
  color: var(--c-muted);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.mock-cpa-amount {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  animation: mockCpaTick 6s steps(1) infinite;
}
@keyframes mockCpaTick {
  0%, 30% { content: "$1.840.000"; }
  31%, 60% { content: "$1.875.500"; }
  61%, 100% { content: "$1.910.500"; }
}
.mock-cpa-amount::before {
  content: "$1.840.000";
  animation: mockCpaTick 6s steps(1) infinite;
}
.mock-cpa-amount { color: transparent; position: relative; }
.mock-cpa-amount::before {
  position: absolute; left: 0; top: 0;
  color: var(--c-main);
}
.mock-cpa-target {
  display: block;
  font-size: 10px;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.mock-cpa-target strong { color: var(--c-text); font-weight: 600; }
.mock-cpa-bar {
  height: 6px;
  background: rgba(155,142,240,0.2);
  border-radius: 3px;
  overflow: hidden;
}
.mock-cpa-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-mid), var(--c-light));
  border-radius: 3px;
  width: 0;
  animation: mockCpaBarGrow 4s ease-out infinite;
}
@keyframes mockCpaBarGrow {
  0% { width: 0; }
  60%, 100% { width: 73%; }
}

.mock-tx-list { display: flex; flex-direction: column; gap: 4px; }
.mock-tx-title {
  font-size: 9px;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.mock-tx-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 6px;
}
.mock-tx-row--enter {
  background: rgba(40,200,64,0.06);
  animation: mockFeedSlideIn 5s ease-in-out infinite;
}
.mock-tx-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(40,200,64,0.18);
  color: #4D8E5F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.mock-tx-meta { display: flex; flex-direction: column; min-width: 0; }
.mock-tx-meta strong { font-size: 10px; color: var(--c-text); font-weight: 600; }
.mock-tx-meta span { font-size: 8px; color: var(--c-muted); }
.mock-tx-amt {
  font-size: 10px;
  font-weight: 700;
  color: #4D8E5F;
  font-variant-numeric: tabular-nums;
}

/* ─── PHONE FRAME · v2 ─── */
.mock-phone {
  width: 200px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(74,60,174,0.18);
}
.mock-phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 4px;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-text);
  position: relative;
  z-index: 3;
}
.mock-phone-status-icons { display: inline-flex; gap: 3px; align-items: center; }
.msi { display: inline-block; }
.msi--signal { width: 12px; height: 7px; background: linear-gradient(135deg, transparent 0% 25%, currentColor 25% 100%); }
.msi--wifi { width: 10px; height: 7px; background: radial-gradient(ellipse at bottom, currentColor 30%, transparent 32%); }
.msi--bat { width: 16px; height: 7px; border: 1px solid currentColor; border-radius: 2px; padding: 1px; position: relative; }
.msi--bat::after { content: ''; display: block; height: 100%; width: 80%; background: currentColor; border-radius: 1px; }
.mock-phone-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #1E1838;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.mock-phone-body {
  padding: 14px 14px 12px;
  background: #FCFCFE;
  min-height: 240px;
}

/* App header inside phone */
.mock-app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(155,142,240,0.12);
  margin-bottom: 10px;
}
.mock-back-arr {
  font-size: 14px;
  color: var(--c-main);
  font-weight: 700;
}

/* ─── LIGAS MOCK · v2 ─── */
.mock-app-header--ligas { padding-bottom: 8px; }
.mock-ligas-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mock-ligas-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(155,142,240,0.06);
  border-radius: 7px;
  font-size: 11px;
  color: var(--c-text);
  font-weight: 500;
}
.mock-cb-big {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(155,142,240,0.3);
  background: #fff;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mock-cb-big--on {
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  border-color: var(--c-mid);
  color: #fff;
}
.mock-cb-big--anim { animation: mockCbToggle 4s ease-in-out infinite; }
@keyframes mockCbToggle {
  0%, 60% {
    background: #fff;
    border-color: rgba(155,142,240,0.3);
    color: transparent;
  }
  68%, 100% {
    background: linear-gradient(135deg, var(--c-main), var(--c-mid));
    border-color: var(--c-mid);
    color: #fff;
  }
}
.mock-cb-big--anim::after { content: "✓"; }
.mock-tag-ok {
  font-size: 8px;
  color: #4D8E5F;
  background: rgba(40,200,64,0.12);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.mock-app-cta {
  margin: 10px 0 0;
  padding: 10px;
  background: linear-gradient(135deg, var(--c-deep), var(--c-main));
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(45,37,96,0.25);
}
.mock-app-cta--anim { animation: mockCtaPulse 4s ease-in-out infinite; }
@keyframes mockCtaPulse {
  0%, 60%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(45,37,96,0.25); }
  68%, 80% { transform: scale(1.04); box-shadow: 0 8px 20px rgba(45,37,96,0.4); }
}

/* ─── PROVEEDORES MOCK · v2 ─── */
.mock-prov-scanner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #1E1838;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
}
.mock-prov-qr {
  width: 76px; height: 76px;
  background: #fff;
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.mock-prov-qr-grid {
  width: 100%; height: 100%;
  background:
    /* Three position-detection patterns */
    radial-gradient(circle at 14% 14%, #1E1838 35%, transparent 36%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 86% 14%, #1E1838 35%, transparent 36%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 14% 86%, #1E1838 35%, transparent 36%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    /* Random data */
    repeating-conic-gradient(from 0deg at 50% 50%, #1E1838 0% 8%, transparent 8% 16%);
  background-size: 26px 26px, 26px 26px, 26px 26px, 6px 6px;
  background-position: top left, top right, bottom left, center;
  border-radius: 4px;
  filter: contrast(1.4);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 80%, transparent);
}
.mock-prov-corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--c-light);
}
.mock-prov-corner--tl { top: -4px; left: -4px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.mock-prov-corner--tr { top: -4px; right: -4px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.mock-prov-corner--bl { bottom: -4px; left: -4px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.mock-prov-corner--br { bottom: -4px; right: -4px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.mock-prov-scanline {
  position: absolute;
  left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-light), transparent);
  box-shadow: 0 0 12px var(--c-light);
  animation: mockScanLine 2.4s ease-in-out infinite;
}
@keyframes mockScanLine {
  0%, 100% { top: 18%; }
  50% { top: 78%; }
}

.mock-prov-sectors { display: flex; flex-direction: column; gap: 4px; }
.mock-sector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(155,142,240,0.06);
  border-radius: 6px;
  font-size: 10px;
  color: var(--c-text);
}
.mock-sector--done {
  background: rgba(40,200,64,0.1);
  color: #4D8E5F;
}
.mock-sector--done span:first-child { font-weight: 600; }
.mock-sector--scanning {
  background: rgba(155,142,240,0.16);
  color: var(--c-main);
  animation: mockSectorPulse 1.6s ease-in-out infinite;
}
@keyframes mockSectorPulse {
  0%, 100% { background: rgba(155,142,240,0.16); }
  50% { background: rgba(155,142,240,0.3); }
}
.mock-sector-tick { font-weight: 700; color: #4D8E5F; }
.mock-sector-tick--off { color: var(--c-border, #BBBAC6); }
.mock-sector-spin {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid rgba(155,142,240,0.2);
  border-top-color: var(--c-main);
  border-radius: 50%;
  animation: mockSpin 0.8s linear infinite;
}
@keyframes mockSpin {
  to { transform: rotate(360deg); }
}

/* ─── HERO LIGHT · ajuste tipográfico para alivianar ─── */
.hero-light-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
}
.hero-light-sub { font-size: clamp(14px, 1.4vw, 16px); }

/* ─── HL-STRONG (para social headline) ─── */
.section-title .hl-strong {
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-style: normal;
}

/* ─── responsive ─── */
@media (max-width: 1200px) {
  .mock-window { width: 280px; }
  .mock-phone { width: 180px; }
  .hero-mock--tl { left: -10px; }
  .hero-mock--tr { right: -10px; }
}
@media (max-width: 980px) {
  .hero-mock { display: none; }
  .hero--light { padding-top: 100px !important; }
}



/* ══════════════════════════════════════════════════
   ARQUITECTURA V5 · polish (hero, CTA, mockups, social)
   ══════════════════════════════════════════════════ */

/* ─── HERO · tipografía afinada ─────────────────── */
.hero-light-title {
  font-size: clamp(40px, 5.6vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 18px !important;
}
.hero-light-title .hero-light-accent {
  font-weight: 800;
}
.hero-light-sub {
  font-size: clamp(15px, 1.25vw, 17px) !important;
  font-weight: 400 !important;
  color: var(--c-muted) !important;
  margin-bottom: 32px !important;
  max-width: 520px !important;
}

/* ─── HERO CTA · gradient mejorado con depth ─────── */
.hero-light-cta {
  background:
    linear-gradient(135deg, #4A3CAE 0%, #6B5CE7 50%, #9B8EF0 110%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 24px rgba(74,60,174,0.35),
    0 16px 48px rgba(45,37,96,0.18) !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
.hero-light-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.hero-light-cta:hover::before { transform: translateX(100%); }
.hero-light-cta:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 12px 32px rgba(74,60,174,0.5),
    0 24px 60px rgba(45,37,96,0.25) !important;
}

/* ─── HERO · trust signal sutil ─────────────────────
   2da pasada 20/05/2026: la definición de .hero-light-trust que vivía aquí
   fue eliminada (rompía el ancho con display:flex sin restricción). La
   definición canónica vive en línea ~10890 con width:max-content. Mantenemos
   acá solo el dot y su animación para no perderlos. */
.hl-trust-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-mid);
  box-shadow: 0 0 0 3px rgba(107, 92, 231, .12);
  animation: hlTrustPulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hlTrustPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(107,92,231,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(107,92,231,.04); }
}

/* ─── HERO · module pills rediseñadas ─────────────── */
.hero-light-modules {
  margin-top: 36px;
  gap: 10px !important;
}
.hero-mod-pill {
  padding: 12px 18px 12px 14px !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(155,142,240,0.22) !important;
  border-radius: 14px !important;
  gap: 10px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px rgba(74,60,174,0.06),
    0 8px 28px rgba(74,60,174,0.04) !important;
  transition: all .25s ease !important;
}
.hero-mod-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,142,240,0.4), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.hero-mod-pill:hover {
  transform: translateY(-3px) !important;
  border-color: var(--c-light) !important;
  background: #fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 12px 32px rgba(74,60,174,0.18),
    0 4px 12px rgba(74,60,174,0.08) !important;
}
.hero-mod-pill:hover::before { opacity: 1; }
.hero-mod-icon {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, #4A3CAE, #6B5CE7) !important;
  border-radius: 9px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 4px 12px rgba(74,60,174,0.3);
}
.hero-mod-pill span:not(.hero-mod-icon) {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

/* ─── HERO → SOCIAL transition smoothing ───────────── */
.hero--light::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--c-surface, #F2F1F8));
  pointer-events: none;
  z-index: 1;
}
.section-social {
  background: linear-gradient(180deg, var(--c-surface, #F2F1F8) 0%, #FAFAFE 30%, #F2F1F8 100%);
  position: relative;
  margin-top: -1px;
}

/* ─── SOCIAL PROOF · audit / cleanup ───────────────── */
/* Atenuar decoraciones excesivas (constellation, particles) que se ven raras en light */
.section-social .colegios-bg {
  opacity: 0.35;
}
.section-social .colegios-constellation,
.section-social .colegios-streams,
.section-social .colegios-particles {
  opacity: 0.5;
}
.section-social .colegios-conic { opacity: 0.4; }

/* Padding compactado 20/05/2026: ya no necesitamos abrir tanto la sección
   Comunidad porque el carrusel post-hero ya rompió el hielo de "credibility".
   25/05/2026: compactado a 28/16 + margin header a 6 para que toda la
   sección quepa en viewports de 800-900px de alto.
   25/05/2026 v6 (Propuesta 4): padding-bottom subido a 80 para dar room a
   la shadow inferior de las cards — antes la siguiente sección (Productos,
   bg oscuro) la tapaba con su background.
   31/05/2026: padding-top 28→20 + header margin-bottom 6→24 para abrir
   levemente el aire entre la descripción y el carrusel sin estirar la
   sección entera. scroll-margin-top sigue siendo 76 para que el header
   aterrice limpio bajo la navbar al clickear "Comunidad". */
.section-social { padding-top: 20px; padding-bottom: 72px; }
.section-social .section-header { margin-bottom: 24px; }

/* Grid de stats — alinear y limpiar */
.section-social .sb-stat-num,
.section-social .stat-num-value {
  color: var(--c-main);
}

/* ─── 12 MOCKUPS PRODUCTOS · animaciones ──────────── */
/* Wrapper canvas: ajustar para que mockups internos respiren */
.prodv3-mock-canvas {
  padding: 14px;
  display: block !important;
  background: linear-gradient(180deg, var(--c-xlight), rgba(238,237,254,.5));
  position: relative;
  overflow: hidden;
}

/* Common mockup primitives */
.mk-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9px;
  color: var(--c-muted);
  background: #fff;
  border: 1px solid rgba(155,142,240,0.22);
  flex: 1;
  text-align: center;
}
.mk-bar {
  height: 6px;
  background: rgba(155,142,240,0.18);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.mk-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-mid), var(--c-light));
  border-radius: 3px;
}

/* CASINO M1 — Suscripción vs tickets + calendario */
.mk-cas-1 .mk-toggle { display: flex; gap: 4px; margin-bottom: 10px; }
.mk-cas-1 .mk-toggle .mk-pill { animation: pillSwap 4s ease-in-out infinite; }
.mk-cas-1 .mk-toggle .mk-pill:nth-child(2) { animation-delay: 2s; }
@keyframes pillSwap {
  0%, 45%, 100% { background: #fff; color: var(--c-muted); border-color: rgba(155,142,240,0.22); }
  50%, 95% {
    background: linear-gradient(135deg, var(--c-main), var(--c-mid));
    color: #fff;
    border-color: var(--c-light);
  }
}
.mk-cas-1 .mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mk-cas-1 .mk-cal-cell {
  aspect-ratio: 1;
  background: rgba(155,142,240,0.14);
  border-radius: 3px;
  animation: calFill 4s ease-in-out infinite;
}
.mk-cas-1 .mk-cal-cell:nth-child(odd) { animation-delay: .3s; }
.mk-cas-1 .mk-cal-cell:nth-child(3n) { animation-delay: .6s; }
.mk-cas-1 .mk-cal-cell:nth-child(5n) { animation-delay: 1s; }
.mk-cas-1 .mk-cal-cell:nth-child(7n) { animation-delay: 1.3s; }
@keyframes calFill {
  0%, 30%, 100% { background: rgba(155,142,240,0.14); }
  50%, 80% { background: var(--c-mid); }
}

/* CASINO M2 — Notificación → check */
.mk-cas-2 { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 !important; }
.mk-cas-2 .mk-phoneA {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.18);
  border-radius: 8px;
  padding: 10px;
  height: 90px;
  display: flex;
  align-items: flex-start;
}
.mk-cas-2 .mk-notif {
  background: linear-gradient(135deg, rgba(107,92,231,0.18), rgba(155,142,240,0.05));
  border: 1px solid rgba(155,142,240,0.25);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 8.5px;
  color: var(--c-text);
  line-height: 1.3;
  width: 100%;
  font-weight: 500;
  animation: notifIn 3s ease-in-out infinite;
}
@keyframes notifIn {
  0%, 25% { opacity: 0; transform: translateY(-6px); }
  45%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.mk-cas-2 .mk-arrow {
  color: var(--c-mid);
  font-size: 18px;
  font-weight: 700;
  animation: arrowPulse 3s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 35% { opacity: 0.2; transform: translateX(-3px); }
  55%, 90% { opacity: 1; transform: translateX(0); }
}
.mk-cas-2 .mk-check {
  flex: 0 0 38px; height: 38px;
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(74,60,174,0.3);
  animation: checkIn 3s ease-in-out infinite;
}
@keyframes checkIn {
  0%, 55% { transform: scale(0.6); opacity: 0; }
  75%, 100% { transform: scale(1); opacity: 1; }
}

/* CASINO M3 — Validación QR */
.mk-cas-3 { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 0 !important; }
.mk-cas-3 .mk-scanner {
  flex: 1;
  background: linear-gradient(180deg, #1E1838 0%, #2D2560 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-cas-3 .mk-qr {
  width: 38px; height: 38px;
  background:
    radial-gradient(circle at 14% 14%, #fff 30%, transparent 32%, transparent 50%, #fff 51%, #fff 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 86% 14%, #fff 30%, transparent 32%, transparent 50%, #fff 51%, #fff 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 14% 86%, #fff 30%, transparent 32%, transparent 50%, #fff 51%, #fff 70%, transparent 71%) no-repeat,
    repeating-conic-gradient(from 0deg at 50% 50%, #fff 0% 8%, transparent 8% 16%);
  background-size: 12px 12px, 12px 12px, 12px 12px, 4px 4px;
  background-position: top left, top right, bottom left, center;
  border-radius: 4px;
}
.mk-cas-3 .mk-scan-line {
  position: absolute;
  left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-light), transparent);
  box-shadow: 0 0 10px var(--c-light);
  animation: scanLineUD 2.5s ease-in-out infinite;
}
@keyframes scanLineUD {
  0%, 100% { top: 15%; }
  50% { top: 80%; }
}
.mk-cas-3 .mk-ticket {
  background: #fff;
  border: 1px solid rgba(155,142,240,0.22);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 9px;
  color: var(--c-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mk-cas-3 .mk-count { color: var(--c-main); font-weight: 700; }

/* CPA M1 — Recaudación */
.mk-cpa-1 { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.mk-cpa-1 .mk-goal-row {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--c-text);
  font-weight: 500;
}
.mk-cpa-1 .mk-target { color: var(--c-main); font-weight: 700; }
.mk-cpa-1 .mk-bar { height: 10px; }
.mk-cpa-1 .mk-bar-fill { animation: barGrow 4s ease-in-out infinite; }
@keyframes barGrow {
  0%, 100% { width: 18%; }
  60%, 90% { width: 78%; }
}
.mk-cpa-1 .mk-events { display: flex; gap: 6px; }
.mk-cpa-1 .mk-event {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.18);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 9px;
  color: var(--c-text);
  text-align: center;
}
.mk-cpa-1 .mk-event:nth-child(2) {
  color: var(--c-main);
  border-color: rgba(155,142,240,0.5);
  background: rgba(155,142,240,0.08);
}

/* CPA M2 — Conciliación */
.mk-cpa-2 { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 !important; justify-content: center; }
.mk-cpa-2 .mk-stmt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.12);
  border-radius: 6px;
  font-size: 9px;
  color: var(--c-text);
  border-left: 2px solid transparent;
  animation: rowHighlight 4s ease-in-out infinite;
}
.mk-cpa-2 .mk-stmt-row:nth-child(1) { animation-delay: 0s; }
.mk-cpa-2 .mk-stmt-row:nth-child(2) { animation-delay: .4s; }
.mk-cpa-2 .mk-stmt-row:nth-child(3) { animation-delay: .8s; }
.mk-cpa-2 .mk-stmt-row:nth-child(4) { animation-delay: 1.2s; }
@keyframes rowHighlight {
  0%, 60%, 100% { border-left-color: transparent; background: #fff; }
  65%, 90% { border-left-color: var(--c-mid); background: rgba(155,142,240,0.08); }
}
.mk-cpa-2 .mk-tag {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(155,142,240,0.18);
  color: var(--c-main);
  font-weight: 600;
}

/* CPA M3 — Vista de caja */
.mk-cpa-3 { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mk-cpa-3 .mk-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(107,92,231,0.16), rgba(155,142,240,0.05));
  border: 1px solid rgba(155,142,240,0.25);
  border-radius: 8px;
}
.mk-cpa-3 .mk-stat--alt {
  background: #fff;
  border-color: rgba(155,142,240,0.18);
}
.mk-cpa-3 .mk-stat-lab {
  font-size: 8px;
  color: var(--c-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.mk-cpa-3 .mk-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mk-cpa-3 .mk-stat-val--accent { color: var(--c-mid); font-size: 18px; }
.mk-cpa-3 .mk-stat-val--cycling::before {
  content: "$2.480.000";
  animation: amountCycle 6s steps(1) infinite;
}
@keyframes amountCycle {
  0%, 32% { content: "$2.480.000"; }
  33%, 65% { content: "$2.512.000"; }
  66%, 100% { content: "$2.534.500"; }
}

/* LIGAS M1 — Registro */
.mk-lig-1 { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 !important; justify-content: center; }
.mk-lig-1 .mk-field {
  background: #fff;
  border: 1px solid rgba(155,142,240,0.18);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 9px;
  color: var(--c-muted);
  animation: fieldFill 4.5s ease-in-out infinite;
}
.mk-lig-1 .mk-field:nth-child(2) { animation-delay: .5s; }
.mk-lig-1 .mk-field:nth-child(3) { animation-delay: 1s; }
@keyframes fieldFill {
  0%, 35% { border-color: rgba(155,142,240,0.18); color: var(--c-muted); background: #fff; }
  50%, 100% {
    border-color: var(--c-light);
    color: var(--c-text);
    background: rgba(155,142,240,0.08);
  }
}
.mk-lig-1 .mk-pay {
  margin-top: 4px;
  padding: 9px;
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  border-radius: 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  animation: payConfirm 4.5s ease-in-out infinite;
}
@keyframes payConfirm {
  0%, 70% { opacity: 0.4; transform: scale(0.96); }
  85%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(107,92,231,0.4);
  }
}

/* LIGAS M2 — Planilla + firmas */
.mk-lig-2 { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 !important; justify-content: center; }
.mk-lig-2 .mk-trow {
  display: grid;
  grid-template-columns: 1fr 30px 14px;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.14);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 9px;
  color: var(--c-text);
}
.mk-lig-2 .mk-tcheck {
  width: 12px; height: 12px;
  border: 1.4px solid rgba(155,142,240,0.3);
  border-radius: 3px;
  background: #fff;
  animation: checkFill 4s ease-in-out infinite;
}
.mk-lig-2 .mk-trow:nth-child(2) .mk-tcheck { animation-delay: .3s; }
.mk-lig-2 .mk-trow:nth-child(3) .mk-tcheck { animation-delay: .6s; }
.mk-lig-2 .mk-trow:nth-child(4) .mk-tcheck { animation-delay: .9s; }
@keyframes checkFill {
  0%, 50% { background: #fff; border-color: rgba(155,142,240,0.3); }
  60%, 100% { background: var(--c-mid); border-color: var(--c-mid); }
}
.mk-lig-2 .mk-sig {
  display: inline-block;
  width: 30px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'><path d='M1 7 Q 5 2 9 5 T 17 5 T 25 4 L 29 6' stroke='%234A3CAE' fill='none' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* LIGAS M3 — Bracket */
.mk-lig-3 { display: flex; align-items: center; gap: 6px; padding: 6px 0 !important; }
.mk-lig-3 .mk-bcol { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mk-lig-3 .mk-team {
  background: #fff;
  border: 1px solid rgba(155,142,240,0.18);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 9px;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.mk-lig-3 .mk-team--win {
  background: linear-gradient(135deg, var(--c-main), var(--c-mid));
  color: #fff;
  border-color: var(--c-mid);
  animation: winPulse 3s ease-in-out infinite;
}
.mk-lig-3 .mk-team--final { font-size: 14px; padding: 10px 8px; }
@keyframes winPulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(155,142,240,0); }
  80% { box-shadow: 0 0 0 6px rgba(155,142,240,0.25); }
}
.mk-lig-3 .mk-barrow {
  color: var(--c-mid);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.5;
}

/* PROVEEDORES M1 — QR + sectores */
.mk-prov-1 { display: flex; gap: 10px; align-items: stretch; padding: 0 !important; }
.mk-prov-1 .mk-pqr {
  flex: 0 0 56px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 14% 14%, #1E1838 30%, transparent 32%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 86% 14%, #1E1838 30%, transparent 32%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    radial-gradient(circle at 14% 86%, #1E1838 30%, transparent 32%, transparent 50%, #1E1838 51%, #1E1838 70%, transparent 71%) no-repeat,
    repeating-conic-gradient(from 0deg at 50% 50%, #1E1838 0% 8%, transparent 8% 16%);
  background-size: 16px 16px, 16px 16px, 16px 16px, 5px 5px;
  background-position: top left, top right, bottom left, center;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid rgba(155,142,240,0.18);
  position: relative;
  align-self: center;
}
.mk-prov-1 .mk-pqr::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--c-light);
  border-radius: 6px;
  animation: qrPulse 2s ease-in-out infinite;
}
@keyframes qrPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}
.mk-prov-1 .mk-psectors {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.mk-prov-1 .mk-psector {
  background: #fff;
  border: 1px solid rgba(155,142,240,0.18);
  border-radius: 5px;
  padding: 6px;
  font-size: 9px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  animation: sectorDone 4s ease-in-out infinite;
}
.mk-prov-1 .mk-psector:nth-child(2) { animation-delay: .5s; }
.mk-prov-1 .mk-psector:nth-child(3) { animation-delay: 1s; }
.mk-prov-1 .mk-psector:nth-child(4) { animation-delay: 1.5s; }
@keyframes sectorDone {
  0%, 50%, 100% { background: #fff; border-color: rgba(155,142,240,0.18); color: var(--c-text); }
  65%, 90% {
    background: linear-gradient(135deg, var(--c-main), var(--c-mid));
    border-color: var(--c-mid);
    color: #fff;
  }
}

/* PROVEEDORES M2 — Progreso en vivo */
.mk-prov-2 { display: flex; flex-direction: column; gap: 9px; justify-content: center; padding: 4px 0 !important; }
.mk-prov-2 .mk-prow { display: flex; flex-direction: column; gap: 4px; }
.mk-prov-2 .mk-plabel {
  display: flex; justify-content: space-between;
  font-size: 9px;
  color: var(--c-text);
  font-weight: 500;
}
.mk-prov-2 .mk-pv { color: var(--c-main); font-weight: 700; }
.mk-prov-2 .mk-bar { height: 6px; }
.mk-prov-2 .mk-bar-fill { animation: provBar 4s ease-in-out infinite; }
.mk-prov-2 .mk-prow:nth-child(1) .mk-bar-fill { animation-duration: 3.6s; }
.mk-prov-2 .mk-prow:nth-child(2) .mk-bar-fill { animation-duration: 5s; animation-delay: .4s; }
.mk-prov-2 .mk-prow:nth-child(3) .mk-bar-fill { animation-duration: 4.4s; animation-delay: .9s; }
@keyframes provBar {
  0%, 100% { width: 5%; }
  70%, 90% { width: 92%; }
}

/* PROVEEDORES M3 — Bitácora */
.mk-prov-3 { display: flex; flex-direction: column; gap: 5px; justify-content: flex-start; padding: 4px 0 !important; overflow: hidden; }
.mk-prov-3 .mk-feed-row {
  display: flex; gap: 6px; align-items: center;
  background: #fff;
  border: 1px solid rgba(155,142,240,0.14);
  border-left: 2px solid var(--c-mid);
  border-radius: 0 5px 5px 0;
  padding: 5px 8px;
  font-size: 9px;
  color: var(--c-text);
  font-weight: 500;
  opacity: 0;
  animation: feedSlide 6s ease-in-out infinite;
}
.mk-prov-3 .mk-feed-row:nth-child(1) { animation-delay: 0s; }
.mk-prov-3 .mk-feed-row:nth-child(2) { animation-delay: 1s; }
.mk-prov-3 .mk-feed-row:nth-child(3) { animation-delay: 2s; }
.mk-prov-3 .mk-feed-row:nth-child(4) { animation-delay: 3s; }
@keyframes feedSlide {
  0%, 5% { transform: translateX(-12%); opacity: 0; }
  12%, 75% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0.4; }
}
.mk-prov-3 .mk-time {
  margin-left: auto;
  color: var(--c-muted);
  font-size: 8px;
  flex-shrink: 0;
  font-weight: 400;
}


/* ══════════════════════════════════════════════════
   HERO REDESIGN · 2026-05-12
   Title weights · sub copy · navbar glass · dropdown
   grid · new Gestión/CPA mockups · varied tilts · long
   animations · staggered entrance.
   ══════════════════════════════════════════════════ */

/* ─── NAVBAR · frosted glass LIGHT (actual) ──────────────
   ─────────────────────────────────────────────────────────
   PRESET DARK GUARDADO — para volver al modo oscuro:

     .nav-inner background:
       linear-gradient(180deg, rgba(20,16,42,.72) 0%, rgba(10,7,24,.82) 100%);
     .nav-inner border: 1px solid rgba(255,255,255,.10);
     .nav-inner shadows:
       inset 0 1px 0 rgba(255,255,255,.14),
       inset 0 -1px 0 rgba(0,0,0,.36),
       0 1px 2px rgba(0,0,0,.22),
       0 10px 30px rgba(45,37,96,.30),
       0 24px 60px rgba(0,0,0,.26);
     .nav-links a color: rgba(255,255,255,.72);
     .nav-links a:hover color: #fff;
     .nav-li--empresa .nav-link color: var(--c-light);
     .nav-li--empresa .nav-link:hover color: #fff;
     .nav-li--divider bg: rgba(255,255,255,.16);
     .nav-link--toggle color: rgba(255,255,255,.72);
     .nav-link--toggle:hover color: #fff; bg: rgba(255,255,255,.08);
     .nav-dropdown bg + border + shadow: idem .nav-inner;
     .nav-dd-item color: rgba(255,255,255,.72);
     .nav-dd-item:hover bg: rgba(155,142,240,.18); color: #fff;
     .nav-wordmark filter: none  (queda blanco original)

   ─────────────────────────────────────────────────────────
   PRESET LIGHT ACTIVO abajo:
   ───────────────────────────────────────────────────────── */
.nav-inner {
  /* +10% más gris-purpúreo: alphas .65/.75 (antes .55/.65). */
  background:
    linear-gradient(180deg, rgba(48,40,82,.65) 0%, rgba(28,20,60,.75) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(45,37,96,.18),
    0 10px 30px rgba(45,37,96,.26),
    0 24px 60px rgba(45,37,96,.20) !important;
  overflow: visible;
  transition:
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease !important;
}

/* ─── NAVBAR ADAPTIVE DARK ────────────────────────────────
   Cuando la navbar pasa sobre una sección con data-nav-theme="dark",
   el JS le añade .is-dark al .navbar. Aquí invertimos paleta. */
.navbar.is-dark .nav-inner {
  background:
    linear-gradient(180deg, rgba(20,16,42,.72) 0%, rgba(10,7,24,.82) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.36),
    0 1px 2px rgba(0,0,0,.22),
    0 10px 30px rgba(45,37,96,.30),
    0 24px 60px rgba(0,0,0,.26) !important;
}
.navbar.is-dark .nav-wordmark {
  /* En dark mode usamos la misma SVG pero SIN stroke — el blanco
     puro sobre fondo oscuro tiene contraste natural. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 389.87 150.6'><g fill='white'><rect x='262.57' y='35.52' width='29.99' height='80.23'/><path d='M389.87,78.96c0-23.99-19.37-43.44-43.28-43.44-6.68,0-13,1.52-18.64,4.23v-4.23h-29.99v80.23h29.99v-36.73h.08c.75-8.15,7.57-14.52,15.89-14.52s15.13,6.38,15.89,14.52h.08v36.73h29.99v-36.65h0s0-.09,0-.14Z'/><path d='M108.81,35.52v3.81c-5.86-3.29-12.61-5.17-19.79-5.17-22.44,0-40.64,18.26-40.64,40.79s18.19,40.79,40.64,40.79c7.19,0,13.94-1.88,19.79-5.17v5.17h29.84V35.52h-29.84ZM108.8,76.8c-.2,8.74-7.32,15.77-16.07,15.77s-16.08-7.23-16.08-16.14,7.2-16.14,16.08-16.14c8.23,0,15.01,6.21,15.96,14.21h.12v2.31h0Z'/><rect x='262.57' y='0' width='29.99' height='30.11' rx='12.55' ry='12.55'/><path d='M40.67,87.8c-5.84,0-10.58-4.75-10.58-10.62h.03v-12.91h14.7v-30.1h-14.7V14H.14v20.17h-.14v30.1l.02,12.91C.02,99.72,18.22,117.99,40.67,117.99c1.4,0,2.78-.07,4.15-.21v-30.83c-1.27.55-2.67.85-4.15.85Z'/><path d='M193.83,34.17c-7.19,0-13.94,1.88-19.79,5.17v-3.81h-29.84v115.08h29.84v-40.01c5.86,3.29,12.61,5.17,19.79,5.17,22.44,0,40.64-18.26,40.64-40.79s-18.19-40.79-40.64-40.79ZM190.12,92.57c-8.76,0-15.87-7.03-16.07-15.77h0v-2.31h.04v.87c.55-8.42,7.52-15.07,16.04-15.07s16.08,7.23,16.08,16.14-7.2,16.14-16.08,16.14Z'/></g></svg>") !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.40)) !important;
  transition: background-image .35s ease, filter .35s ease;
}
.navbar.is-dark .nav-logo:hover .nav-wordmark {
  opacity: 1 !important;
  transform: scale(1.08);
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.55))
    drop-shadow(0 8px 14px rgba(0,0,0,.65))
    drop-shadow(0 14px 24px rgba(0,0,0,.50)) !important;
}
.navbar.is-dark .nav-links a {
  color: rgba(255,255,255,.96) !important;
}
.navbar.is-dark .nav-links a:hover { color: #fff !important; }
.navbar.is-dark .nav-li--empresa .nav-link {
  color: var(--c-light) !important;
}
.navbar.is-dark .nav-li--empresa .nav-link:hover { color: #fff !important; }
.navbar.is-dark .nav-li--divider {
  background: rgba(255,255,255,.16) !important;
}
.navbar.is-dark .nav-link--toggle {
  color: rgba(255,255,255,.96) !important;
}
.navbar.is-dark .nav-link--toggle:hover,
.navbar.is-dark .nav-li--has-dd:hover .nav-link--toggle,
.navbar.is-dark .nav-li--has-dd.is-open .nav-link--toggle {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
/* Dropdown panel: invertir también */
.navbar.is-dark .nav-dropdown {
  background:
    linear-gradient(180deg, rgba(20,16,42,.96) 0%, rgba(10,7,24,.96) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 14px 36px rgba(0,0,0,.45),
    0 28px 70px rgba(0,0,0,.30) !important;
}
.navbar.is-dark .nav-dd-item {
  color: rgba(255,255,255,.78) !important;
}
.navbar.is-dark .nav-dd-item:hover {
  background: rgba(155,142,240,.18) !important;
  color: #fff !important;
}
/* Btn-nav: mantiene gradient morado (el cual ya destaca en ambos modos),
   pero ajustamos border y sombra para que no compita contra fondo oscuro */
.navbar.is-dark .btn-nav {
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 6px 18px rgba(74,60,174,.42) !important;
}
.navbar.is-dark .btn-nav:hover {
  border-color: rgba(255,255,255,.36) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 8px 22px rgba(107,92,231,.50) !important;
}
.nav-inner::before { display: none !important; }
.nav-glass-sheen, .nav-glass-grain { display: none !important; }

/* ─── BTN-NAV (CTA "Agenda una demo gratis") ──
   Pill morado sólido, sin flecha (más limpio, menos repetitivo vs CTA hero).
   Hover: NO se levanta (está dentro de la pill del navbar — moverse arriba
   queda fuera de lugar). Sombra sutil de una sola capa. El feedback
   tactil viene de un brillo interior + leve compresión horizontal. */
.btn-nav {
  background: linear-gradient(135deg, #4A3CAE 0%, #6B5CE7 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  height: 36px !important;
  padding: 0 20px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: -.005em !important;
  /* Una sola sombra suave — no exagerada */
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 6px 18px rgba(74,60,174,.28) !important;
  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease !important;
  position: relative;
  overflow: hidden;
}
/* Sheen interior animado en hover — el feedback "tactil" es interno,
   no externo. Una banda brillante recorre el pill horizontalmente. */
.btn-nav::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform .9s cubic-bezier(.25, 1, .5, 1);
  pointer-events: none;
}
.btn-nav:hover::before {
  transform: translateX(110%);
}
.btn-nav:hover {
  /* SIN translate — el botón se mantiene en su lugar dentro del navbar */
  border-color: rgba(255,255,255,.32) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 8px 22px rgba(74,60,174,.38) !important;
}
.btn-nav:active {
  transform: scale(.98) !important;
  transition-duration: .15s !important;
}

/* Texto del navbar — blanco translúcido sobre vidrio gris-purpúreo */
.nav-links a {
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 500 !important;
}
.nav-links a:hover { color: #fff !important; }
.nav-li--empresa .nav-link {
  color: var(--c-light) !important;
  font-weight: 600 !important;
}
.nav-li--empresa .nav-link:hover { color: #fff !important; }
.nav-li--divider {
  background: rgba(255,255,255,.20) !important;
}

/* Wordmark "tap in": <span> coloreable vía bg-color.
   SVG inlineado como data URI para funcionar bajo file:// (donde
   mask-image url('../img/...') fallaba por CORS local).
   BLANCO con outline sutil — el blanco sólo no se vería sobre el
   vidrio claro, pero un drop-shadow morado oscuro multidireccional
   crea un contorno legible sin ensuciar la tipografía. */
.nav-wordmark {
  display: inline-block;
  width: 60px;
  height: 22px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 389.87 150.6'><g fill='white'><rect x='262.57' y='35.52' width='29.99' height='80.23'/><path d='M389.87,78.96c0-23.99-19.37-43.44-43.28-43.44-6.68,0-13,1.52-18.64,4.23v-4.23h-29.99v80.23h29.99v-36.73h.08c.75-8.15,7.57-14.52,15.89-14.52s15.13,6.38,15.89,14.52h.08v36.73h29.99v-36.65h0s0-.09,0-.14Z'/><path d='M108.81,35.52v3.81c-5.86-3.29-12.61-5.17-19.79-5.17-22.44,0-40.64,18.26-40.64,40.79s18.19,40.79,40.64,40.79c7.19,0,13.94-1.88,19.79-5.17v5.17h29.84V35.52h-29.84ZM108.8,76.8c-.2,8.74-7.32,15.77-16.07,15.77s-16.08-7.23-16.08-16.14,7.2-16.14,16.08-16.14c8.23,0,15.01,6.21,15.96,14.21h.12v2.31h0Z'/><rect x='262.57' y='0' width='29.99' height='30.11' rx='12.55' ry='12.55'/><path d='M40.67,87.8c-5.84,0-10.58-4.75-10.58-10.62h.03v-12.91h14.7v-30.1h-14.7V14H.14v20.17h-.14v30.1l.02,12.91C.02,99.72,18.22,117.99,40.67,117.99c1.4,0,2.78-.07,4.15-.21v-30.83c-1.27.55-2.67.85-4.15.85Z'/><path d='M193.83,34.17c-7.19,0-13.94,1.88-19.79,5.17v-3.81h-29.84v115.08h29.84v-40.01c5.86,3.29,12.61,5.17,19.79,5.17,22.44,0,40.64-18.26,40.64-40.79s-18.19-40.79-40.64-40.79ZM190.12,92.57c-8.76,0-15.87-7.03-16.07-15.77h0v-2.31h.04v.87c.55-8.42,7.52-15.07,16.04-15.07s16.08,7.23,16.08,16.14-7.2,16.14-16.08,16.14Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.20));
  -webkit-mask-image: none;
          mask-image: none;
  /* Hover: scale fluido con out-expo (deceleración suave) en 600ms.
     La curva (.16, 1, .3, 1) hace que la mitad del recorrido pase
     rápido y la última mitad se asiente con elegancia. */
  transform-origin: center center;
  transition:
    filter .35s ease,
    transform .6s cubic-bezier(.16, 1, .3, 1),
    opacity .25s ease;
}
.nav-logo:hover .nav-wordmark {
  /* IMPORTANTE: el !important sobreescribe la regla legacy de línea 305
     que ponía opacity: .65 en hover (el "apagado" que se veía). */
  opacity: 1 !important;
  transform: scale(1.08);
  filter:
    drop-shadow(0 3px 4px rgba(45,37,96,.40))
    drop-shadow(0 8px 14px rgba(45,37,96,.50))
    drop-shadow(0 14px 24px rgba(45,37,96,.35));
}

/* Soluciones trigger (button) */
.nav-link--toggle {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .96);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .25s ease, background .25s ease;
}
.nav-link--toggle:hover,
.nav-li--has-dd:hover .nav-link--toggle,
.nav-li--has-dd.is-open .nav-link--toggle {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
/* Chevron: en hover hace un BOUNCE vertical en bucle (subtle ±2.5px)
   mientras dura el hover — comunica "click para desplegar".
   Al abrir, rota 180° (indica estado abierto). */
.nav-link--toggle .nav-chev {
  opacity: .55;
  transform-origin: center center;
  transition:
    transform .35s cubic-bezier(.25, 1, .5, 1),
    opacity .25s ease;
}
.nav-link--toggle:hover .nav-chev,
.nav-li--has-dd:hover .nav-chev {
  opacity: 1;
  animation: chevBounce .9s ease-in-out infinite;
}
@keyframes chevBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2.5px); }
}
.nav-li--has-dd.is-open .nav-chev,
.nav-li--has-dd.is-open .nav-link--toggle:hover .nav-chev {
  opacity: 1;
  animation: none !important;             /* corta el bounce cuando está abierto */
  transform: rotate(180deg) !important;
}

/* ─── DROPDOWN · grey-frosted igual al navbar, casi sólido para legibilidad ─── */
.nav-dropdown {
  position: absolute !important;
  top: calc(100% + 18px) !important;
  left: -4px !important;
  right: auto !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100vw - 48px) !important;
  padding: 6px !important;
  /* Truco: misma apariencia translucida que el navbar (mismo color y
     "opacity-feel") PERO con un layer sólido debajo que bloquea lo
     que está detrás. El gradient translúcido va sobre un solid color
     que simula el backdrop del hero — visualmente idéntico, pero los
     mockups detrás ya no se ven. */
  background:
    linear-gradient(180deg, rgba(48,40,82,.65) 0%, rgba(28,20,60,.75) 100%),
    #FAFAFE !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(45,37,96,.18),
    0 10px 30px rgba(45,37,96,.26),
    0 24px 60px rgba(45,37,96,.20) !important;
  /* ESTADO CERRADO — transición de SALIDA (más lenta, suave, sin overshoot) */
  opacity: 0;
  transform: translateY(-14px) scale(.92) !important;
  transform-origin: top left;
  transition:
    opacity .4s cubic-bezier(.55, 0, .85, .15),
    transform .5s cubic-bezier(.55, 0, .85, .15) !important;
}
/* CRUCIAL: el dropdown YA NO se abre por hover. Sólo por click (.is-open).
   Sobrescribe la regla legacy que lo abría con :hover. */
.nav-li--has-dd:hover .nav-dropdown,
.nav-li--has-dd:focus-within .nav-dropdown {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) scale(.97) !important;
}
/* ESTADO ABIERTO — transición de ENTRADA (más lenta, overshoot fluido) */
.nav-li--has-dd.is-open .nav-dropdown {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.34, 1.56, .64, 1) !important;
}

/* Items: misma tipografía que los links del navbar (11.5px / 500), texto oscuro.
   IMPORTANTE: padding total fijo en 28 (14+14). En hover, padding-left sube
   a 18 pero padding-right baja a 10 → el text-shift se ve, pero la box NO
   cambia de tamaño. */
.nav-dd-item {
  display: block !important;
  padding: 7px 20px 7px 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  white-space: nowrap;
  position: relative;
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity .3s cubic-bezier(.55, 0, .85, .15),
    translate .4s cubic-bezier(.55, 0, .85, .15),
    background .35s ease,
    color .35s ease,
    padding-left .5s cubic-bezier(.25, 1, .5, 1),
    padding-right .5s cubic-bezier(.25, 1, .5, 1) !important;
}
.nav-dd-item:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  padding-left: 18px !important;
  padding-right: 16px !important;
}
/* DESPLIEGUE: items entran con stagger en cascada cuando se abre. */
.nav-li--has-dd.is-open .nav-dd-item {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    translate .7s cubic-bezier(.22, 1, .36, 1),
    background .35s ease,
    color .35s ease,
    padding-left .5s cubic-bezier(.25, 1, .5, 1),
    padding-right .5s cubic-bezier(.25, 1, .5, 1) !important;
}
.nav-li--has-dd.is-open .nav-dd-item:nth-child(1) { transition-delay: .10s, .10s, 0s, 0s, 0s, 0s; }
.nav-li--has-dd.is-open .nav-dd-item:nth-child(2) { transition-delay: .18s, .18s, 0s, 0s, 0s, 0s; }
.nav-li--has-dd.is-open .nav-dd-item:nth-child(3) { transition-delay: .26s, .26s, 0s, 0s, 0s, 0s; }
.nav-li--has-dd.is-open .nav-dd-item:nth-child(4) { transition-delay: .34s, .34s, 0s, 0s, 0s, 0s; }
.nav-li--has-dd.is-open .nav-dd-item:nth-child(5) { transition-delay: .42s, .42s, 0s, 0s, 0s, 0s; }

/* ─── HERO CTA · hover (movimiento Ver proyectos + arrow anim) ──
   Mantengo: translate -8px + sombra extendida + curva .6s cubic-bezier(.25,1,.5,1).
   Reemplazo "iluminación de gradient" por animación del arrow:
   el icono recorre la pill con una transición tipo "marquee" —
   sale por la derecha y entra desde la izquierda (efecto in-out).
   El gradient base no cambia: el botón mantiene su identidad cromática. */
.hero-light-cta {
  margin-bottom: 56px !important;
  will-change: transform, box-shadow;
  transition:
    transform .6s cubic-bezier(.25, 1, .5, 1),
    box-shadow .6s ease !important;
}
.hero-light-cta::before { display: none !important; content: none !important; }
.hero-light-cta:hover::before { display: none !important; }
.hero-light-cta:hover {
  transform: translateY(-8px) !important;
  /* MISMA gradient base — no cambia el color */
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 18px 42px rgba(74,60,174,.45),
    0 32px 64px rgba(45,37,96,.28) !important;
}
.hero-light-cta:active {
  transform: translateY(-3px) !important;
  transition-duration: .2s !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px rgba(74,60,174,.32) !important;
}

/* Arrow del CTA: shift hacia la derecha con leve scale-up.
   Curva con overshoot (.34, 1.56, .64, 1) — la flecha "salta"
   hacia adelante y se asienta. Sin marquee. */
.hl-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transition:
    transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.hl-cta-arrow svg {
  display: block;
  width: 14px;
  height: 14px;
}
.hero-light-cta:hover .hl-cta-arrow {
  transform: translateX(5px) scale(1.12);
}

/* ─── HERO MOD PILLS · misma curva, lift escalado a jerarquía (-5px) ── */
.hero-mod-pill {
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  transition:
    transform .6s cubic-bezier(.25, 1, .5, 1),
    box-shadow .6s ease,
    border-color .6s ease,
    background .6s ease !important;
}
.hero-mod-pill::before { display: none !important; }
.hero-mod-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 100% at 50% 130%,
    rgba(107,92,231,.28),
    rgba(155,142,240,.08) 50%,
    transparent 75%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.hero-mod-pill > * { position: relative; z-index: 1; }
.hero-mod-pill:hover {
  /* Jerarquía secundaria: lift más corto que el CTA primario */
  transform: translateY(-5px) !important;
  background: #fff !important;
  border-color: rgba(155,142,240,.5) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 30px rgba(74,60,174,.20),
    0 4px 10px rgba(74,60,174,.10) !important;
}
.hero-mod-pill:hover::after { opacity: 1; }
.hero-mod-pill .hero-mod-icon {
  transition:
    transform .6s cubic-bezier(.25, 1, .5, 1),
    box-shadow .6s ease,
    background .6s ease !important;
}
.hero-mod-pill:hover .hero-mod-icon {
  transform: scale(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 6px 14px rgba(74,60,174,.38) !important;
}
.hero-mod-pill span:not(.hero-mod-icon) {
  transition: color .6s ease;
}
.hero-mod-pill:hover span:not(.hero-mod-icon) {
  color: var(--c-main);
}
.hero-mod-pill:active {
  transform: translateY(-2px) !important;
  transition-duration: .2s !important;
}

/* ─── HERO TITLE · pesos mixtos, sin punto, más chico ── */
.hero-light-title {
  font-size: clamp(34px, 4.6vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.022em !important;
  margin-bottom: 22px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .04em;
}
/* Padding-bottom mínimo para que los descenders ('g' de "gestión") no se
   recorten con background-clip: text. */
.hlt-line--2 { padding-bottom: .08em; }
.hlt-line {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .22em;
}
.hlt-line--2 {
  /* La línea acentuada toma gradient — sobreescribe el viejo .hero-light-accent */
  background: linear-gradient(135deg, var(--c-mid) 0%, var(--c-light) 45%, #C0A4FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hlt-word {
  display: inline-block;
}
.hlt-w-soft { font-weight: 300; }
.hlt-w-mid  { font-weight: 500; }
.hlt-w-em   { font-style: italic; font-weight: 500; letter-spacing: -.025em; }
.hlt-w-bold { font-weight: 800; }

/* ─── HERO SUB · copy más respirado, sin punto ──── */
.hero-light-sub {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.65 !important;
  color: var(--c-muted) !important;
  max-width: 580px !important;
  margin: 0 auto 30px !important;
  font-weight: 400 !important;
}
.hero-light-sub strong {
  color: var(--c-text);
  font-weight: 600;
}

/* ─── HERO MOCKUPS · CONFIGURACIÓN CANÓNICA ÚNICA ──
   ⚠️  Si vas a tocar tamaño/posición de los mockups, hazlo SOLO acá.
   Todas las reglas viejas en este archivo fueron consolidadas en este
   bloque para evitar conflictos de cascada que generaban valores
   inconsistentes según orden de carga del CSS.
   - Tamaño: --mockScale (TL un poco más grande por ser el ancla)
   - Posición: max(min, calc(50% - X)) para que sigan al texto central
     en cualquier viewport (no se alejan en pantallas anchas) */

/* Tamaños visuales finales (con --mockScale aplicado a los anchos base
   aumentados abajo): TL ~333px, TR ~190px, BL ~190px, BR ~342px.
   Como los anchos base son mayores que el target visual, todos los scale
   son ≤ 1.0 → el navegador rasteriza a la resolución nativa más alta y
   downscalea = significativamente más nítido que upscalear. */
.hero-mock--tl {
  top: 128px !important;
  left: max(64px, calc(50% - 660px)) !important;
  --rot: -5deg !important; --rotY: 10deg !important; --rotX: 2deg !important;
  --mockScale: 0.96 !important;
  transform: perspective(2400px) rotateY(10deg) rotateX(2deg) rotate(-5deg) scale(0.96);
}
.hero-mock--tr {
  top: 110px !important;
  right: max(92px, calc(50% - 652px)) !important;
  --rot: 5deg !important; --rotY: -13deg !important; --rotX: 4deg !important;
  --mockScale: 0.82 !important;
  transform: perspective(2400px) rotateY(-13deg) rotateX(4deg) rotate(5deg) scale(0.82);
}
.hero-mock--bl {
  top: 342px !important; bottom: auto !important;
  left: max(126px, calc(50% - 646px)) !important;
  --rot: 6deg !important; --rotY: 7deg !important; --rotX: -1deg !important;
  --mockScale: 0.83 !important;
  transform: perspective(2400px) rotateY(7deg) rotateX(-1deg) rotate(6deg) scale(0.83);
}
.hero-mock--br {
  top: 416px !important; bottom: auto !important;
  right: max(13px, calc(50% - 731px)) !important;
  --rot: -3deg !important; --rotY: -7deg !important; --rotX: -1deg !important;
  --mockScale: 0.84 !important;
  transform: perspective(2400px) rotateY(-7deg) rotateX(-1deg) rotate(-3deg) scale(0.84);
}

/* ─── SHARPNESS · GPU compositing + perspective amplio + micro-contrast ──
   Estrategia anti-blur (sin alterar geometría):
   - perspective(2400px) reduce el foreshortening del rotateY → menos
     distorsión por sampling de la capa GPU
   - filter: contrast(1.03) saturate(1.02) recupera el "punch" de
     bordes que las transformaciones 3D suavizan, sin tocar colores
   - will-change + backface-visibility + isolation fuerzan layer GPU
     dedicada con compositing fino
   - font-smoothing antialiased es seguro sobre fondos translúcidos */
.hero-mock {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  isolation: isolate;
  filter: contrast(1.03) saturate(1.02);
}
.hero-mock,
.hero-mock * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Phone bodies (Ligas TR + CPA BL): ratio 9:16 estilo iPhone.
   Width del phone = 200px → height target = 200 * 16/9 ≈ 356px.
   Sin notch (eliminado del HTML) el body ocupa toda la altura del phone. */
.hero-mock--tr .mock-phone-body,
.hero-mock--bl .mock-phone-body {
  min-height: 356px !important;
  display: flex;
  flex-direction: column;
}

/* Gestión window (BR) — ensanchado para dar más respiro horizontal
   al panel operativo (KPIs + semáforo de contratos). */
.hero-mock--br .mock-window { width: 360px !important; }

/* BL phone — sombra reforzada para que el solapamiento sobre el TL
   Casino se lea como "el CPA está flotando encima", igual que la
   sombra entre TR y BR. Capas: drop ambiental + drop direccional
   hacia arriba-derecha (la dirección del solapamiento). */
.hero-mock--bl .mock-phone {
  box-shadow:
    0 28px 56px rgba(74,60,174,.28),
    0 -10px 28px rgba(74,60,174,.18),
    0 16px 40px rgba(74,60,174,.18) !important;
}

/* TL window (Casino, top-left) — sombra ambient profunda hacia abajo-derecha.
   No tiene mockup encima, así que no necesita la capa direccional invertida. */
.hero-mock--tl .mock-window {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(155,142,240,0.18),
    0 30px 60px rgba(74,60,174,.28),
    0 18px 42px rgba(74,60,174,.18),
    0 6px 16px rgba(74,60,174,.12) !important;
}

/* TR phone (Ligas, top-right) — solo drop shadow ambient, sin el anillo
   morado oscuro. El usuario lo prefiere "liviano" como el resto. */
.hero-mock--tr .mock-phone {
  box-shadow:
    0 30px 60px rgba(74,60,174,.28),
    0 18px 42px rgba(74,60,174,.18),
    0 6px 16px rgba(74,60,174,.12) !important;
}

/* BR window — mismo tratamiento: sombra direccional hacia arriba
   (`0 -10px 28px`) para vender que el panel de Gestión flota POR
   ENCIMA del phone de Ligas en el overlap, leyendo "BR adelante,
   TR atrás" en vez de dos rectángulos pisándose plano. */
.hero-mock--br .mock-window {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(155,142,240,0.18),
    0 28px 56px rgba(74,60,174,.26),
    0 -10px 28px rgba(74,60,174,.18),
    0 16px 40px rgba(74,60,174,.16) !important;
}

/* ─── GESTIÓN · semáforo de KPIs (verde / naranjo / rojo) ───
   Cada stat recibe un acento de color a la izquierda + el número
   pintado del estado correspondiente, comunicando salud operativa
   del directorio de proveedores en una sola lectura. */
.mock-gest-stat--ok,
.mock-gest-stat--warn,
.mock-gest-stat--crit {
  position: relative;
  padding-left: 0;
}
/* Dot movido a esquina superior-derecha de cada pill (era a la izquierda). */
.mock-gest-stat--ok::before,
.mock-gest-stat--warn::before,
.mock-gest-stat--crit::before {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.mock-gest-stat--ok::before   { background: #28C840; box-shadow: 0 0 8px rgba(40,200,64,.65); }
.mock-gest-stat--warn::before { background: #F5A623; box-shadow: 0 0 8px rgba(245,166,35,.65); }
.mock-gest-stat--crit::before { background: #E5484D; box-shadow: 0 0 8px rgba(229,72,77,.65); }
.mock-gest-stat--ok   .mock-gest-stat-val { color: #2E8B47; }
.mock-gest-stat--warn .mock-gest-stat-val { color: #C77A14; }
.mock-gest-stat--crit .mock-gest-stat-val { color: #C53A3F; }

/* Pill superior: pequeño punto en vez de la flechita "+12%" */
.mock-gest-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 6px rgba(40,200,64,.6);
  display: inline-block;
}

/* ─── Semáforo de contratos · lista (reemplaza el bar chart) ─── */
.mock-gest-chart-legend--live i {
  background: #28C840;
  box-shadow: 0 0 6px rgba(40,200,64,.6);
  animation: mockLivePulseSlow 3.2s ease-in-out infinite;
}
.mock-gest-contracts {
  /* Fondo neutro y aire — la lectura es información, no gráfico */
  padding: 9px 10px 9px;
}
.mock-gest-contract-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mock-gest-contract {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.18);
  border-radius: 7px;
  font-size: 10px;
}
.mock-gest-contract-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  justify-self: center;
}
.mock-gest-contract-name {
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -.005em;
}
.mock-gest-contract-state {
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.mock-gest-contract--ok   .mock-gest-contract-dot   { background: #28C840; box-shadow: 0 0 5px rgba(40,200,64,.55); }
.mock-gest-contract--warn .mock-gest-contract-dot   { background: #F5A623; box-shadow: 0 0 5px rgba(245,166,35,.55); }
.mock-gest-contract--crit .mock-gest-contract-dot   { background: #E5484D; box-shadow: 0 0 5px rgba(229,72,77,.55); }
.mock-gest-contract--ok   .mock-gest-contract-state { color: #2E8B47; background: rgba(40,200,64,.10); }
.mock-gest-contract--warn .mock-gest-contract-state { color: #C77A14; background: rgba(245,166,35,.12); }
.mock-gest-contract--crit .mock-gest-contract-state { color: #C53A3F; background: rgba(229,72,77,.12); }
.hero-mock--tr .mock-app-cta,
.hero-mock--bl .mock-app-cta {
  margin-top: auto !important;
}
/* Tamaños/posiciones canónicos: bloque consolidado arriba (.hero-mock--tl/tr/bl/br).
   No se redefine nada aquí para evitar conflictos de cascada. */

/* Float: amplitud reducida (±5px en vez de ±10) y scale incluido
   para que cada mockup mantenga su tamaño relativo. */
.hero-mock { animation: heroMockFloat 14s ease-in-out infinite; }
@keyframes heroMockFloat {
  0%   { transform: perspective(2400px) rotateY(var(--rotY, 0deg)) rotateX(var(--rotX, 0deg)) rotate(var(--rot, 0deg)) scale(var(--mockScale, 1)) translate(0, 0); }
  25%  { transform: perspective(2400px) rotateY(var(--rotY, 0deg)) rotateX(var(--rotX, 0deg)) rotate(calc(var(--rot, 0deg) + .25deg)) scale(var(--mockScale, 1)) translate(1px, -3.5px); }
  50%  { transform: perspective(2400px) rotateY(var(--rotY, 0deg)) rotateX(var(--rotX, 0deg)) rotate(var(--rot, 0deg)) scale(var(--mockScale, 1)) translate(0, -5px); }
  75%  { transform: perspective(2400px) rotateY(var(--rotY, 0deg)) rotateX(var(--rotX, 0deg)) rotate(calc(var(--rot, 0deg) - .25deg)) scale(var(--mockScale, 1)) translate(-1px, -2.5px); }
  100% { transform: perspective(2400px) rotateY(var(--rotY, 0deg)) rotateX(var(--rotX, 0deg)) rotate(var(--rot, 0deg)) scale(var(--mockScale, 1)) translate(0, 0); }
}

/* Slow live-pulse — único loop infinito permitido (señal real de "live") */
.mock-live-dot { animation-duration: 3.2s !important; }
@keyframes mockLivePulseSlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
.mock-live-dot { animation-name: mockLivePulseSlow !important; }

/* Counter flash REMOVIDO — el flash periódico parecía error de UI */
#mockCasCounter { animation: none !important; }

/* Flash sutil cuando un valor se actualiza (JS añade .mock-tick momentáneamente).
   Duración más larga + curva muy suave: el cambio ya no se siente abrupto,
   se siente "vivo". */
.mock-tick {
  animation: mockTickFlash 1.4s cubic-bezier(.25,.1,.25,1);
}
@keyframes mockTickFlash {
  0%   { transform: translateY(-1.5px); opacity: .65; }
  35%  { transform: translateY(0);      opacity: .9;  }
  100% { transform: translateY(0);      opacity: 1;   }
}

/* ─── CASINO mockup · curva de demanda ──────── */
.mock-kpi-num i {
  font-size: .65em;
  font-weight: 600;
  margin-left: 1px;
  opacity: .8;
}
.mock-cas-chart {
  margin: 6px 0 10px;
  padding: 8px 10px 6px;
  background: linear-gradient(180deg, #FAF9FE, #F5F3FC);
  border: 1px solid rgba(155,142,240,.16);
  border-radius: 10px;
}
.mock-cas-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.mock-cas-peak {
  color: var(--c-main);
  background: rgba(107,92,231,.12);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 8px;
}
.mock-cas-svg {
  display: block;
  width: 100%;
  height: 44px;
}
.mock-cas-svg-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 8s ease-out infinite;
}
@keyframes drawLine {
  0%   { stroke-dashoffset: 300; }
  35%, 100% { stroke-dashoffset: 0; }
}
.mock-cas-svg-dot {
  opacity: 0;
  animation: dotFade 8s ease-out infinite;
}
.mock-cas-svg-halo {
  transform-origin: 80px 4px;
  opacity: 0;
  animation: haloPulse 8s ease-in-out infinite;
}
@keyframes dotFade {
  0%, 30% { opacity: 0; }
  45%, 100% { opacity: 1; }
}
@keyframes haloPulse {
  0%, 40% { opacity: 0; transform: scale(.6); }
  55% { opacity: .6; transform: scale(1.6); }
  80%, 100% { opacity: 0; transform: scale(2.4); }
}
.mock-cas-axis {
  display: flex;
  justify-content: space-between;
  font-size: 7.5px;
  color: var(--c-muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: .04em;
}
.mock-cas-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-cas-last {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(155,142,240,.10);
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-6px);
  animation: lastInOnce 1.8s cubic-bezier(.22,.61,.36,1) 2.8s forwards;
}
/* Slot inferior: visualmente "viejo" — opacidad reducida, fondo neutro. */
.mock-cas-last--prev {
  background: rgba(155,142,240,.05);
  border-color: rgba(155,142,240,.14);
  animation-delay: 3.0s;
}
.mock-cas-last--prev .mock-feed-time { color: var(--c-muted); }
/* Entrada más fluida: pequeño escalado + travel suave. Easing tipo "ease-out-quint"
   modificado para que llegue al estado final sin "tirón". */
@keyframes lastInOnce {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.985); }
  50%  { opacity: .85; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mock-feed-time--live { animation-duration: 2.8s !important; }

/* ─── GESTIÓN mockup · TR nuevo ─────────────── */
.mock-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.mock-trend--up {
  color: #4D8E5F;
  background: rgba(40,200,64,.12);
}
.mock-gest-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.mock-gest-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #fff, #FAF9FE);
  border: 1px solid rgba(155,142,240,.14);
  border-radius: 8px;
}
.mock-gest-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mock-gest-stat-val i { font-size: .65em; font-weight: 600; margin-left: 1px; }
.mock-gest-stat-lab {
  font-size: 8px;
  color: var(--c-muted);
  text-transform: lowercase;
  font-weight: 500;
}
.mock-gest-chart {
  position: relative;
  padding: 9px 10px 8px;
  background: linear-gradient(180deg, #FAF9FE, #F5F3FC);
  border: 1px solid rgba(155,142,240,.16);
  border-radius: 10px;
}
.mock-gest-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.mock-gest-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-main);
}
.mock-gest-chart-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-main);
  display: inline-block;
}
.mock-gest-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: end;
  height: 46px;
  position: relative;
  z-index: 1;
}
.mock-gest-bar {
  position: relative;
  height: var(--bh, 60%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(155,142,240,.55), rgba(155,142,240,.18));
  border: 1px solid rgba(155,142,240,.32);
  border-bottom: none;
  transform-origin: bottom;
  transform: scaleY(.05);
  opacity: 0;
  animation: gestBarGrowOnce .9s cubic-bezier(.22,1,.36,1) forwards;
}
.mock-gest-bar:nth-child(1) { animation-delay: 2.9s; }
.mock-gest-bar:nth-child(2) { animation-delay: 3.0s; }
.mock-gest-bar:nth-child(3) { animation-delay: 3.1s; }
.mock-gest-bar:nth-child(4) { animation-delay: 3.2s; }
.mock-gest-bar:nth-child(5) { animation-delay: 3.3s; }
.mock-gest-bar--peak {
  background: linear-gradient(180deg, var(--c-mid), var(--c-main));
  border-color: var(--c-mid);
}
.mock-gest-bar-day {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7.5px;
  color: var(--c-muted);
  font-weight: 600;
}
@keyframes gestBarGrowOnce {
  to { transform: scaleY(1); opacity: 1; }
}
.mock-gest-spark {
  position: absolute;
  inset: 25px 10px 14px;
  width: calc(100% - 20px);
  pointer-events: none;
  z-index: 2;
}
.mock-gest-sparkline {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 10s ease-out infinite;
}
.mock-gest-spark-dot {
  opacity: 0;
  animation: dotFade 10s ease-out infinite;
}

/* ─── LIGAS mockup · BL mejorado ─────────────── */
.mock-ligas-stat {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(155,142,240,.14), rgba(155,142,240,.05));
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 10px;
  margin-bottom: 8px;
}
.mock-ligas-ring {
  position: relative;
  width: 44px;
  height: 44px;
}
.mock-ligas-ring svg { width: 100%; height: 100%; }
.mock-ligas-ring-fill {
  stroke-dasharray: 91;
  stroke-dashoffset: 91;
  animation: ringDrawOnce 1.4s cubic-bezier(.22,1,.36,1) 3.4s forwards;
}
@keyframes ringDrawOnce {
  to { stroke-dashoffset: 18; }
}
.mock-ligas-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.02em;
}
.mock-ligas-ring-val i { font-size: .7em; font-weight: 600; }
.mock-ligas-stat-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mock-ligas-stat-meta strong {
  font-size: 12px;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -.01em;
}
.mock-ligas-stat-meta span {
  font-size: 9px;
  color: var(--c-muted);
}
.mock-ligas-row {
  grid-template-columns: 22px 1fr auto !important;
  padding: 6px 8px !important;
}
.mock-ligas-name {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.mock-avatar-mini--a { background: linear-gradient(135deg, #F4A8C0, #E97FA1); }
.mock-avatar-mini--b { background: linear-gradient(135deg, #9DD2C5, #5FB29D); }
.mock-avatar-mini--c { background: linear-gradient(135deg, #F5C77F, #E0A04E); }
.mock-avatar-mini--d { background: linear-gradient(135deg, #9B8EF0, #6B5CE7); }
.mock-avatar-mini--e { background: linear-gradient(135deg, #B6C6E8, #7B96C9); }

/* Íconos de evento en planilla en vivo — círculo morado brand. El glyph
   (pelota / tarjeta) ocupa el centro. Reemplaza el emoji que se veía off-brand. */
.mock-event-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.mock-event-icon svg { width: 13px; height: 13px; }
.mock-event-icon--goal {
  background: linear-gradient(135deg, #9B8EF0, #6B5CE7);
  box-shadow: 0 2px 6px rgba(107,92,231,.35);
}
.mock-event-icon--yellow {
  background: linear-gradient(135deg, #6B5CE7, #4A3CAE);
  box-shadow: 0 2px 6px rgba(74,60,174,.35);
}
.mock-event-icon--red {
  background: linear-gradient(135deg, #6B5CE7, #4A3CAE);
  box-shadow: 0 2px 6px rgba(74,60,174,.35);
}
/* Tarjeta amarilla/roja: rectángulo semánticamente coloreado dentro de la
   burbuja morada. Mantiene la lectura "amonestación / expulsión" sin
   romper la paleta. */
.mock-event-card {
  width: 8px;
  height: 11px;
  border-radius: 1.5px;
  display: block;
}
.mock-event-card--yellow { background: #F5C141; box-shadow: 0 0 4px rgba(245,193,65,.5); }
.mock-event-card--red    { background: #E5484D; box-shadow: 0 0 4px rgba(229,72,77,.5); }
.mock-tag-pending {
  font-size: 8px;
  color: var(--c-muted);
  background: rgba(155,142,240,.12);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
/* Texto del tag vive en ::after — animable vía content keyframes */
.mock-tag-pending::after {
  content: "…";
  display: inline-block;
}
.mock-tag-pending--anim {
  animation: tagSwapColor 1s ease-in-out 4.6s forwards;
}
.mock-tag-pending--anim::after {
  animation: tagSwapText 1s steps(1, end) 4.6s forwards;
}
@keyframes tagSwapColor {
  0%   { color: var(--c-muted); background: rgba(155,142,240,.12); }
  100% { color: #4D8E5F; background: rgba(40,200,64,.18); }
}
@keyframes tagSwapText {
  0%   { content: "…"; }
  100% { content: "aquí"; }
}
.mock-tag-out {
  font-size: 8px;
  color: var(--c-muted);
  background: rgba(0,0,0,.04);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
/* CTA pulse slower */
.mock-app-cta--anim { animation-duration: 9s !important; }

/* ─── CPA mobile · BR nuevo ──────────────────── */
.mock-app-header--cpa { padding-bottom: 8px; }
.mock-cpa-hero {
  /* 2da pasada 20/05/2026: padding reducido ~25% para liberar vertical
     en el celular 200x356 — el feed de 2 items necesita aire abajo */
  padding: 7px 9px 6px;
  background: linear-gradient(135deg, rgba(155,142,240,.18), rgba(107,92,231,.06));
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 12px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
.mock-cpa-hero-lab {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mid);
  margin-bottom: 3px;
}
.mock-cpa-hero-amt {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.mock-cpa-hero-goal {
  display: block;
  font-size: 9px;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.mock-cpa-hero-goal em {
  color: var(--c-text);
  font-weight: 600;
  font-style: normal;
}
/* Progress bar simple (reemplaza el chart de área SVG) */
.mock-cpa-progress {
  margin-top: 6px;
  height: 6px;
  background: rgba(155,142,240,.14);
  border-radius: 999px;
  overflow: hidden;
}
.mock-cpa-progress-fill {
  height: 100%;
  width: var(--pct, 50%);
  background: linear-gradient(90deg, #6B5CE7, #9B8EF0);
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0);
  animation: cpaProgressFill 1.6s cubic-bezier(.22,1,.36,1) 3.5s forwards;
}
@keyframes cpaProgressFill {
  to { transform: scaleX(1); }
}
.mock-cpa-mvts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mock-cpa-mvt {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.14);
  border-radius: 7px;
}
/* Step 1 (pendiente) — tinte ámbar para señalizar "espera aprobación". */
.mock-cpa-mvt--in {
  background: rgba(255,168,80,.07);
  border-color: rgba(255,168,80,.28);
  opacity: 0;
  transform: translateY(-6px);
  animation: lastInOnce 1.8s cubic-bezier(.22,.61,.36,1) 3.6s forwards;
}
.mock-cpa-mvt--in .mock-cpa-mvt-icon {
  background: rgba(255,168,80,.22);
  color: #C97A22;
}
.mock-cpa-mvt--in .mock-cpa-mvt-amt {
  color: var(--c-text);
}
/* Step 2 (aprobado/pagado) — tinte verde + check. PDF p.6 Problema 2. */
.mock-cpa-mvt--approved {
  background: rgba(40,200,64,.06);
  border-color: rgba(40,200,64,.22);
}
.mock-cpa-mvt--approved .mock-cpa-mvt-icon--alt {
  background: rgba(40,200,64,.22);
  color: #2E7B4A;
}
.mock-cpa-mvt-amt--ok {
  color: #2E7B4A !important;
  font-size: 13px;
}
.mock-cpa-mvt-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(40,200,64,.18);
  color: #4D8E5F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.mock-cpa-mvt-icon--alt {
  background: rgba(155,142,240,.18);
  color: var(--c-main);
}
.mock-cpa-mvt-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mock-cpa-mvt-meta strong {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text);
}
.mock-cpa-mvt-meta span {
  font-size: 8px;
  color: var(--c-muted);
}
.mock-cpa-mvt-amt {
  font-size: 10px;
  font-weight: 800;
  color: #4D8E5F;
  font-variant-numeric: tabular-nums;
}

/* HUÉRFANO POST-REFACTOR — revisar si eliminar.
   .mock-cpa-mvts / .mock-cpa-mvt y variantes: el flujo de aprobación
   3 pasos del mockup BL del hero fue reemplazado por .mock-cpa-feed
   (Diego 19/05/2026). Se conservan por si se reutilizan en otra vista. */

/* ─── Feed de pagos del bingo (mockup BL del hero) ────────────
   Reemplaza el flujo de aprobación. Cada item es un pago entrante;
   el primer item de la lista (--new) tiene highlight visual sutil. */
.mock-cpa-feed {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.mock-cpa-feed-item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.14);
  border-radius: 7px;
  transition: background .35s ease, border-color .35s ease, opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.mock-cpa-feed-item--leaving {
  opacity: 0;
  transform: translateY(6px);
}
.mock-cpa-feed-item--new {
  background: rgba(155,142,240,.10);
  border-color: rgba(107,92,231,.32);
  animation: cpaFeedPulse 2.4s ease-out 1;
}
@keyframes cpaFeedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,92,231,.28); }
  60%  { box-shadow: 0 0 0 6px rgba(107,92,231,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,92,231,0); }
}
.mock-cpa-feed-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9B8EF0, #6B5CE7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.mock-cpa-feed-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mock-cpa-feed-meta strong {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-cpa-feed-meta span {
  font-size: 8px;
  color: var(--c-muted);
}
.mock-cpa-feed-amt {
  font-size: 10px;
  font-weight: 800;
  color: #2E7B4A;
  font-variant-numeric: tabular-nums;
}
.mock-cpa-feed-time {
  font-size: 8px;
  color: var(--c-muted);
  white-space: nowrap;
}
/* HUÉRFANO 2DA PASADA — revisar si eliminar.
   .mock-cpa-feed-pending y .mock-cpa-feed-pending-dot removidos del HTML
   (Agustín 20/05/2026): no entraban en el celular 200x356 sin estirarlo. */
.mock-cpa-feed-pending {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 9px;
  color: #C97A22;
  background: rgba(255,168,80,.10);
  border: 1px dashed rgba(255,168,80,.32);
  border-radius: 6px;
}
.mock-cpa-feed-pending-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C97A22;
  animation: cpaPendingPulse 1.6s ease-in-out infinite;
}
@keyframes cpaPendingPulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ─── HERO PILLS (módulos) · iconos ya outline ─── */
.hero-mod-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}
.hero-mod-icon svg { stroke: #fff; }

/* ─── ENTRANCE ANIMATIONS · staggered ────────────
   IMPORTANTE: usamos las propiedades INDIVIDUALES translate/scale
   (no la shorthand transform) en los keyframes. Esto evita que el
   fill-state de la animación bloquee el `transform` que usamos en
   los hovers. Translate/scale individuales se componen con
   transform, en vez de competir por la misma propiedad. */
.hero-loading [data-anim="hl-title"] .hlt-line {
  opacity: 0;
  translate: 0 22px;
  animation: hlLineIn 1s cubic-bezier(.22,1,.36,1) both;
}
.hero-loading [data-anim="hl-title"] .hlt-line--1 { animation-delay: .25s; }
.hero-loading [data-anim="hl-title"] .hlt-line--2 { animation-delay: .55s; }
@keyframes hlLineIn {
  to { opacity: 1; translate: 0 0; }
}

.hero-loading [data-anim="hl-sub"] {
  opacity: 0;
  translate: 0 14px;
  animation: hlElIn .85s cubic-bezier(.22,1,.36,1) .85s both;
}
.hero-loading [data-anim="hl-cta"] {
  opacity: 0;
  translate: 0 12px;
  scale: .96;
  animation: hlCtaIn .85s cubic-bezier(.22,1,.36,1) 1.05s both;
}
.hero-loading [data-anim="hl-trust"] {
  opacity: 0;
  translate: 0 8px;
  animation: hlElIn .7s cubic-bezier(.22,1,.36,1) 1.45s both;
}
.hero-loading [data-anim="hl-pills"] .hero-mod-pill {
  opacity: 0;
  translate: 0 14px;
  animation: hlElIn .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(1.6s + var(--hp-delay, 0ms));
}
@keyframes hlElIn {
  to { opacity: 1; translate: 0 0; }
}
@keyframes hlCtaIn {
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Mockups: slide-in + float corren EN PARALELO sin conflictos.
   Truco: slide anima la propiedad INDIVIDUAL `translate`, mientras
   que el float anima `transform`. Como son propiedades distintas
   en el sistema de transforms, se componen sin pelearse.
   Esto evita el "settle" visible al cambiar listas de animación. */
/* Slide-in en pares diagonales: TL+BR primero (eje \), luego TR+BL (eje /).
   El ojo sigue una diagonal a la vez en lugar de saltar entre 4 cuadrantes. */
.hero-mock--tl {
  animation:
    mockSlideL 1.8s cubic-bezier(.16, 1, .3, 1) .60s both,
    heroMockFloat 14s ease-in-out infinite;
}
.hero-mock--br {
  animation:
    mockSlideR 1.8s cubic-bezier(.16, 1, .3, 1) .65s both,
    heroMockFloat 17s ease-in-out infinite;
}
.hero-mock--tr {
  animation:
    mockSlideR 1.8s cubic-bezier(.16, 1, .3, 1) 1.20s both,
    heroMockFloat 16s ease-in-out infinite;
}
.hero-mock--bl {
  animation:
    mockSlideL 1.8s cubic-bezier(.16, 1, .3, 1) 1.25s both,
    heroMockFloat 15s ease-in-out infinite;
}
/* Slide-in usa `translate` (NO transform) para no chocar con el float. */
@keyframes mockSlideL {
  0%   { opacity: 0; translate: -90vw 0; }
  25%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes mockSlideR {
  0%   { opacity: 0; translate: 90vw 0; }
  25%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}

/* La línea 2 ya es gradient via .hlt-line--2 — el span también tiene la clase
   legacy .hero-light-accent. Necesitamos que el background del padre aplique
   a las palabras hijas (color: transparent en hijos para que se vea el gradient). */
.hero-light-title .hlt-line--2 .hlt-word {
  color: inherit;
  -webkit-text-fill-color: transparent;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-mock,
  .hero-loading .hero-mock,
  .nav-glass-sheen,
  .mock-live-dot,
  .mock-cas-svg-line,
  .mock-cas-svg-dot,
  .mock-cas-svg-halo,
  .mock-cpa-area-line,
  .mock-cpa-area-dot,
  .mock-gest-bar,
  .mock-gest-sparkline,
  .mock-gest-spark-dot,
  .mock-ligas-ring-fill,
  .mock-cpa-mvt--in,
  .mock-cas-last,
  .mock-app-cta--anim,
  .hero-loading .hlt-line,
  .hero-loading [data-anim="hl-sub"],
  .hero-loading [data-anim="hl-cta"],
  .hero-loading [data-anim="hl-pills"] .hero-mod-pill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive · hero móvil */
@media (max-width: 980px) {
  .nav-dropdown { min-width: 90vw !important; left: 50% !important; }
  .nav-dd-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE · HERO MOCKUPS · ajuste por viewport
   ──────────────────────────────────────────────────────────────────
   Estado canónico (mockups en las 4 esquinas) está calibrado para
   pantallas ≥ 1500px (typical: 1920, 1600). Debajo de ese ancho, el
   título y las pills del centro empiezan a colisionar con los mockups.
   Estrategia:
   - ≥ 1500: no se toca (estado pixel-perfect del usuario).
   - 1280-1499: shrink ~20% + ligero pull hacia el borde → recupera gaps.
   - < 1280: ocultar los 4 mockups, hero queda "center-only" con padding.
   - < 820: ya manejado por breakpoint mobile existente (línea 10832).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1499px) and (min-width: 1280px) {
  /* Scale agresivo + transform completa con !important para ganar al
     bloque polish (que también usa !important). El var --mockScale se
     actualiza para que la animación heroMockFloat interpole correctamente. */
  .hero-mock--tl {
    --mockScale: 0.78 !important;
    transform: perspective(2400px) rotateY(10deg) rotateX(2deg) rotate(-5deg) scale(0.78) !important;
  }
  .hero-mock--tr {
    --mockScale: 0.70 !important;
    transform: perspective(2400px) rotateY(-13deg) rotateX(4deg) rotate(5deg) scale(0.70) !important;
  }
  .hero-mock--bl {
    --mockScale: 0.70 !important;
    transform: perspective(2400px) rotateY(7deg) rotateX(-1deg) rotate(6deg) scale(0.70) !important;
  }
  .hero-mock--br {
    --mockScale: 0.72 !important;
    transform: perspective(2400px) rotateY(-7deg) rotateX(-1deg) rotate(-3deg) scale(0.72) !important;
  }
}

@media (max-width: 1279px) {
  /* Por debajo de 1280 los mockups no caben sin pisarle los textos del
     centro al usuario. Se ocultan y el hero recupera respiro. La regla
     existente "max-width: 980" hacía esto a 980, pero el rango 980-1280
     quedaba roto. Esta regla cubre todo ese gap. */
  .hero-mock { display: none !important; }
  .hero--light { padding-top: 110px !important; padding-bottom: 64px !important; }
}

/* Tablet ligera (820-1279): pills más compactas para mantener buen ritmo. */
@media (max-width: 1279px) and (min-width: 820px) {
  .hero-light-modules { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .hero-mod-pill { padding: 10px 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN ECOSISTEMA · Sofía Martínez en los 4 módulos del día
   Reemplaza el bloque prodv6-closing-wrap + los .moments anteriores
   (Diego 19/05/2026). Auto-rotación cada 4s; click manual la detiene.
   ══════════════════════════════════════════════════════════════════ */
.section-ecosistema {
  position: relative;
  padding: 96px 0 104px;
  background: linear-gradient(180deg, #F7F5FF 0%, #FFFFFF 60%, #F7F5FF 100%);
  isolation: isolate;
}
.section-ecosistema .section-header { margin-bottom: 48px; }

/* Flow grid · 2x2 desktop con cards apaisadas (2da pasada 20/05/2026).
   En mobile scroll-snap horizontal con 1 card por viewport. */
.ecosistema-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.eco-moment {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(155,142,240,.18);
  box-shadow: 0 10px 28px -16px rgba(74,60,174,.18);
  opacity: .55;
  transform: scale(.98);
  cursor: pointer;
  transition:
    opacity .6s cubic-bezier(.4,0,.2,1),
    transform .6s cubic-bezier(.4,0,.2,1),
    box-shadow .6s ease,
    border-color .6s ease;
}
.eco-moment.is-active {
  opacity: 1;
  transform: scale(1.02);
  border-color: rgba(107,92,231,.5);
  box-shadow:
    0 18px 40px -16px rgba(74,60,174,.35),
    0 0 0 1px rgba(107,92,231,.18);
}

.eco-moment-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(155,142,240,.22), rgba(74,60,174,.32));
}
.eco-moment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.eco-moment.is-active .eco-moment-photo img { transform: scale(1.06); }
.eco-moment-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,12,52,0) 50%, rgba(20,12,52,.55) 100%);
  pointer-events: none;
}
.eco-moment-time {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.92);
  color: var(--c-text);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.eco-moment-time-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9B8EF0, #6B5CE7);
}
.eco-moment-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(107,92,231,.88);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.eco-moment-extra {
  position: absolute;
  inset: auto 12px 12px 12px;
  background: rgba(255,255,255,.96);
  color: var(--c-text);
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: 0 10px 24px -10px rgba(74,60,174,.32);
  /* 2da pasada 20/05/2026: el extra se abre/cierra automáticamente según
     si la card es .is-active. Reemplaza al toggle manual is-expanded. */
}
.eco-moment-extra-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 6px;
}
.eco-moment.is-active .eco-moment-extra {
  opacity: 1;
  max-height: 240px;
  pointer-events: auto;
  transition: opacity .35s ease, max-height .45s cubic-bezier(.4,0,.2,1);
}
.eco-moment:not(.is-active) .eco-moment-extra {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .25s ease, max-height .35s cubic-bezier(.4,0,.2,1), padding .35s ease;
}
.eco-moment-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
}
.eco-moment-caption strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
.eco-moment-caption > span {
  font-size: 12.5px;
  color: rgba(45,37,96,.65);
  line-height: 1.4;
}
.eco-moment-toggle {
  margin-top: 10px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(155,142,240,.10);
  color: var(--c-main);
  border: 1px solid rgba(155,142,240,.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.eco-moment-toggle:hover {
  background: rgba(155,142,240,.18);
  border-color: rgba(107,92,231,.6);
}
.eco-moment-toggle svg { width: 11px; height: 11px; transition: transform .3s ease; }
/* Botón en modo activo (panel ya abierto solo): el "+" rota 45° formando un check sutil
   y el botón cambia su tono visual a "estado", no a "acción" */
.eco-moment-toggle.is-active {
  background: rgba(107,92,231,.18);
  color: var(--c-main);
  border-color: rgba(107,92,231,.45);
  cursor: default;
}
.eco-moment-toggle.is-active svg { transform: rotate(45deg); }

/* Pills de módulo abajo (reemplazan las 4 pills del hero) */
.ecosistema-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(155,142,240,.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(45,37,96,.55);
  cursor: pointer;
  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}
.eco-pill-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(155,142,240,.16);
  align-items: center;
  justify-content: center;
  color: var(--c-main);
  transition: background .35s ease, color .35s ease;
}
.eco-pill:hover {
  border-color: rgba(107,92,231,.45);
  color: var(--c-main);
}
.eco-pill.is-active {
  background: linear-gradient(135deg, #6B5CE7, #4A3CAE);
  border-color: rgba(107,92,231,.5);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(74,60,174,.55);
}
.eco-pill.is-active .eco-pill-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Mobile: scroll-snap horizontal en moments, pills wrappeadas */
@media (max-width: 900px) {
  .ecosistema-flow {
    display: grid;
    grid-template-columns: repeat(4, 78%);
    grid-template-rows: auto;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .ecosistema-flow::-webkit-scrollbar { display: none; }
  .eco-moment { scroll-snap-align: center; }
}
@media (max-width: 480px) {
  .section-ecosistema { padding: 64px 0 72px; }
  .ecosistema-flow { grid-template-columns: repeat(4, 84%); }
  .eco-pill { padding: 8px 14px; font-size: 12px; }
  .eco-pill-icon { width: 20px; height: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   R1 · AJUSTES RESPONSIVE (mobile) — NO afectan desktop (≥769px)
   ════════════════════════════════════════════════════════════════════ */

/* Tarea 5 · Footer sin barras blancas — fondo oscuro continuo en mobile.
   El wrapper .bg-dark-stack ya pinta #0E0C1E; reforzamos el oscuro en las
   propias secciones para que cualquier costura por redondeo quede oscura
   (nunca el #F2F1F8 del body). Scope mobile: el desktop no cambia. */
@media (max-width: 768px) {
  .bg-dark-stack { background: #0E0C1E; }
  .section-contacto,
  .footer { background-color: #0E0C1E; }

  /* R1.3 · Overscroll de DOS colores en iOS sin gradiente/fixed.
     Quirk de iOS Safari: el rubber-band SUPERIOR usa el fondo de <html> y
     el INFERIOR usa el fondo de <body>. Aprovechándolo: arriba claro (como
     el hero) y abajo oscuro (extensión del footer). Las secciones claras
     tienen su propio fondo, así que el body oscuro no se ve en el contenido
     (solo en el overscroll inferior). Solo mobile → desktop intacto. */
  html {
    background: #F2F1F8;
  }
  body {
    background: #0E0C1E;
  }
  /* La franja de logos (trust-strip) no tenía fondo propio: mostraba el
     body claro. Al volver el body oscuro, le damos su fondo claro explícito
     (mismo #F2F1F8 que mostraba antes) para que NO aparezca una banda
     oscura en la zona clara. Es la única sección transparente del flujo. */
  .section-trust-strip {
    background: #F2F1F8;
  }
}

/* Tarea 2 · Cierra el hueco vertical hero → logos.
   La causa real en mobile es el min-height: 760px del hero (heredado del
   breakpoint ≤820px) combinado con align-items:center: el contenido queda
   centrado y deja medio scroll vacío bajo la pill. Lo soltamos a `auto` y
   compactamos el padding-bottom + el padding-top de la sección de logos. */
@media (max-width: 540px) {
  /* R2.3 · El hero llena la pantalla (100svh) y centra su contenido, así la
     siguiente sección (trust-strip + "Presentes en Chile y Perú") queda
     JUSTO bajo el fold y no se ve al entrar. align-items:center (base) +
     padding-bottom equilibrado con el padding-top (~110px) para que el
     bloque quede bien al centro vertical. (svh = viewport visible real en
     mobile; fallback a vh.) padding-bottom !important: gana a la regla con
     !important del bloque @media (max-width:1279px) (línea ~14782). */
  .hero--light {
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 96px !important;
  }
  .section-social { padding-top: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   R3 · TABLET / iPad — HERO
   ════════════════════════════════════════════════════════════════════ */
/* iPad VERTICAL (portrait): SIN mockups + contenido CENTRADO en el viewport
   y la siguiente sección bajo el fold (no se ve al entrar) — igual que en
   celular. min-height:100svh + align-items:center (base) + padding simétrico
   centran el bloque; antes quedaba arriba con un vacío abajo. */
@media (min-width: 541px) and (max-width: 1024px) and (orientation: portrait) {
  .hero--light {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
  }
}

/* iPad HORIZONTAL (landscape): mostrar los mockups del hero (en vertical van
   ocultos). A 1024–1279 los achicamos (~0.55) para que floten a los costados
   sin pisar el texto central; a ≥1280 ya se muestran con su escala desktop.
   Recuperamos algo de alto para que los mockups tengan dónde flotar. */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  .hero-mock { display: block !important; }
  .hero--light {
    min-height: 620px !important;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }
  /* Posiciones RESPONSIVAS: cada mockup queda ~15–30px por fuera del bloque
     de texto central a cualquier ancho del rango iPad (a 1024 se corren más
     hacia el borde solos; a 1180 idem). Calibrado empíricamente. */
  .hero-mock--tl { --mockScale: .58 !important; transform: perspective(2400px) rotateY(10deg) rotateX(2deg) rotate(-5deg) scale(.58) !important; left: calc(50% - 576px) !important; }
  .hero-mock--tr { --mockScale: .52 !important; transform: perspective(2400px) rotateY(-13deg) rotateX(4deg) rotate(5deg) scale(.52) !important; right: calc(50% - 510px) !important; }
  .hero-mock--bl { --mockScale: .52 !important; transform: perspective(2400px) rotateY(7deg) rotateX(-1deg) rotate(6deg) scale(.52) !important; left: calc(50% - 496px) !important; }
  .hero-mock--br { --mockScale: .54 !important; transform: perspective(2400px) rotateY(-7deg) rotateX(-1deg) rotate(-3deg) scale(.54) !important; right: calc(50% - 645px) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   R3.2 · TABLET / iPad — MOMENTOS (usa el carrusel mobile de scroll nativo)
   El bloque ≤1279 ya da: scroll-snap nativo full-bleed, foto 3/4, sin flechas,
   atenuación de laterales y loop infinito. Acá solo ajustamos el ANCHO de card
   por orientación. Mismo motor en ambas → no se rompe al rotar.
   ════════════════════════════════════════════════════════════════════ */
/* iPad VERTICAL: 1 card grande al centro + peek de las laterales (como cel).
   R3.3: bajado 64→58% (carrusel ~10% más chico en vertical, pedido del user). */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .moments-track .moment { flex: 0 0 58% !important; }
}
/* iPad HORIZONTAL: 3 cards visibles (la centrada destacada, laterales
   atenuadas) con scroll nativo fluido. */
@media (min-width: 641px) and (max-width: 1279px) and (orientation: landscape) {
  .moments-track .moment { flex: 0 0 33% !important; }
}
/* R3.3 · PERF iPad: el backdrop-filter (blur) de los pills y del panel "Ver
   más" es carísimo al scrollear en iOS (×12 cards del loop) → causaba el lag.
   En tablet lo cambiamos por fondo sólido (mismo look, sin costo de GPU). El
   celular (≤640) mantiene el blur (ahí no hay problema de rendimiento). */
@media (min-width: 641px) and (max-width: 1279px) {
  .moment-tag {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(28, 20, 54, .72) !important;
  }
  .moment-extra {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* PERF iPad (clave): en vez de filter:brightness en las inactivas (que iOS
     re-renderiza frame a frame al cambiar la activa → lag), usamos una CAPA
     oscura con opacity (compositada por GPU, sin re-render). Mismo
     oscurecimiento (~55%) que el filter, pero fluido. */
  .moments-track .moment:not(.m-active) { filter: none !important; }
  .moments-track .moment.m-active { filter: none !important; }
  .moments-track .moment::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #0a0820;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity .3s ease;
  }
  .moments-track .moment:not(.m-active)::after { opacity: .45; }
}

/* ════════════════════════════════════════════════════════════════════
   R3.4 · TABLET / iPad — CONTACTO. La regla base (@media ≤1024px) ya pasa a
   1 columna, pero el .form-card no tenía tope → se estiraba (inputs ~660px) y
   quedaba más ancho que el bloque de texto (cap 560) → desbalanceado.
   · VERTICAL  → 1 columna; capamos y CENTRAMOS texto + formulario (~560px).
   · HORIZONTAL (1024px del iPad 6/9.7") → volvemos a 2 columnas (texto | form),
     como ya ven los iPad ≥1025px en landscape. Acotado a ≥1000px para no tocar
     teléfonos en horizontal.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 541px) and (max-width: 1024px) and (orientation: portrait) {
  .contacto-left { max-width: 560px; margin-inline: auto; }
  .form-card { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 1000px) and (max-width: 1024px) and (orientation: landscape) {
  .contacto-inner { grid-template-columns: 1fr 1.05fr !important; gap: 40px !important; }
  .contacto-left { max-width: none !important; margin-inline: 0 !important; }
  .form-card { max-width: none !important; margin-inline: 0 !important; }
}