/* ══════════════════════════════════════════════════════════════════════════════
   FOOD SERVICE — Ilios · Porfirio's   (/ilios-food-service/ · /porfirios-…/)
   ══════════════════════════════════════════════════════════════════════════════
   Una sola hoja para las dos marcas: lo único que cambia es --fs-color, que la
   vista pone en línea desde _datos/food-service.php (turquesa en Ilios, rojo en
   Porfirio's). Así añadir una tercera marca no toca este archivo.

   Reglas del sistema de diseño aplicadas:
     · ⛔ nunca negro → el "negro" de Frog's es el azul #043768
     · Oswald en títulos (siempre mayúsculas) · Museo Sans Rounded en cuerpo
     · cards de la misma fila con la misma altura, media con aspect-ratio fijo
     · el bloque de NORMA MÓVIL va AL FINAL (gana por cascada)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.fs-hero{
  position:relative; overflow:hidden;
  min-height:clamp(340px,46vw,520px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; background:var(--azul);
}
.fs-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.42;
}
/* velo azul: el logo tiene que leerse sobre cualquier foto */
.fs-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,55,104,.55) 0%,rgba(4,55,104,.78) 100%);
}
.fs-hero__in{position:relative; z-index:2; padding-block:56px}
.fs-eyebrow{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.22em; font-size:13px; font-weight:500;
  color:var(--amarillo); margin:0 0 18px;
}
.fs-hero__logo{margin:0 0 18px}
/* el nombre de la marca vive en el h1 como TEXTO (lo exige el auditor SEO), pero
   quien lo ve es el logo: el texto queda disponible para Google y para un lector
   de pantalla sin ocupar sitio. ⛔ display:none no vale: lo borraría de ambos. */
.fs-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* ⚠️ Los dos logos originales son GRIS OSCURO sobre transparente (comprobado
   abriéndolos): tal cual, sobre el azul de marca no se leen. `brightness(0)`
   los aplana a negro e `invert(1)` los pasa a blanco puro — sirve para
   cualquier logo monocromo, venga claro u oscuro. */
.fs-hero__logo img{
  width:auto; max-width:min(420px,78%); height:auto; max-height:120px;
  object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(var(--sombra-navy-rgb),.45));
}
.fs-hero__donde{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(15px,2vw,19px); font-weight:500;
  color:#fff; margin:0;
}
.fs-hero__donde::before,
.fs-hero__donde::after{
  content:""; display:inline-block; width:26px; height:2px; vertical-align:middle;
  background:var(--fs-color,var(--amarillo)); margin-inline:14px;
}

/* ── BLOQUES DE TEXTO + FOTO ──────────────────────────────────────────────── */
.fs-bloque{padding-block:clamp(48px,7vw,86px); background:var(--crema)}
.fs-bloque--invertido{background:#fff}
.fs-bloque__in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:center;
}
.fs-bloque--invertido .fs-bloque__texto{order:2}
.fs-bloque--invertido .fs-bloque__foto{order:1}

.fs-h2{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px); line-height:1.05; font-weight:600;
  color:var(--azul); margin:0 0 18px; letter-spacing:.01em;
}
.fs-h2::after{
  content:""; display:block; width:64px; height:5px; border-radius:3px;
  background:var(--fs-color,var(--rojo)); margin-top:14px;
}
.fs-p{
  font-size:17px; line-height:1.62; color:var(--azul); margin:0;
  text-align:justify; text-wrap:pretty;
}
.fs-bloque__foto{margin:0; border-radius:20px; overflow:hidden;
  box-shadow:0 18px 44px rgba(var(--sombra-navy-rgb),.20);
  aspect-ratio:4/3;                       /* reserva su hueco: cero saltos al cargar */
}
.fs-bloque__foto img{width:100%; height:100%; object-fit:cover; display:block}

/* ── MENÚ ─────────────────────────────────────────────────────────────────── */
.fs-menu{
  padding-block:clamp(52px,7vw,90px);
  background:var(--azul);
  background-image:url("../img/welcome-pattern.png");
  background-size:340px auto;
  background-blend-mode:soft-light;
}
.fs-menu__t{
  font-family:"Oswald",sans-serif; text-transform:uppercase; text-align:center;
  font-size:clamp(30px,4.4vw,52px); font-weight:600; color:#fff;
  margin:0 0 clamp(28px,4vw,48px); letter-spacing:.03em;
  text-shadow:var(--sombra-txt);
}
.fs-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
.fs-plato{
  display:flex; flex-direction:column;          /* misma fila = misma altura */
  background:#fff; border-radius:16px; padding:20px 22px;
  border-top:5px solid var(--fs-color,var(--rojo));
  box-shadow:0 10px 26px rgba(var(--sombra-navy-rgb),.22);
}
.fs-plato__n{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  font-size:19px; line-height:1.18; font-weight:600;
  color:var(--azul); margin:0 0 8px;
}
.fs-plato__d{
  font-size:15px; line-height:1.55; color:#3b5570; margin:0;
  text-wrap:pretty;
}

/* ── CIERRE ───────────────────────────────────────────────────────────────── */
.fs-cta{padding-block:clamp(48px,6vw,78px); background:var(--crema); text-align:center}
.fs-cta h2{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  font-size:clamp(24px,3.2vw,38px); font-weight:600; color:var(--azul); margin:0 0 12px;
}
.fs-cta p{font-size:16px; line-height:1.55; color:var(--azul); margin:0 auto 24px; max-width:60ch}
.fs-cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* .btn-linea vive en base.css: lo usan varias páginas */

/* ══════════════════════════════════════════════════════════════════════════════
   📱 NORMA MÓVIL — aire 24px · copy 15px · interlineado 1.55
   Va al final a propósito: gana por cascada. ESCRITORIO NO SE TOCA.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .fs-hero{min-height:300px}
  .fs-hero__in{padding-block:40px}
  .fs-hero__logo img{max-width:74%; max-height:88px}
  .fs-eyebrow{font-size:11px; letter-spacing:.18em; margin-bottom:14px}
  .fs-hero__donde{font-size:14px}
  .fs-hero__donde::before,.fs-hero__donde::after{width:18px; margin-inline:10px}

  /* una columna, y la foto SIEMPRE debajo del texto en las dos variantes */
  .fs-bloque__in{grid-template-columns:1fr; gap:24px}
  .fs-bloque--invertido .fs-bloque__texto{order:1}
  .fs-bloque--invertido .fs-bloque__foto{order:2}
  .fs-bloque__foto{aspect-ratio:16/10}

  .fs-p{font-size:var(--m-fs); line-height:var(--m-lh); text-align:justify; text-align-last:center}
  .fs-h2::after{margin-inline:auto}          /* el subrayado sigue al título centrado */
  .fs-h2{text-align:center}

  .fs-lista{grid-template-columns:1fr; gap:14px}
  .fs-plato{padding:16px 18px}               /* 16px de padding interno: ley de cards */
  .fs-plato__d{font-size:var(--m-fs); line-height:var(--m-lh)}

  .fs-cta p{font-size:var(--m-fs); line-height:var(--m-lh)}
  .fs-cta__btns .btn{width:100%; max-width:320px}
}