/* ============================================================
   ZentoraAI — Landing comercial

   Hoja de estilos ÚNICA y autocontenida. Esta página no comparte
   nada con css/ de la aplicación a propósito: la app se carga
   detrás de un login y con un service worker que cachea versiones,
   y una landing que arrastre esa maquinaria es una landing que un
   día se queda servida desde caché con el precio viejo. Aquí no
   hay build, ni imports, ni dependencias: un HTML, un CSS y un JS.

   La paleta SÍ es la misma que la de la aplicación ("Serenidad",
   ver css/01-base.css). Quien entra por esta página y luego ve una
   demo tiene que reconocer el mismo producto, no dos marcas
   distintas. Los valores están copiados, no importados, por lo
   dicho arriba; si cambia la paleta de la app, hay que tocar los
   dos sitios.

   Orden del archivo:
     1. Variables y reset
     2. Tipografía y utilidades de sección
     3. Botones
     4. Navegación
     5. Hero
     6. Mockup del panel (se reutiliza en dos secciones)
     7. Prueba social y pasos
     8. Módulos y mini-mockups
     9. "A tu medida" (pestañas de marca)
    10. Antes / Después y métricas
    11. Planes y FAQ
    12. CTA final, formulario y footer
    13. Responsive
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. Variables y reset
   ───────────────────────────────────────────────────────────── */

:root {
  /* Superficies. Blanco para lo que flota, gris azulado para el
     lienzo. En claro la tarjeta es MÁS clara que el fondo. */
  --bg:        #FFFFFF;
  --surface:   #F7F9FC;
  /* El lienzo era #F4F7FB: un 3% de luminosidad por debajo del blanco.
     El mecanismo de alternar secciones estaba puesto, pero a esa distancia
     no se ve en una pantalla normal y la pagina entera se leia como una
     sola losa. Bajarlo hasta aqui es lo que hace que al bajar se note que
     has cambiado de tema; sigue siendo un azul grisaceo tranquilo, y de
     paso las tarjetas blancas que van encima destacan mas. */
  --canvas:    #EAF0F7;

  --border:    #E4E9F0;
  --border-h:  #CFD8E3;

  /* Marca: azul pizarra y menta salvia. */
  --accent:    #4A6FA5;
  --accent-d:  #3D5C8A;
  --accent-bg: rgba(74, 111, 165, 0.08);
  --mint:      #7FB8A4;
  --mint-bg:   rgba(127, 184, 164, 0.14);

  /* Texto: grafito azulado en vez de negro puro. El negro sobre
     blanco tiene un contraste que cansa a las dos horas. */
  --text:      #1F2933;
  --text-2:    #5C6B7C;
  /* Era #8A98A8, que sobre blanco ya se quedaba en 3:1 — por debajo del
     minimo legible de la norma. Sobre el lienzo nuevo, mas oscuro, habria
     empeorado. Se oscurece para no perder la letra pequeña, que en una
     landing es donde va el "sin permanencia" y el "te lo montamos". */
  --text-3:    #74818F;

  /* Semánticos, apagados a propósito: sobre fondo blanco un verde
     saturado grita y rompe la calma del resto de la página. */
  --green:     #4E9375;
  --green-bg:  rgba(78, 147, 117, 0.12);
  --amber:     #B98429;
  --amber-bg:  rgba(185, 132, 41, 0.12);
  --red:       #C4665E;
  --red-bg:    rgba(196, 102, 94, 0.10);

  /* Sombras muy bajas. Toda la profundidad de la página sale de
     aquí y de los bordes de 1px; no hay glassmorphism ni brillos. */
  --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.05);
  --shadow:    0 1px 2px rgba(31, 41, 51, 0.04), 0 4px 16px rgba(31, 41, 51, 0.06);
  --shadow-lg: 0 8px 32px rgba(31, 41, 51, 0.10);
  --shadow-xl: 0 24px 60px rgba(31, 41, 51, 0.16);

  /* Radios. 12 para lo pequeño (badges, inputs), 20 para bloques
     grandes. Nada por encima de 24: pasa de sereno a blando. */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --nav-h: 68px;

  /* Ancho de lectura. 1200 para el contenido general y 1120 para
     los bloques de texto, que a más de eso las líneas se hacen
     incómodas de seguir. */
  --ancho: 1200px;
}

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

html {
  /* El scroll suave lo hace el CSS y no el JS para que también
     funcione al pegar una URL con ancla directamente. El JS solo
     se encarga de cerrar el menú móvil al navegar. */
  scroll-behavior: smooth;
  /* Compensa la nav fija: sin esto, al saltar a #precios el título
     queda tapado por la barra. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Cinturón y tirantes contra el desbordamiento horizontal en
     móvil: los mockups scrollean DENTRO de su caja, pero si algún
     día se cuela un ancho fijo, que no arrastre toda la página. */
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Foco visible y del mismo color en toda la página. Se usa
   :focus-visible para que el anillo salga con teclado pero no al
   hacer clic con el ratón, que es lo que molesta a los videntes. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Texto solo para lectores de pantalla (etiquetas de iconos). */
.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;
}

/* Salto al contenido: primer tabulador de la página. Solo se ve
   cuando recibe foco. */
.saltar {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r);
  font-weight: 600;
}
.saltar:focus { transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   2. Tipografía y utilidades de sección
   ───────────────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.seccion { padding: 96px 0; }
.seccion--gris { background: var(--canvas); }

/* Cabecera de sección: etiqueta pequeña + h2 + entradilla.
   Centrada por defecto y con un ancho máximo corto porque una
   entradilla de 1200px de ancho no se lee, se escanea. */
.cabecera {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
/* La variante alineada a la izquierda no es un capricho: se usa en las
   secciones cuyo contenido es una REJILLA (modulos, planes, casos). Cuando
   la cabecera esta centrada y lo de debajo empieza en el margen izquierdo,
   el ojo tiene que volver atras para empezar a leer la primera tarjeta.
   Alineadas las dos, arranca en el mismo sitio.
   El efecto secundario es el que se buscaba: dos secciones seguidas ya no
   abren igual, asi que se nota que has cambiado de bloque. */
.cabecera--izq {
  margin-left: 0;
  text-align: left;
}

/* Filete corto encima de la etiqueta. Es el unico adorno que se añade, y
   solo en la variante izquierda: marca el arranque del bloque sin meter
   otra linea de texto. */
.cabecera--izq::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 22px;
}

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.etiqueta--mint {
  color: #3F7A66;
  background: var(--mint-bg);
}

h1, h2, h3 {
  /* -0.02em a partir de 28px: Inter en tamaños grandes viene con
     más aire del que pide un titular. */
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  margin-bottom: 16px;
}

h3 { font-size: 1.125rem; }

.entradilla {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.65;
}

.nota-pie {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
}

.rejilla { display: grid; gap: 24px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* Tarjeta base. Todo lo que "flota" en esta página usa estas tres
   líneas: blanco, borde de 1px y sombra mínima. */
.tarjeta {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

/* Aparición al entrar en viewport. El estado inicial lo pone el JS
   añadiendo .reveal, no el CSS: si el JS falla o está desactivado,
   el contenido se ve tal cual en vez de quedarse invisible para
   siempre, que es el fallo clásico de este patrón. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Quien pide menos movimiento no recibe ninguno: ni scroll suave,
   ni fades, ni transiciones de hover. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   3. Botones
   ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
/* El botón no se hunde ni crece al pulsar: sube 1px al pasar por
   encima y vuelve. Suficiente para que se note que es pulsable. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primario:hover {
  background: var(--accent-d);
  box-shadow: var(--shadow);
}

.btn--secundario {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-h);
}
.btn--secundario:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.btn--fantasma {
  background: transparent;
  color: var(--text-2);
  padding: 10px 14px;
}
.btn--fantasma:hover { color: var(--text); background: var(--surface); }

.btn--grande { padding: 16px 30px; font-size: 16px; }
.btn--bloque { width: 100%; }

/* Botón invertido para el bloque de CTA final, que va sobre azul. */
.btn--claro {
  background: #fff;
  color: var(--accent-d);
}
.btn--claro:hover { background: #F0F4FA; }

/* ─────────────────────────────────────────────────────────────
   4. Navegación
   ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  /* Semitransparente + blur: la nav es fija y sin esto el contenido
     que pasa por debajo se lee a través. El blur es el ÚNICO de la
     página; no es un recurso estético, es para que el texto de
     debajo no compita con el de la barra. */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* .nav--scroll lo pone landing.js al bajar de 20px. El borde
   aparece solo cuando hay algo por encima que separar. */
.nav--scroll {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  height: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.logo__marca {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  /* Único degradado de la página, y es de marca: accent → mint.
     Va solo en el cuadrado del logo, en ningún fondo. */
  background: linear-gradient(135deg, var(--accent) 0%, var(--mint) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.logo__marca svg { width: 19px; height: 19px; }
.logo__ai { color: var(--accent); }

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__enlace {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav__enlace:hover { color: var(--text); background: var(--surface); }

/* Seccion en la que estas ahora mismo.
   Faltaba por completo: se podia recorrer la pagina entera sin que nada
   dijera por donde ibas, y en una landing larga eso es justo lo que
   produce la sensacion de "bajar y bajar". El subrayado va con ::after y
   no con border-bottom para que no descoloque el enlace un pixel al
   activarse. */
.nav__enlace--activo {
  color: var(--text);
  font-weight: 600;
}
.nav__enlace--activo::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin: 5px 2px -7px;
}

/* Cuanto queda de pagina. Una linea de 2px pegada al borde inferior de la
   barra: informa sin pedir atencion. Se pinta con transform en vez de con
   width para que la anime la GPU y no provoque un reflow en cada scroll. */
.nav__progreso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
  .nav__progreso { transition: transform 0.1s linear; }
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav__acciones .btn { padding: 10px 18px; font-size: 14.5px; }

/* Hamburguesa. Oculta en escritorio; a partir de 900px sustituye a
   los enlaces. Es un <button> de verdad con aria-expanded, no un
   checkbox disfrazado, para que el lector de pantalla anuncie el
   estado del menú. */
.nav__hamburguesa {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
}
.nav__hamburguesa:hover { background: var(--surface); border-color: var(--border-h); }
.nav__hamburguesa svg { width: 20px; height: 20px; }
/* Las dos aspas del icono: se cruzan cuando el menú está abierto. */
.nav__hamburguesa .icono-cerrar { display: none; }
.nav__hamburguesa[aria-expanded="true"] .icono-menu { display: none; }
.nav__hamburguesa[aria-expanded="true"] .icono-cerrar { display: block; }

/* Panel desplegable de móvil. Se pliega con max-height en vez de
   display:none para poder animarlo, pero cuando está cerrado lleva
   además visibility:hidden: sin eso los enlaces plegados siguen
   siendo tabulables y el foco se va a un menú que no se ve. */
.nav__movil {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, visibility 0.28s;
}
.nav__movil.abierto {
  max-height: 460px;
  visibility: visible;
}
.nav__movil ul { padding: 12px 24px 24px; }
.nav__movil li + li { margin-top: 2px; }
.nav__movil a {
  display: block;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.nav__movil a:hover { background: var(--surface); }
.nav__movil .btn { margin-top: 14px; }

/* ─────────────────────────────────────────────────────────────
   5. Hero
   ───────────────────────────────────────────────────────────── */

.hero {
  padding: calc(var(--nav-h) + 76px) 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Halo detrás del titular. Un radial muy diluido del azul de marca:
   da profundidad al blanco sin meter un degradado visible. */
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  background: radial-gradient(ellipse at center,
              rgba(74, 111, 165, 0.09) 0%,
              rgba(127, 184, 164, 0.05) 45%,
              transparent 70%);
  pointer-events: none;
}

.hero__contenido { position: relative; max-width: 880px; margin: 0 auto; }

.hero h1 { margin-bottom: 22px; }
/* La segunda frase del titular en azul: es la promesa que separa a
   ZentoraAI del resto, y es donde queremos que caiga el ojo. */
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  color: var(--text-2);
  max-width: 700px;
  margin: 0 auto 34px;
  line-height: 1.6;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero__pie {
  font-size: 14px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero__pie svg { width: 15px; height: 15px; color: var(--mint); }

/* ─────────────────────────────────────────────────────────────
   6. Mockup del panel

   Es una recreación en HTML/CSS de la pantalla real de la app, no
   una captura. Tres razones: pesa 8 KB en vez de 300, se ve nítida
   en cualquier pantalla, y —la importante— se puede recolorear con
   una variable, que es justo lo que necesita la sección "a tu
   medida" para enseñar la misma app con tres marcas distintas.

   Todo el color de marca del mockup sale de --marca / --marca-bg.
   landing.js las reescribe sobre el nodo .mockup de la sección 7.
   ───────────────────────────────────────────────────────────── */

.mockup {
  --marca: var(--accent);
  --marca-bg: var(--accent-bg);

  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* El mockup tiene un ancho mínimo real: por debajo de 860px la
     interfaz deja de parecerse a la de verdad. En vez de romperla,
     se deja scrollear en horizontal DENTRO de esta caja (ver
     .mockup-marco), que es lo que hace la propia app en tablet. */
}

/* Marco que aporta el scroll horizontal en pantallas estrechas. La
   página nunca desborda; el que desborda es este contenedor. */
.mockup-marco {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--r-xl);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mockup-marco > .mockup { min-width: 880px; }

.hero__mockup {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 8px;
}

.mockup__cuerpo { display: flex; align-items: stretch; }

/* ── Sidebar 244px ─────────────────────────────────────────── */
.mk-side {
  width: 244px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 0 0 18px;
}

.mk-side__marca {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.mk-side__logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--marca);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background 0.35s ease;
}
.mk-side__logo svg { width: 17px; height: 17px; }
.mk-side__nombre {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-side__nombre span {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* Epígrafes del menú: 10px, mayúsculas, gris claro. Es lo que
   permite tener 14 entradas sin que parezca una lista infinita. */
.mk-grupo { margin-top: 16px; }
.mk-grupo__titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 18px 6px;
}

.mk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.mk-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-3);
}
.mk-item--activo {
  background: var(--marca-bg);
  color: var(--marca);
  font-weight: 600;
  border-left-color: var(--marca);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.mk-item--activo svg { color: var(--marca); transition: color 0.35s ease; }

/* Badge de contador. Redonda y pegada a la derecha. */
.mk-badge {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--marca);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background 0.35s ease;
}
.mk-badge--suave {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ── Zona derecha ──────────────────────────────────────────── */
.mk-main {
  flex: 1;
  min-width: 0;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
}

.mk-top {
  height: 60px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
.mk-top__titulo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mk-top__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-icono-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--text-2);
  position: relative;
}
.mk-icono-btn svg { width: 15px; height: 15px; }
/* Punto de aviso sobre la campana. */
.mk-icono-btn__punto {
  position: absolute;
  top: 5px; right: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--bg);
}
.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  background: var(--marca);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.35s ease;
}
.mk-btn svg { width: 13px; height: 13px; }

.mk-contenido {
  padding: 18px;
  display: grid;
  gap: 14px;
}

/* Tarjetas de estadística: icono en cuadrado de color suave, cifra
   grande y etiqueta debajo. Las cuatro del resumen de vehículos. */
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.mk-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.mk-stat__icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mk-stat__icono svg { width: 16px; height: 16px; }
.mk-stat__icono--marca { background: var(--marca-bg); color: var(--marca); transition: background 0.35s ease, color 0.35s ease; }
.mk-stat__icono--azul  { background: rgba(74, 111, 165, 0.10); color: #4A6FA5; }
.mk-stat__icono--ambar { background: var(--amber-bg); color: var(--amber); }
.mk-stat__icono--verde { background: var(--green-bg); color: var(--green); }

.mk-stat__cifra {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Cifras tabulares: sin esto, 11 y 24 ocupan distinto y las
     cuatro tarjetas bailan. */
  font-variant-numeric: tabular-nums;
}
.mk-stat__label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}

/* Fila financiera: tres tarjetas más anchas con la cifra en grande
   y una variación debajo. */
.mk-finanzas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.mk-fin {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.mk-fin__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.mk-fin__cifra {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mk-fin__delta {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mk-fin__delta svg { width: 12px; height: 12px; }
.mk-fin--destacada .mk-fin__cifra { color: var(--green); }

/* Tabla de vehículos recientes. */
.mk-tabla {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.mk-tabla__cabecera {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.mk-tabla__titulo { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.mk-tabla__ver {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--marca);
  transition: color 0.35s ease;
}

.mk-fila {
  display: grid;
  grid-template-columns: 96px 1fr 88px 96px 84px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}
.mk-fila--head {
  border-top: 0;
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 7px;
  padding-bottom: 7px;
}

/* La matrícula en monoespaciada, como en la app: es un dato que se
   compara de un vistazo entre filas y la anchura fija ayuda. */
.mk-matricula {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  display: inline-block;
  white-space: nowrap;
}

.mk-modelo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-modelo span { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }

.mk-precio { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.mk-beneficio { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green); white-space: nowrap; }

.mk-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mk-estado::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.mk-estado--vendido   { background: var(--green-bg); color: var(--green); }
.mk-estado--reservado { background: var(--amber-bg); color: var(--amber); }
.mk-estado--stock     { background: rgba(74, 111, 165, 0.10); color: #4A6FA5; }

/* ─────────────────────────────────────────────────────────────
   7. Prueba social y pasos
   ───────────────────────────────────────────────────────────── */

.caso {
  max-width: 900px;
  margin: 0 auto;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.caso__cabecera { display: flex; align-items: center; gap: 16px; }
.caso__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.caso__nombre { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.caso__meta { font-size: 14px; color: var(--text-3); }

.caso__cita {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-2);
}
.caso__cita strong { color: var(--text); font-weight: 600; }

.caso__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.caso__cifra {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.caso__cifra-label { font-size: 13.5px; color: var(--text-3); margin-top: 4px; }

/* Tira de logos / sellos de confianza bajo el titular. */
.sellos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}
.sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}
.sello svg { width: 15px; height: 15px; color: var(--mint); }

/* ── Tres pasos ────────────────────────────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

.paso { padding: 30px 26px; }

.paso__num {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--accent-bg);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 18px;
}
.paso h3 { margin-bottom: 8px; }
.paso p { color: var(--text-2); font-size: 15px; }

.paso__detalle {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.paso__detalle li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
}
.paso__detalle svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--mint);
}

/* ─────────────────────────────────────────────────────────────
   8. Módulos y mini-mockups

   Seis tarjetas, cada una con su propia miniatura en HTML/CSS. Las
   miniaturas son deliberadamente esquemáticas: no intentan ser la
   pantalla completa, solo el gesto que la identifica (un kanban, un
   checklist, una factura). Una captura real a este tamaño no se
   leería.
   ───────────────────────────────────────────────────────────── */

.modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.modulo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.modulo:hover {
  border-color: var(--border-h);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.modulo__visual {
  height: 168px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  padding: 14px;
  overflow: hidden;
  position: relative;
}

.modulo__texto { padding: 22px 24px 26px; }
.modulo__icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.modulo__icono svg { width: 17px; height: 17px; }
.modulo h3 { margin-bottom: 7px; font-size: 1.0625rem; }
.modulo p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }

/* ── Mini: kanban de leads ─────────────────────────────────── */
.mini-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; }
.mini-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 6px;
}
.mini-col__titulo {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mini-lead {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 5px;
}
.mini-lead__nombre { font-size: 9.5px; font-weight: 600; line-height: 1.3; }
.mini-lead__coche { font-size: 8.5px; color: var(--text-3); margin-top: 2px; }
.mini-lead__pin {
  display: inline-block;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 100px;
  background: var(--accent-bg);
  color: var(--accent);
}
.mini-lead__pin--mint { background: var(--mint-bg); color: #3F7A66; }
.mini-lead__pin--ambar { background: var(--amber-bg); color: var(--amber); }

/* ── Mini: expediente con checklist ────────────────────────── */
.mini-exp {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  height: 100%;
}
.mini-exp__titulo { font-size: 11px; font-weight: 700; }
.mini-exp__sub { font-size: 9px; color: var(--text-3); margin-bottom: 9px; }
.mini-barra {
  height: 6px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 4px;
}
.mini-barra i { display: block; height: 100%; width: 75%; background: var(--mint); }
.mini-barra__label { font-size: 8.5px; color: var(--text-3); margin-bottom: 9px; }
.mini-check { display: flex; align-items: center; gap: 6px; font-size: 9.5px; margin-bottom: 5px; }
.mini-check svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--green); }
.mini-check--pendiente { color: var(--text-3); }
.mini-check--pendiente svg { color: var(--text-3); }

/* ── Mini: factura ─────────────────────────────────────────── */
.mini-factura {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mini-factura__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }
.mini-factura__num { font-size: 10.5px; font-weight: 700; }
.mini-factura__fecha { font-size: 8.5px; color: var(--text-3); }
.mini-factura__sello {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--accent-bg);
  color: var(--accent);
  white-space: nowrap;
}
.mini-linea {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  color: var(--text-2);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}
.mini-factura__total {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mini-factura__total span:first-child { font-size: 9px; color: var(--text-3); font-weight: 600; }

/* ── Mini: matriz de portales ──────────────────────────────── */
.mini-portales {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  height: 100%;
}
.mini-portal-fila {
  display: grid;
  grid-template-columns: 1fr repeat(4, 16px);
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  font-size: 9.5px;
  border-bottom: 1px solid var(--border);
}
.mini-portal-fila:last-child { border-bottom: 0; }
.mini-portal-fila--head {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.mini-portal-fila--head > :first-child { text-align: left; }
.mini-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-h);
  margin: 0 auto;
}
.mini-punto--on { background: var(--green); }

/* ── Mini: gráfico de barras ───────────────────────────────── */
.mini-grafico {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px 9px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mini-grafico__titulo { font-size: 9.5px; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.mini-grafico__cifra { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.mini-barras {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.mini-barras i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--accent-bg);
  display: block;
}
.mini-barras i.alta { background: var(--accent); }
.mini-barras__pie {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  font-size: 7.5px;
  color: var(--text-3);
}
.mini-barras__pie span { flex: 1; text-align: center; }

/* ── Mini: stock con fotos-marcador ────────────────────────── */
.mini-stock { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; height: 100%; }
.mini-coche {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-coche__foto {
  height: 34px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.mini-coche__foto svg { width: 16px; height: 16px; }
.mini-coche__mat {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-3);
}
.mini-coche__nombre { font-size: 9.5px; font-weight: 700; line-height: 1.2; }
.mini-coche__precio { font-size: 9px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   9. "A tu medida" — la sección que sostiene la página

   Todo lo demás lo tiene también la competencia. Esto no. Por eso
   ocupa más alto que ninguna otra, tiene su propio fondo y es la
   única con interacción de verdad: se pulsa una pestaña y el mismo
   panel de arriba aparece con el logo, el color y el menú de otro
   concesionario.

   El truco es una sola variable: landing.js escribe --marca y
   --marca-bg en el nodo .mockup y el CSS hace el resto. No se
   duplica el HTML del panel tres veces.
   ───────────────────────────────────────────────────────────── */

/* Iba en gris igual que la seccion de Modulos, que es la de justo antes:
   dos secciones enteras seguidas sin ninguna frontera entre ellas. Pasa a
   blanco para que la alternancia no se rompa aqui. */
.medida { background: var(--bg); padding: 100px 0; }

.medida__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }

/* Barra de pestañas. Fondo blanco, píldora activa con el color del
   concesionario correspondiente. */
.pestanas {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pestana:hover { border-color: var(--border-h); color: var(--text); }

/* --c la escribe el HTML en cada botón: es el color de ESE
   concesionario, y sirve tanto para el cuadradito del logo como
   para el borde cuando la pestaña está seleccionada. */
.pestana__punto {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--c, var(--accent));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Se usa aria-selected como selector de estilo, no una clase
   aparte: así es imposible que el estado visual y el que anuncia
   el lector de pantalla se desincronicen. */
.pestana[aria-selected="true"] {
  color: var(--text);
  border-color: var(--c, var(--accent));
  box-shadow: 0 0 0 1px var(--c, var(--accent)), var(--shadow-sm);
  background: var(--bg);
}

.medida__panel {
  max-width: 1120px;
  margin: 0 auto 44px;
}

/* Al cambiar de pestaña, el panel hace un parpadeo mínimo (JS
   añade y quita .cambiando). Sin esto el cambio de color es tan
   instantáneo que no se percibe como "se ha reconfigurado". */
.medida__panel .mockup { transition: opacity 0.2s ease; }
.medida__panel .mockup.cambiando { opacity: 0.55; }

.medida__ventajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.ventaja {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
}
.ventaja__icono {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--mint-bg);
  color: #3F7A66;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.ventaja__icono svg { width: 16px; height: 16px; }
.ventaja h3 { font-size: 15px; margin-bottom: 5px; }
.ventaja p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* Comparativa directa con el estándar del sector. Va dentro de la
   sección "a tu medida" porque es el argumento, no un adorno. */
.contraste {
  max-width: 1120px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contraste__col {
  border-radius: var(--r-xl);
  padding: 26px 28px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.contraste__col--nos {
  border-color: rgba(74, 111, 165, 0.35);
  box-shadow: var(--shadow);
}
.contraste__titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.contraste__col--nos .contraste__titulo { color: var(--accent); }
.contraste__col li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--text-2);
  padding: 7px 0;
}
.contraste__col li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.contraste__col--otros svg { color: var(--text-3); }
.contraste__col--nos svg { color: var(--green); }
.contraste__col--nos li { color: var(--text); }

/* ─────────────────────────────────────────────────────────────
   10. Antes / Después y métricas
   ───────────────────────────────────────────────────────────── */

/* Se maqueta con <table> de verdad y no con divs: son datos
   comparados en dos columnas con encabezado, que es exactamente
   para lo que existe una tabla. Un lector de pantalla la recorre
   celda a celda diciendo a qué columna pertenece cada una. */
.comparativa-marco { overflow-x: auto; }

.comparativa {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg);
  min-width: 640px;
}
.comparativa th,
.comparativa td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.comparativa tr:last-child th,
.comparativa tr:last-child td { border-bottom: 0; }

.comparativa thead th {
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.comparativa thead th:last-child { color: var(--accent); background: var(--accent-bg); }

/* Primera columna: la tarea. Es <th scope="row">, de ahí que haya
   que reponerle el peso y la alineación. */
.comparativa tbody th {
  font-weight: 600;
  color: var(--text);
  width: 32%;
}
.comparativa .antes { color: var(--text-3); }
.comparativa .despues { color: var(--text); background: rgba(74, 111, 165, 0.035); }
.comparativa .despues strong { font-weight: 600; color: var(--accent-d); }

.comparativa td svg {
  width: 15px; height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 7px;
}
.comparativa .antes svg { color: var(--red); }
.comparativa .despues svg { color: var(--green); }

/* ── Métricas ──────────────────────────────────────────────── */
.metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.metrica__cifra {
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.metrica__titulo { font-weight: 600; margin-top: 10px; font-size: 15px; }
.metrica__desc { font-size: 13.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

/* Aviso de que las cifras son estimaciones. Va con borde y fondo
   para que no parezca letra pequeña escondida: si se dan números,
   se dice de dónde salen. */
.aviso-cifras {
  max-width: 760px;
  margin: 44px auto 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.aviso-cifras svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--amber); }

/* ─────────────────────────────────────────────────────────────
   11. Planes y FAQ
   ───────────────────────────────────────────────────────────── */

.planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  height: 100%;
  position: relative;
}

/* La destacada no crece de tamaño ni se sale de la rejilla: se
   distingue por el borde azul y la sombra. Escalar la tarjeta del
   medio descoloca las tres en móvil y obliga a compensarlo. */
.plan--destacado {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.plan__cinta {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.plan__nombre { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__para { font-size: 13.5px; color: var(--text-3); margin-top: 4px; min-height: 40px; }

.plan__precio {
  margin: 18px 0 4px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.plan__precio small { font-size: 0.95rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.plan__precio-nota { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }

/* La cuota mensual, separada del pago de entrada por una línea.
   Van juntas y visibles a la vez a propósito: enterarse de la cuota
   después de haber leído solo el precio de alta es la forma más rápida
   de que alguien se sienta engañado en la primera llamada. */
.plan__cuota {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  margin-bottom: 22px;
  border-top: 1px dashed var(--border);
}
.plan__cuota-importe {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.plan__cuota-importe small { font-size: 0.8em; font-weight: 500; color: var(--text-3); }
.plan__cuota-nota { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.plan .btn { margin-bottom: 22px; }

.plan__lista { display: grid; gap: 11px; }
.plan__lista li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}
.plan__lista svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.plan__lista strong { color: var(--text); font-weight: 600; }

/* Franja común a los tres planes: la personalización va incluida
   siempre. Es el mensaje de la página, así que se repite aquí en
   vez de esconderlo en un bullet más. */
.planes__incluido {
  max-width: 900px;
  margin: 36px auto 0;
  text-align: center;
  padding: 20px 26px;
  border: 1px solid rgba(74, 111, 165, 0.28);
  background: var(--accent-bg);
  border-radius: var(--r-lg);
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.planes__incluido strong { font-weight: 700; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { max-width: 800px; margin: 0 auto; }

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item:has(.faq__pregunta[aria-expanded="true"]) {
  border-color: var(--border-h);
  box-shadow: var(--shadow-sm);
}

/* <button> real, no un <div> con onclick: se llega con Tab, se
   activa con Enter y con Espacio, y aria-expanded dice si está
   abierto. Con un div habría que reimplementar las tres cosas. */
.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.faq__pregunta:hover { background: var(--surface); }
.faq__pregunta:focus-visible { outline-offset: -2px; }

.faq__mas {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: transform 0.25s ease, color 0.2s ease;
}
.faq__mas svg { width: 18px; height: 18px; }
.faq__pregunta[aria-expanded="true"] .faq__mas {
  transform: rotate(180deg);
  color: var(--accent);
}

/* El panel se pliega con grid-template-rows 0fr→1fr, que anima sin
   tener que saber la altura del contenido de antemano (con
   max-height habría que poner un número inventado y generoso, y el
   plegado sale con retardo). */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq__panel[data-abierto="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding: 0 22px 20px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────
   12. CTA final, formulario y footer
   ───────────────────────────────────────────────────────────── */

/* El unico bloque de la pagina que no es ni blanco ni gris.
   Es donde esta el formulario, o sea lo unico que la pagina quiere de
   verdad que hagas: merece leerse como un destino y no como una seccion
   mas. Tambien resuelve el otro tramo sin frontera, porque antes venia en
   el mismo gris que la FAQ que tiene encima. */
.cta {
  padding: 104px 0;
  background:
    radial-gradient(1100px 420px at 50% 0%, rgba(74, 111, 165, 0.10), transparent 70%),
    var(--canvas);
  border-top: 1px solid var(--border);
}

.cta__caja {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cta__texto { padding: 48px 44px; }
.cta__texto h2 { margin-bottom: 14px; }
.cta__texto p { color: var(--text-2); font-size: 16px; margin-bottom: 24px; }
.cta__lista { display: grid; gap: 11px; }
.cta__lista li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-2);
}
.cta__lista svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--mint); }

/* Prueba social pegada al formulario. Deliberadamente sobria: si esto
   pareciera un banner de testimonio se leería como publicidad y dejaría
   de servir para lo que está aquí, que es responder "¿lo usa alguien?"
   en el momento exacto de decidir. */
.cta__prueba {
  display: flex;
  gap: 14px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.cta__prueba-logo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cta__prueba blockquote {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  font-style: italic;
}
.cta__prueba figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.cta__prueba figcaption span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

.cta__form {
  padding: 44px;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo input::placeholder { color: var(--text-3); }
.campo input:hover { border-color: var(--border-h); }
.campo input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form__legal { font-size: 12px; color: var(--text-3); margin-top: 12px; line-height: 1.5; text-align: center; }
.form__legal a { color: var(--accent); text-decoration: underline; }

/* Mensaje de confirmación del formulario. Oculto hasta que el JS
   lo muestra; role="status" hace que el lector de pantalla lo
   anuncie solo, sin robarle el foco al usuario. */
.form__ok {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--mint-bg);
  color: #35695A;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(127, 184, 164, 0.4);
}
.form__ok.visible { display: block; }

/* ── Barra fija de móvil ───────────────────────────────────── */
/* Solo existe por debajo de 900px, que es donde la nav esconde su
   botón de "Reservar demo". En escritorio no se pinta nunca: ahí la
   llamada ya está siempre visible arriba a la derecha. */
.cta-fija { display: none; }

/* El `display: flex` de abajo es una regla de autor y el `[hidden]` del
   navegador es una regla de agente de usuario: gana la nuestra, así que
   sin esta línea la barra se vería igualmente estando oculta — nada más
   cargar la página y durante los 300 ms en que se está retirando.
   Va fuera de la media query para que valga en cualquier ancho. */
.cta-fija[hidden] { display: none !important; }

@media (max-width: 900px) {
  .cta-fija {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    /* Por encima del gesto de "volver" de iOS y de la barra de
       navegación de Android: sin el safe-area el botón queda medio
       tapado en los iPhone con notch. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 150;               /* bajo la nav (200), sobre el contenido */
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--border-h);
    border-radius: var(--r-lg);
    background: var(--bg);
    box-shadow: 0 8px 28px rgba(31, 41, 51, 0.16);

    /* Entra deslizándose desde abajo. La clase la pone landing.js
       cuando el CTA del hero deja de verse. */
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  .cta-fija--visible { transform: translateY(0); opacity: 1; }

  .cta-fija__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .cta-fija__texto b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
  .cta-fija__texto span {
    font-size: 12px;
    color: var(--text-3);
    /* Con dos coches de nombre largo el subtítulo no puede romper la
       barra en dos líneas: se recorta y ya. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cta-fija .btn { margin-left: auto; flex-shrink: 0; padding: 11px 20px; font-size: 14.5px; }
}

/* En pantallas muy estrechas el texto sobra antes que el botón. */
@media (max-width: 380px) {
  .cta-fija__texto span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-fija { transition: none; }
}

/* La barra flota sobre el contenido: al imprimir no pinta nada. */
@media print {
  .cta-fija { display: none !important; }
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
  background: var(--bg);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer__intro { font-size: 14px; color: var(--text-2); margin-top: 14px; max-width: 300px; line-height: 1.6; }
.footer h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 14px;
}
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 14px; color: var(--text-2); }
.footer li a:hover { color: var(--accent); }

.footer__abajo {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}
.footer__abajo nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__abajo a:hover { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   13. Responsive

   Tres cortes y ninguno arbitrario:
     1080px — las rejillas de 4 no caben con aire suficiente
      900px — la nav de escritorio deja de entrar y pasa a menú
      640px — móvil de verdad: todo a una columna

   Regla que no se rompe nunca: la PÁGINA no scrollea en
   horizontal. Lo que scrollea son los contenedores de mockup y de
   tabla, cada uno dentro de su caja.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .modulos { grid-template-columns: repeat(2, 1fr); }
  .metricas { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  /* La nav de escritorio se va y aparece la hamburguesa. */
  .nav__enlaces,
  .nav__acciones { display: none; }
  .nav__hamburguesa { display: flex; }

  .seccion { padding: 72px 0; }
  .medida { padding: 76px 0; }
  .cta { padding: 72px 0; }

  .planes { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plan--destacado { order: -1; }        /* la más elegida, primero */
  .plan__cinta { top: -12px; }
  .plan__para { min-height: 0; }

  .pasos { grid-template-columns: 1fr; }
  .contraste { grid-template-columns: 1fr; }

  .cta__caja { grid-template-columns: 1fr; }
  /* El 8px de abajo estaba medido para que la lista de ventajas casi
     tocara el formulario. Ahora debajo va la cita de JMJ, que lleva su
     propio filete: sin este aire se leería pegada al borde. */
  .cta__texto { padding: 36px 28px 28px; }
  .cta__form { padding: 28px; border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 768px) {
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .hero__mockup { padding: 0 16px 8px; }

  /* El mockup mantiene su ancho real y scrollea dentro del marco.
     Se le quita el radio a la caja interior para que el corte del
     scroll no se vea partido en la esquina. */
  .mockup-marco {
    /* Sangrado a los lados del contenedor: en móvil el panel llega
       al borde de la pantalla, que es lo que invita a arrastrarlo. */
    margin: 0 -16px;
    padding: 0 16px;
  }
  .mockup-marco > .mockup { min-width: 820px; }

  .caso { padding: 26px 22px; }
  .caso__cifras { grid-template-columns: 1fr; gap: 18px; text-align: left; }
}

@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .seccion { padding: 56px 0; }
  .cabecera { margin-bottom: 36px; }

  .rejilla--2,
  .rejilla--3,
  .rejilla--4,
  .modulos { grid-template-columns: 1fr; }

  .metricas { grid-template-columns: 1fr; gap: 30px; }

  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }

  /* Las pestañas de marca se alinean a la izquierda y scrollean:
     centradas y con wrap saltaban de una a dos líneas al cambiar
     de selección, porque la activa es más ancha. */
  .pestanas {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin: 0 -16px 24px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { flex-shrink: 0; }

  .campo--doble { grid-template-columns: 1fr; }

  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .footer__abajo { flex-direction: column; align-items: flex-start; }

  .comparativa th,
  .comparativa td { padding: 13px 14px; font-size: 13.5px; }
}

/* Impresión: fuera la nav fija, las sombras y los mockups, que en
   papel no aportan nada y se comen tres páginas de tinta. */
@media print {
  .nav, .mockup-marco, .medida__panel, .cta__form { display: none; }
  .seccion, .medida, .cta { padding: 24px 0; }
  * { box-shadow: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   14. Añadidos
   ───────────────────────────────────────────────────────────── */

/* .reveal deja la pieza invisible hasta que el observador la marca. Eso
   solo puede pasar si hay JS vivo, y la clase .js la pone landing.js en
   <html> en su primera línea. Sin JS —o si el archivo no llega a
   cargar— la página se ve entera, que es el fallo clásico de este
   patrón cuando el estado inicial lo pone el CSS. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* El menú de la sección "a tu medida" tiene las nueve entradas posibles
   escritas en el HTML y el JS oculta las que no toquen con [hidden]. Sin
   esta línea no se ocultarían: .mk-item declara display:flex y eso gana
   al display:none que trae el atributo desde la hoja del navegador. */
.mk-item[hidden] { display: none; }

/* ── Encaje de las miniaturas de los módulos ───────────────────
   Las minis viven en 140px de alto (168 menos el padding del marco) y
   el marco recorta lo que sobra. Estos ajustes son de altura, no de
   estilo: sin ellos el cuarto paso del checklist, la última línea de la
   factura y la segunda fila de fichas de stock asoman cortadas por el
   borde de la tarjeta, que parece un fallo de maquetación. */
.mini-exp { padding: 9px 12px; line-height: 1.35; }
.mini-exp__sub,
.mini-barra__label { margin-bottom: 6px; }
.mini-check { margin-bottom: 3px; }
.mini-check:last-child { margin-bottom: 0; }

.mini-factura { padding: 9px 11px; line-height: 1.35; }
.mini-portales { line-height: 1.35; }

.mini-stock .mini-coche { padding: 6px 7px; gap: 1px; line-height: 1.3; }
.mini-stock .mini-coche__foto { height: 24px; }

/* ── Formulario ────────────────────────────────────────────────
   El <textarea> repite lo del <input> porque .campo solo contemplaba
   inputs. resize:vertical y no both: el horizontal desborda la columna
   del formulario en cuanto se arrastra un poco. */
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
  min-height: 84px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea::placeholder { color: var(--text-3); }
.campo textarea:hover { border-color: var(--border-h); }
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Campo señalado por la validación del JS. El borde rojo no va solo:
   el mensaje de error dice qué falta, porque el color no es
   información para quien no lo distingue. */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--red);
}
.campo input[aria-invalid="true"]:focus,
.campo textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--red-bg);
}

/* Mismo hueco que el mensaje de confirmación, en rojo apagado. */
.form__ok--error {
  background: var(--red-bg);
  border-color: rgba(196, 102, 94, 0.4);
  color: #8F3A33;
}

/* El rango de precio es la cadena más larga de las tres tarjetas y a
   2rem se sale de la columna en la rejilla de tres. */
.plan__precio--rango { font-size: 1.6rem; }

/* ─────────────────────────────────────────────────────────────
   15. Calculadora de margen real

   Dos columnas: los campos a la izquierda y el resultado a la
   derecha, en una tarjeta oscura. El contraste es intencionado —
   el resultado es la conclusión de la sección, no un bloque más
   del formulario, y tiene que leerse antes que los campos.
   ───────────────────────────────────────────────────────────── */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}

.calc__campos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calc__campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 7px;
}

/* El símbolo del euro va dentro de la caja y no en el label: así el
   campo se lee como un importe aunque esté vacío. */
.calc__input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.calc__input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.calc__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 14px 0;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.calc__input input:focus { outline: none; }

/* Las flechitas de incremento roban ancho y no las va a usar nadie
   para escribir 13.000. */
.calc__input input::-webkit-outer-spin-button,
.calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__input input[type=number] { -moz-appearance: textfield; }

.calc__input span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-3);
}

.calc__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
}

.calc__check input { margin-top: 3px; flex-shrink: 0; }
.calc__check strong { display: block; font-size: 14px; color: var(--text); }
.calc__check small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ─── El resultado ─── */

.calc__resultado {
  background: var(--text);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-lg);
}

.calc__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.calc__linea b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.calc__linea--resta b { color: #E9A19A; }
.calc__linea[hidden] { display: none; }

.calc__linea--total {
  margin-top: 6px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 16px;
  color: #FFFFFF;
}

.calc__linea--total b { font-size: 1.9rem; color: #9FD6BE; }

.calc__margenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.calc__margen {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
}

.calc__margen span {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
}

.calc__margen small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* El margen real es el número que justifica la sección entera: se
   destaca sobre el bruto para que la comparación se vea sin leer. */
.calc__margen--fuerte { background: rgba(159, 214, 190, 0.14); }
.calc__margen--fuerte span { color: #9FD6BE; }
.calc__margen--fuerte small { color: rgba(159, 214, 190, 0.75); }

.calc__aviso {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.calc__aviso b { color: #E9A19A; }
.calc__aviso[hidden] { display: none; }

.calc__pie {
  max-width: 720px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

.calc__pie a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.calc__pie a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 640px) {
  .calc__resultado { padding: 22px 20px; }
  .calc__linea--total b { font-size: 1.6rem; }
  .calc__margen span { font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────
   16. Páginas de documento (recursos y legales)

   Una sola columna estrecha para leer. Comparten hoja con la
   landing en lugar de tener la suya porque son cuatro reglas y
   porque así el día que cambie la paleta cambian con ella.
   ───────────────────────────────────────────────────────────── */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) 24px 96px;
}

.doc__volver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 28px;
}

.doc__volver:hover { color: var(--accent); }

.doc h1 {
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.doc__entradilla {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 12px;
}

.doc__fecha {
  font-size: 13px;
  color: var(--text-3);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}

.doc h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}

.doc h3 {
  font-size: 1.15rem;
  margin: 32px 0 12px;
}

.doc p,
.doc li {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-2);
}

.doc p { margin: 0 0 18px; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin-bottom: 9px; }
.doc strong { color: var(--text); font-weight: 650; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Los importes y las fórmulas se leen mal en prosa: van en su caja,
   en tabular para que las columnas de céntimos cuadren. */
.doc__cuenta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 0 0 24px;
  font-variant-numeric: tabular-nums;
}

.doc__cuenta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 15.5px;
  color: var(--text-2);
}

.doc__cuenta div:last-child {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--border-h);
  font-weight: 700;
  color: var(--text);
}

.doc__cuenta b { font-weight: 700; color: var(--text); }

/* Aviso: lo que hay que mirar aunque se lea en diagonal. */
.doc__aviso {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.doc__aviso p { margin: 0; font-size: 15.5px; }

.doc__tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}

.doc__tabla th,
.doc__tabla td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}

.doc__tabla th {
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
}

.doc__marco { overflow-x: auto; margin-bottom: 24px; }

.doc__cierre {
  margin-top: 56px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.doc__cierre h2 { margin-top: 0; font-size: 1.25rem; }
.doc__cierre p:last-child { margin-bottom: 0; }

/* Nota de fuentes: quien lea esto tiene derecho a comprobarlo. */
.doc__fuentes {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-3);
}

.doc__fuentes p { font-size: 14px; margin-bottom: 8px; }

@media (max-width: 640px) {
  .doc { padding: calc(var(--nav-h) + 32px) 20px 64px; }
  .doc p, .doc li { font-size: 16px; }
}


/* ── Captura real del panel vs. maqueta de HTML ─────────────────────
   En escritorio manda la captura: es la pantalla de verdad y transmite
   mas confianza que un dibujo. En movil manda la maqueta, porque una
   imagen de 1902px reducida a 360 deja la letra ilegible, mientras que
   la maqueta se puede desplazar de lado y se lee.
   El corte va en 900px, el mismo que ya usa el resto de la hoja, y
   coincide con el min-width:880px de .mockup-marco > .mockup. */
.mockup-foto { display: block; }
.mockup-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.mockup-marco--solo-movil { display: none; }

@media (max-width: 900px) {
  .mockup-foto { display: none; }
  .mockup-marco--solo-movil { display: block; }
}

/* La barra de las páginas sueltas (guías y legales). Sin ella, quien llega a
   una guía desde Google solo podía volver a la portada: no había ni un enlace
   para entrar en la aplicación, que es a donde se quiere que vaya el cliente
   que ya la tiene contratada. */
.doc__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.doc__barra .doc__volver { margin-bottom: 0; }

.doc__entrar {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  transition: background .18s ease, border-color .18s ease;
}
.doc__entrar:hover {
  background: var(--surface);
  border-color: var(--accent);
}