/* ============================================================
   LANDING "POWERED BY MSI" — GamingCity
   Va TODO en la hoja de estilos de esta landing (nunca inline).
   Tipografía Inter. Mobile-first, breakpoints 768px y 480px.

   v6 (2026-07-14) — CAMBIO DE PALETA, pedido explícito y repetido de David:
   esta landing puntual dejó de usar navy/cyan (paleta general de GamingCity)
   y pasó a la paleta de la infografía real de "Powered by MSI" + los colores
   del logo de la acción: blanco/negro dominante, gris claro para cajas,
   magenta como acento, y dos tonos casi negros (#121111 / #2A2A2C) para
   elementos oscuros puntuales (tags, botones, fondo de carruseles). navy/cyan
   quedan definidos más abajo por compatibilidad de nombre de variable, pero
   ya no se usan en ningún bloque de esta landing — es una excepción acotada
   a esta pieza, no un cambio de identidad del sitio.

   v8 (2026-07-14) — Hero reconstruido por 3ra vez: imagen de fondo (place-
   holder) con placa clara de texto superpuesta ("Opción C" de 3 mockups
   mostrados a David). Ver notas 6 y 15 en msi-powerby-landing.html.
   ============================================================ */

:root {
  --gc-navy: #051230;
  --gc-cyan: #02b8fc;
  --gc-white: #ffffff;
  --gc-black: #000000;
  /* Paleta real de esta landing (v6) */
  --gc-msi-dark: #121111;
  --gc-msi-dark2: #2A2A2C;
  --gc-msi-magenta: #da3176;
  --gc-msi-gray: #d2d2d3;
  /* Colores de categoría Powered by MSI (pedido explícito de David) */
  --gc-cat-essential: #D7D7D7;
  --gc-cat-advanced: #0066B9;
  --gc-cat-ultimate: #FF1520;
  /* Alias de compatibilidad — quedan usados en varias reglas de abajo */
  --gc-review-tag: var(--gc-msi-magenta);
  --gc-review-bg: var(--gc-msi-gray);
}

/* ---------- Reglas pedidas por David (ocultar ruido nativo de la nota) ---------- */
h2.titulo { display: none; }
.post-lead-image { display: none; }
p.verdoc { display: none; }
h3.leyendaConStock { display: none; }
span.stock { display: none; }
.financiacion { display: none; }
span.favButton.favCaja { display: none; }

/* ---------- BLOQUE 1 — HERO ----------
   v12: imágenes reales confirmadas (ya no placeholder) — 2 <img> con `src`
   fijo cada una, alternadas por CSS según breakpoint (desktop/mobile), sin
   aspect-ratio ni object-fit:cover porque ahora son dimensiones reales
   (1370x250 y 400x400) y no necesitan recorte. La frase bajó del banner:
   ya no hay placa de texto superpuesta sobre la imagen, el banner queda
   limpio y la frase (`<h1>` por SEO) vive arriba de los 2 botones dentro de
   `.gc-pbm-hero-actions`, directo sobre el fondo negro del hero. */
.gc-pbm-hero {
  background: #000;
  padding: 24px 20px 28px;
  box-sizing: border-box;
  font-family: 'Inter', Arial, sans-serif;
}

.gc-pbm-hero-media {
  width: 100%;
  max-width: 1370px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
}

.gc-pbm-hero-media-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile-first: se ve la imagen mobile (400x400), se oculta la de desktop */
.gc-pbm-hero-media-img--desktop {
  display: none;
}

.gc-pbm-hero-media-img--mobile {
  display: block;
}

/* La frase + los 2 botones, centrados debajo del banner. */
.gc-pbm-hero-actions {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 0;
  text-align: center;
}

.gc-pbm-hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.gc-pbm-hero-sub strong {
  color: var(--gc-white);
}

/* Solo 2 botones, mismo tamaño/tipografía = mismo peso visual, se
   distinguen por color (magenta vs blanco) no por tamaño ni cantidad de
   texto — así no compite un camino contra el otro. */
.gc-pbm-hero-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gc-pbm-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gc-pbm-hero-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.gc-pbm-hero-btn--primary {
  background: var(--gc-msi-magenta);
  color: var(--gc-white);
}

.gc-pbm-hero-btn--secondary {
  background: var(--gc-white);
  color: var(--gc-msi-dark);
}

.gc-pbm-trust {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 16px auto 0;
  text-align: center;
  max-width: 1370px;
  box-sizing: border-box;
}

/* ---------- BLOQUE 1.5 — BENEFICIOS DEL ECOSISTEMA MSI ----------
   Contenido tomado de la infografía POWERED_BY_MSI-infografia_esp.pdf que
   pasó David. El ícono de cada card es un acento geométrico (rombo cyan),
   no una reproducción del arte de la infografía — ver nota 8 en el HTML. */
.gc-pbm-benefits {
  background: var(--gc-white);
}

.gc-pbm-benefits-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px 0;
  font-family: 'Inter', Arial, sans-serif;
  box-sizing: border-box;
}

.gc-pbm-benefits-kicker {
  display: block;
  color: var(--gc-review-tag);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}

h2.gc-pbm-benefits-title {
  color: black !important;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 15px 0;
  text-align: center;
}
/* mismo bug de especificidad que el resto de los h2 de esta landing — tag +
   !important para ganarle al h2 nativo de la nota. */

.gc-pbm-benefits-sub {
  color: rgba(0, 0, 0, 0.65);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 28px 0;
  text-align: center;
}

/* Carrusel horizontal con scroll-snap CSS puro — funciona con touch/drag
   sin JS. Los botones prev/next son un extra progresivo (JS defensivo). */
.gc-pbm-benefits-track-wrap {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 28px;
  font-family: 'Inter', Arial, sans-serif;
}

.gc-pbm-benefits-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 8px;
  scrollbar-width: none;
  cursor: grab;
}

/* Mientras se arrastra con el mouse (JS): se desactiva el snap para que el
   drag se sienta libre, y el cursor cambia a "grabbing". */
.gc-pbm-benefits-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  scroll-behavior: auto;
}

.gc-pbm-benefits-track::-webkit-scrollbar {
  display: none;
}

/* v4: tarjetas de "reseña" (David identificó que el formato de la
   infografía es en realidad una reseña, no una card de beneficio genérica)
   — layout compacto en grid: foto chica tipo avatar + título/tags arriba,
   cita abajo ocupando todo el ancho. Colores tomados de la infografía real
   de MSI (ver --gc-review-bg / --gc-review-tag en :root). */
.gc-pbm-benefit-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 68%;
  max-width: 270px;
  background: var(--gc-review-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px 14px 14px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "img title"
    "img tags"
    "quote quote";
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
}

.gc-pbm-benefit-img {
  grid-area: img;
  display: block;
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--gc-white);
  border-radius: 8px;
}

.gc-pbm-benefits-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding: 0 20px;
}

.gc-pbm-benefits-prev,
.gc-pbm-benefits-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--gc-black);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gc-pbm-benefits-prev:hover,
.gc-pbm-benefits-next:hover {
  background: var(--gc-msi-magenta);
  color: var(--gc-white);
}

.gc-pbm-benefit-title {
  grid-area: title;
  color: #000000;
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
}

.gc-pbm-benefit-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gc-pbm-benefit-tags span {
  display: inline-block;
  background: var(--gc-review-tag);
  color: var(--gc-white);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.5;
}

/* Tag oscuro específico para "Powered by MSI PC" — en la infografía ese tag
   puntual va en gris/negro, distinto de los tags de componente puntual
   (que van en magenta). */
.gc-pbm-benefit-tags span.gc-pbm-tag-dark {
  background: var(--gc-msi-dark2);
  color: var(--gc-white);
}

.gc-pbm-benefit-quote {
  grid-area: quote;
  position: relative;
  color: rgba(0, 0, 0, 0.75);
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Marca de comilla decorativa — refuerza visualmente "esto es una cita/
   reseña", generada por CSS (no cuenta como tag HTML, cero riesgo de
   sanitizador). */
.gc-pbm-benefit-quote::before {
  content: "\201C";
  color: var(--gc-review-tag);
  font-size: 22px;
  font-weight: 800;
  font-style: normal;
  float: left;
  line-height: 0.6;
  margin: 10px 3px 0 0;
}

/* ---------- BLOQUE 2 — CÓMO CONSEGUIR EL MOUSE ----------
   v3: fondo oscuro (antes blanco) para alternar con Beneficios (blanco) y no
   repetir el mismo tono dos bloques seguidos. v6: el oscuro pasó de navy a
   --gc-msi-dark (#121111, tono del logo de la acción) y los acentos de cyan
   a magenta, siguiendo la paleta nueva de toda la landing. */
.gc-pbm-mouse {
  background: var(--gc-msi-dark);
}

.gc-pbm-mouse-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Inter', Arial, sans-serif;
  box-sizing: border-box;
}

h2.gc-pbm-section-title {
  color: var(--gc-white) !important;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
}

.gc-pbm-section-sub {
  color: var(--gc-white);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 28px 0;
  opacity: 0.85;
}

.gc-pbm-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.gc-pbm-step {
  background: var(--gc-white);
  border-left: 3px solid var(--gc-msi-magenta);
  border-radius: 6px;
  padding: 16px 18px;
}

.gc-pbm-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.gc-pbm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gc-msi-dark);
  color: var(--gc-msi-magenta);
  font-weight: 800;
  font-size: 14px;
}

.gc-pbm-step-title {
  color: var(--gc-black);
  font-weight: 800;
  font-size: 15px;
  margin: 0;
}

.gc-pbm-step-desc {
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.gc-pbm-note {
  color: var(--gc-white);
  font-size: 13px;
  opacity: 0.65;
  margin: 0 0 16px 0;
}

.gc-pbm-cta-secondary {
  display: inline-block;
  background: transparent;
  color: var(--gc-white);
  font-weight: 800;
  text-decoration: none;
  padding: 12px 24px;
  border: 2px solid var(--gc-white);
  border-radius: 8px;
  font-size: 14px;
}

.gc-pbm-cta-secondary:hover {
  background: var(--gc-msi-magenta);
  border-color: var(--gc-msi-magenta);
  color: var(--gc-white);
}

/* ---------- BLOQUE 3 — INTRO CARRUSELES ----------
   v3: fondo blanco (antes navy) — dos bloques navy seguidos (este + el
   carrusel nativo que viene justo después) se fundían en un solo bloque
   oscuro sin separación clara. Ritmo final: navy(hero) / blanco(beneficios)
   / navy(mouse) / blanco(este intro) / navy(carrusel nativo) / blanco(FAQ). */
.gc-pbm-carruseles-intro {
  background: var(--gc-white) !important;
  text-align: center;
}

.gc-pbm-carruseles-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 20px;
  font-family: 'Inter', Arial, sans-serif;
  box-sizing: border-box;
}

h2.gc-pbm-carruseles-title {
  color: var(--gc-black) !important;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px 0;
}
/* !important + selector con tag (h2.gc-pbm-carruseles-title en vez de solo
   .gc-pbm-carruseles-title): había un h2 nativo de la nota que le ganaba
   la especificidad al color. */

.gc-pbm-carruseles-sub {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  margin: 0;
}

.gc-pbm-cat-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

/* Chip de color por categoría (pedido de David): no le puse el color
   sólido de lleno porque no vi el arte real de cada logo (essential/
   advanced/ultimate) y un fondo saturado detrás de un logo con su propio
   color podía chocar — lo hice como fondo tenue + borde sólido. Si al
   verlo en el sitio el logo ya trae su propio color y esto queda de más,
   avisame y lo saco o lo hago sólido. */
.gc-pbm-cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
}

.gc-pbm-cat-chip--essential {
  background: rgba(215, 215, 215, 0.35);
  border-color: var(--gc-cat-essential);
}

.gc-pbm-cat-chip--advanced {
  background: rgba(0, 102, 185, 0.1);
  border-color: var(--gc-cat-advanced);
}

.gc-pbm-cat-chip--ultimate {
  background: rgba(255, 21, 32, 0.1);
  border-color: var(--gc-cat-ultimate);
}

.gc-pbm-cat-logo {
  max-height: 56px;
  height: 56px;
  width: auto;
  aspect-ratio: 357 / 181;
  object-fit: contain;
  display: block;
  vertical-align: middle;
}

/* dentro del título de cada proyector (h2.titulomsipbaadvanced), si David agrega el logo ahí a mano */
.titulomsipbaadvanced .gc-pbm-cat-logo {
  margin-right: 10px;
  height: 28px;
  max-height: 28px;
}

/* link "Ver Más" dentro del título del proyector — lo empuja al extremo
   derecho (el h2 ya es display:flex) y le da forma de pill magenta. */
.titulomsipbaadvanced a.r-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--gc-white);
  background: var(--gc-msi-magenta);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ============================================================
   BLOQUE 3 — CARRUSELES NATIVOS ("proyector")
   Provisorio sobre cat_nota-27-1 / 28-2 / 29-3 (Essential/Advanced/Ultimate —
   ver nota en el HTML si el notaId real termina siendo otro). El HTML/JS del
   carrusel en sí (owl-item, .product, botones) lo genera la plataforma y no
   se toca — solo color, tipografía, bordes, sombras y reposicionamiento de
   .owl-controls, igual que en la landing Logitech x Momo.
   ============================================================ */
.cont_proy.cat_nota-27-1,
.cont_proy.cat_nota-28-2,
.cont_proy.cat_nota-29-3 {
  overflow-x: hidden !important;
  background: var(--gc-msi-dark);
  font-family: 'Inter', Arial, sans-serif;
}

.cont_proy.cat_nota-27-1 .bck_proy_content,
.cont_proy.cat_nota-28-2 .bck_proy_content,
.cont_proy.cat_nota-29-3 .bck_proy_content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.cont_proy.cat_nota-27-1 .bck_proy_bg,
.cont_proy.cat_nota-28-2 .bck_proy_bg,
.cont_proy.cat_nota-29-3 .bck_proy_bg {
  display: none;
}

.cont_proy.cat_nota-27-1 .cont_proy_categoria,
.cont_proy.cat_nota-28-2 .cont_proy_categoria,
.cont_proy.cat_nota-29-3 .cont_proy_categoria {
  background: transparent;
  padding: 24px 0;
}

.cont_proy.cat_nota-27-1 .titulomsipbaadvanced,
.cont_proy.cat_nota-28-2 .titulomsipbaadvanced,
.cont_proy.cat_nota-29-3 .titulomsipbaadvanced {
  color: var(--gc-white);
  font-size: 20px;
  font-weight: 800;
  font-family: 'Inter', Arial, sans-serif;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.cont_proy.cat_nota-27-1 .gc-msi-pcs-cta-desc,
.cont_proy.cat_nota-28-2 .gc-msi-pcs-cta-desc,
.cont_proy.cat_nota-29-3 .gc-msi-pcs-cta-desc {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 640px;
}

/* Separación visual entre cards sin tocar el ancho fijo inline de .owl-item
   (lo recalcula el JS del carrusel) — el "gap" se logra con padding interno. */
.cont_proy.cat_nota-27-1 .item.cajascategoria.proyector-categoria__item,
.cont_proy.cat_nota-28-2 .item.cajascategoria.proyector-categoria__item,
.cont_proy.cat_nota-29-3 .item.cajascategoria.proyector-categoria__item {
  padding: 0 3px;
  box-sizing: border-box;
}

.cont_proy.cat_nota-27-1 .product,
.cont_proy.cat_nota-28-2 .product,
.cont_proy.cat_nota-29-3 .product {
  background: var(--gc-white) !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cont_proy.cat_nota-27-1 .image img.img-responsive,
.cont_proy.cat_nota-28-2 .image img.img-responsive,
.cont_proy.cat_nota-29-3 .image img.img-responsive {
  object-fit: contain;
  background: var(--gc-white);
}

.cont_proy.cat_nota-27-1 .description h4 a.titprod,
.cont_proy.cat_nota-28-2 .description h4 a.titprod,
.cont_proy.cat_nota-29-3 .description h4 a.titprod {
  color: var(--gc-black);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.cont_proy.cat_nota-27-1 .price,
.cont_proy.cat_nota-28-2 .price,
.cont_proy.cat_nota-29-3 .price {
  color: var(--gc-black);
  font-weight: 800;
}

.cont_proy.cat_nota-27-1 .precio-sin-imp,
.cont_proy.cat_nota-28-2 .precio-sin-imp,
.cont_proy.cat_nota-29-3 .precio-sin-imp {
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
}

.cont_proy.cat_nota-27-1 .btn-compra,
.cont_proy.cat_nota-28-2 .btn-compra,
.cont_proy.cat_nota-29-3 .btn-compra {
  background: var(--gc-msi-magenta) !important;
  color: var(--gc-white) !important;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.cont_proy.cat_nota-27-1 .btn-compra:active,
.cont_proy.cat_nota-28-2 .btn-compra:active,
.cont_proy.cat_nota-29-3 .btn-compra:active {
  box-shadow: none;
  transform: translateY(2px);
}

/* Flechas prev/next — bug conocido: el tema nativo las posiciona con
   left/top absolutos propios; con overflow-x:hidden eso las corta en mobile.
   Se fuerza position:static + flex para que no dependan de esos offsets. */
.cont_proy.cat_nota-27-1 .owl-controls,
.cont_proy.cat_nota-28-2 .owl-controls,
.cont_proy.cat_nota-29-3 .owl-controls {
  position: relative !important;
  top: auto; left: auto; right: auto; bottom: auto;
  transform: none;
  width: auto;
  margin-top: 14px;
}

.cont_proy.cat_nota-27-1 .owl-controls .owl-buttons,
.cont_proy.cat_nota-28-2 .owl-controls .owl-buttons,
.cont_proy.cat_nota-29-3 .owl-controls .owl-buttons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.cont_proy.cat_nota-27-1 .owl-controls .owl-prev,
.cont_proy.cat_nota-27-1 .owl-controls .owl-next,
.cont_proy.cat_nota-28-2 .owl-controls .owl-prev,
.cont_proy.cat_nota-28-2 .owl-controls .owl-next,
.cont_proy.cat_nota-29-3 .owl-controls .owl-prev,
.cont_proy.cat_nota-29-3 .owl-controls .owl-next {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(218, 49, 118, 0.16) !important;
  color: var(--gc-msi-magenta) !important;
  border-radius: 50%;
  font-size: 18px;
  opacity: 1 !important;
  cursor: pointer;
}

.cont_proy.cat_nota-27-1 .owl-buttons i,
.cont_proy.cat_nota-28-2 .owl-buttons i,
.cont_proy.cat_nota-29-3 .owl-buttons i {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sin scope a propósito (pedido tal cual por David) — .owl-buttons es
   genérico de la librería del carrusel, no específico de esta landing, así
   que es más seguro tocarlo sin scope (mismo criterio que en Logitech). */
.owl-buttons i {
  border: 1px solid #da3176;
  color: #da3176;
  background: #fff;
}

@media (min-width: 768px) {
  .cont_proy.cat_nota-27-1 .bck_proy_content,
  .cont_proy.cat_nota-28-2 .bck_proy_content,
  .cont_proy.cat_nota-29-3 .bck_proy_content {
    padding: 0 40px;
  }
  .cont_proy.cat_nota-27-1 .titulomsipbaadvanced,
  .cont_proy.cat_nota-28-2 .titulomsipbaadvanced,
  .cont_proy.cat_nota-29-3 .titulomsipbaadvanced {
    font-size: 26px;
  }
  .cont_proy.cat_nota-27-1 .gc-msi-pcs-cta-desc,
  .cont_proy.cat_nota-28-2 .gc-msi-pcs-cta-desc,
  .cont_proy.cat_nota-29-3 .gc-msi-pcs-cta-desc {
    font-size: 14px;
    margin-bottom: 28px;
  }

h1.copete {
    display: none;
}


  .cont_proy.cat_nota-27-1 .owl-controls,
  .cont_proy.cat_nota-28-2 .owl-controls,
  .cont_proy.cat_nota-29-3 .owl-controls {
    position: absolute !important;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    pointer-events: none;
  }
  .cont_proy.cat_nota-27-1 .owl-controls .owl-buttons,
  .cont_proy.cat_nota-28-2 .owl-controls .owl-buttons,
  .cont_proy.cat_nota-29-3 .owl-controls .owl-buttons {
    justify-content: space-between;
  }
  .cont_proy.cat_nota-27-1 .owl-controls .owl-prev,
  .cont_proy.cat_nota-27-1 .owl-controls .owl-next,
  .cont_proy.cat_nota-28-2 .owl-controls .owl-prev,
  .cont_proy.cat_nota-28-2 .owl-controls .owl-next,
  .cont_proy.cat_nota-29-3 .owl-controls .owl-prev,
  .cont_proy.cat_nota-29-3 .owl-controls .owl-next {
    pointer-events: auto;
    background: var(--gc-white) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  }
}

/* ---------- BLOQUE 4 — FAQ (acordeón JS, no <details>) ---------- */
.gc-pbm-faq {
  background: var(--gc-white);
}

.gc-pbm-faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Inter', Arial, sans-serif;
  box-sizing: border-box;
}

.gc-pbm-faq-title {
  color: var(--gc-black) !important;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 18px 0;
  text-align: center;
}

.gc-pbm-faq-item {
  border: 1px solid var(--gc-msi-magenta);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.gc-pbm-faq-item.is-collapsed {
  border-color: rgba(0, 0, 0, 0.12);
}

.gc-pbm-faq-item:last-child {
  margin-bottom: 0;
}

.gc-pbm-faq-q {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gc-black);
  margin: 0;
}

.gc-pbm-faq-q:hover {
  background: rgba(0, 0, 0, 0.03);
}

.gc-pbm-faq-q:focus-visible {
  outline: 2px solid var(--gc-msi-magenta);
  outline-offset: -2px;
}

/* El "+" es texto real en el HTML (no ::before/span vacío), para que el
   sanitizador no lo trate como span vacío y lo colapse. Abierto = rotado
   45° (se lee como "×"); cerrado (.is-collapsed) = sin rotar ("+"). */
.gc-pbm-faq-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gc-msi-magenta);
  color: var(--gc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(45deg);
  transition: transform 0.15s ease, background 0.15s ease;
}

.gc-pbm-faq-item.is-collapsed .gc-pbm-faq-toggle {
  background: var(--gc-msi-dark);
  color: var(--gc-white);
  transform: rotate(0deg);
}

.gc-pbm-faq-a-wrap {
  display: block;
}

.gc-pbm-faq-item.is-collapsed .gc-pbm-faq-a-wrap {
  display: none;
}

.gc-pbm-faq-a {
  color: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0 18px 18px;
}

/* scroll suave para el CTA del hero hacia los carruseles, sin JS */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   BREAKPOINT 768px — tablet / desktop chico
   ============================================================ */
@media (min-width: 768px) {
  .gc-pbm-hero {
    padding: 40px 40px 36px;
  }

  .gc-pbm-hero-media-img--desktop {
    display: block;
  }

  .gc-pbm-hero-media-img--mobile {
    display: none;
  }

  .gc-pbm-hero-sub {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .gc-pbm-hero-btn-row {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .gc-pbm-hero-btn {
    flex: 0 1 340px;
  }

  .gc-pbm-mouse-inner,
  .gc-pbm-faq-inner {
    padding: 56px 40px;
  }

  .gc-pbm-steps {
    flex-direction: row;
  }

  .gc-pbm-step {
    flex: 1 1 0;
  }

  .gc-pbm-carruseles-inner {
    padding: 40px 40px;
  }

  .gc-pbm-cat-logo {
    max-height: 70px;
    height: 70px;
  }

  /* v9: pedido explícito — en desktop el logo dentro del título de cada
     carrusel (h2.titulomsipbaadvanced) debe verse del mismo tamaño que el
     legend de arriba (.gc-pbm-cat-logo), no reducido a 28px como en mobile. */
  .titulomsipbaadvanced .gc-pbm-cat-logo {
    height: 70px;
    max-height: 70px;
    margin-right: 14px;
  }

  .gc-pbm-benefits-inner {
    padding: 20px 40px 0;
  }

  .gc-pbm-benefits-title {
    font-size: 28px;
  }

  .gc-pbm-benefit-card {
    width: 260px;
  }

  .gc-pbm-benefits-track {
    padding: 0 40px 8px;
  }

  .gc-pbm-benefits-controls {
    padding: 0 40px;
  }
}

/* ============================================================
   BREAKPOINT 480px — mobile chico (ajustes finos, mobile-first ya cubre lo base)
   ============================================================ */
@media (max-width: 480px) {
  .gc-pbm-hero-sub {
    font-size: 13px;
  }

  .gc-pbm-cta-secondary {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .gc-pbm-step {
    padding: 14px;
  }
}

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