/*
  La landing de Kabelo.

  Se monta SOBRE `kabelo.css`, igual que `salon.css`: sus tokens `--k-*`, su
  Montserrat, su escala de espacio y su modo oscuro.

  Antes esta página tenía su propia paleta rosa y su propia tipografía
  (Bricolage Grotesque), decididas cuando el producto era sólo el probador. El
  resultado es que la página que vende Kabelo no se parecía a Kabelo: quien
  entraba veía rosa y llegaba a un panel verde azulado. Un sistema de diseño que
  la propia portada no usa no es un sistema de diseño.

  Los dos colores de marca hacen aquí el mismo trabajo que en la lámina: el azul
  petróleo (`--k-brand`) es el fondo de los bloques que hay que mirar, y el
  dorado (`--k-accent`) es el único acento — el que marca la segunda línea del
  titular, el plan recomendado y el botón que cierra la página.
*/

/* --- Cimientos -------------------------------------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-text);
  font: var(--k-body-lg) var(--k-font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--k-font-sans);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--k-text);
  margin: 0;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: var(--k-h3); }
p { margin: 0; }
img { max-width: 100%; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(var(--k-space-5), 4vw, var(--k-space-10));
}

/* El rótulo en versalitas que abre cada sección en la lámina. Dorado, corto y
   siempre encima del titular: dice de qué va lo que sigue antes de leerlo. */
.rotulo {
  margin: 0 0 var(--k-space-3);
  color: var(--k-accent);
  font: var(--k-small) var(--k-font-sans);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sub { color: var(--k-text-muted); }

/*
  Cómo se cobra, encima de las tarjetas de precio.

  Centrado y con el ancho acotado a 62 caracteres: es un párrafo que se lee de
  corrido, y a todo el ancho de una pantalla grande el ojo pierde el renglón al
  volver. La primera frase va en negrita porque es la que contesta la pregunta;
  el resto sólo la sostiene.
*/
.modelo-precio {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  color: var(--k-text-muted);
  font: var(--k-body) var(--k-font-sans);
}
.modelo-precio strong {
  /* En el color del texto normal, no en el dorado del rótulo: el dorado ya lo
     usa el rótulo de arriba, y dos acentos seguidos compiten entre ellos. */
  display: block;
  color: var(--k-text);
  font-size: 1.05em;
  margin-bottom: var(--k-space-2);
}

/* --- La barra --------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--k-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--k-base), background var(--k-base);
}
/* El borde aparece sólo al despegarse de arriba: en reposo, una línea bajo la
   barra parte la portada en dos por nada. */
.nav.pegada { border-bottom-color: var(--k-border); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--k-space-6);
  min-height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--k-text);
  text-decoration: none;
}
.marca svg { width: 30px; height: 30px; color: var(--k-accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--k-space-6);
  margin-right: auto;
}
.nav-links a {
  color: var(--k-text-muted);
  text-decoration: none;
  font: var(--k-body);
  font-weight: 500;
}
.nav-links a:hover { color: var(--k-text); }

.nav-acciones { display: flex; align-items: center; gap: var(--k-space-3); }

@media (max-width: 900px) {
  /* En un teléfono la barra guarda el logo y la acción: el resto está a un
     dedo hacia abajo, y un menú desplegable para cuatro enlaces es un toque de
     más antes de llegar a lo que se vino a ver. */
  .nav-links { display: none; }
  .nav-inner { gap: var(--k-space-3); }
  /* La marca cede el sitio: es lo único que puede encogerse sin perder nada. */
  .marca { margin-right: auto; font-size: 1rem; }
}

@media (max-width: 480px) {
  /*
    Y en un teléfono estrecho, sin "Iniciar sesión".

    Tres controles no caben en 390 px: la barra medía 416 y la página entera
    rodaba de lado, que es de las peores cosas que le pueden pasar a una
    portada. Se va el que menos falta hace ahí arriba — quien ya tiene cuenta
    no entra por la página de ventas, y el enlace sigue en el pie.
  */
  .nav-acciones > .btn-ghost { display: none; }
}

/* --- Botones ---------------------------------------------------------------- */

.btn {
  min-height: var(--k-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  padding: 0 var(--k-space-6);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-surface);
  color: var(--k-text);
  font: 600 var(--k-button) var(--k-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--k-fast), background var(--k-fast), border-color var(--k-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--k-brand);
  border-color: var(--k-brand);
  color: #fff;
}
.btn-accent {
  background: var(--k-accent);
  border-color: var(--k-accent);
  /* Texto oscuro sobre dorado: el blanco sobre #C89A4B no llega al contraste
     que exige un botón, y éste es el botón que cierra la página. */
  color: #1F2A36;
}
.btn-ghost { background: transparent; }
.btn-chico { min-height: var(--k-btn-md); padding: 0 var(--k-space-5); }
.btn svg { width: 18px; height: 18px; flex: none; }

.icono-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-surface);
  color: var(--k-text-muted);
  cursor: pointer;
}
.icono-btn svg { width: 18px; height: 18px; }
.icono-btn:hover { color: var(--k-text); }

/* --- La portada ------------------------------------------------------------- */

.hero { padding: clamp(var(--k-space-12), 7vw, var(--k-space-20)) 0 var(--k-space-10); }
.hero-grid {
  display: grid;
  gap: clamp(var(--k-space-8), 5vw, var(--k-space-16));
  align-items: center;
}
@media (min-width: 1000px) {
  /* El texto un poco más estrecho que la imagen: el titular tiene que caber en
     dos renglones, y la demostración es lo que se mira. */
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.hero h1 { margin-bottom: var(--k-space-5); }
/* La segunda línea del titular, en el acento. Es lo que hace que "Todo tu
   negocio / Una sola plataforma" se lea como dos frases y no como una larga. */
.hero h1 .acento { color: var(--k-accent); display: block; }
.hero .lede {
  max-width: 46ch;
  margin-bottom: var(--k-space-8);
  font-size: 1.05rem;
  color: var(--k-text-muted);
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--k-space-3); }

/* Para quién es, en la propia portada: quien entra sabe en tres segundos si la
   página le habla a él. */
.para-quien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-8);
  margin-top: var(--k-space-12);
}
.para-quien .titulo {
  width: 100%;
  margin: 0;
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
}
.para-quien .uno {
  display: grid;
  justify-items: center;
  gap: var(--k-space-2);
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
  font-weight: 600;
}
.para-quien svg { width: 26px; height: 26px; color: var(--k-text); }

/* --- Franjas de módulos ------------------------------------------------------ */

.banda {
  padding: clamp(var(--k-space-8), 4vw, var(--k-space-12))
           clamp(var(--k-space-5), 4vw, var(--k-space-10));
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-xl);
}
.seccion { padding: clamp(var(--k-space-10), 5vw, var(--k-space-16)) 0; }

.modulos {
  display: grid;
  gap: var(--k-space-8);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.modulo { display: flex; gap: var(--k-space-3); align-items: flex-start; }
.modulo svg { width: 26px; height: 26px; flex: none; color: var(--k-text); }
.modulo b { display: block; font-size: .95rem; }
.modulo span {
  display: block;
  margin-top: 2px;
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
}

/* La fila de nombres a secas, sin descripción: es un índice, no una lista de
   funciones. Va después del bloque de Kabelo AI para recordar que todo eso
   convive en la misma herramienta. */
.indice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--k-space-5) var(--k-space-10);
}
.indice .uno {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  font-weight: 600;
  font-size: .95rem;
}
.indice svg { width: 22px; height: 22px; color: var(--k-accent); }

/* --- El bloque de Kabelo AI --------------------------------------------------
   El único bloque en azul petróleo de la página. Es lo que distingue al
   producto, y darle el color de marca a pantalla completa es lo que lo separa
   de las cinco secciones de tarjetas blancas que tiene cualquier página. */

.bloque-ai {
  padding: clamp(var(--k-space-8), 5vw, var(--k-space-16));
  background: var(--k-brand);
  border-radius: var(--k-radius-xl);
  color: #F8F7F4;
}
.bloque-ai h2 { color: #fff; }
.bloque-ai .rotulo { color: var(--k-accent); }
/* El aire que daba el recorrido cuando vivía entre el título y el botón. Al
   sacarlo de esta columna el botón se quedó pegado a la última línea del h2. */
.ai-grid .btn { margin-top: var(--k-space-8); }
.ai-grid {
  display: grid;
  gap: clamp(var(--k-space-8), 4vw, var(--k-space-12));
  align-items: center;
}
@media (min-width: 1000px) {
  .ai-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Los pasos: foto → estilo → color → visualización → guardar → cita. Es un
   recorrido y no una lista, así que la flecha entre uno y otro no es adorno.

   Vive DEBAJO del grid y a todo el ancho del bloque, no dentro de la columna
   del título. Ahí dentro no cabía a ningún ancho: en escritorio esa columna son
   cinco doceavos y el recorrido se partía en dos filas con una flecha colgando
   al final de la primera, apuntando al vacío. Un recorrido que envuelve deja de
   leerse como recorrido.

   En pantalla chica se pone de pie. Seis pasos no caben en fila en un celular
   —caben dos, y salen tres filas con dos flechas rotas—, y una columna con la
   flecha hacia abajo sigue siendo un recorrido. */
.pasos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--k-space-2);
  margin-top: var(--k-space-10);
}
.paso {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  color: rgba(248, 247, 244, .8);
  font: var(--k-small) var(--k-font-sans);
  line-height: 1.25;
}
/* `flex: none` para que el icono no se aplaste cuando la etiqueta es larga:
   sin esto, "Visualización con IA" le roba ancho al dibujo. */
.paso svg { flex: none; width: 26px; height: 26px; color: #fff; }
.paso-flecha {
  color: rgba(248, 247, 244, .45);
  /* Centrada bajo el icono, no bajo la fila entera: es la línea que une un paso
     con el siguiente y tiene que salir de donde está el dibujo. */
  width: 26px;
  text-align: center;
  rotate: 90deg;
}

/* En fila desde que hay ancho de verdad para las seis columnas y sus flechas.
   860px y no 768: a 768 el bloque interior deja 630px útiles y los pasos se
   apretaban hasta cortar la palabra más larga. */
@media (min-width: 860px) {
  .pasos {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .paso {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--k-space-2);
    /* Sin ancho fijo. El 74px que tenía era más estrecho que la palabra
       "Visualización", que se salía de su caja a TODOS los anchos, también en
       escritorio. Un mínimo cómodo y que crezca lo que necesite. */
    flex: 1 1 0;
    min-width: 88px;
    text-align: center;
  }
  .paso-flecha {
    flex: none;
    width: auto;
    rotate: none;
    /* A la altura de los iconos y no del centro de la fila: las etiquetas van
       de uno a dos renglones y la flecha bailaría con ellas. */
    margin-top: 6px;
  }
}

/* --- Tarjetas de sección ----------------------------------------------------- */

.tarjetas {
  display: grid;
  gap: var(--k-space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tarjeta {
  padding: var(--k-space-6);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
}

/* --- Planes ------------------------------------------------------------------ */

.planes {
  display: grid;
  gap: var(--k-space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--k-space-6);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
}

/*
  El plan recomendado, con su cinta dorada arriba.

  La cinta ocupa el ancho entero de la tarjeta y no una esquina: una etiqueta
  flotando sobre un borde es el adorno de plantilla que la lámina justamente no
  tiene. Y dice MÁS POPULAR, que es un hecho sobre los demás clientes, no una
  opinión nuestra sobre cuál conviene.
*/
.plan.recomendado {
  border-color: var(--k-accent);
  padding-top: calc(var(--k-space-6) + 28px);
  overflow: hidden;
}
.plan .cinta {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 5px 0;
  background: var(--k-accent);
  color: #1F2A36;
  text-align: center;
  font: var(--k-small) var(--k-font-sans);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plan h3 { margin-bottom: var(--k-space-2); }
.plan .para {
  margin-bottom: var(--k-space-5);
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
  min-height: 2.6em;
}
.plan .precio {
  display: flex;
  align-items: baseline;
  gap: var(--k-space-2);
  margin-bottom: var(--k-space-5);
}
.plan .precio b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.plan .precio span { color: var(--k-text-muted); font: var(--k-small) var(--k-font-sans); }

.plan ul {
  flex: 1;
  margin: 0 0 var(--k-space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--k-space-2);
}
.plan li {
  display: flex;
  gap: var(--k-space-2);
  font-size: .92rem;
  color: var(--k-text);
}
/* La palomita como carácter y no como icono: pesa cero, se copia con el texto
   y se ve igual en cualquier pantalla. */
.plan li::before { content: '✓'; color: var(--k-success); font-weight: 700; }

/* Mientras llegan del servidor. Sin esto la sección salta de vacía a llena y
   la página entera da un tirón hacia abajo. */
.plan-hueco {
  min-height: 320px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  background: var(--k-surface);
}

/* --- Testimonios ------------------------------------------------------------- */

.dicen { display: grid; gap: var(--k-space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dice {
  padding: var(--k-space-6);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
}
.dice p { margin-bottom: var(--k-space-5); font-size: .95rem; }
.dice .quien { display: flex; align-items: center; gap: var(--k-space-3); }
.dice .inicial {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--k-radius-pill);
  background: var(--k-brand);
  color: #fff;
  font-weight: 700;
}
.dice b { display: block; font-size: .92rem; }
.dice small { color: var(--k-text-muted); }

/* --- El cierre --------------------------------------------------------------- */

.cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-6);
  padding: clamp(var(--k-space-8), 5vw, var(--k-space-12));
  background: var(--k-brand);
  border-radius: var(--k-radius-xl);
  color: #fff;
}
.cierre h2 { color: #fff; }
.cierre h2 .acento { color: var(--k-accent); display: block; }
.cierre p { margin-top: var(--k-space-3); color: rgba(248, 247, 244, .75); font-size: .95rem; }

/* --- Pie --------------------------------------------------------------------- */

.pie {
  margin-top: clamp(var(--k-space-10), 5vw, var(--k-space-16));
  padding: var(--k-space-12) 0 var(--k-space-8);
  border-top: 1px solid var(--k-border);
}
.pie-grid {
  display: grid;
  gap: var(--k-space-8);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pie-col h4 {
  margin: 0 0 var(--k-space-4);
  font-size: .9rem;
  font-weight: 700;
}
.pie-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--k-space-2); }
.pie-col a {
  color: var(--k-text-muted);
  text-decoration: none;
  font-size: .88rem;
}
.pie-col a:hover { color: var(--k-text); }
.pie-firma {
  margin-top: var(--k-space-10);
  padding-top: var(--k-space-6);
  border-top: 1px solid var(--k-border);
  text-align: center;
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
}
.pie-redes { display: flex; gap: var(--k-space-3); margin-top: var(--k-space-4); }
.pie-redes a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  color: var(--k-text-muted);
}
.pie-redes svg { width: 16px; height: 16px; }

/* --- El alta ----------------------------------------------------------------- */

.alta {
  display: grid;
  gap: clamp(var(--k-space-8), 4vw, var(--k-space-12));
  padding: clamp(var(--k-space-8), 4vw, var(--k-space-12));
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-md);
}
@media (min-width: 900px) {
  .alta { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); align-items: start; }
}
.alta-perks { margin: var(--k-space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--k-space-3); }
.alta-perks li { display: flex; gap: var(--k-space-2); color: var(--k-text-muted); font-size: .92rem; }
.alta-perks li::before { content: '✓'; color: var(--k-success); font-weight: 700; }

.formulario { display: grid; gap: var(--k-space-4); }
.campo { display: grid; gap: var(--k-space-2); }
.campo-fila { display: grid; gap: var(--k-space-4); grid-template-columns: 1fr 1fr; }
.campo label { font-size: .88rem; font-weight: 600; }
.campo input, .campo select {
  width: 100%;
  min-height: var(--k-control);
  padding: 0 var(--k-space-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-surface);
  color: var(--k-text);
  font: inherit;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--k-brand);
  outline-offset: 1px;
  border-color: var(--k-brand);
}
.campo .pista { color: var(--k-text-muted); font: var(--k-small) var(--k-font-sans); }

.alta-error {
  margin: 0;
  color: var(--k-danger);
  font-size: .9rem;
  font-weight: 600;
}
.alta-error:empty { display: none; }

.codigo-enviado {
  padding: var(--k-space-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-bg);
  font-size: .92rem;
}
.codigo-campo {
  font-size: 1.6rem !important;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.alta-listo { display: grid; gap: var(--k-space-4); justify-items: center; text-align: center; }
.listo-marca {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--k-radius-pill);
  background: var(--k-success);
  color: #fff;
  font-size: 1.6rem;
}

/* --- Lo que flota ------------------------------------------------------------ */

.flotantes {
  position: fixed;
  right: clamp(var(--k-space-4), 3vw, var(--k-space-8));
  bottom: clamp(var(--k-space-4), 3vw, var(--k-space-8));
  z-index: 30;
  display: grid;
  gap: var(--k-space-3);
  justify-items: center;
}
.flotante {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: var(--k-radius-pill);
  background: var(--k-surface);
  color: var(--k-text);
  box-shadow: var(--k-shadow-lg);
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--k-base), transform var(--k-base);
}
.flotante.se-ve { opacity: 1; pointer-events: auto; }
.flotante:hover { transform: translateY(-2px); }
.flotante svg { width: 24px; height: 24px; }
.flotante.whats { background: #25d366; color: #fff; }

/* --- El comparador de la portada ---------------------------------------------
   La demostración real: dos fotos y un tirador. Se conserva tal cual estaba
   —funciona con ratón, dedo y teclado— y sólo se cambian sus colores por los
   tokens del sistema, que es de lo que iba este rediseño. */

.compare {
  position: relative;
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--k-surface-raised);
  border: 1px solid var(--k-border);
  box-shadow: var(--k-shadow-md);
  cursor: ew-resize;
  /* Sin esto, arrastrar el tirador en un teléfono rueda la página debajo. */
  touch-action: none;
  user-select: none;
  outline: none;
}
.compare:focus-visible { outline: 3px solid var(--k-brand); outline-offset: 2px; }

.compare-layer { position: absolute; inset: 0; }
.compare-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Sin esto el navegador cree que quieres arrastrar la imagen y el comparador
     deja de responder a media pasada. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/*
  Respaldo si una foto no carga.

  Un panel liso que dice lo que hay. Dibujar dos caras en SVG para tapar el
  hueco convertiría la demostración en caricatura justo en el momento en que más
  falta hace la credibilidad.
*/
.compare-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: var(--k-space-6);
  background: var(--k-surface-raised);
  color: var(--k-text-muted);
  font-size: .9rem;
  text-align: center;
}
.compare.no-photo .compare-layer img { display: none; }
.compare.no-photo .compare-fallback { display: grid; }

/* La capa "después" se revela desde la línea hacia la derecha. */
.compare-after { clip-path: inset(0 0 0 var(--split, 50%)); }

.compare-tag {
  position: absolute;
  bottom: var(--k-space-4);
  padding: var(--k-space-1) var(--k-space-3);
  border-radius: var(--k-radius-pill);
  background: color-mix(in srgb, var(--k-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  font: var(--k-small) var(--k-font-sans);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag-before { left: var(--k-space-4); color: var(--k-text-muted); }
.tag-after { right: var(--k-space-4); color: var(--k-brand); }

.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 3px;
  background: rgba(255, 255, 255, .92);
  pointer-events: none;
  box-shadow: 0 0 18px rgba(0, 0, 0, .5);
}
/* Agarradera: dos barras verticales, que es como se lee "arrástrame" en
   cualquier interfaz. Hecha con un degradado, sin dibujar nada a mano. */
.compare-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: var(--k-radius-pill);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  background-image:
    linear-gradient(90deg, transparent 43%, #8FA3A9 43%, #8FA3A9 46%, transparent 46%,
                    transparent 54%, #8FA3A9 54%, #8FA3A9 57%, transparent 57%);
}
/* Latido suave que invita a arrastrar, sólo hasta el primer toque. */
.compare.untouched .compare-handle::after { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

/* Quien pidió menos movimiento no quiere un latido perpetuo en la portada. */
@media (prefers-reduced-motion: reduce) {
  .compare.untouched .compare-handle::after { animation: none; }
  .btn:hover, .flotante:hover { transform: none; }
}

.compare-hint {
  margin: var(--k-space-4) 0 0;
  text-align: center;
  color: var(--k-text-muted);
  font: var(--k-small) var(--k-font-sans);
}

/* --- Que lo poco no deje huérfanos -------------------------------------------
   `auto-fit` reparte lo que hay en las columnas que caben, y cuando el número
   no divide justo deja la última fila pegada a la izquierda con una tarjeta
   sola. Cinco módulos en cuatro columnas, o siete planes en tres: se lee como
   maquetación rota, no como una fila incompleta.

   Se centra la fila en vez de estirar las tarjetas — dos planes de 550 px son
   dos carteles. */

@media (min-width: 900px) {
  .modulos,
  .tarjetas,
  .planes { justify-content: center; }

  /* Pistas de ancho acotado en vez de `1fr`: con `1fr` no sobra nada que
     repartir y `justify-content` no tiene efecto. */
  /*
    Cinco columnas declaradas, no `auto-fit`.

    Los módulos son cinco escritos a mano en el HTML, no una lista que crece.
    Y `auto-fit` decide cuántas pistas caben midiéndolas por su ancho MÁXIMO:
    con 205 px, cinco pistas suman más que la banda, así que ponía cuatro y el
    quinto módulo caía solo a una segunda fila. Para un número fijo, decir el
    número es más simple y no se puede equivocar.
  */
  .modulos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--k-space-6);
  }
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(230px, 275px)); }
  .planes { grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); }
}

/* En el bloque de Kabelo AI las tarjetas son una columna a propósito: van al
   lado del texto, no debajo. */
@media (min-width: 900px) {
  .ai-grid .tarjetas { grid-template-columns: 1fr; justify-content: stretch; }
}