:root{
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0a7a63;
  --band:#22c55e;
  --card:#fafafa;
  --border:#e5e7eb;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

/* ===== Hero ===== */
.seccion_img{
  background-image: url("../../../view/gastronomia/img/gastronomia.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* se desactiva en móviles */
  position: relative;
  width: 100%;
  height: 80vh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  isolation: isolate;
}
.seccion_img::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.3) 40%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.2));
  z-index:0;
}
.hero_panel{
  position: relative;
  z-index: 1;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, #000 20%, transparent);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(14px, 2vw, 18px);
  padding: clamp(1rem, 2.3vw, 1.5rem);
  box-shadow: 0 8px 26px rgba(0,0,0,.2);
  color: #fafafa;
  text-align: center;
  max-width: min(900px, 92vw);
}
.hero_panel h1{
  margin: 0 0 .4rem 0;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.hero_panel p{
  margin: 0;
  opacity: .95;
  font-size: clamp(.95rem, .7rem + .9vw, 1.05rem);
}

/* Móviles: evitar background-attachment fixed por performance */
@media (max-width: 820px){
  .seccion_img_alojamiento{
    background-attachment: scroll;
    height: 64vh; }
}

/* ===== Sección Restaurantes ===== */
.section_restos{
  padding: clamp(1.25rem, 2.5vw, 3rem);
  max-width: 1200px;
  margin: 0 auto;
}
.section_head h1{
  text-align:center;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  letter-spacing:.3px;
  margin: 0 0 .5rem 0;
}
.section_sub{
  text-align:center;
  color: var(--muted);
  margin: 0 0 1.25rem 0;
}

/* Filtros */
.restos_filters{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin: .75rem 0 1.5rem;
}
.filter_btn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:600;
  padding:.55rem .9rem;
  border-radius:999px;
  cursor:pointer;
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.filter_btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.filter_btn.is-active,
.filter_btn[aria-pressed="true"]{
  background: var(--brand); color:#fff;
  border-color: transparent;
}
.filter_btn:focus-visible{
  outline: 3px solid #94ffd8;
  outline-offset: 2px;
}

/* Grid */
.restos_grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(.9rem, 2vw, 1.25rem);
}

/* Card */
.resto_card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
}
.resto_card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
}

/* Banda lateral */
.resto_colorband{
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--band), var(--brand));
  transform: translateX(-6px);
  transition: transform .25s ease;
  z-index: 1;
}
.resto_card:hover .resto_colorband{
  transform: translateX(0);
}

/* Media con relación */
.resto_media{
  margin:auto;
  width: 100%;
  max-height: 500px;
  min-height: 300px;
  height: 300px;
}
.resto_cover{
  display: block;
    width: 100%;               /* se adapta al contenedor */
    height: 100%;              /* mantiene proporción */
    object-fit: cover;         /* por si en algún caso fijas altura */
}

/* Cuerpo */
.resto_body{
  padding: 1rem 1rem 1.1rem;
  display: grid; gap:.6rem;
}
.resto_header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:.5rem;
}
.resto_name{ font-size: 1.06rem; margin:0; }
.resto_tag{
  font-size: .75rem;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #cffafe;
  padding: .25rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.resto_location{ margin:0;
  font-size:.9rem;
  color: var(--muted);
}
.resto_desc{
  margin:.1rem 0 0;
  line-height:1.45;
  font-size:.96rem;
}

.resto_features{
  margin:.2rem 0 0; padding-left: 1.05rem;
  color: #000;
  font-size: .92rem;
}
.resto_features li{ margin:.22rem 0; }

/* Acciones */
.resto_meta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin: auto;
}
.resto_btn{
  text-decoration:none;
  border:1px solid var(--border);
  background:#fafafa;
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.resto_btn:hover{
  transform: translateY(-1px); box-shadow: var(--shadow);
  background: #f9fafb;
}

/* Ocultar por filtro */
.resto_card[hidden]{ display:none !important; }