/* Banner de cookies — Mejores Patinetes, 4-sep-2026.
   Antes Analytics arrancaba con analytics_storage:denied PARA SIEMPRE y nada
   lo concedia nunca: sin consentimiento real, Google Analytics no ensena
   datos fiables en una web con este volumen. Este banner es lo que falta
   para que el visitante pueda CONCEDER el consentimiento de verdad.

   Reutiliza las variables de styles.css (tema oscuro, naranja de marca) para
   que encaje con el resto de la web, no un diseno generico pegado encima. */

#cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  background:var(--papel-2);border-top:1px solid var(--linea-fuerte);
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
  font-family:var(--fuente);
}
#cc-banner[hidden]{display:none}

.cc-banner-inner{
  max-width:var(--ancho);margin:0 auto;padding:16px var(--s3);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cc-banner-txt{flex:1 1 380px;margin:0;color:var(--t-700);font-size:14.5px;line-height:1.55}
.cc-banner-txt a{color:var(--marca);text-decoration:underline}

.cc-banner-btns{display:flex;gap:10px;flex:0 0 auto}
.cc-btn{
  padding:.7rem 1.15rem;border-radius:var(--r-sm);font-family:inherit;
  font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .12s;
}
.cc-btn:active{transform:translateY(1px)}
/* Mismo tamano visual para los dos botones: ninguno se resalta para forzar
   el "Aceptar" (sin dark patterns), igual que btn-principal/btn-secundario
   ya conviven en el resto de la web. */
.cc-btn-rechazar{background:var(--papel-3);color:var(--t-900);border-color:var(--linea-fuerte)}
.cc-btn-rechazar:hover{border-color:var(--t-400)}
.cc-btn-aceptar{background:var(--marca);color:#1c1200;box-shadow:0 2px 10px rgba(245,165,36,.28)}
.cc-btn-aceptar:hover{background:var(--marca-osc)}
.cc-btn:focus-visible{outline:3px solid var(--marca);outline-offset:2px}

@media(max-width:640px){
  .cc-banner-inner{padding:14px var(--s2);flex-direction:column;align-items:stretch;gap:12px}
  .cc-banner-btns{justify-content:flex-end}
}

/* ── que el banner no tape los botones flotantes de abajo ──────────────────
   6-sep-2026. El banner ocupa toda la franja de abajo (z-index 400) y ahi
   viven tres cosas que se pulsan: el "Parar" de la lectura en voz alta
   (abajo a la izquierda), el avatar del tour y su globo de sugerencias
   (abajo a la derecha). Con el banner puesto, el clic se lo tragaba el
   banner: medido en la pagina real, quien recibia el clic del avatar era
   #cc-banner, y la prueba de la lectura estuvo 30 s intentando pulsar
   "Parar" sin conseguirlo -- por eso ese dia la web NO se publico.

   NO se les sube el z-index por encima del banner: eso taparia el aviso de
   cookies, que es justo lo que hay que poder leer y responder. Se APARTAN
   hacia arriba mientras el banner esta puesto, usando su altura REAL
   (--cc-alto, que mide banner-cookies.js; cambia al apilarse en movil).
   El respaldo de 86px es solo por si el JS no llegara a medir.

   Se mueve `bottom` y no `transform`: el avatar y el globo ya usan
   transform para su animacion de entrada y se pisarian. */
html.cc-puesto .leer-flotante{bottom:calc(var(--cc-alto, 86px) + 20px)}
html.cc-puesto .tour-avatar  {bottom:calc(var(--cc-alto, 86px) + 20px)}
html.cc-puesto .sug-globo    {bottom:calc(var(--cc-alto, 86px) + 88px)}
@media (max-width:640px){
  html.cc-puesto .tour-avatar{bottom:calc(var(--cc-alto, 86px) + 12px)}
  html.cc-puesto .sug-globo  {bottom:calc(var(--cc-alto, 86px) + 70px)}
}