/* ==========================================================================
   DISEÑO DE MARCA — caso Mangia Fresco y tarifas
   ========================================================================== */
/* ---------- Caso de marca ---------- */
.case { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.case__frame { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.case__frame img { width: 100%; height: auto; display: block; transform-origin: center; }
.case__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 5.4rem); letter-spacing: -.045em; line-height: .95; margin-bottom: 1.2rem; }
.case__desc { color: var(--smoke); margin-bottom: 1.6rem; max-width: 48ch; }
.case__credit { color: var(--smoke); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
/* ---------- Manual de Mangia Fresco ---------- */
.mf { padding-top: 0; }
.mf__head { max-width: 900px; }
.mf__head .subtitle { margin-bottom: 2.5rem; }
.mf__grid { display: grid; gap: clamp(12px, 1.6vw, 22px); }
.mf__row { display: grid; gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.mf__row--2 { grid-template-columns: 1fr 1fr; }
.mf__row--3 { grid-template-columns: repeat(3, 1fr); }
.mf__row--1 { grid-template-columns: 1fr; }
.mf__item { position: relative; display: block; width: 100%; text-align: left; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.mf__item img { display: block; width: 100%; height: auto; transition: filter .6s var(--ease); }
.mf__item span { position: absolute; left: 12px; bottom: 12px; padding: .45em .9em; border-radius: 999px; font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bone); background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, color .3s; }
.mf__item:hover span, .mf__item:focus-visible span { background: var(--acid); color: var(--on-acid); }
.mf__more { display: inline-block; margin-top: 2.2rem; color: var(--smoke); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); padding-bottom: .3em; transition: color .3s, border-color .3s; }
.mf__more:hover { color: var(--acid); border-color: var(--acid); }
@media (max-width: 900px) {
  .mf__row--3 { grid-template-columns: 1fr 1fr; }
  .mf__row--3 .mf__item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mf__row--2, .mf__row--3 { grid-template-columns: 1fr; }
  .mf__item span { font-size: .58rem; left: 8px; bottom: 8px; }
}
/* ---------- Tarifas (listas de precios) ---------- */
.rates__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-bottom: 1rem; }
.rates .btn { margin-top: 1.4rem; }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; }
  .rates__grid { grid-template-columns: 1fr; }
}
