/* Componentes compartidos: botón, tarjeta, tarjeta de producto, festón, encabezado, pie,
   WhatsApp flotante y página 404. Depende de tokens.css y base.css.
   Puntos de ruptura: 48rem (768 px); el carrusel de productos usa además 64rem (1024 px). */

/* ---------- Botón (píldora) ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-3) var(--espacio-5);
  border: var(--grosor-borde) solid transparent;
  border-radius: var(--radio-pildora);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton--primario {
  background: var(--accion);
  color: var(--texto-sobre-marca);
}

.boton--primario:hover {
  background: var(--accion-activa);
}

.boton--secundario {
  border-color: var(--accion);
  background: transparent;
  color: var(--accion-activa);
}

.boton--secundario:hover {
  background: var(--accion-activa);
  color: var(--texto-sobre-marca);
}

.boton--claro {
  background: var(--color-blanco);
  color: var(--accion-activa);
}

.boton--claro:hover {
  background: var(--fondo-destacado);
}

/* ---------- Tarjeta ---------- */
.tarjeta {
  padding: var(--espacio-5);
  border-radius: var(--radio-lg);
  background: var(--fondo-suave);
}

/* ---------- Tarjeta de producto ----------
   Foto cuadrada arriba; nombre, descripción y botones de compra abajo.
   Los botones quedan siempre al fondo para que las tarjetas se alineen. */
.producto {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--color-blanco);
}

.producto__imagen {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.producto__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
}

.producto__nombre {
  color: var(--texto-marca);
  font-family: var(--fuente-display);
  font-size: var(--texto-grande);
  font-weight: var(--peso-fuerte);
}

.producto__descripcion {
  color: var(--texto-suave);
  font-size: var(--texto-chico);
}

.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: auto;
  padding-top: var(--espacio-3);
}

.producto__boton {
  flex: 1 1 auto;
  padding-inline: var(--espacio-4);
  font-size: var(--texto-chico);
}

/* ---------- Festón de papel picado ----------
   Remate inferior de una banda: semicírculos del mismo color que cuelgan
   sobre la banda siguiente. La banda define --feston-color. */
.feston {
  position: relative;
  z-index: 1;
}

.feston::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: var(--feston);
  background: var(--feston-color, var(--fondo));
  -webkit-mask: radial-gradient(circle at 50% 0, #000 calc(var(--feston) - 0.5px), transparent var(--feston)) 50% 0 / calc(var(--feston) * 2) 100% repeat-x;
  mask: radial-gradient(circle at 50% 0, #000 calc(var(--feston) - 0.5px), transparent var(--feston)) 50% 0 / calc(var(--feston) * 2) 100% repeat-x;
  pointer-events: none;
}

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--grosor-borde) solid var(--borde);
  background: var(--fondo);
}

.encabezado__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-5);
  min-height: var(--alto-encabezado);
}

.encabezado__marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: var(--texto-marca);
  text-decoration: none;
}

.encabezado__logo {
  width: auto;
  height: var(--logo-alto);
}

.encabezado__nombre {
  font-family: var(--fuente-display);
  font-size: var(--texto-tarjeta);
  font-weight: var(--peso-fuerte);
}

.encabezado__alternar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  padding: 0;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  cursor: pointer;
}

.encabezado__alternar[hidden] {
  display: none;
}

.encabezado__alternar-icono,
.encabezado__alternar-icono::before,
.encabezado__alternar-icono::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: var(--radio-pildora);
  background: var(--texto-marca);
}

.encabezado__alternar-icono {
  position: relative;
}

.encabezado__alternar-icono::before,
.encabezado__alternar-icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.encabezado__alternar-icono::before {
  top: -0.4375rem;
}

.encabezado__alternar-icono::after {
  top: 0.4375rem;
}

.encabezado__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-5);
}

.encabezado__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espacio-5);
}

.encabezado__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo-tactil);
  min-height: var(--objetivo-tactil);
  color: var(--texto);
  font-size: var(--texto-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.encabezado__enlace:hover {
  color: var(--texto-marca);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 47.99rem) {
  /* Con JavaScript el menú se pliega bajo el botón; sin él queda visible. */
  .js .encabezado__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--espacio-4);
  }

  .js .encabezado__nav[data-abierto] {
    display: flex;
  }

  .js .encabezado__lista {
    flex-direction: column;
  }

  .js .encabezado__enlace {
    justify-content: flex-start;
  }

  /* En celular el acceso a WhatsApp es el botón flotante. */
  .encabezado__cta {
    display: none;
  }
}

@media (min-width: 48rem) {
  .encabezado__alternar {
    display: none;
  }
}

/* ---------- Pie ---------- */
.pie {
  padding-block: var(--espacio-7);
  background: var(--fondo-marca);
  color: var(--texto-sobre-marca);
  font-size: var(--texto-pie);
}

.pie :focus-visible {
  outline-color: var(--texto-sobre-marca);
}

.pie__interior {
  display: grid;
  gap: var(--espacio-4);
}

.pie__nombre {
  font-family: var(--fuente-display);
  font-size: var(--texto-tarjeta);
  font-weight: var(--peso-fuerte);
}

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espacio-5);
}

.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: inherit;
  font-size: var(--texto-chico);
  text-underline-offset: 0.3em;
}

@media (max-width: 47.99rem) {
  /* Deja libre el espacio que ocupa el botón flotante. */
  .pie {
    padding-bottom: calc(var(--espacio-7) + var(--objetivo-tactil) + var(--espacio-4));
  }
}

/* ---------- WhatsApp flotante (solo celular) ---------- */
.whatsapp-flotante {
  position: fixed;
  right: var(--espacio-4);
  bottom: var(--espacio-4);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-3) var(--espacio-5);
  border: 2px solid var(--color-blanco);
  border-radius: var(--radio-pildora);
  background: var(--accion);
  color: var(--texto-sobre-marca);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  text-decoration: none;
}

@media (max-width: 47.99rem) {
  /* Al navegar con teclado, lo enfocado se detiene por encima del botón flotante. */
  html {
    scroll-padding-bottom: calc(var(--objetivo-tactil) + var(--espacio-7));
  }
}

@media (min-width: 48rem) {
  .whatsapp-flotante {
    display: none;
  }
}

/* ---------- Página 404 ---------- */
.error404 {
  padding-block: var(--espacio-seccion);
}

.error404__interior {
  display: grid;
  justify-items: start;
  gap: var(--espacio-5);
}

.error404__titulo {
  color: var(--texto-marca);
  font-family: var(--fuente-display);
  font-size: var(--texto-titulo);
  font-weight: var(--peso-fuerte);
}

.error404__texto {
  max-width: var(--ancho-texto);
  font-size: var(--texto-grande);
}