/* Guias: indice (/guias/) y ficha de guia (/guias/<slug>/).
   Todo con tokens del DesignSystem, asi el tema oscuro sale solo.
   Es una pagina de LECTURA: columna estrecha, interlineado alto y tipografia
   mas grande que el resto de la app a proposito. */

/* ============================================================
   Indice de guias
   ============================================================ */

.GuiasPage {
  max-width: var(--eg-col-wide);
  margin: 0 auto;
  padding: var(--eg-space-5) var(--eg-space-4) var(--eg-space-8);
}

.GuiasIntro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--eg-space-7);
}

.GuiasIntro h2 {
  font-family: var(--eg-font-display);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  color: var(--eg-green-ink);
  margin: 0;
  letter-spacing: 0.5px;
}

.GuiasTrazo {
  display: block;
  width: min(220px, 60%);
  height: 18px;
  margin: 4px auto var(--eg-space-3);
  overflow: visible;
}

.GuiasTrazo path {
  fill: none;
  stroke: var(--eg-green);
  stroke-width: 5;
  stroke-linecap: round;
}

.GuiasIntro p {
  color: var(--eg-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

.GuiasGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--eg-space-4);
}

.GuiaCard {
  background: var(--eg-bg);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg);
  box-shadow: var(--eg-shadow-sm);
  transition: transform var(--eg-motion-base), box-shadow var(--eg-motion-base);
}

.GuiaCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--eg-shadow-md);
}

.GuiaCardLink {
  display: block;
  padding: var(--eg-space-5) var(--eg-space-4);
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.GuiaCardIcono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--eg-radius-md);
  background: var(--eg-green-light);
  color: var(--eg-green-darker);
  font-size: 1.5rem;
  margin-bottom: var(--eg-space-3);
}

.GuiaCardTitulo {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 var(--eg-space-2);
  color: var(--eg-text);
}

.GuiaCardResumen {
  color: var(--eg-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--eg-space-3);
}

.GuiaCardMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--eg-text-soft);
}

.GuiasCierre {
  margin-top: var(--eg-space-7);
  padding: var(--eg-space-5);
  border-radius: var(--eg-radius-lg);
  background: var(--eg-green-pale);
  border: 1px solid var(--eg-border);
  text-align: center;
}

.GuiasCierre h3 {
  font-family: var(--eg-font-display);
  font-size: 1.5rem;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-2);
  letter-spacing: 0.4px;
}

.GuiasCierre p {
  color: var(--eg-text-muted);
  line-height: 1.6;
  margin: 0 auto var(--eg-space-4);
  max-width: 60ch;
}

.GuiasCierreBotones,
.GuiaCtaBotones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eg-space-3);
  justify-content: center;
}

/* ============================================================
   Ficha de guia
   ============================================================ */

.GuiaPage {
  max-width: var(--eg-col-base);
  margin: 0 auto;
  padding: var(--eg-space-4) var(--eg-space-4) var(--eg-space-8);
}

.GuiaMiga {
  font-size: 0.85rem;
  color: var(--eg-text-soft);
  margin-bottom: var(--eg-space-4);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.GuiaMiga a {
  color: var(--eg-text-muted);
  text-decoration: none;
}

.GuiaMiga a:hover { text-decoration: underline; }

.GuiaCabecera {
  margin-bottom: var(--eg-space-6);
  padding-bottom: var(--eg-space-5);
  border-bottom: 1px solid var(--eg-border);
}

.GuiaIcono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--eg-radius-md);
  background: var(--eg-green-light);
  color: var(--eg-green-darker);
  font-size: 1.8rem;
  margin-bottom: var(--eg-space-3);
}

.GuiaTitulo {
  font-family: var(--eg-font-display);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: 0.5px;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-3);
}

.GuiaMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--eg-text-soft);
  margin: 0 0 var(--eg-space-4);
}

.GuiaEntradilla {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--eg-text);
  margin: 0;
}

/* Indice interno */
.GuiaIndice {
  background: var(--eg-bg-alt);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-lg);
  padding: var(--eg-space-4) var(--eg-space-5);
  margin-bottom: var(--eg-space-6);
}

.GuiaIndice h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--eg-text-soft);
  margin: 0 0 var(--eg-space-3);
}

.GuiaIndice ol {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}

.GuiaIndice a {
  color: var(--eg-text);
  text-decoration: none;
  line-height: 1.45;
}

.GuiaIndice a:hover {
  color: var(--eg-green-darker);
  text-decoration: underline;
}

/* Cuerpo */
.GuiaSeccion {
  /* margen de anclaje: sin esto, al pinchar en el indice el titulo queda
     debajo de la cabecera fija de Base.html */
  scroll-margin-top: 80px;
  margin-bottom: var(--eg-space-6);
}

.GuiaSeccion h2 {
  font-family: var(--eg-font-display);
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  letter-spacing: 0.4px;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-3);
  line-height: 1.25;
}

.GuiaSeccion p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--eg-text);
  margin: 0 0 var(--eg-space-4);
}

.GuiaListaTitulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--eg-text);
  margin: 0 0 var(--eg-space-2);
}

.GuiaLista {
  margin: 0 0 var(--eg-space-4);
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--eg-space-3);
}

.GuiaLista li {
  position: relative;
  padding-left: 1.6em;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--eg-text);
}

.GuiaLista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eg-green);
}

/* Preguntas frecuentes */
.GuiaFaq {
  margin: var(--eg-space-7) 0 var(--eg-space-6);
  scroll-margin-top: 80px;
}

.GuiaFaq h2 {
  font-family: var(--eg-font-display);
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  letter-spacing: 0.4px;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-4);
}

.GuiaFaqItem {
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  padding: var(--eg-space-3) var(--eg-space-4);
  margin-bottom: var(--eg-space-3);
  background: var(--eg-bg);
}

.GuiaFaqItem summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--eg-text);
  line-height: 1.5;
}

.GuiaFaqItem[open] summary { color: var(--eg-green-darker); }

.GuiaFaqItem p {
  margin: var(--eg-space-3) 0 0;
  color: var(--eg-text-muted);
  line-height: 1.7;
}

/* Llamada a la accion hacia el producto */
.GuiaCta {
  margin: var(--eg-space-7) 0;
  padding: var(--eg-space-5);
  border-radius: var(--eg-radius-lg);
  background: var(--eg-green-pale);
  border: 1px solid var(--eg-border);
  text-align: center;
}

.GuiaCta h2 {
  font-family: var(--eg-font-display);
  font-size: 1.55rem;
  letter-spacing: 0.4px;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-2);
}

.GuiaCta p {
  color: var(--eg-text-muted);
  line-height: 1.65;
  margin: 0 auto var(--eg-space-4);
  max-width: 58ch;
}

.GuiaOtras h2 {
  font-family: var(--eg-font-display);
  font-size: 1.55rem;
  letter-spacing: 0.4px;
  color: var(--eg-green-ink);
  margin: 0 0 var(--eg-space-4);
}

@media (max-width: 600px) {
  .GuiasPage,
  .GuiaPage { padding-left: var(--eg-space-3); padding-right: var(--eg-space-3); }
  .GuiaIndice { padding: var(--eg-space-3) var(--eg-space-4); }
}