/* ============================================================
   layout.css — Barra de anuncio, cabecera, navegación,
   menú móvil, buscador, cajón de carrito, modales, pie.
   ============================================================ */

/* ============================================================
   Barra de anuncio
   ============================================================ */
.anuncio {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  height: var(--h-anuncio);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-noche);
  color: rgba(247, 243, 238, .92);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.anuncio__pista {
  display: flex;
  width: max-content;
  animation: marquesina 46s linear infinite;
}
.anuncio:hover .anuncio__pista { animation-play-state: paused; }
.anuncio__grupo { display: flex; flex: none; }
.anuncio__item {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding-inline: 2.4rem;
  white-space: nowrap;
  color: rgba(247, 243, 238, .82);
}
.anuncio__item b { font-weight: 500; color: var(--c-laton-claro); }
.anuncio__item::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--c-laton);
  transform: rotate(45deg);
  margin-left: 1.6rem;
  opacity: .8;
}

/* ============================================================
   Cabecera
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--h-header);
  display: flex;
  align-items: center;
  background: rgba(247, 243, 238, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition:
    background var(--d-medio) var(--e-suave),
    border-color var(--d-medio) var(--e-suave),
    height var(--d-medio) var(--e-suave),
    box-shadow var(--d-medio) var(--e-suave);
}
.header.is-scrolled {
  background: rgba(247, 243, 238, .93);
  border-bottom-color: var(--c-borde);
  box-shadow: 0 1px 30px rgba(58, 44, 30, .06);
}
/* Sobre el hero oscuro la cabecera se vuelve clara e invisible */
.header.is-sobre-hero {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--c-lino);
}
.header.is-sobre-hero .nav__link,
.header.is-sobre-hero .icon-btn { color: rgba(247, 243, 238, .9); }
.header.is-sobre-hero .marca__nombre { color: var(--c-lino); }
.header.is-sobre-hero .marca__bajada { color: rgba(247, 243, 238, .6); }
.header.is-sobre-hero .marca__sello { border-color: rgba(231, 201, 154, .5); }
.header.is-sobre-hero .marca__sello span { color: var(--c-laton-claro); }

.header__int {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
}

/* ---------- Marca / logotipo ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  justify-self: center;
}
.marca__sello {
  width: 34px; height: 34px;
  border: 1px solid var(--c-laton);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  transition: transform var(--d-lento) var(--e-elastico);
}
.marca__sello::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(185, 139, 78, .3);
  border-radius: 50%;
}
.marca:hover .marca__sello { transform: rotate(-14deg) scale(1.06); }
.marca__sello span {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--c-laton-hondo);
  line-height: 1;
  transform: translateY(.5px);
}
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: var(--f-display);
  font-size: 1.16rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-tinta);
  white-space: nowrap;
}
.marca__bajada {
  font-size: 8.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--c-humo-claro);
  margin-top: 3px;
}

/* ---------- Navegación de escritorio ---------- */
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav--der { justify-self: end; }
.nav--izq { justify-self: start; }

.nav__link {
  position: relative;
  font-size: var(--t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-tinta-80);
  padding-block: .4rem;
  white-space: nowrap;
  transition: color var(--d-rapido);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-medio) var(--e-salida);
}
.nav__link:hover::after,
.nav__link.is-activo::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-activo { color: var(--c-laton-hondo); }

/* Menú desplegable de categorías */
.nav__grupo { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  /* Pegado al borde izquierdo del enlace, no centrado sobre él.

     «Catálogo» es el primer elemento de la barra, así que centrar sobre
     él un panel de 460 px dejaba unos 150 px fuera de la pantalla por la
     izquierda: se veían las descripciones cortadas a media palabra.

     El ancho va con max-width y no con min-width porque min-width gana a
     max-width, y entonces el tope no serviría de nada. */
  left: 0;
  width: 460px;
  max-width: calc(100vw - var(--pad-x) * 2);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--d-medio) var(--e-suave),
              transform var(--d-medio) var(--e-salida),
              visibility var(--d-medio);
}
.nav__grupo:hover .nav__panel,
.nav__grupo:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__panel::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav__panel-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-tinta-80);
  transition: background var(--d-rapido), color var(--d-rapido);
}
.nav__panel-item:hover { background: var(--c-lino-2); color: var(--c-laton-hondo); }
.nav__panel-item svg { width: 26px; height: 26px; flex: none; opacity: .8; }
.nav__panel-item b { display: block; font-weight: 400; font-size: var(--t-sm); letter-spacing: .06em; }
.nav__panel-item small { display: block; font-size: var(--t-xs); color: var(--c-humo-claro); }
.nav__panel-pie {
  grid-column: 1 / -1;
  border-top: 1px solid var(--c-borde);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-humo);
}
.nav__panel-pie a:hover { color: var(--c-laton-hondo); }

/* ---------- Botones de icono ---------- */
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-tinta-80);
  transition: background var(--d-rapido), color var(--d-rapido), transform var(--d-rapido);
}
.icon-btn:hover { background: rgba(185, 139, 78, .1); color: var(--c-laton-hondo); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.3; }

/* Punto discreto cuando hay sesión abierta: distingue "entrar" de
   "ir a mi cuenta" sin añadir texto a la cabecera. */
#enlace-cuenta.is-identificado::after {
  content: "";
  position: absolute;
  bottom: 5px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-laton);
}

.icon-btn__badge {
  position: absolute;
  top: 2px; right: 1px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--c-laton);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-full);
  transform: scale(0);
  transition: transform var(--d-medio) var(--e-elastico);
}
.icon-btn__badge.is-visible { transform: scale(1); }
.icon-btn.late { animation: latido .5s var(--e-elastico); }
@keyframes latido {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.22); }
}

.hamburguesa { display: none; }
.hamburguesa__lineas { width: 20px; display: grid; gap: 5px; }
.hamburguesa__lineas i {
  display: block; height: 1.4px;
  background: currentColor;
  transition: transform var(--d-medio) var(--e-salida), opacity var(--d-rapido);
}
.hamburguesa[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

@media (max-width: 1100px) {
  /* Por debajo de este ancho todo el menú vive en la hamburguesa:
     dejar dos enlaces sueltos a la derecha se veía desbalanceado. */
  .nav--izq .nav__link, .nav--izq .nav__grupo,
  .nav--der .nav__link { display: none; }
  .hamburguesa { display: grid; }
}
@media (max-width: 560px) {
  .nav--der { gap: 0; }
  .marca__bajada { display: none; }
  .marca__nombre { font-size: 1rem; }
}
/* En pantallas angostas la fila de cabecera debe caber entera:
   hamburguesa + logotipo + tres iconos, sin recortes. */
@media (max-width: 430px) {
  /* Los iconos de la cabecera (bolsa, favoritos, cuenta, buscar) se
     quedaban en 34 px y había que apuntar para acertarles. Se suben a
     40 px y el espacio sale de reducir el logotipo, que no es un
     objetivo que se pulse tanto. */
  .header__int { padding-inline: var(--s-2); gap: 0; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .marca { gap: .4rem; }
  .marca__sello { width: 28px; height: 28px; }
  .marca__sello span { font-size: 12px; }
  .marca__nombre { font-size: .82rem; letter-spacing: .09em; }
}

/* ============================================================
   Menú móvil (pantalla completa)
   ============================================================ */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--c-lino);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--pad-x) var(--s-8);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-lento) var(--e-salida);
  visibility: hidden;
}
.menu-movil.is-abierto { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-movil__top {
  display: flex; justify-content: flex-end;
  margin-bottom: var(--s-7);
}
.menu-movil__lista { display: grid; gap: var(--s-1); }
.menu-movil__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 2.9rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--c-tinta);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--e-salida), transform .5s var(--e-salida), color var(--d-rapido);
}
.menu-movil.is-abierto .menu-movil__link {
  opacity: 1; transform: none;
  transition-delay: calc(90ms + var(--i, 0) * 55ms);
}
.menu-movil__link:hover { color: var(--c-laton-hondo); }
.menu-movil__link i {
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--c-laton);
}
.menu-movil__pie {
  margin-top: auto;
  padding-top: var(--s-7);
  display: grid;
  gap: var(--s-4);
}
.menu-movil__redes { display: flex; gap: var(--s-4); }
.menu-movil__redes a {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-humo);
  border-bottom: 1px solid var(--c-borde-fuerte);
  padding-bottom: 2px;
}
.menu-movil__redes a:hover { color: var(--c-laton-hondo); border-color: var(--c-laton); }

/* ============================================================
   Buscador (overlay)
   ============================================================ */
.buscador {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(247, 243, 238, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-medio) var(--e-suave), visibility var(--d-medio);
}
.buscador.is-abierto { opacity: 1; visibility: visible; }
.buscador__barra {
  border-bottom: 1px solid var(--c-borde);
  padding: var(--s-5) var(--pad-x);
}
.buscador__campo {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.buscador__campo svg { width: 22px; height: 22px; color: var(--c-humo-claro); flex: none; }
.buscador__input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 300;
  padding-block: var(--s-2);
}
.buscador__input:focus { outline: none; }
.buscador__input::placeholder { color: var(--c-humo-claro); opacity: .6; }
.buscador__cuerpo { overflow-y: auto; padding: var(--s-6) var(--pad-x) var(--s-9); }
.buscador__cuerpo-int { max-width: 900px; margin-inline: auto; }
.buscador__sug { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.buscador__res { display: grid; gap: var(--s-1); margin-top: var(--s-5); }
.buscador__res-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-md);
  transition: background var(--d-rapido);
}
.buscador__res-item:hover { background: var(--c-lino-2); }
.buscador__res-item figure {
  width: 58px; height: 58px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-lino-2);
  flex: none;
}
.buscador__res-item b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.25;
}
.buscador__res-item small {
  display: block;
  color: var(--c-humo-claro);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.buscador__res-precio { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-laton-hondo); }

/* ============================================================
   Velo (backdrop compartido)
   ============================================================ */
.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(28, 26, 24, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-medio) var(--e-suave), visibility var(--d-medio);
}
.velo.is-abierto { opacity: 1; visibility: visible; }

/* ============================================================
   Cajón de carrito
   ============================================================ */
.cajon {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  width: min(440px, 100vw);
  height: 100dvh;
  background: var(--c-lino);
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: -20px 0 70px rgba(28, 26, 24, .2);
  transform: translateX(100%);
  transition: transform var(--d-lento) var(--e-salida);
  visibility: hidden;
}
.cajon.is-abierto { transform: none; visibility: visible; }

.cajon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5);
  border-bottom: 1px solid var(--c-borde);
}
.cajon__titulo {
  font-family: var(--f-display);
  font-size: 1.44rem;
  font-weight: 400;
  display: flex; align-items: baseline; gap: .5rem;
}
.cajon__titulo small {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-humo-claro);
}
.cajon__cuerpo { overflow-y: auto; padding: var(--s-4) var(--s-5); }
.cajon__pie {
  padding: var(--s-5);
  border-top: 1px solid var(--c-borde);
  background: var(--c-lino-2);
  display: grid;
  gap: var(--s-4);
}

/* Barra de progreso a despacho gratis */
.envio-libre { display: grid; gap: var(--s-2); }
.envio-libre__txt { font-size: var(--t-xs); color: var(--c-humo); letter-spacing: .04em; }
.envio-libre__txt b { color: var(--c-laton-hondo); font-weight: 500; }
.envio-libre__pista {
  height: 3px;
  background: var(--c-arena);
  border-radius: var(--r-full);
  overflow: hidden;
}
.envio-libre__fill {
  height: 100%;
  background: var(--g-laton-suave);
  border-radius: var(--r-full);
  transition: width var(--d-lento) var(--e-salida);
}

/* Línea de producto en el carrito */
.linea {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-borde);
  animation: aparecer var(--d-medio) var(--e-salida) both;
}
.linea:last-child { border-bottom: 0; }
.linea__img {
  aspect-ratio: 4/5;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
}
.linea__img svg { width: 100%; height: 100%; }
.linea__cuerpo { display: grid; align-content: start; gap: 3px; }
.linea__nombre { font-family: var(--f-display); font-size: 1.12rem; font-weight: 400; line-height: 1.24; }
.linea__meta { font-size: var(--t-xs); color: var(--c-humo-claro); letter-spacing: .06em; }
.linea__fila { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); }
.linea__precio { font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.linea__quitar {
  font-size: var(--t-xs);
  color: var(--c-humo-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--d-rapido);
}
.linea__quitar:hover { color: var(--c-error); }

/* Selector de cantidad */
.cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--c-nube);
}
.cant button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--c-humo);
  transition: background var(--d-rapido), color var(--d-rapido);
}
.cant button:hover { background: var(--c-arena); color: var(--c-tinta); }
.cant button:disabled { opacity: .3; cursor: not-allowed; }

/* Objetivos táctiles del carrito.
   Sumar, restar y quitar son las tres acciones que más se usan desde
   el teléfono y medían entre 21 y 28 px: por debajo de lo que se
   acierta con el dedo, y equivocarse aquí cambia lo que se compra. */
@media (pointer: coarse), (max-width: 620px) {
  .cant button { width: 40px; height: 40px; }
  .cant span { min-width: 34px; }
  .linea__quitar {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 2px;
  }
}
.cant span {
  min-width: 26px;
  text-align: center;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.cant--grande button { width: 40px; height: 40px; }
.cant--grande span { min-width: 40px; font-size: var(--t-base); }

/* Totales */
.totales { display: grid; gap: var(--s-2); }
.totales__fila {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--c-humo);
}
.totales__fila--total {
  padding-top: var(--s-3);
  margin-top: var(--s-1);
  border-top: 1px solid var(--c-borde);
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--c-tinta);
}
.totales__fila span:last-child { font-variant-numeric: tabular-nums; }

/* Carrito vacío */
.vacio {
  display: grid;
  place-items: center;
  gap: var(--s-4);
  text-align: center;
  padding: var(--s-9) var(--s-4);
  color: var(--c-humo);
}
.vacio svg { width: 62px; height: 62px; color: var(--c-borde-fuerte); }

/* ============================================================
   Modal (vista rápida)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-medio) var(--e-suave), visibility var(--d-medio);
}
.modal.is-abierto { opacity: 1; visibility: visible; }
.modal__caja {
  position: relative;
  width: min(940px, 100%);
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  background: var(--c-lino);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  transform: translateY(24px) scale(.97);
  transition: transform var(--d-lento) var(--e-salida);
}
.modal.is-abierto .modal__caja { transform: none; }
.modal__cerrar {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 3;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(247, 243, 238, .82);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: var(--c-tinta);
  transition: background var(--d-rapido), transform var(--d-rapido);
}
.modal__cerrar:hover { background: var(--c-arena); transform: rotate(90deg); }

/* ============================================================
   Avisos flotantes (toasts)
   ============================================================ */
.toasts {
  position: fixed;
  bottom: var(--s-5); right: var(--s-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 270px;
  max-width: 380px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-noche);
  color: var(--c-lino);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: toast-in var(--d-medio) var(--e-elastico) both;
}
.toast.saliendo { animation: toast-out var(--d-medio) var(--e-suave) both; }
.toast__icono {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(231, 201, 154, .16);
  color: var(--c-laton-claro);
  flex: none;
}
.toast__icono svg { width: 15px; height: 15px; }
.toast b { font-weight: 500; }
.toast small { display: block; color: rgba(247, 243, 238, .6); font-size: var(--t-xs); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(40px) scale(.96); } }

@media (max-width: 560px) {
  .toasts { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
  .toast { min-width: 0; max-width: none; }
}

/* ============================================================
   Pie de página
   ============================================================ */
.footer {
  position: relative;
  background: var(--g-noche);
  color: rgba(247, 243, 238, .78);
  padding-top: var(--s-10);
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--s-8) var(--s-6);
  padding-bottom: var(--s-8);
}
.footer__marca .marca__nombre { color: var(--c-lino); font-size: 1.3rem; }
.footer__marca .marca__bajada { color: rgba(231, 201, 154, .65); }
.footer__marca .marca__sello { border-color: rgba(231, 201, 154, .55); }
.footer__marca .marca__sello span { color: var(--c-laton-claro); }
.footer__marca .marca__sello::after { border-color: rgba(231, 201, 154, .22); }
.footer__lema {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.22rem;
  color: rgba(247, 243, 238, .62);
  max-width: 30ch;
  line-height: 1.5;
}
.footer__titulo {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-laton-claro);
  margin-bottom: var(--s-4);
}
.footer__lista { display: grid; gap: var(--s-2); }
.footer__lista a {
  font-size: var(--t-sm);
  color: rgba(247, 243, 238, .68);
  transition: color var(--d-rapido), padding-left var(--d-medio) var(--e-salida);
}
.footer__lista a:hover { color: var(--c-laton-claro); padding-left: 6px; }

.footer__pago { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.footer__pago span {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(247, 243, 238, .16);
  border-radius: var(--r-sm);
  color: rgba(247, 243, 238, .55);
}

.footer__base {
  border-top: 1px solid rgba(247, 243, 238, .1);
  padding-block: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: rgba(247, 243, 238, .45);
}
.footer__base a:hover { color: var(--c-laton-claro); }

/* Firma tejida: hilos decorativos al pie */
.footer__hilos {
  position: absolute;
  bottom: -40px; left: 50%;
  translate: -50% 0;
  width: min(1100px, 130%);
  opacity: .16;
  pointer-events: none;
}

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__base { justify-content: center; text-align: center; }
}

/* ============================================================
   Botón flotante de WhatsApp
   ============================================================ */
.wa-flotante {
  position: fixed;
  bottom: var(--s-5); left: var(--s-5);
  z-index: var(--z-sticky);
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--c-noche);
  color: var(--c-laton-claro);
  border-radius: 50%;
  box-shadow: var(--sh-3);
  transition: transform var(--d-medio) var(--e-elastico),
              opacity var(--d-medio) var(--e-suave),
              background var(--d-rapido);
}
.wa-flotante:hover { transform: scale(1.08) translateY(-2px); background: var(--c-noche-3); }
.wa-flotante svg { width: 24px; height: 24px; }
.wa-flotante::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(185, 139, 78, .45);
  border-radius: 50%;
  animation: pulso-suave 3s ease-in-out infinite;
}
@media (max-width: 560px) { .wa-flotante { width: 46px; height: 46px; bottom: var(--s-4); left: var(--s-4); } }

/* La barra de compra pegajosa ocupa el borde inferior: el botón
   flotante se retira para no quedar encima de ella. */
body:has(.barra-compra.is-visible) .wa-flotante {
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}