/* ============================================================
   MEKA INMOBILIARIA — Design system del sitio público (home)
   Prefijo estricto .mk- para convivir con Bootstrap 5 + AdminLTE.
   Identidad oficial: teal #032A2B · dorado #D7A446 · gris #606363
   Tipografía oficial: Blatant (títulos) + Roboto (cuerpo).
   Lenguaje visual: el plano de lotización (anotaciones tipo
   agrimensor, líneas de replanteo, nomenclatura Mz./Lote).
   ============================================================ */

/* Blatant — fuente oficial de marca, auto-hospedada */
@font-face {
  font-family: "Blatant";
  src: url("../../fonts/meka/Blatant.woff2") format("woff2"),
       url("../../fonts/meka/Blatant.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blatant";
  src: url("../../fonts/meka/Blatant-Italic.woff2") format("woff2"),
       url("../../fonts/meka/Blatant-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Blatant";
  src: url("../../fonts/meka/Blatant-Bold.woff2") format("woff2"),
       url("../../fonts/meka/Blatant-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blatant";
  src: url("../../fonts/meka/Blatant-BoldItalic.woff2") format("woff2"),
       url("../../fonts/meka/Blatant-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --mk-green: #032A2B;        /* teal profundo oficial (ancla) */
  --mk-green-2: #0B4A4C;      /* teal medio (hover, apoyos) */
  --mk-green-soft: #E7EFEF;   /* teal niebla (fondos suaves) */
  --mk-earth: #606363;        /* gris oficial (acentos secundarios) */
  --mk-gold: #D7A446;         /* dorado oficial — SOLO acciones principales */
  --mk-gold-2: #E2B65F;       /* dorado hover */
  --mk-sand: #F5F1E8;         /* arena (secciones alternas) */
  --mk-ink: #10201F;          /* texto principal */
  --mk-ink-soft: #606363;     /* texto secundario — gris oficial */
  --mk-line: #DEE4E3;         /* líneas de replanteo */
  --mk-white: #FFFFFF;

  --mk-font-display: "Blatant", "Arial Narrow", sans-serif;
  --mk-font-body: "Roboto", -apple-system, sans-serif;
  --mk-font-mono: "Roboto", -apple-system, sans-serif; /* datos: uppercase + tracking + tnum */

  --mk-radius: 14px;
  --mk-radius-sm: 8px;
  --mk-shadow: 0 10px 34px rgba(3, 42, 43, 0.12);
  --mk-shadow-sm: 0 4px 14px rgba(3, 42, 43, 0.08);
  --mk-header-h: 78px;
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   Ámbito Meka: resets locales (AdminLTE/template.css son globales)
   ------------------------------------------------------------ */

.mk-scope {
  font-family: var(--mk-font-body);
  color: var(--mk-ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.mk-scope h1, .mk-scope h2, .mk-scope h3, .mk-scope h4 {
  font-family: var(--mk-font-display);
  font-weight: 700; /* Blatant solo trae 400/700 */
  line-height: 1.08;
  color: inherit;
  margin: 0;
}

.mk-scope p { margin: 0; }
.mk-scope a { color: inherit; text-decoration: none; }
.mk-scope a:hover { color: inherit; }
.mk-scope ul { margin: 0; padding: 0; list-style: none; }
.mk-scope img { max-width: 100%; }
.mk-scope button { font-family: var(--mk-font-body); }

/* Respaldo local de la utilidad accesible de Bootstrap. Mantiene
   ocultos los textos auxiliares aunque el CDN no esté disponible. */
.mk-scope .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mk-scope :focus-visible {
  outline: 3px solid var(--mk-white);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px var(--mk-green-2);
}

/* ------------------------------------------------------------
   Utilidades tipográficas — anotaciones de plano
   ------------------------------------------------------------ */

/* Cejilla estilo anotación de agrimensor: MZ. A · LOTE 05 */
.mk-eyebrow {
  font-family: var(--mk-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mk-earth);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.mk-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--mk-gold);
  flex: none;
}

.mk-title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  letter-spacing: -0.01em;
  margin-top: 0.85rem;
}

.mk-lead {
  color: var(--mk-ink-soft);
  font-size: 1.06rem;
  max-width: 46rem;
  margin-top: 1rem;
}

.mk-mono {
  font-family: var(--mk-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

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

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--mk-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--mk-ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}

.mk-btn:hover { transform: translateY(-2px); }
.mk-btn:active { transform: translateY(0); }
.mk-btn:disabled,
.mk-btn[aria-disabled="true"] {
  opacity: 0.62;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* NOTA: template.css (global, cargado en TODAS las páginas) fuerza
   "a:link,a:visited,a:hover,a:active{color:inherit !important}"
   (especificidad 0,1,1). Como varios .mk-btn se renderizan como <a>
   (CTAs de WhatsApp, "Ver lotes disponibles"...), todo color de botón
   debe declararse con !important + selector .mk-btn.mk-btn--variante
   (0,2,0) para ganarle siempre a esa regla global, sin importar el
   elemento (<a> o <button>) ni el estado (:hover/:active). */

.mk-btn.mk-btn--gold {
  background: var(--mk-gold);
  color: var(--mk-green) !important;
}
.mk-btn.mk-btn--gold:hover {
  background: var(--mk-gold-2);
  color: var(--mk-green) !important;
  box-shadow: 0 8px 22px rgba(201, 162, 39, 0.4);
}

.mk-btn.mk-btn--green {
  background: var(--mk-green);
  color: var(--mk-white) !important;
}
.mk-btn.mk-btn--green:hover { background: var(--mk-green-2); color: var(--mk-white) !important; }

.mk-btn.mk-btn--ghost {
  background: transparent;
  color: var(--mk-white) !important;
  border-color: rgba(255, 255, 255, 0.55);
}
.mk-btn.mk-btn--ghost:hover { border-color: var(--mk-white); color: var(--mk-white) !important; background: rgba(255,255,255,0.08); }

/* WhatsApp del header: acción secundaria "quieta" — mismo lenguaje
   circular que el burger, para no competir con el dorado (CTA único) */
.mk-btn--wa {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.2rem;
}
.mk-btn.mk-btn--wa,
.mk-btn.mk-btn--wa:hover {
  color: var(--mk-white) !important; /* blanco en reposo: el verde se veía apagado sobre el círculo oscuro */
}
.mk-btn--wa span { display: none; }
.mk-btn--wa:hover {
  background: #25D366;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

/* CTA "Enviar comprobante por WhatsApp" del panel de éxito: botón
   normal ancho completo con el texto visible (no reutiliza
   .mk-btn--wa — ese es el círculo icon-only de 48px del header, y
   forzarlo a w-100 con texto rompía la forma). */
.mk-btn.mk-btn--wa-cta {
  background: #25D366;
  color: var(--mk-green) !important;
}
.mk-btn.mk-btn--wa-cta:hover {
  background: #1EBD5A;
  color: var(--mk-green) !important;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

.mk-btn.mk-btn--outline {
  background: var(--mk-white);
  color: var(--mk-ink) !important;
  border-color: var(--mk-line);
}
.mk-btn.mk-btn--outline:hover {
  background: var(--mk-green);
  color: var(--mk-white) !important;
  border-color: var(--mk-green);
}

.mk-btn--sm { padding: 0.65rem 1.15rem; font-size: 0.88rem; }

/* ------------------------------------------------------------
   Header fijo
   ------------------------------------------------------------ */

.mk-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  height: var(--mk-header-h);
  background: var(--mk-green);
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s;
}

.mk-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.28); }

.mk-header__inner {
  width: min(1240px, 100% - 3rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mk-header__brand { display: flex; align-items: center; flex: none; }
.mk-header__brand img { height: 46px; width: auto; display: block; }

/* CTA empujado a la derecha (el burger vive junto al logo) */
.mk-header__cta { margin-left: auto; display: flex; align-items: center; gap: 0.65rem; }

/* Hamburguesa */
.mk-burger {
  width: 48px; height: 48px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex: none;
  transition: background 0.25s;
}
.mk-burger:hover { background: rgba(255,255,255,0.2); }
.mk-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--mk-white);
  border-radius: 2px;
  transition: transform 0.3s var(--mk-ease), opacity 0.2s;
}

/* separador que compensa el header fijo */
.mk-header-spacer { height: var(--mk-header-h); }

/* ------------------------------------------------------------
   Header del proyecto (ficha /{url_project})

   La ficha es larga y el header de Meka no dice en qué proyecto
   se está ni deja saltar de sección. Al pasar la mitad del slide
   la barra se releva: entra la del proyecto —su logotipo y sus
   secciones— y al volver arriba regresa la de Meka.

   Es el MISMO <header id="mkHeader">: dentro conviven las dos
   filas superpuestas y se cruzan con opacidad. La altura no
   depende de ellas, así que el relevo no mueve ni un píxel de
   la página.

   Todo cuelga de .mk-header--project (la imprime PHP solo en la
   ficha) o de .is-project (la pone proyecto.js), así que ni una
   regla base cambia para el inicio, /proyectos, el blog o
   /admin, que comparten este mismo header.
   ------------------------------------------------------------ */

/* Las dos filas ocupan el header entero, una encima de la otra.
   Conservan el ancho y el centrado del contenedor original. */
.mk-header--project .mk-header__inner,
.mk-header--project .mk-header__project {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  width: min(1240px, 100% - 3rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;

  /* La fila entra descendiendo y sale hundiéndose, las dos en el
     mismo sentido: se lee como una cortina que baja y no como
     dos textos que se pisan. El desplazamiento es corto —22px—
     porque el header mide 78 y un recorrido mayor obligaría a
     recortar la barra, lo que comería la sombra del botón
     dorado. La opacidad es más rápida que el desplazamiento: la
     fila que se va ya no se lee cuando la que entra aún está
     llegando. */
  transition:
    opacity 0.32s var(--mk-ease),
    transform 0.55s var(--mk-ease),
    visibility 0.55s;
}

/* La fila que manda en cada momento. El retardo de la opacidad
   —y solo el de la opacidad— es lo que escalona el cruce: la
   saliente se apaga primero, la entrante aparece después. Al
   irse no se aplica, porque una transición toma sus tiempos de
   la regla de destino, que es la de la fila dormida. */
.mk-header--project .mk-header__inner,
.mk-header--project.is-project .mk-header__project {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.14s, 0s, 0s;
}

/* visibility (y no pointer-events) es lo que saca a la fila
   dormida del orden de tabulación y del árbol de accesibilidad,
   sin tener que mantener aria-hidden desde JavaScript. Va sin
   retardo y con la misma duración que el desplazamiento, así
   que la fila que se va sigue viéndose mientras se hunde y
   desaparece justo al terminar. */
.mk-header--project .mk-header__project {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-22px);
}

.mk-header--project.is-project .mk-header__inner {
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
}

/* El fondo claro es la señal de que se ha entrado en el
   proyecto. Además resuelve un problema real: los logotipos de
   los proyectos son de trazo verde oscuro sobre transparente y
   sobre el verde de marca desaparecen. */
/* El filete de abajo se declara transparente desde el principio
   y solo cambia de color: si apareciera de la nada sería una
   línea que salta a mitad del cruce. La altura no se mueve
   —.mk-header la fija y el modelo de caja es border-box—, así
   que declararlo siempre no cuesta nada. */
.mk-header--project {
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.55s var(--mk-ease),
    border-color 0.55s var(--mk-ease),
    box-shadow 0.3s;
}

.mk-header--project.is-project {
  background: var(--mk-white);
  border-bottom-color: var(--mk-line);
}

/* la sombra de .is-scrolled está calculada para fondo oscuro y
   sobre blanco resulta dura */
.mk-header--project.is-project.is-scrolled { box-shadow: var(--mk-shadow-sm); }

/* Mismo alto que el logotipo de Meka: es el que manda en la
   barra, no el del hero. */
/*=============================================
Logotipo del proyecto en la barra.

Va con el selector "img." por delante A PROPÓSITO: la regla
general .mk-scope img { max-width: 100% } de más arriba pesa
más que una sola clase, así que sin el elemento el
max-width de aquí no llegaba a aplicarse nunca y un logo
apaisado crecía a lo ancho hasta empujar el menú. Con
"img.mk-header__project-logo" empatan en especificidad y
gana esta, por ir después.

El alto manda y el ancho es libre hasta el tope; con
object-fit: contain la proporción del archivo se respeta
siempre, sea horizontal, vertical o cuadrado.
=============================================*/

img.mk-header__project-logo {
  height: 46px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  flex: none;
}

.mk-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* template.css fuerza a:link,a:visited,a:hover,a:active
   { color: inherit !important } con especificidad (0,1,1): un
   color propio necesita !important Y dos clases. */
.mk-header__nav .mk-header__link {
  position: relative;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--mk-ink-soft) !important;
  transition: color 0.25s var(--mk-ease);
  white-space: nowrap;
}

.mk-header__nav .mk-header__link:hover,
.mk-header__nav .mk-header__link.is-active { color: var(--mk-green) !important; }

/* filete dorado bajo la sección en la que se está */
.mk-header__nav .mk-header__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--mk-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--mk-ease);
}

.mk-header__nav .mk-header__link.is-active::after { transform: scaleX(1); }

/* "Cita Online" es un ancla como las demás —baja a la asesoría—
   pero se destaca: es la acción que se busca en esta página.
   Reutiliza el gesto de .mk-btn--gold sin ser un botón. */
.mk-header__nav .mk-header__link--cta {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--mk-gold);
  color: var(--mk-green) !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(215, 164, 70, 0.35);
}

.mk-header__nav .mk-header__link--cta:hover {
  background: var(--mk-gold-2);
  color: var(--mk-green) !important;
}

/* el filete dorado no pinta nada bajo una píldora dorada */
.mk-header__nav .mk-header__link--cta::after { display: none; }

/* Sobre el fondo claro la hamburguesa se invierte. Es la única
   pieza que se repite en las dos filas, y la de esta no duplica
   lógica: reenvía su pulsación a #mkBurger (ver
   assets/js/meka/proyecto.js). */
.mk-burger--project {
  margin-left: 0.4rem;
  background: rgba(3, 42, 43, 0.06);
}

.mk-burger--project:hover { background: rgba(3, 42, 43, 0.12); }

.mk-burger--project span { background: var(--mk-green); }

/* ------------------------------------------------------------
   Menú overlay
   ------------------------------------------------------------ */

.mk-menu {
  position: fixed;
  inset: 0;
  z-index: 1041;
  background: var(--mk-green);
  color: var(--mk-white);
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1.5rem, 6vw, 5rem) 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--mk-ease), visibility 0.35s;
  overflow-y: auto;
}

.mk-menu.is-open { opacity: 1; visibility: visible; }

.mk-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mk-header-h);
}
.mk-menu__top img { height: 46px; }

.mk-menu__close {
  width: 48px; height: 48px;
  border: 0; border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: var(--mk-white);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.25s;
}
.mk-menu__close:hover { background: rgba(255,255,255,0.2); }

.mk-menu__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.mk-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--mk-font-display);
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.7rem);
  font-weight: 700;
  color: var(--mk-white);
  padding: 0.45rem 0;
  opacity: 0;
  transform: translateY(18px);
  transition: color 0.25s, opacity 0.5s var(--mk-ease), transform 0.5s var(--mk-ease);
  transition-delay: var(--mk-delay, 0s);
}
.mk-menu.is-open .mk-menu__nav a { opacity: 1; transform: none; }
.mk-menu__nav a:hover { color: var(--mk-gold-2); }

/* Número al mismo tamaño que el título: jerarquía por color
   (dorado, Regular) frente al título (blanco, Bold) */
.mk-menu__nav .mk-menu__code {
  font-family: var(--mk-font-display);
  font-size: 1em;
  font-weight: 400;
  color: var(--mk-gold);
  font-variant-numeric: tabular-nums;
}
.mk-menu__nav a:hover .mk-menu__code { color: var(--mk-gold-2); }

.mk-menu__aside {
  border-left: 1px solid rgba(255,255,255,0.18);
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.mk-menu__aside .mk-eyebrow { color: var(--mk-gold-2); }
.mk-menu__aside a:hover { color: var(--mk-gold-2); }

/* Contacto dentro del menú: email + 2 teléfonos apilados */
.mk-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.mk-menu__contact i {
  width: 1.2rem;
  font-size: 0.85rem;
  color: var(--mk-gold-2);
}

.mk-socials { display: flex; gap: 0.6rem; }
.mk-socials a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-white);
  font-size: 1.05rem;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.mk-socials a:hover {
  background: var(--mk-gold);
  border-color: var(--mk-gold);
  color: var(--mk-green);
  transform: translateY(-3px);
}

/* ------------------------------------------------------------
   Secciones
   ------------------------------------------------------------ */

.mk-section { padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0; scroll-margin-top: calc(var(--mk-header-h) + 10px); }
.mk-section--sand { background: var(--mk-sand); }
.mk-section--green { background: var(--mk-green); color: var(--mk-white); }
.mk-section--green .mk-lead { color: rgba(255,255,255,0.75); }
.mk-section--green .mk-eyebrow { color: var(--mk-gold-2); }

.mk-container { width: min(1240px, 100% - 3rem); margin: 0 auto; }

.mk-section__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.mk-section__head--center { text-align: center; }
.mk-section__head--center .mk-lead { margin-left: auto; margin-right: auto; }
.mk-section__head--center .mk-eyebrow::before { display: none; }
.mk-section__head--center .mk-eyebrow::after { display: none; }

/* ------------------------------------------------------------
   Hero (carrusel de promos)
   ------------------------------------------------------------ */

.mk-hero { position: relative; background: var(--mk-green); }

/* Banner solo-imagen: la altura la marca la proporción de la imagen
   (aspect-ratio), NO un alto fijo, para que el diseño que viene dentro
   de la imagen nunca se recorte. Todas las promos comparten proporción
   porque saveImage fuerza las dimensiones exactas al subirlas, así que
   el carrusel no da saltos de altura al cambiar de slide. */
.mk-hero .carousel-item {
  aspect-ratio: 1920 / 815;
  position: relative;
}

.mk-hero .carousel-item picture,
.mk-hero .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg, rgba(3, 42, 43, 0.94) 0%, rgba(3, 42, 43, 0.78) 38%, rgba(3, 42, 43, 0.28) 62%, rgba(3, 42, 43, 0.02) 82%);
}

.mk-hero__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.mk-hero__caption-inner {
  width: min(1240px, 100% - 3rem);
  margin: 0 auto;
  max-width: 100%;
}

.mk-hero__box { max-width: 36rem; color: var(--mk-white); }

.mk-badge {
  display: inline-block;
  font-family: var(--mk-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mk-green);
  background: var(--mk-gold);
  padding: 0.5rem 0.95rem;
  border-radius: 4px;
}

.mk-hero__title {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.7rem);
  margin-top: 1.1rem;
  text-wrap: balance;
}

.mk-hero__subtitle {
  margin-top: 1rem;
  font-size: 1.08rem;
  color: rgba(255,255,255,0.88);
  max-width: 32rem;
}

.mk-hero__actions { margin-top: 1.8rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }

/*=============================================
Indicadores y flechas: los MISMOS del inicio y de la ficha
de proyecto. Los dos carruseles son banners solo-imagen, así
que comparten reglas en lugar de duplicarlas; si mañana se
cambia el estilo aquí, cambia en los dos sitios a la vez.
=============================================*/

/* indicadores del carrusel estilo regla de plano */
/* Bootstrap pone los indicadores en una fila que no se parte y que
   deja que se encojan. Con las cuatro promos del inicio no se nota,
   pero un proyecto puede llevar dieciocho fotos en el slide: en el
   móvil cada raya se quedaba en 6 px, la activa medía lo mismo que
   las demás y la barra dejaba de decir nada. Se les prohíbe encoger
   y se les deja pasar a la línea siguiente: así conservan su tamaño
   —y su raya dorada más larga— haya las que haya. */
.mk-hero .carousel-indicators,
.mk-pdp-hero .carousel-indicators { margin-bottom: 1.6rem; gap: 6px; flex-wrap: wrap; }
.mk-hero .carousel-indicators [data-bs-target],
.mk-pdp-hero .carousel-indicators [data-bs-target] {
  width: 34px; height: 3px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: rgba(255,255,255,0.45);
  border: 0;
  opacity: 1;
  transition: background 0.3s, width 0.3s;
}
/* la activa: dorada y más ancha que las demás */
.mk-hero .carousel-indicators .active,
.mk-pdp-hero .carousel-indicators .active { background: var(--mk-gold); width: 54px; }

.mk-hero .carousel-control-prev,
.mk-hero .carousel-control-next,
.mk-pdp-hero .carousel-control-prev,
.mk-pdp-hero .carousel-control-next { width: 8%; opacity: 0.75; }

/* Al ser el slide solo imagen (sin el velo oscuro que antes lo cubría),
   las flechas e indicadores blancos se perdían sobre las fotos claras.
   Se les da un fondo propio para que se lean sobre cualquier imagen. */
.mk-hero .carousel-control-prev-icon,
.mk-hero .carousel-control-next-icon,
.mk-pdp-hero .carousel-control-prev-icon,
.mk-pdp-hero .carousel-control-next-icon {
  background-color: rgba(3, 42, 43, 0.55);
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
}
.mk-hero .carousel-control-prev:hover .carousel-control-prev-icon,
.mk-hero .carousel-control-next:hover .carousel-control-next-icon,
.mk-pdp-hero .carousel-control-prev:hover .carousel-control-prev-icon,
.mk-pdp-hero .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(3, 42, 43, 0.8);
}
.mk-hero .carousel-indicators [data-bs-target],
.mk-pdp-hero .carousel-indicators [data-bs-target] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* entrada del caption por slide */
.mk-hero .carousel-item .mk-hero__box > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--mk-ease), transform 0.7s var(--mk-ease);
}
.mk-hero .carousel-item.active .mk-hero__box > * { opacity: 1; transform: none; }
.mk-hero .carousel-item.active .mk-hero__box > *:nth-child(2) { transition-delay: 0.12s; }
.mk-hero .carousel-item.active .mk-hero__box > *:nth-child(3) { transition-delay: 0.22s; }
.mk-hero .carousel-item.active .mk-hero__box > *:nth-child(4) { transition-delay: 0.32s; }

/* ------------------------------------------------------------
   Features (franja de beneficios)
   ------------------------------------------------------------ */

.mk-features { position: relative; }

.mk-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.mk-feature {
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.3s var(--mk-ease), box-shadow 0.3s;
}
.mk-feature:hover { transform: translateY(-5px); box-shadow: var(--mk-shadow); }

.mk-feature__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.mk-feature h3 { font-family: var(--mk-font-body); font-weight: 800; font-size: 1.02rem; }
.mk-feature p { color: var(--mk-ink-soft); font-size: 0.92rem; }

/* ------------------------------------------------------------
   Proyectos
   ------------------------------------------------------------ */

.mk-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

/* fila incompleta oculta hasta que se despliega
   (selector reforzado: .mk-project ya trae display:flex,
   así que aquí necesitamos más especificidad para ganar) */
.mk-projects__grid .mk-project.mk-project--more { display: none; }

.mk-projects__grid.is-expanded .mk-project.mk-project--more {
  display: flex;
  opacity: 0;
  transform: translateY(18px);
  animation: mkProjectIn 0.55s var(--mk-ease) forwards;
  animation-delay: var(--mk-delay, 0s);
}

@keyframes mkProjectIn {
  to { opacity: 1; transform: none; }
}

.mk-projects__toggle {
  display: flex;
  justify-content: center;
  margin-top: 2.2rem;
}

/* el ícono cambia de clase (chevron-down/up) vía JS según el
   estado; no se rota por CSS para no duplicar el efecto (una
   flecha hacia arriba rotada 180° vuelve a verse como flecha
   hacia abajo). */

.mk-project {
  position: relative; /* ancla del stretched-link del título */
  background: var(--mk-white);
  border-radius: var(--mk-radius);
  overflow: hidden;
  border: 1px solid var(--mk-line);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--mk-ease), box-shadow 0.35s;
}
.mk-project:hover { transform: translateY(-6px); box-shadow: var(--mk-shadow); }

/* Portada vertical (flyers 1080x1290 ≈ 5/6) */
.mk-project__media {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--mk-green-soft);
}
.mk-project__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--mk-ease);
}
.mk-project:hover .mk-project__cover { transform: scale(1.04); }

/* Capa de paneo (imagen horizontal: plano/render). La imagen se
   fuerza a 170% del ancho del marco y el keyframe recorre el
   excedente (-70/170 = -41.18%) en vaivén infinito; queda en
   "paused" y solo corre mientras el cursor está encima. */
.mk-project__pan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.45s var(--mk-ease);
}
.mk-project__pan img {
  width: 170%; max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: mkPan 5s ease-in-out infinite alternate paused;
  will-change: transform;
}
@keyframes mkPan {
  from { transform: translateX(0); }
  to { transform: translateX(-41.18%); }
}

/* solo dispositivos con puntero fino: en táctil el tap navega */
@media (hover: hover) and (pointer: fine) {
  .mk-project:hover .mk-project__pan,
  .mk-project:focus-within .mk-project__pan { opacity: 1; }
  .mk-project:hover .mk-project__pan img,
  .mk-project:focus-within .mk-project__pan img { animation-play-state: running; }
}

/* scrim superior para que logo y estado siempre sean legibles */
.mk-project__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(rgba(3, 42, 43, 0.55), rgba(3, 42, 43, 0));
  z-index: 2;
  pointer-events: none;
}

/* "img." por delante por lo mismo que en la barra: .mk-scope img
   { max-width: 100% } gana a una clase suelta y dejaba el tope de
   ancho sin efecto. Aquí los dos lados son topes (max-*), así que
   la tarjeta acepta un logo de cualquier proporción sin deformarlo
   ni desbordar la esquina. */
img.mk-project__logo {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  max-height: 54px;
  max-width: 120px;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.mk-project__flags {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  pointer-events: none;
}
.mk-project__flags .mk-project__tag { position: static; }

.mk-project__stage {
  background: var(--mk-gold);
  color: var(--mk-green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(3, 42, 43, 0.25);
}
.mk-project__stage[data-stage="entregado"] { background: var(--mk-green); color: var(--mk-white); }
.mk-project__stage[data-stage="por-entregar"] { background: var(--mk-earth); color: var(--mk-white); }

/* ubicación superpuesta y centrada al pie de la portada */
.mk-project__loc {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100% - 28px);
  white-space: nowrap;
  background: rgba(3, 42, 43, 0.78);
  color: var(--mk-white);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.mk-project__loc i { color: var(--mk-gold); }

.mk-project__body { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }

.mk-project h3 { font-size: 1.45rem; text-align: center; }

/* título = stretched-link: cubre toda la tarjeta (portada incluida).
   template.css fuerza a{color:inherit !important} (0,1,1), por eso
   el color va con doble clase + !important (0,2,0). */
.mk-project .mk-project__title-link { color: var(--mk-ink) !important; text-decoration: none !important; }
.mk-project:hover .mk-project__title-link { color: var(--mk-green-2) !important; }
.mk-project__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* metraje + precio en una sola fila, 2 columnas
   (financiamiento vive en info-proyecto) */
.mk-project__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  padding: 0.95rem 0;
  border-top: 1px dashed var(--mk-line);
  border-bottom: 1px dashed var(--mk-line);
}
.mk-project__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-project__cell .mk-mono { font-size: 1.05rem; color: var(--mk-green); font-weight: 600; }
.mk-project__cell .mk-project__unavailable {
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.25;
}
.mk-project__cell .mk-project__sold { color: var(--mk-green); font-weight: 800; }
.mk-project__cell small {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}

.mk-project__was { color: var(--mk-ink-soft); font-size: 0.82rem; font-weight: 500; }
.mk-project__cell--price .mk-project__now { font-size: 1.15rem; }

/* fila de botones: siempre en una sola línea, nunca 2 filas.
   flex-basis 0 + min-width:0 reparte el ancho disponible entre
   ambos botones sin permitir que el segundo salte de línea. */
.mk-project__actions {
  margin-top: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: nowrap;
  padding-top: 0.4rem;
  position: relative;
  z-index: 2;
}
.mk-project__actions .mk-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

/* MD / tablet horizontal (992–1199px): la grilla sigue en 3
   columnas pero el ancho de tarjeta se reduce lo suficiente
   como para que los botones necesiten texto/gaps más compactos. */
@media (max-width: 1199px) and (min-width: 992px) {
  .mk-project__actions { gap: 0.4rem; }
  .mk-project__actions .mk-btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }
}

/* móvil (401–767px): hay ancho de sobra en 1 columna, así que
   el ícono va en la misma fila que el texto (sin espacio
   desperdiciado, p.ej. "Asesoría 🗨"). Fila y texto en una sola
   línea, igual que en desktop. */

/* solo el rango angosto real (hasta ~377px, p.ej. iPhone SE)
   necesita el fallback: ahí un CTA largo ("Ver disponibilidad")
   ya no reduce más su fuente sin perder legibilidad, así que se
   permite pasar a 2 líneas dentro del propio botón (nunca se
   apila en una fila aparte). El ícono baja debajo del texto
   (flex-direction:column) para que no se solape con la segunda
   línea cuando el texto se parte. */
@media (max-width: 380px) {
  .mk-project__actions .mk-btn {
    flex-direction: column;
    gap: 0.2rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
}

/* ------------------------------------------------------------
   Plano interactivo (mesa de dibujo)
   ------------------------------------------------------------ */

/* minmax(0, 1fr), no 1fr: por defecto un item de grid no se
   encoge por debajo del min-content de su contenido, y .mk-plan
   (min-width:640px) hacía que la pista completa —y con ella toda
   la página— nunca bajara de ~640px, filtrando el scroll
   horizontal fuera de .mk-plan-scroll hacia el body entero. */
.mk-plan-wrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.mk-plan-side { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: calc(var(--mk-header-h) + 20px); }

.mk-legend { display: flex; flex-direction: column; gap: 0.65rem; }
.mk-legend__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mk-font-mono);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
}
.mk-legend__swatch {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.4);
  flex: none;
}

.mk-plan-stats {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 1.2rem;
  display: flex;
  gap: 1.6rem;
}
.mk-plan-stats strong {
  font-family: var(--mk-font-mono);
  font-size: 1.4rem;
  color: var(--mk-gold-2);
  display: block;
  line-height: 1.1;
}
.mk-plan-stats span { font-size: 0.8rem; color: rgba(255,255,255,0.7); }

/* ficha del proyecto en lanzamiento (columna del plano):
   nombre, ubicación y los mismos datos que su tarjeta en
   "Nuestros Proyectos". Sobre fondo verde, así que el texto
   va en blancos translúcidos como la leyenda y las cifras. */
.mk-plan-project { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.mk-plan-project__name {
  font-family: var(--mk-font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--mk-white);
  margin: 0;
}
.mk-plan-project__loc {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}
.mk-plan-project__loc i { color: var(--mk-gold); margin-right: 0.35rem; }

.mk-plan-facts {
  margin: 0.2rem 0 0.3rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mk-plan-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 0.5rem;
}
.mk-plan-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-plan-facts dt {
  font-size: 0.76rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}
.mk-plan-facts dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mk-white);
  text-align: right;
}
.mk-plan-facts dd.mk-mono { color: var(--mk-gold-2); }
.mk-plan-facts dd s { color: rgba(255,255,255,0.45); font-size: 0.78rem; margin-right: 0.3rem; }


/* Aviso que ocupa el sitio del plano cuando el proyecto todavía no
   tiene el suyo cargado (o no tiene lotes). La sección no se oculta:
   cada proyecto se vende por lotes y el visitante debe saberlo, así
   que aquí va la vía directa para pedir la disponibilidad. */
.mk-plan-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--mk-radius);
  background: rgba(255, 255, 255, 0.04);
}

.mk-plan-empty > i {
  font-size: 1.9rem;
  color: var(--mk-gold);
}

.mk-plan-empty h3 {
  font-family: var(--mk-font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--mk-white);
  margin: 0;
}

.mk-plan-empty p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.78);
}

.mk-plan-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.4rem;
}
/* contenedor del plano */
.mk-plan-scroll { overflow-x: auto; border-radius: var(--mk-radius); -webkit-overflow-scrolling: touch; }
.mk-plan {
  position: relative;
  min-width: 640px;
  border-radius: var(--mk-radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  background: var(--mk-sand);
}
.mk-plan__img { display: block; width: 100%; height: auto; }
.mk-plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* lotes */
.mk-lot {
  cursor: pointer;
  stroke-width: 2;
  transition: fill 0.3s, stroke 0.3s;
  opacity: 0;
}
.mk-plan.is-revealed .mk-lot { opacity: 1; transition: fill 0.3s, stroke 0.3s, opacity 0.5s ease var(--mk-delay, 0s); }

/* 3 estados: verde=disponible, dorado=reservado, cobre=vendido.
   "proceso" se mantiene como alias de "reservado" (mismo color)
   por si queda alguna fila sin migrar en la BD. */
.mk-lot--disponible { fill: rgba(31, 138, 99, 0.45); stroke: rgba(31, 138, 99, 0.9); }
.mk-lot--disponible:hover, .mk-lot--disponible:focus-visible { fill: rgba(31, 138, 99, 0.72); stroke: var(--mk-gold); }
.mk-lot--reservado, .mk-lot--proceso { fill: rgba(215, 164, 70, 0.55); stroke: rgba(215, 164, 70, 0.95); cursor: not-allowed; }
.mk-lot--vendido { fill: rgba(196, 112, 58, 0.5); stroke: rgba(196, 112, 58, 0.9); cursor: not-allowed; }

/* popover del lote
   --mk-pop-shift: corrección horizontal (px) que aplica meka.js
   cuando el lote está cerca del borde izq/der del plano y la
   burbuja centrada (-50%) se saldría del área visible de
   .mk-plan-scroll (overflow-x:auto la recorta ahí, no en los
   bordes de la página). La flecha (::after) se contra-desplaza
   la misma cantidad para seguir apuntando al lote real. */
.mk-plan__pop {
  position: absolute;
  z-index: 5;
  width: 240px;
  background: var(--mk-white);
  color: var(--mk-ink);
  border-radius: var(--mk-radius-sm);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  padding: 1rem 1.1rem;
  transform: translate(calc(-50% + var(--mk-pop-shift, 0px)), calc(-100% - 14px));
  transition: opacity 0.2s;
}
.mk-plan__pop::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--mk-pop-shift, 0px));
  bottom: -7px;
  width: 14px; height: 14px;
  background: var(--mk-white);
  transform: translateX(-50%) rotate(45deg);
}
.mk-plan__pop.is-below { transform: translate(calc(-50% + var(--mk-pop-shift, 0px)), 16px); }
.mk-plan__pop.is-below::after { bottom: auto; top: -7px; }

/* Móvil (<768px): tarjeta fija al pie de la pantalla en vez de
   burbuja anclada — el plano vive dentro de .mk-plan-scroll
   (overflow-x:auto) y una burbuja porcentual se recorta ahí;
   position:fixed escapa ese recorte por completo. */
.mk-plan__pop--sheet {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px; top: auto;
  width: auto; max-width: none;
  transform: none;
  z-index: 1050;
  animation: mkSheetUp 0.25s var(--mk-ease);
}
.mk-plan__pop--sheet::after { display: none; }
@keyframes mkSheetUp {
  from { transform: translateY(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-plan__pop--sheet { animation: none; }
}

.mk-plan__pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.mk-plan__pop-head .mk-mono { font-size: 1.05rem; font-weight: 600; color: var(--mk-green); }
.mk-plan__pop-close {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: var(--mk-sand);
  color: var(--mk-ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  flex: none;
}
.mk-plan__pop-close:hover { background: var(--mk-line); color: var(--mk-ink); }

.mk-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}
.mk-status--disponible { background: #E4F2EC; color: #17694B; }
.mk-status--reservado, .mk-status--proceso { background: #F9F0DD; color: #8A6420; }
.mk-status--vendido { background: #F9E9DD; color: #9C4F1F; }

.mk-plan__pop-rows { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; margin-bottom: 0.8rem; }
.mk-plan__pop-rows div { display: flex; justify-content: space-between; }
.mk-plan__pop-rows dt { color: var(--mk-ink-soft); font-weight: 400; }
.mk-plan__pop-rows dd { margin: 0; font-weight: 700; }

/* ------------------------------------------------------------
   Trayectoria en números
   ------------------------------------------------------------ */

.mk-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.mk-stat {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: var(--mk-radius);
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s var(--mk-ease), box-shadow 0.3s;
}
.mk-stat:hover { transform: translateY(-5px); box-shadow: var(--mk-shadow); }

.mk-stat__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}

.mk-stat__value {
  font-family: var(--mk-font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  color: var(--mk-green);
  line-height: 1.1;
}

.mk-stat__label { color: var(--mk-ink-soft); font-size: 0.92rem; margin-top: 0.4rem; }

/* ------------------------------------------------------------
   Carrusel scroll-snap (testimonios / blog)
   ------------------------------------------------------------ */

.mk-carousel-shell { position: relative; }

.mk-carousel {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.4rem 0.2rem 1.2rem;
  scrollbar-width: none;
}
.mk-carousel::-webkit-scrollbar { display: none; }

.mk-carousel > * {
  flex: 0 0 calc((100% - 2.8rem) / 3);
  scroll-snap-align: start;
}

.mk-carousel-nav {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
}
.mk-carousel-nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--mk-line);
  background: var(--mk-white);
  color: var(--mk-green);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.mk-carousel-nav button:hover { background: var(--mk-green); color: var(--mk-white); transform: translateY(-2px); }

/* ---- Proyectos del inicio ----

   El carrusel conserva las tres columnas y el aire que tenía la
   rejilla (gap 1.6rem), para que la sección se vea igual que
   antes: lo único que cambia es cómo se recorre.

   El relleno vertical no es decorativo. El track lleva
   overflow-x:auto y eso obliga a overflow-y:auto, así que
   recorta por arriba y por abajo; sin ese aire, el
   levantamiento de 6px del hover y su sombra (--mk-shadow,
   34px de difuminado) se cortarían contra el borde. */
#mk-proyectos .mk-carousel { gap: 1.6rem; padding: 0.8rem 0.2rem 1.4rem; }
#mk-proyectos .mk-carousel > * { flex: 0 0 calc((100% - 3.2rem) / 3); }

/* ------------------------------------------------------------
   Testimonios — reels de Instagram embebidos
   ------------------------------------------------------------ */

/* tarjeta completa: video recortado + link "Ver más" debajo */
#mk-testimonios .mk-carousel { gap: 20px; }
#mk-testimonios .mk-carousel > * { flex: 0 0 calc((100% - 40px) / 3); }

.mk-reel-card { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; }

.mk-reel {
  position: relative;
  /* 40/49 ≈ proporción real del área de video dentro del embed de
     Instagram (medida directamente: a 240px de ancho el video mide
     ~298px de alto) — usar 9/16 aquí dejaba una franja del pie de
     foto/iconos visible porque el embed de IG no es realmente 9:16. */
  aspect-ratio: 40 / 49;
  border-radius: 18px;
  overflow: hidden;
  background: var(--mk-green);
  box-shadow: var(--mk-shadow-sm);
  transition: transform 0.3s var(--mk-ease), box-shadow 0.3s;
}
.mk-reel-card:hover .mk-reel { transform: translateY(-5px); box-shadow: var(--mk-shadow); }

.mk-reel__frame { position: absolute; inset: 0; overflow: hidden; }

/* el iframe de Instagram no se puede "despojar" de su cabecera de
   perfil, del texto "Ver más en Instagram", ni de la barra de
   like/comentar/compartir/guardar ni del cuadro de comentarios
   (cross-origin) — se recorta visualmente agrandando el iframe y
   subiéndolo con un offset negativo, dejando visible solo el área
   del video. -60px cubre la cabecera (~55-63px medidos) con margen
   de sobra; el resto del contenido queda fuera del recorte. */
.mk-reel__frame iframe {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: 640px;
  border: 0;
}

.mk-reel__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--mk-green) 40%, var(--mk-green-2) 50%, var(--mk-green) 60%);
  background-size: 220% 100%;
  animation: mkReelShimmer 1.6s ease-in-out infinite;
}
@keyframes mkReelShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

.mk-reel__badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-white) !important;
  font-size: 1.1rem;
  background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 80%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.25s var(--mk-ease);
}
.mk-reel__badge:hover { transform: scale(1.1); }

/* caption bajo la tarjeta — todo lo que queda visible del "chrome"
   nativo de Instagram (antes: like/comentar/compartir/guardar,
   cuadro de comentario, texto "Ver más en Instagram") se reemplaza
   por este único link propio, con estilo consistente al resto del sitio. */
.mk-reel__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mk-ink);
  text-decoration: none;
  transition: color 0.2s;
}
.mk-reel__link i { font-size: 0.7rem; color: #C13584; }
.mk-reel__link:hover { color: #C13584; }

.mk-btn--ig {
  background: var(--mk-white);
  color: var(--mk-ink) !important;
  border: 1px solid var(--mk-line);
  /* el texto es largo — a diferencia del resto de .mk-btn (siempre
     cortos) este necesita poder envolver en pantallas angostas para
     no desbordar el viewport. */
  white-space: normal;
  text-align: center;
}
.mk-btn--ig i { color: #C13584; }
.mk-btn--ig:hover {
  color: var(--mk-white) !important;
  border-color: transparent;
  background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 80%);
}
.mk-btn--ig:hover i { color: var(--mk-white); }

@media (prefers-reduced-motion: reduce) {
  .mk-reel__shimmer { animation: none; }
}

/* ------------------------------------------------------------
   Contacto / asesoría
   ------------------------------------------------------------ */

.mk-contact { position: relative; overflow: hidden; }

.mk-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.mk-contact__info { color: var(--mk-white); }

/* selector reforzado (2 clases) a propósito: ".mk-scope ul" (línea
   ~92, reset global de listas) tiene más especificidad que una sola
   clase y anulaba silenciosamente el margin-top/padding-top de abajo,
   dejando la línea divisoria pegada al párrafo de arriba. */
.mk-contact__info .mk-contact__list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.mk-contact__list li { display: flex; align-items: flex-start; gap: 0.9rem; color: rgba(255,255,255,0.88); }
/* min-width:0 es necesario porque es hijo de un flex container: sin
   esto, un texto sin espacios (el correo) no puede encogerse por
   debajo de su ancho intrínseco y se desborda/recorta contra el
   borde en pantallas angostas en vez de envolver con overflow-wrap. */
.mk-contact__list li > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.mk-contact__list i {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: var(--mk-gold-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mk-contact__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
/* los 2 teléfonos quedan como enlaces independientes, uno debajo
   del otro — antes iban en una sola línea separados por "·" y el
   segundo se partía a la mitad en pantallas angostas. Un gap propio
   (mayor que el gap etiqueta→valor de 0.15rem) los distingue como
   2 números tocables en vez de verse pegados en un solo bloque. */
.mk-contact__phones { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.1rem; }
.mk-contact__list a { display: block; }
.mk-contact__list a:hover { color: var(--mk-gold-2); }

/* tarjeta de formulario */
.mk-form-card {
  background: var(--mk-white);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
  padding: 2rem;
  color: var(--mk-ink);
}

.mk-form-card h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.mk-form-card > p { color: var(--mk-ink-soft); font-size: 0.92rem; margin-bottom: 1.4rem; }

/* toggle correo / whatsapp */
.mk-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: var(--mk-sand);
  border-radius: 999px;
  padding: 0.35rem;
  margin-bottom: 1.3rem;
}
.mk-mode label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.6rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--mk-ink-soft);
  transition: background 0.25s, color 0.25s;
  margin: 0;
  white-space: nowrap;
}
.mk-mode input { position: absolute; opacity: 0; pointer-events: none; }
.mk-mode label:has(input:checked) { background: var(--mk-green); color: var(--mk-white); }

/* campos */
.mk-field { margin-bottom: 1rem; }
.mk-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
  margin-bottom: 0.35rem;
}
.mk-req { color: var(--mk-gold); }
.mk-optional { color: var(--mk-ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
.mk-field input, .mk-field select, .mk-field textarea {
  width: 100%;
  border: 1.5px solid var(--mk-line);
  border-radius: 10px;
  background: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  font-size: 0.96rem;
  padding: 0.78rem 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus {
  outline: none;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}
.mk-field input:focus-visible,
.mk-field select:focus-visible,
.mk-field textarea:focus-visible {
  outline: 2px solid var(--mk-white);
  outline-offset: 1px;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 4px var(--mk-green-2);
}
.mk-field textarea { resize: vertical; min-height: 96px; }

.mk-form-note { font-size: 0.78rem; color: var(--mk-ink-soft); margin-top: 0.9rem; }

/* Consentimiento compartido por los formularios que almacenan datos personales. */
.mk-privacy-consent {
  margin: 1rem 0 1.2rem;
  color: var(--mk-ink);
  font-size: 0.82rem;
  line-height: 1.45;
}
.mk-privacy-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  text-transform: none;
  cursor: pointer;
}
.mk-privacy-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
  accent-color: var(--mk-green);
  cursor: pointer;
}
.mk-privacy-consent a {
  color: var(--mk-green-2) !important;
  font-weight: 800;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: rgba(11, 74, 76, 0.52) !important;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.mk-privacy-consent a:hover {
  color: var(--mk-green) !important;
  text-decoration-color: var(--mk-gold) !important;
}
.mk-privacy-consent a:focus-visible { text-decoration-color: var(--mk-gold) !important; }

/* La insignia obligatoria de reCAPTCHA v3 queda por encima del
   acceso flotante de WhatsApp, sin ocultarse ni competir con él. */
.grecaptcha-badge {
  bottom: 92px !important;
  z-index: 1030;
}

/* honeypot */
.mk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------
   Blog
   ------------------------------------------------------------ */

.mk-post {
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s var(--mk-ease), box-shadow 0.3s;
}
.mk-post:hover { transform: translateY(-5px); box-shadow: var(--mk-shadow); }

.mk-post__media { aspect-ratio: 16/10; overflow: hidden; background: var(--mk-green-soft); }
.mk-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--mk-ease); }
.mk-post:hover .mk-post__media img { transform: scale(1.06); }

.mk-post__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }

.mk-post__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mk-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth);
}

.mk-post__category {
  background: var(--mk-green-soft);
  color: var(--mk-green);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.mk-post h3 { font-size: 1.12rem; line-height: 1.35; }
.mk-post p { color: var(--mk-ink-soft); font-size: 0.9rem; flex: 1; }

.mk-post__link {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--mk-green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mk-post__link:hover { color: var(--mk-green-2); }
.mk-post__link i { transition: transform 0.25s var(--mk-ease); }
.mk-post__link:hover i { transform: translateX(4px); }

/* Enlace al listado bajo el carrusel del inicio */
.mk-blog-all { margin-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); text-align: center; }

/* ------------------------------------------------------------
   Blog — listado (/blog)
   Reutiliza la tarjeta .mk-post del carrusel; solo cambia el
   contenedor: rejilla en vez de carrusel, más los filtros por tag.
   ------------------------------------------------------------ */

.mk-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
}

/* Doble clase (0,2,0) + !important: es la única forma de ganarle a
   la regla global de template.css a:link{color:inherit !important}
   (0,1,1) — ver la nota de los .mk-btn más arriba. */
.mk-blog-filters .mk-blog-filter {
  font-family: var(--mk-font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth) !important;
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.mk-blog-filters .mk-blog-filter:hover {
  border-color: var(--mk-green-2);
  color: var(--mk-green) !important;
}
.mk-blog-filters .mk-blog-filter.is-active {
  background: var(--mk-green);
  border-color: var(--mk-green);
  color: var(--mk-white) !important;
}

.mk-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

/* ------------------------------------------------------------
   Blog — artículo (/blog/<url>)

   Composición: portada a sangre + panel blanco de cabecera que
   sube sobre su borde inferior + rejilla de dos columnas
   (lectura | formulario pegajoso). Por debajo de 1200px pasa a
   una sola columna y el formulario cae detrás del contenido.
   ------------------------------------------------------------ */

.mk-article { position: relative; background: var(--mk-white); }

/* La altura va declarada a pelo, NO derivada de un aspect-ratio
   con max-height: cuando hay razón de aspecto, el max-height se
   transfiere también al ancho, y en pantallas anchas y bajas el
   navegador estrechaba la portada para conservar la proporción
   (dejaba un hueco blanco a la derecha). */
.mk-article__cover {
  height: clamp(240px, 36vw, 600px);
  background: var(--mk-green);
  overflow: hidden;
}
.mk-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contenedor propio, más estrecho que el general de 1240px: con
   1140px la columna de lectura queda en ~756px, que son unos 70
   caracteres por línea — la medida cómoda para texto largo. */
.mk-container.mk-article__container { width: min(1140px, 100% - 3rem); }

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

.mk-article__head {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(1.2rem, 0.6rem + 2.4vw, 4rem));
  background: var(--mk-white);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
}

.mk-crumbs {
  font-family: var(--mk-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.mk-crumbs span[aria-hidden] { opacity: 0.5; }
/* doble clase + !important: template.css fuerza color:inherit en
   todos los <a> del sitio (ver la nota de los .mk-btn) */
.mk-crumbs .mk-crumbs__link { color: var(--mk-earth) !important; }
.mk-crumbs .mk-crumbs__link:hover { color: var(--mk-green) !important; }
.mk-crumbs__current { color: var(--mk-ink); font-weight: 600; }

.mk-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-family: var(--mk-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth);
}
.mk-article__meta .mk-post__category { color: var(--mk-green) !important; }
.mk-article__meta .mk-post__category:hover { background: var(--mk-green); color: var(--mk-white) !important; }
.mk-article__meta i { margin-right: 0.3rem; color: var(--mk-gold); }

/* Escala propia: .mk-title está calibrada para portadas (hasta
   3rem) y en un artículo se comía media pantalla. */
.mk-article__title {
  font-family: var(--mk-font-display);
  font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.9rem 0 0;
  max-width: 46rem;
}

.mk-article__head .mk-lead { max-width: 46rem; margin-top: 0.9rem; }

/* ---- Rejilla ----------------------------------------------- */

.mk-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  align-items: start;
  padding: clamp(2.2rem, 1.8rem + 1.8vw, 3.4rem) 0 clamp(3rem, 2.4rem + 2vw, 4.4rem);
}

.mk-article__main { min-width: 0; }

/* mismo idioma que .mk-plan-side: la columna acompaña la lectura
   y se detiene sola al acabar la rejilla, sin JavaScript */
.mk-article__aside { position: sticky; top: calc(var(--mk-header-h) + 20px); }

/* Sobre fondo blanco la tarjeta necesita un borde: la sombra sola
   no la separa del papel como sí lo hace en la sección verde. */
.mk-article__form {
  border: 1px solid var(--mk-line);
  padding: 1.6rem;
}
.mk-article__form h3 { font-size: 1.18rem; }
.mk-article__form > p { font-size: 0.86rem; margin-bottom: 1.1rem; }
.mk-article__form .mk-field { margin-bottom: 0.85rem; }
.mk-article__form .mk-field textarea { min-height: 84px; }
.mk-article__form .mk-form-note { font-size: 0.72rem; margin-top: 0.8rem; }

/* ------------------------------------------------------------
   Cuerpo del artículo: HTML libre escrito en el editor del panel.
   .mk-scope quita márgenes, viñetas y color de enlace a todo el
   sitio (es un reset pensado para maquetas), así que aquí hay que
   devolvérselos al contenido editorial.
   ------------------------------------------------------------ */

.mk-article__body { font-size: 1.05rem; line-height: 1.8; }

.mk-article__body > *:first-child { margin-top: 0; }
.mk-article__body > *:last-child { margin-bottom: 0; }

/* Justificado solo en el texto corrido, nunca en los títulos.
   Sin partición de palabras el justificado abre huecos enormes
   entre palabras, así que va acompañado de hyphens (necesita
   lang="es" en <html>, ver template.php). */
.mk-article__body p,
.mk-article__body li {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.mk-article__body h2 {
  font-size: clamp(1.32rem, 1.15rem + 0.6vw, 1.6rem);
  margin: 2.6rem 0 0.9rem;
  padding-top: 0.2rem;
}
.mk-article__body h3 { font-size: clamp(1.14rem, 1.05rem + 0.35vw, 1.3rem); margin: 2rem 0 0.7rem; }
.mk-article__body h4 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; }

.mk-article__body p { margin: 0 0 1.3rem; }

.mk-article__body ul, .mk-article__body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.35rem;
}
.mk-article__body ul { list-style: disc; }
.mk-article__body ol { list-style: decimal; }
.mk-article__body li { margin-bottom: 0.55rem; }
.mk-article__body li::marker { color: var(--mk-gold); }

.mk-article__body blockquote {
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--mk-gold);
  color: var(--mk-ink-soft);
  font-size: 1.1rem;
  font-style: italic;
}

/* ---- Imágenes del contenido -------------------------------- */

/* El fondo de reserva evita el salto en blanco mientras carga y
   deja un hueco reconocible si la imagen falta. */
.mk-article__body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-green-soft);
  margin: 1.9rem auto;
}

.mk-article__body figure { margin: 1.9rem 0; }
.mk-article__body figure img { margin: 0 auto; }
.mk-article__body figcaption {
  font-size: 0.82rem;
  color: var(--mk-ink-soft);
  text-align: center;
  margin-top: 0.6rem;
  font-style: italic;
}

/* El editor permite flotar una imagen a un lado del texto
   (style="float:left|right"): se le da aire y se le pone tope de
   ancho para que no ahogue la columna. En móvil se anula. */
.mk-article__body img[style*="float: left"],
.mk-article__body img[style*="float:left"],
.mk-article__body img.note-float-left {
  max-width: 50%;
  margin: 0.4rem 1.5rem 1.1rem 0;
}
.mk-article__body img[style*="float: right"],
.mk-article__body img[style*="float:right"],
.mk-article__body img.note-float-right {
  max-width: 50%;
  margin: 0.4rem 0 1.1rem 1.5rem;
}

.mk-article__body hr {
  border: 0;
  border-top: 1px solid var(--mk-line);
  margin: 2.4rem 0;
  opacity: 1;
}

.mk-article__body table { width: 100%; margin: 1.8rem 0; }

/* mismo motivo de especificidad que en los filtros: los enlaces
   dentro del texto deben verse como enlaces */
/* el subrayado también lleva !important: template.css declara
   a:link{text-decoration:none !important} para todo el sitio */
.mk-article .mk-article__body a {
  color: var(--mk-green-2) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.mk-article .mk-article__body a:hover { color: var(--mk-green) !important; }

.mk-article__body strong, .mk-article__body b { font-weight: 700; }

/* ---- Pie del artículo -------------------------------------- */

.mk-article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--mk-line);
}

.mk-share { display: flex; align-items: center; gap: 0.55rem; }
.mk-share__label {
  font-family: var(--mk-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth);
  margin-right: 0.2rem;
}
.mk-share .mk-share__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mk-line);
  background: var(--mk-white);
  color: var(--mk-green) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--mk-ease);
}
.mk-share .mk-share__btn:hover {
  background: var(--mk-green);
  border-color: var(--mk-green);
  color: var(--mk-white) !important;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */

.mk-faq { max-width: 860px; margin: 0 auto; }

.mk-faq .accordion-item {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-sm) !important;
  margin-bottom: 0.8rem;
  overflow: hidden;
  background: var(--mk-white);
}

.mk-faq .accordion-button {
  font-family: var(--mk-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--mk-ink);
  background: var(--mk-white);
  padding: 1.15rem 1.4rem;
  box-shadow: none;
}
.mk-faq .accordion-button:not(.collapsed) {
  background: var(--mk-green);
  color: var(--mk-white);
}
.mk-faq .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.mk-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(201,162,39,0.45); }

.mk-faq .accordion-body { color: var(--mk-ink-soft); padding: 1.2rem 1.4rem; font-size: 0.96rem; }
.mk-faq .accordion-body ol { margin: 0; padding-left: 1.2rem; }
.mk-faq .accordion-body li { margin-bottom: 1rem; line-height: 1.55; }
.mk-faq .accordion-body li:last-child { margin-bottom: 0; }
.mk-faq .accordion-body li strong { color: var(--mk-green); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.mk-footer {
  --mk-footer-gold: #F0C86A;
  background: var(--mk-green);
  color: rgba(255,255,255,0.85);
  padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 0;
  font-size: 0.93rem;
}

.mk-footer__grid {
  display: grid;
  /* "Información" (col 3) necesita ancho de sobra para que "Términos
     y Condiciones de Reserva" quepa en una sola línea — se le resta
     ese espacio a "Contacto" (col 2), angostando el mapa. */
  grid-template-columns: 1fr 1fr 1.3fr 1.1fr;
  gap: 2.5rem;
  padding-bottom: 2.8rem;
}

.mk-footer h4 {
  font-family: var(--mk-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mk-footer-gold);
  margin-bottom: 1.1rem;
}

.mk-footer__links { display: flex; flex-direction: column; gap: 0.55rem; }
.mk-footer__links a {
  color: rgba(255,255,255,0.84);
  transition: color 0.2s ease, transform 0.25s var(--mk-ease), text-shadow 0.2s ease;
}
.mk-footer__links a:hover {
  color: var(--mk-footer-gold);
  transform: translateX(4px);
  text-shadow: 0 0 18px rgba(240,200,106,0.2);
}

.mk-footer__contact { display: flex; flex-direction: column; gap: 0.75rem; }
.mk-footer__contact li { display: flex; gap: 0.7rem; align-items: center; }
.mk-footer__contact i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  font-size: 0.84rem;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--mk-ease);
}
.mk-footer__contact a {
  color: rgba(255,255,255,0.84);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.mk-footer__contact a:hover {
  color: var(--mk-footer-gold);
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
}
.mk-footer__contact li:hover i {
  color: var(--mk-footer-gold);
  background: rgba(240,200,106,0.12);
  border-color: var(--mk-footer-gold);
  transform: translateY(-2px);
}
/* el mapa/dirección puede traer palabras largas sin espacio en
   pantallas angostas (misma lección que la sección de contacto). */
.mk-footer__contact li > span, .mk-footer__contact li > a { min-width: 0; overflow-wrap: anywhere; }

/* mapa embebido de Google Maps */
.mk-footer__map {
  margin-top: 1rem;
  border-radius: var(--mk-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  aspect-ratio: 2 / 1;
}
.mk-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* mini formulario del footer */
.mk-footer__form { display: flex; flex-direction: column; gap: 0.65rem; }
.mk-footer__form input, .mk-footer__form textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  color: var(--mk-white);
  font-family: var(--mk-font-body);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.25s, background 0.25s;
}
.mk-footer__form input::placeholder, .mk-footer__form textarea::placeholder { color: rgba(255,255,255,0.5); }
.mk-footer__form input:focus, .mk-footer__form textarea:focus {
  outline: none;
  border-color: var(--mk-gold-2);
  background: rgba(255,255,255,0.12);
}
.mk-footer__form textarea { resize: none; min-height: 70px; }
.mk-footer__form .mk-privacy-consent { color: var(--mk-white); margin: 0.35rem 0 0.55rem; }
.mk-footer__form .mk-privacy-consent a {
  color: var(--mk-footer-gold) !important;
  text-decoration-color: rgba(240,200,106,0.65) !important;
}
.mk-footer__form .mk-privacy-consent a:hover { color: var(--mk-white) !important; }
.mk-footer__form .mk-privacy-consent input[type="checkbox"] { accent-color: var(--mk-gold); }

/* banda de redes sociales: la línea es un ::before absoluto en
   top:50% del propio contenedor: como el contenedor solo centra
   (align-items:center) a la píldora y su padding es simétrico
   arriba/abajo, ese 50% cae exactamente en el centro vertical de la
   píldora — la línea atraviesa los círculos por la mitad, no por
   arriba, sin importar el alto real de los íconos. */
.mk-footer__socialband {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.7rem 0;
}
.mk-footer__socialband::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.mk-footer__socialband .mk-socials {
  position: relative;
  z-index: 1;
  background: var(--mk-green);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.55rem 1rem;
}
.mk-footer__socialband .mk-socials a {
  color: var(--mk-white) !important;
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  box-shadow: none;
}
.mk-footer__socialband .mk-socials a:hover,
.mk-footer__socialband .mk-socials a:focus-visible {
  color: var(--mk-green) !important;
  background: var(--mk-footer-gold);
  border-color: var(--mk-footer-gold);
  box-shadow: 0 8px 22px rgba(0,0,0,0.2);
  transform: translateY(-3px) scale(1.04);
}

.mk-footer__bottom { padding: 1.6rem 0; }
/* grid (no flex) para que "libro" quede en el centro geométrico
   real del contenedor: con flex + space-between, el ítem del medio
   se desplaza hacia el lado del elemento más angosto (el logo) en
   vez de quedar centrado — con columnas 1fr/auto/1fr el centro
   siempre cae exacto sin importar el ancho del logo o el copyright. */
.mk-footer__bottom-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.6);
}
.mk-footer__bottom-logo { height: 40px; width: auto; justify-self: start; }
.mk-footer__copy { justify-self: end; text-align: right; }

.mk-footer__libro { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; justify-self: center; }
.mk-footer__libro img { height: 42px; width: auto; transition: transform 0.25s var(--mk-ease), filter 0.25s ease; }
.mk-footer__libro span { font-size: 0.8rem; color: rgba(255,255,255,0.74); transition: color 0.2s ease; }
.mk-footer__libro:hover img { transform: translateY(-2px); filter: drop-shadow(0 5px 12px rgba(0,0,0,0.22)); }
.mk-footer__libro:hover span { color: var(--mk-footer-gold); }

/* ------------------------------------------------------------
   Modales Meka (sobre Bootstrap)
   ------------------------------------------------------------ */

.mk-modal .modal-content {
  border: 0;
  border-radius: var(--mk-radius);
  overflow: hidden;
  font-family: var(--mk-font-body);
  color: var(--mk-ink);
}

.mk-modal .modal-header {
  background: var(--mk-green);
  color: var(--mk-white);
  border: 0;
  padding: 1.3rem 1.6rem;
}
.mk-modal .modal-header .mk-eyebrow { color: var(--mk-gold-2); }
.mk-modal .modal-title { font-family: var(--mk-font-display); font-size: 1.3rem; }
.mk-modal .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }

.mk-modal .modal-body { padding: 1.6rem; }

/* resumen del lote en el modal de reserva */
.mk-resume {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  background: var(--mk-sand);
  border-radius: var(--mk-radius-sm);
  padding: 0.95rem 1.1rem;
  margin-bottom: 1.3rem;
}
.mk-resume div { display: flex; flex-direction: column; gap: 1px; }
.mk-resume small {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}
.mk-resume strong { font-family: var(--mk-font-mono); font-size: 0.98rem; color: var(--mk-green); }

/* panel de éxito de reserva */
.mk-success { text-align: center; padding: 0.6rem 0.2rem; }
.mk-success__icon {
  width: 74px; height: 74px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: #E4F2EC;
  color: #17694B;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-success h4 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.mk-success__code {
  font-family: var(--mk-font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: var(--mk-sand);
  border: 1px dashed var(--mk-earth);
  border-radius: 8px;
  display: inline-block;
  padding: 0.55rem 1.2rem;
  margin: 0.7rem 0 1.2rem;
}

.mk-pay {
  text-align: left;
  background: var(--mk-sand);
  border-radius: var(--mk-radius-sm);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.mk-pay h5 { font-family: var(--mk-font-body); font-weight: 800; font-size: 0.95rem; margin-bottom: 0.7rem; }
.mk-pay ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }
.mk-pay li { display: flex; justify-content: space-between; gap: 1rem; }
.mk-pay li span { color: var(--mk-ink-soft); }
.mk-pay li strong { font-family: var(--mk-font-mono); word-break: break-all; text-align: right; }

/* comprobante de pago dentro del panel de éxito */
.mk-voucher {
  text-align: left;
  border: 1.5px dashed var(--mk-line);
  border-radius: var(--mk-radius-sm);
  padding: 1.1rem 1.3rem 1.2rem;
  margin-bottom: 1rem;
}
.mk-voucher .mk-field { margin-bottom: 0.9rem; }
.mk-voucher .mk-field label { display: flex; align-items: center; gap: 0.4rem; }
.mk-voucher input[type="file"] {
  width: 100%;
  border: 1.5px solid var(--mk-line);
  border-radius: 10px;
  background: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  font-size: 0.9rem;
  padding: 0.62rem 0.8rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.mk-voucher input[type="file"]:focus {
  outline: none;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}
.mk-voucher .mk-form-note { margin-top: 0.7rem; }

.mk-voucher-done {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  font-size: 0.9rem;
  color: #17694B;
  background: #E4F2EC;
  border-radius: var(--mk-radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.mk-voucher-done i { font-size: 1.15rem; flex-shrink: 0; }

/* página /comprobante: la tarjeta del formulario, centrada */
.mk-voucher-page { max-width: 520px; margin: 0 auto; }
.mk-voucher-page input[type="file"] {
  width: 100%;
  border: 1.5px solid var(--mk-line);
  border-radius: 10px;
  background: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  font-size: 0.9rem;
  padding: 0.62rem 0.8rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.mk-voucher-page input[type="file"]:focus {
  outline: none;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}
.mk-voucher-page .mk-success { padding-top: 0; }
.mk-voucher-page .mk-success p { margin-bottom: 1.2rem; }

/* ------------------------------------------------------------
   Animaciones de scroll
   ------------------------------------------------------------ */

[data-mk-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--mk-ease), transform 0.7s var(--mk-ease);
  transition-delay: var(--mk-delay, 0s);
}
[data-mk-reveal].mk-visible { opacity: 1; transform: none; }

/* botón flotante de WhatsApp */
.mk-wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 1039;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #1FAF5A;
  color: var(--mk-white);
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(31, 175, 90, 0.45);
  transition: transform 0.3s var(--mk-ease);
}
.mk-wa-float:hover { transform: scale(1.08); color: var(--mk-white); }

/* En desktop/tablet el header (fijo) ya trae el ícono de WhatsApp
   siempre visible — la burbuja flotante solo suma en móvil, donde
   es un patrón esperado y el header pierde el CTA dorado */
@media (min-width: 768px) {
  .mk-wa-float { display: none; }
}

/* ------------------------------------------------------------
   Catálogo de proyectos (/proyectos)

   La rejilla y las tarjetas son las mismas del inicio
   (.mk-projects__grid y .mk-project): aquí solo se visten el
   buscador, la cabecera de resultados, el estado vacío y
   "Cargar más".
   ------------------------------------------------------------ */

/* Enlace al catálogo bajo la sección del inicio */
.mk-projects__all { margin-top: 1.4rem; text-align: center; }

/* ---- El buscador dentro del slide ---- */

/* El buscador se apoya en el borde inferior del slide, y los
   puntos del carrusel quedan justo debajo (van al fondo del
   propio carrusel, con su margen de siempre).

   Se ancla por abajo, no por arriba: así, cuando en móvil se
   despliegan los criterios, la tarjeta crece hacia el interior
   del banner en vez de empujar el catálogo hacia abajo.

   El ancho es el del contenedor, no el de la pantalla, para no
   robarle la zona sensible a las flechas del carrusel. */
.mk-herostrip { position: relative; }

.mk-herostrip__search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--mk-hero-search-bottom, 42px);
  width: min(1280px, 100% - 3rem);
  /* Debajo del header fijo: cuando el slide sale del viewport al
     hacer scroll, la barra pasa por detrás de la cabecera de Meka
     y nunca cubre su logotipo, menú ni llamadas a la acción. */
  z-index: 1038;
}

.mk-herostrip__search .mk-catalog__bar { margin-bottom: 0; }

/* El envoltorio solo coloca la tarjeta: no debe interceptar los
   clics de las flechas del carrusel que quedan a su altura. */
.mk-herostrip__search { pointer-events: none; }
.mk-herostrip__search .mk-catalog__bar { pointer-events: auto; }

/* El buscador ya vive dentro del slide, así que la sección no
   necesita el respiro completo de .mk-section por arriba: se
   acorta para que el listado quede más cerca del banner. */
.mk-catalog { padding-top: clamp(2.4rem, 2rem + 1.6vw, 3.6rem); }

/* ---- Buscador ---- */

.mk-catalog__bar {
  scroll-margin-top: calc(var(--mk-header-h) + 16px);
  display: block;
  padding: 1rem;
  margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(3, 42, 43, 0.28), 0 2px 8px rgba(3, 42, 43, 0.12);
}

/* Una sola retícula: búsqueda · criterios · acción. Las etiquetas
   son visibles y consistentes para que cada control se entienda sin
   depender de la opción seleccionada. */
.mk-catalog__row {
  display: grid;
  grid-template-columns: minmax(210px, 1.25fr) minmax(0, 4fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.mk-catalog__control {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.38rem;
}

.mk-catalog__control > label {
  margin: 0;
  font-family: var(--mk-font-mono);
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-earth);
  white-space: nowrap;
}

.mk-catalog__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.mk-catalog__search > i {
  position: absolute;
  left: 0.95rem;
  color: var(--mk-earth);
  font-size: 0.9rem;
  pointer-events: none;
}
.mk-catalog__search input {
  width: 100%;
  min-height: 46px;
  font-family: var(--mk-font-body);
  font-size: 0.95rem;
  color: var(--mk-ink);
  background: #fbfcfa;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  padding: 0.72rem 2.5rem;
  transition: border-color 0.22s, box-shadow 0.22s, background-color 0.22s;
}
.mk-catalog__search input:focus {
  outline: none;
  border-color: var(--mk-green-2);
  background: var(--mk-white);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}
/* el aspa nativa del type="search" duplica nuestro botón */
.mk-catalog__search input::-webkit-search-cancel-button { display: none; }

.mk-catalog__search-clear {
  position: absolute;
  right: 0.55rem;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  cursor: pointer;
  font-size: 0.75rem;
}
.mk-catalog__search-clear:hover { background: var(--mk-green); color: var(--mk-white); }

/* ---- Desplegables ---- */

/* Rejilla de columnas iguales: con auto-fit caben las que quepan
   con al menos 170px —lo que necesita el texto de un criterio sin
   recortarse— y las que no, bajan a otra fila. Así el buscador se
   adapta solo cuando aparece o desaparece un criterio. */
.mk-catalog__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: end;
  gap: 0.75rem;
  min-width: 0;
}

.mk-catalog__field { min-width: 0; }

.mk-catalog__field select,
.mk-catalog__sort select {
  width: 100%;
  min-height: 46px;
  font-family: var(--mk-font-body);
  font-size: 0.92rem;
  color: var(--mk-ink);
  background-color: #fbfcfa;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  padding: 0.68rem 2.2rem 0.68rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.22s, box-shadow 0.22s, background-color 0.22s;
}
.mk-catalog__field select:focus,
.mk-catalog__sort select:focus {
  outline: none;
  border-color: var(--mk-green-2);
  background-color: var(--mk-white);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}

/* El filtrado es inmediato: este botón cierra el panel en móvil
   y lleva la vista a los resultados. */
.mk-btn.mk-catalog__submit {
  align-self: end;
  min-height: 46px;
  padding: 0.72rem 1.45rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* ---- Cabecera de resultados ---- */

/* Título a la izquierda; recuento, limpiar y orden a la derecha,
   a ras de la última línea del texto. */
.mk-catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.mk-catalog__intro { flex: 1 1 420px; max-width: 46rem; }

.mk-catalog__tools {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 0 1 auto;
  padding: 0.5rem 0.55rem 0.5rem 0.85rem;
  background: var(--mk-sand);
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  scroll-margin-top: calc(var(--mk-header-h) + 20px);
}

.mk-catalog__sort {
  display: grid;
  grid-template-columns: auto minmax(165px, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--mk-line);
}
.mk-catalog__sort label {
  font-family: var(--mk-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-earth);
  white-space: nowrap;
}

.mk-catalog__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mk-font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mk-earth);
  padding: 0.45rem 0.2rem;
  white-space: nowrap;
}
.mk-catalog__clear:hover { color: var(--mk-green); }

/* ---- Contador ---- */

.mk-catalog__count {
  font-family: var(--mk-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mk-earth);
  margin: 0;
  white-space: nowrap;
}
.mk-catalog__count strong { color: var(--mk-green); font-size: 0.95rem; }

/* ---- Sin resultados ---- */

.mk-catalog__empty {
  text-align: center;
  padding: clamp(2.4rem, 2rem + 2vw, 4rem) 1.2rem;
  background: var(--mk-sand);
  border-radius: var(--mk-radius);
}
.mk-catalog__empty > i { font-size: 2.2rem; color: var(--mk-gold); margin-bottom: 1rem; display: block; }
.mk-catalog__empty h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.mk-catalog__empty p { color: var(--mk-ink-soft); margin-bottom: 1.4rem; }

/* ---- Cargar más ---- */

.mk-catalog__more { margin-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); text-align: center; }

/* ---- Plegado de filtros en móvil ---- */

/* Solo aparece por debajo de 768px: en pantallas grandes los
   desplegables caben en una fila y esconderlos sería un clic de más. */
.mk-catalog__toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  font-family: var(--mk-font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mk-green);
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  min-height: 46px;
  border-radius: 12px;
  padding: 0.62rem 1rem;
  cursor: pointer;
}
.mk-catalog__toggle:hover { border-color: var(--mk-green-2); }

.mk-catalog__toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mk-gold);
  color: var(--mk-green);
  font-size: 0.7rem;
}

/* Por debajo de 1200px los criterios se pliegan tras "Filtros".
   No es solo cuestión de ancho: como el buscador va dentro del
   banner y este mide entonces menos de 510px de alto, la tarjeta
   desplegada se comería un tercio del flyer. Plegada ocupa una
   sola línea —buscar y el botón— y quien quiera afinar la
   búsqueda la abre. */
@media (max-width: 1199px) {
  .mk-catalog__toggle { display: inline-flex; }
  .mk-catalog__row { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-catalog__fields { display: none; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .mk-catalog__bar.is-open .mk-catalog__fields { display: grid; }
  .mk-catalog__submit { display: none; }
  .mk-catalog__bar.is-open .mk-catalog__submit { display: inline-flex; grid-column: 1 / -1; width: 100%; }
  .mk-catalog__bar { padding: 0.9rem; }
  /* 16px evita el zoom automático de iOS al enfocar el buscador */
  .mk-catalog__search input,
  .mk-catalog__field select,
  .mk-catalog__sort select { font-size: 1rem; }
  .mk-catalog__head { align-items: flex-start; }
  .mk-catalog__tools { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem 1.2rem; }
}


/* ------------------------------------------------------------
   Ficha de proyecto (/{url_project})

   Todo cuelga de .mk-pdp*. Se reutilizan las secciones, los
   contenedores, los títulos y los botones del sistema; aquí solo
   está lo propio de esta página.
   ------------------------------------------------------------ */

/* ---- Cabecera con slide ---- */

.mk-pdp-hero { position: relative; }

/* El slide se comporta igual que el del inicio: banner
   solo-imagen, sin nada superpuesto encima, con la misma
   proporción (1920/815) y compartiendo sus indicadores y sus
   flechas —las reglas están arriba, en el bloque del hero, y
   valen para los dos carruseles—.

   La altura la marca la proporción y no un alto en píxeles,
   para que el carrusel no mueva la maqueta al cambiar de foto,
   y el encuadre lo resuelve object-fit: cover, que recorta pero
   NUNCA deforma, sea cual sea el tamaño con el que se haya
   subido la imagen desde el panel. */
.mk-pdp-hero .carousel-item {
  aspect-ratio: 1920 / 815;
  background: var(--mk-green);
}

/* <picture> se incluye porque cada diapositiva puede llevar su
   pieza vertical para el celular: sin esto el envoltorio se
   quedaría con el alto de la imagen y no con el del marco. */
.mk-pdp-hero .carousel-item picture,
.mk-pdp-hero .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*=============================================
Identidad del proyecto: etapa, nombre y ubicación.

Va DENTRO del slide, en una tarjeta anclada abajo a la
izquierda. No es una franja: la capa cubre solo el texto y
lo hace con vidrio esmerilado —un velo verde muy tenue más
un desenfoque del fondo—, así que la fotografía se sigue
viendo detrás y el nombre se lee igual sobre un cielo
blanco que sobre un césped oscuro.

Está fuera del carrusel, no dentro de las diapositivas, así
que no se mueve al cambiar de foto.

pointer-events: none deja pasar el clic a las flechas y a
los indicadores, que quedan por debajo: la tarjeta no lleva
nada pulsable.
=============================================*/

.mk-pdp-hero__id {
  position: absolute;
  left: 0; right: 0;
  bottom: 3.4rem;
  z-index: 3;
  pointer-events: none;
}

.mk-pdp-hero__inner {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 100%;
  padding: 1.15rem 1.7rem 1.25rem;
  border-radius: var(--mk-radius);
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* El velo no es plano: cierra donde arranca el texto y se abre
     hacia la derecha, así la fotografía se sigue viendo y el
     nombre nunca se queda sin fondo, ni sobre un cielo blanco ni
     sobre una fachada amarilla. */
  background: linear-gradient(112deg, rgba(3, 42, 43, 0.62) 0%, rgba(3, 42, 43, 0.44) 55%, rgba(3, 42, 43, 0.3) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 18px 44px rgba(3, 42, 43, 0.3);
}

/* Sin desenfoque el velo tan tenue no bastaría para leer el
   texto sobre una foto clara: donde no hay backdrop-filter se
   compensa con un verde más cerrado. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mk-pdp-hero__inner { background: linear-gradient(112deg, rgba(3, 42, 43, 0.82) 0%, rgba(3, 42, 43, 0.7) 100%); }
}

/* Sin ninguna fotografía que enseñar no hay nada que
   superponer: la tarjeta se despega del slide y hace de
   cabecera sobre el verde de marca. */
.mk-pdp-hero__id--solid {
  position: relative;
  bottom: auto;
  padding: calc(var(--mk-header-h) / 2 + 2.2rem) 0 2.4rem;
  background: var(--mk-green);
}

.mk-pdp-hero__id--solid .mk-pdp-hero__inner {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* El alto es fijo y el ancho libre: los logos de los proyectos
   son unos apaisados y otros casi cuadrados, y encajarlos todos
   en un cuadrado dejaba los apaisados ilegibles. */
/* "img." por delante: ver la nota de img.mk-header__project-logo.
   Sin el elemento, .mk-scope img { max-width: 100% } ganaba y el
   tope de ancho no se aplicaba. */
img.mk-pdp-hero__logo {
  width: auto;
  height: 74px;
  max-width: 175px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

.mk-pdp-hero__text { min-width: 0; }

.mk-pdp-hero__text .mk-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--mk-white);
  margin-bottom: 0.6rem;
}

/* el epígrafe general lleva un filete delante; aquí sobra,
   porque quien abre la jerarquía es el propio distintivo */
.mk-pdp-hero__text .mk-eyebrow::before,
.mk-pdp-hero__text .mk-eyebrow::after { display: none; }

.mk-pdp-hero__stage {
  background: var(--mk-gold);
  color: var(--mk-green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(3, 42, 43, 0.35);
}

/* Mismos colores de etapa que el distintivo de la tarjeta, para
   que un proyecto se reconozca igual en el catálogo y en su ficha. */
.mk-pdp-hero__stage[data-stage="entregado"] { background: var(--mk-green-2); color: var(--mk-white); }
.mk-pdp-hero__stage[data-stage="por-entregar"] { background: var(--mk-earth); color: var(--mk-white); }

.mk-pdp-hero__stage--launch {
  background: var(--mk-white);
  color: var(--mk-green);
}

/* La jerarquía la marcan el cuerpo y el peso: distintivo
   pequeño en versales, nombre grande, ubicación en un tono por
   debajo del blanco. La sombra es el segundo seguro de lectura,
   por si el desenfoque no basta en una foto muy clara. */
.mk-pdp-hero__text .mk-title {
  color: var(--mk-white);
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.7rem);
  margin: 0 0 0.45rem;
  text-shadow: 0 2px 16px rgba(3, 42, 43, 0.45);
}

.mk-pdp-hero__loc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  text-shadow: 0 1px 10px rgba(3, 42, 43, 0.45);
}

.mk-pdp-hero__loc i { color: var(--mk-gold); }

/* Entrada de la identidad al cargar. Se hace con una animación
   CSS y no con [data-mk-reveal] a propósito: el <h1> de la
   página no puede depender de que el observador de scroll llegue
   a ejecutarse. Con animation-fill-mode: both el estado final es
   el visible, así que si la animación no corre —o el visitante
   pidió movimiento reducido— el texto se ve igual. */
@keyframes mkPdpRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.mk-pdp-hero__logo,
.mk-pdp-hero__text > * { animation: mkPdpRise 0.75s var(--mk-ease) both; }
.mk-pdp-hero__text > *:nth-child(2) { animation-delay: 0.08s; }
.mk-pdp-hero__text > *:nth-child(3) { animation-delay: 0.16s; }

/* ---- Oportunidad de inversión ---- */

/*=============================================
Encabezado de la sección: epígrafe, titular y descripción.

El texto descriptivo lo escribe el cliente en el panel y
puede ser largo, así que se le da medida de lectura propia
—unos 68 caracteres por línea, no el ancho entero de la
pantalla—, más interlineado y un cuerpo algo mayor que el
.mk-lead corriente. La jerarquía la marca un filete dorado
a la izquierda: separa el titular de la descripción sin
añadir otro tamaño de letra a la mezcla.
=============================================*/

.mk-pdp-invest__head { max-width: 64rem; }

.mk-pdp-invest__head .mk-title { margin-bottom: 0; }

.mk-pdp-invest__head .mk-lead {
  max-width: 68ch;
  margin-top: 1.5rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--mk-gold);
  font-size: clamp(1.05rem, 0.99rem + 0.28vw, 1.18rem);
  line-height: 1.78;
  color: var(--mk-ink-soft);
  text-wrap: pretty;
}

.mk-pdp-invest__head .mk-lead + .mk-lead { margin-top: 0.9rem; }

/* Cifras destacadas. Todas salen de la ficha del proyecto o del
   estado real de sus lotes: la tarjeta que no tiene dato no se
   dibuja, así que la rejilla se reparte sola entre las que haya
   (auto-fit) y nunca queda un hueco. */
.mk-pdp-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.mk-pdp-metric {
  position: relative;
  overflow: hidden;
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-sm);
  padding: 1.5rem 1.4rem 1.35rem;
  transition: transform 0.4s var(--mk-ease), box-shadow 0.4s var(--mk-ease), border-color 0.4s var(--mk-ease);
}

/* filete dorado que se despliega al pasar por encima */
.mk-pdp-metric::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mk-gold), var(--mk-gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--mk-ease);
}

.mk-pdp-metric:hover {
  transform: translateY(-6px);
  box-shadow: var(--mk-shadow);
  border-color: var(--mk-green-soft);
}

.mk-pdp-metric:hover::before { transform: scaleX(1); }

.mk-pdp-metric__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  transition: background 0.4s var(--mk-ease), color 0.4s var(--mk-ease);
}

.mk-pdp-metric:hover .mk-pdp-metric__icon {
  background: var(--mk-gold);
  color: var(--mk-green);
}

.mk-pdp-metric__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
  margin-bottom: 0.35rem;
}

.mk-pdp-metric__value {
  display: block;
  font-family: var(--mk-font-mono);
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mk-green);
  overflow-wrap: anywhere;
}

.mk-pdp-metric__note {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--mk-ink-soft);
  line-height: 1.35;
}

.mk-pdp-metric__note s { color: var(--mk-earth); }

/* ---- Avance de ventas y de obra ---- */

/* Un avance a cada extremo: ventas a la izquierda y obra a la
   derecha, con el mismo aire por fuera y el hueco repartido en
   medio. Las barras no se estiran a todo el ancho porque con una
   sola el rótulo y su porcentaje acababan a un palmo de distancia
   y costaba leerlos juntos. */
.mk-pdp-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2.6rem;
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-sm);
  padding: 1.5rem 1.6rem;
  margin-bottom: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.mk-pdp-progress__item { flex: 0 1 min(46%, 500px); min-width: 0; }

.mk-pdp-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
  color: var(--mk-ink-soft);
}

.mk-pdp-progress__head b { color: var(--mk-green); font-size: 1.05rem; }

.mk-pdp-progress__track {
  height: 9px;
  border-radius: 999px;
  background: var(--mk-green-soft);
  overflow: hidden;
}

/* La barra crece cuando la tarjeta entra en pantalla: parte de 0
   y va al porcentaje que lleva en --mk-pct. Como el valor final
   está en una regla estática, si no hay transición —movimiento
   reducido— aparece ya en su sitio en lugar de quedarse a cero. */
.mk-pdp-progress__track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mk-gold), var(--mk-gold-2));
  transition: width 1.3s var(--mk-ease) 0.25s;
}

[data-mk-reveal].mk-visible .mk-pdp-progress__track span { width: var(--mk-pct, 0%); }

.mk-pdp-progress__bar--work { background: linear-gradient(90deg, var(--mk-green-2), var(--mk-green)) !important; }

/* ---- Llamada a la acción de la sección de inversión ---- */

.mk-pdp-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem 2.4rem;
  padding: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  border-radius: var(--mk-radius);
  background: var(--mk-green);
  color: var(--mk-white);
}

/* halo dorado de fondo, puramente decorativo */
.mk-pdp-cta::after {
  content: "";
  position: absolute;
  right: -60px; top: -90px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 164, 70, 0.22) 0%, rgba(215, 164, 70, 0) 70%);
  pointer-events: none;
}

.mk-pdp-cta__text { position: relative; z-index: 1; min-width: 0; }

.mk-pdp-cta__text h3 {
  color: var(--mk-white);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  margin: 0 0 0.5rem;
}

.mk-pdp-cta__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
}

.mk-pdp-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ---- Atributos y amenidades ---- */

/* Rejilla de columnas fijas hecha con flex, no con grid, por el
   caso de la última fila: con un número de amenidades que no es
   múltiplo de las columnas, grid deja las sobrantes pegadas a la
   izquierda y flex las centra, que es como se lee bien. El número
   de columnas va en --mk-cols y solo lo cambian los media query. */
.mk-pdp-amenities__grid {
  --mk-cols: 4;
  --mk-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mk-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-pdp-amenity {
  flex: 0 1 calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 1.6rem 1rem 1.4rem;
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  transition: transform 0.4s var(--mk-ease), box-shadow 0.4s var(--mk-ease), border-color 0.4s var(--mk-ease);
}

/* velo que sube desde el pie al pasar por encima */
.mk-pdp-amenity::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(to top, var(--mk-green-soft), rgba(231, 239, 239, 0));
  transition: height 0.45s var(--mk-ease);
}

.mk-pdp-amenity:hover,
.mk-pdp-amenity:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--mk-shadow);
  border-color: var(--mk-gold);
}

.mk-pdp-amenity:hover::before,
.mk-pdp-amenity:focus-within::before { height: 100%; }

.mk-pdp-amenity__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  font-size: 1.5rem;
  transition: background 0.4s var(--mk-ease), color 0.4s var(--mk-ease), transform 0.5s var(--mk-ease);
}

.mk-pdp-amenity:hover .mk-pdp-amenity__icon {
  background: var(--mk-gold);
  color: var(--mk-green);
  transform: translateY(-3px) scale(1.06);
}

.mk-pdp-amenity__text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mk-ink);
  line-height: 1.35;
}

/* ---- Galería ---- */

/* Se publican como mucho seis: tres columnas por dos filas.
   Las demás siguen en el documento —el visor las necesita para
   poder recorrerlas todas— pero ocultas, así que ni ocupan
   sitio ni se descargan.

   Mismo reparto flexible que las amenidades, y por el mismo
   motivo: si el proyecto tiene cuatro fotos, la fila suelta
   queda centrada en vez de dejar un hueco a la derecha. */
.mk-pdp-gallery__grid {
  --mk-cols: 3;
  --mk-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mk-gap);
}

.mk-pdp-gallery__item {
  flex: 0 1 calc((100% - (var(--mk-cols) - 1) * var(--mk-gap)) / var(--mk-cols));
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mk-radius);
  background: var(--mk-green-soft);
  transition: background .5s var(--mk-ease);
}

/* Las que pasan de la sexta: fuera de la rejilla, pero dentro
   del documento para que el visor pueda pasar a ellas. */
.mk-pdp-gallery__item--rest { display: none; }

.mk-pdp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--mk-ease);
}

.mk-pdp-gallery__item:hover img,
.mk-pdp-gallery__item:focus-visible img { transform: scale(1.06); }

.mk-pdp-gallery__zoom {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(3, 42, 43, 0.72);
  color: var(--mk-white);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--mk-ease), transform 0.3s var(--mk-ease);
}

.mk-pdp-gallery__item:hover .mk-pdp-gallery__zoom,
.mk-pdp-gallery__item:focus-visible .mk-pdp-gallery__zoom {
  opacity: 1;
  transform: translateY(0);
}

.mk-pdp-gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem 0.9rem;
  color: var(--mk-white);
  font-size: 0.88rem;
  line-height: 1.3;
  background: linear-gradient(to top, rgba(3, 42, 43, 0.88), rgba(3, 42, 43, 0));
}

/* Velo de "+N Ver galería" sobre la sexta imagen. La foto sigue
   viéndose detrás, atenuada, para que se lea como "hay más" y
   no como un botón pegado encima. */
.mk-pdp-gallery__more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
  color: var(--mk-white);
  background: rgba(3, 42, 43, 0.66);
  backdrop-filter: blur(2px);
  transition: background 0.35s var(--mk-ease);
}

.mk-pdp-gallery__item:hover .mk-pdp-gallery__more,
.mk-pdp-gallery__item:focus-visible .mk-pdp-gallery__more {
  background: rgba(3, 42, 43, 0.78);
}

.mk-pdp-gallery__more b {
  font-family: var(--mk-font-mono);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  transition: transform 0.35s var(--mk-ease);
}

.mk-pdp-gallery__item:hover .mk-pdp-gallery__more b { transform: translateY(-3px); }

.mk-pdp-gallery__more span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(215, 164, 70, 0.6);
  padding-bottom: 2px;
  color: var(--mk-gold-2);
}

/* con el velo encima, la lupa de la esquina y el pie sobran.
   Se marca con una clase y no con :has() para no depender del
   soporte del selector en navegadores antiguos. */
.mk-pdp-gallery__item--more .mk-pdp-gallery__zoom,
.mk-pdp-gallery__item--more .mk-pdp-gallery__caption { display: none; }

/* En el móvil la rejilla se queda en dos imágenes y el velo pasa
   a la segunda, con su propia cuenta. Los dos velos se imprimen
   —la cuenta no es la misma— y aquí se decide cuál se ve: este
   duerme hasta que el ancho baja de 768px, donde se cambian los
   papeles. */
.mk-pdp-gallery__more--m { display: none; }


/* ---- Testimonios: proyecto todavía sin los suyos ---- */

/* Mismo lenguaje que el aviso del plano en preparación: tarjeta
   clara, icono en el verde de marca y las dos vías de contacto.
   No dice "no hay testimonios", que en una página de venta se lee
   como una pega: ofrece hablar con quien ya compró. */
.mk-testimonials-empty {
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-sm);
  padding: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  text-align: center;
}

.mk-testimonials-empty > i {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}

.mk-testimonials-empty h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  color: var(--mk-green);
  margin: 0 0 0.6rem;
}

.mk-testimonials-empty p {
  color: var(--mk-ink-soft);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.7;
}

.mk-testimonials-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* ---- Asesoría sobre fondo claro ---- */

/* La sección de asesoría de la ficha va sobre blanco y no sobre el
   verde de marca: el pie de página es de ese mismo verde y las dos
   se fundían en una sola mancha oscura. La tarjeta del formulario
   ya era blanca y no cambia; lo que se aclara es la columna de
   datos de contacto, que estaba escrita en blanco. */
.mk-contact--light .mk-contact__info { color: var(--mk-ink); }

.mk-contact--light .mk-contact__info .mk-contact__list { border-top-color: var(--mk-line); }

.mk-contact--light .mk-contact__list li { color: var(--mk-ink-soft); }

.mk-contact--light .mk-contact__list i {
  background: var(--mk-green-soft);
  color: var(--mk-green);
}

.mk-contact--light .mk-contact__label { color: var(--mk-earth); }

/* sobre blanco la sombra sola no basta para despegar la tarjeta */
.mk-contact--light .mk-form-card { border: 1px solid var(--mk-line); }

/* ---- Visor a pantalla completa ---- */

.mk-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 42, 43, 0.94);
}

.mk-pdp-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.mk-pdp-lightbox__figure img {
  max-width: 100%;
  /* se descuenta el sitio del pie y del contador para que la
     imagen nunca se salga de la pantalla en horizontal */
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: var(--mk-radius-sm);
}

.mk-pdp-lightbox__figure figcaption {
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 0.95rem;
  max-width: 70ch;
}

.mk-pdp-lightbox__close,
.mk-pdp-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--mk-white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.25s var(--mk-ease), border-color 0.25s var(--mk-ease);
}

.mk-pdp-lightbox__close:hover,
.mk-pdp-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--mk-gold);
}

.mk-pdp-lightbox__close { top: 1.1rem; right: 1.1rem; }
.mk-pdp-lightbox__nav--prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.mk-pdp-lightbox__nav--next { right: clamp(0.6rem, 2vw, 1.6rem); }

.mk-pdp-lightbox__count {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Programa de referidos (/referidos)

   Todo lo de este bloque es exclusivo de esa página: cuelga de
   .mk-referral*, .mk-steps*, .mk-fieldset* o del modificador
   --reward / --referral. Ninguna regla compartida cambia.
   ------------------------------------------------------------ */

/* ---- Portada ---- */

/*=============================================
La cabecera mide exactamente igual que la de la ficha de
proyecto: la proporcion la pone la imagen y no un alto en
pixeles, asi que la maqueta no depende del texto que lleve
encima. Los tramos de tableta y celular estan mas abajo,
con el resto de lo responsive.

Sobre la fotografia no va ningun velo. El contraste lo pone
la tarjeta con su vidrio esmerilado, que es exactamente la
razon por la que en la ficha de proyecto se resolvio asi: un
degradado a toda la caja apaga la imagen entera para hacer
legible un texto que ocupa un cuarto de ella.
=============================================*/

.mk-referral-hero {
  position: relative;
  background: var(--mk-green);
}

.mk-referral-hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 815;
  background: var(--mk-green);
}

/* object-fit: cover recorta pero nunca deforma, sea cual sea
   la proporcion con la que venga el arte. */
.mk-referral-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mismo anclaje que .mk-pdp-hero__id pero con clase propia:
   aquel renuncia al clic —no lleva nada pulsable— y en el
   celular se sale de la foto. Esta tarjeta tiene boton y se
   queda dentro de la imagen en todos los tamanos. */
.mk-referral-hero__id {
  position: absolute;
  left: 0; right: 0;
  bottom: 3.4rem;
  z-index: 3;
}

/* El titular es una frase, no el nombre de un proyecto: sin
   medida de lectura la tarjeta se estiraria hasta los 1240px
   del contenedor y el titular quedaria en una sola linea. */
.mk-referral-hero__text { max-width: 36rem; }

/* La pildora va en blanco y no en dorado —que es el color de
   la etapa en la ficha— para que el dorado quede reservado al
   boton, que es la accion de la pagina. Es el mismo blanco de
   la pildora "Lanzamiento".

   Y admite dos lineas: aqui no es una palabra, es una frase de
   cuarenta caracteres que en una pantalla estrecha no cabe de
   un tiron. */
.mk-referral-hero__badge {
  background: var(--mk-white);
  color: var(--mk-green);
  white-space: normal;
  line-height: 1.35;
}

/* Gemela de .mk-pdp-hero__loc —mismo blanco, mismo icono
   dorado, misma sombra de seguridad— pero alineada arriba: la
   ubicacion de un proyecto cabe en una linea y esto no. */
.mk-referral-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.15rem 0 1.35rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(3, 42, 43, 0.45);
}

.mk-referral-hero__lead i {
  color: var(--mk-gold);
  margin-top: 0.22rem;
  flex: 0 0 auto;
}

/* La tarjeta entra con la misma animacion que la de la ficha
   (.mk-pdp-hero__text > *), que escalona sus tres primeros
   hijos. Aqui hay un cuarto —el envoltorio del boton— y
   necesita su turno. */
.mk-referral-hero__text > *:nth-child(4) { animation-delay: 0.24s; }

/* El envoltorio existe justo para eso: la animacion fija un
   transform con fill-mode both, y sobre el propio boton ese
   valor le ganaria a su :hover. */
.mk-referral-hero__actions { display: flex; }

/* ---- Es así de sencillo ---- */

/*=============================================
El recorrido NO depende del scroll: avanza solo y vuelve a
empezar. referidos.js escribe dos variables en la sección:

  --mk-progress  dónde está el relleno (0 a 1)
  --mk-travel    cuánto tarda en llegar ahí

Todo lo demás lo resuelve el CSS, incluida la vuelta al
principio: es el mismo cambio de variable con otra duración.
=============================================*/

.mk-steps { position: relative; margin-top: clamp(2.4rem, 3vw, 3.4rem); }

.mk-steps__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.mk-step { text-align: center; }

.mk-step__dot {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mk-green);
  border: 2px solid var(--mk-gold);
  color: var(--mk-white);
  font-size: 1.5rem;
  box-shadow: var(--mk-shadow-sm);
  transition:
    background 0.45s var(--mk-ease),
    border-color 0.45s var(--mk-ease),
    color 0.45s var(--mk-ease),
    box-shadow 0.45s var(--mk-ease),
    transform 0.45s var(--mk-ease);
}

/* el aro que late en la etapa que toca; vive en un
   pseudoelemento para no competir con la sombra del círculo */
.mk-step__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--mk-gold);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.mk-step__num {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mk-gold);
  color: var(--mk-green);
  font-family: var(--mk-font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* La tarjeta cuelga del círculo, nunca lo envuelve: el raíl
   cruza a la altura de los círculos y una tarjeta opaca por
   encima lo dejaría visible solo en los huecos. */
.mk-step__body {
  margin-top: 1.25rem;
  padding: 1.45rem 1.3rem 1.55rem;
  border-radius: var(--mk-radius);
  background: var(--mk-sand);
  border: 1px solid transparent;
  transition:
    background 0.45s var(--mk-ease),
    border-color 0.45s var(--mk-ease),
    box-shadow 0.45s var(--mk-ease),
    transform 0.45s var(--mk-ease);
}

.mk-step__title { font-size: 1.15rem; margin-bottom: 0.5rem; }
.mk-step__text { color: var(--mk-ink-soft); font-size: 0.95rem; margin: 0; }

/* El raíl y su relleno. La geometría exacta —de qué punto a qué
   punto va— la fija assets/js/meka/referidos.js midiendo el
   primer y el último círculo, porque en el celular la lista se
   apila y el recorrido deja de ser el mismo. */
.mk-steps__rail {
  position: absolute;
  top: 38px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 4px;
  border-radius: 4px;
  background: var(--mk-line);
  overflow: hidden;
}

.mk-steps__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mk-green) 0%, var(--mk-gold) 100%);
  transform-origin: left center;
  transform: scaleX(1);
}

/* Sin JavaScript —o con movimiento reducido, que no enciende el
   recorrido— la franja se ve terminada: raíl lleno y los tres
   pasos marcados. La clase is-live, que pone el propio script,
   es la que devuelve el estado inicial vacío. */
.mk-steps.is-live .mk-steps__fill {
  transform: scaleX(var(--mk-progress, 0));
  transition: transform var(--mk-travel, 900ms) var(--mk-ease);
}

.mk-steps.is-live.is-vertical .mk-steps__fill {
  transform-origin: center top;
  transform: scaleY(var(--mk-progress, 0));
}

.mk-steps.is-vertical .mk-steps__fill {
  transform-origin: center top;
  transform: scaleY(1);
  background: linear-gradient(180deg, var(--mk-green) 0%, var(--mk-gold) 100%);
}

/* En reposo —sin JavaScript o con movimiento reducido— los tres
   círculos ya están marcados; is-live es lo que los apaga para
   que el recorrido tenga algo que encender. */
.mk-steps.is-live .mk-step__dot {
  background: var(--mk-white);
  border-color: var(--mk-line);
  color: var(--mk-earth);
  box-shadow: none;
}

/* recorrido: los pasos por los que ya pasó se quedan marcados */
.mk-steps.is-live .mk-step.is-active .mk-step__dot {
  background: var(--mk-green);
  border-color: var(--mk-gold);
  color: var(--mk-white);
  box-shadow: var(--mk-shadow-sm);
  transform: translateY(-3px);
}

/* y el que toca es el único que se levanta y late */
.mk-steps.is-live .mk-step.is-current .mk-step__dot {
  box-shadow: 0 0 0 7px rgba(215, 164, 70, 0.16), var(--mk-shadow);
  transform: translateY(-6px) scale(1.05);
}

.mk-steps.is-live .mk-step.is-current .mk-step__dot::after {
  animation: mkStepPulse 2.2s var(--mk-ease) infinite;
}

@keyframes mkStepPulse {
  0%   { opacity: 0.5; transform: scale(0.9); }
  70%  { opacity: 0;   transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.4); }
}

.mk-steps.is-live .mk-step.is-current .mk-step__body {
  background: var(--mk-white);
  border-color: var(--mk-gold);
  box-shadow: var(--mk-shadow);
  transform: translateY(-6px);
}

/* ---- Recompensas ---- */

/*=============================================
Misma tarjeta que las cifras de trayectoria, pero en tres
columnas y no en cuatro: la rejilla de trayectoria es de
cuatro y con tres recompensas dejaba la última columna
vacía, que es lo que las cargaba hacia la izquierda.
=============================================*/

.mk-rewards {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: 62rem;
  margin: 0 auto;
}

.mk-stat--reward {
  position: relative;
  padding-top: 2.5rem;
  overflow: hidden;
}

/* filete dorado que se abre de lado a lado al pasar el ratón */
.mk-stat--reward::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--mk-gold);
  transition: width 0.45s var(--mk-ease);
}

.mk-stat--reward:hover::before { width: 100%; }

/* el ordinal en cifra: el mismo dato que el rótulo de abajo,
   puesto donde se lee de un vistazo */
.mk-stat__order {
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  font-family: var(--mk-font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mk-gold);
  opacity: 0.5;
  transition: opacity 0.35s;
}

.mk-stat--reward:hover .mk-stat__order { opacity: 1; }

.mk-stat--reward .mk-stat__icon {
  background: var(--mk-gold);
  color: var(--mk-green);
  transition: transform 0.45s var(--mk-ease), box-shadow 0.45s var(--mk-ease);
}

.mk-stat--reward:hover .mk-stat__icon {
  transform: translateY(-3px) rotate(-7deg) scale(1.07);
  box-shadow: 0 10px 22px rgba(215, 164, 70, 0.4);
}

.mk-stat--reward .mk-stat__value { color: var(--mk-green); }

.mk-stat--reward .mk-stat__label {
  font-weight: 700;
  color: var(--mk-ink-soft);
}

/* El importe mayor de la escala. Se distingue con el borde y el
   filete —no con una palabra nueva—: el contenido de esta
   página lo aprueba Gerencia y aquí no se añade texto. */
.mk-stat--reward-top {
  border-color: var(--mk-gold);
  box-shadow: 0 10px 30px rgba(215, 164, 70, 0.18);
}

.mk-stat--reward-top::before { width: 100%; }
.mk-stat--reward-top .mk-stat__order { opacity: 1; }

/* ---- Refiere y gana ---- */

/* El formulario es mucho más alto que su columna de texto, y con
   el centrado de .mk-contact__grid el titular quedaba flotando a
   media altura. Aquí manda el arranque. */
#mk-refiere .mk-contact__grid { align-items: start; }

.mk-referral-recap li i { color: var(--mk-gold); }

.mk-referral-recap__amount {
  display: block;
  font-family: var(--mk-font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--mk-gold-2);
}

/* Dos bloques de cuatro campos: el epígrafe numerado separa
   "tus datos" de los del referido, que si no se leen como un
   muro de ocho casillas iguales. */
.mk-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.mk-fieldset__legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  float: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-green);
  padding: 0 0 0.65rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--mk-line);
}

.mk-fieldset__legend span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  display: grid;
  place-items: center;
  font-family: var(--mk-font-mono);
  font-size: 0.76rem;
  flex: none;
}

.mk-field__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--mk-ink-soft);
}

/* Estados de campo. Solo en este formulario: los cuatro
   anteriores del sitio se quedan con el globo del navegador. */
.mk-form--referral .mk-field__error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #C0392B;
}

.mk-form--referral .mk-field.is-invalid input,
.mk-form--referral .mk-field.is-invalid select {
  border-color: #C0392B;
  background: #FEF7F6;
}

.mk-form--referral .mk-field.is-invalid input:focus,
.mk-form--referral .mk-field.is-invalid select:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.14);
}

.mk-form--referral .mk-field.is-valid input,
.mk-form--referral .mk-field.is-valid select {
  border-color: var(--mk-green-2);
}

.mk-form--referral .mk-field.is-invalid .mk-field__hint { display: none; }

/*=============================================
Las tres recompensas, a la izquierda del formulario.

Mismos importes y mismos iconos que la sección "Beneficios",
para que las dos hablen el mismo idioma. Sobre el verde no
valen las tarjetas blancas: van de vidrio, como la tarjeta
de la portada.

El selector lleva dos clases a propósito, igual que
.mk-contact__list: el reset global ".mk-scope ul" (0,1,1)
gana a una sola clase y se comería el margen y el relleno.
=============================================*/

.mk-contact__info .mk-prizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mk-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.35rem 0.8rem 1.25rem;
  border-radius: var(--mk-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition:
    transform 0.35s var(--mk-ease),
    background 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}

.mk-prize:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--mk-gold);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.mk-prize__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-gold);
  color: var(--mk-green);
  font-size: 1.15rem;
  flex: none;
  transition: transform 0.4s var(--mk-ease);
}

.mk-prize:hover .mk-prize__icon { transform: rotate(-8deg) scale(1.08); }

/* nowrap: en la fila del celular el rótulo largo le comía el
   sitio y partía "S/ 800" en dos líneas */
.mk-prize__amount {
  font-family: var(--mk-font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.1;
  color: var(--mk-gold-2);
  white-space: nowrap;
}

.mk-prize__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}

/*=============================================
El formulario en dos etapas.

Los ocho campos siguen SIEMPRE en el documento: la etapa que
no toca lleva el atributo hidden, así que no se pierde nada
al ir y venir y el envío sigue llevando los ocho.
=============================================*/

.mk-wizard { margin-bottom: 1.15rem; }

/*=============================================
Todo el rótulo va en un solo color —el verde de marca—: el
número de paso en versales y el nombre en negrita ya se
distinguen por el cuerpo y la caja, sin necesidad de meter
un segundo color. El dorado se reserva para el botón, que es
la acción de la tarjeta.
=============================================*/

.mk-wizard__now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  color: var(--mk-green);
}

.mk-wizard__count {
  font-family: var(--mk-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

/* el mismo verde, solo más claro: separa sin ser otro color */
.mk-wizard__sep { color: inherit; opacity: 0.4; }

.mk-wizard__name { font-weight: 700; color: inherit; }

/*=============================================
La barra, un tramo por paso.

Misma factura que los avances de la ficha de proyecto: pista
en verde claro y relleno de un solo tono —el degradado va
dentro del propio verde, como el de "Avance de obra"—. Cada
tramo llena de 0 a 100%, así el avance se percibe como un
gesto y no como un salto de la barra entera.
=============================================*/

.mk-wizard__bar { display: flex; gap: 0.35rem; }

.mk-wizard__seg {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--mk-green-soft);
  overflow: hidden;
}

.mk-wizard__seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mk-green-2), var(--mk-green));
  transition: width 0.45s var(--mk-ease);
}

.mk-wizard__seg.is-done i { width: 100%; }

/* el paso entra desde el lado por el que se avanza */
.mk-form__stage.is-in-next { animation: mkStageNext 0.42s var(--mk-ease) both; }
.mk-form__stage.is-in-prev { animation: mkStagePrev 0.42s var(--mk-ease) both; }

@keyframes mkStageNext {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mkStagePrev {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}

/* "Volver" ocupa lo que pide su texto y el envío se queda con
   el resto: es la acción principal del paso. */
.mk-wizard__nav--pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
}

/*=============================================
La tarjeta, apretada.

Son ocho casillas: con la medida corriente del sitio la
columna del formulario se estiraba mucho más que la de al
lado y dejaba un vacío grande al costado. Aquí van más
juntas, con menos relleno y rótulos algo menores.

TODO cuelga de .mk-form--referral: los otros cuatro
formularios del sitio no cambian ni un pixel.

El cuerpo de los campos NO se toca. Por debajo de 767px vale
la regla de los 16px que evita el zoom automático de iOS al
enfocar, y bajarlo aquí —con dos clases, que le gana— lo
habría reactivado.
=============================================*/

.mk-form-card.mk-form--referral { padding: clamp(1.2rem, 1rem + 1vw, 1.6rem); }

.mk-form--referral .mk-field { margin-bottom: 0.7rem; }

.mk-form--referral .mk-field label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.26rem;
}

.mk-form--referral .mk-field input,
.mk-form--referral .mk-field select {
  padding: 0.58rem 0.8rem;
  border-radius: 9px;
}

.mk-form--referral .mk-field__hint {
  margin-top: 0.26rem;
  font-size: 0.74rem;
}

.mk-form--referral .mk-form__stage { margin-bottom: 0.95rem; }

.mk-form--referral .mk-btn { padding: 0.78rem 1.4rem; font-size: 0.92rem; }

.mk-form--referral .mk-form-note {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.45;
}
/* el acuse de recibo ocupa el sitio del formulario */
#mkReferralSuccess { padding: 2.4rem 2rem; }
#mkReferralSuccess p { color: var(--mk-ink-soft); margin-bottom: 1.4rem; }

/* ------------------------------------------------------------
   Testimonios (/testimonios)

   Todo cuelga de .mk-testi* o del modificador --glass. Se
   reutilizan sin tocarlas: la tarjeta de vidrio de la ficha de
   proyecto (.mk-pdp-hero__inner/__text/__stage), la tarjeta de
   cifras (.mk-stat + .mk-count), la del reel (.mk-reel-card), la
   del formulario (.mk-form-card) y el aviso de sección vacía
   (.mk-testimonials-empty).
   ------------------------------------------------------------ */

/* ---- Portada: UNA sola composición ---- */

/*
   El mensaje, las llamadas a la acción y la trayectoria en
   números viven dentro del MISMO panel de vidrio, anclado al pie
   de la fotografía. Un borde, una sombra, un desenfoque. Antes
   eran dos tarjetas superpuestas sobre una franja verde; la
   franja se fue y la foto entrega directamente a la sección de
   arena que viene debajo.
*/

.mk-testi-hero { position: relative; }

/* El alto lo marca el marco, no la proporción de la imagen: así
   el panel siempre cabe dentro de la foto —crezca lo que crezca
   su contenido— y no hay forma de que se salga por abajo. */
.mk-testi-hero__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(40rem, 34vw + 10rem, 44rem);
  background: var(--mk-green);
  overflow: hidden;
}

/* la fotografía pasa a ser el fondo del marco */
.mk-testi-hero__media {
  position: absolute;
  inset: 0;
  display: block;
}

.mk-testi-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Velo solo en el tramo bajo, y muy tenue: no tiñe el paisaje,
   pero sostiene la lectura del panel sobre cualquier fotografía
   —un cielo blanco, una fachada clara— y funde su borde inferior
   con la imagen en vez de recortarlo. */
.mk-testi-hero__veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(3, 42, 43, 0.58) 0%, rgba(3, 42, 43, 0.32) 42%, rgba(3, 42, 43, 0) 100%);
  pointer-events: none;
}

.mk-testi-hero__wrap {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
}

/* ---- El panel ---- */

/* Mismo vidrio que la tarjeta de la ficha de proyecto
   (.mk-pdp-hero__inner): idénticos velo, desenfoque, filete y
   sombra. Cambia la forma —aquí es una superficie ancha con dos
   zonas—, no el material. */
.mk-testi-hero__panel {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(112deg, rgba(3, 42, 43, 0.64) 0%, rgba(3, 42, 43, 0.46) 55%, rgba(3, 42, 43, 0.34) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 22px 54px rgba(3, 42, 43, 0.34);
  overflow: hidden;
  animation: mkTestiPanel 0.8s var(--mk-ease) both;
}

/* Sin desenfoque el velo tan tenue no bastaría sobre una foto
   clara: donde no hay backdrop-filter se compensa con un verde
   más cerrado. Misma salida que la tarjeta de la ficha. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mk-testi-hero__panel { background: linear-gradient(112deg, rgba(3, 42, 43, 0.86) 0%, rgba(3, 42, 43, 0.74) 100%); }
}

@keyframes mkTestiPanel {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Zona alta: mensaje a la izquierda, acciones a la derecha, las
   dos apoyadas en la misma línea base. */
.mk-testi-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.2rem clamp(1.6rem, 1rem + 2.4vw, 3rem);
  padding: clamp(1.4rem, 1rem + 1.3vw, 2.1rem) clamp(1.4rem, 1rem + 1.3vw, 2.2rem);
}

.mk-testi-hero__text { max-width: 40rem; }

/* el epígrafe general lleva un filete delante; aquí quien abre la
   jerarquía es el propio distintivo */
.mk-testi-hero__text .mk-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--mk-white);
  margin-bottom: 0.7rem;
}

.mk-testi-hero__text .mk-eyebrow::before,
.mk-testi-hero__text .mk-eyebrow::after { display: none; }

/* la píldora en blanco: el dorado se reserva para el botón */
.mk-testi-hero__badge {
  background: var(--mk-white);
  color: var(--mk-green);
  white-space: normal;
  line-height: 1.35;
}

.mk-testi-hero__text .mk-title {
  color: var(--mk-white);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 18px rgba(3, 42, 43, 0.45);
}

.mk-testi-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(3, 42, 43, 0.45);
}

.mk-testi-hero__lead i {
  color: var(--mk-gold);
  margin-top: 0.3rem;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

/* los botones van envueltos: la animación del panel fija un
   transform con fill-mode both y sobre el propio botón le ganaría
   a su :hover */
.mk-testi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

/* la entrada se escalona: primero el panel, luego lo que lleva
   dentro */
.mk-testi-hero__text > *,
.mk-testi-hero__actions,
.mk-testi-hero__metrics .mk-stat { animation: mkTestiPanel 0.7s var(--mk-ease) both; }

.mk-testi-hero__text > *:nth-child(1) { animation-delay: 0.14s; }
.mk-testi-hero__text > *:nth-child(2) { animation-delay: 0.2s; }
.mk-testi-hero__text > *:nth-child(3) { animation-delay: 0.26s; }
.mk-testi-hero__actions { animation-delay: 0.32s; }

/* ---- Pie del panel: la trayectoria en números ---- */

.mk-testi-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(3, 42, 43, 0.26);
}

/* filete entre cifras: las separa sin convertir cada una en una
   tarjeta suelta */
.mk-testi-hero__metrics .mk-stat + .mk-stat { border-left: 1px solid rgba(255, 255, 255, 0.12); }

.mk-testi-hero__metrics .mk-stat:nth-child(2) { animation-delay: 0.42s; }
.mk-testi-hero__metrics .mk-stat:nth-child(3) { animation-delay: 0.48s; }
.mk-testi-hero__metrics .mk-stat:nth-child(4) { animation-delay: 0.54s; }

/* La MISMA tarjeta de cifras del inicio; --glass solo cambia los
   colores para el fondo oscuro y le quita el relieve, que aquí lo
   pone el panel. */
.mk-stat--glass {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0.7rem 0.5rem;
}

.mk-stat--glass:hover { transform: none; box-shadow: none; }

.mk-stat--glass .mk-stat__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--mk-gold-2);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
}

.mk-stat--glass .mk-stat__value {
  color: var(--mk-white);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}

.mk-stat--glass .mk-stat__label { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; }

/* --inline: el icono al lado y no encima. Es lo que convierte
   cuatro tarjetas apiladas en un pie de panel. */
.mk-stat--inline {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.8rem;
  padding: clamp(0.85rem, 0.6rem + 0.7vw, 1.15rem) clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  transition: background 0.3s var(--mk-ease);
}

.mk-stat--inline:hover { background: rgba(255, 255, 255, 0.06); }

.mk-stat--inline .mk-stat__icon {
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 auto;
  transition: transform 0.3s var(--mk-ease), background 0.3s, color 0.3s;
}

.mk-stat--inline:hover .mk-stat__icon {
  transform: translateY(-2px);
  background: rgba(215, 164, 70, 0.24);
  color: var(--mk-gold);
}

.mk-stat--inline .mk-stat__body { min-width: 0; }

.mk-stat--inline .mk-stat__value {
  display: block;
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.05;
  /* "40,000 m2" partido en dos renglones descuadraba la fila */
  white-space: nowrap;
}

.mk-stat--inline .mk-stat__label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* ---- Filtros ---- */

.mk-testi-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  border-radius: var(--mk-radius);
  background: var(--mk-white);
  border: 1px solid var(--mk-line);
  box-shadow: var(--mk-shadow-sm);
}

.mk-testi-tools__fields { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.mk-testi-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }

.mk-testi-field > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}

.mk-testi-field select {
  border: 1.5px solid var(--mk-line);
  border-radius: 9px;
  background: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  min-width: 13rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.mk-testi-field select:focus {
  outline: none;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}

.mk-testi-tools__count { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--mk-ink-soft); }

.mk-testi-tools__count strong {
  color: var(--mk-green);
  font-family: var(--mk-font-mono);
  font-size: 1.05rem;
}

/* ---- Las dos columnas ---- */

.mk-testi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 2rem;
  align-items: start;
  margin-top: 1.4rem;
}

.mk-testi-main { min-width: 0; }

/* align-self: start es imprescindible — sin él la columna se
   estira a lo alto de la rejilla y el sticky no tiene recorrido
   dentro del que pegarse. Mismo patrón que .mk-plan-side. */
.mk-testi-aside {
  position: sticky;
  top: calc(var(--mk-header-h) + 20px);
  align-self: start;
  /* en tableta deja de ser fija, y sin este margen el ancla de
     "Agendar Asesoría" dejaba el formulario debajo del header */
  scroll-margin-top: calc(var(--mk-header-h) + 20px);
}

/* Los pares de campos del formulario van a media anchura desde
   576px de VENTANA, no de contenedor, y en la barra lateral la
   columna mide 350: el teléfono y el correo quedaban en 139px y se
   comían su propio texto de ejemplo. Solo aquí se apilan — por
   debajo de 992px el formulario ocupa el ancho entero y los dos
   caben de sobra. */
@media (min-width: 992px) {
  .mk-testi-aside .mk-form-card .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ---- Asesoría en el celular: el panel inferior ---- */

/*
   Por debajo de 768px el formulario no se publica en la página:
   vive en el panel inferior (#mkAdviceSheet) y testimonios.js MUEVE
   allí su nodo al abrirlo. Como la columna se queda sin nada que
   enseñar, se esconde entera — dejarla vacía solo abriría un hueco
   entre los filtros y la rejilla.

   Se esconde el aside y no la tarjeta, así que una vez movida al
   panel —donde ya no cuelga de él— se ve sin necesitar excepciones.

   .mk-has-sheet la pone el propio JavaScript: sin él se publica el
   formulario entero y no un botón que no abriría nada.
*/

@media (max-width: 767px) {

  .mk-has-sheet .mk-testi-aside { display: none; }

}

/* ---- El panel inferior ---- */

/* El offcanvas de Bootstrap pone la mecánica —fondo, Escape, foco
   atrapado, bloqueo del scroll—; el alto y el aspecto son de Meka.
   El alto es el del contenido, con tope, y no el 30vh de fábrica. */
.mk-advice-sheet.offcanvas-bottom {
  height: auto;
  max-height: 92vh;
  max-height: 92dvh;
  border: 0;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  background: var(--mk-sand);
  box-shadow: 0 -18px 44px rgba(3, 42, 43, 0.28);
}

.mk-advice-sheet__head {
  position: relative;
  flex: 0 0 auto;
  padding: 0.6rem 1rem 0.25rem;
}

/* el tirador: dice "esto se arrastra hacia abajo" sin escribirlo */
.mk-advice-sheet__grip {
  display: block;
  width: 46px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--mk-line);
}

.mk-advice-sheet__close {
  position: absolute;
  top: 0.35rem;
  right: 0.55rem;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(3, 42, 43, 0.06);
  color: var(--mk-green);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s var(--mk-ease);
}

.mk-advice-sheet__close:hover { background: rgba(3, 42, 43, 0.12); transform: scale(1.05); }

.mk-advice-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.2rem 0.9rem 1.1rem;
}

/* dentro del panel la superficie es el propio panel: la tarjeta
   suelta su relieve para no ser una caja dentro de otra */
.mk-advice-sheet .mk-form-card {
  box-shadow: none;
  background: none;
  padding: 0.3rem 0.2rem 0;
}
/* ---- La rejilla ---- */

.mk-testi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

/* Las tarjetas que llegan por AJAX entran con esta clase: el
   observador de [data-mk-reveal] de meka.js se registra una sola
   vez al cargar y no ve lo que se inyecta después. */
.mk-testi-grid .mk-reel-card.is-in { animation: mkTestiIn 0.5s var(--mk-ease) both; }

@keyframes mkTestiIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- El centinela de la carga progresiva ---- */

.mk-testi-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  margin-top: 1.4rem;
}

/* sin más páginas desaparece, y un elemento oculto no vuelve a
   cruzar el umbral del observador: se deja de pedir solo */
.mk-testi-sentinel[data-mk-more="0"] { display: none; }

.mk-testi-sentinel__dots {
  display: inline-flex;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.25s;
}

.mk-testi-sentinel.is-loading .mk-testi-sentinel__dots { opacity: 1; }

.mk-testi-sentinel__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-green);
  animation: mkTestiDot 1s ease-in-out infinite;
}

.mk-testi-sentinel__dots i:nth-child(2) { animation-delay: 0.15s; }
.mk-testi-sentinel__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes mkTestiDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}

#mkTestiEmpty { margin-top: 0.4rem; }

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

/* Con el contenedor del artículo en 1140px, las dos columnas
   (756px de lectura + 336px de formulario + separación) dejan de
   caber por debajo de ~1190px: ahí el formulario baja detrás del
   contenido, que es donde toca leerlo en tablet y móvil. */
@media (max-width: 1199px) {
  .mk-article__layout { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .mk-article__aside { position: static; }
  /* a ancho completo el formulario se vería desproporcionado */
  .mk-article__form { max-width: 34rem; margin: 0 auto; }
}

@media (max-width: 1100px) {
  .mk-plan-wrap { grid-template-columns: minmax(0, 1fr); }
  .mk-plan-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  /* la columna pasa a fila: la ficha del proyecto ocupa el ancho
     completo y leyenda y cifras se reparten debajo */
  .mk-plan-project { flex: 1 0 100%; }
  .mk-plan-facts { max-width: 420px; }
  .mk-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
  /* ---- Testimonios ---- */

  /* El formulario sube POR DELANTE de la rejilla, no debajo: la
     rejilla crece sola con el scroll, así que quedaría cada vez
     más lejos y no lo vería nadie. Los filtros siguen siendo lo
     primero porque su barra vive fuera de estas dos columnas. */
  .mk-testi-layout { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .mk-testi-aside { position: static; order: -1; }

  /* a ancho completo el formulario se lee como un muro; con medida
     de tarjeta y centrado sigue siendo una tarjeta */
  .mk-testi-aside__inner { max-width: 36rem; margin: 0 auto; }

  /* Portada: el mensaje y las acciones se apilan —con los botones
     al lado, a esta medida, el titular se partiría en tres
     renglones— y la trayectoria pasa a 2x2. Sigue siendo el mismo
     panel: cambia el reparto, no la pieza. */
  .mk-testi-hero__frame { min-height: clamp(41rem, 62vw + 8rem, 44rem); }
  .mk-testi-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mk-testi-hero__text { max-width: none; }
  .mk-testi-hero__lead { max-width: 40rem; }
  .mk-testi-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  /* en dos columnas, quien abre fila no lleva filete a la izquierda */
  .mk-testi-hero__metrics .mk-stat:nth-child(odd) { border-left: 0; }
  .mk-testi-hero__metrics .mk-stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }

  /* La columna izquierda mide aquí unos 330px: tres tarjetas
     verticales dejarían el rótulo en cuatro renglones. Pasan a
     fila, una debajo de otra, con el importe a la derecha. */
  .mk-contact__info .mk-prizes { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }

  .mk-prize {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
  }

  .mk-prize__label { order: 2; }
  .mk-prize__amount { order: 3; margin-left: auto; padding-left: 0.6rem; }

  .mk-features__grid { grid-template-columns: repeat(2, 1fr); }
  .mk-projects__grid { grid-template-columns: repeat(2, 1fr); }
  /* los tres pasos siguen en fila, con menos aire entre ellos */
  .mk-steps__list { gap: 1.2rem; }
  .mk-step { padding: 0; }
  .mk-step__text { font-size: 0.9rem; }
  .mk-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-stats__grid { grid-template-columns: repeat(2, 1fr); }
  /* Las cifras de trayectoria son cuatro y en 2x2 quedan
     cuadradas; las recompensas son TRES y ahí dejarían una sola
     debajo. Se quedan en fila mientras haya sitio. */
  .mk-rewards { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  /* en 2 columnas la tarjeta queda más ancha que en desktop de 4
     columnas, así que el número puede crecer un poco respecto al
     clamp() fluido base sin riesgo de desbordar. */
  .mk-stat__value { font-size: clamp(2rem, 4vw, 2.6rem); }
  .mk-carousel > * { flex-basis: calc((100% - 1.4rem) / 2); }
  #mk-testimonios .mk-carousel > * { flex-basis: calc((100% - 20px) / 2); }
  /* mismo motivo que en los reels: el selector con #mk-proyectos
     es más específico y seguiría imponiendo 3 columnas aquí. */
  #mk-proyectos .mk-carousel > * { flex-basis: calc((100% - 1.6rem) / 2); }
  .mk-contact__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .mk-menu__body { grid-template-columns: 1fr; gap: 2rem; align-items: start; padding-top: 1rem; }
  .mk-menu__aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.6rem; }
}

@media (max-width: 767px) {
  /* ---- Testimonios ---- */

  /* La portada ocupa la pantalla menos un dedo: así asoma el
     principio de la sección siguiente —que es la invitación a
     seguir bajando— y la burbuja de WhatsApp, que en el celular
     está fija abajo a la derecha, no se sienta encima de la última
     cifra. El alto se declara dos veces a propósito: donde no haya
     svh manda la primera. */
  .mk-testi-hero__frame { min-height: 40rem; }
  .mk-testi-hero__frame { min-height: max(40rem, calc(100svh - var(--mk-header-h) - 4.5rem)); }

  .mk-testi-hero__veil { height: 76%; }
  .mk-testi-hero__wrap { padding-bottom: 1.1rem; }
  .mk-testi-hero__panel { border-radius: 16px; }
  .mk-testi-hero__top { padding: 1.15rem 1.1rem 1.2rem; gap: 0.95rem; }
  .mk-testi-hero__badge { font-size: 0.6rem; letter-spacing: 0.04em; }
  .mk-testi-hero__lead { font-size: 0.88rem; line-height: 1.5; }

  /* Los dos botones se reparten la fila cuando caben y se apilan a
     ancho completo cuando no: lo decide el propio flex, así que no
     hay un ancho mágico que se rompa en el teléfono siguiente. El
     alto táctil —46px— no baja en ninguno de los dos casos: lo que
     se recorta es el relleno lateral, no el vertical. */
  .mk-testi-hero__actions { width: 100%; gap: 0.5rem; }

  .mk-testi-hero__actions .mk-btn {
    flex: 1 1 8.5rem;
    font-size: 0.88rem;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  /* Aquí la celda mide unos 140px. Con el icono al lado, al rótulo
     le quedaban 100 y "Proyectos en desarrollo" caía en TRES
     renglones, con las cuatro cifras a distinta altura.

     Así que el icono comparte fila con la cifra y el rótulo ocupa
     la celda entera, que es justo lo que necesita para caber en una
     línea. display:contents saca del medio al envoltorio para que
     icono, cifra y rótulo sean casillas de la misma rejilla; el
     markup no cambia. */
  .mk-stat--inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    column-gap: 0.5rem;
    row-gap: 0;
    padding: 0.8rem 0.8rem 0.85rem;
  }

  .mk-stat--inline .mk-stat__body { display: contents; }

  .mk-stat--inline .mk-stat__icon {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.82rem;
    margin-bottom: 0;
  }

  .mk-stat--inline .mk-stat__value {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.32rem;
  }

  .mk-stat--inline .mk-stat__label {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.3rem;
    font-size: 0.7rem;
  }

  .mk-testi-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-testi-tools { flex-direction: column; align-items: stretch; }
  .mk-testi-tools__fields { flex-direction: column; }
  .mk-testi-field select { min-width: 0; width: 100%; }
  .mk-testi-tools__count { margin-bottom: 0; }

  .mk-project h3 { font-size: 1.2rem; }
  .mk-header__cta .mk-btn--gold { display: none; }
  /* el WA circular y "Agenda una visita" del header ya no hacen
     falta en móvil: existe el flotante (.mk-wa-float). Se oculta
     el contenedor .mk-header__cta completo (no solo sus hijos)
     porque su propio margin-left:auto competía con el del
     burger por el espacio libre, dejando el burger a medio
     camino en vez de pegado al borde derecho. */
  .mk-header__cta { display: none; }
  .mk-burger { margin-left: auto; }
  .mk-projects__grid { grid-template-columns: 1fr; }

  /* ---- Referidos ---- */

  /* Misma pieza y misma medida que la cabecera del proyecto en
     el celular: la vertical de 1080x2160. La proporcion la pone
     la imagen, no la seccion, asi que ya no hace falta el
     min-height en vw que hubo aqui. */
  .mk-referral-hero__media { aspect-ratio: 1080 / 2160; }

  /* La tarjeta NO baja fuera de la foto como la del proyecto.
     Alli el motivo es que taparia el centro de una imagen
     vertical; aqui la pieza esta compuesta justo para que el
     tercio de abajo la reciba, y sacarla dejaria mil pixeles de
     fotografia antes de la primera palabra. */
  .mk-referral-hero__id { bottom: 2.2rem; }

  .mk-referral-hero__text { max-width: none; }

  .mk-referral-hero__badge { font-size: 0.6rem; letter-spacing: 0.04em; }

  .mk-referral-hero__lead { font-size: 0.94rem; margin-bottom: 1.1rem; }

  .mk-referral-hero__cta { width: 100%; justify-content: center; }

  /* Los pasos se apilan y el raíl gira: el círculo pasa a la
     izquierda y el recorrido baja en vertical. La geometría
     exacta la reescribe referidos.js; esto es lo que se ve si
     el script no llega a correr. */
  .mk-steps__list { grid-template-columns: 1fr; gap: 1.9rem; }

  .mk-step {
    text-align: left;
    padding: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
  }

  .mk-step__dot { margin: 0; }
  .mk-step__body { margin-top: 0; padding: 1.1rem 1.15rem 1.2rem; }

  .mk-steps__rail {
    top: 38px;
    bottom: 38px;
    left: 36px;
    right: auto;
    width: 4px;
    height: auto;
  }
  .mk-blog-grid { grid-template-columns: 1fr; }
  /* en móvil una portada tan apaisada se recorta demasiado: se le
     deja algo más de alto del que daría el 36vw */
  .mk-article__cover { height: clamp(200px, 52vw, 320px); }
  .mk-article__body { font-size: 1rem; line-height: 1.75; }
  /* una tabla del editor puede traer más columnas de las que caben */
  .mk-article__body table { display: block; overflow-x: auto; }
  /* una imagen flotada en una columna estrecha deja renglones de
     tres palabras: en móvil todas van a ancho completo */
  .mk-article__body img[style*="float"],
  .mk-article__body img.note-float-left,
  .mk-article__body img.note-float-right {
    float: none !important;
    max-width: 100%;
    margin: 1.5rem auto;
  }
  .mk-article__foot { justify-content: flex-start; }
  .mk-carousel > * { flex-basis: 88%; }
  /* sin este override, el selector con #mk-testimonios (más
     específico) seguía ganando sobre esta regla genérica y el
     carrusel de reels se quedaba en 2 columnas entre 481-767px
     mientras el resto de carruseles ya bajaba a 1. */
  #mk-testimonios .mk-carousel > * { flex-basis: 88%; }
  #mk-proyectos .mk-carousel > * { flex-basis: 88%; }
  /* en móvil manda la imagen vertical (image_mobile_promo): su
     proporción define el alto, de nuevo sin recortar nada.

     La MISMA regla vale para el slide de la ficha de proyecto:
     los dos carruseles comparten medida, como comparten los
     indicadores y las flechas. No hay una proporción propia para
     la ficha —era justo lo que la hacía verse distinta—, así que
     en el celular los dos miden exactamente igual. */
  .mk-hero .carousel-item,
  .mk-pdp-hero .carousel-item { aspect-ratio: 1080 / 2160; }
  .mk-hero__scrim {
    background: linear-gradient(0deg, rgba(3, 42, 43, 0.95) 0%, rgba(3, 42, 43, 0.72) 42%, rgba(3, 42, 43, 0.18) 72%, rgba(3, 42, 43, 0.02) 100%);
  }
  .mk-hero__caption { align-items: flex-end; }
  .mk-hero__box { padding-bottom: 3.4rem; }
  .mk-resume { grid-template-columns: repeat(2, 1fr); }
  .mk-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .mk-footer__bottom-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; }
  .mk-footer__bottom-logo, .mk-footer__copy { justify-self: center; text-align: center; }
  .mk-plan-stats { gap: 1.1rem; }
  /* 16px evita el auto-zoom de iOS al enfocar un campo (Safari
     hace zoom automático cuando el font-size del input es <16px). */
  .mk-field input, .mk-field select, .mk-field textarea { font-size: 1rem; }
}

@media (max-width: 480px) {
  .mk-catalog__tools { display: grid; grid-template-columns: 1fr auto; padding: 0.65rem; }
  .mk-catalog__sort { grid-column: 1 / -1; grid-template-columns: auto 1fr; padding: 0.65rem 0 0; border-left: 0; border-top: 1px solid var(--mk-line); }
  /* el buscador pasa a su propia línea: compartida con el botón
     "Filtros" se quedaría sin sitio para su texto de ayuda */
  .mk-catalog__control--search { grid-column: 1 / -1; }
  /* una sola columna: a dos, el texto de los desplegables se corta */
  .mk-catalog__fields { grid-template-columns: minmax(0, 1fr); }
  .mk-features__grid { grid-template-columns: 1fr; }
  .mk-stats__grid { grid-template-columns: 1fr 1fr; }
  .mk-header__inner { gap: 0.7rem; }
  .mk-header__brand img { height: 38px; }
  /* 2 columnas en tarjeta angosta (~150-170px): sin este ajuste,
     valores largos como "40,000 m²" (más largo que los antiguos
     "4"/"8") se ven desproporcionados o fuerzan 3 líneas. */
  .mk-stat { padding: 1.4rem 0.7rem; }
  .mk-stat__icon { width: 44px; height: 44px; font-size: 1.05rem; margin-bottom: 0.6rem; }
  .mk-stat__value { font-size: clamp(1.5rem, 8vw, 1.9rem); }
  .mk-stat__label { font-size: 0.82rem; }
  /* por debajo de 480px, 2 tarjetas de reel (heredadas del ajuste
     de 991px) quedan demasiado angostas para "Ver más en Instagram"
     en una sola línea — se pasa a 1 por vista con peek del siguiente. */
  #mk-testimonios .mk-carousel > * { flex-basis: 88%; }
  /* la tarjeta del formulario con 2rem de padding deja muy poco
     ancho útil a los campos en pantallas de ~360-480px. */
  .mk-form-card { padding: 1.4rem; }
  .mk-mode label { font-size: 0.82rem; padding: 0.55rem 0.4rem; gap: 0.35rem; }
  /* el panel de cabecera se pega demasiado a los bordes: se reduce
     la superposición sobre la portada y se estrecha el relleno */
  .mk-article__head { margin-top: -0.8rem; padding: 1.3rem; }
  .mk-container.mk-article__container { width: min(1140px, 100% - 2rem); }
  .mk-share__label { display: none; }
  /* Por debajo de ~45 caracteres por línea el justificado abre
     huecos muy visibles entre palabras (la partición de palabras
     no siempre alcanza a compensarlos), así que en móvil pequeño
     el texto se alinea a la izquierda. Si se prefiere justificado
     también aquí, basta con quitar estas dos líneas. */
  .mk-article__body p,
  .mk-article__body li { text-align: left; }
}

/* iPhone SE y similares: un paso más de reducción para que
   "40,000 m²" siga cabiendo en 2 líneas dentro de la tarjeta. */
@media (max-width: 380px) {
  .mk-stat__value { font-size: clamp(1.35rem, 9vw, 1.6rem); }
}


/* Ficha de proyecto.

   El slide mantiene la proporción del inicio (1920/815) mientras
   la pantalla es ancha. Por debajo de 768px se estira: la
   tarjeta de identidad va superpuesta abajo a la izquierda y en
   una franja de 2,36:1 no le quedaría fotografía por encima. El
   inicio ahí ya usa su imagen vertical, que nosotros no tenemos.

   La tarjeta se levanta lo justo para dejar libres los
   indicadores, que van centrados en el pie del slide. */

@media (max-width: 1199px) {
  img.mk-pdp-hero__logo { height: 68px; max-width: 165px; }
  .mk-pdp-hero__inner { padding: 1.05rem 1.5rem 1.15rem; }

  /* Aquí el slide ya mide poco más de 400px y las flechas, que van
     a media altura, caerían justo sobre la tarjeta de identidad.
     Se recentran en los dos tercios de arriba, que es la parte de
     la fotografía que queda libre. */
  .mk-pdp-hero .carousel-control-prev,
  .mk-pdp-hero .carousel-control-next { bottom: 34%; }
}

/* La proporción de la tableta va en su propio tramo, con suelo en
   768px: por debajo manda la medida del inicio y esta no puede
   pisarla. */
@media (max-width: 991px) and (min-width: 768px) {
  /* La portada de referidos comparte tramo y medida con la
     cabecera del proyecto: en tableta las dos son 16/9. */
  .mk-referral-hero__media { aspect-ratio: 16 / 9; }

  /* Con la medida de escritorio la tarjeta se comía el 87% del
     ancho útil: casi toda la fotografía, pero sin llegar al
     borde, que es lo peor de los dos mundos. */
  .mk-referral-hero__text { max-width: 27rem; }
  .mk-pdp-hero .carousel-item { aspect-ratio: 16 / 9; }
}

@media (max-width: 991px) {
  img.mk-pdp-hero__logo { height: 62px; max-width: 150px; }
  .mk-pdp-hero__id { bottom: 3rem; }

  /* Las flechas van centradas a media altura y en una pantalla
     estrecha esa media altura es justo donde vive la tarjeta de
     identidad: se retiran para no pisarla. La navegación no se
     pierde —el carrusel se desliza con el dedo y los indicadores
     siguen ahí—, y a 8% de ancho eran un blanco de 30px, difícil
     de acertar de todos modos. */
  .mk-pdp-hero .carousel-control-prev,
  .mk-pdp-hero .carousel-control-next { display: none; }
  .mk-pdp-amenities__grid { --mk-cols: 3; }
  .mk-pdp-gallery__grid { --mk-cols: 2; }
  .mk-pdp-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .mk-pdp-hero__id { bottom: 2.6rem; }
  .mk-pdp-hero__inner { gap: 0.95rem; padding: 0.95rem 1.15rem 1rem; }
  img.mk-pdp-hero__logo { height: 54px; max-width: 130px; }
  .mk-pdp-hero__text .mk-eyebrow { margin-bottom: 0.45rem; }
  .mk-pdp-hero__stage { font-size: 0.64rem; padding: 0.32rem 0.7rem; }
  .mk-pdp-hero__loc { font-size: 0.9rem; }

  .mk-pdp-metric { padding: 1.3rem 1.2rem 1.15rem; }
  .mk-pdp-progress { padding: 1.3rem 1.2rem; }
  /* en móvil los dos avances se apilan a ancho completo: uno al
     lado del otro dejaría cada barra en poco más de 130px */
  .mk-pdp-progress__item { flex-basis: 100%; }
  /* el pie y el contador ocupan proporcionalmente más en móvil */
  .mk-pdp-lightbox__figure img { max-height: calc(100vh - 11rem); }
  .mk-pdp-lightbox__close,
  .mk-pdp-lightbox__nav { width: 42px; height: 42px; font-size: 1rem; }
}

/* Último escalón de la tarjeta de identidad en los móviles más
   estrechos. La proporción del slide ya no se toca aquí: la marca
   la regla compartida con el inicio. */
@media (max-width: 560px) {
  /* Los dos botones no caben en una línea: .mk-btn no parte el
     texto (white-space: nowrap) y se saldrían de la tarjeta. El
     de enviar queda arriba, que es la acción principal. */
  /* tres tarjetas en 150px cada una dejan el rótulo en cuatro
     renglones: se apilan */
  .mk-rewards { grid-template-columns: minmax(0, 1fr); }

  .mk-wizard__nav--pair { grid-template-columns: minmax(0, 1fr); }
  .mk-wizard__nav--pair [data-mk-prev] { order: 2; }

  .mk-pdp-hero__inner { gap: 0.8rem; padding: 0.85rem 1rem 0.9rem; }
  img.mk-pdp-hero__logo { height: 44px; max-width: 96px; }
  .mk-pdp-hero__id { bottom: 2.2rem; }
}
@media (max-width: 480px) {
  /* Las amenidades bajan a dos columnas, no a una: son tarjetas
     de icono y una línea de texto, y en columna única quedarían
     enormes y obligarían a un scroll larguísimo. */
  .mk-pdp-amenities__grid { --mk-cols: 2; }
  .mk-pdp-amenity { padding: 1.25rem 0.7rem 1.1rem; }
  .mk-pdp-amenity__icon { width: 54px; height: 54px; font-size: 1.3rem; }
  .mk-pdp-amenity__text { font-size: 0.88rem; }
  .mk-pdp-metrics { grid-template-columns: minmax(0, 1fr); }
  .mk-pdp-gallery__grid { --mk-cols: 1; }
  /* Los botones NO se estiran al ancho completo: llegarían hasta
     el borde derecho, justo donde vive el WhatsApp flotante, y
     este les taparía el último tramo. A su ancho natural quedan
     apilados a la izquierda y despejados. */
  .mk-pdp-cta__actions { flex-direction: column; align-items: flex-start; }
}


/* ------------------------------------------------------------
   Header del proyecto — tableta y móvil
   ------------------------------------------------------------ */

/* Seis accesos más el logotipo caben holgados a partir de
   1100px; entre 1100 y 992 hay que apretar el aire y el cuerpo
   de letra para que no se rompa la fila. */
@media (max-width: 1100px) and (min-width: 768px) {
  .mk-header__nav { gap: 1rem; }
  .mk-header__nav .mk-header__link { font-size: 0.85rem; }
  .mk-header__nav .mk-header__link--cta { padding: 0.5rem 0.9rem; }
  img.mk-header__project-logo { height: 40px; max-width: 120px; }
}

/* Por debajo de 768px los accesos no caben sin amontonarse y no
   se publican en ninguna parte —dentro del menú overlay lo
   recargaban—, así que la barra del proyecto se queda con dos
   piezas: logotipo y hamburguesa. La hamburguesa sigue abriendo
   el menú de siempre, con el contenido del header de Meka. */
@media (max-width: 767px) {

  .mk-header__nav { display: none; }

  /* la hamburguesa al extremo, como en la fila de Meka */
  .mk-burger--project { margin-left: auto; }

}

@media (max-width: 480px) {
  img.mk-header__project-logo { height: 38px; max-width: 96px; }
}


/* ------------------------------------------------------------
   Ficha de proyecto — celular

   Va al final del bloque a propósito: estas reglas rematan lo
   que dejaron los escalones anteriores (la posición de la
   tarjeta, las flechas retiradas en tablet) y en CSS gana la
   última cuando la especificidad empata.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  /*=============================================
  Etapa, nombre y ubicación pasan a ir DEBAJO del slide.

  Es LA MISMA tarjeta y no hay un segundo bloque: lo único
  que cambia es que deja de estar superpuesta. Su velo, su
  borde, su sombra, su tipografía y su jerarquía son
  exactamente los del escritorio; aquí no se declara ni un
  color ni un fondo nuevo.

  Fuera del slide ya no hay nada debajo que estorbar, así
  que recupera el clic para que el texto se pueda
  seleccionar.

  La variante --solid es la del proyecto sin fotografías:
  esa ya vive debajo y tiene su propio relleno, así que se
  queda fuera.
  =============================================*/

  .mk-pdp-hero__id:not(.mk-pdp-hero__id--solid) {
    position: static;
    bottom: auto;
    padding: 1.1rem 0 0;
    pointer-events: auto;
  }

  /*=============================================
  Con la tarjeta fuera del slide las flechas vuelven: ya no
  hay nada que puedan pisar y el inicio también las lleva en
  el móvil. Se devuelven a su altura de siempre, deshaciendo
  el desplazamiento que necesitaban en tablet.
  =============================================*/

  .mk-pdp-hero .carousel-control-prev,
  .mk-pdp-hero .carousel-control-next {
    display: flex;
    bottom: 0;
    width: 14%;
  }

  /*=============================================
  Galería: dos imágenes y el velo en la segunda.

  Seis fotos apiladas en una columna obligan a un
  desplazamiento larguísimo para llegar a lo que viene
  después. De la tercera a la sexta salen de la rejilla pero
  siguen en el documento, igual que las que pasan de la
  sexta en escritorio: el visor las necesita para poder
  recorrerlas todas.
  =============================================*/

  .mk-pdp-gallery__item--rest-m { display: none; }

  .mk-pdp-gallery__more--d { display: none; }
  .mk-pdp-gallery__more--m { display: flex; }

  .mk-pdp-gallery__item--more-m .mk-pdp-gallery__zoom,
  .mk-pdp-gallery__item--more-m .mk-pdp-gallery__caption { display: none; }

  /*=============================================
  Separación entre la galería y los testimonios.

  Las dos secciones comparten el fondo de arena, así que
  entre ellas no hay ningún cambio de color que marque el
  corte: los dos rellenos se suman y se leen como un único
  vacío de 120px, muy largo en una pantalla de móvil. En el
  resto de la página ese mismo espacio se reparte entre dos
  colores distintos y no se nota.

  El selector solo casa en la ficha de proyecto —en el
  inicio no hay galería—, así que no toca ninguna otra
  sección. Es hermano general y no adyacente porque entre
  las dos secciones vive el visor de la galería, que no
  pinta nada pero sí está en el documento.
  =============================================*/

  .mk-pdp-gallery { padding-bottom: 2.4rem; }
  .mk-pdp-gallery ~ #mk-testimonios { padding-top: 2.4rem; }

  /* Con la barra de indicadores repartida en varias líneas
     (proyectos con muchas fotos), los 15% de margen lateral que
     pone Bootstrap dejaban muy poco sitio y salían tres filas.
     Los dos carruseles usan el ancho útil de la pantalla; cuando
     las rayas caben en una línea —el inicio— van centradas y esto
     no cambia nada. */
  .mk-hero .carousel-indicators,
  .mk-pdp-hero .carousel-indicators { margin-left: 0.5rem; margin-right: 0.5rem; }

}

/* ------------------------------------------------------------
   Movimiento reducido
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mk-scope *, .mk-header *, .mk-menu *, .mk-footer *,
  [data-mk-reveal], .mk-lot, .mk-project--more,
  .mk-hero .carousel-item .mk-hero__box > * {
    transition: none !important;
    animation: none !important;
  }
  [data-mk-reveal] { opacity: 1; transform: none; }
  .mk-plan .mk-lot, .mk-plan.is-revealed .mk-lot { opacity: 1; }
  .mk-projects__grid.is-expanded .mk-project--more { opacity: 1; transform: none; }
  /* sin paneo: el reveal de la imagen hover queda estático */
  .mk-project:hover .mk-project__pan { opacity: 1; }
}

/* Nuestra Historia: profundidad, tarjetas y visor de capítulos.
   La ruta vertical es la base; .is-live activa el recorrido horizontal. */
.mk-road {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 1.5rem;
  color: var(--mk-white);
  background: radial-gradient(ellipse at 5% 15%, rgba(11,74,76,.42), transparent 58%), #20272a;
}
.mk-road__stage {
  position: relative;
  width: min(1240px, 100% - 3rem);
  margin: 0 auto;
}
.mk-road__bg, .mk-road__contours, .mk-road__line { display: none; }
.mk-road__head { position: relative; margin-bottom: 2.5rem; }
.mk-road__head .mk-eyebrow { color: var(--mk-gold-2); }
.mk-road__head .mk-eyebrow::before { background: var(--mk-gold); }
.mk-road__head .mk-title {
  color: var(--mk-white);
  margin-top: .7rem;
  text-wrap: balance;
}
.mk-road .mk-road__intro {
  margin-top: .7rem;
  color: #becdcb;
  font-size: .94rem;
}
.mk-road__hint { display: none; }
.mk-road__stops {
  list-style: none;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.mk-road__stops::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: linear-gradient(var(--mk-gold), rgba(226,182,95,.18));
}
.mk-road__stop {
  position: relative;
  padding: 0 0 2.5rem 4.5rem;
  scroll-margin-top: calc(var(--mk-header-h) + 1rem);
}
.mk-road__stop:last-child { padding-bottom: 0; }
.mk-road__node {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 1.4rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .9rem;
  color: var(--mk-gold-2);
  background: #203638;
  border: 1px solid rgba(226,182,95,.5);
  box-shadow: 0 8px 24px rgba(3,22,24,.3);
  transition: background-color 240ms, color 240ms, border-color 240ms, transform 300ms var(--mk-ease);
}
.mk-road__node::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid var(--mk-gold);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 300ms, transform 350ms var(--mk-ease);
}
.mk-road__stop.is-visited .mk-road__node {
  background: #665530;
  color: #f2d69e;
  border-color: var(--mk-gold);
}
.mk-road__stop.is-active .mk-road__node {
  color: var(--mk-green);
  background: var(--mk-gold);
  border-color: var(--mk-gold);
}
.mk-road__stop.is-active .mk-road__node::after { opacity: .5; transform: scale(1); }
.mk-road__depth { position: relative; perspective: 1100px; }
.mk-road__card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  padding: 1.5rem;
  background: var(--mk-sand);
  box-shadow: 0 18px 38px rgba(3,22,24,.22), inset 0 1px rgba(255,255,255,.8);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 280ms var(--mk-ease), border-color 280ms;
}
.mk-road__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 28px 50px rgba(3,22,24,.3), 0 0 0 1px rgba(215,164,70,.38);
  opacity: 0;
  transition: opacity 300ms;
}
.mk-road__stop.is-active .mk-road__card { border-color: var(--mk-gold-2); }
.mk-road__stop.is-active .mk-road__card::before { opacity: 1; }
.mk-road__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: #20312e;
  pointer-events: none;
  opacity: 0;
}
.mk-road__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.mk-road .mk-road__year {
  margin: 0;
  font: 400 clamp(1.9rem, 2.5vw, 2.55rem)/1 var(--mk-font-display);
  letter-spacing: -.04em;
  color: #946621;
  font-variant-numeric: tabular-nums;
}
.mk-road__kind {
  max-width: 9rem;
  text-align: right;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #66716a;
}
.mk-road .mk-road__title {
  margin: 0 0 .75rem;
  color: var(--mk-green);
  font-size: clamp(1.22rem, 1.6vw, 1.55rem);
  line-height: 1.12;
  text-wrap: balance;
}
.mk-road .mk-road__text {
  max-width: 65ch;
  margin: 0;
  color: #465452;
  font-size: .94rem;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.mk-road__media, .mk-road__video {
  position: relative;
  margin: 1.25rem 0 0;
  border-radius: 10px;
  overflow: hidden;
  background: #193b3b;
}
.mk-road__media img {
  display: block;
  width: 100%;
  height: clamp(12rem, 24vw, 20rem);
  object-fit: cover;
  transform: scale(1.045);
  transition: transform 450ms var(--mk-ease);
}
.mk-road__stop.is-active .mk-road__media img { transform: scale(1); }
.mk-road__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1.15rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(3,42,43,.12);
  font-size: .67rem;
  letter-spacing: .035em;
  color: #66716a;
}
.mk-road__card-foot > span:last-child {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-variant-numeric: tabular-nums;
}
.mk-road__foot-line {
  width: 1.8rem;
  height: 1px;
  background: #afa48b;
  transform: scaleX(.55);
  transform-origin: right;
  transition: transform 300ms var(--mk-ease), background-color 300ms;
}
.mk-road__stop.is-active .mk-road__foot-line { transform: scaleX(1); background: #946621; }
.mk-road__stop--aniversario .mk-road__card { background: #eee5d2; }
.mk-road__stop--hito .mk-road__card::after {
  content: "";
  position: absolute;
  top: 5.2rem;
  right: 1.5rem;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(148,102,33,.08);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.mk-road__video { aspect-ratio: 16 / 9; }
.mk-road__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mk-road__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: #193b3b;
  color: var(--mk-white);
  cursor: pointer;
  overflow: hidden;
}
.mk-road__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms var(--mk-ease);
}
.mk-road__poster[hidden] { display: none; }
.mk-road__play-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,42,43,.06) 25%, rgba(3,26,27,.85));
}
.mk-road__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--mk-green);
  background: var(--mk-gold);
  box-shadow: 0 8px 26px rgba(3,22,24,.3);
  transform: translate(-50%, -50%);
  transition: transform 220ms var(--mk-ease), background-color 220ms;
}
.mk-road__play-icon i { margin-left: .15em; font-size: .9rem; }
.mk-road__play-label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .7rem;
  text-align: left;
  font-size: .75rem;
  letter-spacing: .025em;
}
.mk-road__play:active .mk-road__play-icon { transform: translate(-50%, -50%) scale(.96); }
.mk-road button:focus-visible, .mk-road__card:focus-visible { outline: 3px solid var(--mk-gold-2); outline-offset: 4px; }
.mk-road__play:focus-visible { outline-offset: -4px; }

/* El resumen, los controles y el mapa comparten el mismo avance. */
.mk-road__hud { display: none; }
.mk-road.is-ready .mk-road__hud {
  display: block;
  position: sticky;
  bottom: .75rem;
  z-index: 5;
  margin-top: 2rem;
  padding: 1rem 1.4rem .7rem;
  border: 1px solid rgba(215,164,70,.25);
  border-radius: 16px;
  background: rgba(8,35,36,.96);
  box-shadow: 0 16px 45px rgba(3,22,24,.3), inset 0 1px rgba(255,255,255,.04);
}
.mk-road__hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: .6rem;
}
.mk-road__current { min-width: 0; }
.mk-road__hud-label {
  display: block;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: #a8bcba;
  margin-bottom: .25rem;
}
.mk-road__current p {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #edf1e9;
  font-size: .85rem;
  line-height: 1.3;
}
#mkRoadCurrentYear {
  color: var(--mk-gold-2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
#mkRoadCurrentTitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mk-road__current-divider {
  height: .8rem;
  width: 1px;
  background: rgba(226,182,95,.3);
  flex-shrink: 0;
}
.mk-road__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.mk-road__counter {
  color: var(--mk-gold-2);
  font-size: .78rem;
  letter-spacing: .05em;
  margin-right: .7rem;
  font-variant-numeric: tabular-nums;
}
.mk-road__counter > span:last-child { color: #9cb0ad; }
.mk-road__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226,182,95,.35);
  border-radius: 50%;
  color: var(--mk-gold-2);
  background: transparent;
  cursor: pointer;
  font-size: .75rem;
  transition: transform 180ms var(--mk-ease), background-color 180ms, color 180ms;
}
.mk-road__arrow:disabled { opacity: .3; cursor: default; }
.mk-road__arrow:active:not(:disabled) { transform: scale(.95); }
.mk-road__map {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #607571 transparent;
  overscroll-behavior-x: contain;
}
.mk-road__map-inner { position: relative; min-width: calc(var(--mk-road-stops) * 6.5rem); }
.mk-road__rail {
  position: absolute;
  left: calc(50% / var(--mk-road-stops));
  right: calc(50% / var(--mk-road-stops));
  top: 14px;
  height: 1px;
  background: rgba(202,219,212,.22);
  pointer-events: none;
}
.mk-road__rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mk-gold);
  transform: scaleX(0);
  transform-origin: left;
}
.mk-road__years {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--mk-road-stops), minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-road__years li { min-width: 0; }
.mk-road__years button {
  position: relative;
  width: 100%;
  min-height: 68px;
  padding: 27px .4rem .4rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #a9bcb8;
  text-align: center;
  cursor: pointer;
  transition: color 200ms, background-color 200ms;
}
.mk-road__marker {
  position: absolute;
  left: calc(50% - 4px);
  top: 10px;
  width: 9px;
  height: 9px;
  border: 1px solid #82978e;
  border-radius: 50%;
  background: #173a39;
  transition: transform 280ms var(--mk-ease), background-color 280ms, border-color 280ms;
}
.mk-road__marker::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--mk-gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 280ms, transform 280ms var(--mk-ease);
}
.mk-road__nav-year {
  display: block;
  font-size: .8rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.mk-road__nav-title {
  display: block;
  margin-top: .2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .58rem;
  line-height: 1.4;
}
.mk-road__years .is-visited .mk-road__marker { background: var(--mk-gold); border-color: var(--mk-gold); }
.mk-road__years .is-active button { color: var(--mk-gold-2); }
.mk-road__years .is-active .mk-road__marker {
  background: var(--mk-gold-2);
  border-color: var(--mk-gold-2);
  transform: scale(1.15);
}
.mk-road__years .is-active .mk-road__marker::after { opacity: .6; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .mk-road__card:hover { transform: translateY(-4px) rotateX(1deg) rotateY(-1.3deg); }
  .mk-road__card:has(.is-playing):hover { transform: none; }
  .mk-road__play:hover .mk-road__poster { transform: scale(1.04); }
  .mk-road__play:hover .mk-road__play-icon { transform: translate(-50%, -50%) scale(1.06); background: var(--mk-gold-2); }
  .mk-road__arrow:hover:not(:disabled) {
    background: var(--mk-gold);
    color: var(--mk-green);
    transform: translateY(-1px);
  }
  .mk-road__years button:hover { background: rgba(226,182,95,.06); color: #f4e1ba; }
}
@media (min-width: 1200px) and (min-height: 740px) {
  .mk-road.is-live {
    --mk-road-step: clamp(22rem, 27vw, 28rem);
    height: calc(100svh + var(--mk-road-stops) * 54svh);
    padding: 0;
    background: #20272a;
  }
  .mk-road.is-live .mk-road__stage {
    position: sticky;
    top: var(--mk-header-h);
    height: calc(100svh - var(--mk-header-h));
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .mk-road.is-live .mk-road__bg {
    display: block;
    position: absolute;
    inset: -8%;
    pointer-events: none;
    background: radial-gradient(ellipse at 12% 68%, rgba(11,74,76,.6), transparent 60%), radial-gradient(ellipse at 82% 35%, rgba(215,164,70,.13), transparent 53%);
  }
  .mk-road.is-live .mk-road__contours {
    display: block;
    position: absolute;
    width: 125%;
    height: 120%;
    left: -8%;
    top: 3%;
    pointer-events: none;
    opacity: .28;
    background: repeating-radial-gradient(ellipse at 18% 100%, transparent 0, transparent 87px, rgba(144,177,159,.18) 88px, transparent 89px, transparent 138px);
    mask-image: linear-gradient(transparent, #000 35%, #000 70%, transparent);
  }
  .mk-road.is-live .mk-road__head {
    position: absolute;
    z-index: 3;
    top: 1.6rem;
    left: max(2rem, calc((100% - 1320px) / 2));
    right: max(2rem, calc((100% - 1320px) / 2));
    margin: 0;
    pointer-events: none;
  }
  .mk-road.is-live .mk-road__head .mk-title { font-size: clamp(1.9rem, 2.4vw, 2.6rem); letter-spacing: -.02em; }
  .mk-road.is-live .mk-road__hint {
    position: absolute;
    display: flex;
    gap: .7rem;
    align-items: center;
    right: 0;
    bottom: .1rem;
    max-width: 12rem;
    font-size: .68rem;
    line-height: 1.5;
    color: #adbfbb;
  }
  .mk-road__hint i { color: var(--mk-gold); font-size: 1.1rem; }
  .mk-road.is-live .mk-road__track {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: calc(var(--mk-road-stops) * var(--mk-road-step) + var(--mk-road-step));
  }
  .mk-road.is-live .mk-road__line {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .mk-road__bed {
    stroke: rgba(202,219,212,.19);
    stroke-width: 1.5;
    stroke-linecap: round;
  }
  .mk-road__done {
    stroke: var(--mk-gold);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(215,164,70,.25));
  }
  .mk-road.is-live .mk-road__stops {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    transform: translateX(var(--mk-road-lead, 0px));
  }
  .mk-road.is-live .mk-road__stops::before { display: none; }
  .mk-road.is-live .mk-road__stop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--mk-road-step) * .5 + var(--mk-i) * var(--mk-road-step));
    width: var(--mk-road-step);
    padding: 0;
    transform: translateX(-50%);
  }
  .mk-road.is-live .mk-road__node {
    left: 50%;
    top: var(--mk-node-top, 32%);
    transform: translate(-50%, -50%);
  }
  .mk-road.is-live .mk-road__stop:nth-child(even) .mk-road__node { top: var(--mk-node-bottom, 74%); }
  .mk-road.is-live .mk-road__depth {
    position: absolute;
    left: 50%;
    top: calc(var(--mk-node-top, 32%) + 2.7rem);
    width: calc(var(--mk-road-step) - 2.8rem);
    margin-left: calc((var(--mk-road-step) - 2.8rem) / -2);
    transform-origin: 50% 0;
  }
  .mk-road.is-live .mk-road__stop:nth-child(even) .mk-road__depth {
    top: auto;
    bottom: calc(100% - var(--mk-node-bottom, 74%) + 2.7rem);
    transform-origin: 50% 100%;
  }
  .mk-road.is-live .mk-road__depth::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.6rem;
    height: 1.6rem;
    width: 1px;
    background: linear-gradient(rgba(215,164,70,.55), rgba(215,164,70,.12));
  }
  .mk-road.is-live .mk-road__stop:nth-child(even) .mk-road__depth::before { top: auto; bottom: -1.6rem; }
  .mk-road.is-live .mk-road__card { padding: 1.3rem; }
  .mk-road.is-live .mk-road__title { font-size: 1.3rem; }
  .mk-road.is-live .mk-road__text { font-size: .875rem; line-height: 1.55; }
  .mk-road.is-live .mk-road__media img { height: clamp(7.5rem, 10vw, 10rem); }
  .mk-road.is-live .mk-road__card-meta { margin-bottom: .75rem; }
  .mk-road.is-live .mk-road__card-foot { margin-top: .85rem; padding-top: .65rem; }
  .mk-road.is-live .mk-road__hud {
    position: absolute;
    left: max(2rem, calc((100% - 1320px) / 2));
    right: max(2rem, calc((100% - 1320px) / 2));
    bottom: 1.1rem;
    margin: 0;
  }
  .mk-road.is-moving .mk-road__track { will-change: transform; }
}
@media (min-width: 1200px) and (min-height: 740px) and (max-height: 850px) {
  .mk-road.is-live .mk-road__head { top: 1rem; }
  .mk-road.is-live .mk-road__head .mk-title { font-size: 1.95rem; }
  .mk-road.is-live .mk-road__intro { display: none; }
  .mk-road.is-live .mk-road__card { padding: 1rem; }
  .mk-road.is-live .mk-road__year { font-size: 1.9rem; }
  .mk-road.is-live .mk-road__title { font-size: 1.17rem; margin-bottom: .6rem; }
  .mk-road.is-live .mk-road__text { font-size: .85rem; line-height: 1.5; }
  .mk-road.is-live .mk-road__media, .mk-road.is-live .mk-road__video { margin-top: .8rem; }
  .mk-road.is-live .mk-road__media img { height: 6.5rem; }
  .mk-road.is-live .mk-road__video { aspect-ratio: auto; height: 8rem; }
  .mk-road.is-live .mk-road__hud {
    padding-top: .7rem;
    padding-bottom: .4rem;
    bottom: .75rem;
  }
  .mk-road.is-live .mk-road__years button { min-height: 59px; }
}
@media (max-width: 767px) {
  .mk-road__stage { width: calc(100% - 2rem); }
  body:has(.mk-road.is-in-view) .mk-wa-float {
    bottom: calc(9rem + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
  }
  .mk-road__head .mk-title { font-size: 2rem; }
  .mk-road__stops::before { left: 14px; }
  .mk-road__stop { padding-left: 2.7rem; padding-bottom: 2rem; }
  .mk-road__node {
    width: 30px;
    height: 30px;
    font-size: .68rem;
    top: 1.5rem;
  }
  .mk-road__node::after { inset: -4px; }
  .mk-road__card { border-radius: 14px; padding: 1.1rem; }
  .mk-road .mk-road__year { font-size: 2rem; }
  .mk-road__kind { font-size: .55rem; max-width: 7rem; }
  .mk-road .mk-road__title { font-size: 1.25rem; }
  .mk-road .mk-road__text { font-size: .9rem; line-height: 1.6; }
  .mk-road__media img { height: 11rem; }
  .mk-road__card-status { font-size: .6rem; }
  .mk-road.is-ready .mk-road__hud {
    margin-left: -.35rem;
    margin-right: -.35rem;
    padding: .8rem .75rem .45rem;
    bottom: max(.5rem, env(safe-area-inset-bottom));
    border-radius: 12px;
  }
  .mk-road__hud-top { gap: .5rem; }
  .mk-road__hud-label { font-size: .5rem; }
  .mk-road__current p { font-size: .7rem; gap: .4rem; }
  .mk-road__controls { gap: .3rem; }
  .mk-road__counter { font-size: .65rem; margin-right: .15rem; }
  .mk-road__arrow {
    width: 36px;
    height: 36px;
    font-size: .65rem;
  }
  .mk-road__nav-title { display: none; }
  .mk-road__map-inner { min-width: calc(var(--mk-road-stops) * 3.7rem); }
  .mk-road__years button {
    min-height: 48px;
    padding-top: 23px;
    padding-bottom: .2rem;
  }
  .mk-road__nav-year { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-road *, .mk-road *::before, .mk-road *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .mk-road__depth, .mk-road__card, .mk-road__media img, .mk-road__poster { transform: none !important; opacity: 1 !important; }
}

/* =========================================================
   NOSOTROS — Propósito, valores, equipo e invitación.
   Se reutilizan el seguidor de lectura, los linderos calculados
   en PHP y la rejilla del equipo. Ningún texto depende del hover.
   ========================================================= */
.mk-creed { background: var(--mk-white); padding-block: clamp(4rem, 7vw, 7rem); }
.mk-creed__grid {
  display: grid;
  gap: 2.8rem;
  align-items: start;
}
.mk-creed__aside { min-width: 0; }
.mk-creed__panel {
  position: relative;
  isolation: isolate;
  padding: 1.5rem;
  border-radius: 20px;
  background: var(--mk-green);
  color: var(--mk-white);
  box-shadow: 0 22px 50px rgba(3,42,43,.12);
}
.mk-creed__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  border: 1px solid rgba(215,164,70,.16);
  border-radius: 13px;
  pointer-events: none;
}
.mk-creed .mk-creed__eyebrow { color: var(--mk-gold-2); font-size: .65rem; }
.mk-creed .mk-creed__lead {
  color: var(--mk-white);
  font-size: clamp(1.7rem, 2.3vw, 2.3rem);
  margin-top: .7rem;
}
.mk-creed__window {
  position: relative;
  aspect-ratio: 1920 / 815;
  height: auto;
  margin-top: 1.8rem;
  overflow: hidden;
  border-radius: 6px 54px 6px 6px;
  background: var(--mk-green-2);
}
.mk-creed__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 15px, 0) scale(1.06);
  transition: opacity 300ms, transform 550ms var(--mk-ease);
}
.mk-creed__scene:nth-child(2) { transform: translate3d(18px, 0, 0) scale(1.045); }
.mk-creed__scene:nth-child(3) { transform: translate3d(0, -18px, 0) scale(1.08); }
.mk-creed__scene.is-on { opacity: 1; transform: none; }
.mk-creed__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mk-creed__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3,42,43,.48), transparent 50%);
  pointer-events: none;
}
.mk-creed__window-line {
  position: absolute;
  z-index: 1;
  left: 1rem;
  bottom: 1rem;
  width: 30px;
  height: 30px;
  border-left: 1px solid var(--mk-gold-2);
  border-bottom: 1px solid var(--mk-gold-2);
}
.mk-creed .mk-creed__stack { display: grid; margin: 1rem 0 .45rem; }
.mk-creed__word {
  grid-area: 1 / 1;
  color: var(--mk-gold-2);
  font: 400 clamp(2.5rem, 4.6vw, 4.1rem)/1.08 var(--mk-font-display);
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms, transform 300ms var(--mk-ease);
}
.mk-creed__word.is-on { opacity: 1; transform: none; }
.mk-creed .mk-creed__caption {
  color: #aec3bf;
  font-size: .65rem;
  line-height: 1.5;
}
.mk-creed__meter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
}
.mk-creed__count {
  color: #aec3bf;
  font-size: .72rem;
  letter-spacing: .1em;
}
.mk-creed__count b { color: var(--mk-white); font-weight: 500; }
.mk-creed__rail {
  flex: 1;
  height: 1px;
  background: rgba(215,164,70,.24);
  overflow: hidden;
}
.mk-creed__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(.3333);
  transform-origin: left;
  background: var(--mk-gold);
  transition: transform 300ms var(--mk-ease);
}
.mk-creed__nav {
  display: none;
  grid-template-columns: repeat(var(--mk-creed-total), minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1.2rem;
  padding-top: .3rem;
}
.mk-creed.is-enhanced .mk-creed__nav { display: grid; }
.mk-creed__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem .3rem;
  border: 1px solid rgba(174,195,191,.22);
  border-radius: 6px;
  color: #c5d4d0;
  background: transparent;
  font-size: .75rem;
  cursor: pointer;
  transition: background-color 180ms, border-color 180ms, color 180ms;
}
.mk-creed__nav button span { font-size: .6rem; opacity: .65; }
.mk-creed__nav button[aria-current] {
  background: rgba(215,164,70,.12);
  border-color: rgba(215,164,70,.55);
  color: var(--mk-gold-2);
}
.mk-creed__block {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .9rem;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--mk-line);
  scroll-margin-top: calc(var(--mk-header-h) + 2rem);
}
.mk-creed__block:first-child { padding-top: 0; }
.mk-creed__block:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-creed__number {
  color: #a3b1a9;
  font: 400 1.5rem/1.3 var(--mk-font-display);
  transition: color 220ms;
}
.mk-creed__tag {
  display: block;
  color: #886521;
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mk-creed .mk-creed__title {
  margin: .65rem 0 1rem;
  font-size: clamp(1.7rem, 2.8vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--mk-green);
}
.mk-creed .mk-creed__text {
  max-width: 45ch;
  color: #53615b;
  font-size: 1rem;
  line-height: 1.8;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.mk-creed__copy { transition: transform 320ms var(--mk-ease); }
.mk-creed__block.is-on .mk-creed__number { color: #946621; }
@media (min-width: 992px) {
  .mk-creed__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .mk-creed__aside { grid-column: 2; grid-row: 1; }
  .mk-creed__main { grid-column: 1; grid-row: 1; }
  .mk-creed.is-focusable .mk-creed__aside { position: sticky; top: calc(var(--mk-header-h) + 1.5rem); }
  .mk-creed__panel { padding: clamp(1.5rem, 2.4vw, 2.3rem); }
  .mk-creed__window { height: auto; }
  .mk-creed__block, .mk-creed__block:first-child, .mk-creed__block:last-child {
    min-height: 48svh;
    padding: 3rem 0;
    align-content: center;
  }
  .mk-creed__block { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; }
  .mk-creed__number { padding-top: .15rem; font-size: 2rem; }
  .mk-creed__block::after {
    content: "";
    position: absolute;
    right: -3.2rem;
    top: 50%;
    width: 2.2rem;
    height: 1px;
    background: var(--mk-gold);
    opacity: 0;
    transform: scaleX(.2);
    transform-origin: right;
    transition: transform 300ms var(--mk-ease), opacity 200ms;
  }
  .mk-creed.is-focusable .mk-creed__block.is-on::after { opacity: .8; transform: scaleX(1); }
  .mk-creed.is-focusable .mk-creed__block:not(.is-on) .mk-creed__copy { transform: translateX(-5px); }
}
@media (min-width: 992px) and (max-height: 820px) {
  .mk-creed__panel { padding: 1.5rem; }
  .mk-creed__window { height: auto; margin-top: 1.1rem; }
  .mk-creed .mk-creed__stack { margin-top: .7rem; }
  .mk-creed__word { font-size: 3.1rem; }
  .mk-creed__meter, .mk-creed__nav { margin-top: .85rem; }
}

/* Valores: una pieza de terreno con relieve; el perímetro sigue
   correspondiendo a los valores administrables, incluso si cambia N. */
.mk-bounds { background: var(--mk-sand); padding-block: clamp(4rem, 7vw, 6rem); }
.mk-bounds .mk-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-bottom: 3rem;
}
.mk-bounds .mk-title { margin: 0; }
.mk-bounds .mk-lead { margin: 0; max-width: 43rem; }
.mk-bounds__grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.mk-bounds__plot { width: 100%; max-width: 36rem; min-width: 0; margin-inline: auto; }
.mk-bounds__relief { overflow: clip; }
.mk-bounds__paper {
  position: relative;
  isolation: isolate;
  padding: 1.5rem;
  border-radius: 50% 50% 16px 16px / 12% 12% 16px 16px;
  color: var(--mk-white);
  background: radial-gradient(ellipse at 22% 26%, rgba(215,164,70,.14), transparent 56%), var(--mk-green);
  box-shadow: 0 25px 45px rgba(3,42,43,.14);
}
.mk-bounds__paper::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px;
  border: 1px solid rgba(226,182,95,.16);
  border-radius: inherit;
  pointer-events: none;
}
.mk-bounds__plot-head, .mk-bounds__plot-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
  font-size: .65rem;
  line-height: 1.6;
  color: #b5c8bd;
}
.mk-bounds__plot-head { padding: 1rem .6rem .2rem; }
.mk-bounds__plot-head > span:first-child {
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .6rem;
}
.mk-bounds__plot-count {
  color: #abc0b5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-bounds__plot-count b { color: var(--mk-gold-2); font-weight: 500; }
.mk-bounds__plot-foot { border-top: 1px solid rgba(226,182,95,.15); padding-top: .9rem; }
.mk-bounds__bearing {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--mk-gold-2);
}
.mk-bounds__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: perspective(850px) rotateX(28deg) rotateZ(-12deg) scale(.99);
  transform-origin: 50% 52%;
  transition: transform 550ms var(--mk-ease);
}
.mk-bounds__shadow { fill: #011c1c; opacity: .5; }
.mk-bounds__stratum {
  fill: url(#mkTerrainDepth);
  stroke: #557363;
  stroke-width: .5;
}
.mk-bounds__stratum--deep { fill: #183a34; stroke: #315347; }
.mk-bounds__field { fill: url(#mkTerrainGround); }
.mk-bounds__contours {
  stroke: #9eaf87;
  stroke-opacity: .36;
  stroke-width: 1;
}
.mk-bounds__trail {
  fill: none;
  stroke: #cdc6a2;
  stroke-width: 4;
  stroke-opacity: .38;
  stroke-linecap: round;
}
.mk-bounds__side {
  fill: none;
  stroke: #abc0a1;
  stroke-opacity: .35;
  stroke-width: 1.5;
}
.mk-bounds__edge {
  fill: none;
  stroke: var(--mk-gold-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--mk-len, 0);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 400ms var(--mk-ease), opacity 240ms;
}
.mk-bounds__vertex {
  fill: var(--mk-green);
  stroke: var(--mk-gold-2);
  stroke-width: 2;
  transition: fill 240ms;
}
.mk-bounds.is-enhanced .mk-bounds__edge { stroke-dashoffset: var(--mk-len, 0); }
.mk-bounds.is-enhanced .mk-bounds__edge.is-on { stroke-dashoffset: 0; }
.mk-bounds.is-enhanced .mk-bounds__edge.is-current { stroke-width: 4; }
.mk-bounds.is-enhanced .mk-bounds__vertex.is-on { fill: var(--mk-gold-2); }
.mk-bounds__core {
  position: absolute;
  inset: 1rem 0 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.mk-bounds__core-item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  max-width: 70%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms, transform 280ms var(--mk-ease);
  text-align: center;
}
.mk-bounds__core-item.is-on { opacity: 1; transform: none; }
.mk-bounds__core-item i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mk-green);
  border: 1px solid rgba(226,182,95,.45);
  box-shadow: 0 12px 24px rgba(3,42,43,.25);
  color: var(--mk-gold-2);
  font-size: 1.3rem;
}
.mk-bounds__core-item b {
  font-family: var(--mk-font-display);
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--mk-white);
  text-shadow: 0 2px 8px var(--mk-green);
  overflow-wrap: anywhere;
}
.mk-bounds__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-bounds__item {
  position: relative;
  padding: 2rem 0 2rem 3.2rem;
  border-top: 1px solid rgba(3,42,43,.17);
  scroll-margin-top: calc(var(--mk-header-h) + 1.5rem);
}
.mk-bounds__item::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #a27b32;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--mk-ease);
}
.mk-bounds__item.is-current::after { transform: scaleX(1); }
.mk-bounds__number {
  position: absolute;
  left: 0;
  top: 2rem;
  color: #869588;
  font: 400 1.3rem/1.2 var(--mk-font-display);
  transition: color 200ms;
}
.mk-bounds__item.is-current .mk-bounds__number { color: #946621; }
.mk-bounds__tag {
  display: block;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a776c;
}
.mk-bounds .mk-bounds__name {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .85rem;
  font-size: clamp(1.4rem, 2.45vw, 2.25rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--mk-green);
}
.mk-bounds__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #c8d0c3;
  color: #727f6f;
  background: transparent;
  font-size: 1rem;
  transition: background-color 220ms, border-color 220ms, color 220ms, transform 240ms var(--mk-ease);
}
.mk-bounds__item.is-current .mk-bounds__icon {
  background: var(--mk-green);
  border-color: var(--mk-green);
  color: var(--mk-gold-2);
  transform: rotate(-6deg);
}
.mk-bounds .mk-bounds__text {
  margin-top: 1rem;
  max-width: 44ch;
  color: #53615b;
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
@media (min-width: 992px) {
  .mk-bounds .mk-section__head {
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
    align-items: end;
  }
  .mk-bounds .mk-section__head .mk-eyebrow { grid-column: 1 / -1; }
  .mk-bounds__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .mk-bounds.is-focusable .mk-bounds__plot { position: sticky; top: calc(var(--mk-header-h) + 2rem); }
  .mk-bounds__paper { padding: 1.8rem; }
  .mk-bounds__item {
    min-height: 34svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.4rem 0 2.4rem 4rem;
  }
  .mk-bounds__number { top: 2.4rem; font-size: 1.75rem; }
}
@media (min-width: 992px) and (max-height: 760px) {
  .mk-bounds__paper { padding: 1.2rem; }
  .mk-bounds__svg { max-height: 370px; }
}

/* Equipo: las fotografías originales se mantienen a color. La
   entrada pertenece al artículo y el hover solo mueve el marco. */
.mk-team { padding-block: clamp(4rem, 7vw, 7rem); }
.mk-team .mk-section__head { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.mk-team .mk-section__head .mk-lead { margin: 1.1rem auto 0; max-width: 43rem; }
.mk-team__grids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.1rem;
}
.mk-team__grid { display: contents; }
.mk-team__member {
  position: relative;
  min-width: 0;
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--mk-ease), transform 420ms var(--mk-ease);
  transition-delay: var(--mk-delay, 0s);
}
.mk-team.is-enhanced .mk-team__member:not(.mk-visible) { opacity: 0; transform: translateY(18px); }
.mk-team__frame {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(3,42,43,.08);
  border-radius: 14px 14px 5px 5px;
  overflow: hidden;
  background: var(--mk-green-soft);
  box-shadow: 0 8px 18px rgba(3,42,43,.055);
  transform-origin: 50% 80%;
  transition: transform 280ms var(--mk-ease);
}
.mk-team__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transition: transform 400ms var(--mk-ease);
}
.mk-team__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3,42,43,.12), transparent 26%);
  pointer-events: none;
}
.mk-team__corner {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(215,164,70,.8);
  border-bottom: 1px solid rgba(215,164,70,.8);
  opacity: 0;
  transform: translate(-3px,-3px);
  transition: opacity 240ms, transform 280ms var(--mk-ease);
  pointer-events: none;
}
.mk-team__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mk-green);
  font: 400 2.4rem/1 var(--mk-font-display);
}
.mk-team__body {
  position: relative;
  padding: 1rem 0 .85rem;
  border-bottom: 1px solid var(--mk-line);
}
.mk-team__body::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--mk-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--mk-ease);
}
.mk-team .mk-team__name {
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--mk-green);
  overflow-wrap: anywhere;
}
.mk-team .mk-team__role {
  margin-top: .4rem;
  color: var(--mk-earth);
  font-size: .8rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.mk-team__member:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 5px;
  border-radius: 14px;
}
.mk-team__member:focus-visible .mk-team__frame { transform: translateY(-4px); }
.mk-team__member:focus-visible .mk-team__body::after { transform: scaleX(1); }
.mk-team__member:focus-visible .mk-team__corner { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .mk-creed__nav button:hover {
    color: var(--mk-gold-2);
    background: rgba(215,164,70,.1);
    border-color: var(--mk-gold);
  }
  .mk-team__member:hover .mk-team__frame { transform: perspective(1000px) translateY(-5px) rotateX(1deg); }
  .mk-team__member:hover .mk-team__photo { transform: scale(1.025); }
  .mk-team__member:hover .mk-team__corner { opacity: 1; transform: none; }
  .mk-team__member:hover .mk-team__body::after { transform: scaleX(1); }
}
@media (min-width: 600px) {
  .mk-team__grids { display: block; }
  .mk-team__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.4rem;
  }
  .mk-team__grid + .mk-team__grid { margin-top: 2rem; }
  .mk-team .mk-team__name { font-size: 1.14rem; }
  .mk-team__grid--lead-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 38rem;
    margin-inline: auto;
  }
}
@media (min-width: 992px) {
  .mk-team__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.2rem 1.5rem; }
  .mk-team__grid + .mk-team__grid { margin-top: 2.6rem; }
  .mk-team__grid--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 56rem;
    margin-inline: auto;
    gap: 1.8rem;
  }
  .mk-team__grid--lead-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 38rem; }
  .mk-team__grid--lead .mk-team__frame { border-radius: 18px 18px 5px 5px; }
  .mk-team .mk-team__grid--lead .mk-team__name { font-size: 1.3rem; }
  .mk-team .mk-team__grid--lead .mk-team__role { font-size: .87rem; }
}

/* Cierre: cordillera fotográfica con profundidad atmosférica.
   El relieve es una imagen WebP de 57 KB; no requiere WebGL. */
.mk-invite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mk-green);
  text-align: center;
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(12rem, 19vw, 20rem);
  color: var(--mk-white);
}
.mk-invite__landscape {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mk-invite__ridge {
  position: absolute;
  bottom: -2rem;
  left: -4%;
  width: 108%;
  max-width: none !important;
  height: auto;
  min-height: 58%;
  object-fit: cover;
  object-position: center bottom;
  mask-image: linear-gradient(transparent, #000 24%);
}
.mk-invite__mist {
  position: absolute;
  inset: 35% -10% -15%;
  background: radial-gradient(ellipse at 48% 52%, rgba(164,185,154,.11), transparent 59%);
}
.mk-invite__inner {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
}
.mk-invite .mk-invite__eyebrow { color: var(--mk-gold-2); justify-content: center; }
.mk-invite__eyebrow::before { background: var(--mk-gold); }
.mk-invite .mk-invite__title {
  color: var(--mk-white);
  font-size: clamp(2.1rem, 4.1vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 1.1rem auto 0;
  max-width: 17ch;
  text-wrap: balance;
}
.mk-invite .mk-invite__text {
  color: #bdceca;
  max-width: 57ch;
  margin: 1.5rem auto 0;
  font-size: 1.03rem;
  line-height: 1.75;
  text-wrap: pretty;
}
.mk-invite__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.mk-invite .mk-invite__btn {
  gap: .75rem;
  min-width: 230px;
  min-height: 54px;
  max-width: 100%;
  border-radius: 9px;
  font-size: .95rem;
  padding: 1rem 1.35rem;
  white-space: normal;
  line-height: 1.3;
  box-shadow: 0 7px 22px rgba(3,23,23,.24);
}
.mk-invite__btn > i:first-child { font-size: 1.2rem; }
.mk-invite .mk-invite__btn.mk-btn--gold { color: var(--mk-green) !important; }
.mk-invite__btn .mk-invite__arrow {
  font-size: .8rem;
  margin-left: .6rem;
  transform: rotate(45deg);
  transition: transform 200ms var(--mk-ease);
}
.mk-invite .mk-invite__phone {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  color: #d5e0da !important;
  min-height: 48px;
  padding: .75rem .2rem;
  font-size: .9rem;
  border-bottom: 1px solid rgba(213,224,218,.35);
  transition: border-color 200ms, color 200ms;
}
.mk-invite__phone i { font-size: .8rem; color: var(--mk-gold-2); }
.mk-invite .mk-invite__note {
  margin-top: 1.4rem;
  font-size: .72rem;
  line-height: 1.7;
  color: #a8bfb8;
  letter-spacing: .025em;
}
.mk-invite__note i { margin-right: .35rem; color: var(--mk-gold-2); }
@media (hover: hover) and (pointer: fine) {
  .mk-invite__btn:hover .mk-invite__arrow { transform: rotate(45deg) translateY(-2px); }
  .mk-invite .mk-invite__phone:hover { color: var(--mk-gold-2) !important; border-color: var(--mk-gold-2); }
}
.mk-invite__btn:active { transform: scale(.98); }
.mk-creed__nav button:focus-visible,
.mk-invite__actions a:focus-visible { outline: 2px solid var(--mk-gold-2); outline-offset: 4px; }
.mk-bounds__item:focus-visible { outline: 2px solid var(--mk-green-2); outline-offset: 6px; }
.mk-creed:not(.is-enhanced) .mk-creed__nav { display: none; }
.mk-bounds:not(.is-enhanced) [data-mk-reveal],
.mk-team:not(.is-enhanced) [data-mk-reveal],
.mk-invite:not(.is-enhanced) [data-mk-reveal] { opacity: 1; transform: none; }
@media (max-width: 575px) {
  .mk-creed__panel { padding: 1.4rem; }
  .mk-creed__window { height: auto; margin-top: 1.2rem; }
  .mk-creed .mk-creed__stack { margin-top: .75rem; }
  .mk-creed__word { font-size: 2.7rem; }
  .mk-creed__nav { gap: .3rem; }
  .mk-creed__nav button { font-size: .72rem; }
  .mk-creed__nav button span { display: none; }
  .mk-creed__block { grid-template-columns: 1.9rem minmax(0,1fr); gap: .5rem; }
  .mk-creed .mk-creed__text { font-size: .96rem; line-height: 1.75; }
  .mk-bounds__paper { padding: 1.1rem; }
  .mk-bounds__plot-head { padding-top: 1.1rem; }
  .mk-bounds__plot-foot { font-size: .6rem; }
  .mk-bounds__core-item i {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .mk-bounds__core-item b { font-size: 1.1rem; }
  .mk-bounds__item { padding-left: 2.5rem; }
  .mk-bounds .mk-bounds__name { gap: .6rem; font-size: 1.45rem; }
  .mk-bounds__icon {
    width: 34px;
    height: 34px;
    font-size: .9rem;
  }
  .mk-bounds .mk-bounds__text { font-size: .96rem; }
  .mk-team .mk-team__name { font-size: 1.02rem; }
  .mk-team .mk-team__role { font-size: .75rem; }
  .mk-invite { padding-top: 3.6rem; padding-bottom: 11rem; }
  .mk-invite .mk-invite__title { font-size: 2.35rem; }
  .mk-invite .mk-invite__text { font-size: .97rem; margin-top: 1.25rem; }
  .mk-invite__actions { gap: .5rem; margin-top: 1.5rem; }
  .mk-invite .mk-invite__btn { width: min(100%, 320px); min-width: 0; }
  .mk-invite__phone { flex-basis: 75%; }
  .mk-invite__ridge {
    width: 200%;
    left: -50%;
    min-height: 39%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-creed *, .mk-bounds *, .mk-team *, .mk-invite *,
  .mk-creed *::before, .mk-creed *::after, .mk-bounds *::after, .mk-team *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
  .mk-creed__copy, .mk-creed__scene, .mk-creed__word, .mk-bounds__core-item,
  .mk-team__member, .mk-team__frame, .mk-team__photo, .mk-invite__ridge, .mk-invite__mist, .mk-invite__inner { transform: none !important; }
  .mk-team.is-enhanced .mk-team__member, .mk-invite__inner { opacity: 1 !important; }
  .mk-bounds__svg { transform: none !important; }
}

/* =========================================================
   CONTACTO — La portada
   =========================================================
   Misma factura que las de referidos y testimonios: la
   fotografía marca el alto con aspect-ratio y el texto va en
   la tarjeta de vidrio de la ficha de proyecto, reutilizando
   sus clases. Las tres proporciones son las hermanas del
   sitio: 1920/815, 16/9 y 1080/2160.
   ========================================================= */

.mk-contact-hero { position: relative; background: var(--mk-green); }

.mk-contact-hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 815;
  background: var(--mk-green);
}

/* object-fit: cover recorta pero nunca deforma */
.mk-contact-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Un velo solo en el tramo bajo: no tiñe el paisaje, pero la
   tarjeta se lee igual sobre el cielo claro que sobre el
   bosque en sombra. */
.mk-contact-hero__veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(3, 42, 43, .6) 0%, rgba(3, 42, 43, .3) 42%, rgba(3, 42, 43, 0) 100%);
  pointer-events: none;
}

.mk-contact-hero__id {
  position: absolute;
  left: 0; right: 0;
  bottom: 3.4rem;
  z-index: 3;
}

.mk-contact-hero__text { max-width: 40rem; }

.mk-contact-hero__badge {
  background: var(--mk-white);
  color: var(--mk-green);
  white-space: normal;
  line-height: 1.35;
}

.mk-contact-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .15rem 0 1.35rem;
  color: rgba(255, 255, 255, .88);
  font-size: 1rem;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(3, 42, 43, .45);
}

.mk-contact-hero__lead i { color: var(--mk-gold); margin-top: .28rem; flex: 0 0 auto; }

.mk-contact-hero__text > *:nth-child(4) { animation-delay: .24s; }

.mk-contact-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* =========================================================
   CONTACTO — Los canales y el formulario
   Directorio de contacto y formulario compacto, sin cambiar
   los campos ni el comportamiento del componente compartido.
   ========================================================= */
.mk-reach {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background: var(--mk-sand);
  scroll-margin-top: var(--mk-header-h);
}
.mk-reach__grid { display: grid; gap: 2.5rem; align-items: start; }
.mk-reach__side, .mk-reach__form { min-width: 0; }
.mk-reach .mk-section__head { margin-bottom: 1.2rem; }
.mk-reach .mk-section__head .mk-title {
  margin: .85rem 0 .75rem;
  max-width: none;
  font-size: clamp(1.6rem, 2.15vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--mk-green);
  text-wrap: wrap;
}
.mk-reach .mk-section__head .mk-lead { margin: 0; max-width: 49ch; font-size: .96rem; line-height: 1.65; color: var(--mk-earth); }
.mk-reach .mk-reach__form-link {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  margin-top: .5rem;
  color: var(--mk-green) !important;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mk-gold);
  text-underline-offset: 5px;
}
.mk-reach__form-link i { font-size: .7rem; }
.mk-reach__channels { display: grid; }
.mk-reach .mk-reach__channel {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 12px;
  column-gap: .9rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-green) !important;
}
.mk-reach__channel--phones .mk-reach__body { grid-column: 2 / -1; }
.mk-reach__icon { display: flex; align-items: center; justify-content: center; min-height: 25px; color: #886521; font-size: 1rem; }
.mk-reach__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mk-reach__label { color: var(--mk-earth); font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.mk-reach__value { font-size: .96rem; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.mk-reach__phones { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.mk-reach .mk-reach__phones a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--mk-green) !important; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.mk-reach .mk-reach__chat { display: inline-flex; align-items: center; align-self: flex-start; gap: .55rem; min-height: 44px; color: var(--mk-green) !important; font-size: .83rem; font-weight: 500; }
.mk-reach__chat > i:first-child { font-size: 1rem; }
.mk-reach__chat > i:last-child, .mk-reach__arrow { font-size: .68rem; transition: transform 180ms var(--mk-ease); }
.mk-reach__arrow { margin-top: 1.1rem; color: #708278; }
.mk-reach__extra { padding-top: 1.15rem; }
.mk-reach .mk-reach__hours { display: flex; gap: .7rem; margin: 0; font-size: .8rem; line-height: 1.7; color: var(--mk-earth); }
.mk-reach__hours i { color: #886521; margin-top: .3rem; }
.mk-reach__hours strong { color: var(--mk-green); font-weight: 500; }
.mk-reach__socials { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .65rem; }
.mk-reach__socials > .mk-reach__label { font-size: .73rem; }
.mk-reach__socials .mk-socials { justify-content: flex-start; gap: .2rem; }
.mk-reach .mk-socials a { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--mk-green) !important; font-size: 1rem; transition: background-color 180ms; }

.mk-reach__form {
  background: var(--mk-white);
  border: 1px solid #dce2db;
  border-top: 3px solid var(--mk-gold);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(3,42,43,.07);
  scroll-margin-top: calc(var(--mk-header-h) + 1rem);
}
.mk-reach .mk-form-card { padding: 1.6rem; background: transparent; border: 0; box-shadow: none; border-radius: inherit; }
.mk-reach .mk-form-card h3 {
  max-width: none;
  margin: 0 0 .5rem;
  color: var(--mk-green);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: wrap;
}
.mk-reach .mk-form-card > p { max-width: none; color: var(--mk-earth); font-size: .88rem; line-height: 1.55; margin: 0 0 1.1rem; }
.mk-reach .mk-mode { margin-bottom: 1.15rem; padding: .2rem; gap: .2rem; border-radius: 8px; background: var(--mk-green-soft); }
.mk-reach .mk-mode label { min-height: 44px; padding: .5rem; border-radius: 6px; color: var(--mk-earth); font-size: .87rem; font-weight: 500; transition: color 160ms, background-color 160ms; }
.mk-reach .mk-mode label:has(input:checked) { background: var(--mk-green); color: var(--mk-white); }
.mk-reach .mk-mode label:has(input:focus-visible) { outline: 2px solid #886521; outline-offset: 2px; transition: none; }
.mk-reach .mk-field { margin-bottom: .85rem; }
.mk-reach .mk-field label { margin-bottom: .35rem; color: var(--mk-green); font-size: .8rem; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.mk-reach .mk-optional { font-size: .74rem; color: var(--mk-earth); }
.mk-reach .mk-form-card .row { align-items: flex-end; }
.mk-reach .mk-field input, .mk-reach .mk-field textarea {
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid #bac8be;
  border-radius: 6px;
  background: var(--mk-white);
  color: var(--mk-green);
  font-size: 1rem;
  line-height: 1.4;
  scroll-margin-top: calc(var(--mk-header-h) + 1.5rem);
  transition: border-color 160ms, box-shadow 160ms;
}
.mk-reach .mk-field textarea { min-height: 82px; }
.mk-reach .mk-field input::placeholder, .mk-reach .mk-field textarea::placeholder { color: #637067; opacity: 1; font-size: .87rem; }
.mk-reach .mk-field input:focus, .mk-reach .mk-field textarea:focus { border-color: var(--mk-green-2); box-shadow: 0 0 0 3px rgba(11,74,76,.12); }
.mk-reach .mk-field input:focus-visible, .mk-reach .mk-field textarea:focus-visible { transition: none; }
.mk-reach .mk-form-card .mk-btn {
  min-height: 48px;
  padding: .8rem 1rem;
  gap: .7rem;
  justify-content: center;
  border-radius: 7px;
  color: var(--mk-green) !important;
  font-size: .94rem;
  line-height: 1.4;
  white-space: normal;
  transition: background-color 160ms;
}
.mk-reach .mk-form-card .mk-btn:hover { transform: none; }
.mk-reach .mk-form-card .mk-btn:disabled { opacity: .7; cursor: wait; }
.mk-reach .mk-form-card > .mk-form-note { margin: .8rem 0 0; color: var(--mk-earth); font-size: .72rem; line-height: 1.55; }
.mk-reach a:focus-visible, .mk-reach button:focus-visible, .mk-reach__form:focus-visible { outline: 2px solid #886521; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .mk-reach a.mk-reach__channel:hover .mk-reach__arrow, .mk-reach__chat:hover > i:last-child { transform: translateX(3px); }
  .mk-reach .mk-reach__phones a:hover, .mk-reach .mk-reach__chat:hover { text-decoration: underline; text-underline-offset: 4px; }
  .mk-reach .mk-socials a:hover { background: var(--mk-green-soft); transform: none; }
  .mk-reach .mk-form-card .mk-btn:hover:not(:disabled) { background: var(--mk-gold-2); }
}
@media (min-width: 992px) {
  .mk-reach__grid { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(2rem,5vw,4.5rem); }
  .mk-reach__side { padding-top: .65rem; }
  .mk-reach .mk-reach__form-link { display: none; }
}
@media (max-width: 991px) {
  .mk-reach__grid { max-width: 44rem; margin-inline: auto; }
}
@media (max-width: 575px) {
  .mk-reach__grid { gap: 2rem; }
  .mk-reach .mk-reach__channel { grid-template-columns: 24px minmax(0,1fr) 10px; gap: .65rem; padding-block: 1rem; }
  .mk-reach__value { font-size: .9rem; }
  .mk-reach .mk-reach__phones a { font-size: .94rem; }
  .mk-reach__phones { column-gap: .8rem; }
  .mk-reach .mk-form-card { padding: 1.2rem; }
  .mk-reach .mk-form-card h3 { font-size: 1.3rem; }
  .mk-reach .mk-form-card > p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-reach *, .mk-reach *::before, .mk-reach *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mk-reach [data-mk-reveal], .mk-reach i, .mk-reach .mk-btn, .mk-reach .mk-socials a { transform: none !important; }
  .mk-reach [data-mk-reveal] { opacity: 1 !important; }
}


/* =========================================================
   CONTACTO — La oficina
   =========================================================
   La tarjeta se monta SOBRE el mapa en vez de ponerse debajo:
   así la sección se lee como un solo objeto y no como "un
   mapa y luego una lista".

   El iframe guardado en el CMS no lleva width ni height —el
   saneo de /admin/empresa se los quita—, así que las medidas
   las pone .mk-office__map.
   ========================================================= */

.mk-office__frame { position: relative; }

.mk-office__map {
  border-radius: var(--mk-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 22px 54px rgba(3, 42, 43, .38);
  background: var(--mk-green-2);
}

.mk-office__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.mk-office__map--empty { display: none; }

.mk-office__card {
  position: relative;
  margin: -3rem 1rem 0;
  padding: 1.5rem 1.35rem;
  background: var(--mk-white);
  border-radius: var(--mk-radius);
  box-shadow: 0 24px 60px rgba(3, 42, 43, .42);
}

.mk-office__badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mk-gold);
}

/* doble clase a propósito: .mk-scope h3 del reset de ámbito
   (0,1,1) gana a una clase suelta, y el titular salía blanco
   sobre la tarjeta blanca */
.mk-office .mk-office__name {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  color: var(--mk-ink);
  margin: .35rem 0 1rem;
}

.mk-office__list { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .8rem; }

.mk-office__list li { display: flex; align-items: flex-start; gap: .7rem; color: var(--mk-ink-soft); line-height: 1.5; }

.mk-office__list i { color: var(--mk-gold); margin-top: .22rem; flex: 0 0 auto; }

.mk-office .mk-office__list a { color: var(--mk-ink) !important; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .3s var(--mk-ease); }
.mk-office .mk-office__list a:hover { border-bottom-color: var(--mk-gold); }

.mk-office__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mk-office__actions .mk-btn { flex: 1 1 12rem; justify-content: center; }

@media (min-width: 768px) {
  .mk-office__map { aspect-ratio: 16 / 9; }
  .mk-office__card { margin: -4rem 2rem 0; padding: 1.7rem 1.6rem; }
}

@media (min-width: 992px) {

  /* el mapa se corre a la derecha y la tarjeta se apoya sobre
     su borde izquierdo */
  .mk-office__map { width: 74%; margin-left: auto; aspect-ratio: 16 / 10; }

  .mk-office__card {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    min-width: 20rem;
    margin: 0;
    padding: 1.9rem 1.8rem;
  }

  .mk-office__actions .mk-btn { flex: 1 1 100%; }

}

@media (min-width: 1200px) {
  .mk-office__card { width: 32%; padding: 2.1rem 2rem; }
  .mk-office__actions .mk-btn { flex: 1 1 auto; }
}

/* ---- Contacto: portada en tableta y celular ---- */

@media (max-width: 991px) and (min-width: 768px) {

  /* mismo tramo y misma medida que la cabecera del proyecto */
  .mk-contact-hero__media { aspect-ratio: 16 / 9; }
  .mk-contact-hero__text { max-width: 28rem; }
  .mk-contact-hero__id { bottom: 2.6rem; }

}

@media (max-width: 767px) {

  /*=============================================
  La pieza vertical de 1080x2160, la misma medida que el slide
  del inicio y que la ficha de proyecto.

  Pero aquí la portada lleva encima una tarjeta con dos
  botones, y a 1:2 la portada mide más que la pantalla: la
  tarjeta quedaba cortada por abajo y la burbuja flotante de
  WhatsApp (58px a 22px del borde) se sentaba justo sobre el
  botón de WhatsApp de la tarjeta.

  Así que el alto se acota a la pantalla menos un dedo: la
  imagen conserva su proporción —la recorta object-fit, no se
  deforma—, la tarjeta entra entera, la burbuja queda por
  debajo y encima asoma el principio de la sección siguiente.
  El alto va dos veces a propósito: donde no haya svh manda la
  primera.
  =============================================*/
  .mk-contact-hero__media {
    aspect-ratio: 1080 / 2160;
    max-height: calc(100vh - var(--mk-header-h) - 3.5rem);
    max-height: calc(100svh - var(--mk-header-h) - 3.5rem);
  }

  .mk-contact-hero__veil { height: 74%; }
  .mk-contact-hero__id { bottom: 2.2rem; }
  .mk-contact-hero__text { max-width: none; }

  .mk-contact-hero__badge { font-size: .6rem; letter-spacing: .04em; }
  .mk-contact-hero__lead { font-size: .92rem; margin-bottom: 1.1rem; }

  /* apilados y a todo el ancho: son las dos acciones de la
     página y el pulgar tiene que alcanzarlas sin apuntar */
  .mk-contact-hero__actions { width: 100%; }
  .mk-contact-hero__actions .mk-btn { width: 100%; justify-content: center; }

}

/* =========================================================
   BLOG — La portada y su buscador
   =========================================================
   Misma factura que las portadas de referidos, testimonios y
   contacto: la fotografía marca el alto con aspect-ratio y el
   mensaje va en la tarjeta de vidrio de la ficha de proyecto,
   reutilizando sus clases.

   Lo propio de esta portada es que lleva el buscador apoyado en
   su borde inferior, con el mismo recurso que el filtro de
   proyectos sobre el slide del inicio (.mk-herostrip__search):
   posición absoluta anclada por abajo, ancho del contenedor y
   clics solo en la barra. Absoluto y no sticky: se va con la
   portada al hacer scroll.
   ========================================================= */

.mk-blog-hero { position: relative; background: var(--mk-green); }

.mk-blog-hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 815;
  background: var(--mk-green);
}

/* object-fit: cover recorta pero nunca deforma */
.mk-blog-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* El velo cubre más que en las otras portadas porque aquí abajo
   no hay solo una tarjeta: hay también una caja blanca de
   búsqueda, y el paisaje de esta foto es claro. */
.mk-blog-hero__veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78%;
  background: linear-gradient(to top, rgba(3, 42, 43, .74) 0%, rgba(3, 42, 43, .4) 44%, rgba(3, 42, 43, 0) 100%);
  pointer-events: none;
}

/*=============================================
La tarjeta y el buscador cuelgan del MISMO bloque, anclado al
borde inferior, y se apilan. Anclarlos por separado obligaba a
adivinar cuánto mide la barra de búsqueda —que en el celular
crece a dos filas— y acababan pisándose.
=============================================*/
.mk-blog-hero__id {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem);
  z-index: 3;
}

.mk-blog-hero__text { max-width: 44rem; }

.mk-blog-hero__badge {
  background: var(--mk-white);
  color: var(--mk-green);
}

.mk-blog-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .15rem 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 1rem;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(3, 42, 43, .45);
}

.mk-blog-hero__lead i { color: var(--mk-gold); margin-top: .28rem; flex: 0 0 auto; }

/* ---- el buscador dentro de la portada ---- */

/* va dentro del contenedor, así que ya queda a plomo con las
   tarjetas de artículo que vienen debajo: aquí solo separa */
.mk-blog-hero__search { margin-top: clamp(1.1rem, .9rem + 1vw, 1.9rem); }

.mk-blog-hero__search .mk-catalog__bar { margin-bottom: 0; }

/*=============================================
La caja reutiliza los estilos del filtro de proyectos, pero
aquel tiene tres columnas (buscar · criterios · acción) y este
solo dos, porque no hay criterios que plegar.

Y hay una regla suya que aquí estorba: por debajo de 1200px el
filtro de proyectos ESCONDE su botón de buscar, porque allí lo
sustituye el botón "Filtros". Aquí no hay tal botón, así que
sin esta línea el buscador del blog se quedaría sin acción
visible en tabletas y móviles.
=============================================*/

.mk-blog-search .mk-catalog__row { grid-template-columns: minmax(0, 1fr) auto; }

.mk-blog-search .mk-catalog__submit { display: inline-flex; }

/* la X de limpiar es un <a> y no un <button>, para que funcione
   sin JavaScript; el color hay que ganarlo con doble clase por
   el a{color:inherit !important} de template.css */
.mk-blog-search .mk-blog-search__clear { color: var(--mk-green) !important; }
.mk-blog-search .mk-blog-search__clear:hover { background: var(--mk-green); color: var(--mk-white) !important; }

/* =========================================================
   BLOG — El listado
   =========================================================
   La rejilla y la tarjeta ya existían (.mk-blog-grid y
   .mk-post): aquí solo se ajusta el aire, porque el buscador
   vive dentro de la portada y la sección no necesita el respiro
   completo por arriba.
   ========================================================= */

.mk-blog-list { padding-top: clamp(2.4rem, 2rem + 1.6vw, 3.6rem); }

.mk-blog-list .mk-blog-filters { margin-bottom: 1.1rem; }

.mk-blog-count { margin-bottom: clamp(1.4rem, 1.1rem + 1vw, 2rem); }

/* =========================================================
   Paginador
   =========================================================
   Vive en modules/meka/pager.php y lo comparten el Blog y el
   catálogo de Proyectos. El primero navega con enlaces; el
   segundo actualiza las páginas al filtrar en el navegador.
   ========================================================= */

.mk-pager {
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .5rem;
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  background: rgba(245, 241, 232, 0.72);
  box-shadow: 0 8px 24px rgba(3, 42, 43, 0.07);
}

.mk-pager__nums {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* doble clase + !important: la regla global de template.css
   a{color:inherit !important} gana a una clase suelta */
.mk-pager .mk-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .6rem;
  border-radius: 12px;
  border: 1px solid var(--mk-line);
  background: var(--mk-white);
  color: var(--mk-ink) !important;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--mk-ease);
}

.mk-pager a.mk-pager__num:hover,
.mk-pager button.mk-pager__num:hover,
.mk-pager a.mk-pager__num:focus-visible {
  border-color: var(--mk-gold);
  color: var(--mk-green) !important;
  transform: translateY(-2px);
}
.mk-pager button.mk-pager__num:focus-visible {
  border-color: var(--mk-gold);
  color: var(--mk-green) !important;
  transform: translateY(-2px);
}

.mk-pager .mk-pager__num.is-current {
  background: var(--mk-green);
  border-color: var(--mk-green);
  color: var(--mk-white) !important;
  box-shadow: 0 6px 16px rgba(3, 42, 43, 0.2);
  cursor: default;
}

.mk-pager__gap { color: var(--mk-earth); padding: 0 .15rem; }

.mk-pager .mk-pager__step {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  background: var(--mk-white);
  font-family: var(--mk-font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mk-green) !important;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--mk-ease);
}

.mk-pager a.mk-pager__step:hover,
.mk-pager button.mk-pager__step:hover,
.mk-pager a.mk-pager__step:focus-visible {
  background: var(--mk-gold);
  border-color: var(--mk-gold);
  color: var(--mk-green) !important;
  transform: translateY(-2px);
}
.mk-pager button.mk-pager__step:focus-visible {
  background: var(--mk-gold);
  border-color: var(--mk-gold);
  color: var(--mk-green) !important;
  transform: translateY(-2px);
}

/* los extremos no se esconden cuando no hay a dónde ir: se
   apagan. Así el paginador no cambia de ancho al pasar de
   página y el pulgar no se encuentra el botón movido. */
.mk-pager .mk-pager__step.is-off {
  color: var(--mk-earth) !important;
  background: transparent;
  border-color: transparent;
  opacity: .42;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 767px) {

  /*=============================================
  La pieza vertical de 1080x2160, la misma medida y la misma
  proporción que el slide del inicio en el celular.

  Igual que en la portada de contacto, el alto se acota a la
  pantalla menos un dedo: a 1:2 la portada mide más que el
  visor, y aquí abajo hay una caja de búsqueda que no puede
  quedar ni cortada ni debajo de la burbuja flotante de
  WhatsApp (58px a 22px del borde). El alto va dos veces a
  propósito: donde no haya svh manda la primera.
  =============================================*/
  .mk-blog-hero__media {
    aspect-ratio: 1080 / 2160;
    max-height: calc(100vh - var(--mk-header-h) - 3.5rem);
    max-height: calc(100svh - var(--mk-header-h) - 3.5rem);
  }

  .mk-blog-hero__veil { height: 66%; }

  .mk-blog-hero__text { max-width: none; }

  .mk-blog-hero__badge { font-size: .6rem; letter-spacing: .04em; }
  .mk-blog-hero__lead { font-size: .92rem; }

}

@media (max-width: 480px) {

  /* el campo se lleva la línea entera y el botón la siguiente:
     compartidas, al botón no le queda sitio para su texto */
  .mk-blog-search .mk-catalog__submit {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  /* solo las flechas: los rótulos se comen el ancho que
     necesitan los números */
  .mk-pager .mk-pager__step span { display: none; }
  .mk-pager .mk-pager__step { padding: 0 .8rem; }
  .mk-pager { gap: .5rem; }

}

/* ============================================================
   LIBRO DE RECLAMACIONES  ·  /libro-de-reclamaciones

   Rediseño con el libro de Centenario como referencia de
   estructura: cabecera con título y fecha, indicador de tres
   etapas con icono y estado, y un formulario por bloques.

   TODO cuelga de .mk-book, .mk-book-head o .mk-book-steps.
   .mk-field y .mk-form-card son compartidos con los demás
   formularios del sitio, y esos no cambian ni un píxel: es la
   misma técnica que .mk-reach en Contacto.

   Dos trampas que explican la especificidad de abajo:
   - .mk-scope p / ul / h2 (0,1,1) fijan margen, lista y fuente,
     así que las reglas de esos elementos llevan dos clases.
   - .mk-field input (0,1,1) le da a TODO input del campo
     anchura completa, borde, relleno y, al enfocar, una sombra
     de 4px. En los radios y la casilla eso pintaba un recuadro
     alrededor del punto. Aquí los campos de texto se estilan
     con :where() (especificidad baja y controlada) y radios y
     casilla se dibujan aparte, con su propio foco.
   ------------------------------------------------------------ */

/* --- Cabecera: título y fecha, nada más --------------------- */

.mk-book-head {
  background: var(--mk-white);
  border-bottom: 1px solid var(--mk-line);
  padding: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem) 0 clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  text-align: center;
}

.mk-book-head__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mk-book-head .mk-book-head__title {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
  letter-spacing: -0.01em;
  color: var(--mk-green);
}

/* filete dorado entre el título y la fecha */
.mk-book-head .mk-book-head__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 999px;
  background: var(--mk-gold);
}

.mk-book-head .mk-book-head__date {
  margin-top: .95rem;
  font-size: 1rem;
  color: var(--mk-ink-soft);
}

.mk-book-head__date time { font-variant-numeric: tabular-nums; }

/* --- La sección y la tarjeta -------------------------------- */

.mk-book.mk-section { padding-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }

/* una sola columna centrada: un trámite se rellena mejor sin
   nada compitiendo al lado */
.mk-book__container { max-width: 880px; }

.mk-book .mk-book__form,
.mk-book .mk-book__success {
  padding: clamp(1.3rem, .9rem + 2vw, 2.6rem);
  border: 1px solid rgba(3, 42, 43, .06);
  box-shadow: 0 18px 50px rgba(3, 42, 43, .10);
}

/* --- Indicador de etapas ------------------------------------ */

.mk-book-steps {
  margin: 0 0 1.4rem;
  scroll-margin-top: calc(var(--mk-header-h) + 16px);
}

.mk-book .mk-book-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-book-steps__item {
  position: relative;
  display: flex;
  justify-content: center;
}

/* El conector hacia la etapa siguiente. Dos capas: la pista
   gris y el relleno teal, que crece de 0 a 100% al completarse
   la etapa — el mismo degradado de la barra de Referidos. */
.mk-book-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(50% + 36px);
  right: calc(-50% + 36px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mk-green-2), var(--mk-green)) left center / 0% 100% no-repeat, #D5DDDB;
  transition: background-size .5s var(--mk-ease);
}

.mk-book-steps__item.is-done:not(:last-child)::after { background-size: 100% 100%, auto; }

.mk-book .mk-book-steps__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 0 .3rem;
  border: 0;
  border-radius: var(--mk-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: default;
}

.mk-book .mk-book-steps__btn:disabled { opacity: 1; }
.mk-book .mk-book-steps__btn:not(:disabled) { cursor: pointer; }
.mk-book .mk-book-steps__btn:focus-visible { outline: 3px solid rgba(11, 74, 76, .45); outline-offset: 4px; }

.mk-book-steps__dot {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #D5DDDB;
  border-radius: 50%;
  background: var(--mk-white);
  color: #7F8B89;
  font-size: 1.1rem;
  transition: background-color .35s var(--mk-ease), border-color .35s var(--mk-ease), color .35s var(--mk-ease), box-shadow .35s var(--mk-ease);
}

.mk-book-steps__check { display: none; }

.is-current .mk-book-steps__dot {
  border-color: var(--mk-green);
  background: var(--mk-green);
  color: var(--mk-white);
  box-shadow: 0 0 0 6px rgba(3, 42, 43, .12);
}

.is-done .mk-book-steps__dot {
  border-color: var(--mk-green-2);
  background: var(--mk-green-soft);
  color: var(--mk-green);
}

.is-done .mk-book-steps__icon { display: none; }
.is-done .mk-book-steps__check { display: inline-block; }

/* una etapa completada invita a volver */
.mk-book .mk-book-steps__btn:not(:disabled):hover .mk-book-steps__dot { background: var(--mk-white); }

.mk-book-steps__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
}

.mk-book-steps__num {
  font-family: var(--mk-font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}

.mk-book-steps__name {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mk-green);
}

.is-pending .mk-book-steps__name { font-weight: 500; color: var(--mk-ink-soft); }

.mk-book-steps__state {
  margin-top: .3rem;
  padding: .16rem .6rem;
  border: 1px solid #D5DDDB;
  border-radius: 999px;
  background: var(--mk-white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mk-ink-soft);
}

.is-current .mk-book-steps__state { border-color: var(--mk-green); background: var(--mk-green); color: var(--mk-white); }
.is-done .mk-book-steps__state { border-color: transparent; background: var(--mk-green-soft); color: var(--mk-green); }

.mk-book .mk-book-steps__now {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem .8rem;
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(3, 42, 43, .1);
  font-size: .82rem;
  color: var(--mk-ink-soft);
}

.mk-book-steps__now b { color: var(--mk-green); }

/* el nombre de la etapa ya se lee en el indicador; aquí solo
   hace falta cuando el indicador lo esconde (celular) */
.mk-book-steps__now-name { display: none; }

.mk-book-steps__now-pct {
  font-family: var(--mk-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mk-green);
  white-space: nowrap;
}

/* --- Etapas y bloques --------------------------------------- */

/* min-width: un fieldset no encoge por debajo de su contenido
   sin esto, y en el celular desbordaría la tarjeta */
.mk-book__stage {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* la etapa entra desde el lado por el que se avanza (las mismas
   animaciones del asistente de Referidos) */
.mk-book__stage.is-in-next { animation: mkStageNext .42s var(--mk-ease) both; }
.mk-book__stage.is-in-prev { animation: mkStagePrev .42s var(--mk-ease) both; }

.mk-book .mk-book__intro {
  margin-bottom: 1.5rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--mk-ink-soft);
}

.mk-book__group {
  margin-bottom: 1.6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--mk-line);
}

.mk-book__group:last-child,
.mk-book__group:has(+ .mk-book__adaptive[hidden]) {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.mk-book .mk-book__group-title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.15rem;
  font-family: var(--mk-font-body);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mk-green);
}

.mk-book .mk-book__group-title:focus { outline: none; }

/* el mismo círculo de los epígrafes del formulario de Referidos
   (.mk-fieldset__legend span), con un icono en vez del número */
.mk-book__group-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  font-size: .9rem;
}

.mk-book__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.1rem;
}

.mk-book__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Campos ------------------------------------------------- */

.mk-book .mk-field { margin-bottom: 1.15rem; }

.mk-book .mk-field > label[for],
.mk-book .mk-book__label {
  display: block;
  margin-bottom: .42rem;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mk-green);
}

.mk-book .mk-field :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: .72rem .95rem;
  border: 1.5px solid #CCD6D4;
  border-radius: 10px;
  background-color: var(--mk-white);
  color: var(--mk-ink);
  font-family: var(--mk-font-body);
  font-size: 1rem; /* 16px en toda pantalla: iOS no hace zoom al enfocar */
  line-height: 1.4;
  transition: border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease), background-color .2s var(--mk-ease);
}

.mk-book .mk-field :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):hover { border-color: #AEBDBA; }

.mk-book .mk-field :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus {
  outline: none;
  border-color: var(--mk-green-2);
  box-shadow: 0 0 0 3px rgba(11, 74, 76, .14);
}

.mk-book .mk-field ::placeholder { color: #637067; opacity: 1; }

.mk-book .mk-field textarea { min-height: 150px; line-height: 1.55; resize: vertical; }
.mk-book .mk-field textarea[rows="3"] { min-height: 104px; }

/* los desplegables, con flecha propia y un deshabilitado que se
   distingue a la primera */
.mk-book .mk-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230B4A4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 14px 14px;
  text-overflow: ellipsis;
  cursor: pointer;
}

.mk-book .mk-field select:disabled {
  border-style: dashed;
  background-color: #F3F5F4;
  color: #6E7A78;
  cursor: not-allowed;
}

/* estados */
.mk-book .mk-field.is-invalid :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  border-color: #C0392B;
  background-color: #FEF7F6;
}

.mk-book .mk-field.is-invalid :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.mk-book .mk-field.is-valid :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  border-color: var(--mk-green-2);
}

.mk-book .mk-field__error {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .45rem;
  font-size: .83rem;
  font-weight: 600;
  line-height: 1.4;
  color: #C0392B;
}

.mk-book .mk-field__error i { flex: none; margin-top: .16rem; }

.mk-book .mk-field__hint {
  margin-top: .42rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--mk-ink-soft);
}

.mk-book .mk-book__hint-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.mk-book__count {
  flex: none;
  font-family: var(--mk-font-mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.mk-book__count b { color: var(--mk-green); }

/* monto: el símbolo de la moneda dentro del campo */
.mk-book__money { position: relative; max-width: 300px; }

.mk-book__money-prefix {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--mk-green);
  pointer-events: none;
}

.mk-book .mk-book__money input { padding-left: 2.7rem; }

/* --- Radios y casilla, dibujados a medida -------------------

   Se anulan anchura, relleno, borde y sombra de .mk-field input
   —la causa del recuadro— y el foco se integra al diseño: con
   teclado se marca la TARJETA entera (:focus-visible); con el
   ratón o el dedo no aparece nada extra. */

.mk-book .mk-book__radio,
.mk-book .mk-book__checkbox {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #AAB8B5;
  border-radius: 50%;
  background: var(--mk-white);
  box-shadow: none;
  cursor: pointer;
  transition: border-color .2s var(--mk-ease), background-color .2s var(--mk-ease);
}

.mk-book .mk-book__radio::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mk-green);
  transform: scale(0);
  transition: transform .2s var(--mk-ease);
}

.mk-book .mk-book__radio:checked { border-color: var(--mk-green); }
.mk-book .mk-book__radio:checked::before { transform: scale(1); }

.mk-book .mk-book__checkbox { border-radius: 6px; }

.mk-book .mk-book__checkbox::before {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border: solid var(--mk-white);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) scale(0);
  transition: transform .2s var(--mk-ease);
}

.mk-book .mk-book__checkbox:checked { border-color: var(--mk-green); background: var(--mk-green); }
.mk-book .mk-book__checkbox:checked::before { transform: rotate(-45deg) scale(1); }

.mk-book .mk-book__radio:focus,
.mk-book .mk-book__checkbox:focus { outline: none; box-shadow: none; }

/* la casilla va sola, sin tarjeta que la envuelva: el aro va en
   ella misma, con su misma forma */
.mk-book .mk-book__checkbox:focus-visible { box-shadow: 0 0 0 3px rgba(11, 74, 76, .35); }

/* --- Tarjetas de elección: reclamo / queja, producto / servicio */

.mk-book__types,
.mk-book__goods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.mk-book .mk-book__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .9rem;
  margin: 0;
  padding: 1.1rem 1.1rem 1.15rem;
  border: 1.5px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-white);
  color: var(--mk-ink);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .2s var(--mk-ease), background-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}

.mk-book .mk-book__card:hover { border-color: var(--mk-green-2); box-shadow: var(--mk-shadow-sm); }

.mk-book .mk-book__card:has(.mk-book__radio:checked) {
  border-color: var(--mk-green);
  background: #F3F8F7;
  box-shadow: inset 0 0 0 1px var(--mk-green);
}

.mk-book .mk-book__card:has(.mk-book__radio:focus-visible) {
  outline: 3px solid rgba(11, 74, 76, .45);
  outline-offset: 2px;
}

.mk-book__card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--mk-green-soft);
  color: var(--mk-green);
  font-size: 1.15rem;
  transition: background-color .2s var(--mk-ease), color .2s var(--mk-ease);
}

.mk-book .mk-book__card:has(.mk-book__radio:checked) .mk-book__card-icon { background: var(--mk-green); color: var(--mk-white); }

.mk-book__card-body { display: block; min-width: 0; }

.mk-book__card-body b {
  display: block;
  margin-bottom: .22rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mk-green);
}

.mk-book__card-body small {
  display: block;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--mk-ink-soft);
}

.mk-book .mk-book__card .mk-book__radio { margin-top: .12rem; }

/* producto / servicio: más bajas y centradas en vertical */
.mk-book .mk-book__card--good { align-items: center; padding: .85rem 1rem; }
.mk-book__card--good .mk-book__card-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
.mk-book__card--good .mk-book__card-body b { margin-bottom: .05rem; font-size: .96rem; }
.mk-book__card--good .mk-book__card-body small { font-size: .8rem; }
.mk-book .mk-book__card--good .mk-book__radio { margin-top: 0; }

.mk-book .mk-field.is-invalid .mk-book__card { border-color: #E2A59E; }

.mk-book__adaptive.is-revealed { animation: mkBookReveal .45s var(--mk-ease) both; }

@keyframes mkBookReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Sí / No: el mismo conmutador de píldora del formulario de
   asesoría (.mk-mode, correo / WhatsApp) -------------------- */

.mk-book__segment {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(96px, auto));
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--mk-line);
  border-radius: 999px;
  background: var(--mk-sand);
}

.mk-book .mk-book__segment-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: .5rem 1.3rem;
  border-radius: 999px;
  color: var(--mk-ink-soft);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color .25s var(--mk-ease), color .25s var(--mk-ease);
}

.mk-book .mk-book__segment-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.mk-book .mk-book__segment-opt:has(input:checked) { background: var(--mk-green); color: var(--mk-white); }
.mk-book .mk-book__segment-opt:has(input:focus-visible) { outline: 3px solid rgba(11, 74, 76, .45); outline-offset: 2px; }

.mk-book .mk-field.is-invalid .mk-book__segment { border-color: #C0392B; }

/* --- La aceptación ------------------------------------------ */

.mk-book .mk-book__check {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--mk-line);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-white);
  color: var(--mk-ink);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .2s var(--mk-ease), background-color .2s var(--mk-ease);
}

.mk-book .mk-book__check:has(.mk-book__checkbox:checked) { border-color: var(--mk-green-2); background: #F3F8F7; }
.mk-book .mk-field.is-invalid .mk-book__check { border-color: #C0392B; background: #FEF7F6; }
.mk-book .mk-book__check .mk-book__checkbox { margin-top: .1rem; }

/* --- Avisos legales (etapa de revisión y constancia) -------- */

.mk-book .mk-book__legal {
  display: grid;
  gap: .6rem;
  margin: 0 0 1.3rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--mk-gold);
  border-radius: var(--mk-radius-sm);
  background: var(--mk-sand);
  list-style: none;
}

.mk-book .mk-book__legal li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--mk-ink-soft);
}

.mk-book .mk-book__legal i { flex: none; margin-top: .22rem; color: var(--mk-green-2); }

/* --- Resumen de revisión y hoja de la constancia ------------ */

.mk-book__summary { display: grid; gap: .9rem; }

.mk-book__summary-block {
  padding: .9rem 1.1rem .3rem;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-sm);
}

.mk-book__summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-bottom: .35rem;
}

.mk-book .mk-book__summary-title {
  font-family: var(--mk-font-body);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mk-green);
}

.mk-book .mk-book__edit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .35rem .85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mk-green-2);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--mk-ease);
}

.mk-book .mk-book__edit:hover { background: var(--mk-green-soft); }
.mk-book .mk-book__edit:focus-visible { outline: 3px solid rgba(11, 74, 76, .45); outline-offset: 2px; }

.mk-book__review {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 0 .9rem;
  margin: 0 0 1.2rem;
  font-size: .9rem;
}

.mk-book__review dt {
  padding: .55rem 0;
  border-top: 1px solid var(--mk-line);
  font-weight: 600;
  color: var(--mk-ink-soft);
}

.mk-book__review dd {
  margin: 0;
  padding: .55rem 0;
  border-top: 1px solid var(--mk-line);
  overflow-wrap: anywhere;
}

/* en el resumen el detalle viene de un textarea: se respetan sus
   saltos de línea (en la hoja ya llegan como <br> desde PHP) */
.mk-book__summary .mk-book__review { margin-bottom: .5rem; }
.mk-book__summary .mk-book__review dd { white-space: pre-line; }

/* --- Botonera ----------------------------------------------- */

.mk-book__nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--mk-line);
}

.mk-book .mk-book__nav .mk-btn { min-height: 50px; padding: .85rem 1.7rem; }
.mk-book__next,
.mk-book__submit { margin-left: auto; }
.mk-book .mk-book__submit:disabled { opacity: .7; cursor: wait; transform: none; }

.mk-book .mk-book__note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: .45rem;
  margin-top: 1.2rem;
  text-align: center;
  font-size: .78rem;
  color: var(--mk-ink-soft);
}

.mk-book .mk-book__note i { margin-top: .15rem; color: var(--mk-green-2); }

/* --- El acuse ----------------------------------------------- */

.mk-book .mk-book__success { text-align: center; }
.mk-book .mk-book__success:focus { outline: none; }

.mk-book .mk-book__success-title {
  margin-bottom: .5rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  color: var(--mk-green);
}

.mk-book .mk-book__code-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 .5rem;
  font-size: .88rem;
  color: var(--mk-ink-soft);
}

.mk-book__code {
  display: inline-block;
  padding: .45rem 1.1rem;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-green);
  color: var(--mk-white);
  font-size: 1.35rem;
  letter-spacing: .08em;
}

.mk-book .mk-book__ok-mail { font-size: .92rem; color: var(--mk-ink-soft); }

.mk-book .mk-book__due {
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-green-soft);
  font-size: .92rem;
}

.mk-book__due i { margin-right: .4rem; color: var(--mk-green); }

.mk-book__sheet {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--mk-line);
  text-align: left;
}

.mk-book__sheet-head {
  display: flex;
  gap: .9rem;
  align-items: center;
  margin-bottom: 1.2rem;
}

.mk-book__sheet-head b { display: block; font-size: 1rem; }
.mk-book__sheet-head span { display: block; font-size: .8rem; color: var(--mk-ink-soft); }

/* --- Secciones de la hoja (constancia e impresión) -----------

   Una tarjeta por sección, en el mismo orden en que el
   consumidor completa el formulario: encabezado con el título y,
   dentro, filas de 1 a 3 pares etiqueta/valor lado a lado. Mismo
   recurso visual en el correo (MekaController::emailSections),
   con estilos en línea en vez de estas clases. -------------- */

.mk-book__sheet-sections { display: grid; gap: .9rem; }

.mk-book__sheet-section {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-sm);
  overflow: hidden;
}

.mk-book .mk-book__sheet-section-title {
  margin: 0;
  padding: .55rem .95rem;
  background: var(--mk-green);
  color: var(--mk-white);
  font-family: var(--mk-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mk-book__sheet-row {
  display: grid;
  grid-template-columns: repeat(var(--mk-sheet-cols, 1), minmax(0, 1fr));
  gap: 0;
}

.mk-book__sheet-row--cols-1 { --mk-sheet-cols: 1; }
.mk-book__sheet-row--cols-2 { --mk-sheet-cols: 2; }
.mk-book__sheet-row--cols-3 { --mk-sheet-cols: 3; }

.mk-book__sheet-field {
  padding: .6rem .95rem;
  border-top: 1px solid var(--mk-line);
}

/* la fila justo debajo del título de la sección no necesita
   su propia línea: ya la separa la barra del título */
.mk-book__sheet-section-title + .mk-book__sheet-row .mk-book__sheet-field { border-top: 0; }

.mk-book__sheet-row--cols-2 .mk-book__sheet-field:not(:last-child),
.mk-book__sheet-row--cols-3 .mk-book__sheet-field:not(:last-child) { border-right: 1px solid var(--mk-line); }

.mk-book .mk-book__sheet-label {
  display: block;
  margin-bottom: .15rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}

.mk-book .mk-book__sheet-value {
  display: block;
  font-size: .9rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

/* La misma hoja, servida aparte en /admin/reclamaciones/detalle
   para que "Imprimir hoja" (o Ctrl+P) dé el mismo documento que
   la constancia pública. En pantalla no se ve: el CMS ya muestra
   estos datos en sus propias tarjetas; solo aparece al imprimir
   (@media print, más abajo). */
.mk-reclamo__print-sheet { display: none; }

.mk-book__success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.6rem;
}

/* --- Impresión de la constancia -----------------------------

   La norma exige que el consumidor pueda imprimir gratis su
   hoja. En vez de añadir una librería de PDF, se imprime la
   propia página: con .mk-printing en el <body> queda en pie
   solo el acuse con la hoja, y el navegador la guarda como PDF.
   ------------------------------------------------------------ */

@media print {

  @page { size: A4; margin: 14mm; }

  body.mk-printing .mk-header,
  body.mk-printing .mk-header-spacer,
  body.mk-printing footer,
  body.mk-printing .mk-book-head,
  body.mk-printing .mk-book-steps,
  body.mk-printing .mk-book__form,
  body.mk-printing .mk-success__icon,
  body.mk-printing .mk-book__success-actions,
  body.mk-printing .mk-wa-float,
  body.mk-printing .mk-wa-bubble,
  body.mk-printing .swal2-container,
  body.mk-printing .toast-container,
  body.mk-printing #toast-container { display: none !important; }

  body.mk-printing .mk-book.mk-section { padding: 0; background: none; }

  body.mk-printing .mk-book__sheet {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.mk-printing .mk-success,
  body.mk-printing .mk-form-card {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.mk-printing .mk-book .mk-book__legal { background: none; border: 1px solid #999; }

  /* que no se parta una fila entre dos hojas */
  body.mk-printing .mk-book__review dt,
  body.mk-printing .mk-book__review dd { border-top: 1px solid #999; break-inside: avoid; }

  /* las secciones de la hoja, en gris neutro: se leen igual en
     blanco y negro y no se cortan entre dos páginas */
  body.mk-printing .mk-book__sheet-section { border-color: #999; break-inside: avoid; }
  body.mk-printing .mk-book__sheet-section-title { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.mk-printing .mk-book__sheet-field { border-color: #999 !important; }

  /* --- Imprimir una hoja desde /admin/reclamaciones/detalle ---

     Mismo bloque .mk-book__sheet-section* que la constancia
     pública: #mkReclamoPrintSheet solo existe en esa página, así
     que estas reglas no tocan ningún otro sitio del CMS. No
     depende de la clase body.mk-printing (aquí no hace falta un
     botón que la active): con Ctrl+P alcanza. -------------- */

  body:has(#mkReclamoPrintSheet) .mk-header,
  body:has(#mkReclamoPrintSheet) .mk-header-spacer,
  body:has(#mkReclamoPrintSheet) .main-sidebar,
  body:has(#mkReclamoPrintSheet) footer,
  body:has(#mkReclamoPrintSheet) .content-header,
  body:has(#mkReclamoPrintSheet) .mk-reclamo__screen,
  body:has(#mkReclamoPrintSheet) .mk-wa-float,
  body:has(#mkReclamoPrintSheet) .mk-wa-bubble,
  body:has(#mkReclamoPrintSheet) .swal2-container,
  body:has(#mkReclamoPrintSheet) .toast-container,
  body:has(#mkReclamoPrintSheet) #toast-container { display: none !important; }

  body:has(#mkReclamoPrintSheet),
  body:has(#mkReclamoPrintSheet) .content-wrapper { background: #fff !important; }
  body:has(#mkReclamoPrintSheet) .content.pb-5 { padding: 0 !important; }
  body:has(#mkReclamoPrintSheet) #mkReclamoPrintSheet { display: block !important; }
  body:has(#mkReclamoPrintSheet) .mk-book__sheet-section { border-color: #999; break-inside: avoid; }
  body:has(#mkReclamoPrintSheet) .mk-book__sheet-section-title { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(#mkReclamoPrintSheet) .mk-book__sheet-field { border-color: #999 !important; }
  body:has(#mkReclamoPrintSheet) .mk-book .mk-book__legal { background: none; border: 1px solid #999; }
  body:has(#mkReclamoPrintSheet) .mk-book__review dt,
  body:has(#mkReclamoPrintSheet) .mk-book__review dd { border-top: 1px solid #999; break-inside: avoid; }

}

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

/* Departamento a lo ancho y provincia / distrito debajo: a tres
   columnas el texto de los desplegables se cortaba */
@media (max-width: 991px) {

  .mk-book__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-book__grid--3 > :first-child { grid-column: 1 / -1; }

}

/* screen and: SOLO pantalla. Sin "screen and", esta consulta
   también coincide al imprimir —el área de página en A4 con
   márgenes de 14mm mide unos 688px de ancho, menos que este
   max-width—, y apilaba en una columna lo que .mk-book__sheet-row
   pinta en 2 o 3 tanto en pantalla como en la impresión y el PDF
   (el mismo bloque que usan la constancia, el correo y
   /admin/reclamaciones/detalle). Encontrado al comparar la vista
   previa de impresión real del navegador con esta vista previa. */
@media screen and (max-width: 767px) {

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

  /* el indicador se compacta: sin el "Paso n" y con el estado
     solo en la etapa en curso */
  .mk-book-steps__dot { width: 44px; height: 44px; font-size: .95rem; }
  .mk-book-steps__item:not(:last-child)::after { top: 21px; left: calc(50% + 30px); right: calc(-50% + 30px); }
  .mk-book-steps__num { display: none; }
  .mk-book-steps__name { font-size: .82rem; }
  .mk-book-steps__item:not(.is-current) .mk-book-steps__state { display: none; }

  /* la etiqueta encima del dato se lee mejor que dos columnas
     estrechas */
  .mk-book__review { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-book__review dt { padding-bottom: 0; }
  .mk-book__review dd { padding-top: .15rem; border-top: 0; }

  /* las filas de 2 o 3 pares de la hoja se apilan: en el CELULAR
     (nunca al imprimir, ver el comentario de arriba) no cabían
     lado a lado sin cortar el texto */
  .mk-book__sheet-row { --mk-sheet-cols: 1; }
  .mk-book__sheet-row--cols-2 .mk-book__sheet-field:not(:last-child),
  .mk-book__sheet-row--cols-3 .mk-book__sheet-field:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--mk-line); }

  /* botones a todo el ancho, la acción principal arriba */
  .mk-book__nav { flex-direction: column-reverse; align-items: stretch; }
  .mk-book .mk-book__nav .mk-btn { width: 100%; }
  .mk-book__next,
  .mk-book__submit { margin-left: 0; }

  .mk-book__success-actions .mk-btn { width: 100%; }

}

@media (max-width: 575px) {

  .mk-book__grid,
  .mk-book__grid--3,
  .mk-book__goods { grid-template-columns: minmax(0, 1fr); }

  .mk-book .mk-book__card { gap: .75rem; padding: .95rem; }
  .mk-book__card-icon { width: 40px; height: 40px; font-size: 1rem; }

  .mk-book__segment { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mk-book__money { max-width: none; }

}

/* En el celular angosto el indicador se queda en los círculos y
   su conector; el nombre de la etapa en curso pasa a la línea de
   abajo. El texto de cada etapa sigue en el documento para los
   lectores de pantalla. */
@media (max-width: 479px) {

  .mk-book-steps__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mk-book-steps__now-name { display: inline; }

}

/* ============================================================
   MODAL PUBLICITARIO DEL INICIO (.mk-popup)

   El aviso a pantalla completa que se abre solo al entrar al
   inicio (home/modules/popup.php), administrable desde
   /admin/modales. Se apoya en el modal de Bootstrap 5 que ya
   usa .mk-modal (bloqueo de scroll, foco, Escape, backdrop):
   aquí solo se viste distinto porque la pieza manda es la
   imagen, no un encabezado con título.

   El ancho del diálogo sale de la proporción REAL de la
   imagen (--mk-popup-ratio = width_popup/height_popup,
   inyectada en línea desde PHP) contra un presupuesto de alto
   (--mk-popup-h, también inyectado: más generoso cuando el
   aviso no lleva título ni texto). Así el modal es lo más
   grande que caben a la vez los 661px de referencia, el ancho
   de la pantalla y el alto disponible -nunca se deforma, nunca
   se recorta y nunca deja bandas vacías-, y si el contenido no
   entra igual, el propio .modal de Bootstrap se encarga de
   dejarlo scrollable en vez de recortarlo.
   ============================================================ */

.mk-popup .modal-dialog {
  max-width: min(661px, calc(100vw - 2rem), calc(var(--mk-popup-h, 85vh) * var(--mk-popup-ratio, 0.7419)));
}

.mk-popup .modal-content {
  border: 0;
  border-radius: var(--mk-radius);
  overflow: hidden;
  background: var(--mk-white);
  font-family: var(--mk-font-body);
}

.mk-popup__media {
  position: relative;
  line-height: 0;
  background: var(--mk-sand);
}

.mk-popup__media img {
  display: block;
  width: 100%;
  height: auto;
}

.mk-popup__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--mk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mk-popup__close:hover { background: var(--mk-white); transform: scale(1.06); }
.mk-popup__close:focus-visible { outline: 3px solid var(--mk-gold); outline-offset: 2px; }

.mk-popup__footer {
  padding: 1.3rem 1.5rem 1.5rem;
  text-align: center;
}

.mk-popup__footer--bare { padding-top: 1.1rem; }

.mk-popup__title {
  font-family: var(--mk-font-display);
  font-size: 1.25rem;
  color: var(--mk-ink);
  margin: 0 0 0.5rem;
}

.mk-popup__text {
  color: var(--mk-ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

.mk-popup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

.mk-popup__actions .mk-popup__cta {
  flex: 1 1 10.5rem;
  width: auto;
  max-width: 15.5rem;
  min-height: 42px;
  padding: 0.72rem 1.15rem;
  border-radius: var(--mk-radius-sm);
  font-size: 0.88rem;
  line-height: 1.15;
  box-shadow: none;
}

.mk-popup__actions .mk-popup__cta--primary:hover {
  box-shadow: 0 8px 20px rgba(3, 42, 43, 0.24);
}

.mk-popup__actions .mk-popup__cta:focus-visible {
  outline: 3px solid var(--mk-gold);
  outline-offset: 3px;
}

.mk-popup__actions .mk-popup__cta:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 575.98px) {

  .mk-popup .modal-dialog { margin: 0.75rem auto; }

  .mk-popup--with-copy .modal-dialog {
    --mk-popup-h: calc(100dvh - 20rem) !important;
  }

  .mk-popup--bare .modal-dialog {
    --mk-popup-h: calc(100dvh - 11rem) !important;
  }

  .mk-popup__footer { padding: 0.9rem 1rem 1rem; }

  .mk-popup__title {
    margin-bottom: 0.35rem;
    font-size: 1rem;
  }

  .mk-popup__text {
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .mk-popup__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .mk-popup__actions .mk-popup__cta {
    flex: none;
    width: 100%;
    max-width: none;
  }

}

/* En portátiles de poca altura la imagen reduce su ancho a
   partir del espacio vertical disponible. El pie puede apilar
   los CTA sin quedar fuera del viewport. */
@media (min-width: 576px) and (max-height: 820px) {

  .mk-popup--with-copy .modal-dialog {
    --mk-popup-h: calc(100dvh - 20rem) !important;
  }

  .mk-popup--bare .modal-dialog {
    --mk-popup-h: calc(100dvh - 11rem) !important;
  }

  .mk-popup__footer { padding: 0.9rem 1rem 1rem; }

  .mk-popup__title {
    margin-bottom: 0.35rem;
    font-size: 1rem;
  }

  .mk-popup__text {
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

}