/* =============================================================================
   Gastronomía · TurisOnRoad
   modules/gastronomia/css/gastronomia.css
   Paleta: crema · verde oliva profundo · dorado TOR
   ============================================================================= */

.gastro{
  --ga-crema:      #FBF8F1;
  --ga-crema-2:    #F3EDE0;
  --ga-verde:      #24382C;   /* titulares y fondos profundos */
  --ga-oliva:      #6E8E44;
  --ga-oro:        #E3B04B;
  --ga-oro-osc:    #C08F2E;
  --ga-tinta:      #4C4A41;   /* texto corrido */
  --ga-linea:      #E2DACA;

  --ga-max:  1400px;
  --ga-gut:  32px;

  background: var(--ga-crema);
  color: var(--ga-tinta);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}

.gastro *,
.gastro *::before,
.gastro *::after{ box-sizing: border-box; }

/* El pie del sitio trae 60px de margen superior. Las secciones de Gastronomía
   ya terminan con su propio aire, así que aquí sobra. */
.gastro ~ .tor-pie{ margin-top: 0; }

/* ── Contenedor ───────────────────────────────────────────────────────────── */
.gastro .ga-x{
  width: 100%;
  max-width: var(--ga-max);
  margin-inline: auto;
  padding-inline: var(--ga-gut);
}

/* ── Tipografía ───────────────────────────────────────────────────────────── */
.gastro .ga-h2{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  /* Titulares de sección de la portada. Las páginas internas los bajan algo
     más con .gastro--int, unas líneas más abajo. */
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ga-verde);
  margin: 0 0 14px;
}
.gastro .ga-h2--claro{ color: #FFF9EC; }

.gastro .ga-h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.2;
  color: var(--ga-verde);
  margin: 0 0 8px;
}

.gastro .ga-p{
  font-size: 16.5px;
  line-height: 1.68;
  max-width: 62ch;
  margin: 0 0 16px;
}
.gastro .ga-p--claro{ color: rgba(255,250,240,.86); }

.gastro .ga-sub{
  font-size: 16px;
  line-height: 1.6;
  max-width: 68ch;
  margin: 0;
  color: #6B6758;
}

.gastro .ga-kick{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ga-oro);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gastro .ga-kick::before{
  content: "";
  width: 34px; height: 2px;
  background: var(--ga-oro);
  flex: none;
}
.gastro .ga-kick--osc{ color: var(--ga-oro-osc); }
.gastro .ga-kick--osc::before{ background: var(--ga-oro-osc); }

.gastro .ga-mano{
  font-family: 'Caveat', cursive;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.3;
  color: var(--ga-oro-osc);
  margin: 18px 0 0;
}

.gastro .ga-vacio{
  padding: 40px;
  text-align: center;
  border: 1px dashed var(--ga-linea);
  border-radius: 14px;
  color: #8A8574;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.gastro .ga-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .22s, color .22s, border-color .22s;
}
.gastro .ga-btn--oro{
  background: var(--ga-oro);
  color: #3A2C08;
}
.gastro .ga-btn--oro:hover{ background: #EFC062; color: #3A2C08; }

.gastro .ga-btn--linea{
  border-color: rgba(255,255,255,.6);
  color: #FFF9EC;
}
.gastro .ga-btn--linea:hover{ background: rgba(255,255,255,.14); color: #fff; }

.gastro .ga-btn:focus-visible{
  outline: 3px solid var(--ga-oro);
  outline-offset: 3px;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */
.gastro .ga-sec{ padding: clamp(48px, 5vw, 78px) 0; }
/* Primer bloque tras el hero: menos aire arriba para que asome antes */
.gastro .ga-hero + .ga-sec{ padding-top: clamp(34px, 3.4vw, 52px); }
.gastro .ga-sec--crema{ background: var(--ga-crema-2); }
.gastro .ga-sh{ margin-bottom: clamp(24px, 2.6vw, 34px); }

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.gastro .ga-hero{
  position: relative;
  width: 100%;
  /* 33.33vw = proporción 3:1, acotada entre 470 y 620 px */
  height: clamp(470px, 33.33vw, 620px);
  display: flex;
  align-items: center;
  background: var(--ga-verde);
  overflow: hidden;
}
.gastro .ga-hero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.gastro .ga-hero__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,32,24,.88) 0%, rgba(20,32,24,.66) 34%, rgba(20,32,24,.12) 66%, rgba(20,32,24,.30) 100%),
    linear-gradient(to top, rgba(20,32,24,.45), transparent 42%);
}
.gastro .ga-hero__in{ position: relative; width: 100%; padding: 40px 0; }
.gastro .ga-hero__h1{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #FFF9EC;
  margin: 0 0 20px;
  max-width: 15ch;
}
.gastro .ga-hero__lead{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,250,240,.9);
  max-width: 44ch;
  margin: 0;
}

/* ══ EDITORIAL ════════════════════════════════════════════════════════════ */
/* Páginas interiores (categoría y territorio): titulares de sección algo
   más contenidos que en la portada, que es una landing y pide más escala. */
.gastro--int .ga-h2{ font-size: clamp(24px, 2.5vw, 33px); }
.gastro--int .ga-sub{ font-size: 15px; }
.gastro--int .ga-sh{ margin-bottom: clamp(20px, 2.2vw, 28px); }

/* Descripción de la categoría: texto a una columna, bajo los productos */
.gastro .ga-desc{
  background: var(--ga-crema-2);
  padding: clamp(40px, 4.4vw, 66px) 0;
}
/* Centrado: a 72ch se lee cómodo, pero alineado a la izquierda dejaba
   media página vacía a la derecha. */
.gastro .ga-desc__in{ max-width: 72ch; margin-inline: auto; }
.gastro .ga-desc__in .ga-p{ max-width: none; font-size: 17px; }
.gastro .ga-desc__in .ga-p:last-child{ margin-bottom: 0; }

/* Mosaico de fotos sobre la descripción. Hasta cinco visibles; el resto, en
   el visor. Mismo planteamiento que la ficha de alojamientos.              */
.gastro .ga-gal{
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}
.gastro .ga-gal--1{ grid-template-columns: 1fr; }
.gastro .ga-gal--2{ grid-template-columns: 1fr 1fr; }
.gastro .ga-gal--3,
.gastro .ga-gal--4,
.gastro .ga-gal--5{
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 16 / 9;
}
/* La primera manda: ocupa la mitad izquierda a doble altura */
.gastro .ga-gal--3 .ga-gal__i:first-child,
.gastro .ga-gal--4 .ga-gal__i:first-child,
.gastro .ga-gal--5 .ga-gal__i:first-child{ grid-column: span 2; grid-row: span 2; }
/* Con tres, las dos pequeñas se reparten la columna derecha */
.gastro .ga-gal--3 .ga-gal__i:nth-child(n+2){ grid-column: span 2; }
/* Con cuatro, la cuarta se estira para que no quede hueco */
.gastro .ga-gal--4 .ga-gal__i:nth-child(4){ grid-column: span 2; }

.gastro .ga-gal__i{
  position: relative;
  display: block;
  padding: 0;
  border: none;
  overflow: hidden;
  background: var(--ga-crema);
  cursor: zoom-in;
}
.gastro .ga-gal--1 .ga-gal__i{ aspect-ratio: 16 / 9; }
.gastro .ga-gal--2 .ga-gal__i{ aspect-ratio: 3 / 2; }
.gastro .ga-gal__i img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-gal__i:hover img{ transform: scale(1.05); }
.gastro .ga-gal__i:focus-visible{ outline: 3px solid var(--ga-oro); outline-offset: -3px; }
.gastro .ga-gal__mas{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(16,26,20,.6);
  color: #FFF9EC;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  padding: 0 10px;
  transition: background-color .25s;
}
.gastro .ga-gal__i:hover .ga-gal__mas{ background: rgba(16,26,20,.72); }

/* Visor */
.gastro .ga-lb{
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(12,20,15,.93);
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  padding: 24px;
}
.gastro .ga-lb[hidden]{ display: none; }
/* Una sola foto: sin columnas para las flechas, la imagen ocupa todo */
.gastro .ga-lb--sola{ grid-template-columns: 1fr; }
.gastro .ga-lb__fig{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.gastro .ga-lb__fig img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.gastro .ga-lb__fig figcaption{
  color: rgba(255,249,236,.82);
  font-size: 14px;
  text-align: center;
  max-width: 62ch;
}
.gastro .ga-lb__nav,
.gastro .ga-lb__x{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,249,236,.4);
  border-radius: 50%;
  background: transparent;
  color: #FFF9EC;
  font-size: 18px;
  cursor: pointer;
  transition: background-color .22s, color .22s, border-color .22s;
}
.gastro .ga-lb__nav:hover,
.gastro .ga-lb__x:hover{ background: var(--ga-oro); border-color: var(--ga-oro); color: #3A2C08; }
.gastro .ga-lb__nav{ justify-self: center; }
.gastro .ga-lb__nav[hidden]{ display: none; }
.gastro .ga-lb__x{
  position: absolute;
  top: 20px; right: 20px;
}

@media (max-width: 640px){
  .gastro .ga-gal{ gap: 6px; margin-bottom: 24px; }
  /* En móvil el mosaico se simplifica: la primera a lo ancho y el resto
     en dos columnas. El aviso "Ver N fotos" pasa a la última visible. */
  .gastro .ga-gal--3,
  .gastro .ga-gal--4,
  .gastro .ga-gal--5{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .gastro .ga-gal--3 .ga-gal__i,
  .gastro .ga-gal--4 .ga-gal__i,
  .gastro .ga-gal--5 .ga-gal__i{ aspect-ratio: 3 / 2; }
  .gastro .ga-gal--3 .ga-gal__i:first-child,
  .gastro .ga-gal--4 .ga-gal__i:first-child,
  .gastro .ga-gal--5 .ga-gal__i:first-child{
    grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9;
  }
  .gastro .ga-gal--5 .ga-gal__i:nth-child(n+5){ display: none; }
  .gastro .ga-gal__mas{ font-size: 13px; }
  .gastro .ga-lb{ grid-template-columns: 1fr; padding: 16px; }
  .gastro .ga-lb__nav{ display: none; }
}

.gastro .ga-editorial{
  padding: clamp(44px, 4.6vw, 72px) 0;
  background: var(--ga-crema-2);
}
.gastro .ga-editorial__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.gastro .ga-editorial__fotos{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  aspect-ratio: 3 / 2;
  max-height: 420px;
  justify-self: end;
  width: 100%;
}
/* Si aún no hay fotos, el hueco se cierra y el texto ocupa todo el ancho */
.gastro .ga-editorial__fotos:empty{ display: none; }
.gastro .ga-editorial__grid:has(.ga-editorial__fotos:empty){ grid-template-columns: 1fr; }
.gastro .ga-ef{ margin: 0; overflow: hidden; border-radius: 4px; }
.gastro .ga-ef img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gastro .ga-ef--a{ grid-column: 1 / 5; grid-row: 1 / 5; }
.gastro .ga-ef--b{
  grid-column: 3 / 6;
  grid-row: 3 / 6;
  border: 8px solid var(--ga-crema-2);
  border-radius: 4px;
}

/* ══ CATEGORÍAS · carril horizontal ═══════════════════════════════════════ */
.gastro .ga-rail-wrap{
  position: relative;
  padding-inline: 56px;   /* pasillo para las flechas, fuera de las fotos */
}

.gastro .ga-rail{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.gastro .ga-rail::-webkit-scrollbar{ display: none; }
.gastro .ga-rail.drag{ cursor: grabbing; }

.gastro .ga-cat{
  flex: 0 0 calc((100% - 18px * 4) / 4.5);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  -webkit-user-drag: none;
}
.gastro .ga-cat__ph{
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ga-verde);
}
.gastro .ga-cat__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-cat:hover .ga-cat__ph img{ transform: scale(1.05); }

.gastro .ga-cat__n{
  display: block;
  margin-top: 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #1a3a6e;
  transition: color .22s;
}
.gastro .ga-cat:hover .ga-cat__n{ color: var(--ga-oliva); }
.gastro .ga-cat__s{
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #8A8574;
}
.gastro .ga-cat:focus-visible{ outline: 3px solid var(--ga-oro); outline-offset: 4px; border-radius: 12px; }

/* Flechas a los lados, centradas sobre la zona de foto y fuera de ella */
.gastro .ga-rnav{
  position: absolute;
  top: 0; bottom: 44px;
  width: 44px;
  margin: auto 0;
  height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ga-linea);
  border-radius: 50%;
  background: var(--ga-crema);
  color: var(--ga-verde);
  font-size: 17px;
  cursor: pointer;
  z-index: 2;
  transition: background-color .22s, border-color .22s, color .22s, opacity .22s;
}
.gastro .ga-rnav.prev{ left: 0; }
.gastro .ga-rnav.next{ right: 0; }
.gastro .ga-rnav:hover:not(:disabled){
  background: var(--ga-oro);
  border-color: var(--ga-oro);
  color: #3A2C08;
}
.gastro .ga-rnav:disabled{ opacity: .28; cursor: default; }
.gastro .ga-rnav:focus-visible{ outline: 3px solid var(--ga-oro); outline-offset: 3px; }
.gastro .ga-rail-wrap.sin-scroll .ga-rnav{ display: none; }

/* ══ EXPERIENCIAS GASTRONÓMICAS ═══════════════════════════════════════════ */
.gastro .ga-sh--fila{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gastro .ga-vertodas{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ga-verde);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ga-linea);
  transition: color .22s, border-color .22s;
  white-space: nowrap;
}
.gastro .ga-vertodas:hover{ color: var(--ga-oliva); border-color: var(--ga-oliva); }

.gastro .ga-aviso{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ga-oro-osc);
}
.gastro .ga-aviso i{ margin-top: 2px; }

.gastro .ga-rail--exp{ gap: 16px; align-items: stretch; }
.gastro .ga-exp{
  flex: 0 0 calc((100% - 16px * 4) / 4.5);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}
.gastro .ga-exp__ph{
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ga-verde);
}
.gastro .ga-exp__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-exp:hover .ga-exp__ph img{ transform: scale(1.05); }

.gastro .ga-exp__pin{
  position: absolute;
  top: 11px; left: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 20px;
  background: #FFF9EC;
  color: #3A2C08;
}
.gastro .ga-exp__pin--free{ background: #E4F0DC; color: #2F5220; }
.gastro .ga-exp__pin--dto {
  background: #C42B24;
  color: #fff;
  border: 1px solid rgba(255,255,255,.85);
}

.gastro .ga-exp__b{ display: block; padding-top: 10px; }
.gastro .ga-exp__t{
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.24;
  color: #1a3a6e;
  /* dos líneas como máximo, para que todas las cards midan igual */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .22s;
}
.gastro .ga-exp:hover .ga-exp__t{ color: var(--ga-oliva); }
.gastro .ga-exp__m{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12.5px;
  color: #8A8574;
  flex-wrap: wrap;
}
.gastro .ga-exp__p{ color: var(--ga-oro-osc); font-weight: 600; }
.gastro .ga-exp__km{ color: #1a3a6e; font-weight: 600; }
.gastro .ga-exp__loc{ display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gastro .ga-exp__fl{
  width: 17px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
}

/* Última card del carril: acceso al listado completo */
.gastro .ga-exp--mas{
  flex-basis: calc(((100% - 16px * 4) / 4.5) * .7);
  display: flex;          /* para que el bloque interior ocupe toda la altura */
}
.gastro .ga-exp__ph--mas{
  aspect-ratio: auto;     /* la altura la marcan las cards de al lado */
  height: 100%;
  width: 100%;
  /* Mismo tratamiento que la card "Otros países" del carrusel de territorios */
  background: linear-gradient(155deg, #3D5A45 0%, #2B4232 48%, #1C2E23 100%);
  border: 1px solid rgba(227,176,75,.30);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.gastro .ga-exp__ph--mas::before{
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 38%, rgba(227,176,75,.26), transparent 62%);
  pointer-events: none;
  transition: opacity .4s;
}
.gastro .ga-exp--mas:hover .ga-exp__ph--mas::before{ opacity: .55; }
.gastro .ga-exp__masin{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #FFF9EC;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 14px;
}
.gastro .ga-exp__masin i{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(227,176,75,.55);
  border-radius: 50%;
  color: var(--ga-oro);
  font-size: 17px;
  transition: background-color .25s, color .25s, transform .35s;
}
.gastro .ga-exp--mas:hover .ga-exp__masin i{
  background: var(--ga-oro);
  color: #3A2C08;
  transform: translateX(4px);
}

/* ══ EMPRESAS EN PORTADA ══════════════════════════════════════════════════ */
.gastro .ga-emps{ display: grid; gap: 20px; }
.gastro .ga-emps--4{ grid-template-columns: repeat(4, 1fr); }
.gastro .ga-emps--3{ grid-template-columns: repeat(3, 1fr); }
.gastro .ga-emps--2{ grid-template-columns: repeat(2, 1fr); }
.gastro .ga-emps--1{ grid-template-columns: 1fr; }

.gastro .ga-emp{
  display: block;
  background: #fff;
  border: 1px solid var(--ga-linea);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .22s, transform .22s;
}
.gastro .ga-emp:hover{ border-color: var(--ga-oro); transform: translateY(-3px); }
.gastro .ga-emp__ph{
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--ga-crema-2);
  overflow: hidden;
}
.gastro .ga-emp__ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gastro .ga-emp__b{ display: block; padding: 18px 20px 20px; }
.gastro .ga-emp__n{
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ga-verde);
}
.gastro .ga-emp__e{ display: block; margin-top: 4px; font-size: 14.5px; color: #6B6758; }
.gastro .ga-emp__t{ display: block; margin-top: 10px; font-size: 13px; color: var(--ga-oliva); }

/* Empresa única: tarjeta editorial a lo ancho */
.gastro .ga-emps--1 .ga-emp{ display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.gastro .ga-emps--1 .ga-emp__ph{ aspect-ratio: 16 / 9; height: 100%; }
.gastro .ga-emps--1 .ga-emp__b{ align-self: center; padding: 34px 40px; }
.gastro .ga-emps--1 .ga-emp__n{ font-size: 30px; }

/* ══ TERRITORIOS ══════════════════════════════════════════════════════════ */
.gastro .ga-terr{
  background: var(--ga-verde);
  padding: clamp(48px, 5vw, 80px) 0;
}
.gastro .ga-terr__grid{
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.gastro .ga-rail-wrap--terr .ga-rnav{
  bottom: 0;
  background: transparent;
  border-color: rgba(255,249,236,.45);
  color: #FFF9EC;
}
.gastro .ga-rail-wrap--terr .ga-rnav:hover:not(:disabled){
  background: var(--ga-oro);
  border-color: var(--ga-oro);
  color: #3A2C08;
}
.gastro .ga-rail--terr{ gap: 14px; }
.gastro .ga-rail--terr .ga-pais{ flex: 0 0 calc((100% - 14px * 2) / 2.6); }

/* A todo el ancho (página de territorio): cards bastante más pequeñas */
.gastro .ga-rail--terr.ga-rail--ancho .ga-pais{ flex-basis: calc((100% - 14px * 5) / 5.6); }
.gastro .ga-rail--terr.ga-rail--ancho .ga-pais__n{ font-size: 14px; bottom: 12px; left: 12px; right: 12px; }

.gastro .ga-pais{
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #1B2A21;
  text-decoration: none;
}
.gastro .ga-pais__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-pais:hover .ga-pais__img{ transform: scale(1.05); }
.gastro .ga-pais__veil{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,20,15,.84), rgba(12,20,15,.05) 62%);
}
.gastro .ga-pais__n{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  color: #FFF9EC;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gastro .ga-pais__f{ font-size: 18px; line-height: 1; }
.gastro .ga-pais--otros{
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #3D5A45 0%, #2B4232 48%, #1C2E23 100%);
  border: 1px solid rgba(227,176,75,.30);
  position: relative;
  overflow: hidden;
}
/* Halo dorado suave, para que destaque sin competir con las fotos */
.gastro .ga-pais--otros::before{
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 38%, rgba(227,176,75,.26), transparent 62%);
  pointer-events: none;
  transition: opacity .4s;
}
.gastro .ga-pais--otros:hover::before{ opacity: .55; }
.gastro .ga-pais--otros .ga-pais__n{
  position: relative;
  z-index: 1;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.gastro .ga-pais__globo{
  width: 38px;
  height: 38px;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-pais--otros:hover .ga-pais__globo{ transform: rotate(14deg) scale(1.08); }
.gastro .ga-pais:focus-visible{ outline: 3px solid var(--ga-oro); outline-offset: 3px; }

/* ══ RECLAMOS ═════════════════════════════════════════════════════════════ */
.gastro .ga-claims{ padding: 34px 0; background: var(--ga-crema); border-top: 1px solid var(--ga-linea); }
.gastro .ga-claims__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gastro .ga-claim{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: #5C584B;
}
.gastro .ga-claim i{ font-size: 24px; color: var(--ga-oliva); }
.gastro .ga-claims__grid > .ga-claim + .ga-claim{
  border-left: 1px solid var(--ga-linea);
  padding-left: 24px;
}

/* ══ CAPTACIÓN ════════════════════════════════════════════════════════════ */
.gastro .ga-capta{ padding: clamp(40px, 5vw, 68px) 0; background: var(--ga-crema-2); }
.gastro .ga-capta__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.gastro .ga-capta .ga-p{ margin-bottom: 0; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
  .gastro{ --ga-gut: 24px; }
  .gastro .ga-cat{ flex-basis: calc((100% - 18px * 2) / 2.5); }
  .gastro .ga-exp{ flex-basis: calc((100% - 16px * 2) / 3.2); }
  .gastro .ga-exp--mas{ flex-basis: calc(((100% - 16px * 2) / 3.2) * .72); }
  .gastro .ga-emps--4{ grid-template-columns: repeat(2, 1fr); }
  .gastro .ga-terr__grid{ grid-template-columns: 1fr; }
  .gastro .ga-rail--terr .ga-pais{ flex-basis: calc((100% - 14px * 2) / 3.2); }
  .gastro .ga-rail--terr.ga-rail--ancho .ga-pais{ flex-basis: calc((100% - 14px * 3) / 3.6); }
}

@media (max-width: 780px){
  .gastro .ga-editorial__grid{ grid-template-columns: 1fr; }
  .gastro .ga-editorial__fotos{ order: -1; }
  .gastro .ga-emps--3,
  .gastro .ga-emps--2{ grid-template-columns: 1fr; }
  .gastro .ga-emps--1 .ga-emp{ grid-template-columns: 1fr; }
  .gastro .ga-emps--1 .ga-emp__b{ padding: 22px 24px 26px; }
  .gastro .ga-emps--1 .ga-emp__n{ font-size: 24px; }
  .gastro .ga-claims__grid{ grid-template-columns: 1fr; }
  .gastro .ga-claims__grid > .ga-claim + .ga-claim{ border-left: 0; padding-left: 0; }
}

@media (max-width: 640px){
  .gastro{ --ga-gut: 20px; }
  .gastro .ga-hero{ height: auto; min-height: 540px; }
  .gastro .ga-hero__img{ object-position: 72% center; }
  .gastro .ga-hero__veil{
    background: linear-gradient(to top, rgba(20,32,24,.93) 4%, rgba(20,32,24,.62) 48%, rgba(20,32,24,.24) 100%);
  }
  /* Sin flechas ni pasillo: el carril vive dentro del contenedor,
     así los márgenes laterales quedan garantizados a ambos lados. */
  .gastro .ga-rail-wrap{ padding-inline: 0; }
  .gastro .ga-rail{
    gap: 12px;
    margin-inline: 0;
    padding-inline: 0;
    /* deja aire al final para que la última card no toque el borde */
    scroll-padding-inline: 0;
  }
  .gastro .ga-rail::after{
    content: "";
    flex: 0 0 4px;
  }
  .gastro .ga-cat{ flex-basis: calc((100% - 12px) / 1.6); }
  .gastro .ga-rail--exp{ gap: 12px; }
  .gastro .ga-exp{ flex-basis: calc((100% - 12px) / 1.45); }
  .gastro .ga-exp--mas{ flex-basis: calc(((100% - 12px) / 1.45) * .7); }
  .gastro .ga-exp__t{ font-size: 15px; }
  .gastro .ga-cat__n{ font-size: 15px; margin-top: 9px; }
  .gastro .ga-cat__s{ display: none; }
  .gastro .ga-rnav{ display: none; }
  .gastro .ga-rail--terr .ga-pais{ flex-basis: calc((100% - 12px) / 1.9); }
  .gastro .ga-rail--terr.ga-rail--ancho .ga-pais{ flex-basis: calc((100% - 12px * 2) / 2.4); }
  .gastro .ga-capta__in{ flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .gastro *{ transition: none !important; animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PÁGINA DE CATEGORÍA
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Barra de filtro de país ────────────────────────────────────────────── */
.gastro .ga-filtro{
  background: var(--ga-verde);
  color: #FFF9EC;
  padding: 11px 0;
}
.gastro .ga-filtro__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gastro .ga-filtro__t{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
}
.gastro .ga-filtro__t strong{ font-weight: 600; }
.gastro .ga-filtro__x{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ga-oro);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid rgba(227,176,75,.45);
  border-radius: 999px;
  transition: background-color .22s, color .22s;
}
.gastro .ga-filtro__x:hover{ background: var(--ga-oro); color: #3A2C08; }

/* ── Hero de categoría ──────────────────────────────────────────────────── */
.gastro .ga-chero{
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: var(--ga-verde);
  overflow: hidden;
}
.gastro .ga-chero--liso{ min-height: 240px; }
.gastro .ga-chero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.gastro .ga-chero__veil{
  position: absolute; inset: 0;
  /* Velo suave: solo lo justo para que el texto se lea. La foto se ve. */
  background: linear-gradient(to top, rgba(18,30,22,.78) 2%, rgba(18,30,22,.34) 48%, rgba(18,30,22,.06) 100%);
}
.gastro .ga-chero--liso .ga-chero__veil{ background: none; }
.gastro .ga-chero__in{ position: relative; width: 100%; padding: 40px 0 34px; }

.gastro .ga-miga{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,249,236,.72);
  margin-bottom: 16px;
}
.gastro .ga-miga a{ color: rgba(255,249,236,.82); text-decoration: none; }
.gastro .ga-miga a:hover{ color: #fff; text-decoration: underline; }
.gastro .ga-miga i{ font-size: 10px; opacity: .55; }
.gastro .ga-miga span{ color: #FFF9EC; }

/* Breadcrumb sobre fondo claro */
.gastro .ga-migabar{
  padding: 14px 0 0;
}
.gastro .ga-miga--claro{
  margin-bottom: 0;
  color: #8A8574;
}
.gastro .ga-miga--claro a{ color: #1a3a6e; }
.gastro .ga-miga--claro a:hover{ color: #2959b1; text-decoration: underline; }
.gastro .ga-miga--claro span{ color: #1a3a6e; font-weight: 600; }
.gastro .ga-desc__in .ga-miga--claro{ margin-bottom: 22px; }

.gastro .ga-chero__h1{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: #FFF9EC;
  margin: 0 0 10px;
  /* Con el velo suavizado, la sombra es la que garantiza el contraste */
  text-shadow: 0 2px 16px rgba(10,18,13,.5);
}
.gastro .ga-chero--liso .ga-chero__h1{ text-shadow: none; }
.gastro .ga-chero__sub{
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--ga-oro);
  margin: 0 0 12px;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(10,18,13,.55);
}
.gastro .ga-chero__lead{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,249,236,.92);
  max-width: 62ch;
  margin: 0;
  text-shadow: 0 1px 10px rgba(10,18,13,.55);
}
.gastro .ga-chero--liso .ga-chero__sub,
.gastro .ga-chero--liso .ga-chero__lead{ text-shadow: none; }

/* ── Chips de país ──────────────────────────────────────────────────────── */
.gastro .ga-paisbar{
  background: var(--ga-crema-2);
  border-bottom: 1px solid var(--ga-linea);
  padding: 14px 0;
}
.gastro .ga-paisbar__in{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.gastro .ga-paisbar__et{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8574;
  flex: none;
}
.gastro .ga-paisbar__chips{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.gastro .ga-paisbar__chips::-webkit-scrollbar{ display: none; }
.gastro .ga-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1.5px solid var(--ga-linea);
  border-radius: 999px;
  background: #fff;
  color: var(--ga-verde);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
.gastro .ga-chip:hover{ border-color: var(--ga-oliva); }
/* País único: informa de dónde es, pero no hay nada que filtrar */
.gastro .ga-chip.is-solo{
  cursor: default;
  background: var(--ga-crema);
  border-style: dashed;
  color: #6B6758;
}
.gastro .ga-chip.is-solo:hover{ border-color: var(--ga-linea); }

.gastro .ga-chip.is-on{
  background: var(--ga-verde);
  border-color: var(--ga-verde);
  color: #FFF9EC;
  font-weight: 600;
}

/* ── Subcategorías ──────────────────────────────────────────────────────── */
.gastro .ga-subs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gastro .ga-sub{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s;
}
/* Grupo secundario: mismo color, pero en carril y a menor tamaño.
   La jerarquía la marca el sitio que ocupan, no un filtro sobre la foto. */
.gastro .ga-rail--subs{ gap: 14px; }
.gastro .ga-rail--subs .ga-sub{ flex: 0 0 calc((100% - 14px * 4) / 4.6); }
.gastro .ga-rail--subs .ga-sub__n{ font-size: 15px; }
.gastro .ga-rail--subs .ga-sub__s{ display: none; }
.gastro .ga-rail--subs .ga-sub__fl{ margin-top: 6px; }
.gastro .ga-sub__ph{
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ga-crema-2);
}
.gastro .ga-sub__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-sub:hover .ga-sub__ph img{ transform: scale(1.05); }
.gastro .ga-sub__b{ display: block; padding-top: 11px; }
.gastro .ga-sub__n{
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.22;
  color: #1a3a6e;
  transition: color .22s;
}
.gastro .ga-sub:hover .ga-sub__n{ color: var(--ga-oliva); }
.gastro .ga-sub__s{
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #8A8574;
}
/* Banderas sobre la foto, arriba a la izquierda */
.gastro .ga-sub__fl{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,249,236,.92);
  box-shadow: 0 1px 4px rgba(16,26,20,.18);
  z-index: 1;
}
.gastro .ga-sub__fl img{ display: block; }
.gastro .ga-sub__mas{
  font-size: 11.5px;
  font-weight: 700;
  color: #6B6758;
  line-height: 1;
  padding-left: 1px;
}

/* Separador entre los dos grupos */
.gastro .ga-sep{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 42px 0 24px;
  color: #A7A08C;
  font-size: 13px;
  letter-spacing: .04em;
}
.gastro .ga-sep::before,
.gastro .ga-sep::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ga-linea);
}

/* ── Rejilla de empresas ────────────────────────────────────────────────── */
.gastro .ga-emps--grid{ grid-template-columns: repeat(4, 1fr); }
.gastro .ga-emp__ph{ position: relative; }
.gastro .ga-emp__dest{
  position: absolute;
  top: 11px; left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 11px;
  border-radius: 999px;
  background: #FFF9EC;
  color: #7A5A12;
}
.gastro .ga-emp__dest i{ color: var(--ga-oro-osc); font-size: 10px; }
.gastro .ga-emp.is-dest{ border-color: rgba(227,176,75,.55); }

/* ── Sin empresas todavía ───────────────────────────────────────────────── */
.gastro .ga-nada{
  text-align: center;
  padding: 54px 24px;
  background: var(--ga-crema-2);
  border-radius: 14px;
}
.gastro .ga-nada > i{
  font-size: 32px;
  color: var(--ga-oro);
  display: block;
  margin-bottom: 16px;
}
.gastro .ga-nada .ga-p{
  margin-inline: auto;
  margin-bottom: 22px;
  max-width: 54ch;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .gastro .ga-subs{ grid-template-columns: repeat(3, 1fr); }
  .gastro .ga-rail--subs .ga-sub{ flex-basis: calc((100% - 14px * 2) / 3.3); }
  .gastro .ga-emps--grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px){
  .gastro .ga-subs{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .gastro .ga-chero{ min-height: 340px; }
  .gastro .ga-rail--subs{ gap: 12px; }
  .gastro .ga-rail--subs .ga-sub{ flex-basis: calc((100% - 12px) / 2.2); }
  .gastro .ga-subs{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gastro .ga-sub__n{ font-size: 15px; }
  .gastro .ga-sub__s{ display: none; }
  .gastro .ga-emps--grid{ grid-template-columns: 1fr; }
  .gastro .ga-paisbar__et{ display: none; }
  .gastro .ga-paisbar__chips{
    margin-inline: calc(var(--ga-gut) * -1);
    padding-inline: var(--ga-gut);
  }
  .gastro .ga-filtro__in{ flex-wrap: nowrap; }
  .gastro .ga-filtro__t{ font-size: 13.5px; }
}

/* ── Listado de territorios ─────────────────────────────────────────────── */
.gastro .ga-paises{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gastro .ga-paiscard{
  display: block;
  background: #fff;
  border: 1px solid var(--ga-linea);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .22s, transform .22s;
}
.gastro .ga-paiscard:hover{ border-color: var(--ga-oro); transform: translateY(-3px); }
.gastro .ga-paiscard__ph{
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;        /* vertical, igual que .ga-pais del carrusel:
                                 una sola proporción para imagen_card */
  background: var(--ga-verde);
  overflow: hidden;
}
.gastro .ga-paiscard__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-paiscard:hover .ga-paiscard__ph img{ transform: scale(1.05); }
.gastro .ga-paiscard__veil{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,24,18,.85), rgba(14,24,18,.05) 60%);
}
.gastro .ga-paiscard__n{
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 21px;
  color: #FFF9EC;
}
.gastro .ga-paiscard__b{ display: block; padding: 15px 18px 17px; }
.gastro .ga-paiscard__t{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B6758;
  margin-bottom: 10px;
}
.gastro .ga-paiscard__c{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ga-oliva);
}
.gastro .ga-paiscard__c i{ transition: transform .25s; }
.gastro .ga-paiscard:hover .ga-paiscard__c i{ transform: translateX(4px); }

@media (max-width: 1100px){ .gastro .ga-paises{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){  .gastro .ga-paises{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .gastro .ga-paises{ grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   PLATOS TÍPICOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card de plato ────────────────────────────────────────────────────────── */
.gastro .ga-platos{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gastro .ga-plato{
  display: block;
  text-decoration: none;
  color: inherit;
}
/* En carril: cuatro y pico a la vista, el corte invita a arrastrar */
.gastro .ga-rail--platos{ gap: 16px; align-items: stretch; }
.gastro .ga-rail--platos .ga-plato{ flex: 0 0 calc((100% - 16px * 4) / 4.4); }

.gastro .ga-plato__ph{
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;          /* apaisada, como las cards de territorio */
  border-radius: 12px;
  overflow: hidden;
  background: var(--ga-verde);
}
.gastro .ga-plato__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-plato:hover .ga-plato__ph img{ transform: scale(1.055); }
/* Plato sin receta: se ve igual, pero no se pincha ni reacciona al ratón */
.gastro .ga-plato--sinlink{ cursor: default; }
.gastro .ga-plato--sinlink:hover .ga-plato__ph img{ transform: none; }
.gastro .ga-plato__sinfoto{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,249,236,.3);
  font-size: 2.2rem;
}
.gastro .ga-plato__veil{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,24,18,.86) 2%, rgba(14,24,18,.3) 42%, rgba(14,24,18,0) 70%);
}
.gastro .ga-plato__n{
  position: absolute;
  left: 15px; right: 15px; bottom: 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.18;
  color: #FFF9EC;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.gastro .ga-plato__b{ display: block; padding-top: 10px; }
.gastro .ga-plato__loc{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ga-oliva);
}
.gastro .ga-plato__fl{ height: 12px; width: auto; border-radius: 2px; display: block; }
.gastro .ga-plato__s{
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #8A8574;
}

/* ── Última card del carrusel: la puerta al recetario ─────────────────────
   No es un hueco de relleno, es una invitación: fondo verde profundo con un
   halo cálido, el icono en oro y el recuento real de recetas y territorios. */
.gastro .ga-plato--mas .ga-plato__ph--mas{
  background:
    radial-gradient(120% 90% at 50% 112%, rgba(227,176,75,.34) 0%, rgba(227,176,75,0) 62%),
    linear-gradient(168deg, #2E4536 0%, var(--ga-verde) 58%, #1B2A21 100%);
  display: flex; align-items: center; justify-content: center;
}
.gastro .ga-plato--mas .ga-plato__ph--mas::after{
  /* Filo cálido interior, para que no parezca un rectángulo plano */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(227,176,75,.26);
  pointer-events: none;
}
.gastro .ga-plato__masin{
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 0 20px;
  text-align: center;
}
.gastro .ga-plato__masico{
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ga-oro);
  color: #241a05;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 6px 20px rgba(227,176,75,.3);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gastro .ga-plato__mast{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: #FFF9EC;
}
.gastro .ga-plato__masn{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255,249,236,.62);
}
.gastro .ga-plato__masb{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px;
  padding: 8px 17px;
  border-radius: 999px;
  border: 1.5px solid rgba(227,176,75,.5);
  font-size: 13px;
  font-weight: 600;
  color: var(--ga-oro);
  transition: background .22s, border-color .22s, color .22s;
}
.gastro .ga-plato__masb i{ transition: transform .25s; }
.gastro .ga-plato--mas:hover .ga-plato__masico{ transform: translateY(-3px) scale(1.06); }
.gastro .ga-plato--mas:hover .ga-plato__masb{
  background: var(--ga-oro);
  border-color: var(--ga-oro);
  color: #241a05;
}
.gastro .ga-plato--mas:hover .ga-plato__masb i{ transform: translateX(3px); }

/* ── Grupos del listado por territorio ───────────────────────────────────── */
.gastro .ga-pgrupo{ margin-bottom: clamp(34px, 4vw, 52px); }
.gastro .ga-pgrupo:last-child{ margin-bottom: 0; }
.gastro .ga-pgrupo .ga-h2{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gastro .ga-pgrupo__pais{
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #A8A294;
}

/* ── Barra de buscador y filtros ──────────────────────────────────────────── */
.gastro .ga-pbar{
  background: var(--ga-crema-2);
  border-bottom: 1px solid var(--ga-linea);
  padding: 16px 0;
}
.gastro .ga-pbuscar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin-bottom: 14px;
}
.gastro .ga-pbuscar > i{
  position: absolute;
  left: 15px;
  color: #A8A294;
  font-size: .95rem;
  pointer-events: none;
}
.gastro .ga-pbuscar input{
  flex: 1;
  min-width: 0;
  padding: 11px 38px 11px 40px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ga-verde);
  background: #fff;
  border: 1.5px solid #E2DCCB;
  border-radius: 999px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.gastro .ga-pbuscar input:focus{
  border-color: var(--ga-oliva);
  box-shadow: 0 0 0 3px rgba(110,142,68,.14);
}
.gastro .ga-pbuscar input::-webkit-search-cancel-button{ display: none; }
.gastro .ga-pbuscar__x{
  position: absolute;
  right: 108px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #A8A294;
  font-size: .72rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.gastro .ga-pbuscar__x:hover{ background: #EDE7D8; color: var(--ga-verde); }
.gastro .ga-pbuscar__b{
  flex: none;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #241a05;
  background: var(--ga-oro);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .18s;
}
.gastro .ga-pbuscar__b:hover{ filter: brightness(1.07); }

.gastro .ga-pfila{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.gastro .ga-pfila__et{
  flex: none;
  min-width: 62px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A8A294;
}
.gastro .ga-pfila__chips{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.gastro .ga-pfila__chips::-webkit-scrollbar{ display: none; }

/* ── Aire entre el bloque de fotos y la receta ─────────────────────────────
   Las dos bandas son crema y sumaban sus márgenes: quedaba un hueco enorme
   sin un cambio de color que lo justificara. Las clases las pone el PHP,
   porque entre las dos secciones va el markup del lightbox y un selector
   de hermano adyacente no las vería.                                      */
.gastro .ga-desc--pega{ padding-bottom: clamp(10px, 1vw, 16px); }
.gastro .ga-sec--pegada{ padding-top: clamp(16px, 1.6vw, 24px); }
/* Mosaico sin texto debajo: no reserva hueco para un párrafo que no existe */
.gastro .ga-desc__in .ga-gal:last-child{ margin-bottom: 0; }

/* ── Receta ───────────────────────────────────────────────────────────────── */
.gastro .ga-receta{
  max-width: 760px;
  margin: 0 auto;
}
.gastro .ga-receta__h{ margin-bottom: 20px; }
.gastro .ga-receta__h .ga-mano{ margin-top: 4px; }
.gastro .ga-receta__txt{
  font-size: 16.5px;
  line-height: 1.78;
  color: #4A4636;
  white-space: normal;
}
.gastro .ga-receta__txt br + br{ content: ''; display: block; height: 10px; }

/* Pastilla "Protagonista" sobre la foto del producto */
.gastro .ga-sub__pin{
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ga-oro);
  color: #241a05;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 5px rgba(16,26,20,.2);
  z-index: 1;
}

@media (max-width: 1100px){
  .gastro .ga-platos{ grid-template-columns: repeat(3, 1fr); }
  .gastro .ga-rail--platos .ga-plato{ flex-basis: calc((100% - 16px * 3) / 3.4); }
}
@media (max-width: 780px){
  .gastro .ga-platos{ grid-template-columns: repeat(2, 1fr); }
  .gastro .ga-rail--platos{ gap: 12px; }
  .gastro .ga-rail--platos .ga-plato{ flex-basis: calc((100% - 12px * 2) / 2.3); }
  .gastro .ga-plato__n{ font-size: 17px; left: 12px; right: 12px; bottom: 11px; }
  .gastro .ga-plato__masin{ gap: 9px; padding: 0 14px; }
  .gastro .ga-plato__masico{ width: 46px; height: 46px; font-size: 1.15rem; }
  .gastro .ga-plato__mast{ font-size: 17px; }
  .gastro .ga-plato__masb{ padding: 7px 14px; font-size: 12.5px; }
  .gastro .ga-pbuscar{ max-width: none; }
  .gastro .ga-pfila{ align-items: flex-start; flex-direction: column; gap: 5px; }
  .gastro .ga-receta__txt{ font-size: 15.5px; }
}
@media (max-width: 460px){
  .gastro .ga-pbuscar__b{ padding: 11px 16px; font-size: 14px; }
  .gastro .ga-pbuscar__x{ right: 92px; }
}

/* ── Acceso al recetario desde la portada ──────────────────────────────────
   Bajo el carrusel y centrado: el usuario no tiene que arrastrar hasta la
   última card para encontrar la puerta a la sección.                      */
.gastro .ga-platos-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-top: clamp(26px, 2.8vw, 38px);
  text-align: center;
}
.gastro .ga-btn--grande{
  padding: 16px 32px;
  font-size: 16px;
  box-shadow: 0 8px 26px rgba(227,176,75,.26);
}
.gastro .ga-btn--grande i:last-child{ transition: transform .25s; }
.gastro .ga-btn--grande:hover i:last-child{ transform: translateX(4px); }
.gastro .ga-platos-cta__p{
  margin: 0;
  font-size: 13.5px;
  color: #8A8574;
}
@media (max-width: 560px){
  .gastro .ga-btn--grande{ padding: 15px 22px; font-size: 15px; }
}

/* ── Cards de territorio horizontales ──────────────────────────────────────
   Variante para la portada de Platos típicos. La card vertical de
   territorios.php se mantiene como está; aquí la foto es apaisada porque
   acompaña a un texto corto y no es el escaparate principal del sitio.   */
.gastro .ga-paises--h .ga-paiscard__ph{ aspect-ratio: 3 / 2; }
/* La foto va limpia: el nombre y la bandera están debajo, no encima */
.gastro .ga-paises--h .ga-paiscard__b{ padding: 13px 16px 15px; }
.gastro .ga-paiscard__nb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #1a3a6e;
  transition: color .22s;
}
.gastro .ga-paiscard:hover .ga-paiscard__nb{ color: var(--ga-oliva); }
.gastro .ga-paiscard__nb img{ flex: none; }

/* ── Pastillas de territorio en el hero ────────────────────────────────────
   Sustituyen a las filas de chips cuando ya estás dentro de un territorio:
   país, región y una X para volver a la vista general.                   */
.gastro .ga-hchips{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gastro .ga-hchips__sep{ color: rgba(255,249,236,.4); font-size: .72rem; }
.gastro .ga-hchip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,249,236,.3);
  background: rgba(255,249,236,.1);
  backdrop-filter: blur(3px);
  font-size: 13.5px;
  font-weight: 600;
  color: #FFF9EC;
}
.gastro .ga-hchip--on{
  background: var(--ga-oro);
  border-color: var(--ga-oro);
  color: #241a05;
}

/* Cabecera de Platos típicos: algo más alta que las demás internas, porque
   lleva las pastillas de territorio sobre el titular. */
.gastro .ga-chero--platos{ min-height: 480px; }
.gastro .ga-chero--platos.ga-chero--liso{ min-height: 310px; }
@media (max-width: 780px){
  .gastro .ga-chero--platos{ min-height: 400px; }
  .gastro .ga-chero--platos.ga-chero--liso{ min-height: 270px; }
}

/* ── Descripción del territorio a todo el ancho ────────────────────────────
   Una sola columna, pero aprovechando toda la rejilla y con los márgenes
   laterales reducidos: el texto puede ser largo y una columna estrecha
   empujaba las recetas muy abajo.                                       */
.gastro .ga-desc--ancho .ga-x{ padding-inline: 18px; }
.gastro .ga-desc--ancho .ga-desc__in{ max-width: none; }
.gastro .ga-desc--ancho .ga-desc__in .ga-p{ font-size: 16.5px; }
.gastro .ga-desc--ancho .ga-desc__in .ga-p:last-child{ margin-bottom: 0; }
@media (max-width: 560px){
  .gastro .ga-desc--ancho .ga-x{ padding-inline: var(--ga-gut); }
}

/* Nota al pie de un titular: la salvedad en pequeño, en el naranja de TOR */
.gastro .ga-nota{
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f26b2e;
}

/* ── Pastilla de la búsqueda activa ────────────────────────────────────────
   Junto al recuento de resultados, con su X para quitarla: la del campo de
   búsqueda es pequeña y pasa desapercibida.                              */
.gastro .ga-sub--busq{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gastro .ga-qchip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 13px;
  border-radius: 999px;
  background: var(--ga-verde);
  color: #FFF9EC;
  font-size: 13.5px;
  font-weight: 600;
}
.gastro .ga-qchip > i{ font-size: .78rem; opacity: .7; }
.gastro .ga-qchip__x{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,249,236,.18);
  color: #FFF9EC;
  font-size: .62rem;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.gastro .ga-qchip__x:hover{ background: var(--ga-oro); color: #241a05; }

/* ── Carrusel de territorios con recetas (portada) ─────────────────────────
   Misma card que el escaparate de platos.php, en carril: foto apaisada y el
   nombre con su bandera debajo. La última card, la puerta al recetario,
   comparte el alto de la foto para que el carril no cojee.               */
.gastro .ga-rail--regiones{ gap: 16px; align-items: stretch; }
.gastro .ga-rail--regiones .ga-paiscard{ flex: 0 0 calc((100% - 16px * 3) / 3.4); }
.gastro .ga-rail--regiones .ga-paiscard__ph{ aspect-ratio: 3 / 2; }
.gastro .ga-rail--regiones .ga-paiscard__nb{ font-size: 18px; }
.gastro .ga-rail--regiones .ga-plato{ flex: 0 0 calc((100% - 16px * 3) / 3.4); }
.gastro .ga-rail--regiones .ga-plato__ph{ aspect-ratio: 3 / 2; }

@media (max-width: 1100px){
  .gastro .ga-rail--regiones .ga-paiscard,
  .gastro .ga-rail--regiones .ga-plato{ flex-basis: calc((100% - 16px * 2) / 2.4); }
}
@media (max-width: 780px){
  .gastro .ga-rail--regiones{ gap: 12px; }
  .gastro .ga-rail--regiones .ga-paiscard,
  .gastro .ga-rail--regiones .ga-plato{ flex-basis: calc((100% - 12px) / 1.5); }
}

/* ── Cabecera de Platos típicos sin foto ───────────────────────────────────
   En vez de un verde plano, un motivo de círculos: anillos y discos que
   evocan platos vistos desde arriba. Todo con CSS, sin imágenes.        */
.gastro .ga-chero--platos.ga-chero--liso{
  background-color: var(--ga-verde);
  background-image:
    /* anillo grande, a la derecha */
    radial-gradient(circle at 84% 22%, transparent 0 128px,
                    rgba(227,176,75,.24) 128px 130px, transparent 131px),
    /* anillo mediano, abajo */
    radial-gradient(circle at 67% 104%, transparent 0 84px,
                    rgba(255,249,236,.15) 84px 86px, transparent 87px),
    /* anillo pequeño, arriba a la izquierda del todo */
    radial-gradient(circle at 23% -14%, transparent 0 96px,
                    rgba(255,249,236,.1) 96px 97px, transparent 98px),
    /* discos difusos, para dar profundidad */
    radial-gradient(circle at 12% 118%, rgba(227,176,75,.2), transparent 56%),
    radial-gradient(circle at 97% 92%, rgba(110,142,68,.42), transparent 52%);
  background-repeat: no-repeat;
}
/* El velo oscuro está apagado en las cabeceras lisas y aquí tampoco hace
   falta: el motivo ya es sutil y el texto se lee sobre el verde. */

@media (max-width: 780px){
  .gastro .ga-chero--platos.ga-chero--liso{
    background-image:
      radial-gradient(circle at 88% 14%, transparent 0 82px,
                      rgba(227,176,75,.24) 82px 84px, transparent 85px),
      radial-gradient(circle at 20% 108%, rgba(227,176,75,.2), transparent 60%),
      radial-gradient(circle at 99% 96%, rgba(110,142,68,.4), transparent 58%);
    background-repeat: no-repeat;
  }
}

/* ── Vídeos del plato ──────────────────────────────────────────────────────
   La portada es un botón; el reproductor se inserta al pulsarlo. Así la
   página no carga tres iframes de YouTube que nadie ha pedido.          */
.gastro .ga-vids{
  display: grid;
  gap: 20px;
}
.gastro .ga-vids--1{ grid-template-columns: minmax(0, 880px); justify-content: center; }
.gastro .ga-vids--2{ grid-template-columns: repeat(2, 1fr); }

.gastro .ga-vid{ margin: 0; }
.gastro .ga-vid__ph,
.gastro .ga-vid__if{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px;
  background: var(--ga-verde) center/cover no-repeat;
}
.gastro .ga-vid__ph{
  position: relative;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(16,26,20,.14);
}
.gastro .ga-vid__ph::after{
  /* Oscurecido suave, para que el botón de play destaque sobre la portada */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,24,18,.5), rgba(14,24,18,.1));
  transition: background-color .25s;
}
.gastro .ga-vid__ph--liso{
  background-image:
    radial-gradient(circle at 78% 18%, transparent 0 92px,
                    rgba(227,176,75,.22) 92px 94px, transparent 95px),
    radial-gradient(circle at 10% 112%, rgba(227,176,75,.18), transparent 58%);
  background-repeat: no-repeat;
}
.gastro .ga-vid__play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--ga-oro);
  color: #241a05;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 8px 28px rgba(16,26,20,.3);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), background-color .2s;
}
.gastro .ga-vid__ph:hover .ga-vid__play{ transform: translate(-50%, -50%) scale(1.08); }
.gastro .ga-vid__srv{
  position: absolute;
  bottom: 12px; right: 14px;
  z-index: 1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,249,236,.72);
}
.gastro .ga-vid__pie{
  margin: 11px 2px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6B6758;
}

@media (max-width: 860px){
  .gastro .ga-vids--2{ grid-template-columns: 1fr; }
  .gastro .ga-vid__play{ width: 60px; height: 60px; font-size: 1.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHAS DEL CATÁLOGO
   Experiencias, bodegas y enlaces de afiliación vinculados a una categoría.
   Las destacadas llevan borde dorado y van primero.
   ═══════════════════════════════════════════════════════════════════════════ */
.gastro .ga-fics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gastro .ga-fic{
  position: relative;                /* el enlace que cubre la card */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ga-linea);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
/* Cubre toda la card para que sea pulsable entera. El botón de la tienda va
   por encima con z-index, porque un enlace no puede anidarse en otro. */
.gastro .ga-fic__cubre{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gastro .ga-fic:hover{
  border-color: var(--ga-oro);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16,26,20,.09);
}
/* Destacada: borde dorado permanente y un fondo apenas cálido */
.gastro .ga-fic--dest{
  border-color: var(--ga-oro);
  border-width: 2px;
  background: #FFFDF7;
  box-shadow: 0 4px 18px rgba(227,176,75,.16);
}

.gastro .ga-fic__ph{
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--ga-crema-2);
  overflow: hidden;
}
.gastro .ga-fic__ph img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gastro .ga-fic:hover .ga-fic__ph img{ transform: scale(1.05); }

.gastro .ga-fic__pin{
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ga-oro);
  color: #241a05;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 5px rgba(16,26,20,.2);
}
.gastro .ga-fic__pin--dto{ background: #C0392B; color: #fff; }
.gastro .ga-fic__srv{
  position: absolute;
  bottom: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14,24,18,.72);
  color: #FFF9EC;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(3px);
}

.gastro .ga-fic__b{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 13px 15px 15px;
}
.gastro .ga-fic__n{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.22;
  color: #1a3a6e;
  transition: color .22s;
}
.gastro .ga-fic:hover .ga-fic__n{ color: var(--ga-oliva); }
.gastro .ga-fic__t{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6B6758;
}
.gastro .ga-fic__m{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  color: #8A8574;
}
.gastro .ga-fic__loc{ display: inline-flex; align-items: center; gap: 6px; }
.gastro .ga-fic__fl{ height: 12px; width: auto; border-radius: 2px; display: block; }
.gastro .ga-fic__p{
  margin-left: auto;
  font-weight: 700;
  color: var(--ga-verde);
}

/* ── Comprar online ───────────────────────────────────────────────────────
   Un botón de verdad, por encima del enlace que cubre la card: lleva a la
   tienda del productor en una pestaña nueva.                            */
.gastro .ga-fic__tienda{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 11px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--ga-oliva);
  background: #fff;
  color: var(--ga-oliva);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.gastro .ga-fic__tienda:hover{
  background: var(--ga-oliva);
  border-color: var(--ga-oliva);
  color: #FFF9EC;
}
.gastro .ga-fic__tienda-x{ font-size: .68rem; opacity: .7; }
/* En una card destacada, el botón se viste de oro */
.gastro .ga-fic--dest .ga-fic__tienda{
  border-color: var(--ga-oro);
  background: var(--ga-oro);
  color: #241a05;
}
.gastro .ga-fic--dest .ga-fic__tienda:hover{ filter: brightness(1.07); }

@media (max-width: 1100px){ .gastro .ga-fics{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){  .gastro .ga-fics{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
                            .gastro .ga-fic__n{ font-size: 16px; } }
@media (max-width: 480px){  .gastro .ga-fics{ grid-template-columns: 1fr; } }