/* TT Norms reducida a los caracteres que el sitio puede mostrar (latino,
 * latino extendido, puntuacion y flechas, que cubren es/en/pt) y servida
 * en woff2. Antes se servian los .otf completos: 437 KB de tipografia
 * bloqueando el primer render, frente a los 39 KB de estas dos caras.
 *
 * Los .otf de origen ya no viven bajo static/ para que collectstatic no
 * los publique: estan en design/tipografia-fuente/. Para regenerar:
 *
 *   python -m fontTools.subset "<origen>.otf"  *     --unicodes="U+0000-00FF,U+0100-017F,U+2000-206F,U+2190-21FF,..."  *     --layout-features="kern,liga,clig,calt,ccmp,locl,mark,mkmk"  *     --flavor=woff2 --output-file="<destino>.woff2"
 */
/* Tipografia segun el Brand Book: TT Norms. Se sirven Regular (400) y
 * ExtraBold (800); el manual lista ademas Bold y Black y variantes cursivas.
 * Las cursivas no se usan a proposito: el enfasis se hace con color. Para
 * servir Bold o Black basta con subsetear el .otf como se indica arriba y
 * declarar aqui su @font-face. */
@font-face {
  font-family: "TT Norms GoToGym";
  src: url("../fonts/tt-norms/tt-norms-regular.7fa1f258f6db.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Norms GoToGym";
  src: url("../fonts/tt-norms/tt-norms-extrabold.686cde8d5b1b.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg-base: #0d0d0f;
  --color-bg-elevated: #141416;
  --color-bg-card: #222225;
  --color-bg-overlay: rgba(0, 0, 0, 0.62);
  /* Turquesa Grafeno del Brand Book: unico turquesa del sitio. */
  --color-accent: #0fbfb0;
  --color-accent-hover: #0a9f92;
  --color-accent-soft: rgba(15, 191, 176, 0.16);
  --color-text-primary: #ffffff;
  --color-text-secondary: #b8b8b8;
  --color-text-muted: #808080;
  --color-border: #2e2e32;
  --color-border-subtle: #1e1e1f;
  --color-gold: #d4b46a;
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.45);

  --font-display: "TT Norms GoToGym", system-ui, sans-serif;
  --font-body: "TT Norms GoToGym", system-ui, sans-serif;

  /* Escala en base 1.25 (major third), un tamaño por rol semantico en vez
   * de por t-shirt size -- ver AUDITORIA_TIPOGRAFIA_UI.md seccion C. Nace
   * ya con clamp() porque el proyecto es fluid-first (heroes, h1, h2 de
   * store_home.css y editorial_pages.css ya usan clamp() suelto); un valor
   * fijo aqui solo se volvería a duplicar sin esta escala como referencia.
   * (Nombrada --font-size-* y no --text-* para no compartir prefijo con
   * --text-primary/--text-muted de la linea 72-73, que son colores.)
   *
   * --font-size-h1 no es el clamp() original propuesto en la auditoria:
   * se actualizo al valor real que .editorial-title y .shop-hero h1 ya
   * tenian en produccion (reduccion manual posterior a la auditoria) para
   * no introducir un cambio visual al conectar el token.
   */
  --font-size-display: clamp(2.5rem, 5vw + 1rem, 6rem);
  --font-size-h1: clamp(2.25rem, 4.8vw, 4.8rem);
  --font-size-h2: clamp(1.625rem, 2vw + 1.1rem, 2.5rem);
  --font-size-h3: clamp(1.25rem, .8vw + 1rem, 1.625rem);
  --font-size-lead: clamp(1rem, .3vw + .9rem, 1.1875rem);
  --font-size-body: clamp(.9375rem, .1vw + .9rem, 1rem);
  --font-size-small: clamp(.8125rem, .05vw + .8rem, .875rem);
  --font-size-label: 11px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --bg-page: var(--color-bg-base);
  --bg-surface: var(--color-bg-elevated);
  --bg-elevated: var(--color-bg-card);
  --text-primary: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --accent-primary: var(--color-accent);
  --accent-primary-hover: var(--color-accent-hover);
  --accent-contrast: #031615;
  --border-soft: var(--color-border);
  --focus-ring: var(--color-accent);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-bg-base);
}

body.gtg-theme {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-synthesis: none;
  letter-spacing: 0;
}

/* :where() para que esta regla no tenga peso de especificidad.
 *
 * El proposito es que un enlace del tema oscuro herede el color de su
 * contexto (barra, footer, menus) en vez del azul por defecto del
 * navegador. Escrita como `body.gtg-theme a` le ganaba tambien a
 * cualquier clase de color declarada en el propio enlace, asi que un
 * enlace sobre una tarjeta clara terminaba heredando blanco sobre blanco
 * (el nombre del producto en el carrito era literalmente invisible).
 * Con :where() el valor sigue siendo el de herencia por defecto, pero
 * cualquier color declarado en el enlace tiene prioridad.
 */
:where(body.gtg-theme) a {
  color: inherit;
  text-decoration: none;
}

body.gtg-theme button,
body.gtg-theme input,
body.gtg-theme select,
body.gtg-theme textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* <picture> solo agrupa las fuentes; el elemento que se pinta es el <img>.
   Con display: contents no genera caja propia, de modo que el <img> sigue
   siendo el hijo directo del contenedor que lo dimensiona (las tarjetas de
   producto y el hero fijan tamano sobre su hijo directo). */
picture {
  display: contents;
}

/* Necesario junto al display:contents de arriba. <source> no genera caja
   propia, pero con un <picture display:contents> dentro de un grid o flex
   este navegador SI promueve cada <source> como item del contenedor (en
   vez de tratarlo como display:none, que es lo esperable): una tarjeta con
   un <picture> de dos <source> mas el <img> pasaba de 2 a 4 items en un
   grid de 2 columnas, duplicando filas y doblando la altura de la
   seccion. Declararlo explicito no depende de que el navegador lo asuma. */
picture source {
  display: none;
}

.gtg-page {
  min-height: 50vh;
  background: var(--color-bg-base);
}

.gtg-skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px var(--space-4);
  background: var(--color-accent);
  color: var(--color-bg-base);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform var(--motion-fast, 120ms) ease;
}

.gtg-skip-link:focus {
  transform: translateY(0);
}

.pdp-gallery__viewport {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-premium-white, #f8f9fa);
  /* Segunda sombra: halo Quantum ambiental, sutil (firma de marca en la
     pantalla de mayor intencion de compra, sin competir con el producto). */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24), 0 0 60px var(--color-accent-soft);
}

.pdp-gallery__track,
.pdp-gallery__slide {
  width: 100%;
  height: 100%;
}

.pdp-gallery__slide {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
}

.pdp-gallery__slide.is-active {
  display: flex;
}

.pdp-gallery__slide[hidden] {
  display: none;
}

.pdp-gallery__slide img {
  width: 100%;
  height: 100%;
}

.pdp-gallery__control {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 180, 106, 0.72);
  color: #ffffff;
  /* rgba precalculado de --color-zafiro (#17375C): box-shadow/background
     con transparencia no pueden leer un var() de color solido con alpha
     por separado, asi que se deja fijo aqui en vez de introducir un
     token nuevo de un solo uso. */
  background: rgba(23, 55, 92, 0.92);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 55, 92, 0.28);
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
}

.pdp-gallery__control:hover,
.pdp-gallery__control:focus-visible {
  color: var(--color-zafiro);
  background: var(--color-gold, #d4b46a);
  transform: translateY(-50%) scale(1.05);
}

.pdp-gallery__control--prev { left: 14px; }
.pdp-gallery__control--next { right: 14px; }

.pdp-gallery__counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(13, 13, 15, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.pdp-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: 12px;
  overflow-x: auto;
  padding: 2px;
}

.pdp-gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: var(--space-1);
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: var(--color-premium-white, #f8f9fa);
  cursor: pointer;
}

.pdp-gallery__thumb.is-active,
.pdp-gallery__thumb:hover,
.pdp-gallery__thumb:focus-visible {
  border-color: var(--color-gold, #d4b46a);
}

.gtg-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(16px);
}

.gtg-nav-wrap {
  width: min(100% - 32px, 1280px);
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
}

/* Hamburguesa y marca viajan juntas: en movil la hamburguesa aparece a su
   izquierda y la marca no se mueve de sitio. */
.gtg-nav-lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.gtg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-primary);
}

/* Firma Quantum en el header del dominio comercial: el simbolo original
   de marca (el mismo PNG que usa Home) a tamano de sello (48-72px segun
   el manuscrito de Direccion de Diseno, no como objeto central), con un
   halo turquesa que respira suavemente. Es la unica pieza Quantum que
   viaja a Store/PDP/Cart/Checkout a traves del header compartido. */
.gtg-brand__word {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gtg-brand__mark,
.gtg-footer-brand__mark {
  animation: gtg-brand-breathe 6s ease-in-out infinite;
}

.gtg-brand__mark {
  flex-shrink: 0;
  width: clamp(30px, 3vw, 38px);
  height: clamp(30px, 3vw, 38px);
  border-radius: 50%;
  object-fit: contain;
  padding: 7px;
  background: rgba(13, 13, 15, 0.35);
}

/* El pulso ya llega a la intensidad de "flare" dentro del propio ciclo:
   con raton, ese pico solo se veia si el cursor quedaba parado justo
   encima en el instante exacto (:hover exige la posicion del puntero,
   pero un tap en movil deja el estado "hover" simulado activo un rato,
   asi que ahi el brillo si se notaba). Con el pico dentro del keyframe,
   se ve igual en ambas plataformas sin depender de donde este el mouse. */
@keyframes gtg-brand-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(15, 191, 176, 0); }
  30% { box-shadow: 0 0 14px rgba(15, 191, 176, 0.5), 0 0 30px rgba(15, 191, 176, 0.2); }
  50% {
    box-shadow:
      0 0 24px rgba(15, 191, 176, 0.9),
      0 0 54px rgba(15, 191, 176, 0.45),
      0 0 80px rgba(212, 180, 106, 0.22);
  }
  70% { box-shadow: 0 0 14px rgba(15, 191, 176, 0.5), 0 0 30px rgba(15, 191, 176, 0.2); }
}

/* --- Reaccion de la marca al puntero ----------------------------------
 *
 * En reposo el simbolo ya respira (gtg-brand-breathe). Al apuntarlo, ese
 * mismo latido se acelera y se intensifica, y un destello turquesa-dorado
 * recorre el logotipo una vez. Se anima solo transform, box-shadow y la
 * posicion del degradado: nada que reflow-e el header.
 *
 * El halo no puede declararse en la regla :hover porque una animacion en
 * curso le gana a una declaracion normal en la cascada; por eso el hover
 * cambia de keyframes en vez de cambiar box-shadow.
 */
.gtg-brand__mark,
.gtg-footer-brand__mark {
  transition: transform 340ms var(--motion-easing, cubic-bezier(0.22, 1, 0.36, 1)),
              background 340ms ease;
}

.gtg-brand:hover .gtg-brand__mark,
.gtg-brand:focus-visible .gtg-brand__mark,
.gtg-footer-brand:hover .gtg-footer-brand__mark {
  transform: scale(1.09);
  background: rgba(15, 191, 176, 0.12);
  animation: gtg-brand-flare 1.7s ease-in-out infinite;
}

@keyframes gtg-brand-flare {
  0%, 100% {
    box-shadow: 0 0 14px rgba(15, 191, 176, 0.55), 0 0 32px rgba(15, 191, 176, 0.22);
  }
  50% {
    box-shadow:
      0 0 24px rgba(15, 191, 176, 0.9),
      0 0 54px rgba(15, 191, 176, 0.45),
      0 0 80px rgba(212, 180, 106, 0.22);
  }
}

/* Destello sobre el logotipo. El degradado arranca y termina en el blanco
   normal del texto, asi que en reposo se ve igual que siempre; al apuntar
   solo se desplaza la banda turquesa/dorada. Va dentro de @supports para
   que, donde background-clip:text no exista, el texto conserve su color en
   vez de volverse invisible. */
.gtg-brand__word {
  transition: text-shadow 340ms ease;
}

.gtg-brand:hover .gtg-brand__word,
.gtg-brand:focus-visible .gtg-brand__word {
  text-shadow: 0 0 20px rgba(15, 191, 176, 0.45);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gtg-brand__word {
    background-image: linear-gradient(
      100deg,
      var(--color-text-primary) 0%,
      var(--color-text-primary) 40%,
      var(--color-accent) 50%,
      var(--color-gold) 57%,
      var(--color-text-primary) 68%,
      var(--color-text-primary) 100%
    );
    background-size: 280% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gtg-brand-shine 6s ease-in-out infinite;
    transition: text-shadow 340ms ease;
  }

  @keyframes gtg-brand-shine {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
  }

  .gtg-brand:hover .gtg-brand__word,
  .gtg-brand:focus-visible .gtg-brand__word {
    animation-play-state: paused;
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gtg-brand__mark,
  .gtg-footer-brand__mark,
  .gtg-brand:hover .gtg-brand__mark,
  .gtg-brand:focus-visible .gtg-brand__mark,
  .gtg-footer-brand:hover .gtg-footer-brand__mark {
    animation: none;
    transform: none;
  }

  .gtg-brand__word {
    animation: none;
    transition: none;
  }
}

/* --- Firma Quantum del dominio comercial -------------------------------
 *
 * El catalogo y el checkout ya viven sobre el lienzo oscuro de la marca
 * (.gtg-page hereda --color-bg-base): las fichas claras flotan sobre el,
 * igual que las tarjetas sobre el fondo de Home. Lo que faltaba era el
 * acento turquesa, que no aparecia en ninguna pantalla de compra. Estas
 * reglas lo reintroducen en cuatro puntos, siempre como ambiente y nunca
 * encima de un control: halo detras de los titulos, realce al recorrer el
 * catalogo, respiracion en el boton que cierra cada pantalla y filete en
 * los paneles de resumen.
 */

/* Halo ambiental detras del titulo de cada pantalla. Es background-image
   sobre el contenedor que ya existe, no un elemento nuevo: el navegador
   lo recorta al borde de la caja, asi que no puede provocar scroll
   horizontal ni robar clics. */
.gtg-quantum-ambient {
  position: relative;
  /* Elipse, no circulo: con un circulo el degradado todavia no habia
     llegado a transparente al borde inferior de su propia caja y se veia
     el corte como un rectangulo. La elipse cierra el desvanecido dentro
     de la caja en los dos ejes. */
  background-image: radial-gradient(ellipse at 0% 0%, rgba(15, 191, 176, 0.20) 0%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 520px 360px;
  background-position: -110px -130px;
}

/* Tarjeta de producto: al apuntarla (o al enfocarla por teclado) se eleva
   y toma el halo turquesa en vez de una sombra gris generica. Solo con la
   interaccion, nunca en reposo: veinte tarjetas brillando a la vez serian
   ruido, una sola respondiendo al cursor es firma de marca. */
.gtg-card-quantum {
  border-radius: 12px;
  transition: transform var(--motion-ui, 200ms) var(--motion-easing, ease),
              box-shadow var(--motion-ui, 200ms) var(--motion-easing, ease);
}

.gtg-card-quantum:hover,
.gtg-card-quantum:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(15, 191, 176, 0.35),
    0 0 34px rgba(15, 191, 176, 0.28);
}

/* Boton que cierra cada pantalla de decision (anadir al carrito, continuar,
   confirmar pedido): respira el mismo halo que el simbolo del header. Son
   tres botones en todo el flujo, uno por pantalla, no un efecto repetido. */
.gtg-cta-quantum {
  animation: gtg-cta-breathe 3.6s ease-in-out infinite;
}

/* Un boton que todavia no se puede pulsar (falta elegir talla/color, o no
   hay unidades) no debe pedir atencion: sin halo hasta que sea accionable. */
.gtg-cta-quantum:disabled {
  animation: none;
}

@keyframes gtg-cta-breathe {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
  50% {
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.35),
      0 0 18px rgba(15, 191, 176, 0.45),
      0 0 38px rgba(15, 191, 176, 0.18);
  }
}

/* Panel de resumen (carrito y checkout): filete superior turquesa-dorado.
   Es lo unico que comparten visualmente las dos pantallas donde el usuario
   confirma dinero, y las marca como la misma familia. */
.gtg-summary-panel {
  position: relative;
}

/* Sin overflow:hidden y con el radio en el propio filete: recortar el
   panel dejaba el filete prolijo, pero de paso recortaba la sombra del
   boton que vive dentro, y el halo del CTA desaparecia. */
.gtg-summary-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
}

/* El simbolo del footer respira igual que el del header: es la misma pieza
   de marca y debe leerse igual en los dos extremos de la pagina. */
.gtg-footer-brand__mark {
  border-radius: 50%;
  padding: var(--space-2);
  animation: gtg-brand-breathe 4.5s ease-in-out infinite;
}

.gtg-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.gtg-nav-links a {
  display: inline-block;
  padding: 6px 2px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.gtg-nav-links a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

.gtg-nav-links a:hover,
.gtg-mobile-menu a:hover {
  color: var(--color-accent);
}

.gtg-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.gtg-auth-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-1);
}

.gtg-auth-links a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.gtg-auth-links__login {
  color: var(--color-text-primary);
}

.gtg-auth-links__login:hover {
  color: var(--color-accent);
}

.gtg-auth-links__signup {
  color: var(--color-zafiro);
  background: var(--color-gold, #d4b46a);
}

.gtg-auth-links__signup:hover {
  filter: brightness(1.08);
}

.gtg-icon-button,
.gtg-menu-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.gtg-icon-button:hover,
.gtg-menu-toggle:hover {
  color: var(--color-accent);
  background: rgba(15, 191, 176, 0.08);
}

.gtg-user-button {
  width: auto;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 190px;
  flex-direction: row;
  gap: var(--space-2);
  padding: 0 14px 0 10px;
  overflow: hidden;
  align-items: center;
  color: var(--color-text-primary);
  border-radius: var(--radius-pill);
}

.gtg-user-button:hover,
.gtg-user-button.is-accent:hover {
  color: var(--color-accent);
  background: rgba(15, 191, 176, 0.08);
}

.gtg-account-icon {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
}

.gtg-account-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.gtg-user-email-label {
  display: block;
  min-width: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.gtg-admin-user-button {
  position: relative;
}

.gtg-admin-user-identity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 132px;
}

.gtg-user-button:hover .gtg-user-email-label,
.gtg-admin-user-button:hover .gtg-user-email-label {
  color: var(--color-accent);
  font-weight: 800;
}

/* Con el carrito vacio el contador se oculta, pero el elemento sigue en el
   DOM para que se pueda actualizar sin recargar. */
.gtg-cart-link #cart-count[hidden] {
  display: none;
}

.gtg-cart-link #cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #001a18;
  font-size: 10px;
  font-weight: 800;
}

.gtg-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.gtg-user-menu {
  position: relative;
}

.gtg-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(210px, calc(100vw - 32px));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #171719;
  box-shadow: var(--shadow-card);
}

.gtg-dropdown a,
.gtg-dropdown button {
  display: block;
  width: 100%;
  padding: 10px var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.gtg-dropdown a:hover,
.gtg-dropdown button:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.gtg-mobile-menu {
  position: absolute;
  left: max(16px, calc((100vw - 1280px) / 2));
  top: calc(100% - 18px);
  z-index: 60;
  width: min(320px, calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-3);
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(13, 13, 15, 0.96);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

.gtg-mobile-menu a,
.gtg-mobile-menu button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  padding: var(--space-3) 14px;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.gtg-mobile-menu a:hover,
.gtg-mobile-menu button:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.gtg-mobile-menu__divider {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--color-border-subtle);
}

.gtg-btn,
.gtg-btn-primary,
.gtg-btn-ghost,
.gtg-btn-outline {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px var(--space-5);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.gtg-btn-primary {
  background: var(--color-accent);
  color: #ffffff;
}

.gtg-btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.gtg-btn-outline {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: transparent;
}

.gtg-btn-outline:hover {
  background: var(--color-accent-soft);
}

.gtg-btn-ghost {
  background: #efefef;
  color: #111113;
}

.gtg-surface,
.gtg-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

.gtg-muted {
  color: var(--color-text-secondary);
}

.gtg-footer {
  /* Capa propia: algunas paginas (Contacto) tienen un fondo decorativo
     `position: fixed` que forma una capa posicionada y se pintaba encima de
     un pie sin posicionar, tapandolo al llegar al final. */
  position: relative;
  z-index: 1;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

/* Composicion centrada en una sola columna: marca, suscripcion y redes,
   cada bloque con su propio aire. Evita el problema de encajar seis
   botones de red en una columna estrecha de una grilla de tres.
   Compactado: mismos tres bloques y el mismo contenido, con el aire (el
   padding exterior, el espacio entre bloques, la tipografia decorativa)
   reducido a la mitad o menos. Lo que SI es un objetivo tactil --
   .gtg-socials a, los botones de la suscripcion, los enlaces de
   .gtg-footer-legal -- se mantiene en 44px como minimo: comprimir el aire
   esta bien, comprimir donde alguien tiene que apuntar con el dedo no. */
.gtg-footer-wrap {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.gtg-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gold);
  font-size: 18px;
  font-weight: 800;
}

.gtg-footer-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.gtg-footer-newsletter {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
}

.gtg-footer-newsletter label {
  font-size: 14px;
  color: var(--color-text-primary);
}

.gtg-footer-newsletter div {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: var(--space-2);
}

.gtg-footer-newsletter input,
.gtg-footer-newsletter button {
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
}

.gtg-footer-newsletter input {
  background: #151518;
  color: var(--color-text-primary);
  padding: 0 var(--space-4);
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.32);
}

.gtg-footer-newsletter input::placeholder {
  color: var(--color-text-muted);
}

.gtg-footer-newsletter button {
  background: #18181b;
  color: var(--color-text-primary);
  cursor: pointer;
}

.gtg-footer-newsletter button:hover {
  background: var(--color-accent);
}

.gtg-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 44px, no menos: es un objetivo tactil, y ese es el minimo que el resto
   del sitio ya respeta (ver header, botones de talla/color de la PDP). */
.gtg-socials a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Mismo enfasis turquesa que los botones del header: el footer es la otra
   punta de la misma barra de marca y debe responder igual al puntero. */
.gtg-socials a:hover {
  border-color: rgba(15, 191, 176, 0.55);
  background: rgba(15, 191, 176, 0.12);
  color: var(--color-accent);
  transform: translateY(-3px);
}

.gtg-socials svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* Politicas y condiciones: una sola fila horizontal bajo la suscripcion,
   separada por un filete. Cada enlace es una pildora con area propia para
   que se pueda apuntar comodamente y no se lean como un parrafo corrido.
   Envuelve en varias lineas cuando no caben, en vez de crecer en vertical
   como una lista. */
.gtg-footer-legal {
  width: min(100% - 32px, 1120px);
  margin: var(--space-4) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  font-size: 13px;
}

/* min-height 44px: con el padding original (10px arriba/abajo sobre texto
   de 14px) esta pildora quedaba en ~37px, por debajo del objetivo tactil
   minimo que el resto del sitio ya respeta. No es parte de lo pedido, pero
   comprimir el padding sin corregirlo lo habria empeorado. */
.gtg-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.gtg-footer-legal a:hover {
  background: rgba(15, 191, 176, 0.08);
  color: var(--color-accent);
}

.gtg-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 10%, #202a33 0%, #101012 45%, #0b0d10 100%);
}

.gtg-auth-card {
  width: 100%;
  max-width: 32rem;
  background: rgba(21, 23, 26, 0.9);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.gtg-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
}

.gtg-input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 10px 14px;
}

.gtg-admin-shell {
  background: #0e1116;
}

.gtg-admin-sidebar,
.gtg-admin-header {
  background: #131a22;
  border-color: var(--border-soft);
}

/* --- Utilidades de accesibilidad --------------------------------------
 *
 * .sr-only la servia Tailwind por CDN; declarada aqui, las plantillas que
 * la usan dejan de depender de un recurso externo para que una etiqueta
 * quede disponible al lector de pantalla.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Primer tabulador de la pagina: salta la navegacion y lleva al contenido. */
.gtg-skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 100;
  transform: translate(-50%, -160%);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #001a18;
  font-size: 14px;
  font-weight: 800;
  transition: transform 0.2s ease;
}

.gtg-skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* Buscador dentro del panel movil: mismo destino, ancho completo. */
.gtg-mobile-search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.gtg-mobile-search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
}

.gtg-mobile-search button {
  width: auto;
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #001a18;
  font-weight: 800;
  cursor: pointer;
}

/* --- Confirmacion de carrito ------------------------------------------
 *
 * Anadir al carrito enviaba el formulario y la vista redirigia al detalle
 * del carrito, sacando al comprador del catalogo en cada unidad. La vista
 * ya respondia JSON cuando la peticion llega como XMLHttpRequest, asi que
 * este panel solo muestra esa respuesta y deja al usuario donde estaba.
 *
 * Si el JavaScript no carga, el formulario se envia como siempre: el
 * panel es una mejora progresiva, no un requisito para comprar.
 */
.gtg-minicart {
  position: absolute;
  right: max(16px, calc((100vw - 1280px) / 2));
  top: calc(100% - 6px);
  z-index: 70;
  width: min(340px, calc(100vw - 32px));
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #171719;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.gtg-minicart[hidden] { display: none; }

/* .gtg-mobile-menu declara display: grid, que gana al display: none
   que el navegador aplica a [hidden]; sin esta regla el panel se
   quedaria abierto. Antes lo ocultaba la clase .hidden de Tailwind,
   servida por CDN. */
.gtg-mobile-menu[hidden] { display: none; }
.gtg-dropdown[hidden] { display: none; }

.gtg-minicart__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gtg-minicart__head .material-icons-outlined { font-size: 18px; }

.gtg-minicart__product {
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.gtg-minicart__variant {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.gtg-minicart__actions {
  display: grid;
  gap: var(--space-2);
}

.gtg-minicart__actions a,
.gtg-minicart__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gtg-minicart__actions a {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #001a18;
}

.gtg-minicart__actions a:hover { background: var(--color-accent-hover); }
.gtg-minicart__actions button:hover { border-color: var(--color-text-primary); }

/* El mismo panel comunica el error de stock que antes llegaba como
   mensaje de Django despues de recargar. */
.gtg-minicart.is-error .gtg-minicart__head { color: #ff8b8b; }

@media (max-width: 900px) {
  .gtg-nav-wrap {
    min-height: 64px;
    gap: var(--space-3);
  }

  .gtg-nav-links {
    display: none;
  }

  .gtg-menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }

  .gtg-icon-button {
    width: 44px;
    height: 44px;
  }

  .gtg-user-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .gtg-user-email-label {
    display: none;
  }

  .gtg-nav-actions {
    gap: var(--space-2);
  }

  .gtg-footer-wrap {
    gap: var(--space-4);
  }
}

@media (max-width: 900px) {
  .gtg-auth-links {
    display: none;
  }
}

@media (max-width: 560px) {
  .gtg-brand {
    font-size: 18px;
  }

  .gtg-footer-newsletter div {
    grid-template-columns: 1fr;
  }
}

/* Respeta la preferencia de reducir movimiento del sistema operativo: aplica
   a las transiciones de hover/foco (tarjetas, botones, selectores de talla
   y color) sin tocar el sistema de animacion Quantum, que es una decision
   de marca ya establecida y fuera de este alcance. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Precio con descuento: el normal tachado y atenuado, el vigente es el que
 * se cobra. Hereda el color del contexto (tarjetas claras, ficha oscura). */
.price-compare {
  margin-right: 0.15em;
  font-size: 0.82em;
  font-weight: 400;
  color: #5f6066;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.price-current {
  font-weight: inherit;
}

.price-badge {
  display: inline-block;
  padding: 0.12em 0.5em;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-gold, #d4b46a);
  color: #101012;
  font-size: max(12px, 0.68em);
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

/* Un importe ("$1.372.000 COP") no se parte en dos lineas. */
.price-amount,
.price-compare,
.price-current {
  white-space: nowrap;
}

/* Sobre fondo oscuro (ficha de producto) el gris no se lee: se aclara. */
.shop-pdp__price .price-compare { color: rgba(248, 249, 250, 0.62); }

/* Pantallas tactiles: los controles llegan a 44 px (el dedo es menos preciso
 * que el puntero). Los enlaces dentro de un parrafo quedan fuera a proposito:
 * crecerles la altura rompe el interlineado del texto. */
@media (pointer: coarse) {
  button,
  select,
  input:not([type="hidden"], [type="checkbox"], [type="radio"]),
  .gtg-brand,
  .brand,
  .editorial-text-link,
  .store-link,
  .commercial-auth__forgot,
  .contact-card__address,
  #show-terms,
  nav a,
  footer a {
    min-height: 44px;
  }
  .gtg-brand,
  .brand,
  .editorial-text-link,
  .store-link,
  .commercial-auth__forgot,
  .contact-card__address,
  #show-terms,
  nav a,
  footer a {
    display: inline-flex;
    align-items: center;
  }
}

/* --- Selector de idioma ES / EN ----------------------------------------- */
.gtg-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gtg-lang form {
  display: inline-flex;
  margin: 0;
}

.gtg-lang button {
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.gtg-lang button:hover {
  color: var(--color-accent);
}

.gtg-lang button[aria-current="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  cursor: default;
}

.gtg-lang button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gtg-lang--menu {
  margin-right: var(--space-1);
}

.gtg-lang--movil {
  padding: var(--space-2) 0;
}

.gtg-lang--movil button {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 900px) {
  .gtg-lang--menu {
    display: none;
  }
}

/* Anchos intermedios (entre el menu movil y el escritorio completo): con el
   selector de idioma el menu no cabe a tamano normal, asi que se compacta. */
@media (min-width: 901px) and (max-width: 1320px) {
  .gtg-nav-wrap {
    gap: var(--space-3);
  }

  .gtg-nav-links {
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .gtg-auth-links a {
    padding: 0 var(--space-2);
  }

}

@media (min-width: 901px) and (max-width: 1040px) {
  .gtg-nav-wrap {
    gap: var(--space-2);
  }

  .gtg-nav-links {
    gap: 9px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
}


.gtg-pausa {
  margin: 0;
  padding: 10px 16px;
  background: var(--color-ink, #101012);
  color: var(--color-premium-white, #f8f9fa);
  font-size: .875rem;
  text-align: center;
}