/* ==========================================================================
   STICKA CALCOS — sistema de diseño
   Estructura y componentes calcados de la referencia (drool-art.com),
   con la identidad de Sticka: negro, hueso y amarillo señalización.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* marca */
  --negro: #0b0b0b;
  --negro-80: rgb(11 11 11 / 0.8);
  --negro-55: rgb(11 11 11 / 0.55);
  --negro-30: rgb(11 11 11 / 0.3);
  --hueso: #f7f4ec;
  --amarillo: #ffe600;
  --amarillo-oscuro: #e6cf00;

  /* acentos de los calcos */
  --naranja: #ff5c1a;
  --verde: #7cff2f;
  --celeste: #19c8ff;
  --fucsia: #ff2d8a;
  --rosa: #ffb3d9;

  /* superficies */
  --bg: var(--hueso);
  --bg-2: #efeada;
  --bg-3: #e6e0cf;
  --surface: #ffffff;
  --linea: rgb(11 11 11 / 0.1);
  --linea-fuerte: rgb(11 11 11 / 0.22);

  /* tipografía */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;

  /* layout */
  --max: 1480px;
  --gutter: 20px;
  --radio: 4px;
  --radio-lg: 10px;

  --header-h: 68px;
  --anuncio-h: 38px;

  --sombra: 0 2px 10px rgb(11 11 11 / 0.08);
  --sombra-alta: 0 18px 50px rgb(11 11 11 / 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--negro);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

::selection {
  background: var(--amarillo);
  color: var(--negro);
}

/* ---------------------------------------------------------------- utilidades */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.h-xxl {
  font-size: clamp(2.75rem, 11vw, 7.5rem);
}
.h-xl {
  font-size: clamp(2rem, 6vw, 4rem);
}
.h-l {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.h-m {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

.centro {
  text-align: center;
}

.mark {
  background: var(--amarillo);
  padding: 0 0.12em;
}

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primario {
  background: var(--negro);
  color: var(--hueso);
}
.btn--primario:hover {
  background: #353535;
}

.btn--amarillo {
  background: var(--amarillo);
  color: var(--negro);
}
.btn--amarillo:hover {
  background: var(--amarillo-oscuro);
}

.btn--linea {
  border: 2px solid var(--negro);
  color: var(--negro);
}
.btn--linea:hover {
  background: var(--negro);
  color: var(--hueso);
}

.btn--claro {
  background: var(--hueso);
  color: var(--negro);
}
.btn--claro:hover {
  background: #fff;
}

.btn--bloque {
  width: 100%;
}

.btn--chico {
  min-height: 38px;
  padding: 0 1rem;
  font-size: var(--fs-xs);
}

.link-sub {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.18s var(--ease);
}
.link-sub:hover {
  opacity: 0.6;
}

/* =============================================================== barra anuncios */

.anuncio {
  background: var(--negro);
  color: var(--hueso);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.anuncio__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--anuncio-h);
}

.anuncio__rot {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.anuncio__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: clamp(0.625rem, 2.8vw, 0.75rem);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  font-weight: 600;
}

.anuncio__msg.is-activo {
  opacity: 1;
  transform: translateY(0);
}

.anuncio__msg.is-saliendo {
  opacity: 0;
  transform: translateY(-100%);
}

.anuncio__msg b {
  color: var(--amarillo);
}

.anuncio__lado {
  display: none;
  gap: 1.25rem;
  font-weight: 600;
}

.anuncio__lado a:hover {
  color: var(--amarillo);
}

@media (min-width: 900px) {
  .anuncio__lado {
    display: flex;
  }
}

/* ===================================================================== header */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--linea);
}

.header__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

/* --- logo / wordmark de fallback --- */

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

.logo img {
  height: 30px;
  width: auto;
  display: block;
}

.logo__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.logo__marca {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.logo__sub {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--negro-55);
}

.logo__estrella {
  color: var(--amarillo);
  -webkit-text-stroke: 1px var(--negro);
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .logo__marca {
    font-size: 1.75rem;
  }
  .logo img {
    height: 36px;
  }
}

/* --- nav --- */

.nav {
  display: none;
  justify-self: center;
}

.nav__lista {
  display: flex;
  gap: 1.75rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: var(--header-h);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 2px;
  background: var(--negro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

.nav__item:hover .nav__link::after,
.nav__link.is-activo::after {
  transform: scaleX(1);
}

.nav__caret {
  width: 9px;
  transition: transform 0.22s var(--ease);
}

.nav__item:hover .nav__caret {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }
}

/* --- mega menú --- */

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: min(820px, calc(100vw - 2 * var(--gutter)));
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__titulo {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--negro-55);
  margin-bottom: 0.9rem;
}

.mega__links {
  display: grid;
  gap: 0.6rem;
}

.mega__links a {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  transition: color 0.16s var(--ease);
}

.mega__links a:hover {
  color: var(--naranja);
}

.mega__links small {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--negro-55);
}

.mega__promo {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--bg-2);
  min-height: 210px;
}

.mega__promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__promo span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- acciones del header --- */

.acciones {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: end;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background 0.16s var(--ease);
}

.icon-btn:hover {
  background: rgb(11 11 11 / 0.07);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.icon-btn__badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--naranja);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transform: scale(0);
  transition: transform 0.22s var(--ease);
}

.icon-btn__badge.is-visible {
  transform: scale(1);
}

.burger {
  display: grid;
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

/* ======================================================= drawer nav (mobile) */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(11 11 11 / 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}

.overlay.is-abierto {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: var(--sombra-alta);
  transition: transform 0.34s var(--ease);
}

.drawer--izq {
  left: 0;
  transform: translateX(-102%);
}
.drawer--der {
  right: 0;
  transform: translateX(102%);
}

.drawer.is-abierto {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--linea);
}

.drawer__head h2 {
  font-size: 1.25rem;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem var(--gutter);
}

.drawer__foot {
  padding: 1.1rem var(--gutter) 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--bg);
}

.menu-movil a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--display);
  font-size: 1.4rem;
  text-transform: uppercase;
}

.menu-movil a small {
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--naranja);
}

/* ========================================================= overlay de búsqueda */

.buscador {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--linea);
  transform: translateY(-105%);
  transition: transform 0.32s var(--ease);
  max-height: 100vh;
  overflow-y: auto;
}

.buscador.is-abierto {
  transform: translateY(0);
}

.buscador__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--linea);
}

.buscador__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  text-transform: uppercase;
}

.buscador__input::placeholder {
  color: var(--negro-30);
}

.buscador__input:focus {
  outline: none;
}

.buscador__cuerpo {
  padding-block: 1.5rem 2.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .buscador__cuerpo {
    grid-template-columns: 260px 1fr;
    gap: 3rem;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.tag:hover,
.tag.is-activo {
  background: var(--negro);
  color: var(--hueso);
  border-color: var(--negro);
}

.resultados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .resultados {
    grid-template-columns: repeat(4, 1fr);
  }
}

.res-vacio {
  grid-column: 1 / -1;
  color: var(--negro-55);
  font-size: var(--fs-sm);
}

/* ======================================================================= hero */

.hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: flex-end;
  color: var(--hueso);
  background: var(--negro);
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
}

/* El <picture> tiene que ocupar la caja entera: si no, el <img> se queda con
   la altura de linea del inline y la foto aparece chica y arriba. */
.hero__fondo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* La foto ya viene recortada al alto del hero desde tools/prepare_assets.py
   (16:9 para desktop, 9:16 para mobile), asi que el `cover` casi no descarta
   nada y no hace falta corregir el encuadre con `object-position`. */
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* La foto nueva es clara y esta llena de calcos de colores, asi que el velo
   tiene que ser mas fuerte que con la anterior o el texto se pierde. En mobile
   el bloque de texto ocupa casi todo el alto, por eso el degrade tapa mas
   arriba; en desktop el texto se apoya abajo y se puede dejar ver mas foto. */
.hero__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(11 11 11 / 0.95) 0%,
    rgb(11 11 11 / 0.82) 45%,
    rgb(11 11 11 / 0.45) 100%
  );
}

@media (min-width: 760px) {
  .hero__fondo::after {
    background: linear-gradient(
      to top,
      rgb(11 11 11 / 0.94) 0%,
      rgb(11 11 11 / 0.66) 48%,
      rgb(11 11 11 / 0.22) 100%
    );
  }
}

.hero__in {
  position: relative;
  width: 100%;
  padding-block: 3rem 3.25rem;
  display: grid;
  gap: 1.25rem;
}

/* Todo el bloque de texto se apoya sobre una foto llena de calcos de colores.
   El velo solo no alcanza para los cuerpos chicos: la sombra les despega el
   contorno del fondo sin que se note como sombra. */
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.55);
}

/* El chiste del rating sólo entra cuando hay ancho. En celular el renglón se
   queda con las estrellas y el número, que es lo que valida; la frase larga
   empujaría el bloque a dos líneas justo arriba del titular. */
.hero__rating-nota {
  display: none;
}

@media (min-width: 760px) {
  .hero__rating-nota {
    display: inline;
  }
  .hero__rating-nota::before {
    content: '· ';
    color: rgb(247 244 236 / 0.5);
  }
}

.estrellas {
  color: var(--amarillo);
  letter-spacing: 0.1em;
}

.hero h1 {
  max-width: 17ch;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}

.hero h1 em {
  font-style: normal;
  color: var(--amarillo);
}

.hero__bajada {
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: rgb(247 244 236 / 0.85);
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.6);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.hero__precio {
  font-size: var(--fs-sm);
  color: rgb(247 244 236 / 0.7);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.55);
}

/* --------------------------------------------------------------- tira marquesina */

.tira {
  background: var(--amarillo);
  color: var(--negro);
  border-block: 2px solid var(--negro);
  overflow: hidden;
}

.tira__pista {
  display: flex;
  width: max-content;
  animation: desliza 32s linear infinite;
}

.tira__grupo {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.7rem 1.25rem;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tira__grupo span::before {
  content: '★ ';
  color: var(--negro-55);
}

@keyframes desliza {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tira__pista {
    animation: none;
  }
}

/* ------------------------------------------------------------ tira de confianza */

.confianza {
  border-bottom: 1px solid var(--linea);
  background: var(--bg-2);
}

.confianza__in {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
  padding-block: 1.75rem;
  text-align: center;
}

/* Son dos ítems y van siempre en una línea. En pantalla grande no se estiran
   a los extremos: se achica el contenedor para que queden juntos y centrados,
   si no la tira parece vacía en el medio. */
@media (min-width: 768px) {
  .confianza__in {
    max-width: 620px;
    gap: 1rem 2.5rem;
  }
}

.confianza__item svg {
  width: 26px;
  height: 26px;
  margin-inline: auto;
  margin-bottom: 0.5rem;
}

.confianza__item b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
}

.confianza__item small {
  color: var(--negro-55);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------- visto en (logos) */

.visto {
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--linea);
}

.visto__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  margin-top: 1rem;
}

.visto__lista span {
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  color: var(--negro-30);
  transition: color 0.2s var(--ease);
}

.visto__lista span:hover {
  color: var(--negro);
}

/* =================================================================== secciones */

.seccion {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.seccion--borde {
  border-bottom: 1px solid var(--linea);
}

.seccion--gris {
  background: var(--bg-2);
}

.seccion--negra {
  background: var(--negro);
  color: var(--hueso);
}

.seccion--negra .seccion__sub,
.seccion--negra .producto__autor {
  color: rgb(247 244 236 / 0.6);
}

.seccion__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.seccion__head > div {
  min-width: 0;
}

.seccion__sub {
  margin-top: 0.4rem;
  color: var(--negro-55);
  font-size: var(--fs-sm);
}

.seccion__nav {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .seccion__nav {
    display: flex;
  }
}

.flecha {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), opacity 0.16s;
}

.flecha:hover {
  background: var(--negro);
  color: var(--hueso);
  border-color: var(--negro);
}

.flecha[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.flecha svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 768px) {
  .flecha { width: 42px; height: 42px; }
  .flecha svg { width: 16px; height: 16px; }
}

/* segundo pack: imagen del otro lado en desktop */
@media (min-width: 900px) {
  .pack-banda--inv .pack-banda__media { order: 2; }
}

.seccion--negra .incluye span { color: var(--hueso); }
.seccion--negra .pdp__precio { color: var(--hueso); }
.seccion--negra .pdp__precio small { color: rgb(247 244 236 / 0.6); }

/* arrastre con mouse: el cursor avisa que se puede mover */
.carrusel__pista.puede-arrastrar { cursor: grab; }
.carrusel__pista.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.carrusel__pista.arrastrando a,
.carrusel__pista.arrastrando img { pointer-events: none; }

.seccion--negra .flecha {
  border-color: rgb(247 244 236 / 0.3);
}
.seccion--negra .flecha:hover {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--amarillo);
}

/* ======================================================= carrusel de productos */

.carrusel {
  position: relative;
}

.carrusel__pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__pista > * {
  flex: 0 0 72%;
  scroll-snap-align: start;
}

@media (min-width: 560px) {
  .carrusel__pista > * {
    flex-basis: 44%;
  }
}

@media (min-width: 900px) {
  .carrusel__pista > * {
    flex-basis: 30%;
  }
}

@media (min-width: 1200px) {
  .carrusel__pista {
    gap: 1.25rem;
  }
  .carrusel__pista > * {
    flex-basis: 23%;
  }
}

/* ------------------------------------------------------------ tarjeta producto */

.producto {
  position: relative;
  display: flex;
  flex-direction: column;
}

.producto__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.producto__link {
  display: block;
  width: 100%;
  height: 100%;
}

.producto__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform 0.4s var(--ease);
}

.producto:hover .producto__media img {
  transform: scale(1.05);
}

.producto__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
}

.badge {
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge--nuevo {
  background: var(--negro);
  color: var(--hueso);
}
.badge--pack {
  background: var(--amarillo);
  color: var(--negro);
}
.badge--top {
  background: var(--naranja);
  color: #fff;
}

.producto__quick {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.producto:hover .producto__quick,
.producto:focus-within .producto__quick {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .producto__quick {
    opacity: 1;
    transform: none;
  }
}

.producto__info {
  padding-top: 0.75rem;
  display: grid;
  gap: 2px;
}

.producto__nombre {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.producto__autor {
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

.producto__precio {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.producto__precio s {
  color: var(--negro-30);
  font-weight: 500;
}

.producto__precio .ahorro {
  color: var(--naranja);
  font-weight: 700;
}

/* --------------------------------------------------------- grilla de colecciones */

.grilla-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .grilla-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.col-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--negro);
}

.col-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.col-card:hover img {
  transform: scale(1.06);
  opacity: 0.55;
}

.col-card__txt {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  color: var(--hueso);
  background: linear-gradient(to top, rgb(11 11 11 / 0.85), transparent);
}

.col-card__txt h3 {
  font-size: 1.25rem;
}

.col-card__txt p {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: rgb(247 244 236 / 0.75);
}

/* -------------------------------------------------------------- banda de packs */

.pack-banda {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .pack-banda {
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
  }
}

.pack-banda__media {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--linea);
}

.pack-banda__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pack-banda__off {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--amarillo);
  border: 2px solid var(--negro);
  font-family: var(--display);
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  rotate: -8deg;
}

.pack-banda__off b {
  display: block;
  font-size: 1.5rem;
}

.incluye {
  display: grid;
  gap: 0.5rem;
  margin-block: 1.25rem;
}

.incluye li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
}

/* La fila final del tipo "+7 diseños más" no lleva miniatura: se indenta a mano
   para que arranque en la misma columna que los nombres de arriba. */
.incluye .li--resto {
  padding-left: calc(44px + 0.6rem);
}

.incluye img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 3px;
}

/* ------------------------------------------------------------------- opiniones */

.opiniones {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .opiniones {
    grid-template-columns: repeat(3, 1fr);
  }
}

.opinion {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.opinion p {
  font-size: var(--fs-base);
}

.opinion__pie {
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

.opinion__pie b {
  display: block;
  color: var(--negro);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------- galería */

.insta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media (min-width: 640px) {
  .insta {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .insta {
    grid-template-columns: repeat(6, 1fr);
  }
}

.insta a {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--linea);
  overflow: hidden;
}

.insta img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform 0.4s var(--ease);
}

.insta a:hover img {
  transform: scale(1.08);
}

/* ------------------------------------------------------------------ newsletter */

.news {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .news {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.news__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.news__form input {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 0 1rem;
  background: var(--surface);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
}

.news__legal {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

.seccion--negra .news__form input {
  background: rgb(247 244 236 / 0.08);
  border-color: rgb(247 244 236 / 0.3);
  color: var(--hueso);
}

.seccion--negra .news__legal {
  color: rgb(247 244 236 / 0.55);
}

.news__ok {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amarillo);
}

/* El error va en naranja y no en rojo puro: sobre el fondo negro de la seccion
   del newsletter un rojo saturado vibra y se lee mal. El naranja de la marca
   contrasta en los dos fondos, el claro y el oscuro. */
.news__err {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--naranja);
}

.seccion--negra .news__err {
  color: #ff8a5c;
}

/* ===================================================================== footer */

.footer {
  background: var(--negro);
  color: var(--hueso);
  padding-block: 2.75rem 1.5rem;
}

.footer__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .footer__cols {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.footer h3 {
  font-size: var(--fs-xs);
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 0.9rem;
  color: rgb(247 244 236 / 0.55);
}

.footer__links {
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-sm);
}

.footer__links a:hover {
  color: var(--amarillo);
}

.footer__marca .logo img {
  height: 46px;
}

.footer__marca p {
  margin-top: 0.9rem;
  max-width: 38ch;
  font-size: var(--fs-sm);
  color: rgb(247 244 236 / 0.65);
}

.socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(247 244 236 / 0.25);
  border-radius: 50%;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.socials a:hover {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--amarillo);
}

.socials svg {
  width: 17px;
  height: 17px;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(247 244 236 / 0.15);
  font-size: var(--fs-xs);
  color: rgb(247 244 236 / 0.55);
}

.footer__legal a:hover {
  color: var(--amarillo);
}

/* =============================================================== carrito drawer */

.carrito__envio {
  padding: 0.9rem var(--gutter);
  background: var(--bg-2);
  border-bottom: 1px solid var(--linea);
  font-size: var(--fs-xs);
  text-align: center;
}

.barra {
  height: 6px;
  margin-top: 0.6rem;
  background: rgb(11 11 11 / 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.barra__fill {
  height: 100%;
  width: 0;
  background: var(--amarillo);
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

.cart-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 0.9rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--linea);
}

.cart-item__img {
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
}

.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.cart-item__nombre {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.cart-item__meta {
  font-size: var(--fs-xs);
  color: var(--negro-55);
  margin-top: 2px;
}

.cart-item__quitar {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--negro-55);
  text-decoration: underline;
}

.cart-item__quitar:hover {
  color: var(--naranja);
}

.cart-item__der {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  align-content: start;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  overflow: hidden;
}

.qty button {
  width: 30px;
  height: 30px;
  font-weight: 700;
  line-height: 1;
}

.qty button:hover {
  background: rgb(11 11 11 / 0.07);
}

.qty span {
  min-width: 26px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.carrito-vacio {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding-block: 3rem;
}

.carrito-vacio p {
  color: var(--negro-55);
  font-size: var(--fs-sm);
  max-width: 32ch;
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.total b {
  font-family: var(--display);
  font-size: 1.5rem;
}

.total small {
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

/* ======================================================== modal "próximamente" */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(11 11 11 / 0.66);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--ease), visibility 0.26s;
}

.modal.is-abierto {
  opacity: 1;
  visibility: visible;
}

.modal__caja {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease);
}

.modal.is-abierto .modal__caja {
  transform: translateY(0) scale(1);
}

.modal__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(11 11 11 / 0.06);
  z-index: 2;
}

.modal__cerrar:hover {
  background: rgb(11 11 11 / 0.14);
}

.modal__cinta {
  padding: 0.6rem 1.5rem;
  background: var(--amarillo);
  border-bottom: 2px solid var(--negro);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.modal__cuerpo {
  padding: 1.75rem;
  display: grid;
  gap: 1rem;
}

.modal__prod {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.modal__prod img {
  width: 68px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}

.modal__prod b {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.modal__prod small {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

.modal h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.modal p {
  color: var(--negro-80);
  font-size: var(--fs-base);
}

.modal__fecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  background: var(--negro);
  color: var(--hueso);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  justify-self: start;
}

.modal__fecha svg { width: 18px; height: 18px; flex: 0 0 auto; }

.modal__acciones {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.modal__nota {
  font-size: var(--fs-xs);
  color: var(--negro-55);
  text-align: center;
}

/* ======================================================================== toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 130;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.8rem 1.25rem;
  background: var(--negro);
  color: var(--hueso);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast svg {
  width: 17px;
  height: 17px;
  color: var(--amarillo);
  flex-shrink: 0;
}

/* ================================================================ tienda (PLP) */

.plp-head {
  padding-block: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  border-bottom: 1px solid var(--linea);
}

.plp-head p {
  margin-top: 0.6rem;
  max-width: 56ch;
  color: var(--negro-55);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  font-size: var(--fs-xs);
  color: var(--negro-55);
}

.breadcrumb a:hover {
  color: var(--negro);
  text-decoration: underline;
}

.plp {
  display: grid;
  gap: 2rem;
  padding-block: 2rem 3.5rem;
}

@media (min-width: 1024px) {
  .plp {
    grid-template-columns: 236px 1fr;
    gap: 2.5rem;
  }
}

.filtros {
  display: none;
  align-content: start;
  gap: 1.5rem;
}

.filtros.is-abierto {
  display: grid;
}

@media (min-width: 1024px) {
  .filtros {
    display: grid;
    position: sticky;
    top: calc(var(--header-h) + 16px);
  }
}

.filtro__titulo {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--linea);
}

.filtro__ops {
  display: grid;
  gap: 0.45rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.check input {
  width: 17px;
  height: 17px;
  accent-color: var(--negro);
  cursor: pointer;
}

.check span {
  flex: 1;
}

.check small {
  color: var(--negro-30);
}

.plp__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.plp__count {
  font-size: var(--fs-sm);
  color: var(--negro-55);
}

.select {
  position: relative;
}

.select select {
  appearance: none;
  min-height: 42px;
  padding: 0 2.25rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  rotate: 45deg;
  translate: 0 -70%;
  pointer-events: none;
}

.grilla-prod {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .grilla-prod {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .grilla-prod {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem 1.25rem;
  }
}

.sin-resultados {
  grid-column: 1 / -1;
  padding-block: 3rem;
  text-align: center;
  color: var(--negro-55);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--negro);
  color: var(--hueso);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.chip b {
  font-size: 1rem;
  line-height: 1;
}

.btn-filtros {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .btn-filtros {
    display: none;
  }
}

/* ================================================================ producto (PDP) */

.pdp {
  display: grid;
  gap: 1.75rem;
  padding-block: 1.5rem 3rem;
}

@media (min-width: 900px) {
  .pdp {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.pdp__galeria {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .pdp__galeria {
    position: sticky;
    top: calc(var(--header-h) + 16px);
  }
}

.pdp__principal {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.pdp__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
}

/* Un pack trae 6 miniaturas (la tapa + los 5 calcos) y antes se deslizaban:
   la última quedaba cortada fuera de pantalla y parecía que faltaba un calco.
   Ahora entran todas en una fila, repartiendo el ancho entre `--thumbs`. */
/* Autofit en vez de una fila fija: el Pack Justicia Divina trae 14 miniaturas y
   a una sola fila quedaban de 20px. Así se acomodan en varias filas y entran
   todas, sin el recorte silencioso que tenía el scroller original. */
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 0.5rem;
}

.pdp__thumbs button {
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 0.16s var(--ease);
}

.pdp__thumbs button.is-activo {
  border-color: var(--negro);
  border-width: 2px;
}

.pdp__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.pdp__info {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.pdp__info h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
}

.pdp__tagline {
  font-size: var(--fs-lg);
  color: var(--negro-55);
}

.pdp__precio {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 2rem;
}

.pdp__precio small {
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--negro-55);
}

/* Precio de pack: el original tachado al lado del nuevo y el ahorro en naranja.
   El detalle baja a su propia linea (`flex-basis: 100%`) para que en 360px no
   se apile mal al lado del precio grande. */
.pdp__precio { flex-wrap: wrap; }

.pdp__precio s {
  font-family: var(--body);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--negro-30);
}

.pdp__precio .ahorro {
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--naranja);
  background: rgb(255 92 26 / 0.12);
  border-radius: 999px;
  padding: 0.22rem 0.5rem;
}

.pdp__precio small { flex-basis: 100%; }

/* ------------------------------------------------------ contador de la promo */

/* Pildora con el reloj y los digitos. `tabular-nums` evita que el ancho baile
   cada vez que cambian los segundos. */
.promo-timer {
  display: inline-flex;
  align-items: center;
  /* El contenedor del PDP y el de las bandas son grid/flex en columna, y ahi un
     hijo se estira de lado a lado por defecto. La pildora tiene que quedar del
     ancho de su texto, asi que se la fija a `fit-content` y se la ancla al
     inicio en los dos modelos de layout. */
  width: fit-content;
  align-self: start;
  justify-self: start;
  gap: 0.45rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
}

.promo-timer svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--naranja);
}

.promo-timer b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.seccion--negra .promo-timer {
  background: rgb(247 244 236 / 0.08);
  border-color: rgb(247 244 236 / 0.25);
  color: var(--hueso);
}

.seccion--negra .pdp__precio s { color: rgb(247 244 236 / 0.45); }

/* Mobile: cantidad arriba, CTA a todo el ancho (pulgar). Desktop: en una fila. */
.pdp__compra {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.pdp__compra .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .pdp__compra {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

/* Barra de compra fija al pie en mobile: el precio y el CTA siempre a mano. */
.pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--gutter);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--linea-fuerte);
  box-shadow: 0 -6px 24px rgb(11 11 11 / 0.1);
  transform: translateY(105%);
  transition: transform 0.3s var(--ease);
}

.pdp-sticky.is-visible {
  transform: translateY(0);
}

.pdp-sticky__precio {
  display: grid;
  line-height: 1.1;
}

.pdp-sticky__precio b {
  font-family: var(--display);
  font-size: 1.25rem;
}

.pdp-sticky__precio small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--negro-55);
}

.pdp-sticky .btn {
  flex: 1;
}

@media (min-width: 900px) {
  .pdp-sticky {
    display: none;
  }
}

/* Deja aire al final de la ficha para que la barra fija no tape contenido. */
body.tiene-sticky {
  padding-bottom: 76px;
}

@media (min-width: 900px) {
  body.tiene-sticky {
    padding-bottom: 0;
  }
}

.pdp__specs {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: var(--fs-sm);
}

.pdp__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.pdp__specs dt,
.pdp__specs span:first-child {
  color: var(--negro-55);
}

.acordeon {
  border-top: 1px solid var(--linea);
}

.acordeon__item {
  border-bottom: 1px solid var(--linea);
}

.acordeon__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 0;
  font-family: var(--display);
  font-size: 1.05rem;
  text-align: left;
  text-transform: uppercase;
}

.acordeon__btn b {
  font-family: var(--body);
  font-size: 1.25rem;
  font-weight: 400;
  transition: rotate 0.22s var(--ease);
}

.acordeon__item.is-abierto .acordeon__btn b {
  rotate: 45deg;
}

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}

.acordeon__item.is-abierto .acordeon__panel {
  grid-template-rows: 1fr;
}

.acordeon__panel > div {
  overflow: hidden;
}

.acordeon__panel p,
.acordeon__panel ul {
  padding-bottom: 1rem;
  font-size: var(--fs-sm);
  color: var(--negro-80);
}

.acordeon__panel li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.3rem;
}

.acordeon__panel li::before {
  content: '★';
  position: absolute;
  left: 0;
  color: var(--amarillo);
  -webkit-text-stroke: 0.5px var(--negro-30);
}

/* ================================================================== dashboard */

body.admin {
  background: #101014;
  color: #e9e9ee;
  font-size: var(--fs-sm);
}

.admin a {
  color: var(--amarillo);
}

/* Cualquier `display` de clase le gana al `[hidden]` del navegador, así que el
   panel y el login quedaban los dos visibles al entrar. */
.admin [hidden] {
  display: none !important;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.login {
  width: min(380px, 100%);
  padding: 2rem;
  background: #1a1a21;
  border: 1px solid #2c2c36;
  border-radius: var(--radio-lg);
  display: grid;
  gap: 0.9rem;
}

.login h1 {
  font-size: 1.75rem;
  color: #fff;
}

.login p {
  font-size: var(--fs-xs);
  color: #8e8e9c;
}

.login input {
  min-height: 46px;
  padding: 0 1rem;
  background: #101014;
  border: 1px solid #333340;
  border-radius: var(--radio);
  color: #fff;
}

.login .err {
  color: #ff6b6b;
  font-size: var(--fs-xs);
  min-height: 1em;
}

.admin-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem var(--gutter);
  background: #15151b;
  border-bottom: 1px solid #2c2c36;
}

.admin-top h1 {
  font-size: 1.25rem;
  color: #fff;
  margin-right: auto;
}

.admin-top h1 small {
  display: block;
  font-family: var(--body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #8e8e9c;
}

.rango {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.rango input[type='date'],
.rango select {
  min-height: 36px;
  padding: 0 0.6rem;
  background: #101014;
  border: 1px solid #333340;
  border-radius: var(--radio);
  color: #e9e9ee;
  font-size: var(--fs-xs);
}

.btn-admin {
  min-height: 36px;
  padding: 0 0.9rem;
  border-radius: var(--radio);
  background: var(--amarillo);
  color: #101014;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-admin--ghost {
  background: transparent;
  border: 1px solid #333340;
  color: #e9e9ee;
}

.admin-main {
  padding: 1.25rem var(--gutter) 3rem;
  display: grid;
  gap: 1.25rem;
}

.kpis {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Son 6 KPIs: a 5 columnas el ultimo quedaba solo en una fila vacia. A 3 y a 6
   las dos filas cierran justas. */
@media (min-width: 1240px) {
  .kpis {
    grid-template-columns: repeat(6, 1fr);
  }
}

.kpi {
  padding: 1rem 1.1rem;
  background: #1a1a21;
  border: 1px solid #2c2c36;
  border-radius: var(--radio-lg);
}

.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.05;
  color: #fff;
}

.kpi span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8e8e9c;
}

.kpi small {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  color: #6f6f80;
}

.kpi--destacado {
  background: linear-gradient(140deg, #2a2a12, #1a1a21);
  border-color: #4a4a1e;
}

.kpi--destacado b {
  color: var(--amarillo);
}

.panel {
  padding: 1.1rem 1.25rem 1.25rem;
  background: #1a1a21;
  border: 1px solid #2c2c36;
  border-radius: var(--radio-lg);
  min-width: 0;
}

.panel h2 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.2rem;
}

.panel .nota {
  font-size: var(--fs-xs);
  color: #8e8e9c;
  margin-bottom: 1rem;
}

.panel__graf {
  position: relative;
  height: 280px;
}

.panel__graf--chico {
  height: 230px;
}

.cols-2 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1000px) {
  .cols-2 {
    grid-template-columns: 1.4fr 1fr;
  }
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.tabla th,
.tabla td {
  padding: 0.55rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #26262f;
  white-space: nowrap;
}

.tabla th {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e8e9c;
}

.tabla td.num,
.tabla th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla tbody tr:hover {
  background: #20202a;
}

.tabla__scroll {
  overflow-x: auto;
}

.pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill--individual {
  background: #243a4d;
  color: #8ed0ff;
}

.pill--pack {
  background: #4a4a1e;
  color: var(--amarillo);
}

.rank-bar {
  position: relative;
  height: 20px;
  min-width: 120px;
  background: #26262f;
  border-radius: 3px;
  overflow: hidden;
}

.rank-bar i {
  display: block;
  height: 100%;
  background: var(--amarillo);
}

.vacio {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #6f6f80;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ impresión */

@media print {
  .header,
  .anuncio,
  .footer,
  .drawer,
  .overlay,
  .modal {
    display: none !important;
  }
}