/* ============================================================
   Landing "PCs Armadas" — GamingCity (scope: .gc-pcarmada) — v1
   Namespace propio, no reusa .gc-faqlp/.gc-rma/.gc-dev (otro componente).
   Va en la hoja global del sitio (la sube NetOne). Nunca <style> embebido
   en los bloques HTML: el sanitizador de TornadoStore no lo soporta.
   ============================================================ */

/* ---------- Elementos nativos de Tornado a ocultar en esta nota ---------- */
h2.titulo { display: none; }
h1.copete { display: none; }
p.verdoc { display: none; }
.post-lead-image { display: none; }
.reseñas { display: none; }
span.stock { display: none; }
h3.leyendaConStock { display: none; }
span.favButton.favCaja { display: none; }

/* ============================================================
   Base
   ============================================================ */
.gc-pcarmada, .gc-pcarmada * { box-sizing: border-box; }
.gc-pcarmada {
  --gcpc-navy: #051230;
  --gcpc-navy-tint: rgba(5, 18, 48, 0.06);
  --gcpc-navy-border: rgba(5, 18, 48, 0.14);
  --gcpc-cyan: #02b8fc;
  --gcpc-cyan-tint: #eef8ff;
  --gcpc-cyan-border: rgba(2, 184, 252, 0.3);
  --gcpc-white: #ffffff;
  --gcpc-ink: #0b0f1a;
  --gcpc-radius: 8px;
  --gcpc-radius-sm: 6px;
  --gcpc-shadow: 3px 3px 0 rgba(5, 18, 48, 0.08);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--gcpc-ink);
  line-height: 1.6;
}
.gc-pcarmada a { color: var(--gcpc-navy); }
.gc-pcarmada-center { text-align: center; }
.gc-pcarmada-cyan { color: var(--gcpc-cyan); }

.gc-pcarmada-h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--gcpc-navy);
  margin: 0 0 10px;
}
.gc-pcarmada-h2-inverse { color: var(--gcpc-white); }
/* Fix de especificidad (mismo caso resuelto en garantías/FAQ): el estilo
   global del sitio le gana a la clase simple sobre h2 puntuales. */
h2.gc-pcarmada-h2.gc-pcarmada-h2-inverse { color: var(--gcpc-white); }

/* ---------- Botones ---------- */
.gc-pcarmada-btn-primary,
.gc-pcarmada-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 24px;
  border-radius: var(--gcpc-radius-sm);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none !important;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.gc-pcarmada-btn-primary {
  background: var(--gcpc-cyan);
  color: var(--gcpc-navy) !important;
}
.gc-pcarmada-btn-primary:hover { background: #01a2e0; }
.gc-pcarmada-btn-ghost {
  background: transparent;
  border-color: var(--gcpc-navy);
  color: var(--gcpc-navy) !important;
}
.gc-pcarmada-btn-ghost:hover { background: var(--gcpc-navy-tint); }
.gc-pcarmada-btn-ghost-inverse {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--gcpc-white) !important;
}
.gc-pcarmada-btn-ghost-inverse:hover { background: rgba(255, 255, 255, 0.08); }
.gc-pcarmada-btn-primary:active,
.gc-pcarmada-btn-ghost:active { transform: scale(0.98); }

/* ============================================================
   HERO
   ============================================================ */
.gc-pcarmada-hero { background: var(--gcpc-navy); }
.gc-pcarmada-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* padding-top subido de 40px a 90px en mobile: este es el primer
     bloque de todo Bloque 1, así que si el sitio tiene un header
     fijo/sticky en mobile (algo que no puedo confirmar sin verlo en
     vivo), ese header queda flotando ENCIMA de lo que sea que esté
     primero en el flujo normal de la página — no importa cuánto
     padding le pongamos, un padding no "empuja" nada fuera de un
     elemento position:fixed. Lo que sí hace es correr el contenido
     (ojo, no el fondo navy) más abajo DENTRO de este bloque, para que
     el eyebrow/título no arranquen tapados. 90px es una estimación
     (la misma que usé para el scroll-margin-top de los títulos de
     carrusel, mismo problema de fondo) — decime si quedó bien, corto,
     o de más y lo ajusto al pixel. */
  padding: 90px 20px 32px;
  display: flex;
  flex-direction: column-reverse;
  gap: 28px;
}
.gc-pcarmada-hero-content { flex: 1; }
.gc-pcarmada-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gcpc-cyan);
  margin: 0 0 12px;
}
.gc-pcarmada-h1 {
  color: var(--gcpc-white);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
}
.gc-pcarmada-sub {
  color: var(--gcpc-white);
  opacity: 0.8;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 52ch;
}
.gc-pcarmada-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gc-pcarmada-hero-visual { flex: 1; }

/* ---------- Imagen del hero (18/8: ya con foto real de David) ----------
   Mismo recuadro de antes (mismas proporciones: más panorámico en
   mobile, más cuadrado desde 768px), ahora con overflow:hidden +
   regla de <img> para que la foto llene el recuadro con
   object-fit:cover sin deformarse, recortando lo que sobre en cada
   proporción. */
.gc-pcarmada-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--gcpc-radius);
  color: var(--gcpc-white);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.gc-pcarmada-ph i { font-size: 22px; opacity: 0.9; }
.gc-pcarmada-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-pcarmada-hero-ph {
  width: 100%;
  aspect-ratio: 25 / 16;
  background: #0a2050;
  border: 1px dashed rgba(2, 184, 252, 0.4);
}
@media (min-width: 768px) {
  .gc-pcarmada-hero-ph { aspect-ratio: 5 / 4; }
}

/* ---------- Trust bar (dentro del hero, franja inferior) ---------- */
.gc-pcarmada-trust {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 28px;
  padding: 20px 20px;
}
.gc-pcarmada-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gc-pcarmada-trust-item i { color: var(--gcpc-cyan); font-size: 200%; flex: 0 0 auto; }
.gc-pcarmada-trust-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--gcpc-white);
}
.gc-pcarmada-trust-item span {
  font-size: 12px;
  color: var(--gcpc-white);
  opacity: 0.6;
}

/* ============================================================
   WAYFINDER (autoselección por gama/uso)
   ============================================================ */
.gc-pcarmada-wayfinder { background: var(--gcpc-white); padding: 44px 20px 8px; }
.gc-pcarmada-wayfinder-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-wayfinder-sub {
  text-align: center;
  color: var(--gcpc-navy);
  opacity: 0.65;
  font-size: 14.5px;
  margin: 0 0 28px;
}
/* Cuarto rediseño (18/8) — este no es un cambio de estética, es un
   fix estructural. La captura que mandó David de la landing real
   mostraba las 4 tarjetas completamente desarmadas: los 20
   elementos (ícono + título + texto + texto + botón, por 4
   tarjetas) sueltos como items de un grid de 4 columnas, cada uno
   en su propia celda, sin agrupar. Causa encontrada: cada tarjeta
   era un <a> envolviendo varios elementos de bloque (div + h3 + p +
   p + span) — el editor de TornadoStore le hace "unwrap" a los <a>
   que envuelven bloques así (se queda con el contenido, pero borra
   la etiqueta <a> que los agrupaba), y sin esa etiqueta agrupadora
   el CSS Grid de 4 columnas repartía cada elemento suelto en su
   propia celda. Por eso NINGÚN rediseño anterior de esta sección se
   vio bien en la landing real aunque el código estuviera bien: el
   HTML se rompía al guardar, no era un problema de diseño.
   Fix: la tarjeta pasa de <a> a <div> con data-gcpc-target (el
   click se maneja por JS, mismo mecanismo que ya usábamos para los
   demás links de gama — ver el script al principio de este bloque),
   así no hay ningún <a> envolviendo bloques que Tornado pueda
   desarmar.
   De paso, sumé un lugar para la foto real del gabinete por gama
   que pediste (.gc-pcarmada-wf-media, arriba de la tarjeta) — hoy
   tiene un ícono como placeholder, se reemplaza por una <img> en
   cuanto tengas las fotos (ver comentario en el HTML con las
   medidas sugeridas). */
.gc-pcarmada-wayfinder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) {
  .gc-pcarmada-wayfinder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .gc-pcarmada-wayfinder-grid { grid-template-columns: repeat(4, 1fr); }
}
.gc-pcarmada-wf-card {
  display: flex;
  flex-direction: column;
  background: var(--gcpc-white);
  border: 1px solid var(--gcpc-navy-border);
  border-radius: var(--gcpc-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gc-pcarmada-wf-card:hover {
  border-color: var(--gcpc-cyan-border);
  box-shadow: var(--gcpc-shadow);
  transform: translateY(-3px);
}
.gc-pcarmada-wf-card:focus-visible {
  outline: 2px solid var(--gcpc-cyan);
  outline-offset: 2px;
}
/* Lugar para la foto del gabinete/PC de esa gama. Placeholder chato
   de color (sin foto real todavía) con un ícono grande y apagado
   adentro, a modo de marcador de posición — en cuanto haya foto,
   se reemplaza el <i> por un <img> que va a llenar este mismo
   recuadro (object-fit:cover ya está puesto acá, no hace falta
   tocar el CSS al agregarla). */
.gc-pcarmada-wf-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gcpc-navy-tint);
  flex: 0 0 auto;
}
.gc-pcarmada-wf-media i { font-size: 40px; color: var(--gcpc-navy); opacity: 0.3; }
.gc-pcarmada-wf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-pcarmada-wf-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  padding: 20px 18px 18px;
}
.gc-pcarmada-wf-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--gcpc-navy);
  margin: 0 0 6px;
}
/* Línea de beneficio/uso — se lee justo después del título, antes
   que cualquier dato técnico (que alguien sin conocimientos de PCs
   pueda entender de qué se trata cada una sin leer specs). */
.gc-pcarmada-wf-lead {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gcpc-navy);
  margin: 0 0 4px;
}
.gc-pcarmada-wf-desc {
  font-size: 12px;
  color: var(--gcpc-navy);
  opacity: 0.55;
  margin: 0 0 20px;
}
/* CTA como botón sólido, pegado al piso con margin-top:auto para
   que las 4 tarjetas queden alineadas aunque el texto de arriba
   varíe de largo entre gamas. En hover pasa a cyan (color de
   marca). Ya no es un <a> real (ver el fix arriba) — el click lo
   maneja el JS sobre toda la tarjeta, esto es solo visual. */
.gc-pcarmada-wf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: var(--gcpc-radius-sm);
  background: var(--gcpc-navy);
  color: var(--gcpc-white) !important;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.gc-pcarmada-wf-card:hover .gc-pcarmada-wf-cta {
  background: var(--gcpc-cyan);
  color: var(--gcpc-navy) !important;
}
.gc-pcarmada-wf-cta i {
  font-size: 11px;
  transition: transform 0.15s ease;
}
.gc-pcarmada-wf-card:hover .gc-pcarmada-wf-cta i { transform: translateX(3px); }

/* ============================================================
   QUIZ RECOMENDADOR — wizard de pasos, vive en Bloque 2 dentro de
   .gc-pcarmada-howto (sección "No sabés cuál elegír?"). Cada opción
   es un botón grande: clickearlo avanza de paso solo, no hay un
   submit aparte. Como está dentro de .gc-pcarmada acá sí resuelven
   las variables (a diferencia de los selectores de carrusel).
   ============================================================ */
.gc-pcarmada-quiz {
  max-width: 560px;
  margin: 0 auto;
  background: var(--gcpc-white);
  border: 1px solid var(--gcpc-navy-border);
  border-radius: 18px;
  box-shadow: var(--gcpc-shadow);
  padding: 32px 26px;
}

.gc-pcarmada-quiz-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}
.gc-pcarmada-quiz-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--gcpc-navy-tint);
  color: var(--gcpc-navy);
  opacity: 0.45;
}
.gc-pcarmada-quiz-dot.is-active {
  background: var(--gcpc-cyan);
  color: var(--gcpc-navy);
  opacity: 1;
}
.gc-pcarmada-quiz-dot-line {
  width: 28px;
  height: 2px;
  background: var(--gcpc-navy-border);
}
.gc-pcarmada-quiz-progress-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gcpc-navy);
  opacity: 0.4;
  margin: -12px 0 22px;
}

/* El paso a paso dependía solo del atributo [hidden] de HTML5, que
   el navegador esconde con una regla propia de baja prioridad
   (user-agent). Cualquier CSS del sitio que le fije un display a
   estos divs (Bootstrap, resets globales, lo que sea) le gana a esa
   regla del navegador, sin importar el orden — y ahí se ve todo
   junto en vez de por pasos. Se fuerza acá con clase propia +
   !important, así no depende de que nada más del sitio se comporte
   como yo espero. */
.gc-pcarmada-quiz-step { display: none !important; animation: gcpc-quiz-fade 0.2s ease; }
.gc-pcarmada-quiz-step.is-active { display: block !important; }
@keyframes gcpc-quiz-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-pcarmada-quiz-qtitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--gcpc-navy);
  text-align: center;
  margin: 0 0 6px;
}
/* Texto de ayuda debajo de cada pregunta — para que quede clarísimo
   qué tiene que pensar el usuario antes de elegir una opción
   (pedido explícito: preguntas más explícitas y fáciles de entender). */
.gc-pcarmada-quiz-qhelp {
  font-size: 13px;
  color: var(--gcpc-navy-soft, #5b6b85);
  text-align: center;
  margin: 0 0 18px;
}
.gc-pcarmada-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Cada opción es fila ícono + texto (el ícono es de fuente, no
   imagen — no rompe la regla de "sin archivos de imagen"). El ícono
   va en un chip circular propio para que se lea de un vistazo, no
   solo como texto largo. */
.gc-pcarmada-quiz-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--gcpc-white);
  border: 2px solid var(--gcpc-navy-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gcpc-navy);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.gc-pcarmada-quiz-option i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gcpc-navy-tint);
  color: var(--gcpc-navy);
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.gc-pcarmada-quiz-option-text { flex: 1 1 auto; }
.gc-pcarmada-quiz-option:hover {
  border-color: var(--gcpc-cyan);
  background: var(--gcpc-cyan-tint);
}
.gc-pcarmada-quiz-option:active { transform: scale(0.99); }
/* Marcado instantáneo al tocar (JS le agrega esta clase antes de
   pasar al siguiente paso), para que quede claro qué se eligió. */
.gc-pcarmada-quiz-option.is-selected {
  border-color: var(--gcpc-cyan);
  background: var(--gcpc-cyan-tint);
}
.gc-pcarmada-quiz-option.is-selected i {
  background: var(--gcpc-cyan);
  color: var(--gcpc-white);
}
.gc-pcarmada-quiz-back {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gcpc-navy);
  opacity: 0.6;
  cursor: pointer;
  padding: 4px;
}
.gc-pcarmada-quiz-back:hover { opacity: 1; }

.gc-pcarmada-quiz-result { text-align: center; }
.gc-pcarmada-quiz-result-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #018bc4;
  margin: 0 0 6px;
}
.gc-pcarmada-quiz-result-tier {
  font-size: 26px;
  font-weight: 800;
  color: var(--gcpc-navy);
  margin: 0 0 10px;
}
.gc-pcarmada-quiz-result-desc {
  font-size: 14px;
  color: var(--gcpc-navy);
  opacity: 0.75;
  margin: 0 0 22px;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.gc-pcarmada-quiz-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gc-pcarmada-quiz-restart {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gcpc-navy);
  opacity: 0.6;
  cursor: pointer;
  text-decoration: underline;
}
.gc-pcarmada-quiz-restart:hover { opacity: 1; }

/* ============================================================
   WHY (versión corta, dentro de Bloque 1)
   ============================================================ */
.gc-pcarmada-why-short { background: var(--gcpc-white); padding: 28px 20px 44px; }
.gc-pcarmada-why-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  border-top: 1px solid var(--gcpc-navy-border);
  padding-top: 24px;
}
.gc-pcarmada-why-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gcpc-navy);
}
.gc-pcarmada-why-item i { color: var(--gcpc-cyan); font-size: 15px; }

/* ============================================================
   TÍTULO/DESCRIPCIÓN DE CADA CARRUSEL — son elementos nativos
   (h2.gc-titpcs / p.gc-textinf-pcs), no clases propias. La plantilla
   nativa "title-sol style2 solnuevo" está pensada para texto blanco
   ENCIMA de una imagen de fondo (.bck_proy_bg_nota-X). Nosotros
   ocultamos esa imagen de fondo (regla más abajo), así que ese texto
   blanco queda sobre el fondo blanco de la sección: por eso no se lee.
   Se fuerza acá color propio con buen contraste, scopeado a los 4
   notaId de esta landing (no se toca el estilo global de esas clases,
   que las usan otras notas del sitio).

   IMPORTANTE: estos selectores NO son descendientes de .gc-pcarmada
   (los carruseles nativos los inserta Tornado por fuera de los 2
   bloques editables). Por eso var(--gcpc-navy) no resolvía: esa
   variable solo existe adentro de .gc-pcarmada. Colores puestos
   directos en hex acá, no por variable.
   ============================================================ */
.cont_proy.cat_nota-33-1 h2.gc-titpcs,
.cont_proy.cat_nota-32-2 h2.gc-titpcs,
.cont_proy.cat_nota-34-3 h2.gc-titpcs,
.cont_proy.cat_nota-35-4 h2.gc-titpcs {
  color: #051230 !important;
  text-shadow: none !important;
  font-size: 22px;
  font-weight: 700;
  /* El wayfinder y el resultado del quiz apuntan a esta h2 por id
     (ver gc_pcarmada_v1_carruseles.html). Si el sitio tiene un header
     fijo/sticky arriba, el scroll deja el título tapado justo debajo
     de ese header aunque el anchor "funcione" — por eso este margen:
     scroll-margin-top le pide al navegador dejar este aire arriba del
     título al hacer scroll hasta él (funciona tanto con scrollIntoView
     como con un link #anchor normal). 90px es una estimación de altura
     de header típica, no la medí en el sitio real — si el título sigue
     quedando tapado o sobra mucho aire, decime cuánto y lo ajusto. */
  scroll-margin-top: 90px;
}
/* El "Ver Más" de cada h2 ya no apunta a Logitech (lo corregiste),
   así que se deja visible. Ojo: hoy las 4 notas usan el MISMO href
   (computadoras--prod--162), no uno por gama — no discrimina entre
   Oficina/Gaming Inicial/Gaming Avanzada/Extreme. Si tenés (o podés
   armar) una URL de categoría filtrada por gama, avisame el link de
   cada una y le doy un href distinto a cada "Ver Más". */
.cont_proy.cat_nota-33-1 h2.gc-titpcs a,
.cont_proy.cat_nota-32-2 h2.gc-titpcs a,
.cont_proy.cat_nota-34-3 h2.gc-titpcs a,
.cont_proy.cat_nota-35-4 h2.gc-titpcs a {
  font-size: 12px;
  font-weight: 700;
  color: #018bc4 !important;
  margin-left: 10px;
}
.cont_proy.cat_nota-33-1 .gc-textinf-pcs,
.cont_proy.cat_nota-32-2 .gc-textinf-pcs,
.cont_proy.cat_nota-34-3 .gc-textinf-pcs,
.cont_proy.cat_nota-35-4 .gc-textinf-pcs {
  color: #051230 !important;
  opacity: 0.75;
  text-shadow: none !important;
  font-size: 13.5px;
  margin-bottom: 8px;
}

/* ============================================================
   CARRUSELES NATIVOS — 4 notaId reales confirmados por David:
   33-1 Oficina, 32-2 Gaming Inicial, 34-3 Gaming Avanzada,
   35-4 Extreme. Mismo patrón validado en la landing MSI.
   Padding/margin bajados para sacar el aire de más que quedaba
   entre los carruseles apilados (cada uno traía su propio colchón
   arriba/abajo, y se sumaban entre sí).
   ============================================================ */
.cont_proy.cat_nota-33-1,
.cont_proy.cat_nota-32-2,
.cont_proy.cat_nota-34-3,
.cont_proy.cat_nota-35-4 {
  overflow-x: hidden !important;
  background: #ffffff;
  margin: 0 !important;
  padding: 0;
  /* padding pasó de "0 0 12px" a "0" (tu regla de esta vuelta) — le
     saca el colchón de 12px que le habíamos puesto abajo a cada
     carrusel. Si notás que ahora los 4 carruseles quedan muy pegados
     entre sí, es por este cambio, avisame y lo restauro.
     scroll-margin-top: este es ahora el destino real de los botones
     del wayfinder y del quiz (ver el fix de navegación en Bloque 1) —
     dejo el mismo aire que en los títulos para que no quede tapado
     por un header fijo. */
  scroll-margin-top: 90px;
}
/* Tu regla de esta vuelta — el propio owl-carousel trae su padding-
   bottom nativo, que sumaba aire extra por debajo de cada carrusel.
   Scopeado a las 4 notas de esta landing (.owl-carousel es una clase
   de la librería, la usan otros carruseles del sitio también). */
.cont_proy.cat_nota-33-1 .owl-carousel,
.cont_proy.cat_nota-32-2 .owl-carousel,
.cont_proy.cat_nota-34-3 .owl-carousel,
.cont_proy.cat_nota-35-4 .owl-carousel {
  padding-bottom: 0;
}
.bck_proy_bg_nota-33-1,
.bck_proy_bg_nota-32-2,
.bck_proy_bg_nota-34-3,
.bck_proy_bg_nota-35-4 {
  display: none;
}
.bck_proy_content_nota-33-1,
.bck_proy_content_nota-32-2,
.bck_proy_content_nota-34-3,
.bck_proy_content_nota-35-4 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Ajuste tuyo: el wrapper nativo .bck_proy trae margin/padding propios
   de la plantilla que generan el espacio vacío. Lo scopeamos a las 4
   notas de esta landing para no afectar otros carruseles del sitio
   que también usan esa clase genérica. */
.cont_proy.cat_nota-33-1 .bck_proy,
.cont_proy.cat_nota-32-2 .bck_proy,
.cont_proy.cat_nota-34-3 .bck_proy,
.cont_proy.cat_nota-35-4 .bck_proy {
  margin: 0;
  padding: 10px;
}
.cont_proy.cat_nota-33-1 .owl-controls,
.cont_proy.cat_nota-32-2 .owl-controls,
.cont_proy.cat_nota-34-3 .owl-controls,
.cont_proy.cat_nota-35-4 .owl-controls {
  position: absolute !important;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  transform: translateY(-50%);
  z-index: 5;
}
/* Ojo con el style="display:none" inline que le vi en el HTML que me
   pasaste, en .owl-buttons: eso lo pone owl.js por script (typico
   cuando hay menos productos que columnas configuradas). El !important
   de la regla de abajo le gana a ese inline (un !important en la hoja
   de estilos siempre le gana a un inline sin !important, sin importar
   el orden), así que en teoría ya se ve. Si después de subir esto
   seguís viendo display:none en el inspector Y los botones invisibles,
   avisame con una captura — ahí sí sería el navegador ignorando el
   !important por alguna otra regla más específica que no tengo forma
   de ver desde acá. */
.cont_proy.cat_nota-33-1 .owl-buttons,
.cont_proy.cat_nota-32-2 .owl-buttons,
.cont_proy.cat_nota-34-3 .owl-buttons,
.cont_proy.cat_nota-35-4 .owl-buttons {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}
/* Botones prev/next — reemplazado por el CSS real que me pasaste de
   "las otras landings de marcas" (por fin tengo la referencia exacta,
   ya no es un tratamiento inventado por mí). Traspaso literal de tus
   reglas (.owl-buttons i / .fa-angle-right:before / .fa-angle-left:before),
   con 2 ajustes:
   1) var(--color-marca2) no existe en esta hoja (esa variable es de
      la otra landing) — la reemplacé por el hex directo #02b8fc, que
      es el mismo cyan que usás en el resto de este archivo y que tu
      propio snippet ya usa a mano en :before. Incluí un font-size en
      el ícono (tu snippet no lo traía) porque si no, el glyph queda
      chico y descentrado dentro del círculo de 80%.
   2) Todo scopeado a los 4 notaId de esta landing (tu snippet no
      tenía scope) — mismo criterio que el resto de este archivo, para
      no pisar los íconos fa-angle-* de otras partes del sitio que no
      son esta landing. */
.cont_proy.cat_nota-33-1 .owl-prev,
.cont_proy.cat_nota-33-1 .owl-next,
.cont_proy.cat_nota-32-2 .owl-prev,
.cont_proy.cat_nota-32-2 .owl-next,
.cont_proy.cat_nota-34-3 .owl-prev,
.cont_proy.cat_nota-34-3 .owl-next,
.cont_proy.cat_nota-35-4 .owl-prev,
.cont_proy.cat_nota-35-4 .owl-next {
  pointer-events: auto;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
}
.cont_proy.cat_nota-33-1 .owl-buttons i,
.cont_proy.cat_nota-32-2 .owl-buttons i,
.cont_proy.cat_nota-34-3 .owl-buttons i,
.cont_proy.cat_nota-35-4 .owl-buttons i {
  border: 1px solid #02b8fc !important;
  border-radius: 50% !important;
  width: 80%;
  height: 80%;
  vertical-align: middle;
  display: flex !important;
  color: #02b8fc !important;
  background: #fff !important;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(5, 18, 48, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}
.cont_proy.cat_nota-33-1 .owl-prev:hover i,
.cont_proy.cat_nota-33-1 .owl-next:hover i,
.cont_proy.cat_nota-32-2 .owl-prev:hover i,
.cont_proy.cat_nota-32-2 .owl-next:hover i,
.cont_proy.cat_nota-34-3 .owl-prev:hover i,
.cont_proy.cat_nota-34-3 .owl-next:hover i,
.cont_proy.cat_nota-35-4 .owl-prev:hover i,
.cont_proy.cat_nota-35-4 .owl-next:hover i,
.cont_proy.cat_nota-33-1 .owl-prev:active i,
.cont_proy.cat_nota-33-1 .owl-next:active i,
.cont_proy.cat_nota-32-2 .owl-prev:active i,
.cont_proy.cat_nota-32-2 .owl-next:active i,
.cont_proy.cat_nota-34-3 .owl-prev:active i,
.cont_proy.cat_nota-34-3 .owl-next:active i,
.cont_proy.cat_nota-35-4 .owl-prev:active i,
.cont_proy.cat_nota-35-4 .owl-next:active i {
  background: #02b8fc !important;
  color: #ffffff !important;
}
.cont_proy.cat_nota-33-1 .fa-angle-right:before,
.cont_proy.cat_nota-32-2 .fa-angle-right:before,
.cont_proy.cat_nota-34-3 .fa-angle-right:before,
.cont_proy.cat_nota-35-4 .fa-angle-right:before {
  content: "\f105";
  color: #02b8fc;
}
.cont_proy.cat_nota-33-1 .fa-angle-left:before,
.cont_proy.cat_nota-32-2 .fa-angle-left:before,
.cont_proy.cat_nota-34-3 .fa-angle-left:before,
.cont_proy.cat_nota-35-4 .fa-angle-left:before {
  content: "\f104";
  color: #02b8fc;
}
@media (max-width: 768px) {
  .cont_proy.cat_nota-33-1 .owl-prev,
  .cont_proy.cat_nota-33-1 .owl-next,
  .cont_proy.cat_nota-32-2 .owl-prev,
  .cont_proy.cat_nota-32-2 .owl-next,
  .cont_proy.cat_nota-34-3 .owl-prev,
  .cont_proy.cat_nota-34-3 .owl-next,
  .cont_proy.cat_nota-35-4 .owl-prev,
  .cont_proy.cat_nota-35-4 .owl-next {
    width: 44px !important;
    height: 44px !important;
  }
  .cont_proy.cat_nota-33-1 .owl-buttons i,
  .cont_proy.cat_nota-32-2 .owl-buttons i,
  .cont_proy.cat_nota-34-3 .owl-buttons i,
  .cont_proy.cat_nota-35-4 .owl-buttons i {
    font-size: 16px;
  }
}
/* Si después de esto los botones siguen sin aparecer, no es un tema
   de estilo: el propio owl-carousel los oculta con ese style inline
   cuando hay menos productos que columnas configuradas
   (data-proyector-columnas-desktop="6"). Con los SKUs todavía sin
   reclasificar en las 4 gamas nuevas, puede haber carruseles con
   pocos productos por ahora — se va a resolver solo cuando
   reacomodes los SKUs. */
/* Saqué el fix anterior de height en .product. Con el HTML real que
   me pasaste veo que esa altura la pone JS del propio carrusel en
   DOS niveles inline (.item.proyector-categoria__item Y .product por
   separado, cada uno con su propio px), para igualar el alto de
   todas las cards de una fila. Si le fuerzo auto/min-height solo a
   .product, el padre .item se queda con su altura vieja y el aire
   se corre de lugar en vez de desaparecer — puede verse peor, no
   mejor. Tocar esto bien requiere ver el carrusel renderizado para
   saber si el aire real molesta más que el beneficio de tener las
   cards prolijamente parejas. Lo dejo como está nativamente hasta
   que lo confirmes con una captura. */

/* ============================================================
   REGLAS PEDIDAS ESTA VUELTA (2 fixes puntuales de breakpoint)

   Ojo: el bloque que me pasaste traía un @media anidado adentro de
   otro @media, y al segundo le faltaba la llave de cierre — eso no
   es válido en CSS plano (no como Sass), así que lo separé en dos
   reglas @media independientes, cada una con el rango que su propio
   selector indica. Además scopeé las dos a los 4 notaId de esta
   landing (.cols-grals y .product son clases nativas genéricas del
   sitio, no propias) para no pisar otras partes de la página que
   también las usen — mismo criterio que el resto de este archivo.
   ============================================================ */
@media (min-width: 481px) and (max-width: 767px) {
  .cont_proy.cat_nota-33-1 .col-md-12.col-xs-12.cols-grals,
  .cont_proy.cat_nota-32-2 .col-md-12.col-xs-12.cols-grals,
  .cont_proy.cat_nota-34-3 .col-md-12.col-xs-12.cols-grals,
  .cont_proy.cat_nota-35-4 .col-md-12.col-xs-12.cols-grals {
    padding: 0px;
  }
  /* Al sacarle el padding a .cols-grals, el contenido de la card
     (imagen, precio, botón) podría quedar pegado al borde. Restauro
     un poco de aire por dentro para compensar, sin tocar el ancho de
     columna que pediste. min-height:440px es tu regla, la agrego tal
     cual — le pone un piso a la altura de la card en este rango para
     que no varíe tanto entre productos con nombres largos/cortos. */
  .cont_proy.cat_nota-33-1 .product,
  .cont_proy.cat_nota-32-2 .product,
  .cont_proy.cat_nota-34-3 .product,
  .cont_proy.cat_nota-35-4 .product {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    min-height: 440px;
  }
}
@media (max-width: 1024px) {
  .cont_proy.cat_nota-33-1 .product button.btn.btn-primary.btn-compra,
  .cont_proy.cat_nota-32-2 .product button.btn.btn-primary.btn-compra,
  .cont_proy.cat_nota-34-3 .product button.btn.btn-primary.btn-compra,
  .cont_proy.cat_nota-35-4 .product button.btn.btn-primary.btn-compra {
    margin: 0 10px;
    justify-self: center;
    max-width: 90% !important;
  }
}

/* ============================================================
   CÓMO ELEGIR (Bloque 2, autoservicio)
   ============================================================ */
.gc-pcarmada-howto { background: var(--gcpc-navy-tint); padding: 44px 20px; }
.gc-pcarmada-howto-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-howto-sub {
  color: var(--gcpc-navy);
  opacity: 0.65;
  font-size: 14.5px;
  margin: 0 0 28px;
}
.gc-pcarmada-howto-fallback {
  text-align: center;
  font-size: 13px;
  color: var(--gcpc-navy);
  opacity: 0.7;
  margin: 24px 0 0;
}
.gc-pcarmada-howto-fallback a { font-weight: 700; text-decoration: underline; }

/* ============================================================
   PROCESO (why extendido, full-bleed navy)
   ============================================================ */
.gc-pcarmada-process { background: var(--gcpc-navy); padding: 48px 20px; }
.gc-pcarmada-process-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-process-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}
.gc-pcarmada-process-step { text-align: center; }
.gc-pcarmada-process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--gcpc-cyan);
  color: var(--gcpc-cyan);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}
.gc-pcarmada-process-step h3 {
  color: var(--gcpc-white);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 6px;
}
.gc-pcarmada-process-step p {
  color: var(--gcpc-white);
  opacity: 0.65;
  font-size: 13px;
  margin: 0;
}

/* ============================================================
   FAQ (acordeón simple)
   ============================================================ */
.gc-pcarmada-faq-section { background: var(--gcpc-white); padding: 48px 20px; }
.gc-pcarmada-faq-inner { max-width: 760px; margin: 0 auto; }
.gc-pcarmada-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}
.gc-pcarmada-faq-item {
  border: 1px solid var(--gcpc-navy-border);
  border-radius: var(--gcpc-radius-sm);
  background: var(--gcpc-white);
  transition: background 0.15s ease, border-color 0.2s ease;
}
.gc-pcarmada-faq-item:hover:not(.gc-pcarmada-faq-open) {
  border-color: var(--gcpc-cyan-border);
}
.gc-pcarmada-faq-item.gc-pcarmada-faq-open {
  background: var(--gcpc-cyan-tint);
  border-color: var(--gcpc-cyan-border);
}
.gc-pcarmada-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--gcpc-navy);
  font-size: 14px;
}
.gc-pcarmada-faq-toggle {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--gcpc-cyan);
  transition: transform 0.2s ease;
}
.gc-pcarmada-faq-open .gc-pcarmada-faq-toggle { transform: rotate(45deg); }
.gc-pcarmada-faq-a {
  display: none;
  padding: 0 14px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gcpc-navy);
  opacity: 0.88;
}
.gc-pcarmada-faq-open .gc-pcarmada-faq-a { display: block; }
.gc-pcarmada-faq-a p { margin: 0; }

/* ============================================================
   CIERRE
   ============================================================ */
.gc-pcarmada-close { background: var(--gcpc-navy); padding: 48px 20px; }
.gc-pcarmada-close-inner { max-width: 700px; margin: 0 auto; }
.gc-pcarmada-close-sub {
  color: var(--gcpc-white);
  opacity: 0.75;
  font-size: 14.5px;
  margin: 0 0 24px;
}
.gc-pcarmada-close-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.gc-pcarmada-close-fallback {
  text-align: center;
  font-size: 12.5px;
  color: var(--gcpc-white);
  opacity: 0.55;
  margin: 18px 0 0;
}
.gc-pcarmada-close-fallback a {
  color: var(--gcpc-white);
  text-decoration: underline;
}

/* ============================================================
   Mobile-first: breakpoints 768 / 480 (mismo criterio que el resto
   de landings del proyecto)
   ============================================================ */
@media (min-width: 768px) {
  .gc-pcarmada-hero-inner { flex-direction: row; padding: 56px 24px 40px; }
  .gc-pcarmada-h1 { font-size: 38px; }
  .gc-pcarmada-sub { font-size: 16px; }
  .gc-pcarmada-hero-visual { flex: 0 0 42%; }

  /* El grid de wayfinder (1 / 2 / 4 columnas) y el tamaño del ícono
     circular ya se definen junto a .gc-pcarmada-wayfinder-grid más
     arriba en este archivo (breakpoints propios: 560px y 1100px) —
     no se repite acá para no pisar esos valores. */

  .gc-pcarmada-process-grid { flex-direction: row; }
  .gc-pcarmada-process-step { flex: 1; }

  .gc-pcarmada-close-actions { flex-direction: row; justify-content: center; }
}

@media (max-width: 480px) {
  .gc-pcarmada-h1 { font-size: 24px; }
  .gc-pcarmada-trust { gap: 14px 20px; }
  .gc-pcarmada-hero-actions .gc-pcarmada-btn-primary,
  .gc-pcarmada-hero-actions .gc-pcarmada-btn-ghost { width: 100%; }
}