/* ==========================================
   1. DECLARACIÓN DE FUENTES (@font-face)
   ========================================== */

/* --- SATOSHI (Solo Títulos) --- */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

/* --- MANROPE (Textos y UI) --- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* =========================
     COLORES MKM (PALETA OFICIAL)
  ========================= */
  /* 1. Primario (Marca) */
  --mkm-primary-500: #084D6E; /* Azul petróleo corporativo */
  --mkm-primary-300: #4F6D7A; /* Azul pizarra (soporte) */
  --mkm-primary-900: #102633; /* Gris petróleo (fondos premium) */

  /* 2. Secundarios y Acento */
  --mkm-secondary-500: #2A9D8F; /* Turquesa profundo (digital / interactivo) */
  --mkm-tertiary-300: #8ECAE6;  /* Azul cielo tenue */
  --mkm-accent-500: #E85A25;    /* Naranja (CTA principal) */
  --mkm-accent-700: #b94705;
  --mkm-accent-soft: rgba(232, 90, 37, 0.12);
  --mkm-secondary-500: #2A9D8F; /* Turquesa profundo (digital / interactivo) */
  --mkm-secondary-700: #1D6B62; /* Turquesa oscurecido (para texto hover accesible) */

  /* 3. Neutros (Estructura) */
  --mkm-warm-50: #F6F1EA;  /* Marfil (lienzo cálido) */
  --mkm-warm-100: #EBE5D9; /* Arena/taupe (Propuesta para el PENDIENTE) */
  --mkm-cool-50: #F0F4F8;  /* Plata suave (lienzo frío principal web) */
  --mkm-cool-100: #D6DEE6; /* Gris claro (bordes) */
  --mkm-cool-600: #8A8A8A; /* Gris técnico (deshabilitados) */

  /* 4. Textos */
  --mkm-text-main: #1C2B33;    /* Ink 900 (párrafos, máxima legibilidad) */
  --mkm-text-muted: #4F6D7A;   /* Ink 700 (metadatos) */
  --mkm-text-invert: #F0F4F8;  /* Texto sobre fondos oscuros */

  
  --mkm-accent-700: #b94705;
  --mkm-accent-soft: rgba(232, 90, 37, 0.12);


  /* =========================
     MAPPING DE SUPERFICIES Y UI
  ========================= */
  --surface-bg: var(--mkm-cool-50);     /* Fondo principal analítico */
  --surface-card: #FFFFFF;              /* Tarjetas blancas puras para contraste */
  --surface-dark-1: var(--mkm-primary-900); /* Bloques oscuros premium */
  --surface-dark-2: var(--mkm-primary-500);

  --text-base: var(--mkm-text-main);
  --border-base: var(--mkm-cool-100);

  /* =========================
     BORDES Y RADIOS
  ========================= */
  --border-1: 1px;
  --radius-sm: 8px;   /* Ligeramente reducidos para un look más corporativo B2B */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* =========================
     TIPOGRAFÍAS
  ========================= */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-display: "Satoshi", system-ui, sans-serif;

  /* Tamaños (responsive con clamp) */
  --fs-body: clamp(16px, 1.1vw, 18px);
  --fs-small: 14px;

  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: clamp(20px, 2vw, 28px);

  /* Tipografía específica del HERO (derivada del sistema) */
  --fs-hero-h1: clamp(26px, 2.0vw, 40px);
  --fs-hero-h2: clamp(18px, 1.35vw, 22px);

  /* Interlineado (Adaptado para alta legibilidad de reportes) */
  --lh-body: 1.65;
  --lh-hero-h2: 1.35;   /* más cómodo para subtítulo */
  --lh-headings: 1.15;
  --lh-hero-h1: 1.08;

  /* Pesos tipográficos MKM */
  --fw-light: 300;   /* Manrope (Opcional) */
  --fw-regular: 400; /* Manrope base */
  --fw-medium: 500;  /* Manrope UI */
  --fw-bold: 700;    /* Satoshi/Manrope */
  --fw-black: 900;   /* Satoshi (H1) */

  /* Tracking */
  --track-h: -0.02em;  /* Satoshi funciona mejor con tracking ligeramente negativo en H1/H2 */
  --track-ui: 0.02em;

  /* =========================
     ESPACIADO Y LAYOUT
  ========================= */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --flow-default: 1.2em;              /* separación base entre elementos de texto */
  --flow-intra: var(--space-6);        /* separación entre bloques dentro de una sección */
  --flow-section: var(--gap-section);    /* separación entre secciones */


  
  --container-max: 1280px; /* Estándar óptimo de lectura */
  --gutter: clamp(16px, 4vw, 48px);
  --grid-columns: 12;
  --grid-gap: clamp(16px, 2vw, 32px);
  --text-max: 65ch;
  --text-max-wide: 92ch;
  --text-max-rewide: 115ch;
  --full: 100vw;

  /* LA VARIABLE MAESTRA DE RITMO VERTICAL */
  /* Define aquí cuánto aire quieres entre secciones estándar (ej. 100px en desktop) */
  --gap-section: clamp(32px, 3vw, 48px);

  /* =========================
     COMPONENTES
  ========================= */
  --header-h: 72px;
  --cabecera-offset: var(--header-h);
  --btn-h: 48px;
  --btn-radius: var(--radius-sm);
  --icon: 24px; /* Ajustado al estándar de Manrope */
  

  /* =========================
     TRANSICIONES
  ========================= */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;

  /* =========================
     SOMBRAS (Elevación limpia)
  ========================= */
  --shadow-rgb: 28, 43, 51; /* Basado en tu Ink 900 para que la sombra no sea gris sucia */
  --shadow-sm: 0 4px 12px rgb(var(--shadow-rgb) / 0.08);
  --shadow-md: 0 8px 24px rgb(var(--shadow-rgb) / 0.12);
  --shadow-lg: 0 16px 48px rgb(var(--shadow-rgb) / 0.16);

  --card-border: 0 0 0 1px var(--mkm-cool-100);
  --card-shadow: var(--card-border), var(--shadow-sm);

  /* =========================
     CAPAS (z-index)
  ========================= */
  --z-base: 1;
  --z-header: 2010;
  --z-dropdown: 2020;
  --z-overlay: 2000;
  --z-modal: 2100;
  --z-toast: 3000;

  /* =========================
     ACCESIBILIDAD Y FORMULARIOS
  ========================= */
  --focus-alpha: 0.35;
  /* Usamos el Turquesa (Secondary 500) para interacciones digitales */
  --focus-ring: 0 0 0 3px rgba(42, 157, 143, var(--focus-alpha));
  --focus-ring-offset: 2px;
  --focus-ring-inset: 0 0 0 1px rgba(42, 157, 143, var(--focus-alpha));

  --input-h: 48px;
  --input-radius: var(--radius-md);
  
  --input-bg: #FFFFFF;
  --input-bg-hover: var(--mkm-cool-50);
  --input-border: var(--mkm-cool-100);
  --input-border-hover: var(--mkm-primary-300);

  --placeholder: var(--mkm-cool-600);
  
  /* Sistema UI MKM */
  --error: #D64545;
  --success: #2E7D32;
  --warning: #F2A900;
  --info: #2A9D8F;
  --error-bg: rgba(214, 69, 69, 0.08);

  /* =========================
     OPACIDADES
  ========================= */
  --opacity-1: 0.05;
  --opacity-2: 0.10;
  --opacity-3: 0.20;
  --opacity-4: 0.60;
  --backdrop: rgba(16, 38, 51, 0.7); /* Basado en Primary 900 para oscurecer modales */

  /* =========================
     GRADIENTES
  ========================= */
  --grad-digital: linear-gradient(
    90deg,
    rgba(42,157,143,0) 0%,
    rgba(42,157,143,0.35) 50%,
    rgba(42,157,143,0) 100%
  );

  /* =========================
     PROPORCIONES Y EFECTOS
  ========================= */
  --ratio-video: 16 / 9;
  --ratio-card: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-portrait: 3 / 4;
  --ratio-card-new: 5 / 4;

  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(16px);
  --glass-bg: rgba(255, 255, 255, 0.85); /* Glass claro para el tema base */
  --glass-bg-dark: rgba(16, 38, 51, 0.85); /* Glass oscuro para fondos premium */

  /* =========================
     INTERACCIONES Y ANIMACIÓN
  ========================= */
  --pushed: scale(0.97);
  --hover-lift: translateY(-3px);
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================
   SOPORTE AVANZADO DE COLOR (OKLCH)
   ========================================== */
@supports (color: oklch(0 0 0)){
  :root{
    /* Sombras precisas usando el hue de tu Azul Petróleo */
    --shadow-oklch: 247deg;
    --shadow-sm: 0 4px 12px oklch(25% 0.05 var(--shadow-oklch) / 0.08);
    --shadow-md: 0 8px 24px oklch(25% 0.05 var(--shadow-oklch) / 0.12);
    --shadow-lg: 0 16px 48px oklch(25% 0.05 var(--shadow-oklch) / 0.16);

    /* Turquesa Profundo (Secondary 500) en OKLCH */
    --mkm-turquesa-oklch: 0.62 0.12 185deg;

    --grad-digital: linear-gradient(
      90deg,
      oklch(var(--mkm-turquesa-oklch) / 0) 0%,
      oklch(var(--mkm-turquesa-oklch) / 0.35) 50%,
      oklch(var(--mkm-turquesa-oklch) / 0) 100%
    );

    --focus-ring: 0 0 0 3px oklch(var(--mkm-turquesa-oklch) / 0.35);
    --focus-ring-inset: 0 0 0 1px oklch(var(--mkm-turquesa-oklch) / 0.35);
  }
}



/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }

/* Evita que el scroll salte al hacer focus y permite scroll suave */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--cabecera-offset);
}

body {
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* CORRECCIÓN: Usamos las variables definidas en tu :root de MKM */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-base); 
  background-color: var(--surface-bg);
}

main { 
  /* Si la cabecera es fija, esto evita que el contenido quede oculto */
  padding-top: var(--cabecera-offset); 
}

/* Reset de márgenes y listas */
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { 
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Media (Imágenes y Embeds) */
img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
  font-style: italic;
  shape-margin: 0.75rem;
}

/* Formularios y Botones */
button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

button { 
  cursor: pointer; 
  padding: 0; 
}

/* Accesibilidad: Eliminar animaciones para usuarios que lo soliciten */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}


/*.........................Layout y utilidades comunes .........................*/

/* ===== Contenedor + Grid 12 columnas ===== */
/* ===== Layout / Grid ===== */

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

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

/* ===== Secciones con padding vertical consistente ===== */
.section {
  /* 1. Definimos los valores por defecto si no se especifican */
  --pt: var(--gap-section);
  --pb: var(--gap-section);

  /* 2. Asignamos la propiedad REAL usando las variables */
  padding-top: var(--pt);
  padding-bottom: var(--pb);
}


/* =========================================
   UTILIDADES DE FLUJO (VERTICAL RHYTHM)
   ========================================= */
.flow {
  --flow-space: var(--flow-default); /* Valor por defecto para párrafos */
}

.flow > * + * {
  margin-top: var(--flow-space);
}

/* Y tus variantes actuales */
.flow--intra { --flow-space: var(--flow-intra); }
.flow--section { --flow-space: var(--flow-section); }


/* ===== Full-bleed dentro del flujo (para hero/imágenes) ===== */
.full-bleed{
  width: var(--full);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 1. Nivel Macro: Separación entre SECCIONES principales */
.flow-sections {
  /* Usamos tu variable maestra de ritmo vertical */
  --flow-space: var(--gap-section); 
}

/* Selector del "Búho lobotomizado" (* + *) */
.flow-sections > * + * {
  margin-top: var(--flow-space);
}

/* 2. Nivel Micro: Separación dentro de una sección (títulos, párrafos, botones) */
.flow-content {
  /* Usamos tu variable para bloques internos */
  --flow-space: var(--flow-intra); 
}

.flow-content > * + * {
  margin-top: var(--flow-space);
}

/* 3. Ajuste para el elemento justo después del Hero (si es necesario) */
.post-hero-offset {
  margin-top: var(--gap-section);
}

/* ===== Texto con ancho cómodo ===== */
.prose{
  max-width: var(--text-max);
}

/* ===== Utilidades de columnas ocupar x columnas de las 12 ===== */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: 1 / -1; }


/* ===== Centrado rápido ===== */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Pilas verticales con espacio controlado ===== */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4); /* Valor por defecto */
}

/* ===== Alineación de texto ===== */
.text-center { text-align: center; }


/* ===== Accesibilidad para cuando un titulo no queremos que aparezca visualmente pero esté para los lectores de pantalla ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive automático para el Grid */
@media (max-width: 1024px) {
  .span-md-6 { grid-column: span 6; }
  .span-md-12 { grid-column: 1 / -1; }
}

/* responsive típico */
@media (max-width: 767px){
  .grid-12 { 
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Bajamos a 4 columnas en móvil */
  }
  .span-sm-4 { grid-column: 1 / -1; }
}


/* ==========================================
   2. APLICACIÓN EN EL SITIO (Roles Tipográficos)
   ========================================== */

/* Los encabezados usan Satoshi (Display) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--mkm-text-main);
  line-height: var(--lh-headings);
  
}

/* Tamaños y pesos específicos (conectados a tu :root) */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-h);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-h);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

/* Elementos de texto dentro de párrafos */
strong, b {
  font-weight: var(--fw-bold);
}

/* Elementos interactivos */
button, .menu-link {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-ui);
}


/* ==========================================
   COMPONENTES: BOTONES (Base)
========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding-inline: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-decoration: none;
  border-radius: var(--btn-radius);
  transition: all var(--dur-2) var(--ease);
  cursor: pointer;
}

.btn--primary {
  background-color: var(--mkm-accent-500); /* Naranja CTA */
  color: #FFFFFF;
  border: 1px solid transparent;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #D14F20; /* Un naranja ligeramente más oscuro */
  transform: var(--hover-lift);
  box-shadow: var(--shadow-sm);
}

/* ==========================================
   ESTRUCTURA DEL HEADER (Desktop First)
========================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background-color: var(--glass-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--mkm-cool-100);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 1. Logo */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Evita que el logo se aplaste */
}

.header__logo img {
  width: 160px;
  height: auto;
}

/* 2. Navegación Principal */
.header__nav {
  /* Empuja la navegación ligeramente hacia la izquierda para equilibrar el peso del botón CTA */
  flex-grow: 1;
  display: flex;
  justify-content: center; 
}

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.menu-item {
  position: relative; /* Clave para el Dropdown */
}

.menu-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  color: var(--mkm-text-main);
  text-decoration: none;
  transition:
    color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.menu-link:hover,
.menu-link:focus-visible{
  color: var(--mkm-primary-500);
  background-color: rgba(8, 77, 110, 0.05);
  outline: none;
}

.menu-link[aria-current="page"]{
  color: var(--mkm-primary-500);
  background:
    linear-gradient(180deg, rgba(8,77,110,0.07) 0%, rgba(8,77,110,0.03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(8, 77, 110, 0.10),
    0 4px 14px rgba(8, 77, 110, 0.06);
  font-weight: var(--fw-bold);
}

.menu-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--mkm-secondary-500);
}


.has-dropdown.is-current > .menu-link--trigger{
  position: relative;
  color: var(--mkm-primary-500);
  background:
    linear-gradient(180deg, rgba(8,77,110,0.07) 0%, rgba(8,77,110,0.03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(8, 77, 110, 0.10),
    0 4px 14px rgba(8, 77, 110, 0.06);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
}

.has-dropdown.is-current > .menu-link--trigger::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--mkm-secondary-500);
  opacity: 0.9;
}

.icon-chevron {
  transition: transform var(--dur-2) var(--ease);
}

.lang-link {
  cursor: pointer;
}
.lang-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================
   DROPDOWN (Menú "Servicios")
========================================== */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--surface-card);
  border: 1px solid var(--mkm-cool-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  min-width: 650px; /* Ancho suficiente para dos columnas */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--dur-2) var(--ease);
  z-index: var(--z-dropdown);
}

/* Mostrar el Dropdown al hacer Hover en el LI padre */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Girar la flechita al hacer hover */
.has-dropdown:hover .icon-chevron {
  transform: rotate(180deg);
}

.dropdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: var(--space-6);
}

.dropdown__title {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500); /* Azul corporativo */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mkm-cool-100);
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dropdown__link {
  color: var(--mkm-text-main);
  text-decoration: none;
  font-size: 15px;
  transition: color var(--dur-1) var(--ease);
}

.dropdown__link:hover {
  color: var(--mkm-secondary-700);
}

/* "Servicios" como botón, que se vea igual que un link */
.menu-link--trigger{
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Títulos-enlace con flecha */
.dropdown__title-link{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--mkm-primary-500);
  transition: color var(--dur-1) var(--ease);
  outline: none;
}

.dropdown__title-link .icon-arrow{
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  opacity: 0.85;
}

/* Hover/focus del título: más “clicable” */
.dropdown__title-link:hover,
.dropdown__title-link:focus-visible{
  color: var(--mkm-secondary-700);
}

.dropdown__title-link:hover .icon-arrow,
.dropdown__title-link:focus-visible .icon-arrow{
  transform: translateX(2px) translateY(-2px);
  opacity: 1;
}

/* Footer del dropdown con separador */
.dropdown__footer{
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--mkm-cool-100);
  display: flex;
  justify-content: center;
}

/* Botón outline (para no “competir” con Hablemos) */
.btn--outline{
  background: transparent;
  color: var(--mkm-accent-500);
  border: 1px solid color-mix(in srgb, var(--mkm-accent-500) 85%, #ffffff);
}

.btn--outline:hover,
.btn--outline:focus-visible{
  background: color-mix(in srgb, var(--mkm-accent-500) 10%, #ffffff);
  box-shadow: var(--shadow-sm);
  transform: var(--hover-lift);
}

/* Tamaño compacto para el botón del dropdown */
.btn--sm{
  height: 40px;
  padding-inline: 18px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

/* Cierre forzado del dropdown de escritorio */
.has-dropdown.dropdown-force-close .dropdown,
.has-dropdown.dropdown-force-close:hover .dropdown,
.has-dropdown.dropdown-force-close:focus-within .dropdown{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}



/* ==========================================
   3. ACCIONES (Idioma + CTA)
========================================== */
.header__actions {
  display: flex; /* Esto es clave para que queden uno al lado del otro */
  align-items: center;
  gap: var(--space-5); /* Espacio entre el idioma y el botón */
  flex-shrink: 0;
}

/* Contenedor del icono y las letras ES/PY */
.lang-selector {
  display: flex; /* Esto pone el mundito y el texto en la misma línea */
  align-items: center;
  gap: var(--space-2);
  color: var(--mkm-text-muted);
}

.icon-globe {
  color: var(--mkm-primary-300); /* Un azul/gris sutil para el icono */
}

/* Contenedor de las opciones PY | ES */
.lang-selector__options {
  display: flex; /* Esto pone PY, la barra y ES en la misma línea */
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
}

/* Cada opción de idioma (PY o ES) */
.lang-link {
  cursor: pointer;
  color: var(--mkm-text-muted);
  transition: color var(--dur-1) var(--ease);
}

.lang-link:hover {
  color: var(--mkm-secondary-700); /* Turquesa MKM al pasar el ratón */
}

/* El idioma en el que estamos actualmente */
.lang-link.is-active {
  color: var(--mkm-primary-500); /* Azul corporativo fuerte */
  font-weight: var(--fw-bold);
  cursor: default; /* Como ya estamos en este idioma, no hace falta que parezca clicable */
}

/* La barrita vertical separadora */
.lang-separator {
  color: var(--mkm-cool-100); /* Gris clarito para que no estorbe */
  user-select: none; /* Para que el usuario no la seleccione por error con el ratón */
}

/* Ocultar el botón de móvil en Desktop */
.header__toggle {
  display: none;
}

/* =========================================
   CONTROL DE VISIBILIDAD (ESCRITORIO VS MÓVIL)
   ========================================= */
/* Por defecto (Escritorio), ocultamos lo móvil */
.header__mobile, 
.mobile-menu-overlay, 
.mobile-menu-container {
  display: none;
}

@media (max-width: 991px) {

.header {
    background-color: #ffffff; /* Fondo sólido puro */
    z-index: var(--z-modal); /* 2100: La cabecera entera queda por encima del contenedor del menú (2020) */
  }

  /* Ocultamos el menú de escritorio */
  .header__logo, .header__nav, .header__actions {
    display: none;
  }
  
  /* Mostramos elementos móviles */
  .header__mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 0; /* Ajusta según el alto que desees */
  }

  /* --- BOTÓN HAMBURGUESA (CON ANIMACIÓN A CRUZ) --- */
  .hamburger-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: var(--z-modal); /* Siempre encima del menú */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--mkm-primary-500); /* Color de tu marca MKM */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: left center;
  }

  

  /* Animación a X cuando está abierto */
  .hamburger-btn.is-open .hamburger-line--1 { transform: rotate(45deg); }
  .hamburger-btn.is-open .hamburger-line--2 { opacity: 0; }
  .hamburger-btn.is-open .hamburger-line--3 { transform: rotate(-45deg); }


  /* --- OVERLAY OSCURO --- */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset:0;
    
    background: var(--backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: var(--z-overlay);
  }
  .mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* --- CONTENEDOR DEL MENÚ DESLIZANTE --- */
 /* --- CONTENEDOR DEL MENÚ DESLIZANTE --- */
  .mobile-menu-container {
    display: block;
    position: fixed;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    left: -100%; /* CAMBIO 1: Lo escondemos a la izquierda */
    width: 85%;
    max-width: 400px;
     height: calc(100vh - var(--header-h));
    background-color: var(--surface-bg); /* Usamos tu color analítico */
    z-index: var(--z-dropdown); /* Aseguramos que el z-index sea el correcto (2020) */
    transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* CAMBIO 2: Animamos el left */
    overflow: hidden; 
  }
  
  .mobile-menu-container.is-open {
    left: 0; /* CAMBIO 3: Al abrirse, se ancla a la izquierda */
  }

  /* --- PANELES MULTINIVEL --- */
  .mobile-panel {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--surface-bg);
    padding: 24px 20px;
    transform: translateX(100%); /* Ocultos a la derecha por defecto */
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa el alto del container */
  }
  .mobile-panel--active {
    transform: translateX(0); /* El panel activo se muestra */
  }

  .mobile-panel__scroll {
  flex: 1; /* Esto es la clave: ocupa todo el espacio disponible */
  overflow-y: auto;
}

  /* --- ESTILOS DE LISTA Y ENLACES --- */
  .mobile-menu__list {
    list-style: none; padding: 0; margin: 0;
  }
  .mobile-menu__link, .mobile-menu__back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    font-size: 1.1rem;
    color: var(--text-base);
    text-decoration: none;
    background: none; border: none;
    border-bottom: 1px solid #eee;
    text-align: left; cursor: pointer;
  }
  
  .mobile-panel__header {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 15px;
    font-weight: 700;
  }

  /* Enlace del título en paneles móviles */
.mobile-panel__title-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

.mobile-panel__title-link svg {
  stroke: currentColor; /* Asegura que la flecha tome el color primario del texto */
}

  .mobile-menu__back {
    color: #666;
    font-size: 1rem;
    border-bottom: none;
    margin-bottom: 10px;
    justify-content: flex-start;
    gap: 10px;
  }

  /* --- SELECTOR DE IDIOMAS (Abajo centrado) --- */
  #panel-principal {
  padding-bottom: 110px;
}

#panel-principal .mobile-lang-selector {
  position: relative; /* Cambiado de absolute a relative */
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto; /* Empuja hacia abajo si el contenido es corto */
  padding-top: 20px;
  padding-bottom: env(safe-area-inset-bottom); /* Respetar notch/barra de gestos */
  background-color: var(--surface-bg);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 15px;
}
  .lang-box {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border: 2px solid #ccc; border-radius: 8px;
    color: #333; text-decoration: none;
    font-weight: 700; transition: all 0.3s ease;
  }
  .lang-box.is-active {
    border-color: #000; /* Tu color principal */
    background-color: #000;
    color: #fff;
  }

  /* === OVERRIDES JERARQUÍA MENÚ MÓVIL (pegar debajo de tu bloque actual) === */

.mobile-menu__link{
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  color: var(--text-base);
  border-bottom: 1px solid var(--mkm-cool-100);
  padding: 16px 0;
}

.mobile-menu__back{
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: var(--mkm-text-muted); 
  border-bottom: 1px solid var(--mkm-cool-100);
  padding: 14px 0 16px;
  margin-bottom: 14px;
  justify-content: flex-start;
  gap: 10px;
}

/* (opcional) icono del back igual que el texto */
.mobile-menu__back svg{
  stroke: currentColor;
  opacity: 0.75;
}

.mobile-panel__header{
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  margin: 0 0 10px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--mkm-cool-100);
}

/* Categorías (MKM Strategic / MKM Studio) en panel-servicios */
#panel-servicios .mobile-menu__trigger{
  font-weight: var(--fw-bold);
  font-size: 1.06rem;
}

/* Items finales (servicios) un pelín más ligeros */
#panel-strategic .mobile-menu__link,
#panel-studio .mobile-menu__link{
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: var(--mkm-text-main);
}

/* CTA */
.mobile-menu__link.mobile-menu__link--highlight{
  border-bottom: none;

  display: flex;              /* <- clave: ya no es inline */
  width: fit-content;         /* pill ajustado al texto */
  margin: 18px auto 0;        /* <- ahora sí centra */

  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--mkm-accent-500);
  color: var(--mkm-accent-500);
  font-weight: var(--fw-bold);
  justify-content: center;
}


}

/* =========================================
   FOOTER MKM
   ========================================= */
.footer {
  background-color: var(--surface-bg, #f9fafc); /* Un gris/azul muy muy suave si lo tienes en tus variables */
  border-top: 1px solid var(--mkm-cool-100, #eaeaea);
  padding: 60px 0 30px;
  margin-top: auto; /* Útil si tienes el body como flex column */
}

/* Grid principal del footer */
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

/* Columna de la marca (ocupa un poco más en escritorio si hay espacio) */
.footer__col--brand {
  max-width: 300px;
}

.footer__logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer__desc {
  font-size: 0.95rem;
  color: var(--mkm-text-muted, #666);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Títulos de columnas */
.footer__title {
  font-size: 1.05rem;
  font-weight: var(--fw-bold, 700);
  color: var(--mkm-primary-500, #111);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Listas y enlaces */
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  color: var(--mkm-text-main, #444);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer__link:hover {
  color: var(--mkm-accent-500, #ff5722); /* Tu color de acento/naranja */
}

/* En tu archivo styles.css */

.footer__legal-list a {
  /* Usamos el color para 'metadatos' que definiste en el root (#4F6D7A) 
     en lugar del gris genérico #6b7280 */
  color: var(--mkm-text-muted); 
  
  text-decoration: none;
  
  /* Usamos tus variables de animación para que se mueva igual que el resto de la web */
  transition: color var(--dur-2) var(--ease);
}

.footer__legal-list a:hover,
.footer__legal-list a:focus { /* Añadimos focus para que sea accesible con teclado */
  
  /* AQUÍ ESTÁ LA CLAVE: Usamos tu Naranja Corporativo */
  color: var(--mkm-accent-500); 
  
  text-decoration: underline;
}

/* Lista de contacto directo (Email, Teléfono, Ubicación) */
/* =========================================
   ESTILOS DE CONTACTO EN EL FOOTER (NUEVOS/CORREGIDOS)
   ========================================= */

/* Lista principal de contacto */
.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Separación entre bloques de contacto */
}

/* El elemento de lista: ahora es un flex container horizontal */
.footer__contact-item {
  display: flex;
  align-items: center; /* Alinea icono y texto verticalmente al centro */
  gap: 12px; /* Separación entre icono y texto */
}

/* Modificador de los iconos de contacto para que queden mejor */
.social-link--contact {
  flex-shrink: 0; /* Evita que el icono se aplaste si el texto es largo */
}

/* Enlace de contacto específico */
.footer__contact-item .footer__link {
  margin: 0; /* Asegura que no haya márgenes que desalineen */
}

/* Alineación específica para el bloque de dirección */
.footer__link--address {
  display: flex;
  flex-direction: column; /* Apila las líneas de dirección verticalmente a la derecha del icono */
  line-height: 1.4;
  margin-left: 2px; /* Pequeño ajuste visual */
}

/* Pequeño retoque para que el email siga siendo negrita pero alineado */
.footer__contact-item .footer__link--accent {
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

/* Redes Sociales */
.footer__socials {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--mkm-cool-100, #eaeaea);
  color: var(--mkm-primary-500, #111);
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--mkm-accent-500, #ff5722);
  color: #fff;
}

/* Parte Inferior (Legal y Copyright) */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  border-top: 1px solid var(--mkm-cool-100, #eaeaea);
  gap: 15px;
}

.footer__copy {
  font-size: 0.85rem;
  color: var(--mkm-text-muted, #888);
  margin: 0;
}

.footer__contact-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.footer__contact-info {
  cursor: default;
}

.footer__contact-info:hover,
.footer__contact-info:focus,
.footer__contact-info:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   FOOTER BOTTOM (Copyright y Legales)
   ========================================= */

.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  
  /* Usamos tus variables de espaciado (24px aprox) */
  gap: var(--space-5, 24px); 
  padding-top: var(--space-5, 24px);
  
  /* Usamos tu variable de borde gris claro */
  border-top: 1px solid var(--mkm-cool-100, #D6DEE6);
}

.footer__copy {
  margin: 0;
  /* Usamos tu variable de tamaño pequeño */
  font-size: 0.85rem; 
  /* Usamos tu variable de texto secundario (Ink 700) en vez de #666 */
  color: var(--mkm-text-muted, #4F6D7A); 
}

/* Y aseguramos que la lista legal se comporte bien */
.footer__legal-list {
  display: flex;
  gap: var(--space-5, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.footer__legal-list a {
  color: var(--mkm-text-muted, #4F6D7A);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease);
}

.footer__legal-list a:hover {
  color: var(--mkm-accent-500); /* Naranja al pasar el ratón */
  text-decoration: underline;
}

/* Ajuste Responsive para móviles (opcional pero recomendado) */
@media (max-width: 768px) {
  .footer__bottom-inner {
    flex-direction: column-reverse; /* Pone el copy abajo y los legales arriba en móvil */
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
  }
}

/* =========================================
   ESTILO TARJETA (PRIMERA COLUMNA FOOTER)
   ========================================= */

/* Damos estilo de caja independiente a la primera columna */
.footer__col--premium-card {
  background-color: var(--surface-dark-1); /* Tu color Gris petróleo premium */
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  
  /* Flexbox para asegurar que el contenido se distribuya bien si la tarjeta crece */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Modificamos el color del texto solo dentro de esta tarjeta */
.footer__col--premium-card .footer__desc {
  color: var(--mkm-text-invert); /* Texto claro para contraste */
  opacity: 0.9; /* Un poco de transparencia para no ser un blanco 100% puro que canse la vista */
}

/* Ajuste de los iconos sociales dentro de la tarjeta oscura */
.footer__col--premium-card .social-link {
  background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil semitransparente */
  color: var(--mkm-text-invert);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde fino muy premium */
}

.footer__col--premium-card .social-link:hover {
  background-color: var(--mkm-accent-500); /* Hover naranja vibrante */
  color: #fff;
  border-color: var(--mkm-accent-500);
}

/* Base para todos los links del footer */
.footer__link {
  text-decoration: none;
}

/* Hover/focus coherente para todos */
.footer__link:hover,
.footer__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Responsive ajustes para la parte inferior */
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
  }
}

/* Dirección del footer: texto, no enlace */
.footer__address-text {
  cursor: default;
  text-decoration: none;
}

/* Por si tu CSS aplica hover a .footer__link en general */
.footer__address-text:hover,
.footer__address-text:focus,
.footer__address-text:focus-visible {
  text-decoration: none;
  color: inherit;
  background: transparent;
  outline: none;
}

/* Enlaces de contacto (incluye mail y teléfono): mismo comportamiento que .footer__link */
.footer__contact-list .footer__link {
  color: var(--mkm-text-main, #444);
  text-decoration: none;
  transition: color var(--dur-2, 0.3s) var(--ease, ease);
}

.footer__contact-list .footer__link:hover,
.footer__contact-list .footer__link:focus-visible {
  color: var(--mkm-accent-500, #ff5722);
  text-decoration: underline; /* para que no aparezca subrayado por herencia */
}

/* ==========================================
   HOME HERO (imagen izquierda + texto derecha)
   ========================================== */

.home-hero { 
  --pt: var(--gap-section);
  --pb: 0;
}

/* Card contenedor del conjunto (imagen + texto) */
.home-hero__card{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0; /* clave: sin separación entre imagen y panel */
  background: var(--surface-card);
  border: 1px solid var(--mkm-cool-100);
  border-radius: 0;          /* sin redondeo */
  overflow: hidden;          /* recorta la imagen al borde recto */

}

.home-hero__grid{
  gap: 0;           /* o column-gap:0 si solo quieres quitar el hueco vertical */
  align-items: stretch;
}

.home-hero__media,
.home-hero__content{
  border-radius: 0;
}

/* Contenedor de media */
.home-hero__media{
 grid-column: span 7;
  margin: 0;
  aspect-ratio: var(--ratio-video); /* 16:9 */
  background: var(--mkm-cool-100);
}

/* Evita que los items del grid desborden y se monten */
.home-hero__card > * { 
  min-width: 0; 
}

.home-hero__content { 
  overflow: hidden; /* opcional pero muy útil para impedir “pintar” encima */
}

/* En móvil tu recorte es 4:5 */
@media (max-width: 767px){
  .home-hero__media{
    aspect-ratio: var(--ratio-card-new); /* 5:4 */
  }
}

.home-hero__media picture,
.home-hero__media img{
  width: 100%;
  height: 100%;
}

.home-hero__media img{
  object-fit: cover;
  /* La tablet/foco está a la derecha: */
  object-position: 70% 50%;
}

/* Panel de contenido */
.home-hero__content{
  grid-column: span 5;
  background: var(--surface-dark-1);
  color: var(--mkm-text-invert);
  display: flex;
  align-items: center;
  position: relative;
}

/* Sutil “toque digital” */
.home-hero__content::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-digital);
  opacity: 0.28;
  pointer-events: none;
}

/* Inner */
.home-hero__content-inner{
  position: relative;
  padding: clamp(18px, 2.2vw, 34px);
}

/* Títulos dentro del panel oscuro */
.home-hero__title,
.home-hero__subtitle{
  color: var(--mkm-text-invert);
}

/* Ajuste de tamaños para que encaje bien en 3/4 columnas */
.home-hero__title{
  color: var(--mkm-text-invert);
  font-size: var(--fs-hero-h1);
  line-height: var(--lh-hero-h1);
  letter-spacing: var(--track-h);
}

.home-hero__subtitle{
  color: var(--mkm-text-invert);
  font-size: var(--fs-hero-h2);
  line-height: var(--lh-hero-h2);
  font-weight: var(--fw-bold);
  opacity: 0.92;
}

/* Acento MKM en una parte del H2 */
.home-hero__subtitle strong{
  color: var(--mkm-secondary-500);
}

/* ==========================================
   FIX RESPONSIVE: TABLET / LAPTOP PEQUEÑA
   (Aplica desde 768px hasta 1024px)
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  
  /* Aumentamos la especificidad encadenando la clase del componente + la utilidad */
  .home-hero__media.span-md-12, 
  .home-hero__content.span-md-12 {
    grid-column: 1 / -1; /* Forzamos ancho completo */
  }

  /* Opcional: Ajuste visual para que la imagen no sea gigante en vertical */
  .home-hero__media {
    aspect-ratio: 16 / 9; /* Mantenemos formato panorámico en tablet */
    max-height: 500px;    /* Evita que ocupe toda la pantalla de alto */
  }

  /* Opcional: Darle aire al texto ahora que está debajo de la imagen */
  .home-hero__content-inner {
    padding: 48px 24px;
    text-align: center; /* En tablet suele quedar mejor centrado */
  }
}

/* ==========================================
   PATH CARDS (Strategic vs Studio)
   ========================================== */



.path-cards__grid{
  align-items: stretch;
  gap: var(--grid-gap); /* Asegura que usen el gap del grid */
}

/* Tarjeta (link completo) */
.path-card{
  text-decoration: none;
  color: inherit;
  display: block;
  min-width: 0; /* anti-overflow en grid */
  position: relative; /* Necesario para la animación */
}

.path-card__inner{
  height: 100%;
  padding: clamp(24px, 2.5vw, 40px); /* Un poco más de aire interno */
  background: var(--surface-card);
  
  /* Sombra muy suave en reposo */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  /* CAMBIO 1: Borde superior de color (Accent Bar) */
  border-top: 4px solid var(--card-accent, var(--mkm-cool-100)); 
  
  /* Borde sutil en el resto de lados */
  border-right: 1px solid var(--mkm-cool-100);
  border-bottom: 1px solid var(--mkm-cool-100);
  border-left: 1px solid var(--mkm-cool-100);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

/* CAMBIO 2: Definición de colores por tipo de tarjeta */
.path-card--strategic {
  --card-accent: var(--mkm-primary-300);
  --icon-bg: color-mix(in srgb, var(--mkm-primary-300) 8%, #ffffff);
  --icon-color: var(--mkm-primary-500);
  --card-accent-strong: var(--mkm-primary-500);
}

.path-card--studio {
  --card-accent: var(--mkm-secondary-500);
  --icon-bg: color-mix(in srgb, var(--mkm-secondary-500) 8%, #ffffff);
  --icon-color: var(--mkm-secondary-500);
  --card-accent-strong: var(--mkm-secondary-700);
}

/* Icono */
.path-card__icon {
  width: 56px; /* Ligeramente más grande (antes 44px) */
  height: 56px;
  border-radius: 12px; /* Un poco menos redondeado para ser más "tech" */
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
  
  /* Usamos las variables definidas arriba */
  background: var(--icon-bg);
  color: var(--icon-color);
  
  /* Quitamos el borde del icono para que se vea más limpio, 
     ya que tenemos el borde superior de la tarjeta */
  transition: background-color var(--dur-2) var(--ease);
}

.path-card__icon svg {
  width: 28px; /* Icono interno más legible (antes 22px) */
  height: 28px;
  stroke-width: 1.5; /* Línea un poco más fina para elegancia */
}

/* Título */
.path-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  font-size: clamp(22px, 1.8vw, 28px); /* Un pelín más grande para jerarquía */
  line-height: 1.1;
}

/* Descripción */
.path-card__desc {
  color: var(--mkm-text-muted);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

/* CTA */
.path-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  color: var(--mkm-text-main);
  transition: color var(--dur-2) var(--ease);
}

.path-card__arrow {
  width: 20px;
  height: 20px;
  color: var(--card-accent-strong);
  transition:
    transform var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

/* ================== HOVER STATES ================== */

.path-card:hover .path-card__inner,
.path-card:focus-visible .path-card__inner {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.path-card:hover .path-card__title,
.path-card:focus-visible .path-card__title {
  color: var(--card-accent-strong);
  transition: color var(--dur-2) var(--ease);
}

.path-card:hover .path-card__arrow,
.path-card:focus-visible .path-card__arrow {
  transform: translateX(5px);
}

/* Strategic: guiño naranja solo al interactuar */
.path-card--strategic:hover .path-card__arrow,
.path-card--strategic:focus-visible .path-card__arrow {
  color: var(--mkm-accent-500);
}

/* Studio: mantiene su lenguaje propio */
.path-card--studio:hover .path-card__arrow,
.path-card--studio:focus-visible .path-card__arrow {
  color: var(--mkm-secondary-500);
}

.path-card--strategic:hover .path-card__icon,
.path-card--strategic:focus-visible .path-card__icon {
  background: color-mix(in srgb, var(--mkm-primary-300) 15%, #ffffff);
}

.path-card--studio:hover .path-card__icon,
.path-card--studio:focus-visible .path-card__icon {
  background: color-mix(in srgb, var(--mkm-secondary-500) 15%, #ffffff);
}


/* ==========================================
   BLOQUE SÍNTESIS (Manifiesto ancho)
   ========================================== */

.synthesis{
  background-color: var(--mkm-warm-50);
}

/* Layout 2 columnas */
.synthesis__inner {
  max-width: var(--container-max); /* Usando tu estándar 1280px */
  margin-inline: auto;
  display: grid;
  /* Ajuste de columnas para dar más aire */
  grid-template-columns: 1.25fr minmax(260px, 340px);
  gap: var(--space-7); /* Estandarizado a 48px aprox */
  align-items: start;
  
  padding-inline: var(--gutter); /* Margen lateral seguro del sitio */
}

/* Izquierda: sello + contenido, más integrado */
.synthesis__main {
  display: grid;
  grid-template-columns: max-content 1fr; 
  gap: var(--space-5); /* 24px de separación logo-texto */
  align-items: start;
}

/* 4. El Sello: Alineación visual */
.synthesis__seal {
  width: 80px; /* Un pelín más grande para equilibrar el bloque */
  height: auto;
  /* Alineado con la primera línea del párrafo */
  transform: translateY(8px); 
}

/* Derecha */
.synthesis__side{
  padding-left: clamp(14px, 2vw, 24px);
  border-left: 1px solid var(--mkm-cool-100);
}

.synthesis__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* Flujo vertical consistente */
}

/* Textos */
.synthesis__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);      /* Tokenizado */
  line-height: var(--lh-body);    /* Tokenizado (1.65) */
  color: var(--mkm-text-muted);
  max-width: 62ch;
}

.synthesis__text strong {
  color: var(--mkm-text-main);
  font-weight: var(--fw-bold);
}

.synthesis__mission {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  /* Mapeado a tu H2 estándar para consistencia */
  font-size: var(--fs-h2);        
  line-height: var(--lh-headings); /* Tokenizado (1.15) */
  color: var(--mkm-primary-500);
  
  letter-spacing: var(--track-h);
}

/* Columna derecha */
.synthesis__side {
  position: relative;
  padding-left: var(--space-6);   /* 32px */
  border-left: 2px solid var(--mkm-cool-100);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-6); /* Asegura separación si el contenido crece */
}
/* Línea vertical corta (en vez de borde a toda altura) */
.synthesis__side::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 1px;
  height: 140px; /* corta y elegante */
  background: var(--mkm-cool-100);
}


/* Valores */
.synthesis__values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
}

.synthesis__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);     /* 14px estándar */
  text-transform: uppercase;
  /* Nota: 0.18em es muy específico, pero si quieres estandarizar 
     podrías usar var(--track-ui) aunque es más cerrado (0.02em). 
     Lo mantengo manual aquí por estética de "eyebrow", 
     o podrías crear una variable --track-widest: 0.15em */
  letter-spacing: 0.15em; 
  color: var(--mkm-primary-500);
  /* Usamos una de tus opacidades predefinidas o color directo */
  opacity: 0.85; 
}

/* Botón outline institucional / estratégico */
.btn--outline-dark{
  border: 1px solid var(--mkm-primary-300);
  color: var(--mkm-primary-500);
  background: transparent;
  padding-inline: 28px;
  width: fit-content;
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible{
  background-color: color-mix(in srgb, var(--mkm-primary-500) 8%, #ffffff);
  color: var(--mkm-primary-700);
  border-color: var(--mkm-primary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Botón del bloque “Conoce nuestro enfoque” */
.btn--synthesis{
  background: transparent;
  color: var(--mkm-primary-500);
  border: 1px solid var(--mkm-primary-300);
  padding-inline: 26px;
  width: fit-content;
}

.btn--synthesis:hover,
.btn--synthesis:focus-visible{
  background: color-mix(in srgb, var(--mkm-primary-500) 8%, #ffffff);
  color: var(--mkm-primary-700);
  border-color: var(--mkm-primary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Responsive */
@media (max-width: 900px){
  .synthesis__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

  .synthesis__main {
    /* En móvil, apilamos el logo encima del texto */
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-4);
  }

  .synthesis__seal {
    width: 64px; /* Un poco más pequeño en móvil */
    transform: none;
  }

  .synthesis__text{
    margin-inline: auto;
  }

  .synthesis__side {
    border-left: none;
    padding-left: 0;
    align-items: center;
    gap: var(--space-5);
  }

  /* Agregamos un borde superior sutil en móvil para separar las secciones */
  .synthesis__side::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--mkm-cool-100);
    margin-bottom: var(--space-2);
  }

  .synthesis__values{
    align-items: center;
  }

  .btn--outline-dark{
    margin-inline: auto;
  }
}

/* =========================================
   SECCIÓN CLIENTES (Panel Flotante Ajustado)
   ========================================= */

.mkm-clients-section {
  background-color: transparent; 
  width: 100%;
  /* Eliminamos cualquier width conflictivo aquí */
}

/* Este es el contenedor estructural del sitio. 
   Asegúrate de que esta clase exista y tenga estos valores en tu CSS global.
   Si ya la tienes, no hace falta repetirla, pero verifica el 'margin-inline: auto'. */
.mkm-container {
  max-width: var(--container-max); /* 1280px */
  margin-inline: auto;             /* ESTO ES LA CLAVE: Centra el bloque */
  padding-inline: var(--gutter);   
  position: relative;              /* Seguridad para posicionamiento */
}

/* --- EL PANEL (La Tarjeta Madre) --- */
.clients-panel {
  position: relative;
  background-color: var(--surface-card); /* Blanco */
  border-radius: var(--radius-lg);       /* 16px */
  
  /* ESTO SOLUCIONA EL ANCHO: 
     Al estar dentro de .mkm-container, ocupará el 100% de ese contenedor (1280px),
     no el 100% de la pantalla. */
  width: 100%; 
  
  /* Espaciado interno */
  padding: var(--space-6) var(--space-7);
  
  /* Sombra y Borde */
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--mkm-cool-100);
  overflow: hidden; 
}

/* Barra degradada superior */
.clients-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px; 
  background: linear-gradient(
    90deg, 
    var(--mkm-tertiary-300) 0%, 
    var(--mkm-primary-500) 50%, 
    var(--mkm-tertiary-300) 100%
  );
}

/* --- Cabecera dentro del panel --- */
.mkm-clients-header {
  margin-bottom: var(--space-6);
  max-width: var(--text-max-wide);
}

.mkm-clients-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  
  /* CAMBIO DE COLOR: Usamos el Azul Petróleo Corporativo */
  color: var(--mkm-primary-500); 
  
  letter-spacing: var(--track-h);
}

.mkm-clients-header p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* --- Scroller Horizontal --- */
.mkm-logo-scroller {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow-x: auto;
  
  /* Padding vertical para que no se corte la sombra hover de las tarjetas */
  padding-block: var(--space-2) var(--space-4);
  
  /* Ajuste para móviles: permite scroll de borde a borde */
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mkm-logo-scroller::-webkit-scrollbar { display: none; }

/* --- Tarjetas de Logos --- */
.client-card {
  flex: 0 0 auto;
  background-color: var(--mkm-cool-50); /* Fondo gris suave */
  border: 1px solid transparent; 
  border-radius: var(--radius-md);
  
  height: 120px; 
  min-width: 200px;
  padding: var(--space-5);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-shadow: none; 
  transition: all var(--dur-2) var(--ease);
  cursor: pointer;
  scroll-snap-align: start;
}

.client-card:hover {
  background-color: #FFFFFF;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--mkm-primary-300);
}

.client-card img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 60px; 
  object-fit: contain;
  transition: transform 0.3s ease;
}

.client-card:hover img {
  filter: grayscale(0); opacity: 1;
}

/* Ajustes Hunture */
.client-card img.logo-wide {
  max-height: 80px; 
  transform: scale(1.1); 
}
.client-card:hover img.logo-wide {
  transform: scale(1.15) translateY(-2px); 
}

@media (max-width: 768px) {

  .clients-panel {
    padding-bottom: 24px;
    overflow: visible;
  }

  .mkm-logo-scroller-shell {
    position: relative;
    margin-inline: -20px;
  }

  /* Degradado a la derecha para insinuar que hay más contenido */
  .mkm-logo-scroller-shell::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      to right,
      rgba(240, 244, 248, 0),
      rgba(240, 244, 248, 0.96)
    );
  }

  .mkm-logo-scroller {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-inline: 20px;
    padding-bottom: 6px;
    touch-action: pan-x;

    /* quitamos la máscara */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mkm-logo-scroller::-webkit-scrollbar {
    display: none;
  }

  .client-card {
    flex: 0 0 calc(100% - 72px); /* garantiza asomo del siguiente */
    max-width: 300px;
    min-width: 0;
    height: 96px;
    padding: var(--space-4);
    scroll-snap-align: start;
    background-color: var(--mkm-cool-50);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .client-card img {
    max-height: 44px;
    max-width: 88%;
    height: auto;
  }

  .client-card img.logo-wide {
    max-height: 52px;
    max-width: 90%;
    transform: none;
  }
}

@media (min-width: 769px) {
  .scroller-pagination {
    display: none;
  }
}

/* =========================
   HOME | BLOQUE METODOLOGÍA
   ========================= */

.home-method{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(42,157,143,0.14), transparent 60%),
    radial-gradient(700px 380px at 85% 40%, rgba(232,90,37,0.08), transparent 55%),
    linear-gradient(180deg, var(--mkm-primary-500), var(--mkm-primary-900));
  padding-block: clamp(40px, 4vw, 64px);
}

/* “cinta” de energía digital sutil */
.home-method::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: var(--grad-digital);
  transform: rotate(-10deg);
  opacity: 0.25;
  pointer-events:none;
}

.home-method__panel{
  background: rgba(16, 38, 51, 0.78); /* más claro que antes para que respire */
  border: 1px solid rgba(214, 222, 230, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3vw, 40px);
  backdrop-filter: blur(10px);
}

.home-method__head{
  max-width: 70ch;
  margin-bottom: var(--space-6);
}

.home-method__eyebrow{
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(240, 244, 248, 0.75);
  margin: 0 0 var(--space-2);
}

.home-method__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-size: var(--fs-h2);
  color: var(--mkm-text-invert);
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.home-method__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.home-method__copy{
  grid-column: span 7;
  max-width: var(--text-max);
}

.home-method__lead{
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: rgba(240, 244, 248, 0.92);
}

.home-method__text{
  margin: 0 0 var(--space-5);
  line-height: var(--lh-body);
  color: rgba(240, 244, 248, 0.78);
}

.home-method__pillars{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0;
  margin: 0 0 var(--space-6);
  list-style: none;
}

.pillar-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: 0;          /* fuera look de botón */
  border: 0;
  border-radius: 0;
  background: transparent;

  color: rgba(240,244,248,0.88);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.pillar-chip::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42,157,143,0.85);
  box-shadow: 0 0 0 2px rgba(42,157,143,0.18);
}

/* Botón fantasma claro (para fondo oscuro) */
.btn--ghost-light{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(214, 222, 230, 0.28);
  color: var(--mkm-text-invert);
  text-decoration: none;
  font-weight: var(--fw-bold);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.btn--ghost-light:hover{
  transform: var(--hover-lift);
  border-color: rgba(42, 157, 143, 0.65);
  background: rgba(42, 157, 143, 0.10);
}

.btn--ghost-light:active{ transform: var(--pushed); }
.btn--ghost-light:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

/* ===== Diagrama PDC ===== */

.home-method__viz{
  grid-column: span 5;
}

/* ===== Diagrama PDC | HOME ===== */

.home-method .pdc-flow{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2×2 */
  gap: var(--space-3);
  align-items: stretch;
}

/* Ajustes para que se lean bien dentro de 2 columnas */
.home-method .pdc-step{
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid rgba(214, 222, 230, 0.22);
  background: var(--surface-card);
  color: var(--text-base);

  padding: var(--space-3);
  min-height: calc(var(--btn-h) + var(--space-3));

  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.home-method .pdc-step__n{
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
  background: rgba(42, 157, 143, 0.20);
  border: 1px solid rgba(42, 157, 143, 0.45);
  font-size: var(--fs-small);
  line-height: 1;
  flex-shrink: 0;
}

.home-method .pdc-step__label{
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-headings);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
}

.home-method .pdc-step::after{
  content: none;
}

.home-method .pdc-caption{
  margin: 0;
  color: rgba(240,244,248,0.78);
  font-size: 14px;
  line-height: 1.5;
}

.home-method .pdc-step--goal{
  border-color: rgba(232, 90, 37, 0.55);
  box-shadow: 0 0 0 1px rgba(232, 90, 37, 0.25) inset;
}

.home-method .pdc-step--goal .pdc-step__n{
  border-color: rgba(232, 90, 37, 0.55);
  background: rgba(232, 90, 37, 0.06);
  color: var(--mkm-accent-500);
}

.home-method .pdc-step--goal .pdc-step__label{
  color: var(--mkm-accent-500);
}

/* CTA principal dentro del bloque Metodología */
.home-method .btn--method-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: var(--btn-h);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);

  background: var(--mkm-accent-500);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-body);
  letter-spacing: var(--track-ui);

  font-weight: var(--fw-bold);
  text-decoration: none;

  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}

.home-method .btn--method-cta:hover{
  transform: var(--hover-lift);
  filter: brightness(1.05);
}

.home-method .btn--method-cta:active{ transform: var(--pushed); }
.home-method .btn--method-cta:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

/* micro: el icono/flechita un pelín más “viva” */
.home-method .btn--method-cta span[aria-hidden="true"]{
  transform: translateY(1px);
}

/* Por defecto, el CTA “móvil” no se ve */
.home-method .btn--method-cta--mobile{
  display: none;
}

/* =========================
   FIX ANCHO: Home Method
   ========================= */

/* Aunque .section sea full-bleed, el contenido queda “encajado” */
.home-method > .wrap.wrap--xl{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter); /* los mismos gutters del sistema */
  width: 100%;
  box-sizing: border-box;
}

/* El panel ocupa el ancho del wrap, no el de la pantalla */
.home-method__panel{
  width: 100%;
}

/* ===== Responsive ===== */

@media (max-width: 1200px){
  .home-method .pdc-flow{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media (max-width: 1000px){
  .home-method__copy{ grid-column: span 12; }
  .home-method__viz{ grid-column: span 12; }

  .home-method .pdc-flow{
    grid-template-columns: 1fr;
  }

  .home-method__copy .btn--method-cta{
    display: none;
  }

  /* Mostramos el CTA móvil debajo del diagrama */
  .home-method__grid .btn--method-cta--mobile{
    display: inline-flex;
    grid-column: 1 / -1;     /* ocupa todo el ancho del grid */
    justify-self: center;    /* centrado horizontal */
    margin-top: var(--space-5);
  }

}

/* =========================================
   BLOQUE FINAL: DUAL LEAD CAPTURE (MKM)
   ========================================= */

.mkm-leads-section {
  position: relative;
  padding: var(--gap-section) var(--gutter);
  background-color: var(--mkm-cool-50);
  overflow: hidden;
}

.mkm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

/* --- Encabezado --- */
.mkm-header {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--text-max-wide);
  margin-inline: auto;
}

.mkm-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  color: var(--mkm-primary-900);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  margin-bottom: var(--space-4);
}

.mkm-header .highlight {
  color: var(--mkm-primary-500);
  position: relative;
  display: inline-block;
}

.mkm-header .highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 8px;
  background-color: color-mix(in srgb, var(--mkm-secondary-500) 20%, transparent);
  z-index: -1;
}

.mkm-header p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--mkm-text-muted);
  line-height: var(--lh-body);
}

/* --- Grid --- */
.mkm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  .mkm-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Tarjeta base --- */
.mkm-card {
  position: relative;
  background: var(--surface-card);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;

  border-top: 4px solid var(--card-accent, var(--mkm-cool-100));
  border-right: 1px solid var(--mkm-cool-100);
  border-bottom: 1px solid var(--mkm-cool-100);
  border-left: 1px solid var(--mkm-cool-100);

  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-card:hover,
.mkm-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  z-index: 2;
}

/* --- Variables por tarjeta --- */
/* Variables por tarjeta */
.card-strategic{
  --card-accent: var(--mkm-primary-300);
  --icon-bg: color-mix(in srgb, var(--mkm-primary-300) 10%, #ffffff);
  --icon-color: var(--mkm-primary-300);
  --subtitle-color: var(--mkm-primary-300);
  --bullet-color: var(--mkm-primary-300);

  /* CTA Strategic en naranja */
  --btn-bg: var(--mkm-accent-500);
  --btn-border: var(--mkm-accent-500);
  --btn-hover-bg: color-mix(in srgb, var(--mkm-accent-500) 88%, var(--mkm-primary-900));
  --btn-hover-border: color-mix(in srgb, var(--mkm-accent-500) 88%, var(--mkm-primary-900));
}

.card-studio{
  --card-accent: var(--mkm-secondary-500);
  --icon-bg: color-mix(in srgb, var(--mkm-secondary-500) 8%, #ffffff);
  --icon-color: var(--mkm-secondary-500);
  --subtitle-color: var(--mkm-secondary-500);
  --bullet-color: var(--mkm-secondary-500);
  --btn-bg: var(--mkm-secondary-500);
  --btn-border: var(--mkm-secondary-500);
  --btn-hover-bg: var(--mkm-secondary-700);
  --btn-hover-border: var(--mkm-secondary-700);
}

/* --- Icono --- */
.mkm-card .card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  background: var(--icon-bg);
  color: var(--icon-color);
  transition: background-color var(--dur-2) var(--ease);
}

.mkm-card .card-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* --- Tipografía interna --- */
.mkm-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  margin-bottom: var(--space-2);
  transition: color var(--dur-2) var(--ease);
}

.mkm-card:hover h3,
.mkm-card:focus-within h3 {
  color: var(--mkm-primary-500);
}

.mkm-card .subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--subtitle-color);
  margin-bottom: var(--space-4);
}

.mkm-card .description {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* --- Lista --- */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.benefit-list li {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--mkm-text-main);
}

.card-strategic .benefit-list li::before {
  content: "✓";
  color: var(--bullet-color);
  font-weight: 700;
  margin-right: var(--space-2);
}

.card-studio .benefit-list li::before {
  content: "✦";
  color: var(--bullet-color);
  margin-right: var(--space-2);
}

/* --- Hover del icono --- */
.card-strategic:hover .card-icon,
.card-strategic:focus-within .card-icon {
  background: color-mix(in srgb, var(--mkm-primary-300) 16%, #ffffff);
}

.card-studio:hover .card-icon,
.card-studio:focus-within .card-icon {
  background: color-mix(in srgb, var(--mkm-secondary-500) 15%, #ffffff);
}

/* --- Botones base --- */
.mkm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--btn-h);
  padding-inline: 18px;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  text-decoration: none;
  font-size: var(--fs-body);
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.mkm-btn:active {
  transform: var(--pushed);
}



/* Misma jerarquía para ambas tarjetas */
.card-strategic .mkm-btn,
.card-studio .mkm-btn{
  background: var(--btn-bg);
  color: #fff;
  border: 1px solid var(--btn-border);
}

.card-strategic .mkm-btn:hover,
.card-strategic .mkm-btn:focus-visible,
.card-studio .mkm-btn:hover,
.card-studio .mkm-btn:focus-visible{
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);}

  .card-strategic .mkm-btn:focus-visible,
.card-studio .mkm-btn:focus-visible{
  outline: none;
  box-shadow: var(--shadow-sm), var(--focus-ring);
}

/* =========================================
   COOKIES CONSENT (MKM)
   ========================================= */

.mkm-cc-banner{
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-4);
  z-index: calc(var(--z-toast) + 10);
  max-width: min(980px, calc(var(--container-max) - (var(--gutter) * 2)));
  margin-inline: auto;

  background: var(--glass-bg);
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur-md);

  color: var(--text-base);
  font-family: var(--font-body);
}

.mkm-cc-banner__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: center;
}

/* Colores por tipo de cookie */
.mkm-cc-card--necessary .mkm-cc-cat{
  color: var(--mkm-primary-900);
}

.mkm-cc-card--analytics .mkm-cc-cat{
  color: var(--mkm-secondary-700);
}

/* Opcional (queda muy fino): una línea lateral sutil */
.mkm-cc-card--necessary{
  border-left: 4px solid rgba(8, 77, 110, 0.25); /* primary */
}

.mkm-cc-card--analytics{
  border-left: 4px solid rgba(29, 107, 98, 0.25); /* secondary-700 */
}

@media (max-width: 820px){
  .mkm-cc-banner__inner{ grid-template-columns: 1fr; }
}

.mkm-cc-title{
  margin: 0 0 var(--space-1) 0;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
}

.mkm-cc-text{
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--text-max-wide);
  color: var(--mkm-text-main);
}

.mkm-cc-links{
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mkm-cc-link{
  color: var(--mkm-primary-500);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

.mkm-cc-actions{
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mkm-cc-btn{
  height: var(--btn-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  cursor: pointer;

  border: var(--border-1) solid transparent;
  transition: transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              filter var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}

.mkm-cc-btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.mkm-cc-btn:active{ transform: var(--pushed); }

.mkm-cc-btn--primary{
  background: var(--mkm-accent-500);
  color: var(--mkm-text-invert);
  border-color: rgba(232, 90, 37, 0.45);
  box-shadow: 0 0 0 1px rgba(232, 90, 37, 0.22), var(--shadow-sm);
}

.mkm-cc-btn--primary:hover{
  filter: brightness(0.95);
  box-shadow: 0 0 0 3px rgba(232, 90, 37, 0.18), var(--shadow-md);
}

.mkm-cc-btn--outline{
  background: #fff;
  color: var(--mkm-primary-500);
  border-color: rgba(8, 77, 110, 0.28);
}

.mkm-cc-btn--outline:hover{
  background: var(--mkm-cool-50);
  box-shadow: var(--shadow-sm);
}

.mkm-cc-btn--ghost{
  background: transparent;
  color: var(--mkm-text-main);
  border-color: rgba(79, 109, 122, 0.25);
}

.mkm-cc-btn--ghost:hover{
  background: rgba(240, 244, 248, 0.65);
  box-shadow: var(--shadow-sm);
}

/* Modal */
.mkm-cc-modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  font-family: var(--font-body);
}

.mkm-cc-modal[aria-hidden="false"]{ display: block; }

.mkm-cc-backdrop{
  position: absolute;
  inset: 0;
  background: var(--backdrop);
}

.mkm-cc-panel{
  position: relative;
  width: min(860px, calc(100vw - (var(--gutter) * 2)));
  margin: 6vh auto;
  background: var(--surface-card);
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (max-width: 820px){
  .mkm-cc-panel{
    margin: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

.mkm-cc-panel__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--border-base);
}

.mkm-cc-h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-h);
  line-height: var(--lh-headings);
  font-size: var(--fs-h3);
  color: var(--mkm-primary-900);
}

.mkm-cc-x{
  height: 40px;
  width: 40px;
  border-radius: 12px;
  border: var(--border-1) solid var(--border-base);
  background: #fff;
  cursor: pointer;
  font-weight: var(--fw-black);
}

.mkm-cc-x:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.mkm-cc-panel__body{
  padding: var(--space-4);
}

.mkm-cc-card{
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.mkm-cc-card + .mkm-cc-card{
  margin-top: var(--space-3);
}

.mkm-cc-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.mkm-cc-cat{
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
}

.mkm-cc-desc{
  margin: var(--space-1) 0 0 0;
  color: var(--mkm-text-muted);
  line-height: 1.45;
  max-width: 62ch;
}

/* Switch */
.mkm-cc-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mkm-cc-switch input{
  appearance: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: var(--border-1) solid var(--border-base);
  background: var(--mkm-cool-50);
  cursor: pointer;
  outline: none;
}

.mkm-cc-switch input:checked{
  background: rgba(42, 157, 143, 0.18);
  border-color: rgba(42, 157, 143, 0.35);
}

.mkm-cc-slider{
  pointer-events: none;
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease);
}

.mkm-cc-switch input:checked + .mkm-cc-slider{
  transform: translateX(20px);
}

.mkm-cc-switch input:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.mkm-cc-note{
  margin: var(--space-4) 0 0 0;
  color: var(--mkm-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.mkm-cc-panel__foot{
  padding: var(--space-4);
  border-top: var(--border-1) solid var(--border-base);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================================
   PÁGINAS LEGALES (MKM)
   ========================================= */

.legal-page{
  background: var(--surface-bg);
  color: var(--text-base);
}

.legal-main{
  padding-top: var(--cabecera-offset);
}

/* Hero legal sobrio (con acento MKM) */
.legal-hero{
  padding: calc(var(--gap-section) + var(--space-4)) var(--gutter) var(--gap-section);
  background:
    radial-gradient(900px 260px at 20% 0%,
      rgba(42,157,143,0.18) 0%,
      rgba(42,157,143,0) 70%),
    radial-gradient(900px 260px at 90% 10%,
      rgba(8,77,110,0.14) 0%,
      rgba(8,77,110,0) 70%);
  border-bottom: var(--border-1) solid var(--border-base);
}

.legal-hero__inner{
  max-width: var(--container-max);
  margin: 0 auto;
}

.legal-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  color: var(--mkm-secondary-700);
  margin: 0 0 var(--space-2) 0;
}

.legal-title{
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-h);
  line-height: var(--lh-headings);
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-3) 0;
  color: var(--mkm-primary-900);
}

.legal-lead{
  margin: 0 0 var(--space-4) 0;
  max-width: var(--text-max-wide);
  color: var(--mkm-text-main);
  line-height: var(--lh-body);
}

.legal-hero__actions{
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-3);
}

.legal-updated{
  margin-top: var(--space-4);
  color: var(--mkm-text-muted);
  font-size: var(--fs-small);
}

/* Layout: índice + contenido */
.legal-content{
  padding: var(--gap-section) var(--gutter);
}

.legal-grid{
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--grid-gap);
  align-items: start;
}

@media (max-width: 980px){
  .legal-grid{ grid-template-columns: 1fr; }
}

/* Tarjetas sobrias */
.legal-card{
  background: var(--surface-card);
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.legal-card--note{
  margin-top: var(--space-3);
  border-left: 4px solid rgba(42,157,143,0.25);
}

.legal-card--contact{
  border-left: 4px solid rgba(8,77,110,0.25);
}

.legal-card__title{
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
}

.legal-toc{
  display: grid;
  gap: var(--space-2);
}

.legal-toc a{
  color: var(--mkm-primary-500);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.legal-toc a:hover{
  text-decoration: underline;
}

.legal-article{
  background: var(--surface-card);
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 2vw, 32px);
}

.legal-section + .legal-section{
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(214,222,230,0.8);
}

.legal-section h2{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  line-height: var(--lh-headings);
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-3) 0;
  position: relative;
}

.legal-section h2::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(42,157,143,0.35); /* secondary-500 */
}

.legal-section p{
  margin: 0 0 var(--space-3) 0;
  line-height: var(--lh-body);
  color: var(--mkm-text-main);
  max-width: var(--text-max-rewide);
}

.legal-muted{
  color: var(--mkm-text-muted);
  font-size: var(--fs-small);
}

.legal-list{
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--space-2);
  color: var(--mkm-text-main);
}

.legal-callout{
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-md);
  background: rgba(42,157,143,0.06);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.legal-actions{
  margin-top: var(--space-3);
}

/* Tabla cookies */
.legal-table-wrap{
  margin-top: var(--space-4);
  overflow: auto;
  border: var(--border-1) solid var(--border-base);
  border-radius: var(--radius-md);
}

.legal-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: var(--surface-card);
}

.legal-table th,
.legal-table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(214,222,230,0.8);
  vertical-align: top;
  text-align: left;
  color: var(--mkm-text-main);
}

.legal-table th{
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
  background: rgba(240,244,248,0.8);
}

.legal-table code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(240, 244, 248, 0.9); /* mkm-cool-50 */
  border: 1px solid rgba(214, 222, 230, 0.9); /* mkm-cool-100 */
  border-radius: 8px;
  padding: 2px 8px;
  color: var(--mkm-primary-900);
  white-space: nowrap;
}

/* =========================================
   ENLACES INLINE (global MKM)
   ========================================= */

p a, li a, td a, .legal-article a{
  color: var(--mkm-primary-500);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(42,157,143,0.35);
  transition: color var(--dur-2) var(--ease),
              text-decoration-color var(--dur-2) var(--ease);
}

p a:hover, li a:hover, td a:hover, .legal-article a:hover{
  color: var(--mkm-secondary-700);
  text-decoration-color: rgba(232,90,37,0.35); /* accent */
}

p a:focus-visible, li a:focus-visible, td a:focus-visible, .legal-article a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* =========================================
   PÁGINA SERVICIOS: HERO
   ========================================= */

/* Layout Grid General */
.services-hero__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 992px) {
  .services-hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }
}

/* --- Tipografía y Estilos de Texto --- */

.mkm-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--mkm-secondary-500);
  text-transform: uppercase;
  letter-spacing: var(--track-ui);
  margin-bottom: var(--space-2);
}

.services-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-hero-h1);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  max-width: 20ch;
}

.services-hero__title .text-highlight {
  color: var(--mkm-accent-500);
}

.services-hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
  max-width: 50ch;
}

/* --- Contenedor de las Tarjetas (Visual) --- */
.services-hero__paths {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* En tablet/desktop las ponemos en grid para mejor composición */
@media (min-width: 700px) {
  .services-hero__paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* =========================================
   SERVICES HERO: compactar path-cards SOLO aquí
   (solo si estás usando .path-card en el HTML del hero)
   ========================================= */

.services-hero .path-card__inner{
  padding: clamp(20px, 2vw, 28px);
  gap: var(--space-3);
  min-height: 240px;
}

.services-hero .path-card__title{
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.15;
}

.services-hero .path-card__desc{
  font-size: 0.95rem;
}

/* =========================================
   ESTILOS BLOQUE STRATEGIC
   ========================================= */

/* Columna izquierda como stack y centrado de insight + botón */
.strategic-hero__content{
  display: flex;
  flex-direction: column;
}

/* =========================================
   MKM STRATEGIC: nueva asignación cromática
   Strategic = familia Primary
   ========================================= */

#mkm-strategic.section{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;

  /* Variables locales del bloque */
  --strategic-accent: var(--mkm-primary-300);
  --strategic-accent-strong: var(--mkm-primary-500);
  --strategic-accent-deep: var(--mkm-primary-700);
  --strategic-soft-bg: color-mix(in srgb, var(--mkm-primary-300) 10%, #ffffff);
  --strategic-soft-bg-2: color-mix(in srgb, var(--mkm-primary-300) 14%, #ffffff);
  --strategic-soft-border: color-mix(in srgb, var(--mkm-primary-300) 22%, #ffffff);

  background: color-mix(in srgb, var(--mkm-primary-300) 8%, var(--surface-bg));
}

/* evita scroll horizontal por el 100vw */
body{
  overflow-x: clip;
}

/* =========================================
   BLOQUE MKM STRATEGIC
   ========================================= */

.strategic-hero{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--mkm-cool-50) 55%, #ffffff) 100%
  );
  border-top: 4px solid var(--mkm-primary-500);
  border-right: 1px solid var(--mkm-cool-100);
  border-bottom: 1px solid var(--mkm-cool-100);
  border-left: 1px solid var(--mkm-cool-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.strategic-hero__container{
  display: grid;
  gap: var(--space-6);
  padding: clamp(24px, 3vw, 44px);
  align-items: center;
}

@media (min-width: 992px){
  .strategic-hero__container{
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
  }
}

/* Badge */
.strategic-badge{
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--strategic-accent-strong);
  background: var(--strategic-soft-bg);
  border: 1px solid var(--strategic-soft-border);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: var(--space-3);
}

.strategic-hero__title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  margin: 0 0 var(--space-3);
  max-width: 26ch;
}

.strategic-hero__subtitle{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
  margin: 0 0 var(--space-5);
  max-width: var(--text-max);
}

/* Insight */
.strategic-hero__insight{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: center;

  background: color-mix(in srgb, var(--mkm-cool-50) 72%, #ffffff);
  border: 1px solid var(--mkm-cool-100);
  border-left: 4px solid var(--mkm-primary-500);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.strategic-hero__insight p{
  margin: 0;
  color: var(--mkm-primary-900);
  font-weight: var(--fw-medium);
}

.strategic-hero__icon{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--strategic-soft-bg-2);
  color: var(--strategic-accent-strong);
}

.strategic-hero__icon svg{
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* CTA Strategic */
#mkm-strategic .btn.btn--strategic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 18px;
  border-radius: var(--btn-radius);
  font-weight: var(--fw-bold);
  text-decoration: none;

  background: var(--strategic-accent);
  border: 1px solid var(--strategic-accent);
  color: #fff;

  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}



/* =========================================
   Visual
   ========================================= */

.strategic-hero__visual{
  display: grid;
}

.strategic-mini{
  border-radius: var(--radius-lg);
  border: 1px solid var(--mkm-cool-100);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.strategic-mini__top{
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-5);
}

@media (max-width: 520px){
  .strategic-mini__top{
    grid-template-columns: 1fr;
  }
}

.strategic-mini__kpi{
  border-radius: var(--radius-md);
  border: 1px solid var(--mkm-cool-100);
  background: color-mix(in srgb, var(--mkm-cool-50) 65%, #ffffff);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

.kpi__label{
  display: block;
  font-size: 12px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-text-muted);
  line-height: 1.2;
  min-height: calc(2 * 1em * 1.2);
  margin-bottom: 6px;
}

.kpi__value{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
  font-size: clamp(18px, 1.6vw, 22px);
}

.strategic-mini__chart{
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--mkm-primary-300) 6%, #ffffff) 0%,
    color-mix(in srgb, var(--mkm-primary-300) 18%, #ffffff) 50%,
    color-mix(in srgb, var(--mkm-primary-300) 6%, #ffffff) 100%
  );
  border: 1px solid color-mix(in srgb, var(--mkm-primary-300) 20%, #ffffff);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.strategic-mini__chart svg{
  width: 100%;
  height: auto;
}

.strategic-mini__chart path{
  fill: none;
  stroke: var(--strategic-accent-strong);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strategic-mini__legend{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mkm-text-muted);
  font-size: 0.95rem;
}

.strategic-mini__legend .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--strategic-accent-strong);
}

/* =========================================
   SERVICIOS ESTRATÉGICOS (MKM Strategic)
   nueva asignación cromática
   ========================================= */

.strategic-services__header{
  max-width: var(--text-max-wide);
}

.strategic-services__title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.strategic-services__lead{
  margin-top: var(--space-2);
  color: var(--mkm-text-muted);
  max-width: var(--text-max);
}

/* Grid */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Tarjeta */
.service-card{
  background: var(--surface-card);
  border: 1px solid var(--mkm-cool-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--cabecera-offset) + var(--space-4));

  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

/* Barra superior */
.service-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mkm-primary-300);
  opacity: 1;
}

/* Hover / Focus */
.service-card:hover{
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.service-card:focus-within{
  box-shadow: var(--shadow-md), var(--focus-ring-inset);
  border-color: transparent;
}

.service-card:target{
  box-shadow: var(--shadow-md), var(--focus-ring);
  border-color: var(--mkm-primary-300);
}

/* Cabecera */
.service-card__top{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.service-card__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mkm-primary-300) 12%, #ffffff);
  color: var(--mkm-primary-500);
  font-size: 20px;
  flex: 0 0 auto;
}

.service-card__icon svg{
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.service-card__title{
  font-family: var(--font-display);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: var(--lh-headings);
  color: var(--mkm-primary-500);
  letter-spacing: var(--track-h);
  margin: 0;
}

/* Texto */
.service-card__desc{
  color: var(--text-base);
  margin: 0;
}

.service-card__purpose{
  color: var(--mkm-text-muted);
  margin: 0;
}

.service-card__purpose strong{
  color: var(--text-base);
}

/* Bullets */
.service-card__bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-base);
}

.service-card__bullets li{
  position: relative;
  padding-left: 22px;
}

.service-card__bullets li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mkm-primary-300);
  font-weight: 700;
}

/* Details */
.service-card__details{
  border-top: 1px solid var(--border-base);
  padding-top: var(--space-3);
}

.service-card__details summary{
  cursor: pointer;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  list-style: none;
}

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

.service-card__details summary::after{
  content: " +";
  font-weight: var(--fw-black);
  color: var(--mkm-primary-300);
}

.service-card__details[open] summary::after{
  content: " −";
}

.service-card__details ul{
  margin: var(--space-3) 0 0;
  padding-left: 18px;
  color: var(--mkm-text-muted);
}

/* Botón Strategic global */
/* Botones CTA de las tarjetas de Servicios Estratégicos */
#servicios-estrategicos .btn--strategic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding-inline: 18px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--mkm-accent-500);
  background: var(--mkm-accent-500);
  color: #fff;
  font-weight: var(--fw-bold);
  text-decoration: none;
  width: fit-content;
  max-width: 100%;

  box-shadow:
    0 10px 22px rgb(232 90 37 / 0.16),
    0 0 0 1px rgb(255 255 255 / 0.12) inset;

  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

#servicios-estrategicos .btn--strategic:hover,
#servicios-estrategicos .btn--strategic:focus-visible{
  background: color-mix(in srgb, var(--mkm-accent-500) 88%, var(--mkm-primary-900));
  border-color: color-mix(in srgb, var(--mkm-accent-500) 88%, var(--mkm-primary-900));
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgb(232 90 37 / 0.22),
    0 0 0 1px rgb(255 255 255 / 0.16) inset;
}

#servicios-estrategicos .btn--strategic:focus-visible{
  outline: none;
  box-shadow:
    0 14px 28px rgb(232 90 37 / 0.22),
    var(--focus-ring);
}

/* CTA */
.service-card .btn{
  align-self: center;
  margin-top: var(--space-2);
  border-radius: var(--btn-radius);
}



/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .service-card{
    transition: none;
  }
  .service-card:hover{
    transform: none;
  }
}

/* Desktop */
@media (min-width: 1100px){

  .services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .service-card{
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "top top"
      "desc bullets"
      "purpose bullets"
      "details details"
      "cta cta";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-content: stretch;
  }

  .service-card__top{ grid-area: top; }
  .service-card__desc{ grid-area: desc; }

  .service-card__bullets{
    grid-area: bullets;
    align-self: start;
  }

  .service-card__purpose{ grid-area: purpose; }

  .service-card__details{
    grid-area: details;
    margin-top: 0;
  }

  .service-card .btn{
    grid-area: cta;
    justify-self: center;
    white-space: nowrap;
  }
}



/* =========================================
   SERVICIOS STUDIO (MKM Studio)
   nueva asignación cromática
   ========================================= */

.studio-services__header{
  max-width: var(--text-max-wide);
}

.studio-services__title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500); /* título corporativo */
}

.studio-services__lead{
  margin-top: var(--space-2);
  color: var(--mkm-text-muted);
  max-width: var(--text-max);
}

/* Grid */
.studio-services .services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Tarjeta */
.studio-services .service-card{
  background: var(--surface-card);
  border: 1px solid var(--mkm-cool-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--cabecera-offset) + var(--space-4));

  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

/* Barra superior */
.studio-services .service-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mkm-secondary-500);
  opacity: 1;
}

/* Hover / Focus */
.studio-services .service-card:hover{
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.studio-services .service-card:focus-within{
  box-shadow: var(--shadow-md), var(--focus-ring-inset);
  border-color: transparent;
}

.studio-services .service-card:target{
  box-shadow: var(--shadow-md), var(--focus-ring);
  border-color: var(--mkm-secondary-500);
}

/* Cabecera */
.studio-services .service-card__top{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.studio-services .service-card__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mkm-secondary-500) 12%, #ffffff);
  color: var(--mkm-secondary-500);
  font-size: 20px;
  flex: 0 0 auto;
}

.studio-services .service-card__icon svg{
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.studio-services .service-card__title{
  font-family: var(--font-display);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: var(--lh-headings);
  color: var(--mkm-primary-500); /* corporativo */
  letter-spacing: var(--track-h);
  margin: 0;
}

/* Texto */
.studio-services .service-card__desc{
  color: var(--text-base);
  margin: 0;
}

.studio-services .service-card__purpose{
  color: var(--mkm-text-muted);
  margin: 0;
}

.studio-services .service-card__purpose strong{
  color: var(--text-base);
}

/* Bullets */
.studio-services .service-card__bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-base);
}

.studio-services .service-card__bullets li{
  position: relative;
  padding-left: 22px;
}

.studio-services .service-card__bullets li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mkm-secondary-500);
  font-weight: 700;
}

/* Details */
.studio-services .service-card__details{
  border-top: 1px solid var(--border-base);
  padding-top: var(--space-3);
}

.studio-services .service-card__details summary{
  cursor: pointer;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  list-style: none;
}

.studio-services .service-card__details summary::-webkit-details-marker{
  display: none;
}

.studio-services .service-card__details summary::after{
  content: " +";
  font-weight: var(--fw-black);
  color: var(--mkm-secondary-500);
}

.studio-services .service-card__details[open] summary::after{
  content: " −";
}

.studio-services .service-card__details ul{
  margin: var(--space-3) 0 0;
  padding-left: 18px;
  color: var(--mkm-text-muted);
}

/* CTA */
.studio-services .service-card .btn{
  align-self: center;
  margin-top: var(--space-2);
  border-radius: var(--btn-radius);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .studio-services .service-card{
    transition: none;
  }
  .studio-services .service-card:hover{
    transform: none;
  }
}

/* Desktop */
@media (min-width: 1100px){

  .studio-services .services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .studio-services .service-card{
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "top top"
      "desc bullets"
      "purpose bullets"
      "details details"
      "cta cta";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-content: stretch;
  }

  .studio-services .service-card__top{ grid-area: top; }
  .studio-services .service-card__desc{ grid-area: desc; }

  .studio-services .service-card__bullets{
    grid-area: bullets;
    align-self: start;
  }

  .studio-services .service-card__purpose{ grid-area: purpose; }

  .studio-services .service-card__details{
    grid-area: details;
    margin-top: 0;
  }

  .studio-services .service-card .btn{
    grid-area: cta;
    justify-self: center;
    white-space: nowrap;
  }
}



/* =========================================
   METODOLOGÍA PDC (Versión Compacta de 1 Línea)
   ========================================= */

.container-mkm {
  width: 100%;
  max-width: 1350px; /* Un poco más ancho que la tarjeta (1280px) */
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

   .strategic-methodology__card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  text-align: center;

  max-width: min(1280px, 100%);
  margin-inline: auto;

  /* Padding responsivo */
  padding: 40px clamp(10px, 2vw, 20px);
  overflow: hidden;
}

.strategic-methodology__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-digital);
  opacity: 0.85;
}

.strategic-methodology__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  
  /* CAMBIO 1: Color Primary 500 (Azul petróleo corporativo) */
  color: var(--mkm-primary-500); 
}

.methodology-text {
  max-width: var(--text-max-wide);
  margin: var(--space-3) auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
  
  /* CAMBIO 2: Balanceo automático de texto */
  /* Esto hace magia: fuerza a que las líneas tengan anchos similares 
     evitando que quede una sola palabra huérfana al final */
   
}

.methodology-text strong {
  color: var(--mkm-primary-500);
  font-weight: var(--fw-bold);
}

/* ================================
   PDC FLOW: DISEÑO FINAL PULIDO
   ================================ */

.strategic-methodology .pdc-flow {
  margin-top: var(--space-6);
  width: 100%;
  display: flex;
  overflow-x: visible;
  justify-content: center;
  padding-bottom: 10px;
}

.strategic-methodology .pdc-line {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 12px;
}

.strategic-methodology .pdc-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  background-color: #fff;
  border: 1px solid var(--mkm-cool-100);
  border-radius: 50px;

  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--mkm-text-main);

  user-select: none;
  cursor: default;

  white-space: nowrap;
  font-size: 0.8rem;
  padding: 8px 16px;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.strategic-methodology .pdc-node:hover {
  border-color: var(--mkm-primary-300);
  transform: none;
}

.strategic-methodology .pdc-node--meta {
  background-color: var(--mkm-cool-50);
  border-color: var(--mkm-primary-300);
  color: var(--mkm-primary-900);
  font-weight: var(--fw-bold);
}

.strategic-methodology .pdc-node--result {
  background-color: var(--mkm-primary-500);
  border-color: var(--mkm-primary-500);
  color: #fff;
  font-weight: var(--fw-bold);
  box-shadow: none;
}

.strategic-methodology .pdc-node--result:hover {
  background-color: var(--mkm-primary-500);
  border-color: var(--mkm-primary-500);
}

.strategic-methodology .pdc-node::after {
  content: none;
}

.strategic-methodology .pdc-icon-rocket {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  stroke: currentColor;
  flex-shrink: 0;
}

.strategic-methodology .pdc-node--result:hover .pdc-icon-rocket {
  transform: translate(2px, -2px);
  transition: transform 0.3s ease;
}

@media (min-width: 992px) {
  .strategic-methodology .pdc-flow {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .strategic-methodology .pdc-flow::-webkit-scrollbar {
    display: none;
  }

  .strategic-methodology .pdc-line {
    flex-wrap: nowrap;
    width: max-content;
    gap: 32px;
  }

  .strategic-methodology .pdc-node {
    font-size: 0.85rem;
    padding: 8px 18px;
  }

  .strategic-methodology .pdc-node:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-54%);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--mkm-primary-300);
    pointer-events: none;
  }
}

@media (min-width: 1400px) {
  .strategic-methodology .pdc-line {
    gap: 40px;
  }

  .strategic-methodology .pdc-node:not(:last-child)::after {
    right: -28px;
  }
}



/* =========================================
   COMPONENTE REUTILIZABLE: MKM CTA
   (sin padding/margin vertical extra: lo gestiona .section)
   ========================================= */

.mkm-cta{
  /* Variables por defecto (se sobreescriben por modificador) */
  --cta-accent: var(--mkm-secondary-500);
  --cta-accent-hover: var(--mkm-secondary-700);

  --cta-bg-from: var(--mkm-primary-900);
  --cta-bg-to: var(--mkm-primary-500);
}

.mkm-cta--strategic,
.mkm-cta--studio{
  --cta-accent: var(--mkm-accent-500);
  --cta-accent-hover: #D14F20;
}




.mkm-cta__card{
  position: relative;
  overflow: hidden;

  max-width: min(1080px, 100%);
  margin-inline: auto;

  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  box-shadow: var(--shadow-md);

  padding: clamp(22px, 3vw, 44px);

  color: var(--mkm-text-invert);

  /* Fondo premium: base + halo del acento */
  background:
    radial-gradient(700px circle at 15% 0%,
      color-mix(in srgb, var(--cta-accent) 35%, transparent) 0%,
      transparent 60%),
    linear-gradient(135deg, var(--cta-bg-from) 0%, var(--cta-bg-to) 100%);
}

/* Textura sutil “tech” (muy baja opacidad) */
.mkm-cta__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 18px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.05) 0 1px,
      transparent 1px 18px
    );
  opacity: 0.25;
  pointer-events:none;
}

/* Glow decorativo en esquina */
.mkm-cta__card::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-140px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cta-accent) 40%, transparent) 0%,
    transparent 70%);
  filter: blur(2px);
  pointer-events:none;
}

/* Layout */
.mkm-cta__card{
  display: grid;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}

@media (min-width: 992px){
  .mkm-cta__card{
    grid-template-columns: 1.4fr 0.6fr;
    text-align: left;
  }
  .mkm-cta__actions{
    justify-self: end;
    text-align: right;
    display: flex;
  flex-direction: column;
  align-items: center;
  }
}

/* Tipografía */
.mkm-cta__eyebrow{
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 70%, var(--cta-accent));
}

.mkm-cta__title{
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: #fff; /* clave: asegura contraste */
  
}

.mkm-cta__text{
  margin: 0;
  max-width: 60ch;
  color: rgba(255,255,255,0.82);
}

.mkm-cta__micro{
  margin: var(--space-2) 0 0;
  max-width: 28ch;
  text-align: center;
  color: rgba(255,255,255,0.70);
}

/* Botón reutilizable por variable */
.btn--cta{
  background: var(--cta-accent);
  color: #fff;
  border: 1px solid transparent;

  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
  white-space: nowrap;
}

.btn--cta:hover,
.btn--cta:focus-visible{
  background: var(--cta-accent-hover);
  transform: var(--hover-lift);

  /* glow + elevación */
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--cta-accent) 22%, transparent),
    var(--shadow-lg);
}

.btn--cta:active{
  transform: var(--pushed);
}

/* =========================================
   FIX FINAL (al final del CSS): Strategic limpio
   ========================================= */

/* Tarjeta grande: bordes rectos + sin margen/padding heredado del bloque antiguo */
#mkm-strategic .strategic-hero{
  border-radius: 0;
  margin: 0;      /* anula el antiguo margin: 0 var(--gutter) */
  padding: 0;     /* anula el antiguo padding: var(--space-7) 0 */
}

/* Botón Strategic: mismo borde/radio que Hablemos, pero sin hacerse “enorme” */
/* CTA Strategic: foco visual real, sin romper el tono sobrio */
#mkm-strategic .btn.btn--strategic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: var(--btn-h);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  width: fit-content;
  max-width: 100%;

  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  letter-spacing: 0.01em;

  background: var(--mkm-accent-500);
  border: 1px solid color-mix(in srgb, var(--mkm-accent-500) 72%, var(--mkm-primary-900));
  color: #FFFFFF;

  box-shadow:
    0 10px 22px rgb(232 90 37 / 0.16),
    0 0 0 1px rgb(255 255 255 / 0.18) inset;

  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    filter var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

#mkm-strategic .btn.btn--strategic:hover,
#mkm-strategic .btn.btn--strategic:focus-visible{
  transform: var(--hover-lift);
  filter: saturate(1.03) brightness(0.98);
  box-shadow:
    0 14px 30px rgb(232 90 37 / 0.22),
    0 0 0 1px rgb(255 255 255 / 0.22) inset;
}

#mkm-strategic .btn.btn--strategic:active{
  transform: translateY(0);
}

#mkm-strategic .btn.btn--strategic:focus-visible{
  outline: none;
  box-shadow:
    0 14px 30px rgb(232 90 37 / 0.22),
    var(--focus-ring);
}

/* Alinear el botón con el mismo eje que el insight */
#mkm-strategic .strategic-hero__content{
  align-items: center; /* centra los elementos que no sean full-width */
}

/* Mantener el texto alineado a la izquierda (aunque el contenedor esté centrado) */
#mkm-strategic .strategic-hero__title,
#mkm-strategic .strategic-hero__subtitle{
  align-self: stretch;
}

/* Asegura que insight y botón comparten el mismo ancho visual */
#mkm-strategic .strategic-hero__insight{
  width: min(560px, 100%);
}

#mkm-strategic .btn.btn--strategic{
  align-self: center;
}
/* Badge a la izquierda, aunque el resto del bloque tenga elementos centrados */
#mkm-strategic .strategic-badge{
  align-self: flex-start;
}

/* =========================================
   JERARQUÍA TIPOGRÁFICA TARJETAS (MKM)
   ========================================= */

/* 1) Bajamos el cuerpo de la tarjeta (para que no compita con el título) */
.service-card__desc,
.service-card__purpose,
.service-card__bullets,
.service-card__details,
.service-card__details summary,
.service-card__details ul{
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.6;
}

/* 2) De paso, el texto muted un pelín más suave */
.service-card__purpose,
.service-card__details ul{
  color: var(--mkm-text-muted);
}

/* 3) (Opcional) Si quieres que el título destaque aún más en desktop */
@media (min-width: 1100px){
  .service-card__title{
    font-size: clamp(19px, 1.35vw, 23px);
  }
}

/* =========================================
   ICONOS SVG UNIFICADOS (mismo estilo que Strategic)
   ========================================= */

.strategic-services .service-card__icon{
  /* Mantén tu look actual de pastilla */
  color: var(--mkm-secondary-700); /* el stroke será este color */
  font-size: 0; /* evita que el contenedor reserve “línea” como si fuese texto */
}

.strategic-services .service-card__icon svg{
  width: 28px;
  height: 28px;
  display: block;
}

.btn.btn--strategic:hover,
.btn.btn--strategic:focus-visible{
  background: color-mix(in srgb, var(--mkm-secondary-500) 88%, #000);
  border-color: color-mix(in srgb, var(--mkm-secondary-500) 88%, #000);
  transform: var(--hover-lift);
  box-shadow: var(--shadow-sm);
}
/* =========================================
   MKM STUDIO: nueva asignación cromática
   Studio = familia Secondary
   ========================================= */
#mkm-studio.section{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;

  /* Variables locales del bloque */
  --studio-accent: var(--mkm-secondary-500);
  --studio-accent-strong: var(--mkm-secondary-700);
  --studio-soft-bg: color-mix(in srgb, var(--mkm-secondary-500) 8%, #ffffff);
  --studio-soft-bg-2: color-mix(in srgb, var(--mkm-secondary-500) 12%, #ffffff);
  --studio-soft-border: color-mix(in srgb, var(--mkm-secondary-500) 18%, #ffffff);

  background: color-mix(in srgb, var(--mkm-secondary-500) 7%, var(--surface-bg));
}

/* =========================================
   HERO MKM STUDIO
   ========================================= */

.studio-hero{
  background: var(--surface-card);
  border: 1px solid var(--mkm-cool-100);
  border-top: 4px solid var(--studio-accent);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.studio-hero__container{
  display: grid;
  gap: var(--space-6);
  padding: clamp(24px, 3vw, 44px);
  align-items: center;
}

@media (min-width: 992px){
  .studio-hero__container{
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
  }
}

/* Badge */
.studio-badge{
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;

  color: var(--studio-accent-strong);
  background: var(--studio-soft-bg);
  border: 1px solid var(--studio-soft-border);

  padding: 6px 10px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: var(--space-3);
}

.studio-hero__title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  margin: 0 0 var(--space-3);
  max-width: 28ch;
}

.studio-hero__subtitle{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
  margin: 0 0 var(--space-5);
  max-width: var(--text-max);
}

/* Insight */
.studio-hero__insight{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: center;

  background: var(--studio-soft-bg);
  border: 1px solid var(--studio-soft-border);
  border-left: 4px solid var(--studio-accent);

  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.studio-hero__insight p{
  margin: 0;
  color: var(--mkm-primary-900);
  font-weight: var(--fw-medium);
}

.studio-hero__icon{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;

  background: var(--studio-soft-bg-2);
  color: var(--studio-accent-strong);
}

.studio-hero__icon svg{
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* =========================================
   BOTÓN STUDIO GLOBAL
   ========================================= */
.btn--studio{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding-inline: 18px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--mkm-secondary-500);
  background: var(--mkm-secondary-500);
  color: #fff;
  font-weight: var(--fw-bold);
  text-decoration: none;
  width: fit-content;
  max-width: 100%;
  transition:
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.btn--studio:hover,
.btn--studio:focus-visible{
  background: var(--mkm-secondary-700);
  border-color: var(--mkm-secondary-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Ajustes específicos SOLO para el botón del hero Studio */
#mkm-studio .btn.btn--studio{
  border-radius: var(--radius-sm);
  height: var(--btn-h);
  padding-inline: 16px;
  font-size: var(--fs-small);
  width: fit-content;
  max-width: 100%;
}

/* Visual */
.studio-hero__visual{
  display: grid;
}

.studio-mini{
  border-radius: var(--radius-lg);
  border: 1px solid var(--mkm-cool-100);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--mkm-cool-50) 72%, #ffffff) 100%
  );
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.studio-mini__top{
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-5);
}

@media (max-width: 520px){
  .studio-mini__top{ grid-template-columns: 1fr; }
}

.studio-mini__tile{
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mkm-secondary-500) 14%, var(--mkm-cool-100));
  background: color-mix(in srgb, var(--mkm-secondary-500) 6%, #ffffff);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

.tile__label{
  display: block;
  font-size: 12px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-text-muted);
  line-height: 1.2;
  margin-bottom: 6px;
}

.tile__value{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
  font-size: clamp(16px, 1.3vw, 20px);
}

/* Preview */
.studio-mini__preview{
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mkm-secondary-500) 18%, #ffffff);
  background:
    radial-gradient(
      700px circle at 20% 0%,
      color-mix(in srgb, var(--mkm-secondary-500) 14%, transparent) 0%,
      transparent 55%
    ),
    color-mix(in srgb, var(--mkm-cool-50) 74%, #ffffff);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.studio-preview__bar{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.studio-preview__title{
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-text-muted);
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mkm-cool-100);
}

.dot--a{ background: color-mix(in srgb, var(--mkm-secondary-500) 50%, #fff); }
.dot--b{ background: color-mix(in srgb, var(--mkm-secondary-500) 32%, #fff); }
.dot--c{ background: color-mix(in srgb, var(--mkm-secondary-500) 18%, #fff); }

.studio-preview__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.thumb{
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mkm-secondary-500) 14%, var(--mkm-cool-100));
  height: 84px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mkm-secondary-500) 8%, #ffffff),
      #ffffff
    );
  position: relative;
  display: grid;
  place-items: start start;
  padding: 10px;
}

.thumb--2{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mkm-primary-500) 10%, #fff),
    #fff
  );
}

.thumb--3{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mkm-secondary-500) 12%, #fff),
    #fff
  );
}

.thumb--4{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mkm-cool-50) 78%, #fff),
    #fff
  );
}

.thumb span{
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mkm-primary-900) 85%, #000);
  background: rgba(255,255,255,0.84);
  border: 1px solid color-mix(in srgb, var(--mkm-secondary-500) 16%, var(--mkm-cool-100));
  border-radius: 999px;
  padding: 5px 9px;
}

.studio-mini__legend{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mkm-text-muted);
  font-size: 0.95rem;
}

.dot-legend{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mkm-secondary-500);
}

/* Alinear como Strategic: contenido centrado, pero badge a la izquierda */
#mkm-studio .studio-hero__content{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Título y subtítulo mantienen alineación natural */
#mkm-studio .studio-hero__title,
#mkm-studio .studio-hero__subtitle{
  align-self: stretch;
}

/* Badge a la izquierda */
#mkm-studio .studio-badge{
  align-self: flex-start;
}

/* Insight y botón comparten eje visual */
#mkm-studio .studio-hero__insight{
  width: min(560px, 100%);
}

#mkm-studio .btn.btn--studio{
  align-self: center;
}


/* =========================================
   OFERTAS DESTACADAS | STUDIO
   ========================================= */

.studio-offers__inner{
  width: min(var(--container-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.studio-offers__head{
  display: grid;
  gap: var(--space-3);
  max-width: var(--text-max-wide);
  margin-bottom: var(--space-6);
}

.studio-offers__eyebrow{
  margin: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-accent-500);
}

.studio-offers__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.studio-offers__intro{
  margin: 0;
  max-width: 80ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.studio-offers__track{
  display: grid;
  gap: var(--grid-gap);
}

.studio-offer{
  position: relative;
  display: grid;
  gap: var(--space-5);
  min-height: 100%;
  padding: clamp(20px, 2.4vw, 32px);
  background:
    radial-gradient(560px 220px at 100% 0%, rgba(232, 90, 37, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  align-content: start;
}

.studio-offer::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
}

.studio-offer--foundational::before{
  background: linear-gradient(
    90deg,
    var(--mkm-accent-500) 0%,
    var(--mkm-secondary-500) 100%
  );
}

.studio-offer--web::before{
  background: linear-gradient(
    90deg,
    var(--mkm-accent-500) 0%,
    #f28a63 100%
  );
}

.studio-offer__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.studio-offer__kicker{
  margin: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-primary-500);
}

.studio-offer__tag{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 90, 37, 0.18);
  background: rgba(232, 90, 37, 0.08);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--mkm-accent-500);
  white-space: nowrap;
}

.studio-offer--foundational .studio-offer__tag{
  border-color: rgba(42, 157, 143, 0.22);
  background: rgba(42, 157, 143, 0.10);
  color: var(--mkm-secondary-700);
}

.studio-offer__content{
  display: grid;
  gap: var(--space-4);
}

.studio-offer__title-card{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-900);
}

.studio-offer__text{
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.studio-offer__block{
  display: grid;
  gap: var(--space-3);
}

.studio-offer__label{
  margin: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-primary-300);
}

.studio-offer__includes{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-offer__includes li{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--mkm-cool-100);
  background: var(--mkm-cool-50);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--mkm-text-main);
  white-space: nowrap;
}

.studio-offer__flow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 16px;
  list-style: none;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(240, 244, 248, 0.96), rgba(240, 244, 248, 0.88));
  border: 1px solid var(--mkm-cool-100);
}

.studio-offer__flow li{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--mkm-cool-100);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  white-space: nowrap;
}

.studio-offer__flow li:not(:last-child)::after{
  content: "→";
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-52%);
  color: var(--mkm-primary-300);
  font-weight: var(--fw-regular);
}

.studio-offer__benefit{
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(232, 90, 37, 0.06);
  color: var(--mkm-primary-900);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
}

.studio-offer--foundational .studio-offer__benefit{
  background: linear-gradient(
    180deg,
    rgba(42, 157, 143, 0.09),
    rgba(232, 90, 37, 0.05)
  );
}

.studio-offer__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: start;
  gap: 10px;

  width: fit-content;
  min-height: var(--btn-h);
  padding-inline: 18px;
  padding-block: 0;

  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--mkm-accent-500);
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;

  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    filter var(--dur-2) var(--ease);
}

.studio-offer__cta:hover,
.studio-offer__cta:focus-visible{
  transform: var(--hover-lift);
  background: #d84f1d;
  filter: brightness(1.02);
}

.studio-offer__cta:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.studio-offer__cta span[aria-hidden="true"]{
  transform: translateY(1px);
}

/* Beneficio del paquete fundacional con un matiz algo más diferenciado */
.studio-offer__benefit--foundational{
  background: linear-gradient(
    180deg,
    rgba(42, 157, 143, 0.09),
    rgba(232, 90, 37, 0.05)
  );
}

/* =========================
   PROCESO / PUESTA EN MARCHA
   ========================= */

.studio-offer__steps{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-offer__steps li{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--mkm-cool-100);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(8, 77, 110, 0.03);
}

.studio-offer__steps li:not(:last-child)::after{
  content: "→";
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--mkm-primary-300);
  font-weight: var(--fw-regular);
  pointer-events: none;
}

/* Afinamos ligeramente las pastillas de "Incluye" para que
   se distingan más del bloque de proceso */
.studio-offer__includes li{
  background: var(--mkm-cool-50);
  border: 1px solid var(--mkm-cool-100);
  border-radius: var(--radius-pill);
  color: var(--mkm-text-main);
  font-weight: var(--fw-medium);
}

/* ===== Escritorio ===== */
@media (min-width: 992px){
  .studio-offers__track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* ===== Tablet y móvil ===== */
@media (max-width: 991px){
  .studio-offers__head{
    margin-bottom: var(--space-5);
  }

  .studio-offer{
    padding: 22px;
  }
}

@media (max-width: 767px){
  .studio-offer__flow{
    gap: 10px 18px;
    padding: 14px;
  }

  .studio-offer__flow li:not(:last-child)::after{
    right: -14px;
  }

  .studio-offer__cta{
    width: 100%;
  }

  /* Preparado para el futuro:
     cuando haya 3 o más tarjetas en móvil, se podrán recorrer en horizontal */
  .studio-offers__track:has(> .studio-offer:nth-child(3)){
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(86%, 1fr);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-2);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .studio-offers__track:has(> .studio-offer:nth-child(3))::-webkit-scrollbar{
    display: none;
  }

  .studio-offers__track:has(> .studio-offer:nth-child(3)) > .studio-offer{
    scroll-snap-align: start;
  }
}

.studio-offer__steps{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-offer__steps li{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--mkm-cool-100);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.studio-offer__steps li:not(:last-child)::after{
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--mkm-primary-300);
  font-weight: var(--fw-regular);
}

/* =========================================
   PÁGINA CONTACTO MKM
   ========================================= */

/* Base de página */
.contact-page{
  color: var(--text-base);
}

/* =========================
   HERO CONTACTO
   ========================= */

.contact-hero{
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(142, 202, 230, 0.18) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,249,252,1) 100%);
  border-bottom: 1px solid rgba(79, 109, 122, 0.16);
}

.contact-hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(42,157,143,0) 0%,
    rgba(42,157,143,0.32) 50%,
    rgba(42,157,143,0) 100%
  );
}

.contact-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.contact-hero__content{
  min-width: 0;
}

.contact-hero__eyebrow{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.contact-hero__title{
  margin: 0;
  
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);
  color: var(--mkm-primary-500);
  
  
}

.contact-hero__text{
  margin: var(--space-5) 0 0;
  max-width: 58ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.contact-hero__aside{
  display: grid;
  gap: var(--space-3);
  align-self: start;
}

.contact-quick-card{
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.95) 0%,
    rgba(240,244,248,0.9) 100%
  );
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  
}

.contact-quick-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-digital);
}

.contact-quick-card__icons{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.contact-quick-card__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mkm-secondary-500);
}

.contact-quick-card__icon svg{
  width: 18px;
  height: 18px;
}
.contact-quick-card__label{
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mkm-text-muted);
}

/* Solo enlaces: teléfono y correo */
a.contact-quick-card__value{
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease),
    text-decoration-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

a.contact-quick-card__value:hover,
a.contact-quick-card__value:focus-visible{
  color: var(--mkm-accent-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a.contact-quick-card__value:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

.contact-quick-card__value{
   display: block;
  margin: 0;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--mkm-primary-500);
  
  overflow-wrap: anywhere;
}

.contact-quick-card__value--address{
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--mkm-primary-900);
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}

.contact-quick-card__value:hover,
.contact-quick-card__value:focus-visible{
  color: var(--mkm-accent-500);
  transform: translateY(-1px);
}

.contact-quick-card__value--text{
  color: var(--mkm-primary-900);
  pointer-events: none;
}

.contact-quick-card__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--color-primary, #084D6E);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-quick-card__whatsapp:hover,
.contact-quick-card__whatsapp:focus-visible {
  background: var(--color-accent, #E85A25);
  color: #fff;
  transform: translateY(-1px);
}

.contact-quick-card__whatsapp:focus-visible {
  outline: 3px solid rgba(232, 90, 37, 0.28);
  outline-offset: 3px;
}



/* =========================
   BLOQUE PRINCIPAL
   ========================= */

/* SEGUNDO BLOQUE DIFERENCIADO Y MÁS ENFOCADO */
.contact-main{
  background: var(--surface-bg);
}

   .contact-main__grid{
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* =========================
   INFO CONTACTO
   ========================= */

.contact-info{
  min-width: 0;
}

.contact-info__header{
  margin-bottom: var(--space-6);
}

.contact-main__inner{
  max-width: 920px;
  margin-inline: auto;
}

.contact-main__header{
  margin-bottom: var(--space-6);
  text-align: center;
}

.contact-main__eyebrow{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.contact-main__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  
}

.contact-main__text{
  margin: var(--space-4) auto 0;
  
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}
.contact-info__eyebrow{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.contact-info__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
  
}

.contact-info__text{
  margin: var(--space-4) 0 0;
  max-width: 54ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.contact-info__cards{
  display: grid;
  gap: var(--space-4);
}

.contact-info-card{
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.contact-info-card:hover{
  transform: var(--hover-lift);
  box-shadow: var(--card-border), var(--shadow-md);
  border-color: rgba(42, 157, 143, 0.22);
}

.contact-info-card__kicker{
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-text-muted);
}

.contact-info-card__link{
  display: inline-block;
  margin: 0;
  font-size: clamp(19px, 1.45vw, 24px);
  line-height: 1.35;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease);
}

.contact-info-card__link:hover,
.contact-info-card__link:focus-visible{
  color: var(--mkm-accent-500);
}

.contact-info-card__address{
  margin: 0;
  font-style: normal;
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.45;
  font-weight: var(--fw-medium);
  color: var(--mkm-primary-900);
}

.contact-info-card__meta{
  margin: var(--space-3) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mkm-text-muted);
}

/* =========================
   FORMULARIO
   ========================= */

.contact-form-wrap{
  min-width: 0;
}

.contact-form-card{
  position: relative;
  padding: clamp(26px, 2.8vw, 40px);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,244,248,0.78) 100%);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--mkm-cool-100), var(--shadow-md);
  overflow: hidden;
}

.contact-form-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--mkm-secondary-500) 0%,
    var(--mkm-tertiary-300) 45%,
    var(--mkm-accent-500) 100%
  );
}

.contact-form-card__header{
  margin-bottom: var(--space-6);
}

.contact-form-card__eyebrow{
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.contact-form-card__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  
}

.contact-form-card__text{
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.contact-form{
  min-width: 0;
}

.contact-form__legend{
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mkm-text-muted);
}

.contact-form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-field{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form-field--full{
  grid-column: 1 / -1;
}

.form-field label{
  font-size: 15px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-900);
}

.form-required{
  color: var(--mkm-accent-500);
  font-weight: var(--fw-bold);
}

.form-field input,
.form-field textarea{
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(214, 222, 230, 1);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--text-base);
  font: inherit;
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.form-field select{
  width: 100%;
  min-width: 0;
  min-height: var(--input-h);
  padding: 0 48px 0 16px;
  border: 1px solid rgba(214, 222, 230, 1);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--text-base);
  font: inherit;
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--mkm-primary-300) 50%),
    linear-gradient(135deg, var(--mkm-primary-300) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form-field input,
.form-field select{
  min-height: var(--input-h);
  padding-left: 16px;
}

.form-field textarea{
  resize: vertical;
  min-height: 160px;
  padding: 14px 16px;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color: var(--placeholder);
  opacity: 1;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover{
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline: none;
  border-color: var(--mkm-secondary-500);
  box-shadow: var(--focus-ring);
  background-color: #fff;
}

.form-field select:hover,
.form-field select:focus{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mkm-primary-500) 50%),
    linear-gradient(135deg, var(--mkm-primary-500) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Checkbox */
.form-check{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.form-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  min-height: auto;
  margin: 2px 0 0;
  accent-color: var(--mkm-secondary-500);
  border-radius: 4px;
}

.form-check span{
  font-size: 15px;
  line-height: 1.6;
  color: var(--mkm-text-muted);
}

.form-check a{
  color: var(--mkm-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-2) var(--ease);
}

.form-check a:hover,
.form-check a:focus-visible{
  color: var(--mkm-accent-500);
}

.form-response{
  display: none;
  margin: 0 0 var(--space-4);
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.form-response.is-visible{
  display: block;
}

.form-response--success{
  color: var(--mkm-primary-500);
  background: rgba(8, 77, 110, 0.08);
  border-color: rgba(8, 77, 110, 0.18);
}

.form-response--error{
  color: var(--mkm-accent-500);
  background: rgba(232, 90, 37, 0.08);
  border-color: rgba(232, 90, 37, 0.18);
}

.form-error{
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mkm-accent-500);
}

.form-field input.is-invalid,
.form-field textarea.is-invalid,
.form-field select.is-invalid{
  border-color: var(--mkm-accent-500);
  box-shadow: 0 0 0 4px rgba(232, 90, 37, 0.12);
  background-color: #fff;
}

.form-field input.is-valid,
.form-field textarea.is-valid,
.form-field select.is-valid{
  border-color: var(--mkm-secondary-500);
  box-shadow: 0 0 0 4px rgba(0, 140, 110, 0.10);
  background-color: #fff;
}

.form-check input[type="checkbox"].is-invalid{
  outline: 2px solid rgba(232, 90, 37, 0.22);
  outline-offset: 2px;
}

.form-check input[type="checkbox"].is-valid{
  outline: 2px solid rgba(0, 140, 110, 0.16);
  outline-offset: 2px;
}

/* Honeypot */
.form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Acciones formulario */
.contact-form__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.contact-form__actions .btn{
  flex: 0 0 auto;
}

.contact-form__actions .btn.btn--primary{
  min-width: 220px;
}

.contact-form__microcopy{
  margin: 0;
  width: auto;
  max-width: none;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mkm-text-muted);
}





/* =========================
   RESPONSIVE TABLET
   ========================= */

@media (max-width: 1024px){
  .contact-hero__grid,
  .contact-main__grid{
    grid-template-columns: 1fr;
  }

  .contact-hero__title{
    max-width: 12ch;
  }

  .contact-hero__aside{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: stretch;
  }
}

/* =========================
   RESPONSIVE MÓVIL
   ========================= */

@media (max-width: 767px){
  .contact-hero__grid{
    gap: var(--space-5);
  }

  .contact-hero__title{
    max-width: 100%;
  }

  .contact-hero__text{
    max-width: 100%;
  }

  .contact-hero__aside{
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .contact-main__grid{
    gap: var(--space-5);
  }

  .contact-info__header{
    margin-bottom: var(--space-5);
  }

  .contact-form-card{
    padding: 22px 16px;
  }

  .contact-form__grid{
    grid-template-columns: 1fr;
  }

  .contact-form__actions{
    align-items: stretch;
  }

  .contact-form__actions .btn.btn--primary{
    width: 100%;
    min-width: 0;
    justify-content: center;
  }


  .contact-info-card,
  .contact-quick-card,
  .contact-closing__card{
    padding: 18px 16px;
  }
.contact-quick-card__value{
    font-size: 17px;
  }

  .contact-main__inner{
    max-width: 100%;
  }

  .contact-main__header{
    text-align: left;
  }

  .contact-main__text{
    margin-inline: 0;
    max-width: 100%;
  }
}

/* ==========================================
   SOBRE MKM · BLOQUE 1 INTRODUCCIÓN
   Asume que .section y .contenedor ya existen
========================================== */

.about-intro {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%),
    var(--mkm-warm-50);
}

.about-intro__inner {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

.about-intro__header {
  max-width: min(100%, var(--text-max-rewide));
}

.about-intro__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mkm-primary-500);
}

.about-intro__title {
  margin: 0;
  
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-headings);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.about-intro__lead {
  margin: var(--space-5) 0 0;
  
  font-family: var(--font-body);
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-base);
}

/* Grid de tarjetas */
.about-intro__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Tarjeta base */
.about-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--border-base);
  border-top-width: 4px;
  
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--text-base);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
  isolation: isolate;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

/* Hover / focus */
.about-card:hover {
  transform: var(--hover-lift);
  box-shadow: 0 0 0 1px var(--mkm-cool-100), var(--shadow-md);
}

.about-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--mkm-cool-100),
    var(--shadow-md),
    var(--focus-ring);
}

.about-card:hover::before,
.about-card:focus-visible::before {
  opacity: 1;
}

.about-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.about-card__icon svg {
  width: 24px;
  height: 24px;
}

.about-card__eyebrow {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-card__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  
  
}

.about-card__text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.about-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.about-card__arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease);
}

.about-card:hover .about-card__arrow,
.about-card:focus-visible .about-card__arrow {
  transform: translateX(4px);
}

/* Variante Strategic */
.about-card--strategic {
  border-top-color: var(--mkm-primary-500);
}

.about-card--strategic::before {
  background:
    linear-gradient(180deg, rgba(8, 77, 110, 0.035) 0%, rgba(8, 77, 110, 0) 42%);
}

.about-card--strategic .about-card__icon {
  background: rgba(8, 77, 110, 0.08);
  color: var(--mkm-primary-500);
}

.about-card--strategic .about-card__eyebrow,
.about-card--strategic .about-card__cta {
  color: var(--mkm-primary-500);
}

/* Variante Studio */
.about-card--studio {
  border-top-color: var(--mkm-secondary-500);
}

.about-card--studio::before {
  background:
    linear-gradient(180deg, rgba(42, 157, 143, 0.05) 0%, rgba(42, 157, 143, 0) 42%);
}

.about-card--studio .about-card__icon {
  background: rgba(42, 157, 143, 0.1);
  color: var(--mkm-secondary-500);
}

.about-card--studio .about-card__eyebrow,
.about-card--studio .about-card__cta {
  color: var(--mkm-secondary-700);
}

.about-card--strategic .about-card__title {
  color: var(--mkm-primary-500);
}

.about-card--studio .about-card__title {
  color: var(--mkm-secondary-500);
}

/* Responsive */
@media (max-width: 991px) {
  .about-intro__title {
    max-width: 16ch;
  }

  .about-intro__cards {
    grid-template-columns: 1fr;
  }

  .about-card__title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .about-intro__title {
    max-width: 12ch;
    font-size: clamp(32px, 9vw, 44px);
  }

  .about-intro__lead {
    font-size: 16px;
  }



  .about-card {
    padding: 24px 20px;
  }

  .about-card__title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .about-card__text {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-card,
  .about-card::before,
  .about-card__arrow {
    transition: none;
  }

  .about-card:hover {
    transform: none;
  }
}

/* =========================
   BLOQUE 2 · MISIÓN / VISIÓN / ESENCIA
========================= */

.mkm-purpose {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    linear-gradient(
      180deg,
      rgba(240, 244, 248, 0.96) 0%,
      rgba(246, 241, 234, 0.52) 100%
    );
  overflow: clip;
}

.mkm-purpose::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(38vw, 420px);
  height: min(38vw, 420px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(42, 157, 143, 0.10) 0%,
      rgba(42, 157, 143, 0.00) 72%
    );
  pointer-events: none;
}

.mkm-purpose .contenedor {
  position: relative;
  z-index: var(--z-base);
}

.mkm-purpose__head {
  
  margin-bottom: clamp(32px, 5vw, 56px);
}

.mkm-purpose__eyebrow,
.mkm-purpose__visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.mkm-purpose__eyebrow::before,
.mkm-purpose__visual-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mkm-secondary-500);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.12);
}

.mkm-purpose__title {
  margin: 0;
  
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  
}

.mkm-purpose__lead {
  margin: var(--space-4) 0 0;
  
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.mkm-purpose__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.mkm-purpose__cards {
  grid-column: span 5;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-5);
  height: 100%;
}

.mkm-purpose-card {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface-card);
  border: var(--border-1) solid var(--border-base);
  
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-purpose-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  border-color: rgba(42, 157, 143, 0.28);
}

.mkm-purpose-card__label {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mkm-primary-300);
}

.mkm-purpose-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.16;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.mkm-purpose-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-base);
  max-width: 36ch;
}

.mkm-purpose-card--essence {
  background:
    linear-gradient(
      145deg,
      var(--surface-dark-1) 0%,
      var(--mkm-primary-500) 100%
    );
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
}

.mkm-purpose-card--essence .mkm-purpose-card__label {
  color: var(--mkm-tertiary-300);
}

.mkm-purpose-card--essence .mkm-purpose-card__title,
.mkm-purpose-card--essence .mkm-purpose-card__text {
  color: var(--mkm-text-invert);
}

.mkm-purpose__visual {
  grid-column: span 7;
  position: relative;
  padding: clamp(24px, 2.8vw, 36px);
  background: rgba(255, 255, 255, 0.72);
  border: var(--border-1) solid rgba(79, 109, 122, 0.16);
  
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur-sm);
}

.mkm-purpose__visual-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.mkm-purpose__visual-text {
  margin: var(--space-4) 0 0;
  max-width: 54ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================
   DIAGRAMA
========================= */

.mkm-loop {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  aspect-ratio: 1 / 1;
}

.mkm-loop::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(79, 109, 122, 0.35);
  background:
    radial-gradient(
      circle,
      rgba(42, 157, 143, 0.07) 0%,
      rgba(42, 157, 143, 0.00) 68%
    );
}

.mkm-loop::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px solid rgba(142, 202, 230, 0.28);
}

.mkm-loop__core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(44%, 240px);
  aspect-ratio: 1 / 1;
  padding: var(--space-5);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(42, 157, 143, 0.24) 0%,
      rgba(42, 157, 143, 0.00) 38%
    ),
    linear-gradient(
      160deg,
      var(--mkm-primary-900) 0%,
      var(--mkm-primary-500) 100%
    );
  color: var(--mkm-text-invert);
  box-shadow: var(--shadow-lg);
}

.mkm-loop__core-kicker {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.72);
}

.mkm-loop__core-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: var(--track-h);
}

.mkm-loop__core-subtitle {
  display: block;
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(240, 244, 248, 0.84);
}

.mkm-loop__node {
  position: absolute;
  width: min(24%, 138px);
  min-height: 112px;
  padding: var(--space-4);
  display: grid;
  place-items: center;
  gap: var(--space-2);
  text-align: center;
  background: var(--surface-card);
  border: var(--border-1) solid rgba(79, 109, 122, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-loop__node:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(42, 157, 143, 0.30);
}

.mkm-loop__node-step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.10);
  color: var(--mkm-secondary-700);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.mkm-loop__node-text {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.15;
  color: var(--mkm-primary-900);
}

.mkm-loop__node--top {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.mkm-loop__node--right {
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

.mkm-loop__node--bottom {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.mkm-loop__node--left {
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
}

/* =========================
   FOCUS
========================= */

.mkm-purpose-card:focus-within,
.mkm-loop__node:focus-within {
  box-shadow: var(--focus-ring), var(--shadow-md);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1080px) {
  .mkm-purpose__cards,
  .mkm-purpose__visual {
    grid-column: span 12;
  }

  .mkm-purpose__title {
    max-width: 20ch;
  }

  .mkm-purpose__visual {
    margin-top: var(--space-2);
  }
}

@media (max-width: 640px) {
  .mkm-purpose {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .mkm-purpose__head {
    margin-bottom: var(--space-6);
  }

  .mkm-purpose__title {
    max-width: 12ch;
  }

  .mkm-purpose-card,
  .mkm-purpose__visual {
    border-radius: var(--radius-lg);
  }

  .mkm-loop {
    aspect-ratio: auto;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .mkm-loop::before,
  .mkm-loop::after {
    display: none;
  }

  .mkm-loop__core {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
    min-height: 180px;
    border-radius: calc(var(--radius-lg) + 6px);
    grid-column: 1 / -1;
  }

  .mkm-loop__node {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-height: 96px;
  }

  .mkm-loop__node--top,
  .mkm-loop__node--right,
  .mkm-loop__node--bottom,
  .mkm-loop__node--left {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}

/* =========================
   REDUCIR ANIMACIÓN
========================= */

@media (prefers-reduced-motion: reduce) {
  .mkm-purpose-card,
  .mkm-loop__node {
    transition: none;
  }
}

/* =========================
   BLOQUE 3 · FILOSOFÍA Y METODOLOGÍA
========================= */

.mkm-method {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    linear-gradient(
      180deg,
      rgba(246, 241, 234, 0.46) 0%,
      rgba(240, 244, 248, 0.94) 100%
    );
  overflow: clip;
}

.mkm-method::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -8%;
  width: min(36vw, 420px);
  height: min(36vw, 420px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(42, 157, 143, 0.12) 0%,
      rgba(42, 157, 143, 0) 72%
    );
  pointer-events: none;
}

.mkm-method::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -6%;
  width: min(30vw, 320px);
  height: min(30vw, 320px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(8, 77, 110, 0.10) 0%,
      rgba(8, 77, 110, 0) 72%
    );
  pointer-events: none;
}

.mkm-method .contenedor {
  position: relative;
  z-index: var(--z-base);
}

.mkm-method__head {
  
  margin-bottom: clamp(32px, 5vw, 56px);
}

.mkm-method__eyebrow,
.mkm-method__flow-eyebrow,
.mkm-method__support-kicker,
.mkm-method-quote__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.mkm-method__eyebrow::before,
.mkm-method__flow-eyebrow::before,
.mkm-method__support-kicker::before,
.mkm-method-quote__kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mkm-secondary-500);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.12);
}

.mkm-method__title {
  margin: 0;
  
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  
}

.mkm-method__lead {
  margin: var(--space-4) 0 0;
  
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================
   INTRO
========================= */

.mkm-method__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.mkm-method-quote {
  grid-column: span 5;
  padding: clamp(24px, 2.8vw, 36px);
  
  background:
    linear-gradient(
      145deg,
      var(--surface-dark-1) 0%,
      var(--surface-dark-2) 100%
    );
  box-shadow: var(--shadow-lg);
  color: var(--mkm-text-invert);
}

.mkm-method-quote__kicker {
  color: var(--mkm-tertiary-300);
}

.mkm-method-quote__kicker::before {
  background: var(--mkm-tertiary-300);
  box-shadow: 0 0 0 6px rgba(142, 202, 230, 0.14);
}

.mkm-method-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  
}

.mkm-method-quote__caption {
  margin: var(--space-5) 0 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(240, 244, 248, 0.84);
}

.mkm-method__support {
  grid-column: span 7;
  padding: clamp(24px, 2.8vw, 36px);
  
  background: rgba(255, 255, 255, 0.76);
  border: var(--border-1) solid rgba(79, 109, 122, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur-sm);
}

.mkm-method__support-text {
  margin: 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: var(--lh-body);
  color: var(--text-base);
}

/* =========================
   PRINCIPIOS
========================= */

.mkm-method__principles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-bottom: clamp(28px, 4vw, 40px);
}

.mkm-principle {
  grid-column: span 4;
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  
  background: var(--surface-card);
  border: var(--border-1) solid var(--border-base);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-principle:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  border-color: rgba(42, 157, 143, 0.28);
}

.mkm-principle__num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.10);
  color: var(--mkm-secondary-700);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.mkm-principle__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.14;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.mkm-principle__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================
   FLUJO PDC
========================= */

.mkm-method__flow-wrap {
  position: relative;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--surface-card);
  border: var(--border-1) solid rgba(79, 109, 122, 0.14);
  box-shadow: var(--shadow-md);
}

.mkm-method__flow-head {
  max-width: var(--text-max-wide);
  margin-bottom: clamp(24px, 3vw, 32px);
}

.mkm-method__flow-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.mkm-method__flow-lead {
  margin: var(--space-4) 0 0;
  
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.mkm-method-flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.mkm-method-flow::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 34px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(42, 157, 143, 0.18) 0%,
      rgba(8, 77, 110, 0.25) 50%,
      rgba(42, 157, 143, 0.18) 100%
    );
  pointer-events: none;
}

.mkm-method-step {
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: 72px var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(240, 244, 248, 0.54) 0%,
      rgba(255, 255, 255, 1) 100%
    );
  border: var(--border-1) solid rgba(79, 109, 122, 0.12);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-method-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(8, 77, 110, 0.20);
}

.mkm-method-step__num {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mkm-primary-900);
  color: var(--mkm-text-invert);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 6px rgba(16, 38, 51, 0.08);
}

.mkm-method-step__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.14;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-900);
}

.mkm-method-step__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.6;
  color: var(--mkm-text-muted);
}

/* =========================
   FOCUS
========================= */

.mkm-principle:focus-within,
.mkm-method-step:focus-within {
  box-shadow: var(--focus-ring), var(--shadow-md);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1080px) {
  .mkm-method-quote,
  .mkm-method__support {
    grid-column: span 12;
  }

  .mkm-principle {
    grid-column: span 12;
  }

  .mkm-method-flow {
    grid-template-columns: 1fr;
  }

  .mkm-method-flow::before {
    display: none;
  }

  .mkm-method-step {
    padding: 68px var(--space-4) var(--space-5);
  }
}

@media (max-width: 640px) {
  .mkm-method {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .mkm-method__head {
    margin-bottom: var(--space-6);
  }

  .mkm-method__title {
    max-width: 12ch;
  }

  .mkm-method-quote__text {
    font-size: clamp(22px, 7vw, 30px);
  }

  .mkm-method__support,
  .mkm-method__flow-wrap,
  .mkm-principle,
  .mkm-method-quote {
    border-radius: var(--radius-lg);
  }
}

/* =========================
   REDUCIR ANIMACIÓN
========================= */

@media (prefers-reduced-motion: reduce) {
  .mkm-principle,
  .mkm-method-step {
    transition: none;
  }
}

/* =========================
   VARIACIÓN CROMÁTICA EN LAS 5 FASES
========================= */

.mkm-method-step:nth-child(1) .mkm-method-step__num {
  background: rgba(142, 202, 230, 0.28);
  color: var(--mkm-primary-900);
  box-shadow: 0 0 0 6px rgba(142, 202, 230, 0.12);
}

.mkm-method-step:nth-child(1) .mkm-method-step__title {
  color: var(--mkm-primary-500);
}

.mkm-method-step:nth-child(2) .mkm-method-step__num {
  background: rgba(42, 157, 143, 0.14);
  color: var(--mkm-secondary-700);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.10);
}

.mkm-method-step:nth-child(2) .mkm-method-step__title {
  color: var(--mkm-secondary-700);
}

.mkm-method-step:nth-child(3) .mkm-method-step__num {
  background: rgba(8, 77, 110, 0.12);
  color: var(--mkm-primary-500);
  box-shadow: 0 0 0 6px rgba(8, 77, 110, 0.08);
}

.mkm-method-step:nth-child(3) .mkm-method-step__title {
  color: var(--mkm-primary-900);
}

.mkm-method-step:nth-child(4) .mkm-method-step__num {
  background: rgba(42, 157, 143, 0.18);
  color: var(--mkm-secondary-700);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.10);
}

.mkm-method-step:nth-child(4) .mkm-method-step__title {
  color: var(--mkm-secondary-700);
}

.mkm-method-step:nth-child(5) .mkm-method-step__num {
  background: rgba(232, 90, 37, 0.14);
  color: var(--mkm-accent-500);
  box-shadow: 0 0 0 6px rgba(232, 90, 37, 0.08);
}

.mkm-method-step:nth-child(5) .mkm-method-step__title {
  color: var(--mkm-accent-500);
}


/* =========================
   BLOQUE 4 · VALORES
========================= */

.mkm-values {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    linear-gradient(
      180deg,
      rgba(240, 244, 248, 0.94) 0%,
      rgba(246, 241, 234, 0.52) 100%
    );
  overflow: clip;
}

.mkm-values::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -6%;
  width: min(34vw, 380px);
  height: min(34vw, 380px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(8, 77, 110, 0.10) 0%,
      rgba(8, 77, 110, 0) 72%
    );
  pointer-events: none;
}

.mkm-values::after {
  content: "";
  position: absolute;
  right: -7%;
  bottom: -12%;
  width: min(36vw, 420px);
  height: min(36vw, 420px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(42, 157, 143, 0.12) 0%,
      rgba(42, 157, 143, 0) 72%
    );
  pointer-events: none;
}

.mkm-values .contenedor {
  position: relative;
  z-index: var(--z-base);
}

.mkm-values__head {
  max-width: var(--text-max-wide);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.mkm-values__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.mkm-values__eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mkm-secondary-500);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.12);
}

.mkm-values__title {
  margin: 0;
 
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.mkm-values__lead {
  margin: var(--space-4) 0 0;
  
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================
   GRID DE VALORES
========================= */

.mkm-values__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.mkm-value-card {
  grid-column: span 6;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2vw, 24px);
  align-items: start;
  min-height: 100%;
  padding: clamp(22px, 2.5vw, 32px);
  background: rgba(255, 255, 255, 0.82);
  border: var(--border-1) solid rgba(79, 109, 122, 0.14);
  border-radius: calc(var(--radius-lg) + 2px);
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.mkm-value-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-lg);
  border-color: rgba(42, 157, 143, 0.24);
}

.mkm-value-card__icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      rgba(8, 77, 110, 0.12) 0%,
      rgba(42, 157, 143, 0.14) 100%
    );
  color: var(--mkm-primary-500);
  box-shadow:
    inset 0 0 0 1px rgba(8, 77, 110, 0.08),
    0 6px 18px rgba(8, 77, 110, 0.08);
}

.mkm-value-card__icon svg {
  width: 24px;
  height: 24px;
}

.mkm-value-card__body {
  min-width: 0;
}

.mkm-value-card__kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-primary-300);
}

.mkm-value-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.14;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.mkm-value-card__text {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-base);
}

/* =========================
   VARIACIÓN SUTIL POR TARJETA
========================= */

.mkm-value-card:nth-child(1) .mkm-value-card__icon {
  background:
    linear-gradient(
      145deg,
      rgba(8, 77, 110, 0.12) 0%,
      rgba(142, 202, 230, 0.18) 100%
    );
  color: var(--mkm-primary-500);
}

.mkm-value-card:nth-child(2) .mkm-value-card__icon {
  background:
    linear-gradient(
      145deg,
      rgba(42, 157, 143, 0.12) 0%,
      rgba(142, 202, 230, 0.18) 100%
    );
  color: var(--mkm-secondary-700);
}

.mkm-value-card:nth-child(3) .mkm-value-card__icon {
  background:
    linear-gradient(
      145deg,
      rgba(8, 77, 110, 0.12) 0%,
      rgba(42, 157, 143, 0.16) 100%
    );
  color: var(--mkm-primary-900);
}

.mkm-value-card:nth-child(4) .mkm-value-card__icon {
  background:
    linear-gradient(
      145deg,
      rgba(232, 90, 37, 0.10) 0%,
      rgba(8, 77, 110, 0.10) 100%
    );
  color: var(--mkm-accent-500);
}

/* =========================
   FOCUS
========================= */

.mkm-value-card:focus-within {
  box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1080px) {
  .mkm-value-card {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .mkm-values {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .mkm-values__head {
    margin-bottom: var(--space-6);
  }

  .mkm-values__title {
    max-width: 12ch;
  }

  .mkm-value-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .mkm-value-card__icon {
    width: 52px;
    height: 52px;
  }
}

/* =========================
   REDUCIR ANIMACIÓN
========================= */

@media (prefers-reduced-motion: reduce) {
  .mkm-value-card {
    transition: none;
  }
}

/* =========================
   BLOQUE 5 · CONTEXTO LOCAL
========================= */

.mkm-territory {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    linear-gradient(
      180deg,
      rgba(246, 241, 234, 0.56) 0%,
      rgba(240, 244, 248, 0.96) 100%
    );
  overflow: clip;
}

.mkm-territory::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -8%;
  width: min(36vw, 420px);
  height: min(36vw, 420px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(232, 90, 37, 0.10) 0%,
      rgba(232, 90, 37, 0) 72%
    );
  pointer-events: none;
}

.mkm-territory::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -6%;
  width: min(30vw, 340px);
  height: min(30vw, 340px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(42, 157, 143, 0.12) 0%,
      rgba(42, 157, 143, 0) 72%
    );
  pointer-events: none;
}

.mkm-territory .contenedor {
  position: relative;
  z-index: var(--z-base);
}

.mkm-territory__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.mkm-territory__content {
  grid-column: span 5;
  padding: clamp(24px, 2.6vw, 36px);
  background: rgba(255, 255, 255, 0.78);
  border: var(--border-1) solid rgba(79, 109, 122, 0.14);
  
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur-sm);
}

.mkm-territory__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.mkm-territory__eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mkm-secondary-500);
  box-shadow: 0 0 0 6px rgba(42, 157, 143, 0.12);
}

.mkm-territory__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
  
}

.mkm-territory__lead {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-base);
}

.mkm-territory__text {
  margin: var(--space-4) 0 0;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.mkm-territory__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.mkm-territory__pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  
  background: rgba(8, 77, 110, 0.08);
  border: 1px solid rgba(8, 77, 110, 0.10);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  color: var(--mkm-primary-500);
}

.mkm-territory__media {
  grid-column: span 7;
  position: relative;
  margin: 0;
  overflow: hidden;
  
  box-shadow: var(--shadow-lg);
  background: var(--surface-dark-1);
}

.mkm-territory__picture {
  display: block;
}

.mkm-territory__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mkm-territory__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(16, 38, 51, 0.04) 0%,
      rgba(16, 38, 51, 0.12) 48%,
      rgba(16, 38, 51, 0.54) 100%
    );
  pointer-events: none;
}

.mkm-territory__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2vw, 24px);
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  padding: 12px 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  border-radius: var(--radius-md);
  background: rgba(16, 38, 51, 0.58);
  backdrop-filter: var(--blur-sm);
  color: var(--mkm-text-invert);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(240, 244, 248, 0.10);
}



@media (max-width: 767px) {
  .mkm-territory__caption {
    white-space: normal;
    width: calc(100% - 28px);
    max-width: 42ch;
    font-size: 13px;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1080px) {
  .mkm-territory__content,
  .mkm-territory__media {
    grid-column: span 12;
  }

  .mkm-territory__content {
    order: 2;
  }

  .mkm-territory__media {
    order: 1;
  }

  .mkm-territory__title {
    max-width: 16ch;
  }
}

@media (max-width: 767px) {
  .mkm-territory {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .mkm-territory__content {
    padding: var(--space-5);
    
  }

  .mkm-territory__title {
    max-width: 12ch;
  }

  .mkm-territory__image {
    aspect-ratio: 5 / 4;
  }

 

   .mkm-territory__caption {
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    
    overflow-wrap: break-word;
  }

  .mkm-territory__meta {
    gap: var(--space-2);
  }

  .mkm-territory__pill {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 12px;
  }
}

/* =========================
   REDUCIR ANIMACIÓN
========================= */

@media (prefers-reduced-motion: reduce) {
  .mkm-territory__content,
  .mkm-territory__media {
    transition: none;
  }
}

/* ==========================================
   PÁGINA PROYECTOS
   ========================================== */

.projects-page {
  color: var(--text-base);
  background: var(--surface-bg);
}

.projects-page .section {
  padding-block: var(--gap-section);
}

.projects-page .contenedor {
  width: min(100% - (2 * var(--gutter)), var(--container-max));
  margin-inline: auto;
}

.projects-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.projects-page a {
  text-decoration: none;
}

.projects-page :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  
}

/* ==========================================
   TIPOGRAFÍA COMÚN
   ========================================== */

.projects-eyebrow,
.projects-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-secondary-700);
}

.projects-kicker--light {
  color: var(--mkm-tertiary-300);
}

.projects-section-head {
  margin-bottom: var(--space-6);
}

.projects-section-title {
  margin: 0;
  
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);
  color: var(--mkm-primary-500);
}

/* ==========================================
   BOTONES
   ========================================== */

.projects-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1;
  transition:
    transform var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
  will-change: transform;
}

.projects-btn:hover {
  transform: var(--hover-lift);
}

.projects-btn:active {
  transform: var(--pushed);
}

.projects-btn--primary {
  background: var(--mkm-accent-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.projects-btn--primary:hover {
  background: #cf4d1e;
}

.projects-btn--ghost {
  background: transparent;
  color: var(--mkm-primary-500);
  border-color: var(--border-base);
}

.projects-btn--ghost:hover {
  background: #fff;
  border-color: var(--mkm-primary-300);
}

.projects-btn--card {
  background: var(--mkm-primary-500);
  color: #fff;
  width: 100%;
}

.projects-btn--card:hover {
  background: var(--mkm-primary-900);
}

/* ==========================================
   HERO
   ========================================== */

.projects-hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--gap-section) + var(--space-4));
}

.projects-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgb(42 157 143 / 0.10), transparent 36%),
    radial-gradient(circle at left center, rgb(232 90 37 / 0.08), transparent 30%);
  pointer-events: none;
}

.projects-hero__inner {
  position: relative;
  z-index: 1;
}

.projects-hero__content {
  
  padding: clamp(28px, 4vw, 56px);
  
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.82));
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--blur-sm);
}

.projects-hero__title {
  margin: 0 0 var(--space-4);
  
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-hero-h1);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);
  color: var(--mkm-primary-500);
}

.projects-hero__lead {
  margin: 0;
  
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.projects-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ==========================================
   INTRO
   ========================================== */

.projects-intro__body {
  display: grid;
  gap: var(--space-4);
  
}

.projects-intro__body p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-main);
}

/* ==========================================
   GRID DE PROYECTOS
   ========================================== */

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

.project-card {
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-height: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-border), var(--shadow-md);
}

.project-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: 207px;
  background:
    linear-gradient(180deg, rgb(8 77 110 / 0.04), rgb(8 77 110 / 0));
  border-bottom: 1px solid var(--border-base);
}

.project-card__tag {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgb(42 157 143 / 0.08);
  border: 1px solid currentColor;
  color: var(--mkm-secondary-700);
  font-size: 13px;
  line-height: 1.35;
  font-weight: var(--fw-bold);
}

.project-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
  margin-top: auto;
}


.project-card__logo {
  object-fit: contain;
  object-position: left center;
}

.project-card__logo--hunture {
  max-width: 190px;
  max-height: 64px;
}

.project-card__logo--vesta {
  max-width: 200px;
  max-height: 74px;
}

.project-card__logo--pms {
  max-width: 220px;
  max-height: 72px;
}

.project-card__logo--los-olivos {
  max-width: 200px;
  max-height: 82px;
}

.project-card__content {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  flex: 1;
}

.project-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.project-card__subtitle {
  margin: 0;
  color: var(--mkm-primary-900);
  font-size: 15px;
  line-height: 1.45;
  font-weight: var(--fw-bold);
}

.project-card__text {
  margin: 0;
  color: var(--mkm-text-main);
  font-size: 15px;
  line-height: 1.7;
}

.project-card__meta {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-base);
}

.project-card__meta div {
  display: grid;
  gap: 4px;
}

.project-card__meta dt {
  margin: 0;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-text-muted);
}

.project-card__meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mkm-text-main);
}

.project-card__footer {
  padding: 0 var(--space-5) var(--space-5);
}

.project-card__status {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding: 0 16px;
  border-radius: var(--btn-radius);
  background: var(--mkm-warm-50);
  color: var(--mkm-primary-900);
  border: 1px solid var(--mkm-warm-100);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

/* ==========================================
   METODOLOGÍA
   ========================================== */

.projects-method__lead {
  margin: 0 0 var(--space-6);
  
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-main);
}

.projects-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.projects-pillar {
  position: relative;
  padding: var(--space-5);
  
  background:
    linear-gradient(180deg, rgb(255 255 255 / 1), rgb(240 244 248 / 0.55));
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-base);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
  overflow: hidden;
}

.projects-pillar::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: var(--mkm-secondary-500);
}

.projects-pillar::after {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  min-width: 34px;
  height: 34px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: rgb(42 157 143 / 0.10);
  border: 1px solid rgb(42 157 143 / 0.22);
  color: var(--mkm-secondary-700);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.projects-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-border), var(--shadow-md);
  border-color: rgb(42 157 143 / 0.35);
}

.projects-pillar h3 {
  margin: 0 0 var(--space-3);
  padding-right: 52px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.projects-pillar p {
  margin: 0;
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mkm-text-main);
}

/* ==========================================
   ENLACES A CASOS EN DETALLE
   ========================================== */

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

.projects-detail-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 240px;
  padding: clamp(24px, 3vw, 36px);

  background:
    linear-gradient(180deg, rgb(255 255 255 / 1), rgb(240 244 248 / 0.55));
  border: 1px solid var(--border-base);
  box-shadow: var(--card-shadow);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
  overflow: hidden;
}

.projects-detail-link::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--mkm-secondary-500) 0%,
    var(--mkm-tertiary-300) 100%
  );
}

.projects-detail-link::after {
  content: "↗";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: 20px;
  line-height: 1;
  color: var(--mkm-primary-300);
  transition:
    transform var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.projects-detail-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-border), var(--shadow-md);
  border-color: rgb(42 157 143 / 0.30);
}

.projects-detail-link:hover::after {
  transform: translate(2px, -2px);
  color: var(--mkm-secondary-700);
}

.projects-detail-link__label {
  display: inline-flex;
  width: fit-content;
  margin-right: 40px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkm-text-muted);
}

.projects-detail-link__title {
  margin-right: 40px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.projects-detail-link__text {
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--mkm-text-main);
}

.projects-detail-link__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.projects-detail-link__cta::after {
  content: "→";
  transition: transform var(--dur-2) var(--ease);
}

.projects-detail-link:hover .projects-detail-link__cta::after {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .projects-detail-links__grid {
    grid-template-columns: 1fr;
  }

  .projects-detail-link {
    min-height: auto;
  }

  .projects-detail-link__text {
    max-width: none;
  }
}

/* ==========================================
   CIERRE OSCURO
   ========================================== */

.projects-closing__box {
  padding: clamp(28px, 4vw, 56px);
  
  background:
    linear-gradient(135deg, rgb(16 38 51 / 0.98), rgb(8 77 110 / 0.96));
  box-shadow: var(--shadow-md);
}

.projects-closing__title {
  margin: 0 0 var(--space-4);
  
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);
  color: var(--mkm-text-invert);
}

.projects-closing__text {
  margin: 0;
  max-width: var(--text-max-wide);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgb(240 244 248 / 0.88);
}

/* ==========================================
   CTA FINAL
   ========================================== */

.projects-cta__card {
  position: relative;
  padding: clamp(32px, 4vw, 56px);
  
  background:
    linear-gradient(180deg, rgb(255 255 255 / 1), rgb(240 244 248 / 0.45));
  border: 1px solid var(--border-base);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.projects-cta__card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--mkm-accent-500) 0%,
    var(--mkm-secondary-500) 100%
  );
}

.projects-cta__title {
  margin: 0 0 var(--space-4);
  
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);
  color: var(--mkm-primary-500);
}

.projects-cta__text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-main);
}

.projects-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1080px) {
  .project-card {
    grid-column: span 6;
  }

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

@media (max-width: 767px) {
  .projects-page .section {
    padding-block: clamp(28px, 8vw, 40px);
  }

  .projects-hero__content,
  .projects-cta__card,
  .projects-closing__box,
  .projects-detail-link,
  .project-card__top,
  .project-card__content,
  .projects-pillar {
    padding: var(--space-5);
  }

  .projects-hero__title,
  .projects-section-title,
  .projects-closing__title,
  .projects-cta__title {
    max-width: none;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    grid-column: auto;
  }

  .projects-pillars,
  .projects-detail-links__grid {
    grid-template-columns: 1fr;
  }

  .projects-hero__actions,
  .projects-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .projects-btn,
  .projects-btn--card {
    width: 100%;
  }

  .project-card__logo-wrap {
    min-height: 72px;
  }

  .project-card__logo--hunture {
    max-width: 160px;
  }

  .project-card__logo--vesta {
    max-width: 170px;
  }

  .project-card__logo--pms {
    max-width: 180px;
  }

   .project-card__logo--los-olivos {
    max-width: 170px;
    max-height: 72px;
  }
}


/* =========================================================
   PÁGINA CASO DE ESTUDIO / PROYECTO
   Reutilizable para Hunture y Grupo Vesta
   Apoyada en el sistema global :root de MKM
   ========================================================= */

.project-case {
  --case-max-copy: var(--text-max-wide);
  --case-accent: var(--mkm-accent-500);
  --case-accent-strong: var(--mkm-accent-700);
  --case-accent-soft: var(--mkm-accent-soft);

  background: var(--surface-bg);
  color: var(--text-base);
  font-family: var(--font-body);
}

/* Si más adelante quieres introducir un matiz cromático
   específico por proyecto, puedes redefinir solo estas 3 variables
   en .project-case--hunture o .project-case--grupo-vesta */

.project-case img {
  display: block;
  width: 100%;
  height: auto;
}

.project-case a {
  color: var(--case-accent);
  text-decoration: none;
  transition:
    color var(--dur-2) var(--ease),
    text-decoration-color var(--dur-2) var(--ease);
}

.project-case a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1px;
}

.project-case__section,
.project-case__hero,
.project-case__cta {
  position: relative;
}

.project-case__section + .project-case__section,
.project-case__section + .project-case__cta {
  border-top: 1px solid var(--border-base);
}

/* =========================================================
   INTRO DE SECCIÓN
   ========================================================= */

.project-case__intro {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--flow-intra);
}

.project-case__section-kicker {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__section-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-900);
  
}

/* =========================================================
   HERO
   ========================================================= */

.project-case__hero {
  padding-top: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(circle at top left, var(--case-accent-soft), transparent 32%),
    linear-gradient(180deg, var(--surface-card) 0%, var(--mkm-warm-50) 100%);
}

.project-case__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  align-items: center;
}

.project-case__hero-copy {
  display: grid;
  gap: var(--space-5);
}

.project-case__eyebrow {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-hero-h1);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.project-case__hero-media {
  margin: 0;
  overflow: hidden;
  
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}

.project-case__hero-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* =========================================================
   RESUMEN
   ========================================================= */

#resumen-proyecto {
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(232, 90, 37, 0.06), transparent 28%),
    linear-gradient(180deg, #f5f8fb 0%, #edf3f7 100%);
  overflow: hidden;
}



.project-case__summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(1.75rem, 1rem + 2.2vw, 4rem);
  align-items: start;
}

.project-case__section-title {
  color: var(--mkm-primary-500);
}

.project-case__summary-copy {
  position: relative;
  max-width: var(--case-max-copy);
  padding-left: clamp(1rem, 1.4vw, 1.35rem);
}

.project-case__summary-copy::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 2px;
  height: clamp(120px, 16vw, 210px);
  
  background: linear-gradient(
    180deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.16) 100%
  );
}

.project-case__summary-lead {
  margin: 0 0 1.35rem;
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.78;
  color: var(--mkm-primary-900);
  font-weight: 500;
  text-wrap: pretty;
}

.project-case__summary-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.1);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

.project-case__facts {
  position: relative;
  margin: 0;
  display: grid;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--border-base);
  
  background: var(--border-base);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(16, 38, 51, 0.08);
}

.project-case__facts::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.25) 100%
  );
  z-index: 1;
}

.project-case__fact {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.2rem;
  background: rgba(255, 255, 255, 0.92);
}

.project-case__fact dt {
  margin: 0;
  font-size: 0.76rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__fact dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mkm-primary-900);
}

.project-case__fact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--case-accent);
  font-weight: 600;
  text-decoration: none;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.project-case__fact a::after {
  content: "↗";
  font-size: 0.92em;
  line-height: 1;
}

.project-case__fact a:hover {
  transform: translateX(2px);
}

/* Desktop */
@media (min-width: 1024px) {
  .project-case__facts {
    position: sticky;
    top: 120px;
  }
}

/* Tablet y móvil */
@media (max-width: 900px) {
  .project-case__summary-grid {
    grid-template-columns: 1fr;
  }

  .project-case__summary-copy {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .project-case__summary-copy {
    padding-left: 0.95rem;
  }

  .project-case__summary-copy::before {
    height: 110px;
  }

  .project-case__summary-lead {
    line-height: 1.68;
  }

  .project-case__summary-body {
    line-height: 1.82;
  }

  .project-case__fact {
    padding: 1rem;
  }
}

/* =========================================================
   GRID DE CONTENIDO / TARJETAS LATERALES
   ========================================================= */

.project-case__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

.project-case__highlight-card,
.project-case__quote-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border-base);
  
  background: linear-gradient(180deg, var(--surface-card), var(--mkm-warm-50));
  box-shadow: var(--shadow-sm);
}

.project-case__highlight-card h3,
.project-case__quote-card h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.project-case__quote-card blockquote {
  margin: 0;
}

.project-case__quote-card p {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--mkm-primary-900);
}

.project-case__list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.7rem;
  color: var(--mkm-text-muted);
}

.project-case__list li {
  line-height: 1.6;
}


/* =========================================================
   PUNTO DE PARTIDA · GRID DE CONTENIDO / TARJETAS LATERALES
   ========================================================= */

#punto-partida {
  position: relative;
  background:
    radial-gradient(circle at 84% 14%, rgba(232, 90, 37, 0.05), transparent 24%),
    linear-gradient(180deg, #f7fafc 0%, #eff4f8 100%);
  overflow: hidden;
}

.project-case__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(1.75rem, 1rem + 2.2vw, 3.5rem);
  align-items: start;
}

.project-case__copy--starting-point {
  max-width: var(--case-max-copy);
}

.project-case__copy--starting-point .project-case__lead {
  margin: 0 0 1.35rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.34rem);
  line-height: 1.78;
  color: var(--mkm-primary-900);
  font-weight: 500;
  text-wrap: pretty;
}

.project-case__copy--starting-point p:not(.project-case__lead) {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

.project-case__highlight-card,
.project-case__quote-card {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 241, 234, 0.9));
  box-shadow:
    0 14px 30px rgba(16, 38, 51, 0.08),
    0 3px 10px rgba(16, 38, 51, 0.04);
  overflow: hidden;
}

.project-case__highlight-card::before,
.project-case__quote-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.22) 100%
  );
}

.project-case__card-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__highlight-card h3,
.project-case__quote-card h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1rem + 0.45vw, 1.38rem);
  line-height: 1.2;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

.project-case__quote-card blockquote {
  margin: 0;
}

.project-case__quote-card p {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--mkm-primary-900);
}

.project-case__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  list-style: none;
}

.project-case__list--checks li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.65;
  color: var(--mkm-text-muted);
}

.project-case__list--checks li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  
  background: var(--case-accent);
  box-shadow: 0 0 0 4px rgba(232, 90, 37, 0.12);
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
  .project-case__highlight-card--starting-point {
    position: sticky;
    top: 120px;
  }
}

@media (max-width: 900px) {
  .project-case__content-grid {
    grid-template-columns: 1fr;
  }

  .project-case__copy--starting-point {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .project-case__highlight-card,
  .project-case__quote-card {
    padding: 1.1rem 1rem;
  }

  .project-case__copy--starting-point .project-case__lead {
    line-height: 1.68;
  }

  .project-case__copy--starting-point p:not(.project-case__lead) {
    line-height: 1.8;
  }
}
/* =========================================================
   STACK DE TARJETAS
   ========================================================= */

.project-case__stack {
  display: grid;
  gap: var(--space-4);
}

.project-case__card,
.project-case__service-card,
.project-case__asset,
.project-case__result-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--border-base);
  
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.project-case__card h3,
.project-case__service-card h3,
.project-case__asset h3,
.project-case__result-card h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-900);
}

.project-case__card p,
.project-case__service-card p,
.project-case__asset p,
.project-case__result-card p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================================================
   GRID DE SERVICIOS / ACTIVOS / RESULTADOS
   ========================================================= */

.project-case__services-grid,
.project-case__assets-grid,
.project-case__results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.project-case__service-card,
.project-case__asset,
.project-case__result-card {
  min-height: 100%;
}

.project-case__service-card,
.project-case__result-card {
  position: relative;
  overflow: hidden;
}

.project-case__service-card:not(.project-case__service-card--work)::before,
.project-case__result-card:not(.project-case__result-card--value)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--case-accent);
  opacity: 0.9;
}


/* =========================================================
   DIAGNÓSTICO ESTRATÉGICO
   ========================================================= */

#diagnostico-estrategico {
  position: relative;
  background:
    radial-gradient(circle at 14% 18%, rgba(8, 77, 110, 0.05), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(232, 90, 37, 0.05), transparent 22%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  overflow: hidden;
}

.project-case__diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  align-items: stretch;
}

.project-case__card--diagnosis {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 241, 234, 0.72));
  box-shadow:
    0 14px 32px rgba(16, 38, 51, 0.08),
    0 3px 10px rgba(16, 38, 51, 0.04);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.project-case__card--diagnosis::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.22) 100%
  );
}

.project-case__card--diagnosis::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(8, 77, 110, 0.05), transparent 68%);
  pointer-events: none;
}

.project-case__card--diagnosis:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 77, 110, 0.18);
  box-shadow:
    0 18px 38px rgba(16, 38, 51, 0.10),
    0 6px 14px rgba(16, 38, 51, 0.05);
}

.project-case__card--diagnosis .project-case__card-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__card--diagnosis h3 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1rem + 0.42vw, 1.36rem);
  line-height: 1.18;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__card--diagnosis p:last-child {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

/* Tablet */
@media (max-width: 1023px) {
  .project-case__diagnosis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-case__card--diagnosis:last-child {
    grid-column: 1 / -1;
  }
}

/* Móvil */
@media (max-width: 767px) {
  .project-case__diagnosis-grid {
    grid-template-columns: 1fr;
  }

  .project-case__card--diagnosis:last-child {
    grid-column: auto;
  }

  .project-case__card--diagnosis {
    padding: 1.1rem 1rem;
  }
}


/* =========================================================
   DECISIÓN ESTRATÉGICA
   ========================================================= */

#decision-estrategica {
  position: relative;
  background:
    radial-gradient(circle at 82% 18%, rgba(232, 90, 37, 0.045), transparent 22%),
    linear-gradient(180deg, #f9fbfc 0%, #f2f6f9 100%);
  overflow: hidden;
}

.project-case__copy--strategy {
  max-width: var(--case-max-copy);
}

.project-case__copy--strategy .project-case__lead {
  margin: 0 0 1.35rem;
  font-size: clamp(1.1rem, 1rem + 0.42vw, 1.36rem);
  line-height: 1.78;
  color: var(--mkm-primary-900);
  font-weight: 500;
  text-wrap: pretty;
}

.project-case__copy--strategy p:not(.project-case__lead) {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

.project-case__quote-card--strategy {
  position: relative;
  padding: clamp(1.45rem, 1.1rem + 1vw, 2rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 241, 234, 0.86));
  box-shadow:
    0 16px 34px rgba(16, 38, 51, 0.08),
    0 4px 12px rgba(16, 38, 51, 0.05);
  overflow: hidden;
}

.project-case__quote-card--strategy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.22) 100%
  );
}

.project-case__quote-card--strategy::after {
  content: "“";
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 5vw, 5.5rem);
  line-height: 1;
  color: rgba(8, 77, 110, 0.08);
  pointer-events: none;
}

.project-case__quote-card--strategy .project-case__card-kicker {
  margin: 0 0 0.7rem;
}

.project-case__quote-card--strategy blockquote {
  margin: 0;
}

.project-case__quote-card--strategy p:last-child {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.08rem, 1rem + 0.32vw, 1.22rem);
  line-height: 1.68;
  color: var(--mkm-primary-500);
  font-weight: 500;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .project-case__quote-card--strategy {
    position: sticky;
    top: 120px;
  }
}

@media (max-width: 900px) {
  .project-case__copy--strategy {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .project-case__quote-card--strategy {
    padding: 1.2rem 1rem 1.1rem;
  }

  .project-case__quote-card--strategy::after {
    top: 0.55rem;
    right: 0.8rem;
    font-size: 3.5rem;
  }

  .project-case__copy--strategy .project-case__lead {
    line-height: 1.68;
  }

  .project-case__copy--strategy p:not(.project-case__lead) {
    line-height: 1.8;
  }
}

/* =========================================================
   TRABAJO REALIZADO
   ========================================================= */

#trabajo-realizado {
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(8, 77, 110, 0.045), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(232, 90, 37, 0.045), transparent 22%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  overflow: hidden;
}

.project-case__services-grid--work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  align-items: stretch;
}

.project-case__service-card--work {
  position: relative;
  min-height: 100%;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 241, 234, 0.72));
  box-shadow:
    0 14px 30px rgba(16, 38, 51, 0.08),
    0 3px 10px rgba(16, 38, 51, 0.04);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.project-case__service-card--work::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.22) 100%
  );
}

.project-case__service-card--work::after {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(8, 77, 110, 0.05), transparent 68%);
  pointer-events: none;
}

.project-case__service-card--work:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 77, 110, 0.18);
  box-shadow:
    0 18px 38px rgba(16, 38, 51, 0.10),
    0 6px 14px rgba(16, 38, 51, 0.05);
}

.project-case__service-card--work h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.34rem);
  line-height: 1.18;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__service-card--work p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

.project-case__service-card:not(.project-case__service-card--work)::before,
.project-case__result-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--case-accent);
  opacity: 0.9;
}

@media (max-width: 767px) {
  .project-case__services-grid--work {
    grid-template-columns: 1fr;
  }

  .project-case__service-card--work {
    padding: 1.15rem 1rem;
  }
}

/* =========================================================
   ANTES / DESPUÉS
   ========================================================= */

.project-case__before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
}

.project-case__compare-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.project-case__compare-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-900);
}

.project-case__compare-card--before h3 {
  color: var(--mkm-text-muted);
}

.project-case__compare-card--after h3 {
  color: var(--case-accent-strong);
}

.project-case__compare-media {
  margin: 0;
  overflow: hidden;
  
  background: transparent;
}

.project-case__compare-media img {
  display: block;
  width: 100%;
  height: auto;
}


.project-case__compare-card p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

/* =========================================================
   ACTIVOS DESARROLLADOS
   ========================================================= */

#activos-desarrollados {
  position: relative;
  background:
    radial-gradient(circle at 14% 16%, rgba(8, 77, 110, 0.045), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(232, 90, 37, 0.04), transparent 22%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  overflow: hidden;
}

.project-case__assets-grid--developed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  align-items: stretch;
}

.project-case__asset--developed {
  position: relative;
  min-height: 100%;
  padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 241, 234, 0.74));
  box-shadow:
    0 14px 30px rgba(16, 38, 51, 0.08),
    0 3px 10px rgba(16, 38, 51, 0.04);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.project-case__asset--developed::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.2) 100%
  );
}

.project-case__asset--developed::after {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(8, 77, 110, 0.05), transparent 68%);
  pointer-events: none;
}

.project-case__asset--developed:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 77, 110, 0.18);
  box-shadow:
    0 18px 38px rgba(16, 38, 51, 0.1),
    0 6px 14px rgba(16, 38, 51, 0.05);
}

.project-case__asset-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__asset--developed h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1rem + 0.38vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__asset--developed p:last-child {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .project-case__assets-grid--developed {
    grid-template-columns: 1fr;
  }

  .project-case__asset--developed {
    padding: 1.15rem 1rem;
  }
}

/* =========================================================
   RESULTADO Y VALOR APORTADO
   ========================================================= */

#resultado-valor {
  position: relative;
  background:
    radial-gradient(circle at 16% 18%, rgba(8, 77, 110, 0.045), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(232, 90, 37, 0.04), transparent 22%),
    linear-gradient(180deg, #f9fbfc 0%, #eef4f8 100%);
  overflow: hidden;
}

.project-case__results-grid--value {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  align-items: stretch;
}

.project-case__result-card--value {
  position: relative;
  min-height: 100%;
  padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  border-radius: calc(var(--radius-md) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 241, 234, 0.76));
  box-shadow:
    0 14px 30px rgba(16, 38, 51, 0.08),
    0 3px 10px rgba(16, 38, 51, 0.04);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.project-case__result-card--value::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--case-accent) 0%,
    rgba(232, 90, 37, 0.2) 100%
  );
}

.project-case__result-card--value::after {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(8, 77, 110, 0.05), transparent 68%);
  pointer-events: none;
}

.project-case__result-card--value:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 77, 110, 0.18);
  box-shadow:
    0 18px 38px rgba(16, 38, 51, 0.10),
    0 6px 14px rgba(16, 38, 51, 0.05);
}

.project-case__result-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__result-card--value h3 {
  margin: 0 0 0.85rem;
  
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1rem + 0.38vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__result-card--value p:last-child {
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(var(--lh-body) + 0.08);
  color: var(--mkm-text-muted);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .project-case__results-grid--value {
    grid-template-columns: 1fr;
  }

  .project-case__result-card--value {
    padding: 1.15rem 1rem;
  }
}

/* =========================================================
   CTA FINAL
   ========================================================= */

.project-case__cta {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-bottom: clamp(3.25rem, 2.2rem + 3vw, 5.5rem);
}

.project-case__cta-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border: 1px solid rgba(8, 77, 110, 0.12);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    radial-gradient(circle at top right, var(--case-accent-soft), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 241, 234, 0.9) 100%);
  box-shadow:
    0 18px 36px rgba(16, 38, 51, 0.08),
    0 4px 12px rgba(16, 38, 51, 0.04);
}

.project-case__cta-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(90px, 16vw, 180px);
  height: clamp(90px, 16vw, 180px);
  border-radius: 0 0 0 100%;
  background: var(--case-accent-soft);
  pointer-events: none;
}

.project-case__cta-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 0.7rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.project-case__cta-title {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
 
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
  
}

.project-case__cta-text {
  position: relative;
  z-index: 1;
  
  margin: 0 0 1.35rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.project-case__cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  align-items: center;
}

.project-case .btn {
  text-decoration: none;
}

.project-case .btn:hover {
  text-decoration: none;
}

.project-case .btn--primary {
  color: #fff;
}

.project-case .btn--primary:hover {
  color: #fff;
}

.project-case .btn--secondary {
  color: var(--mkm-primary-500);
}

.project-case .btn--secondary:hover {
  color: var(--mkm-primary-500);
}

.project-case__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--mkm-primary-500);
  text-decoration: none;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.project-case__cta-link::after {
  content: "↗";
  font-size: 0.92em;
  line-height: 1;
}

.project-case__cta-link:hover {
  color: var(--case-accent-strong);
  transform: translateX(2px);
  text-decoration: none;
}

.project-case .btn--secondary {
  color: var(--mkm-primary-500);
  background: transparent;
  border: 1px solid rgba(8, 77, 110, 0.16);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.project-case .btn--secondary:hover {
  color: var(--case-accent-strong);
  background: rgba(232, 90, 37, 0.06);
  border-color: rgba(232, 90, 37, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16, 38, 51, 0.08);
  text-decoration: none;
}

.project-case .btn--secondary:focus-visible {
  outline: 2px solid rgba(232, 90, 37, 0.35);
  outline-offset: 3px;
}

/* =========================================================
   ESPACIADO VERTICAL DE BLOQUES
   ========================================================= */

.project-case__hero .contenedor,
.project-case__section .contenedor,
.project-case__cta .contenedor {
  display: grid;
}

.project-case__section {
  padding-top: clamp(3rem, 2rem + 3.5vw, 5rem);
  padding-bottom: clamp(3rem, 2rem + 3.5vw, 5rem);
}

/* =========================================================
   HOVER SUTIL
   ========================================================= */

.project-case__card,
.project-case__service-card,
.project-case__asset,
.project-case__result-card,
.project-case__compare-card,
.project-case__highlight-card,
.project-case__quote-card,
.project-case__facts,
.project-case__hero-media,
.project-case__cta-card {
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.project-case__card:hover,
.project-case__service-card:hover,
.project-case__asset:hover,
.project-case__result-card:hover,
.project-case__compare-card:hover,
.project-case__highlight-card:hover,
.project-case__quote-card:hover,
.project-case__hero-media:hover,
.project-case__cta-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-lg);
  border-color: var(--mkm-primary-300);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
  .project-case__hero-grid,
  .project-case__summary-grid,
  .project-case__content-grid,
  .project-case__before-after,
  .project-case__services-grid,
  .project-case__assets-grid,
  .project-case__results-grid {
    grid-template-columns: 1fr;
  }

  .project-case__title {
    max-width: 14ch;
  }

  .project-case__section-title {
    max-width: none;
  }

  .project-case__cta-title {
    max-width: 22ch;
  }
}

@media (max-width: 767px) {
  .project-case__hero {
    padding-top: 2.5rem;
  }

  .project-case__hero-grid {
    gap: 1.5rem;
  }

  .project-case__hero-copy {
    order: 2;
  }

  .project-case__hero-media {
    order: 1;
  }

  .project-case__hero-media img {
    aspect-ratio: 4 / 3;
  }

  .project-case__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .project-case__cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .project-case__compare-media img {
    aspect-ratio: 5 / 4;
  }

  .project-case__fact {
    padding: 0.95rem 1rem;
  }

  .project-case__card,
  .project-case__service-card,
  .project-case__asset,
  .project-case__result-card,
  .project-case__compare-card,
  .project-case__highlight-card,
  .project-case__quote-card {
    padding: 1.1rem;
  }

  .project-case__cta-card {
    padding: 1.35rem;
  }
}

@media (max-width: 479px) {
  .project-case__title {
    max-width: 11ch;
  }

  .project-case__lead,
  .project-case__summary-copy p,
  .project-case__copy p,
  .project-case__card p,
  .project-case__service-card p,
  .project-case__asset p,
  .project-case__result-card p,
  .project-case__compare-card p,
  .project-case__cta-text {
    line-height: 1.7;
  }
}

/* =========================================================
   BLOG MKM
   CSS base apoyado en el :root global
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */

.blog-page {
  background: var(--surface-bg);
  color: var(--text-base);
}

.blog-page .section {
  padding-block: var(--gap-section);
}

.blog-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.blog-page .section-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mkm-primary-500);
}

.blog-page .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
  color: var(--mkm-primary-500);
}

/* =========================================================
   HERO
   ========================================================= */

.blog-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(142, 202, 230, 0.18), transparent 34%),
    linear-gradient(180deg, #f8fbfd 0%, var(--surface-bg) 100%);
  border-bottom: 1px solid var(--border-base);
}



.blog-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 2.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mkm-primary-500);
  max-width: none;
  text-wrap: normal;
  white-space: nowrap;
  
}

.blog-hero__intro {
  margin: var(--space-5) 0 0;
  
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: var(--lh-body);
  color: var(--text-base);
}

.blog-hero__support {
  margin: var(--space-4) 0 0;
  
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--mkm-text-muted);
}

.blog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* =========================================================
   FILTROS
   ========================================================= */

.blog-filters[hidden] {
  display: none !important;
}

.blog-filters__inner {
  padding: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.78);
  backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-sm);
}

.blog-filters__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.blog-filter {
  appearance: none;
  border: 1px solid var(--border-base);
  background: var(--surface-card);
  color: var(--text-base);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.blog-filter:hover,
.blog-filter:focus-visible {
  border-color: var(--mkm-primary-500);
  color: var(--mkm-primary-500);
  outline: none;
  transform: var(--hover-lift);
}

.blog-filter:focus-visible {
  box-shadow: var(--focus-ring);
}

.blog-filter.is-active {
  border-color: var(--mkm-primary-500);
  background: var(--mkm-primary-500);
  color: var(--mkm-text-invert);
}

/* =========================================================
   ARTÍCULO DESTACADO
   ========================================================= */

.blog-featured__header {
  margin-bottom: var(--space-5);
}

.featured-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: var(--space-5);
  align-items: stretch;
  padding: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.featured-post-card__media-link {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 4px);
  background: var(--mkm-cool-50);
}

.featured-post-card__picture,
.post-card__picture {
  display: block;
  margin: 0;
}

.featured-post-card__picture img,
.post-card__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-post-card__picture img {
  aspect-ratio: 16 / 10;
}

.featured-post-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.featured-post-card__meta,
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.92rem;
  color: var(--mkm-text-muted);
}

.post-category {
   display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.post-category--strategic {
  color: var(--mkm-primary-500);
  background: color-mix(in srgb, var(--mkm-primary-300) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--mkm-primary-300) 22%, #ffffff);
}

.post-category--studio {
  color: var(--mkm-secondary-700);
  background: color-mix(in srgb, var(--mkm-secondary-500) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--mkm-secondary-500) 22%, #ffffff);
}

.featured-post-card__title,
.post-card__title {
  margin: 0;
  color: var(--mkm-primary-500);
  
}

.featured-post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: var(--track-h);
}

.featured-post-card__title a,
.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.featured-post-card__excerpt,
.post-card__excerpt {
  color: var(--text-base);
  line-height: var(--lh-body);
}

.featured-post-card__excerpt {
  margin: var(--space-4) 0 0;
  font-size: 1rem;
}

.featured-post-card__tags,
.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: 1rem;
}

.post-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.62rem;
  border-radius: var(--radius-pill);
  background: rgb(79 109 122 / 0.08);
  color: var(--mkm-text-muted);
  font-size: 0.76rem;
  font-weight: var(--fw-medium);
  line-height: 1;
}

.featured-post-card__tags {
  margin-bottom: 1.2rem;
}

.featured-post-card .text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  color: var(--mkm-accent-500);
  font-weight: 800;
  text-decoration: none;
}

.featured-post-card .text-link__label {
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.12rem;
  line-height: 1;
}

.featured-post-card .text-link::after {
  content: "→";
  transition: transform 0.2s ease;
}

.featured-post-card .text-link:hover,
.featured-post-card .text-link:focus-visible {
  color: var(--mkm-accent-700);
}

.featured-post-card .text-link:hover::after,
.featured-post-card .text-link:focus-visible::after {
  transform: translateX(3px);
}

.featured-post-card__visual--diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(1rem, 1.2vw, 1.5rem);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  aspect-ratio: auto;
}

.featured-post-card__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* =========================================================
   GRID DE ARTÍCULOS
   ========================================================= */

.blog-grid__header {
  margin-bottom: var(--space-5);
}

.blog-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.post-card:hover,
.post-card:focus-within {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-md);
  border-color: rgb(8 77 110 / 0.18);
}

.post-card__media-link {
  display: block;
  overflow: hidden;
  background: var(--mkm-cool-50);
}

.post-card__picture img {
  aspect-ratio: 16 / 10;
  transition: transform var(--dur-3) var(--ease);
}

.post-card:hover .post-card__picture img,
.post-card:focus-within .post-card__picture img {
  transform: scale(1.025);
}

.post-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-4);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.04rem + 0.45vw, 1.38rem);
  line-height: 1.18;
  letter-spacing: var(--track-h);
}

.post-card__excerpt {
  margin: var(--space-3) 0 0;
  font-size: 0.98rem;
}

.post-card .text-link {
  margin-top: auto;
  padding-top: var(--space-5);
}


/* =========================================================
   VISUAL SVG EN TARJETAS DEL GRID
   ========================================================= */

.post-card__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: clamp(1rem, 1rem + 1vw, 1.5rem);
  background:
    radial-gradient(circle at top right, rgb(142 202 230 / 0.20), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(240 244 248 / 0.90) 100%);
}

.post-card__svg {
  display: block;
  width: 100%;
  height: auto;
}

.post-card:hover .post-card__svg,
.post-card:focus-within .post-card__svg {
  transform: scale(1.025);
}

.post-card__svg {
  transition: transform var(--dur-3) var(--ease);
}
/* =========================================================
   ENLACE TEXTUAL
   ========================================================= */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mkm-primary-500);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  transition:
    color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.text-link::after {
  content: "→";
  transition: transform var(--dur-2) var(--ease);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--mkm-accent-500);
  outline: none;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: translateX(3px);
}

/* =========================================================
   BLOQUE EDITORIAL
   ========================================================= */

.blog-editorial-note__inner {
  
  padding: var(--space-6);
  border: 1px solid rgb(232 90 37 / 0.10);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgb(246 241 234 / 0.95) 0%,
    rgb(255 255 255 / 0.95) 100%
  );
  box-shadow: var(--shadow-sm);
}



.blog-editorial-note__inner p:not(.section-eyebrow) {
  
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--text-base);
}

.blog-editorial-note__inner p:last-child {
  color: var(--mkm-text-muted);
}

/* =========================================================
   CTA FINAL
   ========================================================= */

.blog-cta__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgb(142 202 230 / 0.18), transparent 30%),
    linear-gradient(135deg, var(--surface-dark-1) 0%, var(--surface-dark-2) 100%);
  color: var(--mkm-text-invert);
  box-shadow: var(--shadow-lg);
}

.blog-cta__card .section-eyebrow {
  color: rgb(240 244 248 / 0.82);
}

.blog-cta__card .section-title {
  
  color: var(--mkm-text-invert);
  font-size: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
  
}

.blog-cta__text {
  
  margin: var(--space-4) 0 0;
  color: rgb(240 244 248 / 0.88);
  line-height: var(--lh-body);
}

.blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.blog-cta__card .btn--secondary {
  color: var(--mkm-text-invert);
  background: rgb(240 244 248 / 0.10);
  border: 1px solid rgb(240 244 248 / 0.28);
  transition:
    transform var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.blog-cta__card .btn--secondary:hover,
.blog-cta__card .btn--secondary:focus-visible {
  color: var(--mkm-text-invert);
  background: rgb(240 244 248 / 0.16);
  border-color: rgb(240 244 248 / 0.46);
  transform: var(--hover-lift);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   FECHAS / LINKS / FOCUS
   ========================================================= */

.blog-page time {
  color: var(--mkm-text-muted);
  white-space: nowrap;
}

.featured-post-card__media-link:focus-visible,
.post-card__media-link:focus-visible,
.featured-post-card__title a:focus-visible,
.post-card__title a:focus-visible,
.text-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* =========================
   TABLAS EN ARTÍCULOS DEL BLOG
========================= */

.blog-post__table-wrap {
  width: 100%;
  margin-block: var(--space-5) var(--space-6);
  overflow-x: auto;
  border: var(--border-1) solid var(--mkm-cool-100);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.blog-post__table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.55;
  color: var(--mkm-text-main);
}

.blog-post__table thead {
  background: linear-gradient(
    135deg,
    var(--mkm-primary-900),
    var(--mkm-primary-500)
  );
  color: var(--mkm-text-invert);
}

.blog-post__table th {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-bold);
  text-align: left;
  letter-spacing: var(--track-ui);
  border-bottom: var(--border-1) solid rgba(255, 255, 255, 0.18);
}

.blog-post__table th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.blog-post__table th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.blog-post__table td {
  padding: var(--space-4) var(--space-5);
  vertical-align: top;
  border-bottom: var(--border-1) solid var(--mkm-cool-100);
}

.blog-post__table tbody tr:last-child td {
  border-bottom: 0;
}

.blog-post__table tbody tr:nth-child(even) {
  background: var(--mkm-cool-50);
}

.blog-post__table tbody tr:hover {
  background: rgba(142, 202, 230, 0.18);
}

.blog-post__table td:first-child {
  width: 32%;
  font-weight: var(--fw-bold);
  color: var(--mkm-primary-500);
}

.blog-post__table td:last-child {
  color: var(--mkm-text-main);
}

/* Accesibilidad visual cuando la tabla recibe foco por tabindex */
.blog-post__table-wrap:focus {
  outline: none;
  box-shadow: var(--shadow-sm), var(--focus-ring);
}

/* Móvil */
@media (max-width: 767px) {
  .blog-post__table-wrap {
    margin-inline: calc(var(--gutter) * -0.25);
    border-radius: var(--radius-md);
  }

  .blog-post__table {
    min-width: 620px;
    font-size: 0.92rem;
  }

  .blog-post__table th,
  .blog-post__table td {
    padding: var(--space-3) var(--space-4);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 760px) {
  .blog-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .featured-post-card {
    grid-template-columns: 1fr;
  }

  .featured-post-card__picture img {
    aspect-ratio: 16 / 9;
  }

  .blog-cta__card .section-title,
  .blog-editorial-note__inner .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .blog-hero__title {
    max-width: 100%;
  }

  .blog-hero__actions,
  .blog-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-hero__actions .btn,
  .blog-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .featured-post-card,
  .post-card,
  .blog-editorial-note__inner,
  .blog-cta__card,
  .blog-filters__inner {
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 991px) {
  .blog-hero__inner {
    min-width: 0;
  }

  .blog-hero__title {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    line-height: 1.05;
    font-size: clamp(2.35rem, 9vw, 4rem);
  }
}

/* =========================================================
   BLOG / ARTÍCULO EDITORIAL MKM
   ========================================================= */

.blog-main {
  background: var(--surface-bg);
}

.blog-post {
  color: var(--text-base);
  padding-bottom: var(--space-8);
}

.blog-post > :where(.breadcrumbs, .blog-post__header, .blog-post__footer) {
  width: min(calc(100% - (var(--gutter) * 2)), var(--text-max-wide));
  margin-inline: auto;
}

.blog-post > .blog-post__section {
  width: min(calc(100% - (var(--gutter) * 2)), var(--text-max));
  margin-inline: auto;
}

/* =========================
   BREADCRUMBS
   ========================= */

.breadcrumbs {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  
}

.breadcrumbs__inner {
   width: 100%;
  max-width: none;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--mkm-primary-300, #4F6D7A);
  font-size: 0.95rem;
  line-height: 1.35;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 0.6rem;
  color: var(--mkm-primary-300, #4F6D7A);
  opacity: 0.65;
}

.breadcrumbs__link {
  color: var(--mkm-primary-300, #4F6D7A);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__link:hover {
  color: var(--mkm-primary-500, #084D6E);
}

.breadcrumbs__link:focus-visible {
  outline: 2px solid var(--mkm-secondary-500, #2A9D8F);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.breadcrumbs__item[aria-current="page"] {
  color: var(--mkm-primary-900, #102633);
  font-weight: 700;
}

/* =========================
   MÓVIL
   ========================= */

@media (max-width: 767px) {
  .breadcrumbs {
    
    padding-bottom: 0.6rem;
  }

  .breadcrumbs__inner {
    max-width: none;
    margin-inline: 0;
  }

  .breadcrumbs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
  }

  .breadcrumbs__list::-webkit-scrollbar {
    display: none;
  }

  .breadcrumbs__item {
    font-size: 0.875rem;
  }

  .breadcrumbs__item:not(:last-child)::after {
    margin-left: 0.5rem;
  }
}

/* -------------------------
   Header del artículo
   ------------------------- */

.blog-post__header {
  position: relative;
  padding-block: clamp(2rem, 3vw, 3.5rem);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
}

.blog-post__header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--grad-digital);
  pointer-events: none;
}

.blog-post__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--mkm-secondary-700);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}

.blog-post__header h1,
.blog-post__title {
  margin: 0;
  color: var(--mkm-primary-500);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--track-h);
  font-weight: var(--fw-black);


}

.blog-post__lead {
  margin-top: var(--space-5);
  margin-bottom: 0;
  
  color: var(--mkm-text-main);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.55;
}

/* =========================
   METADATOS DEL ARTÍCULO
   ========================= */

.blog-post__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.blog-post__meta-item {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 1rem 1rem 0.95rem;
  min-width: 0;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16, 38, 51, 0.04);
  overflow: hidden;
}

.blog-post__meta-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-digital);
}

.blog-post__meta-label {
  margin: 0;
  color: var(--mkm-text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-post__meta-value {
  margin: 0;
  color: var(--mkm-primary-900);
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: var(--fw-medium);
}

/* Opcional: darle un matiz distinto a cada tarjeta */
.blog-post__meta-item:nth-child(1)::before {
  background: var(--mkm-primary-500);
}

.blog-post__meta-item:nth-child(2)::before {
  background: var(--mkm-secondary-500);
}

.blog-post__meta-item:nth-child(3)::before {
  background: var(--mkm-accent-500);
}

/* Responsive */
@media (max-width: 900px) {
  .blog-post__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .blog-post__meta {
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   Cuerpo editorial
   ------------------------- */

.blog-post__section > :first-child {
  margin-top: 0;
}

.blog-post__section > :last-child {
  margin-bottom: 0;
}

.blog-post__section p,
.blog-post__section ul,
.blog-post__section ol,
.blog-post__section blockquote {
  margin-block: 0 var(--flow-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.blog-post__section h2 {
  margin: 0 0 var(--space-4);
  color: var(--mkm-primary-500);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--track-h);
  font-weight: var(--fw-bold);

  /* CLAVE: en desktop no lo estrechamos artificialmente */
  max-inline-size: none;
  
}

.blog-post__section h3 {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--mkm-primary-900);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-headings);
  font-weight: var(--fw-bold);
}

.blog-post__section ul,
.blog-post__section ol {
  padding-left: 1.2em;
}

.blog-post__section li + li {
  margin-top: var(--space-2);
}

.blog-post__section a {
  color: var(--mkm-secondary-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.blog-post__section strong {
  color: var(--mkm-primary-900);
  font-weight: var(--fw-bold);
}

/* =========================
   CUERPO BLANCO DEL ARTÍCULO
   ========================= */

.blog-post__body {
  width: min(calc(100% - (var(--gutter) * 2)), var(--text-max-wide));
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: var(--gap-section);
  padding-block: clamp(2.5rem, 4vw, 4rem);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--border-base);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
}

.blog-post__header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
  box-shadow: none;
}

.blog-post__body > .blog-post__section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.blog-post__body > .blog-post__section + .blog-post__section {
  margin-top: var(--gap-section);
}

.blog-post__body .blog-diagram {
  width: min(100%, var(--text-max-wide));
  margin-inline: auto;
}

@media (max-width: 767px) {
  .blog-post__body {
    padding-inline: var(--space-5);
    padding-block: var(--space-6);
  }
}

/* =========================
   LISTA DE PILARES / BLOQUE DESTACADO
   ========================= */

.blog-post__pillars {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.blog-post__pillars li {
  position: relative;
  margin: 0;
  padding: 1rem 1.1rem 1rem 1.25rem;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16, 38, 51, 0.04);
  line-height: var(--lh-body);
}

.blog-post__pillars li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: var(--mkm-primary-500);
}

.blog-post__pillars li:nth-child(2)::before {
  background: var(--mkm-secondary-500);
}

.blog-post__pillars li:nth-child(3)::before {
  background: var(--mkm-tertiary-300);
}

.blog-post__pillars strong {
  color: var(--mkm-primary-900);
  font-weight: var(--fw-bold);
}

/* Footer CTA */
.blog-post__cta {
  padding: clamp(1.5rem, 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-dark-1);
  color: var(--mkm-text-invert);
  box-shadow: var(--shadow-md);
}

.blog-post__cta h2 {
  margin: 0 0 var(--space-4);
  color: var(--mkm-text-invert);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
}

.blog-post__cta p {
  margin: 0 0 var(--space-4);
  
}

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

.blog-post__key-points {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.blog-post__key-points li {
  position: relative;
  margin: 0;
  padding: 1rem 1.1rem 1rem 1.25rem;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16, 38, 51, 0.04);
  line-height: var(--lh-body);
}

.blog-post__key-points li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: var(--mkm-primary-500);
}

/* Responsive */
@media (max-width: 767px) {
  .blog-post__header {
    padding-inline: var(--space-5);
    padding-block: var(--space-6);
  }

  .blog-post__header h1,
  .blog-post__title {
    max-inline-size: none;
    text-wrap: pretty;
  }

  .blog-post__section h2 {
    text-wrap: pretty;
  }

  .blog-post__meta-item {
    min-width: 100%;
  }
}

/* -------------------------
   Figuras / gráficos
   ------------------------- */

.blog-post__media {
  width: min(calc(100% - (var(--gutter) * 2)), var(--text-max-wide));
  margin-inline: auto;
  margin-block: 0;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
}

.blog-post__media img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-post__media figcaption {
  padding: var(--space-4) var(--space-5);
  color: var(--mkm-text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  border-top: 1px solid var(--border-base);
  background: var(--surface-bg);
}

/* -------------------------
   CTA final
   ------------------------- */

.blog-post__cta {
  padding: clamp(1.5rem, 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-dark-1);
  color: var(--mkm-text-invert);
  box-shadow: var(--shadow-md);
}

.blog-post__cta h2 {
  margin: 0 0 var(--space-4);
  color: var(--mkm-text-invert);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headings);
  letter-spacing: var(--track-h);
}

.blog-post__cta p {
  margin: 0 0 var(--space-4);
  
  color: var(--mkm-text-invert);
}

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

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

@media (max-width: 767px) {
  .blog-post__title,
  .blog-post__header h1 {
    max-width: none;
  }

  .blog-post__meta-item {
    min-width: 100%;
  }


}

/* =========================
   SUBBLOQUES EDITORIALES
   ========================= */

.blog-post__subblocks {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.blog-post__subblock {
  position: relative;
  padding: clamp(1rem, 1.2vw, 1.25rem) clamp(1rem, 1.6vw, 1.5rem);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16, 38, 51, 0.04);
}

.blog-post__subblock::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: var(--mkm-secondary-500);
}

.blog-post__subblock h3 {
  margin: 0 0 var(--space-2);
  color: var(--mkm-primary-900);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.1rem + 0.35vw, 1.35rem);
  line-height: 1.15;
  font-weight: var(--fw-bold);
}

.blog-post__subblock p {
  margin: 0;
  color: var(--mkm-text-main);
}

@media (max-width: 767px) {
  .blog-post__subblocks {
    gap: var(--space-3);
  }
}

/* =========================
   DIAGRAMAS / SVG DEL POST
   ========================= */

.blog-diagram {
  margin: var(--space-5) 0;
  padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border: 1px solid var(--border-base, var(--mkm-cool-100, #D6DEE6));
  border-radius: var(--radius-lg, 1.25rem);
  background:
    radial-gradient(circle at top right, rgba(142, 202, 230, 0.20), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 244, 248, 0.90) 100%);
  box-shadow: 0 18px 40px rgba(16, 38, 51, 0.08);
  overflow: hidden;
}

.blog-diagram--funnel {
  max-width: 44rem;
  margin-inline: auto;
}

.blog-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
}

.blog-diagram__figcaption {
  margin-top: 0.9rem;
  color: var(--text-soft, var(--mkm-primary-300, #4F6D7A));
  font-size: 0.95rem;
  line-height: 1.55;
}

.blog-diagram__svg text {
  font-family: var(--font-body, var(--font-sans, "Manrope", system-ui, sans-serif));
}

.diagram-line {
  fill: none;
  stroke: rgba(79, 109, 122, 0.42);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagram-line--accent {
  stroke: rgba(42, 157, 143, 0.58);
}

.diagram-card,
.diagram-panel,
.diagram-chip,
.diagram-band {
  stroke-width: 1.5;
}

.diagram-card {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(8, 77, 110, 0.12);
}

.diagram-card--soft {
  fill: rgba(240, 244, 248, 0.94);
}

.diagram-card--accent {
  fill: rgba(42, 157, 143, 0.08);
  stroke: rgba(42, 157, 143, 0.24);
}

.diagram-panel {
  fill: rgba(255, 255, 255, 0.97);
  stroke: rgba(8, 77, 110, 0.16);
}

.diagram-panel--accent {
  stroke: rgba(42, 157, 143, 0.34);
}

.diagram-chip {
  fill: rgba(8, 77, 110, 0.05);
  stroke: rgba(8, 77, 110, 0.14);
}

.diagram-chip--accent {
  fill: rgba(232, 90, 37, 0.08);
  stroke: rgba(232, 90, 37, 0.22);
}

.diagram-node {
  fill: var(--mkm-primary-500, #084D6E);
}

.diagram-node--secondary {
  fill: var(--mkm-secondary-500, #2A9D8F);
}

.diagram-node--accent {
  fill: var(--mkm-accent-500, #E85A25);
}

.diagram-node--light {
  fill: var(--mkm-tertiary-300, #8ECAE6);
}

.diagram-index {
  fill: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.diagram-label {
  fill: var(--mkm-primary-900, #102633);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.diagram-copy {
  fill: var(--mkm-primary-300, #4F6D7A);
  font-size: 18px;
  font-weight: 500;
}

.diagram-chip-text {
  fill: var(--mkm-primary-500, #084D6E);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.diagram-center-label {
  fill: var(--mkm-primary-900, #102633);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.diagram-center-copy {
  fill: var(--mkm-primary-300, #4F6D7A);
  font-size: 16px;
  font-weight: 600;
}

.diagram-band {
  stroke: rgba(8, 77, 110, 0.12);
}

.diagram-band--1 {
  fill: rgba(142, 202, 230, 0.22);
}

.diagram-band--2 {
  fill: rgba(255, 255, 255, 0.96);
}

.diagram-band--3 {
  fill: rgba(240, 244, 248, 0.96);
}

.diagram-band--4 {
  fill: rgba(42, 157, 143, 0.08);
  stroke: rgba(42, 157, 143, 0.18);
}

.diagram-band--5 {
  fill: rgba(232, 90, 37, 0.08);
  stroke: rgba(232, 90, 37, 0.18);
}

.diagram-band-title {
  fill: var(--mkm-primary-900, #102633);
  font-size: 24px;
  font-weight: 700;
}

.diagram-band-copy {
  fill: var(--mkm-primary-300, #4F6D7A);
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .blog-diagram {
    margin: var(--space-4) 0;
    padding: 0.9rem;
    border-radius: 1rem;
  }

  .blog-diagram__figcaption {
    font-size: 0.9rem;
  }
}

.diagram-label--sm {
  font-size: 22px;
  font-weight: 700;
}

.diagram-copy--sm {
  font-size: 15px;
  font-weight: 600;
}

.blog-diagram--pillars .blog-diagram__figcaption {
  margin-top: 0.75rem;
}

.blog-diagram--google-flow .blog-diagram__figcaption {
  margin-top: 0.5rem;
}

.blog-diagram--google-flow {
  padding-bottom: 1rem;
}

.blog-diagram--cycle {
  padding-bottom: 1rem;
}

.blog-diagram--cycle .blog-diagram__figcaption {
  margin-top: 0.55rem;
}

.blog-diagram--cycle .diagram-label--sm {
  font-size: 22px;
  font-weight: 700;
}

.blog-diagram--cycle .diagram-copy--xs {
  font-size: 15px;
  font-weight: 600;
}

.blog-diagram--cycle .diagram-center-label--sm {
  font-size: 21px;
  font-weight: 800;
}

.blog-diagram--cycle .diagram-panel--accent {
  fill: rgba(42, 157, 143, 0.05);
  stroke: rgba(42, 157, 143, 0.28);
}

.blog-diagram--cycle .diagram-line--accent {
  stroke: rgba(42, 157, 143, 0.62);
}


.blog-diagram--funnel {
  max-width: 42rem;
  padding-bottom: 1rem;
}

.blog-diagram--funnel .blog-diagram__figcaption {
  margin-top: 0.5rem;
}

.blog-diagram--funnel .diagram-band-title--sm {
  font-size: 21px;
  font-weight: 700;
}

.blog-diagram--funnel .diagram-band-copy--sm {
  font-size: 15px;
  font-weight: 600;
}

.blog-diagram--funnel .diagram-chip-text {
  font-size: 13px;
}

.blog-diagram--funnel .diagram-band--5 {
  stroke: rgba(232, 90, 37, 0.24);
}


/* =========================
   DIAGRAMAS ESPECÍFICOS: REDISEÑO WEB + SEO TÉCNICO
   ========================= */

.blog-diagram--design-seo,
.blog-diagram--redesign-risk,
.blog-diagram--crawl-index-capture,
.blog-diagram--redesign-checklist {
  max-width: 44rem;
  margin-inline: auto;
}

.blog-diagram--redesign-checklist {
  max-width: 48rem;
}

@media (max-width: 767px) {
  .blog-diagram--design-seo,
  .blog-diagram--redesign-risk,
  .blog-diagram--crawl-index-capture,
  .blog-diagram--redesign-checklist {
    max-width: 100%;
  }
}

/* ==========================================
   BLOG · IMÁGENES EDITORIALES
   ========================================== */

.blog-diagram__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}