/* ==========================================================================
   Torre de Collserola — aviso de cookies

   Se compone con los tokens del diseño, no con estilos propios: el crema del
   sitio, la pleca de --c-linea del pie y la píldora de los botones. La idea es
   que no parezca un plugin pegado encima de la web.

   La barra va a z-index 45: por encima de la cabecera (40) y por debajo del
   menú desplegable (50), de modo que al abrir el menú a pantalla completa el
   aviso queda tapado y no compite con él.
   ========================================================================== */

.cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  background: var(--c-crema);
  color: var(--c-ink);
  border-top: 1px solid var(--c-linea);
  /* Entra deslizándose desde abajo. El estado de reposo es fuera de pantalla
     para que el primer fotograma no lo pinte ya colocado. */
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.cookies--visible { transform: none; }

.cookies__caja {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: clamp(16px, 1.4vw, 28px);
  padding-inline: var(--gutter);
  /* Con el panel abierto en una pantalla baja, el contenido puede no caber. */
  max-height: 85svh;
  overflow-y: auto;
}

/* --- El aviso ------------------------------------------------------------- */

.cookies__aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.2vw, 24px);
}

.cookies__texto {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(0.875rem, 0.8vw, 16px);
  line-height: 1.5;
}
.cookies__texto a { border-bottom: 1px solid currentColor; }

.cookies__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.6vw, 12px);
}

/* Aceptar y Rechazar comparten EXACTAMENTE el mismo estilo. No es descuido:
   la guía de cookies de la AEPD exige que rechazar sea tan fácil y tan
   visible como aceptar, así que ninguno de los dos se destaca. Si alguien
   pide «que el de aceptar se vea más», la respuesta es que no. */
.cookies__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                       /* diana táctil cómoda */
  padding-inline: clamp(18px, 1.3vw, 26px);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: clamp(0.8125rem, 0.7vw, 14px);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-toque) var(--ease-toque),
              color var(--dur-toque) var(--ease-toque);
}
.cookies__boton:hover {
  background: var(--c-ink);
  color: var(--c-crema);
}

/* «Configurar» y «Leer la política» no son una tercera opción al mismo nivel:
   van como texto, no como píldora. */
.cookies__ajustar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(0.8125rem, 0.7vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-toque) var(--ease-toque);
}
.cookies__ajustar:hover { border-color: currentColor; }

/* --- El panel de categorías ----------------------------------------------- */

.cookies__panel {
  margin-top: clamp(16px, 1.2vw, 24px);
  padding-top: clamp(16px, 1.2vw, 24px);
  border-top: 1px solid var(--c-linea);
}

.cookies__lista {
  display: grid;
  gap: clamp(14px, 1.1vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .cookies__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cookies__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.cookies__casilla {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-ink);
}
.cookies__casilla:disabled { opacity: 0.5; }

.cookies__rotulo {
  font-size: clamp(0.875rem, 0.8vw, 16px);
  font-weight: var(--w-medium);
}

.cookies__siempre {
  font-size: clamp(0.6875rem, 0.6vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.cookies__descripcion {
  /* Sangrada a la altura del rótulo, no de la casilla. */
  margin: 6px 0 0 28px;
  max-width: 62ch;
  font-size: clamp(0.8125rem, 0.7vw, 14px);
  line-height: 1.45;
}

.cookies__acciones--panel { margin-top: clamp(16px, 1.2vw, 24px); }

/* --- Teléfono ------------------------------------------------------------- */

@media (max-width: 700px) {
  .cookies__aviso { display: block; }
  .cookies__acciones { margin-top: 14px; }

  /* Los dos botones reparten la línea a partes iguales: siguen pesando lo
     mismo cuando no caben uno al lado del otro. */
  .cookies__boton { flex: 1 1 40%; }

  /* «Configurar» baja a su propia línea para no leerse como un tercer botón
     de la misma familia. */
  .cookies__aviso .cookies__ajustar { flex-basis: 100%; }

  .cookies__descripcion { margin-left: 28px; }
}

/* --- El acceso permanente del pie ----------------------------------------
   El botón se cuela en el menú «Enlaces legales», así que hereda de él la
   tipografía y la pleca separadora; solo hay que darle el subrayado que
   tienen sus vecinos, que es una regla sobre <a>. */

.enlaces-legales .cookies-abrir {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-toque) var(--ease-toque);
}
.enlaces-legales .cookies-abrir:hover { border-color: currentColor; }