/* ==========================================================================
   CARTA HORARIA — article.css (cluster de guías + sobre-maria)
   Extiende style.css; mismos tokens.
   ========================================================================== */

.article-main { padding: 48px 0 80px; }
.article-container { max-width: 780px; }

.breadcrumbs {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.breadcrumbs a { color: var(--purple); }
.crumb-sep { color: var(--border); padding: 0 2px; }

.article-title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 20px;
}

/* Byline */
.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.byline-name { font-size: 14px; color: var(--text-dark); font-weight: 600; }
.byline-name a { color: var(--purple); }
.byline-meta { font-size: 12.5px; color: var(--text-muted); }
.rating-chip {
  margin-left: auto;
  background: var(--purple-light);
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Article body */
article h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--text-dark);
  margin: 40px 0 14px;
}
article h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--text-dark);
  margin: 28px 0 10px;
}
article p { margin-bottom: 16px; }
article ul { margin: 0 0 16px 22px; }
article li { margin-bottom: 8px; }
article blockquote {
  border-left: 3px solid var(--purple);
  background: var(--purple-section);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 16px;
  font-style: italic;
}

/* Figures */
.article-figure { margin: 28px 0; }
.article-figure img { margin: 0 auto; }
.article-figure figcaption {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* CTA box */
.cta-box {
  background: var(--purple-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 36px 0;
  text-align: center;
}
.cta-box-title {
  font-family: var(--font-heading);
  font-size: 21px;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.cta-box .cta-btn {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  margin-top: 6px;
}
.cta-box .cta-btn:hover { background: var(--purple-vivid); }
.cta-box-rating { font-size: 13px; color: var(--text-muted); margin: 12px 0 0; }

/* Curso box (derivación a la Academia) */
.curso-box {
  border: 1.5px solid var(--purple);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 36px 0;
  background: var(--white);
}
.curso-box-title {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* Hub */
.hub-intro { font-size: 17px; margin-bottom: 30px; }
.guide-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.guide-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 24px 26px;
  transition: border-color .15s, box-shadow .15s;
}
.guide-card:hover { border-color: var(--purple); box-shadow: 0 4px 18px rgba(151, 126, 217, .15); }
.guide-card h2 {
  font-family: var(--font-heading);
  font-size: 21px;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.guide-card p { color: var(--text-body); margin-bottom: 10px; }
.guide-card-more { color: var(--purple); font-weight: 600; font-size: 14px; }

/* Sobre María */
.maria-hero { text-align: center; margin-bottom: 28px; }
.maria-hero img { margin: 0 auto 12px; border-radius: var(--radius); }
.maria-hero .rating-chip { margin: 0 auto; display: inline-block; }
.maria-links { display: grid; gap: 10px; margin: 30px 0; }
.maria-link {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 18px;
  background: var(--white);
  font-size: 15px;
}
.maria-link:hover { border-color: var(--purple); }

/* Footer links */
.footer-links { margin-top: 8px; font-size: 13.5px; }

@media (min-width: 700px) {
  .guide-cards { grid-template-columns: repeat(3, 1fr); }
  .guide-card h2 { font-size: 19px; }
}

/* Hero rating (home) */
.hero-rating { margin-top: 18px; font-size: 14.5px; color: var(--text-muted); }
.hero-rating-stars { color: #f5a623; letter-spacing: 2px; }
.hero-rating a { color: var(--text-muted); text-decoration: underline; }

/* Articles need navigation; homes keep the original headerless design */
body:has(.article-main) .header {
  display: block;
  padding: 15px 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

/* Review strip (draconic-style social proof under CTAs) */
.review-strip { margin-top: 20px; text-align: left; }
.review-strip-rating { font-size: 14px; color: var(--text-dark); margin-bottom: 8px; }
.review-quote {
  border: none; background: none; padding: 0; margin: 0 0 6px;
  font-style: italic; font-size: 15px; color: var(--text-body);
}
.review-who { font-style: normal; font-size: 13px; color: var(--text-muted); }
.review-link { font-size: 14px; font-weight: 600; color: var(--purple); text-decoration: underline; }

/* Offer box (price + what's included) */
.offer-box {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left;
}
.offer-price { font-size: 24px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.offer-price-note { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.offer-list { list-style: none; margin: 0 0 12px; padding: 0; }
.offer-list li { padding-left: 26px; position: relative; margin-bottom: 7px; font-size: 15px; }
.offer-list li::before { content: "✓"; position: absolute; left: 0; color: #2e7d32; font-weight: 700; }
.offer-note { font-size: 13.5px; color: var(--text-muted); margin: 0; }

/* Related guides */
.related-guides { margin-top: 44px; }
.related-guides h2 {
  font-family: var(--font-heading); font-size: 22px; color: var(--text-dark); margin-bottom: 16px;
}
.footer-guides { margin-bottom: 10px; }

/* Offer box centered variant for the home CTA section */
.offer-box-home { max-width: 520px; margin: 28px auto 0; border-top: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; }
.hero .review-quote { margin-top: 10px; max-width: 78%; }

/* Hero variants: review strip + offer card inside the hero column */
.hero .review-strip { margin-top: 14px; max-width: 480px; }
.hero .review-quote { max-width: none; }
.hero .offer-box, .offer-box.hero-offer {
  max-width: 480px;
  margin-top: 20px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 1px solid var(--border);
}
.hero .offer-box .offer-price, .offer-box.hero-offer .offer-price { font-size: 21px; margin-bottom: 8px; }
.hero .offer-box .offer-list li, .offer-box.hero-offer .offer-list li { font-size: 14px; margin-bottom: 5px; }

/* Article hero image + ecosystem links */
.article-hero-figure { margin: 0 0 30px; }
.article-hero-figure img { border-radius: var(--radius); width: 100%; height: auto; }
.eco-links {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-muted);
}


/* Case cards — real cases solved by astrologers trained in María's STA course.
   Used in the lost-objects, examples, love and career pages of every locale. */
.case-cards { display: grid; gap: 18px; margin: 26px 0 8px; }
.case-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  background: var(--purple-section);
  padding: 20px 22px;
  break-inside: avoid;
}
.case-card p { margin-bottom: 10px; }
.case-card p:last-child { margin-bottom: 0; }
.case-q {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-dark);
}
.case-by { font-size: 13px; color: var(--text-muted); }
.case-by a { color: var(--purple); }
.case-end strong { color: var(--text-dark); }
.case-src { font-size: 13.5px; }
.case-src a { color: var(--purple); font-weight: 600; }

/* Chart wheel inside a case card. Only the cases whose astrologer published
   date, time and place are redrawn, so this appears on some cards and not
   others. Capped so the wheel does not dwarf the judgement it illustrates. */
.case-figure { margin: 16px 0; }
.case-figure img { width: 100%; max-width: 420px; margin: 0 auto; }
.case-figure figcaption {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}

/* ==========================================================================
   PIEZAS DE «CÓMO PREGUNTAR» — cuatro tratamientos del mismo contenido.
   Reemplazan a .example-card/.tip-box, que gastaban dos tarjetas grandes y
   ~160px de padding para decir dos frases. Se usan según la página:
     .rewrite  reescritura en vivo   → home
     .pairs    tabla por tema        → hub de guías (además enlaza los clusters)
     .anatomy  anatomía de la pregunta → qué es la astrología horaria
     .twoline  dos líneas             → páginas donde es una nota al margen
   ========================================================================== */

/* A — reescritura en vivo */
.rewrite { margin: 22px 0 0; }
.rewrite .rw-before,
.rewrite .rw-after { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.rewrite .rw-before { border-bottom: 1px dashed var(--border); }
.rewrite .rw-mark { flex: none; font-size: 20px; line-height: 1.4; width: 26px; text-align: center; }
.rewrite .rw-q { font-family: var(--font-heading); font-size: 20px; line-height: 1.45; margin: 0; }
.rewrite .rw-before .rw-q { color: #9E99AA; }
.rewrite .rw-before .rw-q s { text-decoration-color: #C9C3D6; text-decoration-thickness: 1.5px; }
.rewrite .rw-after .rw-q { color: var(--text-dark); }
.rewrite .rw-after .rw-q em {
  font-style: normal;
  background: linear-gradient(transparent 62%, #E6DBFA 62%);
  padding: 0 1px;
}
.rewrite .rw-why { font-size: 13.5px; color: var(--text-muted); margin: 3px 0 0; }
.rewrite .rw-tip {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted); line-height: 1.55;
}
.rewrite .rw-tip strong { color: var(--text-dark); }

/* B — tabla de pares por tema */
.pairs-wrap { overflow-x: auto; margin: 22px 0 0; }
.pairs { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.pairs th {
  text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; padding: 0 14px 9px 0;
  border-bottom: 1.5px solid var(--purple);
}
.pairs th:last-child, .pairs td:last-child { padding-right: 0; }
.pairs td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
.pairs tr:last-child td { border-bottom: none; }
.pairs .p-no { color: #9E99AA; }
.pairs .p-si { color: var(--text-dark); font-weight: 500; }
.pairs .p-dif { color: var(--text-muted); font-size: 13.5px; }
.pairs .p-topic { white-space: nowrap; }
.pairs .p-topic a {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple); font-weight: 600; text-decoration: none;
}
.pairs .p-topic a:hover { text-decoration: underline; }

/* C — anatomía de una buena pregunta */
.anatomy { margin: 24px 0 0; }
.anatomy .an-q { font-family: var(--font-heading); font-size: 24px; line-height: 1.65; color: var(--text-dark); margin: 0; }
.anatomy .an-seg { border-bottom: 2.5px solid var(--purple); padding-bottom: 2px; }
.anatomy .an-seg.b { border-color: #C9B6EE; }
.anatomy .an-seg.c { border-color: #8FC4B4; }
.anatomy .an-legend { display: flex; flex-wrap: wrap; gap: 26px; margin: 20px 0 0; }
.anatomy .an-legend div { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.anatomy .an-legend b { display: block; color: var(--text-dark); font-size: 13.5px; font-weight: 600; }
.anatomy .an-sw { display: inline-block; width: 22px; height: 2.5px; vertical-align: middle; margin-right: 7px; }
.anatomy .an-counter {
  margin: 20px 0 0; padding: 13px 16px; background: var(--white);
  border-left: 2.5px solid #D8D3E4; border-radius: 0 var(--radius) var(--radius) 0;
}
.anatomy .an-counter p { font-size: 14px; color: var(--text-muted); margin: 0; }
.anatomy .an-counter s { color: #A9A4B4; }

/* D — dos líneas */
.twoline { margin: 20px 0 0; font-size: 16.5px; }
.twoline .tl-row { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); }
.twoline .tl-row:last-of-type { border-bottom: none; }
.twoline .tl-g { flex: none; width: 22px; font-size: 16px; text-align: center; }
.twoline .tl-q { flex: 1; line-height: 1.45; }
.twoline .tl-row.bad .tl-q { color: #9E99AA; }
.twoline .tl-row.good .tl-q { color: var(--text-dark); font-weight: 500; }
.twoline .tl-tag { flex: none; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; padding-left: 8px; }
.twoline .tl-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted); line-height: 1.55;
}
.twoline .tl-foot strong { color: var(--text-dark); }

@media (max-width: 640px) {
  .rewrite .rw-q { font-size: 17.5px; }
  .anatomy .an-q { font-size: 19px; }
  .twoline { font-size: 15.5px; }
  .twoline .tl-tag { display: none; }
}

/* article.css se carga después de style.css, así que .offer-box.hero-offer (que
   trae margin-top: 20px) le ganaba por orden al override de .offer-section.
   Se resuelve acá, con la misma clase y un punto más de especificidad. */
.offer-section .offer-box.hero-offer { margin-top: -6px; }
@media (max-width: 900px) {
  .offer-section .offer-box.hero-offer { margin-top: 0; }
}