/* Ancho de lectura — neuropsicologo.co
   Réplica de lo que ya funciona en neuroes.co (/ne-2026.css). Aquí el problema
   era mayor: páginas como /neuropsicologo-manizales no tienen contenedor y el
   texto llegaba a 24px del borde en escritorio.
   REGLA: si se capa el ancho, se centra la caja. */

/* --- contenedores: mismo ancho útil en todo el sitio --------------------- */
.container, .section-inner, .hero-inner, .content, .nav-inner, .footer-inner {
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding-left: clamp(18px, 4vw, 44px) !important;
  padding-right: clamp(18px, 4vw, 44px) !important;
}

/* Las páginas SEO no tienen contenedor: se lo damos a sus bloques directos. */
.hero-section > *, .content > *, main > *, article > * {
  max-width: 1100px;
  margin-inline: auto;
}
.hero-section, .sol-section, footer, section {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
body > h1, body > h2, body > h3, body > p, body > ul, body > ol,
.content h1, .content h2, .content h3, .content p, .content ul, .content ol {
  max-width: 1100px;
  margin-inline: auto;
  padding-left: clamp(18px, 4vw, 44px);
  padding-right: clamp(18px, 4vw, 44px);
  box-sizing: border-box;
}

/* --- texto corrido ------------------------------------------------------ */
.content p, .content li, .hero-section p, .section-inner p, .card-body p,
.faq-a, .faq-answer, .pl-cuerpo p, .pl-cuerpo li {
  max-width: 68ch;
}
.section-header, .section-label { max-width: 62ch; }

.section-header, .section-label,
.hero-section h1, .hero-section p,
section[style*="text-align:center"] p {
  margin-left: auto;
  margin-right: auto;
}

/* --- móvil -------------------------------------------------------------- */
@media (max-width: 640px) {
  .container, .section-inner, .hero-inner, .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body > h1, body > h2, body > h3, body > p, body > ul, body > ol,
  .content h1, .content h2, .content h3, .content p, .content ul, .content ol {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   UNIFICACIÓN VISUAL (2026-08-31)
   Medido: los títulos de sección salían a 44.8px, 28px y 24px según dónde;
   el padding vertical iba de 100px a 48px. Aquí se fija una sola escala.
   ========================================================================== */
section, .section, .sol-section, .hero-section {
  padding-top: clamp(44px, 5vw, 72px) !important;
  padding-bottom: clamp(44px, 5vw, 72px) !important;
}
.hero { padding-bottom: clamp(28px, 3vw, 44px) !important; }

.stitle, .section-title, section > .section-inner > h2, section h2 {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.2 !important;
}

.rev-card, .card, .rs-card, .sedes-card, .svc-card, .faq-item, .acc-item,
.qcf-card, .sol-wrap, .pl-item, .cta-box, .highlight {
  border-radius: 16px !important;
}

/* Un solo gris de fondo: `servicios` usaba #f1f5f9 y el resto iba transparente. */
#servicios, .section.alt { background: #f8fafc !important; }

/* Pretítulo sobre el h1: contexto local o de especialidad, sin repetir el h1. */
.pretitulo {
  display: inline-block;
  margin: 0 0 10px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #0d9488;
  background: #ccfbf1;
  padding: 6px 14px;
  border-radius: 100px;
  max-width: none !important;
}
.hero .pretitulo, .hero-np .pretitulo, .hero-section .pretitulo,
header .pretitulo { margin-inline: auto !important }