/* ==========================================================================
   LAYOUT: barra superior, header, menú, drawers, footer y flotantes
   Mobile-first: los estilos base son para celular.
   ========================================================================== */

/* ---------- Barra superior ---------- */
.barra-superior {
  background: var(--color-primario);
  color: #fff;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}
.barra-superior__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  gap: var(--esp-4);
}
.barra-superior__mensaje span {
  display: inline-block;
  transition: opacity var(--duracion-media) ease, transform var(--duracion-media) var(--ease-out);
}
.barra-superior__mensaje span.saliendo {
  opacity: 0;
  transform: translateY(-4px);
}
.barra-superior__enlaces {
  display: none;
  gap: var(--esp-6);
}
.barra-superior__enlaces a:hover {
  text-decoration: underline;
}
.barra-superior :focus-visible {
  outline-color: #fff;
}
@media (min-width: 1024px) {
  .barra-superior__interior { justify-content: space-between; }
  .barra-superior__enlaces { display: flex; }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--duracion-lenta) ease;
}
.header--compacto {
  box-shadow: var(--sombra-header);
}
.header__fila {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  grid-template-areas:
    "menu logo carrito"
    "buscador buscador buscador";
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding-block: var(--esp-2) var(--esp-3);
}
.header__hamburguesa { grid-area: menu; }
.header__logo {
  grid-area: logo;
  justify-self: center;
  display: block;
  border-radius: var(--radio-sm);
}
/* El logo tiene fondo transparente; siempre va sobre blanco */
.header__logo img {
  height: 48px;
  width: auto;
}
.header__ubicacion { display: none; }
.buscador { grid-area: buscador; }
.header__acciones {
  grid-area: carrito;
  display: flex;
  justify-content: flex-end;
}
.header__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  min-height: 44px;
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  transition: background-color var(--duracion-rapida) ease;
}
.header__accion:hover {
  background: var(--color-fondo-alterno);
}
.header__accion-texto {
  display: none;
  line-height: 1.15;
  text-align: left;
}
.header__carrito-etiqueta {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
/* En celular solo se ve el carrito (favoritos está en el menú lateral).
   Va después de .header__accion para que no lo sobrescriba. */
.header__accion--favoritos {
  display: none;
}
.header__icono-contador {
  position: relative;
  display: inline-flex;
}
.contador {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--radio-pildora);
  background: var(--color-primario);
  color: #fff;
  font-size: 11px;
  font-weight: var(--peso-black);
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.contador[hidden] { display: none; }
.contador--pulso {
  animation: pulso 400ms var(--ease-out);
}
@keyframes pulso {
  40% { transform: scale(1.3); }
}

/* Header en escritorio */
@media (min-width: 1024px) {
  .header__fila {
    grid-template-columns: auto auto minmax(280px, 1fr) auto;
    grid-template-areas: "logo ubicacion buscador carrito";
    gap: var(--esp-6);
    padding-block: var(--esp-4);
  }
  .header__hamburguesa { display: none; }
  .header__logo { justify-self: start; }
  .header__logo img { height: 60px; }
  /* El header compacto no cambia de alto (eso movía toda la página y la hacía temblar):
     solo el logo se achica con transform, que no afecta el resto del contenido. */
  .header__logo img { transform-origin: left center; transition: transform var(--duracion-lenta) var(--ease-out); }
  .header--compacto .header__logo img { transform: scale(0.82); }
  .header__ubicacion {
    grid-area: ubicacion;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2);
    border-radius: var(--radio-sm);
    text-align: left;
    line-height: 1.15;
    font-size: var(--texto-sm);
  }
  .header__ubicacion:hover { background: var(--color-fondo-alterno); }
  .header__ubicacion > .icono:first-child { color: var(--color-primario); }
  .header__ubicacion-etiqueta {
    display: block;
    font-size: var(--texto-xs);
    color: var(--color-texto-suave);
  }
  .header__accion--favoritos { display: inline-flex; }
  .header__acciones { gap: var(--esp-1); }
  .header__accion-texto { display: block; }
}

/* ---------- Buscador ---------- */
.buscador {
  position: relative;
  display: flex;
}
.buscador__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: var(--esp-2) var(--esp-4);
  border: 2px solid var(--color-borde-fuerte);
  border-right: 0;
  border-radius: var(--radio-pildora) 0 0 var(--radio-pildora);
  background: var(--color-fondo-alterno);
  font-size: var(--texto-md);
  transition: border-color var(--duracion-rapida) ease, background-color var(--duracion-rapida) ease;
}
.buscador__input::-webkit-search-cancel-button { cursor: pointer; }
.buscador__input:focus {
  outline: none;
  border-color: var(--color-primario);
  background: #fff;
}
.buscador__input:focus + .buscador__boton { border-color: var(--color-primario); }
.buscador__boton {
  display: grid;
  place-items: center;
  width: 56px;
  border-radius: 0 var(--radio-pildora) var(--radio-pildora) 0;
  background: var(--color-primario);
  color: #fff;
  border: 2px solid var(--color-primario);
  transition: background-color var(--duracion-rapida) ease;
}
.buscador__boton:hover { background: var(--color-primario-oscuro); }
.buscador__sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-menu);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-flotante);
  padding: var(--esp-2);
  max-height: 70vh;
  overflow-y: auto;
}
.sugerencia {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: var(--texto-sm);
}
.sugerencia img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  background: #fff;
}
.sugerencia mark {
  background: none;
  color: var(--color-primario);
  font-weight: var(--peso-black);
}
.sugerencia__precio {
  font-weight: var(--peso-black);
  color: var(--color-primario);
}
.sugerencia:hover,
.sugerencia[aria-selected="true"] {
  background: var(--color-primario-claro);
}
.sugerencia--todos {
  grid-template-columns: auto 1fr;
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  border-top: 1px solid var(--color-borde);
  margin-top: var(--esp-1);
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
}
.sugerencia--vacia {
  display: block;
  cursor: default;
  color: var(--color-texto-suave);
}
.sugerencia--vacia:hover { background: none; }

/* ---------- Menú de categorías (escritorio) ---------- */
.nav {
  display: none;
  border-top: 1px solid var(--color-borde);
}
@media (min-width: 1024px) {
  .nav { display: block; }
}
.nav__interior {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--esp-2);
}
.nav__boton-todas {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 100%;
  min-height: 48px;
  padding: 0 var(--esp-4);
  background: var(--color-secundario);
  color: #fff;
  font-weight: var(--peso-bold);
  font-size: var(--texto-sm);
  white-space: nowrap;
}
.nav__boton-todas:hover { background: var(--color-secundario-oscuro); }
.nav__boton-todas[aria-expanded="true"] .icono:last-child { transform: rotate(180deg); }
.nav__boton-todas .icono:last-child { transition: transform var(--duracion-media) var(--ease-out); }
.nav__lista {
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
}
.nav__item {
  position: relative;
}
.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 48px;
  padding: 0 var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  white-space: nowrap;
  position: relative;
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: var(--esp-3);
  right: var(--esp-3);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primario);
  transform: scaleX(0);
  transition: transform var(--duracion-media) var(--ease-out);
}
.nav__item:hover .nav__enlace::after,
.nav__enlace:focus-visible::after {
  transform: scaleX(1);
}
.nav__enlace--oferta {
  color: var(--color-oferta);
}
.nav__enlace--oferta::after { background: var(--color-oferta); }
.nav__desplegable {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-menu);
  min-width: 240px;
  padding: var(--esp-2);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 0 0 var(--radio-md) var(--radio-md);
  box-shadow: var(--sombra-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duracion-media) var(--ease-out), transform var(--duracion-media) var(--ease-out), visibility var(--duracion-media);
}
.nav__item--desplegable:hover .nav__desplegable,
.nav__item--desplegable:focus-within .nav__desplegable {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__item--cerrado .nav__desplegable {
  opacity: 0 !important;
  visibility: hidden !important;
}
.nav__desplegable a {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  border-radius: 6px;
  font-size: var(--texto-sm);
}
.nav__desplegable a:hover {
  background: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
}
.nav__ver-todo {
  font-weight: var(--peso-bold);
  color: var(--color-primario);
}
/* En pantallas medianas se ocultan enlaces de menor prioridad
   (siguen disponibles en "Todas las categorías"); "Ofertas" siempre se ve */
@media (max-width: 1439px) {
  .nav__item:nth-child(7) { display: none; }
}
@media (max-width: 1279px) {
  .nav__item:nth-child(n+5):not(:last-child) { display: none; }
}
/* Los últimos desplegables se alinean a la derecha para no salirse */
.nav__item:nth-last-child(-n+3) .nav__desplegable { left: auto; right: 0; }

/* Mega-menú */
.nav__todas { position: static; }
.mega {
  position: absolute;
  top: 100%;
  left: var(--margen-lateral);
  right: var(--margen-lateral);
  z-index: var(--z-menu);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--esp-6);
  padding: var(--esp-6);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 0 0 var(--radio-lg) var(--radio-lg);
  box-shadow: var(--sombra-flotante);
  animation: mega-entrada var(--duracion-media) var(--ease-out);
}
.mega[hidden] { display: none; }
@keyframes mega-entrada {
  from { opacity: 0; transform: translateY(-6px); }
}
.mega__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-6) var(--esp-4);
}
.mega__categoria {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: var(--peso-black);
  margin-bottom: var(--esp-2);
}
.mega__categoria:hover { color: var(--color-primario); }
.mega__icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pildora);
  background: var(--color-primario-claro);
  color: var(--color-primario);
  flex-shrink: 0;
}
.mega__columna ul a {
  display: block;
  padding: 4px 0 4px 44px;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.mega__columna ul a:hover { color: var(--color-primario); text-decoration: underline; }
.mega__promo {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--color-acento-claro);
}
.mega__promo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mega__promo-texto {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4);
  justify-items: start;
}

/* ---------- Menú móvil ---------- */
.menu-movil__logo { height: 40px; width: auto; }
.menu-movil__ciudad {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-radius: var(--radio-md);
  background: var(--color-fondo-alterno);
  font-size: var(--texto-sm);
  text-align: left;
}
.menu-movil__ciudad .icono { color: var(--color-primario); }
.menu-movil__lista > li { border-bottom: 1px solid var(--color-borde); }
.menu-movil__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 52px;
  padding: var(--esp-2) 0;
  font-weight: var(--peso-bold);
}
.menu-movil__nombre {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}
.menu-movil__nombre .icono,
.menu-movil__enlace > .icono:first-child { color: var(--color-primario); }
.menu-movil__enlace--oferta { color: var(--color-oferta); }
.menu-movil__enlace--oferta .icono { color: var(--color-oferta) !important; }
.menu-movil__sub {
  padding: 0 0 var(--esp-3) 32px;
}
.menu-movil__sub a {
  display: block;
  padding: var(--esp-2) 0;
  color: var(--color-texto-suave);
}
.menu-movil__extra {
  display: grid;
  gap: var(--esp-1);
  margin-top: var(--esp-4);
}
.menu-movil__extra a,
.menu-movil__extra button {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-3) 0;
  font-weight: var(--peso-semi);
}

/* ---------- Drawer del carrito ---------- */
.drawer__unidades {
  color: var(--color-texto-suave);
  font-weight: var(--peso-semi);
  font-size: var(--texto-md);
}
.linea-lista {
  margin-top: var(--esp-4);
}
.linea {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}
.linea__imagen img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: #fff;
}
.linea__info {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}
.linea__nombre {
  font-weight: var(--peso-bold);
  font-size: var(--texto-sm);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.linea__nombre:hover { color: var(--color-primario); }
.linea__precio {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.linea__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}
.linea__eliminar { color: var(--color-texto-suave); width: 36px; height: 36px; }
.linea__eliminar:hover { color: var(--color-oferta); background: var(--color-primario-claro); }
.linea__total { font-size: var(--texto-sm); white-space: nowrap; }
.drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: var(--texto-lg);
}
.drawer__subtotal strong { font-weight: var(--peso-black); }
.drawer__nota {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  margin-top: calc(var(--esp-2) * -1);
}
.drawer__botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
}
.drawer__botones .boton { padding-inline: var(--esp-2); }

/* ---------- Modal de ciudades ---------- */
.ciudades {
  border: 0;
  padding: 0;
  margin: 0 0 var(--esp-4);
  display: grid;
  gap: var(--esp-2);
  max-height: 50vh;
  overflow-y: auto;
}
.ciudad {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: var(--texto-sm);
}
.ciudad span span { display: block; color: var(--color-texto-suave); }
.ciudad:has(input:checked) {
  border-color: var(--color-secundario);
  background: var(--color-secundario-claro);
}
.ciudad input { accent-color: var(--color-secundario); width: 18px; height: 18px; }

/* ---------- Beneficios ---------- */
.beneficios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4);
}
@media (min-width: 1024px) {
  .beneficios { grid-template-columns: repeat(4, 1fr); }
}
.beneficio {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
}
.beneficio__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-pildora);
  background: var(--color-secundario-claro);
  color: var(--color-secundario);
  flex-shrink: 0;
}
.beneficio__titulo { display: block; font-weight: var(--peso-black); }
.beneficio__texto { color: var(--color-texto-suave); }

/* ---------- Footer ---------- */
.pie {
  margin-top: var(--esp-12);
  background: var(--color-fondo-alterno);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.pie__beneficios {
  padding-block: var(--esp-6);
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
}
.pie__principal {
  display: grid;
  gap: var(--esp-2);
  padding-block: var(--esp-8);
}
.pie__marca {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
  color: var(--color-texto-suave);
}
.pie__logo {
  display: inline-block;
  background: #fff;
  padding: var(--esp-3);
  border-radius: var(--radio-md);
  justify-self: start;
  box-shadow: var(--sombra-tarjeta);
}
.pie__logo img { height: 56px; width: auto; }
.pie__redes { display: flex; gap: var(--esp-2); }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pildora);
  background: #fff;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  transition: background-color var(--duracion-rapida) ease, color var(--duracion-rapida) ease;
}
.pie__redes a:hover { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.pie__columna { border-bottom: 1px solid var(--color-borde); }
.pie__titulo { font-size: var(--texto-md); }
.pie__titulo-fijo { display: none; }
.pie__acordeon { min-height: 48px; }
.pie__panel { padding-bottom: var(--esp-4); }
.pie__lista { display: grid; gap: var(--esp-2); color: var(--color-texto-suave); }
.pie__lista a:hover { color: var(--color-primario); text-decoration: underline; }
.pie__contacto li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.pie__contacto .icono { margin-top: 3px; color: var(--color-secundario); }
.pie__pagos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--color-borde);
}
.pie__pagos-titulo { font-weight: var(--peso-bold); }
.pie__pagos ul { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.pago {
  padding: var(--esp-1) var(--esp-3);
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--color-borde);
  font-weight: var(--peso-black);
  font-size: var(--texto-xs);
  letter-spacing: 0.02em;
}
.pie__inferior {
  background: var(--color-texto);
  color: #e8eaed;
  padding-block: var(--esp-4);
  font-size: var(--texto-xs);
}
.pie__inferior .contenedor { display: grid; gap: var(--esp-2); }
/* Espacio para que los botones flotantes no tapen el texto legal */
@media (max-width: 1023px) {
  .pie__inferior { padding-bottom: 96px; }
}
.pie__aviso { display: flex; gap: var(--esp-2); align-items: flex-start; }
.pie__aviso .icono { margin-top: 2px; }
@media (min-width: 768px) {
  .pie__principal {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-8);
  }
  .pie__marca { grid-column: 1 / -1; margin: 0; }
  .pie__columna { border: 0; }
  .pie__acordeon { display: none; }
  .pie__titulo-fijo { display: block; margin-bottom: var(--esp-3); }
  .pie__panel[hidden] { display: block; }
}
@media (min-width: 1024px) {
  .pie__principal { grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.4fr; }
  .pie__marca { grid-column: auto; }
}

/* ---------- WhatsApp flotante y volver arriba ---------- */
.whatsapp-flotante {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: var(--z-flotante);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radio-pildora);
  background: #1a8d4a;
  color: #fff;
  box-shadow: var(--sombra-flotante);
  transition: transform var(--duracion-media) var(--ease-out);
}
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante:active { transform: scale(0.96); }
.whatsapp-flotante__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap;
  background: var(--color-texto);
  color: #fff;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracion-media) ease, transform var(--duracion-media) var(--ease-out);
}
.whatsapp-flotante:hover .whatsapp-flotante__tooltip,
.whatsapp-flotante:focus-visible .whatsapp-flotante__tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}
.volver-arriba {
  position: fixed;
  right: calc(var(--esp-4) + 6px);
  bottom: 84px;
  z-index: var(--z-flotante);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-pildora);
  background: #fff;
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duracion-media) ease, transform var(--duracion-media) var(--ease-out), visibility var(--duracion-media);
}
.volver-arriba.esta-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Banner de cookies ---------- */
.cookies {
  position: fixed;
  left: var(--esp-3);
  right: var(--esp-3);
  bottom: var(--esp-3);
  z-index: calc(var(--z-flotante) + 10);
  display: flex;
  justify-content: center;
  animation: modal-entrada var(--duracion-lenta) var(--ease-out);
}
.cookies--saliendo { animation: modal-salida var(--duracion-media) ease forwards; }
.cookies__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  max-width: 760px;
  padding: var(--esp-4);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-flotante);
  font-size: var(--texto-sm);
}
.cookies__interior > .icono { color: var(--color-acento); stroke: #b88f00; }
.cookies__interior p { flex: 1 1 260px; }
.cookies__interior a { text-decoration: underline; font-weight: var(--peso-bold); }