/* Banner de consentimiento de la analítica.

   Va en el núcleo porque sale en todas las páginas públicas y porque su ausencia
   no sería cosmética: sin esta hoja se pintaría suelto en mitad del documento
   en vez de anclado abajo.

   Tres decisiones de fondo, por si alguien las quiere revisar:

   1. **Anclado al pie, no centrado sobre la página.** No es un muro. La web se
      lee sin decidir nada y lo que se mide sin consentimiento es exactamente
      nada, así que bloquear la lectura para forzar una respuesta sería a la vez
      innecesario y una forma de arrancar el «sí» por cansancio.

   2. **Los dos botones pesan igual.** Mismo tamaño, misma tipografía, misma
      altura. Aceptar lleva el color de marca por ser la acción afirmativa, no
      por ser la recomendada. Un «rechazar» más pequeño o descolorido convierte
      el banner en un embudo, que es justo lo que invalida el consentimiento que
      recoge.

   3. **Entra deslizándose, no aparece.** El movimiento dice de dónde viene y
      evita el salto seco sobre contenido ya leído; se respeta
      `prefers-reduced-motion`. */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  padding: 0 16px 16px;
  pointer-events: none;
}

.consent-banner[hidden] { display: none; }

.consent-inner {
  pointer-events: auto;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  /* Sombra amplia y suave: lo separa del contenido sin dibujarle un marco
     grueso encima. */
  box-shadow: 0 12px 32px -8px rgb(15 35 60 / 18%), 0 2px 6px rgb(15 35 60 / 6%);
  animation: consent-enter .28s ease-out;
}

@keyframes consent-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-inner { animation: none; }
}

.consent-text {
  flex: 1 1 380px;
  min-width: 0;
}

.consent-text strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-color, #0f172a);
  font: 600 15px/1.3 var(--font-heading, sans-serif);
}

.consent-text p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted, #52627a);
  font-size: 13.5px;
  line-height: 1.55;
}

.consent-text a {
  color: var(--primary-hover, #0284c7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

/* Botones propios y no `.btn` del sitio: aquí los dos tienen que pesar lo
   mismo, y las variantes generales del sitio están pensadas justo para lo
   contrario —que la principal destaque sobre la secundaria—. */
.consent-actions button {
  min-width: 128px;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: 600 13.5px var(--font-body, sans-serif);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

/* El borde va un paso más oscuro que el del resto del sitio: sobre la tarjeta
   blanca, `--border-color` desaparece y «Rechazar» dejaba de leerse como un
   botón. Que las dos opciones se vean igual de pulsables no es cosmética: es la
   condición para que el «sí» signifique algo. */
.consent-actions .consent-decline {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.consent-actions .consent-decline:hover { background: #f1f5f9; border-color: #cbd5e1; }

.consent-actions .consent-accept {
  background: var(--primary-hover, #0284c7);
  color: #fff;
}

.consent-actions .consent-accept:hover { background: #036a9f; }

.consent-actions button:focus-visible {
  outline: 2px solid var(--focus-ring, #006fc0);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .consent-banner { padding: 0 10px 10px; }

  .consent-inner {
    gap: 14px;
    padding: 16px;
  }

  .consent-actions { width: 100%; }

  .consent-actions button {
    flex: 1 1 0;
    min-width: 0;
  }
}