/* Páginas internas: servicios y preguntas frecuentes. Usa los tokens de styles.css. */

.pg-hero { padding-block: var(--space-2xl) var(--section-gap-s); }
.pg-hero h1 { max-width: 16ch; margin-top: var(--space-md); }
.pg-hero .lead { margin-top: var(--space-lg); max-width: 48ch; }
.pg-eyebrow { margin-top: var(--space-xl); color: var(--color-accent); font: 600 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }

.pg-migas ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.pg-migas li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule); }
.pg-migas a { color: var(--color-muted); }
.pg-migas a:hover { color: var(--color-accent); }

.pg-block { padding-block: var(--section-gap-s); }
.pg-block h2 { font-size: var(--text-display-s); max-width: 16ch; }
.pg-card { margin-inline: clamp(8px, 1.6vw, 24px); border-radius: var(--radius-big); background: var(--color-paper-2); }
.pg-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }

.pg-list { display: grid; gap: var(--space-md); }
.pg-list li { position: relative; padding-left: var(--space-xl); font-size: var(--text-lead); line-height: 1.45; }
.pg-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); }
.pg-list-warn li { color: var(--color-muted); }
.pg-list-warn li::before { background: transparent; border: 2px solid var(--color-warn); }

.pg-steps { display: grid; gap: var(--space-lg); counter-reset: paso; }
.pg-steps li { counter-increment: paso; position: relative; padding-left: 3.5rem; color: var(--color-muted); font-size: var(--text-lead); line-height: 1.5; max-width: 52ch; }
.pg-steps li::before { content: "0" counter(paso); position: absolute; left: 0; top: 0.1em; font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-accent); }
.pg-steps strong { color: var(--color-ink); font-weight: 600; }

.pg-caso { margin: var(--space-md) clamp(8px, 1.6vw, 24px); padding-block: var(--section-gap-s); border-radius: var(--radius-big); background: var(--color-signal); color: #0F1714; }
.pg-caso .pg-eyebrow { margin-top: 0; color: #11352C; }
.pg-caso h2 { margin-top: var(--space-md); max-width: 22ch; }
.pg-caso .lead { margin-top: var(--space-lg); color: #11352C; max-width: 52ch; }
.pg-caso-estado { margin-top: var(--space-lg); font-weight: 600; }

.pg-faq { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.pg-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.pg-faq h2 { font-size: var(--text-section); max-width: 14ch; }
.pg-faq-list { display: grid; }
.pg-faq-item { border-bottom: 1px solid var(--color-rule); }
.pg-faq-item:first-child { border-top: 1px solid var(--color-rule); }
.pg-faq-item summary { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); cursor: pointer; list-style: none; font: 600 var(--text-title)/1.3 var(--font-display); }
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::after { content: "+"; flex: none; color: var(--color-accent); font-size: 1.5em; line-height: 0.9; transition: transform var(--dur-short) var(--ease-out); }
.pg-faq-item[open] summary::after { transform: rotate(45deg); }
.pg-faq-item p { padding-bottom: var(--space-lg); color: var(--color-muted); max-width: 62ch; }

.pg-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.pg-rel a { display: grid; gap: var(--space-xs); height: 100%; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.pg-rel a:hover { border-color: var(--color-accent); color: var(--color-ink); }
.pg-rel strong { font: 600 var(--text-title)/1.25 var(--font-display); }
.pg-rel span { color: var(--color-muted); font-size: var(--text-md); }
.pg-rel-grande { margin-top: 0; }
.pg-rel-grande a { padding: var(--space-xl); }

.pg-cta { margin: var(--space-md) clamp(8px, 1.6vw, 24px) var(--space-2xl); padding-block: var(--section-gap-s); border-radius: var(--radius-big); background: var(--color-paper-2); }
.pg-cta h2 { max-width: 18ch; }
.pg-cta .lead { margin-top: var(--space-lg); max-width: 46ch; }
.pg-cta .btn { white-space: normal; text-align: center; }

@media (max-width: 60rem) {
  .pg-two, .pg-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-faq-item summary::after, .pg-rel a { transition: none; }
}

/* Sobre SAFIA: tarjetas del equipo */
.pg-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.pg-persona { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.pg-persona-foto { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: var(--space-sm); border-radius: 50%; overflow: hidden; background: var(--color-signal); color: #0F1714; font: 600 2rem/1 var(--font-display); }
.pg-persona-foto img { width: 100%; height: 100%; object-fit: cover; }
.pg-persona h3 { font: 600 var(--text-title)/1.25 var(--font-display); }
.pg-persona-rol { color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
.pg-persona a { margin-top: var(--space-sm); color: var(--color-accent); }

/* Guías */
.pg-autor { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.pg-autor a { color: var(--color-accent); }
.pg-articulo { max-width: 68ch; }
.pg-articulo h2 { margin-top: var(--space-2xl, 3rem); font-size: var(--text-section); max-width: none; }
.pg-articulo h2:first-child { margin-top: 0; }
.pg-articulo p, .pg-articulo ul, .pg-articulo ol { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.6; }
.pg-articulo ul, .pg-articulo ol { display: grid; gap: var(--space-sm); padding-left: 1.4em; }
.pg-articulo ul { list-style: disc; }
.pg-articulo ol { list-style: decimal; }
.pg-articulo li::marker { color: var(--color-accent); }