/* ════════════════════════════════════════════════════════════════════
   GH · Tarjetas por categoría
   Prefijo .ghcc- · aislado del tema · mismos verdes/tarjeta que ghradiadoresguide
   ════════════════════════════════════════════════════════════════════ */

.ghcc {
  --ghcc-green:  #2EA76F;
  --ghcc-grad:   linear-gradient(135deg, #2EA76F 0%, #0F3D2E 100%);
  --ghcc-text:   #1a2b22;
  --ghcc-border: #e2e8e4;
  --ghcc-ease:   cubic-bezier(0.4, 0, 0.2, 1);

  display: block;
  margin: 28px 0 8px;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  color: var(--ghcc-text);
}

/* Rejilla de tarjetas · 3 columnas en desktop */
.ghcc__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Tarjeta · bloque blanco con imagen centrada + botón · sin sombras */
.ghcc__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--ghcc-border);
  border-radius: 18px;
  padding: 32px 28px;
  transition: border-color 0.2s var(--ghcc-ease);
}
.ghcc__card:hover {
  border-color: var(--ghcc-green);
}
.ghcc__card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.ghcc__card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ghcc__card-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--ghcc-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: box-shadow 0.2s var(--ghcc-ease), transform 0.2s var(--ghcc-ease);
}
.ghcc__card-btn:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.22);
}

/* Fila de botones (enlace + más info) */
.ghcc__card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
/* Botón "Más info": variante secundaria (ghost) frente al primario con degradado */
.ghcc__card-btn--info {
  appearance: none;
  cursor: pointer;
  background: #fff;
  color: var(--ghcc-green);
  border: 1px solid var(--ghcc-green);
}
.ghcc__card-btn--info:hover {
  background: var(--ghcc-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.22);
}

/* ─── Control segmentado · 2 pestañas (Modelos / Descripción) ──────── */
.ghcc__seg {
  display: flex;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 6px;
  background: #f1f4f2;
  border-radius: 999px;
}
.ghcc__seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #5b6b63;
  transition: background 0.2s var(--ghcc-ease), color 0.2s var(--ghcc-ease);
}
.ghcc__seg-btn:hover { color: #0f3d2e; }
.ghcc__seg-btn--active {
  background: #fff;
  color: #0f3d2e;
  box-shadow: 0 1px 3px rgba(15, 61, 46, 0.12);
}

/* Paneles */
.ghcc__panel { display: none; }
.ghcc__panel--active { display: block; }
.ghcc__panel[hidden] { display: none; }

/* Aviso cuando una pestaña no tiene contenido */
.ghcc__placeholder {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  color: #5b6b63;
  background: #f1f4f2;
  border: 1px dashed #cdd8d1;
  border-radius: 12px;
}

/* Descripción (HTML enriquecido por categoría) · panel de lectura:
   tarjeta blanca con filo degradado, entradilla, titulares con barra de
   acento y listas con marcador verde. Mismo lenguaje que las cards. */
.ghcc__desc {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 48px 36px;
  background: #fff;
  border: 1px solid var(--ghcc-border);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  line-height: 1.7;
  font-size: 15.5px;
  color: var(--ghcc-text);
}
.ghcc__desc::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ghcc-grad);
}
.ghcc__desc > :first-child { margin-top: 0; }
.ghcc__desc > :last-child { margin-bottom: 0; }

/* Entradilla · el primer párrafo (o el que sigue al título inicial),
   algo mayor y en verde bosque */
.ghcc__desc > p:first-child,
.ghcc__desc > h1:first-child + p,
.ghcc__desc > h2:first-child + p {
  font-size: 17.5px;
  line-height: 1.65;
  color: #0f3d2e;
}

/* Titulares con barra de acento */
.ghcc__desc h1,
.ghcc__desc h2,
.ghcc__desc h3,
.ghcc__desc h4 {
  margin: 1.6em 0 0.6em;
  padding-left: 14px;
  border-left: 3px solid var(--ghcc-green);
  line-height: 1.3;
  color: #0f3d2e;
}
.ghcc__desc h1 { font-size: 24px; }
.ghcc__desc h2 { font-size: 21px; }
.ghcc__desc h3 { font-size: 18px; }
.ghcc__desc h4 { font-size: 16px; }

.ghcc__desc p { margin: 0 0 1em; }
.ghcc__desc strong { color: #0f3d2e; }

/* Listas · marcador de punto verde (ul) y numeración en verde (ol) */
.ghcc__desc ul {
  margin: 0 0 1.1em;
  padding-left: 0;
  list-style: none;
}
.ghcc__desc ul > li {
  position: relative;
  padding-left: 24px;
  margin: 0.45em 0;
}
.ghcc__desc ul > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ghcc-green);
}
.ghcc__desc ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
}
.ghcc__desc ol > li {
  margin: 0.45em 0;
  padding-left: 4px;
}
.ghcc__desc ol > li::marker {
  color: var(--ghcc-green);
  font-weight: 700;
}

.ghcc__desc a { color: var(--ghcc-green); text-decoration: underline; }
.ghcc__desc img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.5em 0; }

/* ─── Drawer lateral "Más info" ──────────────────────────────────────
   Se cuelga de <body> (lo mueve ghcategorycards.js), así que define su propia
   tipografía y vive por encima de todo. */
.ghcc-drawer[hidden] { display: none; }
.ghcc-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}
.ghcc-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 20, 0.45);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ghcc-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Mismo ancho que el drawer «Cómo elegir» de ghradiadoresguide (680px). */
  width: min(680px, calc(95vw / var(--gh-zoom, 1)));
  background: #fff;
  box-shadow: -8px 0 30px rgba(15, 23, 20, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 56px 28px 32px;
  color: #1a2b22;
}
.ghcc-drawer.is-open .ghcc-drawer__overlay { opacity: 1; }
.ghcc-drawer.is-open .ghcc-drawer__panel { transform: translateX(0); }
.ghcc-drawer__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #f1f4f2;
  color: #0f3d2e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ghcc-drawer__close:hover { background: #e2e8e4; }
/* Tipografía del contenido (el drawer cuelga de <body>, fuera del tema). */
.ghcc-drawer__content { line-height: 1.6; font-size: 15px; color: #1a2b22; }
.ghcc-drawer__content img { max-width: 100%; height: auto; }
.ghcc-drawer__content > :first-child { margin-top: 0; }
.ghcc-drawer__content h1,
.ghcc-drawer__content h2,
.ghcc-drawer__content h3,
.ghcc-drawer__content h4 { margin: 1.2em 0 0.5em; line-height: 1.3; color: #0f3d2e; }
.ghcc-drawer__content p { margin: 0 0 1em; }
.ghcc-drawer__content ul,
.ghcc-drawer__content ol { margin: 0 0 1em; padding-left: 1.4em; }
.ghcc-drawer__content li { margin: 0.25em 0; }
.ghcc-drawer__content a { color: var(--ghcc-green, #2EA76F); text-decoration: underline; }
.ghcc-drawer__content img { border-radius: 8px; margin: 0.5em 0; }

body.ghcc-no-scroll { overflow: hidden; }

/* Dentro de la fila del tema (.gh-seg-row) el margen y el centrado los pone
   la fila (botones de consulta a la derecha, 2026-11-07). */
.gh-seg-row > .ghcc__seg { margin: 0; }