/* Ancho de lectura — neuropsicologia.co
   Réplica de lo que ya funciona en neuroes.co (/ne-2026.css): el contenido se
   capa y se centra, en vez de correr de borde a borde de la pantalla.
   REGLA: si se capa el ancho, se centra la caja. Sin `margin-inline:auto` la caja
   se pega a la izquierda mientras el texto va centrado dentro, y el bloque
   entero se ve torcido. */

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

/* Ninguna sección puede pegar su contenido al borde. */
section, .article-section, .sol-section, footer {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.article-section > *, .section > * {
  max-width: 1100px;
  margin-inline: auto;
}

/* --- texto corrido: nunca más ancho de lo que se lee de un vistazo ------- */
.section-subtitle, .article-inner p, .article-section p, .step-content p,
.faq-a, .faq-answer, .review-text, .service-card p, .hero p, .hero-np p,
.pl-cuerpo p, .pl-cuerpo li, li {
  max-width: 68ch;
}
.section-header, .section-title { max-width: 62ch; }

/* Lo capado que viva en contexto centrado, centrado también de caja. */
.section-header, .section-title, .section-subtitle, .section-tag,
.hero h1, .hero p, .hero-np h1, .hero-np p,
section[style*="text-align:center"] p {
  margin-left: auto;
  margin-right: auto;
}

/* --- móvil: aire lateral suficiente ------------------------------------- */
@media (max-width: 640px) {
  .container, .container-xl, .article-inner, .section-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .article-section, .section { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   UNIFICACIÓN VISUAL (2026-08-31)
   Medido: el padding vertical saltaba entre 56, 60, 64 y 80px según la
   sección, y convivían dos grises de fondo (#f8fafc y #f1f5f9). El radio de
   tarjeta era 12px aquí y 16px en el resto de la marca.
   ========================================================================== */
section, .section, .article-section, .sol-section, .cta-section, .content-section {
  padding-top: clamp(44px, 5vw, 64px) !important;
  padding-bottom: clamp(44px, 5vw, 64px) !important;
}
.hero-np { padding-bottom: clamp(28px, 3vw, 40px) !important; }

/* Un solo radio en toda tarjeta */
.service-card, .card, .rs-card, .faq-item, .acc-item, .step, .paso,
.city-card, .function-card, .who-card, .qcf-card, .sol-wrap, .pl-item,
.condition-item, .hero-np-card {
  border-radius: 16px !important;
}

/* Un solo gris de fondo */
.content-section { background: #f8fafc !important; }

/* Un solo tamaño de título de sección */
.section-title, section > .container-xl > h2, .content-section h2 {
  font-size: clamp(24px, 2.6vw, 30px) !important;
  line-height: 1.25 !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 }