/* =========================================================================
   DePleno — estilos de las guías (/guias/*)
   Additivo sobre styles.css: reutiliza tokens, .card, .tag, .btn, .site-footer.
   Aquí solo va lo específico del formato guía (long-form legible).
   ========================================================================= */

/* Barra superior clara (las guías no llevan el hero oscuro) */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.topbar .brand { color: var(--ink); }
.topbar .brand .brand__dot { color: var(--green); }
.topbar__cta {
  font-size: .9rem; font-weight: 700;
  background: var(--green-deep); color: #fff;
  padding: 9px 16px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.topbar__cta:hover { opacity: .9; text-decoration: none; }

/* Columna de lectura */
.guide { max-width: 780px; margin-inline: auto; padding-block: 28px 8px; }
.breadcrumb { font-size: .85rem; color: var(--ink-3); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-2); }
.guide > h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; }
.guide__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .85rem; color: var(--ink-3); margin: 6px 0 4px;
}
.guide__illus {
  font-size: .78rem; color: var(--ink-3); display: inline-flex; gap: .4em;
  margin-bottom: 22px;
}
.guide h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; margin-top: 40px; }
.guide h3 { font-size: 1.12rem; margin-top: 26px; }
.guide p, .guide li { color: var(--ink-2); font-size: 1.02rem; }
.guide ul, .guide ol { padding-left: 1.2em; }
.guide li { margin-bottom: 6px; }
.guide strong { color: var(--ink); }

/* Caja de respuesta directa (answer-first, formato GEO) */
.answer-box {
  background: var(--green-tint); border-left: 5px solid var(--green);
  border-radius: var(--r-md); padding: 20px 22px; margin: 22px 0 30px;
}
.answer-box h2 { margin: 0 0 8px; font-size: 1.05rem; color: var(--green-dark); text-transform: uppercase; letter-spacing: .04em; }
.answer-box p { margin: 0; color: var(--ink); }
.answer-box p + p { margin-top: 10px; }

/* Dato/aviso destacado (peso, legalidad…) */
.callout {
  background: #FFF7E6; border: 1px solid #F2C14E; border-radius: var(--r-md);
  padding: 14px 18px; margin: 22px 0; font-size: .95rem; color: #7a5c12;
}
.callout b { color: #6a4f0e; }

/* Rejilla de tarjetas dentro de la guía (una columna, tarjeta completa) */
.guide-cards { display: grid; gap: 16px; margin: 20px 0 8px; }

/* Paso numerado (guías comprables) */
.step-head { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.step-head .step__n { margin: 0; flex: 0 0 auto; }
.step-head h3 { margin: 0; }

/* Lista de la compra (tabla) */
.buylist-wrap { overflow-x: auto; margin: 18px 0; }
.buylist { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.buylist th, .buylist td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.buylist th { color: var(--ink-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.buylist td { color: var(--ink-2); }
.buylist tr:last-child td { border-bottom: 0; }
.buylist .price { white-space: nowrap; font-weight: 700; color: var(--ink); }

/* Banda CTA a la lista de espera */
.guide-cta {
  background: var(--green-deep); color: #eafaf3; border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 34px); margin: 40px 0 20px; text-align: center;
}
.guide-cta h2 { color: #fff; margin-top: 0; }
.guide-cta p { color: #bfe6d5; max-width: 48ch; margin: 0 auto 18px; }

/* Enlaces entre guías */
.related { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 20px; }
.related h2 { margin-top: 0; font-size: 1.1rem; }
.related a { font-weight: 600; }

/* Hub de guías (guias/index.html) */
.hub { max-width: 900px; margin-inline: auto; padding-block: 32px; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.hub-card {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .1s ease;
}
.hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.hub-card .tag { display: inline-block; margin-bottom: 10px; }
.hub-card h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--ink); }
.hub-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

@media (min-width: 720px) {
  .hub-grid { grid-template-columns: 1fr 1fr; }
}