.cookies {
  position: fixed; left: 16px; bottom: 16px; z-index: 79;
  width: min(420px, calc(100vw - 32px));
  display: grid; gap: 14px; padding: 18px 20px;
  border-radius: var(--radius-sm); background: var(--alabastro); color: var(--ebano);
  box-shadow: 0 24px 60px -20px rgba(28,27,26,.55), 0 0 0 1px var(--linea);
  opacity: 0; transform: translateY(10px);
  transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.cookies.is-open { opacity: 1; transform: none; }
.cookies[hidden] { display: none; }
.cookies p { font-size: 14px; line-height: 1.55; color: var(--topo-oscuro); }
.cookies a { color: var(--ebano); text-decoration: underline; text-underline-offset: 3px; }
.cookies__actions { display: flex; justify-content: flex-end; gap: 8px; }
.cookies__btn { padding: 10px 18px; border-radius: 100px; border: 1px solid var(--linea); color: var(--ebano); font-size: 14px; font-weight: 600; transition: background-color 150ms ease, transform 120ms ease; }
.cookies__btn--yes { background: var(--ebano); color: var(--alabastro); border-color: var(--ebano); }
.cookies__btn:active { transform: scale(.97); }
.cookies__btn:focus-visible, .cookies a:focus-visible { outline: 2px solid var(--ebano); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cookies__btn:not(.cookies__btn--yes):hover { border-color: var(--ebano); } }
@media (max-width: 600px) { .cookies { left: 8px; right: 8px; bottom: 80px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .cookies { transition: opacity 150ms ease; transform: none; } }