/* MRC RC1 — generado por tools/odoo-stage1/build_rc1_package.py desde prototipo-visual-mrc (tag mrc-site-rc1).
   Selectores acotados a páginas RC1 (body:has(.mrc-rc1)). CSS plano, sin compilar. */
/* >>> css/styles.css */
/* =========================================================
   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-rc1) {
  /* 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-rc1) {
    --section-gap: 64px;
  }
}

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

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

/* ---------- Reset mínimo ---------- */
body:has(.mrc-rc1) * { box-sizing: border-box; }
/* overflow-x: clip (no hidden): hidden convierte html/body en contenedor de scroll y rompe position:sticky del header */
html:has(.mrc-rc1) { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
/* Anclas y «saltar al contenido»: el header sticky (88 px, 76 px en ≤ 480 px, + 1 px de borde) no debe tapar el título del destino. Valor literal: en Odoo las variables viven en body, no en html. */
html:has(.mrc-rc1) { scroll-padding-top: 92px; }
@media (max-width: 480px) { html:has(.mrc-rc1) { scroll-padding-top: 80px; } }
html.mrc-scroll-lock:has(.mrc-rc1) { overflow: hidden; }
body:has(.mrc-rc1) {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-gray-900);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body:has(.mrc-rc1) img { max-width: 100%; display: block; }
body:has(.mrc-rc1) picture { display: contents; }
body:has(.mrc-rc1) a { color: inherit; text-decoration: none; }
body:has(.mrc-rc1) ul,
body:has(.mrc-rc1) ol { margin: 0; padding: 0; list-style: none; }
body:has(.mrc-rc1) 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-rc1) .mrc-grain { position: relative; }
body:has(.mrc-rc1) .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-rc1) *,
body:has(.mrc-rc1) *::before,
body:has(.mrc-rc1) *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilidades ---------- */
body:has(.mrc-rc1) .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-rc1) .mrc-skip:focus {
  top: 16px;
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}
body:has(.mrc-rc1) .mrc-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-container { padding: 0 var(--gutter-mobile); }
}

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

body:has(.mrc-rc1) .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-rc1) .mrc-eyebrow.on-dark { color: #FF8A80; }

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

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

/* ---------- Botones — sección 8 ---------- */
body:has(.mrc-rc1) .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-rc1) .mrc-btn:hover { transform: translateY(-2px); }
body:has(.mrc-rc1) .mrc-btn:active { transform: translateY(0); transition-duration: 80ms; }
body:has(.mrc-rc1) .mrc-btn:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}
body:has(.mrc-rc1) .mrc-btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}
body:has(.mrc-rc1) .mrc-btn--primary:hover { background: #A80000; }
body:has(.mrc-rc1) .mrc-btn--secondary {
  background: transparent;
  border-color: var(--color-gray-900);
  color: var(--color-gray-900);
}
body:has(.mrc-rc1) .mrc-btn--secondary:hover { border-color: var(--color-red); color: var(--color-red); }
body:has(.mrc-rc1) .mrc-btn--secondary.on-dark {
  border-color: rgba(255,255,255,0.55);
  color: var(--color-white);
}
body:has(.mrc-rc1) .mrc-btn--secondary.on-dark:hover { border-color: var(--color-white); }
body:has(.mrc-rc1) .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;
  /* Subrayado discreto en reposo (2026-10-15): un link de texto se tiene que reconocer como link sin esperar al hover; en hover/foco se completa en rojo. */
  border-bottom: 1px solid rgba(32,32,32,0.35);
  transition: color 180ms ease, border-color 180ms ease;
}
body:has(.mrc-rc1) .mrc-btn--text:hover,
body:has(.mrc-rc1) .mrc-btn--text:focus-visible {
  color: var(--color-red);
  border-color: var(--color-red);
}
body:has(.mrc-rc1) .mrc-btn--text:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
body:has(.mrc-rc1) .mrc-btn--text.on-dark { color: var(--color-white); border-bottom-color: rgba(255,255,255,0.5); }
body:has(.mrc-rc1) .mrc-btn--text.on-dark:hover { border-color: var(--color-white); }

/* ---------- Navbar (sección 22) ---------- */
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  height: var(--nav-height);
}
body:has(.mrc-rc1) .mrc-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body:has(.mrc-rc1) .mrc-nav__logo img {
  display: block;
  height: 56px;
  width: auto;
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-nav__logo img { height: 42px; }
  body:has(.mrc-rc1) { --nav-height: 76px; }
}
@media (max-width: 360px) {
  body:has(.mrc-rc1) .mrc-nav__logo img { height: 36px; }
}
body:has(.mrc-rc1) .mrc-nav__links {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  flex-shrink: 0;
}
body:has(.mrc-rc1) .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-rc1) .mrc-nav__links a:hover { border-color: var(--color-red); }
body:has(.mrc-rc1) .mrc-nav__links a[aria-current="true"] { color: var(--color-red); border-color: var(--color-red); }
body:has(.mrc-rc1) .mrc-mobile-menu a[aria-current="true"] { color: var(--color-red); }
body:has(.mrc-rc1) .mrc-nav__cta { display: flex; align-items: center; gap: var(--sp-4); }
body:has(.mrc-rc1) .mrc-nav__cta .mrc-btn { padding: 11px 22px; font-size: 15px; }
body:has(.mrc-rc1) .mrc-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--sp-2);
}
body:has(.mrc-rc1) .mrc-nav__toggle svg { width: 26px; height: 26px; }

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

body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-hero__grid {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  min-height: min(calc(100vh - 89px), 844px);   /* conserva el alto del hero aunque el H1 sea menor */
  display: flex;
  align-items: center;
}
body:has(.mrc-rc1) .mrc-hero__text { max-width: 500px; }
body:has(.mrc-rc1) .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-rc1) .mrc-hero__regional-rule {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-red);
  flex-shrink: 0;
}
html.js-reveal-ready:has(.mrc-rc1) .mrc-hero__regional {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 620ms ease, transform 620ms var(--ease-editorial);
}
html.js-reveal-ready:has(.mrc-rc1) .mrc-hero__regional.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body:has(.mrc-rc1) .mrc-hero__text h1 {
  color: var(--color-white);
  font-size: 68px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
body:has(.mrc-rc1) .mrc-hero__text .mrc-lede {
  color: rgba(255,255,255,0.82);
  margin-top: var(--sp-8);
  max-width: 460px;
}
@media (min-width: 1025px) {
  body:has(.mrc-rc1) .mrc-hero__text h1 { font-size: 64px; }
}
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-hero__text h1 { font-size: 38px; max-width: 100%; }
}
body:has(.mrc-rc1) .mrc-hero__actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  flex-wrap: wrap;
}
body:has(.mrc-rc1) .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-rc1) .mrc-hero__visual {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  bottom: 0;
  left: auto;
  width: calc(58% + 50vw - 50%);   /* ≈ 55–58 % del hero y a sangre hasta el borde del viewport */
  z-index: 0;
}
@media (min-width: 1280px) {
  body:has(.mrc-rc1) .mrc-hero__visual { width: calc(62% + 50vw - 50%); }
}
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}
body:has(.mrc-rc1) .mrc-hero__img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 1025px) {
  /* la pared lateral de la cámara entra completa */
  body:has(.mrc-rc1) .mrc-hero__img-frame img { object-position: 0% 50%; }
}
body:has(.mrc-rc1) .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 (min-width: 1025px) {
  /* el degradé navy solo disuelve el blanco de estudio, no el equipo */
  body:has(.mrc-rc1) .mrc-hero__img-scrim { background: linear-gradient(100deg, rgba(10,14,26,0.6) 0%, rgba(10,14,26,0.3) 12%, rgba(10,14,26,0.1) 24%, rgba(10,14,26,0) 38%); }
}

@media (max-width: 1024px) {
  body:has(.mrc-rc1) .mrc-hero__grid {
    display: block;
    min-height: auto;
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }
  body:has(.mrc-rc1) .mrc-hero__text { max-width: 100%; }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-authority {
  background: var(--color-gray-100);
  border-bottom: 1px solid rgba(32,32,32,0.08);
}
body:has(.mrc-rc1) .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-rc1) .mrc-authority__stat {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
body:has(.mrc-rc1) .mrc-authority__number-mask {
  display: block;
  overflow: hidden;
}
body:has(.mrc-rc1) .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-rc1) .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. */
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__number {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 680ms ease;
}
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__label,
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms ease, transform 480ms ease;
}
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__label { transition-delay: 200ms; }
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__text { transition-delay: 260ms; }

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

body:has(.mrc-rc1) .mrc-authority__body { display: flex; flex-direction: column; gap: var(--sp-4); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-authority__row {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-top: 40px;
    padding-bottom: 40px;
  }
  body:has(.mrc-rc1) .mrc-authority__number { font-size: 64px; }
}

/* ---------- Principales soluciones — mosaico asimétrico (sección 13, Design DNA 21.8) ---------- */
body:has(.mrc-rc1) .mrc-solutions__head {
  max-width: 620px;
  margin-bottom: var(--sp-12);
}
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-tile:focus-visible,
body:has(.mrc-rc1) .mrc-industry:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
}
body:has(.mrc-rc1) .mrc-tile:hover img { transform: scale(1.11); }
body:has(.mrc-rc1) .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: 50%;
  /* 50 % de alto (antes 60 %): el producto se ve más limpio; el tramo del rótulo conserva (o supera) la opacidad previa. */
  background: linear-gradient(to top, rgba(14,20,38,0.88) 0%, rgba(14,20,38,0.68) 38%, rgba(14,20,38,0) 100%);
  z-index: 1;
  transition: opacity 300ms var(--ease-ui);
}
body:has(.mrc-rc1) .mrc-tile:hover .mrc-tile__scrim { opacity: 0.95; }
body:has(.mrc-rc1) .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-rc1) .mrc-tile:hover .mrc-tile__label { transform: translateY(-2px); }
body:has(.mrc-rc1) .mrc-tile__title { font-weight: 700; font-size: 16px; }
body:has(.mrc-rc1) .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-rc1) .mrc-tile--md img { object-position: 38% 58%; }
body:has(.mrc-rc1) .mrc-tile--lg { grid-column: span 2; grid-row: span 2; }
body:has(.mrc-rc1) .mrc-tile--md { grid-column: span 2; grid-row: span 1; }
body:has(.mrc-rc1) .mrc-tile--sm { grid-column: span 1; grid-row: span 1; }

@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
  }
  body:has(.mrc-rc1) .mrc-tile { aspect-ratio: 1/1; }
  body:has(.mrc-rc1) .mrc-tile--lg { grid-column: span 1; grid-row: span 2; aspect-ratio: auto; }   /* heladera: vertical, 2 filas */
  body:has(.mrc-rc1) .mrc-tile--md { grid-column: span 1; }
}
/* Batea y horno: el contenedor respeta al equipo (antes `cover` + zoom los recortaba en celdas verticales) */
body:has(.mrc-rc1) .mrc-tile:has(img[src$="product_2857.jpg"]),
body:has(.mrc-rc1) .mrc-tile:has(img[src$="product_2892.jpg"]) { background: #fff; }
body:has(.mrc-rc1) .mrc-tile img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-tile img[src$="product_2892.jpg"] { object-fit: contain; transform: none; }
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2892.jpg"] { transform: scale(1.03); }
/* Mobile ≤480: grilla asimétrica 1,35fr/1fr (sin carrusel ni scroll horizontal): heladera protagonista a doble alto,
   batea apaisada a ancho completo, cava y horno en la última fila. Equipos completos. */
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-mosaic { grid-template-columns: 1.35fr 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile { aspect-ratio: 4/5; }
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(1) { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }   /* heladera */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(2) { grid-column: 2; grid-row: 1; }                          /* cámara (detalle) */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(3) { grid-column: 2; grid-row: 2; }                          /* freezer */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(5) { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 4/3; }  /* batea, completa */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(4) { grid-column: 1; grid-row: 4; }                          /* cava */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(6) { grid-column: 2; grid-row: 4; background: #fff; aspect-ratio: auto; }  /* horno */
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(6) img { object-fit: contain; transform: none; }
  body:has(.mrc-rc1) .mrc-tile img[src$="product_2857.jpg"] { object-fit: cover; }
  body:has(.mrc-rc1) .mrc-tile__label { left: 10px; right: 10px; bottom: 10px; }
  body:has(.mrc-rc1) .mrc-tile__title { font-size: 14px; line-height: 1.2; }
  body:has(.mrc-rc1) .mrc-tile__micro { font-size: 11.5px; }
}
@media (max-width: 360px) {
  body:has(.mrc-rc1) .mrc-mosaic .mrc-tile:nth-child(6) img { object-position: 50% 0; }
}

/* ---------- 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-rc1) .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-rc1) .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-rc1) .mrc-camaras__content { max-width: 440px; }
body:has(.mrc-rc1) .mrc-camaras__content h1,
body:has(.mrc-rc1) .mrc-camaras__content h2 { color: var(--color-white); font-size: 48px; line-height: 1.08; letter-spacing: -0.01em; }
body:has(.mrc-rc1) .mrc-camaras__content .mrc-lede { color: rgba(255,255,255,0.85); margin-top: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .mrc-camaras__tags span { color: rgba(255,255,255,0.9); }
body:has(.mrc-rc1) .mrc-camaras__tags span:not(:last-child)::after {
  content: "·";
  margin-left: var(--sp-3);
  color: rgba(255,255,255,0.35);
}
body:has(.mrc-rc1) .mrc-camaras__content .mrc-btn { margin-top: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .mrc-camaras__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-camaras__media { order: -1; aspect-ratio: 16 / 11; }
  body:has(.mrc-rc1) .mrc-camaras__content { max-width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-camaras__content h1,
body:has(.mrc-rc1) .mrc-camaras__content h2 { font-size: 32px; }
  body:has(.mrc-rc1) .mrc-camaras__panel { padding: var(--sp-6); }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-process__head { max-width: 640px; margin-bottom: calc(var(--sp-16) + var(--sp-4)); }
body:has(.mrc-rc1) .mrc-process__heading { font-size: 44px; }
body:has(.mrc-rc1) .mrc-process__head .mrc-lede { margin-top: var(--sp-6) !important; max-width: 480px; }
body:has(.mrc-rc1) .mrc-process__heading { overflow: visible; }
body:has(.mrc-rc1) .mrc-process__heading-mask { display: block; overflow: hidden; }
body:has(.mrc-rc1) .mrc-process__heading-line { display: block; }

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

body:has(.mrc-rc1) .mrc-process__timeline { position: relative; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-process__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--sp-8) + var(--sp-2));
}
body:has(.mrc-rc1) .mrc-process__step { position: relative; padding-top: var(--sp-8); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-process__step h3 { font-size: 24px; margin-bottom: var(--sp-3); }
body:has(.mrc-rc1) .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-rc1) .mrc-process__step.is-first::after { background: var(--color-red); width: 14px; height: 14px; top: -2px; }
body:has(.mrc-rc1) .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-rc1) .mrc-process__timeline.is-progress-ready .mrc-process__step::after { background: var(--color-gray-500); width: 12px; height: 12px; top: -1px; }
body:has(.mrc-rc1) .mrc-process__timeline.is-progress-ready .mrc-process__step .num { color: var(--color-gray-500); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-process__step::after { background: var(--color-red) !important; width: 14px !important; height: 14px !important; top: -2px !important; }
  body:has(.mrc-rc1) .mrc-process__step .num { color: var(--color-red) !important; }
  body:has(.mrc-rc1) .mrc-process__track-fill { transform: scaleX(1) !important; }
  body:has(.mrc-rc1) .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-rc1) .mrc-process__track {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    height: auto;
    width: 2px;
  }
  body:has(.mrc-rc1) .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-rc1) .mrc-process__track-fill { transform: scaleY(1) !important; }
  }
  body:has(.mrc-rc1) .mrc-process__row { grid-template-columns: 1fr; gap: var(--sp-16); }
  body:has(.mrc-rc1) .mrc-process__step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding-top: 0;
    padding-left: 28px;
  }
  body:has(.mrc-rc1) .mrc-process__step::after { left: 0; top: 3px; }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-industries__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body:has(.mrc-rc1) .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-rc1) .mrc-industry-module:nth-of-type(even) { grid-template-columns: 1.18fr 0.82fr; }
body:has(.mrc-rc1) .mrc-industry-module__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-16) var(--sp-12);
}
body:has(.mrc-rc1) .mrc-industry-module:nth-of-type(even) .mrc-industry-module__content { order: 2; }
body:has(.mrc-rc1) .mrc-industry-module__media {
  order: 2;
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
}
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-collage__lg { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; }
body:has(.mrc-rc1) .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-rc1) .mrc-collage--duo { grid-template-rows: 1fr; }
body:has(.mrc-rc1) .mrc-collage--duo .mrc-collage__lg { grid-row: 1; }
body:has(.mrc-rc1) .mrc-collage__lg picture,
body:has(.mrc-rc1) .mrc-collage__sm picture { display: block; width: 100%; height: 100%; }
body:has(.mrc-rc1) .mrc-collage__lg img,
body:has(.mrc-rc1) .mrc-collage__sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms var(--ease-ui);
}
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img { transform: scale(1.03); }
body:has(.mrc-rc1) .mrc-industry-module__content h3 { color: var(--color-white); font-size: 30px; margin-bottom: var(--sp-3); }
body:has(.mrc-rc1) .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-rc1) .mrc-industry-module__content a { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--color-white); }
body:has(.mrc-rc1) .mrc-industry-module__content a:hover { border-bottom: 1px solid var(--color-white); }

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

/* ---------- Servicios — editorial (sección 17) ---------- */
body:has(.mrc-rc1) .mrc-services {
  background: var(--color-gray-100);
}
body:has(.mrc-rc1) .mrc-services__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-16);
  align-items: start;
}
body:has(.mrc-rc1) .mrc-services__intro {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--color-red);
}
body:has(.mrc-rc1) .mrc-services__intro h2 { font-size: 44px; }
body:has(.mrc-rc1) .mrc-services__intro .mrc-lede { margin-top: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-service-item__icon svg { width: 20px; height: 20px; }
body:has(.mrc-rc1) .mrc-service-item h3 { margin-bottom: var(--sp-2); font-size: 19px; margin-top: var(--sp-1); }
body:has(.mrc-rc1) .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-rc1) .mrc-services__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-services__list { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-rc1) .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-rc1) .mrc-services__intro h2 { font-size: 28px; }
}

/* ---------- Por qué Martínez — sección oscura (sección 18) ---------- */
body:has(.mrc-rc1) .mrc-why {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
}
body:has(.mrc-rc1) .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-rc1) .mrc-why__head h2 { color: var(--color-white); font-size: 44px; }
body:has(.mrc-rc1) .mrc-why__head .mrc-lede { color: rgba(255,255,255,0.75); margin-top: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-why__item:nth-child(odd) { padding-right: var(--sp-8); }
body:has(.mrc-rc1) .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-rc1) .mrc-why__item__icon svg { width: 18px; height: 18px; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-why__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}
body:has(.mrc-rc1) .mrc-location__content h2 { font-size: 32px; margin-top: var(--sp-2); }
body:has(.mrc-rc1) .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-rc1) .mrc-location__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  color: #454545;
  margin-bottom: var(--sp-6);
}
body:has(.mrc-rc1) .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-rc1) .mrc-location__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
body:has(.mrc-rc1) .mrc-location__coverage { color: #454545; font-size: 15px; max-width: 46ch; margin: 0 0 var(--sp-3); }
body:has(.mrc-rc1) .mrc-location__pins { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-location__reach { border-left: 1px solid var(--color-gray-100); padding-left: var(--sp-12); }

@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-location__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-rc1) .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-rc1) .mrc-projects__head { max-width: 620px; margin-bottom: var(--sp-12); }
body:has(.mrc-rc1) .mrc-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
body:has(.mrc-rc1) .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-rc1) .mrc-project:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(17,17,17,0.12); }
body:has(.mrc-rc1) .mrc-project__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
body:has(.mrc-rc1) .mrc-project:hover .mrc-project__media img { transform: scale(1.04); }
body:has(.mrc-rc1) .mrc-project__body { padding: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .mrc-project__body h3 { font-size: 18px; margin-bottom: var(--sp-2); }
body:has(.mrc-rc1) .mrc-project__body p { font-size: 14.5px; color: #4a4a4a; }

@media (max-width: 900px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-faq__grid {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
body:has(.mrc-rc1) .mrc-faq__head { position: sticky; top: calc(var(--nav-height) + var(--sp-8)); }
body:has(.mrc-rc1) .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-rc1) .mrc-faq__prompt span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-faq__list {
  border-top: 1px solid var(--color-gray-100);
}
@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-faq__head { position: static; }
}
body:has(.mrc-rc1) .mrc-faq__item { border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-rc1) .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-rc1) .mrc-faq__trigger:hover { color: var(--color-red); }
body:has(.mrc-rc1) .mrc-faq__trigger:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 4px;
  border-radius: 6px;
}
body:has(.mrc-rc1) .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-rc1) .mrc-faq__trigger[aria-expanded="true"] .mrc-faq__chevron { transform: rotate(180deg); color: var(--color-red); }
body:has(.mrc-rc1) .mrc-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
}
body:has(.mrc-rc1) .mrc-faq__panel-inner { overflow: hidden; }
body:has(.mrc-rc1) .mrc-faq__item.is-open .mrc-faq__panel { grid-template-rows: 1fr; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-cta-final { padding-top: 60px; padding-bottom: 60px; }
}
body:has(.mrc-rc1) .mrc-cta-final__inner { max-width: 640px; margin: 0 auto; }
body:has(.mrc-rc1) .mrc-cta-final h2 { color: var(--color-white); font-size: 48px; }
body:has(.mrc-rc1) .mrc-cta-final p { color: rgba(255,255,255,0.92); margin-top: var(--sp-4); font-size: 18px; }
body:has(.mrc-rc1) .mrc-cta-final__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
body:has(.mrc-rc1) .mrc-cta-final .mrc-btn--primary { background: var(--color-white); color: var(--color-red); }
body:has(.mrc-rc1) .mrc-cta-final .mrc-btn--primary:hover { background: var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-cta-final .mrc-btn--secondary.on-dark { border-color: rgba(255,255,255,0.6); }

/* ---------- Footer (sección 21) ---------- */
body:has(.mrc-rc1) .mrc-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.75);
}
body:has(.mrc-rc1) .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-rc1) .mrc-footer__brand img { height: 44px; width: auto; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-footer ul li { margin-bottom: var(--sp-3); font-size: 15px; line-height: 1.5; }
body:has(.mrc-rc1) .mrc-footer ul li a:hover { color: var(--color-white); }
body:has(.mrc-rc1) .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-rc1) .mrc-footer__bottom { padding-bottom: calc(16px + 56px + 12px); }
}

@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-footer__grid { grid-template-columns: repeat(2, 1fr); }
  body:has(.mrc-rc1) .mrc-footer__brand { grid-column: span 2; }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-footer__grid { grid-template-columns: 1fr; }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-whatsapp-float:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 3px;
}
body:has(.mrc-rc1) .mrc-whatsapp-float svg { width: 22px; height: 22px; flex-shrink: 0; }
body:has(.mrc-rc1) .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-rc1) .mrc-whatsapp-float.is-on-red {
  background: var(--color-white);
  color: var(--color-red);
}

@media (max-width: 640px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-whatsapp-float svg { width: 20px; height: 20px; }
  body:has(.mrc-rc1) .mrc-whatsapp-float__label-desktop { display: none; }
  body:has(.mrc-rc1) .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. */
html.js-reveal-ready:has(.mrc-rc1) [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
html.js-reveal-ready:has(.mrc-rc1) [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
html.js-reveal-ready:has(.mrc-rc1) [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 70ms; }
html.js-reveal-ready:has(.mrc-rc1) [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 140ms; }
html.js-reveal-ready:has(.mrc-rc1) [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 210ms; }
html.js-reveal-ready:has(.mrc-rc1) [data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 280ms; }
html.js-reveal-ready:has(.mrc-rc1) [data-reveal-group] > [data-reveal]:nth-child(n+6) { transition-delay: 340ms; }
/* Impresión / PDF: nunca oculto (el contenido que el scroll no llegó a revelar igual se imprime). */
@media print {
  html.js-reveal-ready:has(.mrc-rc1) [data-reveal],
html.js-reveal-ready:has(.mrc-rc1) .mrc-hero__regional,
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__number,
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__label,
html.js-reveal-ready:has(.mrc-rc1) .mrc-authority__text,
html.js-reveal-ready:has(.mrc-rc1) .mrc-process__heading-line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   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-rc1) .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-rc1) .mrc-breadcrumb a { color: #454545; transition: color 150ms ease; }
body:has(.mrc-rc1) .mrc-breadcrumb a:hover { color: var(--color-red); }
body:has(.mrc-rc1) .mrc-breadcrumb span[aria-current] { color: var(--color-gray-900); font-weight: 600; }
body:has(.mrc-rc1) .mrc-breadcrumb__sep { color: var(--border-on-light); }

/* ---------- Hero interior (categoría / producto) ---------- */
body:has(.mrc-rc1) .mrc-page-hero { padding-top: var(--sp-8); padding-bottom: var(--sp-16); }
body:has(.mrc-rc1) .mrc-page-hero__intro { max-width: 720px; }
body:has(.mrc-rc1) .mrc-page-hero h1 { font-size: 48px; margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-page-hero .mrc-lede { margin-top: var(--sp-4); }
body:has(.mrc-rc1) .mrc-page-hero__actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
body:has(.mrc-rc1) .mrc-subsection { padding-top: var(--sp-16); }
/* El hero interior ya deja 64 px abajo: la primera sección no suma otros 64 (128 px de aire muerto) sino 16. */
body:has(.mrc-rc1) .mrc-page-hero + .mrc-subsection,
body:has(.mrc-rc1) .mrc-page-hero + .mrc-catalog-section { padding-top: var(--sp-4); }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-page-hero h1 { font-size: 30px; }
  body:has(.mrc-rc1) .mrc-subsection { padding-top: var(--sp-12); }
}

/* ---------- Buscador + filtro por necesidad (/productos) ---------- */
body:has(.mrc-rc1) .mrc-catalog-tools { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
body:has(.mrc-rc1) .mrc-catalog-search { position: relative; max-width: 460px; }
body:has(.mrc-rc1) .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-rc1) .mrc-catalog-search input::placeholder { color: var(--color-gray-500); }
body:has(.mrc-rc1) .mrc-catalog-search input:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
  border-color: var(--color-red);
}
body:has(.mrc-rc1) .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-rc1) .mrc-need-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body:has(.mrc-rc1) .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-rc1) .mrc-need-filter button:hover { border-color: var(--color-red); color: var(--color-red); }
body:has(.mrc-rc1) .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-rc1) .mrc-need-filter button:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 2px; }
body:has(.mrc-rc1) .mrc-catalog-empty {
  display: none;
  padding: var(--sp-16) 0;
  text-align: center;
  color: #454545;
  font-size: 16px;
}
body:has(.mrc-rc1) .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-rc1) .mrc-catalog-section + .mrc-catalog-section { margin-top: var(--sp-24); }
body:has(.mrc-rc1) .mrc-catalog-section__head { max-width: 640px; margin-bottom: var(--sp-12); }
body:has(.mrc-rc1) .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-rc1) .mrc-catalog-family[hidden],
body:has(.mrc-rc1) .mrc-catalog-secondary-item[hidden] { display: none; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-catalog-family:nth-of-type(even) { grid-template-columns: 1fr minmax(280px, 380px); }
body:has(.mrc-rc1) .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-rc1) .mrc-catalog-family__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-catalog-family__content h3 { font-size: 30px; }
body:has(.mrc-rc1) .mrc-catalog-family__content .mrc-lede { margin-top: var(--sp-3); max-width: 46ch; }
body:has(.mrc-rc1) .mrc-catalog-family__content .mrc-tags { margin-top: var(--sp-4); }
body:has(.mrc-rc1) .mrc-catalog-family__content .mrc-btn { margin-top: var(--sp-6); }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-catalog-family { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-12) 0; }
  body:has(.mrc-rc1) .mrc-catalog-family:nth-of-type(even) { grid-template-columns: 1fr; }
  body:has(.mrc-rc1) .mrc-catalog-family:nth-of-type(even) .mrc-catalog-family__media { order: 0; }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-catalog-secondary:not(:has(> :not([hidden]))) { display: none; }
body:has(.mrc-rc1) .mrc-catalog-secondary-item { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-rc1) .mrc-catalog-secondary-item__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .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-rc1) .mrc-catalog-secondary-item p { font-size: 14.5px; color: #454545; margin: 0; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-catalog-more[hidden] { display: none; }
body:has(.mrc-rc1) .mrc-catalog-more strong { font-family: var(--font-display); font-weight: 700; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-catalog-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-catalog-secondary { grid-template-columns: 1fr; } body:has(.mrc-rc1) .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-rc1) .mrc-rubro-quick-section { padding-bottom: var(--section-gap); }
body:has(.mrc-rc1) .mrc-rubro-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-rubro-quick__item {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-navy);
  isolation: isolate;
}
body:has(.mrc-rc1) .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-rc1) .mrc-rubro-quick__item:hover img { transform: scale(1.1); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-rubro-quick__label strong { display: block; font-size: 17px; font-weight: 700; }
body:has(.mrc-rc1) .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-rc1) .mrc-rubro-quick { grid-template-columns: repeat(2, 1fr); } body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-tags span { color: var(--color-gray-900); }
body:has(.mrc-rc1) .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-rc1) .mrc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
body:has(.mrc-rc1) .mrc-step { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-rc1) .mrc-step__num { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--color-red); }
body:has(.mrc-rc1) .mrc-step p { font-size: 15.5px; line-height: 1.5; }
@media (max-width: 900px) { body:has(.mrc-rc1) .mrc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-steps { grid-template-columns: 1fr; } }

/* ---------- Definiciones (MT/BT) ---------- */
body:has(.mrc-rc1) .mrc-definition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
body:has(.mrc-rc1) .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-rc1) .mrc-definition-card h3 { margin-bottom: var(--sp-2); }
body:has(.mrc-rc1) .mrc-definition-card p { color: #454545; font-size: 16px; }
body:has(.mrc-rc1) .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-rc1) .mrc-definition-grid { grid-template-columns: 1fr; } }

/* ---------- Card de producto (ejemplo de configuración / relacionados) ---------- */
body:has(.mrc-rc1) .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-rc1) .mrc-product-card:hover { box-shadow: var(--shadow-surface); transform: translateY(-3px); }
body:has(.mrc-rc1) .mrc-product-card__media { aspect-ratio: 1/1; background: var(--surface-soft); }
body:has(.mrc-rc1) .mrc-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-6); }
body:has(.mrc-rc1) .mrc-product-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-rc1) .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-rc1) .mrc-product-card__body h3 { font-size: 19px; }
body:has(.mrc-rc1) .mrc-product-card__body p { font-size: 14.5px; color: #454545; }
body:has(.mrc-rc1) .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-rc1) .mrc-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6); }
body:has(.mrc-rc1) .mrc-product-grid .mrc-product-card { max-width: none; }
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-product-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Banda dúo de fotos (variación editorial de familia) ---------- */
body:has(.mrc-rc1) .mrc-duo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-duo-band__item { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--surface-white); }
body:has(.mrc-rc1) .mrc-duo-band__item img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-16); }
body:has(.mrc-rc1) .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-rc1) .mrc-duo-band { grid-template-columns: 1fr; }
  body:has(.mrc-rc1) .mrc-duo-band__item img { padding: var(--sp-8); }
}

/* ---------- Ficha de producto ---------- */
body:has(.mrc-rc1) .mrc-ficha { display: grid; grid-template-columns: minmax(320px, 480px) 1fr; gap: var(--sp-16); align-items: start; }
body:has(.mrc-rc1) .mrc-ficha__gallery {
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-6));
}
body:has(.mrc-rc1) .mrc-ficha__gallery img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-ficha__content { display: flex; flex-direction: column; gap: var(--sp-8); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-ficha__specs dd { font-size: 16px; font-weight: 600; margin: 0; color: var(--color-gray-900); }
body:has(.mrc-rc1) .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-rc1) .mrc-ficha__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-ficha { grid-template-columns: 1fr; gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-ficha__gallery { position: static; max-width: 360px; }
  body:has(.mrc-rc1) .mrc-ficha__specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-rubro-block { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
body:has(.mrc-rc1) .mrc-rubro-block:nth-of-type(even) { background: var(--surface-white); }
body:has(.mrc-rc1) .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-rc1) .mrc-rubro-block__media { max-width: 420px; justify-self: center; width: 100%; }
body:has(.mrc-rc1) .mrc-rubro-block__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-rubro-block__products { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-rc1) .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-rc1) .mrc-rubro-block__products dd { margin: 0; font-size: 15.5px; }
body:has(.mrc-rc1) .mrc-rubro-block__products dd a { color: var(--color-red); font-weight: 600; }
body:has(.mrc-rc1) .mrc-rubro-block__products dd a:hover { border-bottom: 1px solid var(--color-red); }
body:has(.mrc-rc1) .mrc-rubro-block__advise { margin-top: var(--sp-6); padding: var(--sp-6); background: var(--color-ice); border-radius: var(--radius); }
body:has(.mrc-rc1) .mrc-rubro-block__advise p { font-size: 15px; margin-bottom: var(--sp-3); }
@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-rubro-block { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  body:has(.mrc-rc1) .mrc-rubro-block__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-rubro-block .mrc-btn--text { white-space: normal; }
  body:has(.mrc-rc1) .mrc-rubro-block__media { order: -1; max-width: 300px; justify-self: start; }
}

/* ---------- Servicio (Servicios) ---------- */
body:has(.mrc-rc1) .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-rc1) .mrc-service-block:last-child { border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-rc1) .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-rc1) .mrc-service-block__icon svg { width: 22px; height: 22px; }
body:has(.mrc-rc1) .mrc-service-block h2 { margin-bottom: var(--sp-2); font-size: 21px; font-weight: 600; }
body:has(.mrc-rc1) .mrc-service-block p { color: #454545; max-width: 60ch; }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-service-block { grid-template-columns: 1fr; gap: var(--sp-3); }
}

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

/* ---------- Formulario (Contacto) ---------- */
body:has(.mrc-rc1) .mrc-form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 480px; }
body:has(.mrc-rc1) .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-rc1) .mrc-form input,
body:has(.mrc-rc1) .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-rc1) .mrc-form textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); }
body:has(.mrc-rc1) .mrc-form input:focus-visible,
body:has(.mrc-rc1) .mrc-form textarea:focus-visible {
  outline: 3px solid var(--color-cobalt); outline-offset: 2px; border-color: var(--color-red);
}
body:has(.mrc-rc1) .mrc-form__note { font-size: 13.5px; color: #454545; margin-top: var(--sp-2); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-cam-hero { background: var(--surface-white); }
body:has(.mrc-rc1) .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-rc1) .mrc-cam-hero h1 { font-size: 48px; line-height: 1.08; }
body:has(.mrc-rc1) .mrc-cam-hero .mrc-lede { margin-top: var(--sp-4); max-width: 46ch; }
body:has(.mrc-rc1) .mrc-cam-hero__actions { margin-top: var(--sp-6); }
body:has(.mrc-rc1) .mrc-cam-hero__media img { display: block; width: 100%; height: auto; }

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

/* Media / baja temperatura: dos columnas con filete navy, sin tarjeta */
body:has(.mrc-rc1) .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-rc1) .mrc-cam-temp { border-top: 2px solid var(--color-navy); padding-top: var(--sp-4); }
body:has(.mrc-rc1) .mrc-cam-temp h3 { font-size: 24px; }
body:has(.mrc-rc1) .mrc-cam-temp p { margin-top: var(--sp-2); color: #454545; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-cam-walkin__intro { grid-area: intro; }
body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list { grid-area: list; }
body:has(.mrc-rc1) .mrc-cam-walkin__foot { grid-area: foot; }
body:has(.mrc-rc1) .mrc-cam-walkin__foot .mrc-btn { margin-top: var(--sp-6); }

body:has(.mrc-rc1) .mrc-cam-walkin__intro .mrc-lede { margin-top: var(--sp-4); }
body:has(.mrc-rc1) .mrc-cam-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-rc1) .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-rc1) .mrc-cam-list strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
body:has(.mrc-rc1) .mrc-cam-list span { color: #454545; font-size: 15.5px; }

/* Componentes: lista compacta en dos columnas */
body:has(.mrc-rc1) .mrc-cam-components { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-16); align-items: start; }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .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-rc1) .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-rc1) .mrc-cam-data strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
body:has(.mrc-rc1) .mrc-cam-data span { color: #454545; font-size: 14.5px; }
body:has(.mrc-rc1) .mrc-cam-data__cta { margin-top: var(--sp-8); }

/* «Contanos el proyecto por WhatsApp» (nowrap + 28 px de padding) se salía del botón a 320 px; solo en pantallas muy angostas puede partirse en dos líneas */
@media (max-width: 340px) {
  body:has(.mrc-rc1) .mrc-cam-data__cta { white-space: normal; padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* Respaldo: banda navy breve, específica de la compra de una cámara */
body:has(.mrc-rc1) .mrc-cam-support { background: var(--color-navy); color: var(--color-white); margin-top: var(--sp-24); padding: var(--sp-16) 0; }
body:has(.mrc-rc1) .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-rc1) .mrc-cam-support h2 { color: var(--color-white); font-size: 36px; }
body:has(.mrc-rc1) .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-rc1) .mrc-cam-support__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-cam-example__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-cam-example__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); max-width: 560px; }
body:has(.mrc-rc1) .mrc-cam-example__body h3 { font-size: 26px; }
body:has(.mrc-rc1) .mrc-cam-example__body p { color: #454545; }
body:has(.mrc-rc1) .mrc-cam-example__body .mrc-btn { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-cam-components,
body:has(.mrc-rc1) .mrc-cam-support__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-cam-data { grid-template-columns: repeat(2, 1fr); }
  body:has(.mrc-rc1) .mrc-cam-support { margin-top: var(--sp-16); }
}
@media (max-width: 768px) {
  body:has(.mrc-rc1) .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-rc1) .mrc-cam-hero h1 { font-size: 34px; }
  body:has(.mrc-rc1) .mrc-cam-hero__media { max-width: 280px; }
  body:has(.mrc-rc1) .mrc-cam-temps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-cam-example { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-cam-example__media { max-width: 260px; }
  body:has(.mrc-rc1) .mrc-cam-support h2 { font-size: 30px; }
  body:has(.mrc-rc1) .mrc-cam-support { margin-top: var(--sp-12); padding: var(--sp-12) 0; }
  body:has(.mrc-rc1) .mrc-cam-temps { gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-cam-temp h3 { font-size: 20px; }
  body:has(.mrc-rc1) .mrc-cam-temp .mrc-cam-temp__range { margin-top: var(--sp-2); font-size: 24px; }
  body:has(.mrc-rc1) .mrc-cam-items li { padding: 10px 0; }
  body:has(.mrc-rc1) .mrc-cam-list li { padding: var(--sp-3) 0; }
  body:has(.mrc-rc1) .mrc-cam-note { margin-top: var(--sp-4); }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-cam-data { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-cam-items { columns: 1; }
  body:has(.mrc-rc1) .mrc-cam-example__media { max-width: 200px; }
  body:has(.mrc-rc1) .mrc-cam-hero .mrc-btn,
body:has(.mrc-rc1) .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-rc1) .mrc-cam-faq { padding-bottom: var(--section-gap); }
body:has(.mrc-rc1) .mrc-cta-final--long .mrc-cta-final__inner { max-width: 780px; }
body:has(.mrc-rc1) .mrc-cta-final--long h2 { font-size: 40px; }
@media (max-width: 480px) { body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-cam-temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.mrc-rc1) .mrc-cam-temp .mrc-cam-temp__range { font-size: 20px; }
  body:has(.mrc-rc1) .mrc-cam-items { columns: 2; column-gap: var(--sp-4); }
  body:has(.mrc-rc1) .mrc-cam-items li { font-size: 14.5px; }
  body:has(.mrc-rc1) .mrc-cam-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.mrc-rc1) .mrc-cam-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); border-bottom: 0; }
  body:has(.mrc-rc1) .mrc-cam-list li { border-bottom: 0; }
  body:has(.mrc-rc1) .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-rc1) .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-rc1) .mrc-model-section { padding-bottom: var(--section-gap); }
body:has(.mrc-rc1) .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-rc1) .mrc-model-grid--2 { --cols: 2; max-width: 820px; gap: var(--sp-8); }
body:has(.mrc-rc1) .mrc-model { display: flex; flex-direction: column; gap: var(--sp-2); }
body:has(.mrc-rc1) .mrc-model > a:first-child { display: block; }
body:has(.mrc-rc1) .mrc-model img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-model h3 { margin-top: var(--sp-3); font-size: 22px; }
body:has(.mrc-rc1) .mrc-model p { color: #454545; font-size: 15px; margin: 0; }
body:has(.mrc-rc1) .mrc-model .mrc-model__spec { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-navy); }
body:has(.mrc-rc1) .mrc-model .mrc-btn--text { align-self: flex-start; margin-top: var(--sp-2); }
@media (max-width: 900px) { body:has(.mrc-rc1) .mrc-model-grid { --cols: 2; } }
@media (max-width: 360px) { body:has(.mrc-rc1) .mrc-model-grid,
body:has(.mrc-rc1) .mrc-model-grid--2 { --cols: 1; } }
body:has(.mrc-rc1) .mrc-model .mrc-btn--text { white-space: normal; text-align: left; line-height: 1.3; }
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-model h3 { font-size: 18px; } body:has(.mrc-rc1) .mrc-model .mrc-model__spec { font-size: 13px; } }

/* Soluciones: Walk-in como nota editorial dentro de Supermercados */
body:has(.mrc-rc1) .mrc-walkin-note { margin-top: var(--sp-12); border-top: 1px solid var(--color-gray-100); padding-top: var(--sp-8); }
body:has(.mrc-rc1) .mrc-walkin-note > * { max-width: 760px; }
body:has(.mrc-rc1) .mrc-walkin-note h3 { font-size: 24px; }
body:has(.mrc-rc1) .mrc-walkin-note p { margin-top: var(--sp-3); color: #454545; }
body:has(.mrc-rc1) .mrc-walkin-note__apps { font-size: 15px; }
body:has(.mrc-rc1) .mrc-walkin-note__apps a { color: var(--color-red); font-weight: 600; }
body:has(.mrc-rc1) .mrc-walkin-note .mrc-btn { margin-top: var(--sp-6); }
@media (max-width: 900px) { body:has(.mrc-rc1) .mrc-walkin-note { margin-top: var(--sp-8); } }
body:has(.mrc-rc1) .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-rc1) .mrc-about-end { padding-bottom: var(--section-gap); }
body:has(.mrc-rc1) .mrc-cam-walkin__foot .mrc-btn,
body:has(.mrc-rc1) .mrc-cam-example__body .mrc-btn { white-space: normal; text-align: center; }

/* =========================================================================
   Pulido aprobado de presentación de producto y conversión B2B (consolidado 2026-10-10)
   Origen: variantes base-product-polish → base-product-conversion-polish → Final Visual Check (historial Git: b59dd84, 021b82c, aaec658).
   El hero desktop y el mosaico viven arriba, en sus bloques. Acá: Cámaras, hero mobile, WhatsApp compacto, Proceso ≤360, Gastronomía.
   ========================================================================= */

/* Cámaras: plano técnico gris hielo que justifica la foto de estudio (la foto no se toca; multiply solo funde su blanco) */
body:has(.mrc-rc1) .mrc-camaras__media { background: #E7EBEF; border-radius: 2px; overflow: hidden; }   /* overflow: el zoom mobile no se sale del plano */
body:has(.mrc-rc1) .mrc-camaras__media img { mix-blend-mode: multiply; }
body:has(.mrc-rc1) .mrc-camaras__hint { margin-top: var(--sp-3); max-width: 40ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.78); }
body:has(.mrc-rc1) .mrc-camaras__content .mrc-btn { margin-top: var(--sp-6); }

/* Anclas de Productos (Bateas / Cavas): el ítem aterriza con aire arriba y con el header sticky resuelto */
body:has(.mrc-rc1) .mrc-catalog-secondary-item[id] { scroll-margin-top: calc(var(--sp-16) + var(--sp-8)); }

/* Hero mobile: producto visible temprano, CTA principal en una línea */
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-hero__grid { padding-top: 24px; padding-bottom: 40px; }
  body:has(.mrc-rc1) .mrc-hero__regional { margin-bottom: var(--sp-3); }
  body:has(.mrc-rc1) .mrc-hero__text h1 { line-height: 1.08; }
  body:has(.mrc-rc1) .mrc-hero__text .mrc-lede { margin-top: 16px; line-height: 1.55; }
  body:has(.mrc-rc1) .mrc-hero__actions { margin-top: 20px; gap: 12px; flex-wrap: wrap; align-items: center; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--primary { white-space: nowrap; padding: 14px 26px; min-height: 52px; font-size: 16px; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--secondary.on-dark { padding: 12px 20px; min-height: 44px; font-size: 14.5px; white-space: nowrap; }
  body:has(.mrc-rc1) .mrc-hero__trust { margin-top: 16px; }
  body:has(.mrc-rc1) .mrc-hero__visual { margin-top: 16px; }
  body:has(.mrc-rc1) .mrc-camaras__media { aspect-ratio: 5/4; }
  body:has(.mrc-rc1) .mrc-camaras__media img { transform: scale(1.12); transform-origin: 50% 58%; }
}
@media (max-width: 480px) {
  /* CTA principal en UNA línea a todo el ancho; «Ver productos» queda como link secundario debajo */
  body:has(.mrc-rc1) .mrc-hero__actions { flex-direction: column; align-items: stretch; gap: 0; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--primary { width: 100%; justify-content: center; padding: 14px 12px; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--secondary.on-dark { width: 100%; justify-content: center; min-height: 44px; padding: 10px 12px; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.45); }
}
@media (max-width: 360px) {
  body:has(.mrc-rc1) .mrc-hero__text h1 { font-size: 30px; }
  body:has(.mrc-rc1) .mrc-hero__grid { padding-top: 16px; }
  body:has(.mrc-rc1) .mrc-hero__regional { font-size: 14px; margin-bottom: var(--sp-2); }
  body:has(.mrc-rc1) .mrc-hero__text .mrc-lede { font-size: 15px; margin-top: 12px; }
  body:has(.mrc-rc1) .mrc-hero__actions { margin-top: 16px; }
  body:has(.mrc-rc1) .mrc-hero__trust { margin-top: 8px; font-size: 12.5px; }
  body:has(.mrc-rc1) .mrc-hero__visual { margin-top: 12px; }
}
/* Viewports bajos (≤ 480×700): que asome una parte reconocible de la cámara en el primer viewport */
@media (max-width: 480px) and (max-height: 700px) {
  body:has(.mrc-rc1) .mrc-hero__grid { padding-top: 14px; padding-bottom: 32px; }
  body:has(.mrc-rc1) .mrc-hero__regional { margin-bottom: 6px; }
  body:has(.mrc-rc1) .mrc-hero__text h1 { font-size: 33px; line-height: 1.06; }
  body:has(.mrc-rc1) .mrc-hero__text .mrc-lede { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  body:has(.mrc-rc1) .mrc-hero__actions { margin-top: 12px; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--primary { min-height: 48px; padding-top: 11px; padding-bottom: 11px; }
  body:has(.mrc-rc1) .mrc-hero__actions .mrc-btn--secondary.on-dark { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  body:has(.mrc-rc1) .mrc-hero__trust { margin-top: 6px; }
  body:has(.mrc-rc1) .mrc-hero__visual { margin-top: 10px; }
}
/* Tablet landscape (769–1024 × ≤820): idem */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 820px) {
  body:has(.mrc-rc1) .mrc-hero__grid { padding-top: 32px; padding-bottom: 40px; }
  body:has(.mrc-rc1) .mrc-hero__text h1 { font-size: 56px; }
  body:has(.mrc-rc1) .mrc-hero__text .mrc-lede { margin-top: 20px; }
  body:has(.mrc-rc1) .mrc-hero__actions { margin-top: 28px; }
  body:has(.mrc-rc1) .mrc-hero__trust { margin-top: 18px; }
  body:has(.mrc-rc1) .mrc-hero__visual { margin-top: 20px; }
}

/* WhatsApp flotante en pantallas chicas: mismo botón rojo y misma acción, círculo de 52 px (≥ 44) que no tapa contenido */
@media (max-width: 400px) {
  body:has(.mrc-rc1) .mrc-whatsapp-float { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  body:has(.mrc-rc1) .mrc-whatsapp-float svg { width: 26px; height: 26px; }
  body:has(.mrc-rc1) .mrc-whatsapp-float__label-mobile,
body:has(.mrc-rc1) .mrc-whatsapp-float__label-desktop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Proceso ≤ 360 px: más ancho útil para el texto (a 320 «Asesoramiento» tocaba el borde) */
@media (max-width: 360px) {
  body:has(.mrc-rc1) .mrc-process__step { gap: var(--sp-3); padding-left: 20px; }
  body:has(.mrc-rc1) .mrc-process__step .num { font-size: 32px; width: 46px; }
  body:has(.mrc-rc1) .mrc-process__step h3 { font-size: 21px; }
}

/* Gastronomía: lidera la heladera (equipamiento operativo); la cava queda como complemento */
body:has(.mrc-rc1) #rubro-gastronomia .mrc-collage__lg { grid-column: 2; grid-row: 2; }
body:has(.mrc-rc1) #rubro-gastronomia .mrc-collage__sm:nth-of-type(2) { grid-column: 1; grid-row: 1 / 3; }
body:has(.mrc-rc1) #rubro-gastronomia .mrc-collage__sm:nth-of-type(3) { grid-column: 2; grid-row: 1; }

/* >>> css/motion.css */
/* ==========================================================================
   MRC — MOTION SYSTEM v1 · PRUEBA VISUAL (variante aislada)
   --------------------------------------------------------------------------
   Capa única sobre css/styles.css (copia exacta de la base consolidada
   a52b072). No cambia nada en reposo: solo estados de interacción.

   Carácter: preciso, mecánico, sobrio, rápido. 100–260 ms. Solo
   transform / opacity / scale / rotate (nada que dispare layout).

   Orden del archivo (importa: misma especificidad, gana lo último):
     0. Base de touch: sin movimiento "pegado" tras un tap
     1. Press state de botones
     2. Flecha direccional
     3. Chevron del FAQ
     4. Micro-zoom de producto (solo desktop con hover real)
     5. prefers-reduced-motion
   ========================================================================== */

body:has(.mrc-rc1) { --mo-ease: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* --------------------------------------------------------------------------
   0. TOUCH — la base mueve elementos en :hover (botón -2px, tile con zoom,
   etiqueta -2px). En pantallas táctiles :hover queda "pegado" tras el tap.
   Se neutraliza SOLO el movimiento; colores y estados no cambian.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  body:has(.mrc-rc1) .mrc-btn:hover,
body:has(.mrc-rc1) .mrc-whatsapp-float:hover { transform: none; }
  body:has(.mrc-rc1) .mrc-tile:hover .mrc-tile__label { transform: none; }
}

/* Zoom heredado de la base: se reemplaza por un micro-zoom (sección 4).
   Acá solo se devuelve cada imagen a su transform de REPOSO, de modo que
   ningún escalado de 1.11 / 1.10 / 1.03 sobreviva en la variante. */
body:has(.mrc-rc1) .mrc-tile:hover img { transform: scale(1.08); }                       /* reposo base: scale(1.08) */
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2892.jpg"] { transform: none; }     /* reposo base: none (contain) */
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img { transform: none; }      /* reposo base: none */
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img { transform: scale(1.05); }          /* reposo base: scale(1.05) */

/* --------------------------------------------------------------------------
   1. PRESS STATE — CTA primarios, secundarios, cotización y WhatsApp
   Al presionar: scale(.985) translateY(1px) · 110 ms · ease-out.
   No toca tamaño de caja, color, borde ni tipografía.
   -------------------------------------------------------------------------- */
/* HOVER SIN DESPLAZAMIENTO (ajuste 2026-10-13): la base levanta el botón
   2 px en :hover (styles.css:212 y :1586). Con el press nuevo la secuencia
   era reposo → sube 2 px → baja hasta +1 px: demasiado movimiento vertical.
   Se anula SOLO el transform; el color, el borde, el filtro y la sombra de
   :hover de la base siguen intactos. Debe ir ANTES de la regla :active
   (misma especificidad: gana la última), así el press no queda anulado. */
body:has(.mrc-rc1) .mrc-btn:hover,
body:has(.mrc-rc1) .mrc-whatsapp-float:hover { transform: none; }

body:has(.mrc-rc1) .mrc-btn:active,
body:has(.mrc-rc1) .mrc-whatsapp-float:active {
  transform: scale(0.985) translateY(1px);
  transition-duration: 110ms;
  transition-timing-function: ease-out;
}

/* Botón con scroll-reveal (hoy solo "Contanos el proyecto", Cámaras): la
   regla `.js-reveal-ready [data-reveal].is-visible` fija su transform y su
   transition (600 ms) con más especificidad, así que el press de arriba no
   le llegaba. Se aplica el mismo gesto con las propiedades independientes
   `scale` / `translate` (no pisan el transform del reveal) y su propio
   timing. La animación de entrada del reveal queda exactamente igual. */
html.js-reveal-ready:has(.mrc-rc1) [data-reveal].mrc-btn {
  transition: opacity 600ms ease, transform 600ms ease, scale 200ms ease, translate 200ms ease;
}
html.js-reveal-ready:has(.mrc-rc1) [data-reveal].mrc-btn:active {
  scale: 0.985;
  translate: 0 1px;
  transition: opacity 600ms ease, transform 600ms ease, scale 110ms ease-out, translate 110ms ease-out;
}

/* --------------------------------------------------------------------------
   2. FLECHA DIRECCIONAL — solo la flecha, nunca el texto
   Solo con mouse real. En touch no hay desplazamiento.
   -------------------------------------------------------------------------- */
body:has(.mrc-rc1) .mrc-motion-arrow {
  display: inline-block;
  transition: transform 180ms var(--mo-ease);
}
/* La base estiliza `.mrc-rubro-quick__label span` (display:block, margen,
   tamaño, color): la flecha anidada debe heredar, no recibir ese estilo. */
body:has(.mrc-rc1) .mrc-rubro-quick__label .mrc-motion-arrow {
  display: inline-block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  body:has(.mrc-rc1) a:hover .mrc-motion-arrow { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   3. FAQ — chevron
   La apertura del panel NO se toca (la base ya usa grid-template-rows
   0fr→1fr, sin max-height ni JS extra). Solo cambia el timing del icono
   para que rote 180° en 200 ms con la curva del sistema.
   -------------------------------------------------------------------------- */
body:has(.mrc-rc1) .mrc-faq__chevron {
  transition: transform 200ms var(--mo-ease), color 250ms ease;
}

/* --------------------------------------------------------------------------
   4. MICRO-ZOOM DE PRODUCTO — EXPERIMENTAL · solo desktop con hover real
   Usa la propiedad `scale` (independiente de `transform`): se compone con
   el escalado de reposo que ya tienen las imágenes (p. ej. 1.08) sin
   reescribirlo. El contenedor ya tiene overflow:hidden.
     Heladera / freezer / cava ......... ×1.02
     Batea / horno (contain, con aire) .. ×1.012
     Cámara (encuadre aprobado) ......... sin zoom
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body:has(.mrc-rc1) .mrc-tile img,
body:has(.mrc-rc1) .mrc-collage__lg img,
body:has(.mrc-rc1) .mrc-collage__sm img,
body:has(.mrc-rc1) .mrc-rubro-quick__item img { transition: scale 260ms var(--mo-ease); }

  body:has(.mrc-rc1) .mrc-tile:hover img,
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img,
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img { scale: 1.02; }

  body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2892.jpg"],
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img[src$="product_2892.jpg"],
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img[src$="product_2892.jpg"] { scale: 1.012; }

  body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2899.webp"],
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img[src$="product_2899.webp"] { scale: none; }
}

/* --------------------------------------------------------------------------
   5. PREFERS-REDUCED-MOTION — sin desplazamientos, escalas ni rotaciones
   animadas. Los estados siguen cambiando, pero al instante. (La base ya
   fuerza duraciones ~0 con !important; acá se quitan además los
   desplazamientos que sobrevivían como saltos instantáneos.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:has(.mrc-rc1) .mrc-btn:hover,
body:has(.mrc-rc1) .mrc-btn:active,
body:has(.mrc-rc1) .mrc-whatsapp-float:hover,
body:has(.mrc-rc1) .mrc-whatsapp-float:active { transform: none; }
  body:has(.mrc-rc1) .mrc-tile:hover .mrc-tile__label { transform: none; }
  body:has(.mrc-rc1) a:hover .mrc-motion-arrow { transform: none; }
  body:has(.mrc-rc1) .mrc-tile:hover img,
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img,
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img { scale: none; }
  body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-tile:hover img[src$="product_2892.jpg"],
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-collage img[src$="product_2892.jpg"],
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img[src$="product_2857.jpg"],
body:has(.mrc-rc1) .mrc-rubro-quick__item:hover img[src$="product_2892.jpg"] { scale: none; }
}

/* >>> css/family.css */
/* ==========================================================================
   MRC — HELADERAS FAMILY PILOT (variante aislada, NO integrada)
   Sistema de página de familia pensado para 20–50 modelos: el catálogo se
   lee como filas técnicas agrupadas (no como grilla de tarjetas de
   ecommerce). Reutiliza los tokens y componentes de styles.css; todo lo
   nuevo vive acá con el prefijo .mrc-fam-.
   Sin motion experimental: solo los estados nativos de la base.
   ========================================================================== */

body:has(.mrc-rc1) .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Hero: texto + producto real (fondo blanco natural, sin caja) ---------- */
body:has(.mrc-rc1) .mrc-fam-hero { background: var(--surface-white); }
body:has(.mrc-rc1) .mrc-fam-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: var(--sp-16);
  align-items: center;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-12);
}
body:has(.mrc-rc1) .mrc-fam-hero h1 { font-size: 52px; line-height: 1.06; }
body:has(.mrc-rc1) .mrc-fam-hero .mrc-lede { margin-top: var(--sp-4); max-width: 44ch; }
body:has(.mrc-rc1) .mrc-fam-hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
body:has(.mrc-rc1) .mrc-fam-hero__note { margin-top: var(--sp-6); max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-hero__media { margin: 0; }
body:has(.mrc-rc1) .mrc-fam-hero__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-fam-hero__media figcaption { text-align: center; margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-fam-hero__media figcaption a { color: var(--color-gray-900); border-bottom: 1px solid var(--color-gray-500); }
body:has(.mrc-rc1) .mrc-fam-hero__media figcaption a:hover { color: var(--color-red); border-color: var(--color-red); }

/* ---------- Cómo elegir: tres criterios separados por filete, sin tarjetas ---------- */
body:has(.mrc-rc1) .mrc-fam-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); margin-top: var(--sp-8); }
body:has(.mrc-rc1) .mrc-fam-guide li { border-top: 2px solid var(--color-gray-900); padding-top: var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
body:has(.mrc-rc1) .mrc-fam-guide h3 { font-size: 22px; }
body:has(.mrc-rc1) .mrc-fam-guide p { color: #454545; font-size: 15.5px; max-width: 38ch; }
body:has(.mrc-rc1) .mrc-fam-guide .mrc-btn--text { margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-fam-guide__cta { margin-top: var(--sp-8); }

/* ---------- Modelos: banda blanca (las fotos tienen fondo blanco natural) ---------- */
body:has(.mrc-rc1) .mrc-fam-band { background: var(--surface-white); margin-top: var(--sp-16); }
body:has(.mrc-rc1) .mrc-fam-models { padding-bottom: var(--sp-16); }
body:has(.mrc-rc1) .mrc-fam-band .mrc-subsection { padding-top: var(--sp-16); }
body:has(.mrc-rc1) .mrc-fam-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin-top: var(--sp-6); }
body:has(.mrc-rc1) .mrc-fam-jump a { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-gray-900); padding: var(--sp-1) 0; border-bottom: 1px solid var(--color-gray-500); }
body:has(.mrc-rc1) .mrc-fam-jump a:hover { color: var(--color-red); border-color: var(--color-red); }
body:has(.mrc-rc1) .mrc-fam-jump a:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 3px; border-radius: 2px; }

body:has(.mrc-rc1) .mrc-fam-group { margin-top: var(--sp-12); scroll-margin-top: calc(var(--nav-height) + var(--sp-4)); }
body:has(.mrc-rc1) .mrc-fam-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); }
body:has(.mrc-rc1) .mrc-fam-group__head h3 { font-size: 28px; }
body:has(.mrc-rc1) .mrc-fam-group__head p { font-size: 15px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-list { margin-top: var(--sp-4); border-top: 2px solid var(--color-gray-900); }

/* Fila de modelo: foto · identificación · capacidad · acción; ficha técnica debajo */
body:has(.mrc-rc1) .mrc-fam-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 150px auto;
  grid-template-areas: "media id cap actions" "media tech tech tech";   /* la imagen abarca las 2 filas: el producto vertical gana presencia */
  column-gap: var(--sp-8);
  row-gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
body:has(.mrc-rc1) .mrc-fam-row__media { grid-area: media; }
body:has(.mrc-rc1) .mrc-fam-row__media img { width: 176px; height: 208px; object-fit: contain; }
body:has(.mrc-rc1) .mrc-fam-row__id { grid-area: id; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
body:has(.mrc-rc1) .mrc-fam-row__id h4 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; margin: 0; }
body:has(.mrc-rc1) .mrc-fam-row__line { font-size: 15px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-row__rubro,
body:has(.mrc-rc1) .mrc-fam-row__otra { font-size: 13.5px; line-height: 1.4; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-row__cap { grid-area: cap; display: flex; flex-direction: column; gap: 2px; }
body:has(.mrc-rc1) .mrc-fam-row__cap-label { font-size: 13px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-row__cap-val { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.05; color: var(--color-gray-900); font-variant-numeric: tabular-nums; }
body:has(.mrc-rc1) .mrc-fam-row__cap-tbc { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-row__actions { grid-area: actions; justify-self: end; }
body:has(.mrc-rc1) .mrc-fam-row__actions .mrc-btn { padding: 11px 20px; min-height: 44px; font-size: 15px; }

/* Ficha técnica: <details> nativo (sin JS), acción distinta de "Consultar" */
body:has(.mrc-rc1) .mrc-fam-tech { grid-area: tech; }
body:has(.mrc-rc1) .mrc-fam-tech summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-gray-900);
  padding: var(--sp-1) 0; border-bottom: 1px solid transparent;
}
body:has(.mrc-rc1) .mrc-fam-tech summary::-webkit-details-marker { display: none; }
body:has(.mrc-rc1) .mrc-fam-tech summary::after { content: "+"; font-weight: 700; font-size: 18px; line-height: 1; }
body:has(.mrc-rc1) .mrc-fam-tech[open] summary::after { content: "−"; }
body:has(.mrc-rc1) .mrc-fam-tech summary:hover { color: var(--color-red); border-color: var(--color-red); }
body:has(.mrc-rc1) .mrc-fam-tech summary:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 3px; border-radius: 2px; }
body:has(.mrc-rc1) .mrc-fam-tech__panel { margin-top: var(--sp-3); padding: var(--sp-4) 0 var(--sp-1); border-top: 1px solid var(--color-gray-100); max-width: 640px; }
body:has(.mrc-rc1) .mrc-fam-tech__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-8); margin: 0; }
body:has(.mrc-rc1) .mrc-fam-tech__specs > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-fam-tech__specs dt { font-size: 14.5px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-tech__specs dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; text-align: right; }
body:has(.mrc-rc1) .mrc-fam-tech__feat { margin-top: var(--sp-3); font-size: 15px; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-fam-tech__src { margin-top: var(--sp-2); font-size: 13px; color: #454545; }
body:has(.mrc-rc1) .mrc-fam-tech__more { margin-top: var(--sp-3); }
body:has(.mrc-rc1) .mrc-fam-tech--pending { font-size: 14px; color: #454545; }

/* Respaldo: nota de garantía aprobada */
body:has(.mrc-rc1) .mrc-fam-support__note { font-size: 14.5px !important; color: rgba(255,255,255,0.78) !important; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  body:has(.mrc-rc1) .mrc-fam-hero h1 { font-size: 44px; }
  body:has(.mrc-rc1) .mrc-fam-hero__grid { gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-fam-guide { gap: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-fam-row { grid-template-columns: 136px minmax(0, 1fr) 130px auto; column-gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-fam-row__media img { width: 136px; height: 164px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-fam-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-4); padding-bottom: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-fam-hero h1 { font-size: 34px; }
  body:has(.mrc-rc1) .mrc-fam-hero__media { max-width: 300px; }
  body:has(.mrc-rc1) .mrc-fam-hero__actions .mrc-btn { flex: 1 1 100%; justify-content: center; }
  body:has(.mrc-rc1) .mrc-fam-guide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-fam-guide__cta { width: 100%; justify-content: center; }
  body:has(.mrc-rc1) .mrc-fam-band { margin-top: var(--sp-12); }
  body:has(.mrc-rc1) .mrc-fam-band .mrc-subsection { padding-top: var(--sp-12); }
  body:has(.mrc-rc1) .mrc-fam-group { margin-top: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-fam-group__head h3 { font-size: 23px; }
  body:has(.mrc-rc1) .mrc-fam-row {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "media id" "media cap" "actions actions" "tech tech";
    column-gap: var(--sp-4); row-gap: var(--sp-2); align-items: start; padding: var(--sp-4) 0 var(--sp-6);
  }
  body:has(.mrc-rc1) .mrc-fam-row__media img { width: 104px; height: 104px; }
  body:has(.mrc-rc1) .mrc-fam-row__id h4 { font-size: 20px; }
  body:has(.mrc-rc1) .mrc-fam-row__cap { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
  body:has(.mrc-rc1) .mrc-fam-row__cap-val { font-size: 26px; }
  body:has(.mrc-rc1) .mrc-fam-row__actions { justify-self: stretch; margin-top: var(--sp-2); }
  body:has(.mrc-rc1) .mrc-fam-row__actions .mrc-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  body:has(.mrc-rc1) .mrc-fam-tech__specs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  body:has(.mrc-rc1) .mrc-fam-row { grid-template-columns: 88px minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-fam-row__media img { width: 88px; height: 88px; }
}

/* ==========================================================================
   Segunda capa: «Ver más modelos» (divulgación progresiva, UNA sola expansión)
   Sin animaciones nuevas. El panel usa el atributo `hidden`: oculto de verdad
   (no ocupa lugar, no recibe foco, no está en el árbol de accesibilidad).
   ========================================================================== */
body:has(.mrc-rc1) .mrc-fam-more[hidden],
body:has(.mrc-rc1) .mrc-fam-more__bar[hidden] { display: none; }
body:has(.mrc-rc1) .mrc-fam-more__bar {
  margin-top: var(--sp-8);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
}
body:has(.mrc-rc1) .mrc-fam-more__lede { font-size: 15.5px; line-height: 1.55; color: #454545; max-width: 56ch; }
/* Botón secundario sobrio: borde fino y gris, menos peso que los CTA comerciales */
body:has(.mrc-rc1) .mrc-fam-more__btn { padding: 11px 24px; min-height: 44px; font-size: 15px; border-width: 1px; border-color: var(--color-gray-500); }
body:has(.mrc-rc1) .mrc-fam-more__cta {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 2px solid var(--color-gray-900);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
}
body:has(.mrc-rc1) .mrc-fam-more__cta h3 { font-size: 26px; }
body:has(.mrc-rc1) .mrc-fam-more__cta p { color: #454545; max-width: 52ch; }
body:has(.mrc-rc1) .mrc-fam-more__cta .mrc-btn { margin-top: var(--sp-2); }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-fam-more__bar { margin-top: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-fam-more__cta .mrc-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  body:has(.mrc-rc1) .mrc-fam-more__cta { margin-top: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-fam-more__cta h3 { font-size: 21px; }
}

/* Cifra clave larga (largos de batea): más chica para que entre en su columna */
body:has(.mrc-rc1) .mrc-fam-row__cap-val--sm { font-size: 22px; line-height: 1.15; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-fam-row__cap-val--sm { font-size: 20px; } }
body:has(.mrc-rc1) .mrc-fam-guide .mrc-btn--text { align-self: flex-start; }
body:has(.mrc-rc1) .mrc-fam-row:not(:has(.mrc-fam-tech)) { grid-template-areas: "media id cap actions"; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-fam-row:not(:has(.mrc-fam-tech)) { grid-template-areas: "media id" "media cap" "actions actions"; } }

/* Producto horizontal (bateas): foto 4:3 más ancha para que el equipo no se vea chico dentro del cuadrado de 176 px */
body:has(.mrc-rc1) .mrc-fam-row--wide { grid-template-columns: 240px minmax(0, 1fr) 150px auto; }
body:has(.mrc-rc1) .mrc-fam-row--wide .mrc-fam-row__media img { width: 240px; height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 1024px) {
  body:has(.mrc-rc1) .mrc-fam-row--wide { grid-template-columns: 190px minmax(0, 1fr) 130px auto; }
  body:has(.mrc-rc1) .mrc-fam-row--wide .mrc-fam-row__media img { width: 190px; }
}
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-fam-row--wide { grid-template-columns: 132px minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-fam-row--wide .mrc-fam-row__media img { width: 132px; }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-fam-row--wide { grid-template-columns: 112px minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-fam-row--wide .mrc-fam-row__media img { width: 112px; }
}
/* La banda de modelos termina contra el bloque de respaldo: sin franja gris muerta entre ambos */
body:has(.mrc-rc1) .mrc-fam-band + .mrc-cam-support { margin-top: 0; }

/* Final UX pass — enlaces discretos de la landing de familia */
body:has(.mrc-rc1) .mrc-fam-hero__rubro { margin-top: var(--sp-3); }
body:has(.mrc-rc1) .mrc-fam-support__more { margin-top: var(--sp-4); }
body:has(.mrc-rc1) .mrc-fam-support__more .mrc-btn--text { color: #fff; }

/* Descripción comercial + datos principales de cada modelo destacado (debajo de la identificación; ocupa el ancho de la fila) */
body:has(.mrc-rc1) .mrc-fam-row__body { grid-area: body; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 68ch; min-width: 0; }
body:has(.mrc-rc1) .mrc-fam-row__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-fam-row__facts { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; line-height: 1.45; color: #454545; font-variant-numeric: tabular-nums; }
body:has(.mrc-rc1) .mrc-fam-row:has(.mrc-fam-row__body) { grid-template-areas: "media id cap actions" "media body body body" "media tech tech tech"; }
body:has(.mrc-rc1) .mrc-fam-row:has(.mrc-fam-row__body):not(:has(.mrc-fam-tech)) { grid-template-areas: "media id cap actions" "media body body body"; }
body:has(.mrc-rc1) .mrc-fam-more__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-fam-more__cta-actions .mrc-btn--primary { margin-top: 0; }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-fam-row:has(.mrc-fam-row__body) { grid-template-areas: "media id" "media cap" "body body" "actions actions" "tech tech"; }
  body:has(.mrc-rc1) .mrc-fam-row:has(.mrc-fam-row__body):not(:has(.mrc-fam-tech)) { grid-template-areas: "media id" "media cap" "body body" "actions actions"; }
  body:has(.mrc-rc1) .mrc-fam-row__desc { font-size: 14.5px; }
  body:has(.mrc-rc1) .mrc-fam-more__cta-actions { flex-direction: column; align-items: stretch; }
  body:has(.mrc-rc1) .mrc-fam-more__cta-actions .mrc-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  body:has(.mrc-rc1) .mrc-fam-more__cta-actions .mrc-btn--text { align-self: center; }
}
body:has(.mrc-rc1) .mrc-fam-row__facts span { white-space: nowrap; }
@media (max-width: 360px) { body:has(.mrc-rc1) .mrc-fam-row__facts span { white-space: normal; } }

/* ==========================================================================
   /productos — segunda capa «Más equipamiento comercial» (líneas de equipo)
   Una línea = tipo de equipo; modelos de referencia dentro de «Ver modelos de referencia» (mismo <details> de las familias).
   ========================================================================== */
body:has(.mrc-rc1) .mrc-line-group { margin-top: var(--sp-12); }
body:has(.mrc-rc1) .mrc-line-group:first-of-type { margin-top: 0; }
body:has(.mrc-rc1) .mrc-line-group[hidden],
body:has(.mrc-rc1) .mrc-line-more[hidden] { display: none; }
body:has(.mrc-rc1) .mrc-line-group__head h3 { font-size: 26px; }
body:has(.mrc-rc1) .mrc-line-group__head p { margin-top: var(--sp-1); font-size: 15px; color: #454545; max-width: 62ch; }
body:has(.mrc-rc1) .mrc-line-list { margin-top: var(--sp-4); border-top: 2px solid var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-areas: "media body actions" "media tech tech"; column-gap: var(--sp-8); row-gap: var(--sp-2); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-gray-100); scroll-margin-top: calc(var(--sp-16) + var(--sp-8)); }
body:has(.mrc-rc1) .mrc-line[hidden] { display: none; }
body:has(.mrc-rc1) .mrc-line--text { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body actions" "tech tech"; }
body:has(.mrc-rc1) .mrc-line__media { grid-area: media; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
body:has(.mrc-rc1) .mrc-line__media img,
body:has(.mrc-rc1) .mrc-line__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
body:has(.mrc-rc1) .mrc-line__body { grid-area: body; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; align-self: start; }
body:has(.mrc-rc1) .mrc-line__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0; }
body:has(.mrc-rc1) .mrc-line__brand { margin: 0; font-size: 13.5px; line-height: 1.4; color: #454545; }
body:has(.mrc-rc1) .mrc-line__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-gray-900); max-width: 66ch; }
body:has(.mrc-rc1) .mrc-line > .mrc-fam-tech { grid-area: tech; align-self: start; }
body:has(.mrc-rc1) .mrc-line__model .mrc-fam-row__facts span { white-space: normal; }
body:has(.mrc-rc1) .mrc-line__actions { grid-area: actions; justify-self: end; align-self: start; }
body:has(.mrc-rc1) .mrc-line__actions .mrc-btn { padding: 11px 20px; min-height: 44px; font-size: 15px; }
body:has(.mrc-rc1) .mrc-line__models { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body:has(.mrc-rc1) .mrc-line__model { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-gray-100); align-items: start; }
body:has(.mrc-rc1) .mrc-line__model:last-child { border-bottom: 0; }
body:has(.mrc-rc1) .mrc-line__model--nophoto { grid-template-columns: minmax(0, 1fr); }
body:has(.mrc-rc1) .mrc-line__thumb { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }
body:has(.mrc-rc1) .mrc-line__model h5 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; margin: 0; }
body:has(.mrc-rc1) .mrc-line__model > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
body:has(.mrc-rc1) .mrc-line__mdesc { margin: 0; font-size: 14.5px; line-height: 1.5; }
body:has(.mrc-rc1) .mrc-line__model .mrc-btn--text { align-self: flex-start; margin-top: var(--sp-1); }
body:has(.mrc-rc1) .mrc-line-more { margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 2px solid var(--color-gray-900); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
body:has(.mrc-rc1) .mrc-line-more h3 { font-size: 26px; }
body:has(.mrc-rc1) .mrc-line-more p { color: #454545; max-width: 56ch; margin: 0; }
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-line-group { margin-top: var(--sp-8); }
  body:has(.mrc-rc1) .mrc-line-group__head h3 { font-size: 22px; }
  body:has(.mrc-rc1) .mrc-line { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "media body" "actions actions" "tech tech"; column-gap: var(--sp-4); row-gap: var(--sp-3); padding: var(--sp-4) 0; align-items: start; }
  body:has(.mrc-rc1) .mrc-line--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "actions" "tech"; }
  body:has(.mrc-rc1) .mrc-line__media { width: 88px; height: 88px; }
  body:has(.mrc-rc1) .mrc-line__body h4 { font-size: 19px; }
  body:has(.mrc-rc1) .mrc-line__desc { font-size: 14.5px; }
  body:has(.mrc-rc1) .mrc-line__actions { justify-self: stretch; }
  body:has(.mrc-rc1) .mrc-line__actions .mrc-btn,
body:has(.mrc-rc1) .mrc-line-more .mrc-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  body:has(.mrc-rc1) .mrc-line__model { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--sp-3); }
  body:has(.mrc-rc1) .mrc-line__model--nophoto { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-line__thumb { width: 64px; height: 64px; }
  body:has(.mrc-rc1) .mrc-line-more { margin-top: var(--sp-12); }
  body:has(.mrc-rc1) .mrc-line-more h3 { font-size: 21px; }
}
@media (max-width: 400px) {
  body:has(.mrc-rc1) .mrc-line:not(.mrc-line--text) { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--sp-3); }
  body:has(.mrc-rc1) .mrc-line__media { width: 72px; height: 72px; }
}

/* >>> css/ficha.css */
/* ==========================================================================
   MRC vNext — FICHA UNIVERSAL DE PRODUCTO (prefijo .mrc-pd)
   Mismo núcleo para cualquier familia; los campos propios aparecen solo si
   hay dato. Reutiliza tokens y componentes de styles.css.
   ========================================================================== */

body:has(.mrc-rc1) .mrc-pd { padding-top: var(--sp-6); padding-bottom: var(--sp-12); }   /* 24 px: la imagen ya no queda pegada al breadcrumb */
body:has(.mrc-rc1) .mrc-pd__grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}
body:has(.mrc-rc1) .mrc-pd__media { margin: 0; }
body:has(.mrc-rc1) .mrc-pd__media picture,
body:has(.mrc-rc1) .mrc-pd__media img { display: block; width: 100%; height: auto; }
body:has(.mrc-rc1) .mrc-pd__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
body:has(.mrc-rc1) .mrc-pd__family {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--color-gray-900);
  border-bottom: 1px solid var(--color-gray-500); padding-bottom: 1px;
}
body:has(.mrc-rc1) .mrc-pd__family:hover { color: var(--color-red); border-color: var(--color-red); }
body:has(.mrc-rc1) .mrc-pd__family:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 3px; border-radius: 2px; }
body:has(.mrc-rc1) .mrc-pd h1 { font-size: 44px; line-height: 1.08; }
body:has(.mrc-rc1) .mrc-pd .nowrap { white-space: nowrap; }
body:has(.mrc-rc1) .mrc-pd__ident { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); font-size: 15px; color: #454545; }
body:has(.mrc-rc1) .mrc-pd__ident b { font-family: var(--font-display); font-weight: 600; color: var(--color-gray-900); margin-right: 6px; }
body:has(.mrc-rc1) .mrc-pd .mrc-lede { max-width: 52ch; }

/* Datos clave: filetes, no tarjetas */
body:has(.mrc-rc1) .mrc-pd__key { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); border-top: 2px solid var(--color-gray-900); padding-top: var(--sp-4); width: 100%; }
body:has(.mrc-rc1) .mrc-pd__key li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body:has(.mrc-rc1) .mrc-pd__key span { font-size: 13px; color: #454545; }
body:has(.mrc-rc1) .mrc-pd__key strong { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-gray-900); }

body:has(.mrc-rc1) .mrc-pd__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-pd__origin { font-size: 14.5px; color: #454545; }

/* Especificaciones */
body:has(.mrc-rc1) .mrc-pd-specs { background: var(--surface-white); padding: var(--sp-12) 0; scroll-margin-top: calc(var(--nav-height) + var(--sp-4)); }
body:has(.mrc-rc1) .mrc-pd-specs h2 { font-size: 32px; }
body:has(.mrc-rc1) .mrc-pd-specs__list { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: var(--sp-6) 0 0; border-top: 2px solid var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-pd-spec { display: grid; grid-template-columns: minmax(130px, 40%) minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-gray-100); }
body:has(.mrc-rc1) .mrc-pd-spec dt { font-size: 14.5px; color: #454545; }
body:has(.mrc-rc1) .mrc-pd-spec dd { margin: 0; font-weight: 600; color: var(--color-gray-900); overflow-wrap: anywhere; }
body:has(.mrc-rc1) .mrc-pd-apps { margin-top: var(--sp-8); max-width: 62ch; }
body:has(.mrc-rc1) .mrc-pd-apps h3 { font-size: 20px; margin-bottom: var(--sp-2); }
body:has(.mrc-rc1) .mrc-pd-apps p { color: #454545; }
body:has(.mrc-rc1) .mrc-pd-note { margin-top: var(--sp-6); max-width: 70ch; font-size: 14px; line-height: 1.55; color: #454545; }

/* Seguir explorando */
body:has(.mrc-rc1) .mrc-pd-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--sp-12); padding-top: var(--sp-12); padding-bottom: var(--sp-16); }
body:has(.mrc-rc1) .mrc-pd-next h2 { font-size: 26px; }
body:has(.mrc-rc1) .mrc-pd-next p { margin-top: var(--sp-2); color: #454545; max-width: 48ch; }
body:has(.mrc-rc1) .mrc-pd-next > * { min-width: 0; }
body:has(.mrc-rc1) .mrc-pd-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); min-width: 0; max-width: 100%; }
body:has(.mrc-rc1) .mrc-pd-next__actions .mrc-btn { white-space: normal; text-align: center; max-width: 100%; min-width: 0; }

@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-pd__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-pd__media { max-width: 440px; }
  body:has(.mrc-rc1) .mrc-pd h1 { font-size: 34px; }
}
@media (max-width: 480px) {
  body:has(.mrc-rc1) .mrc-pd h1 { font-size: 28px; }
  body:has(.mrc-rc1) .mrc-pd__key { gap: var(--sp-4) var(--sp-6); }
  body:has(.mrc-rc1) .mrc-pd__actions .mrc-btn { width: 100%; white-space: normal; text-align: center; justify-content: center; }
  body:has(.mrc-rc1) .mrc-pd-spec { grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: var(--sp-3); }
  body:has(.mrc-rc1) .mrc-pd-next__actions .mrc-btn--secondary { width: 100%; }
}

/* >>> css/vnext.css */
/* ==========================================================================
   MRC vNext — correcciones globales (solo problemas reproducidos)
   ========================================================================== */

/* Áreas táctiles: enlaces de texto y migas medían 16–21 px de alto (< 24 px, WCAG 2.5.8).
   Se amplía la zona de toque con un pseudo-elemento invisible: no cambia el aspecto,
   el subrayado ni el espaciado. */
body:has(.mrc-rc1) .mrc-btn--text,
body:has(.mrc-rc1) .mrc-breadcrumb a,
body:has(.mrc-rc1) .mrc-pd__family { position: relative; }
body:has(.mrc-rc1) .mrc-btn--text::before,
body:has(.mrc-rc1) .mrc-breadcrumb a::before,
body:has(.mrc-rc1) .mrc-pd__family::before {
  content: "";
  position: absolute;
  inset: -7px -3px;
}
@media (pointer: coarse) {
  body:has(.mrc-rc1) .mrc-btn--text::before,
body:has(.mrc-rc1) .mrc-breadcrumb a::before,
body:has(.mrc-rc1) .mrc-pd__family::before { inset: -12px -6px; }
}

/* Contacto: el botón flotante de WhatsApp se omite en todos los anchos. En desktop tapaba el borde del campo «Consulta»; ahora, además, taparía los controles del mapa en móvil.
   La página ya ofrece WhatsApp (botón principal + número visible + formulario). */
body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-whatsapp-float { display: none; }


/* Cámaras · Walk-in Cooler: esquema ilustrativo junto al título y beneficios en fila.
   Antes: título + párrafos + lista, sin apoyo visual. */
body:has(.mrc-rc1) .mrc-cam-walkin {
  grid-template-areas: "intro visual" "list list" "foot foot";
  grid-template-rows: auto auto auto;
  align-items: start; /* el título arranca a la altura del borde superior de la foto */
  row-gap: var(--sp-8);
}
body:has(.mrc-rc1) .mrc-cam-walkin__visual { grid-area: visual; margin: 0; }
body:has(.mrc-rc1) .mrc-walkin-photo { display: block; width: 100%; height: auto; max-height: 560px; aspect-ratio: 1024 / 1026; object-fit: contain; margin-inline: auto; background: var(--surface-white); }   /* foto de producto sobre fondo blanco: se muestra completa, sin recorte */
body:has(.mrc-rc1) .mrc-cam-walkin__visual figcaption { margin-top: var(--sp-2); font-size: 13.5px; color: #454545; }
body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-8); border-bottom: 0; }
body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list li { border-top: 2px solid var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-cam-walkin__foot { max-width: 70ch; }
@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-cam-walkin { grid-template-areas: "intro" "visual" "list" "foot"; row-gap: var(--sp-6); align-items: start; }
  body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list { grid-template-columns: minmax(0, 1fr); }
  body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list li { border-top: 1px solid var(--color-gray-100); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body:has(.mrc-rc1) .mrc-cam-walkin .mrc-cam-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Productos: con Bateas promovida a familia, Cavas queda como único ítem secundario: imagen más chica que las familias. */
body:has(.mrc-rc1) .mrc-catalog-secondary { grid-template-columns: repeat(2, minmax(0, 260px)); }
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-catalog-secondary { grid-template-columns: minmax(0, 260px); } }

/* Contacto: los dos títulos de columna con el mismo peso y aire final antes del pie (el texto tocaba el footer). */
body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-contact-grid h2 { font-size: 32px; line-height: 1.12; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-contact-grid h2 { font-size: 26px; } }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-contact-grid a.mrc-btn--primary[href*="wa.me"] { order: -1; } }

/* Enlaces sueltos de una línea (pie de la foto de la familia, número de WhatsApp en Contacto): zona de toque ≥ 24 px. */
body:has(.mrc-rc1) .mrc-fam-hero__media figcaption a,
body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-location__hours a { display: inline-block; padding: 4px 0; }

/* Contacto · Ubicación: texto + mapa interactivo (iframe oficial de Google Maps). */
body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto #formulario { padding-bottom: var(--sp-8); }
body:has(.mrc-rc1) .mrc-loc { padding-top: var(--sp-8); padding-bottom: var(--sp-16); }
body:has(.mrc-rc1) .mrc-loc__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--sp-12); align-items: stretch; }
body:has(.mrc-rc1) .mrc-loc__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
body:has(.mrc-rc1) .mrc-loc__text h2 { font-size: 32px; line-height: 1.12; }
body:has(.mrc-rc1) .mrc-loc__text .mrc-btn { margin-top: var(--sp-6); }
body:has(.mrc-rc1) .mrc-loc__map { border: 1px solid var(--color-gray-100); border-radius: var(--radius); overflow: hidden; background: var(--surface-white); min-height: 420px; }
body:has(.mrc-rc1) .mrc-loc__map iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 900px) {
  body:has(.mrc-rc1) .mrc-loc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  body:has(.mrc-rc1) .mrc-loc__text h2 { font-size: 26px; }
  body:has(.mrc-rc1) .mrc-loc__map { min-height: 0; }
  body:has(.mrc-rc1) .mrc-loc__map iframe { height: 320px; }
  body:has(.mrc-rc1) .mrc-loc { padding-bottom: var(--sp-12); }
}
@media (max-width: 480px) { body:has(.mrc-rc1) .mrc-loc__map iframe { height: 300px; } body:has(.mrc-rc1) .mrc-loc__text .mrc-btn { width: 100%; justify-content: center; } }

/* ============ FINAL UX PASS · tarjetas clicables sin enlaces anidados ============
   El enlace real es el título (mejor texto de ancla); su ::after cubre toda la tarjeta.
   El «botón» visible es solo el indicador (aria-hidden) y reacciona al hover/foco de la tarjeta. */
body:has(.mrc-rc1) .mrc-catalog-family { position: relative; cursor: pointer; }
body:has(.mrc-rc1) .mrc-card-link { color: inherit; text-decoration: none; }
body:has(.mrc-rc1) .mrc-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body:has(.mrc-rc1) .mrc-card-link:focus-visible { outline: none; }
body:has(.mrc-rc1) .mrc-catalog-family:has(.mrc-card-link:focus-visible) { outline: 3px solid var(--color-cobalt); outline-offset: 4px; }
body:has(.mrc-rc1) .mrc-catalog-family:hover .mrc-card-fake-btn,
body:has(.mrc-rc1) .mrc-catalog-family:has(.mrc-card-link:focus-visible) .mrc-card-fake-btn { border-color: var(--color-red); color: var(--color-red); }
body:has(.mrc-rc1) .mrc-catalog-family:hover .mrc-card-link { color: var(--color-red); }
body:has(.mrc-rc1) .mrc-card-fake-btn { cursor: pointer; }
body:has(.mrc-rc1) .mrc-catalog-family:hover .mrc-card-fake-btn { transform: none; }

/* Home · módulos de rubro clicables (título = enlace real estirado; «Ver soluciones» es solo indicador) */
body:has(.mrc-rc1) .mrc-industry-module { position: relative; cursor: pointer; }
body:has(.mrc-rc1) .mrc-industry-module__content h3 a.mrc-card-link { font: inherit; color: inherit; }
body:has(.mrc-rc1) .mrc-industry-module:hover .mrc-card-fake-link { border-color: var(--color-white); }
body:has(.mrc-rc1) .mrc-industry-module:has(.mrc-card-link:focus-visible) { outline: 3px solid var(--color-white); outline-offset: -8px; }
body:has(.mrc-rc1) .mrc-services__more { margin-top: var(--sp-6); }

/* Soluciones · accesos visibles a las familias de cada rubro */
body:has(.mrc-rc1) .mrc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
body:has(.mrc-rc1) .mrc-chips li { margin: 0; }
body:has(.mrc-rc1) .mrc-rubro-block__products dd a.mrc-chip,
body:has(.mrc-rc1) .mrc-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--color-gray-900); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--color-gray-900);
  text-decoration: none; transition: border-color 200ms ease, color 200ms ease;
}
body:has(.mrc-rc1) .mrc-rubro-block__products dd a.mrc-chip:hover,
body:has(.mrc-rc1) .mrc-chip:hover { border-color: var(--color-red); color: var(--color-red); border-bottom-width: 1.5px; }
body:has(.mrc-rc1) .mrc-chip:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 2px; }

/* 404 */
body:has(.mrc-rc1) .mrc-404 { padding-top: var(--sp-16); padding-bottom: var(--sp-24, 96px); min-height: 46vh; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-404 { padding-top: var(--sp-8); padding-bottom: var(--sp-16); min-height: 0; } body:has(.mrc-rc1) .mrc-404 h1 { font-size: 34px; } }

/* Contacto · móvil: menos aire entre el H1 y los datos */
@media (max-width: 768px) {
  body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-page-hero { padding-bottom: var(--sp-2); }
  body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto #formulario { padding-top: var(--sp-6); }
}

/* Texto solo para lectores de pantalla (global: también lo usan las fichas, que no cargan family.css) */
body:has(.mrc-rc1) .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ VISUAL PREMIUM PASS (2026-10-15) · afinados de alineación y ritmo ============ */
/* Home · indicador de las tarjetas de rubro: alineado con el texto (no centrado) y con flecha estática */
body:has(.mrc-rc1) .mrc-industry-module__content .mrc-card-fake-link { align-self: flex-start; margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-industry-module__content .mrc-card-fake-link::after { content: "\2192"; margin-left: 0.5em; }
/* Home · Ubicación → FAQ comparten fondo: el aire entre ambos lo da el FAQ (96 px), no 192 */
body:has(.mrc-rc1) .mrc-location#ubicacion { padding-bottom: 0; }
/* Contacto · los campos ocupan el ancho de su columna */
body:has(.mrc-rc1) .mrc-rc1.mrc-page-contacto .mrc-form { max-width: none; }

/* v6 — el botón flotante de WhatsApp (60 px + 28 px de margen) no debe tapar el final del pie */
body:has(.mrc-rc1) .mrc-footer { padding-bottom: 92px; }
@media (max-width: 768px) { body:has(.mrc-rc1) .mrc-footer { padding-bottom: 84px; } }

/* v6 — cierre de «Soluciones para cada tipo de comercio» en Inicio: los rubros no son una lista cerrada */
body:has(.mrc-rc1) .mrc-industries__more { margin-top: var(--sp-8); max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-industries__more .mrc-btn--text { white-space: normal; }
body:has(.mrc-rc1) #rubro-heladerias .mrc-collage img { object-fit: contain; background: #fff; transform: none; }
body:has(.mrc-rc1) #rubro-heladerias .mrc-collage__lg img { padding: var(--sp-4); }

/* v7 · /contacto: formulario nativo de Odoo (crm.lead) con el aspecto de .mrc-form: campos a todo el ancho, etiquetas y avisos en su propia línea. */
body:has(.mrc-rc1) .mrc-contacto-form .s_website_form_field { display: flex; flex-direction: column; gap: 6px; }
body:has(.mrc-rc1) .mrc-contacto-form .s_website_form_label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--color-gray-900); }
body:has(.mrc-rc1) .mrc-contacto-form .s_website_form_input { width: 100%; box-sizing: border-box; }
body:has(.mrc-rc1) .mrc-contacto-form .mrc-form__note { margin-top: 0; }
body:has(.mrc-rc1) .mrc-contacto-form .s_website_form_submit { margin-top: var(--sp-2); }
body:has(.mrc-rc1) .mrc-contacto-form #s_website_form_result { display: block; margin-top: var(--sp-3); font-size: 14px; }

/* v7 · botones largos de las franjas finales («Pedir asesoramiento por WhatsApp»): se parten en dos líneas en lugar de salirse de la pantalla en 320 px. */
body:has(.mrc-rc1) .mrc-cta-final__actions .mrc-btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 400px) { body:has(.mrc-rc1) .mrc-btn { white-space: normal; text-align: center; max-width: 100%; } }


/* --- Normalización frente al CSS base de Odoo (solo páginas RC1) --- */
body:has(.mrc-rc1), body:has(.mrc-rc1) #wrapwrap, body:has(.mrc-rc1) #wrapwrap > main { line-height: normal; }
body:has(.mrc-rc1) #wrapwrap, body:has(.mrc-rc1) #wrapwrap > main { color: inherit; font-family: inherit; }
body:has(.mrc-rc1) { height: auto; }
body:has(.mrc-rc1) button, body:has(.mrc-rc1) input, body:has(.mrc-rc1) select, body:has(.mrc-rc1) textarea { line-height: normal; }
:where(body:has(.mrc-rc1)) dl { margin-top: 1em; margin-bottom: 1em; }
:where(body:has(.mrc-rc1)) dt { font-weight: normal; }   /* Bootstrap pone dt en negrita; el prototipo usa el valor del navegador */   /* :where → especificidad 0: las reglas .mrc-* con margen propio ganan */