/* ============================================================
   Web EVA · estilos · carcasa cinematográfica oscura premium
   Usa los tokens de ./tokens.css (3-capa, validados vs micro1)
   ============================================================ */

:root {
  --ease: var(--primitive-easing-out, cubic-bezier(0.16, 1, 0.3, 1));
  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

/* W2 · View Transitions entre / y /marcas/ (consolidación): crossfade de documento
   en vez de recarga blanca. Progressive enhancement: navegadores sin soporte navegan normal. */
@view-transition { navigation: auto; }
.grain { view-transition-name: none; } /* el grano no debe parpadear en la transición */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut 0.28s var(--ease) both; }
  ::view-transition-new(root) { animation: vtIn 0.36s var(--ease) both; }
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden; /* evita scroll horizontal por glows/elementos decorativos en móvil */
  background: var(--color-background);
  color: var(--color-body);
  font-family: var(--font-body);
  font-weight: var(--primitive-fontWeight-regular);
  font-size: var(--primitive-fontSize-body-lg);
  line-height: var(--primitive-lineHeight-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: var(--primitive-fontWeight-light); margin: 0; color: var(--color-foreground); }
::selection { background: rgba(108,140,255,0.3); color: #fff; }

/* a11y · contenido solo para lectores de pantalla (titulares de sección para SEO/AEO sin tocar diseño) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* foco de teclado visible (accesibilidad) — usa el ring periwinkle */
:where(a, button, summary, input, [tabindex]):focus-visible,
.chip:focus-visible, .pain-item__head:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* grano filmic global */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.04;
  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 type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* eyebrow / meta */
.eyebrow {
  font-size: var(--eyebrow-size); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-meta); margin: 0 0 1.25rem; font-weight: var(--primitive-fontWeight-regular);
}

/* section heads */
.section-head { max-width: 60ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; }
.section-head__sub { color: var(--color-body-muted); margin: 1.25rem 0 0; max-width: 56ch; }

/* generic section rhythm */
main > section { padding-block: clamp(5rem, 12vh, 11rem); position: relative; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border-radius: var(--primitive-radius-pill); font-family: inherit;
  font-size: 0.95rem; font-weight: var(--primitive-fontWeight-medium);
  padding: 0.85rem 1.6rem; cursor: pointer; line-height: 1;
  transition: transform var(--primitive-duration-fast) var(--ease),
              background var(--primitive-duration-normal) var(--ease),
              border-color var(--primitive-duration-normal) var(--ease),
              box-shadow var(--primitive-duration-normal) var(--ease),
              color var(--primitive-duration-normal) var(--ease);
}
.btn svg { transition: transform var(--primitive-duration-normal) var(--ease); }
.btn--ghost {
  background: var(--button-primary-bg); color: var(--button-primary-fg);
  border: 1px solid var(--button-primary-border);
  box-shadow: 0 0 26px -10px rgba(108,140,255,0.45);
}
.btn--ghost:hover { color: #fff; border-color: rgba(108,140,255,0.5); box-shadow: 0 0 38px -6px rgba(108,140,255,0.7); }
.btn--ghost:hover svg { transform: translateY(2px); }
.btn--cta {
  background: var(--button-cta-bg); color: var(--button-cta-fg); border: 1px solid transparent;
  box-shadow: 0 0 28px -10px rgba(108,140,255,0.45);
}
.btn--cta:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 0 40px -6px rgba(108,140,255,0.65); }

/* ---------- NAV ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background var(--primitive-duration-normal) var(--ease); }
.nav__inner {
  max-width: var(--container); margin-inline: auto; padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.nav.is-scrolled {
  background: var(--nav-bg); backdrop-filter: blur(var(--nav-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.2);
  border-bottom: 1px solid var(--color-border);
}
.nav__logo { font-size: 1.35rem; font-weight: var(--primitive-fontWeight-medium); color: var(--color-foreground); letter-spacing: 0.02em; }
.nav__dot { color: var(--color-brand); }
.nav__menu { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.nav__links { display: flex; gap: 1.4rem; flex-shrink: 0; }
.nav__links a { font-size: 0.9rem; color: var(--color-body-muted); white-space: nowrap; transition: color var(--primitive-duration-normal) var(--ease); }
.nav__links a:hover { color: var(--color-foreground); }
.nav__cta { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.nav__burger { display: none; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 9px; }
.nav__burger span { display: block; height: 1.5px; width: 100%; background: var(--color-foreground); transition: transform var(--primitive-duration-normal) var(--ease), opacity var(--primitive-duration-normal) var(--ease); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1080px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 1.2rem;
    padding: 1.5rem var(--gutter) 2rem;
    background: rgba(0,0,0,0.92); backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur));
    border-bottom: 1px solid var(--color-border);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--primitive-duration-normal) var(--ease), transform var(--primitive-duration-normal) var(--ease);
  }
  .nav.is-menu-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links { flex-direction: column; gap: 0.6rem; }
  .nav__links a { padding-block: 0.55rem; } /* área táctil ≥44px en el desplegable */
  .nav__cta { align-self: flex-start; }
}

/* ---------- CONMUTADOR DE AUDIENCIA (consolidación distribuidores/marcas) ---------- */
.nav__switch {
  position: relative; display: inline-flex; align-items: center; gap: 0; flex-shrink: 0;
  padding: 3px; border: 1px solid var(--color-border); border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
/* El thumb es el propio botón activo, no un ::before al 50%.
   Antes era un pseudoelemento de `width: calc(50% - 3px)`, que sólo cuadraba
   mientras las dos etiquetas midieran casi lo mismo. Con `flex: 1 1 0` y
   `white-space: nowrap` gana el ancho del contenido, así que «Distribuidores y
   ecommerce» (199 px) dejó el thumb (150 px) descolocado. Pintarlo sobre
   `.is-active` lo hace independiente del texto. No se pierde nada: cada perfil
   es un documento distinto, así que el deslizamiento nunca llegaba a verse. */
.nav__switch-opt {
  position: relative; z-index: 1; flex: 1 1 0; text-align: center;
  font-size: 0.82rem; color: var(--color-body-muted); white-space: nowrap;
  padding: 0.34rem 0.95rem; border-radius: 999px;
  transition: color var(--primitive-duration-normal) var(--ease);
}
.nav__switch-opt:hover { color: var(--color-foreground); }
.nav__switch-opt.is-active {
  color: var(--color-foreground);
  background: rgba(108, 140, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(108, 140, 255, 0.45);
}
/* W5 · estados de presión (no existía ni un :active en la web) */
.btn:active { transform: translateY(1px) scale(0.985); }
.chip:active { transform: scale(0.97); }
.nav__switch-opt:active { transform: scale(0.96); }
@media (max-width: 1080px) {
  .nav__switch { margin-left: auto; margin-right: 0.75rem; }
  .nav__switch-opt { font-size: 0.76rem; padding: 0.3rem 0.72rem; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 400px) {
  .nav__switch-opt { padding: 0.3rem 0.58rem; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__switch::before { transition: none; }
  .btn:active, .chip:active, .nav__switch-opt:active { transform: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 6rem 0 3.5rem;
}
.hero__wave, .hero__wave-fallback, .hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; pointer-events: none;
}
.hero__media { object-position: center 60%; }
/* animación CSS gratis del hero B: Ken Burns lento + pulso del núcleo */
.hero__media--ken { transform-origin: 54% 54%; animation: heroKen 22s ease-in-out infinite alternate; }
@keyframes heroKen { from { transform: scale(1.05); } to { transform: scale(1.18) translate(-2.2%, -1.6%); } }
.hero__pulse { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 44% at 53% 52%, rgba(108,140,255,0.30), rgba(138,96,210,0.14) 45%, transparent 66%);
  animation: heroPulse 5.5s ease-in-out infinite; }
@keyframes heroPulse { 0%, 100% { opacity: 0.32; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.16); } }
.hero__drift { position: absolute; inset: -12%; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(26% 38% at 32% 46%, rgba(108,140,255,0.20), rgba(138,96,210,0.08) 50%, transparent 64%);
  animation: heroDrift 15s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: translateX(-9%) translateY(2%); } to { transform: translateX(13%) translateY(-3%); } }
.hero__wave-fallback { opacity: 0; object-position: center 72%; transition: opacity 1s var(--ease); } /* poster, mostrado solo si no hay canvas */
.hero::after { /* viñeta a negro en los 4 bordes */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 55%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 25%, transparent 60%, rgba(0,0,0,0.95));
}
.hero__content { position: relative; z-index: 3; max-width: 60rem; padding-inline: var(--gutter); }
.hero__content::before { /* scrim suave tras el titular para legibilidad sobre el glow */
  content: ""; position: absolute; inset: -30% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 62% at 50% 48%, rgba(0,0,0,0.74), rgba(0,0,0,0.36) 55%, transparent 76%);
  filter: blur(10px);
}
.hero__title {
  font-size: clamp(2.1rem, 5vw, 4.25rem); line-height: 1.08;
  letter-spacing: -0.02em; font-weight: var(--primitive-fontWeight-regular);
  margin: 0 auto; max-width: 20ch;
}
.hero__title-dim { color: rgba(255, 255, 255, 0.82); }
.hero__subtitle {
  margin: 1.6rem auto 0; max-width: 52ch; color: var(--color-body-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.hero__actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* entrada del hero por CSS (estado final SIEMPRE visible, no depende de JS) */
.hero-anim { animation: heroIn 0.9s var(--ease) both; }
.hero .eyebrow.hero-anim { animation-delay: 0.10s; }
.hero__title.hero-anim { animation-delay: 0.22s; }
.hero__subtitle.hero-anim { animation-delay: 0.38s; }
.hero__actions.hero-anim { animation-delay: 0.54s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero__scrollcue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 1px; height: 56px; background: linear-gradient(var(--color-meta), transparent);
}
.hero__scrollcue::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#fff, transparent); animation: cueRun 2.4s var(--ease) infinite; }
@keyframes cueRun { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }

/* glows de color del hero — atmósfera que EMANA (azul + ámbar + violeta), no fills */
.hero__glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.55; will-change: transform; }
.hero__glow--blue { width: 62vw; height: 62vw; left: -16vw; top: -16vw; background: radial-gradient(circle, rgba(108,140,255,0.62), transparent 62%); animation: heroDrift1 20s ease-in-out infinite alternate; }
.hero__glow--amber { width: 36vw; height: 36vw; right: 0vw; top: 4%; background: radial-gradient(circle, rgba(216,150,138,0.22), transparent 60%); animation: heroDrift2 26s ease-in-out infinite alternate; }
.hero__glow--violet { width: 66vw; height: 66vw; left: 24%; bottom: -22%; background: radial-gradient(circle, rgba(138,96,210,0.62), transparent 60%); animation: heroDrift3 30s ease-in-out infinite alternate; }
@keyframes heroDrift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(8vw,4vh,0); } }
@keyframes heroDrift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7vw,5vh,0); } }
@keyframes heroDrift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(5vw,-5vh,0); } }

/* ---------- MÉTRICAS ---------- */
.metrics { border-block: 1px solid var(--color-border); padding-block: clamp(2.5rem, 5vw, 4rem) !important; }
.metrics__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.metric { display: flex; flex-direction: column; gap: 0.4rem; padding-inline: clamp(1rem, 2.5vw, 2.2rem); }
.metric:first-child { padding-left: 0; }
/* D4 · hairlines verticales que dan ritmo y jerarquía (en vez de cajas equipotentes) */
.metric + .metric { border-left: 1px solid var(--color-border); }
.metric__num {
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: var(--primitive-fontWeight-regular);
  color: var(--color-foreground); font-variant-numeric: tabular-nums; line-height: 1;
}
/* D4 · el dato más fuerte (primero) lidera con más peso */
.metric:first-child .metric__num { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.metric__label { font-size: 0.85rem; color: var(--color-meta); }
@media (max-width: 760px) {
  .metrics__inner { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 0; }
  .metric { padding-inline: 1.1rem; }
  .metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .btn { min-height: 46px; } /* área táctil cómoda en móvil */
}

/* ---------- §3 CÓMO FUNCIONA · FLUJO LINEAL DE NODOS (SVG, autoplay) ---------- */
.how { padding-block: clamp(4rem, 10vh, 8rem); }
.how__pin { display: flex; flex-direction: column; gap: clamp(0.9rem, 2.4vh, 2rem); width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.how__top { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.how__eyebrow { text-align: center; margin: 0; }
.how__progress { display: flex; gap: 0.5rem; max-width: 22rem; width: 100%; margin: 0 auto; }
.how__seg { position: relative; flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.how__seg::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 2px; border-radius: 2px; background: var(--color-border); transition: background var(--primitive-duration-normal) var(--ease), box-shadow var(--primitive-duration-normal) var(--ease); }
.how__seg:hover::after { background: var(--color-body-muted); }
.how__seg.is-active::after { background: var(--color-brand); box-shadow: var(--glow-brand); }
/* stage = lienzo SVG del flujo; la cámara recorre las estaciones */
.how__stage { position: relative; width: 100%; height: clamp(340px, 54vh, 560px); overflow: hidden;
  background: radial-gradient(58% 72% at 52% 50%, rgba(108,140,255,0.07), transparent 72%); }
.how__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* HUD: caption sincronizada al beat (crossfade) */
.how__caps { position: relative; min-height: clamp(7.5rem, 16vh, 10rem); max-width: 48rem; margin-inline: auto; text-align: center; }
.how__cap { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity var(--primitive-duration-slow) var(--ease), transform var(--primitive-duration-slow) var(--ease); pointer-events: none; }
.how__cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.how__cap-num { display: block; font-variant-numeric: tabular-nums; color: var(--color-brand); font-size: 0.82rem; letter-spacing: 0.12em; margin-bottom: 0.7rem; }
.how__cap h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); color: var(--color-foreground); margin-bottom: 0.6rem; font-weight: var(--primitive-fontWeight-light); letter-spacing: -0.01em; }
.how__cap p { margin: 0 auto; font-size: 1.02rem; color: var(--color-body-muted); max-width: 50ch; }
.how__cue { align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--color-meta); transition: color var(--primitive-duration-normal) var(--ease); }
.how__cue:hover { color: var(--color-foreground); }
.how__cue svg { animation: cueBob 2s var(--ease) infinite; }
.how__cue-label { font-size: 0.85rem; letter-spacing: 0.02em; opacity: 0; transition: opacity var(--primitive-duration-slow) var(--ease); }
.how__cue.is-final { color: var(--color-brand); }
.how__cue.is-final .how__cue-label { opacity: 1; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* estado estático (reduced-motion / no-JS): captions apiladas + grafo en overview */
.how.is-static .how__caps { position: static; min-height: 0; text-align: left; max-width: 60rem; }
.how.is-static .how__cap { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 2rem; }
.how.is-static .how__progress, .how.is-static .how__cue-label, .how.is-static .how__controls { display: none; }
/* controles de la animación (prev · pausa/play · next) */
.how__controls { display: flex; align-items: center; justify-content: center; gap: 0.8rem; }
.how__ctrl { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: rgba(255,255,255,0.03); color: var(--color-body-muted); cursor: pointer; transition: color var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease), background var(--primitive-duration-normal) var(--ease); }
.how__ctrl:hover { color: #fff; border-color: rgba(108,140,255,0.5); background: rgba(108,140,255,0.08); }
.how__ctrl--toggle { width: 44px; height: 44px; color: var(--color-foreground); }
.how__ctrl .ic-play { display: none; }
.how.is-paused .how__ctrl--toggle .ic-pause { display: none; }
.how.is-paused .how__ctrl--toggle .ic-play { display: block; }

/* ---------- PANELS (producto) ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--card-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px -28px rgba(0,0,0,0.85), 0 0 48px -22px rgba(108,140,255,0.45);
  overflow: hidden;
  transition: box-shadow var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease);
}
.panel:hover {
  border-color: rgba(108,140,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 24px 60px -24px rgba(0,0,0,0.85), 0 0 58px -10px rgba(108,140,255,0.55);
}
.panel::before { /* sheen / rim-light superior para profundidad */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 70% at 50% -15%, rgba(255,255,255,0.07), transparent 55%);
}
.panel__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-border); }
.panel__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.panel__bar em { margin-left: auto; font-style: normal; font-size: 0.72rem; color: var(--color-meta); letter-spacing: 0.08em; }
.panel__body { padding: 1.4rem; }
.panel__caption { margin-top: 1.2rem; font-size: 0.78rem; color: var(--color-meta); }

.panel__sources { display: flex; flex-direction: column; gap: 0.7rem; }
.filechip { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--color-body); padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: 6px; }
.filechip__ext { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-foreground); background: rgba(255,255,255,0.06); padding: 0.2rem 0.45rem; border-radius: 4px; }
.filechip__name { flex: 1; }
.filechip__lang { font-size: 0.64rem; letter-spacing: 0.06em; color: var(--color-brand); border: 1px solid rgba(108,140,255,0.32); padding: 0.12rem 0.42rem; border-radius: 4px; }

.panel__spec .spec__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.panel__spec .spec__row span:first-child { color: var(--color-body-muted); }
.panel__spec .spec__row span:last-child { color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.spec__source, .bubble__src { color: var(--color-brand); }
.spec__source { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.78rem; color: var(--color-meta); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); box-shadow: var(--glow-brand); display: inline-block; }

.panel__chat, .demo__thread { display: flex; flex-direction: column; gap: 0.8rem; }
.bubble { padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.92rem; max-width: 92%; }
.bubble--q { align-self: flex-end; background: rgba(255,255,255,0.06); color: var(--color-foreground); border: 1px solid var(--color-border); }
.bubble--a { align-self: flex-start; background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-body); }
.bubble__src { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font-size: 0.74rem; }
/* W3 · sello de fuente: la trazabilidad (LA propuesta de valor) entra con beat propio + barrido de luz */
.evachat .bubble__src { position: relative; overflow: hidden; padding: 0.2rem 0.5rem; margin-left: -0.5rem; border-radius: 999px; animation: srcIn 0.5s var(--ease) 0.2s both; }
.evachat .bubble__src::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(108,140,255,0.30) 50%, transparent 65%);
  transform: translateX(-130%); animation: srcSweep 0.9s var(--ease) 0.45s 1 both;
}
@keyframes srcIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes srcSweep { to { transform: translateX(130%); } }

.panel__catalog { display: flex; flex-direction: column; gap: 0.9rem; }
.cat__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cat__search { flex: 1; font-size: 0.78rem; color: var(--color-meta); padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 6px; }
.cat__count { font-size: 0.72rem; color: var(--color-meta); white-space: nowrap; }
.cat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.cat__card { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem; background: rgba(255,255,255,0.015); transition: border-color var(--primitive-duration-normal) var(--ease); }
.cat__card:hover { border-color: rgba(108,140,255,0.3); }
.cat__thumb { aspect-ratio: 16/10; border-radius: 4px; background: linear-gradient(135deg, rgba(108,140,255,0.20), rgba(138,96,210,0.10)); margin-bottom: 0.5rem; }
.cat__name { font-size: 0.74rem; color: var(--color-foreground); line-height: 1.2; }
.cat__meta { font-size: 0.65rem; color: var(--color-meta); margin-top: 0.2rem; }

@media (max-width: 760px) {
  /* §3 autoplay (misma ruta que desktop); el stage se hace más alto para que la cámara zoom sea legible */
  .how__stage { height: clamp(360px, 62vh, 520px); }
  .how__cap p { font-size: 0.98rem; }
}

/* ---------- §4 DEMO · frame premium del chat ----------
   Diseño: el widget real de VencoChat carga con un estilo light/cream.
   El frame oscuro lo enmarca como una "ventana iluminada" — el contraste
   se convierte en gesto intencional, no en parche pegado.
   Mismo wrapper sirve para el mockup fallback y para el widget real.
   ─────────────────────────────────────────────────────────── */
.evachat {
  /* Ancho completo del container — alineado con el nav (logo ↔ CTA) */
  max-width: 100%;
  margin: 0 auto;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(108,140,255,0.10), transparent 60%),
    var(--color-surface);
  border-radius: 26px;
  padding: 14px;
  /* Bloque del chat — altura cómoda sin vacío muerto (D3) */
  min-height: 560px;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  /* Sombra profunda + glow periwinkle multinivel (efecto WOW) */
  box-shadow:
    0 50px 130px -35px rgba(0,0,0,0.85),
    0 0 160px -20px rgba(108,140,255,0.38),
    0 0 70px -10px rgba(108,140,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  /* Animación sutil de respiración del glow (6s loop) */
  animation: evachatBreathe 6s ease-in-out infinite;
}
/* El widget de Jon se monta como hijo directo. Le forzamos a llenar el frame
   para que no quede espacio negro abajo cuando el frame es más alto que su
   altura natural. */
.evachat > div:only-child:not(.evachat__header),
.evachat > iframe:only-child {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
}
@keyframes evachatBreathe {
  0%, 100% {
    box-shadow:
      0 50px 130px -35px rgba(0,0,0,0.85),
      0 0 160px -20px rgba(108,140,255,0.38),
      0 0 70px -10px rgba(108,140,255,0.22),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }
  50% {
    box-shadow:
      0 50px 130px -35px rgba(0,0,0,0.85),
      0 0 200px -20px rgba(108,140,255,0.52),
      0 0 90px -10px rgba(108,140,255,0.32),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
}
.evachat:hover {
  animation-duration: 4s;
}
@media (prefers-reduced-motion: reduce) {
  .evachat { animation: none; }
}
/* Glow superior pronunciado (radial periwinkle desde top) */
.evachat::before {
  content: "";
  position: absolute;
  inset: -60% -15% auto -15%;
  height: 90%;
  background: radial-gradient(70% 85% at 50% 0%, rgba(108,140,255,0.28), transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
/* Borde con gradient cíclico periwinkle (más visible, premium) */
.evachat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(108,140,255,0.70) 0%,
    rgba(108,140,255,0.25) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(108,140,255,0.25) 75%,
    rgba(108,140,255,0.70) 100%
  );
  -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.evachat > * { position: relative; z-index: 1; }

/* Cuando carga el widget real (light), su contenedor hijo necesita
   redondeo interno para encajar con el frame. El widget se monta como
   un hijo directo del #evachat con sus propios estilos light. */
.evachat > iframe,
.evachat > div:first-child:not(.evachat__header) {
  border-radius: 16px;
  overflow: hidden;
}

.evachat__header {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,0.012);
}
.evachat__avatar {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(108,140,255,0.25), 0 0 18px -6px rgba(108,140,255,0.5);
  flex: none;
  overflow: hidden;
}
.evachat__avatar svg { width: 100%; height: 100%; display: block; }
.evachat__id { display: flex; flex-direction: column; line-height: 1.25; }
.evachat__name { font-size: 0.95rem; color: var(--color-foreground); font-weight: 500; letter-spacing: -0.01em; }
.evachat__status { font-size: 0.74rem; color: var(--color-meta); display: flex; align-items: center; gap: 0.45rem; margin-top: 0.1rem; }
.evachat__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6BD27F;
  box-shadow: 0 0 0 0 rgba(107,210,127,0.5);
  animation: evaPulse 2.2s ease-out infinite;
}
@keyframes evaPulse {
  0% { box-shadow: 0 0 0 0 rgba(107,210,127,0.45); }
  70% { box-shadow: 0 0 0 9px rgba(107,210,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,210,127,0); }
}
.evachat__badge {
  margin-left: auto; font-style: normal;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-meta);
  border: 1px solid var(--color-border);
  padding: 0.22rem 0.55rem; border-radius: 4px;
  cursor: help;
}
/* botón ampliar / pantalla completa del chat (mock; el widget real gestiona el suyo) */
.evachat__expand {
  flex: none; width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);
  color: var(--color-body-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--primitive-duration-normal) var(--ease), background var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease), transform var(--primitive-duration-fast) var(--ease);
}
.evachat__expand:hover { color: #fff; border-color: rgba(108,140,255,0.5); background: rgba(108,140,255,0.10); }
.evachat__expand:active { transform: scale(0.94); }
.evachat__expand .ic-collapse { display: none; }
.evachat.is-fullscreen .evachat__expand .ic-expand { display: none; }
.evachat.is-fullscreen .evachat__expand .ic-collapse { display: block; }

/* estado pantalla completa: el chat ocupa todo el viewport (ideal en móvil) */
.evachat.is-fullscreen {
  position: fixed; inset: 0; z-index: 200;
  max-width: none; margin: 0; padding: 0; border-radius: 0;
  height: 100dvh; min-height: 100dvh;
  animation: none;
  box-shadow: none;
}
.evachat.is-fullscreen .evachat__thread { min-height: 0; }
body.chat-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .evachat__expand:active { transform: none; } }

.evachat__suggest {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--color-border);
}

.chip { font-family: inherit; font-size: 0.82rem; color: var(--color-body); background: transparent; border: 1px solid var(--color-border); border-radius: var(--primitive-radius-pill); padding: 0.5rem 0.9rem; cursor: pointer; transition: border-color var(--primitive-duration-normal) var(--ease), color var(--primitive-duration-normal) var(--ease), background var(--primitive-duration-normal) var(--ease); }
.chip:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.02); }
.chip.is-active { border-color: var(--color-brand); color: #fff; box-shadow: 0 0 18px -6px rgba(108,140,255,0.55); }

.evachat__thread {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.4rem 1.3rem;
  flex: 1; min-height: 240px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.evachat__thread::-webkit-scrollbar { width: 6px; }
.evachat__thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.evachat__thread .bubble {
  max-width: 82%;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.evachat__thread .bubble--q {
  align-self: flex-end;
  background: rgba(108,140,255,0.10);
  border: 1px solid rgba(108,140,255,0.20);
  color: var(--color-foreground);
  border-radius: 14px 14px 4px 14px;
}
.evachat__thread .bubble--a {
  align-self: flex-start;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-body);
  border-radius: 14px 14px 14px 4px;
}
.evachat__thread .bubble--a strong { color: var(--color-foreground); font-weight: 500; }
.bubble__src { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); font-size: 0.74rem; color: var(--color-brand); font-variant-numeric: tabular-nums; }
.bubble__src .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 8px rgba(108,140,255,0.6); }

/* animaciones de tipeo */
.caret { display: inline-block; width: 2px; height: 1em; background: var(--color-brand); margin-left: 2px; vertical-align: text-bottom; animation: caretBlink 0.9s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.typing-dots { display: inline-flex; gap: 5px; padding: 0.25rem 0.1rem; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-body-muted); animation: typingDot 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.bubble--reveal { animation: bubbleIn 0.45s var(--ease) both; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.evachat__input {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--color-border);
  background: rgba(255,255,255,0.012);
}
.evachat__input input {
  flex: 1;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  font-family: inherit; font-size: 0.95rem;
  color: var(--color-body);
  outline: none;
  cursor: not-allowed;
}
.evachat__input input::placeholder { color: var(--color-meta); }
.evachat__send {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-foreground); color: var(--color-background);
  border: 0; display: flex; align-items: center; justify-content: center;
  cursor: not-allowed; opacity: 0.55;
  transition: opacity var(--primitive-duration-normal) var(--ease);
  flex: none;
}

@media (max-width: 680px) {
  .evachat { min-height: 500px; border-radius: 12px; }
  .evachat__header { padding: 0.85rem 1rem; gap: 0.7rem; }
  .evachat__avatar { width: 32px; height: 32px; }
  .evachat__suggest { padding: 0.85rem 1rem; gap: 0.4rem; }
  .evachat__suggest .chip { font-size: 0.82rem; padding: 0.5rem 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }
  .evachat__thread { padding: 1.2rem 1rem; min-height: 300px; }
  .evachat__thread .bubble { max-width: 88%; font-size: 0.92rem; padding: 0.8rem 0.95rem; }
  .evachat__input { padding: 0.75rem 0.85rem; }
  .evachat__input input { font-size: 0.92rem; padding: 0.65rem 0.85rem; }
}

/* ---------- §5 PAINS · acordeón ---------- */
.pains__acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); max-width: 60rem; }
.pain-item { border-bottom: 1px solid var(--color-border); }
.pain-item__head { width: 100%; display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 0; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.pain-item__num { font-variant-numeric: tabular-nums; color: var(--color-meta); font-size: 0.95rem; min-width: 2rem; transition: color var(--primitive-duration-normal) var(--ease); }
.pain-item__title { flex: 1; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: var(--primitive-fontWeight-light); letter-spacing: -0.01em; color: var(--color-foreground); }
.pain-item.is-open .pain-item__num { color: var(--color-brand); }
.pain-item__head:hover .pain-item__title { color: #fff; }
.pain-item__icon { position: relative; width: 16px; height: 16px; flex: none; }
.pain-item__icon::before, .pain-item__icon::after { content: ""; position: absolute; background: var(--color-meta); transition: transform var(--primitive-duration-normal) var(--ease), background var(--primitive-duration-normal) var(--ease); }
.pain-item__icon::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.pain-item__icon::after { left: 7px; top: 0; width: 1.5px; height: 16px; }
.pain-item.is-open .pain-item__icon::after { transform: scaleY(0); }
.pain-item.is-open .pain-item__icon::before { background: var(--color-brand); }
.pain-item__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--primitive-duration-slow) var(--ease); }
html.js .pain-item:not(.is-open) .pain-item__panel { grid-template-rows: 0fr; }
.pain-item__inner { overflow: hidden; }
.pain-item__inner p { margin: 0 0 1rem; color: var(--color-body-muted); max-width: 56ch; font-size: 1rem; }
.pain-item__metric { display: inline-block; font-size: 0.85rem; color: var(--color-brand); padding-bottom: 1.7rem; }

/* ---------- DESCANSO DE ONDA ---------- */
.breather { position: relative; min-height: clamp(240px, 38vh, 400px); display: grid; place-items: center; overflow: hidden; padding: 0 !important;
  background: radial-gradient(60% 90% at 50% 50%, rgba(138,96,210,0.14), transparent 72%); }
.breather__wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.breather::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(58% 58% at 50% 50%, rgba(0,0,0,0.22), rgba(0,0,0,0.58)); }
.breather__line { position: relative; z-index: 2; text-align: center; max-width: 30ch; font-size: clamp(1.3rem, 3vw, 2.2rem); color: var(--color-foreground); font-weight: var(--primitive-fontWeight-light); letter-spacing: -0.01em; padding-inline: var(--gutter); }

/* descanso · ola de vidrio a color (asset rescatado de V1), fundido a negro arriba/abajo */
.banner-break { position: relative; height: clamp(200px, 32vh, 360px); overflow: hidden;
  background: radial-gradient(60% 130% at 50% 50%, rgba(96,156,255,0.13), transparent 72%); }
.banner-break__wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner-break::before, .banner-break::after { content: ""; position: absolute; left: 0; right: 0; height: 42%; pointer-events: none; z-index: 1; }
.banner-break::before { top: 0; background: linear-gradient(#000, transparent); }
.banner-break::after { bottom: 0; background: linear-gradient(transparent, #000); }

/* ---------- §6 POR QUÉ EVA ---------- */
/* W6 · bento asimétrico: la columna del diferenciador (vs IA genérica) es más ancha y con glow */
.why__grid { display: grid; grid-template-columns: 1fr 1.28fr 1fr; gap: 1.2rem; }
.why__card:nth-child(2) {
  border-color: rgba(108,140,255,0.42);
  box-shadow: 0 0 56px -16px rgba(108,140,255,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.why__card {
  position: relative; padding: 2rem 1.8rem; border: 1px solid var(--color-border);
  border-radius: var(--card-radius); background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease), box-shadow var(--primitive-duration-normal) var(--ease);
}
.why__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(130% 70% at 50% -20%, rgba(255,255,255,0.06), transparent 55%); }
.why__card:hover {
  transform: translateY(-4px); border-color: rgba(255,255,255,0.22);
  box-shadow: 0 26px 55px -26px rgba(0,0,0,0.85), 0 0 44px -8px rgba(56,152,236,0.22), inset 0 1px 0 rgba(255,255,255,0.09);
}
.why__card h3 { font-size: 1.2rem; color: var(--color-foreground); margin-bottom: 0.9rem; font-weight: var(--primitive-fontWeight-regular); }
.why__card p { margin: 0; color: var(--color-body-muted); font-size: 0.95rem; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } }

/* ---------- §7 PRUÉBALO ---------- */
.try { text-align: center; }
.try__inner { max-width: 50rem; margin-inline: auto; }
.try h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; }
.try__body { color: var(--color-body-muted); margin: 1.5rem auto 0; max-width: 52ch; }
.try__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.try__fine { margin-top: 1.2rem; font-size: 0.85rem; color: var(--color-meta); }

/* ---------- §8 CASO ---------- */
.case__quote { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25; color: var(--color-foreground); font-weight: var(--primitive-fontWeight-light); letter-spacing: -0.01em; margin: 0; max-width: 22ch; }
.case__attr { color: var(--color-meta); font-size: 0.9rem; margin: 1.5rem 0 0; }
.case__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-border); padding-top: 3rem; }
.case__num { font-size: clamp(1.8rem, 3.5vw, 3rem); color: var(--color-foreground); font-variant-numeric: tabular-nums; display: block; line-height: 1; }
.case__num small { font-size: 0.4em; color: var(--color-body-muted); }
.case__label { font-size: 0.82rem; color: var(--color-body-muted); margin-top: 0.7rem; display: block; max-width: 22ch; }
@media (max-width: 760px) { .case__metrics { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } }

/* ---------- §9 FAQ ---------- */
.faq__inner { max-width: 52rem; margin-inline: auto; }
.faq__list { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--color-foreground); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-meta); transition: transform var(--primitive-duration-normal) var(--ease); }
.faq__icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.faq__icon::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__item p { margin: 0 0 1.6rem; color: var(--color-body-muted); max-width: 62ch; font-size: 0.96rem; }

/* ---------- FOOTER ---------- */
.footer { position: relative; overflow: hidden; padding-top: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--color-border); }
.footer__aurora {
  position: absolute; left: 0; right: 0; bottom: -45%;
  width: 100%; height: 65%; z-index: 0; pointer-events: none; filter: blur(95px);
  background: radial-gradient(closest-side, rgba(108,140,255,0.13), rgba(138,96,210,0.07) 48%, transparent 72%);
}
.footer__inner { position: relative; z-index: 2; }
.footer__cta { text-align: center; max-width: 40rem; margin: 0 auto clamp(4rem, 8vw, 7rem); }
.footer__cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; margin-bottom: 2rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-bottom: 3rem; }
.footer__h { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-meta); margin-bottom: 1rem; }
.footer__cols a { display: block; color: var(--color-body-muted); font-size: 0.92rem; padding: 0.3rem 0; transition: color var(--primitive-duration-normal) var(--ease); }
.footer__cols a:hover { color: var(--color-foreground); }
/* enlaces aún sin página: informativos, no clicables (evita el href="#" que aparenta rotura) */
.footer__soon { display: block; color: var(--color-meta); opacity: 0.55; font-size: 0.92rem; padding: 0.3rem 0; cursor: default; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-meta); }
.footer__wordmark { font-size: clamp(5rem, 22vw, 18rem); font-weight: var(--primitive-fontWeight-light); color: rgba(255,255,255,0.04); text-align: center; line-height: 0.85; letter-spacing: -0.03em; margin-top: -1rem; user-select: none; }
@media (max-width: 760px) { .footer__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- REVEALS (progressive enhancement: solo se ocultan con JS) ---------- */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(26px); }
/* D6 · variante ligada a la identidad: las cards/métricas entran con escala (no solo translate) */
html.js .why__card.reveal:not(.is-visible),
html.js .case__metric.reveal:not(.is-visible) { transform: translateY(26px) scale(0.965); }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__wave { display: none; }
  .hero__video { display: none; }
  .hero__wave-fallback { opacity: 0.6; }
  .how__visual { transition: opacity 0.3s linear; }
  .how__steps { min-height: auto; }
  .how__step { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 1.8rem; }
  .how__seg { background: var(--color-brand); }
  .breather__video { display: none; }
  * { animation: none !important; }
  /* D6 · sin movimiento: los hover no desplazan */
  *:hover { transform: none !important; }
}

/* ══════════ §6b · EMPRESAS COLABORADORAS · desfile continuo ══════════
   Los logos van en silueta blanca con opacidad baja: los originales traen
   cada uno su color de marca y su fondo blanco, y puestos tal cual sobre
   el fondo oscuro unos desaparecían y otros gritaban. En blanco uniforme
   la tira lee como una sola cosa.

   La pista lleva los dieciséis logos DOS veces y la animación la desplaza
   un -50 %: al acabar el primer juego, el segundo está exactamente donde
   arrancó el primero, así que el bucle no da tirón. De ahí que el ancho
   sea max-content y la traslación un porcentaje y no píxeles — con
   píxeles habría que recalcular a cada ancho de pantalla. */
.colabs { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.colabs__eyebrow {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
}
.colabs__viewport {
  overflow: hidden;
  /* difumina los dos extremos para que los logos entren y salgan en vez
     de aparecer cortados contra el borde de la pantalla */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.colabs__pista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  animation: colabs-desfile 64s linear infinite;
}
/* al pasar el ratón se para, para poder leer una marca concreta */
.colabs__viewport:hover .colabs__pista { animation-play-state: paused; }
/* 🪤 El hueco va en margin-right de CADA item, no en `gap` de la pista.
   Con `gap` hay 31 huecos para 32 logos, así que la mitad del ancho cae
   medio hueco antes de donde arranca el segundo juego y el bucle da un
   tirón de ~30 px en cada vuelta. Con margin-right cada logo aporta
   siempre item+hueco, la mitad es exactamente un juego, y la costura
   desaparece. */
.colabs__item {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  margin-right: clamp(2.4rem, 5vw, 4.5rem);
}
.colabs__item img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 44px;
  opacity: 0.58;
  transition: opacity var(--primitive-duration-normal) var(--ease);
}
.colabs__item img:hover { opacity: 1; }

@keyframes colabs-desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 720px) {
  /* menos recorrido por vuelta en pantalla estrecha: a la misma duración
     el desfile se percibiría el doble de rápido */
  .colabs__pista { animation-duration: 42s; }
  .colabs__item { margin-right: 2.1rem; }
  .colabs__item img { max-width: 116px; max-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  /* sin movimiento: se queda quieto y envuelve, y el segundo juego sobra */
  .colabs__viewport { -webkit-mask-image: none; mask-image: none; }
  .colabs__pista {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8rem 2.4rem;
    padding: 0 1rem;
  }
  /* aquí sí vale `gap`: no hay bucle que cerrar, y el margin-right
     descolocaría el centrado de la última fila */
  .colabs__item { margin-right: 0; }
  .colabs__item[aria-hidden="true"] { display: none; }
}

/* ══════════ §4 · VÍDEO DE PRESENTACIÓN (sustituye al chat demo) ══════════ */
.evavideo { max-width: 920px; margin: 0 auto; }
.evavideo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(108, 140, 255, 0.16), transparent 60%), #0a0b10;
  box-shadow: 0 40px 110px -35px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(108, 140, 255, 0.18),
    0 0 90px -20px rgba(108, 140, 255, 0.35);
}
.evavideo__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block; background: #000;
}
.evavideo__cover {
  position: absolute; inset: 0;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.85rem;
  cursor: pointer; border: 0;
  background: transparent;
  color: #f2f2f2; font: inherit;
}
.evavideo__cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.08), rgba(4, 5, 10, 0.58));
}
.evavideo__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.evavideo__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  color: #fff;
  background: rgba(108, 140, 255, 0.24);
  box-shadow: 0 0 0 1.5px rgba(108, 140, 255, 0.7), 0 0 46px -6px rgba(108, 140, 255, 0.85);
  transition: transform 0.25s ease, background 0.25s ease;
}
.evavideo__play svg { margin-left: 4px; }
.evavideo__cover:hover .evavideo__play,
.evavideo__cover:focus-visible .evavideo__play { transform: scale(1.08); background: rgba(108, 140, 255, 0.4); }
.evavideo__cover:focus-visible { outline: 2px solid rgba(108, 140, 255, 0.9); outline-offset: -3px; }
.evavideo__label { position: relative; z-index: 1; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; }
.evavideo__soon[hidden] { display: none; }
.evavideo__soon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2rem; text-align: center;
  color: rgba(226, 233, 255, 0.72); font-size: 0.95rem;
}
@media (max-width: 640px) {
  .evavideo__frame { border-radius: 14px; }
  .evavideo__play { width: 62px; height: 62px; }
}

/* ══════════ §7 · FORMULARIO DE CONTACTO (HubSpot embebido) ══════════ */
/* El form vive en un iframe cross-origin (js-eu1.hsforms.net) con el tema
   claro por defecto de HubSpot (etiquetas oscuras); NO se puede restilar
   desde aquí. Por eso la tarjeta va en CLARO para que se lea, como en la
   home de evahub.ai. */
.try__form {
  max-width: 620px;
  margin: 0 auto 1.4rem;
  text-align: left;
  background: #f7f8fa;
  border-radius: 1.1rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 30px 90px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.try__form .hs-form-frame { min-height: 280px; }
.try__fine a { color: var(--color-brand); }
@media (max-width: 640px) {
  .try__form { padding: 1.4rem; }
}


/* ── DOS TARJETAS DE COBERTURA (#canales) ────────────────────────────────────
   El patrón «Multicanalidad / Integraciones» de Aunoa, con NUESTROS ejes: de
   dónde sale el conocimiento y dónde lo ponemos. Ellos listan canales porque
   mueven conversaciones; nosotros no tenemos más canal que la web, así que
   copiar su eje sería mentir. Todos los glifos van dibujados: cero logos de
   terceros, cero assets que mantener. */
.cover { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cover__card {
  border: 1px solid var(--color-border); border-radius: var(--card-radius);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: 1.3rem;
}
.cover__head { display: flex; flex-direction: column; gap: 0.5rem; }
.cover__head h3 { margin: 0; font-size: 1.35rem; font-weight: var(--primitive-fontWeight-regular); color: var(--color-foreground); }
.cover__head p { margin: 0; font-size: 0.9rem; color: var(--color-body-muted); line-height: 1.5; }
.cover__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.cover__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.55rem; text-align: center; padding: 0.95rem 0.5rem;
  border: 1px solid transparent; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  transition: background var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease);
}
.cover__tile:hover { background: rgba(108,140,255,0.10); border-color: rgba(108,140,255,0.3); }
.cover__tile svg { width: 24px; height: 24px; flex-shrink: 0; color: #a8baff; }
.cover__tile span { font-size: 0.74rem; line-height: 1.3; color: var(--color-foreground); }
.cover__tile--more { background: transparent; border: 1px dashed var(--color-border); }
.cover__tile--more span { color: var(--color-body-muted); }
@media (max-width: 900px) { .cover { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .cover__grid { grid-template-columns: repeat(2, 1fr); } }





/* ── LA BANDA DEL FLUJO (#flujo) ─────────────────────────────────────────────
   Sustituye al diagrama SVG de «Cómo funciona», que no se dibujaba nunca: sus
   once capas se quedaban en opacidad 0 y el visitante veía 1.109 px de negro.
   La ilustración la generó Gemini 3 Pro Image SIN una sola letra, a propósito:
   los rótulos van en HTML encima, así se leen nítidos, se traducen y se
   corrigen sin volver a generar. */
.flujo__marco {
  position: relative; border-radius: var(--card-radius); overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px -36px rgba(0,0,0,0.9);
}
.flujo__img { display: block; width: 100%; height: auto; }
.flujo__pies {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-top: 1.6rem;
}
.flujo__pie { display: flex; flex-direction: column; gap: 0.4rem; }
.flujo__pie b {
  font-size: 1rem; font-weight: 500; color: var(--color-foreground);
  display: flex; align-items: baseline; gap: 0.5rem;
}
.flujo__pie b i {
  font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--color-brand); font-variant-numeric: tabular-nums;
}
.flujo__pie p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-body-muted); }
@media (max-width: 760px) { .flujo__pies { grid-template-columns: 1fr; gap: 1rem; } }


/* ── EL BOT EN UN CANAL (#canales) ───────────────────────────────────────────
   Lo que pedía la referencia de Aunoa: ver el bot respondiendo en el móvil.
   El aparato y la conversación van en HTML, no en una imagen generada, porque
   el texto de una UI generada sale deformado — que es lo que hacía que las
   maquetas anteriores parecieran falsas. La ilustración generada queda de
   fondo, que es la composición que usan ellos.
   🔴 El rótulo «por API» no es decorativo: no servimos WhatsApp. El canal lo
   pone el cliente; nosotros ponemos la respuesta. */
.canal { position: relative; border-radius: var(--card-radius); overflow: hidden;
  border: 1px solid var(--color-border); margin-bottom: 2.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px -36px rgba(0,0,0,0.9); }
.canal__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.canal__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,20,0.94) 0%, rgba(8,10,20,0.72) 52%, rgba(8,10,20,0.4) 100%); }
.canal__cuerpo { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2.5rem;
  align-items: center; padding: 2.6rem 2.4rem; }
/* con el carrusel el texto va arriba y las tarjetas debajo, a todo el ancho */
.canal__cuerpo--pila { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.canal__cuerpo--pila .canal__texto { max-width: min(46rem, 100%); }
.canal__texto { display: flex; flex-direction: column; gap: 0.7rem; max-width: min(34rem, 100%); }
.canal__texto h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: var(--primitive-fontWeight-regular); color: var(--color-foreground); line-height: 1.25; }
.canal__texto p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-body-muted); max-width: 100%; }
.canal__sello { align-self: flex-start; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(108,140,255,0.95); border: 1px solid rgba(108,140,255,0.4); border-radius: 999px; padding: 0.2rem 0.6rem; }

/* el aparato · WhatsApp en TEMA CLARO, que es el que se reconoce.
   La primera versión iba en oscuro y se leía como «un chat»; el beige con
   garabatos, la hora y el doble check son lo que hace que se lea «WhatsApp».
   Todo el texto va en HTML: es una simulación declarada, sin cliente. */
.movil { width: 320px; flex-shrink: 0; border-radius: 38px; padding: 10px;
  background: linear-gradient(160deg, #3a4155, #1b2030 55%, #0f131e);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 38px 76px -22px rgba(0,0,0,0.95); }
.movil__pantalla { position: relative; border-radius: 29px; overflow: hidden; background: #f4f5f8; display: flex; flex-direction: column; min-height: 486px; }

/* barra de estado del sistema */
.movil__sistema { display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.9rem 0.25rem; background: #fff; font-size: 0.58rem; color: #1f2c33; font-weight: 600; }
.movil__sistema span { display: flex; align-items: center; gap: 3px; }
.movil__sistema i { display: block; width: 3px; border-radius: 1px; background: #1f2c33; }
.movil__bateria { width: 15px; height: 8px; border: 1px solid #1f2c33; border-radius: 2px; position: relative; }
.movil__bateria::after { content: ""; position: absolute; inset: 1px; right: 4px; background: #1f2c33; border-radius: 1px; }

/* cabecera de la conversación */
.movil__barra { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.06); }
.movil__atras { color: #4c62d9; font-size: 0.8rem; line-height: 1; }
.movil__avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg,#6c8cff,#a8baff); flex-shrink: 0; }
.movil__quien { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.movil__quien b { font-size: 0.74rem; font-weight: 600; color: #111b21; display: flex; align-items: center; gap: 3px; }
.movil__quien b svg { width: 11px; height: 11px; color: #4c62d9; flex-shrink: 0; }
.movil__quien span { font-size: 0.58rem; color: #667781; }

/* hilo, sobre el fondo beige con garabatos */
.movil__hilo { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.7rem 0.55rem; background-color: #f4f5f8; }
.movil__ellos, .movil__nos { position: relative; font-size: 0.78rem; line-height: 1.42; padding: 0.4rem 0.5rem 0.85rem; border-radius: 8px; max-width: 86%;
  box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); color: #111b21; }
.movil__nos { align-self: flex-end; background: #dfe4fb; border-top-right-radius: 2px; }
.movil__ellos { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.movil__ellos strong { font-weight: 600; }
.movil__hora { position: absolute; right: 7px; bottom: 3px; font-size: 0.5rem; color: #667781; display: flex; align-items: center; gap: 2px; }
.movil__hora svg { width: 11px; height: 11px; color: #4c62d9; }
.movil__fuente { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: 0.66rem; color: #4c62d9; }
.movil__fuente::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* tarjeta de producto dentro de la burbuja */
.movil__fichas { align-self: flex-start; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  background: #fff; border-radius: 8px; border-top-left-radius: 2px; padding: 4px; max-width: 86%; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.movil__ficha { border-radius: 5px; overflow: hidden; background: #f0f2f5; text-align: center; padding-top: 4px; }
.movil__ficha img { display: block; width: 100%; height: 44px; object-fit: contain; background: #fff; }
.movil__ficha b { display: block; font-size: 0.68rem; color: #111b21; font-weight: 600; padding-top: 2px; }
.movil__ficha span { display: block; font-size: 0.6rem; color: #667781; padding-bottom: 3px; }

/* barra de escribir */
.movil__entrada { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem 0.7rem; background: #f4f5f8; }
.movil__entrada i { flex: 1; height: 26px; border-radius: 999px; background: #fff; }
.movil__entrada u { width: 26px; height: 26px; border-radius: 50%; background: #4c62d9; flex-shrink: 0; }

@media (max-width: 880px) {
  .canal__cuerpo { grid-template-columns: 1fr; gap: 1.8rem; padding: 2rem 1.4rem; justify-items: center; }
  .canal__texto { text-align: left; }
  .canal__velo { background: rgba(8,10,20,0.9); }
}


/* ── CARRUSEL DE CASOS (#canales) ────────────────────────────────────────────
   Réplica del patrón de Aunoa —el mismo asistente en varios canales, un caso
   por tarjeta— con nuestros catálogos. Va con scroll-snap: si el JS de los
   puntos fallara, sigue siendo una fila que se arrastra. Lección del diagrama
   de «Cómo funciona», que dependía de una animación y se quedaba en negro. */
.casos { position: relative; }
.casos__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem; scrollbar-width: none; align-items: center;
}
.casos__pista::-webkit-scrollbar { display: none; }
.caso-x { scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2.6rem; align-items: center; padding: 0 0.2rem; }
.caso-x__pie { display: flex; flex-direction: column; gap: 0.7rem; text-align: left; max-width: min(30rem, 100%); }
.caso-x__canal {
  align-self: flex-start; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(108,140,255,0.95); border: 1px solid rgba(108,140,255,0.4);
  border-radius: 999px; padding: 0.18rem 0.6rem;
}
.caso-x__pie b { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; font-weight: 500; color: var(--color-foreground); }
.caso-x__pie p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--color-body-muted); }
/* Pestañas en vez de puntos: los puntos no decían que hubiera cuatro casos ni
   qué había en cada uno. El nombre sí, y de paso hace de índice. */
.casos__puntos {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem;
  padding-bottom: 0.2rem;
}
.casos__punto {
  border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.03); color: var(--color-body-muted);
  font-size: 0.78rem; font-family: inherit; padding: 0.4rem 0.9rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: background var(--primitive-duration-normal) var(--ease), color var(--primitive-duration-normal) var(--ease), border-color var(--primitive-duration-normal) var(--ease);
}
.casos__punto i { font-style: normal; font-size: 0.68rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.casos__punto:hover { color: var(--color-foreground); border-color: rgba(108,140,255,0.4); }
.casos__punto[aria-current="true"] {
  background: rgba(108,140,255,0.16); border-color: rgba(108,140,255,0.55); color: var(--color-foreground);
}

/* tarjeta de seguimiento dentro de la burbuja */
.movil__envio { align-self: flex-start; background: #fff; border-radius: 8px; border-top-left-radius: 2px;
  padding: 0.55rem 0.6rem; max-width: 88%; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); }
.movil__envio b { display: block; font-size: 0.78rem; color: #111b21; margin-bottom: 0.35rem; }
.movil__envio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.movil__envio li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #667781; }
.movil__envio li::before { content: "✓"; width: 11px; height: 11px; border-radius: 2px; background: #4c62d9; color: #fff;
  font-size: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.movil__envio li.es-ahora { color: #111b21; font-weight: 600; }
.movil__envio li.no-aun { color: #a6b0b7; }
.movil__envio li.no-aun::before { content: ""; background: #e2e6e9; }
.movil__envio a { display: block; margin-top: 0.4rem; font-size: 0.6rem; color: #4c62d9; }


/* ── SUPERFICIE NAVEGADOR ────────────────────────────────────────────────────
   Recomendar y comparar pasan en la tienda, no en una app de mensajería: ese
   es el canal donde el cliente ya está mirando el producto. Por eso dos de los
   cuatro casos van en un navegador y no en un móvil. */
.nav-sup { width: min(560px, 100%); flex-shrink: 0; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 34px 70px -24px rgba(0,0,0,0.95); }
.nav-sup__chrome { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; background: #e9ecf2; }
.nav-sup__puntos { display: flex; gap: 4px; }
.nav-sup__puntos i { width: 8px; height: 8px; border-radius: 50%; background: #c3c9d4; }
.nav-sup__url { flex: 1; font-size: 0.74rem; color: #6b7280; background: #fff; border-radius: 999px; padding: 0.16rem 0.6rem; }
.nav-sup__cuerpo { display: flex; min-height: 360px; }
.nav-sup__tienda { flex: 1; padding: 0.8rem; border-right: 1px solid #eceef2; display: flex; flex-direction: column; gap: 0.5rem; }
.nav-sup__rej { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.nav-sup__prod { border: 1px solid #eceef2; border-radius: 8px; overflow: hidden; }
.nav-sup__prod img { display: block; width: 100%; height: 84px; object-fit: contain; background: #fff; }
/* Marcador mientras no haya foto: mejor un bloque neutro que un icono de rota. */
.nav-sup__ph { display: flex; align-items: center; justify-content: center; height: 84px;
  background: linear-gradient(135deg,#f7f8fb,#eef0f6); color: #9aa3bd; }
.nav-sup__ph svg { width: 62%; height: auto; }
.nav-sup__prod b { display: block; font-size: 0.72rem; color: #111827; padding: 0.2rem 0.3rem 0; }
.nav-sup__prod span { display: block; font-size: 0.64rem; color: #6b7280; padding: 0 0.3rem 0.3rem; }
.nav-sup__panel { width: 224px; display: flex; flex-direction: column; background: #fbfbfd; }
.nav-sup__panel-cab { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid #eceef2; font-size: 0.74rem; font-weight: 600; color: #111827; }
.nav-sup__panel-cab span { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg,#6c8cff,#a8baff); }
.nav-sup__panel-hilo { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.55rem; }
.nav-sup__q, .nav-sup__a { font-size: 0.74rem; line-height: 1.45; padding: 0.45rem 0.6rem; border-radius: 8px; }
.nav-sup__q { align-self: flex-end; background: #dfe4fb; color: #1e2536; border-bottom-right-radius: 2px; max-width: 92%; }
.nav-sup__a { align-self: flex-start; background: #fff; color: #1e2536; border: 1px solid #eceef2; border-bottom-left-radius: 2px; }
.nav-sup__a strong { font-weight: 600; }
.nav-sup__cita { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-size: 0.64rem; color: #4c62d9; }
.nav-sup__cita::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

@media (max-width: 900px) {
  .caso-x { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; }
  .caso-x__pie { text-align: left; }
  .nav-sup { width: 100%; max-width: 420px; }
}


/* Los hijos de un grid no encogen por debajo de su contenido salvo que se les
   diga: `min-width: auto` es el valor por defecto. Sin esto, .canal__texto
   medía 736 px dentro de un recuadro de 694 y `overflow: hidden` se comía el
   final de cada línea — se veía «el cliente ya est», «conversaciones reale». */
.canal__cuerpo > *,
.caso-x > *,
.casos,
.casos__pista,
.caso-x { min-width: 0; }
.canal__cuerpo--pila .canal__texto { max-width: min(46rem, 100%); }
.canal__texto p, .canal__texto h3 { overflow-wrap: anywhere; }


/* ── COLLAGE DE PIEZAS (casos) ───────────────────────────────────────────────
   Réplica del patrón real de Aunoa. Mirando sus piezas de cerca no son
   móviles: son TROZOS de interfaz flotando y solapándose sobre fondo claro —
   una burbuja de chat, un emoji grande como tile, un panel aparte con la
   lista, una flecha dibujada y logos asomando por el borde. Todo con sombra.
   Las maquetas de móvil que tenía antes no se leían y no se parecían a eso. */
.col { position: relative; width: min(560px, 100%); background: #f2f3f7;
  border-radius: 20px; padding: 2rem 1.8rem 2.4rem; overflow: hidden;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.1); }
.col::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 18% 8%, rgba(108,140,255,0.13), transparent 60%); }

/* la burbuja de emoji, su recurso más reconocible */
.col__emoji { position: absolute; top: 1.1rem; left: 1.1rem; width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: #e4f7e1; border-radius: 16px; box-shadow: 0 10px 22px -8px rgba(16,24,40,0.28); z-index: 3; }

/* el hilo, sin marco de dispositivo */
.col__hilo { margin-left: 3.6rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.col__q, .col__a { font-size: 0.86rem; line-height: 1.45; padding: 0.6rem 0.75rem; border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgba(16,24,40,0.3); max-width: 84%; }
.col__q { align-self: flex-end; background: #dfe4fb; color: #1b2237; border-bottom-right-radius: 3px; }
.col__a { background: #fff; color: #1b2237; border-bottom-left-radius: 3px; }
.col__a strong { font-weight: 600; }
.col__cita { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; font-size: 0.7rem; color: #4c62d9; }
.col__cita::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* el panel que se sale por el borde izquierdo */
.col__panel { position: relative; z-index: 2; margin: 1.5rem 2.6rem 0 -2.6rem; background: #fff;
  border-radius: 14px; overflow: hidden; box-shadow: 0 20px 44px -16px rgba(16,24,40,0.45); }
.col__panel-cab { background: #1b2237; color: #fff; font-size: 0.78rem; font-weight: 600; padding: 0.65rem 0.9rem; }
.col__fila { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; border-top: 1px solid #eef0f4; }
.col__fila:first-of-type { border-top: 0; }
.col__fila.es-elegida { background: #e7ebfd; }
.col__fila svg { width: 40px; height: 26px; color: #8e97b5; flex-shrink: 0; }
.col__fila div { min-width: 0; }
.col__fila b { display: block; font-size: 0.78rem; color: #111827; }
.col__fila span { display: block; font-size: 0.7rem; color: #6b7280; }
.col__fila em { margin-left: auto; font-style: normal; font-size: 0.68rem; color: #4c62d9; font-weight: 600; flex-shrink: 0; }


/* las tiles que asoman por el borde */
.col__tiles { position: absolute; right: 1.1rem; bottom: 1.1rem; display: flex; gap: 0.45rem; z-index: 3; }
.col__tile { min-width: 52px; height: 34px; padding: 0 0.55rem; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 600; color: #4c62d9; box-shadow: 0 12px 26px -10px rgba(16,24,40,0.4); }

@media (max-width: 560px) {
  .col { padding: 1.5rem 1.1rem 2rem; }
  .col__hilo { margin-left: 0; margin-top: 4.2rem; }
  .col__panel { margin-left: -1.1rem; margin-right: 1.4rem; }
  .col__flecha { display: none; }
}


/* Variante del collage con CAPTURA REAL dentro. El armazón (fondo, sombra,
   tile de emoji, tiles del borde) se queda; lo que cambia es que en vez de
   burbujas dibujadas a mano va la imagen de verdad — una captura de nuestro
   widget, o la pieza generada para el canal que toque. Meter una es cambiar
   el src: el resto ya está montado. */
.col--foto { padding: 0.75rem; display: flex; justify-content: center; align-items: center; }
.col--foto .col__shot { width: auto; height: auto; max-height: 900px; max-width: min(480px, 100%); border-radius: 12px; box-shadow: 0 10px 26px -14px rgba(0,0,0,0.45); }
.col__shot { position: relative; z-index: 2; display: block; width: 100%; height: auto;
  border-radius: 12px; box-shadow: 0 20px 44px -16px rgba(16,24,40,0.5); }
.col--foto .col__emoji { top: 0.6rem; left: 0.6rem; }

/* «Conectado a» — los sistemas que toca cada caso. Es lo que separa a EVA de un
   chatbot: no responde de memoria, consulta el catálogo, el stock, las reglas
   del cliente y la documentación del fabricante, y en algunos casos escribe. El
   chip con punto lleno marca los sistemas donde ESCRIBE. */
.caso-x__sistemas { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; }
.caso-x__sistemas-h {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground) 46%, transparent);
}
.caso-x__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.caso-x__chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; line-height: 1.25; padding: 0.24rem 0.55rem;
  border-radius: 999px; color: color-mix(in srgb, var(--color-foreground) 76%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 14%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}
.caso-x__chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 42%, transparent);
}
.caso-x__chip--escribe {
  color: color-mix(in srgb, var(--color-foreground) 92%, transparent);
  border-color: color-mix(in srgb, #6c8cff 52%, transparent);
  background: color-mix(in srgb, #6c8cff 14%, transparent);
}
.caso-x__chip--escribe::before { background: #8aa4ff; border-color: #8aa4ff; }


/* «Dónde vive» + «Con qué se conecta». Dos paneles antes del carrusel: uno
   contesta dónde se pone el asistente, el otro con qué habla. Sin logos a
   propósito — poner marcas ajenas insinúa un partnership que no tenemos; el
   nombre en texto dice lo mismo y el pie deja claro el criterio real (API). */
.conecta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.conecta__col {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.5rem 1.4rem; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.conecta__h { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.conecta__sub {
  margin: 0; font-size: 0.85rem; line-height: 1.5; max-width: 40ch;
  color: color-mix(in srgb, var(--color-foreground) 64%, transparent);
}
.conecta__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.2rem 0 0; padding: 0; }
.conecta__chip {
  font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: 999px;
  color: color-mix(in srgb, var(--color-foreground) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 16%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}
.conecta__grupos { display: grid; gap: 0.5rem; list-style: none; margin: 0.2rem 0 0; padding: 0; }
.conecta__grupo { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.conecta__grupo span {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
}
.conecta__grupo em {
  font-style: normal; font-size: 0.82rem; line-height: 1.45;
  color: color-mix(in srgb, var(--color-foreground) 84%, transparent);
}
.conecta__pie {
  margin: 0.3rem 0 0; font-size: 0.78rem;
  color: color-mix(in srgb, var(--color-foreground) 56%, transparent);
}
@media (max-width: 560px) {
  .conecta__grupo { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}


/* Para QUIÉN es cada caso, delante del canal. Los cinco van ordenados de la
   venta al postventa: cliente → cliente técnico → comercial → atención. Quien
   mira la landing busca el suyo, no los cinco. */
.caso-x__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.caso-x__quien {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; padding: 0.18rem 0.6rem;
  color: var(--color-foreground);
  background: color-mix(in srgb, #6c8cff 20%, transparent);
  border: 1px solid color-mix(in srgb, #6c8cff 34%, transparent);
}


/* «Qué te garantizamos». Ocupa el hueco que dejó el caso de éxito inventado.
   La idea es de Aunoa —tienen cuatro garantías al final de su ebook— pero
   ellos prometen RESULTADOS (50 % de automatización, x4, CSAT 80 %) y eso no
   lo puede prometer nadie que no haya visto el catálogo del cliente. Aquí sólo
   van compromisos que dependen de nosotros. */
.compromisos {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.sectores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; margin-top: 2.2rem; }
.sectores__h {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-foreground) 46%, transparent);
}
.sectores__lista { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.sectores__lista li {
  font-size: 0.78rem; padding: 0.28rem 0.7rem; border-radius: 999px;
  color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}


/* «Dónde se nota». Mismo papel que la lista de 10 KPIs del ebook de la
   competencia, pero sin cifra: ellos pueden poner un 50 % porque lo han medido
   en su propia operación y nosotros no, así que aquí va la casuística y la
   cifra saldrá de la demo con los datos del cliente. */
.casuisticas {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.casuistica {
  padding: 1.35rem 1.3rem; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 11%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.casuistica h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.casuistica p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--color-body-muted); }


/* «Lo que hemos montado». La cifra manda —es lo primero que lee quien aterriza
   y lo único que no se puede fingir— y debajo va qué se procesó en esa gama. */
.gamas { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.gama {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.6rem 1.5rem; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.gama h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.gama__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0; }
.gama__cifra b {
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
}
.gama__cifra span { font-size: 0.78rem; line-height: 1.35; color: color-mix(in srgb, var(--color-foreground) 58%, transparent); }
.gama p:last-child { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--color-body-muted); }


/* «Los números». Cifra grande, la frase, y la fuente debajo en pequeño: la
   fuente es el elemento que hace que la cifra valga algo, así que va SIEMPRE,
   nunca como pie opcional. */
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.kpi {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.5rem 1.4rem; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.kpi__cifra {
  margin: 0; font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1;
  font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
}
.kpi__texto { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--color-body-muted); }
.kpi__fuente {
  margin: auto 0 0; padding-top: 0.6rem; font-size: 0.68rem; line-height: 1.4;
  border-top: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
  color: color-mix(in srgb, var(--color-foreground) 48%, transparent);
}


/* ═══════════════ MÓVIL · repaso de usabilidad (2026-09-18) ═══════════════ */

@media (max-width: 720px) {
  /* El selector de casos se partía en CUATRO filas de pastillas: para tocar el
     quinto caso había que recorrer media pantalla y la tarjeta ya no se veía.
     Una sola fila que se desliza, con la activa siempre centrada (lo centra
     main.js), y objetivos de toque de ~40px. */
  .casos__puntos {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.1rem;
  }
  .casos__puntos::-webkit-scrollbar { display: none; }
  .casos__punto {
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 0.52rem 0.95rem;
    font-size: 0.8rem;
  }

  /* La captura del chat es el contenido de la tarjeta: recuperar para ella
     cada píxel que se iba en marcos. 258px → ~310px de ancho útil.
     🪤 `justify-items: center` (del bloque de 880px) saca a los hijos del
     estirado y los dimensiona por CONTENIDO: la pista se iba a 579px dentro
     de un padre de 333 y la tarjeta se salía de la pantalla. De ahí el
     `stretch` y los topes de ancho. */
  .canal__cuerpo { padding: 1.6rem 0.9rem; justify-items: stretch; }
  .casos, .casos__pista, .caso-x, .col { width: 100%; max-width: 100%; }
  .col--foto { padding: 0.4rem; }
  .col--foto .col__shot { max-width: 100%; max-height: none; }
  .caso-x { gap: 1.6rem; padding: 0; justify-items: stretch; }
  /* Las tarjetas miden distinto (una captura de BOM es el doble de alta que
     una de WhatsApp) y centradas dejaban ~140px de vacío encima de las cortas.
     Alineadas arriba, todas empiezan donde acaba el selector. */
  .casos__pista { align-items: start; }

  /* Los descansos se comían casi una pantalla entera de negro entre secciones. */
  .banner-break { height: clamp(120px, 20vh, 200px); }
  .breather { min-height: clamp(190px, 30vh, 260px); }
}


/* 🔴 El botón de menú se salía de la pantalla en CUALQUIER móvil: el selector
   de perfil lleva `flex-shrink: 0` y `nowrap`, así que empujaba la hamburguesa
   a x=374 en un viewport de 375 — no había forma de abrir el menú. Aquí el
   selector cede: pierde « y ecommerce», encoge de tipografía y, si aun así no
   cabe (320px), se recorta con puntos suspensivos. Lo que nunca se sacrifica
   es el acceso al menú. */
@media (max-width: 720px) {
  .nav__inner { gap: 0.6rem; }
  .nav__switch { flex-shrink: 1; min-width: 0; padding: 2px; }
  .nav__switch-extra { display: none; }
  .nav__switch-opt {
    font-size: 0.72rem; padding: 0.3rem 0.6rem;
    overflow: hidden; text-overflow: ellipsis;
  }
}


/* Objetivos de toque y tipografía mínima en móvil. Medido sobre la página:
   los cinco pasos del diagrama eran barras de 16px de alto —imposible acertar
   con el pulgar—, el rótulo «Consulta y escribe en» bajaba a 9px y los enlaces
   del pie se quedaban en 33. El dedo pide ~40px y el ojo, 11px. */
@media (max-width: 720px) {
  .how__seg { height: 40px; }
  .how__progress { margin-block: -0.6rem; }

  .caso-x__sistemas-h { font-size: 0.66rem; }
  .caso-x__quien, .caso-x__canal, .canal__sello { font-size: 0.66rem; }
  .caso-x__chip { font-size: 0.76rem; padding: 0.3rem 0.6rem; }

  .footer__cols a, .footer__soon { padding: 0.55rem 0; }
}