/* =========================================================================
   Merana Frutos — hoja de estilos
   Generada a partir del diseño original: estados, responsive y extras que un
   atributo style= no puede expresar.

   Parte del maquetado sigue en los atributos style= de index.html. Las
   secciones con animación (portada, razones, productos, clientes, cobertura
   y cierre) usan clases y viven en css/cine.css, porque un style= inline
   gana siempre a una clase y bloquearia las animaciones.
   ========================================================================= */

/* ------------------------------------------------------------ tipografias */
/* Servidas desde /fonts (antes Google Fonts). Son fuentes variables: un
   archivo por familia cubre todos los pesos. Solo el juego latino, que
   incluye acentos, ñ, ¿ y ¡. Si se cambian, actualizar tambien pagina.css
   y los <link rel="preload"> de index.html y 404.html. */
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ base */
body {
  margin: 0;
  background: #FBFAF5;
  color: #22312A;
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #185C2B; text-decoration: none; }
a:hover { color: #6DB33F; }
:focus-visible { outline: 3px solid #6DB33F; outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: Nunito, Figtree, system-ui, sans-serif; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* el encabezado es sticky: que los anclas no queden debajo de él */
section[id], main[id] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }

/* --------------------------------------------------------- accesibilidad */
.mf-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #185C2B; color: #FFFFFF; font-weight: 700;
  padding: 14px 20px; border-radius: 0 0 12px 0;
}
.mf-saltar:focus {
  left: 0; color: #FFFFFF;
}

/* ------------------------------------------------ responsive del encabezado */
@media (max-width: 899px) {
  .solo-escritorio { display: none !important; }
}
@media (min-width: 900px) {
  .solo-movil { display: none !important; }
}

/* --------------------------------------------------- mapa de cobertura */
.mf-mapa {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(160deg, #EEF6E6 0%, #F7FAF2 100%);
  padding: 18px;
}
.mf-mapa svg { width: 100%; height: auto; max-height: 78%; }
.mf-mapa-forma {
  fill: #FFFFFF; stroke: #CBD9C4;
  stroke-width: 2.5; stroke-linejoin: round;
}
.mf-mapa-pin circle { fill: #6DB33F; stroke: #FFFFFF; stroke-width: 3; }
.mf-mapa-punto circle { fill: #FFFFFF; stroke: #185C2B; stroke-width: 2.5; }
.mf-mapa-ruta path { stroke: #F9A81C; stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mf-mapa-etq text { font-size: 13px; font-weight: 700; fill: #14532A; }
.mf-mapa-golfo { font-size: 12px; font-weight: 600; fill: #9BB0A2; }
.mf-mapa-nota {
  text-align: center;
  font-size: 14.5px; font-weight: 700; color: #185C2B;
}

.mf-chip {
  font-size: 14.5px; font-weight: 600; color: #22312A;
  background: #F4F8EF; border: 1px solid #DCE7D3;
  padding: 8px 14px; border-radius: 999px;
}
.mf-chip-fuerte { font-weight: 700; color: #14532A; background: #EAF4E0; border-color: #C7DDB4; }

/* --------------------------------------------------- preferencias del sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- impresión */
@media print {
  header, .mf-saltar, [data-mf-link="whatsapp"] { display: none !important; }
  body { background: #FFFFFF; }
}

/* --- estado :hover recuperado del diseno original --- */
.hv9:hover { background: #EEF6E6; color: #14532A; }