/* ===========================================================================
 * _root/css/kd-landing.css
 * Ruta en el servidor: httpdocs/css/kd-landing.css  (lo copia setup/sync_root.php)
 *
 * QUÉ ES
 * La hoja de estilo de las landings de captación. Una sola, para todas.
 *
 * DE DÓNDE SALE ESTE DISEÑO
 * De kinderdisplay.com/index.html: su topbar, su hero en degradado, sus
 * tarjetas con el icono en un cuadrado de color, sus cifras grandes, su banda
 * de llamada y su pie oscuro. Quien llegue a una landing desde la portada tiene
 * que reconocer el mismo sitio.
 *
 * QUÉ SE HACE DISTINTO, Y POR QUÉ
 *   · Ni Bootstrap ni Bootstrap Icons: la portada los trae de un CDN y aquí no
 *     se carga nada de fuera. Los iconos son un sprite propio (img/iconos.svg).
 *   · Las tipografías se sirven desde _root/fonts/. Es coherencia con lo que
 *     vendemos: si decimos que los datos no salen de España, la página no puede
 *     pedirle las letras a Google. Si esos ficheros no están, se ve con la letra
 *     del sistema y no pasa nada.
 *   · Sin animaciones de entrada. La portada mueve las tarjetas al pasar el
 *     ratón —eso se conserva— pero nada aparece al desplazar.
 *
 * UN COLOR POR LANDING
 * El acento se elige con `data-tema` en el <body>. Los ocho tonos están medidos:
 * todos pasan de 4,5:1 sobre blanco, así que se pueden usar en texto y no solo
 * en adornos. El naranja de marca NO es acento de ninguna: se queda para los
 * botones, con texto tinta, porque sobre blanco da 1,9:1 y no vale para leer.
 *
 * MÓVIL PRIMERO. Todo lo de escritorio va dentro de @media (min-width: …).
 * ========================================================================= */

/* ── Tipografías alojadas ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --kd-tinta:      #2F2B39;
  --kd-tinta-70:   #5B5665;
  --kd-papel:      #F9F7FA;
  --kd-blanco:     #FFFFFF;
  --kd-naranja:    #FFA73C;
  --kd-naranja-on: #F0940F;
  --kd-menta:      #DFF4F3;
  --kd-menta-txt:  #1F5F5B;
  --kd-borde:      #EDE9F1;

  /* El acento por defecto: el malva de la marca. Cada landing lo cambia. */
  --kd-acento:      #7A4A94;
  --kd-acento-bajo: #F3EDF7;   /* fondo de etiquetas e iconos */
  --kd-acento-halo: rgba(122, 74, 148, .22);

  --kd-radio:      8px;
  --kd-radio-caja: 18px;       /* el de las tarjetas de la portada */
  --kd-radio-pill: 999px;
  --kd-sombra:     0 2px 12px rgba(47, 43, 57, .08);
  --kd-sombra-alta: 0 14px 30px rgba(47, 43, 57, .13);

  --kd-s1: 8px;  --kd-s2: 16px; --kd-s3: 24px; --kd-s4: 32px;
  --kd-s5: 48px; --kd-s6: 64px; --kd-s7: 96px;

  --kd-ancho: 1200px;
  --kd-texto: 68ch;

  --kd-fuente-titulo: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kd-fuente-texto:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Un color por landing ──────────────────────────────────────────────── */
/* Medidos sobre blanco: gestión 6,5 · precios 5,7 · familias 5,1 ·
   agenda 5,5 · fichaje 5,7 · cobros 5,6 · preinscripción 6,1 · 233 7,2. */
[data-tema="gestion"]       { --kd-acento:#7A4A94; --kd-acento-bajo:#F3EDF7; --kd-acento-halo:rgba(122,74,148,.22); }
[data-tema="precios"]       { --kd-acento:#C02B4D; --kd-acento-bajo:#FCEAEE; --kd-acento-halo:rgba(192,43,77,.20); }
[data-tema="familias"]      { --kd-acento:#1F7A76; --kd-acento-bajo:#E3F4F3; --kd-acento-halo:rgba(31,122,118,.22); }
[data-tema="agenda"]        { --kd-acento:#965B12; --kd-acento-bajo:#FBF0DF; --kd-acento-halo:rgba(150,91,18,.20); }
[data-tema="fichaje"]       { --kd-acento:#3F63B5; --kd-acento-bajo:#EAEFFA; --kd-acento-halo:rgba(63,99,181,.20); }
[data-tema="cobros"]        { --kd-acento:#27754A; --kd-acento-bajo:#E6F3EB; --kd-acento-halo:rgba(39,117,74,.20); }
[data-tema="preinscripcion"]{ --kd-acento:#8A4F6D; --kd-acento-bajo:#F7EDF2; --kd-acento-halo:rgba(138,79,109,.20); }
[data-tema="modelo233"]     { --kd-acento:#5A4B9C; --kd-acento-bajo:#EFECF9; --kd-acento-halo:rgba(90,75,156,.20); }

/* Los webinars: un color por ponente, y no se repite el de ninguna landing.
   Medidos sobre blanco: azul 6,8 · naranja 5,2 · rojo 5,6.
   «naranja» es un naranja quemado, NO el de marca (--kd-naranja, 1,9:1): ese
   sigue reservado a los botones, con texto tinta. Este sí se puede leer. */
[data-tema="azul"]          { --kd-acento:#1E5AA8; --kd-acento-bajo:#E8F0FA; --kd-acento-halo:rgba(30,90,168,.20); }
[data-tema="naranja"]       { --kd-acento:#C2410C; --kd-acento-bajo:#FDEEE3; --kd-acento-halo:rgba(194,65,12,.20); }
[data-tema="rojo"]          { --kd-acento:#C62828; --kd-acento-bajo:#FCE9E9; --kd-acento-halo:rgba(198,40,40,.20); }

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--kd-fuente-texto);
  font-size: 17px;
  line-height: 1.7;
  color: var(--kd-tinta-70);
  background: var(--kd-blanco);
  overflow-wrap: break-word;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--kd-fuente-titulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--kd-tinta);
  margin: 0 0 var(--kd-s2);
  text-wrap: balance;
}
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.05rem; font-weight: 600; }

p  { margin: 0 0 var(--kd-s2); max-width: var(--kd-texto); }
ul, ol { margin: 0 0 var(--kd-s2); padding-left: var(--kd-s3); max-width: var(--kd-texto); }
li { margin-bottom: var(--kd-s1); }

/* La palabra que se pinta del color de la landing dentro de un titular, como
   en la portada: «sin que la gestión te robe la tarde». */
.kd-realce { color: var(--kd-acento); }

a { color: var(--kd-acento); text-underline-offset: 3px; }
a:hover { color: var(--kd-tinta); }

img, svg { max-width: 100%; height: auto; }
strong { font-weight: 600; color: var(--kd-tinta); }

:focus-visible {
  outline: 3px solid var(--kd-acento);
  outline-offset: 3px;
  border-radius: 4px;
}

.kd-saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--kd-tinta); color: var(--kd-blanco);
  padding: var(--kd-s2) var(--kd-s3);
  border-radius: 0 0 var(--kd-radio) 0;
  z-index: 100;
}
.kd-saltar:focus { left: 0; color: var(--kd-blanco); }

.kd-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Estructura ────────────────────────────────────────────────────────── */
.kd-contenedor {
  width: 100%; max-width: var(--kd-ancho);
  margin: 0 auto; padding: 0 var(--kd-s3);
}

.kd-seccion { padding: var(--kd-s5) 0; }
.kd-seccion--papel { background: var(--kd-papel); }

/* La banda de color de la página. Con degradado del acento, como la portada
   hace con el morado: es lo que corta la página en dos y no se repite. */
.kd-seccion--acento {
  background: linear-gradient(135deg, var(--kd-acento) 0%, var(--kd-tinta) 140%);
  color: var(--kd-blanco);
}
.kd-seccion--acento h2, .kd-seccion--acento h3 { color: var(--kd-blanco); }
.kd-seccion--acento a  { color: var(--kd-blanco); }
.kd-seccion--acento p  { color: rgba(255, 255, 255, .9); }
.kd-seccion--acento .kd-realce { color: var(--kd-menta); }

.kd-seccion__intro { max-width: var(--kd-texto); }
.kd-seccion__intro h2 { margin-bottom: var(--kd-s2); }

/* ── Topbar y cabecera ─────────────────────────────────────────────────── */
/* La tira de contacto de la portada, con el color de la landing. Es lo primero
   que se ve y lo que dice de un golpe que cada página es de un tema. */
.kd-topbar {
  background: var(--kd-acento);
  color: var(--kd-blanco);
  font-size: .85rem;
  padding: 6px 0;
}
.kd-topbar a { color: var(--kd-blanco); text-decoration: none; }
.kd-topbar a:hover { text-decoration: underline; }
.kd-topbar__fila { display: flex; justify-content: space-between; gap: var(--kd-s2); }
.kd-topbar__email { display: none; }

.kd-cabecera {
  background: var(--kd-blanco);
  box-shadow: 0 2px 18px rgba(47, 43, 57, .06);
  position: sticky; top: 0; z-index: 50;
}
.kd-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kd-s2); min-height: 66px;
}
.kd-cabecera__logo { display: inline-flex; align-items: center; min-width: 0; }
.kd-cabecera__logo img { height: 28px; width: auto; }

.kd-nav { display: none; gap: var(--kd-s3); align-items: center; }
.kd-nav a {
  color: var(--kd-tinta); text-decoration: none;
  font-family: var(--kd-fuente-titulo);
  font-size: .95rem; font-weight: 600;
}
.kd-nav a:hover { color: var(--kd-acento); }
.kd-nav a[aria-current="page"] { color: var(--kd-acento); }

.kd-cabecera__cta { padding: 10px var(--kd-s3); font-size: .95rem; flex: 0 0 auto; }
.kd-cabecera__cta-largo { display: none; }

.kd-nav-movil {
  border-top: 1px solid var(--kd-borde);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--kd-blanco);
}
.kd-nav-movil::-webkit-scrollbar { display: none; }
.kd-nav-movil__tira {
  display: flex; gap: var(--kd-s3);
  padding: 10px var(--kd-s3);
  width: max-content; min-width: 100%;
}
.kd-nav-movil a {
  color: var(--kd-tinta-70); text-decoration: none;
  font-family: var(--kd-fuente-titulo);
  font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.kd-nav-movil a[aria-current="page"] {
  color: var(--kd-acento); text-decoration: underline; text-underline-offset: 6px;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
/* El naranja con texto tinta y la sombra de color de la portada. */
.kd-boton {
  display: inline-block;
  padding: 14px var(--kd-s4);
  border: 0; border-radius: var(--kd-radio-pill);
  background: var(--kd-naranja);
  color: var(--kd-tinta);
  font-family: var(--kd-fuente-titulo);
  font-size: 1rem; font-weight: 600;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 167, 60, .35);
  transition: background .2s, transform .2s;
}
.kd-boton:hover {
  background: var(--kd-naranja-on);
  color: var(--kd-tinta);
  transform: translateY(-2px);
}

.kd-boton--linea {
  background: transparent; color: var(--kd-acento);
  box-shadow: inset 0 0 0 2px var(--kd-acento);
}
.kd-boton--linea:hover { background: var(--kd-acento); color: var(--kd-blanco); }

.kd-seccion--acento .kd-boton--linea {
  color: var(--kd-blanco); box-shadow: inset 0 0 0 2px var(--kd-blanco);
}
.kd-seccion--acento .kd-boton--linea:hover { background: var(--kd-blanco); color: var(--kd-acento); }

.kd-botonera { display: flex; flex-direction: column; gap: var(--kd-s2); margin-top: var(--kd-s4); }

/* ── Etiqueta ──────────────────────────────────────────────────────────── */
.kd-etiqueta {
  display: inline-block;
  padding: 7px var(--kd-s3);
  border-radius: var(--kd-radio-pill);
  background: var(--kd-acento-bajo);
  color: var(--kd-acento);
  font-family: var(--kd-fuente-titulo);
  font-size: .82rem; font-weight: 600;
  margin: 0 0 var(--kd-s3);
}

/* ── Iconos ────────────────────────────────────────────────────────────── */
.kd-icono { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* El cuadrado de color con el icono dentro: es la firma visual de la portada. */
.kd-icono-caja {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kd-acento);
  color: var(--kd-blanco);
  margin-bottom: var(--kd-s2);
}
.kd-icono-caja .kd-icono { width: 26px; height: 26px; }
.kd-icono-caja--bajo { background: var(--kd-acento-bajo); color: var(--kd-acento); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.kd-hero {
  background: linear-gradient(180deg, var(--kd-blanco) 0%, var(--kd-papel) 100%);
  padding: var(--kd-s5) 0 var(--kd-s4);
  overflow: hidden;
}
.kd-hero h1 { margin-bottom: var(--kd-s3); }
.kd-hero__lede { font-size: 1.08rem; max-width: var(--kd-texto); }

/* Los puntos con su check del color de la landing. */
.kd-puntos { list-style: none; padding: 0; margin: var(--kd-s3) 0 0; }
.kd-puntos li { display: flex; gap: var(--kd-s2); align-items: flex-start; margin-bottom: var(--kd-s1); }
.kd-puntos .kd-icono { color: var(--kd-acento); margin-top: .3em; }

.kd-hero__imagen { margin-top: var(--kd-s5); }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.kd-rejilla { display: grid; grid-template-columns: 1fr; gap: var(--kd-s3); margin-top: var(--kd-s4); }

.kd-tarjeta {
  background: var(--kd-blanco);
  border: 1px solid var(--kd-borde);
  border-radius: var(--kd-radio-caja);
  padding: var(--kd-s3);
  box-shadow: var(--kd-sombra);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
/* Se eleva al pasar el ratón, como en la portada. En pantalla táctil no pasa
   nada porque no hay ratón, y por eso no se depende de ello para nada. */
.kd-tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--kd-sombra-alta);
  border-color: var(--kd-acento-halo);
}
.kd-tarjeta h3 { margin-bottom: var(--kd-s1); }
.kd-tarjeta p  { margin-bottom: 0; }

/* La tarjeta que es un enlace a otra landing. Entera pulsable: en un móvil,
   acertar en un enlace de texto de una línea es incómodo. */
a.kd-tarjeta--enlace {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.kd-tarjeta--enlace h3 { color: var(--kd-acento); }
a.kd-tarjeta--enlace h3::after { content: " →"; }
a.kd-tarjeta--enlace:hover h3 { text-decoration: underline; }

.kd-tarjeta__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--kd-acento-bajo); color: var(--kd-acento);
  font-family: var(--kd-fuente-titulo); font-weight: 700; font-size: .9rem;
  margin-bottom: var(--kd-s2);
}

/* ── Filas de características ──────────────────────────────────────────── */
/* El bloque «icono + título + línea» de la portada, para las secciones que
   acompañan a un mockup. */
.kd-fila-func { display: flex; gap: var(--kd-s2); margin-bottom: var(--kd-s3); }
.kd-fila-func .kd-icono { color: var(--kd-acento); width: 24px; height: 24px; margin-top: .2em; }
.kd-fila-func h3 { margin-bottom: 2px; }
.kd-fila-func p  { margin-bottom: 0; font-size: .97rem; }

/* ── Cifras ────────────────────────────────────────────────────────────── */
.kd-cifras { display: grid; grid-template-columns: 1fr; gap: var(--kd-s4); margin-top: var(--kd-s4); }
.kd-cifra__n {
  font-family: var(--kd-fuente-titulo); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--kd-acento);
  display: block; margin-bottom: var(--kd-s1);
}
.kd-cifra p { margin: 0; font-size: .97rem; }

/* ── Precios ───────────────────────────────────────────────────────────── */
.kd-precio {
  font-family: var(--kd-fuente-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--kd-tinta);
  margin: var(--kd-s2) 0 0;
}

/* Un importe todavía sin decidir. Se ve que es un hueco a propósito: si
   pareciera un precio, alguien lo tomaría por uno. */
.kd-pendiente {
  display: inline-block;
  background: var(--kd-acento-bajo);
  color: var(--kd-acento);
  border: 1px dashed var(--kd-acento);
  border-radius: var(--kd-radio);
  padding: 1px 8px;
  font-family: 'Courier New', monospace;
  font-size: .9em;
  font-weight: 600;
}

/* El hueco de una captura que aún no está subida. Ocupa el sitio que ocupará
   la imagen, para que la página no se recoloque el día que llegue. Y dice qué
   captura falta, que es lo que hace falta para ir a buscarla. */
.kd-captura-pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  min-height: 220px;
  padding: var(--kd-s3);
  text-align: center;
  background: var(--kd-acento-bajo);
  border: 2px dashed var(--kd-acento);
  border-radius: var(--kd-radio-g, var(--kd-radio));
  color: var(--kd-acento);
}
.kd-captura-pendiente__id {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.kd-captura-pendiente__que {
  max-width: 34ch;
  font-size: .9rem;
  line-height: 1.45;
  opacity: .85;
}

/* ── Preguntas frecuentes ──────────────────────────────────────────────── */
.kd-faq { margin-top: var(--kd-s4); max-width: 820px; }
.kd-faq details { border-bottom: 1px solid var(--kd-borde); padding: var(--kd-s3) 0; }
.kd-faq summary {
  font-family: var(--kd-fuente-titulo); font-weight: 600; font-size: 1.03rem;
  color: var(--kd-tinta); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--kd-s2);
}
.kd-faq summary::-webkit-details-marker { display: none; }
.kd-faq summary::after {
  content: "+"; font-size: 1.4rem; line-height: 1; color: var(--kd-acento); flex: 0 0 auto;
}
.kd-faq details[open] summary::after { content: "−"; }
.kd-faq details > *:not(summary) { margin-top: var(--kd-s2); }
.kd-faq p { margin-bottom: 0; }

/* ── Mockups ───────────────────────────────────────────────────────────── */
/* El marco es un SVG de fondo y la captura va DENTRO por CSS: se cambia la
   captura sin rehacer el marco. En móvil el marco desaparece y se ve solo la
   captura, que es lo que interesa en 390 px. */
.kd-mockup { margin: 0; position: relative; }
.kd-mockup__marco { position: relative; display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.kd-mockup img { display: block; width: 100%; height: auto; }
.kd-mockup figcaption { margin-top: var(--kd-s2); font-size: .85rem; }

/* Sin marco por debajo de tablet. */
.kd-mockup__marco { padding: 0; background-image: none; }
.kd-mockup img { border: 1px solid var(--kd-borde); border-radius: var(--kd-radio); }

/* El marco de ventana de los manuales (`manual_shot()` en
   ayuda/_manual_layout.php): la barra con sus tres puntos y el título de la
   pantalla. Se trae aquí para que el producto se vea igual en el manual y en
   la web, y porque para una captura de panel funciona mejor que el portátil:
   no roba sitio y se entiende igual que es una pantalla.

   Desde el 7-oct-2026 lo usan TODAS las landings; su barra va en tinta, por
   lo que se explica unas líneas más abajo.

   DIFERENCIA IMPORTANTE CON EL MANUAL: allí este marco envuelve una pantalla
   DIBUJADA en HTML. Aquí dentro va siempre una captura de verdad. Enseñar una
   interfaz inventada a quien todavía no es cliente es prometer algo que no
   existe. */
.kd-mockup--ventana .kd-mockup__marco {
  display: block;
  border: 1px solid var(--kd-borde);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--kd-sombra-alta);
  background: var(--kd-blanco);
}
/* LA BARRA VA EN TINTA, NO EN EL COLOR DE LA LANDING (7-oct-2026).
   Llevaba el acento de cada página, y debajo de ella empieza la captura, que
   trae SU PROPIA cabecera: la del panel, con el color de la aplicación. Eran
   dos barras de color pegadas peleándose —verde sobre verde azulado en cobros,
   marrón sobre turquesa en la agenda— y el conjunto se veía sucio.

   En tinta, la barra hace de marco y deja que el color que se vea sea el del
   producto. Es además el mismo tono de los marcos de dispositivo, así que la
   web sigue teniendo un solo negro. El color de cada landing no se pierde:
   está en la etiqueta, en el titular, en los iconos y en los botones. */
.kd-ventana__barra {
  background: var(--kd-tinta);
  color: var(--kd-blanco);
  padding: 9px 14px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--kd-fuente-titulo);
  font-size: .86rem; font-weight: 600;
}
.kd-ventana__punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .6); flex: 0 0 auto;
}
.kd-ventana__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-mockup--ventana img { border: 0; border-radius: 0; display: block; }

/* Una captura vertical —el panel de la familia en el móvil— dentro del marco
   de ventana. Sin esto ocupa toda la columna y se convierte en una torre que
   deja el texto de al lado perdido arriba del todo. La clase la pone sola
   kdLandingMockup() cuando el fichero es más alto que ancho. */
.kd-mockup--ventana.kd-mockup--alta {
  max-width: 320px;
  margin-inline: auto;
}

/* El halo de color bajo el dispositivo, como el drop-shadow morado del hero
   de la portada. */
.kd-mockup--halo::before {
  content: ""; position: absolute; inset: 12% 6% -4%;
  background: var(--kd-acento-halo);
  filter: blur(38px); border-radius: 50%;
  z-index: -1;
}

/* Dos dispositivos: el grande y un móvil encima de una esquina. */
.kd-duo { position: relative; }
.kd-duo__movil {
  position: absolute; right: -4%; bottom: -8%;
  width: 26%; z-index: 2;
  filter: drop-shadow(0 12px 24px rgba(47, 43, 57, .22));
}
.kd-duo__movil img { border-radius: var(--kd-radio); }

/* ── Formulario ────────────────────────────────────────────────────────── */
/* La tarjeta con sombra y el filo de color arriba, como el formulario de la
   portada (allí el filo es naranja; aquí, del color de la landing). */
.kd-form-caja {
  background: var(--kd-blanco);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(47, 43, 57, .10);
  padding: var(--kd-s4) var(--kd-s3);
  border-top: 5px solid var(--kd-acento);
  max-width: 620px;
}
.kd-form { max-width: 560px; }
.kd-campo { margin-bottom: var(--kd-s3); }
.kd-campo label {
  display: block; font-family: var(--kd-fuente-titulo);
  font-weight: 600; font-size: .92rem; color: var(--kd-tinta);
  margin-bottom: var(--kd-s1);
}
.kd-campo input[type=text],
.kd-campo input[type=email],
.kd-campo input[type=tel],
.kd-campo input[type=number],
.kd-campo select,
.kd-campo textarea {
  width: 100%;
  padding: 12px var(--kd-s2);
  border: 1px solid #DCD6E2;
  border-radius: 10px;
  font-family: inherit; font-size: 1rem;
  color: var(--kd-tinta); background: var(--kd-blanco);
}
.kd-campo input:focus, .kd-campo select:focus, .kd-campo textarea:focus {
  border-color: var(--kd-acento);
  box-shadow: 0 0 0 .2rem var(--kd-acento-halo);
  outline: none;
}
.kd-campo--corto input { max-width: 180px; }
.kd-campo__ayuda { display: block; font-size: .85rem; margin-top: var(--kd-s1); }

.kd-campo--check { display: flex; align-items: flex-start; gap: var(--kd-s2); }
.kd-campo--check input { margin-top: 5px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--kd-acento); }
.kd-campo--check label { font-family: var(--kd-fuente-texto); font-weight: 400; font-size: .9rem; margin: 0; color: var(--kd-tinta-70); }

/* El enlace a la información de protección de datos, VISIBLE.
   La caja del formulario es blanca, pero vive dentro de una sección de color,
   y esa sección pinta sus enlaces de blanco (.kd-seccion--acento a). Resultado:
   blanco sobre blanco, un enlace que solo se encontraba pasando el ratón por
   encima. Y justo ese es el que la ley obliga a que se lea antes de aceptar.
   Se corrige aquí y no en cada landing porque son nueve. */
.kd-form-caja a {
  color: var(--kd-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kd-form-caja a:hover, .kd-form-caja a:focus { color: var(--kd-tinta); }

.kd-error {
  background: #FBE9EC; border: 1px solid #E4A9B5; color: #8A1F35;
  border-radius: var(--kd-radio); padding: var(--kd-s2) var(--kd-s3); margin-bottom: var(--kd-s3);
}
.kd-campo--mal input { border-color: #B3364F; }

.kd-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── El cierre: texto y formulario ─────────────────────────────────────── */
/* Dentro de la banda de color, la caja del formulario se queda blanca: es lo
   que hace que se lea como «esto es lo que tienes que rellenar» y no como más
   página. */
.kd-cierre { display: grid; grid-template-columns: 1fr; gap: var(--kd-s4); }
.kd-cierre__texto h2 { margin-bottom: var(--kd-s2); }
.kd-cierre .kd-form-caja { max-width: none; }
.kd-cierre .kd-form-caja .kd-campo label { color: var(--kd-tinta); }

/* La línea que quita miedo: sin tarjeta, sin permanencia. Va pequeña y
   apagada a propósito — es una tranquilidad, no un argumento. */
.kd-friccion { font-size: .9rem; opacity: .85; }

@media (min-width: 900px) {
  .kd-cierre { grid-template-columns: 1fr 1fr; gap: var(--kd-s6); align-items: start; }
}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.kd-pie {
  background: var(--kd-tinta); color: #C9C4D2;
  padding: var(--kd-s5) 0 var(--kd-s3);
  margin-top: var(--kd-s6);
}
.kd-pie a { color: #C9C4D2; text-decoration: none; }
.kd-pie a:hover { color: var(--kd-naranja); text-decoration: underline; }
.kd-pie h2 { color: var(--kd-blanco); font-size: .95rem; margin-bottom: var(--kd-s2); }
.kd-pie p { color: #C9C4D2; }
.kd-pie__cols { display: grid; grid-template-columns: 1fr; gap: var(--kd-s4); }
.kd-pie__legal {
  margin-top: var(--kd-s4); padding-top: var(--kd-s3);
  border-top: 1px solid #453F52; font-size: .85rem;
}
.kd-pie ul { list-style: none; padding: 0; margin: 0; }

/* ── A partir de tablet ────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body { font-size: 18px; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.1rem; }

  .kd-cabecera__logo img { height: 34px; }
  .kd-topbar__email { display: inline; }

  .kd-seccion { padding: var(--kd-s6) 0; }
  .kd-hero { padding: var(--kd-s6) 0 var(--kd-s5); }
  .kd-hero__lede { font-size: 1.2rem; }

  .kd-botonera { flex-direction: row; align-items: center; }
  .kd-rejilla { grid-template-columns: repeat(2, 1fr); }
  .kd-cifras { grid-template-columns: repeat(3, 1fr); }
  .kd-pie__cols { grid-template-columns: 2fr 1fr 1fr; }
  .kd-form-caja { padding: var(--kd-s5); }

  /* Aquí aparece el marco del dispositivo. El relleno es el grosor del bisel
     de cada marco, medido sobre el SVG. */
  .kd-mockup img { border: 0; border-radius: 0; }

  .kd-mockup--portatil .kd-mockup__marco {
    background-image: url('../img/mockups/portatil.svg');
    padding: 2.2% 2.2% 6.8%;
  }
  .kd-mockup--portatil img { border-radius: 2px; }

  .kd-mockup--tablet .kd-mockup__marco {
    background-image: url('../img/mockups/tablet.svg');
    padding: 4.2% 5.2%;
  }
  .kd-mockup--tablet img { border-radius: 3px; }

  .kd-mockup--movil { max-width: 320px; }
  .kd-mockup--movil .kd-mockup__marco {
    background-image: url('../img/mockups/movil.svg');
    padding: 4.6% 4.2%;
  }
  .kd-mockup--movil img { border-radius: 18px; }
}

/* ── A partir de escritorio ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .kd-nav { display: flex; }
  .kd-nav-movil { display: none; }
  .kd-cabecera__cta { padding: 12px var(--kd-s4); font-size: 1rem; }
  .kd-cabecera__cta-largo { display: inline; }
  .kd-cabecera__cta-corto { display: none; }

  h1 { font-size: 2.9rem; }

  .kd-rejilla { grid-template-columns: repeat(3, 1fr); }
  .kd-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .kd-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

  .kd-hero__fila {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: var(--kd-s6); align-items: center;
  }
  .kd-hero__imagen { margin-top: 0; }

  .kd-dos-columnas {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--kd-s6); align-items: center;
  }
  .kd-dos-columnas--invertida > *:first-child { order: 2; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kd-tarjeta:hover, .kd-boton:hover { transform: none; }
}

/* ── Impresión ─────────────────────────────────────────────────────────── */
@media print {
  .kd-cabecera, .kd-topbar, .kd-nav-movil, .kd-pie, .kd-botonera, .kd-saltar { display: none; }
  body { font-size: 11pt; color: #000; }
  .kd-seccion--acento { background: none; color: #000; }
}