/* ==========================================================================
   Herramentia — Capa de guía (entradas del blog), rebranding «Claro cobalto»
   v1 · 18 sept. 2026

   Se carga DESPUÉS de styles.css, legacy-tool-remap.css y brand.css, y es la
   última palabra sobre el interior de una entrada: prosa, infografía, caja de
   herramienta, preguntas frecuentes y bloques de publicidad.

   Solo usa tokens de brand.css (sección 04 del manual de marca). Ningún color
   literal fuera de la paleta, ningún degradado, ninguna sombra salvo el hover
   de tarjeta que fija el propio manual.

   Los artículos publicados antes de esta fecha no la cargan, así que añadirla
   no cambia nada de lo ya publicado: solo afecta a quien la enlace.
   ========================================================================== */

/* ---------- Cabecera de la entrada ---------------------------------------- */

.hm-article-header .hm-guide-meta .cat { color: var(--accent); font-weight: 600; }
.hm-article-header .hm-guide-meta > span + span { color: var(--muted-2); }

/* ---------- Prosa del artículo ------------------------------------------- */

.prose { margin: 40px 0; }

.prose h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.75rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 40px 0 14px;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.1875rem;          /* 19px — H3 del manual */
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 10px;
  text-wrap: balance;
}

.prose p,
.prose ul,
.prose ol {
  color: var(--muted);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  max-width: 72ch;
  text-wrap: pretty;
}
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px 1.25em; }
.prose li { margin-bottom: 8px; }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-strong); }

.prose blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 2px solid var(--accent-border);
  background: var(--accent-tint);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.prose blockquote p { margin: 0; color: var(--ink-2); }

.prose code {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--ink-2);
  background: var(--stripe);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 5px;
}

.prose hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* ---------- Infografía (modelo único) ------------------------------------ */

.infographic-wrap { margin: 8px 0 40px; }
.infographic-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
}

/* ---------- Caja «Herramienta relacionada» ------------------------------- */

.tool-cta-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-block);
  padding: 24px 26px;
  margin: 36px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tool-cta-box:hover { border-color: var(--border-strong); }

.tool-cta-box .eyebrow {
  font-family: var(--font);
  font-size: .8125rem;           /* 13px — kicker del manual */
  line-height: 1;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.tool-cta-box h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.tool-cta-box p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 72ch;
}

/* Botón primario del manual: cobalto con texto BLANCO (7,0:1), radio 9,
   padding 15/22, 44 px de alto táctil. Sustituye al botón heredado, que
   pintaba texto tinta sobre cobalto y no llegaba al contraste AA. */
.tool-cta-box .btn {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 15px 22px;
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-control);
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.tool-cta-box .btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--surface);
}
.tool-cta-box .btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ---------- Preguntas frecuentes ---------------------------------------- */

.faq-section { margin: 40px 0 48px; }

.faq-section h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.75rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 20px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item.open { border-color: var(--border-strong); }

.faq-question {
  margin: 0;
  padding: 16px 18px;
  min-height: 44px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-question:hover { background: var(--accent-tint); }

.faq-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq-item.open .faq-arrow { transform: rotate(225deg); }

.faq-answer {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-answer { padding: 0 18px 18px; max-height: 1200px; }
.faq-answer p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 72ch;
  text-wrap: pretty;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--accent); text-underline-offset: 2px; }

/* ---------- Publicidad --------------------------------------------------- */
/* Manual, sección 09: fuera de la zona de trabajo. En una guía la zona de
   trabajo es la lectura, así que no hay ningún bloque por encima del texto:
   el rectángulo va tras el artículo y el leaderboard al final, antes del pie. */

.ad-slot {
  position: relative;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 32px 0;
}
.ad-slot::before {
  content: "Publicidad";
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1;
  color: var(--muted-2);
  pointer-events: none;
}
.ad-slot-rectangle { width: 100%; max-width: 300px; min-height: 250px; margin-left: auto; margin-right: auto; }
.ad-slot-leaderboard { width: 100%; min-height: 90px; }

/* ---------- Pie de la entrada ------------------------------------------- */

.guia-footnote {
  margin: 0 0 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-size: .9375rem;
  line-height: 1.6;
  max-width: 72ch;
}
.guia-footnote a { color: var(--accent); text-underline-offset: 2px; }

/* ---------- Responsive (sección 08) ------------------------------------- */

@media (max-width: 639px) {
  .prose { margin: 28px 0; }
  .prose h2 { font-size: 1.375rem; margin: 32px 0 12px; }
  .prose h3 { font-size: 1.0625rem; }
  .prose p, .prose ul, .prose ol { font-size: 1rem; }
  .tool-cta-box { padding: 20px; }
  .tool-cta-box .btn { align-self: stretch; justify-content: center; }
  .infographic-wrap { margin: 4px 0 28px; }
}

/* ---------- Páginas legales (privacidad, aviso legal) ------------------- */

.prose-legal { margin: 32px 0 48px; }
.prose-legal h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 10px;
}
.prose-legal h2:first-child { margin-top: 0; }
.prose-legal p,
.prose-legal ul,
.prose-legal ol {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 72ch;
  text-wrap: pretty;
}
.prose-legal p { margin: 0 0 14px; }
.prose-legal ul, .prose-legal ol { margin: 0 0 14px 1.25em; }
.prose-legal li { margin-bottom: 8px; }
.prose-legal strong { color: var(--ink); font-weight: 600; }
.prose-legal a { color: var(--accent); text-underline-offset: 2px; }
.prose-legal a:hover { color: var(--accent-strong); }

/* El generador de infografías escribía font-weight 700/800 como atributo de
   presentación, heredado de la etapa anterior al rebranding, cuando el manual
   fija 600 para todos los niveles de titular. Un atributo de presentación
   pierde contra cualquier regla CSS, así que esto normaliza de golpe las
   infografías ya publicadas sin tocar su HTML. Para las nuevas es un no-op:
   el generador ya escribe 600. */
.infographic-svg text[font-weight="700"],
.infographic-svg text[font-weight="800"] { font-weight: 600; }