/* ════════════════════════════════════════════════════════════════════
   GH · Guía Radiadores eléctricos · control segmentado + paneles
   Prefijo .ghrg- · aislado del tema · verdes de marca
   ════════════════════════════════════════════════════════════════════ */

.ghrg {
  --ghrg-green:      #2EA76F;
  --ghrg-green-dark: #0F3D2E;
  --ghrg-grad:       linear-gradient(135deg, #2EA76F 0%, #0F3D2E 100%);
  --ghrg-bg-soft:    #f1f4f2;
  --ghrg-text:       #1a2b22;
  --ghrg-text-soft:  #5b6b63;
  --ghrg-border:     #e2e8e4;
  --ghrg-ease:       cubic-bezier(0.4, 0, 0.2, 1);

  display: block;
  /* Mismo raíl que el resto de la página de categoría (--gh-cat-rail = 1712px):
     el menú queda pegado al borde izquierdo del raíl y las cards ganan área. */
  max-width: var(--gh-cat-rail, 1712px);
  margin: 28px auto 8px;
  padding: 0 var(--gh-space-8, 2rem);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  color: var(--ghrg-text);
}

/* ─── Control segmentado · 2 botones píldora ─────────────────────── */
.ghrg__seg {
  display: inline-flex;
  gap: 6px;
  margin: 0 auto 22px;
  padding: 6px;
  background: var(--ghrg-bg-soft);
  border-radius: 999px;
  /* centrado del control */
  width: auto;
}
.ghrg__seg-wrap,
.ghrg { text-align: center; }

.ghrg__seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 12px 30px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  color: var(--ghrg-text-soft);
  cursor: pointer;
  transition: color 0.2s var(--ghrg-ease), background 0.2s var(--ghrg-ease), box-shadow 0.2s var(--ghrg-ease);
}
.ghrg__seg-btn:hover { color: var(--ghrg-green-dark); }
.ghrg__seg-btn--active {
  background: var(--ghrg-grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.22);
}

/* ─── Paneles ────────────────────────────────────────────────────── */
.ghrg__panels { text-align: left; }
.ghrg__panel { display: none; animation: ghrg-fade 0.25s var(--ghrg-ease); }
.ghrg__panel--active { display: block; }
@keyframes ghrg-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Estado placeholder (Modelos) ───────────────────────────────── */
.ghrg__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  border: 1.5px dashed var(--ghrg-border);
  border-radius: 18px;
  background: #fafcfb;
  text-align: center;
}
.ghrg__placeholder-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ghrg-green-dark);
}
.ghrg__placeholder-text { margin: 0; color: var(--ghrg-text-soft); font-size: 0.95rem; }

/* ─── Modelos · menú lateral + tarjetas ──────────────────────────── */
.ghrg__models {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}

/* Menú lateral · opciones */
.ghrg__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
.ghrg__side-btn {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ghrg-text-soft);
  cursor: pointer;
  transition: color 0.2s var(--ghrg-ease), background 0.2s var(--ghrg-ease), box-shadow 0.2s var(--ghrg-ease);
}
.ghrg__side-btn:hover { background: var(--ghrg-bg-soft); color: var(--ghrg-green-dark); }
.ghrg__side-btn--active {
  background: var(--ghrg-grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.22);
}
.ghrg__side-btn--active:hover { color: #fff; }

/* Paneles de opción */
.ghrg__opt-panel { display: none; animation: ghrg-fade 0.25s var(--ghrg-ease); }
.ghrg__opt-panel--active { display: block; }

/* Rejilla de tarjetas · 3 por fila */
.ghrg__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta · bloque blanco con imagen centrada + botón · sin sombras */
.ghrg__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--ghrg-border);
  border-radius: 18px;
  padding: 32px 28px;
  transition: border-color 0.2s var(--ghrg-ease);
}
.ghrg__card:hover {
  border-color: var(--ghrg-green);
}
.ghrg__card-img {
  position: relative; /* ancla del corazón de gama (ghguardados, overlay) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.ghrg__card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ghrg__card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ghrg-green-dark);
  text-align: center;
  line-height: 1.3;
}

/* Contenedor de botones de la tarjeta · en fila (como las cards ghcc) */
.ghrg__card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ghrg__card-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--ghrg-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: box-shadow 0.2s var(--ghrg-ease), transform 0.2s var(--ghrg-ease);
}
.ghrg__card-btn:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.22);
}

/* Botón outline «Ampliar información» */
.ghrg__card-info-btn {
  appearance: none;
  border: 1.5px solid var(--ghrg-green);
  background: transparent;
  color: var(--ghrg-green-dark);
  padding: 9px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ghrg-ease), color 0.2s var(--ghrg-ease);
}
.ghrg__card-info-btn:hover {
  background: var(--ghrg-green);
  color: #fff;
}

/* ─── Info drawers · «Ampliar información» ───────────────────────── */

.ghrg__info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.5);
  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ghrg-ease);
}
.ghrg__info-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.ghrg__info-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: calc(100dvh / var(--gh-zoom, 1));
  /* Mismo ancho que el drawer «Cómo elegir» y el de ghcategorycards. */
  width: 760px;
  max-width: calc(95vw / var(--gh-zoom, 1));
  background: #fff;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.18);
}
.ghrg__info-panel--open { transform: translateX(0); }
.ghrg__info-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--ghrg-grad);
}

.ghrg__info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 22px 28px;
  background: var(--ghrg-grad);
  flex-shrink: 0;
}
.ghrg__info-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.ghrg__info-close {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s var(--ghrg-ease);
}
.ghrg__info-close:hover { background: rgba(255, 255, 255, 0.32); }
.ghrg__info-close svg { width: 18px; height: 18px; pointer-events: none; }

.ghrg__info-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 40px;
  background: #f7f9f7;
  overscroll-behavior: contain;
  line-height: 1.65;
}

/* ─── Guía (Cómo elegir) ─────────────────────────────────────────── */
.ghrg__guide { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.ghrg__lead {
  margin: 0 0 22px;
  font-size: 1.05rem;
  color: var(--ghrg-text-soft);
}
.ghrg__guide h3 {
  margin: 26px 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ghrg-green-dark);
}
.ghrg__guide p  { margin: 0 0 12px; }
.ghrg__guide ul { margin: 0 0 12px; padding-left: 1.2em; }
.ghrg__guide li { margin: 0 0 6px; }
.ghrg__guide strong { font-weight: 650; }

/* ─── Drawer · Cómo elegir ───────────────────────────────────────── */

.ghrg__drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.5);
  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ghrg-ease);
}
.ghrg__drawer-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.ghrg__drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: calc(100dvh / var(--gh-zoom, 1));
  width: 680px;
  max-width: calc(95vw / var(--gh-zoom, 1));
  background: #fff;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.18);
}
.ghrg__drawer--open {
  transform: translateX(0);
}
.ghrg__drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--ghrg-grad);
}

.ghrg__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 22px 28px;
  background: var(--ghrg-grad);
  flex-shrink: 0;
}
.ghrg__drawer-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.ghrg__drawer-close {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s var(--ghrg-ease);
}
.ghrg__drawer-close:hover { background: rgba(255, 255, 255, 0.32); }
.ghrg__drawer-close svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.ghrg__drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 32px 48px;
  background: #f7f9f7;
  overscroll-behavior: contain;
}

/* ── Tipografía del contenido dentro del drawer ──────────────────────
   Rediseño 2026-10-21 («se ve tocho»): texto a la izquierda (la sección
   .ghrg centra sus botones y el drawer lo heredaba), medida de lectura
   cómoda y bloques visuales opcionales que el HTML de la guía activa con
   clases ghrg-* (pasos numerados, cifras, tipos, consejos, cierre). Sin
   esas clases, h3/ul/ol/p siguen teniendo un estilo limpio por defecto. */
.ghrg__drawer-body .ghrg__guide {
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ghrg-text);
}
.ghrg__drawer-body .ghrg__guide p { margin: 0 0 14px; }
.ghrg__drawer-body .ghrg__guide strong { font-weight: 650; color: var(--ghrg-green-dark); }

/* Entradilla · frase grande, sin caja */
.ghrg__drawer-body .ghrg__lead {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ghrg-green-dark);
}

/* Aviso suave (consulta) */
.ghrg__drawer-body .ghrg-callout {
  position: relative;
  margin: 20px 0 8px;
  padding: 14px 16px 14px 48px;
  background: #eaf6ef;
  border: 1px solid #cfe9db;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.ghrg__drawer-body .ghrg-callout::before {
  content: 'i';
  position: absolute;
  left: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ghrg-green);
  color: #fff;
  font: 700 12px/20px Georgia, serif;
  text-align: center;
}

/* Títulos de paso · sin caja; con número en círculo si llevan .ghrg-step */
.ghrg__drawer-body .ghrg__guide h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ghrg-border);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ghrg-green-dark);
}
.ghrg__drawer-body .ghrg-step__num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ghrg-grad);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(46, 167, 111, 0.28);
}
.ghrg__drawer-body .ghrg-step--extra .ghrg-step__num {
  background: linear-gradient(135deg, #f5c04a 0%, #e0912b 100%);
  box-shadow: 0 4px 10px rgba(224, 145, 43, 0.3);
}

/* Cifras · tres tarjetas en fila */
.ghrg__drawer-body .ghrg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 8px;
}
.ghrg__drawer-body .ghrg-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid var(--ghrg-border);
  border-radius: 12px;
}
.ghrg__drawer-body .ghrg-stat strong {
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.2;
  color: var(--ghrg-green-dark);
}
.ghrg__drawer-body .ghrg-stat span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ghrg-text-soft);
}
.ghrg__drawer-body .ghrg-stat--accent {
  background: var(--ghrg-grad);
  border-color: transparent;
}
.ghrg__drawer-body .ghrg-stat--accent strong,
.ghrg__drawer-body .ghrg-stat--accent span { color: #fff; }

/* Tipos de emisor · tarjetas con etiqueta de uso */
.ghrg__drawer-body .ghrg-types {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 8px;
}
.ghrg__drawer-body .ghrg-type {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ghrg-border);
  border-radius: 12px;
}
.ghrg__drawer-body .ghrg-type p { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.6; }
.ghrg__drawer-body .ghrg-type p:last-child { margin-bottom: 0; }
.ghrg__drawer-body .ghrg__guide .ghrg-type__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ghrg__drawer-body .ghrg-type__head strong { font-size: 1rem; font-weight: 700; }
.ghrg__drawer-body .ghrg-type__tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf6ef;
  color: #1F6F4A;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.3;
}
.ghrg__drawer-body .ghrg__guide .ghrg-type__note {
  padding: 10px 12px;
  background: var(--ghrg-bg-soft);
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--ghrg-text-soft);
}

/* Listas por defecto · viñeta verde, sin cajas */
.ghrg__drawer-body .ghrg__guide ul,
.ghrg__drawer-body .ghrg__guide ol {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ghrg__drawer-body .ghrg__guide ul li {
  position: relative;
  margin: 0;
  padding-left: 22px;
}
.ghrg__drawer-body .ghrg__guide ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ghrg-green);
}
.ghrg__drawer-body .ghrg__guide ol { counter-reset: ghrg-tip; }
.ghrg__drawer-body .ghrg__guide ol li {
  counter-increment: ghrg-tip;
  position: relative;
  margin: 0;
  padding-left: 34px;
}
.ghrg__drawer-body .ghrg__guide ol li::before {
  content: counter(ghrg-tip);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ghrg-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* Consejos · sí / no */
.ghrg__drawer-body .ghrg__guide .ghrg-tips li {
  padding: 12px 14px 12px 48px;
  background: #fff;
  border: 1px solid var(--ghrg-border);
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.ghrg__drawer-body .ghrg__guide .ghrg-tips li::before {
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
.ghrg__drawer-body .ghrg__guide .ghrg-tips__no::before  { content: '✕'; background: #d9534f; }
.ghrg__drawer-body .ghrg__guide .ghrg-tips__yes::before { content: '✓'; background: var(--ghrg-green); }

/* Funciones · checks verdes */
.ghrg__drawer-body .ghrg__guide .ghrg-checks li { padding-left: 30px; }
.ghrg__drawer-body .ghrg__guide .ghrg-checks li::before {
  content: '✓';
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  background: #eaf6ef;
  color: var(--ghrg-green);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* Cierre destacado */
.ghrg__drawer-body .ghrg__guide .ghrg-closing {
  margin: 28px 0 0;
  padding: 20px 22px;
  background: var(--ghrg-grad);
  border-radius: 14px;
  text-align: center;
  font-size: 1.1rem;
}
.ghrg__drawer-body .ghrg__guide .ghrg-closing strong { color: #fff; font-weight: 700; }

/* ─── v2.1.0 · el menú de tipos navega ───────────────────────────────
   Las opciones son <a> con las clases de los botones: solo hay que anular
   el subrayado y dar display de bloque. Mismo layout en toda la familia. */

a.ghrg__side-btn {
  display: block;
  text-decoration: none;
}

/* 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 > .ghrg__seg { margin: 0; }