/* ==========================================================================
   My NovaGen AI — Sistema de diseño
   Oscuro integral · cristal · editorial · empresarial

   Decisiones de esta revisión:

   1. OSCURO EN TODA LA WEB. No hay bandas claras. Las secciones se separan
      por variaciones de negro, iluminación, líneas y profundidad.

   2. ANCHO REAL. El contenido deja de vivir en el tercio central: los
      contenedores crecen y las composiciones se extienden hacia los lados,
      pero los párrafos mantienen una medida legible (62-70 caracteres).

   3. REJILLAS SIN HUÉRFANOS. Los grids se declaran con número fijo de
      columnas por tramo, para que nunca quede una tarjeta suelta abajo.

   4. EL COLOR ES SEÑAL. Cian = procesos, verde = WhatsApp, morado = web,
      lima = resultado confirmado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografías autoalojadas (SIL Open Font License; ver assets/fuentes/)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("assets/fuentes/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fuentes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --azul: #3b82f6;
  --azul-vivo: #2563eb;
  --cian: #22d3ee;
  --morado: #a78bfa;
  --lima: #a3e635;
  --whatsapp: #25d366;
  /* Identidad propia de Nova: no podía compartir color con ninguna de las
     otras dos familias de CTA (azul/cian = Evaluación, verde = WhatsApp)
     ni con los acentos ya asignados a las tarjetas de Soluciones (morado =
     chatbots, lima = Diseño Web). Ámbar cálido: legible sobre negro,
     distinto de todo lo anterior, y coherente con el nombre "Nova". */
  --nova: #f2a53d;

  /* Escala de negros: la identidad completa vive aquí */
  --negro: #03050a;
  --base: #05080f;
  --panel: #080d18;
  --elevada: #0c1322;
  --alta: #111a2c;

  --texto: #f2f5fc;
  --texto-medio: #aebbd6;
  --texto-tenue: #7e8dac;

  --linea: rgba(150, 178, 230, 0.13);
  --linea-fuerte: rgba(150, 178, 230, 0.26);

  /* Cristal oscuro */
  --cristal: rgba(150, 178, 230, 0.055);
  --cristal-alto: rgba(150, 178, 230, 0.09);

  /* Escala tipográfica fluida */
  --t-display: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem);
  --t-h2: clamp(1.9rem, 1.35rem + 1.9vw, 3rem);
  --t-h3: clamp(1.15rem, 1.03rem + 0.5vw, 1.4rem);
  --t-cuerpo-g: clamp(1.05rem, 1rem + 0.28vw, 1.22rem);
  --t-cuerpo: 1rem;
  --t-pie: 0.875rem;
  --t-micro: 0.78rem;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  --seccion-y: clamp(76px, 7.5vw, 136px);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* Dos anchos: el general y el amplio para composiciones visuales */
  --ancho: 1320px;
  --ancho-amplio: 1560px;
  --gutter: clamp(20px, 3.2vw, 56px);
  --medida: 68ch;

  --sombra: 0 20px 50px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 46px 110px rgba(0, 0, 0, 0.66);

  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rapido: 0.16s;
  --medio: 0.28s;

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --texto-fuente: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset y base
   -------------------------------------------------------------------------- */

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

/* Blindaje: una regla de clase con `display` no debe poder anular el
   atributo `hidden`. Este fallo mantenía el panel del chat siempre visible
   y hacía que la X no lo cerrase. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

/* El navegador aplica a <figure> un margen lateral de 40 px. Sumado a un
   ancho del 100 % eso desbordaba la página en pantallas estrechas. */
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--azul);
  color: #fff;
}

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

.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;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--lima);
  color: #06120a;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  z-index: 300;
  transition: top var(--rapido) var(--curva);
}

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

/* --------------------------------------------------------------------------
   ATMÓSFERA — fondo tecnológico fijo
   Concepto propio: "Corrientes". El contenido se desplaza sobre una
   atmósfera quieta compuesta por tres elementos:
     · luces ambientales muy tenues que derivan despacio,
     · corrientes de información (curvas largas, no una cuadrícula),
     · un grano finísimo que da acabado editorial en vez de plano digital.
   Deliberadamente NO hay cuadrícula 3D, ni esfera, ni partículas, ni
   reacción al cursor. El fondo aporta profundidad; no compite.
   -------------------------------------------------------------------------- */

.atmosfera {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--negro);
}

.atmosfera__luz {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.atmosfera__luz--1 {
  top: -14%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.16), transparent 66%);
  animation: derivar-1 74s ease-in-out infinite alternate;
}

.atmosfera__luz--2 {
  bottom: -20%;
  left: -12%;
  width: 55vw;
  height: 55vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.13), transparent 66%);
  animation: derivar-2 96s ease-in-out infinite alternate;
}

.atmosfera__luz--3 {
  top: 34%;
  left: 40%;
  width: 40vw;
  height: 40vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.07), transparent 68%);
  animation: derivar-3 120s ease-in-out infinite alternate;
}

/* Corrientes: curvas largas y tenues que cruzan la pantalla */
.atmosfera__corrientes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* Grano: textura apenas perceptible, evita el aspecto de degradado plano */
.atmosfera__grano {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.032;
  mix-blend-mode: overlay;
}

@keyframes derivar-1 {
  to {
    transform: translate3d(-5%, 4%, 0) scale(1.08);
  }
}

@keyframes derivar-2 {
  to {
    transform: translate3d(6%, -5%, 0) scale(1.06);
  }
}

@keyframes derivar-3 {
  to {
    transform: translate3d(-4%, -6%, 0) scale(1.1);
  }
}

/* --------------------------------------------------------------------------
   Contenedores y capas
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contenedor--amplio {
  max-width: var(--ancho-amplio);
}

.seccion {
  padding-block: var(--seccion-y);
  position: relative;
  /* Los halos decorativos de algunas secciones se salen del ancho a
     propósito (p. ej. .nova__dispositivo::before mide un 118 %). Eso hacía
     que el documento tuviera de 5 a 39 px más de ancho que la ventana en
     la portada: la página se movía de lado en el móvil aunque el body ya
     oculte su propio desbordamiento lateral, porque el desplazamiento lo
     estaba generando el documento, no el body.
     Se usa "clip" y no "hidden" a propósito: hidden crearía un contenedor
     de desplazamiento y dejaría de funcionar lo que va fijado al hacer
     scroll dentro de una sección (la tabla de contenidos del Blog); clip
     solo recorta. Un navegador que no lo soporte simplemente se queda
     como estaba. El halo no pierde nada visible: lo que se recorta ya
     quedaba fuera de la ventana. */
  overflow-x: clip;
}

/* Ritmo reducido para las páginas interiores (servicios, contacto): son
   páginas más cortas y con un hero ya compacto, así que el respiro entre
   secciones que la portada necesita para una página larga aquí se sentía
   como scroll artificial. --seccion-y NO se toca: es global y la portada
   no se retoca en esta tanda. */
.seccion--compacta {
  padding-block: clamp(36px, 4.2vw, 68px);
}

/* Variaciones de negro: es lo que separa las secciones, no bandas claras.
   Son translúcidas a propósito, para que la atmósfera fija se perciba por
   detrás y dé continuidad entre secciones. La opacidad nunca baja de 0.72:
   por debajo, el texto pierde contraste sobre las luces del fondo. */
.capa--negro {
  background: rgba(3, 5, 10, 0.86);
}
.capa--base {
  background: rgba(5, 8, 15, 0.74);
}
.capa--panel {
  background: rgba(8, 13, 24, 0.82);
}

/* Línea superior con luz en el centro: separa sin cortar */
.capa--filo {
  position: relative;
}

.capa--filo::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(150, 178, 230, 0.26) 22%,
    rgba(34, 211, 238, 0.4) 50%,
    rgba(150, 178, 230, 0.26) 78%,
    transparent
  );
}

/* Halo tecnológico discreto, siempre anclado a un bloque con sentido */
.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.seccion__cabecera {
  max-width: 64ch;
  margin-bottom: var(--e8);
}

/* Modificador aditivo: NO toca .seccion__cabecera base (la usa también la
   home en Retos/Soluciones/Dudas). Solo centra antetítulo+título+intro
   donde se aplique explícitamente la clase; el resto de la página
   (listas, tarjetas, columnas) sigue alineado como está. */
.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

.seccion__cabecera--centrada .seccion__intro {
  margin-inline: auto;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: var(--e4);
}

/* El rótulo de "Último artículo" en /blog es un <h2> para que el esquema de
   encabezados no salte de h1 a h3. Se anula aquí la línea base propia de h2
   (1.08) para que siga viéndose exactamente igual que los demás rótulos. */
h2.etiqueta {
  line-height: inherit;
}

.etiqueta::before {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.seccion__intro {
  margin-top: var(--e5);
  font-size: var(--t-cuerpo-g);
  color: var(--texto-medio);
  max-width: var(--medida);
}

.degradado {
  background: linear-gradient(100deg, var(--cian), var(--azul) 48%, var(--morado));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva), background var(--medio) var(--curva),
    border-color var(--medio) var(--curva);
}

.boton:hover {
  transform: translateY(-2px);
}

.boton:active {
  transform: translateY(0);
}

.boton--primario {
  background: linear-gradient(100deg, var(--azul), #4f92ff 52%, var(--cian));
  color: #04101f;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.36);
}

.boton--primario:hover {
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.46);
}

.boton--secundario {
  background: var(--cristal);
  border-color: var(--linea-fuerte);
  color: var(--texto);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.boton--secundario:hover {
  background: var(--cristal-alto);
  border-color: var(--cian);
}

.boton--whatsapp {
  background: var(--whatsapp);
  color: #04180c;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.26);
}

/* Tercera y última familia de CTA: Nova. Sólido, como WhatsApp, para que
   la web tenga exactamente tres tratamientos y ninguno se confunda con
   otro: degradado azul/cian = Evaluación, verde = WhatsApp, ámbar = Nova. */
.boton--nova {
  background: var(--nova);
  color: #241202;
  box-shadow: 0 12px 32px rgba(242, 165, 61, 0.26);
}

.boton--nova:hover {
  box-shadow: 0 18px 44px rgba(242, 165, 61, 0.38);
}

.boton--ancho {
  width: 100%;
}

/* El botón "Solicitar evaluación" también existe como <button> (p. ej. en
   los accesos rápidos de Contacto) sin perder su aspecto de botón: quitar
   los estilos nativos del navegador. */
button.boton {
  font-family: var(--display);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Dudas frecuentes

   <details> nativo: funciona sin JavaScript, es navegable con teclado y
   los lectores de pantalla ya saben qué es. No hacía falta reinventarlo.
   -------------------------------------------------------------------------- */

.dudas__lista {
  margin-top: clamp(32px, 3.4vw, 52px);
  border-top: 1px solid var(--linea);
}

.duda {
  border-bottom: 1px solid var(--linea);
}

.duda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  padding: clamp(18px, 1.7vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.14rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--texto);
  transition: color var(--medio) var(--curva);
}

.duda summary::-webkit-details-marker {
  display: none;
}

.duda summary:hover {
  color: var(--cian);
}

/* El signo se dibuja con dos trazos: el vertical desaparece al abrirse */
.duda__signo {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--cian);
}

.duda__signo::before,
.duda__signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--medio) var(--curva), opacity var(--medio) var(--curva);
}

.duda__signo::after {
  transform: translateY(-50%) rotate(90deg);
}

.duda[open] .duda__signo::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.duda__cuerpo {
  padding-bottom: clamp(20px, 2vw, 30px);
  max-width: 78ch;
}

.dudas__cierre {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--texto-medio);
  max-width: 70ch;
}

.dudas__cierre a {
  color: var(--cian);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.duda__cuerpo p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--texto-medio);
}

/* --------------------------------------------------------------------------
   Sistema de llamadas a la acción

   Jerarquía: 1) evaluación inicial, 2) agendar conversación, 3) WhatsApp,
   4) email, 5) probar Nova. El icono acompaña siempre al texto, nunca lo
   sustituye: si el SVG no carga, el botón se sigue entendiendo.
   -------------------------------------------------------------------------- */

.boton__icono {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Los logotipos de marca son macizos, no de trazo */
.boton__icono--relleno {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

/* El verde de WhatsApp manda sobre el aspecto del botón: debe reconocerse
   de reojo, sin leer el texto. */
.boton--whatsapp:hover {
  background: #2ee06f;
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.38);
}

/* Glyph oficial en la tarjeta de servicio: macizo y sin trazo */
.tarjeta__icono--marca svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

/* --- Franjas de acción intermedias --- */

.llamada {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 64px);
  padding: clamp(26px, 2.6vw, 40px);
  background: linear-gradient(140deg, rgba(20, 31, 51, 0.72), rgba(5, 8, 15, 0.52));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.llamada h3 {
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.42rem);
  color: var(--texto);
  margin-bottom: var(--e3);
}

.llamada p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--texto-medio);
  max-width: 62ch;
}

.llamada__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.llamada--proceso {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

/* --- Acciones del cierre de Contacto --- */

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.cierre__nota {
  margin-top: var(--e4);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--texto-tenue);
  max-width: 54ch;
}

/* --- Pie --- */

.site-footer__matiz {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

.enlace-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--whatsapp);
}

.enlace-whatsapp svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(5, 8, 15, 0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio) var(--curva),
    background var(--medio) var(--curva);
}

.site-header.desplazado {
  border-bottom-color: var(--linea);
  background: rgba(5, 8, 15, 0.93);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 88px;
}

.marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.marca__logo {
  height: 48px;
  width: auto;
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: var(--e1);
}

.nav-principal a {
  font-family: var(--display);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--texto-medio);
  text-decoration: none;
  padding: 10px 15px;
  border-radius: var(--r-full);
  transition: color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}

.nav-principal a:hover {
  color: var(--texto);
  background: var(--cristal);
}

/* Dónde está el visitante: discreto, no un botón de otro color. Se aplica
   en las páginas interiores (herramientas/generar-paginas.js decide cuál),
   nunca en la portada. */
.nav-principal a.activo {
  color: var(--texto);
  background: var(--cristal-alto);
}

/* --------------------------------------------------------------------------
   "Soluciones" con desplegable

   El enlace navega como siempre a #servicios; el disparador (la flechita)
   solo abre el listado de los 5 servicios. Dos controles con dos trabajos,
   para que "click en el texto" y "ver las opciones" no compitan.

   Apertura:
   - Escritorio con ratón: al pasar el cursor (:hover). El panel es hijo
     del mismo contenedor aunque esté position:absolute, así que moverse
     en diagonal hacia sus enlaces no lo cierra a mitad de camino — es
     justo el fallo que se pedía evitar.
   - Cualquier dispositivo: al pulsar o activar por teclado el disparador
     (JS, clase .nav-desplegable--abierto), que es también el único
     mecanismo en móvil, donde no existe hover real.

   Por qué NO también :focus-within: se probó y crea un cierre imposible.
   El disparador recibe el foco al abrirse (para que Escape pueda
   devolvérselo), pero mientras conserva el foco, :focus-within lo
   mantenía abierto por CSS aunque el JS ya hubiera quitado la clase —
   ni Escape ni un clic fuera lograban cerrarlo. El propio :hover no tiene
   ese problema porque desaparece en cuanto el cursor se va.
   -------------------------------------------------------------------------- */

.nav-desplegable {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-desplegable__disparador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--r-full);
  color: var(--texto-medio);
  cursor: pointer;
  transition: color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}

.nav-desplegable__disparador:hover {
  color: var(--texto);
  background: var(--cristal);
}

.nav-desplegable__disparador svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  transition: transform var(--medio) var(--curva);
}

.nav-desplegable--abierto .nav-desplegable__disparador svg,
.nav-desplegable:hover .nav-desplegable__disparador svg {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  /* El hueco visual se hace con padding, no con margin: así el área
     "dentro del desplegable" a efectos de :hover queda contigua, sin un
     tramo muerto entre el disparador y el panel. */
  padding-top: 10px;
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--rapido) var(--curva),
    transform var(--rapido) var(--curva), visibility var(--rapido) var(--curva);
  pointer-events: none;
}

.nav-desplegable--abierto .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-submenu__panel {
  padding: 8px;
  background: var(--elevada);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-submenu__panel a {
  padding: 10px var(--e3);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-medio);
  text-decoration: none;
  white-space: normal;
  transition: color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}

.nav-submenu__panel a:hover {
  color: var(--texto);
  background: var(--cristal-alto);
}

@media (hover: hover) and (pointer: fine) {
  .nav-desplegable:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: var(--cristal);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.menu-toggle__barra {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--medio) var(--curva),
    opacity var(--rapido) var(--curva);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(3) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(60px, 6vw, 112px) clamp(80px, 8.5vw, 140px);
  /* Casi transparente: en la primera pantalla la atmósfera debe verse
     con toda su profundidad, es donde más trabaja. */
  background: rgba(5, 8, 15, 0.42);
  overflow: hidden;
}

.hero__halo-1 {
  top: -18%;
  right: -6%;
  width: min(820px, 80vw);
  height: min(820px, 80vw);
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.2),
    rgba(34, 211, 238, 0.08) 45%,
    transparent 70%
  );
}

.hero__halo-2 {
  bottom: -30%;
  left: -12%;
  width: min(620px, 70vw);
  height: min(620px, 70vw);
  background: radial-gradient(
    circle at center,
    rgba(167, 139, 250, 0.14),
    transparent 68%
  );
}

/* --- PLANO 2: la escena real --- */

.hero__escena {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La empresaria está en el tercio derecho: anclamos ahí el recorte para
     que nunca se pierda al estrechar el viewport. */
  object-position: 72% center;
}

/* Velo: refuerza la zona oscura que la foto ya trae a la izquierda, sin
   apagar la escena ni a la persona. */
.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(3, 5, 10, 0.97) 0%,
      rgba(3, 5, 10, 0.92) 26%,
      rgba(4, 7, 14, 0.62) 46%,
      rgba(4, 7, 14, 0.22) 64%,
      rgba(4, 7, 14, 0.06) 100%
    ),
    linear-gradient(180deg, rgba(3, 5, 10, 0.5) 0%, transparent 22%, rgba(3, 5, 10, 0.75) 100%);
}

.hero__grid {
  position: relative;
  display: grid;
  /* Sin dispositivo, el texto ocupa poco más de la mitad izquierda y el
     resto del ancho queda libre para que se vea la escena completa: la
     empresaria y su entorno de trabajo son ahora el protagonista visual. */
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: clamp(40px, 5vw, 92px);
  align-items: center;
  min-height: min(82vh, 760px);
}

.hero__titulo {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: var(--e5);
  max-width: 19ch;
}

.hero__entrada {
  font-size: var(--t-cuerpo-g);
  color: var(--texto-medio);
  max-width: 60ch;
  margin-bottom: var(--e6);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e7);
}

/* Franja de capacidades: horizontal, con separadores luminosos.
   Sustituye a la rejilla 2x2 de tarjetas que había antes. */
.franja {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e6);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--e6);
  border-top: 1px solid var(--linea);
}

.franja__item {
  position: relative;
  padding-left: var(--e5);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

/* Separador luminoso que se desvanece hacia abajo */
.franja__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.55), transparent);
}

.franja__clave {
  display: block;
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto);
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Smartphones — maquetas realistas
   Dos acabados distintos, como dispositivos de fabricantes diferentes,
   sin marcas ni logotipos. Comparten el sistema visual de la web.
   -------------------------------------------------------------------------- */

.movil {
  position: relative;
  width: 100%;
  max-width: 372px;
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  border-radius: 52px;
  padding: 11px;
  isolation: isolate;
}

/* Acabado B — grafito azulado, marco más anguloso, cámara circular */
.movil--grafito {
  max-width: 350px;
  border-radius: 44px;
  background: linear-gradient(155deg, #2b3446 0%, #0f1622 30%, #080d16 60%, #1f2938 100%);
  box-shadow: var(--sombra-lg), 0 0 0 1px rgba(120, 160, 220, 0.16),
    inset 0 0 0 1px rgba(150, 190, 240, 0.06);
}

.movil__pantalla {
  position: relative;
  height: 100%;
  border-radius: 42px;
  background: linear-gradient(180deg, #070c16, #04070d);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}

.movil--grafito .movil__pantalla {
  border-radius: 34px;
}

/* Reflejo de pantalla: sugiere el reflejo de una ventana sobre el cristal.
   Es el detalle que separa "rectángulo redondeado" de "dispositivo". */
.movil__pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      transparent 46%
    ),
    /* Segundo reflejo, más estrecho y bajo, como el canto de una ventana */
      linear-gradient(
        104deg,
        transparent 58%,
        rgba(180, 215, 255, 0.05) 68%,
        transparent 76%
      );
  pointer-events: none;
  z-index: 5;
}

/* Iluminación direccional: la luz entra por arriba-izquierda, de modo que
   el canto izquierdo brilla y el derecho cae en sombra. Antes el marco
   estaba iluminado por igual y por eso parecía plano. */
.movil::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 18%,
    transparent 42%,
    rgba(0, 0, 0, 0.32) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Isla / perforación */
.movil__camara {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #33445f, #04060b 72%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(130, 170, 230, 0.12);
  z-index: 6;
}

/* Botones laterales */
.movil__boton {
  position: absolute;
  right: -2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a5364, #232a36);
}

.movil__boton--encendido {
  top: 27%;
  height: 62px;
}

.movil__boton--vol {
  left: -2px;
  right: auto;
  top: 19%;
  height: 40px;
}

/* Barra de estado */
.movil__estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--display);
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}

.movil__estado-iconos {
  display: flex;
  align-items: center;
  gap: 5px;
}

.movil__estado-iconos span {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.8);
}

.movil__bateria {
  width: 20px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  position: relative;
  padding: 1.5px;
}

.movil__bateria::before {
  content: "";
  display: block;
  height: 100%;
  width: 72%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
}

/* Barra inferior de gesto */
.movil__gesto {
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  margin: 6px auto 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Conversación dentro del móvil
   -------------------------------------------------------------------------- */

.conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.conv__barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid rgba(150, 178, 230, 0.1);
  background: rgba(10, 16, 28, 0.85);
  flex-shrink: 0;
}

.conv__avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.conv__avatar--whatsapp {
  background: linear-gradient(140deg, var(--whatsapp), #0e8a4c);
}

.conv__avatar--nova {
  background: linear-gradient(140deg, var(--azul), var(--cian));
}

.conv__avatar svg {
  width: 17px;
  height: 17px;
}

.conv__avatar--whatsapp svg {
  fill: #04180c;
}

.conv__quien {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.conv__nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
}

.conv__sub {
  font-size: 0.64rem;
  color: var(--texto-tenue);
}

.conv__hilo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--e4) var(--e3);
  overflow: hidden;
}

.burbuja {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 15px;
  font-size: 0.735rem;
  line-height: 1.45;
}

.burbuja__autor {
  display: block;
  font-family: var(--display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
  opacity: 0.8;
}

.burbuja--cliente {
  align-self: flex-start;
  background: #16202f;
  border: 1px solid rgba(150, 178, 230, 0.1);
  border-bottom-left-radius: 5px;
}

.burbuja--agente {
  align-self: flex-end;
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.26), rgba(34, 211, 238, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-bottom-right-radius: 5px;
}

.burbuja--agente .burbuja__autor {
  color: var(--cian);
  opacity: 1;
}

.burbuja--equipo {
  align-self: flex-end;
  background: rgba(163, 230, 53, 0.13);
  border: 1px solid rgba(163, 230, 53, 0.32);
  border-bottom-right-radius: 5px;
}

.burbuja--equipo .burbuja__autor {
  color: var(--lima);
  opacity: 1;
}

.conv__traspaso {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0;
  padding: 7px 10px;
  background: rgba(163, 230, 53, 0.07);
  border: 1px dashed rgba(163, 230, 53, 0.4);
  border-radius: 11px;
  font-size: 0.66rem;
  line-height: 1.35;
  color: #cfeE93;
}

.conv__traspaso svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--lima);
}

.conv__campo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 var(--e3) var(--e2);
  padding: 8px 12px;
  background: rgba(150, 178, 230, 0.07);
  border: 1px solid rgba(150, 178, 230, 0.12);
  border-radius: var(--r-full);
  font-size: 0.7rem;
  color: var(--texto-tenue);
  flex-shrink: 0;
}

.conv__campo::after {
  content: "";
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--azul), var(--cian));
  flex-shrink: 0;
}

/* Rótulo de "esto es una ilustración" */
.ilustrativo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--e5);
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--cristal);
  border: 1px solid var(--linea);
  font-size: var(--t-micro);
  color: var(--texto-tenue);
}

.ilustrativo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texto-tenue);
  flex-shrink: 0;
}

/* Escenario del dispositivo: halo detrás y reflejo debajo. Es lo que hace
   que el móvil se perciba apoyado en un espacio, no pegado sobre el fondo. */
.nova__dispositivo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nova__dispositivo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.17),
    rgba(34, 211, 238, 0.07) 42%,
    transparent 68%
  );
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}

.nova__dispositivo::before {
  background: radial-gradient(
    circle at center,
    rgba(167, 139, 250, 0.17),
    rgba(59, 130, 246, 0.07) 44%,
    transparent 68%
  );
}

/* Reflejo bajo el dispositivo */
.movil::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -26px;
  height: 26px;
  background: radial-gradient(ellipse at center top, rgba(120, 165, 230, 0.2), transparent 72%);
  filter: blur(9px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Retos operativos (antes "fricciones")
   -------------------------------------------------------------------------- */

/* Cabecera y pieza narrativa en dos columnas: aprovecha el lateral que
   antes quedaba vacío junto al título. */
.retos__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(36px, 4.5vw, 80px);
  align-items: center;
  margin-bottom: var(--e8);
}

.retos__encabezado .seccion__cabecera {
  margin-bottom: 0;
}

/* Retrato editorial: fotografía vertical con fundido hacia el fondo por
   los bordes, para que se integre con la superficie oscura en vez de
   quedar pegada como un recorte rectangular. */
.retrato {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Va a la izquierda aunque en el HTML el texto vaya primero: el orden
     de lectura mantiene el titular por delante de la imagen. */
  order: -1;
}

.retrato__img {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: center 30%;
}

/* Fundido a negro por los cuatro bordes, más intenso abajo */
.retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0.34) 0%, transparent 26%, rgba(3, 5, 10, 0.62) 100%),
    linear-gradient(90deg, rgba(3, 5, 10, 0.4) 0%, transparent 22%, transparent 78%, rgba(3, 5, 10, 0.4) 100%);
}

/* Filo luminoso superior: el mismo recurso que usan los paneles */
.retrato::before {
  content: "";
  position: absolute;
  inset-inline: 20%;
  top: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}

/* --- Pieza "recorrido de una solicitud" --- */

.flujo {
  position: relative;
  padding: var(--e6);
  background: linear-gradient(160deg, rgba(17, 26, 44, 0.72), rgba(8, 13, 24, 0.6));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sombra);
}

/* Borde superior iluminado: el "filo" que da acabado premium */
.flujo::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent);
}

.flujo__titulo {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e5);
}

.flujo__pasos {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

.flujo__paso {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
}

/* Línea de continuidad entre marcas: sugiere el flujo sin dibujar un
   diagrama aparte. */
.flujo__paso:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: calc(var(--e5) * -1);
  width: 1px;
  background: linear-gradient(180deg, var(--linea-fuerte), transparent);
}

.flujo__marca {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin-top: 5px;
  border: 2px solid currentColor;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.flujo__paso--entra {
  color: var(--texto-tenue);
}
.flujo__paso--ordena {
  color: var(--cian);
}
.flujo__paso--auto {
  color: var(--lima);
}
.flujo__paso--persona {
  color: var(--morado);
}

/* Solo los dos desenlaces llevan punto relleno: marcan el reparto */
.flujo__paso--auto .flujo__marca,
.flujo__paso--persona .flujo__marca {
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.flujo__texto {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.flujo__texto strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.flujo__nota {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  font-size: 0.86rem;
  color: var(--texto-tenue);
  line-height: 1.55;
}

.retos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
}

/* Columnas abiertas, no tarjetas: sin fondo ni borde, separadas por un
   filete luminoso. Era una de las cajas genéricas que solo envolvían texto. */
.reto {
  position: relative;
  padding: var(--e6) 0 0;
}

.reto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent 70%);
  opacity: 0.55;
}

.reto--tiempo {
  color: var(--cian);
}
.reto--capacidad {
  color: var(--morado);
}
.reto--oportunidad {
  color: var(--lima);
}

/* Punto de acento sobre el filete */
.reto::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.reto h3 {
  color: var(--texto);
  margin-bottom: var(--e3);
}

.reto p {
  color: var(--texto-medio);
  font-size: 0.97rem;
}

/* Ejemplos concretos: lo abstracto no se reconoce, los ejemplos sí */
.reto__ejemplos {
  margin-top: var(--e3);
  font-size: 0.9rem;
  line-height: 1.66;
  color: var(--texto-tenue);
  font-style: italic;
}

.reto__nota {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
  font-size: 0.89rem;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   Soluciones — cabecera editorial + tarjetas de cristal oscuro

   Sustituye a las bandas con ilustraciones de la tanda 4. La fotografía
   tecnológica pasa a presentar el conjunto en la cabecera, y los cinco
   servicios se presentan con el mismo lenguaje: cristal, filo de color e
   iconografía. Sin etiquetas de prioridad ni categorías especiales.
   -------------------------------------------------------------------------- */

.soluciones__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 3.6vw, 60px);
  align-items: center;
  margin-bottom: clamp(40px, 4vw, 64px);
}

.soluciones__encabezado .seccion__cabecera {
  margin-bottom: 0;
}

/* Apunte que mantiene el posicionamiento sin jerarquizar los servicios */
.soluciones__apunte {
  margin-top: var(--e5);
  padding-left: var(--e4);
  border-left: 2px solid var(--cian);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/* La fotografía es panorámica: se le impone su propia proporción para
   que ningún contenedor la estire ni la recorte en vertical. */
.lamina--soluciones {
  width: 100%;
  aspect-ratio: 1672 / 941;
}

.lamina--soluciones .lamina__img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.soluciones__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.6vw, 26px);
}

.soluciones__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 26px);
}

/* --- Tarjeta base --- */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 1.9vw, 30px);
  background: linear-gradient(158deg, rgba(17, 26, 44, 0.72), rgba(5, 8, 15, 0.58));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--medio) var(--curva),
    border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.tarjeta--procesos {
  color: var(--cian);
}
.tarjeta--whatsapp {
  color: var(--whatsapp);
}
.tarjeta--web {
  color: var(--morado);
}
.tarjeta--atencion {
  color: var(--azul);
}
.tarjeta--diseno {
  color: var(--lima);
}

/* Filo superior con el color del servicio */
.tarjeta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.55;
  transition: opacity var(--medio) var(--curva);
}

/* Resplandor de esquina muy contenido */
.tarjeta::after {
  content: "";
  position: absolute;
  top: -32%;
  right: -14%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center, currentColor, transparent 68%);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity var(--medio) var(--curva);
}

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  box-shadow: var(--sombra);
}

.tarjeta:hover::before {
  opacity: 1;
}

.tarjeta:hover::after {
  opacity: 0.13;
}

.tarjeta__icono {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  margin-bottom: var(--e4);
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 13%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.tarjeta__icono svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.tarjeta h3 {
  color: var(--texto);
  font-size: clamp(1.1rem, 1.02rem + 0.34vw, 1.3rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--e2);
}

.tarjeta__lema {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: currentColor;
  margin-bottom: var(--e3);
}

.tarjeta__texto {
  color: var(--texto-medio);
  font-size: 0.91rem;
  line-height: 1.62;
  margin-bottom: var(--e4);
}

.tarjeta__requisito {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--texto-tenue);
}

.tarjeta__requisito strong {
  color: var(--texto-medio);
  font-weight: 600;
}

/* --- Servicio principal: dos columnas internas y más superficie --- */

/* La tarjeta destacada ya no necesita dos columnas: al compactarse, su
   contenido cabe en una sola y los puntos se reparten en tres. */
.tarjeta--principal {
  display: block;
  background: linear-gradient(145deg, rgba(22, 34, 56, 0.8), rgba(6, 10, 18, 0.62));
  border-color: var(--linea-fuerte);
}

.tarjeta--principal .tarjeta__texto {
  max-width: 84ch;
}

.tarjeta--principal .tarjeta__puntos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3) clamp(24px, 2.6vw, 44px);
}

.tarjeta--principal .tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
}

.tarjeta--principal h3 {
  font-size: clamp(1.28rem, 1.1rem + 0.7vw, 1.62rem);
}

.tarjeta--principal .tarjeta__lema {
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.12rem);
}

/* Columna de apoyo con los puntos de aplicación */
.tarjeta__aparte {
  padding: var(--e4) var(--e5);
  background: rgba(3, 5, 10, 0.42);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.tarjeta__aparte-titulo {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e4);
}

.tarjeta__puntos {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

/* En las cuatro tarjetas secundarias el aparte va al final y con menos
   aire: añade concreción sin convertir la tarjeta en una pared de texto. */
/* --- La tarjeta entera conduce al servicio ---
   El enlace visible es el único foco de teclado; su ::after cubre la
   tarjeta para que también funcione el clic en cualquier punto. Así no
   hay enlaces anidados ni un <article> convertido en enlace. */

.tarjeta {
  position: relative;
}

.tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e5);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: currentColor;
  text-decoration: none;
  transition: gap var(--medio) var(--curva);
}

.tarjeta__enlace svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  transition: transform var(--medio) var(--curva);
}

.tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tarjeta:hover .tarjeta__enlace {
  gap: var(--e3);
}

.tarjeta:hover .tarjeta__enlace svg {
  transform: translateX(3px);
}

.tarjeta:focus-within {
  border-color: var(--linea-fuerte);
}

.tarjeta__enlace:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 4px;
}

.tarjeta__aparte--compacto {
  margin-top: var(--e5);
  padding: var(--e4);
  background: rgba(3, 5, 10, 0.3);
}

.tarjeta__aparte--compacto .tarjeta__aparte-titulo {
  margin-bottom: var(--e3);
}

.tarjeta__aparte--compacto .tarjeta__punto {
  font-size: 0.88rem;
}

.tarjeta__punto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texto-medio);
}

.tarjeta__punto svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Nova
   -------------------------------------------------------------------------- */

.nova__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.nova__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: var(--e6);
}

.nova__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  font-size: 0.97rem;
  color: var(--texto-medio);
  line-height: 1.55;
}

.nova__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cian);
  margin-top: 9px;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

.nova__item strong {
  color: var(--texto);
  font-weight: 600;
}

/* Las tres vías de acceso, claramente diferenciadas */
.nova__accesos {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e7);
  padding: var(--e5);
  background: var(--cristal);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nova__accesos h3 {
  font-size: 1rem;
  margin-bottom: var(--e1);
}

.nova__accesos-nota {
  font-size: 0.87rem;
  color: var(--texto-tenue);
  margin-bottom: var(--e3);
}

.nova__honestidad {
  margin-top: var(--e5);
  font-size: 0.89rem;
  color: var(--texto-tenue);
  line-height: 1.6;
}

.nova__honestidad strong {
  color: var(--lima);
  font-weight: 600;
}

/* Escenografía de Nova: el dispositivo se presenta en perspectiva, como
   una pieza de producto sobre un escenario, no de frente como una captura.
   La rotación es estática: no se anima. */
.nova__dispositivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1400px;
}

/* CHASIS CON VOLUMEN REAL
   Los intentos anteriores (más padding, una franja de color) seguían
   dando sensación de lámina. Aquí el aparato se construye por capas en
   3D: un bloque de canto con grosor propio desplazado en Z por detrás
   del frontal, de modo que al girar el conjunto el canto se ve de verdad
   en perspectiva, con su propio degradado metálico y su sombra. 
.nova__dispositivo .movil {
  transform: rotateY(-14deg) rotateX(2.5deg);
  transform-style: preserve-3d;
  padding: 16px;
  border-radius: 46px;
  /* Borde de luz en el canto del frontal: es el brillo que separa el
     cristal de la estructura en un aparato real. */
  border: 1px solid rgba(185, 215, 255, 0.22);
  /* Sombra proyectada hacia el lado contrario a la luz */
  box-shadow: 34px 46px 90px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(150, 190, 240, 0.14);
}

/* Canto: bloque macizo por detrás del frontal. El translateZ negativo es
   lo que le da grosor físico al girar. */
.nova__dispositivo .movil::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  transform: translateZ(-22px);
  background: linear-gradient(105deg, #39445a 0%, #1d2534 26%, #0d121b 62%, #222b3b 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
  filter: none;
}

/* Grosor visible por arriba y abajo: sin esto el bloque solo tenía
   canto en el lateral y seguía leyéndose como una plancha. */
.nova__dispositivo .movil__pantalla::before {
  content: '';
  position: absolute;
  inset: -16px -16px auto -16px;
  height: 16px;
  background: linear-gradient(180deg, #303a4d, #141b26);
  transform: translateZ(-11px);
  border-radius: 46px 46px 0 0;
  z-index: -1;
}

/* Bisel interior: transición entre el cristal y la estructura */
.nova__dispositivo .movil__pantalla {
  border-radius: 34px;
  box-shadow: inset 0 0 0 1.5px rgba(8, 12, 20, 0.95),
    inset 0 0 0 3px rgba(150, 190, 245, 0.07),
    inset 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Botones laterales con relieve, sobre el canto */
.nova__dispositivo .movil__boton {
  width: 4px;
  transform: translateZ(-9px);
  background: linear-gradient(180deg, #5b6579, #2a3141 40%, #171d29);
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.7);
}


/* Pedestal: elipse de luz que ancla el dispositivo al suelo del escenario */
.nova__dispositivo::after {
  content: "";
  position: absolute;
  bottom: 42px;
  left: 50%;
  width: 78%;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.26), transparent 70%);
  filter: blur(16px);
  pointer-events: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Proceso — 3 columnas en escritorio (6 pasos = 2 filas exactas)
   -------------------------------------------------------------------------- */

/* Nivel superior de la cabecera: el titular ocupa el ancho de la sección.
   Antes iba limitado a 34ch medidos en la tipografía del cuerpo y no en la
   del titular, así que se quedaba en una columna de unos 280 px y partía
   los dos versos en seis líneas, dejando vacío todo el lado derecho. */
.proceso__titular {
  /* Centrado sobre el ancho real de la sección, no sobre la columna de
     texto: si no, el encabezado se lee como un bloque suelto encima de la
     izquierda mientras texto y fotografía forman otra composición. */
  text-align: center;
  margin-bottom: clamp(34px, 3.6vw, 56px);
}

.proceso__titular h2 {
  /* Medido en la propia tipografía del titular: cada verso cabe entero */
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.proceso__titular h2 span {
  display: block;
}

/* Nivel inferior: explicación a la izquierda y fotografía a la derecha,
   con más peso para la imagen, que en la tanda 6 se quedó pequeña. */
.proceso__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(48px, 5vw, 88px);
}

.proceso__explicacion {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  /* Ligera entrada respecto al filo: el texto deja de ir pegado al borde
     y el bloque se lee como columna editorial, no como cuerpo suelto. */
  padding-left: clamp(0px, 1.8vw, 28px);
  max-width: 64ch;
  color: var(--texto-medio);
  font-size: 1rem;
  line-height: 1.78;
}

.proceso__explicacion .seccion__intro {
  margin-top: 0;
}

.proceso__matiz {
  margin-top: var(--e2);
  padding-left: var(--e4);
  border-left: 2px solid var(--linea-fuerte);
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

/* La foto es 3:2 y se muestra en esa proporción, sin estirar.
   Sin sticky: se desplazaba a distinto ritmo que el texto y parecía
   deslizarse por su cuenta. Ahora acompaña al resto del contenido. */
.lamina--diagnostico {
  width: 100%;
  aspect-ratio: 1536 / 1024;
}

.lamina--diagnostico .lamina__img {
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.lamina--contacto {
  margin-top: var(--e7);
  max-width: 540px;
}

.proceso__pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e7) var(--e6);
  counter-reset: paso;
}

.paso {
  position: relative;
  padding-top: var(--e5);
  border-top: 2px solid var(--linea);
}

.paso::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--cian);
  margin-bottom: var(--e3);
}

/* Marca de progreso: arranca corta y se completa al entrar en pantalla.
   Es la única animación ligada al scroll de toda la web, y se la gana
   porque ES la narrativa de la sección. */
.paso::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cian);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
  transition: width 0.7s var(--curva);
}

.paso.revelar--visible::after {
  width: 38px;
}

.paso h3 {
  margin-bottom: var(--e2);
  font-size: 1.08rem;
}

.paso p {
  color: var(--texto-medio);
  font-size: 0.93rem;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Contacto — cierre comercial

   Reestructurado: antes la fotografía ocupaba una columna vertical enorme
   y las dos vías quedaban arrinconadas a su derecha, con cientos de
   píxeles vacíos. Ahora el orden es mensaje → vías → imagen de apoyo, y
   las dos llamadas a la acción ocupan todo el ancho en igualdad.
   -------------------------------------------------------------------------- */

.cierre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: center;
  margin-bottom: clamp(36px, 4vw, 60px);
}

.cierre__entrada {
  margin-top: var(--e5);
  font-size: var(--t-cuerpo-g);
  color: var(--texto-medio);
  max-width: 56ch;
}

.cierre__texto {
  margin-top: var(--e4);
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--texto-tenue);
  max-width: 62ch;
}

/* Imagen de apoyo: apaisada, con su proporción real y fundida al fondo */
.cierre__imagen {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.cierre__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cierre__imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0.28) 0%, transparent 34%, rgba(3, 5, 10, 0.48) 100%);
}

/* --- Las dos vías --- */

.vias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
}

.via {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e5);
  align-items: center;
  padding: clamp(22px, 2vw, 32px);
  background: linear-gradient(150deg, rgba(20, 31, 51, 0.82), rgba(5, 8, 15, 0.6));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  text-decoration: none;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--medio) var(--curva),
    border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.via--whatsapp {
  color: var(--whatsapp);
}

.via--email {
  color: var(--azul);
}

.via--nova {
  color: var(--nova);
}

.via--nova .via__icono svg {
  stroke: currentColor;
}

.via--evaluacion {
  color: var(--azul);
}

.via--evaluacion .via__icono svg {
  stroke: currentColor;
}

.via--telefono {
  color: var(--cian);
}

.via--telefono .via__icono svg {
  stroke: currentColor;
}

/* Una vía puede ser un <button> (abrir el chat de Nova no navega a ningún
   sitio): quitarle el aspecto nativo del navegador para que sea idéntica
   a las vías que sí son enlaces. */
button.via {
  border: none;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.via::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.55;
  transition: opacity var(--medio) var(--curva);
}

.via::after {
  content: "";
  position: absolute;
  top: -55%;
  left: -8%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, currentColor, transparent 66%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity var(--medio) var(--curva);
}

.via:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  box-shadow: var(--sombra);
}

.via:hover::before {
  opacity: 1;
}

.via:hover::after {
  opacity: 0.15;
}

.via__icono {
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.via__icono svg {
  width: 25px;
  height: 25px;
}

.via--whatsapp .via__icono svg {
  fill: currentColor;
}

.via--email .via__icono svg {
  stroke: currentColor;
}

.via__contenido {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.via__marca {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  margin-bottom: 3px;
}

.via__titulo {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--texto);
  margin-bottom: var(--e2);
}

.via__texto {
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--texto-medio);
  margin-bottom: var(--e3);
}

.via__dato {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texto-tenue);
  overflow-wrap: anywhere;
}

.via__flecha {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: center;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: transform var(--medio) var(--curva),
    background var(--medio) var(--curva);
}

.via__flecha svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.via:hover .via__flecha {
  transform: translateX(3px);
  background: color-mix(in srgb, currentColor 22%, transparent);
}

/* --- Nota comercial al cierre del proceso --- */

.nota-comercial {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
  max-width: 78ch;
  margin-top: clamp(48px, 5vw, 80px);
  padding-top: var(--e6);
  border-top: 1px solid var(--linea);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--texto-tenue);
}

.nota-comercial svg {
  width: 21px;
  height: 21px;
  stroke: var(--texto-tenue);
  margin-top: 2px;
}

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

.site-footer {
  background: var(--negro);
  border-top: 1px solid var(--linea);
  padding-block: var(--e8) var(--e6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--e8);
  padding-bottom: var(--e7);
  border-bottom: 1px solid var(--linea);
}

.site-footer__logo {
  height: 42px;
  width: auto;
  margin-bottom: var(--e4);
}

.site-footer__marca p {
  color: var(--texto-tenue);
  font-size: 0.93rem;
  max-width: 46ch;
}

.site-footer h2 {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-medio);
  margin: 0 0 var(--e4);
}

.site-footer__columna ul {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.site-footer__columna a {
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color var(--rapido) var(--curva);
}

.site-footer__columna a:hover {
  color: var(--cian);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  padding-top: var(--e5);
  color: var(--texto-tenue);
  font-size: var(--t-pie);
}

/* --------------------------------------------------------------------------
   Widget de chat real de Nova
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Acceso flotante a WhatsApp

   Al lado opuesto del lanzador de Nova: abajo a la izquierda. Comparte con
   él altura y tipografía para que se lean como un par, no como dos parches.
   -------------------------------------------------------------------------- */

.wa-flotante {
  position: fixed;
  left: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: 13px 20px 13px 15px;
  border-radius: var(--r-full);
  background: var(--whatsapp);
  color: #04180c;
  font-family: var(--display);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.32);
  transition: transform var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva), background var(--medio) var(--curva),
    opacity var(--medio) var(--curva), visibility var(--medio) var(--curva);
}

/* Al entrar en Contacto se aparta, sin desaparecer de golpe */
.wa-flotante--oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.wa-flotante:hover {
  transform: translateY(-2px);
  background: #2ee06f;
  box-shadow: 0 20px 44px rgba(37, 211, 102, 0.44);
}

.wa-flotante:active {
  transform: translateY(0);
}

.wa-flotante__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.wa-flotante__icono svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nova-chat {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e3);
  /* Sin esto, el contenedor fijo cubre el ancho disponible e intercepta
     clics sobre la página aunque el panel esté cerrado. */
  pointer-events: none;
}

.nova-chat > * {
  pointer-events: auto;
}

.nova-chat__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  height: 54px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r-full);
  /* Identidad propia de Nova (ámbar), no la del CTA de Evaluación: antes
     compartían el mismo degradado azul/cian y se leían como la misma
     acción aunque llevaran a sitios distintos. */
  background: var(--nova);
  color: #241202;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(242, 165, 61, 0.38);
  transition: transform var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva), opacity var(--medio) var(--curva),
    visibility var(--medio) var(--curva);
}

.nova-chat__boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(242, 165, 61, 0.48);
}

/* Igual que .wa-flotante--oculto: se retira cerca de Contacto/el
   formulario y cerca del pie, donde solo taparía enlaces reales. */
.nova-chat__boton--oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.nova-chat__boton-icono {
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
}

.nova-chat__panel {
  width: min(390px, calc(100vw - 28px));
  height: min(580px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}

.nova-chat__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(100deg, rgba(37, 99, 235, 0.2), rgba(34, 211, 238, 0.1));
  flex-shrink: 0;
}

.nova-chat__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}

.nova-chat__cerrar {
  background: var(--cristal);
  border: 1px solid var(--linea);
  color: var(--texto-medio);
  font-size: 0.95rem;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}

.nova-chat__cerrar:hover {
  color: var(--texto);
  background: var(--cristal-alto);
}

.nova-chat__mensajes {
  flex: 1;
  overflow-y: auto;
  padding: var(--e4) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.nova-chat__burbuja {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nova-chat__burbuja--nova {
  align-self: flex-start;
  background: var(--alta);
  border: 1px solid var(--linea);
  border-bottom-left-radius: 6px;
}

.nova-chat__burbuja--usuario {
  align-self: flex-end;
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.26), rgba(34, 211, 238, 0.16));
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-bottom-right-radius: 6px;
}

.nova-chat__escribiendo {
  display: flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
}

.nova-chat__escribiendo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: latir 1.3s infinite ease-in-out;
}

.nova-chat__escribiendo span:nth-child(2) {
  animation-delay: 0.16s;
}
.nova-chat__escribiendo span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes latir {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.nova-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: 0 var(--e5) var(--e3);
  flex-shrink: 0;
}

.nova-chat__chip {
  font-family: var(--texto-fuente);
  font-size: 0.8rem;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: var(--cristal);
  border: 1px solid var(--linea);
  color: var(--texto-medio);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}

.nova-chat__chip:hover {
  border-color: var(--cian);
  color: var(--texto);
}

.nova-chat__form {
  display: flex;
  gap: var(--e2);
  padding: var(--e4) var(--e5) var(--e5);
  border-top: 1px solid var(--linea);
  flex-shrink: 0;
}

.nova-chat__form input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  border-radius: var(--r-full);
  border: 1px solid var(--linea);
  background: var(--negro);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 0.9rem;
}

.nova-chat__form input::placeholder {
  color: var(--texto-tenue);
}

.nova-chat__form input:focus {
  outline: none;
  border-color: var(--cian);
}

/* Mismo criterio que en el formulario de contacto: quitar el anillo con
   :focus se lleva por delante también el foco por teclado, porque esta
   regla gana en especificidad al anillo global del sitio. Se devuelve
   aquí para que quien navegue con el tabulador vea dónde está. */
.nova-chat__form input:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
}

.nova-chat__enviar {
  padding: 12px 19px;
  border-radius: var(--r-full);
  border: none;
  background: linear-gradient(100deg, var(--azul), var(--cian));
  color: #04101f;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Revelado
   -------------------------------------------------------------------------- */

.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}

.revelar--visible {
  opacity: 1;
  transform: none;
}

.revelar--retraso-1 {
  transition-delay: 0.08s;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .tarjeta--principal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
  }

  .proceso__pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Entre 1000 y 1200 px el reparto 0.82/1.18 dejaba la explicación en una
   columna de 376 px. Ahí las dos columnas pasan a ser iguales. */
@media (max-width: 1200px) {
  .proceso__encabezado {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .proceso__explicacion {
    padding-left: 0;
  }
}

@media (max-width: 1000px) {
  .hero__grid,
  .nova__grid,
  .retos__encabezado,
  .proceso__encabezado,
  .soluciones__encabezado,
  .cierre__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Apilado, la imagen de contacto acompaña al mensaje sin dominarlo */
  .cierre__imagen {
    max-width: 640px;
  }

  .retos__encabezado,
  .proceso__encabezado,
  .soluciones__encabezado,
  .cierre__grid {
    gap: var(--e7);
  }

  /* Las franjas de acción se apilan: texto arriba, botones debajo */
  .llamada,
  .llamada--proceso {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
  }

  .llamada__acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Apilada, la explicación vuelve al filo: la entrada solo tiene sentido
     cuando hay una segunda columna a su derecha. */
  .proceso__explicacion {
    padding-left: 0;
    max-width: 66ch;
  }

  /* El titular apilado puede ensancharse un poco más */
  .proceso__titular h2 {
    max-width: 30ch;
  }

  /* Apilada, la foto de diagnóstico no debe comerse la pantalla */
  .lamina--diagnostico {
    max-width: 640px;
  }

  /* La imagen de presentacion abre la seccion en lugar de ir al lado */
  .lamina--soluciones {
    order: -1;
  }

  /* El retrato deja de ir a la izquierda y pasa a abrir la sección */
  .retrato {
    order: -1;
    max-height: 420px;
  }

  .retrato__img {
    max-height: 420px;
  }

  .lamina--diagnostico {
    justify-self: stretch;
    max-width: none;
  }

  .lamina--contacto {
    max-width: none;
  }


  .hero__foto {
    object-position: 68% center;
  }

  /* Con una sola columna, el velo debe cubrir de arriba abajo */
  .hero__velo {
    background: linear-gradient(
        180deg,
        rgba(3, 5, 10, 0.94) 0%,
        rgba(3, 5, 10, 0.86) 40%,
        rgba(4, 7, 14, 0.8) 70%,
        rgba(3, 5, 10, 0.92) 100%
      );
  }

  .hero__grid {
    gap: var(--e8);
  }

  .hero__titulo {
    max-width: 24ch;
  }

  .retos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Con 3 retos y 2 columnas, el tercero ocupa el ancho completo */
  .reto:last-child {
    grid-column: 1 / -1;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e6);
  }

  .site-footer__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .menu-toggle {
    display: flex;
  }

  .nav-principal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e1);
    padding: var(--e4);
    background: rgba(5, 8, 15, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    display: none;
  }

  .nav-principal.abierto {
    display: flex;
  }

  .nav-principal a {
    padding: 14px var(--e4);
    border-radius: var(--r-sm);
  }

  .site-header__inner {
    position: relative;
  }

  /* En móvil no hay hover real: el desplegable pasa a ser un acordeón
     dentro del propio menú, abierto solo por el disparador (JS). */
  .nav-desplegable {
    display: flex;
    /* Sin flex-wrap, .nav-submenu (width:100%) competía por sitio en la
       misma fila que el enlace y el disparador y acababa flotando fuera
       de su hueco en vez de caer debajo, dentro del menú apilado. */
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .nav-desplegable__disparador {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }

  .nav-submenu {
    position: static;
    max-width: none;
    width: 100%;
    padding-top: 0;
    transform: none;
    /* No usamos opacidad para el cierre en móvil: con la altura a 0 el
       panel deja de ocupar espacio, en vez de quedar invisible pero
       presente y desordenar la tabulación. */
    max-height: 0;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
  }

  .nav-desplegable--abierto .nav-submenu {
    max-height: 400px;
    transform: none;
  }

  .nav-submenu__panel {
    margin-top: var(--e2);
    background: rgba(150, 178, 230, 0.05);
    box-shadow: none;
  }

  .nav-submenu__panel a {
    padding: 12px var(--e5);
  }

  .soluciones__rejilla,
  .vias {
    grid-template-columns: minmax(0, 1fr);
  }

  .franja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e5);
  }
}

@media (max-width: 800px) {
  .tarjeta--principal .tarjeta__puntos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  :root {
    --seccion-y: clamp(60px, 11vw, 88px);
  }

  .retos__grid,
  .proceso__pasos {
    grid-template-columns: minmax(0, 1fr);
  }

  .reto:last-child {
    grid-column: auto;
  }

  .proceso__pasos {
    gap: var(--e6);
  }

  .hero {
    padding-block: var(--e6) var(--e8);
  }

  .hero__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__acciones .boton {
    width: 100%;
  }

  /* En móvil un CTA a media anchura se pulsa mal: mejor uno por línea */
  .llamada__acciones,
  .cierre__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .llamada__acciones .boton,
  .cierre__acciones .boton {
    width: 100%;
  }

  .llamada {
    padding: var(--e5);
  }

  .via {
    padding: var(--e5);
  }

  .franja {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
  }

  .tarjeta {
    padding: var(--e5);
  }

  /* Con poco ancho, la flecha estorba: el icono y el texto mandan */
  .via {
    grid-template-columns: auto 1fr;
    gap: var(--e4);
  }

  .via__flecha {
    display: none;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
  }

  .movil {
    max-width: 290px;
  }

  .movil--grafito {
    max-width: 278px;
  }
}

@media (max-width: 400px) {
  .marca__logo {
    height: 30px;
  }

  /* A 360-390 px las fotografías se recortan más alto para no comerse la
     pantalla, y el número de banda cede protagonismo al titular. */
  .retrato,
  .retrato__img {
    max-height: 320px;
  }


  .movil {
    max-width: 260px;
    border-radius: 44px;
    padding: 9px;
  }

  .movil--grafito {
    max-width: 252px;
    border-radius: 38px;
  }

  .movil__pantalla {
    border-radius: 36px;
  }

  .movil--grafito .movil__pantalla {
    border-radius: 30px;
  }

  .nova-chat__boton {
    height: 50px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  .nova-chat__boton-texto {
    display: none;
  }
}

/* En móvil el fondo fijo con desenfoques grandes penaliza el desplazamiento.
   Se mantiene la atmósfera, pero más barata: menos capas, menos blur y sin
   deriva. El aspecto se conserva; el coste baja mucho. */
@media (max-width: 760px) {
  .atmosfera__luz {
    filter: blur(58px);
    animation: none;
  }

  .atmosfera__luz--3,
  .atmosfera__corrientes {
    display: none;
  }

  .atmosfera__grano {
    opacity: 0.025;
  }
}

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

  /* El fondo queda quieto por completo */
  .atmosfera__luz {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Páginas interiores: servicios y contacto

   Reutilizan el sistema de la portada (contenedores, capas, botones,
   tarjetas). Aquí solo está lo que la portada no tenía: la cabecera de
   página, las listas de valor, los ejemplos y el formulario.
   -------------------------------------------------------------------------- */

.migas {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e4);
}

.migas a {
  color: var(--texto-medio);
}

.migas a:hover {
  color: var(--cian);
}

.migas__sep {
  margin-inline: var(--e2);
  opacity: 0.5;
}

/* La página actual no es un enlace: se distingue del resto en vez de
   quedar apagada como el separador. */
.migas [aria-current="page"] {
  color: var(--texto-medio);
}

/* --- Cabecera de página --------------------------------------------------
   Tanda 11: mismo lenguaje que el hero de portada (fotografía a sangre
   completa + velo + texto superpuesto), pero compacto — nada de min-height
   pensado para llenar la pantalla. El objetivo explícito era que en
   1440×900 ya se intuya la sección siguiente, y que las páginas sin foto
   todavía no parezcan un hueco a medio construir.
   -------------------------------------------------------------------------- */

.sv-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(36px, 4.2vw, 56px);
  min-height: min(52vh, 440px);
  background: rgba(5, 8, 15, 0.42);
}

.sv-hero__escena {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sv-hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Mismo criterio que el velo de portada: oscuro donde va el texto,
   despejado hacia el resto de la fotografía. */
.sv-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(3, 5, 10, 0.96) 0%,
      rgba(3, 5, 10, 0.9) 28%,
      rgba(4, 7, 14, 0.58) 50%,
      rgba(4, 7, 14, 0.2) 70%,
      rgba(4, 7, 14, 0.04) 100%
    ),
    linear-gradient(180deg, rgba(3, 5, 10, 0.3) 0%, transparent 28%, rgba(3, 5, 10, 0.5) 100%);
}

/* Con fotografía, el bloque de texto vive en la mitad izquierda del hero
   (como en la portada) en vez de quedar pegado al borde con todo el resto
   del ancho vacío: mismo alto, composición más equilibrada. */
.sv-hero:not(.sv-hero--sin-foto) .contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}

.sv-hero__texto {
  position: relative;
  max-width: 620px;
}

/* Sin fotografía todavía no es un hueco: la atmósfera y un halo propio
   sostienen la cabecera, más compacta al no tener nada que enmarcar. */
.sv-hero--sin-foto {
  min-height: min(38vh, 340px);
}

.sv-hero--sin-foto .sv-hero__texto {
  max-width: 760px;
}

/* Encuadre amplio (ajuste posterior): en un hero muy ancho y bajo,
   object-fit:cover a sangre completa fuerza una escala grande para tapar
   todo el ancho, y eso recorta la mayor parte del alto de la fotografía —
   se ve "con zoom" y se pierde contexto de la escena. Solo para los 4
   servicios con foco propio (los que declaran focoImagen): a partir de
   1001px la escena deja de ir de borde a borde y se ancla a la derecha con
   un ancho menor, así cover necesita escalar mucho menos y se ve mucho
   más fotografía. Automatización de procesos no declara focoImagen, así
   que no lleva esta clase y sigue exactamente como estaba. */
@media (min-width: 1001px) {
  .sv-hero--encuadre-amplio .sv-hero__escena {
    left: auto;
    width: min(60%, 1120px);
  }

  /* La franja que queda a la izquierda de la escena ya no tiene fotografía
     ni velo propio: oscurecemos el fondo del hero para que combine con el
     borde del velo en vez de notarse una costura. */
  .sv-hero--encuadre-amplio {
    background: rgba(5, 8, 15, 0.8);
  }
}

/* Encuadre de portada (blog): las 10 portadas de los artículos son
   panorámicas 1672×941 compuestas a propósito — con personas, pantallas y
   objetos que forman parte del mensaje. A sangre completa, un hero ancho y
   bajo obligaría a ampliarlas más del doble y se perdería la mitad de la
   escena. Aquí la escena no se estira al ancho del hero: adopta la misma
   proporción que la imagen, de modo que cover no recorta nada y tampoco hay
   deformación (la imagen se ve entera, a su escala natural).
   -------------------------------------------------------------------------- */

@media (min-width: 1001px) {
  .sv-hero--encuadre-portada .sv-hero__escena {
    left: auto;
    right: 0;
    width: auto;
    aspect-ratio: 1672 / 941;
    /* El alto lo fija el hero (top/bottom: 0) y la proporción deduce el ancho.
       El tope evita que en un hero muy alto la escena invada del todo la
       columna de texto; está calculado para que a 1366 y a 1920 —los dos
       anchos de referencia— NO llegue a recortar: son los 1210px / 78% los
       que dejan ver la panorámica completa en ambos. */
    max-width: min(78%, 1210px);
  }

  /* La franja sin fotografía a la izquierda se oscurece como en el encuadre
     amplio, para que el borde del velo no se note como una costura. */
  .sv-hero--encuadre-portada {
    background: rgba(5, 8, 15, 0.8);
  }

  /* Velo más corto que el de servicios: sigue asegurando el contraste del
     texto donde se solapa, pero deja de oscurecer la mitad de la portada.
     No es un overlay decorativo, solo la transición hacia el fondo. */
  .sv-hero--encuadre-portada .sv-hero__velo {
    background: linear-gradient(
        100deg,
        rgba(3, 5, 10, 0.97) 0%,
        rgba(3, 5, 10, 0.95) 18%,
        rgba(3, 5, 10, 0.78) 28%,
        rgba(4, 7, 14, 0.34) 40%,
        rgba(4, 7, 14, 0.1) 54%,
        transparent 70%
      ),
      linear-gradient(180deg, rgba(3, 5, 10, 0.22) 0%, transparent 26%, rgba(3, 5, 10, 0.38) 100%);
  }
}

/* Por debajo de 1001px el texto ya ocupa una sola columna, así que una
   fotografía detrás del texto tendría que recortarse a lo ancho más de la
   mitad para cubrir un hero alto y estrecho. En su lugar la portada va
   arriba, entera y a todo el ancho, con su proporción real, y el texto
   empieza justo debajo: misma atmósfera oscura, cero recorte. */
@media (max-width: 1000px) {
  .sv-hero--encuadre-portada {
    background: rgba(5, 8, 15, 0.8);
    /* 100 / (1672/941) = 56.28vw es el alto de la portada a todo el ancho. */
    padding-top: calc(56.28vw + clamp(20px, 3vw, 32px));
  }

  .sv-hero--encuadre-portada .sv-hero__escena {
    bottom: auto;
    height: auto;
    aspect-ratio: 1672 / 941;
  }

  .sv-hero--encuadre-portada .sv-hero__velo {
    background: linear-gradient(
      180deg,
      rgba(3, 5, 10, 0.2) 0%,
      rgba(3, 5, 10, 0.04) 40%,
      rgba(3, 5, 10, 0.5) 84%,
      rgba(5, 8, 15, 0.95) 100%
    );
  }
}

.sv-hero__halo {
  top: -40%;
  right: -10%;
  width: min(680px, 70vw);
  height: min(680px, 70vw);
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.16),
    rgba(34, 211, 238, 0.06) 45%,
    transparent 70%
  );
}

.sv-hero h1 {
  font-size: clamp(2rem, 1.5rem + 1.9vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--e4);
  max-width: 18ch;
}

.sv-hero--sin-foto h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  max-width: 18ch;
}

.sv-hero__entrada {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto-medio);
  max-width: 54ch;
}

.sv-hero__apoyo {
  margin-top: var(--e3);
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--texto-tenue);
  max-width: 58ch;
}

.sv-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* --- Problemas: mismas columnas abiertas que en la portada --- */

.sv-problemas .reto:last-child {
  grid-column: auto;
}

/* --- Listas de valor --- */

.sv-puntos {
  margin-top: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px) clamp(28px, 3vw, 56px);
}

.sv-punto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linea);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-medio);
}

.sv-punto svg {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  flex-shrink: 0;
  stroke: var(--cian);
}

/* --- Ejemplos de aplicación --- */

.sv-ejemplos {
  margin-top: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

.sv-ejemplo {
  padding: clamp(18px, 1.6vw, 26px);
  background: linear-gradient(150deg, rgba(20, 31, 51, 0.6), rgba(5, 8, 15, 0.44));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
}

.sv-ejemplo__sector {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: var(--e4);
}

.sv-ejemplo__texto {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--texto-medio);
}

/* --- Qué necesitamos / cuándo entra una persona --- */

.sv-acuerdos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
}

/* Solo el par etiqueta+título se centra; el párrafo de lectura queda
   fuera de este envoltorio y sigue alineado a la izquierda. */
.sv-acuerdo__titulo {
  text-align: center;
  margin-bottom: var(--e4);
}

.sv-acuerdo__titulo .etiqueta {
  margin-bottom: var(--e3);
}

.sv-acuerdo h2 {
  font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.6rem);
  margin-bottom: 0;
}

.sv-acuerdo p {
  font-size: 0.97rem;
  line-height: 1.76;
  color: var(--texto-medio);
  max-width: 54ch;
}

.sv-acuerdo--humano {
  padding-left: clamp(20px, 2.2vw, 34px);
  border-left: 2px solid var(--linea-fuerte);
}

/* --- Cierre y servicios relacionados ---------------------------------
   El texto va arriba y las tres acciones debajo, en una sola fila
   compacta: antes las tres compartían una columna estrecha junto al
   texto y salían como tres barras verticales gigantes. */

.llamada--servicio {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e5);
}

.llamada--servicio h2 {
  font-size: clamp(1.18rem, 1.04rem + 0.6vw, 1.5rem);
  margin-bottom: var(--e3);
}

.llamada--servicio .llamada__acciones {
  flex-direction: row;
  flex-wrap: wrap;
}

.llamada--servicio .llamada__acciones .boton {
  flex: 1 1 200px;
  justify-content: center;
}

@media (max-width: 680px) {
  .llamada--servicio .llamada__acciones {
    flex-direction: column;
  }
}

/* Un enlace de más bajo perfil que un botón: para "ver todas las vías de
   contacto" cuando ya hay tres acciones reales encima y una cuarta se
   leería como ruido, no como ayuda. */
.llamada__enlace-discreto {
  margin-top: var(--e4);
}

.llamada__enlace-discreto a {
  font-size: 0.87rem;
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.llamada__enlace-discreto a:hover {
  color: var(--texto-medio);
}

.sv-relacionados {
  margin-top: clamp(40px, 4.4vw, 72px);
}

.sv-relacionados__titulo {
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e5);
}

.sv-relacionados__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.sv-relacionado {
  display: block;
  padding: var(--e5);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color var(--medio) var(--curva),
    background var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.sv-relacionado:hover {
  transform: translateY(-2px);
  border-color: var(--linea-fuerte);
  background: rgba(150, 178, 230, 0.05);
}

.sv-relacionado__nombre {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--texto);
  margin-bottom: var(--e2);
}

.sv-relacionado__lema {
  display: block;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/* Señal discreta de que la tarjeta entera es clicable: no un botón, solo
   una flecha que se mueve al pasar el cursor. */
.sv-relacionado__flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e3);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cian);
}

.sv-relacionado__flecha svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform var(--medio) var(--curva);
}

.sv-relacionado:hover .sv-relacionado__flecha svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Página de contacto
   -------------------------------------------------------------------------- */

.contacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 4vw, 72px);
  /* Con 3 vías (antes 6) la columna lateral es bastante más corta que el
     formulario. En vez de "start" (que la deja pegada arriba con un
     hueco vacío grande debajo), se estira la celda a la altura del
     formulario y .contacto__lateral centra su contenido dentro: el
     mismo aire se reparte arriba y abajo en vez de acumularse abajo. */
  align-items: stretch;
}

.contacto__formulario h2,
.contacto__vias h2,
.contacto__despues h2 {
  font-size: clamp(1.18rem, 1.04rem + 0.6vw, 1.5rem);
  margin-bottom: var(--e4);
}

/* "Qué ocurre después" — tanda 11: antes vivía metido en la columna
   lateral, más estrecha que el formulario, y dejaba un desequilibrio de
   alturas entre las dos columnas. Ahora es su propia franja a todo el
   ancho, después del formulario y las vías, con los 4 pasos en fila. */
.contacto__siguiente {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--linea);
}

.contacto__despues--ancho h2 {
  text-align: center;
}

.contacto__matiz--centrado {
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
}

.contacto__ayuda {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--texto-tenue);
  margin-bottom: var(--e6);
}

.contacto__ayuda abbr {
  text-decoration: none;
  color: var(--cian);
}

.contacto__lateral {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 3.4vw, 56px);
}

.contacto__vias {
  display: flex;
  flex-direction: column;
  /* Antes eran 6 tarjetas con gap ajustado (--e4); al quedar solo 3, ese
     mismo espaciado dejaba un hueco vacío grande bajo la columna, mucho
     más corta que el formulario. Más aire entre tarjetas (--e6) y más
     padding/icono en cada una (ver .contacto__vias .via) reparten mejor
     el espacio sin añadir contenido ni cambiar el layout. */
  gap: var(--e6);
}

.contacto__vias .via {
  grid-template-columns: auto 1fr;
  padding: var(--e6);
}

.contacto__vias .via__icono {
  width: 60px;
  height: 60px;
}

.contacto__vias .via__icono svg {
  width: 28px;
  height: 28px;
}

.contacto__pasos {
  counter-reset: paso-contacto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.contacto__pasos li {
  position: relative;
  padding-left: calc(var(--e6) + 6px);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--texto-medio);
}

.contacto__pasos li::before {
  counter-increment: paso-contacto;
  content: counter(paso-contacto, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cian);
}

.contacto__pasos strong {
  color: var(--texto);
}

/* Variante horizontal (franja "Qué ocurre después" a todo el ancho). Va
   DESPUÉS de .contacto__pasos a propósito: con la misma especificidad
   (una sola clase cada una), la que aparece más abajo en la hoja de
   estilos es la que gana — y aquí necesitamos que "display: grid" gane
   sobre el "display: flex; flex-direction: column" de la base. Puesto
   antes, como estaba, la base ganaba siempre y la franja se quedaba
   apilada en una columna a cualquier ancho: se detectó verificando con
   el navegador, no se veía mirando solo el CSS. */
.contacto__pasos--horizontal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
}

.contacto__pasos--horizontal li {
  padding-left: 0;
  padding-top: calc(var(--e5) + 4px);
  border-top: 1px solid var(--linea-fuerte);
}

.contacto__pasos--horizontal li::before {
  left: 0;
  top: 0;
}

.contacto__matiz {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--e5);
}

.campo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}

.campo--mitad {
  grid-column: span 1;
}

.campo label {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--texto);
}

.campo label span {
  color: var(--cian);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--texto-fuente);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto);
  background: rgba(3, 5, 10, 0.5);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  transition: border-color var(--medio) var(--curva),
    background var(--medio) var(--curva);
}

.campo textarea {
  resize: vertical;
  min-height: 140px;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-tenue);
  opacity: 0.75;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: rgba(150, 178, 230, 0.34);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cian);
  background: rgba(3, 5, 10, 0.72);
}

/* El foco por teclado mantiene además el anillo global del sitio */
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
}

.campo--invalido {
  border-color: #f87171 !important;
}

.campo__error {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #fca5a5;
  min-height: 0;
}

.campo__error:empty {
  display: none;
}

.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: start;
}

.campo--casilla input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--azul);
  cursor: pointer;
}

.campo--casilla label {
  font-family: var(--texto-fuente);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto-medio);
  cursor: pointer;
}

.campo--casilla .campo__error {
  grid-column: 1 / -1;
}

.formulario button[type="submit"] {
  grid-column: 1 / -1;
}

.formulario__estado {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texto-medio);
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado--ok {
  padding: var(--e4) var(--e5);
  border-radius: var(--r-sm);
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.32);
  color: #a7f3cd;
}

.formulario__estado--error {
  padding: var(--e4) var(--e5);
  border-radius: var(--r-sm);
  background: rgba(248, 113, 113, 0.09);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

/* --------------------------------------------------------------------------
   Cal.com — siguiente paso tras guardar la solicitud

   Oculto por defecto ([hidden]). Solo se muestra por script.js, y solo si
   DESTINO_CALCOM está configurado: mientras no exista una URL real, este
   bloque no aparece nunca — la solicitud ya ha quedado guardada de todas
   formas, así que no depender de esto no pierde el contacto.
   -------------------------------------------------------------------------- */

.calcom-paso {
  margin-top: var(--e6);
  padding-top: var(--e6);
  border-top: 1px solid var(--linea);
}

.calcom-paso h3 {
  font-size: 1.05rem;
  margin-bottom: var(--e2);
}

.calcom-paso p {
  font-size: 0.9rem;
  color: var(--texto-medio);
  margin-bottom: var(--e4);
}

.calcom-embed {
  width: 100%;
  height: 620px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
}

.calcom-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.calcom-paso__enlace {
  display: inline-block;
  margin-top: var(--e3);
  font-size: 0.88rem;
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Blog (Fase 1): mismo lenguaje visual que servicios (sv-hero, seccion,
   etiqueta, llamada, botones), con sus propios componentes de listado,
   tarjeta, tabla de contenidos, cuerpo de artículo y compartir.
   -------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
}

.blog-tarjeta {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--linea);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.blog-tarjeta:hover {
  border-color: var(--linea-fuerte);
  transform: translateY(-2px);
}

.blog-tarjeta__media {
  position: relative;
  /* Proporción real de las portadas (1672×941) en vez de un 16/9 redondeado:
     la diferencia es mínima, pero así la tarjeta no recorta ni un píxel. */
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.blog-tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-tarjeta__sinfoto {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.1), transparent 55%), rgba(8, 13, 24, 0.9);
}

.blog-tarjeta__cuerpo {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  flex: 1;
}

.blog-tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: 0.78rem;
  color: var(--texto-tenue);
}

.blog-tarjeta__categoria {
  color: var(--cian);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.blog-tarjeta__punto {
  opacity: 0.5;
}

.blog-tarjeta__titulo {
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 0;
}

.blog-tarjeta__resumen {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texto-medio);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-tarjeta__enlace {
  margin-top: auto;
  padding-top: var(--e2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-medio);
}

.blog-tarjeta__enlace svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.blog-tarjeta:hover .blog-tarjeta__enlace svg {
  transform: translateX(3px);
}

/* Tarjeta destacada: horizontal en desktop, misma tarjeta en móvil */
.blog-tarjeta--destacada {
  flex-direction: row;
}

/* Antes la media de la destacada se estiraba al alto del texto (aspect-ratio:
   auto), lo que recortaba la portada por arriba y por abajo. Ahora manda la
   proporción de la imagen: se ve completa y es ella la que marca el alto de
   la fila si el texto es más corto. */
.blog-tarjeta--destacada .blog-tarjeta__media {
  width: 44%;
  aspect-ratio: 1672 / 941;
  /* Sin esto el estirado por defecto del flex daría un alto definido a la
     media y anularía la proporción (volviendo a recortar la portada). */
  align-self: flex-start;
  flex-shrink: 0;
}

.blog-tarjeta--destacada .blog-tarjeta__cuerpo {
  justify-content: center;
}

.blog-tarjeta--destacada .blog-tarjeta__titulo {
  font-size: 1.4rem;
}

/* --- Artículo: cuerpo + tabla de contenidos ------------------------------- */

.blog-articulo__layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--e8);
  align-items: start;
}

.blog-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: var(--e4);
  border-radius: 14px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.02);
  /* Firefox: barra fina y en la paleta del sitio. No admite hover, así que
     ahí se queda siempre en el tono de reposo. */
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 135, 160, 0.35) transparent;
}

/* Chromium, Edge y Safari. Solo para este contenedor: el scroll de la
   página y el resto de zonas desplazables conservan la barra del sistema. */
.blog-toc::-webkit-scrollbar {
  width: 6px;
}

.blog-toc::-webkit-scrollbar-track {
  background: transparent;
}

.blog-toc::-webkit-scrollbar-thumb {
  background: rgba(120, 135, 160, 0.35);
  border-radius: 999px;
  transition: background var(--medio) var(--curva);
}

.blog-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 210, 255, 0.55);
}

.blog-toc__titulo {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  margin: 0 0 var(--e3);
}

.blog-toc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-toc__lista a {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--texto-tenue);
  transition: color 0.15s ease;
}

.blog-toc__lista a:hover,
.blog-toc__lista a.blog-toc__activo {
  color: var(--cian);
}

/* Cuerpo del artículo: el HTML migrado no lleva clases propias (se
   depuraron en la migración), así que la tipografía se define aquí por
   etiqueta semántica. */
.blog-articulo__cuerpo {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--texto-medio);
}

.blog-articulo__cuerpo h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  color: var(--texto-alto);
  margin: var(--e8) 0 var(--e4);
}

.blog-articulo__cuerpo h2:first-child {
  margin-top: 0;
}

.blog-articulo__cuerpo h3 {
  font-size: 1.15rem;
  color: var(--texto-alto);
  margin: var(--e6) 0 var(--e3);
}

.blog-articulo__cuerpo p {
  margin: 0 0 var(--e4);
}

.blog-articulo__cuerpo strong {
  color: var(--texto-alto);
  font-weight: 700;
}

.blog-articulo__cuerpo ul,
.blog-articulo__cuerpo ol {
  margin: 0 0 var(--e5);
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-articulo__cuerpo a {
  color: var(--cian);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-articulo__cuerpo blockquote {
  margin: var(--e6) 0;
  padding: var(--e4) var(--e5);
  border-left: 3px solid var(--lima);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 14px 14px 0;
}

.blog-articulo__cuerpo blockquote p:last-child {
  margin-bottom: 0;
}

.blog-articulo__cuerpo figure {
  margin: var(--e6) auto;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--linea);
}

.blog-articulo__cuerpo figure img {
  width: 100%;
  display: block;
}

.blog-articulo__cuerpo figcaption {
  padding: var(--e2) var(--e3);
  font-size: 0.78rem;
  text-align: center;
  color: var(--texto-tenue);
  border-top: 1px solid var(--linea);
}

.blog-articulo__cuerpo hr {
  border: none;
  border-top: 1px solid var(--linea);
  margin: var(--e7) 0;
}

/* --- Tablas del artículo -------------------------------------------------
   El contenedor es lo único que se desplaza cuando la tabla no cabe: la
   página nunca llega a tener scroll horizontal. Es enfocable (tabindex en
   el HTML generado) para poder recorrerla también con teclado. */
.blog-tabla {
  margin: var(--e6) 0;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  -webkit-overflow-scrolling: touch;
}

.blog-tabla:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
}

.blog-articulo__cuerpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.6;
  /* Evita que una columna con texto largo quede en una sola letra por línea;
     si no cabe, se desplaza el contenedor. */
  min-width: 34rem;
}

.blog-articulo__cuerpo thead {
  background: rgba(255, 255, 255, 0.045);
}

.blog-articulo__cuerpo th {
  text-align: left;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-alto);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}

.blog-articulo__cuerpo td {
  padding: var(--e3) var(--e4);
  color: var(--texto-medio);
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

/* La primera columna suele ser la etiqueta de la fila: se lee mejor con algo
   más de peso, sin convertirla en otro encabezado. */
.blog-articulo__cuerpo td:first-child {
  color: var(--texto-alto);
  font-weight: 600;
}

.blog-articulo__cuerpo tbody tr:last-child td {
  border-bottom: none;
}

.blog-articulo__cuerpo tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* --- Progreso de lectura --------------------------------------------------- */

.blog-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
}

.blog-progreso__relleno {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--azul), var(--cian));
  transition: width 0.1s linear;
}

/* --- Compartir -------------------------------------------------------------- */

.blog-compartir__titulo {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  margin: 0 0 var(--e4);
}

.blog-compartir__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

.blog-compartir__boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.02);
  color: var(--texto-medio);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.blog-compartir__boton svg {
  width: 16px;
  height: 16px;
}

.blog-compartir__boton:hover {
  border-color: var(--cian);
  color: var(--texto-alto);
}

/* --------------------------------------------------------------------------
   Responsive de las páginas interiores
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .contacto__grid,
  .sv-acuerdos {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-acuerdo--humano {
    padding-left: 0;
    padding-top: var(--e5);
    border-left: none;
    border-top: 1px solid var(--linea-fuerte);
  }

  .sv-hero:not(.sv-hero--sin-foto) .contenedor {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-ejemplos,
  .sv-relacionados__lista,
  .contacto__pasos--horizontal,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-articulo__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-toc {
    position: static;
  }

  .blog-tarjeta--destacada {
    flex-direction: column;
  }

  .blog-tarjeta--destacada .blog-tarjeta__media {
    width: 100%;
    aspect-ratio: 1672 / 941;
    align-self: auto;
  }
}

@media (max-width: 680px) {
  .sv-puntos,
  .sv-ejemplos,
  .sv-relacionados__lista,
  .contacto__pasos--horizontal,
  .formulario,
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .campo--mitad {
    grid-column: 1 / -1;
  }

  .sv-hero__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .sv-hero__acciones .boton {
    width: 100%;
  }

  .calcom-embed {
    height: 520px;
  }
}

/* --------------------------------------------------------------------------
   Páginas legales (aviso legal, privacidad, cookies)

   No estrenan lenguaje visual: el texto largo reutiliza el componente de
   prosa del blog (.blog-articulo__cuerpo). Aquí solo vive lo propio de
   estas tres páginas mientras el texto siga en borrador: el aviso de la
   cabecera y los huecos pendientes de completar, que tienen que cantar a
   simple vista para que nadie los confunda con un dato real.
   -------------------------------------------------------------------------- */

.texto-legal {
  max-width: 76ch;
}

.aviso-borrador {
  max-width: 76ch;
  margin: 0 0 var(--e6);
  padding: var(--e4) var(--e5);
  border: 1px dashed var(--nova);
  border-radius: 14px;
  background: rgba(242, 165, 61, 0.07);
  color: var(--texto-medio);
  font-size: 0.95rem;
  line-height: 1.7;
}

.aviso-borrador p {
  margin: 0;
}

.aviso-borrador strong {
  color: var(--nova);
}

.pendiente {
  display: inline;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--nova);
  border-radius: 6px;
  background: rgba(242, 165, 61, 0.1);
  color: var(--nova);
  font-family: var(--display);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Enlaces legales del pie: discretos, en la misma línea del copyright. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

.site-footer__legal a:hover {
  color: var(--texto-alto);
}