/* =========================================================================
   Merana Frutos — sistema de movimiento ("cine")
   -------------------------------------------------------------------------
   Capa de presentacion y animacion que se suma a estilos.css. No cambia la
   marca: reutiliza los mismos verdes, las mismas tipografias, los mismos
   radios y el mismo breakpoint (900px) que ya usaba el sitio.

   Como funciona
   -------------
   1. Entradas    -> [data-cine="..."] + IntersectionObserver (js/cine.js).
                     El elemento arranca oculto SOLO si hay JS (html.mf-js).
   2. Scroll      -> [data-escena] recibe --p (0 a 1) desde js/cine.js y el
                     CSS lo consume con calc(). Nunca animamos width/height/
                     top/left: solo transform y opacity.
   3. Fijado      -> position: sticky nativo. Sin JS de pinning.
   4. Accesible   -> todo lo ligado al scroll vive dentro de
                     @media (prefers-reduced-motion: no-preference).

   Orden de declaracion: SIEMPRE primero el estado final visible y despues
   el override animado. Si un calc() no lo entiende el navegador, la regla
   se descarta y el contenido queda visible.
   ========================================================================= */


/* ------------------------------------------------------------------ tokens */
:root {
  /* curvas */
  --mf-suave: cubic-bezier(.22, .61, .20, 1);      /* entradas normales */
  --mf-cine:  cubic-bezier(.33, 0, .08, 1);        /* movimientos largos */
  /* duraciones */
  --mf-t-corta: 520ms;
  --mf-t:       780ms;
  --mf-t-larga: 1100ms;
  --mf-t-cine:  2400ms;
  /* marca (mismos valores que ya usaba el sitio) */
  --mf-verde-hondo: #14532A;
  --mf-verde:       #185C2B;
  --mf-verde-noche: #0F3F1D;
  --mf-verde-hoja:  #6DB33F;
  --mf-verde-claro: #A8D98A;
  --mf-ambar:       #F9A81C;
  --mf-naranja:     #EE5F1E;
  /* medidas heredadas */
  --mf-ancho: 1240px;
  --mf-canal: clamp(16px, 4vw, 48px);
}

/* El wrapper con overflow-x:hidden rompia position:sticky. overflow:clip
   recorta igual pero NO crea contenedor de scroll. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* la cabecera ya no es opaca desde el primer pixel: el ancla necesita aire */
section[id], main[id] { scroll-margin-top: 104px; }


/* =========================================================================
   1. PRIMITIVAS DE ENTRADA
   ========================================================================= */

html.mf-js [data-cine] {
  transition:
    opacity   var(--mf-t) var(--mf-suave),
    transform var(--mf-t) var(--mf-suave),
    clip-path var(--mf-t-larga) var(--mf-cine);
  transition-delay: var(--mf-retraso, 0ms);
}
/* solo se pinta el estado oculto si el JS esta vivo y el usuario acepta
   movimiento; asi nunca se queda contenido invisible */
html.mf-js:not(.mf-quieto) [data-cine] { opacity: 0; }
html.mf-js:not(.mf-quieto) [data-cine]:not(.es-visible) { will-change: transform, opacity; }

html.mf-js:not(.mf-quieto) [data-cine="subir"]   { transform: translate3d(0, 40px, 0); }
html.mf-js:not(.mf-quieto) [data-cine="bajar"]   { transform: translate3d(0, -28px, 0); }
html.mf-js:not(.mf-quieto) [data-cine="izq"]     { transform: translate3d(-48px, 0, 0); }
html.mf-js:not(.mf-quieto) [data-cine="der"]     { transform: translate3d(48px, 0, 0); }
html.mf-js:not(.mf-quieto) [data-cine="escala"]  { transform: translate3d(0, 34px, 0) scale(.955); }
html.mf-js:not(.mf-quieto) [data-cine="fundido"] { transform: none; }

/* Revelado con mascara, para fotos y tarjetas grandes.
   OJO: el recorte va en el hijo. Si se recorta el propio elemento observado,
   su area de interseccion queda a cero y el observador no lo revela nunca. */
html.mf-js:not(.mf-quieto) [data-cine="mascara"] { opacity: 1; transform: none; }
html.mf-js:not(.mf-quieto) [data-cine="mascara"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--mf-t-larga) var(--mf-cine);
  transition-delay: var(--mf-retraso, 0ms);
}
html.mf-js [data-cine="mascara"].es-visible > * { clip-path: inset(0 0 0 0); }

html.mf-js [data-cine].es-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* --------------------------------------------------- titulares por palabra */
/* js/cine.js parte el texto; el HTML se queda como texto plano y editable */
.mf-pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* aire para que la mascara no corte acentos ni las colas de g, q, y */
  padding: .16em 0 .22em;
  margin:  -.16em 0 -.22em;
}
.mf-pal > span { display: inline-block; will-change: transform; }

html.mf-js:not(.mf-quieto) [data-cine="titular"] { opacity: 1; transform: none; }
html.mf-js:not(.mf-quieto) [data-cine="titular"] .mf-pal > span {
  transform: translate3d(0, 115%, 0);
  transition: transform var(--mf-t-larga) var(--mf-cine);
  transition-delay: calc(var(--mf-retraso, 0ms) + var(--i, 0) * 58ms);
}
html.mf-js [data-cine="titular"].es-visible .mf-pal > span {
  transform: none;
  will-change: auto;
}


/* -------------------------------------------- hijos escalonados (chips) */
/* js/cine.js numera los hijos de [data-cine-indice] con --i. Sirve para
   los tramos ligados al scroll y para este escalonado por visibilidad. */
html.mf-js:not(.mf-quieto) [data-cine="escalonado"] { opacity: 1; transform: none; }
html.mf-js:not(.mf-quieto) [data-cine="escalonado"] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--mf-t-corta) var(--mf-suave),
              transform var(--mf-t-corta) var(--mf-suave);
  transition-delay: calc(var(--mf-retraso, 0ms) + var(--i, 0) * var(--mf-paso, 42ms));
}
html.mf-js [data-cine="escalonado"].es-visible > * { opacity: 1; transform: none; }



/* =========================================================================
   2. CABECERA QUE SE ACLARA SOBRE LA FOTO
   ========================================================================= */

.mf-cab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  --mf-tinta: #FFFFFF;
  --mf-tinta-suave: rgba(255, 255, 255, .88);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--mf-suave), border-color 420ms var(--mf-suave),
              backdrop-filter 420ms var(--mf-suave);
}
/* degradado propio para que el logo y el menu lean sobre cualquier foto */
.mf-cab::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(15, 63, 29, .78) 0%,
    rgba(15, 63, 29, .48) 56%,
    rgba(15, 63, 29, 0) 100%);
  opacity: 1;
  transition: opacity 420ms var(--mf-suave);
}
.mf-cab--solido {
  --mf-tinta: #22312A;
  --mf-tinta-suave: #22312A;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: #E4E9DE;
}
.mf-cab--solido::before { opacity: 0; }

.mf-cab__interior {
  position: relative;
  z-index: 1;
  max-width: var(--mf-ancho);
  margin: 0 auto;
  padding: 12px var(--mf-canal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* las dos versiones del logo comparten celda y se cruzan por opacidad */
.mf-cab__logo { display: grid; flex-shrink: 0; }
.mf-cab__logo img {
  grid-area: 1 / 1;
  height: 54px;
  width: auto;
  display: block;
  transition: opacity 420ms var(--mf-suave);
}
.mf-cab__logo .mf-logo--color  { opacity: 0; }
.mf-cab__logo .mf-logo--blanco { opacity: 1; }
.mf-cab--solido .mf-logo--color  { opacity: 1; }
.mf-cab--solido .mf-logo--blanco { opacity: 0; }

.mf-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.mf-nav__enlace {
  font-size: 15px;
  font-weight: 600;
  color: var(--mf-tinta);
  padding: 6px 0;
  transition: color 260ms var(--mf-suave);
}
.mf-nav__enlace:hover { color: var(--mf-verde-hoja); }

/* el boton de cotizar conserva su forma; solo cambia de piel sobre la foto */
.mf-nav__cta {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #FFFFFF;
  transition: background 260ms var(--mf-suave), border-color 260ms var(--mf-suave),
              color 260ms var(--mf-suave), transform 180ms var(--mf-suave);
}
.mf-nav__cta:hover { background: rgba(255, 255, 255, .26); color: #FFFFFF; transform: translateY(-1px); }
.mf-cab--solido .mf-nav__cta {
  background: var(--mf-verde);
  border-color: var(--mf-verde);
  color: #FFFFFF;
}
.mf-cab--solido .mf-nav__cta:hover { background: var(--mf-verde-noche); border-color: var(--mf-verde-noche); }

.mf-hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background 260ms var(--mf-suave), border-color 260ms var(--mf-suave);
}
.mf-hamburguesa span { display: block; height: 2.5px; border-radius: 2px; background: #FFFFFF; }
.mf-hamburguesa span:last-child { background: var(--mf-verde-claro); }
.mf-cab--solido .mf-hamburguesa { background: #FFFFFF; border-color: #E4E9DE; }
.mf-cab--solido .mf-hamburguesa span { background: var(--mf-verde); }
.mf-cab--solido .mf-hamburguesa span:last-child { background: var(--mf-verde-hoja); }

/* el menu desplegable siempre es opaco: se abre sobre la foto */
.mf-menu {
  position: relative;
  z-index: 1;
  border-top: 1px solid #E4E9DE;
  background: #FFFFFF;
  padding: 12px var(--mf-canal) 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* =========================================================================
   3. CONTENEDORES DE ESCENA
   ========================================================================= */

.mf-escena { position: relative; }

.mf-escena__fijo {
  position: relative;
  overflow: hidden;
}

/* lienzo = el contenedor de contenido de siempre */
.mf-lienzo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mf-ancho);
  margin: 0 auto;
  padding: 0 var(--mf-canal);
}

/* ------------------------------------------------------ fondo fotografico */
.mf-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--mf-verde-hondo);
}
.mf-fondo__riel {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.mf-fondo__foto {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.mf-fondo__velo {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}


/* =========================================================================
   4. HEROE
   ========================================================================= */

.mf-heroe {
  position: relative;
  /* en movil no se fija: la seccion mide lo que mide su contenido */
  min-height: 100vh;
  min-height: 100svh;
}
.mf-heroe__fijo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--mf-alto-cab, 78px) + clamp(24px, 5vh, 64px)) 0 clamp(56px, 9vh, 96px);
}

.mf-heroe__foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  display: block;
}
/* el zoom de entrada vive en la <img>; el parallax de scroll en el riel.
   Separarlos evita que un transform pise al otro. */
.mf-heroe__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(15, 63, 29, .93) 0%,
      rgba(15, 63, 29, .86) 26%,
      rgba(20, 83, 42, .58) 52%,
      rgba(20, 83, 42, .30) 74%,
      rgba(20, 83, 42, .48) 100%),
    linear-gradient(180deg,
      rgba(15, 63, 29, .58) 0%,
      rgba(15, 63, 29, .10) 26%,
      rgba(15, 63, 29, .16) 58%,
      rgba(15, 63, 29, .90) 100%);
}

.mf-heroe__caja { max-width: 660px; }

.mf-heroe__titulo {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 1.02;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -.025em;
  text-shadow: 0 2px 28px rgba(10, 40, 20, .38);
}
.mf-heroe__bajada {
  margin: 24px 0 0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .88);
  max-width: 540px;
  text-shadow: 0 1px 18px rgba(10, 40, 20, .40);
}
.mf-heroe__sellos { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 38px; }
.mf-sello {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}
.mf-sello__punto { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* indicador de scroll: puramente decorativo, no aporta texto nuevo */
.mf-heroe__pista {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 34px);
  z-index: 2;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  pointer-events: none;
}
.mf-heroe__pista::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .9);
}


/* =========================================================================
   5. ESCENA "RAZONES" — panoramica del campo al negocio
   ========================================================================= */

.mf-razones {
  background: var(--mf-verde-hondo);
  color: #FFFFFF;
}
.mf-razones__fijo {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0;
}
.mf-razones__velo {
  background:
    linear-gradient(180deg,
      rgba(15, 63, 29, .92) 0%,
      rgba(20, 83, 42, .62) 26%,
      rgba(20, 83, 42, .62) 64%,
      rgba(15, 63, 29, .94) 100%),
    linear-gradient(90deg,
      rgba(15, 63, 29, .72) 0%,
      rgba(15, 63, 29, .20) 52%,
      rgba(15, 63, 29, .40) 100%);
}
.mf-razones__titulo {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  color: #FFFFFF;
  max-width: 720px;
  letter-spacing: -.015em;
}
.mf-razones__bajada {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .80);
  max-width: 620px;
}
.mf-razones__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}
.mf-razon {
  background: rgba(15, 63, 29, .46);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 24px;
  padding: 28px 24px;
  backdrop-filter: blur(6px);
  transition: transform 200ms var(--mf-suave), box-shadow 200ms var(--mf-suave),
              background 200ms var(--mf-suave);
}
.mf-razon:hover {
  transform: translateY(-4px);
  background: rgba(15, 63, 29, .58);
  box-shadow: 0 16px 36px rgba(8, 32, 16, .28);
}
.mf-razon h3 { margin: 0; font-size: 21px; font-weight: 700; color: #FFFFFF; }
.mf-razon p  { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .84); }


/* =========================================================================
   6. PRODUCTOS — rejilla sobredimensionada y escalonada
   ========================================================================= */

.mf-productos {
  position: relative;
  z-index: 3;
  background: #F4F8EF;
  padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 8vw, 112px);
  /* sube por encima de la escena anterior */
  margin-top: clamp(-56px, -4vw, -32px);
}
.mf-productos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.mf-etiqueta {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-verde-hoja);
}
.mf-titulo-seccion {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--mf-verde-hondo);
  letter-spacing: -.015em;
}
.mf-parrafo-seccion {
  margin: 16px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: #56655C;
}

.mf-catalogo {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(36px, 5vw, 64px);
}
.mf-cat {
  background: #FFFFFF;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid #E4E9DE;
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--mf-suave), box-shadow 320ms var(--mf-suave);
}
.mf-cat:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(20, 83, 42, .13); }
.mf-cat__marco {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EEF2E8;
}
.mf-cat__foto {
  position: absolute;
  top: -8%;              /* aire arriba y abajo para el parallax vertical */
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  display: block;
}
.mf-cat__cuerpo { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* el cuerpo entra por debajo del borde de la tarjeta, que lo recorta:
   40px (el valor de "subir") se saldria del marco en la tarjeta compacta */
html.mf-js:not(.mf-quieto) .mf-cat__cuerpo[data-cine="subir"] { transform: translate3d(0, 22px, 0); }
/* la regla anterior es mas especifica que el ".es-visible" generico (linea ~93)
   y le gana en cascada: sin este empate, el cuerpo se queda desplazado 22px
   para siempre despues de revelarse, pegado al borde inferior de la tarjeta */
html.mf-js:not(.mf-quieto) .mf-cat__cuerpo[data-cine="subir"].es-visible { transform: none; }
.mf-cat__cuerpo h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 700; color: var(--mf-verde-hondo); }
.mf-cat__cuerpo p  { margin: 0; font-size: 15.5px; line-height: 1.6; color: #56655C; }


/* =========================================================================
   7. ESCENA "CLIENTES" — tipografia grande sobre foto
   ========================================================================= */

.mf-clientes {
  background: var(--mf-verde-hondo);
  color: #FFFFFF;
  /* arranca por detras de la seccion clara: asoma por sus esquinas curvas */
  margin-top: clamp(-56px, -4vw, -32px);
}
.mf-clientes__fijo {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0;
}
.mf-clientes__velo {
  background:
    linear-gradient(180deg,
      rgba(15, 63, 29, .90) 0%,
      rgba(20, 83, 42, .52) 42%,
      rgba(15, 63, 29, .92) 100%),
    linear-gradient(90deg, rgba(15, 63, 29, .78) 0%, rgba(15, 63, 29, .30) 54%, rgba(15, 63, 29, .16) 100%);
}
.mf-clientes__titulo {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  color: #FFFFFF;
  max-width: 760px;
  letter-spacing: -.015em;
}
.mf-clientes__bajada {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .80);
  max-width: 620px;
}
.mf-negocios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.mf-negocio {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(15, 63, 29, .46);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 30px) 24px;
  backdrop-filter: blur(6px);
  transition: transform 200ms var(--mf-suave), background 200ms var(--mf-suave),
              border-color 200ms var(--mf-suave);
}
.mf-negocio:hover {
  transform: translateY(-4px);
  background: rgba(15, 63, 29, .60);
  border-color: rgba(168, 217, 138, .55);
}
.mf-negocio__marca { flex-shrink: 0; width: 12px; height: 12px; border-radius: 4px; }
.mf-negocio__nombre {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: #FFFFFF;
  font-family: Nunito, Figtree, system-ui, sans-serif;
}


/* =========================================================================
   8. COBERTURA — la ruta se dibuja con el scroll
   ========================================================================= */

.mf-cobertura {
  position: relative;
  z-index: 3;
  background: #FBFAF5;
  padding: clamp(56px, 8vw, 112px) 0;
  margin-top: clamp(-56px, -4vw, -32px);
}
.mf-cobertura__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: start;
}
.mf-mapa-caja {
  position: relative;
  background: #F4F8EF;
  border: 1px solid #E4E9DE;
  border-radius: 28px;
  padding: 18px;
}
.mf-mapa-marco { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; position: relative; }

/* la ruta punteada queda de fondo y el trazo solido la va cubriendo */
.mf-mapa-ruta path { opacity: .3; }

/* trazo solido que se dibuja sobre la ruta punteada existente */
.mf-mapa-trazo {
  fill: none;
  stroke: var(--mf-ambar);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.mf-mapa-punto circle, .mf-mapa-pin circle { transform-box: fill-box; transform-origin: center; }


/* =========================================================================
   9. LLAMADA FINAL
   ========================================================================= */

.mf-llamada {
  position: relative;
  padding: 0 var(--mf-canal) clamp(56px, 8vw, 96px);
}
.mf-llamada__panel {
  position: relative;
  max-width: var(--mf-ancho);
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  padding: clamp(40px, 6vw, 84px) clamp(28px, 5vw, 68px);
  background: var(--mf-verde);
  isolation: isolate;
}
.mf-llamada__velo {
  background:
    linear-gradient(115deg, rgba(15, 63, 29, .95) 0%, rgba(24, 92, 43, .90) 48%, rgba(24, 92, 43, .78) 100%);
}
.mf-llamada__burbuja { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; }
.mf-llamada__contenido { position: relative; z-index: 2; max-width: 720px; }
.mf-llamada__titulo {
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.1;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -.015em;
}
.mf-llamada__bajada {
  margin: 20px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}


/* =========================================================================
  10. MOVIMIENTO LIGADO AL SCROLL - lo comun
      Aqui solo va lo que se comporta igual este o no fijada la escena:
      formulas centradas en --p = .5 (el elemento a media pantalla) o
      animaciones de entrada que no dependen del recorrido.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------- heroe: entrada */
  html.mf-js .mf-heroe__foto {
    animation: mf-entrada-foto var(--mf-t-cine) var(--mf-cine) both;
  }
  @keyframes mf-entrada-foto {
    from { transform: scale(1.16); }
    to   { transform: scale(1); }
  }
  /* el desenfoque inicial solo en pantallas grandes: en movil cuesta caro */
  @media (min-width: 900px) {
    html.mf-js .mf-heroe__foto { animation-name: mf-entrada-foto-nitida; }
    @keyframes mf-entrada-foto-nitida {
      from { transform: scale(1.16); filter: blur(12px); }
      60%  { filter: blur(2px); }
      to   { transform: scale(1); filter: blur(0); }
    }
  }

  @keyframes mf-pista {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(7px); }
  }

  /* ---------------------------------------------- productos: profundidad */
  .mf-cat__foto {
    transform: translate3d(0, calc((var(--p, .5) - .5) * -46px), 0) scale(1.02);
  }

  /* ------------------------------------------------- cobertura: la ruta */
  /* Esta linea de tiempo no corre sobre --p (el avance de la tarjeta) sino
     sobre --pc, que el motor cierra en 1 justo cuando la cabecera cambia de
     color. Por eso los tramos llegan hasta 1: el remate es ese cambio. */
  .mf-mapa-trazo {
    stroke-dashoffset: clamp(0, calc(1 - (var(--pc, 1) - .28) / .72), 1);
  }
  .mf-mapa-punto circle {
    --desde: calc(.26 + var(--i, 0) * .082);
    --t: clamp(0, calc((var(--pc, 1) - var(--desde)) / .08), 1);
    opacity: var(--t);
    transform: scale(var(--t));
  }
  .mf-mapa-pin circle {
    --t: clamp(0, calc((var(--pc, 1) - var(--desde, .22)) / .10), 1);
    opacity: var(--t);
    transform: scale(calc(.4 + var(--t) * .6));
  }
  /* ------------------------------------------------------ llamada final */
  .mf-llamada__riel {
    transform: translate3d(0, calc((var(--p, .5) - .5) * -10vh), 0) scale(1.14);
  }
  .mf-llamada__burbuja {
    transform: translate3d(0, calc((var(--p, .5) - .5) * var(--deriva, -60px)), 0);
  }

  /* ------------------------------------------- razones: la panoramica
     El riel mide lo mismo que la ventana y a la foto le sobra un 46%:
     moverlo ese 46% la recorre entera y la deja encajada por el otro lado.
     Vale fijada (--p = 0 al pegarse arriba) y de paso (--p = 0 al asomar
     por abajo), porque en los dos casos --p va de 0 a 1 en el mismo orden. */
  .mf-razones__riel { transform: translate3d(calc(var(--p, 0) * -46%), 0, 0); }
}


/* =========================================================================
  11. ESCENAS FIJADAS
      La clase mf-fijado la pone el <head> y la revisa js/cine.js al
      redimensionar: pantalla ancha, alta y con movimiento permitido.
      El fijado y sus formulas van juntos a proposito. Con la seccion
      pegada, --p = 0 significa "arriba del todo"; sin fijar significa
      "a media pantalla", y las mismas formulas harian lo contrario
      (por ejemplo, desvanecer el heroe nada mas cargar la pagina).
   ========================================================================= */

html.mf-fijado .mf-heroe   { height: 132svh; min-height: 132svh; }
html.mf-fijado .mf-razones { height: 240svh; }
html.mf-fijado .mf-clientes{ height: 158svh; }

html.mf-fijado .mf-heroe__fijo,
html.mf-fijado .mf-razones__fijo,
html.mf-fijado .mf-clientes__fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------ heroe: parallax y salida */
  html.mf-fijado .mf-heroe__riel {
    transform: translate3d(0, calc(var(--p, 0) * 5vh), 0) scale(calc(1.08 + var(--p, 0) * .10));
  }
  html.mf-fijado .mf-heroe__velo { opacity: calc(.9 + var(--p, 0) * .1); }
  html.mf-fijado .mf-heroe__caja {
    transform: translate3d(0, calc(var(--p, 0) * -68px), 0);
    opacity: clamp(0, calc(1.06 - var(--p, 0) * 1.35), 1);
  }
  html.mf-fijado .mf-heroe__pista {
    opacity: clamp(0, calc(1 - var(--p, 0) * 4), 1);
    animation: mf-pista 2.4s var(--mf-suave) infinite;
  }

  /* ------------------------------------------------- razones y clientes */
  html.mf-fijado .mf-razones__lienzo  { transform: translate3d(0, calc(var(--p, 0) * -46px), 0); }
  html.mf-fijado .mf-clientes__lienzo { transform: translate3d(0, calc(var(--p, 0) * -38px), 0); }
  html.mf-fijado .mf-clientes__riel {
    transform: scale(calc(1.06 + var(--p, 0) * .12)) translate3d(0, calc(var(--p, 0) * -3vh), 0);
  }

  /* cada tarjeta entra en su propio tramo del recorrido y se queda */
  html.mf-fijado .mf-razon {
    --desde: calc(.05 + var(--i, 0) * .15);
    --t: clamp(0, calc((var(--p, 1) - var(--desde)) / .15), 1);
    opacity: var(--t);
    transform: translate3d(0, calc((1 - var(--t)) * 46px), 0) scale(calc(.97 + var(--t) * .03));
  }
  html.mf-fijado .mf-razon:hover {
    transform: translate3d(0, calc((1 - var(--t)) * 46px - 4px), 0) scale(calc(.97 + var(--t) * .03));
  }
  html.mf-fijado .mf-negocio {
    --desde: calc(.08 + var(--i, 0) * .14);
    --t: clamp(0, calc((var(--p, 1) - var(--desde)) / .14), 1);
    opacity: var(--t);
    transform: translate3d(calc((1 - var(--t)) * 38px), 0, 0);
  }
  html.mf-fijado .mf-negocio:hover { transform: translate3d(calc((1 - var(--t)) * 38px), -4px, 0); }
}


/* =========================================================================
  12. ESCENAS SIN FIJAR (movil y pantallas bajas)
      Mismo relato, recorridos mas cortos y entradas por visibilidad: con la
      seccion suelta, el progreso de scroll no dice si UNA tarjeta concreta
      esta en pantalla, y el observador si.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  html:not(.mf-fijado) .mf-heroe__riel {
    transform: translate3d(0, calc((var(--p, .5) - .5) * 6vh), 0) scale(1.10);
  }
  html:not(.mf-fijado) .mf-clientes__riel {
    transform: scale(calc(1.03 + var(--p, 0) * .05));
  }
  html:not(.mf-fijado) .mf-razones__lienzo,
  html:not(.mf-fijado) .mf-clientes__lienzo { transform: none; }

  html.mf-js:not(.mf-quieto):not(.mf-fijado) .mf-razon,
  html.mf-js:not(.mf-quieto):not(.mf-fijado) .mf-negocio {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity var(--mf-t) var(--mf-suave), transform var(--mf-t) var(--mf-suave);
  }
  html.mf-js:not(.mf-fijado) .mf-razon.es-visible,
  html.mf-js:not(.mf-fijado) .mf-negocio.es-visible { opacity: 1; transform: none; }
  html.mf-js:not(.mf-fijado) .mf-razon.es-visible:hover,
  html.mf-js:not(.mf-fijado) .mf-negocio.es-visible:hover { transform: translateY(-4px); }
}


/* =========================================================================
  13. ESCRITORIO - composicion
   ========================================================================= */

@media (min-width: 900px) {
  .mf-catalogo { grid-template-columns: repeat(2, 1fr); }
  /* desfase vertical: la rejilla deja de parecer una cuadricula */
  .mf-cat:nth-child(even) { margin-top: clamp(40px, 6vw, 88px); }

  .mf-cobertura__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .mf-razones__rejilla   { grid-template-columns: repeat(4, 1fr); }
  .mf-negocios           { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
  .mf-heroe__caja { max-width: 700px; }

  /* -------------------------------------------- productos: las cuatro en fila
     La rejilla pasa a una sola linea. Al perder ancho, la tarjeta se compacta:
     canal mas estrecho, radio menor, cuerpo y tipografia mas ajustados. El
     desfase vertical se retira y las tarjetas igualan altura, para que la fila
     lea como una sola pieza y no como cuatro alturas distintas. */
  .mf-catalogo {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: clamp(18px, 1.8vw, 26px);
    margin-top: clamp(32px, 3.5vw, 44px);
  }
  .mf-cat:nth-child(even) { margin-top: 0; }
  .mf-cat { border-radius: 20px; }
  .mf-cat:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(20, 83, 42, .13); }
  .mf-cat__cuerpo    { padding: 20px 22px 24px; gap: 8px; }
  .mf-cat__cuerpo h3 { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.25; }
  .mf-cat__cuerpo p  { font-size: 14.5px; line-height: 1.55; }

  /* --- cascada de izquierda a derecha ---------------------------------
     Aqui las cuatro tarjetas cruzan la linea de disparo en el mismo cuadro,
     asi que el retraso por indice se lee como un barrido. Por debajo de este
     ancho cada tarjeta entra por su cuenta al scrollear y el retraso sobra:
     por eso --i solo se usa dentro de esta consulta. */
  .mf-catalogo[data-cine-indice] .mf-cat__marco  { --mf-retraso: calc(var(--i, 0) * 110ms); }
  .mf-catalogo[data-cine-indice] .mf-cat__cuerpo { --mf-retraso: calc(var(--i, 0) * 110ms + 200ms); }

  @media (prefers-reduced-motion: no-preference) {
    /* el marco mide ~200px de alto: el aire del 8% solo da ~16px por lado,
       asi que el recorrido baja de 46px a 24px y la foto nunca descubre borde */
    .mf-cat__foto { transform: translate3d(0, calc((var(--p, .5) - .5) * -24px), 0) scale(1.02); }
  }
}


/* =========================================================================
  13b. MOVIL - se simplifica, no se copia el escritorio
   ========================================================================= */

@media (max-width: 899px) {
  .mf-razones__fijo,
  .mf-clientes__fijo { padding: clamp(74px, 14vw, 96px) 0 clamp(60px, 12vw, 84px); }

  @media (prefers-reduced-motion: no-preference) {
    /* la panoramica recorre menos: la foto solo sobresale un 26% */
    .mf-razones__riel { transform: translate3d(calc(var(--p, 0) * -26%), 0, 0); }
    .mf-cat__foto     { transform: translate3d(0, calc((var(--p, .5) - .5) * -22px), 0) scale(1.02); }
    .mf-llamada__riel { transform: translate3d(0, calc((var(--p, .5) - .5) * -5vh), 0) scale(1.10); }
  }

  .mf-razon, .mf-negocio {
    backdrop-filter: none;
    background: rgba(15, 63, 29, .58);
  }

  .mf-heroe__titulo { font-size: clamp(36px, 9.5vw, 50px); }
  .mf-heroe__sellos { gap: 10px 20px; margin-top: 28px; }
  .mf-heroe__pista { display: none; }

  /* Entrada del heroe mas corta en el telefono: es lo primero que se ve y
     el navegador no lo da por pintado (LCP) hasta que la bajada asoma.
     Mismo orden y mismas curvas que en escritorio, solo menos espera.
     El !important es necesario: el retraso de escritorio va en style=. */
  .mf-heroe__bajada { --mf-retraso: 260ms !important; }
  .mf-heroe__sellos { --mf-retraso: 440ms !important; }
  html.mf-js:not(.mf-quieto) .mf-heroe__titulo .mf-pal > span {
    transition-delay: calc(var(--i, 0) * 40ms);
  }
}

/* pantallas muy bajas en horizontal: el heroe no puede recortar contenido */
@media (max-height: 560px) {
  .mf-heroe, .mf-heroe__fijo { min-height: 0; height: auto; }
  .mf-heroe__fijo { position: relative; padding-top: calc(var(--mf-alto-cab, 78px) + 32px); padding-bottom: 48px; }
  .mf-heroe__pista { display: none; }
}


/* =========================================================================
  14. MENOS MOVIMIENTO — todo visible, sin recorridos ni fijados
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .mf-heroe, .mf-razones, .mf-clientes { height: auto; min-height: 0; }
  .mf-heroe { min-height: 100svh; }
  .mf-heroe__fijo, .mf-razones__fijo, .mf-clientes__fijo { position: relative; }
  .mf-fondo__riel { transform: none !important; }
  .mf-mapa-trazo { stroke-dashoffset: 0; }
  .mf-heroe__pista { display: none; }
  html.mf-js [data-cine] { opacity: 1; transform: none; clip-path: none; }
  .mf-pal > span { transform: none; }
}


/* =========================================================================
  15. AJUSTES POR ESCENA QUE DEPENDEN DE LA FOTO
   ========================================================================= */

/* La panoramica es mas ancha que el riel: el riel mide 100% del contenedor,
   asi que moverlo -46% equivale a -46% del ancho de la ventana y deja la
   foto encajada por el otro lado. Sin medir nada desde JS. */
.mf-razones .mf-fondo__foto {
  width: 146%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 899px) {
  .mf-razones .mf-fondo__foto { width: 126%; object-position: 38% center; }
}

.mf-clientes .mf-fondo__foto { object-position: 50% 42%; }
.mf-llamada  .mf-fondo__foto { object-position: 50% 58%; }


/* -------------------------------------------------- mapa: ritmo del trazo */
/* los puntos de la ruta aparecen en orden de norte a sur */
.mf-mapa-punto circle:nth-child(1) { --i: 0; }
.mf-mapa-punto circle:nth-child(2) { --i: 1; }
.mf-mapa-punto circle:nth-child(3) { --i: 2; }
.mf-mapa-punto circle:nth-child(4) { --i: 3; }
.mf-mapa-punto circle:nth-child(5) { --i: 4; }
.mf-mapa-punto circle:nth-child(6) { --i: 5; }
.mf-mapa-punto circle:nth-child(7) { --i: 6; }
.mf-mapa-punto circle:nth-child(8) { --i: 7; }
.mf-mapa-punto circle:nth-child(9) { --i: 8; }
/* Tampico abre la ruta, Veracruz la cierra con el trazo ya completo */
.mf-mapa-pin circle:nth-child(1) { --desde: .20; }
.mf-mapa-pin circle:nth-child(2) { --desde: .88; }
.mf-mapa-etq text:nth-child(1)   { --desde: .26; }
.mf-mapa-etq text:nth-child(2)   { --desde: .90; }

@media (prefers-reduced-motion: no-preference) {
  .mf-mapa-etq text {
    opacity: clamp(0, calc((var(--pc, 1) - var(--desde, .22)) / .10), 1);
  }
}


/* ------------------------------------------- boton flotante de WhatsApp */
/* aparece cuando el heroe ya paso: no compite con la primera pantalla */
.mf-flotante {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mf-verde);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(20, 83, 42, .28);
  transition: transform 320ms var(--mf-suave), opacity 320ms var(--mf-suave),
              background 180ms var(--mf-suave);
}
.mf-flotante:hover { background: var(--mf-verde-noche); color: #FFFFFF; }
.mf-flotante__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--mf-verde-hoja); display: block; }

html.mf-js .mf-flotante {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.94);
  pointer-events: none;
}
html.mf-js.mf-avanzado .mf-flotante {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
html.mf-js.mf-avanzado .mf-flotante:hover { transform: translateY(-2px); }


/* ------------------------------------------------------------ impresion */
@media print {
  .mf-cab, .mf-flotante, .mf-fondo, .mf-heroe__pista { display: none !important; }
  .mf-heroe, .mf-razones, .mf-clientes { height: auto !important; }
  .mf-heroe__fijo, .mf-razones__fijo, .mf-clientes__fijo { position: static !important; }
  .mf-heroe__titulo, .mf-razones__titulo, .mf-clientes__titulo,
  .mf-llamada__titulo, .mf-negocio__nombre { color: #14532A !important; text-shadow: none !important; }
  .mf-heroe__bajada, .mf-razones__bajada, .mf-clientes__bajada { color: #4C5C52 !important; }
  [data-cine] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}


/* -------------------------------------------------- el flotante y el pie */
/* al llegar al pie, el boton se aparta: si no, tapa los enlaces legales */
html.mf-js.mf-avanzado.mf-final .mf-flotante {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.94);
  pointer-events: none;
}