/* ============================================================
   RECKONNT LANDING — CSS MAESTRO
   Reemplaza: estilosLandingHero.css + estilosLandingBite.css
             + estilosLandingNueva.css
   Tipografía: Rubik, una sola familia (300-900). La jerarquía sale
               del peso y el tamaño, no de una segunda fuente.
   Iconos:     sprite SVG inline en index.html, trazo unificado por
               la clase .icon. Sin Font Awesome, sin emojis.
   Animaciones: GSAP + ScrollTrigger, con IntersectionObserver de
               respaldo. Todo bajo prefers-reduced-motion.
   ============================================================ */

/* --- 1. DESIGN TOKENS --------------------------------------------------- */
:root {
  /* Paleta base del sistema */
  --sys-black: #27282a;
  --sys-light-violet: #543e7e;
  --sys-dark-violet: #3e3354;
  --sys-lavander: #afa4ce;
  --sys-white: #f4f7fc;
  --sys-light-green: #accdb8;
  --sys-dark-green: #345041;
  --sys-mauve: #e5d0cf;
  --sys-light-gold: #cbc5a5;
  --sys-dark-gold: #767257;
  --sys-coral: #d9615b;
  --sys-light-blue: #a6b4cc;
  --sys-dark-blue: #294457;
  --sys-light-red: #8d485a;
  --sys-dark-red: #64232e;
  --sys-forest: #2f3c41;
  --sys-chalk: #e0e0e0;
  --sys-yellow: #eec315;
  --sys-orange: #e67e22;

  /* Colores principales */
  --c-dark:          var(--sys-black);
  --c-surface:       var(--sys-white);
  --c-card:          #FFFFFF;
  --c-primary:       var(--sys-light-violet);
  --c-primary-h:     #463469;
  --c-accent:        var(--sys-lavander);
  /* Acento propio de Bite: --sys-orange no se usaba en ningun lado del sitio.
     El nucleo de Reckonnt es violeta (confianza, software contable); Bite
     vende para restaurantes, y el apetito responde a calidos. Un solo tono
     calido en la pestana activa, los iconos de feature y los CTA de Bite
     alcanza para que el visitante distinga "mi contabilidad" de "mi
     restaurante" con un solo vistazo de color, sin tocar el resto del sitio. */
  --c-bite-accent:    var(--sys-orange);
  --c-bite-accent-h:  #c96a15;
  --c-bite-accent-bg: rgba(230, 126, 34, 0.16);
  --c-text:          var(--sys-black);
  /* Gris con leve sesgo violeta, no el dark-gold de la paleta: el oliva sobre
     fondo claro se leia terroso al lado del violeta y ensuciaba cada parrafo.
     Contraste 5.9:1 sobre blanco, pasa AA de sobra. */
  --c-muted:         #64627A;
  --c-light:         #FFFFFF;
  --c-border:        rgba(84, 62, 126, 0.14);
  --c-border-dark:   rgba(255, 255, 255, 0.10);

  /* Tipografia: una sola familia para toda la landing. La jerarquia sale del
     peso y el tamano, no de una segunda fuente. --f-display se conserva como
     token aparte para no tener que tocar 40 reglas si algun dia se separa. */
  --f-display: 'Rubik', system-ui, sans-serif;
  --f-body:    'Rubik', system-ui, sans-serif;

  /* Escala de texto */
  --tx-xs:    0.75rem;
  --tx-sm:    0.875rem;
  --tx-base:  1rem;
  --tx-lg:    1.125rem;
  --tx-xl:    1.25rem;
  --tx-2xl:   1.5rem;
  --tx-3xl:   2rem;
  --tx-4xl:   2.75rem;
  /* El titular del hero se queda en 52px como techo: en espanol las palabras
     largas ("contabilidad", "restaurante") empujan a 4 lineas y el subtitulo
     se cae debajo del pliegue si se sube mas. */
  --tx-hero:  clamp(32px, 4.4vw, 52px);

  /* Espaciado */
  --sp-sm:   1rem;
  --sp-lg:   2.5rem;
  --sp-xl:   4rem;
  /* --sp-2xl separa el encabezado de seccion de su contenido; --sp-3xl es el
     padding vertical de las secciones. Reducido para evitar vacios excesivos. */
  --sp-2xl:  clamp(1.5rem, 3vw, 2.25rem);
  --sp-3xl:  clamp(1.75rem, 3.5vw, 2.75rem);

  /* Layout */
  --container: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Sombras */
  --shadow-md: 0 4px 16px rgba(14,12,27,0.10), 0 2px 8px rgba(14,12,27,0.06);
  --shadow-lg: 0 12px 40px rgba(14,12,27,0.14), 0 4px 16px rgba(14,12,27,0.08);

  /* Transiciones */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Altura del nav: el hero la usa para su padding superior y para posicionar
     la figura, asi que los tres valores tienen que moverse juntos. */
  --nav-height:          72px;
  --nav-height-scrolled: 58px;
  --nav-height-mobile:   56px;
}

/* Entradas del hero. Viven junto a los tokens porque las usan tanto el hero
   como los revelados de seccion. */
@keyframes lineReveal {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* --- SPLASH SCREEN (page-loader / institutional clean) ------------------ */
@keyframes loaderFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
  }
}
@keyframes logoSoftPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes barSlideClean {
  0% { left: -45%; width: 35%; }
  50% { width: 60%; }
  100% { left: 100%; width: 35%; }
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sys-white, #f4f7fc);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

#page-loader.is-hidden {
  animation: loaderFadeOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2rem 2.25rem;
  background: #ffffff;
  border: 1px solid #dde1ec;
  border-radius: 0.8rem;
  box-shadow: 0 4px 20px rgba(62, 51, 84, 0.08);
  width: 100%;
  max-width: 240px;
}

.page-loader__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: logoSoftPulse 2s ease-in-out infinite;
}

.page-loader__name {
  height: 18px;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

.page-loader__bar-wrap {
  width: 120px;
  height: 3px;
  background: #e3e6ef;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.page-loader__bar-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--sys-lavander, #afa4ce) 0%, var(--sys-light-green, #accdb8) 100%);
  border-radius: 99px;
  animation: barSlideClean 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.page-loader__status {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sys-dark-violet, #3e3354);
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* --- 2. RESET & BASE ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--tx-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Focus visible */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre las secciones oscuras (Bite, CTA final, footer) el violeta de marca
   no despega del fondo: ahí el foco va en lavanda. */
.bite :focus-visible,
.site-footer :focus-visible,
.nav-sheet :focus-visible {
  outline-color: var(--c-accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Neutraliza toda animación y transición en un solo lugar en vez de ir
     selector por selector: así una tarjeta nueva no queda fuera por olvido. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Red de seguridad: lo que entra animado desde opacity:0 tiene que quedar
     visible sí o sí. Acortar la duración no basta si algo dejó el estado
     inicial aplicado. */
  .hero__line,
  .hero__subtitle,
  .hero__ctas,
  .hero__visual,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 3. LAYOUT HELPERS -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1200px) {
  .container { padding-inline: 0rem; }
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(84, 62, 126, 0.08);
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  border: 1px solid var(--c-border);
}

.section-eyebrow svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.section-eyebrow--light {
  color: var(--c-accent);
  background: rgba(175, 164, 206, 0.12);
  border-color: rgba(175, 164, 206, 0.25);
}

/* --- 4. BOTONES GLOBALES ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: var(--tx-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: 99px;
  border: 2px solid transparent;
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), box-shadow var(--t-base),
              transform var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-light);
  border-color: var(--c-primary);
  box-shadow: 0 4px 16px rgba(84, 62, 126, 0.30);
}
.btn--primary:hover {
  background: var(--c-primary-h);
  border-color: var(--c-primary-h);
  box-shadow: 0 8px 24px rgba(84, 62, 126, 0.40);
}

/* CTA propios de Bite: mismo peso visual que --primary, acento calido en vez
   de violeta, para que el camino a "mi restaurante" se distinga del camino
   a "mi contabilidad" sin agregar una sola palabra de copy. */
.btn--bite {
  background: var(--c-bite-accent);
  color: var(--c-light);
  border-color: var(--c-bite-accent);
  box-shadow: 0 4px 16px rgba(230, 126, 34, 0.30);
}
.btn--bite:hover {
  background: var(--c-bite-accent-h);
  border-color: var(--c-bite-accent-h);
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.40);
}

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-border);
}
.btn--ghost:hover {
  border-color: var(--c-primary);
  background: rgba(84, 62, 126, 0.06);
}

.btn--lg {
  font-size: var(--tx-base);
  padding: 0.95rem 2rem;
}

.btn--sm {
  font-size: var(--tx-xs);
  padding: 0.55rem 1.1rem;
}

/* --- 5. HOVER-LIFT ------------------------------------------------------ */
.hover-lift {
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* --- 6. SCROLL REVEAL --------------------------------------------------- */
[data-reveal] {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal].is-revealing {
  opacity: 1;
  transform: translateY(0);
}

/* --- 7. NAV ------------------------------------------------------------- */
/* El nav arranca transparente sobre el degradado del hero y solo se opaca al
   hacer scroll: asi el hero se lee de corrido y la barra no parte la imagen. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height var(--t-slow), background var(--t-slow), box-shadow var(--t-base);
}

.nav--scrolled {
  height: var(--nav-height-scrolled);
  background: rgba(244, 247, 252, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(39, 40, 42, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo-img { height: 28px; width: auto; }

.nav__links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
}

.nav__link {
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--c-text);
  opacity: 0.75;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: opacity var(--t-fast), background var(--t-fast);
}
.nav__link:hover {
  opacity: 1;
  background: rgba(84, 62, 126, 0.07);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav__login {
  color: var(--c-text);
  font-size: var(--tx-sm);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  border: 1px solid rgba(84, 62, 126, 0.25);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.nav__login:hover {
  color: var(--c-primary);
  border-color: rgba(84, 62, 126, 0.55);
  background: rgba(84, 62, 126, 0.06);
}

/* Burger */
.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.nav__burger:hover { background: rgba(255,255,255,0.10); }
.nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

@media (min-width: 1024px) {
  .nav__burger { display: none; }
}

/* Bajo 1024px solo queda el logo y la hamburguesa. "Acceder" y "Ver planes"
   ya viven dentro del panel lateral; dejarlos también en la barra sumaba
   ~200px que no caben en 375 y empujaban la hamburguesa fuera de pantalla. */
@media (max-width: 1023px) {
  .nav__login,
  .nav__actions > .btn { display: none; }
}

@media (max-width: 479px) {
  .nav__logo-img { height: 22px; }
}

/* Nav Sheet (mobile drawer) */
.nav-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 21, 0.75);
  backdrop-filter: blur(6px);
  z-index: 1010;
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav-sheet-overlay--visible {
  display: block;
  opacity: 1;
}

.nav-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: #ffffff;
  border-left: 1px solid #e3e6ef;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.1);
  z-index: 1020;
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1.25rem;
  overflow-y: auto;
}
.nav-sheet--open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.nav-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e3e6ef;
}

.nav-sheet__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.nav-sheet__brand-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.nav-sheet__brand-text {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sys-dark-violet);
  letter-spacing: -0.02em;
}

.nav-sheet__close {
  font-size: 1.25rem;
  color: var(--sys-lavander);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f5f9;
  border: 1px solid #e3e6ef;
  transition: all var(--t-fast);
}
.nav-sheet__close:hover {
  background: #e9ecef;
  color: var(--sys-dark-violet);
  transform: rotate(90deg);
}

.nav-sheet__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.nav-sheet__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sys-dark-violet);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid #e3e6ef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all var(--t-fast);
}

.nav-sheet__link .icon {
  width: 18px;
  height: 18px;
  color: var(--sys-lavander);
  flex-shrink: 0;
  transition: transform var(--t-fast), color var(--t-fast);
}

.nav-sheet__link:hover {
  color: var(--sys-light-violet);
  background: #f9f9fc;
  border-color: var(--sys-lavander);
  transform: translateX(4px);
}

.nav-sheet__link:hover .icon {
  color: var(--sys-light-violet);
  transform: scale(1.15);
}

.nav-sheet__divider {
  height: 1px;
  background: #e3e6ef;
  margin: 0.25rem 0;
}

.nav-sheet__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nav-sheet__ctas .btn {
  justify-content: center;
  font-size: 0.9rem;
  padding: 0.85rem;
  border-radius: 999px;
}

.btn--login-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-primary);
  background: rgba(84, 62, 126, 0.07);
  border: 1.5px solid var(--c-primary);
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  transition: all var(--t-base);
}

.btn--login-mobile:hover {
  background: var(--c-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(84, 62, 126, 0.35);
}

.btn--login-mobile svg {
  color: currentColor;
  flex-shrink: 0;
}

/* --- 8. HERO ------------------------------------------------------------ */
/* Hero claro: el degradado lavanda se disuelve en el blanco de la pagina
   antes de llegar al final, para que la franja de logos siga sin costura. */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  padding-bottom: 40px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(175, 164, 206, 0.14) 0%, rgba(244, 247, 252, 0) 60%);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__text {
  max-width: 540px;
  padding: 32px 0 10px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(84, 62, 126, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.15);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
}

.hero__badge svg {
  width: 14px;
  height: 14px;
  color: var(--c-primary);
  flex-shrink: 0;
}

.hero__headline {
  margin: 0;
  font-weight: 700;
  font-size: var(--tx-hero);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Revelado por linea: el wrapper recorta (overflow:hidden) y la linea interna
   entra animada con lineReveal; la 2da linea repite el efecto con su propio
   delay y color, dando la cascada de dos lineas. */
.hero__line-wrap {
  display: block;
  overflow: hidden;
}

.hero__line {
  display: block;
  color: var(--c-text);
  animation: lineReveal 0.3s var(--ease-out-expo) both;
  margin-bottom: 4px;
}

.hero__line-wrap:nth-child(2) .hero__line {
  animation-delay: 0.15s;
  color: var(--c-primary);
}

/* Coreografia de entrada del hero, escalonada por delay: linea 1 en 0s,
   linea 2 en 0.15s, visual y subtitulo en 0.3s, ctas en 0.6s. Si se toca un
   delay, revisar que la secuencia completa siga teniendo sentido. */
.hero__subtitle {
  margin: 24px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--c-text);
  opacity: 0.75;
  animation: fadeUp 0.3s ease both;
  animation-delay: 0.3s;
}

.hero__subtitle strong { font-weight: 600; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  animation: fadeUp 0.3s ease both;
  animation-delay: 0.6s;
}

/* Franja unica en lugar de lista suelta: los 3 puntos comparten un solo
   contenedor con separadores, asi se leen como un bloque de confianza y no
   como texto flotante. overflow-x + scrollbar oculta es la salvaguarda en
   pantallas muy angostas: nunca se envuelve a una segunda linea, en el peor
   caso se desliza. */
.hero__trust {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin: 22px 0 0;
  padding: 10px 6px;
  list-style: none;
  background: rgba(84, 62, 126, 0.06);
  border: 1px solid rgba(84, 62, 126, 0.14);
  border-radius: var(--radius-md);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  animation: fadeUp 0.3s ease both;
  animation-delay: 0.7s;
}

.hero__trust::-webkit-scrollbar { display: none; }

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  border-right: 1px solid rgba(84, 62, 126, 0.16);
}

.hero__trust li:last-child {
  border-right: none;
}

.hero__trust .icon {
  color: var(--sys-dark-green);
  flex-shrink: 0;
}

.hero__bite-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  animation: fadeUp 0.3s ease both;
  animation-delay: 0.8s;
}

.hero__bite-link .icon { flex-shrink: 0; }

.hero__bite-link:hover { text-decoration: underline; }

/* El visual ocupa todo el lado derecho de la seccion, sin marco — se funde
   con el fondo claro de la pagina en vez de vivir dentro de una tarjeta.
   Dentro conviven dos capas: el anillo 3D de dashboards (CSS puro, aca
   abajo) y la figura real (mujer-hero.webp). */
.hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(50%, 820px);
  pointer-events: none;
  animation: fadeUp 0.4s ease both;
  animation-delay: 0.3s;
}

/* -------------------------------------------------------------------------
   Anillo 3D de dashboards: las tarjetas estan paradas en un circulo alrededor
   de un eje vertical y ese circulo entero gira sin parar. La de al frente se
   ve plana y nitida; las de los costados se ven de canto (foreshortening
   natural del rotateY) y las de atras quedan tapadas — todo eso sale solo del
   3D, no hay que animar cada tarjeta por separado, solo el anillo completo.
   ------------------------------------------------------------------------- */
.hero__dash-stage {
  position: absolute;
  right: 16%;
  top: 8%;
  bottom: 8%;
  width: 72%;
  z-index: 0;
  perspective: 1400px;
  --dash-ring-radius: 220px;
}

.hero__dash-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: heroRingSpin 24s linear infinite;
}

.hero__dash-card {
  position: absolute;
  top: 15%;
  left: 30%;
  width: 46%;
  height: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transform: rotateY(calc(60deg * var(--i))) translateZ(var(--dash-ring-radius));
}

.hero__dash {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 16px 32px rgba(39, 40, 42, 0.05));
}

@keyframes heroRingSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}

/* La figura real (mujer-hero.webp), sobre el anillo 3D de dashboards. */
.hero__figure {
  position: absolute;
  right: 15%;
  top: calc(var(--nav-height) + 0px);
  z-index: 1;
  height: 122%;
  width: auto;
}

/* El nav es fixed sobre toda la pagina: sin scroll-margin-top, saltar a
   cualquiera de estas secciones por ancla (el menu, el menu movil, un link
   externo) deja su titulo tapado detras del nav. #inicio no lo necesita
   (el propio .hero ya reserva var(--nav-height) como padding-top) y
   #soporte tiene el suyo propio mas abajo. */
#estadisticas,
#clientes,
#problema,
#solucion,
#servicios,
#bite,
#resultados,
#planes,
#faq,
#contacto {
  scroll-margin-top: var(--nav-height);
}

/* --- 8. STATS STRIP ----------------------------------------------------- */
.stats-strip {
  position: relative;
  z-index: 10;
  width: 100%;
}

.stats-strip--ribbon {
  background-color: #231b31;
  background-image: radial-gradient(circle at 50% 50%, rgba(175, 164, 206, 0.16) 0%, transparent 65%), linear-gradient(135deg, #2c233f 0%, #1a1525 100%);
  border-top: 1px solid rgba(175, 164, 206, 0.22);
  border-bottom: 1px solid rgba(175, 164, 206, 0.22);
  padding: 1.6rem 0 1.75rem;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(39, 40, 42, 0.12);
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .stats-strip__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.stats-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.25rem 1rem;
  position: relative;
}

@media (min-width: 768px) {
  .stats-strip__item:not(:last-child) {
    border-right: 1px solid rgba(175, 164, 206, 0.16);
  }
}

.brand-strip__stat-num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stats-strip__text {
  font-size: var(--tx-sm);
  color: #e5dff7;
  font-weight: 600;
  opacity: 0.92;
  max-width: 19ch;
  text-align: center;
  margin-top: 0.4rem;
  line-height: 1.35;
}

/* --- 9. BRAND STRIP (LOGOS CAROUSEL) ------------------------------------ */
.brand-strip-section {
  background: linear-gradient(180deg, #eef2f8 0%, #e6edf5 100%);
  border-top: 1px solid rgba(84, 62, 126, 0.08);
  border-bottom: 1px solid rgba(84, 62, 126, 0.08);
  padding: 1.75rem 0 2rem;
  margin-top: 0;
}

.brand-strip__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 1.25rem;
}

.brand-strip__title {
  margin: 0;
  font-size: var(--tx-3xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
}

.brand-strip__subtitle {
  margin: 0.5rem 0 0;
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.5;
}

/* padding-top deja hueco propio para el badge (position:absolute, top:1rem)
   antes de que arranque la fila de logos — si comparten el mismo hueco el
   badge queda flotando a la misma altura que los logos en vez de encima. */
.brand-strip-card {
  position: relative;
  background: var(--c-light);
  border: 1px solid rgba(84, 62, 126, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(39, 40, 42, 0.05), 0 2px 8px rgba(84, 62, 126, 0.04);
  padding: 3.25rem 1.5rem 1.75rem;
  text-align: center;
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}

.brand-strip-card:hover {
  box-shadow: 0 14px 38px rgba(39, 40, 42, 0.08), 0 4px 12px rgba(84, 62, 126, 0.06);
}

/* Badge "+120 negocios": mismo patron que .hero__badge, ancorado arriba a la
   derecha de la tarjeta en vez de competir por espacio con los logos. */
.brand-strip-card__badge {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(84, 62, 126, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.15);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary);
}

.brand-strip-card__badge .icon { flex-shrink: 0; }

.brand-strip__carousel {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.brand-strip__track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  will-change: transform;
}

.brand-strip__logo {
  height: 68px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.brand-strip__logo.is-center,
.brand-strip__logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.12);
}

/* --- 10. SECCIÓN PROBLEMA ----------------------------------------------- */
/* Alternancia de fondo: blanco y gris se turnan seccion a seccion para que
   ninguna franja larga quede pegada a otra del mismo tono. El orden es
   brand(blanco) - problema(gris) - servicios(blanco) - bite(oscuro) -
   resultados(gris) - planes(blanco) - faq(gris). Si se agrega o reordena
   una seccion hay que revisar toda la cadena. */
@keyframes alertPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.85; }
}

@keyframes connectorRingPulse {
  0% { box-shadow: 0 0 0 0 rgba(84, 62, 126, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(84, 62, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 62, 126, 0); }
}

.problema {
  background: radial-gradient(circle at 50% 10%, rgba(217, 97, 91, 0.05) 0%, rgba(84, 62, 126, 0.03) 40%, #ffffff 80%);
  padding: 1.75rem 0 2rem;
}

.problema__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 16px;
  background: rgba(217, 97, 91, 0.12);
  border: 1px solid rgba(217, 97, 91, 0.28);
  border-radius: 999px;
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d9615b;
  box-shadow: 0 2px 10px rgba(217, 97, 91, 0.12);
  margin-bottom: 0.85rem;
}

.problema__kicker-icon {
  color: #d9615b;
  flex-shrink: 0;
  animation: alertPulse 2s infinite ease-in-out;
}

.problema__title {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-sm);
}

.text-coral {
  color: var(--sys-coral);
  font-weight: 900;
}

/* Usado por .pillars__title y .solucion__title — vivia referenciado en el
   markup pero sin regla propia, cayendo al color heredado. */
.text-violet {
  color: var(--sys-light-violet);
  font-weight: 900;
}

.problema__subtitle {
  max-width: 560px;
  font-size: 18px;
  color: var(--sys-dark-blue);
  line-height: 1.6;
}

/* --- HERO DEL PROBLEMA: texto 50% / foto + alertas flotantes 50% --------- */
.problema__hero {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: var(--sp-2xl);
}

@media (min-width: 900px) {
  .problema__hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .problema__hero-text,
  .problema__hero-visual { flex: 1 1 50%; min-width: 0; }
}

.problema__title {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--c-text);
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin-bottom: var(--sp-sm);
}

.problema__hero-visual {
  position: relative;
}

.problema__hero-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(175, 164, 206, 0.22) 0%, rgba(217, 97, 91, 0.10) 100%);
  box-shadow: 0 20px 50px rgba(39, 40, 42, 0.10);
}

.problema__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.problema__alert {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 190px;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  box-shadow: 0 10px 30px rgba(39, 40, 42, 0.14);
  animation: alertFloat 4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.problema__alert-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 97, 91, 0.14);
  color: var(--sys-coral);
}

.problema__alert-text { display: flex; flex-direction: column; }
.problema__alert-text strong { font-size: 12px; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.problema__alert-text span { font-size: 11px; color: var(--c-muted); line-height: 1.3; }

.problema__alert--1 { top: 8%; left: 4%; }
.problema__alert--2 { top: -6%; right: 4%; }
/* max() y no el porcentaje solo: el offset negativo saca la tarjeta del
   ancho de la imagen, y en las mismas anchuras donde el .container recupera
   padding (ver LAYOUT HELPERS) ese padding alcanza para -20px pero no para
   el -10%/-14% que pide el diseño en pantallas grandes — sin el tope, la
   tarjeta se recorta contra el borde real de la pantalla. */
.problema__alert--3 { bottom: 10%; right: max(-4%, -20px); }
.problema__alert--4 { top: 42%; left: max(-2%, -20px); }

@media (min-width: 900px) {
  .problema__alert--1 { left: max(-8%, -20px); }
  .problema__alert--2 { right: max(-6%, -20px); }
  .problema__alert--3 { right: max(-10%, -20px); }
  .problema__alert--4 { left: max(-14%, -20px); }
}

@media (max-width: 767px) {
  .problema__alert {
    padding: 0.4rem 0.55rem;
    max-width: 130px;  /* Más angosta para no tapar el modelo */
    gap: 0.35rem;
  }
  .problema__alert-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 5px;
  }
  .problema__alert-icon svg { width: 12px; height: 12px; }
  .problema__alert-text strong { font-size: 10px; white-space: nowrap; }
  .problema__alert-text span { font-size: 9px; }
  /* Reubicadas en las 4 esquinas sin salirse de la imagen */
  .problema__alert--1 { top: 5%; left: 3%; }
  .problema__alert--2 { top: 5%; right: 3%; }
  .problema__alert--3 { bottom: 5%; right: 3%; }
  .problema__alert--4 { bottom: 5%; left: 3%; top: auto; }
}

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

@media (prefers-reduced-motion: reduce) {
  .problema__alert { animation: none; }
}

.problema__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: var(--sp-xl);
}

@media (min-width: 640px) {
  .problema__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Franja de cierre: la conclusion de los 3 problemas de arriba, en una sola
   fila que no vuelve a repetir tarjetas — foco (icono + frase corta) y
   contexto (frase larga) separados por un divisor en vez de otra grilla. */
.problema__insight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  background: rgba(84, 62, 126, 0.06);
  border: 1px solid rgba(84, 62, 126, 0.16);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: var(--sp-2xl);
}

.problema__insight-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  color: var(--c-light);
}

.problema__insight-lead {
  flex: 1 1 260px;
  font-size: var(--tx-lg);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.35;
}

.problema__insight-desc {
  flex: 2 1 320px;
  font-size: var(--tx-base);
  color: var(--c-muted);
  line-height: 1.55;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(84, 62, 126, 0.18);
}

@media (max-width: 640px) {
  .problema__insight-desc { padding-left: 0; border-left: none; }
}

.problema__item {
  position: relative;
  background: var(--c-card);
  border-bottom: 3px solid var(--sys-coral);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(39, 40, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.problema__item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(217, 97, 91, 0.16), 0 4px 12px rgba(39, 40, 42, 0.06);
}

.problema__item-icon,
.problema__item-title,
.problema__item-desc {
  position: relative;
  z-index: 1;
}

.problema__item-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(217, 97, 91, 0.16) 0%, rgba(217, 97, 91, 0.06) 100%);
  border: 1px solid rgba(217, 97, 91, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d9615b;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease;
}

.problema__item:hover .problema__item-icon {
  transform: scale(1.15) rotate(-4deg);
  background: rgba(217, 97, 91, 0.22);
}

.problema__item-icon svg { width: 22px; height: 22px; }

.problema__item-title {
  font-family: var(--f-display);
  font-size: var(--tx-base);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
}

.problema__item-desc {
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.6;
}

/* --- 10B. ANTES / AHORA ------------------------------------------------ */
/* Franja "Antes y después": mismo patron de pill que .problema__kicker,
   pero neutro (violeta) en vez de coral porque acá no se anuncia un
   problema, se anuncia una transicion. */
.antes-ahora__kicker-wrap {
  text-align: center;
  margin-top: var(--sp-xl);
}

.antes-ahora__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 16px;
  background: rgba(84, 62, 126, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.2);
  border-radius: 999px;
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}

/* max-width mas ancho que antes (880px) para que frases largas como
   "Cierres de caja que toman demasiado tiempo" entren en una sola linea
   por columna en vez de partirse a la mitad. */
.antes-ahora__grid {
  position: relative;
  display: grid;
  /* 3 columnas: card | conector | card. En desktop toman 1fr auto 1fr.
     En móvil se mantiene una columna única y el conector pasa a estático. */
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  max-width: 1200px;
  margin-block-start: 0.75rem;
  margin-inline: auto;
  align-items: center;
}

@media (min-width: 860px) {
  .antes-ahora__grid { grid-template-columns: 1fr auto 1fr; gap: 2rem; }
}

.antes-ahora__col {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 0;  /* Evita overflow en viewports angostos */
  width: 100%;
}

@media (min-width: 860px) {
  .antes-ahora__col { flex-direction: row; align-items: stretch; }
}

@media (max-width: 859px) {
  .antes-ahora__col--despues .antes-ahora__photo {
    order: -1;
  }
}

/* Sin Reckonnt: fondo mauve (#E5D0CF) muy suave, sin rojo solido */
.antes-ahora__col--antes {
  background: linear-gradient(180deg, rgba(229, 208, 207, 0.55) 0%, rgba(229, 208, 207, 0.22) 100%);
  border: 1.5px solid rgba(217, 97, 91, 0.25);
  box-shadow: 0 4px 20px rgba(217, 97, 91, 0.06);
}

/* Con Reckonnt: fondo verde SRI (#ACCDB8) muy suave */
.antes-ahora__col--despues {
  background: linear-gradient(160deg, rgba(172, 205, 184, 0.32) 0%, rgba(172, 205, 184, 0.12) 100%);
  border: 2px solid rgba(52, 80, 65, 0.32);
  box-shadow: 0 16px 44px rgba(52, 80, 65, 0.12), 0 4px 14px rgba(84, 62, 126, 0.08);
}

.antes-ahora__photo {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 210px;
}

@media (min-width: 860px) {
  .antes-ahora__photo { flex: 0 0 32%; width: auto; aspect-ratio: auto; max-height: none; align-self: stretch; }
}

.antes-ahora__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.antes-ahora__content {
  flex: 1 1 auto;
  padding: 1.5rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (min-width: 860px) {
  .antes-ahora__content { padding: 1.75rem 1.5rem 2rem; }
}

@media (min-width: 860px) {
  .antes-ahora__col--despues { transform: scale(1.025); }
  .antes-ahora__col--despues:hover { transform: scale(1.045); box-shadow: 0 20px 48px rgba(52, 80, 65, 0.2); }
}

.antes-ahora__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1.15rem;
}

.antes-ahora__col--antes .antes-ahora__label { color: var(--sys-coral); }
.antes-ahora__col--despues .antes-ahora__label { color: var(--sys-dark-green); }

.antes-ahora__list {
  display: flex;
  flex-direction: column;
}

.antes-ahora__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.5;
  padding-block: 0.65rem;
  border-bottom: 1px solid rgba(39, 40, 42, 0.08);
}

.antes-ahora__list li:last-child { border-bottom: none; padding-bottom: 0; }
.antes-ahora__list li:first-child { padding-top: 0; }

.antes-ahora__col--antes .antes-ahora__list li { color: var(--c-muted); }
.antes-ahora__col--despues .antes-ahora__list li { color: #1e293b; font-weight: 600; }

.antes-ahora__footer {
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(39, 40, 42, 0.08);
}

.antes-ahora__col--antes .antes-ahora__footer { color: var(--sys-coral); }
.antes-ahora__col--despues .antes-ahora__footer { color: var(--sys-dark-green); }

/* Insignia circular rellena */
.antes-ahora__icon-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.antes-ahora__col--antes .antes-ahora__icon-badge { background: var(--sys-coral); }
.antes-ahora__col--despues .antes-ahora__icon-badge { background: var(--sys-dark-green); }

.antes-ahora__label .antes-ahora__icon-badge { width: 32px; height: 32px; margin-top: 0; }

/* Conector Central con animación de pulso */
.antes-ahora__connector {
  display: flex;
  position: static;  /* El grid de 3 columnas lo ubica automáticamente */
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: var(--c-light);
  box-shadow: 0 4px 16px rgba(84, 62, 126, 0.35);
  animation: connectorRingPulse 2.5s infinite ease-in-out, connectorWiggle 3s ease-in-out infinite;
  z-index: 2;
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 400px) {
  .antes-ahora__connector {
    transform: rotate(90deg);
  }
}

@keyframes connectorWiggle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .antes-ahora__connector { animation: none; }
}

/* --- 11. SECCIÓN SOLUCIÓN & DASHBOARD SHOWCASE -------------------------- */
.solucion {
  background: var(--c-light);
  padding: var(--sp-3xl) 0;
}

.solucion__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .solucion__inner { grid-template-columns: 45% 1fr; gap: 3.5rem; align-items: end; }
}

.solucion__text .section-eyebrow {
  margin-bottom: 0.85rem;
}

.solucion__title {
  font-family: var(--f-display);
  font-size: var(--tx-3xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: 0.75rem;
}

.solucion__subtitle {
  font-size: var(--tx-lg);
  color: var(--sys-dark-blue);
  margin-bottom: 2rem;
}

.solucion__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 560px) {
  .solucion__benefits { grid-template-columns: 1fr 1fr; }
}

.solucion__benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.solucion__benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(84, 62, 126, 0.10);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solucion__benefit-title {
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.2rem;
}

.solucion__benefit-desc {
  font-size: var(--tx-xs);
  color: var(--c-muted);
  line-height: 1.5;
}

.solucion__dashboard-card {
  position: relative;
}

.solucion__dashboard-card img {
  width: 100%;
  display: block;
}

.solucion__metric {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  box-shadow: 0 16px 36px rgba(39, 40, 42, 0.22), 0 2px 8px rgba(39, 40, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: metricFloat 5s ease-in-out infinite;
}

.solucion__metric--sales { animation-delay: 0s; }
.solucion__metric--invoices { animation-delay: 1.6s; }
.solucion__metric--profit { animation-delay: 3.2s; }

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

@media (prefers-reduced-motion: reduce) {
  .solucion__metric { animation: none; }
}

.solucion__metric-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solucion__metric--sales .solucion__metric-icon { background: rgba(84, 62, 126, 0.12); color: var(--c-primary); }
.solucion__metric--invoices .solucion__metric-icon { background: rgba(41, 68, 87, 0.12); color: var(--sys-dark-blue); }
.solucion__metric--profit .solucion__metric-icon { background: rgba(52, 80, 65, 0.14); color: var(--sys-dark-green); }

.solucion__metric-body { display: flex; flex-direction: column; gap: 0.2rem; }
.solucion__metric-label { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.solucion__metric-val { font-size: var(--tx-lg); font-weight: 800; color: var(--c-text); line-height: 1; }

.solucion__metric-delta {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}

.solucion__metric--sales .solucion__metric-delta { background: rgba(84, 62, 126, 0.14); color: var(--c-primary); }
.solucion__metric--profit .solucion__metric-delta { background: rgba(52, 80, 65, 0.14); color: var(--sys-dark-green); }

.solucion__metric-sub { font-size: 11px; color: var(--c-muted); }

.solucion__metric--sales { top: 6%; right: 4%; }
.solucion__metric--invoices { top: 42%; left: 4%; }
.solucion__metric--profit { bottom: 6%; right: 18%; }

@media (max-width: 639px) {
  .solucion__metric {
    padding: 0.45rem 0.65rem;
    gap: 0.45rem;
    border-radius: var(--radius-sm);
  }
  .solucion__metric-icon {
    width: 26px;
    height: 26px;
  }
  .solucion__metric-icon svg { width: 14px; height: 14px; }
  .solucion__metric-label { font-size: 10px; }
  .solucion__metric-val { font-size: var(--tx-sm); }
  .solucion__metric-delta { font-size: 9px; padding: 1px 4px; }
  .solucion__metric-sub { font-size: 9px; }
  .solucion__metric--sales { top: 4%; right: 4%; }
  .solucion__metric--invoices { top: 40%; left: 4%; }
  .solucion__metric--profit { bottom: 4%; right: 8%; }
}

@media (min-width: 1024px) {
  .solucion__metric--sales { top: -10%; right: max(-8%, -20px); }
  .solucion__metric--invoices { top: 40%; left: max(-2%, -20px); }
  .solucion__metric--profit { bottom: -8%; right: 14%; }
}

/* --- 12. PILLARS / MÓDULOS ---------------------------------------------- */
.pillars {
  background: linear-gradient(180deg, #f4f7fc 0%, #ebf0f8 100%);
  border-top: 1px solid rgba(84, 62, 126, 0.06);
  border-bottom: 1px solid rgba(84, 62, 126, 0.08);
  padding: 1.75rem 0 2rem;
}

.pillars__head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto var(--sp-xl);
}

.pillars__title {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--sp-sm);
}

.pillars__subtitle {
  font-size: var(--tx-lg);
  color: var(--c-muted);
  line-height: 1.65;
  margin-top: var(--sp-sm);
}

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

.pillar:hover {
  border-color: rgba(84, 62, 126, 0.30);
  box-shadow: 0 12px 40px rgba(84, 62, 126, 0.12);
  transform: translateY(-3px);
}

.pillar__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.pillar__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(84, 62, 126, 0.10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  transition: background var(--t-base);
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar:hover .pillar__icon { background: rgba(84, 62, 126, 0.18); }

.pillar__body { flex: 1; }

.pillar__title {
  font-family: var(--f-display);
  font-size: var(--tx-xl);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.pillar__desc {
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.6;
}

/* Card arc stage */
.card-arc-stage {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 160px;
  padding-top: 1rem;
}

.card-arc-deck {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.card-arc-item {
  position: absolute;
  width: 130px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: var(--shadow-md);
  transform-origin: bottom center;
  transition: transform 0.40s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--t-base), z-index 0s;
  cursor: pointer;
  user-select: none;
}
.card-arc-item:hover { box-shadow: var(--shadow-lg); }

.card-arc-item__badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-primary);
  background: rgba(84, 62, 126,0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  width: fit-content;
}

.card-arc-item__icon {
  color: var(--c-primary);
  display: flex;
}
.card-arc-item__icon svg { width: 18px; height: 18px; }

.card-arc-item__title {
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}

.card-arc-item__desc {
  font-size: 0.65rem;
  color: var(--c-muted);
  line-height: 1.4;
}

.pillars__kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 14px;
  background: rgba(84, 62, 126, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.15);
  border-radius: 999px;
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-primary);
  margin-bottom: 0.85rem;
}

/* Pillar card con posicionamiento e indicador superior */
.pillar {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  cursor: default;
}

@media (max-width: 640px) {
  .pillar {
    padding: 1.25rem 1.25rem 1rem;
  }
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.7;
  transition: opacity var(--t-base), height var(--t-base);
}

.pillar:hover::before {
  opacity: 1;
  height: 5px;
}

/* Colores de marca por pilar (fuente: estilosGeneral.css) */

/* Bloque 1: SRI & Facturación (Verde SRI). Antes usaba #27ae60, un verde
   generico ajeno a la paleta --sys-*; se reemplaza por sys-dark-green /
   sys-light-green (mismo par que usa "Con Reckonnt" en antes-ahora) para que
   los 4 pilares compartan un solo sistema de color. */
.pillar--ventas::before { height: 5px; background: linear-gradient(90deg, #24382e 0%, #345041 50%, #accdb8 100%); opacity: 0.9; }
.pillar--ventas .pillar__icon { background: rgba(52, 80, 65, 0.18); color: #24382e; border: 1.5px solid rgba(52, 80, 65, 0.35); box-shadow: 0 4px 12px rgba(52, 80, 65, 0.18); }
.pillar--ventas .card-arc-item__badge { color: #24382e; background: rgba(52, 80, 65, 0.16); font-weight: 800; border: 1px solid rgba(52, 80, 65, 0.25); }
.pillar--ventas .card-arc-item__icon { color: #345041; }
.pillar--ventas:hover { border-color: rgba(52, 80, 65, 0.5); box-shadow: 0 16px 44px rgba(52, 80, 65, 0.18); transform: translateY(-5px); }

/* Bloque 2: Contabilidad sin Cierres a Mano (Violeta Autoridad Saturado) */
.pillar--contabilidad::before { height: 5px; background: linear-gradient(90deg, #3e3354 0%, #543e7e 50%, #afa4ce 100%); opacity: 0.9; }
.pillar--contabilidad .pillar__icon { background: rgba(84, 62, 126, 0.18); color: #543e7e; border: 1.5px solid rgba(84, 62, 126, 0.35); box-shadow: 0 4px 12px rgba(84, 62, 126, 0.18); }
.pillar--contabilidad .card-arc-item__badge { color: #543e7e; background: rgba(84, 62, 126, 0.16); font-weight: 800; border: 1px solid rgba(84, 62, 126, 0.25); }
.pillar--contabilidad .card-arc-item__icon { color: #543e7e; }
.pillar--contabilidad:hover { border-color: rgba(84, 62, 126, 0.5); box-shadow: 0 16px 44px rgba(84, 62, 126, 0.2); transform: translateY(-5px); }

/* Bloque 3: Bancos & Tesorería (Azul Financiero Saturado) */
.pillar--compras::before { height: 5px; background: linear-gradient(90deg, #1a2f3f 0%, #294457 50%, #a6b4cc 100%); opacity: 0.9; }
.pillar--compras .pillar__icon { background: rgba(41, 68, 87, 0.2); color: #1a2f3f; border: 1.5px solid rgba(41, 68, 87, 0.38); box-shadow: 0 4px 12px rgba(41, 68, 87, 0.22); }
.pillar--compras .card-arc-item__badge { color: #1a2f3f; background: rgba(41, 68, 87, 0.16); font-weight: 800; border: 1px solid rgba(41, 68, 87, 0.25); }
.pillar--compras .card-arc-item__icon { color: #294457; }
.pillar--compras:hover { border-color: rgba(41, 68, 87, 0.55); box-shadow: 0 16px 44px rgba(41, 68, 87, 0.2); transform: translateY(-5px); }

/* Bloque 4: Inventario & Compras (Dorado/Oro Valor Saturado) */
.pillar--inventario::before { height: 5px; background: linear-gradient(90deg, #59553f 0%, #767257 50%, #cbc5a5 100%); opacity: 0.9; }
.pillar--inventario .pillar__icon { background: rgba(118, 114, 87, 0.22); color: #59553f; border: 1.5px solid rgba(118, 114, 87, 0.4); box-shadow: 0 4px 12px rgba(118, 114, 87, 0.2); }
.pillar--inventario .card-arc-item__badge { color: #454231; background: rgba(118, 114, 87, 0.18); font-weight: 800; border: 1px solid rgba(118, 114, 87, 0.3); }
.pillar--inventario .card-arc-item__icon { color: #767257; }
.pillar--inventario:hover { border-color: rgba(118, 114, 87, 0.55); box-shadow: 0 16px 44px rgba(118, 114, 87, 0.2); transform: translateY(-5px); }

/* --- 13. BITE SECTION --------------------------------------------------- */
/* Fondo propio, mas oscuro que --c-dark (#27282a): esa variable la
   comparten otras secciones (CTA final, etc.) y aclararla ahi rompe ese
   contraste. Bite necesita un negro casi puro para que las fotos y las
   tarjetas blancas resalten como en la referencia. */
.bite {
  background: linear-gradient(165deg, #14121c 0%, #09080d 100%);
  padding: var(--sp-3xl) 0;
  position: relative;
  overflow: hidden;
}

/* Glow de fondo para Bite */
.bite::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 25% 50%, rgba(175, 164, 206,0.1) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 75% 30%, rgba(84, 62, 126,0.14) 0%, transparent 65%);
  pointer-events: none;
}

.bite__inner { position: relative; z-index: 1; }

/* Bloque hero de Bite: texto (badge+titulo+desc+features+CTA) a la
   izquierda, foto con tarjetas flotantes a la derecha. El selector de
   rubros y compatibilidad ya no comparten fila con el texto — van apilados
   debajo, a todo el ancho, para no competir por espacio con la foto. */
.bite__hero {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: var(--sp-2xl);
}

@media (min-width: 1024px) {
  .bite__hero {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
  .bite__hero-text { flex: 1 1 55%; min-width: 0; }
  .bite__hero-visual { flex: 1 1 45%; min-width: 0; }
}

.bite__hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bite__feature-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 560px) {
  .bite__feature-row { grid-template-columns: repeat(3, 1fr); }
}

/* Una sola fila de 5 desde 900px: a esa altura .bite__hero-text ya tiene
   suficiente ancho (100% en stack, 55% del hero en fila) para que las 5
   columnas angostas entren sin apilarse — el gap baja porque a 5 columnas
   el de 1.25rem sumaba demasiado y el texto quedaba muy apretado. */
@media (min-width: 900px) {
  .bite__feature-row { grid-template-columns: repeat(5, 1fr); gap: 0.85rem; }
}

.bite__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--c-bite-accent-bg);
  color: var(--c-bite-accent);
  margin-bottom: 0.6rem;
}

.bite__feature-title {
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--c-light);
  line-height: 1.3;
}

.bite__feature-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
}

.bite__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.bite__cta-link {
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--c-light);
  text-decoration: none;
}

.bite__cta-link:hover { text-decoration: underline; }

.bite__hero-visual {
  position: relative;
}

.bite__hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.bite__hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tarjetas flotantes en blanco (mismo patron que .problema__alert) — sobre
   un fondo oscuro necesitan ser claras para no perderse contra la foto. */
.bite__hero-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 190px;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: alertFloat 4s ease-in-out infinite;
}

.bite__hero-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(84, 62, 126, 0.12);
  color: var(--c-primary);
}

.bite__hero-card-text { display: flex; flex-direction: column; }
.bite__hero-card-text strong { font-size: 12px; font-weight: 700; color: var(--sys-black); line-height: 1.3; }
.bite__hero-card-text span { font-size: 11px; color: var(--c-muted); line-height: 1.3; }

/* Desktop: las tarjetas flotan fuera del borde de la foto */
.bite__hero-card--1 { top: -6%; left: 4%; }
.bite__hero-card--2 { bottom: -6%; right: 4%; animation-delay: 1.6s; }

/* Móvil: la tarjeta 1 va arriba a la DERECHA y la 2 abajo a la IZQUIERDA
   — el modelo de la foto queda a la derecha, así ninguna card lo tapa. */
@media (max-width: 768px) {
  .bite__hero-card--1 {
    top: 5%;
    left: auto;
    right: 4%;
  }
  .bite__hero-card--2 {
    bottom: 5%;
    right: auto;
    left: 4%;
  }
}

.bite__hero-card--2 .bite__hero-card-icon { background: rgba(52, 80, 65, 0.14); color: var(--sys-dark-green); }

@media (prefers-reduced-motion: reduce) {
  .bite__hero-card { animation: none; }
}

/* Franja de 4 beneficios a todo el ancho, panel glassmorphic como
   .bite__circuito para que ambos lean como parte del mismo sistema oscuro. */
.bite__quad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: var(--sp-2xl);
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(175, 164, 206, 0.16);
  border-radius: var(--radius-xl);
}

@media (min-width: 700px) {
  .bite__quad { grid-template-columns: repeat(4, 1fr); }
}

.bite__quad-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.bite__quad-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bite-accent-bg);
  color: var(--c-bite-accent);
}

.bite__quad-title {
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--c-light);
  line-height: 1.3;
}

.bite__quad-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
}

.bite__badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bite__logo-box {
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 1px solid rgba(175, 164, 206,0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bite__logo-img { width: 34px; height: 34px; object-fit: contain; }

.bite__kicker {
  font-size: var(--tx-base);
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bite__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--c-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bite__title-accent { color: var(--c-accent); }

.bite__desc {
  font-size: var(--tx-lg);
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  max-width: 64ch;
}

/* Desde 1024px el texto ocupa el 55% del hero (.bite__hero-text), no la
   mitad angosta del layout viejo de 2 columnas: el titulo puede ser grande
   sin llegar a 6 lineas. Se achica un poco menos que el tamano base nomas
   para no competir con el h1 del hero principal de la pagina. */
@media (min-width: 1024px) {
  .bite__title { font-size: clamp(2rem, 2.6vw, 2.75rem); }
  .bite__desc { font-size: var(--tx-base); }
}

/* Circuito: Panel compacto estilo glassmorphic */
.bite__circuito {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(175, 164, 206, 0.16);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(175, 164, 206, 0.05);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

/* Encabezado propio del selector: mismo patron de eyebrow+h2+subtitle que
   el resto de la pagina, para que este panel se lea como una seccion
   completa y no como un widget suelto dentro de Bite. */
/* Ancho completo del panel — antes tenia max-width:68ch y quedaba a la
   mitad del espacio disponible con el resto en blanco al lado. El subtitulo
   mantiene su propia medida mas abajo para que el parrafo siga siendo
   legible aunque el bloque ya no este acotado. */
.bite__circuito-head {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bite__circuito-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bite__logo-box--sm {
  width: 40px;
  height: 40px;
}

.bite__logo-box--sm .bite__logo-img {
  width: 26px;
  height: 26px;
}

.bite__circuito-title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--c-light);
  line-height: 1.25;
}

.bite__circuito-subtitle {
  max-width: 68ch;
  font-size: var(--tx-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}

/* Pestañas: un clic elige cualquier rubro directo, sin flechas prev/next.
   flex-wrap porque son 8 — a lo ancho completo entran en una o dos filas
   segun el viewport, nunca se recortan. justify-content:center las agrupa
   en el medio del panel en vez de pegarlas al borde izquierdo. */
.bite__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

@media (max-width: 767px) {
  /* El contenedor de tabs en móvil muestra solo la tab activa
     (las inactivas tienen hidden=true puesto por el JS).
     Se centra y la tab activa toma todo el ancho disponible. */
  .bite__tabs {
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 0;
    gap: 0;
  }

  /* La tab activa en móvil: pill centrada a todo el ancho del circuito,
     con una flecha que indica que hay más categorías. */
  .bite__tab.is-active {
    width: 100%;
    justify-content: center;
    font-size: var(--tx-sm);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    position: relative;
  }

  /* Flecha animada → que indica al usuario que hay más categorías */
  .bite__tab.is-active::after {
    content: '→';
    position: absolute;
    right: 1rem;
    opacity: 0.7;
    animation: tabArrowPulse 1.5s ease-in-out infinite;
  }
}

@keyframes tabArrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(4px); opacity: 1; }
}

.bite__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--tx-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}

.bite__tab:hover {
  border-color: rgba(175, 164, 206, 0.35);
  color: var(--c-light);
}

.bite__tab.is-active {
  background: var(--c-bite-accent);
  border-color: var(--c-bite-accent);
  color: #ffffff;
}

/* Cuerpo del panel */
.bite__circuito-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 640px) {
  .bite__circuito-body {
    /* Antes minmax(180,210): la foto era una miniatura al lado del
       checklist. Se ensancha porque ahora es la que lleva el nombre del
       negocio, no solo una referencia visual. */
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 1.5rem;
  }
}

/* Tarjeta de Imagen del Nicho */
.bite__niche-card {
  position: relative;
  height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
  .bite__niche-card { height: 340px; }
}

.bite__niche-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.bite__niche-card:hover .bite__niche-img {
  transform: scale(1.04);
}

.bite__niche-img.is-fading {
  opacity: 0;
}

.bite__niche-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 0.85rem 0.65rem;
  background: linear-gradient(to top, rgba(14, 12, 27, 0.92) 0%, rgba(14, 12, 27, 0.4) 60%, transparent 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Fondo solido en vez de translucido + blur: contra fotos claras (la
   cevicheria, la heladeria) el badge translucido se perdia casi por
   completo. Un morado oscuro solido mantiene el contraste sin importar
   la foto de fondo. */
.bite__niche-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: var(--tx-base);
  font-weight: 700;
  color: var(--c-light);
  background: var(--sys-dark-violet);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.bite__niche-icon {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Caja de Funcionalidades */
.bite__features-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bite__circuito-col-label {
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.25rem;
}

/* Grilla de 2 columnas para Funcionalidades */
.bite__circuito-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 0.6rem;
}

@media (max-width: 480px) {
  .bite__circuito-list {
    grid-template-columns: 1fr;
  }
}

/* Fila simple: texto a la izquierda, check a la derecha — reemplaza el
   cableado SVG anterior por el mismo patron de lista de beneficios que se
   usa en el resto de la pagina (icon-check dentro de un circulo). */
.bite__circuito-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all var(--t-fast);
}

.bite__circuito-item.is-inactive {
  opacity: 0.35;
}

.bite__circuito-item.is-active {
  background: rgba(169, 147, 254, 0.08);
  border-color: rgba(169, 147, 254, 0.22);
}

.bite__circuito-text {
  font-size: var(--tx-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
  transition: color var(--t-base);
}

.bite__circuito-item.is-active .bite__circuito-text {
  color: var(--c-light);
  font-weight: 600;
}

.bite__circuito-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.25);
  transition: all var(--t-base);
}

.bite__circuito-item.is-active .bite__circuito-check {
  background: var(--sys-dark-green);
  color: #ffffff;
}

/* --- 14. RESULTADOS & CASO DE ÉXITO ------------------------------------ */
.resultados {
  background: var(--c-surface);
  padding: var(--sp-3xl) 0;
}

.resultados__head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--sp-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.resultados__title {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.resultados__subtitle {
  font-size: var(--tx-lg);
  color: var(--c-muted);
  line-height: 1.65;
}

/* stretch (no start): con align-items:start cada tarjeta tomaba solo su
   propia altura de contenido y quedaban desalineadas — la del testimonio
   se veia mucho mas alta que la de estadisticas. stretch iguala las dos al
   alto de la fila. La proporcion de columnas tambien se corrigio: 0.85/1.15
   dejaba el testimonio casi tan ancho como las estadisticas, cuando la
   referencia lo quiere claramente mas angosto. */
.resultados__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .resultados__grid { grid-template-columns: 38fr 62fr; gap: 1.5rem; }
}

.resultados__testimonial,
.resultados__stats-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  border: 1px solid rgba(84, 62, 126, 0.06);
}

@media (max-width: 640px) {
  .resultados__testimonial,
  .resultados__stats-card {
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 16px;
  }
}

.resultados__testimonial {
  display: flex;
  gap: 1.5rem;
}

@media (max-width: 899px) {
  .resultados__testimonial { flex-direction: column; gap: 1.25rem; }
}

.resultados__photo-wrap {
  flex: 0 0 33%;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

@media (max-width: 899px) {
  .resultados__photo-wrap {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 200px;
    border-radius: 14px;
  }
}

.resultados__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resultados__testimonial-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resultados__badge-row {
  display: flex;
  justify-content: flex-end;
}

/* Lila muy palido + violeta oscuro, no blanco+violeta claro: es el badge de
   autenticidad, tiene que leerse distinto al resto de badges de la pagina. */
.resultados__real-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f2e8ff;
  color: var(--sys-dark-violet);
  font-size: var(--tx-xs);
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

/* Sangria colgante: la comilla grande vive a la izquierda del parrafo, no
   arriba de el. */
.resultados__quote {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex: 1 1 auto;
}

.resultados__quote-icon {
  flex-shrink: 0;
  color: var(--sys-lavander);
  margin-top: -0.2rem;
}

.resultados__quote-text {
  font-size: var(--tx-base);
  color: var(--sys-black);
  line-height: 1.6;
}

.resultados__quote-highlight {
  color: var(--sys-dark-violet);
  font-weight: 700;
}

.resultados__author {
  display: flex;
  flex-direction: column;
  font-size: var(--tx-sm);
}
.resultados__author strong { color: var(--c-text); font-weight: 700; }
.resultados__author span { color: var(--c-muted); }

.resultados__stats-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.resultados__stats-title {
  font-family: var(--f-display);
  font-size: var(--tx-lg);
  font-weight: 700;
  color: var(--sys-dark-violet);
  margin-bottom: 1.25rem;
}

.resultados__stats-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  /* minmax(0, ...) y no 1fr 1.1fr a secas: sin el minimo en 0, cada columna
     reserva por lo menos el ancho minimo de su contenido antes de repartir
     el resto por fr. La lista de stats (con "Tiempo administrativo" en una
     sola linea) empujaba su minimo tan alto que a la columna de la captura
     le quedaban ~32px, un recorte de la imagen practicamente invisible. */
  .resultados__stats-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
}

.resultados__stats-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}

@media (max-width: 360px) {
  .resultados__stats-list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

.resultados__stat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.resultados__stat-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(175, 164, 206, 0.22);
  color: var(--sys-dark-violet);
}

.resultados__stat-icon svg { width: 18px; height: 18px; }

.resultados__stat-text { display: flex; flex-direction: column; }
.resultados__stat-text strong {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
  white-space: nowrap;
}
.resultados__stat-text span {
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.3;
}

/* Coloreado de dos tonos dentro del mismo valor (ej. "2 h" gris, "3 min" en
   verde) — utilidades cortas porque solo se usan dentro de .resultados__stat. */
.resultados__stat-text .is-neutral { color: var(--c-muted); }
.resultados__stat-text .is-green { color: var(--sys-dark-green); }
.resultados__stat-text .is-violet { color: var(--sys-dark-violet); }

.resultados__stats-shot {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.08);
}

.resultados__stats-shot img { width: 100%; object-fit: cover; display: block; }

/* --- 15. PLANES Y PRECIOS (DUAL-CARD DESIGN) ---------------------------- */
.planes {
  background: var(--c-light);
  padding: var(--sp-3xl) 0;
}

.planes__head {
  text-align: center;
  max-width: 68ch;
  margin: 0 auto var(--sp-2xl);
}

.planes__head .section-eyebrow {
  margin-bottom: var(--sp-sm);
}

.planes__title {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-sm);
}

.planes__subtitle {
  font-size: var(--tx-lg);
  color: var(--c-muted);
  line-height: 1.6;
}

/* Grilla Dual de Planes */
.planes__dual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1060px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  .planes__dual-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Tarjetas de Plan */
.plan-card {
  background: #ffffff;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(14, 12, 27, 0.04);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(84, 62, 126, 0.09);
  border-color: rgba(84, 62, 126, 0.35);
}

.plan-card--reckonnt {
  border-top: 4px solid var(--c-primary);
}

.plan-card--bite {
  border-top: 4px solid var(--c-bite-accent);
}

.plan-card__badge-wrap {
  margin-bottom: 1rem;
}

.plan-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--tx-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(84, 62, 126, 0.08);
  border: 1px solid rgba(84, 62, 126, 0.16);
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
}

.plan-card__kicker--bite {
  color: var(--c-bite-accent);
  background: rgba(230, 126, 34, 0.10);
  border-color: rgba(230, 126, 34, 0.22);
}

.plan-card__name {
  font-family: var(--f-display);
  font-size: var(--tx-2xl);
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}

.plan-card__desc {
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  min-height: 2.8em;
}

.plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(84, 62, 126, 0.08);
}

.plan-card__price {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 900;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan-card--reckonnt .plan-card__price {
  color: var(--c-primary);
}

.plan-card--bite .plan-card__price {
  color: var(--c-bite-accent);
}

.plan-card__price-note {
  font-size: var(--tx-base);
  font-weight: 600;
  color: var(--c-muted);
}

.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  flex: 1;
}

.plan-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--tx-sm);
  color: var(--c-text);
  line-height: 1.45;
}

.plan-card__list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sys-dark-green);
}

.plan-card__cta {
  width: 100%;
  justify-content: center;
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

/* Caja de addons / personalizador dentro de cada tarjeta */
.plan-card__addons-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}

.plan-card__addons-text strong {
  display: block;
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.15rem;
}

.plan-card__addons-text span {
  font-size: 0.75rem;
  color: var(--c-muted);
  line-height: 1.4;
  display: block;
  min-height: 2.1rem;
}

.plan-card__calc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast), transform var(--t-fast);
}

.plan-card__calc-link:hover {
  color: var(--sys-dark-violet);
  transform: translateX(2px);
}

.plan-card__calc-link--bite {
  color: var(--c-bite-accent);
}

.plan-card__calc-link--bite:hover {
  color: #d35400;
}

@media (min-width: 640px) {
  .plan-calculator__actions {
    flex-direction: row;
  }
  .plan-calculator__cta,
  .plan-calculator__open {
    width: auto;
    flex: 1;
  }
}

/* --- 16. FAQ (PREGUNTAS FRECUENTES) ------------------------------------- */
/* Gris: cierra la alternancia despues de .planes en blanco. */
.faq {
  background: var(--c-surface);
  padding: var(--sp-3xl) 0;
}

.faq__head {
  text-align: center;
  margin: 0 auto var(--sp-2xl);
}

/* Sidebar (filtros + soporte) mas angosto que el panel de preguntas —
   minmax en vez de un fr fijo para que no se estire de mas en pantallas muy
   anchas ni se aplaste por debajo de un ancho legible. */
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
}

@media (min-width: 960px) {
  .faq__layout { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
}

.faq__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  max-width: 100%;
}

.faq__title {
  font-family: var(--f-display);
  font-size: var(--tx-3xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: -0.75rem;
}

.faq__title-underline {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}

.faq__subtitle {
  font-size: var(--tx-base);
  color: var(--c-muted);
  line-height: 1.6;
}

.faq__categories-label {
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  margin-bottom: 0.6rem;
}

.faq__category-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 959px) {
  .faq__category-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
  }
  .faq__category-list::-webkit-scrollbar { display: none; }
  .faq__category {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--tx-xs);
    padding: 0.5rem 0.85rem;
  }
}

.faq__category {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: var(--tx-sm);
  font-weight: 600;
  text-align: left;
  transition: all var(--t-fast);
}

.faq__category .icon { flex-shrink: 0; color: var(--c-primary); }

.faq__category:hover { border-color: rgba(84, 62, 126, 0.3); }

.faq__category.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}
.faq__category.is-active .icon { color: #ffffff; }

.faq__panel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 0.5rem 1.75rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 640px) {
  .faq__panel {
    padding: 0.25rem 1rem;
    border-radius: var(--radius-lg);
  }
}

.faq__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.faq__item {
  border-bottom: 1px solid var(--c-border);
  min-width: 0;
  max-width: 100%;
}
.faq__item:last-child { border-bottom: none; }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 0;
  font-size: clamp(0.92rem, 2.4vw, 1.05rem);
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  transition: color var(--t-fast);
}
.faq__question span {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.faq__question:hover { color: var(--c-primary); }

.faq__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(84, 62, 126, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}
.faq__icon svg { width: 14px; height: 14px; }
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--c-primary);
  color: #ffffff;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq__answer p {
  padding: 0 0 1.25rem;
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.65;
}

.faq__empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--c-muted);
  font-size: var(--tx-sm);
}

.faq__security-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(84, 62, 126, 0.06);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
  .faq__security-bar {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 1rem;
  }
  .faq__security-cta {
    width: 100%;
  }
  .faq__security-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

.faq__security-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 80, 65, 0.12);
  color: var(--sys-dark-green);
}

.faq__security-text { flex: 1 1 auto; min-width: 0; }
.faq__security-text h3 {
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--c-text);
}
.faq__security-text p {
  font-size: var(--tx-xs);
  color: var(--c-muted);
}

.faq__security-cta { flex-shrink: 0; }

/* --- 17. CONTACTO Y DEMO ------------------------------------------------ */
/* Seccion clara: queda entre el CTA final y la barra de soporte, las dos
   oscuras, asi que el formulario respira y no se encadenan tres bloques
   oscuros seguidos. */
.contact {
  background: var(--c-surface);
  padding: var(--sp-3xl) 0;
  position: relative;
  overflow: hidden;
}

/* El formulario vive dentro de una tarjeta con un tinte violeta muy suave y
   ancho acotado: separa visualmente el paso de "solicitar" del resto de la
   pagina en vez de dejarlo suelto sobre el fondo. */
.contact__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(160deg, rgba(84, 62, 126, 0.06), rgba(175, 164, 206, 0.14));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.contact__inner--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact__inner--split { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
}

/* Columna visual */
.contact__visual { display: flex; flex-direction: column; gap: 1.5rem; }

.contact__visual-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.contact__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact__bullets li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--tx-base);
  color: var(--c-muted);
}
.contact__bullets li svg {
  width: 18px;
  height: 18px;
  color: var(--sys-dark-green);
  flex-shrink: 0;
}

.contact__devices { border-radius: var(--radius-lg); overflow: hidden; }
.contact__devices-img { width: 100%; }

/* Columna formulario: tarjeta blanca solida sobre el tinte violeta de la
   tarjeta contenedora, para que los campos se lean como el paso a completar. */
.contact__form-wrap {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label {
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--c-text);
}
.form-field input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--tx-base);
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-card);
  border: 1.5px solid rgba(39, 40, 42, 0.14);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base);
  outline: none;
}
.form-field input::placeholder { color: rgba(39, 40, 42, 0.38); }
.form-field input:focus { border-color: var(--c-primary); }

.form-message {
  font-size: var(--tx-sm);
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  display: none;
}
.form-message:not(:empty) { display: block; }
/* [hidden] tiene que ganarle al display:block de arriba, que es igual de
   específico y va después en el archivo. */
.form-message[hidden] { display: none; }
/* Colores pensados para el formulario de contacto, que va sobre fondo claro. */
.form-message--success { color: var(--sys-dark-green); background: rgba(172, 205, 184, 0.22); }
.form-message--error { color: var(--sys-dark-red); background: rgba(217, 97, 91, 0.12); }

/* El mismo par de clases se usa en el pie, que es oscuro: ahi los tonos
   oscuros no se leen y hay que aclararlos. */
.site-footer .form-message--success { color: var(--sys-light-green); background: rgba(172, 205, 184, 0.12); }
.site-footer .form-message--error { color: #FF8B85; background: rgba(217, 97, 91, 0.16); }

/* Resumen del plan que el visitante armó en la calculadora, arrastrado hasta
   el formulario para que vea que su elección viajó con él. */
.form-plan-resumen {
  font-size: var(--tx-sm);
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  background: rgba(84, 62, 126, 0.07);
  border: 1px solid rgba(84, 62, 126, 0.20);
}
.form-plan-resumen strong { color: var(--c-primary); }

.site-footer__newsletter-message { margin-top: 0.5rem; }

.contact__form .btn { width: 100%; justify-content: center; }
#demoFormSubmit:disabled,
.site-footer__newsletter-btn:disabled { opacity: 0.65; cursor: not-allowed; }

/* --- 17. SOPORTE TÉCNICO ------------------------------------------------ */
.support-bar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 6%, rgba(175, 164, 206, 0.22), transparent 40%),
    var(--c-surface);
  /* Sin padding-top: la foto ya llega al borde superior real de la seccion
     (ver .support-bar__photo, position:absolute + top:0) y este padding
     solo abria un hueco entre el nav y el texto que la foto no tenia —
     40px de aire que no combinaban con nada. */
  padding: 0 0 var(--sp-lg);
  /* Sin padding-top el primer contenido queda pegado al borde de la seccion;
     al llegar por ancla (#soporte) el nav fijo lo tapa si el navegador no
     reserva espacio. Ningun otro href="#..." del sitio usa scroll-margin,
     pero esta seccion lo necesita porque ya no tiene el padding que antes
     (por casualidad) dejaba un respiro. --nav-height-scrolled porque a esta
     altura de la pagina el nav ya esta en su estado achicado por scroll. */
  scroll-margin-top: var(--nav-height-scrolled);
}

.support-bar__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

/* Desde 1024px la foto se saca del grid y pasa a bleed absoluto (ver
   .support-bar__photo): esta columna vuelve a ser una sola, con el texto
   acotado a su propio ancho para no meterse debajo de la foto.
   Importante: .support-bar__top NO lleva position:relative — si la llevara,
   se volvería el ancestro posicionado de la foto y el bleed quedaría
   atrapado dentro del max-width del .container en vez de llegar al borde
   real de la sección (.support-bar, que sí está position:relative). */
@media (min-width: 1024px) {
  .support-bar__top { grid-template-columns: 1fr; min-height: 460px; align-items: center; }
}

.support-bar__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .support-bar__content { max-width: 480px; }
}

.support-bar__title {
  font-family: var(--f-display);
  font-size: var(--tx-4xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}

.support-bar__title span { color: var(--c-primary); }

.support-bar__line {
  width: 60px;
  height: 5px;
  margin: 1.5rem 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}

.support-bar__desc {
  max-width: 42ch;
  color: var(--c-muted);
  font-size: var(--tx-lg);
  line-height: 1.7;
}

/* El fondo violeta de respaldo se ve mientras no exista la foto (o si falla
   la carga): la sección ya se lee completa antes de subir el archivo final.
   aspect-ratio en vez de min-height fijo: con una altura fija la tarjeta se
   volvia cada vez mas panoramica a medida que crecia el ancho (768-1023px),
   forzando a .support-bar__photo-img a recortar casi toda la foto para
   cubrir el ancho. Al escalar con el ancho, el recorte se mantiene parecido
   en cualquier tamaño. */
.support-bar__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--sys-dark-violet) 100%);
}

/* Desde 1024px la foto deja de ser una tarjeta redondeada dentro del grid y
   pasa a ocupar la esquina superior derecha de toda la seccion (bleed): sale
   del flujo con position:absolute contra .support-bar (que es su ancestro
   posicionado, no .container, asi que llega hasta el borde real de la
   seccion sin que el max-width del container la corte). Sin radio
   arriba/derecha porque ahi se funde con el borde de la seccion, no con el
   fondo.
   aspect-ratio: 7/5 replica la proporcion real del archivo (1400x1000): con
   la caja anterior (width/height independientes) el ancho caia por debajo
   del alto en viewports chicos y quedaba casi cuadrada, obligando a
   object-fit:cover a recortar los costados de la foto (se perdian la mujer
   de la izquierda y buena parte de la escena). Con la misma proporcion que
   el archivo, cover ya no tiene nada que recortar. */
@media (min-width: 1024px) {
  .support-bar__photo {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    /* % y tope en px controlan el tamaño; top/right de arriba fijan la esquina. */
    width: min(55%, 780px);
    aspect-ratio: 7 / 5;
    height: auto;
    border-radius: 0;
  }
}

.support-bar__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Funde el borde izquierdo de la foto con el fondo claro para que no
   compita con el texto — solo aplica en desktop, donde van lado a lado. */
.support-bar__photo-overlay { display: none; }

/* El bleed nuevo pide dos degradados, no uno: el de la izquierda (para que
   el texto siga leyendose encima) y uno nuevo hacia abajo, para que la foto
   se apague contra el fondo antes de las tarjetas de servicio en vez de
   cortar en seco contra ellas. Los dos usan el mismo color de fondo de la
   seccion (--c-surface) para que el empalme sea invisible. */
@media (min-width: 1024px) {
  .support-bar__photo-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, var(--c-surface) 0%, rgba(244, 247, 252, 0.55) 10%, rgba(244, 247, 252, 0) 38%),
      linear-gradient(0deg, var(--c-surface) 0%, rgba(244, 247, 252, 0.55) 14%, rgba(244, 247, 252, 0) 42%);
  }
}

/* --- Servicios: se monta sobre el borde inferior de la foto en desktop --- */
.support-bar__services {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .support-bar__services { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  /* El padding extra en .support-bar__content (abajo) reserva el hueco para
     que este solape no tape la descripción al subir la fila. */
  .support-bar__services { grid-template-columns: repeat(4, 1fr); margin-top: -64px; }
  .support-bar__content { padding-bottom: 90px; }
}

.support-bar__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.support-bar__card:hover {
  transform: translateY(-5px);
  border-color: rgba(84, 62, 126, 0.28);
  box-shadow: var(--shadow-lg);
}

.support-bar__card-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(175, 164, 206, 0.18);
  color: var(--c-primary);
}

.support-bar__card-title {
  font-family: var(--f-display);
  font-size: var(--tx-base);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.support-bar__card-desc {
  font-size: var(--tx-sm);
  color: var(--c-muted);
  line-height: 1.55;
}

@media (max-width: 479px) {
  .support-bar__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .support-bar__desc { font-size: var(--tx-base); max-width: none; }
  .support-bar__card { padding: 1.25rem; }
}

/* --- 19. FOOTER --------------------------------------------------------- */
.site-footer {
  background: #080715;
  padding-top: var(--sp-2xl);
  color: rgba(255,255,255,0.60);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
}

/* Brand */
.site-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer__logo { height: 49px; width: auto; }
.site-footer__tagline { font-size: var(--tx-sm); line-height: 1.65; max-width: 30ch; }

/* Social */
.site-footer__social-row {
  display: flex;
  gap: 0.5rem;
}
.site-footer__social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all var(--t-base);
}
.site-footer__social-btn:hover {
  color: var(--c-light);
  background: rgba(84, 62, 126,0.20);
  border-color: rgba(84, 62, 126,0.40);
}
.site-footer__social-btn svg { width: 16px; height: 16px; }

/* Footer cols */
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-footer__title {
  font-size: var(--tx-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.40);
  margin-bottom: 0.5rem;
  display: block;
}
.site-footer__link {
  font-size: var(--tx-sm);
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast);
}
.site-footer__link:hover { color: var(--c-light); }

.site-footer__contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--tx-sm);
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast);
}
.site-footer__contact-link:hover { color: var(--c-light); }
.site-footer__contact-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Disco blanco para el logo de Bite. align-self lo pega a la izquierda de la
   columna: sin eso el flex en columna lo estira a todo el ancho disponible. */
.site-footer__bite-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  margin-bottom: 0.25rem;
}
.site-footer__bite-logo { height: 32px; width: 32px; }
.site-footer__bite-desc { font-size: var(--tx-sm); color: rgba(255,255,255,0.45); line-height: 1.6; }
.site-footer__bite-link { font-size: var(--tx-sm); color: var(--c-accent); font-weight: 600; margin-top: 0.25rem; display: inline-block; }
.site-footer__bite-link:hover { text-decoration: underline; }

/* Newsletter */
.site-footer__newsletter { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__newsletter-label {
  font-size: var(--tx-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.site-footer__newsletter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.site-footer__newsletter-input {
  flex: 1;
  min-width: 180px;
  padding: 0.65rem 1rem;
  font-size: var(--tx-sm);
  font-family: var(--f-body);
  color: var(--c-light);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  outline: none;
  transition: border-color var(--t-base);
}
.site-footer__newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
.site-footer__newsletter-input:focus { border-color: var(--c-primary); }
.site-footer__newsletter-btn {
  padding: 0.65rem 1.25rem;
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--c-light);
  background: var(--c-primary);
  border-radius: 99px;
  border: none;
  cursor: pointer;
  transition: background var(--t-base);
  font-family: var(--f-body);
}
.site-footer__newsletter-btn:hover { background: var(--c-primary-h); }

/* Divider + Bottom */
.site-footer__divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-top: var(--sp-xl);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
}

.site-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer__copy { font-size: var(--tx-xs); }

.site-footer__sri {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--tx-xs);
  color: rgba(255,255,255,0.40);
}
.site-footer__sri svg { width: 12px; height: 12px; }

.site-footer__legal {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.site-footer__legal a {
  font-size: var(--tx-xs);
  color: rgba(255,255,255,0.40);
  transition: color var(--t-fast);
}
.site-footer__legal a:hover { color: rgba(255,255,255,0.70); }

/* --- 20. RESPONSIVE BREAKPOINTS ----------------------------------------- */

/* En mobile no hay espacio para el visual a pantalla completa del lado
   derecho: vuelve a ser una tarjeta contenida, apilada bajo el texto.
   column-reverse invierte el orden visual porque en el HTML el visual va
   despues del texto pero en desktop se posiciona en absoluto. */
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: calc(var(--nav-height-mobile) + 20px);
    padding-bottom: 32px;
    overflow: visible;
  }

  .hero__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .hero__text {
    max-width: none;
    padding: 0;
  }

  /* El visual pasa a ser una tarjeta 4:3 centrada debajo del texto,
     redondeada y con overflow:hidden para contener el anillo y la figura */
  .hero__visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 4 / 3;
    margin: 20px auto 0;
    border-radius: 20px;
    overflow: hidden;
    bottom: auto;
    top: auto;
    right: auto;
    left: auto;
  }

  /* El anillo 3D posicionado a la izquierda de la tarjeta */
  .hero__dash-stage {
    left: 0;
    right: auto;
    top: 4%;
    bottom: 4%;
    width: 58%;
    perspective: 600px;
    --dash-ring-radius: 100px;
  }

  .hero__dash-card {
    top: 5%;
    left: 20%;
    width: 55%;
    height: 65%;
  }

  /* La figura de la mujer a la derecha de la tarjeta */
  .hero__figure {
    top: auto;
    bottom: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: 55%;
  }
}

@media (max-width: 479px) {
  .hero__headline { font-size: clamp(26px, 8vw, 34px); }
  .hero__subtitle { font-size: 14px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  /* Los 3 puntos no caben en una sola linea en un telefono angosto sin
     volverse ilegibles: aca se sacrifica la fila unica (que si aplica de
     tablet para arriba) por evitar que el ultimo item quede recortado. */
  .hero__trust { flex-wrap: wrap; width: auto; overflow-x: visible; }
  .hero__trust li { border-right: none; padding: 3px 10px; }
  .brand-strip__stat-num { font-size: var(--tx-3xl); }
}

/* --- 21. ICON HELPER ---------------------------------------------------- */
/* Un solo trazo para todos los iconos de la pagina. Sin este stroke-width los
   simbolos del sprite caian al valor por defecto (1) y se veian finitos al
   lado de los que traian su propio stroke. */
.icon {
  display: inline-flex;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 22. WHATSAPP FLOAT ------------------------------------------------- */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-light);
  box-shadow: 0 4px 16px rgba(37,211,102,0.45);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(37,211,102,0.55);
}

.wa-float__tooltip {
  position: absolute;
  right: 64px;
  white-space: nowrap;
  background: var(--c-dark);
  color: var(--c-light);
  font-size: var(--tx-sm);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--t-base), transform var(--t-base);
  pointer-events: none;
}
.wa-float:hover .wa-float__tooltip {
  opacity: 1;
  transform: translateX(0);
}

.wa-float__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.40);
  animation: waRing 2.5s ease-in-out infinite;
}

@keyframes waRing {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- 23. BTN WHATSAPP --------------------------------------------------- */
.btn--whatsapp {
  background: #25D366;
  color: var(--c-light);
  border-color: #25D366;
}
.btn--whatsapp:hover {
  background: #1EB858;
  border-color: #1EB858;
}

/* --- 24. PILLARS EYEBROW (badge arriba del heading) --------------------- */
.pillars__head .section-eyebrow {
  margin-bottom: var(--sp-sm);
}

/* ==========================================================================
   25. RESPONSIVE FIXES — Mobile-first improvements
   Correcciones de responsividad para móvil:
   - Hero: visual integrado con texto, sin distancia
   - Antes/Después: dos cards en una fila compacta
   - Bite: categorías y funciones visibles
   - Resultados: imagen completa sin corte
   - Soporte: scroll sincronizado y layout corregido
   ========================================================================== */

/* ── HERO MÓVIL ─────────────────────────────────────────────────────────── */
/* En pantallas muy pequeñas, el visual queda más compacto */
@media (max-width: 479px) {
  .hero__visual {
    max-width: 340px;
    aspect-ratio: 4 / 3;
  }

  /* El encabezado no se hace tan pequeño que no se lea */
  .hero__headline {
    font-size: clamp(26px, 8.5vw, 36px);
  }

  /* Los botones del CTA en columna */
  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── ANTES Y DESPUÉS: DOS CARDS EN UNA FILA EN MÓVIL ───────────────────── */
/* En lugar de apilar las dos cards, se ponen en una fila compacta
   donde caben ambas (sin imagen para ahorrar espacio vertical)      */
@media (max-width: 859px) {
  /* El grid pasa a 2 columnas en tablet/móvil horizontal */
  .antes-ahora__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
  }

  /* El conector queda centrado entre las dos columnas */
  .antes-ahora__connector {
    position: static;
    margin: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    transform: none;
    animation: connectorRingPulse 2.5s infinite ease-in-out;
    flex-shrink: 0;
  }

  /* Las columnas se muestran en flex-column (foto encima, contenido abajo) */
  .antes-ahora__col {
    flex-direction: column;
    max-width: none;
    margin-inline: 0;
    border-radius: var(--radius-lg);
  }

  /* La foto queda en una sola tarjeta con altura fija razonable */
  .antes-ahora__photo {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 140px;
  }

  /* En la tarjeta "Con Reckonnt" la foto también va arriba (no al final) */
  .antes-ahora__col--despues .antes-ahora__photo {
    order: -1;
  }

  /* La escala de la tarjeta "Con" se desactiva en móvil para que quepan las dos */
  .antes-ahora__col--despues {
    transform: none;
  }
  .antes-ahora__col--despues:hover {
    transform: none;
    box-shadow: 0 16px 44px rgba(52, 80, 65, 0.2);
  }

  /* El contenido interno se hace más compacto en móvil */
  .antes-ahora__content {
    padding: 0.85rem 0.85rem 1rem;
  }

  .antes-ahora__label {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }

  .antes-ahora__list li {
    font-size: 0.78rem;
    padding-block: 0.45rem;
    gap: 0.5rem;
  }

  .antes-ahora__icon-badge {
    width: 18px;
    height: 18px;
  }

  .antes-ahora__label .antes-ahora__icon-badge {
    width: 26px;
    height: 26px;
  }

  .antes-ahora__footer {
    font-size: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
  }
}

/* En pantallas muy pequeñas (<480px), volver a apilar si es necesario */
@media (max-width: 400px) {
  .antes-ahora__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .antes-ahora__connector {
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .antes-ahora__photo {
    max-height: 160px;
  }
}

/* ── BITE SECTION: CATEGORÍAS Y FUNCIONES ───────────────────────────────── */

/* La sección Bite hero en móvil: texto y foto bien apilados */
@media (max-width: 767px) {
  /* La foto del hero de Bite llena bien el ancho */
  .bite__hero-photo {
    aspect-ratio: 16 / 9;
  }

  /* Las tarjetas flotantes: dentro de la foto, no sobresaliendo */
  .bite__hero-card--1 {
    top: 6% !important;
    left: auto !important;
    right: 4% !important;
  }

  .bite__hero-card--2 {
    bottom: 6% !important;
    right: auto !important;
    left: 4% !important;
  }

  /* Texto de las tarjetas flotantes más pequeño para que quepan */
  .bite__hero-card {
    max-width: 155px;
    padding: 0.5rem 0.7rem;
    gap: 0.4rem;
  }

  .bite__hero-card-text strong {
    font-size: 11px;
  }

  .bite__hero-card-text span {
    font-size: 10px;
  }

  /* El grid de features (5 columnas → 2 en móvil) */
  .bite__feature-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* La última feature (la 5ª) centrada si queda sola */
  .bite__feature:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 160px;
    margin-inline: auto;
  }
}

/* Tabs de categoría en Bite: scroll horizontal suave */
@media (max-width: 767px) {
  .bite__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
  }

  .bite__tabs::-webkit-scrollbar {
    display: none;
  }

  .bite__tab {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 0.4rem 0.75rem;
  }
}

/* El circuito de Bite (selector de negocio) en móvil */
@media (max-width: 639px) {
  /* Apilamos en una columna: imagen arriba, funciones abajo */
  .bite__circuito-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* La imagen del nicho más alta para que se aprecie */
  .bite__niche-card {
    height: 220px;
  }

  /* La lista de funciones en una sola columna en móvil pequeño */
  .bite__circuito-list {
    grid-template-columns: 1fr;
  }

  /* El circuito más compacto */
  .bite__circuito {
    padding: 1rem;
  }

  /* La cabecera del circuito compacta */
  .bite__circuito-head {
    padding-bottom: 0.75rem;
  }

  .bite__circuito-title {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
}

/* El quad de beneficios de Bite en móvil: 2 columnas, no 1 */
@media (min-width: 480px) and (max-width: 699px) {
  .bite__quad {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── RESULTADOS / CASO DE ÉXITO: IMAGEN COMPLETA ────────────────────────── */

/* En móvil, la foto del testimonio no se corta */
@media (max-width: 899px) {
  .resultados__photo-wrap {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    border-radius: 14px;
  }

  /* Los stats se muestran en 2 columnas siempre en móvil */
  .resultados__stats-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.75rem;
  }

  /* El body de stats se apila correctamente */
  .resultados__stats-body {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* La captura del dashboard mantiene proporción correcta */
  .resultados__stats-shot {
    max-height: 200px;
    overflow: hidden;
  }

  .resultados__stats-shot img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top left;
  }
}

/* ── SOPORTE: SCROLL PARALELO Y LAYOUT ──────────────────────────────────── */

/* El problema del scroll en la sección de soporte:
   El negative margin-top en desktop (-64px) causaba que las tarjetas
   se superpusieran demasiado y la animación GSAP no coincidiera con el scroll.
   En móvil se elimina ese margen negativo. */
@media (max-width: 1023px) {
  .support-bar__services {
    margin-top: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  /* En el breakpoint de tablet, la foto ocupa su espacio normal */
  .support-bar__photo {
    position: relative;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 320px;
  }

  .support-bar__top {
    min-height: auto;
  }

  /* Quitar el padding-bottom extra que reservaba hueco para el overlap en desktop */
  .support-bar__content {
    padding-bottom: 0;
    max-width: none;
  }

  /* El overlay lateral de la foto no aplica fuera de desktop */
  .support-bar__photo-overlay {
    display: none;
  }
}

@media (max-width: 639px) {
  .support-bar__services {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ── FAQ: CATEGORÍAS EN MÓVIL ───────────────────────────────────────────── */

/* Las categorías del FAQ en móvil se muestran como fila scrolleable */
@media (max-width: 959px) {
  .faq__layout {
    gap: 1.5rem;
  }

  /* La lista de categorías scrolleable en horizontal */
  .faq__category-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .faq__category-list::-webkit-scrollbar {
    display: none;
  }

  .faq__category {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--tx-xs);
    padding: 0.5rem 0.85rem;
  }
}

/* ── SOLUCION: MÉTRICAS FLOTANTES EN MÓVIL ──────────────────────────────── */

/* Las métricas flotantes de la sección solución quedan dentro del área
   de la imagen en móvil, sin salirse de la pantalla */
@media (max-width: 767px) {
  .solucion__metric {
    padding: 0.5rem 0.7rem;
    gap: 0.4rem;
    max-width: 160px;
    border-radius: var(--radius-sm);
  }

  .solucion__metric-icon {
    width: 28px;
    height: 28px;
  }

  .solucion__metric-icon svg {
    width: 15px;
    height: 15px;
  }

  .solucion__metric-label {
    font-size: 10px;
  }

  .solucion__metric-val {
    font-size: 0.9rem;
  }

  .solucion__metric-delta,
  .solucion__metric-sub {
    font-size: 9px;
  }

  /* Reposicionar para que no se salgan */
  .solucion__metric--sales {
    top: 4%;
    right: 4%;
    left: auto;
  }

  .solucion__metric--invoices {
    top: 38%;
    left: 4%;
    right: auto;
  }

  .solucion__metric--profit {
    bottom: 4%;
    right: 4%;
    left: auto;
  }
}



/* ── CONTACTO: FORMULARIO EN MÓVIL ──────────────────────────────────────── */

@media (max-width: 767px) {
  /* El formulario de contacto se apila correctamente */
  .contact__inner {
    padding: 1.25rem;
  }

  /* La imagen de dispositivos más pequeña */
  .contact__devices {
    max-height: 200px;
    overflow: hidden;
  }

  .contact__devices-img {
    object-fit: cover;
    object-position: top center;
  }
}

/* ── FOOTER: RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 479px) {
  /* El newsletter del footer en móvil muy pequeño */
  .site-footer__newsletter-form {
    flex-direction: column;
  }

  .site-footer__newsletter-input {
    min-width: 0;
    width: 100%;
  }

  .site-footer__newsletter-btn {
    width: 100%;
  }

  /* Los links del footer en columnas */
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ── PILLS / BADGES: AJUSTES GENERALES ──────────────────────────────────── */

/* El badge de hero en móvil no se desborda */
@media (max-width: 479px) {
  .hero__badge {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* El link de Bite no se corta */
  .hero__bite-link {
    font-size: 13px;
    flex-wrap: wrap;
  }
}

/* ── CONTENEDOR: PADDING MÍNIMO EN PANTALLAS MUY PEQUEÑAS ──────────────── */
@media (max-width: 360px) {
  .container {
    padding-inline: 0.9rem;
  }
}

/* ── SCROLL TRIGGER: SOLUCIÓN PARA SOPORTE ──────────────────────────────── */
/* Aseguramos que los elementos de soporte sean visibles por defecto y el
   GSAP solo mejore la animación, sin bloquear el contenido en móvil */
@media (max-width: 767px) {
  .support-bar__card {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}