/* foodibba — identidad: azul petróleo sobre blanco, línea fina, mucho aire. */

/* Tipografía de marca: Glacial Indifference (Regular, Bold e Italic).
   No está en Google Fonts: va alojada en assets/fuentes/ (SIL OFL).
   Jost se mantiene detrás en la pila a propósito: Glacial Indifference no
   incluye los signos «¿» ni «¡», y sin ese respaldo saldrían con la
   tipografía por defecto del sistema. */
@font-face{
  font-family:"Glacial Indifference";
  src:url("fuentes/GlacialIndifference-Regular.woff2") format("woff2"),
      url("fuentes/GlacialIndifference-Regular.otf")   format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Glacial Indifference";
  src:url("fuentes/GlacialIndifference-Bold.woff2") format("woff2"),
      url("fuentes/GlacialIndifference-Bold.otf")   format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Glacial Indifference";
  src:url("fuentes/GlacialIndifference-Italic.woff2") format("woff2"),
      url("fuentes/GlacialIndifference-Italic.otf")   format("opentype");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  /* --- color: el azul de marca es exactamente #203D58 --- */
  --azul:#203D58;
  --azul-hondo:#16293C;
  --azul-medio:#47698F;      /* viajes */
  --vino:#6E4B5C;            /* bodegas */
  --verde:#3D7A70;           /* alojamientos */
  --ocre:#7C6A4A;            /* planes */
  --rosa:#A05C72;            /* bodas */
  --oro:#A87C2A;             /* estrella michelin */
  --morado:#5F5B77;          /* listas */
  --azul-tinte:#EAEFF5;      /* fondos suaves */
  --azul-linea:#D3DDE8;

  --blanco:#FFFFFF;
  --hueso:#F7F9FB;
  --borde:#E2E9F0;
  --texto:#203D58;
  --texto-suave:#6E8098;

  --radio:12px;
  --ancho:1140px;
  /* Toda la web va en Glacial Indifference; Quicksand solo respalda el logo. */
  --marca:"Quicksand",-apple-system,"Segoe UI",sans-serif;
  --titulo:"Glacial Indifference","Jost",-apple-system,"Segoe UI",Helvetica,sans-serif;
  --texto-fuente:"Glacial Indifference","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;background:var(--blanco);color:var(--texto);
  font-family:var(--texto-fuente);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 26px}

/* ---------- cabecera ---------- */
.cabecera{
  border-top:3px solid var(--azul);border-bottom:1px solid var(--borde);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:500;
}
.cabecera .contenedor{display:flex;align-items:center;gap:30px;height:84px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--azul)}
.marca img{height:52px;width:auto}
.marca-mark{width:36px;height:auto;flex:0 0 auto}
.marca-texto{
  font-family:var(--marca);font-size:23px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.marca-texto i{font-style:normal;text-transform:lowercase}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-family:var(--titulo);letter-spacing:.03em}
.nav a{text-decoration:none;color:var(--texto-suave);padding:5px 0;border-bottom:1.5px solid transparent;transition:.15s}
.nav a:hover{color:var(--azul)}
.nav a.activo{color:var(--azul);border-bottom-color:var(--azul)}

/* ---------- portada ---------- */
.hero{background:var(--azul);color:#fff;padding:76px 0 64px;text-align:center}
.hero .hero-marca{display:block;margin:0 auto 28px;color:#fff}
.hero .hero-marca svg{width:104px;height:auto;margin:0 auto;stroke-width:2.6}
.hero .hero-marca img{width:120px;height:auto;margin:0 auto}
/* El logo es de un solo color: sobre azul lo pasamos a blanco con un filtro,
   así no hace falta mantener dos archivos. Requiere fondo transparente. */
.hero .hero-marca img,
.pie .marca img{filter:brightness(0) invert(1)}
.hero h1{
  /* text-wrap:balance reparte las líneas para que no quede una suelta y corta;
     sin él, la frase se troceaba en cuatro líneas desiguales. */
  max-width:24ch;text-wrap:balance;
  font-family:var(--titulo);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,52px);line-height:1.18;margin:0 auto 18px;
  letter-spacing:-.01em;color:#fff;
}
.hero p{margin:0 auto;max-width:510px;text-wrap:balance;color:rgba(255,255,255,.8);font-size:17px}
.hero .firma{
  margin-top:20px;font-family:var(--titulo);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}

/* ---------- filtros ---------- */
/* Dos filas: arriba las categorías, abajo los desplegables y el buscador.
   Con siete categorías ya no caben en la misma línea y los desplegables
   quedaban descolgados contra el borde derecho. */
.filtros{
  padding:30px 0 10px;display:flex;flex-direction:column;gap:14px;
  margin-top:8px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--azul-linea);background:var(--blanco);color:var(--texto-suave);
  padding:8px 17px;border-radius:999px;font-size:14px;
  font-family:var(--titulo);letter-spacing:.02em;
  cursor:pointer;transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.chip svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.chip:hover{border-color:var(--azul-medio);color:var(--azul)}
.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.chip[aria-pressed="true"][data-tipo="viaje"]{background:var(--azul-medio);border-color:var(--azul-medio)}
.chip[aria-pressed="true"][data-tipo="bodega"]{background:var(--vino);border-color:var(--vino)}
.chip[aria-pressed="true"][data-tipo="alojamiento"]{background:var(--verde);border-color:var(--verde)}
.chip[aria-pressed="true"][data-tipo="plan"]{background:var(--ocre);border-color:var(--ocre)}
.chip[aria-pressed="true"][data-tipo="boda"]{background:var(--rosa);border-color:var(--rosa)}
.chip[aria-pressed="true"][data-tipo="michelin"]{background:var(--oro);border-color:var(--oro)}
.chip[aria-pressed="true"][data-tipo="listas"]{background:var(--morado);border-color:var(--morado)}
.selector,.buscador{
  border:1.5px solid var(--azul-linea);background:var(--blanco);border-radius:999px;
  padding:8px 16px;font-size:14px;font-family:var(--titulo);color:var(--texto);
}
.selector{min-width:150px;width:100%}
.buscador{min-width:190px}
.selector:focus,.buscador:focus{outline:2px solid var(--azul-medio);outline-offset:1px}
.filtros .derecha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* El que crece o se encoge en el flex de ".derecha" es este contenedor, no
   el <input> de dentro — el campo en sí solo tiene que rellenarlo (100%). */
.filtros .campo-filtro{position:relative}

/* Sugerencias al escribir (localización/país en el editor, y los filtros de
   país/comunidad/localización en la portada): una lista flotante bajo el
   campo, con scroll propio que no se escapa hacia la página. */
.autocompletar-lista{
  position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;
  background:#fff;border:1.5px solid var(--azul-linea);border-radius:9px;
  max-height:340px;overflow-y:auto;box-shadow:0 6px 20px rgba(23,48,57,.14);
  overscroll-behavior:contain;scrollbar-width:thin;text-align:left;
}
.autocompletar-lista::-webkit-scrollbar{width:9px}
.autocompletar-lista::-webkit-scrollbar-thumb{background:var(--azul-linea);border-radius:99px}
.autocompletar-lista::-webkit-scrollbar-thumb:hover{background:var(--azul-medio)}
.autocompletar-opcion{padding:8px 13px;font-size:14.5px;cursor:pointer;font-family:var(--texto-fuente)}
.autocompletar-opcion.activa,
.autocompletar-opcion:hover{background:var(--azul-tinte)}
.recuento{
  color:var(--texto-suave);font-size:13px;padding:16px 0 0;
  font-family:var(--titulo);letter-spacing:.08em;text-transform:uppercase;
}
.limpiar{
  background:none;border:none;color:var(--azul-medio);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- rejilla ---------- */
.rejilla{
  display:grid;gap:34px 26px;padding:26px 0 84px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.tarjeta{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.tarjeta .foto{
  /* La mayoría de tus fotos son verticales (3:4 o 4:5), no cuadradas.
     Forzarlas a 1:1 recortaba justo la zona de arriba y abajo, que es donde
     suelen ir el icono y el texto en las diapositivas de portada. */
  aspect-ratio:4/5;background:var(--azul-tinte);position:relative;
  display:grid;overflow:hidden;border-radius:var(--radio);
  border:1px solid var(--borde);
}
/* position:absolute + inset:0 en vez de width/height:100% — dentro de una
   rejilla con filas automáticas, un porcentaje de alto no se resuelve bien
   aunque la caja tenga una altura visualmente definida por aspect-ratio (es
   una rareza documentada de CSS Grid). Con posición absoluta la imagen se
   ajusta directamente a la caja del padre, sin pasar por ese cálculo. */
.tarjeta .foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .5s ease;
}
.tarjeta:hover .foto img{transform:scale(1.035)}
.tarjeta .foto .dibujo{
  justify-self:center;align-self:center;
  width:78px;height:78px;stroke:var(--azul);fill:none;stroke-width:1.1;opacity:.4;
}
.etiquetas-tipo{
  position:absolute;top:13px;left:13px;display:flex;gap:6px;flex-wrap:wrap;
  max-width:calc(100% - 26px);
}
.etiqueta-tipo{
  background:var(--azul);color:#fff;
  border-radius:999px;padding:6px 13px;font-family:var(--titulo);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.etiqueta-tipo.viaje{background:var(--azul-medio)}
.etiqueta-tipo.bodega{background:var(--vino)}
.etiqueta-tipo.alojamiento{background:var(--verde)}
.etiqueta-tipo.plan{background:var(--ocre)}
.etiqueta-tipo.boda{background:var(--rosa)}
.etiqueta-tipo.michelin{background:var(--oro)}
.etiqueta-tipo.listas{background:var(--morado)}
.tarjeta .cuerpo{padding:16px 2px 0;display:flex;flex-direction:column;gap:7px}
.tarjeta h2{
  font-family:var(--titulo);font-weight:400;font-size:22px;margin:0;
  line-height:1.25;color:var(--azul);letter-spacing:-.005em;
}
.meta{
  font-family:var(--titulo);font-size:12.5px;color:var(--texto-suave);
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  letter-spacing:.09em;text-transform:uppercase;
}
.meta .punto{opacity:.45}
.tarjeta p{margin:2px 0 0;font-size:15px;color:var(--texto-suave);line-height:1.6}
.vacio{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--texto-suave)}
.vacio strong{
  display:block;font-family:var(--titulo);font-weight:400;font-size:26px;
  color:var(--azul);margin-bottom:8px;
}

/* ---------- ficha ---------- */
.volver{
  display:inline-block;margin:30px 0 0;font-family:var(--titulo);font-size:13px;
  color:var(--texto-suave);text-decoration:none;letter-spacing:.09em;text-transform:uppercase;
}
.volver:hover{color:var(--azul)}
.ficha{max-width:740px;margin:0 auto;padding:10px 0 92px}
.ficha h1{
  font-family:var(--titulo);font-weight:400;font-size:clamp(32px,5vw,46px);
  line-height:1.15;margin:16px 0 14px;letter-spacing:-.01em;color:var(--azul);
}
.ficha .meta{font-size:12.5px;margin-bottom:30px}
.ficha .texto{font-size:17.5px;line-height:1.78}
.ficha .texto p{margin:0 0 22px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.tag{
  background:var(--azul-tinte);border-radius:999px;padding:5px 14px;
  font-family:var(--titulo);font-size:13px;color:var(--azul);
}
.reserva{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--azul);color:#fff;border-radius:999px;padding:14px 30px;
  font-family:var(--titulo);font-weight:700;font-size:14.5px;letter-spacing:.03em;
  margin:8px 0 28px;transition:.15s;
}
.reserva:hover{background:var(--azul-hondo)}
.bloque{margin:44px 0}
.bloque h3{
  font-family:var(--titulo);font-weight:700;font-size:14px;margin:0 0 18px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul-medio);
  padding-bottom:10px;border-bottom:1px solid var(--borde);
}
.ig-caja{display:flex;justify-content:center}
.ig-pendiente{
  border:1.5px dashed var(--azul-linea);border-radius:var(--radio);background:var(--hueso);
  padding:38px 26px;text-align:center;color:var(--texto-suave);
}
.ig-pendiente strong{
  display:block;color:var(--azul);font-family:var(--titulo);font-weight:400;
  font-size:18px;margin-bottom:8px;
}
.ig-pendiente code{background:var(--azul-tinte);padding:2px 7px;border-radius:5px;font-size:13px;color:var(--azul)}
#mapa,#mapa-global{
  height:430px;border-radius:var(--radio);border:1px solid var(--borde);z-index:1;
}
iframe.mymaps{width:100%;height:430px;border:1px solid var(--borde);border-radius:var(--radio)}
#mapa-global{height:min(70vh,640px)}
.parada{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--borde)}
.parada:last-child{border-bottom:none}
.parada .dia{
  flex:0 0 32px;height:32px;border-radius:50%;
  border:1.5px solid var(--azul-medio);color:var(--azul-medio);background:#fff;
  display:grid;place-items:center;font-family:var(--titulo);font-size:14px;
}
.parada .info strong{display:block;font-family:var(--titulo);font-weight:700;font-size:16.5px;color:var(--azul)}
.parada .info span{font-size:14.5px;color:var(--texto-suave)}
.lista-vinos{margin:0;padding-left:20px;color:var(--texto-suave)}
.lista-vinos li{margin-bottom:8px}

/* ---------- pie ---------- */
.pie{
  background:var(--azul);padding:54px 0;text-align:center;
  color:rgba(255,255,255,.72);font-size:14px;
}
.pie .marca{justify-content:center;margin-bottom:16px;color:#fff}
.pie .marca img{height:52px}
.pie .marca-mark{width:42px}
.pie a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.42)}

.leaflet-container{font-family:var(--texto-fuente)}
.leaflet-popup-content{font-size:14px}
.leaflet-popup-content strong{font-family:var(--titulo);font-weight:400;color:var(--azul)}

/* Con cuatro enlaces la cabecera deja de caber en una fila mucho antes que el
   resto del diseño: se parte en dos filas centradas y el logo no se pierde. */
@media (max-width:820px){
  .cabecera .contenedor{
    flex-wrap:wrap;height:auto;gap:4px 18px;padding-top:14px;padding-bottom:14px;
    justify-content:center;
  }
  .nav{margin-left:0;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 16px;font-size:14px}
}

@media (max-width:640px){
  body{font-size:16px}
  .contenedor{padding:0 20px}
  .marca img{height:40px}
  .marca-texto{font-size:19px}
  .nav{gap:6px 13px;font-size:13px}
  .hero{padding:52px 0 44px}
  .hero .hero-marca svg{width:78px}
  .buscador{flex:1;min-width:0}
  .rejilla{gap:28px 18px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .tarjeta h2{font-size:19px}
  .tarjeta p{display:none}
  #mapa,iframe.mymaps{height:330px}
}

/* ---------- sobre nosotros ---------- */
.hero-corto{padding:58px 0 52px}
.hero-corto h1{margin-bottom:12px}
.hero-corto p{font-size:18px}
.sobre{max-width:1040px;margin:0 auto;padding:52px 0 92px}

/* Cada párrafo con su foto, alternando el lado. */
.fila{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  margin-bottom:64px;
}
.fila:nth-child(even) .columna-texto{order:2}
.fila p{margin:0;font-size:18.5px;line-height:1.8}
.fila figure{margin:0}
.fila figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;
}
.fila-sola{grid-template-columns:1fr;max-width:700px;margin-inline:auto}

/* Las fotos que sobran cierran la página en una tira que se arrastra de lado.
   Los márgenes negativos la sacan de la columna hasta el borde de la pantalla. */
.galeria{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  margin:16px calc(50% - 50vw) 0;
  padding:0 max(26px,calc(50vw - 520px)) 12px;
}
.galeria figure{margin:0;flex:0 0 auto;scroll-snap-align:center}
.galeria img{
  height:clamp(260px,34vw,400px);width:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:16px;border:none;
}
.galeria::-webkit-scrollbar{height:6px}
.galeria::-webkit-scrollbar-thumb{background:var(--azul-linea);border-radius:999px}
.galeria::-webkit-scrollbar-track{background:transparent}
/* Con una sola foto no hay tira que arrastrar: se centra y ya. */
.galeria:has(figure:only-child){justify-content:center}

/* ---------- móvil ---------- */
@media (max-width:820px){
  /* En vertical no hay dos columnas: texto encima y foto debajo, siempre en
     ese orden. Sin resetear el order, las filas pares empezarían por la foto. */
  .fila{grid-template-columns:1fr;gap:22px;margin-bottom:48px}
  .fila:nth-child(even) .columna-texto{order:0}
  .fila figure img{aspect-ratio:4/3}

  /* En vertical, las categorías y los filtros bajan en varias filas en vez
     de desplazarse hacia un lado: con un scroll horizontal escondido mucha
     gente no se daba cuenta de que había más opciones fuera de pantalla.
     El que crece dentro de ".derecha" es ".campo-filtro" (el contenedor),
     no el <input> — por eso el buscador de texto, que no lleva contenedor
     propio, se ajusta directamente a él mismo. */
  .filtros .campo-filtro{flex:1 1 220px}
  .buscador{flex:1 1 220px}

  /* Zonas táctiles: por debajo de 44 px se falla mucho con el dedo. */
  .nav a{padding:9px 0;min-height:40px;display:flex;align-items:center}
  .chip{min-height:42px;padding-top:0;padding-bottom:0}
  .selector,.buscador{min-height:42px}
  .pie a{display:inline-block;padding:6px 0}
  .volver{padding:8px 0}
}

@media (max-width:640px){
  .sobre{max-width:100%;padding:34px 0 64px}
  .fila p{font-size:17px}
  .hero-corto{padding:44px 0 40px}
  .galeria{gap:10px;padding-left:20px;padding-right:20px}
  .galeria img{height:clamp(230px,62vw,320px)}
}

/* ---------- carrusel de fotos (ficha de publicación) ---------- */
.carrusel{position:relative;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde)}
.carrusel-pista{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-diapo{flex:0 0 100%;scroll-snap-align:center;background:var(--azul-tinte)}
.carrusel-diapo img,
.carrusel-diapo video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#000}
.carrusel-flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.88);color:var(--azul);font-size:19px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(23,48,57,.2);transition:opacity .15s;
}
.carrusel-flecha.izq{left:12px}
.carrusel-flecha.der{right:12px}
.carrusel-flecha:disabled{opacity:0;pointer-events:none}
.carrusel-contador{
  position:absolute;bottom:12px;right:12px;
  background:rgba(23,48,57,.72);color:#fff;
  font-family:var(--titulo);font-size:12.5px;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;
}
@media (max-width:640px){
  .carrusel-flecha{display:none}    /* en móvil se desliza con el dedo */
}

/* ---------- contacto ---------- */
.contacto{
  max-width:640px;margin:0 auto;padding:56px 0 92px;
  display:grid;gap:18px;
}
.tarjeta-contacto{
  display:flex;align-items:center;gap:18px;
  padding:26px 24px;border-radius:var(--radio);
  border:1px solid var(--borde);background:#fff;
  text-decoration:none;color:inherit;transition:border-color .15s, transform .15s;
}
.tarjeta-contacto:hover{border-color:var(--azul-medio);transform:translateY(-2px)}
.tarjeta-contacto svg{
  width:30px;height:30px;flex:0 0 auto;color:var(--azul);
}
.tarjeta-contacto strong{
  display:block;font-family:var(--titulo);font-weight:700;font-size:17px;color:var(--azul);
}
.tarjeta-contacto span{display:block;font-size:14.5px;color:var(--texto-suave);margin-top:2px}
@media (max-width:640px){
  .contacto{padding:40px 0 64px}
  .tarjeta-contacto{padding:20px}
}

/* ---------- aviso de contacto (Sobre nosotros) ---------- */
.aviso-contacto{
  margin-top:56px;padding:26px 28px;border-radius:var(--radio);
  background:var(--azul-tinte);text-align:center;
}
.aviso-contacto p{margin:0;font-size:16px;color:var(--texto)}
.aviso-contacto a{color:var(--azul);font-weight:700;text-decoration:underline}

/* ---------- aviso de cookies ---------- */
.cookies-aviso{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--azul);color:#fff;padding:18px 26px;
  display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(22,41,60,.25);
}
.cookies-aviso p{margin:0;font-size:14px;line-height:1.55;max-width:560px;color:rgba(255,255,255,.9)}
.cookies-botones{display:flex;gap:10px;flex:0 0 auto}
.boton-cookies{
  border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:9px 22px;
  font-family:var(--titulo);font-size:14px;cursor:pointer;background:transparent;color:#fff;
}
.boton-cookies.rechazar:hover{border-color:#fff}
.boton-cookies.aceptar{background:#fff;color:var(--azul);border-color:#fff}
.boton-cookies.aceptar:hover{opacity:.88}
@media (max-width:640px){
  .cookies-aviso{padding:16px 20px;justify-content:flex-start}
  .cookies-aviso p{max-width:none}
}