/* ═══════════════════════════════════════════════════════════════════════════
   Comer Vegano — hoja de estilos única.

   La idea que gobierna todo: este sitio es un instrumento de etiquetado. Lo
   único que aporta sobre Google Maps es decir, con un criterio publicado, si en
   un sitio se puede comer vegano. Así que el diseño está construido alrededor
   del distintivo, no alrededor de las fotos de comida —que además no podemos
   publicar, porque son de sus autores.

   De ahí las tres decisiones visuales:

   · Los tres distintivos tienen color propio: verde, ámbar y pizarra. Verde,
     ámbar y rojo habrían leído como un semáforo, y «con opciones veganas» no es
     un suspenso: es una categoría distinta, no una peor.
   · Cada tarjeta lleva una franja de su color en el borde izquierdo. Al bajar
     por la página de una ciudad se ve su composición vegana como un ritmo de
     color, sin leer una sola palabra. Es el elemento firma del sitio.
   · Dos voces tipográficas con trabajos distintos: Lora, serif, para los
     titulares —da al sitio una voz editorial, de guía, y no de listado de
     empresas— e Inter para todo lo demás, incluidos los nombres de negocio y
     las cifras, donde su neutralidad y sus números tabulares valen más que
     cualquier carácter. Las dos autoalojadas: el sitio no pide una sola letra
     a un tercero.

   El acento de acción es naranja y no verde a propósito: sobre un campo verde,
   un botón verde desaparece. La tensión verde/naranja es además la del puesto
   de verduras, que es el mundo del que va esto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter, autoalojada. Ni una petición a un tercero. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/inter-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/inter-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Lora para los titulares. Autoalojada igual que Inter: el sitio no pide una
   sola letra a un tercero, que es lo que permite prometer «cero terceros» en la
   política de cookies sin letra pequeña.
   Solo dos pesos, y solo para titulares: son 74 KB que se cachean un año, y a
   cambio la voz del sitio deja de ser la de cualquier plantilla. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/lora-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/lora-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lora-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lora-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Campo */
  --papel:      #FBFCF8;
  --papel-2:    #F0F4EA;
  --papel-3:    #E4EBDC;
  --linea:      #D7E0CD;
  --linea-2:    #C3D0B6;

  /* Tinta */
  --tinta:      #14201A;
  --tinta-2:    #4C5C51;
  --tinta-3:    #6F8074;

  /* Verde acelga: la marca */
  --verde:      #1B5433;
  --verde-osc:  #10301D;
  --verde-cla:  #E0EEE2;
  --hoja:       #3E8C52;

  /* Acción */
  --tomate:     #DD6B33;   /* naranja de acción */
  --tomate-osc: #BC5220;

  /* Los tres distintivos */
  --veg:        #17663A;
  --veg-bg:     #E1F0E4;
  --vgt:        #8A5310;
  --vgt-bg:     #F8EBD8;
  --opc:        #3F5E7C;
  --opc-bg:     #E4ECF3;

  --radio:      10px;
  --radio-sm:   6px;
  --sombra:     0 1px 2px rgba(20,32,26,.06), 0 4px 14px rgba(20,32,26,.05);
  --sombra-alt: 0 2px 6px rgba(20,32,26,.09), 0 12px 32px rgba(20,32,26,.09);
  --ancho:      1120px;
}

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

/* El atributo `hidden` gana siempre.
   El navegador lo aplica con una regla `[hidden] { display: none }` de su hoja
   por defecto, que pierde contra cualquier `display` declarado aquí. Y como
   media interfaz de este sitio es flex o grid, ocultar algo con `hidden` no
   ocultaba nada: al filtrar, las 71 tarjetas descartadas se marcaban como
   ocultas y se seguían viendo todas. Solo el mapa filtraba, porque mira otro
   atributo.
   Es el único `!important` del archivo, y está justificado: `hidden` significa
   oculto, no «oculto salvo que alguien haya puesto un display». */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Las cifras de este sitio son casi todas comparables entre sí —recuentos,
     notas, porcentajes— y en una columna se leen mal si cada dígito tiene un
     ancho distinto. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
svg { flex: none; }

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--hoja); }

:focus-visible {
  outline: 2px solid var(--tomate);
  outline-offset: 2px;
  border-radius: 3px;
}

.gv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radio-sm) 0; font-weight: 600;
}
.gv-skip:focus { left: 0; color: #fff; }

.gv-wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ── Tipografía ────────────────────────────────────────────────────────────
   Los titulares son etiqueta de producto: peso 800 y tracking negativo fuerte,
   que a tamaño grande compacta la palabra en un bloque. A tamaño pequeño ese
   mismo tracking la haría ilegible, así que se afloja al bajar. */

h1, h2, h3 {
  color: var(--verde-osc);
  margin: 0 0 .5rem;
  line-height: 1.15;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* El `word-spacing` negativo no es un capricho.
   Al apretar las letras de una serif con `letter-spacing` negativo, el espacio
   entre palabras se queda como estaba y de golpe parece el doble de ancho: el
   titular se lee como palabras sueltas en vez de como una frase. Compensarlo
   en la misma proporción devuelve el ritmo. Cuanto más grande el texto, más
   compensación necesita. */
h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.15rem);
  font-weight: 700;
  letter-spacing: -.018em;
  word-spacing: -.09em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.012em;
  word-spacing: -.06em;
}
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.006em; word-spacing: -.03em; }

/* Los nombres de negocio y de ciudad se quedan en Inter: son datos, no voz del
   sitio, y en serif a tamaño pequeño se leen peor en una tarjeta apretada. */
.gv-card__name, .gv-mini__n, .gv-citycard__nombre, .gv-panel h2, .gv-footer h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.018em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* La microetiqueta: versalitas espaciadas. Es la voz de «denominación de
   origen» del sitio, y la que separa un dato de su rótulo. */
.gv-filtros__label,
.gv-card__patro,
.gv-patro__tag,
.gv-afil__tag,
.gv-citycard__prov {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ── Distintivos ───────────────────────────────────────────────────────────
   El sello. Doble anillo —borde exterior y sombra interior de 1 px— para que
   lea como una marca de certificación estampada y no como una etiqueta de blog. */

.gv-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 1px solid currentColor;
  box-shadow: inset 0 0 0 1px var(--papel);
  cursor: help;
}
.gv-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.gv-badge--vegano      { color: var(--veg); background: var(--veg-bg); }
.gv-badge--vegetariano { color: var(--vgt); background: var(--vgt-bg); }
.gv-badge--opciones    { color: var(--opc); background: var(--opc-bg); }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.gv-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1rem;
  border: 1px solid var(--linea-2);
  border-radius: var(--radio-sm);
  background: #fff;
  color: var(--verde-osc);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.gv-btn:hover { background: var(--papel-2); border-color: var(--linea-2); color: var(--verde-osc); }
.gv-btn:active { transform: translateY(1px); }

.gv-btn--primary {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
}
.gv-btn--primary:hover { background: var(--tomate-osc); border-color: var(--tomate-osc); color: #fff; }

.gv-btn--sm { padding: .42rem .72rem; font-size: .85rem; }

.gv-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--verde); text-decoration: underline; cursor: pointer;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

/* La cabecera se queda arriba al bajar. En un directorio, el buscador y el menú
   de ciudades son la vía de escape cuando la lista que tienes delante no es la
   que buscabas; con la cabecera arriba del todo, esa salida está a un scroll
   completo de distancia y la alternativa es el botón «atrás».

   Opaca y no traslúcida: por debajo pasan tarjetas, fotos de negocio y teselas
   de mapa, y sobre ese revoltijo un fondo con transparencia deja el menú
   ilegible justo mientras se usa. */
/* El `sticky` va en el <header> y no en el <nav> que lleva dentro, y esto no es
   un capricho: un elemento pegajoso solo se mueve dentro de su contenedor, y el
   <header> mide exactamente lo que mide la barra. Poniéndolo en el <nav>, se
   queda quieto porque no tiene por dónde correr —funcionaba de casualidad
   cuando encima había una tira de aviso que daba ese margen, y dejó de hacerlo
   al quitarla—. */
.gv-cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--papel);
}
.gv-nav {
  position: relative; z-index: 30;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
/* La sombra solo aparece cuando hay algo debajo, para que arriba del todo la
   cabecera siga siendo parte de la página y no una tira flotante. */
.gv-cabecera[data-pegada] { box-shadow: 0 2px 10px rgba(20,32,26,.08); }

/* Los saltos a un ancla tienen que dejar el título por debajo de la cabecera.
   Sin esto, pulsar una sección de la ficha la deja medio tapada. */
:target, [id^="f-"], #listado { scroll-margin-top: 4.5rem; }
.gv-nav-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gv-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--verde); }
.gv-brand-mark { color: var(--verde); flex: none; }
.gv-brand-name {
  display: flex; flex-direction: column;
  font-weight: 800; letter-spacing: -.03em; font-size: 1.08rem;
  color: var(--verde-osc); line-height: 1.15;
}
.gv-brand-name span {
  font-size: .68rem; font-weight: 500; letter-spacing: 0;
  color: var(--tinta-3);
}

.gv-nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0 auto 0 1rem; padding: 0; }
.gv-nav-links > li { position: relative; }
.gv-nav-links a, .gv-nav-drop-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .45rem .6rem; border: 0; background: none;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--tinta-2); text-decoration: none; cursor: pointer;
  border-radius: var(--radio-sm);
}
.gv-nav-links a:hover, .gv-nav-drop-btn:hover { background: var(--papel-2); color: var(--verde-osc); }

.gv-nav-drop {
  position: absolute; top: calc(100% + .3rem); left: 0;
  min-width: 240px; padding: .4rem;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-alt);
  list-style: none; margin: 0;
  display: none;
}
.gv-nav-drop--cols { min-width: 380px; columns: 2; column-gap: .25rem; }
.gv-nav-drop li { break-inside: avoid; }
.gv-nav-drop a { display: block; width: 100%; font-weight: 500; }
.gv-nav-drop-hint { color: var(--tinta-3); font-weight: 400; }
.gv-nav-drop-btn[aria-expanded="true"] + .gv-nav-drop { display: block; }
.gv-nav-drop-btn[aria-expanded="true"] { background: var(--papel-2); }

.gv-nav-cta { flex: none; gap: .28rem; }
.gv-burger { display: none; border: 1px solid var(--linea-2); background: #fff; border-radius: var(--radio-sm); padding: .45rem; cursor: pointer; color: var(--verde-osc); }

.gv-mobile-menu { display: none; border-top: 1px solid var(--linea); background: #fff; }

/* El menú se desplaza por dentro, y esto no es un detalle: va dentro de la
   cabecera, que está pegada arriba, así que la cabecera pasa a medir 1.210 px
   en una pantalla de 844 y sus últimos enlaces quedaban fuera para siempre. La
   página de detrás sí se movía —y eso confundía más—, pero el menú no, porque
   un elemento pegajoso no se mueve: por eso hay que darle su propio scroll.

   `dvh` y no `vh` porque en el móvil la barra del navegador aparece y
   desaparece, y con `vh` el último enlace se queda debajo de ella. El `vh` va
   antes como respaldo para quien no entienda `dvh`.

   `overscroll-behavior: contain` evita que al llegar al final del menú el gesto
   siga arrastrando la página de detrás. */
.gv-mobile-menu.abierto {
  display: block;
  /* Colgado de la cabecera y fuera del flujo. Dentro del flujo, desplegarlo
     hacía la cabecera pegada tan alta como la pantalla, y eso cambiaba la altura
     del documento: abrías el menú en el scroll 1.397 y al cerrarlo aparecías en
     el 712, en otra parte de la lista. Así el documento no se entera. */
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - 3.5rem);
  max-height: calc(100dvh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 24px rgba(20,32,26,.14);
}
.gv-mobile-menu ul { list-style: none; margin: 0; padding: .5rem 1.25rem 1rem; }
.gv-mobile-menu a { display: block; padding: .5rem 0; font-weight: 600; color: var(--verde-osc); text-decoration: none; border-bottom: 1px solid var(--papel-3); }
.gv-mobile-menu > ul > li > span { display: block; padding: .8rem 0 .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }
.gv-mobile-sub { padding: 0 !important; }
.gv-mobile-sub a { font-weight: 500; font-size: .92rem; }

/* ── Migas ────────────────────────────────────────────────────────────────── */

.gv-crumbs { background: var(--papel-2); border-bottom: 1px solid var(--linea); font-size: .82rem; }
.gv-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: .5rem 0; }
.gv-crumbs li + li::before { content: '›'; margin-right: .35rem; color: var(--tinta-3); }
.gv-crumbs a { color: var(--tinta-2); text-decoration: none; }
.gv-crumbs a:hover { color: var(--verde); text-decoration: underline; }
.gv-crumbs span { color: var(--tinta-3); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.gv-hero { padding: 2.2rem 0 1.4rem; max-width: 46rem; }
.gv-hero--home { padding-bottom: 1rem; }
.gv-hero__sub { font-size: 1.05rem; color: var(--tinta-2); margin-top: .6rem; }

.gv-hero__datos {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
  list-style: none; margin: 1.1rem 0 0; padding: 0;
}
.gv-hero__datos li {
  background: #fff; border: 1px solid var(--linea);
  border-radius: 999px; padding: .3rem .8rem;
  font-size: .85rem; color: var(--tinta-2);
}
.gv-hero__datos b { color: var(--verde-osc); font-weight: 800; letter-spacing: -.02em; }

/* ── Buscador ─────────────────────────────────────────────────────────────── */

.gv-buscador { position: relative; max-width: 30rem; margin-top: 1.4rem; }
.gv-buscador__campo {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1.5px solid var(--linea-2);
  border-radius: var(--radio); padding: .1rem .9rem;
  color: var(--tinta-3);
}
.gv-buscador__campo:focus-within { border-color: var(--verde); color: var(--verde); }
.gv-buscador input {
  flex: 1; border: 0; outline: 0; background: none;
  font: inherit; font-size: 1rem; padding: .7rem 0; color: var(--tinta);
}
.gv-buscador__lista {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 20;
  max-height: 19rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-alt);
  list-style: none; margin: 0; padding: .3rem;
}
.gv-buscador__lista:not(:has(li:not([hidden]))) { display: none; }
.gv-buscador__lista a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .5rem .6rem; border-radius: var(--radio-sm);
  text-decoration: none; color: var(--verde-osc); font-weight: 600;
}
.gv-buscador__lista a:hover, .gv-buscador__lista a:focus { background: var(--papel-2); }
.gv-buscador__lista span { font-size: .8rem; font-weight: 400; color: var(--tinta-3); }

/* ── Bloques y secciones ──────────────────────────────────────────────────── */

.gv-bloque { padding: 2rem 0 .5rem; }
.gv-bloque > h2 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.gv-h2-n { font-size: .8rem; font-weight: 600; color: var(--tinta-3); letter-spacing: 0; }
.gv-bloque > p { max-width: 46rem; color: var(--tinta-2); }

.gv-nota-pie { font-size: .8rem; color: var(--tinta-3); margin-top: .6rem; }

/* ── Horas punta ────────────────────────────────────────────────────────────
   Siete gráficos pintados y uno visible, conmutados con radios y el selector
   `~`. Sin JavaScript: son datos que ya están en el HTML y cambiar de día no
   necesita más que enseñar el que toca. El marcado va en ese orden a propósito
   —radios, pestañas, gráficos, todos hermanos— porque `~` solo alcanza a lo
   que viene después. */

.gv-hp__radio { position: absolute; opacity: 0; pointer-events: none; }

.gv-hp__dias { display: flex; gap: .25rem; margin-bottom: .8rem; }
.gv-hp__dia {
  flex: 1 1 0; display: grid; place-items: center;
  padding: .4rem 0;
  border: 1px solid var(--linea-2); border-radius: 8px;
  font-size: .8rem; font-weight: 600; color: var(--tinta-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.gv-hp__dia:hover { border-color: var(--hoja); color: var(--verde-osc); }

/* El día visible y su pestaña marcada. Sin `:has()` ni JavaScript: cada radio
   alcanza por `~` a su pestaña y a su gráfico. */
.gv-hp__grafico { display: none; margin: 0; }
.gv-hp__grafico figcaption { font-size: .82rem; color: var(--tinta-3); margin-bottom: .2rem; }
.gv-hp__frase { font-size: .9rem; color: var(--verde-osc); font-weight: 600; margin: 0 0 .6rem; }

.gv-hp__barras {
  display: flex; align-items: flex-end; gap: 2px;
  height: 82px; margin: 0; padding: 0; list-style: none;
}
.gv-hp__barras li {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.gv-hp__barras span {
  width: 100%; border-radius: 2px 2px 0 0;
  background: var(--verde-cla); border: 1px solid transparent;
}
.gv-hp__barras .gv-hp__pico { background: var(--verde); }
.gv-hp__barras b {
  font-size: .6rem; font-weight: 500; color: var(--tinta-3);
  line-height: 1.6; min-height: 1em;
}

/* Un bloque por día. Se generan a mano y no con un bucle porque son siete
   fijos y cualquier alternativa —atributos, :has()— cuesta más de leer. */
#gv-hp-lun:checked ~ .gv-hp__grafico--lun,
#gv-hp-mar:checked ~ .gv-hp__grafico--mar,
#gv-hp-mie:checked ~ .gv-hp__grafico--mie,
#gv-hp-jue:checked ~ .gv-hp__grafico--jue,
#gv-hp-vie:checked ~ .gv-hp__grafico--vie,
#gv-hp-sab:checked ~ .gv-hp__grafico--sab,
#gv-hp-dom:checked ~ .gv-hp__grafico--dom { display: block; }

#gv-hp-lun:checked ~ .gv-hp__dias label[for="gv-hp-lun"],
#gv-hp-mar:checked ~ .gv-hp__dias label[for="gv-hp-mar"],
#gv-hp-mie:checked ~ .gv-hp__dias label[for="gv-hp-mie"],
#gv-hp-jue:checked ~ .gv-hp__dias label[for="gv-hp-jue"],
#gv-hp-vie:checked ~ .gv-hp__dias label[for="gv-hp-vie"],
#gv-hp-sab:checked ~ .gv-hp__dias label[for="gv-hp-sab"],
#gv-hp-dom:checked ~ .gv-hp__dias label[for="gv-hp-dom"] {
  background: var(--verde); border-color: var(--verde); color: #fff;
}

/* El foco del teclado se ve en la pestaña, no en el radio escondido. */
.gv-hp__radio:focus-visible ~ .gv-hp__dias label[for] { outline: none; }
#gv-hp-lun:focus-visible ~ .gv-hp__dias label[for="gv-hp-lun"],
#gv-hp-mar:focus-visible ~ .gv-hp__dias label[for="gv-hp-mar"],
#gv-hp-mie:focus-visible ~ .gv-hp__dias label[for="gv-hp-mie"],
#gv-hp-jue:focus-visible ~ .gv-hp__dias label[for="gv-hp-jue"],
#gv-hp-vie:focus-visible ~ .gv-hp__dias label[for="gv-hp-vie"],
#gv-hp-sab:focus-visible ~ .gv-hp__dias label[for="gv-hp-sab"],
#gv-hp-dom:focus-visible ~ .gv-hp__dias label[for="gv-hp-dom"] {
  outline: 2px solid var(--verde-osc); outline-offset: 2px;
}

.gv-cta {
  margin: 2.5rem 0;
  padding: 1.6rem;
  background: var(--verde-osc);
  color: #DDEBDF;
  border-radius: var(--radio);
}
.gv-cta h2 { color: #fff; }
.gv-cta p { max-width: 42rem; margin-bottom: 1.1rem; }

/* ── Tarjeta de ciudad ────────────────────────────────────────────────────── */

.gv-citygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}
.gv-citycard {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .85rem .95rem;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.gv-citycard:hover { border-color: var(--hoja); box-shadow: var(--sombra); transform: translateY(-1px); }
.gv-citycard__nombre { font-weight: 700; color: var(--verde-osc); letter-spacing: -.018em; }
.gv-citycard__prov { color: var(--tinta-3); }
.gv-citycard__n { font-size: .85rem; color: var(--tinta-2); margin-top: .3rem; }
.gv-citycard__n b { color: var(--verde-osc); font-weight: 800; }
.gv-citycard__veg { display: block; font-size: .78rem; color: var(--veg); font-weight: 600; }

/* ── Mosaico de categorías ────────────────────────────────────────────────── */

.gv-cattiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin: 1.2rem 0 0;
}
.gv-cattiles a {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9rem;
  background: var(--papel-2); border: 1px solid transparent;
  border-radius: var(--radio);
  text-decoration: none; color: var(--verde-osc);
  transition: background .12s, border-color .12s;
}
.gv-cattiles a:hover { background: #fff; border-color: var(--hoja); }
.gv-cattiles span { font-weight: 700; font-size: .95rem; letter-spacing: -.015em; }
.gv-cattiles b { font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
.gv-cattiles svg { color: var(--hoja); }

/* ── Mapa ─────────────────────────────────────────────────────────────────── */

.gv-mapa-wrap { margin: 0 0 1rem; }
.gv-mapa {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-2);
  overflow: hidden;
  /* Leaflet reparte z-index hasta 1000 entre sus capas y controles, y como el
     contenedor no creaba contexto de apilamiento esos números competían con los
     del sitio: el mapa se pintaba por encima del cajón de filtros. `isolate` los
     encierra aquí dentro sin tocar ni una regla de Leaflet. */
  isolation: isolate;
}
.gv-pin {
  display: block; width: 100%; height: 100%;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(20,32,26,.35);
}
.gv-pin--vegano      { background: var(--veg); }
.gv-pin--vegetariano { background: var(--vgt); }
.gv-pin--opciones    { background: var(--opc); }

/* ── Filtros ──────────────────────────────────────────────────────────────── */

.gv-filtros {
  position: sticky; top: 0; z-index: 15;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .8rem 0;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  margin-bottom: 1.1rem;
}
.gv-filtros__grupo { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.gv-filtros__label { color: var(--tinta-3); flex: none; min-width: 4.6rem; }
.gv-filtros__chips { display: flex; gap: .35rem; flex-wrap: wrap; }

.gv-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .65rem;
  background: #fff; border: 1px solid var(--linea-2);
  border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--tinta-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.gv-chip span { font-weight: 500; color: var(--tinta-3); font-size: .76rem; }
.gv-chip:hover { border-color: var(--hoja); color: var(--verde-osc); }
.gv-chip[aria-pressed="true"] {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.gv-chip[aria-pressed="true"] span { color: rgba(255,255,255,.7); }
.gv-chip--vegano[aria-pressed="true"]      { background: var(--veg); border-color: var(--veg); }
.gv-chip--vegetariano[aria-pressed="true"] { background: var(--vgt); border-color: var(--vgt); }
.gv-chip--opciones[aria-pressed="true"]    { background: var(--opc); border-color: var(--opc); }

.gv-filtros__estado { font-size: .84rem; color: var(--tinta-2); margin: 0; }
.gv-filtros__limpiar {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--tomate); text-decoration: underline; cursor: pointer;
}

/* ── Tarjeta de negocio ───────────────────────────────────────────────────────
   El elemento firma: la franja izquierda con el color del distintivo. Bajando
   por una ciudad se lee su composición vegana como un ritmo de color, antes de
   leer una sola palabra. */

.gv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.gv-destacados { display: grid; gap: .8rem; margin-bottom: 1.1rem; }

.gv-card {
  position: relative;
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-left: 5px solid var(--linea-2);
  border-radius: var(--radio);
  transition: box-shadow .12s, transform .12s;
}
.gv-card:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.gv-card[data-nivel="vegano"]      { border-left-color: var(--veg); }
.gv-card[data-nivel="vegetariano"] { border-left-color: var(--vgt); }
.gv-card[data-nivel="opciones"]    { border-left-color: var(--opc); }

.gv-card--destacada { background: #FFFDF7; border-color: var(--linea-2); box-shadow: var(--sombra); }
.gv-card__patro {
  align-self: flex-start;
  color: var(--vgt); background: var(--vgt-bg);
  padding: .12rem .45rem; border-radius: 3px;
}

.gv-card__head { display: flex; align-items: flex-start; gap: .6rem; justify-content: space-between; }
.gv-card__name { margin: 0; font-size: 1.02rem; letter-spacing: -.02em; }
.gv-card__name a { color: var(--verde-osc); text-decoration: none; }
.gv-card__name a:hover { color: var(--hoja); text-decoration: underline; }

.gv-card__meta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; font-size: .84rem; color: var(--tinta-3); }
.gv-card__cat { display: inline-flex; align-items: center; gap: .3rem; }
.gv-card__precio { font-weight: 600; color: var(--tinta-2); }

.gv-card__rating { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0; font-size: .85rem; color: var(--tinta-2); }
.gv-card__rating b { font-weight: 800; color: var(--verde-osc); letter-spacing: -.02em; }
.gv-card__nres { color: var(--tinta-3); font-size: .8rem; }
.gv-card__rating--sin { color: var(--tinta-3); font-style: italic; }

.gv-stars { display: inline-flex; gap: 1px; color: #D99A0B; }
.gv-stars svg { width: 14px; height: 14px; }

.gv-card__dir, .gv-card__hor { display: flex; align-items: flex-start; gap: .35rem; margin: 0; font-size: .85rem; color: var(--tinta-2); }
/* En una columna estrecha, «Cerrado ahora» se partía en dos líneas y el horario
   quedaba pegado a su lado, como si fueran la misma frase. El estado no se
   parte nunca y el horario baja entero. */
.gv-card__hor { flex-wrap: wrap; }
.gv-card__hor .gv-abierto { white-space: nowrap; }
.gv-card__dir svg, .gv-card__hor svg { margin-top: .18rem; color: var(--tinta-3); }
.gv-card__loc { color: var(--tinta-3); }
.gv-card__hortxt { color: var(--tinta-3); }

.gv-abierto { font-weight: 700; font-size: .82rem; }
.gv-abierto[data-estado="abierto"] { color: var(--veg); }
.gv-abierto[data-estado="cerrado"] { color: var(--tomate); }

.gv-chips { display: flex; gap: .3rem; flex-wrap: wrap; list-style: none; margin: .1rem 0 0; padding: 0; }
.gv-chips li {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .45rem;
  background: var(--papel-2); border-radius: 4px;
  font-size: .76rem; color: var(--tinta-2);
}
.gv-chips li svg { color: var(--hoja); }
.gv-chips--grandes li { padding: .35rem .7rem; font-size: .88rem; }

.gv-card__claim { margin: .2rem 0 0; font-size: .88rem; color: var(--tinta-2); font-style: italic; }
.gv-card__claim--grande { font-size: 1rem; padding: .8rem 1rem; background: #FFFDF7; border-left: 3px solid var(--vgt); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }

.gv-card__acciones { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }

.gv-vacio { padding: 2rem 0; color: var(--tinta-2); }

/* ── Patrocinio ───────────────────────────────────────────────────────────── */

.gv-patro {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1.2rem 0 0;
  padding: .9rem 1.1rem;
  background: var(--papel-2);
  border: 1px dashed var(--linea-2);
  border-radius: var(--radio);
}
.gv-patro__tag { color: var(--tinta-3); flex: none; }
.gv-patro__body { flex: 1 1 16rem; }
.gv-patro__body p { margin: .1rem 0 0; font-size: .9rem; color: var(--tinta-2); }

/* ── Ficha ────────────────────────────────────────────────────────────────── */

.gv-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; padding-bottom: 2rem; }
.gv-ficha__head { padding: 2rem 0 1rem; }
.gv-ficha__cat { display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; font-size: .88rem; color: var(--tinta-3); }
.gv-ficha__cat svg { color: var(--hoja); }
.gv-ficha__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0 0; }

/* El bloque que justifica el sitio entero. Filete del color del distintivo:
   la misma señal que la franja de las tarjetas, ampliada. */
.gv-porque {
  padding: 1.1rem 1.3rem;
  background: var(--papel-2);
  border-left: 5px solid var(--linea-2);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.gv-porque h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.gv-porque__def { color: var(--tinta-2); }
.gv-porque__motivo { display: flex; gap: .5rem; align-items: flex-start; font-weight: 600; color: var(--verde-osc); }
.gv-porque__motivo svg { margin-top: .25rem; color: var(--veg); }
.gv-porque__fuente { font-size: .84rem; margin-bottom: 0; }

/* Cada nivel tiñe su propio bloque. */
.gv-ficha__main .gv-porque { border-left-color: var(--hoja); }

.gv-barras { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .3rem; max-width: 26rem; }
.gv-barras li { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; gap: .5rem; font-size: .82rem; }
.gv-barras__n { display: inline-flex; align-items: center; gap: .15rem; color: var(--tinta-2); }
.gv-barras__n svg { color: #D99A0B; }
.gv-barras__track { height: 8px; background: var(--papel-3); border-radius: 999px; overflow: hidden; }
.gv-barras__fill { display: block; height: 100%; background: var(--hoja); border-radius: 999px; }
.gv-barras__pct { text-align: right; color: var(--tinta-3); }
.gv-resenas__cab { display: flex; align-items: center; gap: .5rem; }
.gv-resenas__cab b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--verde-osc); }
.gv-resenas__cab span { font-size: .85rem; color: var(--tinta-3); }
.gv-resenas__veredicto { max-width: 42rem; color: var(--tinta-2); }

.gv-cards--mini { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gv-mini {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: .7rem .85rem;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none;
}
.gv-mini:hover { border-color: var(--hoja); }
.gv-mini__n { font-weight: 700; color: var(--verde-osc); font-size: .93rem; letter-spacing: -.015em; }
.gv-mini__r { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; color: var(--tinta-3); }
.gv-mini__r svg { color: #D99A0B; }

/* El `top` cuenta con la cabecera pegada: con 1rem, al bajar el panel se metía
   por debajo de la barra de navegación. 3.5rem es lo que mide, más un dedo de
   aire.

   Y el margen superior es para el momento de cargar: sin él, la columna arranca
   pegada a las migas mientras la de al lado tiene el aire de su cabecera, y las
   dos parecen desalineadas. */
.gv-ficha__aside {
  display: grid; gap: 1rem;
  position: sticky; top: 4.5rem;
  margin-top: 2.5rem;
}

/* Las salidas van después del aside en el marcado —para que en móvil los datos
   de contacto queden por delante— pero en escritorio tienen que seguir donde
   estaban: en la columna de contenido, debajo de todo. Fijarlas a la columna 1
   las devuelve a su sitio sin tocar el orden del HTML. */
.gv-ficha__salidas { grid-column: 1; }

/* ── Qué se come aquí ──────────────────────────────────────────────────────── */

.gv-carta__precios {
  font-size: 1.02rem; font-weight: 600; color: var(--verde-osc);
  margin: 0 0 .9rem;
}
.gv-carta__platos {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; margin: 0 0 1.1rem; padding: 0;
}
.gv-carta__platos li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .8rem;
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--verde-osc);
}
.gv-carta__platos svg { color: var(--hoja); }
/* El sin gluten no es un plato: es una respuesta a «puedo comer aquí». */
.gv-carta__sg { background: var(--verde-cla) !important; border-color: var(--verde) !important; }
.gv-carta__sg svg { color: var(--verde) !important; }

/* La carta en un diálogo nativo: el fondo, el Escape y el foco los pone el
   navegador. Solo hay que vestirlo. */
.gv-modal {
  width: min(94vw, 34rem); max-height: min(86dvh, 46rem);
  padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: var(--tinta);
  box-shadow: 0 24px 60px rgba(20,32,26,.28);
  overflow: hidden;
}
.gv-modal[open] { display: flex; flex-direction: column; }
.gv-modal::backdrop { background: rgba(20,32,26,.5); backdrop-filter: blur(2px); }

.gv-modal__cab {
  display: flex; align-items: center; gap: 1rem;
  flex: none; padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.gv-modal__cab h2 {
  margin: 0; flex: 1; font-size: 1.15rem; color: var(--verde-osc);
}
.gv-modal__x {
  display: grid; place-items: center;
  background: none; border: 0; padding: .2rem;
  color: var(--verde-osc); cursor: pointer;
}

.gv-modal__aviso {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0; padding: .8rem 1.2rem;
  background: var(--opc-bg); color: var(--opc);
  font-size: .86rem; line-height: 1.4;
}
.gv-modal__aviso svg { flex: none; margin-top: .1rem; }

/* La lista es lo único que se desplaza; cabecera y pie quedan fijos. */
.gv-modal__platos {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: .4rem 1.2rem;
}
.gv-modal__platos li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--papel-3);
}
.gv-modal__platos li:last-child { border-bottom: 0; }
.gv-modal__platos span { flex: 1; font-size: .93rem; color: var(--tinta); }
.gv-modal__platos b { flex: none; font-weight: 700; color: var(--verde-osc); }

.gv-modal__pie {
  flex: none; padding: .9rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea); background: var(--papel);
}
.gv-modal__pie .gv-nota-pie { margin: 0 0 .7rem; }

/* ── La barra de secciones de la ficha (solo móvil) ─────────────────────────
   En escritorio no existe: las secciones están a la vista en dos columnas y la
   ficha entra casi entera en pantalla. */
.gv-ftabs { display: none; }

@media (max-width: 780px) {
  .gv-ftabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .gv-ftabs a {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .5rem .2rem .55rem;
    font-size: .66rem; font-weight: 600; line-height: 1.2;
    color: var(--tinta-3); text-decoration: none; text-align: center;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .gv-ftabs svg { color: var(--tinta-3); }
  .gv-ftabs a[aria-current="true"] { color: var(--verde-osc); border-top-color: var(--verde); }
  .gv-ftabs a[aria-current="true"] svg { color: var(--verde); }

  /* Hueco para que la barra no tape el final del pie. */
  body { padding-bottom: 3.6rem; }

  /* Al saltar a una sección, que su título no quede pegado al borde. */
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.gv-panel {
  padding: 1.1rem;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
}
.gv-panel h2 { font-size: 1rem; }
.gv-panel--cta { background: var(--verde-cla); border-color: var(--linea-2); }
.gv-panel__acciones { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.gv-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.gv-datos li { display: flex; gap: .5rem; align-items: flex-start; }
.gv-datos svg { margin-top: .2rem; color: var(--hoja); }
.gv-horario { font-size: .9rem; color: var(--tinta-2); display: flex; flex-direction: column; gap: .2rem; }

.gv-afil { list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--papel-3); display: grid; gap: .4rem; font-size: .88rem; }
.gv-afil li { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.gv-afil__tag { color: var(--tinta-3); cursor: help; }

/* ── Páginas de texto ─────────────────────────────────────────────────────── */

/* El `:not(.gv-cta)` no es un adorno: sin él, estas dos reglas se comen la caja
   de llamada a la acción que hay al final de varias de estas páginas.
   `.gv-texto section > p` pesa más que `.gv-cta p`, así que el párrafo salía en
   gris oscuro sobre el verde oscuro de la caja —ilegible—, y
   `.gv-texto section` le quitaba el relleno lateral, con el texto y el botón
   pegados al borde. Las dos reglas son para el texto corrido de la página; la
   caja tiene su propio fondo y sus propios colores. */
.gv-texto { padding-bottom: 2.5rem; }
.gv-texto section:not(.gv-cta) { max-width: 46rem; padding: 1.4rem 0; }
.gv-texto section:not(.gv-cta) > p,
.gv-texto section:not(.gv-cta) > ul,
.gv-texto section:not(.gv-cta) > ol { color: var(--tinta-2); }
.gv-texto--legal section { border-top: 1px solid var(--papel-3); }
.gv-texto--legal section:first-of-type { border-top: 0; }
.gv-texto ul, .gv-texto ol { padding-left: 1.2rem; }
.gv-texto li { margin-bottom: .45rem; }

.gv-lista-check { list-style: none; padding-left: 0 !important; }
.gv-lista-check li { position: relative; padding-left: 1.5rem; }
.gv-lista-check li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--hoja);
}

.gv-pasos { counter-reset: paso; list-style: none; padding-left: 0 !important; display: grid; gap: .8rem; }
.gv-pasos li { counter-increment: paso; position: relative; padding-left: 2.4rem; }
.gv-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: .05em;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  background: var(--verde); color: #fff;
  border-radius: 50%; font-size: .8rem; font-weight: 800;
}

.gv-faq { margin: 0; }
.gv-faq dt { font-weight: 700; color: var(--verde-osc); margin-top: 1.1rem; }
.gv-faq dd { margin: .3rem 0 0; color: var(--tinta-2); }

.gv-enlaces { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; margin: 1rem 0 0; }
.gv-enlaces--col { grid-template-columns: 1fr; }
.gv-enlaces li { margin: 0; }
.gv-enlaces a {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .85rem;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; color: var(--verde-osc); font-weight: 600; font-size: .92rem;
}
.gv-enlaces a:hover { border-color: var(--hoja); background: var(--papel-2); }
.gv-enlaces a svg { color: var(--hoja); }
.gv-enlaces a > span:last-child { margin-left: auto; color: var(--tinta-3); font-weight: 600; font-size: .84rem; }
.gv-enlaces--col a > span { margin-left: 0 !important; font-weight: 400 !important; color: var(--tinta-2) !important; }
.gv-enlaces--col a strong { color: var(--verde-osc); }

/* ── Niveles: portada y página de distintivos ─────────────────────────────── */

.gv-niveles-home { padding: 2rem 0 .5rem; }
.gv-niveles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: 1.1rem 0; }
.gv-nivel-card {
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  padding: 1.1rem;
  background: #fff; border: 1px solid var(--linea);
  border-top: 4px solid var(--linea-2);
  border-radius: var(--radio);
}
.gv-nivel-card--vegano      { border-top-color: var(--veg); }
.gv-nivel-card--vegetariano { border-top-color: var(--vgt); }
.gv-nivel-card--opciones    { border-top-color: var(--opc); }
.gv-nivel-card p { font-size: .92rem; color: var(--tinta-2); margin: 0; }
.gv-nivel-card b { font-size: .85rem; color: var(--tinta-3); }

.gv-nivel-detalle { max-width: 46rem; padding: 1.4rem 0 1.4rem 1.2rem; border-left: 5px solid var(--linea-2); margin-bottom: .5rem; }
.gv-nivel-detalle--vegano      { border-left-color: var(--veg); }
.gv-nivel-detalle--vegetariano { border-left-color: var(--vgt); }
.gv-nivel-detalle--opciones    { border-left-color: var(--opc); }
.gv-nivel-detalle h2 { margin-bottom: .6rem; }
.gv-nivel-detalle__def { font-size: 1.05rem; }
.gv-nivel-detalle__crit, .gv-nivel-detalle__n { font-size: .9rem; color: var(--tinta-2); }
.gv-nivel-detalle__n { color: var(--tinta-3); margin-bottom: 0; }

/* ── Tabla ────────────────────────────────────────────────────────────────── */

.gv-tabla-wrap { overflow-x: auto; margin-top: 1rem; }
.gv-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 30rem; }
.gv-tabla th, .gv-tabla td { padding: .6rem .7rem; text-align: right; border-bottom: 1px solid var(--papel-3); }
.gv-tabla thead th { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); }
.gv-tabla th:first-child, .gv-tabla td:first-child { text-align: left; }
.gv-tabla tbody th { font-weight: 700; }
.gv-tabla tbody tr:hover { background: var(--papel-2); }

/* ── Precios ──────────────────────────────────────────────────────────────── */

.gv-precio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: none !important; }
.gv-precio { padding: 1.3rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.gv-precio--destacado { border-color: var(--tomate); box-shadow: var(--sombra); }
.gv-precio__cifra { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; color: var(--verde-osc); margin: .2rem 0 .9rem; }
.gv-precio__cifra span { display: block; font-size: .82rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-3); }
.gv-precio .gv-btn { margin-top: .8rem; }

/* ── Mapa web ─────────────────────────────────────────────────────────────── */

.gv-mapaweb__com { max-width: none !important; padding: 1.6rem 0 .6rem; border-top: 1px solid var(--papel-3); }
.gv-mapaweb__prov { margin: 1rem 0; }
.gv-mapaweb__prov h3 { font-size: .95rem; color: var(--tinta-2); }
.gv-mapaweb__ciudades { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .1rem .8rem; }
.gv-mapaweb__ciudades li { display: flex; justify-content: space-between; gap: .5rem; margin: 0; font-size: .9rem; padding: .15rem 0; }
.gv-mapaweb__ciudades span { color: var(--tinta-3); font-size: .82rem; }

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.gv-note { padding: .8rem 1rem; background: var(--papel-2); border-radius: var(--radio); font-size: .9rem; }
.gv-note--warn { background: var(--vgt-bg); color: var(--vgt); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.gv-footer { margin-top: 3rem; background: var(--verde-osc); color: #B9CFBE; font-size: .9rem; }
/* La marca a la izquierda y las cuatro columnas de enlaces a su derecha.
   Las pistas van contadas y no con `auto-fit`: `repeat(auto-fit, …)` no se
   puede combinar con una pista flexible —el `1.6fr` de la columna de marca— en
   la misma declaración, así que el valor entero era inválido, el navegador lo
   tiraba y el pie se servía en una sola columna de 1.208 px de alto con dos
   tercios del ancho vacíos. No fallaba nada visible en el HTML: la regla
   simplemente no existía. */
.gv-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 1.6rem 2rem;
  padding: 2.8rem 0 1.8rem;
}
.gv-footer h2 { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: #7FA588; margin-bottom: .7rem; }
.gv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gv-footer a { color: #D6E6DA; text-decoration: none; }
.gv-footer a:hover { color: #fff; text-decoration: underline; }
.gv-footer-about { max-width: 24rem; }
.gv-footer-about .gv-brand-name { color: #fff; }
.gv-footer-about .gv-brand-name span { color: #7FA588; }
.gv-footer-about .gv-brand-mark { color: #6FB07F; }
.gv-footer-about p { margin-top: .8rem; }
.gv-footer-legal {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0 2rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .84rem; color: #7FA588;
}
.gv-footer-legal ul { display: flex; gap: 1rem; flex-wrap: wrap; }
.gv-footer-legal p { margin: 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .gv-ficha { grid-template-columns: 1fr; }
  .gv-ficha__aside { position: static; margin-top: 0; }
}

@media (max-width: 780px) {
  .gv-nav-links { display: none; }
  .gv-burger { display: inline-flex; }
  /* Sin los enlaces del menú, «Buscar» se quedaba flotando en mitad de la barra
     porque el `space-between` repartía el hueco entre los tres. Con el margen
     automático en el botón, la marca se queda a la izquierda y «Buscar» y el
     menú van juntos a la derecha, que es donde llega el pulgar. */
  .gv-nav-inner { justify-content: flex-start; gap: .5rem; }
  .gv-nav-cta { margin-left: auto; }
  .gv-nav-cta-mas { display: none; }
  .gv-filtros { position: static; }
  .gv-filtros__label { min-width: 0; width: 100%; }
  .gv-cards { grid-template-columns: 1fr; }
  .gv-hero { padding-top: 1.5rem; }
  /* La bajada de la marca ocupaba dos líneas y hacía la barra más alta que el
     propio logotipo. El nombre solo basta: la bajada sigue en el pie. */
  .gv-brand-name span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .gv-card:hover, .gv-citycard:hover { transform: none; }
}

/* Impresión: alguien que va a un sitio nuevo todavía imprime o guarda en PDF la
   dirección y el teléfono. Lo que sobra es todo lo demás. */
@media print {
  .gv-nav, .gv-footer, .gv-filtros, .gv-mapa-wrap, .gv-cta, .gv-crumbs { display: none; }
  body { background: #fff; }
  .gv-card { break-inside: avoid; border: 1px solid #999; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portada
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero partido ─────────────────────────────────────────────────────────── */

.gv-hero2 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 2rem;
}
.gv-hero2__texto { max-width: 32rem; }
.gv-hero2 h1 { margin-bottom: .9rem; }
/* La hoja del final del titular es la firma de la marca dentro del propio
   texto. Va como parte del h1 y no como imagen suelta para que no se separe
   del último renglón al cambiar el ancho. */
.gv-hero2 h1 svg { color: var(--hoja); vertical-align: -.05em; margin-left: .2em; }
.gv-hero2__sub { color: var(--tinta-2); font-size: 1.05rem; }

.gv-hero2__foto { position: relative; }
.gv-hero2__marco {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--verde-cla), var(--papel-3));
}
.gv-hero2__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin foto todavía: en lugar de un hueco roto, un campo de hojas dibujado con
   el propio icono del sitio. Se ve intencionado, no incompleto. */
.gv-hero2__hueco {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--hoja); opacity: .5;
}
.gv-hero2__hueco svg { width: 33%; height: auto; }

/* La tarjeta flotante. Es la promesa del sitio, puesta encima de lo apetitoso:
   primero el plato, después por qué fiarte de él. */
.gv-confianza {
  position: absolute; right: -.5rem; bottom: -1.2rem;
  max-width: 14.5rem;
  padding: 1rem 1.1rem;
  background: var(--verde-osc);
  color: #CFE2D3;
  border-radius: 14px;
  box-shadow: var(--sombra-alt);
}
.gv-confianza strong { display: block; color: #fff; font-family: 'Lora', Georgia, serif; font-size: 1.02rem; margin-bottom: .3rem; }
.gv-confianza p { font-size: .86rem; margin: 0; }
.gv-confianza__sello {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; margin-top: .7rem;
  background: var(--hoja); color: #fff; border-radius: 50%;
}

/* ── Buscador con botón ───────────────────────────────────────────────────── */

.gv-buscar2 { display: flex; gap: 0; margin-top: 1.4rem; position: relative; }
.gv-buscar2 .gv-buscador { margin: 0; flex: 1; max-width: none; }
.gv-buscar2 .gv-buscador__campo { border-radius: var(--radio) 0 0 var(--radio); border-right: 0; }
.gv-buscar2__btn {
  flex: none;
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: .7rem 1.4rem;
  font-size: .98rem;
}
.gv-rapidas {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .9rem; font-size: .84rem; color: var(--tinta-3);
}
.gv-rapidas a {
  padding: .18rem .5rem;
  background: #fff; border: 1px solid var(--linea);
  border-radius: 999px;
  font-weight: 600; font-size: .8rem;
  color: var(--verde); text-decoration: none;
}
.gv-rapidas a:hover { border-color: var(--hoja); background: var(--verde-cla); }

/* ── Barra de cifras ──────────────────────────────────────────────────────── */

.gv-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  list-style: none;
}
.gv-cifras li {
  display: flex; align-items: center; gap: .8rem;
  padding: .3rem 1.4rem;
  border-left: 1px solid var(--papel-3);
}
.gv-cifras li:first-child { border-left: 0; }
.gv-cifras svg { color: var(--hoja); flex: none; }
.gv-cifras b {
  display: block;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--verde-osc); line-height: 1.1;
}
.gv-cifras span { font-size: .84rem; color: var(--tinta-2); }

/* ── Sección centrada ─────────────────────────────────────────────────────── */

.gv-centrada { text-align: center; padding: 3rem 0 0; }
.gv-centrada h2 { margin-bottom: .3rem; }
.gv-centrada > p { color: var(--tinta-2); margin: 0 auto; max-width: 40rem; }
/* Un filete corto bajo el titular. Marca la sección sin una línea a todo lo
   ancho, que partiría la página en bloques rígidos. */
.gv-centrada h2::after {
  content: ''; display: block;
  width: 3rem; height: 3px; margin: .7rem auto 0;
  background: var(--hoja); border-radius: 2px;
}

/* ── Tarjetas de distintivo ───────────────────────────────────────────────── */

.gv-dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-top: 1.6rem; text-align: left; }
.gv-dist {
  display: flex; flex-direction: column;
  padding: 1.3rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.gv-dist__icono {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin-bottom: .9rem;
  border-radius: 50%;
}
.gv-dist h3 { font-size: 1.22rem; font-weight: 600; margin-bottom: .5rem; }
.gv-dist p { font-size: .92rem; color: var(--tinta-2); flex: 1; }
.gv-dist__pie {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--papel-3);
  font-size: .9rem;
}
.gv-dist__pie b { font-weight: 700; }
.gv-dist__pie a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }
.gv-dist__pie a:hover { text-decoration: underline; }

.gv-dist--vegano      { background: #F2F8F2; }
.gv-dist--vegano .gv-dist__icono { background: var(--veg-bg); color: var(--veg); }
.gv-dist--vegano h3, .gv-dist--vegano .gv-dist__pie b, .gv-dist--vegano .gv-dist__pie a { color: var(--veg); }

.gv-dist--vegetariano { background: #FDF8F0; }
.gv-dist--vegetariano .gv-dist__icono { background: var(--vgt-bg); color: var(--vgt); }
.gv-dist--vegetariano h3, .gv-dist--vegetariano .gv-dist__pie b, .gv-dist--vegetariano .gv-dist__pie a { color: var(--vgt); }

.gv-dist--opciones    { background: #F3F7FB; }
.gv-dist--opciones .gv-dist__icono { background: var(--opc-bg); color: var(--opc); }
.gv-dist--opciones h3, .gv-dist--opciones .gv-dist__pie b, .gv-dist--opciones .gv-dist__pie a { color: var(--opc); }

/* ── Cabecera de sección con enlace a la derecha ──────────────────────────── */

.gv-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gv-cab h2 { margin: 0; }
.gv-cab a { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.gv-cab a:hover { text-decoration: underline; }

/* ── Ciudades con foto ────────────────────────────────────────────────────── */

/* Seis en fila en escritorio, como en el diseño. Con `auto-fill` caían cinco y
   una suelta debajo, que se lee como un error de maquetación. */
.gv-ciudades-foto { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
@media (max-width: 1000px) { .gv-ciudades-foto { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .gv-ciudades-foto { grid-template-columns: repeat(2, 1fr); } }
.gv-cfoto {
  display: block;
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.gv-cfoto:hover { border-color: var(--hoja); box-shadow: var(--sombra); transform: translateY(-2px); }
.gv-cfoto__img { display: block; aspect-ratio: 16 / 10; background: var(--papel-3); position: relative; overflow: hidden; }
.gv-cfoto__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto: la inicial de la ciudad sobre un degradado del verde de la marca.
   Es un marcador de posición que se sostiene solo, no un rectángulo gris. */
.gv-cfoto__inicial {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--verde), var(--hoja));
  color: rgba(255,255,255,.9);
  font-family: 'Lora', Georgia, serif; font-size: 2.6rem; font-weight: 700;
}
.gv-cfoto__cuerpo { display: block; padding: .7rem .85rem .85rem; }
.gv-cfoto__nombre { display: block; font-weight: 700; letter-spacing: -.018em; color: var(--verde-osc); }
.gv-cfoto__n { font-size: .84rem; color: var(--tinta-3); }

/* ── Dos columnas: método y mejor valorados ───────────────────────────────── */

.gv-doscol { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem; align-items: start; padding-top: 3rem; }
/* Sin esto, la columna del carrusel no puede encogerse por debajo del ancho de
   sus seis tarjetas —el mínimo de un elemento de grid es su contenido— y se
   come la columna de al lado, que quedaba en un hilo. Es el motivo por el que
   un `overflow-x: auto` a veces no sirve de nada dentro de un grid. */
.gv-doscol > * { min-width: 0; }

.gv-pasos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-top: 1rem; }
.gv-paso {
  padding: 1rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
}
.gv-paso__n {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; margin-bottom: .7rem;
  background: var(--verde); color: #fff;
  border-radius: 50%; font-size: .78rem; font-weight: 800;
}
.gv-paso svg { color: var(--hoja); margin-bottom: .5rem; }
.gv-paso h3 { font-size: .96rem; }
.gv-paso p { font-size: .86rem; color: var(--tinta-2); margin: 0; }

.gv-panel-lat { padding: 1.2rem; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 14px; }
.gv-panel-lat > p { font-size: .9rem; color: var(--tinta-2); }

.gv-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.gv-carrusel > * { scroll-snap-align: start; }
.gv-top {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  overflow: hidden; text-decoration: none;
}
.gv-top__cuerpo { flex: 1; }
.gv-top:hover { border-color: var(--hoja); }
/* Sin foto propia del negocio —y no vamos a usar las de Google, que son de sus
   autores— la cabecera de la tarjeta es un bloque del color de su distintivo
   con el icono de su categoría. Dice más que una foto de comida genérica que no
   es de ese sitio. */
.gv-top__cab { position: relative; overflow: hidden; display: grid; aspect-ratio: 16 / 10; place-items: center; }
.gv-top__cab svg { color: rgba(255,255,255,.85); width: 30%; height: auto; }
/* La foto tapa el bloque de color; si no llega, el color sigue ahí debajo. */
.gv-top__cab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-top__cab--vegano      { background: linear-gradient(150deg, var(--veg), var(--hoja)); }
.gv-top__cab--vegetariano { background: linear-gradient(150deg, var(--vgt), #C08A3A); }
.gv-top__cab--opciones    { background: linear-gradient(150deg, var(--opc), #6E8FAE); }
.gv-top__cuerpo { display: block; padding: .6rem .7rem .7rem; }
.gv-top__n { display: block; font-weight: 700; font-size: .88rem; letter-spacing: -.015em; color: var(--verde-osc); }
.gv-top__meta { font-size: .78rem; color: var(--tinta-3); }
.gv-top__nota { display: inline-flex; align-items: center; gap: .2rem; font-size: .82rem; font-weight: 700; color: var(--verde-osc); margin-top: .2rem; }
.gv-top__nota svg { color: #D99A0B; }

/* ── Teaser del mapa ──────────────────────────────────────────────────────── */

.gv-mapa-teaser {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.4rem; align-items: center;
  margin-top: 3rem; padding: 1.1rem;
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: 16px;
}
.gv-mapa-teaser .gv-mapa { height: 260px; }
.gv-mapa-teaser h2 { font-size: 1.35rem; }
.gv-mapa-teaser p { font-size: .93rem; color: var(--tinta-2); }

/* ── Banda final ──────────────────────────────────────────────────────────── */

.gv-banda {
  margin-top: 3rem;
  background: var(--verde-osc);
  color: #CFE2D3;
  /* Hojas dibujadas con degradados radiales: da textura a la banda sin una
     imagen que descargar ni un peso que justificar. */
  background-image:
    radial-gradient(ellipse 120px 40px at 5% 20%, rgba(111,176,127,.16), transparent 70%),
    radial-gradient(ellipse 90px 30px at 12% 75%, rgba(111,176,127,.12), transparent 70%),
    radial-gradient(ellipse 140px 45px at 95% 30%, rgba(111,176,127,.14), transparent 70%),
    radial-gradient(ellipse 100px 35px at 88% 82%, rgba(111,176,127,.1), transparent 70%);
}
.gv-banda__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; padding: 2.2rem 0; }
.gv-banda h2 { color: #fff; }
.gv-banda p { margin: 0; font-size: .95rem; }
.gv-banda .gv-buscador__campo { background: #fff; border-color: transparent; }
.gv-banda .gv-rapidas { color: #9BBBA3; }
.gv-banda__prov { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; color: #CFE2D3; font-weight: 600; font-size: .9rem; text-decoration: none; }
.gv-banda__prov:hover { color: #fff; }

/* ── Responsive de la portada ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .gv-hero2 { grid-template-columns: 1fr; gap: 3rem; }
  .gv-confianza { right: 0; bottom: -1.8rem; }
  .gv-doscol { grid-template-columns: 1fr; }
  .gv-mapa-teaser { grid-template-columns: 1fr; }
  .gv-banda__inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .gv-cifras li { border-left: 0; border-top: 1px solid var(--papel-3); padding-top: .8rem; }
  .gv-cifras li:first-child { border-top: 0; padding-top: .3rem; }
}

@media (max-width: 560px) {
  .gv-buscar2 { flex-direction: column; gap: .5rem; }
  .gv-buscar2 .gv-buscador__campo { border-radius: var(--radio); border-right: 1.5px solid var(--linea-2); }
  .gv-buscar2__btn { border-radius: var(--radio); justify-content: center; }
  .gv-confianza { position: static; max-width: none; margin-top: 1rem; }
}

/* Icono del distintivo en la página que los explica. Va con el color del
   nivel, igual que el filete de la izquierda: la misma señal, tres veces. */
.gv-nivel-detalle h2 { display: flex; align-items: center; gap: .7rem; }
.gv-nivel-detalle__icono {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; flex: none;
  border-radius: 50%;
}
.gv-nivel-detalle--vegano .gv-nivel-detalle__icono      { background: var(--veg-bg); color: var(--veg); }
.gv-nivel-detalle--vegetariano .gv-nivel-detalle__icono { background: var(--vgt-bg); color: var(--vgt); }
.gv-nivel-detalle--opciones .gv-nivel-detalle__icono    { background: var(--opc-bg); color: var(--opc); }

/* ═══════════════════════════════════════════════════════════════════════════
   Página de ciudad y de categoría
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero con foto y cifras ───────────────────────────────────────────────── */

.gv-hero3 {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 2.2rem;
  align-items: center;
  padding: 1.8rem 0 1.6rem;
}
.gv-hero3__texto { max-width: 34rem; }
.gv-hero3__sub { color: var(--tinta-2); margin-top: .7rem; }

.gv-hero3__foto {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--papel-3);
  display: grid;
  place-items: center;
}
.gv-hero3__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Las cifras. Cada una en su caja, con el icono en un cuadrado redondeado:
   se leen de un vistazo y no como una frase larga que hay que descifrar. */
.gv-cifras2 { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.3rem 0 0; padding: 0; }
.gv-cifras2 li {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  flex: 1 1 0; min-width: 0;
}
.gv-cifra2__i {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  background: var(--papel-2); border-radius: 8px;
  color: var(--hoja);
}
.gv-cifras2 span span, .gv-cifras2 li > span:last-child { display: flex; flex-direction: column; }
.gv-cifras2 b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; color: var(--verde-osc); line-height: 1.1; }
.gv-cifras2 li > span:last-child { font-size: .72rem; color: var(--tinta-3); line-height: 1.25; }

/* ── Panel de filtros ─────────────────────────────────────────────────────── */

/* Los tres grupos van uno debajo de otro y a todo el ancho. En dos columnas,
   los distintivos —que son la decisión que de verdad importa— compartían línea
   con el resto y quedaban del tamaño de un filtro cualquiera. */
.gv-filtros2 {
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 14px;
  margin-bottom: 1.4rem;
}
.gv-fcuerpo { display: flex; flex-direction: column; gap: 1.35rem; }

/* El cajón y sus adornos no existen en escritorio: ahí el panel ya está
   abierto y a la vista, y un botón para abrir lo que se ve sobra. */
.gv-fabrir, .gv-ffab, .gv-ffondo, .gv-fcab, .gv-fpie, .gv-factivos { display: none; }
.gv-flabel {
  display: block; margin-bottom: .6rem;
  font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-3);
}

/* Distintivos: píldoras con el icono del nivel. Al marcarse toman su propio
   color, que es la misma señal que la franja de las tarjetas y las chinchetas
   del mapa: el color dice el nivel en los tres sitios. Es el fondo claro del
   nivel, no el sólido: relleno, la píldora marcada pesaba más que las tarjetas
   que hay debajo, que son el contenido. */
.gv-pills { display: flex; gap: .6rem; flex-wrap: wrap; }
.gv-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.2rem;
  background: #fff; border: 1px solid var(--linea-2); border-radius: 999px;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--tinta-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.gv-pill__n { font-weight: 500; color: var(--tinta-3); }
.gv-pill__n::before { content: "("; }
.gv-pill__n::after  { content: ")"; }
.gv-pill:hover { border-color: var(--hoja); color: var(--verde-osc); }
.gv-pill[aria-pressed="true"] .gv-pill__n { color: currentColor; opacity: .7; }
.gv-pill--vegano[aria-pressed="true"]      { background: var(--veg-bg); border-color: var(--veg); color: var(--veg); }
.gv-pill--vegetariano[aria-pressed="true"] { background: var(--vgt-bg); border-color: var(--vgt); color: var(--vgt); }
.gv-pill--opciones[aria-pressed="true"]    { background: var(--opc-bg); border-color: var(--opc); color: var(--opc); }
.gv-pill[aria-pressed="true"] svg { color: currentColor; }

/* Tipos: cajas con el icono a la izquierda del nombre y el recuento debajo. */
.gv-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.gv-tipo {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .8rem .9rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.gv-tipo__t { display: flex; align-items: center; gap: .55rem; }
.gv-tipo__t svg { flex: none; }
.gv-tipo span { font-size: .84rem; font-weight: 600; color: var(--verde-osc); line-height: 1.25; }
.gv-tipo b { font-size: .84rem; font-weight: 600; color: var(--tinta-3); }
.gv-tipo svg { color: var(--hoja); }
.gv-tipo:hover { border-color: var(--hoja); }
.gv-tipo[aria-pressed="true"] { background: var(--verde-cla); border-color: var(--verde); }
.gv-tipo[aria-pressed="true"] b { color: var(--verde); }

/* Más filtros: píldoras pequeñas con el icono al lado de la etiqueta.
   `gv-fchip` y no `gv-chip`: ese nombre ya lo tienen las etiquetas de la ficha,
   que son otra cosa —listas, no botones— y con el mismo nombre se pisaban. */
.gv-fchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.gv-fchip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .95rem;
  background: #fff; border: 1px solid var(--linea-2); border-radius: 999px;
  font: inherit; font-size: .82rem; color: var(--tinta-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.gv-fchip svg { flex: none; color: var(--hoja); }
.gv-fchip:hover { border-color: var(--hoja); color: var(--verde-osc); }
.gv-fchip[aria-pressed="true"] {
  background: var(--verde-cla); border-color: var(--verde);
  color: var(--verde-osc); font-weight: 600;
}
.gv-fchip[aria-pressed="true"] svg { color: var(--verde); }

/* ── El cajón de filtros (solo móvil) ──────────────────────────────────────
   Ocho filtros y seis tipos ocupan media pantalla de teléfono antes de que se
   vea el primer sitio. Colapsados detrás de un botón, la página abre por donde
   importa —los negocios— y el que quiera cribar lo hace sobre la lista ya
   cargada: el filtrado es en el navegador, así que el cajón no espera a nada.

   El botón flotante repite el de arriba porque el momento de filtrar no es al
   llegar, es a mitad de lista cuando lo que se ve no acaba de encajar. */

@media (max-width: 780px) {

  .gv-fabrir {
    display: inline-flex; align-items: center; gap: .5rem;
    width: 100%; justify-content: center;
    padding: .7rem 1rem; margin-bottom: 1.1rem;
    background: #fff; border: 1px solid var(--linea-2); border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 600; color: var(--verde-osc);
    cursor: pointer;
  }
  .gv-fabrir svg { color: var(--hoja); }

  .gv-ffab {
    display: inline-flex; align-items: center; gap: .5rem;
    position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
    padding: .8rem 1.25rem;
    background: var(--verde); border: 0; border-radius: 999px;
    font: inherit; font-size: .92rem; font-weight: 600; color: #fff;
    box-shadow: 0 6px 20px rgba(20,32,26,.28);
    cursor: pointer;
  }
  .gv-ffab svg { color: #fff; }
  body[data-menu] .gv-ffab { display: none; }

  /* El número de filtros puestos, en el botón: es lo único que dice, con el
     cajón cerrado, que la lista de abajo está recortada. */
  .gv-fabrir b, .gv-ffab b {
    display: grid; place-items: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
    border-radius: 999px; font-size: .75rem; font-weight: 700;
  }
  .gv-fabrir b { background: var(--verde); color: #fff; }
  .gv-ffab b   { background: #fff; color: var(--verde-osc); }

  .gv-ffondo {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(20,32,26,.45);
    opacity: 0; transition: opacity .26s ease;
  }
  .gv-ffondo[data-abierto] { opacity: 1; }

  .gv-filtros2 {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 61;
    display: flex; flex-direction: column;
    width: min(92vw, 25rem);
    margin: 0; padding: 0;
    border: 0; border-radius: 0;
    box-shadow: -8px 0 30px rgba(20,32,26,.2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
  }
  .gv-filtros2[data-abierto] { transform: none; visibility: visible; }

  .gv-fcab {
    display: flex; align-items: center; gap: .8rem;
    flex: none; padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--linea);
  }
  .gv-fcab__tit {
    display: flex; align-items: center; gap: .6rem; margin-right: auto;
    font-family: 'Lora', Georgia, serif; font-size: 1.3rem; font-weight: 700;
    color: var(--verde-osc);
  }
  .gv-fcab__tit svg { color: var(--verde-osc); }
  .gv-fcab__limpiar {
    background: none; border: 0; padding: .2rem; font: inherit; font-size: .95rem;
    color: var(--verde); cursor: pointer; text-decoration: none;
  }
  .gv-fcab__x {
    display: grid; place-items: center;
    background: none; border: 0; padding: .2rem;
    color: var(--verde-osc); cursor: pointer;
  }

  .gv-fcuerpo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem; padding: 1.1rem 1.1rem 1.4rem;
  }

  /* Lo puesto, arriba del todo y quitable de uno en uno. Sin esto hay que
     recordar qué se marcó y bajar a buscarlo para deshacerlo. */
  .gv-factivos { display: block; }
  .gv-factivos__t {
    display: block; margin-bottom: .6rem;
    font-size: .92rem; color: var(--tinta-2);
  }
  .gv-factivos__lista { display: flex; flex-wrap: wrap; gap: .45rem; }
  .gv-factivo {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .8rem;
    background: #fff; border: 1px solid var(--verde); border-radius: 999px;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--verde-osc);
    cursor: pointer;
  }
  .gv-factivo svg { flex: none; color: var(--verde); }
  .gv-factivo .gv-factivo__x { color: var(--tinta-3); }

  .gv-pills { flex-direction: column; }
  .gv-pill { justify-content: flex-start; width: 100%; }
  .gv-pill .gv-pill__n {
    display: grid; place-items: center; margin-left: auto;
    min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
    background: var(--papel-2); border-radius: 999px;
    font-size: .8rem; font-weight: 700; color: var(--tinta-2);
  }
  .gv-pill__n::before, .gv-pill__n::after { content: none; }
  .gv-pill--vegano[aria-pressed="true"]      .gv-pill__n { background: var(--veg); color: #fff; opacity: 1; }
  .gv-pill--vegetariano[aria-pressed="true"] .gv-pill__n { background: var(--vgt); color: #fff; opacity: 1; }
  .gv-pill--opciones[aria-pressed="true"]    .gv-pill__n { background: var(--opc); color: #fff; opacity: 1; }

  .gv-tipos { grid-template-columns: 1fr 1fr; }
  .gv-tipo { flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; }
  .gv-tipo b { flex: none; }

  .gv-fchips { display: grid; grid-template-columns: 1fr 1fr; }
  .gv-fchip { justify-content: flex-start; }

  .gv-fpie {
    display: flex; flex-direction: column; gap: .6rem;
    flex: none; padding: .9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--linea);
  }
  .gv-fver, .gv-fmapa {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .95rem 1rem; border-radius: 12px;
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  }
  .gv-fver  { background: var(--verde); border: 1px solid var(--verde); color: #fff; }
  .gv-fmapa { background: #fff; border: 1px solid var(--linea-2); color: var(--verde-osc); font-weight: 600; }

  /* Con el cajón abierto, el fondo no se mueve: si no, se cierra y la lista
     ha viajado sola a otra parte. */
  body[data-cajon] { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-filtros2, .gv-ffondo { transition: none; }
}

/* ── Resultados con mapa al lado ──────────────────────────────────────────── */

.gv-resultados { display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.2rem; align-items: start; }
.gv-resultados > * { min-width: 0; }

.gv-lista__cab {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0 .2rem .7rem;
}
.gv-lista__n { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.gv-lista__n b { color: var(--verde-osc); font-weight: 800; }
.gv-orden { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--tinta-3); }
.gv-orden select {
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--verde-osc);
  border: 1px solid var(--linea); border-radius: 8px; padding: .25rem 1.6rem .25rem .5rem;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310301D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .4rem center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}

.gv-cards2 { display: grid; gap: .6rem; }
.gv-cards2--destacados { margin-bottom: .6rem; }

/* La tarjeta horizontal. La miniatura lleva el color del distintivo, así que
   bajando por la lista se lee su composición vegana como un ritmo de color
   antes de leer una sola palabra. Es el elemento firma del sitio. */
.gv-card2 {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .9rem;
  padding: .75rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  transition: border-color .12s, box-shadow .12s;
}
.gv-card2:hover { border-color: var(--linea-2); box-shadow: var(--sombra); }
.gv-card2--destacada { background: #FFFDF7; border-color: var(--vgt-bg); }

.gv-card2__img {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; border-radius: 9px;
  color: rgba(255,255,255,.9);
}
/* La foto tapa el bloque de color. Si no carga —o si la URL de Google ha
   caducado— el `onerror` la retira y vuelve a verse el color de su distintivo,
   que es un respaldo que se sostiene solo. */
.gv-card2__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.gv-card2__img--vegano      { background: linear-gradient(150deg, var(--veg), var(--hoja)); }
.gv-card2__img--vegetariano { background: linear-gradient(150deg, var(--vgt), #C08A3A); }
.gv-card2__img--opciones    { background: linear-gradient(150deg, var(--opc), #6E8FAE); }

.gv-card2__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.gv-card2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.gv-card2__name { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.gv-card2__name a { color: var(--verde-osc); text-decoration: none; }
.gv-card2__name a:hover { color: var(--hoja); text-decoration: underline; }

.gv-sello {
  display: inline-grid; place-items: center;
  width: 1rem; height: 1rem; flex: none;
  background: var(--veg); color: #fff; border-radius: 50%;
  cursor: help;
}

.gv-fav {
  flex: none; padding: .2rem; border: 0; background: none;
  color: var(--tinta-3); cursor: pointer; border-radius: 6px;
}
.gv-fav:hover { color: var(--verde); background: var(--papel-2); }
.gv-fav[aria-pressed="true"] { color: var(--tomate); }
.gv-fav[aria-pressed="true"] svg { fill: currentColor; }

.gv-card2__meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0; font-size: .82rem; color: var(--tinta-3); }
.gv-card2__nota { display: inline-flex; align-items: center; gap: .2rem; }
.gv-card2__nota svg { color: #D99A0B; }
.gv-card2__nota b { color: var(--verde-osc); font-weight: 700; }
.gv-sep { color: var(--linea-2); }

.gv-card2__desc { margin: 0; font-size: .82rem; color: var(--tinta-2); }
.gv-card2__desc svg { color: var(--tinta-3); vertical-align: -2px; margin-right: .15rem; }
.gv-card2__extras { color: var(--tinta-3); }

.gv-card2__pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .15rem; }
.gv-card2__hor { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .8rem; flex-wrap: wrap; }
.gv-card2__hortxt { color: var(--tinta-3); }
.gv-card2__patro { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 0; }

.gv-vermas {
  width: 100%; margin-top: .7rem; padding: .7rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--verde-osc);
  cursor: pointer;
}
.gv-vermas:hover { border-color: var(--hoja); background: var(--papel-2); }

/* ── Columna del mapa ─────────────────────────────────────────────────────── */

.gv-mapa-col { position: sticky; top: 1rem; }
.gv-mapa-col .gv-mapa { border-radius: 12px; }
.gv-leyenda {
  display: flex; gap: 1rem; flex-wrap: wrap;
  list-style: none; margin: .6rem 0 0; padding: .6rem .8rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  font-size: .8rem; color: var(--tinta-2);
}
.gv-leyenda li { display: inline-flex; align-items: center; gap: .35rem; }
.gv-leyenda__punto { width: 10px; height: 10px; border-radius: 50%; }
.gv-leyenda__punto--vegano      { background: var(--veg); }
.gv-leyenda__punto--vegetariano { background: var(--vgt); }
.gv-leyenda__punto--opciones    { background: var(--opc); }

/* ── Cómo está hecha esta lista ───────────────────────────────────────────── */

.gv-metodo {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.6rem; align-items: center;
  margin: 2.5rem 0 0;
  padding: 1.6rem;
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: 16px;
}
.gv-metodo__sello {
  display: grid; place-items: center;
  width: 9rem; height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 55%, var(--verde-cla) 56%);
  border: 1px dashed var(--linea-2);
  color: var(--veg);
}
.gv-metodo h2 { margin-bottom: .4rem; }
.gv-metodo__cuerpo > p { color: var(--tinta-2); max-width: 46rem; }
.gv-metodo__pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; list-style: none; margin: 1.2rem 0; padding: 0;
  counter-reset: mpaso;
}
.gv-metodo__pasos li {
  display: grid; gap: .2rem;
  padding-left: .9rem;
  border-left: 2px solid var(--linea-2);
}
.gv-metodo__pasos svg { color: var(--hoja); }
.gv-metodo__pasos strong { color: var(--verde-osc); font-size: .95rem; }
.gv-metodo__pasos span { font-size: .82rem; color: var(--tinta-2); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* El pie va perdiendo columnas por pasos, no de cinco a una: en tableta la
   marca ocupa la fila entera y los cuatro grupos van en dos parejas. */
@media (max-width: 1000px) {
  .gv-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gv-footer-about { grid-column: 1 / -1; max-width: 34rem; }
}

@media (max-width: 720px) {
  .gv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* En una sola columna solo por debajo de 360: a 390 px, dos columnas dejan el
   pie en la mitad de alto y los enlaces siguen cabiendo aunque alguno pase a
   dos líneas. */
@media (max-width: 360px) {
  .gv-footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (max-width: 1000px) {
  .gv-resultados { grid-template-columns: 1fr; }
  .gv-mapa-col { position: static; order: -1; }
  .gv-mapa-col .gv-mapa { height: 320px !important; }
}

/* Solo tableta: por debajo de 780 el panel es el cajón y manda su bloque. */
@media (min-width: 781px) and (max-width: 1000px) {
  .gv-tipos { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media (max-width: 780px) {
  .gv-hero3 { grid-template-columns: 1fr; gap: 1.2rem; }
  .gv-hero3__foto { order: -1; }
  .gv-metodo { grid-template-columns: 1fr; }
  .gv-metodo__sello { margin: 0 auto; }
  .gv-pill { font-size: .92rem; padding: .6rem 1rem; }
  .gv-card2 { grid-template-columns: 4.5rem 1fr; gap: .7rem; }
  .gv-cifras2 li { flex: 1 1 8rem; }
}

/* La foto de la ficha. El pie dice de dónde sale y de quién es: es la misma
   norma que gobierna la nota y el distintivo —enseñar el dato y enseñar su
   procedencia— aplicada a la imagen. */
.gv-ficha__foto { margin: 0 0 1.4rem; }
.gv-ficha__foto img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; display: block;
}
.gv-ficha__foto figcaption { margin-top: .45rem; font-size: .78rem; color: var(--tinta-3); }

/* ── Globos del mapa ──────────────────────────────────────────────────────────
   El mismo contenido para el globo de hover y el de clic; solo cambia que el
   segundo lleva el enlace. Que se vean idénticos es deliberado: el visitante
   aprende una sola cosa y el clic no le sorprende con otra. */

.gv-globo { display: grid; gap: .2rem; min-width: 11rem; }
.gv-globo strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--verde-osc); line-height: 1.25;
}
.gv-globo__meta { font-size: .78rem; color: var(--tinta-3); }
.gv-globo__meta b { color: #B07C08; font-weight: 700; }
.gv-globo__badge {
  justify-self: start;
  margin-top: .1rem; padding: .1rem .45rem;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
}
.gv-globo__badge--vegano      { background: var(--veg-bg); color: var(--veg); }
.gv-globo__badge--vegetariano { background: var(--vgt-bg); color: var(--vgt); }
.gv-globo__badge--opciones    { background: var(--opc-bg); color: var(--opc); }
/* El selector lleva `.leaflet-container` delante para ganarle a la regla
   `.leaflet-container a { color: #0078A8 }` que trae Leaflet, que si no pinta
   el enlace del azul de los años noventa en medio de la paleta del sitio. */
.leaflet-container a.gv-globo__ir {
  margin-top: .35rem; font-size: .82rem; font-weight: 700;
  color: var(--tomate); text-decoration: none;
}
.leaflet-container a.gv-globo__ir:hover { color: var(--tomate-osc); text-decoration: underline; }

/* El globo de hover, sin el pico ni el marco de Leaflet: una tarjeta limpia. */
.leaflet-tooltip.gv-tooltip {
  padding: .55rem .7rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: var(--sombra-alt);
  font-family: inherit;
  white-space: normal;
}
.leaflet-tooltip.gv-tooltip::before { border-top-color: var(--linea); }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: .7rem .85rem; font-family: inherit; }

/* Chincheta resaltada al señalar su tarjeta en la lista. Crece y se pone
   delante; la rotación se conserva porque el pin ya venía girado 45°. */
.gv-marcador--activo { z-index: 1000 !important; }
.gv-marcador--activo .gv-pin {
  transform: rotate(45deg) scale(1.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 3px 10px rgba(20,32,26,.4);
}
.gv-pin { transition: transform .12s, box-shadow .12s; }

/* Y la tarjeta resaltada al señalar su chincheta en el mapa. */
.gv-card2--activa {
  border-color: var(--hoja);
  box-shadow: 0 0 0 2px var(--verde-cla), var(--sombra);
}

@media (prefers-reduced-motion: reduce) {
  .gv-pin { transition: none; }
}

/* ── Bloques nuevos de la ficha ───────────────────────────────────────────── */

/* Cómo se compara con los suyos. Dos filas, no un panel: son dos frases que se
   leen de un vistazo y que no compiten con el distintivo, que es lo primero. */
.gv-compara { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.gv-compara li {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  background: var(--papel-2); border-radius: 10px;
  font-size: .92rem; color: var(--tinta-2);
}
.gv-compara svg { color: var(--hoja); flex: none; }
.gv-compara b { color: var(--verde-osc); font-weight: 700; }

/* Con quién puedes ir. Cada línea es una pregunta con su respuesta debajo: una
   etiqueta suelta —«Accesible»— no dice si el problema es la puerta o el baño. */
.gv-conquien {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem;
}
.gv-conquien li {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem;
  align-items: start;
  padding: .7rem .85rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
}
.gv-conquien svg { grid-row: span 2; margin-top: .15rem; color: var(--hoja); }
.gv-conquien strong { font-size: .92rem; color: var(--verde-osc); }
.gv-conquien span { font-size: .8rem; color: var(--tinta-3); line-height: 1.35; }

.gv-dosfilas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.gv-dosfilas h2 { font-size: 1.1rem; }

/* Si está cerrado o lleno. La distancia va en minutos andando y no en metros
   porque es como se decide de verdad: «siete minutos» se entiende sin traducir. */
.gv-cerca {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: .8rem; align-items: center;
  padding: .6rem .8rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  text-decoration: none;
}
.gv-cerca:hover { border-color: var(--hoja); box-shadow: var(--sombra); }
.gv-cerca__img { display: grid; place-items: center; aspect-ratio: 1/1; border-radius: 8px; color: rgba(255,255,255,.9); }
.gv-cerca__cuerpo { display: grid; gap: .2rem; min-width: 0; }
.gv-cerca__cuerpo strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .93rem; font-weight: 700; letter-spacing: -.015em; color: var(--verde-osc);
}
.gv-cerca__meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-3); }
.gv-cerca__meta svg { color: #D99A0B; vertical-align: -1px; }
.gv-cerca__km { font-size: .82rem; font-weight: 600; color: var(--verde); white-space: nowrap; }

@media (max-width: 520px) {
  .gv-cerca { grid-template-columns: 2.4rem 1fr; }
  .gv-cerca__km { grid-column: 2; }
}