@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   GAMINGCITY × LOGITECH G PLAY DEAL DAYS — CSS global v1
   Vigencia campaña: 01/08/2026 - 31/08/2026
   Pegar en la hoja de estilos global del sitio (fuera del editor de la nota).
   Cobranding: esta paleta/gradiente es específica de esta campaña (Logitech G
   PLAY Deal Days), distinta del sistema navy/cyan plano de GamingCity — el
   glow y el gradiente están acotados a este landing, no se replican en otras
   piezas del sitio.
   ============================================================================ */

:root {
  --gcdd-black: #000000;
  --gcdd-navy-a: #001220;
  --gcdd-navy-b: #00223D;
  --gcdd-cyan: #00B9FC;
  --gcdd-cyan-alt: #02CAFF;
  --gcdd-cyan-soft: #2CABDE;
  --gcdd-yellow: #D5D801;
  --gcdd-white: #FFFFFF;
}

/* ---------- Hero ---------- */
.gcdd-hero {
  position: relative;
  background: linear-gradient(160deg, var(--gcdd-navy-a) 0%, var(--gcdd-navy-b) 100%);
  background-image:
    linear-gradient(160deg, var(--gcdd-navy-a) 0%, var(--gcdd-navy-b) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px);
  background-blend-mode: normal;
  color: var(--gcdd-white);
  font-family: 'Poppins', sans-serif;
  padding: 40px 20px 32px;
  overflow: hidden;
}

.gcdd-hero-brands {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.gcdd-brand-gc {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--gcdd-white);
  text-transform: uppercase;
}

.gcdd-brand-sep {
  color: var(--gcdd-cyan-soft);
  font-size: 15px;
}

.gcdd-brand-logitech {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--gcdd-cyan-alt);
}

.gcdd-brand-logitech b {
  color: var(--gcdd-yellow);
  font-weight: 800;
}

.gcdd-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.gcdd-eyebrow {
  color: var(--gcdd-cyan-alt);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.gcdd-headline {
  color: var(--gcdd-white);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.gcdd-headline b {
  color: var(--gcdd-cyan-alt);
}

.gcdd-subcopy {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 26px;
}

.gcdd-subcopy strong {
  font-weight: 700;
  color: var(--gcdd-white);
}

/* ---------- Countdown ---------- */
.gcdd-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(2, 202, 255, 0.08);
  border: 1px solid rgba(0, 185, 252, 0.35);
  border-radius: 14px;
  padding: 16px 22px;
  margin: 0 auto 28px;
}

.gcdd-countdown-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gcdd-cyan-soft);
}

.gcdd-countdown-nums {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gcdd-num-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
}

.gcdd-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--gcdd-white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gcdd-num-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-top: 3px;
}

.gcdd-sep {
  color: var(--gcdd-cyan);
  font-size: 22px;
  font-weight: 700;
  margin-top: -14px;
}

.gcdd-countdown-ended {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gcdd-white);
  max-width: 320px;
  text-align: center;
}

.gcdd-countdown.gcdd-ended {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}

/* ---------- CTA de registro al sorteo (se repite en hero y post-carrusel) ---------- */
.gcdd-registro-cta {
  position: relative;
  max-width: 560px;
  margin: 0 auto 22px;
  background: var(--gcdd-black);
  border: 1px solid var(--gcdd-cyan);
  border-radius: 16px;
  padding: 22px 24px;
  text-align: center;
}

.gcdd-registro-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gcdd-yellow);
}

.gcdd-registro-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--gcdd-white);
  font-family: 'Poppins', sans-serif;
}

.gcdd-registro-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}

.gcdd-registro-btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--gcdd-cyan-alt), var(--gcdd-cyan));
  color: var(--gcdd-navy-a);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -4px rgba(0, 185, 252, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gcdd-registro-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px rgba(0, 185, 252, 0.65);
}

.gcdd-registro-ended-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

/* Sección post-carrusel: mismo componente sobre fondo negro plano */
.gcdd-postcarrusel {
  background: var(--gcdd-black);
  padding: 36px 20px;
  font-family: 'Poppins', sans-serif;
}

/* ---------- Trust bar ----------
   Eyebrow propio (ver .gcdd-trustbar-label más abajo) para separarla
   visualmente de la caja de sorteo: son dos mensajes distintos (por qué
   comprar acá vs. por qué participar del sorteo) y mezclarlos sin jerarquía
   le restaba claridad a ambos. */
.gcdd-trustbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 26px;
}

.gcdd-trust-item {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(44, 171, 222, 0.3);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.gcdd-trust-item b {
  color: var(--gcdd-cyan-alt);
}

/* ---------- Texto legal ---------- */
.gcdd-legal {
  max-width: 620px;
  margin: 0 auto;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

.gcdd-postcarrusel .gcdd-legal {
  color: rgba(255,255,255,0.45);
}

/* ---------- Overrides de carruseles nativos: cat_nota-30-1 y cat_nota-31-2 ---------- */
.cont_proy.cont_proy_categoria.cat_nota-30-1,
.cont_proy.cont_proy_categoria.cat_nota-31-2 {
  background: var(--gcdd-black) !important;
  overflow-x: hidden !important;
  padding: 34px 0 !important;
  position: relative;
}

.bck_proy_bg_nota-30-1,
.bck_proy_bg_nota-31-2 {
  display: none !important;
}

.bck_proy_content_nota-30-1,
.bck_proy_content_nota-31-2 {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* h5.title-sol es el wrapper nativo — el h2.titulodealdays que escribiste
   está ANIDADO adentro (h5 > span > h2), no al lado. No se oculta: si se
   oculta el h5, se va con él el título entero. Solo se resetea el margin
   por defecto del h5/span nativo para que no empuje el layout. */
.cat_nota-30-1 h5.title-sol,
.cat_nota-31-2 h5.title-sol,
.cat_nota-30-1 h5.title-sol span,
.cat_nota-31-2 h5.title-sol span {
  display: block;
  margin: 0;
}

h2.titulodealdays {
  font-family: 'Poppins', sans-serif;
  color: var(--gcdd-white);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  margin: 0 0 6px;
  text-align: start;
}

h2.titulodealdays b {
  color: var(--gcdd-cyan-alt);
}

h2.titulodealdays a.r-link {
  display: inline-block;
  margin-left: 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  color: var(--gcdd-navy-a);
  background: var(--gcdd-cyan);
  border-radius: 20px;
  padding: 5px 14px;
  text-decoration: none;
  vertical-align: middle;
}

p.gc-logitech-productos-cta-dealdays {
  font-family: 'Poppins', sans-serif;
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px;
  margin: 0 0 24px;
}

/* Cards de producto */
.cat_nota-30-1 .product,
.cat_nota-31-2 .product {
  height: max-content !important;
  padding-bottom: 10px;
  background: #0A0F1C;
  border: 1px solid rgba(44, 171, 222, 0.2);
  border-radius: 12px;
}

/* Gap de 2px entre publicaciones (owl no soporta gap real, se logra con
   padding lateral en el item sin tocar el ancho de slot que calcula el JS) */
.cat_nota-30-1 .item.cajascategoria.proyector-categoria__item,
.cat_nota-31-2 .item.cajascategoria.proyector-categoria__item {
  box-sizing: border-box;
  padding: 0 1px;
}

.cat_nota-30-1 .description h4 a.titprod,
.cat_nota-31-2 .description h4 a.titprod {
  color: var(--gcdd-white) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
}

.cat_nota-30-1 .price span,
.cat_nota-31-2 .price span {
  color: var(--gcdd-cyan-alt) !important;
  font-weight: 700;
}

.cat_nota-30-1 .btn-compra,
.cat_nota-31-2 .btn-compra {
  background: var(--gcdd-cyan) !important;
  color: var(--gcdd-navy-a) !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Elementos nativos que no aportan en esta landing */
.cat_nota-30-1 span.stock,
.cat_nota-31-2 span.stock,
.cat_nota-30-1 h3.leyendaConStock,
.cat_nota-31-2 h3.leyendaConStock,
.cat_nota-30-1 span.favButton.favCaja,
.cat_nota-31-2 span.favButton.favCaja {
  display: none !important;
}

/* Controles owl: overlay en desktop, en flujo en mobile (mismo patrón que MSI) */
.cat_nota-30-1 .owl-controls,
.cat_nota-31-2 .owl-controls {
  position: absolute !important;
  top: 50%;
  left: -6px;
  width: calc(100% + 12px);
  transform: translateY(-50%);
  pointer-events: none;
}

.cat_nota-30-1 .owl-buttons,
.cat_nota-31-2 .owl-buttons {
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.cat_nota-30-1 .owl-prev,
.cat_nota-30-1 .owl-next,
.cat_nota-31-2 .owl-prev,
.cat_nota-31-2 .owl-next {
  pointer-events: all;
  background: var(--gcdd-cyan);
  color: var(--gcdd-navy-a);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

@media (max-width: 768px) {
  .cat_nota-30-1 .owl-controls,
  .cat_nota-31-2 .owl-controls {
    position: relative !important;
    top: auto;
    transform: none;
    margin-top: 14px;
    left: 0;
    width: 100%;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .gcdd-headline { font-size: 25px; }
  .gcdd-num { font-size: 28px; }
  .gcdd-trustbar { display: flex; flex-direction: row; align-items: stretch; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .gcdd-hero { padding: 30px 16px 24px; }
  .gcdd-headline { font-size: 22px; }
  .gcdd-registro-cta { padding: 18px 16px; }
  .gcdd-registro-title { font-size: 17px; }
  .gcdd-countdown { padding: 12px 16px; }
  .gcdd-num { font-size: 25px; }
  .gcdd-num-group { min-width: 42px; }
}

/* ============================================================================
   Agregado 2026-07-28 — pedido de David:
   - reglas utilitarias sitewide (mismo patrón que la landing de MSI)
   - fondo para .reseñas en vez de ocultarlo
   - sección de FAQs
   - banners: hero (bloque-1), spotlight entre carruseles (CSS puro, sin HTML
     porque no hay campo editable entre nota-30-1 y nota-31-2), cierre (bloque-2)
   ============================================================================ */

/* ---------- Reglas utilitarias sitewide (igual que en gc-msi-mundialv14.css) ---------- */
h2.titulo,
h1.copete,
p.verdoc {
  display: none;
}

/* ---------- .reseñas con fondo en vez de oculto (scopeado a esta landing) ----------
   Pediste sumar ".reseñas { background: #000000; }" suelta — la regla que ya
   estaba acá (`.cat_nota-30-1 .reseñas, .cat_nota-31-2 .reseñas`) tiene más
   especificidad (dos clases vs una), así que una regla nueva sin ese scope
   no la iba a pisar aunque se agregue después en el archivo. Para que el
   negro se vea, edité directamente el valor de fondo acá en vez de sumar la
   línea suelta como código muerto. */
.cat_nota-30-1 .reseñas,
.cat_nota-31-2 .reseñas {
  background: #000000;
  border: 1px solid rgba(44, 171, 222, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
}
/* No vi el HTML real de .reseñas en lo que pegaste — si el negro no calza
   bien contra su contenido interno (texto, estrellas, etc.), avisame y lo ajusto. */

/* ---------- Banner spotlight entre carruseles ---------- */
/* No hay campo HTML editable entre nota-30-1 y nota-31-2 (Tornado solo expone
   Header/Body, los carruseles van entre medio). Se resuelve con ::before sobre
   el segundo carrusel — no toca el sanitizador porque no es HTML literal. */
.cont_proy.cont_proy_categoria.cat_nota-31-2::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 3.5;
  margin: 0 0 30px;
  border-radius: 14px;
  background-image: url("https://www.gamingcity.com.ar/banners/banner1desktop.jpg");
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .cont_proy.cont_proy_categoria.cat_nota-31-2::before {
    aspect-ratio: 0.8 !important;
    background-image: url("https://www.gamingcity.com.ar/banners/banner1mobile.jpg");
  }
}

/* ---------- Banner de cierre (bloque-2) — placeholder ---------- */
.gcdd-closing-banner {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  margin: 0 auto 28px;
  max-width: 900px;
}

.gcdd-closing-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

.gcdd-closing-banner-mobile { display: none; }

@media (max-width: 768px) {
  .gcdd-closing-banner-desktop { display: none; }
  .gcdd-closing-banner-mobile { display: block; }
}

/* ---------- FAQ ---------- */
.gcdd-faq {
  max-width: 640px;
  margin: 0 auto 8px;
  font-family: 'Poppins', sans-serif;
}

.gcdd-faq-title {
  color: var(--gcdd-white);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
  text-align: center;
  margin: 0 0 18px;
}

.gcdd-faq-item {
  border-bottom: 1px solid rgba(44, 171, 222, 0.25);
}

.gcdd-faq-toggle {
  display: none;
}

.gcdd-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gcdd-white);
  cursor: pointer;
}

.gcdd-faq-icon {
  color: var(--gcdd-cyan);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.gcdd-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.gcdd-faq-a p {
  margin: 0 4px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}

.gcdd-faq-toggle:checked ~ .gcdd-faq-a {
  max-height: 320px;
}

.gcdd-faq-toggle:checked ~ .gcdd-faq-q .gcdd-faq-icon {
  transform: rotate(90deg);
}

@media (max-width: 480px) {
  .gcdd-faq-q { font-size: 13.5px; }
}

/* ============================================================================
   Ronda 2026-07-28 (v3) — pedido de David:
   - 2 hides más: .post-lead-image, a.favoritos_top
   - fix de fondo blanco en mobile detrás de las secciones (.cols-grals)
   - rediseño del banner hero: pasa de imagen suelta arriba de todo a fondo
     fotográfico del hero (menos pesado, no empuja el resto del contenido)
   - quick-nav (chips) + barra sticky de CTA para sumar recorrido de usuario
   ============================================================================ */

/* ---------- 2 hides más ---------- */
.post-lead-image,
a.favoritos_top {
  display: none;
}

/* ---------- Fix fondo blanco en mobile ----------
   El wrapper nativo .cols-grals trae padding que en mobile deja ver el fondo
   blanco de la página por fuera de las secciones (hero/carruseles/FAQ), que
   son todas de fondo oscuro. Se resetea el padding SOLO en mobile (en
   desktop no se veía el problema) y se le fuerza fondo navy para que, si
   algún hijo reabre el padding, no se note blanco sino el mismo tono oscuro
   de la landing.
   OJO: .col-md-12.col-xs-12 tiene pinta de utilidad Bootstrap genérica — si
   se reusa en otras notas con contenido claro, este fix podría no aplicar
   bien ahí. Lo dejo acotado a mobile para bajar el riesgo, pero avisame si
   ves algo raro en otra landing después de pegar esto. */
@media (max-width: 768px) {
  .col-md-12.col-xs-12.cols-grals {
    padding: 0;
    background: var(--gcdd-navy-a);
  }
}

/* ---------- Fondo del hero: gradiente oficial de la página del sorteo ----------
   David pasó el fondo real de promoslogitech.com/logitechg-deal-days/participar
   (rejilla cyan tenue + diagonal negro→cyan) y los logos oficiales en PNG.
   Esto reemplaza el enfoque anterior (foto placeholder de fondo) por algo
   mejor: cero dependencia de una imagen que todavía no existía, y además
   genera continuidad visual real con la página de registro externa — cuando
   el usuario llega a promoslogitech.com después del CTA, el fondo ya le
   resulta familiar (menos fricción de "¿este es el sitio correcto?"). */
.gcdd-hero {
  background:
    linear-gradient(rgba(0, 174, 239, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 174, 239, .1) 1px, transparent 1px),
    linear-gradient(to bottom right, #000, #000a14 28%, #002840 58%, #007aa8 82%, #00aeef);
  background-size: 80px 80px, 80px 80px, auto;
}

/* ---------- Hero-top: copy a la izquierda + badge oficial a la derecha ----------
   Mismo layout que usa Logitech en su propia página (texto + badge circular
   "DEAL DAYS" al lado) — se replica acá para que la pieza se sienta parte de
   la misma campaña, no una landing genérica con gradiente propio. */
.gcdd-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto 28px;
}

.gcdd-hero-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.gcdd-hero-badge {
  flex-shrink: 0;
  width: 290px;
}

.gcdd-hero-badge-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 185, 252, 0.35));
}

/* Mismo tamaño en mobile y desktop (pedido de David) — ya no hay override
   que lo achique en @media max-width:768px. */
.gcdd-brand-logitech-logo {
  display: inline-block;
  height: 40px;
  width: auto;
  vertical-align: middle;
}

.gcdd-brand-logo-gc {
  display: inline-block;
  height: 45px;
  width: auto;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .gcdd-hero-top {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  .gcdd-hero-copy {
    text-align: center;
  }
  .gcdd-hero-brands {
    justify-content: center;
  }
  .gcdd-hero-badge {
    width: 140px;
  }
}

/* ---------- Quick-nav (chips) debajo del subcopy ----------
   Suma recorrido de usuario: accesos rápidos para saltar a los productos o
   a las FAQs sin scrollear a ciegas. Ability alta (Fogg) = menos fricción
   para llegar a donde el usuario ya quiere ir. El scroll suave lo maneja el
   JS de bloque-1 (no toca scroll-behavior global de <html>, que afectaría
   a todo el sitio). */
.gcdd-quicknav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}

/* Bug real que encontré: este override antes vivía DENTRO del media query
   de .gcdd-hero-top, que está más arriba en el archivo — como el .gcdd-quicknav
   base (arriba) queda DESPUÉS en el orden del archivo y tiene la misma
   especificidad, el base le ganaba en mobile pase lo que pase (a igual
   especificidad, gana el que aparece después en el CSS, esté o no dentro de
   un @media). Por eso "solo se veía en desktop": en mobile nunca se
   aplicaba el center. Lo muevo acá, después del base, para que ahora sí
   gane en mobile. */
@media (max-width: 768px) {
  .gcdd-quicknav {
    display: flex;
    justify-content: center;
  }
}

.gcdd-quicknav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(2, 202, 255, 0.4);
  color: var(--gcdd-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 30px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.gcdd-quicknav-item:hover {
  background: rgba(2, 202, 255, 0.18);
  border-color: var(--gcdd-cyan);
  transform: translateY(-1px);
}

/* ---------- Barra sticky de CTA ----------
   Aparece recién cuando el usuario scrollea más allá del hero (JS en
   bloque-1, defensivo: si no encuentra .gcdd-hero o .gcdd-stickybar, no
   rompe nada). Mantiene countdown + botón de registro siempre a mano
   mientras navega carruseles/FAQ. Se oculta sola cuando termina la promo
   (mismo chequeo de fecha que el resto de la landing). */
.gcdd-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--gcdd-black);
  border-top: 1px solid var(--gcdd-cyan);
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.gcdd-stickybar-visible {
  transform: translateY(0);
}

.gcdd-stickybar-text {
  color: var(--gcdd-white);
  font-size: 13px;
  font-weight: 600;
}

.gcdd-stickybar-text b {
  color: var(--gcdd-cyan-alt);
  font-variant-numeric: tabular-nums;
}

.gcdd-stickybar-btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--gcdd-cyan-alt), var(--gcdd-cyan));
  color: var(--gcdd-navy-a);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 8px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .gcdd-stickybar { padding: 8px 12px; gap: 10px; }
  .gcdd-stickybar-text { font-size: 12px; }
}

/* ============================================================================
   Ronda 2026-07-28 (v4) — pedido de David
   ============================================================================ */

.gcdd-faq {
  margin: 0 auto 40px;
}

h2.gcdd-faq-title {
  color: white;
}

/* justify-self solo tiene efecto si el padre inmediato del botón es
   display:grid — en flex o block no hace nada. No vi el HTML real de la
   card de producto para confirmar el display del padre, así que lo dejo
   como lo pediste; si no se ve centrado, probablemente el fix sea
   "margin: 0 auto;" en su lugar (funciona en cualquier layout). */
button.btn.btn-primary.btn-compra {
  justify-self: center;
  margin-bottom: 10px;
}

/* ============================================================================
   Ronda 2026-07-28 (v6) — pedido de David
   ============================================================================ */

.product .image a img {
  padding: 5px;
  max-height: 200px;
}

/* .reseñas: reforcé con !important porque me dijiste que el fondo negro
   solo se veía en desktop y no en mobile. La regla que ya estaba no tiene
   ningún @media que la restrinja a desktop, así que lo más probable es que
   en mobile haya un estilo nativo de Tornado con más peso (otro selector
   más específico, o un !important propio) ganándole. Si con esto sigue sin
   verse en mobile, necesito que me pases el HTML real de esa sección en esa
   vista para encontrar qué lo está pisando — a ciegas no puedo asegurar
   más que esto. */
.cat_nota-30-1 .reseñas,
.cat_nota-31-2 .reseñas {
  background: #000000 !important;
}

/* ============================================================================
   Ronda 2026-07-28 (v5) — pedido de David
   ============================================================================ */

.product .image>a {
  padding: 15px;
}

/* ---------- Pasos dentro de la caja de sorteo ----------
   Copia el flujo real de 3 pasos que usa la propia página de Logitech
   (compra → subís ticket → listo) — mensaje calcado del oficial, no
   inventado, para que quien lee acá no tenga que ir a descubrir "cómo
   funciona esto" en otro sitio. Reduce fricción/ansiedad antes del CTA. */
.gcdd-registro-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.gcdd-registro-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}

.gcdd-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gcdd-cyan);
  color: var(--gcdd-navy-a);
  font-size: 11px;
  font-weight: 800;
}

.gcdd-registro-microcopy {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* ---------- Eyebrow propio de la trust bar ----------
   Separa "por qué comprar en GamingCity" de "por qué participar del
   sorteo" — antes quedaban pegados sin etiqueta y competían por la misma
   lectura. */
.gcdd-trustbar-label {
  display: block;
  text-align: center;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gcdd-cyan-soft);
}

/* ============================================================================
   Ronda 2026-07-28 (v7) — pedido de David
   ============================================================================ */

/* .reseñas SIN scope, como lo pediste explícitamente esta vez.
   OJO — esto es sitewide, no acotado a esta landing: si ".reseñas" se usa
   en otras notas/páginas del sitio (fuera de esta campaña), también les va
   a poner fondo negro a ellas. Lo agrego igual porque me lo pediste como
   obligatorio y porque la versión scopeada (con !important) ya lleva dos
   rondas sin funcionar en mobile — probable indicio de que el elemento real
   no está anidado dentro de .cat_nota-30-1/.cat_nota-31-2 como asumí. Si
   después de esto tampoco se ve, ahí sí necesito el HTML real para
   diagnosticar en serio en vez de seguir probando a ciegas. */
.reseñas {
  background: #000000 !important;
}