/* pages.css — estilos que solo usan las paginas interiores (pilares y clusters).
   Reutiliza las variables y clases de site.css; no redefine nada de ahi. */

.crumb{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--gray-400);margin-bottom:22px
}
.crumb a{color:var(--gray-500);text-decoration:none}
.crumb a:hover{color:var(--blue-700)}
.crumb span{opacity:.5}

.page-hero{padding:120px 0 56px}
.page-hero h1{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin:14px 0 0;max-width:20ch;text-wrap:balance
}
.page-hero .lede{
  margin:20px 0 0;max-width:60ch;font-size:19px;line-height:1.6;color:var(--gray-700)
}
.page-hero .hero-cta{margin-top:32px}

.prose{max-width:66ch}
.prose h2{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:28px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:56px 0 14px;text-wrap:balance
}
.prose h3{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;
  color:var(--ink);margin:34px 0 8px
}
.prose p{margin:0 0 18px;font-size:17px;line-height:1.68;color:var(--gray-700)}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{font-size:17px;line-height:1.62;color:var(--gray-700);margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue-700);text-decoration:none;border-bottom:1px solid var(--blue-tint)}
.prose a:hover{border-bottom-color:var(--blue)}

/* Bloque destacado dentro del texto */
.pull{
  margin:34px 0;padding:22px 26px;background:var(--bg-soft);
  border-left:3px solid var(--blue);border-radius:0 12px 12px 0
}
.pull p{margin:0;font-size:17px;color:var(--ink)}

/* Indice del silo: los subtemas que cubre este pilar.
   Los que aun no existen como pagina van sin enlace (nada de 404). */
.silo-index{
  margin:38px 0 0;padding:26px 28px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)
}
.silo-index h2{margin:0 0 4px;font-size:20px}
.silo-index .note{margin:0 0 16px;font-size:14px;color:var(--gray-400)}
.silo-index ol{list-style:none;margin:0;padding:0;counter-reset:si}
.silo-index li{
  counter-increment:si;position:relative;padding:13px 0 13px 40px;
  border-top:1px solid var(--line-soft)
}
.silo-index li:first-child{border-top:0}
.silo-index li::before{
  content:counter(si,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.06em
}
.silo-index .t{display:block;font-weight:600;color:var(--ink);font-size:16px}
.silo-index a.t{text-decoration:none}
.silo-index a.t:hover{color:var(--blue-700)}
.silo-index .d{display:block;font-size:14.5px;color:var(--gray-500);margin-top:3px}
.silo-index .soon{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;vertical-align:2px
}

/* Grilla de "que incluye" */
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:32px 0 0}
.inc .card{padding:24px 26px}
.inc h3{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--ink)}
.inc p{margin:0;font-size:15px;line-height:1.58;color:var(--gray-500)}

/* FAQ */
.faq{max-width:66ch;margin:24px 0 0}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:17px;color:var(--ink);list-style:none
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--blue);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--gray-700)}

/* Enlace de vuelta al pilar / al home, al pie del contenido */
.backlink{
  margin:52px 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:15px;color:var(--gray-500)
}
.backlink a{color:var(--blue-700);text-decoration:none;font-weight:600}

@media (max-width:640px){
  .page-hero{padding:96px 0 40px}
  .prose h2{font-size:24px;margin-top:44px}
  .silo-index{padding:20px 20px}
}