/* ==========================================================================
   Estilos propios: cabecera, pie y sustitutos de los widgets de GemPages.
   Se carga despues de base.css y del CSS de cada pagina, asi que aqui es
   donde se corrige lo que dependia del runtime de GemPages.
   ========================================================================== */

:root {
  --x10-negro:      #121212;
  --x10-negro-2:    #1c1c1c;
  --x10-linea:      #2e2e2e;
  --x10-texto:      #f4f2ee;
  --x10-texto-suave:#9a968f;
  --x10-ambar:      #ffcb03;
  --x10-granate:    #5a0000;

  --x10-cab-alto:   64px;
  --x10-duracion:   320ms;
  --x10-curva:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- Cabecera */

/* La cabecera y el pie son maquetacion nuestra: fuera del ambito .gps de
   GemPages no heredan ninguna familia y caian al serif del navegador. */
.cab,
.pie,
.migas,
.pag,
.cta-movil,
.carrito,
.checkout,
.x10-burbuja {
  font-family: var(--x10-ff-cuerpo);
}

.cab {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--x10-negro);
  border-bottom: 1px solid var(--x10-linea);
}

.cab__interior {
  max-width: 1200px;
  margin: 0 auto;
  min-height: var(--x10-cab-alto);
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: grid;
  /* menú · logo · nav · carrito (el botón de carrito lo inyecta carrito.js) */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
}

.cab__logo { justify-self: center; display: inline-flex; }
.cab__logo img { display: block; height: 40px; width: auto; }

.cab__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  justify-content: flex-end;
}

.cab__nav a {
  color: var(--x10-texto);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}

.cab__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--x10-ambar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--x10-duracion) var(--x10-curva);
}
.cab__nav a:hover::after,
.cab__nav a:focus-visible::after { transform: scaleX(1); }

.cab__menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}
.cab__menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--x10-texto);
  transition: transform var(--x10-duracion) var(--x10-curva),
              opacity var(--x10-duracion) var(--x10-curva);
}
.cab__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .cab__interior { grid-template-columns: auto 1fr auto; }
  .cab__menu { display: flex; }
  .cab__logo { justify-self: start; }

  .cab__nav {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--x10-duracion) var(--x10-curva);
  }
  .cab__nav > ul { overflow: hidden; }
  .cab__nav[data-abierto="true"] { grid-template-rows: 1fr; }

  .cab__nav ul {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
  }
  .cab__nav li + li { border-top: 1px solid var(--x10-linea); }
  .cab__nav a { display: block; padding: 0.9rem 0; }
}

/* --------------------------------------------------------------------- Pie */

.pie {
  background: var(--x10-negro);
  color: var(--x10-texto);
  border-top: 1px solid var(--x10-linea);
  margin-top: 0;
}

.pie__interior {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.pie__marca img { display: block; height: 38px; width: auto; margin-bottom: 1rem; }
.pie__lema {
  margin: 0;
  color: var(--x10-texto-suave);
  font-size: 0.9rem;
  max-width: 34ch;
}

.pie__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.pie__nav h2 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--x10-ambar);
  margin: 0 0 0.9rem;
  font-weight: 600;
}
.pie__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pie__nav a {
  color: var(--x10-texto-suave);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color var(--x10-duracion) var(--x10-curva);
}
.pie__nav a:hover, .pie__nav a:focus-visible { color: var(--x10-texto); }

.pie__legal {
  border-top: 1px solid var(--x10-linea);
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  text-align: center;
}
/* #5f5c57 daba 2.9:1 sobre el negro — por debajo del 4.5:1 que exige WCAG AA */
.pie__legal p { margin: 0; font-size: 0.78rem; color: var(--x10-texto-suave); }

@media (max-width: 700px) {
  .pie__interior { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Carrusel (sustituye a GemPages)
   El original usaba transforms calculados en JS. Aqui se resuelve con
   scroll-snap nativo: tactil, accesible y sin dependencias.
   -------------------------------------------------------------------------- */

/* Dos generaciones de carrusel conviven en el sitio: gp-carousel-v3 usa
   .gem-slider-wrapper como pista y gp-carousel (el antiguo) usa .gem-slider.
   Ambas se tratan igual. */
.gem-slider-wrapper,
.gem-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  /* Sin scroll-snap y sin scroll-behavior, a proposito.
     El CSS de GemPages deja los slides con scroll-snap-align:none y gana por
     especificidad, asi que declarar scroll-snap-type:mandatory aqui creaba un
     contenedor con snap obligatorio y cero puntos de anclaje validos: el
     navegador clavaba el scroll en el origen y ni las flechas ni el autoplay
     movian nada. El desplazamiento suave lo decide scrollTo() en sitio.js,
     que ademas respeta prefers-reduced-motion. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: none !important;
}
.gem-slider-wrapper::-webkit-scrollbar,
.gem-slider::-webkit-scrollbar { display: none; }

/* Cuantos elementos por vista lo decide sitio.js segun la configuracion
   original del carrusel, escribiendo --x10-porvista en la pista. */
.gem-slider-wrapper > *,
.gem-slider > * {
  flex: 0 0 calc(100% / var(--x10-porvista, 1)) !important;
  width: calc(100% / var(--x10-porvista, 1)) !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* flechas */
.gp-carousel-arrow,
gp-carousel-v3 button,
gp-carousel button {
  cursor: pointer;
}
gp-carousel-v3 button[disabled],
gp-carousel button[disabled] { opacity: 0.35; cursor: default; }

/* puntos, generados por sitio.js */
.gp-carousel-dot-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  /* Los puntos los construye el JS despues del primer pintado: sin reservar
     su alto, el contenedor pasaba de 14 a 22 px y empujaba lo de abajo. */
  min-height: 22px;
}
.x10-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity var(--x10-duracion) var(--x10-curva),
              transform var(--x10-duracion) var(--x10-curva);
}
.x10-punto[aria-current="true"] { opacity: 1; transform: scale(1.35); }

/* ------------------------------------------ Acordeon (sustituye a GemPages) */

.gp-accordion-item_header { cursor: pointer; }
.gp-accordion-item_body {
  display: grid;
}

/* grid-template-rows es una propiedad de maquetacion: animarla al cargar
   contaba como decenas de saltos de diseno. La transicion se enciende una
   vez pintado el estado inicial, asi que solo anima al pulsar. */
gp-accordion[data-x10-animado] .gp-accordion-item_body {
  transition: grid-template-rows 420ms var(--x10-curva);
}
gp-accordion[data-x10-animado] .gp-accordion-item_body > * {
  transition: padding 420ms var(--x10-curva);
}
.gp-accordion-item_body > * {
  overflow: hidden;
  min-height: 0;
}

/* El relleno vertical del hijo no colapsa con la fila del grid: cerrado
   dejaba 14 px de aire y la pregunta no acababa de plegarse. */
.gp-accordion-item_body[data-show="false"] > * { padding-block: 0 !important; }

/* El cuerpo trae grid-template-rows en el atributo style, y un estilo en
   linea gana a cualquier selector: sin !important el acordeon cambiaba de
   estado pero se quedaba siempre cerrado. */
.gp-accordion-item_body[data-show="false"] { grid-template-rows: 0fr !important; }
.gp-accordion-item_body[data-show="true"]  { grid-template-rows: 1fr !important; }

/* ---------------------------------------- Animaciones de aparicion propias */

gp-animation { display: contents; }

/* Sin capa de opacidad: la visibilidad la gobierna GemPages con variables por
   breakpoint (--v / --v-tablet / --v-mobile) y superponer opacidad encima
   acababa ocultando secciones enteras en movil. Ver nota en sitio.js. */

/* Marquee: el original lo movia por JS.
   El !important es necesario: la pista trae la clase gp-w-full (width:100%),
   que si no comprime la cinta al ancho de pantalla y corta los textos. */
.x10-marquee-pista {
  display: flex;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  animation: x10-desplazar 28s linear infinite;
}
/* Los elementos de la cinta no deben encogerse ni partirse. */
.x10-marquee-pista > * {
  flex: 0 0 auto !important;
  white-space: nowrap;
}
@keyframes x10-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.x10-marquee-pista:hover { animation-play-state: paused; }

/* GemPages deja ademas su propia animacion en .rfm-marquee y transforms en
   sus contenedores. Sumados a los nuestros la cinta avanzaba al doble y el
   contenido acababa fuera del recorte: en movil la tira de Instagram se veia
   como una banda vacia. Dentro de nuestra pista manda solo la nuestra. */
.x10-marquee-pista .rfm-marquee { animation: none !important; }
.x10-marquee-pista .rfm-marquee-container,
.x10-marquee-pista .rfm-child { transform: none !important; }

/* ----------------------------------------------------------- Accesibilidad */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--x10-ambar);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gem-slider-wrapper { scroll-behavior: auto; }
  .x10-aparece { opacity: 1; transform: none; transition: none; }
  .x10-marquee-pista, .rfm-marquee { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Cobertura de entrega: va en el pie, así que aparece en todas las páginas del
   país. Cada tienda lista sus ciudades, que las pone el generador. */
.pie__cobertura {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--x10-suave, #9a968f);
}