/* ============================================================
   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.

   v31 (ronda 24): a partir de esta ronda, cada versión de estilo es un
   archivo nuevo (pedido de David) — este parte de v26/v30 completo
   (mismo contenido, ronda 23), con 4 cambios puntuales: FAQ toggle
   (hover + confirmación de alineación), transición en los puntos del
   recomendador, rediseño real de las cards de "publicaciones" (ahora
   con superficie propia, no solo sombra), y rediseño de los botones
   prev/next del carrusel (neutros en reposo, cyan solo en hover/foco —
   el acento queda 100% reservado a interacción).
   Se usa con los mismos bloques HTML de v22 (bloque1/bloque2), no cambia
   HTML en esta ronda.

   OJO — numeración: en tu carpeta ya existían v27/v28/v29/v30.css
   (snapshots de las rondas 20/21/22/23, cada ronda vieja separada en
   su propio archivo — esto se armó en algún momento de esta misma
   sesión, antes de que se resumiera la conversación, y no lo tenía
   presente). v30.css es idéntico byte a byte a v26.css (ronda 23). Por
   eso esta ronda pasa a llamarse v31, no v27 — v27 ya existe y es otra
   cosa (ronda 20, con navy de card y glow, ya revertido). Si en algún
   momento mandé un archivo llamado "v27.css" con ESTE contenido (ronda
   24), ignoralo — el nombre correcto es v31.
   ============================================================ */

/* ---------- 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 {
  /* Paleta v26 (21/8) — "Negro Gamer" (Opción 2 del preview
     gc_pcarmada_paleta_opciones_v3.html), pedido explícito de David:
     rediseño completo a tema oscuro en TODA la landing, no solo el
     hero. IMPORTANTE: esto reemplaza la Opción C (verde lima) que
     se había aplicado en v22 — quedó descartada, David pidió explorar
     de nuevo con los colores REALES activos hoy en gamingcity.com.ar
     (los que él mismo pasó: --color-marca1..8) en vez de un acento
     inventado. Acá el "cyan" vuelve a ser el celeste real de marca
     (#02b8fc, el que el propio sitio nombra "principal"), y el fondo
     pasa de navy a negro puro en todas las secciones — no solo el
     hero, también wayfinder, quiz, why, FAQ, y el fondo de los 4
     carruseles nativos (ver más abajo, ~línea 610 en adelante).
     --gcpc-navy se mantiene en la paleta pero baja de rango: ya no es
     fondo de sección, queda como color de superficie elevada (cards,
     franjas) y texto secundario sobre fondos claros puntuales.

     (Ronda 20 probó un navy real como 3er color de card + convertir
     trust/why/proceso en chips + un marco nuevo en las publicaciones.
     Ronda 21: David dio marcha atrás, no le convenció — revertido a
     esta versión, la que había aprobado como "buen comienzo". Los
     archivos de esa prueba quedan en el historial de memoria por si
     se retoma más adelante.) */
  --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: rgba(2, 184, 252, 0.1);
  --gcpc-cyan-border: rgba(2, 184, 252, 0.35);
  --gcpc-white: #ffffff;
  --gcpc-ink: #ffffff;
  --gcpc-bg: #000000;
  --gcpc-surface: #0d1117;
  --gcpc-surface-border: rgba(2, 184, 252, 0.22);
  --gcpc-text-soft: rgba(255, 255, 255, 0.7);
  --gcpc-text-softer: rgba(255, 255, 255, 0.55);
  --gcpc-radius: 8px;
  --gcpc-radius-sm: 6px;
  /* Ronda 23: era un glow cyan (0 0 22px de blur en color) — sombra
     de acento, el tipo de detalle que David marcó como "se nota que
     tiene IA". La cambio acá, en la variable, para que se corrija
     sola en todos los lugares que la usan (card del wayfinder al
     hover, card del recomendador): sombra neutra en negro, sin
     color, como cualquier elevación de card premium normal. */
  --gcpc-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gcpc-bg);
  color: var(--gcpc-ink);
  line-height: 1.6;
}
.gc-pcarmada a { color: var(--gcpc-cyan); } /* antes navy — sobre fondo negro un link navy no se vería */
.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-white);
  margin: 0 0 10px;
}
/* Ronda 21 (21/8), pedido puntual: recolorear SOLO los h2 que son
   `.gc-pcarmada-h2.gc-pcarmada-center` sin el modificador -inverse —
   hoy son 3 títulos: "Para qué la vas a usar?" (wayfinder), "No sabés
   cuál elegír?" (quiz) y "Preguntas frecuentes" (FAQ). Elegí cyan
   (el acento de toda la landing) para que un título de sección se
   note más que texto blanco plano — no me dijiste a qué color
   pasarlos, así que asumí esto; si querés otro color (o volver a
   blanco) es una línea. Esta regla, al tener 2 clases en el
   selector, es más específica que `.gc-pcarmada-h2` sola pero MENOS
   específica que la regla de -inverse de abajo — por eso los 2
   títulos que además llevan -inverse ("De nuestras oficinas..." y
   "Todavía evaluando?") quedan afuera de este cambio y siguen en
   blanco, tal como pediste. */
h2.gc-pcarmada-h2.gc-pcarmada-center {
  color: var(--gcpc-cyan);
}
.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: #000000 !important; /* negro puro en vez de navy — más contraste sobre el cyan, y hace juego con el "Negro Gamer" */
}
.gc-pcarmada-btn-primary:hover { background: #4fd3ff; } /* cyan más claro al hover, se nota bien sobre fondo negro */
.gc-pcarmada-btn-ghost {
  /* Ya no queda ningún botón en el HTML que use SOLO esta clase sin
     -ghost-inverse (los 4 casos de Bloque 1/2 usan las dos juntas) —
     era pensada para fondos claros que ya no existen en v26. La dejo
     igual a la -inverse para que, si algún día se usa sola, no quede
     invisible (navy sobre negro no se leería). */
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--gcpc-white) !important;
}
.gc-pcarmada-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.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-bg); }
.gc-pcarmada-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* padding-top en 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. 90px es una estimación — avisame
     si quedó bien, corto o de más y lo ajusto al pixel. */
  padding: 90px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* v22: se saca el layout "texto a un lado, imagen al otro" (era
   flex-direction:row en desktop con .gc-pcarmada-hero-visual al
   42%). Ahora el banner es horizontal y va DEBAJO del texto, a todo
   el ancho, en vez de al costado — por eso ya no hace falta ni el
   column-reverse de mobile ni el row de desktop, es una sola columna
   en todos los tamaños. */
.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;
}

/* ---------- Placeholders de imagen (bloques de color, sin <img>
   todavía salvo donde ya se puso la foto real) ---------- */
.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; }

/* ---------- Banner horizontal del hero (v22, pedido de David) ----------
   Reemplaza la foto lateral de antes por un banner ancho debajo del
   texto. Como el mobile (400x300, relación 4:3) y el desktop
   (1200x300, relación 4:1) son proporciones MUY distintas — no una
   simplemente más grande que la otra — uso dos recuadros separados
   en vez de estirar una sola imagen a dos formas tan diferentes: uno
   se ve en mobile, el otro desde 768px. Cuando tengas las fotos,
   cada uno se reemplaza por su propio <img> (mismo mecanismo que ya
   usamos: reemplazar el <i> de adentro). */
.gc-pcarmada-hero-banner-ph {
  width: 100%;
  background: var(--gcpc-surface);
  border: 1px dashed var(--gcpc-cyan-border);
}
.gc-pcarmada-hero-banner-ph-mobile { aspect-ratio: 4 / 3; }
.gc-pcarmada-hero-banner-ph-desktop { display: none; }
@media (min-width: 768px) {
  .gc-pcarmada-hero-banner-ph-mobile { display: none; }
  .gc-pcarmada-hero-banner-ph-desktop {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 4 / 1;
    max-height: 300px;
  }
}

/* ---------- 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-bg); padding: 44px 20px 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gc-pcarmada-wayfinder-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-wayfinder-sub {
  text-align: center;
  color: var(--gcpc-text-soft);
  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); }
}
/* Card del wayfinder — ronda 21 (21/8): pediste que en mobile sean
   horizontales y más bajas, para que se deslice más rápido por las
   4 (hoy cada una apila la foto arriba + todo el texto abajo, ocupa
   bastante alto). Mobile-first: la base de abajo (sin media query)
   es la versión horizontal — foto chica a la izquierda, texto a la
   derecha. Desde 560px (donde el grid ya pasa a 2 columnas) vuelve
   al formato vertical de antes, que en desktop se ve mejor con la
   foto grande arriba. */
.gc-pcarmada-wf-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--gcpc-surface);
  border: 1px solid var(--gcpc-surface-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;
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-card { flex-direction: column; }
}
.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).
   Mobile: ancho fijo chico y sin aspect-ratio propio — la altura la
   da el "stretch" de la card (queda igual de alta que el texto de al
   lado), así no hace falta calcular una relación nueva. Desde 560px
   vuelve a ocupar el 100% del ancho con su 4:3 de siempre, como
   columna arriba de la tarjeta.
   Ojo con los valores que pediste (width:130px + flex:0 0 150px):
   en un contenedor flex-direction:row, flex-basis (los 150px del
   shorthand `flex`) le gana a `width` para el tamaño real en el eje
   principal — así que el ancho efectivo que vas a ver es 150px, el
   width:130px queda ahí sin efecto práctico. Lo dejo tal cual me lo
   pasaste por si controlás alguna otra vista con ese width, pero
   avisame si en realidad querías 130px y no 150px. */
.gc-pcarmada-wf-media {
  width: 130px;
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gcpc-cyan-tint);
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }
}
.gc-pcarmada-wf-media i { font-size: 40px; color: var(--gcpc-cyan); opacity: 0.5; }
.gc-pcarmada-wf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobile: contenido alineado a la izquierda (va al lado de la foto,
   no debajo) y con menos padding, para que la tarjeta baje de alto.
   Desde 560px vuelve a quedar centrado como columna, como antes. */
.gc-pcarmada-wf-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  text-align: left;
  padding: 12px 14px;
  row-gap: 5px;
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-content {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 20px 18px 18px;
  }
}
.gc-pcarmada-wf-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--gcpc-white);
  margin: 0 0 4px;
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-title { font-size: 17px; 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). En mobile
   se esconde la descripción larga (.wf-desc) para que la card no
   crezca de alto otra vez — con título + esta línea alcanza para
   identificar la gama de un vistazo mientras se desliza. */
.gc-pcarmada-wf-lead {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gcpc-cyan);
  margin: 0;
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-lead { font-size: 13.5px; margin: 0 0 4px; }
}
.gc-pcarmada-wf-desc {
  display: none;
  font-size: 12px;
  color: var(--gcpc-text-softer);
  margin: 0 0 20px;
}
@media (min-width: 560px) {
  .gc-pcarmada-wf-desc { display: block; }
}
/* CTA — en v26 pasa de botón sólido navy a botón "outline" cyan por
   defecto (un botón sólido navy casi no se distinguía de la card,
   que ahora también es oscura), y se llena de cyan sólido en hover.
   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.
   Ya no es un <a> real (ver el fix del <a>-unwrap más 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: 10px 14px;
  border-radius: var(--gcpc-radius-sm);
  background: transparent;
  border: 1.5px solid var(--gcpc-cyan-border);
  color: var(--gcpc-cyan) !important;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gc-pcarmada-wf-card:hover .gc-pcarmada-wf-cta {
  background: var(--gcpc-cyan);
  border-color: var(--gcpc-cyan);
  color: #000000 !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).
   ============================================================ */
/* Ronda 23: se sacó la franja cyan de arriba de la ronda anterior
   (mismo motivo que en "publicaciones" y "proceso" — leía a diseño
   genérico de IA). Vuelve al borde neutro simple. La función de
   "mostrar en qué paso estás" se resuelve mejor abajo, en los
   puntitos de progreso, dándole a cada paso un color propio en vez
   de decorar la card entera. */
.gc-pcarmada-quiz {
  max-width: 560px;
  margin: 0 auto;
  background: var(--gcpc-surface);
  border: 1px solid var(--gcpc-surface-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: rgba(255, 255, 255, 0.06);
  color: var(--gcpc-white);
  opacity: 0.45;
  /* Ronda 24: esto ya estaba resuelto en la ronda 23 (color distinto
     por paso vía data-gcpc-dot, ver reglas de abajo) — lo repetiste en
     tu último mensaje, así que asumo que todavía no lo viste
     renderizado, no que el criterio esté mal. Lo único que sumo acá es
     la transición, que faltaba: sin esto el cambio de color al avanzar
     de paso es un salto seco, con esto es un fundido suave. */
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
/* Ronda 23: en vez de un solo cyan para "activo" (el mismo tono
   decorativo que se sacó del resto), cada paso tiene su propio
   color — así el punto no solo dice "ya pasaste por acá", te dice
   EN CUÁL de los 3 pasos estás de un vistazo, sin depender de leer
   el número. El HTML ya traía `data-gcpc-dot="1/2/3"` (no hizo
   falta tocar nada), y el JS marca `is-active` en todos los puntos
   hasta el actual (por eso al llegar al paso 3 los 3 quedan
   prendidos, cada uno con su color — se lee como un progreso, no
   como una sola luz cyan repetida 3 veces). */
.gc-pcarmada-quiz-dot[data-gcpc-dot="1"].is-active {
  background: #02b8fc;
  color: #000000;
  opacity: 1;
}
.gc-pcarmada-quiz-dot[data-gcpc-dot="2"].is-active {
  background: #1389f7;
  color: #ffffff;
  opacity: 1;
}
.gc-pcarmada-quiz-dot[data-gcpc-dot="3"].is-active {
  background: #ffffff;
  color: var(--gcpc-navy);
  opacity: 1;
}
.gc-pcarmada-quiz-dot-line {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
}
.gc-pcarmada-quiz-progress-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gcpc-text-softer);
  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-white);
  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-text-soft);
  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: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gcpc-white);
  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-cyan-tint);
  color: var(--gcpc-cyan);
  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: #000000;
}
.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-white);
  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: var(--gcpc-cyan);
  margin: 0 0 6px;
}
.gc-pcarmada-quiz-result-tier {
  font-size: 26px;
  font-weight: 800;
  color: var(--gcpc-white);
  margin: 0 0 10px;
}
.gc-pcarmada-quiz-result-desc {
  font-size: 14px;
  color: var(--gcpc-text-soft);
  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-white);
  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-bg); padding: 28px 20px 44px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.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 rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}
.gc-pcarmada-why-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gcpc-white);
}
.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), que nosotros
   ocultamos (regla más abajo). En v26 el fondo de esta sección pasa
   a NEGRO (ver `.cont_proy.cat_nota-X { background }` más abajo), así
   que ahora el texto SÍ puede quedar blanco — antes tenía que ser
   navy porque el fondo era blanco.
   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-cyan) tampoco resuelve acá:
   esa variable solo existe adentro de .gc-pcarmada. Colores puestos
   directos en hex acá, no por variable — por eso en esta sección el
   cyan real de marca queda como #02b8fc en hex duro, sin depender de
   que en el resto del archivo la variable --gcpc-cyan cambie.
   ============================================================ */
.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: #ffffff !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. Subido de 90px a 140px en v22
     porque David reportó que "Ver modelos" sigue llevando a los
     productos, no al título — sigue siendo una estimación, no la
     medí en el sitio real. Si con 140px tampoco alcanza, lo más
     rápido para resolverlo de una es que me digas la altura exacta
     del header fijo (clic derecho > Inspeccionar sobre el header en
     el sitio real, la altura aparece en el panel de estilos), en vez
     de que sigamos probando números a ciegas. */
  scroll-margin-top: 140px;
}
/* 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: #02b8fc !important; /* antes #018bc4 (más oscuro) — sobre fondo negro hace falta el cyan real de marca, más brillante, para que se lea bien */
  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: #ffffff !important;
  opacity: 0.7;
  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;
  /* v26: negro en vez de blanco, para que los 4 carruseles nativos
     sigan la misma línea "Negro Gamer" que el resto de la landing.
     ADENTRO, la card de producto (.product) es 100% nativa de
     Tornado — no la toqué de fondo/texto a propósito: no tengo
     visibilidad de cómo están armados por dentro el precio, el
     badge de descuento, el stock y el botón de compra (colores fijos
     por el propio template del sitio), así que forzarle fondo oscuro
     a ciegas puede dejar texto invisible si algo ahí adentro tiene
     color oscuro fijo. Dejarla blanca "flotando" sobre este fondo
     negro es, además, una decisión de diseño válida por sí sola: las
     fotos de producto se ven mejor sobre blanco que sobre negro. Si
     después de ver esto en Tornado te parece que las cards blancas
     desentonan, lo retomamos con una captura real. */
  background: #000000;
  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 el destino real de los botones del
     wayfinder, del hero y del quiz (ver el fix de navegación en
     Bloque 1) — subido a 140px en v22, mismo motivo que arriba. */
  scroll-margin-top: 140px;
}
/* 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;
}
/* Ronda 24 — repensado (David: "no me convencieron"). El círculo con
   borde cyan siempre encendido, aunque no era el glow-cliché exacto,
   seguía siendo "acento de color como marco permanente" — mismo
   espíritu que la regla de diseño de la ronda 23, llevada un paso más.
   Ahora el botón está en NEUTRO en reposo (borde blanco tenue, ícono
   blanco) y el cyan aparece solo cuando hay interacción real
   (hover/active/focus) — coherente con "el acento es para función, no
   decoración". De paso, un leve scale al pasar el mouse le da
   feedback táctil sin depender de un color de fondo permanente. */
.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 rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  width: 80%;
  height: 80%;
  vertical-align: middle;
  display: flex !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.55) !important;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 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 {
  border-color: #02b8fc !important;
  color: #02b8fc !important;
  transform: scale(1.08);
}
.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;
  border-color: #02b8fc !important;
  color: #000000 !important;
  transform: scale(0.96);
}
/* Ronda 24: color en "inherit" (antes cyan fijo) — si no lo cambiaba
   acá, este selector (más específico, pega directo sobre el ::before)
   le ganaba al color neutro que puse arriba en ".owl-buttons i" y el
   ícono seguía viéndose cyan siempre, sin importar el rediseño. Con
   inherit, el glyph sigue el color real de "i" en cada estado: blanco
   en reposo, cyan en hover, negro en active. */
.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: inherit;
}
.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: inherit;
}
@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. */

/* ============================================================
   "PUBLICACIONES" (cards de producto nativas .product) — v26,
   ronda 22: regla tuya para el recuadro de imagen + estilo premium
   con jerarquía visual para toda la card.
   ============================================================ */
/* Tu regla, tal cual la pasaste, scopeada a los 4 notaId (mismo
   criterio de siempre para clases nativas genéricas). Ojo con un
   detalle técnico: `object-fit` solo tiene efecto en elementos
   "reemplazados" (img, video, canvas, object) — en un `<a>` el
   navegador la va a ignorar sin error, pero tampoco va a hacer nada
   visualmente. Si la imagen de verdad no se recorta como esperás,
   probablemente haga falta poner el object-fit en el `<img>` de
   adentro en vez de (o además de) en el `<a>` — avisame con una
   captura si es el caso y lo ajusto. */
.cont_proy.cat_nota-33-1 .product .image>a,
.cont_proy.cat_nota-32-2 .product .image>a,
.cont_proy.cat_nota-34-3 .product .image>a,
.cont_proy.cat_nota-35-4 .product .image>a {
  object-fit: contain;
  height: 220px;
  padding: 0px;
}
/* Ronda 24 — repensado de nuevo (David: "no me convenció"). El
   diagnóstico de por qué la ronda 23 se quedaba corta: solo tocaba el
   borde/sombra, pero la card seguía siendo un recuadro con el fondo
   nativo de Tornado (blanco) flotando suelto sobre la sección negra —
   no borde de color, pero tampoco pertenecía al sistema "Negro Gamer"
   de verdad, se veía como un recuadro pegado encima, no como parte de
   la landing. Esta vuelta la card pasa a tener SU PROPIA superficie
   (mismo --gcpc-surface que usan el wayfinder y el quiz, no un color
   nuevo inventado) con texto e imagen adentro en vez de un fondo
   blanco aislado — así se integra al resto de la paleta en vez de
   ser una isla. Sigue sin borde de color ni glow: el límite de la
   card lo da el propio cambio de tono (superficie #0d1117 contra
   fondo #000000) más una línea neutra blanca muy tenue (no cyan) para
   que se note el borde en pantallas donde el contraste de tono solo
   no alcanza — nada de esto es un acento decorativo, es la misma
   superficie que ya usás en el resto de la landing. */
.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 {
  background: var(--gcpc-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px !important;
  overflow: hidden;
  box-sizing: border-box !important;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cont_proy.cat_nota-33-1 .product:hover,
.cont_proy.cat_nota-32-2 .product:hover,
.cont_proy.cat_nota-34-3 .product:hover,
.cont_proy.cat_nota-35-4 .product:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.55);
}
/* Con la card ahora oscura, el texto nativo (que asumía fondo blanco,
   probablemente negro por defecto) queda invisible si no lo toco.
   Selectores confirmados en [[reference_tornadostore_landing_patterns]]:
   .description h4 a.titprod (título) y .price span (precio). Jerarquía:
   título blanco, precio en cyan y más grande — es el dato que más
   importa en una card de producto, así que es el que más peso visual
   se lleva, no el acento puesto porque sí. No confirmado con captura
   todavía: si el HTML real trae más elementos de texto (cuotas, badge)
   que no estén en esta lista, van a seguir con su color nativo — avisar
   con una captura si se ven negros sobre el fondo oscuro. */
.cont_proy.cat_nota-33-1 .product .description,
.cont_proy.cat_nota-32-2 .product .description,
.cont_proy.cat_nota-34-3 .product .description,
.cont_proy.cat_nota-35-4 .product .description {
  padding: 10px 12px 4px;
}
.cont_proy.cat_nota-33-1 .product .description h4 a.titprod,
.cont_proy.cat_nota-32-2 .product .description h4 a.titprod,
.cont_proy.cat_nota-34-3 .product .description h4 a.titprod,
.cont_proy.cat_nota-35-4 .product .description h4 a.titprod {
  color: #ffffff !important;
  font-weight: 600;
  transition: color 0.15s ease;
}
.cont_proy.cat_nota-33-1 .product .description h4 a.titprod:hover,
.cont_proy.cat_nota-32-2 .product .description h4 a.titprod:hover,
.cont_proy.cat_nota-34-3 .product .description h4 a.titprod:hover,
.cont_proy.cat_nota-35-4 .product .description h4 a.titprod:hover {
  color: #02b8fc !important;
}
.cont_proy.cat_nota-33-1 .product .price,
.cont_proy.cat_nota-32-2 .product .price,
.cont_proy.cat_nota-34-3 .product .price,
.cont_proy.cat_nota-35-4 .product .price {
  padding: 0 12px 6px;
}
.cont_proy.cat_nota-33-1 .product .price span,
.cont_proy.cat_nota-32-2 .product .price span,
.cont_proy.cat_nota-34-3 .product .price span,
.cont_proy.cat_nota-35-4 .product .price span {
  color: #02b8fc !important;
  font-weight: 700;
  font-size: 16px;
}
/* Botón de compra — selector confirmado. Esto NO es el mismo tipo de
   decoración que se sacó arriba: es un botón real, con una función
   real (comprar), y en toda la landing los botones de acción son
   cyan sólido — es coherencia de sistema, no un acento decorativo
   suelto. Se mantiene igual que antes. */
.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 {
  background: #02b8fc !important;
  border-color: #02b8fc !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, transform 0.1s ease;
}
.cont_proy.cat_nota-33-1 .product button.btn.btn-primary.btn-compra:hover,
.cont_proy.cat_nota-32-2 .product button.btn.btn-primary.btn-compra:hover,
.cont_proy.cat_nota-34-3 .product button.btn.btn-primary.btn-compra:hover,
.cont_proy.cat_nota-35-4 .product button.btn.btn-primary.btn-compra:hover {
  background: #4fd3ff !important;
}

/* ============================================================
   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;
  }
  /* Regla nueva de David (18/8): la imagen del producto tenía una
     altura fija que la recortaba en este rango de ancho — con
     height:max-content toma la altura que la imagen necesite de
     verdad, sin cortarla. Misma lógica de scope que el resto de
     este bloque: .product > .image es una clase nativa genérica,
     así que la limito a los 4 notaId de esta landing. */
  .cont_proy.cat_nota-33-1 .product > .image,
  .cont_proy.cat_nota-32-2 .product > .image,
  .cont_proy.cat_nota-34-3 .product > .image,
  .cont_proy.cat_nota-35-4 .product > .image {
    height: max-content !important;
  }
  /* 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-bg); padding: 44px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gc-pcarmada-howto-inner { max-width: 1080px; margin: 0 auto; }
.gc-pcarmada-howto-sub {
  color: var(--gcpc-text-soft);
  font-size: 14.5px;
  margin: 0 0 28px;
}
.gc-pcarmada-howto-fallback {
  text-align: center;
  font-size: 13px;
  color: var(--gcpc-text-soft);
  margin: 24px 0 0;
}
.gc-pcarmada-howto-fallback a { font-weight: 700; text-decoration: underline; color: var(--gcpc-cyan); }

/* ============================================================
   PROCESO (why extendido, full-bleed — antes navy, ahora negro)
   ============================================================ */
.gc-pcarmada-process { background: var(--gcpc-bg); padding: 48px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gc-pcarmada-process-inner { max-width: 1080px; margin: 0 auto; }
/* Ronda 23 (21/8) — rediseño completo, pediste sacar el estilo de
   "card con borde cyan + glow" (con razón, quedaba genérico/muy
   típico de IA) y rehacer estas 4 tarjetas. En vez de cards, ahora
   es una LÍNEA DE TIEMPO: los números conectados por una línea fina
   neutra (blanco muy tenue, sin color de acento), sin fondo, sin
   borde de card, sin sombra de color. Es un patrón distinto —
   "pasos conectados", no "4 cajitas iguales" — y usa gris/blanco en
   vez de cyan como decoración, así el cyan queda reservado para
   cosas con función real (botones, links) en vez de estar en todos
   lados. No hizo falta tocar el HTML: el orden real de los hijos
   (span.process-num, h3, p) ya alcanza para armar el layout con
   CSS Grid. Mobile: vertical, línea baja. Desde 768px: horizontal,
   línea corrida entre los números — como un stepper de checkout. */
.gc-pcarmada-process-grid {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}
.gc-pcarmada-process-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  position: relative;
  padding-bottom: 28px;
  text-align: left;
}
.gc-pcarmada-process-step:last-child { padding-bottom: 0; }
.gc-pcarmada-process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.gc-pcarmada-process-num {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--gcpc-white);
  font-weight: 800;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.gc-pcarmada-process-step h3 {
  grid-column: 2;
  grid-row: 1;
  color: var(--gcpc-white);
  font-size: 14.5px;
  font-weight: 700;
  align-self: center;
  margin: 0;
}
.gc-pcarmada-process-step p {
  grid-column: 2;
  grid-row: 2;
  color: var(--gcpc-white);
  opacity: 0.65;
  font-size: 13px;
  margin: 4px 0 0;
}
@media (min-width: 768px) {
  .gc-pcarmada-process-grid { flex-direction: row; }
  .gc-pcarmada-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 14px;
  }
  .gc-pcarmada-process-step:not(:last-child)::after {
    left: calc(50% + 16px);
    top: 16px;
    bottom: auto;
    width: calc(100% - 32px);
    height: 1px;
  }
  .gc-pcarmada-process-num { margin-bottom: 12px; }
  .gc-pcarmada-process-step h3 { margin: 0 0 4px; }
  .gc-pcarmada-process-step p { margin: 0; }
}

/* ============================================================
   FAQ (acordeón simple)
   ============================================================ */
.gc-pcarmada-faq-section { background: var(--gcpc-bg); padding: 48px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gc-pcarmada-faq-inner { max-width: 760px; margin: 0 auto; }
.gc-pcarmada-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
/* Ronda 22: mismo restyling premium que el resto — sombra suave al
   hover/abierto para que la card se sienta con más profundidad, sin
   tocar el color de fondo (sigue siendo --gcpc-surface, el gris casi
   negro que ya estaba, no el navy descartado). */
/* Ronda 23: se sacó el glow de color del hover/abierto (mismo
   criterio que el resto) — el cambio de fondo + borde ya alcanza
   para marcar el estado abierto, no hace falta sumarle una sombra
   de color encima. */
.gc-pcarmada-faq-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--gcpc-radius-sm);
  background: var(--gcpc-surface);
  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-white);
  font-size: 14px;
}
/* Ronda 24: el "+" ya estaba pegado a la derecha estructuralmente
   (justify-content:space-between en .gc-pcarmada-faq-q empuja la
   pregunta a la izquierda y el toggle al extremo derecho del todo —
   no hacía falta CSS nuevo para eso, ya estaba desde que se armó el
   componente). Lo que sí sumo acá es el círculo + hover, mismo
   patrón "neutro en reposo, cyan en interacción" que uso ahora en las
   flechas del carrusel más abajo, para que se sienta más a botón real
   y no solo a un signo suelto. La animación de apertura (rotar 45°)
   es la misma que ya está confirmada en producción en la ficha de la
   silla GC-SL02 — es el patrón real que "normalmente hacemos" para
   acordeones en Tornado, no invento uno nuevo. */
.gc-pcarmada-faq-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--gcpc-cyan);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gc-pcarmada-faq-q:hover .gc-pcarmada-faq-toggle {
  border-color: var(--gcpc-cyan-border);
}
.gc-pcarmada-faq-open .gc-pcarmada-faq-toggle {
  transform: rotate(45deg);
  background: var(--gcpc-cyan);
  color: #000000;
  border-color: var(--gcpc-cyan);
}
.gc-pcarmada-faq-a {
  display: none;
  padding: 0 14px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gcpc-text-soft);
}
.gc-pcarmada-faq-open .gc-pcarmada-faq-a { display: block; }
.gc-pcarmada-faq-a p { margin: 0; }

/* ============================================================
   CIERRE (antes navy, ahora negro — consistente con el resto)
   ============================================================ */
.gc-pcarmada-close { background: var(--gcpc-bg); padding: 48px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.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 { padding: 56px 24px 40px; }
  .gc-pcarmada-h1 { font-size: 38px; }
  .gc-pcarmada-sub { font-size: 16px; }

  /* 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%; }
}