/* MRC Website — generado desde prototipo-visual-mrc/css/styles.css por
   tools/build_mrc_website.py. Todos los selectores quedan acotados a
   páginas MRC (body:has(.mrc-wrap)) para no tocar el resto del sitio Odoo.
   CSS plano (sin compilar): los tokens viven en :root → body. */
/* =========================================================
   MRC — Prototipo visual Home
   Tokens tomados literalmente de ETAPA2-SISTEMA-UX-UI-DISENO-VISUAL.md
   (sección 3, 5, 6) y su Design DNA (sección 21). No se modifica
   ningún color ni tipografía de marca en este archivo.
   ========================================================= */

body:has(.mrc-wrap) {
  /* Color — sección 3 y 5 */
  --color-red: #C40000;
  --color-white: #FFFFFF;
  --color-gray-100: #F1F1F1;
  --color-gray-900: #202020;
  --color-gray-500: #8C8C8C; /* solo texto grande / iconos / bordes, nunca texto chico */
  --color-cobalt: #0033A0;
  --color-navy: #1B2A4A;
  --color-ice: #EAF2FB;
  --color-black: #111111;

  /* Tipografía — sección 4 */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing scale base 8px — sección 6 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --container-max: 1280px;
  --gutter-desktop: 32px;
  /* Base segura para pantallas muy angostas (320px) — el CTA "Solicitar
     cotización" del menú mobile necesita ese margen para no forzar
     overflow horizontal. Sube a 20px recién desde 375px (ver media
     query más abajo). */
  --gutter-mobile: 16px;
  --radius: 8px;
  --shadow-soft: 0 4px 20px rgba(17, 17, 17, 0.08);

  /* Ritmo entre secciones — Design DNA sección 21.3.
     Fase 2 (dirección de arte de Ayelén, 2026-09-20): sistema de
     proporciones explícito — secciones normales en 80-104px. 96px es
     el punto medio del rango. */
  --section-gap: 96px;

  /* ---- Art direction pass (2026-09-15): superficies, profundidad y
     motion en capas, sin tocar color de marca ni tipografía. ---- */
  --surface-page: #F7F8F6;   /* nivel 01 — fondo general, cálido/neutro */
  --surface-soft: #FAFAF8;   /* nivel 02a — paneles intermedios */
  --surface-white: #FFFFFF;  /* nivel 02b — superficies de contenido */

  --shadow-subtle: 0 2px 10px rgba(10,20,30,0.05);   /* UI chica */
  --shadow-surface: 0 16px 40px rgba(10,20,30,0.09); /* paneles/cards */
  --shadow-product: 0 30px 60px rgba(10,20,30,0.16); /* equipo aislado */

  --border-on-light: rgba(10,20,30,0.07);
  --border-on-dark: rgba(255,255,255,0.08);

  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);

  --nav-height: 88px;
}

@media (max-width: 900px) {
  body:has(.mrc-wrap) {
    --section-gap: 64px;
  }
}

@media (min-width: 1440px) {
  body:has(.mrc-wrap) {
    --gutter-desktop: 40px;
  }
}

@media (min-width: 375px) {
  body:has(.mrc-wrap) {
    --gutter-mobile: 20px;
  }
}

/* ---------- Reset mínimo ---------- */
body:has(.mrc-wrap) * { box-sizing: border-box; }
html:has(.mrc-wrap) { scroll-behavior: smooth; overflow-x: hidden; }
html.mrc-scroll-lock:has(.mrc-wrap) { overflow: hidden; }
body:has(.mrc-wrap) {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-gray-900);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:has(.mrc-wrap) img { max-width: 100%; display: block; }
body:has(.mrc-wrap) picture { display: contents; }
body:has(.mrc-wrap) a { color: inherit; text-decoration: none; }
body:has(.mrc-wrap) ul,
body:has(.mrc-wrap) ol { margin: 0; padding: 0; list-style: none; }
body:has(.mrc-wrap) button { font-family: inherit; cursor: pointer; }

/* ---------- Grain compartido ----------
   Una sola textura reutilizable para las superficies oscuras/CTA
   (hero, cámaras, "por qué Martínez", CTA final). Estático, muy bajo
   opacity — no debe notarse como efecto, solo quitar la planitud
   digital. Puramente decorativo: pointer-events:none, no interfiere
   con foco/selección/lectores de pantalla. */
body:has(.mrc-wrap) .mrc-grain { position: relative; }
body:has(.mrc-wrap) .mrc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.02;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  body:has(.mrc-wrap) *,
body:has(.mrc-wrap) *::before,
body:has(.mrc-wrap) *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilidades ---------- */
body:has(.mrc-wrap) .mrc-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 6px;
  transition: top 160ms ease;
}
body:has(.mrc-wrap) .mrc-skip:focus {
  top: 16px;
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}
body:has(.mrc-wrap) .mrc-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-container { padding: 0 var(--gutter-mobile); }
}

body:has(.mrc-wrap) .mrc-section-gap {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

body:has(.mrc-wrap) .mrc-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 var(--sp-3) 0;
  display: block;
}
body:has(.mrc-wrap) .mrc-eyebrow.on-dark { color: #FF8A80; }

body:has(.mrc-wrap) h1,
body:has(.mrc-wrap) h2,
body:has(.mrc-wrap) h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
body:has(.mrc-wrap) h1 { font-weight: 800; font-size: 60px; }
body:has(.mrc-wrap) h2 { font-weight: 700; font-size: 44px; }
body:has(.mrc-wrap) h3 { font-weight: 600; font-size: 21px; }
body:has(.mrc-wrap) p { font-size: 17px; line-height: 1.6; margin: 0; color: var(--color-gray-900); }
body:has(.mrc-wrap) .mrc-lede { font-size: 19px; line-height: 1.55; color: #454545; }

@media (max-width: 768px) {
  body:has(.mrc-wrap) h1 { font-size: 33px; }
  body:has(.mrc-wrap) h2 { font-size: 23px; }
  body:has(.mrc-wrap) h3 { font-size: 19px; }
  body:has(.mrc-wrap) p,
body:has(.mrc-wrap) .mrc-lede { font-size: 16px; }
}

/* ---------- Botones — sección 8 ---------- */
body:has(.mrc-wrap) .mrc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
body:has(.mrc-wrap) .mrc-btn:hover { transform: translateY(-2px); }
body:has(.mrc-wrap) .mrc-btn:active { transform: translateY(0); transition-duration: 80ms; }
body:has(.mrc-wrap) .mrc-btn:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}
body:has(.mrc-wrap) .mrc-btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-btn--primary:hover { background: #A80000; }
body:has(.mrc-wrap) .mrc-btn--secondary {
  background: transparent;
  border-color: var(--color-gray-900);
  color: var(--color-gray-900);
}
body:has(.mrc-wrap) .mrc-btn--secondary:hover { border-color: var(--color-red); color: var(--color-red); }
body:has(.mrc-wrap) .mrc-btn--secondary.on-dark {
  border-color: rgba(255,255,255,0.55);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-btn--secondary.on-dark:hover { border-color: var(--color-white); }
body:has(.mrc-wrap) .mrc-btn--text {
  /* Antes usaba --color-cobalt (azul) como color de reposo — se leía
     como hyperlink por defecto del navegador, no como identidad MRC
     (2026-09-23). Grafito en reposo, rojo Martínez solo como acento
     funcional de interacción (hover/focus), nunca azul.
     display:inline-flex + align-self:center (2026-09-23): como hijo
     directo de un flex row (.mrc-location__actions, junto al botón
     "Ver ubicación"), sin esto el link se "blockifica" y se ESTIRA a
     la altura del botón (align-items:stretch por defecto) — el texto
     quedaba arriba de esa caja y el border-bottom se dibujaba abajo
     del todo, lejos del texto, leyéndose como una línea partida/doble.
     inline-flex + align-self:center hace que la caja del link mida
     exactamente lo que mide su contenido, así el subrayado queda
     pegado al texto real. */
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-gray-900);
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
body:has(.mrc-wrap) .mrc-btn--text:hover,
body:has(.mrc-wrap) .mrc-btn--text:focus-visible {
  color: var(--color-red);
  border-color: var(--color-red);
}
body:has(.mrc-wrap) .mrc-btn--text:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
body:has(.mrc-wrap) .mrc-btn--text.on-dark { color: var(--color-white); }
body:has(.mrc-wrap) .mrc-btn--text.on-dark:hover { border-color: var(--color-white); }

/* ---------- Navbar (sección 22) ---------- */
body:has(.mrc-wrap) .mrc-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
body:has(.mrc-wrap) .mrc-nav.is-scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-gray-100);
  box-shadow: 0 8px 24px rgba(17,17,17,0.06);
}
body:has(.mrc-wrap) .mrc-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  height: var(--nav-height);
}
body:has(.mrc-wrap) .mrc-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body:has(.mrc-wrap) .mrc-nav__logo img {
  display: block;
  height: 56px;
  width: auto;
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-nav__logo img { height: 42px; }
  body:has(.mrc-wrap) { --nav-height: 76px; }
}
@media (max-width: 360px) {
  body:has(.mrc-wrap) .mrc-nav__logo img { height: 36px; }
}
body:has(.mrc-wrap) .mrc-nav__links {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  flex-shrink: 0;
}
body:has(.mrc-wrap) .mrc-nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-gray-900);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
body:has(.mrc-wrap) .mrc-nav__links a:hover { border-color: var(--color-red); }
body:has(.mrc-wrap) .mrc-nav__links a[aria-current="true"] { color: var(--color-red); border-color: var(--color-red); }
body:has(.mrc-wrap) .mrc-mobile-menu a[aria-current="true"] { color: var(--color-red); }
body:has(.mrc-wrap) .mrc-nav__cta { display: flex; align-items: center; gap: var(--sp-4); }
body:has(.mrc-wrap) .mrc-nav__cta .mrc-btn { padding: 11px 22px; font-size: 15px; }
body:has(.mrc-wrap) .mrc-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--sp-2);
}
body:has(.mrc-wrap) .mrc-nav__toggle svg { width: 26px; height: 26px; }

@media (max-width: 1220px) {
  body:has(.mrc-wrap) .mrc-nav__links { display: none; }
  body:has(.mrc-wrap) .mrc-nav__toggle { display: block; }
  body:has(.mrc-wrap) .mrc-nav__cta > .mrc-btn { display: none; }
}

body:has(.mrc-wrap) .mrc-mobile-menu {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  /* Contención dura: el propio `<nav>` fixed, con left/right:0,
     debería medir exactamente el ancho del viewport por spec —
     empíricamente algunos motores igual lo derivan del min-content de
     sus hijos. width+max-width en vw + overflow-x:hidden lo garantizan
     sin depender de ese cálculo. */
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--color-white);
  z-index: 99;
  padding: var(--sp-8) var(--gutter-mobile);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  /* visibility (2026-09-23): sin esto, los 7 links de este menú
     quedaban en el tab order del teclado incluso cerrado/invisible —
     opacity:0 no saca un elemento del flujo de foco. El delay de 160ms
     al cerrar deja terminar el fade antes de sacarlo del render; al
     abrir, visibility pasa a visible sin demora (transition-delay 0
     en .is-open) para no atrasar la aparición. Mismo componente en
     las 12 páginas del sitio — no es un cambio de diseño, es la misma
     transición visual, solo corrige el orden de foco. */
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
body:has(.mrc-wrap) .mrc-mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
}
body:has(.mrc-wrap) .mrc-mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
body:has(.mrc-wrap) .mrc-mobile-menu .mrc-btn {
  margin-top: var(--sp-6);
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  /* Causa real del overflow horizontal a 320px: `.mrc-btn` hereda
     white-space:nowrap, y "Solicitar cotización" en nowrap fuerza un
     ancho mínimo mayor al viewport — ese mínimo se propagaba al `<nav>`
     fixed completo (y de ahí a todo el documento) aun con el menú
     cerrado, porque sigue en el flujo de layout (solo oculto por
     opacity). Permitir wrap acá resuelve el origen sin tocar copy,
     navegación ni tipografía en el resto del sitio. */
  white-space: normal;
}

/* ---------- Hero (sección 12) ---------- */
body:has(.mrc-wrap) .mrc-hero {
  background: linear-gradient(140deg, var(--color-black) 0%, var(--color-navy) 62%, #22314f 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
body:has(.mrc-wrap) .mrc-hero__grid {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  min-height: 680px;
  display: flex;
  align-items: center;
}
body:has(.mrc-wrap) .mrc-hero__text { max-width: 500px; }
body:has(.mrc-wrap) .mrc-hero__regional {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--sp-6);
}
body:has(.mrc-wrap) .mrc-hero__regional-rule {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-hero__regional {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 620ms ease, transform 620ms var(--ease-editorial);
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-hero__regional.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body:has(.mrc-wrap) .mrc-hero__text h1 {
  color: var(--color-white);
  font-size: 68px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
body:has(.mrc-wrap) .mrc-hero__text .mrc-lede {
  color: rgba(255,255,255,0.82);
  margin-top: var(--sp-8);
  max-width: 460px;
}
@media (min-width: 1440px) {
  body:has(.mrc-wrap) .mrc-hero__text h1 { font-size: 76px; }
}
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-hero__text h1 { font-size: 38px; max-width: 100%; }
}
body:has(.mrc-wrap) .mrc-hero__actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  flex-wrap: wrap;
}
body:has(.mrc-wrap) .mrc-hero__trust {
  margin-top: var(--sp-8);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.6);
}
body:has(.mrc-wrap) .mrc-hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 55%;
  z-index: 0;
}
body:has(.mrc-wrap) .mrc-hero__visual::before {
  /* Iluminación ambiental de estudio, muy sutil, detrás del producto —
     luz fría neutra (no azul saturado), para que la foto respire en el
     fondo oscuro en vez de leerse como una card flotando encima. El
     --hero-light-shift lo mueve un JS opcional y muy acotado (ver
     main.js); sin JS queda fijo en 0, sin ninguna diferencia visual. */
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    ellipse at calc(82% + var(--hero-light-shift, 0px)) 42%,
    rgba(185,200,215,0.13) 0%,
    rgba(95,115,140,0.055) 30%,
    rgba(95,115,140,0) 60%
  );
  z-index: 0;
  pointer-events: none;
}
body:has(.mrc-wrap) .mrc-hero__visual::after {
  /* Luz de piso: ancla el equipo al suelo del "estudio" en vez de
     dejarlo flotando — una elipse horizontal muy tenue debajo. */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 14%;
  background: radial-gradient(ellipse, rgba(200,210,220,0.14) 0%, rgba(200,210,220,0) 72%);
  z-index: 0;
  pointer-events: none;
}
body:has(.mrc-wrap) .mrc-hero__img-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}
body:has(.mrc-wrap) .mrc-hero__img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
body:has(.mrc-wrap) .mrc-hero__img-scrim {
  /* Fusión más gradual (feedback: "se siente como dos mitades
     pegadas") — más paradas intermedias, el navy se disuelve en la
     foto en vez de cortar. */
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,14,26,0.68) 0%, rgba(10,14,26,0.4) 18%, rgba(10,14,26,0.2) 32%, rgba(10,14,26,0.08) 48%, rgba(10,14,26,0) 68%);
}

@media (max-width: 1024px) {
  body:has(.mrc-wrap) .mrc-hero__grid {
    display: block;
    min-height: auto;
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }
  body:has(.mrc-wrap) .mrc-hero__text { max-width: 100%; }
  body:has(.mrc-wrap) .mrc-hero__visual {
    /* Antes sin `height` explícito: con la imagen fuente cuadrada
       (900x900), el bloque terminaba renderizando a ~100% del ancho
       de altura (un cuadrado casi completo), dominando 1-2 pantallas
       de scroll extra. Se fija una altura real, con object-fit:cover
       ya presente en la imagen para que recorte en vez de deformar. */
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    height: min(58vh, 480px);
    min-height: 280px;
    margin-top: var(--sp-8);
  }
  body:has(.mrc-wrap) .mrc-hero__img-frame {
    height: 100%;
    border-radius: 8px;
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-hero__visual { height: min(46vh, 360px); min-height: 240px; }
}

/* ---------- Banda de autoridad "+30 años" (V3, rediseño 2026-09-20) ----------
   Banda compacta de transición Hero → catálogo, no una sección
   protagonista: mismo fondo off-white que separa el Hero oscuro del
   resto, pero con altura y peso acotados a lo que el dato necesita.
   Feedback que motivó el rediseño: ocupaba demasiado alto, el número
   competía con el Hero, línea vertical y línea roja se sentían
   decorativas sin función, demasiado vacío antes de "Soluciones". */
body:has(.mrc-wrap) .mrc-authority {
  background: var(--color-gray-100);
  border-bottom: 1px solid rgba(32,32,32,0.08);
}
body:has(.mrc-wrap) .mrc-authority__row {
  display: grid;
  grid-template-columns: minmax(160px, 28%) 1fr;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
body:has(.mrc-wrap) .mrc-authority__stat {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
body:has(.mrc-wrap) .mrc-authority__number-mask {
  display: block;
  overflow: hidden;
}
body:has(.mrc-wrap) .mrc-authority__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}
/* Decisión final (2026-09-22): el "+30" va completo en grafito, sin
   rojo — el rojo debe quedar reservado para CTA/interacción, no para
   decorar un dato institucional. Antes el signo "+" iba en rojo. */
body:has(.mrc-wrap) .mrc-authority__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: #454545;
  margin-top: var(--sp-2);
}

/* Animación — solo corre si JS confirma soporte y no hay
   prefers-reduced-motion (misma puerta que el resto del sitio:
   .js-reveal-ready). Sin JS o con reduced-motion, todo queda visible
   en su estado final, sin excepción. */
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__number {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 680ms ease;
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__label,
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms ease, transform 480ms ease;
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__label { transition-delay: 200ms; }
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__text { transition-delay: 260ms; }

body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__row.is-visible .mrc-authority__number { transform: translateY(0); opacity: 1; }
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__row.is-visible .mrc-authority__label,
body:has(.mrc-wrap) .js-reveal-ready .mrc-authority__row.is-visible .mrc-authority__text { transform: translateY(0); opacity: 1; }

body:has(.mrc-wrap) .mrc-authority__body { display: flex; flex-direction: column; gap: var(--sp-4); }
body:has(.mrc-wrap) .mrc-authority__text {
  color: #2E2E2E;
  font-size: 19px;
  line-height: 1.5;
  max-width: 620px;
  margin: 0;
}
/* Franja de valor — misma lógica de puntos que .mrc-camaras__tags,
   sobria, sin badges ni pills. */
body:has(.mrc-wrap) .mrc-authority__strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--color-gray-900);
  text-transform: uppercase;
}
body:has(.mrc-wrap) .mrc-authority__strip span:not(:last-child)::after {
  content: "·";
  margin-left: var(--sp-3);
  color: rgba(32,32,32,0.3);
}
@media (max-width: 700px) {
  body:has(.mrc-wrap) .mrc-authority__row {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-top: 40px;
    padding-bottom: 40px;
  }
  body:has(.mrc-wrap) .mrc-authority__number { font-size: 64px; }
}

/* ---------- Principales soluciones — mosaico asimétrico (sección 13, Design DNA 21.8) ---------- */
body:has(.mrc-wrap) .mrc-solutions__head {
  max-width: 620px;
  margin-bottom: var(--sp-12);
}
body:has(.mrc-wrap) .mrc-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 330px);
  gap: 2px;
  background: var(--color-gray-100);
}
body:has(.mrc-wrap) .mrc-tile {
  /* Navy en vez de gray-900 (Fase Visual 2, 2026-09-21): reduce otro
     rectángulo casi negro más en la Home — navy es ya la superficie
     oscura de marca (Cámaras, Por qué Martínez), reutilizarla acá
     unifica el sistema en vez de sumar un cuarto tono oscuro. */
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  isolation: isolate;
}
body:has(.mrc-wrap) .mrc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transition: transform 260ms var(--ease-ui);
}
body:has(.mrc-wrap) .mrc-tile:focus-visible,
body:has(.mrc-wrap) .mrc-industry:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
}
body:has(.mrc-wrap) .mrc-tile:hover img { transform: scale(1.11); }
body:has(.mrc-wrap) .mrc-tile__scrim {
  /* Scrim tintado en navy (no negro puro) — coherente con el fondo
     navy de la tile, se lee como parte del mismo sistema en vez de
     un overlay genérico de ecommerce. */
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(14,20,38,0.88), rgba(14,20,38,0));
  z-index: 1;
  transition: opacity 300ms var(--ease-ui);
}
body:has(.mrc-wrap) .mrc-tile:hover .mrc-tile__scrim { opacity: 0.95; }
body:has(.mrc-wrap) .mrc-tile__label {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 300ms var(--ease-ui);
}
body:has(.mrc-wrap) .mrc-tile:hover .mrc-tile__label { transform: translateY(-2px); }
body:has(.mrc-wrap) .mrc-tile__title { font-weight: 700; font-size: 16px; }
body:has(.mrc-wrap) .mrc-tile__micro { font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,0.72); }
/* Cámara aparece en Hero, mosaico y sección Cámaras (mismo asset real,
   no hay otro disponible) — acá se usa un crop distinto (detalle de
   puerta/bisagra) en vez de repetir el encuadre completo del Hero, sin
   inventar una foto nueva. */
/* Cámara aparece en Hero, mosaico y sección Cámaras (mismo asset real,
   no hay otro disponible) — acá se usa un crop distinto (detalle de
   puerta/bisagra) en vez de repetir el encuadre completo del Hero. */
body:has(.mrc-wrap) .mrc-tile--md img { object-position: 38% 58%; }
body:has(.mrc-wrap) .mrc-tile--lg { grid-column: span 2; grid-row: span 2; }
body:has(.mrc-wrap) .mrc-tile--md { grid-column: span 2; grid-row: span 1; }
body:has(.mrc-wrap) .mrc-tile--sm { grid-column: span 1; grid-row: span 1; }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
  }
  body:has(.mrc-wrap) .mrc-tile { aspect-ratio: 1/1; }
  body:has(.mrc-wrap) .mrc-tile--lg { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
  body:has(.mrc-wrap) .mrc-tile--md { grid-column: span 1; }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-mosaic { grid-template-columns: 1fr; }
  body:has(.mrc-wrap) .mrc-tile--lg,
body:has(.mrc-wrap) .mrc-tile--md,
body:has(.mrc-wrap) .mrc-tile--sm { grid-column: span 1; aspect-ratio: 16/11; }
}

/* ---------- Cámaras Frigoríficas — panel protagonista (sección 14, Design DNA 21.13) ----------
   V2: el crop full-bleed (cover, panel ancho 2.2:1) sobre una foto de
   producto cuadrada con mucho margen blanco propio recortaba el equipo
   hasta volverlo textura irreconocible. Se reemplaza por un layout de
   dos columnas: texto sobre fondo oscuro (autoridad, mismo tono que
   antes) + tarjeta de producto clara con la foto completa en
   object-fit:contain (fotografía técnica limpia, principio ISA) —
   nunca se corta el equipo, sea cual sea el recorte original de la foto. */
body:has(.mrc-wrap) .mrc-camaras {
  /* Antes negro puro (--color-black): creaba una segunda identidad
     oscura distinta del azul marino de "Por qué Martínez" — unificado
     a navy como única gran superficie oscura de marca (feedback
     2026-09-20). */
  background: var(--color-navy);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-camaras__panel {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  align-items: center;
  gap: var(--sp-16);
  padding: calc(var(--sp-16) + var(--sp-4)) 0;
}
body:has(.mrc-wrap) .mrc-camaras__content { max-width: 440px; }
body:has(.mrc-wrap) .mrc-camaras__content h1,
body:has(.mrc-wrap) .mrc-camaras__content h2 { color: var(--color-white); font-size: 48px; line-height: 1.08; letter-spacing: -0.01em; }
body:has(.mrc-wrap) .mrc-camaras__content .mrc-lede { color: rgba(255,255,255,0.85); margin-top: var(--sp-6); }
body:has(.mrc-wrap) .mrc-camaras__tags {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-8) 0;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.68);
}
body:has(.mrc-wrap) .mrc-camaras__tags span { color: rgba(255,255,255,0.9); }
body:has(.mrc-wrap) .mrc-camaras__tags span:not(:last-child)::after {
  content: "·";
  margin-left: var(--sp-3);
  color: rgba(255,255,255,0.35);
}
body:has(.mrc-wrap) .mrc-camaras__content .mrc-btn { margin-top: var(--sp-6); }
body:has(.mrc-wrap) .mrc-camaras__media {
  /* Sin contenedor visual propio (corrección final, 2026-09-26): la
     tarjeta off-white del lote anterior sumaba una capa más —
     "azul → recuadro gris → foto blanca → producto". Se elimina el
     contenedor por completo: la fotografía (con su propio fondo
     blanco real) queda directamente sobre el navy de la sección, sin
     marco, caja ni sombra agregados. */
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 720px;
}
body:has(.mrc-wrap) .mrc-camaras__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-camaras__panel {
    /* minmax(0, 1fr), no 1fr a secas: un track 1fr tiene mínimo
       implícito "auto" (= min-content del contenido), así que sin el
       0 explícito el track nunca baja del ancho mínimo del botón CTA
       ("Cotizar una cámara frigorífica", nowrap) — esa es la causa
       real del overflow horizontal detectado a 320px, no el menú
       mobile. Ajuste puramente estructural, sin tocar copy/CTA. */
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-16) 0;
    gap: var(--sp-8);
  }
  body:has(.mrc-wrap) .mrc-camaras__media { order: -1; aspect-ratio: 16 / 11; }
  body:has(.mrc-wrap) .mrc-camaras__content { max-width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-camaras__content h1,
body:has(.mrc-wrap) .mrc-camaras__content h2 { font-size: 32px; }
  body:has(.mrc-wrap) .mrc-camaras__panel { padding: var(--sp-6); }
  body:has(.mrc-wrap) .mrc-camaras__content .mrc-btn { white-space: normal; text-align: center; }
}

/* ---------- Asesoramos primero — secuencia (sección 15) ----------
   V5 (2026-09-23): activación por paso individual (IntersectionObserver
   por `.mrc-process__step`, ya no un progreso global de sección) +
   línea de progreso propia por fila (--row-progress). Ver comentario
   en el HTML y en js/main.js para el detalle de la lógica. Sin
   soporte JS, todo queda visible y estático (primer paso marcado como
   referencia). Con prefers-reduced-motion, los 6 pasos se muestran
   directamente en su estado activo — ver media query al final de este
   bloque. */
body:has(.mrc-wrap) .mrc-process {
  background: var(--color-gray-100);
}
/* margin-bottom reducido de 120px a 80px (2026-09-22): aire muerto
   entre el heading y la timeline, sin tocar la animación de la línea
   de progreso (sin cambios). */
body:has(.mrc-wrap) .mrc-process__head { max-width: 640px; margin-bottom: calc(var(--sp-16) + var(--sp-4)); }
body:has(.mrc-wrap) .mrc-process__heading { font-size: 46px; }
body:has(.mrc-wrap) .mrc-process__head .mrc-lede { margin-top: var(--sp-6) !important; max-width: 480px; }
body:has(.mrc-wrap) .mrc-process__heading { overflow: visible; }
body:has(.mrc-wrap) .mrc-process__heading-mask { display: block; overflow: hidden; }
body:has(.mrc-wrap) .mrc-process__heading-line { display: block; }

body:has(.mrc-wrap) .js-reveal-ready .mrc-process__heading-line {
  transform: translateY(100%);
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-process__heading-mask:nth-child(2) .mrc-process__heading-line {
  transition-delay: 100ms;
}
body:has(.mrc-wrap) .js-reveal-ready .mrc-process__heading.is-visible .mrc-process__heading-line {
  transform: translateY(0);
}

body:has(.mrc-wrap) .mrc-process__timeline { position: relative; }
body:has(.mrc-wrap) .mrc-process__group { position: relative; }
/* Conector corto entre fila 1 y fila 2 (en vez del margin-top directo
   entre grupos): resuelve la continuidad 03→04 con el mínimo cambio
   visual — una línea vertical corta, no un diagrama. Se pone roja
   solo cuando la fila 1 está completa (sus 3 pasos activos), llevando
   el ojo (y el color) de una fila a la otra. */
body:has(.mrc-wrap) .mrc-process__connector {
  display: block;
  width: 2px;
  height: 22px;
  margin: 9px 0 9px 5px;
  background: rgba(32,32,32,0.15);
  transition: background 400ms ease;
}
body:has(.mrc-wrap) .mrc-process__group:has(.mrc-process__row .mrc-process__step:nth-child(3).is-active) + .mrc-process__connector {
  background: var(--color-red);
}
body:has(.mrc-wrap) .mrc-process__track {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(32,32,32,0.15);
}
/* Relleno rojo propio de cada fila — ya no una sola línea cruzando las
   2 filas (eso obligaba a inventar un conector diagonal entre el paso
   3 y el 4). --row-progress lo escribe JS: 0, 1/3, 2/3 o 1, según
   cuántos pasos de ESA fila están activos. La transición suaviza el
   salto entre valores en vez de que la línea "salte". */
body:has(.mrc-wrap) .mrc-process__track-fill {
  position: absolute;
  top: 5px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--color-red);
  transform: scaleX(var(--row-progress, 0));
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
body:has(.mrc-wrap) .mrc-process__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--sp-8) + var(--sp-2));
}
body:has(.mrc-wrap) .mrc-process__step { position: relative; padding-top: var(--sp-8); }
body:has(.mrc-wrap) .mrc-process__step::after {
  /* nodo sobre la línea compartida */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gray-500);
  z-index: 1;
  transition: background 300ms ease, width 300ms ease, height 300ms ease, top 300ms ease;
}
body:has(.mrc-wrap) .mrc-process__step .num {
  /* Rango pedido 52-64px desktop — 56px. Pendiente en gris medio
     (--color-gray-500, el token reservado justamente para texto
     grande/iconos) en vez de rgba(...,0.16): el número tiene que
     leerse como "parte real del proceso todavía no alcanzada", no
     como casi invisible/deshabilitado. */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  color: var(--color-gray-500);
  line-height: 1;
  display: block;
  margin-bottom: 20px;
  transition: color 300ms ease;
}
/* Jerarquía pedida: título 22-26px, cuerpo 16-18px, número→título
   18-24px (arriba), título→cuerpo 10-14px. */
body:has(.mrc-wrap) .mrc-process__step h3 { font-size: 24px; margin-bottom: var(--sp-3); }
body:has(.mrc-wrap) .mrc-process__step p { font-size: 17px; line-height: 1.6; color: #454545; max-width: 34ch; }

/* Estado por defecto (sin JS de progreso, o antes de que arranque):
   solo el primer paso real (01, clase .is-first) como referencia —
   ya no :first-child, que con 2 filas marcaría también el 04. */
body:has(.mrc-wrap) .mrc-process__step.is-first::after { background: var(--color-red); width: 14px; height: 14px; top: -2px; }
body:has(.mrc-wrap) .mrc-process__step.is-first .num { color: var(--color-red); }

/* Una vez que el IntersectionObserver por paso controla la timeline,
   el estado activo pasa a depender de .is-active (agregado/quitado
   por paso individual, ya no de un progreso global de sección). */
body:has(.mrc-wrap) .mrc-process__timeline.is-progress-ready .mrc-process__step::after { background: var(--color-gray-500); width: 12px; height: 12px; top: -1px; }
body:has(.mrc-wrap) .mrc-process__timeline.is-progress-ready .mrc-process__step .num { color: var(--color-gray-500); }
body:has(.mrc-wrap) .mrc-process__timeline.is-progress-ready .mrc-process__step.is-active::after { background: var(--color-red); width: 14px; height: 14px; top: -2px; }
body:has(.mrc-wrap) .mrc-process__timeline.is-progress-ready .mrc-process__step.is-active .num { color: var(--color-red); }

/* prefers-reduced-motion (sección 10 del brief): sin narrativa de
   scroll, se muestran los 6 pasos directamente en su estado activo —
   nunca deben leerse como deshabilitados solo porque no hay
   animación. */
@media (prefers-reduced-motion: reduce) {
  body:has(.mrc-wrap) .mrc-process__step::after { background: var(--color-red) !important; width: 14px !important; height: 14px !important; top: -2px !important; }
  body:has(.mrc-wrap) .mrc-process__step .num { color: var(--color-red) !important; }
  body:has(.mrc-wrap) .mrc-process__track-fill { transform: scaleX(1) !important; }
  body:has(.mrc-wrap) .mrc-process__connector { background: var(--color-red) !important; }
}

@media (max-width: 1024px) {
  /* Cada grupo (3 pasos) pasa a lista vertical con su propia línea —
     dos tramos verticales cortos con el conector entre ellos, en vez
     de forzar una sola línea recorriendo los 6. */
  body:has(.mrc-wrap) .mrc-process__track {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    height: auto;
    width: 2px;
  }
  body:has(.mrc-wrap) .mrc-process__track-fill {
    top: 0;
    left: 5px;
    height: 100%;
    width: 2px;
    transform: scaleY(var(--row-progress, 0));
    transform-origin: top;
  }
  @media (prefers-reduced-motion: reduce) {
    body:has(.mrc-wrap) .mrc-process__track-fill { transform: scaleY(1) !important; }
  }
  body:has(.mrc-wrap) .mrc-process__row { grid-template-columns: 1fr; gap: var(--sp-16); }
  body:has(.mrc-wrap) .mrc-process__step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding-top: 0;
    padding-left: 28px;
  }
  body:has(.mrc-wrap) .mrc-process__step::after { left: 0; top: 3px; }
  body:has(.mrc-wrap) .mrc-process__step .num { font-size: 40px; margin-bottom: 0; flex-shrink: 0; width: 64px; }
}
@media (max-width: 480px) {
  /* Mismo criterio que Servicios/Por qué Martínez: 46px fijo se sentía
     sobredimensionado a 320-390px, forzando "Asesoramos" casi al borde
     del viewport (cierre visual Home, 2026-09-26). */
  body:has(.mrc-wrap) .mrc-process__heading { font-size: 30px; }
}

/* ---------- Soluciones por comercio (sección 16) — distinto del mosaico y de Cámaras
   V2.1 (2026-09-15): Carnicerías/Panaderías usaban fotografía de contexto
   (carne molida, pan aislado) que Ayelén marcó como poco premium/poco
   profesional. Se reemplaza por el criterio "COMERCIO + EQUIPAMIENTO +
   SOLUCIÓN, no alimento aislado": tarjeta con fondo oscuro (autoridad) +
   foto real de equipamiento propio (batea/horno, ya usada en el
   mosaico) en `object-fit:contain` sobre una tarjeta clara — mismo
   principio que Cámaras (nunca recortar el producto), en formato
   vertical más chico para mantener a Cámaras como la pieza mayor.
   Supermercados y Autoservicios sigue en el banner ancho aparte. ---------- */
body:has(.mrc-wrap) .mrc-industries__head { max-width: 620px; margin-bottom: var(--sp-16); }
/* ---------- Soluciones por comercio — módulo único alternado (2026-09-20) ----------
   Antes: dos componentes distintos (.mrc-industry en grid 2 columnas
   para Carnicerías/Panaderías, .mrc-industry-banner para Supermercados/
   Gastronomía) — mismo overlay pero proporciones, aspect-ratio y
   tratamiento de foto distintos entre sí, se leía como "collage" en
   vez de sistema. Reemplazado por un único módulo grande, misma
   proporción foto/contenido y mismo padding en las 4 filas, que
   alterna de lado por fila (nth-of-type par/impar) — la foto domina
   sobre el label en todos los casos. */
body:has(.mrc-wrap) .mrc-industries__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body:has(.mrc-wrap) .mrc-industry-module {
  /* Navy en vez de gray-900 (Fase Visual 2, 2026-09-21): mismo
     criterio que el mosaico — una sola superficie oscura de marca en
     toda la Home en vez de negro+navy alternando sin motivo. */
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  min-height: 440px;
  background: var(--color-navy);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) { grid-template-columns: 1.18fr 0.82fr; }
body:has(.mrc-wrap) .mrc-industry-module__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-16) var(--sp-12);
}
body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) .mrc-industry-module__content { order: 2; }
body:has(.mrc-wrap) .mrc-industry-module__media {
  order: 2;
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
}
body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) .mrc-industry-module__media { order: 1; }

/* Collage editorial (2026-09-20): las fotos disponibles no tienen
   resolución suficiente para sostenerse como una sola foto grande a
   todo el módulo (se verían borrosas/pixeladas ampliadas). En su
   lugar, 1 pieza grande (la de mejor resolución real de esa fila) +
   2 piezas chicas (detalle de producto), con ritmo asimétrico en vez
   de grilla pareja. Nunca stock — las 3 piezas son siempre foto real
   de contexto o de producto que Martínez fabrica/comercializa. */
body:has(.mrc-wrap) .mrc-collage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  height: 100%;
  background: var(--color-gray-100);
}
body:has(.mrc-wrap) .mrc-collage__lg { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; }
body:has(.mrc-wrap) .mrc-collage__sm { position: relative; overflow: hidden; }
/* Variante de 2 piezas (Carnicerías/Panaderías, 2026-09-21): cuando
   solo hay 2 fotos reales de equipamiento para ese rubro, no se fuerza
   una tercera pieza — una sola fila, misma proporción 1.6/1. */
body:has(.mrc-wrap) .mrc-collage--duo { grid-template-rows: 1fr; }
body:has(.mrc-wrap) .mrc-collage--duo .mrc-collage__lg { grid-row: 1; }
body:has(.mrc-wrap) .mrc-collage__lg picture,
body:has(.mrc-wrap) .mrc-collage__sm picture { display: block; width: 100%; height: 100%; }
body:has(.mrc-wrap) .mrc-collage__lg img,
body:has(.mrc-wrap) .mrc-collage__sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms var(--ease-ui);
}
body:has(.mrc-wrap) .mrc-industry-module:hover .mrc-collage img { transform: scale(1.03); }
body:has(.mrc-wrap) .mrc-industry-module__content h3 { color: var(--color-white); font-size: 30px; margin-bottom: var(--sp-3); }
body:has(.mrc-wrap) .mrc-industry-module__content p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.6; max-width: 38ch; margin: 0 0 var(--sp-4); }
body:has(.mrc-wrap) .mrc-industry-module__content a { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--color-white); }
body:has(.mrc-wrap) .mrc-industry-module__content a:hover { border-bottom: 1px solid var(--color-white); }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-industry-module {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }
  body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-wrap) .mrc-industry-module__media { order: -1; aspect-ratio: 16/11; }
  body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) .mrc-industry-module__media { order: -1; }
  body:has(.mrc-wrap) .mrc-industry-module__content { order: 2; padding: var(--sp-8) var(--sp-6); min-width: 0; }
  body:has(.mrc-wrap) .mrc-industry-module:nth-of-type(even) .mrc-industry-module__content { order: 2; }
}

/* ---------- Servicios — editorial (sección 17) ---------- */
body:has(.mrc-wrap) .mrc-services {
  background: var(--color-gray-100);
}
body:has(.mrc-wrap) .mrc-services__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-16);
  align-items: start;
}
body:has(.mrc-wrap) .mrc-services__intro {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--color-red);
}
body:has(.mrc-wrap) .mrc-services__intro h2 { font-size: 42px; }
body:has(.mrc-wrap) .mrc-services__intro .mrc-lede { margin-top: var(--sp-6); }
body:has(.mrc-wrap) .mrc-services__list {
  /* Fix (2026-09-21): el divisor usaba el mismo color que el fondo de
     la sección (--color-gray-100 sobre --color-gray-100) — invisible.
     Sin separación real entre ítems, los 6 servicios se leían como un
     bloque genérico. */
  border-top: 1px solid rgba(32,32,32,0.12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--sp-8);
}
body:has(.mrc-wrap) .mrc-service-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(32,32,32,0.12);
  max-width: 480px;
}
/* Badge circular en vez de ícono suelto — más peso visual, lee como
   paso de una secuencia (Asesoramos → Instalamos → Ponemos en marcha →
   Reparamos → Acompañamos → Garantía) en vez de 6 bullets sueltos.
   Mismo orden/copy real de los servicios, ya confirmado — no se
   reescribió ni reordenó nada. */
body:has(.mrc-wrap) .mrc-service-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
  background: var(--color-white);
  border: 1.5px solid rgba(196,0,0,0.25);
  border-radius: 50%;
}
body:has(.mrc-wrap) .mrc-service-item__icon svg { width: 20px; height: 20px; }
body:has(.mrc-wrap) .mrc-service-item h3 { margin-bottom: var(--sp-2); font-size: 19px; margin-top: var(--sp-1); }
body:has(.mrc-wrap) .mrc-service-item p { color: #454545; font-size: 16px; line-height: 1.55; }

@media (max-width: 900px) {
  /* minmax(0, 1fr): mismo motivo que en Cámaras — sin el 0 explícito
     el track no baja del min-content de su contenido (acá, la lista
     de servicios) y desbordaba el viewport en anchos muy angostos. */
  body:has(.mrc-wrap) .mrc-services__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-services__list { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-wrap) .mrc-service-item { max-width: 100%; }
}
@media (max-width: 480px) {
  /* Sin este override el heading quedaba fijo en 42px (tamaño desktop)
     incluso a 320-390px — mismo criterio ya aplicado en Hero y Cámaras,
     que sí reducen su heading custom en mobile (cierre visual Home,
     2026-09-26). */
  body:has(.mrc-wrap) .mrc-services__intro h2 { font-size: 28px; }
}

/* ---------- Por qué Martínez — sección oscura (sección 18) ---------- */
body:has(.mrc-wrap) .mrc-why {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-why__grid {
  /* ~40/60 (decisión final 2026-09-22, antes 0.9fr/1.1fr ~45/55): sin
     el bloque "+30" (movido a la banda de autoridad, no se repite acá)
     la columna izquierda es más liviana, se achica un poco a favor de
     la columna de argumentos. */
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: calc(var(--sp-16) + var(--sp-4));
  align-items: center;
}
body:has(.mrc-wrap) .mrc-why__head h2 { color: var(--color-white); font-size: 46px; }
body:has(.mrc-wrap) .mrc-why__head .mrc-lede { color: rgba(255,255,255,0.75); margin-top: var(--sp-6); }
body:has(.mrc-wrap) .mrc-why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
body:has(.mrc-wrap) .mrc-why__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
body:has(.mrc-wrap) .mrc-why__item:nth-child(odd) { padding-right: var(--sp-8); }
body:has(.mrc-wrap) .mrc-why__item__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-top: 2px;
}
body:has(.mrc-wrap) .mrc-why__item__icon svg { width: 18px; height: 18px; }
body:has(.mrc-wrap) .mrc-why__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: var(--sp-1);
}
body:has(.mrc-wrap) .mrc-why__item span { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.78); }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-why__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-why__list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Mismo criterio que Servicios: 46px fijo se sentía sobredimensionado
     a 320-390px sin reducción (cierre visual Home, 2026-09-26). */
  body:has(.mrc-wrap) .mrc-why__head h2 { font-size: 30px; }
}

/* ---------- Local físico en Posadas (sección 19, V2 — reemplaza Cobertura) ----------
   Nueva prioridad de Ayelén (2026-09-15): dirección y horario visibles
   fuera del footer, con mapa preparado (placeholder honesto, sin
   coordenadas inventadas ni embeds no autorizados). */
body:has(.mrc-wrap) .mrc-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}
body:has(.mrc-wrap) .mrc-location__content h2 { font-size: 32px; margin-top: var(--sp-2); }
body:has(.mrc-wrap) .mrc-location__address {
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-gray-900);
  margin: var(--sp-4) 0;
  line-height: 1.5;
}
body:has(.mrc-wrap) .mrc-location__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  color: #454545;
  margin-bottom: var(--sp-6);
}
body:has(.mrc-wrap) .mrc-location__hours strong { font-family: var(--font-display); color: var(--color-gray-900); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
body:has(.mrc-wrap) .mrc-location__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
body:has(.mrc-wrap) .mrc-location__coverage { color: #454545; font-size: 15px; max-width: 46ch; margin: 0 0 var(--sp-3); }
body:has(.mrc-wrap) .mrc-location__pins { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
body:has(.mrc-wrap) .mrc-location__pins li {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-900);
  background: var(--color-gray-100);
  border: 1px solid rgba(32,32,32,0.08);
  padding: 7px 14px;
  border-radius: 100px;
}
/* Envíos a todo el país — deliberadamente sin pill/badge (sería
   sobre-marketing para un dato logístico) y con margen propio para no
   leerse como un pin regional más. */
body:has(.mrc-wrap) .mrc-location__shipping {
  color: #454545;
  font-size: 14px;
  margin-top: var(--sp-4);
}
/* Alcance (cobertura regional + envíos): reemplaza el recuadro de mapa — sin mapa falso */
body:has(.mrc-wrap) .mrc-location__reach { border-left: 1px solid var(--color-gray-100); padding-left: var(--sp-12); }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-location__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-location__reach { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-gray-100); padding-top: var(--sp-6); }
}

/* ---------- Proyectos que equipamos ---------- */
body:has(.mrc-wrap) .mrc-projects__head { max-width: 620px; margin-bottom: var(--sp-12); }
body:has(.mrc-wrap) .mrc-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
body:has(.mrc-wrap) .mrc-project {
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
body:has(.mrc-wrap) .mrc-project:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(17,17,17,0.12); }
body:has(.mrc-wrap) .mrc-project__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
body:has(.mrc-wrap) .mrc-project:hover .mrc-project__media img { transform: scale(1.04); }
body:has(.mrc-wrap) .mrc-project__body { padding: var(--sp-6); }
body:has(.mrc-wrap) .mrc-project__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-cobalt);
  background: var(--color-ice);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: var(--sp-3);
}
body:has(.mrc-wrap) .mrc-project__body h3 { font-size: 18px; margin-bottom: var(--sp-2); }
body:has(.mrc-wrap) .mrc-project__body p { font-size: 14.5px; color: #4a4a4a; }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-projects__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- Preguntas frecuentes — acordeón accesible ----------
   Botón real (no <div> con onclick), aria-expanded/aria-controls,
   animado con la técnica grid-template-rows (0fr↔1fr), que anima sin
   conocer la altura del contenido y respeta prefers-reduced-motion
   (regla global ya definida arriba deja la transición casi instantánea). */
/* Layout 35/65 (feedback 2026-09-20): antes heading a todo el ancho +
   acordeón a todo el ancho debajo dejaba un vacío grande sobre la
   lista. La columna izquierda ahora queda fija mientras se hace
   scroll por las preguntas — mismo contenido, sin agregar copy nuevo
   salvo el prompt "¿Tenés otra duda?" (navegacional, no un dato
   comercial nuevo). */
body:has(.mrc-wrap) .mrc-faq__grid {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
body:has(.mrc-wrap) .mrc-faq__head { position: sticky; top: calc(var(--nav-height) + var(--sp-8)); }
body:has(.mrc-wrap) .mrc-faq__prompt {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
body:has(.mrc-wrap) .mrc-faq__prompt span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-gray-900); }
body:has(.mrc-wrap) .mrc-faq__list {
  border-top: 1px solid var(--color-gray-100);
}
@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-wrap) .mrc-faq__head { position: static; }
}
body:has(.mrc-wrap) .mrc-faq__item { border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  background: none;
  border: none;
  text-align: left;
  padding: var(--sp-6) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-gray-900);
  transition: color 180ms ease;
}
body:has(.mrc-wrap) .mrc-faq__trigger:hover { color: var(--color-red); }
body:has(.mrc-wrap) .mrc-faq__trigger:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 4px;
  border-radius: 6px;
}
body:has(.mrc-wrap) .mrc-faq__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-gray-500);
  transition: transform 250ms ease, color 250ms ease;
}
body:has(.mrc-wrap) .mrc-faq__trigger[aria-expanded="true"] .mrc-faq__chevron { transform: rotate(180deg); color: var(--color-red); }
body:has(.mrc-wrap) .mrc-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
}
body:has(.mrc-wrap) .mrc-faq__panel-inner { overflow: hidden; }
body:has(.mrc-wrap) .mrc-faq__item.is-open .mrc-faq__panel { grid-template-rows: 1fr; }
body:has(.mrc-wrap) .mrc-faq__panel p {
  padding-bottom: var(--sp-6);
  padding-right: var(--sp-8);
  color: #454545;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 68ch;
}

/* ---------- CTA final (sección 20) ---------- */
body:has(.mrc-wrap) .mrc-cta-final {
  /* Antes calc(section-gap + sp-16) = 176px, después 112px. Reducido
     ~20% más (2026-09-22, feedback: "puede reducirse aprox 20-30% si
     mejora la página") — sigue leyéndose fuerte/comercial, menos pared
     roja. */
  background: var(--color-red);
  color: var(--color-white);
  text-align: center;
  padding-top: 88px;
  padding-bottom: 88px;
}
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-cta-final { padding-top: 60px; padding-bottom: 60px; }
}
body:has(.mrc-wrap) .mrc-cta-final__inner { max-width: 640px; margin: 0 auto; }
body:has(.mrc-wrap) .mrc-cta-final h2 { color: var(--color-white); font-size: 48px; }
body:has(.mrc-wrap) .mrc-cta-final p { color: rgba(255,255,255,0.92); margin-top: var(--sp-4); font-size: 18px; }
body:has(.mrc-wrap) .mrc-cta-final__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
body:has(.mrc-wrap) .mrc-cta-final .mrc-btn--primary { background: var(--color-white); color: var(--color-red); }
body:has(.mrc-wrap) .mrc-cta-final .mrc-btn--primary:hover { background: var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-cta-final .mrc-btn--secondary.on-dark { border-color: rgba(255,255,255,0.6); }

/* ---------- Footer (sección 21) ---------- */
body:has(.mrc-wrap) .mrc-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.75);
}
body:has(.mrc-wrap) .mrc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-12);
}
body:has(.mrc-wrap) .mrc-footer__brand img { height: 44px; width: auto; }
body:has(.mrc-wrap) .mrc-footer__brand p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.5; margin-top: var(--sp-4); max-width: 220px; }
body:has(.mrc-wrap) .mrc-footer h3 { color: var(--color-white); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-4); }
body:has(.mrc-wrap) .mrc-footer ul li { margin-bottom: var(--sp-3); font-size: 15px; line-height: 1.5; }
body:has(.mrc-wrap) .mrc-footer ul li a:hover { color: var(--color-white); }
body:has(.mrc-wrap) .mrc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--sp-6);
  /* Reserva justa: offset real del flotante (bottom) + su alto real +
     un margen mínimo — recalculado al tamaño actual del botón (60px
     desktop / 56px mobile) para no dejar aire de más ni de menos. */
  padding-bottom: calc(28px + 60px + 12px);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  body:has(.mrc-wrap) .mrc-footer__bottom { padding-bottom: calc(16px + 56px + 12px); }
}

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-footer__grid { grid-template-columns: repeat(2, 1fr); }
  body:has(.mrc-wrap) .mrc-footer__brand { grid-column: span 2; }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-footer__grid { grid-template-columns: 1fr; }
  body:has(.mrc-wrap) .mrc-footer__brand { grid-column: span 1; }
}

/* ---------- WhatsApp flotante (sección 22, V2) ----------
   Un solo punto de contacto flotante, discreto, dentro de la
   identidad MRC (rojo de marca, no verde WhatsApp) — no "llenar de
   botones verdes" por instrucción explícita. */
body:has(.mrc-wrap) .mrc-whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 25px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(17,17,17,0.22);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
body:has(.mrc-wrap) .mrc-whatsapp-float:hover {
  filter: brightness(0.93);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17,17,17,0.26);
}
body:has(.mrc-wrap) .mrc-whatsapp-float:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
}
body:has(.mrc-wrap) .mrc-whatsapp-float svg { width: 22px; height: 22px; flex-shrink: 0; }
body:has(.mrc-wrap) .mrc-whatsapp-float__label-mobile { display: none; }

/* Variante de contraste — únicamente mientras el CTA final rojo está en
   viewport (ver main.js). Mismo tamaño, posición, copy y función; solo
   cambia la superficie para no perder contraste rojo-sobre-rojo. */
body:has(.mrc-wrap) .mrc-whatsapp-float.is-on-red {
  background: var(--color-white);
  color: var(--color-red);
}

@media (max-width: 640px) {
  body:has(.mrc-wrap) .mrc-whatsapp-float {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    height: 56px;
    padding: 0 20px;
    gap: var(--sp-2);
  }
  body:has(.mrc-wrap) .mrc-whatsapp-float svg { width: 20px; height: 20px; }
  body:has(.mrc-wrap) .mrc-whatsapp-float__label-desktop { display: none; }
  body:has(.mrc-wrap) .mrc-whatsapp-float__label-mobile { display: inline; }
}

/* ---------- Scroll-reveal (sección 16) ----------
   Progressive enhancement: [data-reveal] es visible por defecto. Solo
   cuando el JS confirma soporte de IntersectionObserver y que el
   usuario no pidió prefers-reduced-motion, el root recibe
   .js-reveal-ready y ahí sí se oculta hasta que el observer agrega
   .is-visible. Nada depende del JS para ser visible. */
body:has(.mrc-wrap) .js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
body:has(.mrc-wrap) .js-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
body:has(.mrc-wrap) .js-reveal-ready [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 70ms; }
body:has(.mrc-wrap) .js-reveal-ready [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 140ms; }
body:has(.mrc-wrap) .js-reveal-ready [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 210ms; }
body:has(.mrc-wrap) .js-reveal-ready [data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 280ms; }
body:has(.mrc-wrap) .js-reveal-ready [data-reveal-group] > [data-reveal]:nth-child(n+6) { transition-delay: 340ms; }

/* =========================================================
   PÁGINAS INTERIORES — Productos / Landing de familia / Ficha
   (Jornada autónoma, 2026-09-23). Reutiliza tokens, tipografía,
   botones, .mrc-mosaic/.mrc-tile y .mrc-faq ya existentes arriba
   sin duplicarlos — acá solo lo que todavía no existía: breadcrumb,
   hero interior, buscador + filtro por necesidad, links de rubro,
   tags genéricos, pasos, definiciones, card de producto y layout
   de ficha. ========================================================= */

/* ---------- Breadcrumb ---------- */
body:has(.mrc-wrap) .mrc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  /* #8C8C8C (--color-gray-500) es solo para texto grande/iconos/bordes
     (ver comentario del token) — a 13px sobre --surface-page da 3.2:1,
     por debajo de AA (4.5:1). #454545 ya es el gris secundario probado
     en el resto del sitio (.mrc-lede, tarjetas de rubro) y sí cumple. */
  color: #454545;
  padding-top: var(--sp-6);
}
body:has(.mrc-wrap) .mrc-breadcrumb a { color: #454545; transition: color 150ms ease; }
body:has(.mrc-wrap) .mrc-breadcrumb a:hover { color: var(--color-red); }
body:has(.mrc-wrap) .mrc-breadcrumb span[aria-current] { color: var(--color-gray-900); font-weight: 600; }
body:has(.mrc-wrap) .mrc-breadcrumb__sep { color: var(--border-on-light); }

/* ---------- Hero interior (categoría / producto) ---------- */
body:has(.mrc-wrap) .mrc-page-hero { padding-top: var(--sp-8); padding-bottom: var(--sp-16); }
body:has(.mrc-wrap) .mrc-page-hero__intro { max-width: 720px; }
body:has(.mrc-wrap) .mrc-page-hero h1 { font-size: 48px; margin-top: var(--sp-2); }
body:has(.mrc-wrap) .mrc-page-hero .mrc-lede { margin-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-page-hero__actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
body:has(.mrc-wrap) .mrc-subsection { padding-top: var(--sp-16); }
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-page-hero h1 { font-size: 30px; }
  body:has(.mrc-wrap) .mrc-subsection { padding-top: var(--sp-12); }
}

/* ---------- Buscador + filtro por necesidad (/productos) ---------- */
body:has(.mrc-wrap) .mrc-catalog-tools { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
body:has(.mrc-wrap) .mrc-catalog-search { position: relative; max-width: 460px; }
body:has(.mrc-wrap) .mrc-catalog-search input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 18px 14px 44px;
  border: 1.5px solid var(--border-on-light);
  border-radius: var(--radius);
  background: var(--surface-white);
  color: var(--color-gray-900);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body:has(.mrc-wrap) .mrc-catalog-search input::placeholder { color: var(--color-gray-500); }
body:has(.mrc-wrap) .mrc-catalog-search input:focus-visible {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(196,0,0,0.12);
}
body:has(.mrc-wrap) .mrc-catalog-search svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--color-gray-500); pointer-events: none;
}
body:has(.mrc-wrap) .mrc-need-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-need-filter button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-gray-900);
  background: var(--surface-white);
  border: 1.5px solid var(--border-on-light);
  border-radius: 999px;
  padding: 9px 16px;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
body:has(.mrc-wrap) .mrc-need-filter button:hover { border-color: var(--color-red); color: var(--color-red); }
body:has(.mrc-wrap) .mrc-need-filter button[aria-pressed="true"] {
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
  color: var(--color-white);
}
body:has(.mrc-wrap) .mrc-need-filter button:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 2px; }
body:has(.mrc-wrap) .mrc-catalog-empty {
  display: none;
  padding: var(--sp-16) 0;
  text-align: center;
  color: #454545;
  font-size: 16px;
}
body:has(.mrc-wrap) .mrc-catalog-empty.is-visible { display: block; }

/* ---------- /productos — familias de refrigeración (patrón propio, 2026-09-28) ----------
   Deliberadamente distinto de .mrc-mosaic (Home): filas editoriales
   blancas, no grid asimétrico de tiles — Productos = navegación,
   Home = storytelling, no deben sentirse como la misma pantalla.
   No se toca ni se reutiliza .mrc-mosaic/.mrc-tile de Home. */
body:has(.mrc-wrap) .mrc-catalog-section + .mrc-catalog-section { margin-top: var(--sp-24); }
body:has(.mrc-wrap) .mrc-catalog-section__head { max-width: 640px; margin-bottom: var(--sp-12); }
body:has(.mrc-wrap) .mrc-catalog-family-list { display: flex; flex-direction: column; }
/* [hidden] pisado por especificidad: una regla de clase con display
   explícito empata en especificidad con [hidden]{display:none} del UA
   stylesheet y gana por orden de cascada (autor > UA) — sin este
   override, el buscador/filtro JS marca hidden=true pero el ítem
   sigue viéndose. Mismo motivo por el que .mrc-tile (Home) nunca tuvo
   este bug: no define su propio display. */
body:has(.mrc-wrap) .mrc-catalog-family[hidden],
body:has(.mrc-wrap) .mrc-catalog-secondary-item[hidden] { display: none; }
body:has(.mrc-wrap) .mrc-catalog-family {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--color-gray-100);
}
body:has(.mrc-wrap) .mrc-catalog-family-list > .mrc-catalog-family:last-child { border-bottom: 1px solid var(--color-gray-100); }
/* Alternancia editorial: cambia la POSICIÓN, no la escala. En filas pares
   la columna ancha pasa a la izquierda (texto) y la foto queda en la
   columna fija de la derecha — sin esto, `order:2` mandaba la foto a la
   columna 1fr y la fila se duplicaba (~756px vs ~380px). */
body:has(.mrc-wrap) .mrc-catalog-family:nth-of-type(even) { grid-template-columns: 1fr minmax(280px, 380px); }
body:has(.mrc-wrap) .mrc-catalog-family:nth-of-type(even) .mrc-catalog-family__media { order: 2; }
/* Producto limpio: sin tarjeta, sin fondo, sin padding-marco. La foto
   conserva su fondo natural y su proporción original. */
body:has(.mrc-wrap) .mrc-catalog-family__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-catalog-family__content h3 { font-size: 30px; }
body:has(.mrc-wrap) .mrc-catalog-family__content .mrc-lede { margin-top: var(--sp-3); max-width: 46ch; }
body:has(.mrc-wrap) .mrc-catalog-family__content .mrc-tags { margin-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-catalog-family__content .mrc-btn { margin-top: var(--sp-6); }
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-catalog-family { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-12) 0; }
  body:has(.mrc-wrap) .mrc-catalog-family:nth-of-type(even) { grid-template-columns: 1fr; }
  body:has(.mrc-wrap) .mrc-catalog-family:nth-of-type(even) .mrc-catalog-family__media { order: 0; }
  body:has(.mrc-wrap) .mrc-catalog-family__media { max-width: 320px; }
}

/* Nivel secundario: sin landing propia todavía — mismo lenguaje visual
   pero de menor peso, CTA de consulta en vez de "Ver productos". */
body:has(.mrc-wrap) .mrc-catalog-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: var(--sp-8) var(--sp-16); align-items: end; margin-top: var(--sp-8); }
body:has(.mrc-wrap) .mrc-catalog-secondary:not(:has(> :not([hidden]))) { display: none; }
body:has(.mrc-wrap) .mrc-catalog-secondary-item { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-catalog-secondary-item__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-catalog-secondary-item h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: var(--sp-2) 0 0; }
body:has(.mrc-wrap) .mrc-catalog-secondary-item p { font-size: 14.5px; color: #454545; margin: 0; }
body:has(.mrc-wrap) .mrc-catalog-secondary-item a.mrc-btn--text { align-self: flex-start; }
/* Mostradores refrigerados: sin fotografía real disponible — acceso
   textual discreto, nunca una caja ni un placeholder. */
body:has(.mrc-wrap) .mrc-catalog-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--color-gray-100); font-size: 15px; }
body:has(.mrc-wrap) .mrc-catalog-more[hidden] { display: none; }
body:has(.mrc-wrap) .mrc-catalog-more strong { font-family: var(--font-display); font-weight: 700; }
@media (max-width: 768px) { body:has(.mrc-wrap) .mrc-catalog-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-catalog-secondary { grid-template-columns: 1fr; } body:has(.mrc-wrap) .mrc-catalog-secondary-item__media { max-width: 320px; } }

/* ---------- /productos — acceso rápido por rubro ----------
   Distinto de .mrc-industry-module de Home (paneles compactos, no
   filas full-bleed alternadas) — misma identidad navy+foto, otra
   composición, para no repetir literalmente la sección de Home. */
/* Respiración antes del CTA rojo final: .mrc-subsection solo define padding-top,
   así que el panel quedaba pegado (0 px) al bloque rojo. Token global de sección. */
body:has(.mrc-wrap) .mrc-rubro-quick-section { padding-bottom: var(--section-gap); }
body:has(.mrc-wrap) .mrc-rubro-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-rubro-quick__item {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-navy);
  isolation: isolate;
}
body:has(.mrc-wrap) .mrc-rubro-quick__item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 260ms var(--ease-ui); }
body:has(.mrc-wrap) .mrc-rubro-quick__item:hover img { transform: scale(1.1); }
body:has(.mrc-wrap) .mrc-rubro-quick__scrim { position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(to top, rgba(14,20,38,0.92), rgba(14,20,38,0)); }
body:has(.mrc-wrap) .mrc-rubro-quick__label { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); color: var(--color-white); font-family: var(--font-display); }
body:has(.mrc-wrap) .mrc-rubro-quick__label strong { display: block; font-size: 17px; font-weight: 700; }
body:has(.mrc-wrap) .mrc-rubro-quick__label span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.75); }
@media (max-width: 900px) { body:has(.mrc-wrap) .mrc-rubro-quick { grid-template-columns: repeat(2, 1fr); } body:has(.mrc-wrap) .mrc-rubro-quick__item { aspect-ratio: 4/3; } }

/* ---------- Tags genéricos (reutiliza el lenguaje visual de .mrc-camaras__tags sobre fondo claro) ---------- */
body:has(.mrc-wrap) .mrc-tags { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: #454545; }
body:has(.mrc-wrap) .mrc-tags span { color: var(--color-gray-900); }
body:has(.mrc-wrap) .mrc-tags span:not(:last-child)::after { content: "·"; margin-left: var(--sp-3); color: var(--border-on-light); }

/* ---------- Pasos ("qué necesitamos para cotizar") ---------- */
body:has(.mrc-wrap) .mrc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
body:has(.mrc-wrap) .mrc-step { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-step__num { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--color-red); }
body:has(.mrc-wrap) .mrc-step p { font-size: 15.5px; line-height: 1.5; }
@media (max-width: 900px) { body:has(.mrc-wrap) .mrc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-steps { grid-template-columns: 1fr; } }

/* ---------- Definiciones (MT/BT) ---------- */
body:has(.mrc-wrap) .mrc-definition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
body:has(.mrc-wrap) .mrc-definition-card { padding: var(--sp-8); background: var(--surface-white); border: 1px solid var(--border-on-light); border-radius: var(--radius); }
body:has(.mrc-wrap) .mrc-definition-card h3 { margin-bottom: var(--sp-2); }
body:has(.mrc-wrap) .mrc-definition-card p { color: #454545; font-size: 16px; }
body:has(.mrc-wrap) .mrc-definition-card__range { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--color-navy); }
@media (max-width: 768px) { body:has(.mrc-wrap) .mrc-definition-grid { grid-template-columns: 1fr; } }

/* ---------- Card de producto (ejemplo de configuración / relacionados) ---------- */
body:has(.mrc-wrap) .mrc-product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-white);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 380px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
body:has(.mrc-wrap) .mrc-product-card:hover { box-shadow: var(--shadow-surface); transform: translateY(-3px); }
body:has(.mrc-wrap) .mrc-product-card__media { aspect-ratio: 1/1; background: var(--surface-soft); }
body:has(.mrc-wrap) .mrc-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-6); }
body:has(.mrc-wrap) .mrc-product-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-ice);
  padding: 5px 10px;
  border-radius: 999px;
}
body:has(.mrc-wrap) .mrc-product-card__body h3 { font-size: 19px; }
body:has(.mrc-wrap) .mrc-product-card__body p { font-size: 14.5px; color: #454545; }
body:has(.mrc-wrap) .mrc-product-card__link { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--color-red); }

/* ---------- Grid de productos (SKU cerrado — varias fichas reales) ---------- */
body:has(.mrc-wrap) .mrc-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6); }
body:has(.mrc-wrap) .mrc-product-grid .mrc-product-card { max-width: none; }
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-product-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Banda dúo de fotos (variación editorial de familia) ---------- */
body:has(.mrc-wrap) .mrc-duo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-duo-band__item { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-white); }
body:has(.mrc-wrap) .mrc-duo-band__item img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-16); }
body:has(.mrc-wrap) .mrc-duo-band__caption {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--color-gray-900);
}
@media (max-width: 640px) {
  body:has(.mrc-wrap) .mrc-duo-band { grid-template-columns: 1fr; }
  body:has(.mrc-wrap) .mrc-duo-band__item img { padding: var(--sp-8); }
}

/* ---------- Ficha de producto ---------- */
body:has(.mrc-wrap) .mrc-ficha { display: grid; grid-template-columns: minmax(320px, 480px) 1fr; gap: var(--sp-16); align-items: start; }
body:has(.mrc-wrap) .mrc-ficha__gallery {
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-6));
}
body:has(.mrc-wrap) .mrc-ficha__gallery img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-ficha__content { display: flex; flex-direction: column; gap: var(--sp-8); }
body:has(.mrc-wrap) .mrc-ficha__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-8); border-top: 1px solid var(--color-gray-100); padding-top: var(--sp-6); margin: 0; }
body:has(.mrc-wrap) .mrc-ficha__specs dt { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: #454545; margin-bottom: 4px; }
body:has(.mrc-wrap) .mrc-ficha__specs dd { font-size: 16px; font-weight: 600; margin: 0; color: var(--color-gray-900); }
body:has(.mrc-wrap) .mrc-ficha__note { font-size: 14px; line-height: 1.5; color: #454545; border-top: 1px solid var(--color-gray-100); padding-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-ficha__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-ficha { grid-template-columns: 1fr; gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-ficha__gallery { position: static; max-width: 360px; }
  body:has(.mrc-wrap) .mrc-ficha__specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-ficha__specs { grid-template-columns: 1fr; }
}

/* =========================================================
   PÁGINAS INSTITUCIONALES — Soluciones / Servicios / Nosotros /
   Contacto (jornada autónoma, 2026-09-23). Reutiliza .mrc-page-hero,
   .mrc-tags, .mrc-product-card, .mrc-cta-final, breadcrumb. Solo lo
   que faltaba: bloque de rubro (Soluciones), bloque de servicio
   (Servicios), bloque de dato institucional (Nosotros) y formulario
   (Contacto). ========================================================= */

/* ---------- Rubro (Soluciones) ---------- */
body:has(.mrc-wrap) .mrc-rubro-block { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
body:has(.mrc-wrap) .mrc-rubro-block:nth-of-type(even) { background: var(--surface-white); }
body:has(.mrc-wrap) .mrc-rubro-block__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: center; }
body:has(.mrc-wrap) .mrc-rubro-block__media { max-width: 420px; justify-self: center; width: 100%; }
body:has(.mrc-wrap) .mrc-rubro-block__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-rubro-block__products { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-rubro-block__products dt { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: #454545; margin-bottom: var(--sp-2); }
body:has(.mrc-wrap) .mrc-rubro-block__products dd { margin: 0; font-size: 15.5px; }
body:has(.mrc-wrap) .mrc-rubro-block__products dd a { color: var(--color-red); font-weight: 600; }
body:has(.mrc-wrap) .mrc-rubro-block__products dd a:hover { border-bottom: 1px solid var(--color-red); }
body:has(.mrc-wrap) .mrc-rubro-block__advise { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--color-ice); border-radius: var(--radius); }
body:has(.mrc-wrap) .mrc-rubro-block__advise p { font-size: 15px; margin-bottom: var(--sp-3); }
@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-rubro-block { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  body:has(.mrc-wrap) .mrc-rubro-block__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-rubro-block .mrc-btn--text { white-space: normal; }
  body:has(.mrc-wrap) .mrc-rubro-block__media { order: -1; max-width: 300px; justify-self: start; }
}

/* ---------- Servicio (Servicios) ---------- */
body:has(.mrc-wrap) .mrc-service-block { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8) 0; border-top: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-service-block:last-child { border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-service-block__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-ice); color: var(--color-navy); display: flex; align-items: center; justify-content: center; }
body:has(.mrc-wrap) .mrc-service-block__icon svg { width: 22px; height: 22px; }
body:has(.mrc-wrap) .mrc-service-block h2 { margin-bottom: var(--sp-2); font-size: 21px; font-weight: 600; }
body:has(.mrc-wrap) .mrc-service-block p { color: #454545; max-width: 60ch; }
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-service-block { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---------- Dato institucional (Nosotros) ---------- */
body:has(.mrc-wrap) .mrc-about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
body:has(.mrc-wrap) .mrc-about-item dt { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: var(--sp-2); }
body:has(.mrc-wrap) .mrc-about-item dd { margin: 0; color: #454545; font-size: 15.5px; line-height: 1.6; }
@media (max-width: 768px) { body:has(.mrc-wrap) .mrc-about-grid { grid-template-columns: 1fr; } }

/* ---------- Formulario (Contacto) ---------- */
body:has(.mrc-wrap) .mrc-form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 480px; }
body:has(.mrc-wrap) .mrc-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--color-gray-900); }
body:has(.mrc-wrap) .mrc-form input,
body:has(.mrc-wrap) .mrc-form textarea {
  font-family: var(--font-body); font-size: 16px; padding: 13px 16px;
  border: 1.5px solid var(--border-on-light); border-radius: var(--radius);
  background: var(--surface-white); color: var(--color-gray-900);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body:has(.mrc-wrap) .mrc-form textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); }
body:has(.mrc-wrap) .mrc-form input:focus-visible,
body:has(.mrc-wrap) .mrc-form textarea:focus-visible {
  outline: none; border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(196,0,0,0.12);
}
body:has(.mrc-wrap) .mrc-form__note { font-size: 13.5px; color: #454545; margin-top: var(--sp-2); }
body:has(.mrc-wrap) .mrc-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
@media (max-width: 900px) { body:has(.mrc-wrap) .mrc-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); } }


/* ======================================================================
   /productos/camaras-frigorificas — V2 (landing de familia)
   Componentes propios `.mrc-cam-*`, sin tocar .mrc-camaras (Home) ni
   componentes compartidos. Sin tarjetas: filetes finos y espacio.
   ====================================================================== */
body:has(.mrc-wrap) .mrc-cam-hero { background: var(--surface-white); }
body:has(.mrc-wrap) .mrc-cam-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--sp-16);
  align-items: center;
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
body:has(.mrc-wrap) .mrc-cam-hero h1 { font-size: 48px; line-height: 1.08; }
body:has(.mrc-wrap) .mrc-cam-hero .mrc-lede { margin-top: var(--sp-4); max-width: 46ch; }
body:has(.mrc-wrap) .mrc-cam-hero__actions { margin-top: var(--sp-6); }
body:has(.mrc-wrap) .mrc-cam-hero__media img { display: block; width: 100%; height: auto; }

body:has(.mrc-wrap) .mrc-cam-head { max-width: 720px; }
body:has(.mrc-wrap) .mrc-cam-head .mrc-lede { margin-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-cam-note { margin-top: var(--sp-6); max-width: 640px; color: #454545; font-size: 15.5px; }
body:has(.mrc-wrap) .mrc-cam-note strong { color: var(--color-gray-900); }

/* Media / baja temperatura: dos columnas con filete navy, sin tarjeta */
body:has(.mrc-wrap) .mrc-cam-temps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); margin-top: var(--sp-8); max-width: 900px; }
body:has(.mrc-wrap) .mrc-cam-temp { border-top: 2px solid var(--color-navy); padding-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-cam-temp h3 { font-size: 24px; }
body:has(.mrc-wrap) .mrc-cam-temp p { margin-top: var(--sp-2); color: #454545; }
body:has(.mrc-wrap) .mrc-cam-temp .mrc-cam-temp__range { margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--color-navy); }
body:has(.mrc-wrap) .mrc-cam-temp__range span { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: #454545; }

/* Walk-in Cooler: intro + lista funcional (sin imagen) */
body:has(.mrc-wrap) .mrc-cam-walkin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro list" "foot list"; grid-template-rows: auto 1fr; column-gap: var(--sp-16); row-gap: 0; align-items: start; }
body:has(.mrc-wrap) .mrc-cam-walkin__intro { grid-area: intro; }
body:has(.mrc-wrap) .mrc-cam-walkin .mrc-cam-list { grid-area: list; }
body:has(.mrc-wrap) .mrc-cam-walkin__foot { grid-area: foot; }
body:has(.mrc-wrap) .mrc-cam-walkin__foot .mrc-btn { margin-top: var(--sp-6); }

body:has(.mrc-wrap) .mrc-cam-walkin__intro .mrc-lede { margin-top: var(--sp-4); }
body:has(.mrc-wrap) .mrc-cam-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-cam-list li { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) 0; border-top: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-cam-list strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
body:has(.mrc-wrap) .mrc-cam-list span { color: #454545; font-size: 15.5px; }

/* Componentes: lista compacta en dos columnas */
body:has(.mrc-wrap) .mrc-cam-components { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-16); align-items: start; }
body:has(.mrc-wrap) .mrc-cam-items { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sp-8); border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-cam-items li { break-inside: avoid; padding: var(--sp-3) 0; border-top: 1px solid var(--color-gray-100); font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }

/* Datos para cotizar */
body:has(.mrc-wrap) .mrc-cam-data { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
body:has(.mrc-wrap) .mrc-cam-data li { display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--color-navy); padding-top: var(--sp-3); }
body:has(.mrc-wrap) .mrc-cam-data strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
body:has(.mrc-wrap) .mrc-cam-data span { color: #454545; font-size: 14.5px; }
body:has(.mrc-wrap) .mrc-cam-data__cta { margin-top: var(--sp-8); }

/* Respaldo: banda navy breve, específica de la compra de una cámara */
body:has(.mrc-wrap) .mrc-cam-support { background: var(--color-navy); color: var(--color-white); margin-top: var(--sp-24); padding: var(--sp-16) 0; }
body:has(.mrc-wrap) .mrc-cam-support__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-16); align-items: center; }
body:has(.mrc-wrap) .mrc-cam-support h2 { color: var(--color-white); font-size: 36px; }
body:has(.mrc-wrap) .mrc-cam-support p { margin-top: var(--sp-4); color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.6; max-width: 56ch; }
body:has(.mrc-wrap) .mrc-cam-support__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
body:has(.mrc-wrap) .mrc-cam-support__list li { padding: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,0.2); font-family: var(--font-display); font-weight: 600; font-size: 18px; }

/* Ejemplo de proyecto: imagen + datos, sin tarjeta flotante */
body:has(.mrc-wrap) .mrc-cam-example { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--sp-16); align-items: center; margin-top: var(--sp-8); padding: var(--sp-8) 0; border-top: 1px solid var(--color-gray-100); border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-wrap) .mrc-cam-example__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-cam-example__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); max-width: 560px; }
body:has(.mrc-wrap) .mrc-cam-example__body h3 { font-size: 26px; }
body:has(.mrc-wrap) .mrc-cam-example__body p { color: #454545; }
body:has(.mrc-wrap) .mrc-cam-example__body .mrc-btn { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  body:has(.mrc-wrap) .mrc-cam-walkin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "list" "foot"; grid-template-rows: auto; row-gap: var(--sp-6); }
  body:has(.mrc-wrap) .mrc-cam-components,
body:has(.mrc-wrap) .mrc-cam-support__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-cam-data { grid-template-columns: repeat(2, 1fr); }
  body:has(.mrc-wrap) .mrc-cam-support { margin-top: var(--sp-16); }
}
@media (max-width: 768px) {
  body:has(.mrc-wrap) .mrc-cam-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-cam-hero h1 { font-size: 34px; }
  body:has(.mrc-wrap) .mrc-cam-hero__media { max-width: 280px; }
  body:has(.mrc-wrap) .mrc-cam-temps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-wrap) .mrc-cam-example { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-wrap) .mrc-cam-example__media { max-width: 260px; }
  body:has(.mrc-wrap) .mrc-cam-support h2 { font-size: 30px; }
  body:has(.mrc-wrap) .mrc-cam-support { margin-top: var(--sp-12); padding: var(--sp-12) 0; }
  body:has(.mrc-wrap) .mrc-cam-temps { gap: var(--sp-6); }
  body:has(.mrc-wrap) .mrc-cam-temp h3 { font-size: 20px; }
  body:has(.mrc-wrap) .mrc-cam-temp .mrc-cam-temp__range { margin-top: var(--sp-2); font-size: 24px; }
  body:has(.mrc-wrap) .mrc-cam-items li { padding: 10px 0; }
  body:has(.mrc-wrap) .mrc-cam-list li { padding: var(--sp-3) 0; }
  body:has(.mrc-wrap) .mrc-cam-note { margin-top: var(--sp-4); }
}
@media (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-cam-data { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-wrap) .mrc-cam-items { columns: 1; }
  body:has(.mrc-wrap) .mrc-cam-example__media { max-width: 200px; }
  body:has(.mrc-wrap) .mrc-cam-hero .mrc-btn,
body:has(.mrc-wrap) .mrc-cam-data__cta { width: 100%; justify-content: center; text-align: center; }
}

/* Respiración FAQ → CTA rojo (mismo motivo que Rubros → CTA en /productos:
   .mrc-subsection solo define padding-top). Título largo del CTA: más
   ancho y un cuerpo algo menor para no pasar de 2–3 líneas. */
body:has(.mrc-wrap) .mrc-cam-faq { padding-bottom: var(--section-gap); }
body:has(.mrc-wrap) .mrc-cta-final--long .mrc-cta-final__inner { max-width: 780px; }
body:has(.mrc-wrap) .mrc-cta-final--long h2 { font-size: 40px; }
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-cta-final--long h2 { font-size: 30px; } }
/* Titular largo en móvil: «comercializamos» a 48 px desbordaba 390/430 px (corrección de bug; escritorio sin cambios). */
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-cta-final--fit h2 { font-size: 30px; } }

/* Mobile 361–480 px: listas cortas en dos columnas para acortar la página */
@media (min-width: 361px) and (max-width: 480px) {
  body:has(.mrc-wrap) .mrc-cam-temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.mrc-wrap) .mrc-cam-temp .mrc-cam-temp__range { font-size: 20px; }
  body:has(.mrc-wrap) .mrc-cam-items { columns: 2; column-gap: var(--sp-4); }
  body:has(.mrc-wrap) .mrc-cam-items li { font-size: 14.5px; }
  body:has(.mrc-wrap) .mrc-cam-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.mrc-wrap) .mrc-cam-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); border-bottom: 0; }
  body:has(.mrc-wrap) .mrc-cam-list li { border-bottom: 0; }
  body:has(.mrc-wrap) .mrc-cam-support__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); border-bottom: 0; }
  body:has(.mrc-wrap) .mrc-cam-support__list li { font-size: 16px; }
}

/* ======================================================================
   Landings de familia (Heladeras, Freezers) — modelos sin tarjeta.
   Fotos naturales directamente sobre la página; capacidad y línea
   visibles para diferenciar modelos.
   ====================================================================== */
body:has(.mrc-wrap) .mrc-model-section { padding-bottom: var(--section-gap); }
body:has(.mrc-wrap) .mrc-model-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); }
body:has(.mrc-wrap) .mrc-model-grid--2 { --cols: 2; max-width: 820px; gap: var(--sp-8); }
body:has(.mrc-wrap) .mrc-model { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-wrap) .mrc-model > a:first-child { display: block; }
body:has(.mrc-wrap) .mrc-model img { display: block; width: 100%; height: auto; }
body:has(.mrc-wrap) .mrc-model h3 { margin-top: var(--sp-3); font-size: 22px; }
body:has(.mrc-wrap) .mrc-model p { color: #454545; font-size: 15px; margin: 0; }
body:has(.mrc-wrap) .mrc-model .mrc-model__spec { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-navy); }
body:has(.mrc-wrap) .mrc-model .mrc-btn--text { align-self: flex-start; margin-top: var(--sp-2); }
@media (max-width: 900px) { body:has(.mrc-wrap) .mrc-model-grid { --cols: 2; } }
@media (max-width: 360px) { body:has(.mrc-wrap) .mrc-model-grid,
body:has(.mrc-wrap) .mrc-model-grid--2 { --cols: 1; } }
body:has(.mrc-wrap) .mrc-model .mrc-btn--text { white-space: normal; text-align: left; line-height: 1.3; }
@media (max-width: 480px) { body:has(.mrc-wrap) .mrc-model h3 { font-size: 18px; } body:has(.mrc-wrap) .mrc-model .mrc-model__spec { font-size: 13px; } }

/* Soluciones: Walk-in como nota editorial dentro de Supermercados */
body:has(.mrc-wrap) .mrc-walkin-note { margin-top: var(--sp-12); border-top: 1px solid var(--color-gray-100); padding-top: var(--sp-8); }
body:has(.mrc-wrap) .mrc-walkin-note > * { max-width: 760px; }
body:has(.mrc-wrap) .mrc-walkin-note h3 { font-size: 24px; }
body:has(.mrc-wrap) .mrc-walkin-note p { margin-top: var(--sp-3); color: #454545; }
body:has(.mrc-wrap) .mrc-walkin-note__apps { font-size: 15px; }
body:has(.mrc-wrap) .mrc-walkin-note__apps a { color: var(--color-red); font-weight: 600; }
body:has(.mrc-wrap) .mrc-walkin-note .mrc-btn { margin-top: var(--sp-6); }
@media (max-width: 900px) { body:has(.mrc-wrap) .mrc-walkin-note { margin-top: var(--sp-8); } }
body:has(.mrc-wrap) .mrc-walkin-note .mrc-btn { white-space: normal; text-align: center; }

/* Respiración antes del CTA rojo (Nosotros): .mrc-subsection solo define padding-top */
body:has(.mrc-wrap) .mrc-about-end { padding-bottom: var(--section-gap); }
body:has(.mrc-wrap) .mrc-cam-walkin__foot .mrc-btn,
body:has(.mrc-wrap) .mrc-cam-example__body .mrc-btn { white-space: normal; text-align: center; }


/* --- Normalización frente al CSS base de Odoo (solo páginas MRC) --- */
body:has(.mrc-wrap),
body:has(.mrc-wrap) #wrapwrap,
body:has(.mrc-wrap) #wrapwrap > main {
  line-height: normal;
}
body:has(.mrc-wrap) #wrapwrap,
body:has(.mrc-wrap) #wrapwrap > main {
  color: inherit;
  font-family: inherit;
}
/* Odoo fija html/body a 100% de alto: con el overflow-x del prototipo el <body>
   pasaría a ser el contenedor de scroll (window.scrollY quedaría en 0 y el JS
   de scroll dejaría de funcionar). Con altura automática el scroll es el de la
   ventana, igual que en el prototipo aprobado. */
body:has(.mrc-wrap) {
  height: auto;
}
/* Bootstrap/Odoo hacen line-height:inherit en controles y márgenes distintos en <dl>;
   el prototipo usa los valores por defecto del navegador. */
body:has(.mrc-wrap) button,
body:has(.mrc-wrap) input,
body:has(.mrc-wrap) select,
body:has(.mrc-wrap) textarea {
  line-height: normal;
}
body:has(.mrc-wrap) dl {
  margin-top: 1em;
  margin-bottom: 1em;
}