/* ==========================================================================
   A360 — marketing.css
   La estructura, tipografía (Inter), radios y animación de firma siguen
   siendo el sistema MindMarket del reskin original — pero la PALETA ya no
   es la de aquella ficha de estilo prestada: es la paleta real del manual
   de identidad corporativa de A360 Marketing (colores principales Orange
   Red / Steel Blue / Dark Blue / Full Black, más dos secundarios de uso
   explícitamente permitido como fondo y texto: Dark Slate Gray y Linen/
   Gainsboro). Los nombres de las variables son historia del reskin y no se
   han tocado (para no rehacer 50+ selectores), pero sus valores son ahora,
   sin excepción, colores institucionales.
   Deliberadamente fuera: los colores complementarios del manual (turquesa,
   verde amarillo, verde mar, violeta, dorados) — el propio manual limita
   su uso a "un color por composición" para piezas puntuales o eventos, no
   para un sistema de interfaz completo; meterlos aquí habría sido lo
   contrario de estratégico y coherente.
   Asesoría y la puerta NO se tocan: siguen su propio manual de A360.
   ========================================================================== */

body.marketing {
  /* ---- Paleta oficial A360 Marketing (manual de identidad corporativa) ---- */
  --mk-acento: #1E6FA0;      /* Steel Blue — acento estructural (nav, degradados) */
  --mk-azul-oscuro: #0B3A54; /* Dark Blue — pareja de degradado, hover del CTA, banda de cierre */
  --mk-crema: #ffffff;      /* Blanco — lienzo principal. Antes era Linen: más variedad
                                real entre el lienzo (blanco puro) y el panel secundario
                                (Linen, ver --mk-arena) que dos beige casi iguales. */
  --mk-tinta: #404040;      /* Dark Slate Gray — el manual lo fija como "el color para los
                                textos sobre blanco"; aquí hace ese papel en toda la web,
                                titulares incluidos */
  --mk-blanco: #ffffff;     /* blanco — tarjetas, nav */
  --mk-arena: #F3EEE7;      /* Linen — superficie secundaria/recesada, con calidez propia
                                en vez del gris frío de Gainsboro (que se queda solo para
                                los filetes, ver --mk-niebla) */
  --mk-gris: rgba(64, 64, 64, .6); /* Dark Slate Gray atenuado — texto muted; no es un
                                       color nuevo, es el mismo con menos opacidad */
  --mk-niebla: #E8E7E7;     /* Gainsboro — filetes sutiles */
  --mk-negro: #000000;      /* Full Black — máximo contraste */
  --mk-azul: #1E6FA0;       /* Steel Blue — mismo acento estructural, sin un segundo azul suelto */
  --mk-coral: #E95117;      /* Orange Red — único relleno fuerte (CTA), color de energía del manual */
  --mk-degradado-hero: linear-gradient(135deg, #0B3A54, #1E6FA0); /* Dark Blue > Steel Blue: degradado oficial del manual */

  /* ---- Complementarios del manual: solo para los numerales de índice
     (servicios, enfoque) y el botón de cambio de mundo del header — un
     color fijo por posición, nunca mezclados sueltos en una misma pieza,
     tal y como el propio manual pide para este grupo de colores. ---- */
  --mk-turquesa: #51BCBD;    /* Medium Turquoise */
  --mk-verde-lima: #8DC04A;  /* Yellow Green */
  --mk-verde-mar: #1BA074;   /* Medium Sea Green */
  --mk-violeta: #A13C8F;     /* Medium Violet Red */
  --mk-dorado: #D1970F;      /* Golden Rod */
  /* Mismos cinco colores en canales R,G,B sueltos — para poder usarlos
     en rgba() con transparencia (tarjetas de servicios al hover) sin
     inventar un tono nuevo: es el mismo color, solo con alfa. */
  --mk-turquesa-rgb: 81, 188, 189;
  --mk-verde-lima-rgb: 141, 192, 74;
  --mk-verde-mar-rgb: 27, 160, 116;
  --mk-violeta-rgb: 161, 60, 143;
  --mk-dorado-rgb: 209, 151, 15;

  /* ---- Tipografía: una sola familia (Inter) a escala extrema ---- */
  --f-titulos: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-cuerpo: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Escala MindMarket (body-sm 15 / body-lg 18 / subheading 20 / heading-sm 30 /
     heading 53 / heading-lg 81 / display 140-144), llevada a clamp() fluido */
  --display: clamp(48px, 10vw, 140px);
  --titulo-1: clamp(36px, 7vw, 81px);
  --titulo-2: clamp(28px, 4.5vw, 53px);
  --titulo-3: 30px;
  --cuerpo-lg: 18px;
  --cuerpo: 17px;
  --menor: 15px;

  /* ---- Radios: 50px es la firma; 63.75px en contenedores de imagen ---- */
  --r-panel: 50px;
  --r-medio: 10px;
  --mk-r-imagen: 63.75px;

  background: var(--mk-crema);
  color: var(--mk-tinta);
  /* Ojo: el hueco para el nav NO va aquí (con padding-top en el body se
     ve una franja crema detrás de la píldora, cortada contra el color
     de la primera sección). Va como padding dentro de cada sección, así
     su propio color de fondo llega hasta arriba del todo y la píldora
     flota directamente sobre él, sin costura. */
}

/* ---- Tipografía base: Inter 400/500, nunca 700, tracking negativo en display ---- */

body.marketing h1, body.marketing h2, body.marketing h3, body.marketing h4 {
  font-family: var(--f-titulos);
  font-weight: 500;
  color: var(--mk-tinta);
}
body.marketing h1 { font-size: var(--display); line-height: .95; letter-spacing: -.06em; }
body.marketing h2 { font-size: var(--titulo-1); line-height: 1.15; letter-spacing: -.05em; }
body.marketing h3 { font-size: var(--titulo-3); line-height: 1.2; letter-spacing: normal; }
body.marketing p, body.marketing li { color: var(--mk-tinta); }
body.marketing .menor { color: var(--mk-gris); }

body.marketing a.enlace-cuerpo {
  color: var(--mk-tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-gris);
}

/* Cada banda es su propia "hoja" opaca — nunca transparente, porque con
   el efecto de páginas apiladas de abajo eso dejaría ver la hoja anterior
   asomando (el "texto encima de texto" que no queremos). Alternan crema/
   arena/blanco sólidos en vez de colores sueltos por página. */
body.marketing .banda-blanca { background: var(--mk-blanco) !important; }
body.marketing .banda-gris,
body.marketing .banda[style*="background"] { background: var(--mk-crema) !important; }

/* Nota: cada sección debe caber en una pantalla para que el efecto de
   apilado se vea limpio (ver más abajo). Padding contenido a propósito,
   no --e-8, para no forzar secciones mucho más altas que el viewport. */
body.marketing .banda { padding-block: var(--e-6); }
@media (min-width: 1024px) { body.marketing .banda { padding-block: var(--e-7); } }

/* ---------- Animación de firma: páginas apiladas ----------
   La animación real de MindMarket no son micro-efectos sueltos: cada
   sección se queda fija (sticky) mientras la siguiente sube con las
   esquinas superiores redondeadas y la cubre, como hojas apilándose.
   CSS puro (sticky + border-radius), sin JS ni librería de animación.

   Clave para que no se solape texto de una "hoja" con la siguiente:
   CADA hoja tiene que ser como mínimo una pantalla completa (100dvh).
   Si una hoja es más baja que la ventana, deja de estar pegada antes de
   que la siguiente la haya tapado del todo, y se ven las dos a la vez.
   Por eso min-height:100dvh va en todas — sección o bloque de servicio,
   sin excepción — no solo en el héroe. */
body.marketing main > section,
body.marketing main > article {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  background: var(--mk-crema);
  display: flex;
  flex-direction: column;
  /* Centrado, pero solo si cabe: en pantallas bajas donde el contenido
     no entra entero, ancla arriba para que lo primero que se vea sea
     siempre el principio (título e idea clave), nunca un recorte a
     mitad de frase esperando a que "se despegue". */
  justify-content: safe center;
  /* El hueco del nav va aquí, no en el body: así el color de fondo de
     CADA sección llega hasta arriba del todo, detrás de la píldora
     flotante, sin dejar asomar el crema del body como una costura.
     !important porque .banda (más específica) no debe poder recortar
     este margen — si lo hiciera, la píldora taparía el título. */
  padding-top: 104px !important;
}
/* Cada sección es un contenedor flex (para el centrado vertical de
   arriba), así que su .contenedor es un ítem flex — y por defecto un
   ítem flex no se encoge por debajo del tamaño de SU contenido más
   ancho, aunque ese contenido tenga scroll propio (overflow-x:auto).
   Sin esto, el carrusel horizontal de servicios/trabajo (más abajo)
   estira el .contenedor entero al ancho de las cinco tarjetas juntas
   en vez de quedarse en el ancho de la pantalla. */
body.marketing main > section > .contenedor,
body.marketing main > article > .contenedor {
  min-width: 0;
  width: 100%;
}
/* Toda hoja menos la primera sube con las esquinas redondeadas */
body.marketing main > *:not(:first-child) {
  border-radius: 50px 50px 0 0;
}
/* El footer es la última hoja: no se queda pegado, solo remata subiendo */
body.marketing .pie {
  position: relative;
  border-radius: 50px 50px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  body.marketing main > section,
  body.marketing main > article { position: relative; min-height: 0; }
}

/* En móvil el efecto de apilado se queda — pero solo en las hojas que
   de verdad caben en una pantalla completa. Cuáles son eso no es fijo:
   depende del contenido real, del tamaño de letra del sistema y del
   ancho exacto del teléfono (incluso el propio héroe puede no caber si
   el teléfono es muy estrecho). Por eso, en vez de adivinar a mano qué
   sección es "corta" (una lista fija se queda corta en cuanto cambia
   el texto o aparece un móvil más estrecho), app.js mide la altura real
   de cada sección nada más cargar y le añade .mk-seccion-larga solo a
   las que se pasan de la ventana. Esa hoja pierde el sticky y pasa a
   scroll normal; el resto conserva el efecto completo de páginas
   apiladas — ver iniciarSeccionesApiladas() en app.js. */
@media (max-width: 768px) {
  /* position:relative, no static: static pinta DETRÁS de lo sticky (son
     capas de apilamiento distintas), así que la sección "normal" quedaría
     tapada por la pegada de arriba en vez de cubrirla. relative sin
     desplazamiento se comporta igual en el layout pero pinta en el orden
     correcto, encima de lo que viene antes. */
  body.marketing main > section.mk-seccion-larga,
  body.marketing main > article.mk-seccion-larga {
    position: relative;
    min-height: 0;
    padding-top: var(--e-5) !important;
  }
  /* Si la hoja larga es la primera de la página (el héroe, o el propio
     formulario de contacto cuando no hay héroe delante), necesita el
     hueco completo del nav, no solo el respiro entre bandas. Más
     específico que la regla de arriba (gana por :first-child) y más
     específico que la propia regla del héroe (gana por más clases). */
  body.marketing main > section.mk-seccion-larga:first-child,
  body.marketing main > article.mk-seccion-larga:first-child {
    padding-top: calc(104px + var(--e-3)) !important;
  }
}

/* ---------- Navegación flotante en píldora ---------- */

.nav-flotante-envoltorio {
  position: fixed;
  inset-block-start: var(--e-2);
  inset-inline: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: var(--canal-movil);
}

.nav-flotante {
  width: 100%;
  max-width: var(--ancho-max);
  background: var(--mk-blanco);
  border: 1px solid var(--mk-niebla);
  border-radius: var(--r-pildora);
  padding: 10px var(--e-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.nav-flotante__logo svg,
.nav-flotante__logo img { height: 52px; width: auto; display: block; }

.nav-flotante__nav {
  display: none;
  align-items: center;
  gap: var(--e-4);
}
@media (min-width: 900px) { .nav-flotante__nav { display: flex; } }

.nav-flotante__nav a {
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: var(--menor);
  color: var(--mk-tinta);
  padding: 10px 16px;
  border-radius: var(--r-pildora);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
/* Mismo naranja que la página activa (aria-current, justo debajo): el
   hover ya no es solo un fondo gris apenas perceptible, es el color de
   marca — el mismo gesto naranja de los botones del héroe. */
.nav-flotante__nav a:hover, .nav-flotante__nav a:focus-visible { background: var(--mk-arena); color: var(--mk-coral); }
.nav-flotante__nav a[aria-current="page"] { color: var(--mk-coral); }

/* El único enlace del header que lleva a otro mundo (Asesoría) se
   distingue con su propio color — Medium Sea Green, que no se repite
   en ningún otro botón de acción de Marketing — en vez de quedar como
   un enlace de texto más entre la píldora de navegación. */
.nav-flotante__cambio-mundo {
  display: inline-flex;
  align-items: center;
  font-size: var(--menor);
  font-weight: 500;
  color: var(--mk-blanco);
  background: var(--mk-verde-mar);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--r-pildora);
  transition: background-color var(--dur-hover) ease;
}
.nav-flotante__cambio-mundo:hover, .nav-flotante__cambio-mundo:focus-visible { background: var(--mk-azul-oscuro); }

/* El panel de menú a pantalla completa es compartido con Asesoría
   (base.css lo pinta en azul-hondo); en Marketing usa su propia tinta. */
body.marketing .menu-movil__nav a { color: var(--mk-tinta); }
/* Mismo verde del enlace "Ir a Asesoría" del header, aquí en su versión
   del menú a pantalla completa: es el último enlace de la lista. */
body.marketing .menu-movil__nav a:last-child { color: var(--mk-verde-mar); }

/* Menu Toggle Button — recoloreado: círculo en el azul del logo de Marketing, icono blanco */
.nav-flotante__movil-abrir {
  display: flex;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mk-acento);
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-hover) ease;
}
.nav-flotante__movil-abrir:hover,
.nav-flotante__movil-abrir:focus-visible { background: var(--mk-tinta); }
@media (min-width: 900px) { .nav-flotante__movil-abrir { display: none; } }

/* ---------- Botones: ghost neutro (acción general) + coral (nivel servicio) ---------- */

.boton-mk-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--mk-blanco);
  color: var(--mk-tinta);
  border: 1px solid var(--mk-niebla);
  border-radius: var(--r-pildora);
  padding: 11px 12px 11px 20px;
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: var(--menor);
  transition: background-color var(--dur-hover) ease;
}
.boton-mk-ghost:hover, .boton-mk-ghost:focus-visible { background: var(--mk-arena); }
.boton-mk-ghost__punto {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mk-azul);
  flex-shrink: 0;
}

.boton-mk-coral {
  display: inline-flex;
  align-items: center;
  background: var(--mk-coral);
  color: var(--mk-blanco);
  border: 1px solid var(--mk-coral);
  border-radius: var(--r-pildora);
  padding: 11px 20px;
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: var(--menor);
  transition: background-color var(--dur-hover) ease;
}
/* Hover invierte a Dark Blue, no a un naranja más oscuro inventado: es la
   misma pareja del degradado oficial "Dark Blue > Orange Red" del manual,
   solo que aquí como dos estados en vez de un degradado. */
.boton-mk-coral:hover, .boton-mk-coral:focus-visible { background: var(--mk-azul-oscuro); border-color: var(--mk-azul-oscuro); }

/* ---------- Héroe: titular a --display, imagen a sangre entrando por abajo ---------- */

body.marketing .marketing-hero {
  /* Degradado oficial del manual (Dark Blue > Steel Blue), no un azul
     plano: así la hoja siguiente (Linen) se nota de verdad al subir y
     cubrirlo, y el héroe ya tiene su propio gesto de marca desde el
     primer segundo. */
  background: var(--mk-degradado-hero);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 104px de hueco del nav + un poco de aire extra antes del titular.
     !important para ganarle al !important del hueco base del nav
     (ver más arriba) y no quedarnos solo con 104px pelados aquí. */
  padding-block-start: calc(104px + var(--e-4)) !important;
  padding-inline: var(--canal-movil);
  padding-block-end: var(--e-4);
  /* Contiene el fondo interactivo de abajo, que es position:absolute. */
  overflow: hidden;
}
@media (min-width: 1024px) { .marketing-hero { padding-inline: var(--canal-escritorio); } }

/* El fondo es position:absolute (capa de pintado "estática/posicionada
   sin desplazamiento" temprana); el resto de hijos del héroe necesita
   su propio position:relative para pintar por delante, si no el fondo
   los tapa — mismo motivo que el bug de apilado de secciones que ya se
   corrigió en otro sitio de esta hoja de estilos. */
.marketing-hero > *:not(.marketing-hero__fondo) {
  position: relative;
  z-index: 1;
}

/* Fondo interactivo del héroe: el icono real de A360 (logo-a360-blanco,
   el mismo archivo de marca que usa el resto del sitio) como marca de
   agua, a modo de placeholder con carácter mientras no hay vídeo real
   (regla del encargo: nunca vídeo o foto de stock). Quieto del todo en
   reposo — solo se mueve si se mueve el ratón (iniciarHeroScrubMarketing
   en app.js, vía la propiedad translate; nada de animación propia). */
.marketing-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.marketing-hero__fondo-logo {
  /* El mínimo (420px) y el ritmo de crecimiento (58vw) son los de
     siempre — no tocan ni móvil ni escritorios normales. Solo el tope
     de arriba se ha ido afinando con pruebas reales en monitores 4K de
     27": a 180% de escalado (~2133px de ancho de página, lo más
     habitual en Windows para ese tamaño) esto da un logo de unos
     1240px, que es el punto que ya se vio bien — ni de sobra ni corto. */
  --tamano-logo-fondo: clamp(420px, 58vw, 1400px);
  position: absolute;
  top: 50%;
  /* Pegado al borde real de la pantalla (no a una caja de contenido
     centrada) y desplazado hacia fuera exactamente 1/8 de su propio
     ancho — así siempre asoma 7/8 del logo y se recorta 1/8 contra el
     borde, como una pieza "desfasada", sea cual sea el ancho de la
     ventana. Al ser una fracción de su propio tamaño (no un % de un
     contenedor que crece con la pantalla), nunca se dispara ni se va
     a la deriva en monitores muy anchos. */
  right: calc(var(--tamano-logo-fondo) / -8);
  width: var(--tamano-logo-fondo);
  aspect-ratio: 1;
  margin-top: calc(var(--tamano-logo-fondo) / -2);
  opacity: .14;
  translate: 0px 0px;
}
/* Pantallas grandes de verdad (a partir de aquí ya no son un portátil ni
   un monitor de oficina normal): tamaño fijo de prueba, sin escalar con
   el ancho, para ver claramente el punto de partida. No toca nada por
   debajo de 2400px, así que portátiles y monitores normales no se ven
   afectados. */
@media (min-width: 2400px) {
  .marketing-hero__fondo-logo {
    --tamano-logo-fondo: 1600px;
    right: 200px;
    top: 45%;
  }
}

/* Marca de agua decorativa para las secciones de apertura de las
   páginas interiores (Servicios, Nosotros): son solo un h1 + una
   línea, y quedaban como un vacío blanco sin nada que mirar antes de
   que arrancara el contenido real. Mismo icono real de A360 que ya
   lleva el héroe de portada, aquí fijo (sin seguir al ratón — aquí es
   textura de fondo, no el protagonista) y más discreto. */
.mk-marca-agua {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mk-marca-agua img {
  position: absolute;
  top: 50%;
  right: calc(clamp(280px, 40vw, 560px) / -8);
  width: clamp(280px, 40vw, 560px);
  aspect-ratio: 1;
  margin-top: calc(clamp(280px, 40vw, 560px) / -2);
  opacity: .07;
}
/* Igual que en el héroe: el fondo pinta en una capa temprana, así que
   sus hermanos necesitan su propio position:relative para no quedar
   tapados. :has() localiza cualquier sección que lleve la marca de
   agua, sin necesidad de una clase nueva por página. */
body.marketing main > section:has(> .mk-marca-agua) > *:not(.mk-marca-agua) {
  position: relative;
  z-index: 1;
}

/* Fondo azul oscuro: el texto va en crema, no en tinta (si no, no se lee) */
body.marketing .marketing-hero__titulo {
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: var(--display);
  line-height: .95;
  letter-spacing: -.06em;
  color: var(--mk-crema);
  max-width: 16ch;
}
body.marketing .marketing-hero__linea {
  margin-top: var(--e-3);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mk-crema);
  opacity: .9;
  max-width: 46ch;
  min-height: 1.5em;
}

.marketing-hero__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--mk-crema);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: mk-parpadeo 1s step-end infinite;
}
@keyframes mk-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.marketing-hero__pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.pildora-mk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mk-crema);
  color: var(--mk-tinta);
  border: 1px solid transparent;
  border-radius: var(--r-pildora);
  padding: 9px 18px;
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: var(--menor);
  white-space: nowrap;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
  /* Aparecen con una pequeña entrada, no de golpe con el resto del
     héroe: igual que el resto del sitio, un solo momento orquestado,
     no una animación por elemento. */
  opacity: 0;
  transform: translateY(8px);
  animation: mk-entrada-pildora .4s var(--curva-reveal) forwards;
  animation-delay: .4s;
}
@keyframes mk-entrada-pildora { to { opacity: 1; transform: translateY(0); } }
/* Naranja de marca al pasar el ratón, no el gris oscuro de antes: es
   el mismo color del único CTA fuerte de la web, así que el gesto de
   "esto es interactivo" es siempre el mismo naranja en todas partes. */
.pildora-mk:hover, .pildora-mk:focus-visible { background: var(--mk-coral); color: var(--mk-blanco); }
.pildora-mk--contorno {
  background: transparent;
  color: var(--mk-crema);
  border-color: rgba(243, 238, 231, .5); /* Linen a media opacidad, no un color aparte */
}
.pildora-mk--contorno:hover, .pildora-mk--contorno:focus-visible { background: var(--mk-crema); color: var(--mk-tinta); border-color: var(--mk-crema); }

/* ---------- Los cinco servicios: tarjetas blancas de 50px sobre crema ---------- */

.servicios-marketing {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .servicios-marketing { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .servicios-marketing { grid-template-columns: repeat(3, 1fr); } }

.servicio-panel-mk {
  background: var(--mk-blanco);
  border-radius: var(--r-panel);
  padding: 21px;
  border: 1px solid transparent;
  position: relative;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-hover) ease;
}
/* Cada tarjeta se tiñe al hover con su propio color de índice — el
   mismo que su numeral, no un coral genérico igual en las cinco — con
   transparencia (rgba, no un tono nuevo) para que el texto siga
   leyéndose encima. :focus-within tiñe igual desde teclado o táctil,
   pero SIN el zoom: el zoom (más abajo) solo entra con @media
   (hover: hover), porque agrandar un 30% una tarjeta dentro del
   carrusel de scroll horizontal de móvil, al tocarla, quedaría raro. */
.servicio-panel-mk:nth-child(1):hover, .servicio-panel-mk:nth-child(1):focus-within {
  background: rgba(var(--mk-turquesa-rgb), .18);
  border-color: var(--mk-turquesa);
}
.servicio-panel-mk:nth-child(2):hover, .servicio-panel-mk:nth-child(2):focus-within {
  background: rgba(var(--mk-verde-lima-rgb), .18);
  border-color: var(--mk-verde-lima);
}
.servicio-panel-mk:nth-child(3):hover, .servicio-panel-mk:nth-child(3):focus-within {
  background: rgba(var(--mk-verde-mar-rgb), .18);
  border-color: var(--mk-verde-mar);
}
.servicio-panel-mk:nth-child(4):hover, .servicio-panel-mk:nth-child(4):focus-within {
  background: rgba(var(--mk-violeta-rgb), .18);
  border-color: var(--mk-violeta);
}
.servicio-panel-mk:nth-child(5):hover, .servicio-panel-mk:nth-child(5):focus-within {
  background: rgba(var(--mk-dorado-rgb), .18);
  border-color: var(--mk-dorado);
}
@media (hover: hover) and (pointer: fine) {
  .servicio-panel-mk:hover { transform: scale(1.2); z-index: 5; }
}
.servicio-panel-mk__numero {
  display: block;
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: var(--menor);
  margin-bottom: var(--e-2);
}
/* Un color complementario del manual por posición — el mismo orden que
   "Cómo enfocamos" más abajo — en vez de los cinco números en el mismo
   gris apagado. Con solo 5 servicios no hace falta un selector :nth-
   child(n+6): la lista siempre para en el quinto. */
.servicio-panel-mk:nth-child(1) .servicio-panel-mk__numero { color: var(--mk-turquesa); }
.servicio-panel-mk:nth-child(2) .servicio-panel-mk__numero { color: var(--mk-verde-lima); }
.servicio-panel-mk:nth-child(3) .servicio-panel-mk__numero { color: var(--mk-verde-mar); }
.servicio-panel-mk:nth-child(4) .servicio-panel-mk__numero { color: var(--mk-violeta); }
.servicio-panel-mk:nth-child(5) .servicio-panel-mk__numero { color: var(--mk-dorado); }
.servicio-panel-mk h3 { color: var(--mk-coral); margin-bottom: 8px; }
.servicio-panel-mk .boton-mk-coral { margin-top: var(--e-3); }

/* ---------- Nuestro trabajo: escaparate visual de las piezas tipo ---------- */

.trabajo-mk {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .trabajo-mk { grid-template-columns: repeat(3, 1fr); } }
.trabajo-mk__pieza {
  /* Sin esto, un ítem de grid con aspect-ratio no se encoge por debajo
     de su ancho de contenido: la columna con la pieza cuadrada (1:1)
     queda más estrecha que las de 5:4 y esas se salen de su columna
     en vez de repartirse en tres partes iguales — de ahí el pequeño
     desbordamiento horizontal que había en escritorio (invisible,
     absorbido por el overflow-x:hidden del body, pero real). */
  min-width: 0;
}
.trabajo-mk__pieza .placeholder-img {
  border-radius: var(--mk-r-imagen);
  background: var(--mk-blanco) !important;
  border-color: var(--mk-gris);
  transition: border-color var(--dur-hover) ease;
}
.trabajo-mk__pieza:hover .placeholder-img,
.trabajo-mk__pieza:focus-within .placeholder-img { border-color: var(--mk-coral); }

/* En móvil, cinco tarjetas de servicio (o tres piezas de trabajo) en
   columna nunca caben en una pantalla — por mucho que se apriete el
   espaciado, es más contenido del que entra en 100dvh, y esa sección
   se queda sin la animación de apilado (ver iniciarSeccionesApiladas
   en app.js). Se resuelve igual que MindMarket resuelve sus propios
   escaparates: carrusel horizontal con scroll-snap, una tarjeta por
   pantalla y el borde de la siguiente asomando para invitar a deslizar.
   Así la sección entera mide una tarjeta de alto, no cinco. */
@media (max-width: 767px) {
  .servicios-marketing,
  .trabajo-mk {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--canal-movil) * -1);
    padding-inline: var(--canal-movil);
    padding-bottom: var(--e-2);
    scrollbar-width: none;
  }
  .servicios-marketing::-webkit-scrollbar,
  .trabajo-mk::-webkit-scrollbar { display: none; }
  .servicios-marketing > .servicio-panel-mk,
  .trabajo-mk > .trabajo-mk__pieza {
    scroll-snap-align: start;
    flex: 0 0 82%;
    max-width: 340px;
  }
}

/* ---------- Bloque de enfoque / proceso ---------- */

.enfoque-mk {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .enfoque-mk { grid-template-columns: repeat(4, 1fr); } }
.enfoque-mk__item__numero {
  display: block;
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: var(--titulo-1);
  line-height: 1;
  margin-bottom: var(--e-2);
}
/* Mismo orden de color que las tarjetas de "Servicios": el paso 01
   siempre es turquesa, el 02 siempre verde lima, etc. — un numeral en
   este sitio siempre significa el mismo color, no una elección suelta
   por sección. */
.enfoque-mk__item:nth-child(1) .enfoque-mk__item__numero { color: var(--mk-turquesa); }
.enfoque-mk__item:nth-child(2) .enfoque-mk__item__numero { color: var(--mk-verde-lima); }
.enfoque-mk__item:nth-child(3) .enfoque-mk__item__numero { color: var(--mk-verde-mar); }
.enfoque-mk__item:nth-child(4) .enfoque-mk__item__numero { color: var(--mk-violeta); }
.enfoque-mk__item h3 { color: var(--mk-tinta); font-size: var(--titulo-3); margin-bottom: 6px; }

/* ---------- Preguntas frecuentes: acordeón, una columna editorial ---------- */

/* Antes era un título y una lista debajo, sin más — mucho aire vacío a
   los lados en pantallas anchas. Dos columnas: a la izquierda el
   titular, una línea de contexto y una salida directa para quien no
   encuentre su pregunta; a la derecha el acordeón. */
.faq-mk-grid {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}
@media (min-width: 900px) {
  .faq-mk-grid { grid-template-columns: .85fr 1.15fr; gap: var(--e-6); }
}
.pildora-mk-oscura {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--mk-tinta);
  color: var(--mk-crema);
  border-radius: var(--r-pildora);
  padding: 11px 20px 11px 24px;
  font-family: var(--f-cuerpo);
  font-weight: 500;
  font-size: var(--menor);
  transition: background-color var(--dur-hover) ease;
}
.pildora-mk-oscura:hover, .pildora-mk-oscura:focus-visible { background: var(--mk-coral); }
.pildora-mk-oscura__punto {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mk-coral);
  flex-shrink: 0;
}

.faq-mk .acordeon__item { border-top-color: var(--mk-niebla); }
.faq-mk .acordeon__item:last-child { border-bottom-color: var(--mk-niebla); }
.faq-mk .acordeon__pregunta {
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: var(--titulo-3);
  color: var(--mk-tinta);
}
.faq-mk .acordeon__icono::before,
.faq-mk .acordeon__icono::after { background: var(--mk-coral); }
/* A los 30px de --titulo-3, una pregunta larga se parte en 2-3 líneas y
   las cinco preguntas juntas (aún cerradas, sin contar la respuesta) ya
   no caben en una pantalla de móvil. Un tamaño más discreto aquí — la
   pregunta no necesita ser un titular — es lo que le devuelve la
   animación de apilado a esta sección. */
@media (max-width: 767px) {
  .faq-mk .acordeon__pregunta { font-size: 19px; line-height: 1.3; }
}
.faq-mk .acordeon__respuesta__interior {
  font-family: var(--f-cuerpo);
  color: var(--mk-gris);
  font-size: 18px;
  max-width: 62ch;
}

/* ---------- Cierre: banda oscura de una sola nota, único uso de Staatliches ---------- */

/* Bug real encontrado en escritorio: la regla genérica de abajo
   (body.marketing main > section) tiene MÁS especificidad que un
   ".cierre-marketing" suelto (2 elementos gana a 0 cuando las clases
   empatan a una), así que le ganaba la partida al fondo oscuro, al
   sticky y al min-height:100dvh — el cierre se quedaba con fondo
   crema, texto crema (invisible sobre crema) y estirado a pantalla
   completa. Solo se veía el botón porque ese sí tiene su propio color.
   Con el prefijo body.marketing (dos clases) se gana siempre, y es
   siempre así — no solo en móvil — es corto a propósito. */
/* Mismo color exacto que el footer (--mk-azul-oscuro), no el gris de
   --mk-tinta ni un degradado: son dos elementos independientes (el
   footer ni siquiera es hijo de <main>), y con un degradado cada uno
   recalcula su propio 0%-100% sobre SU alto de caja — dos alturas
   distintas, así que el tono exacto en el borde de una nunca cuadra
   del todo con el de la otra, por poco que se note. Un color PLANO
   idéntico no tiene ese problema: no depende de la altura, así que el
   borde entre las dos cajas es matemáticamente el mismo píxel de
   color a ambos lados — de verdad una sola pieza, no una aproximación. */
body.marketing .cierre-marketing {
  position: relative;
  min-height: 0;
  background: var(--mk-azul-oscuro);
  color: var(--mk-crema);
  text-align: center;
  padding-block: var(--e-8);
}
body.marketing .cierre-marketing__previa {
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.3;
  color: var(--mk-crema);
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--e-3);
}
body.marketing .cierre-marketing__cartel {
  font-family: var(--f-cartel);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(32px, 6vw, 72px);
  letter-spacing: .01em;
  line-height: 1;
  color: var(--mk-crema);
  max-width: 20ch;
  margin-inline: auto;
}
body.marketing .cierre-marketing__linea {
  font-family: var(--f-cuerpo);
  font-size: 18px;
  color: var(--mk-crema);
  opacity: .85;
  max-width: 46ch;
  margin: var(--e-3) auto 0;
}
.cierre-marketing .boton-mk-coral { margin-top: var(--e-4); }

/* ---------- Servicios (página): tarjetas blancas alternando con arena ---------- */

.servicio-bloque-mk {
  padding-block: var(--e-6);
}
@media (min-width: 1024px) { .servicio-bloque-mk { padding-block: var(--e-7); } }
/* Cada bloque es su propia "hoja" opaca — nunca transparente, o se
   vería el bloque anterior por debajo durante la subida. */
.servicio-bloque-mk:nth-of-type(odd) { background: var(--mk-crema); }
.servicio-bloque-mk:nth-of-type(even) { background: var(--mk-arena); }
.servicio-bloque-mk__interior {
  display: grid;
  gap: var(--e-4);
  align-items: start;
}
@media (min-width: 900px) { .servicio-bloque-mk__interior { grid-template-columns: .5fr 1fr; gap: var(--e-6); } }
.servicio-bloque-mk__numero {
  font-family: var(--f-titulos);
  font-weight: 500;
  font-size: var(--titulo-1);
}
/* Mismo orden de color que los numerales de inicio (turquesa, verde
   lima, verde mar, violeta, dorado): un 01 siempre es el mismo color
   en toda la web, aquí en su versión a tamaño completo. */
.servicio-bloque-mk:nth-of-type(1) .servicio-bloque-mk__numero { color: var(--mk-turquesa); }
.servicio-bloque-mk:nth-of-type(2) .servicio-bloque-mk__numero { color: var(--mk-verde-lima); }
.servicio-bloque-mk:nth-of-type(3) .servicio-bloque-mk__numero { color: var(--mk-verde-mar); }
.servicio-bloque-mk:nth-of-type(4) .servicio-bloque-mk__numero { color: var(--mk-violeta); }
.servicio-bloque-mk:nth-of-type(5) .servicio-bloque-mk__numero { color: var(--mk-dorado); }
.servicio-bloque-mk__lista {
  margin-top: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 56ch;
}
.servicio-bloque-mk__lista li {
  padding-left: var(--e-3);
  position: relative;
  font-size: 18px;
}
.servicio-bloque-mk__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mk-coral);
}

/* ---------- Nosotros ---------- */

.nosotros-mk-grid {
  display: grid;
  gap: var(--e-5);
}
@media (min-width: 900px) { .nosotros-mk-grid { grid-template-columns: 1fr 1fr; } }
.nosotros-mk-forma { position: relative; }
.nosotros-mk-forma__rect {
  position: absolute;
  inset-block-start: -20px;
  inset-inline-end: -20px;
  width: 55%;
  height: 45%;
  background: var(--mk-acento);
  border-radius: var(--mk-r-imagen);
  transform: none;
  z-index: 0;
}

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

.contacto-grid-mk {
  display: grid;
  gap: var(--e-5);
}
.contacto-grid-mk > * { min-width: 0; }
@media (min-width: 900px) { .contacto-grid-mk { grid-template-columns: 1.1fr .9fr; gap: var(--e-6); } }
.contacto-panel-mk {
  background: var(--mk-arena);
  color: var(--mk-tinta);
  border-radius: var(--r-panel);
  padding: 21px;
}
.contacto-panel-mk h2, .contacto-panel-mk h3 { color: var(--mk-tinta); }
.contacto-panel-mk a { text-decoration: none; border-bottom: 1px solid var(--mk-gris); }

/* Campos de formulario, en Marketing, con el radio y tono MindMarket */
body.marketing .campo input,
body.marketing .campo select,
body.marketing .campo textarea {
  border-color: var(--mk-niebla);
  border-radius: var(--r-medio);
  background: var(--mk-blanco);
  color: var(--mk-tinta);
}
body.marketing .campo input:focus-visible,
body.marketing .campo select:focus-visible,
body.marketing .campo textarea:focus-visible { border-color: var(--mk-azul); }
body.marketing .campo label { color: var(--mk-tinta); }

/* Placeholders de imagen: radio grande, superficie arena */
body.marketing .placeholder-img {
  border-radius: var(--mk-r-imagen);
  border: 1px dashed var(--mk-gris);
  color: var(--mk-tinta);
  background: var(--mk-arena) !important;
}

/* ---------- Footer: Dark Blue plano (Footer Accent Block) ----------
   Ya no es la banda amarilla del reskin MindMarket — el manual de A360 no
   tiene un amarillo institucional. Mismo Dark Blue plano que el cierre
   "Enviar consulta" justo antes (ver más arriba el porqué de plano y no
   degradado): así se leen como una sola pieza continua, sin costura. */
body.marketing .pie {
  background: var(--mk-azul-oscuro) !important;
  color: var(--mk-crema);
  overflow: hidden;
}
/* La esquina redondeada del footer no cubre nada (el cierre no es
   sticky: no hay "hoja" debajo que tapar) — recorta su propia caja y
   deja ver lo que hay detrás en esa esquina, que sin este ajuste es el
   blanco de la página, no el cierre. Aunque cierre y footer sean dos
   elementos distintos (el footer ni siquiera es hijo de <main>), al
   llevar el mismo degradado y solaparse exactamente lo que mide el
   radio, ese hueco de la esquina muestra el mismo fondo del cierre
   asomando por debajo — se leen como una sola pieza continua, no dos
   bloques oscuros con una costura blanca entre medias. */
body.marketing main:has(> .cierre-marketing:last-child) + .pie {
  margin-top: -50px;
  padding-top: 50px;
}
body.marketing .pie h3 { color: var(--mk-blanco); }
body.marketing .pie a, body.marketing .pie address { color: var(--mk-crema); opacity: 1; }
body.marketing .pie a { transition: opacity var(--dur-hover) ease; }
body.marketing .pie__nav a:hover, body.marketing .pie__nav a:focus-visible,
body.marketing .pie address a:hover, body.marketing .pie address a:focus-visible { opacity: .65; }
body.marketing .pie__redes a { border-color: var(--mk-crema); transition: background-color var(--dur-hover) ease; }
body.marketing .pie__redes a:hover, body.marketing .pie__redes a:focus-visible { background: var(--mk-crema); }
body.marketing .pie__redes a:hover svg path, body.marketing .pie__redes a:focus-visible svg path { fill: var(--mk-azul-oscuro) !important; }
body.marketing .pie__redes svg path { fill: var(--mk-crema) !important; transition: fill var(--dur-hover) ease; }
body.marketing .pie__legal { border-top-color: rgba(243, 238, 231, .2); opacity: .85; }

/* La esquina redondeada de arriba estaba ahí quieta, sin más — la misma
   marca de agua del logo que ya llevan otras secciones, aquí en su
   versión blanca (el fondo ya es el degradado oscuro Full Black > Dark
   Blue, no el amarillo claro de antes — la versión azul del logo se
   perdería contra un fondo casi tan oscuro como ella misma), más grande
   y asomando por la derecha. Y el footer entra con el mismo gesto que
   cualquier otra "hoja" del sitio (aparece al llegar, no está ya puesto
   de golpe).

   Sin envoltorio propio: el footer no tiene una altura fija (crece con
   su contenido), y un hijo position:absolute con inset:0 dentro de un
   padre de altura automática colapsa a 0 — el % de "bottom" no tiene
   de qué ser porcentaje. La imagen cuelga directamente de .pie (que sí
   es el position:relative + overflow:hidden que la recorta) con
   desplazamientos en píxeles, no en %, así no depende de ninguna
   altura para colocarse. */
body.marketing .pie__marca-agua {
  position: absolute;
  bottom: -80px;
  right: -40px;
  z-index: 0;
  width: clamp(260px, 30vw, 480px);
  aspect-ratio: 1;
  opacity: .14;
  pointer-events: none;
}
body.marketing .pie > *:not(.pie__marca-agua) { position: relative; z-index: 1; }

/* La marca de agua respira despacio: un pulso muy sutil de SOLO
   opacidad, para que esa esquina no se quede completamente inerte
   aunque el usuario no esté haciendo scroll. Solo opacidad, nunca
   transform/escala: esta imagen vive recortada por el border-radius +
   overflow:hidden de .pie, y animar su tamaño ahí dentro obligaba al
   navegador a recalcular el recorte redondeado en cada fotograma —
   eso es justo lo que se veía como esas líneas de puntos parpadeando
   en la curvatura (un artefacto real de repintado, no cosmético) y
   consumía CPU/GPU de fondo sin necesidad. Opacidad sola no recalcula
   ningún recorte, así que el mismo gesto de vida sin ese coste. */
@media (prefers-reduced-motion: no-preference) {
  body.marketing .pie__marca-agua {
    animation: pie-marca-agua-latido 7s ease-in-out infinite;
  }
}
@keyframes pie-marca-agua-latido {
  0%, 100% { opacity: .14; }
  50% { opacity: .22; }
}

/* Todas las demás "hojas" del sitio se cubren unas a otras al hacer
   scroll (sticky + border-radius, ver más arriba) — la curva de cada
   una se percibe como un gesto, no como algo que ya estaba puesto.
   El footer no puede jugar a eso: es la última hoja y no puede quedarse
   sticky (no hay nada después que lo cubra), así que su curvatura
   nacía ya completa y quieta, sin ese mismo gesto de entrada.
   Aquí se lo damos por su cuenta, con el mismo mecanismo .reveal/
   .en-vista que usa el resto del sitio (IntersectionObserver + transición,
   ver base.css): nace recta y se despliega a su curva final justo cuando
   el footer entra en pantalla, en vez de estar ya puesta de golpe. */
body.marketing .pie.reveal {
  border-radius: 0 0 0 0;
  transition: opacity var(--dur-reveal) var(--curva-reveal),
              transform var(--dur-reveal) var(--curva-reveal),
              border-radius var(--dur-reveal) var(--curva-reveal);
}
body.marketing .pie.reveal.en-vista {
  border-radius: 50px 50px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  body.marketing .pie.reveal { border-radius: 50px 50px 0 0; }
}