/* ═══════════════════════════════════════════════════════════════════════
   Mora Mora — capa responsive.

   La página se construyó sólo para escritorio: todo el contenido vive
   dentro de un wrapper con min-width:1100px y no existía ninguna media
   query. En un teléfono de 375px eso obligaba a hacer zoom y scroll
   lateral para leer cualquier cosa.

   El layout usa estilos inline en casi todos los nodos, así que aquí se
   sobreescriben por selector de atributo sobre el propio style. Es menos
   elegante que refactorizar cada nodo, pero no toca la plantilla y por
   tanto no arriesga el render de escritorio, que ya está aprobado.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. El wrapper deja de imponer 1100px ───────────────────────────── */
@media (max-width: 1140px) {
  .mm-page { min-width: 0 !important; }
}

/* ── 2. Rejillas de dos o más columnas se apilan ────────────────────── */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 2.2fr"],
  [style*="grid-template-columns:1fr 1.35fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:6fr 5fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer: 2fr 1fr 1fr 1fr 1fr -> columnas apiladas */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-6) !important;
  }
}
@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. Bloques de foto con medidas fijas ───────────────────────────── */
@media (max-width: 900px) {
  [style*="width:440px"], [style*="width: 440px"],
  [style*="width:431px"], [style*="width: 431px"],
  [style*="width:280px"], [style*="width: 280px"] {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [style*="height:500px"], [style*="height: 500px"],
  [style*="height:474px"], [style*="height: 474px"] {
    height: auto !important;
    aspect-ratio: 431 / 474;
  }
  [style*="height:700px"], [style*="height: 700px"] { height: auto !important; min-height: 60vh; }
  [style*="height:420px"], [style*="height: 420px"] { height: 260px !important; }
}

/* ── 4. Header ──────────────────────────────────────────────────────
   Es sticky, así que su altura se descuenta de la pantalla útil en todo
   momento. En escritorio mide 115px; al envolverse en móvil llegaba a
   199px — una cuarta parte de un iPhone. Aquí baja a ~110px: logo y
   botón en la primera fila, navegación en una sola línea debajo. */
@media (max-width: 1040px) {
  .mm-page header {
    flex-wrap: wrap !important;
    padding: 10px var(--space-5) !important;
    row-gap: 6px !important;
    gap: var(--space-4) !important;
  }
  .mm-page header img[src*="Logo-full-azul"] {
    height: 56px !important; width: 60px !important;
  }
  .mm-page header nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center !important;
    gap: var(--space-4) !important;
    font-size: 14px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mm-page header nav::-webkit-scrollbar { display: none; }
  .mm-page header nav > * { white-space: nowrap; }
  /* El scroll-padding original asumía el header fijo de 115px. */
  html { scroll-padding-top: 122px !important; }
}
@media (max-width: 400px) {
  .mm-page header nav { font-size: 13px !important; gap: 12px !important; }
  .mm-page header img[src*="Logo-full-azul"] { height: 48px !important; width: 52px !important; }
}

/* ── 5. Escala de espaciado y modelo de caja ────────────────────────
   Todos los rellenos de la página salen de var(--space-N). En vez de
   parchear los ~30 patrones de padding uno por uno, se reescala el token:
   --space-8 (64px) a cada lado se comía un tercio de una pantalla de
   375px. Se conserva el orden de la escala para no romper proporciones.

   El proyecto no define box-sizing, así que todo hereda content-box y
   cualquier ancho fijo más su padding termina desbordando. Se corrige
   sólo dentro de esta media query: en escritorio nada cambia. */
@media (max-width: 760px) {
  body, body *, body *::before, body *::after { box-sizing: border-box; }
  :root {
    --space-6: 24px;   /* 32 */
    --space-7: 28px;   /* 48 */
    --space-8: 32px;   /* 64 */
    --space-9: 48px;   /* 96 */
  }
}
@media (max-width: 420px) {
  :root {
    --space-7: 22px;
    --space-8: 22px;
    --space-9: 40px;
  }
}

/* ── 5b. Tipografía ─────────────────────────────────────────────────
   Los titulares están pensados para una columna de ~1100px. */
@media (max-width: 760px) {
  .mm-page [style*="font-size:64px"], .mm-page [style*="font-size: 64px"] { font-size: clamp(32px, 9vw, 52px) !important; }
  .mm-page [style*="font-size:56px"], .mm-page [style*="font-size: 56px"] { font-size: clamp(30px, 8vw, 46px) !important; }
  .mm-page [style*="font-size:48px"], .mm-page [style*="font-size: 48px"] { font-size: clamp(28px, 7.5vw, 40px) !important; }
  .mm-page [style*="font-size:40px"], .mm-page [style*="font-size: 40px"] { font-size: clamp(26px, 6.5vw, 34px) !important; }
  .mm-page [style*="font-size:36px"], .mm-page [style*="font-size: 36px"] { font-size: clamp(24px, 6vw, 30px) !important; }
  .mm-page [style*="font-size:32px"], .mm-page [style*="font-size: 32px"] { font-size: clamp(22px, 5.5vw, 28px) !important; }
}

/* ── 6. Red de seguridad: nada debe provocar scroll lateral ─────────── */
html, body { overflow-x: hidden; }
@media (max-width: 900px) {
  .mm-page img { max-width: 100%; height: auto; }
}

/* ── 7. Texto justificado ───────────────────────────────────────────
   En columnas anchas se lee bien; en 375px el navegador estira los
   espacios y deja "ríos" de blanco entre palabras. */
@media (max-width: 760px) {
  .mm-page [style*="text-align: justify"],
  .mm-page [style*="text-align:justify"] {
    text-align: left !important;
  }
}

/* ── 8. Subpáginas (Eventos y Catering, Proveedores) ────────────────
   No tienen el wrapper de 1100px, pero sus formularios usan rejillas de
   dos columnas que a 375px dejaban el campo derecho fuera de pantalla. */
@media (max-width: 620px) {
  form [style*="grid-template-columns:1fr 1fr"],
  form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  form textarea, form input, form select { width: 100% !important; max-width: 100% !important; }
  main { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
}

/* ── 9. Sello giratorio "no bullshit · just clean" ──────────────────
   Va posicionado en absoluto a right:8px con 136px de ancho, pero su SVG
   renderiza algo más ancho que su caja y se salía 8px de la pantalla. */
@media (max-width: 760px) {
  .mm-page [style*="bottom:-28px"][style*="right:8px"],
  .mm-page [style*="bottom: -28px"][style*="right: 8px"] {
    right: 16px !important;
    width: 104px !important;
    height: 104px !important;
    bottom: -18px !important;
  }
}