/* ============================================================================
   KALYX: Hoja de estilos del sitio
   ============================================================================
   Cómo está organizado este archivo (en este orden):

     1. Variables (colores, tipografía, medidas): TOCAR AQUÍ para cambiar
        cualquier color o tamaño de texto de todo el sitio de una sola vez.
     2. Reset y estilos base
     3. Utilidades de layout compartidas (.wrap, .pad, fondos)
     4. Sistema de "aparecer al hacer scroll" (data-reveal)
     5. Botones
     6. Una sección por bloque, en el mismo orden en que aparecen en el HTML:
        navbar, hero, demo interactivo, qué hace, cómo funciona, planes,
        por qué KALYX, FAQ, CTA final, footer
     7. El láser de scroll (el efecto de la línea verde)
     8. Estados :hover, agrupados y solo para dispositivos con mouse
     9. Media queries de accesibilidad (movimiento reducido)

   No hay ninguna librería de CSS externa: todo lo que ves aquí es CSS plano.
   ========================================================================== */


/* ============================================================================
   1. VARIABLES: la paleta y tipografía vienen de Manual_Identidad_Kalyx.pdf
   ============================================================================ */
:root {
  /* Colores de marca */
  --black: #000000;          /* tinta única del sistema (texto, fondos oscuros) */
  --white: #FFFFFF;
  --green: #105344;          /* Verde Kalyx: color dominante (logo, bloques grandes) */
  --green-light: #E4F0EA;    /* Verde claro: superficies, tarjetas, secciones alternas */
  --green-accent: #1FA971;   /* Verde acento: SOLO botones y estados de interfaz */
  --green-accent-hover: #23B97C;  /* el acento un poco más claro: el texto negro encima sigue legible (8,3 a 1) */

  /* Variaciones de negro/blanco para texto secundario (no son colores nuevos,
     son el mismo negro/blanco con transparencia) */
  --ink-70: rgba(0, 0, 0, 0.7);      /* texto secundario sobre fondo claro */
  --ink-60: rgba(0, 0, 0, 0.6);      /* texto terciario / captions sobre fondo claro (5,7 a 1 sobre blanco) */
  --white-70: rgba(255, 255, 255, 0.7);   /* texto secundario sobre fondo oscuro */
  --white-45: rgba(255, 255, 255, 0.45);  /* solo bordes sobre fondo oscuro, nunca texto */
  --white-60: rgba(255, 255, 255, 0.6);   /* texto terciario sobre fondo oscuro (7,4 a 1 sobre negro) */
  --hairline: rgba(0, 0, 0, 0.12);        /* bordes finos sobre fondo claro */
  --hairline-dark: rgba(255, 255, 255, 0.14); /* bordes finos sobre fondo oscuro */

  /* Colores EXCLUSIVOS del mockup de chat de WhatsApp en la sección del demo.
     Imitan el WhatsApp real para que el mockup se sienta auténtico.
     No son colores de marca: no usar esto en ningún otro lado del sitio. */
  --wa-bubble-out: #DCF8C6;
  --wa-bg: #E5DDD5;
  --wa-check: #4FC3F7;

  /* Tipografía (Manual_Identidad_Kalyx.pdf, sección 03) */
  --font-display: 'Chakra Petch', 'JetBrains Mono', system-ui, sans-serif; /* títulos */
  --font-body: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* todo el texto */

  /* Escala de tamaños de texto. clamp(mínimo, preferido, máximo) hace que el
     texto crezca con el ancho de pantalla sin necesitar media queries. */
  --text-hero: clamp(2.6rem, 5vw + 1rem, 5.6rem);
  --text-2xl: clamp(1.7rem, 2.3vw + 0.5rem, 2.75rem);
  --text-lg: clamp(1.05rem, 0.9vw + 0.25rem, 1.2rem);
  --text-base: clamp(0.95rem, 0.4vw + 0.78rem, 1.05rem);
  --text-sm: clamp(0.82rem, 0.28vw + 0.75rem, 0.9rem);

  /* Medidas de layout */
  --maxw: 1180px;                       /* ancho máximo del contenido */
  --gutter: clamp(1.25rem, 4vw, 3rem);   /* margen lateral del contenido */
  --nav-height: 72px;                    /* alto del menu fijo, igual en todos los tamaños de pantalla */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* curva de animación estándar del sitio */
}


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

html {
  -webkit-text-size-adjust: 100%;
  /* Esto es TODO lo que hace falta para que los links "Cómo funciona" /
     "Precios" del menú se desplacen suave hasta su sección. Sin librerías:
     es una función nativa del navegador. */
  scroll-behavior: smooth;
  /* Evita que un scroll brusco al tope o al final de la página se pase al
     gesto de "recargar" o "volver atrás" del navegador (rebote nativo). */
  overscroll-behavior-y: none;
  /* Quita el flash gris que Chrome/Safari en celular ponen encima de
     cualquier link o botón al tocarlo. Sin esto, cada tap se siente como
     un link de página web; con esto, se siente como una app. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  line-height: 1.7;
  font-size: var(--text-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--green-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Oculto hasta que alguien navega con teclado y llega a él con Tab: le
   deja saltar la navegación e ir directo al contenido. */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--green-accent);
  color: var(--black);
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}


/* ============================================================================
   3. UTILIDADES DE LAYOUT
   ============================================================================ */

/* .wrap centra el contenido y le pone el margen lateral. z-index:2 es a
   propósito: así el contenido queda POR ENCIMA del láser de scroll (que usa
   z-index:1, ver sección 7), el láser corre por detrás del texto y los
   botones, nunca los tapa. */
.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: clamp(2rem, 5vw, 3rem);
  }
}

@media (min-width: 1280px) {
  .wrap {
    max-width: 1240px;
  }
}

section {
  position: relative;
}

.pad {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.bg-white   { background: var(--white); color: var(--black); }
.bg-surface { background: var(--green-light); color: var(--black); }
.bg-black   { background: var(--black); color: var(--white); }
.bg-green   { background: var(--green); color: var(--white); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-2xl);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Etiqueta sobre el título, al estilo del manual ("01 · MARCA"). El verde
   acento no se usa como texto pequeño sobre claro (3 a 1, no se lee bien):
   sobre fondos claros va en Verde Kalyx y sobre verde, en verde claro. */
.eyebrow {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.75rem;
}

.bg-black .eyebrow { color: var(--green-accent); }
.bg-green .eyebrow { color: var(--green-light); }

.section-sub {
  text-align: center;
  color: var(--ink-70);
  font-size: var(--text-sm);
  max-width: 620px;
  margin: 0 auto 2.5rem;
}

.bg-black .section-sub,
.bg-green .section-sub {
  color: var(--white-70);
}


/* ============================================================================
   4. SISTEMA DE APARICIÓN AL HACER SCROLL (data-reveal)
   ============================================================================
   Cómo funciona: cualquier elemento con el atributo `data-reveal` empieza
   invisible y desplazado hacia abajo. Cuando entra en la pantalla (lo
   detecta script.js con IntersectionObserver, sin ninguna librería), se le
   agrega la clase `.is-visible` y esta transición lo hace aparecer.

   Esto reemplaza lo que antes hacía GSAP + ScrollTrigger. El resultado
   visual es el mismo; el costo en JavaScript es mucho menor.

   Las clases .d1 .d2 .d3 .d4 son solo para escalonar la aparición de varios
   elementos seguidos (una tarjeta después de otra). El número indica el
   orden: .d1 aparece primero, .d4 al final. Para cambiar qué tan
   escalonado se ve, ajusta --reveal-step abajo.
   ============================================================================ */
:root {
  --reveal-step: 0.1s; /* diferencia de tiempo entre un elemento y el siguiente */
}

/* Solo se esconde si JavaScript está activo (inicio.js pone la clase "js"
   en <html>). Sin JavaScript, o si algo falla, todo se ve normal. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.d1 { transition-delay: calc(var(--reveal-step) * 0); }
.d2 { transition-delay: calc(var(--reveal-step) * 1); }
.d3 { transition-delay: calc(var(--reveal-step) * 2); }
.d4 { transition-delay: calc(var(--reveal-step) * 3); }

/* Título de sección: el texto "sube" desde adentro de una máscara oculta.
   El contenedor .reveal recorta (overflow:hidden); el span de adentro,
   marcado con data-reveal, es el que se anima. */
/* display:block para que el título quede centrado como su etiqueta (antes,
   al ser inline-block, quedaba pegado a la izquierda). El span de adentro
   necesita inline-block para poder moverse con transform. */
.reveal {
  display: block;
  overflow: hidden;
}

.reveal > [data-reveal] {
  display: inline-block;
}


/* ============================================================================
   5. BOTONES
   ============================================================================
   Esquinas cortadas (chamfer) en vez de esquinas redondas: el manual de
   marca describe la tipografía Chakra Petch como "de esquinas cortadas,
   aire de circuito", los botones siguen esa misma idea angular.
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--green-accent);
  color: var(--black);
}

.btn-outline-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--white-45);
}

.btn-ghost {
  min-height: auto;
  padding: 10px 2px;
  font-size: 13px;
  color: var(--green);
  border-bottom: 1.5px solid transparent;
  clip-path: none;
}

.btn-sm {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 12px;
}

/* En celular el mouse no existe: el dedo necesita mínimo 44px para que el
   botón de WhatsApp del menu sea fácil de tocar sin fallar. En desktop se
   queda compacto (40px) porque ahí sí manda la precisión del mouse. */
@media (max-width: 767px) {
  .btn-sm {
    min-height: 44px;
  }
}


/* ============================================================================
   6. NAVBAR
   ============================================================================ */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
  transition: background 0.3s ease;
}

#nav.scrolled {
  background: var(--black);
  border-bottom: 1px solid var(--hairline-dark);
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

/* padding-block agranda el área táctil a 48px sin cambiar el tamaño
   visual del logo (26px): el dedo tiene más margen de error al tocar. */
.brand {
  display: inline-flex;
  align-items: center;
  padding-block: 11px;
}

.brand img {
  display: block;
  height: 26px;
  width: auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.nav-links {
  display: none;
  align-items: center;
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
}

.nav-links a {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--white-70);
  transition: color 0.2s ease;
}

.hamburger {
  display: flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--hairline-dark);
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: var(--gutter);
  background: var(--black);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  visibility: hidden;
}

#mobile-menu.open {
  transform: translateY(0);
  visibility: visible;
}

#mobile-menu a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--white);
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
}


/* ============================================================================
   HERO
   ============================================================================ */
#hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 64px;
}

.hero-content {
  max-width: 760px;
}

#hero h1 {
  font-size: var(--text-hero);
}

.hero-sub {
  margin-top: 22px;
  margin-inline: auto;
  max-width: 680px;
  font-size: var(--text-lg);
  color: var(--white-70);
}

.hero-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-block: 44px;
}

.hero-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white-70);
}

.hero-step .n {
  font-weight: 700;
  color: var(--green-accent);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}


/* ============================================================================
   DEMO INTERACTIVO ("Así respondería un agente KALYX en tu negocio")
   ============================================================================ */
.agent-demo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .agent-demo {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
    gap: 2.5rem;
  }
}

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
}

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

.chip {
  min-height: 48px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--hairline);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip.active {
  background: var(--green-accent);
  color: var(--black);
  border-color: var(--green-accent);
}

.agent-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.agent-cta p {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink-70);
}

.phone-card {
  border: 1px solid var(--hairline);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--white);
  background: var(--black);
}

.chat-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--black);
  background: var(--green-accent);
}

.chat-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.chat-status {
  font-size: 11px;
  color: var(--green-accent);
}

.chat-body {
  height: 400px;
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--wa-bg);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.bubble {
  max-width: 80%;
  padding: 9px 11px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: bubbleIn 0.35s var(--ease) both;
}

.bubble.in  { align-self: flex-start; background: var(--white); }
.bubble.out { align-self: flex-end; background: var(--wa-bubble-out); }

.bubble .time {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  text-align: right;
  color: var(--ink-60);
}

.bubble .time .check {
  margin-left: 3px;
  color: var(--wa-check);
}

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

.typing {
  align-self: flex-end;
  display: inline-flex;
  gap: 4px;
  padding: 11px 13px;
  background: var(--wa-bubble-out);
  animation: bubbleIn 0.3s var(--ease) both;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-60);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.agent-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.illustrative-tag {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-60);
}


/* ============================================================================
   QUÉ HACE TU AGENTE
   ============================================================================
   Lista de definiciones en dos columnas separadas por líneas finas, no
   tarjetas: se lee como una ficha técnica, que es la personalidad del
   manual (técnica, minimalista, directa). */
.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 3rem;
  max-width: 1000px;
  margin-inline: auto;
}

.cap {
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.cap dt {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--green);
}

.cap dd {
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-70);
}


/* ============================================================================
   PLANES
   ============================================================================ */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch;
}

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

  /* Tres líneas reservadas para la descripción: los precios quedan a la
     misma altura en las tres columnas. */
  .plans .plan-for {
    min-height: 4.8em;
  }
}

@media (max-width: 899px) {
  .plans {
    max-width: 520px;
    gap: 28px; /* espacio para la etiqueta montada sobre el borde */
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  background: var(--white);
  border: 1.5px solid var(--hairline);
}

/* El plan que se ofrece primero va sobre Verde Kalyx: es el bloque de color
   dominante de la sección, como pide el manual. */
.plan.featured {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

/* Montada sobre el borde superior: así no empuja el contenido y los precios
   de los tres planes quedan a la misma altura. */
.plan-tag {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--black);
  background: var(--green-accent);
}

.plan-name {
  font-size: 1.7rem;
}

.plan-for {
  min-height: 3.3em;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-70);
}

.plan-price {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}

.plan-price .amount {
  font-size: clamp(2rem, 4vw, 2.5rem);
}

.plan-price .per {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 600;
}

.plan-setup {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.plan-quota {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-60);
}

.plan-quota {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.plan.featured .plan-for,
.plan.featured .plan-quota {
  color: var(--white-70);
}

.plan.featured .plan-quota {
  border-bottom-color: var(--hairline-dark);
}

.plan-feats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.plan-feats li::before {
  content: '>';
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green);
}

.plan.featured .plan-feats li::before {
  color: var(--green-accent);
}

.plan-notes {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-70);
}

.plan-notes li {
  padding: 3px 0;
}

.plans-cta {
  margin-top: 28px;
  text-align: center;
}


/* ============================================================================
   CÓMO FUNCIONA
   ============================================================================ */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin: 2rem auto 0;
}

@media (min-width: 768px) {
  .timeline {
    flex-direction: row;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: var(--hairline-dark);
  }
}

.tl-step {
  position: relative;
  flex: 1;
  padding-inline: 8px;
  text-align: center;
}

.tl-num {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--green-light); /* el acento sobre Verde Kalyx no se lee (3 a 1); el verde claro sí (7,7 a 1) */
}

@media (min-width: 768px) {
  .tl-num {
    display: inline-block;
    padding-inline: 10px;
    background: var(--green); /* tapa la línea conectora al pasar por encima del número */
  }
}

.tl-title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
}

.tl-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--white-70);
}


/* ============================================================================
   POR QUÉ KALYX
   ============================================================================
   Tres afirmaciones en columnas separadas por una línea, sin tarjetas ni
   números: no son pasos, así que no llevan orden. */
.diffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0 2.5rem;
  max-width: 1000px;
  margin: 2rem auto 0;
}

.diff {
  padding: 22px 0;
  border-top: 2px solid var(--green);
}

.diff-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--green);
}

.diff-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-70);
}


/* ============================================================================
   FAQ
   ============================================================================ */
.faq-wrap {
  max-width: 700px;
  margin: 1.5rem auto 0;
}

.faq-item h3 {
  font-size: inherit;
  line-height: inherit;
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 18px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.faq-arrow {
  flex-shrink: 0;
  color: var(--green);
  transition: transform 0.25s ease;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-a-inner {
  padding: 0 4px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-70);
}


/* ============================================================================
   CTA FINAL
   ============================================================================ */
#cta-final {
  text-align: center;
}

#cta-final .sub {
  margin-bottom: 32px;
  font-size: var(--text-lg);
  color: var(--white-70);
}


/* ============================================================================
   FOOTER
   ============================================================================ */
footer {
  padding: 40px 0 28px;
  color: var(--white);
  background: var(--black);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline-dark);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.foot-links a {
  display: inline-block;
  padding-block: 11px; /* área táctil de 44px sin agrandar el texto */
  font-size: 13px;
  color: var(--white-70);
  transition: color 0.2s ease;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 20px;
  font-size: 11.5px;
  color: var(--white-60);
}


/* ============================================================================
   7. LÁSER DE SCROLL: el efecto de firma del sitio
   ============================================================================
   Una barra horizontal fija pegada al borde INFERIOR del menu (no al borde
   de la pantalla): se lee como la barra de progreso del propio menu, no
   como una raya suelta cortando la parte de arriba. Por eso top usa
   var(--nav-height), la misma variable que define el alto del menu, si
   el menu cambia de alto algún día, el láser lo sigue automáticamente.
   Crece de izquierda a derecha con `transform: scaleX()` a medida que se
   hace scroll, sin punto ni marcador en la punta: solo la línea y su
   resplandor.

   Todo el movimiento lo controla script.js leyendo el scroll nativo del
   navegador (sin ninguna librería de por medio), así que se mueve pegada
   al dedo/rueda del mouse sin retraso.
   ============================================================================ */
#scroll-laser-shaft {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  z-index: 50;
  width: 100%;
  height: 4px;
  pointer-events: none;
  background: var(--green-accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  /* Resplandor fijo (no animado): un box-shadow que cambia todo el tiempo
     obliga al navegador a repintar en cada fotograma, incluso sin hacer
     scroll. Uno fijo se calcula una sola vez y es prácticamente gratis. */
  box-shadow:
    0 0 12px var(--green-accent),
    0 0 32px rgba(31, 169, 113, 0.75),
    0 0 64px rgba(31, 169, 113, 0.4);
}

/* El botón del CTA final se enciende cuando el láser llega. Es una
   transición única (no un loop), así que no tiene costo mientras el
   usuario no está llegando al final de la página. */
#cta-btn {
  transition: box-shadow 0.4s ease;
}

#cta-btn.lit {
  box-shadow:
    0 0 26px var(--green-accent),
    0 0 65px rgba(31, 169, 113, 0.65),
    0 0 110px rgba(31, 169, 113, 0.3);
}


/* ============================================================================
   8. ESTADOS :hover, SOLO para quien tiene mouse
   ============================================================================
   Todos los :hover del sitio viven aquí, agrupados, en vez de al lado de
   cada componente. La razón: en celular no existe el mouse, así que no
   existe "pasar por encima", lo que existe es el tap. Sin este media
   query, la primera vez que alguien toca un botón en el celular el
   navegador le aplica el estilo de :hover y se queda pegado (no hay forma
   de "quitar el mouse de encima" con el dedo), así que un link se ve
   permanentemente resaltado hasta que el usuario toca otra cosa. Con
   `(hover: hover)` estos estilos solo existen en dispositivos que de
   verdad pueden pasar el cursor por encima sin tocar.
   ============================================================================ */
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--green-accent-hover);
    transform: translateY(-2px);
  }

  .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white);
    transform: translateY(-2px);
  }

  .btn-ghost:hover {
    border-bottom-color: var(--green-accent-hover);
  }

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

  #mobile-menu a:hover {
    color: var(--green-accent);
  }

  .chip:hover {
    border-color: var(--green-accent);
  }

  .faq-q:hover {
    background: var(--green-light);
  }

  .foot-links a:hover {
    color: var(--green-accent);
  }
}


/* ============================================================================
   9. ACCESIBILIDAD: respeta "reducir movimiento" del sistema operativo
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}