/* ==========================================================================
   NeuroEs · relifting 2026
   --------------------------------------------------------------------------
   Hoja UNICA para las 42 paginas del sitio. Se enlaza al final del <head>, por
   detras del <style> propio de cada pagina, asi que gana sin tener que tocar el
   CSS que ya habia. Quitar el <link> devuelve el sitio exactamente a como estaba.

   No cambia ni una palabra del contenido: el peso del home era altura, no texto
   (2.225 palabras repartidas en 10 pantallas de scroll). Lo que se aprieta aqui
   es el espacio, no lo que Google lee.

   Tres decisiones:
   1. Un solo acento. Habia teal, naranja y verde compitiendo en la misma barra.
      Manda el teal del logo; el verde se queda solo donde significa WhatsApp.
   2. Fondo de papel calido en vez de blanco puro y degradados, igual que
      barberias.co y reservy.co.
   3. Titulares en serif. Es lo que saca al sitio del molde de plantilla SaaS,
      y separa de un vistazo lo que es titular de lo que es interfaz.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  /* Neutros calidos: el gris puro es lo que hace que un sitio parezca de plantilla. */
  --ne-papel:      #FAFAF7;
  --ne-papel-2:    #FFFFFF;
  --ne-tinta:      #141413;
  --ne-tinta-2:    #6B6A63;
  --ne-linea:      #E7E4DA;

  /* Teal del logo, un punto mas profundo y menos saturado que el de fabrica. */
  --ne-marca:      #0B6E67;
  --ne-marca-alta: #095A54;
  --ne-marca-suave:#EAF2F0;

  /* Verde de WhatsApp oscurecido lo justo para que el texto blanco encima pase
     AA: con #1FA855 el contraste era 3,09 y hace falta 4,5. Con este, 5,01. */
  --ne-wa:         #157F41;

  --ne-r:          10px;
  --ne-sombra:     0 1px 2px rgba(20,20,19,.04), 0 10px 30px -18px rgba(20,20,19,.22);

  /* Escala de espaciado. El sitio tenia secciones de 2.300px para 382 palabras. */
  --ne-sec:        clamp(34px, 3.4vw, 58px);
}

/* ---------- base ---------- */
body {
  background: var(--ne-papel) !important;
  color: var(--ne-tinta);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.hero h1, .section-title, .svc-title, .faq-q, .otras-titulo {
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ne-tinta);
}
h1, .hero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
h2, .section-title { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.15; }
h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; }

p, li { color: var(--ne-tinta-2); }

/* El degradado de colores dentro del titular era lo mas "plantilla" de la pagina. */
.hero h1 span, .gradient-text, .txt-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--ne-marca) !important;
  color: var(--ne-marca) !important;
}

/* ---------- altura: lo que sobraba ----------
   Medido antes de tocar nada: 9.108px de scroll para 2.225 palabras. El grueso no
   estaba en el relleno de las secciones sino dentro: cabeceras de seccion de 200px,
   tarjetas de servicio de 349px y testimonios de 481px. */
section, .services, .reviews, .process, .contact, .faq, .content-sec {
  padding-top: var(--ne-sec) !important;
  padding-bottom: var(--ne-sec) !important;
}
.hero {
  min-height: 0 !important;
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
  background: var(--ne-papel) !important;
  color: var(--ne-tinta) !important;
}
.hero p, .hero .sub, .hero-sub { color: var(--ne-tinta-2) !important; }
.hero .badge, .section-badge, .badge {
  background: var(--ne-marca-suave) !important;
  color: var(--ne-marca-alta) !important;
  border: 1px solid color-mix(in srgb, var(--ne-marca) 18%, var(--ne-linea)) !important;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- tarjetas: menos aire, menos sombra ---------- */
.service-card, .review-card, .faq-item, .card, .paso, .art-card {
  background: var(--ne-papel-2) !important;
  border: 1px solid var(--ne-linea) !important;
  border-radius: var(--ne-r) !important;
  box-shadow: var(--ne-sombra) !important;
  padding: 20px !important;
}
.services-grid, .reviews-grid, .cards, .art-grid {
  gap: 14px !important;
}
.service-icon {
  width: 38px !important; height: 38px !important;
  background: var(--ne-marca-suave) !important;
  color: var(--ne-marca) !important;
  border-radius: 8px !important;
  font-size: 18px !important;
}

/* ---------- un solo acento ---------- */
.btn, .btn-main, .cta-wa, .btn-wa, .cta-sec, .nav-cta {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.btn-main, .nav-cta, .btn-primary {
  background: var(--ne-marca) !important;
  border: 1px solid var(--ne-marca) !important;
  color: #fff !important;
}
.btn-main:hover, .nav-cta:hover, .btn-primary:hover {
  background: var(--ne-marca-alta) !important;
  border-color: var(--ne-marca-alta) !important;
}
.cta-sec, .btn-o, .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--ne-linea) !important;
  color: var(--ne-tinta) !important;
}
/* El verde se reserva para WhatsApp, donde el color significa algo. */
.btn-wa, .cta-wa, .wa-float, .whatsapp-float {
  background: var(--ne-wa) !important;
  border: 1px solid var(--ne-wa) !important;
  color: #fff !important;
}
.wa-float, .whatsapp-float { box-shadow: 0 6px 20px -8px rgba(31,168,85,.5) !important; }

/* ---------- barra de navegacion ---------- */
header, .navbar, .nav, nav.main-nav {
  background: color-mix(in srgb, var(--ne-papel) 90%, transparent) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ne-linea) !important;
  box-shadow: none !important;
}
.nav a, .navbar a, header nav a { color: var(--ne-tinta) !important; font-weight: 500; }
.nav a:hover, .navbar a:hover, header nav a:hover { color: var(--ne-marca) !important; }

/* ---------- FAQ y proceso ---------- */
.faq-item { padding: 14px 18px !important; }
.faq-q { font-size: 16px !important; font-weight: 500 !important; }
.faq-a { color: var(--ne-tinta-2) !important; }
.paso-num, .step-num {
  background: var(--ne-marca) !important; color: #fff !important;
  box-shadow: none !important;
}

/* ---------- enlaces ---------- */
a { color: var(--ne-marca); }
a:hover { color: var(--ne-marca-alta); }
:focus-visible { outline: 2px solid var(--ne-marca); outline-offset: 2px; }

/* ---------- detalles que delatan la plantilla ---------- */
.section-title::after, .title-line, .underline-deco { display: none !important; }
[class*="gradient"], .bg-gradient {
  background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   Selectores reales del sitio (leidos del DOM, no supuestos)
   ========================================================================== */

/* El badge del hero venia pensado para el hero oscuro: blanco sobre blanco. */
.hero-badge {
  background: var(--ne-marca-suave) !important;
  color: var(--ne-marca-alta) !important;
  border: 1px solid color-mix(in srgb, var(--ne-marca) 20%, var(--ne-linea)) !important;
  font-weight: 500 !important;
}
.hero-badge * { color: var(--ne-marca-alta) !important; }

/* Los dos botones de la barra iban con degradado propio, uno naranja y otro teal. */
.nav-cta-free, .cta-button {
  background-image: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.cta-button { background-color: var(--ne-marca) !important; color: #fff !important; border: 1px solid var(--ne-marca) !important; }
.cta-button:hover { background-color: var(--ne-marca-alta) !important; }
.nav-cta-free {
  background-color: transparent !important;
  color: var(--ne-marca-alta) !important;
  border: 1px solid color-mix(in srgb, var(--ne-marca) 32%, var(--ne-linea)) !important;
}
.nav-cta-free:hover { background-color: var(--ne-marca-suave) !important; }

/* Cabeceras de seccion: 137-202px de alto para dos lineas de texto. */
.section-header { margin-bottom: 22px !important; }
.section-header > * { margin-top: 0 !important; margin-bottom: 8px !important; }
.section-header > *:last-child { margin-bottom: 0 !important; }
.section-subtitle { font-size: 16px !important; color: var(--ne-tinta-2) !important; max-width: 60ch; margin-inline: auto; }

/* Tarjetas de servicio: 349px cada una. */
.service-card { padding: 18px !important; }
.service-card h3 { margin: 8px 0 6px !important; }
.service-card p { font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 0 8px !important; }
.svc-tags { gap: 5px !important; }
.svc-tags span, .svc-tags li {
  font-size: 12px !important; padding: 2px 8px !important;
  background: var(--ne-papel) !important; border: 1px solid var(--ne-linea) !important;
  color: var(--ne-tinta-2) !important; border-radius: 999px !important;
}

/* Testimonios: 481px por tarjeta. */
.review-card { padding: 18px !important; }
.review-text { font-size: 14.5px !important; line-height: 1.55 !important; }
.review-avatar { width: 34px !important; height: 34px !important; }

/* Proceso y contacto. */
.step { padding: 14px 16px !important; }
.contact-item { padding: 16px !important; }
.contact-grid { gap: 14px !important; }

/* Acordeon de articulos: se queda entero (son enlaces internos), solo mas apretado. */
.acc-body-inner { padding: 12px 16px !important; }
.acc-body-inner li { font-size: 14.5px !important; }

/* ==========================================================================
   Segunda pasada: los bloques que seguian mandando en la altura
   ========================================================================== */

/* 787px, mas que toda la rejilla de servicios que tiene encima. */
.otras-terapias { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid var(--ne-linea) !important; }
.otras-titulo { font-size: 20px !important; margin: 0 0 12px !important; }
.otras-terapias .service-card, .services-grid.compacta .service-card { padding: 14px !important; }
.services-grid.compacta { gap: 12px !important; }
.detalle-servicio { font-size: 14px !important; line-height: 1.5 !important; }

.section-header { margin-bottom: 18px !important; }
.section-header .section-title { margin: 6px 0 !important; }

/* Testimonios: el texto de cada uno ocupaba 247px. Se recorta a la vista, no del
   DOM: sigue estando entero en el HTML y el carrusel deja de medir medio metro. */
.review-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px !important;
}
.review-card, .review-inner { padding: 16px !important; }

/* Hero: la foto marcaba 480px y las cifras otros 130px. */
.hero-photo-card { max-height: 380px !important; }
.hero-photo-card img { object-fit: cover; height: 100%; }
.hero-stats { gap: 16px !important; margin-top: 14px !important; }
.hero-stats > * { padding: 0 !important; }
.hero h1 { margin: 10px 0 12px !important; }
.hero p { font-size: 16.5px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }
.qcf-card { padding: 16px !important; }

/* ==========================================================================
   Estructura: el formulario de captacion pasa a la columna de la foto.
   Antes colgaba debajo del titular y estiraba el hero a 954px de contenido.
   Sigue estando arriba del todo, visible sin bajar; solo deja de sumar altura.
   ========================================================================== */
.hero-side { display: grid; gap: 14px; align-content: start; }
.hero-side .hero-photo-card { max-height: 300px !important; margin: 0 !important; }
.hero-side .qcf-card { margin: 0 !important; }
.hero-content { align-items: start !important; }

/* ==========================================================================
   Densidad: mismos bloques, menos filas
   ========================================================================== */

/* "Otras terapias" son 4 tarjetas que caian en 2x2 y ocupaban 780px. En una fila
   de 4 ocupan una sola altura de tarjeta. El texto es el mismo. */
@media (min-width: 1000px) {
  .services-grid.compacta { grid-template-columns: repeat(4, 1fr) !important; }
}
.otras-terapias .service-card p { font-size: 13.5px !important; }
.otras-terapias .service-card h4 { color: var(--ne-marca-alta) !important; font-size: 12px !important; margin-bottom: 6px !important; }

/* Los enlaces de esas tarjetas llevan el color viejo en el atributo style, que
   solo se puede ganar con !important. */
.otras-terapias a[style], .service-card a[style] {
  background: var(--ne-marca) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.detalle-servicio summary { color: var(--ne-marca-alta) !important; font-size: 13px !important; cursor: pointer; }
.detalle-servicio ul { color: var(--ne-tinta-2) !important; line-height: 1.7 !important; }
.detalle-servicio ul li { color: var(--ne-tinta-2) !important; }

/* Ruta de evaluacion: 646px para 77 palabras. */
.process-steps { gap: 10px !important; }
.step { padding: 12px 16px !important; }
.step p { font-size: 14px !important; margin: 4px 0 0 !important; }
.step h3 { font-size: 16px !important; }

/* Contacto: tres tarjetas de 275px para tres datos. */
.contact-item { padding: 14px !important; }
.contact-item h3 { font-size: 16px !important; margin-bottom: 4px !important; }
.contact-item p, .contact-item a { font-size: 14px !important; }

/* Testimonios */
.reviews-widget { padding: 0 !important; }
.reviews-header { margin-bottom: 10px !important; }

/* La foto y el formulario traian ancho fijo de 448px, pensado para ocupar ellos
   solos la columna; dentro de .hero-side se salian 68px por la derecha. */
.hero-side > *, .hero-side .hero-photo-card, .hero-side .qcf-card {
  width: 100% !important;
  max-width: 100% !important;
}
.hero-side .hero-photo-card img { width: 100%; height: 100%; object-fit: cover; }

/* Las cifras del hero eran blancas: sobre el fondo claro desaparecian. */
.stat-number { color: var(--ne-marca) !important; }
.stat-label { color: var(--ne-tinta-2) !important; }

/* El subrayado de enlaces no debe alcanzar a los botones. */
.hero a.btn-primary, .hero a.btn-secondary, .hero .qcf-btn, .hero .btn,
.hero a[class*="btn"], .hero a[class*="cta"] { text-decoration: none !important; }

/* La foto seguia midiendo 448px dentro de una columna de 380: un elemento de
   rejilla no baja de su contenido salvo que se le quite el min-width automatico. */
.hero-content > *, .hero-side, .hero-side > * { min-width: 0 !important; }
.hero-side .hero-photo-card { width: auto !important; }
.hero-side img { width: 100% !important; max-width: 100% !important; height: auto !important; }

/* Las cifras llevaban el degradado recortado sobre el texto. */
.stat-number {
  background-image: none !important;
  -webkit-text-fill-color: var(--ne-marca) !important;
}

/* Las dos franjas del informe gratuito seguian en degradado teal→azul cielo. */
.informe-cta-banner, .informe-midcta {
  background-image: none !important;
  background-color: var(--ne-marca) !important;
  border-radius: 0 !important;
}
.informe-cta-banner *, .informe-midcta * { color: #fff !important; }
.informe-cta-banner a, .informe-midcta a {
  background: #fff !important; color: var(--ne-marca-alta) !important;
  border-radius: 8px !important; font-weight: 600 !important; text-decoration: none !important;
}
.review-avatar { background-image: none !important; background-color: var(--ne-marca) !important; }

/* La barra es fija: el hero necesita dejarle sitio o el badge queda por debajo. */
.hero { padding-top: calc(84px + clamp(20px, 2.4vw, 36px)) !important; }

/* ==========================================================================
   Ancho de lectura
   El contenedor iba a 1.280px con 24px de margen: en pantalla grande el texto
   corria a 97 caracteres por linea. Lo comodo son 65-75. Se estrecha la caja y
   se le da aire a los lados, que es lo que hace que un sitio parezca cuidado.
   ========================================================================== */
.container, .wrap, .contenedor {
  max-width: 1100px !important;
  padding-left: clamp(20px, 4vw, 44px) !important;
  padding-right: clamp(20px, 4vw, 44px) !important;
  margin-inline: auto !important;
}

/* Texto corrido: nunca mas ancho de lo que se lee de un vistazo.
   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. */
.hero p:not(.etiqueta), .section-subtitle, .review-text, .service-card p, .step p,
.faq-a, .acc-body-inner li, .otras-terapias p, .bloque p:not(.etiqueta) {
  max-width: 68ch !important;
}
.section-header { max-width: 62ch; }

/* Todo lo capado que viva en un contexto centrado, centrado tambien de caja. */
.section-header, .bloque, .bloque h1, .bloque h2, .bloque p, .bloque .etiqueta,
header.hero h1, header.hero p, header.hero .etiqueta,
section[style*="text-align:center"] p, .fila > .section-header {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* La barra sigue el mismo ancho que el contenido. */
header .container, .navbar .container, nav.barra > * { max-width: 1100px !important; }

/* La barra no es texto de lectura: al estrecharla a 1.100px los enlaces se
   partian en dos filas. Se le deja mas ancho y se aprietan los huecos. */
header .container, .navbar .container, nav.barra > * { max-width: 1360px !important; }
header .container, .navbar .container { padding-left: clamp(16px, 2vw, 24px) !important; padding-right: clamp(16px, 2vw, 24px) !important; }
/* El "no partir en dos filas" vale solo en escritorio: en movil el menu TIENE que
   poder envolverse o se sale de la pantalla. */
@media (min-width: 900px) {
  header .container, .navbar .container { flex-wrap: nowrap !important; }
  .nav-menu, .nav-links, header nav ul, header nav { gap: 14px !important; flex-wrap: nowrap !important; }
  header nav a, .nav-menu a, .nav-links a { font-size: 14px !important; white-space: nowrap; }
  .nav-cta-free, .cta-button { padding: 7px 12px !important; font-size: 13.5px !important; white-space: nowrap; }
}

/* ==========================================================================
   Contraste, iconografia, antetitulo y foto
   ========================================================================== */

/* CONTRASTE. La regla de enlaces del hero pisaba el color del boton principal:
   texto #095A54 sobre fondo #0B6E67 daba 1,32 de contraste (AA pide 4,5). */
.hero .btn-primary, .hero a.btn-primary {
  background: var(--ne-marca) !important;
  color: #fff !important;
  border: 1px solid var(--ne-marca) !important;
}
.hero .btn-primary *, .hero a.btn-primary * { color: #fff !important; }
.hero .btn-primary:hover { background: var(--ne-marca-alta) !important; }
/* El secundario iba a 2,60. Con la tinta normal sube por encima de 10. */
.hero .btn-secondary, .hero a.btn-secondary {
  color: var(--ne-tinta) !important;
  border: 1px solid var(--ne-linea) !important;
  background: var(--ne-papel-2) !important;
}
.hero .btn-secondary:hover { border-color: var(--ne-marca) !important; color: var(--ne-marca-alta) !important; }

/* ANTETITULO. Era una pildora de 100px de radio con un emoji de cerebro delante:
   el cliche exacto de plantilla generada. Se convierte en un antetitulo plano con
   una linea, que es lo que usan las paginas que no parecen hechas con molde.
   El texto no se toca: solo se oculta el emoji con un recorte. */
.hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 46px !important;
  position: relative;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--ne-tinta-2) !important;
}
.hero-badge::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 34px; height: 1px;
  background: var(--ne-marca);
}
/* El emoji del cerebro: fuera de la vista, intacto en el DOM. */
.hero-badge > span:first-child, .hero-badge > i:first-child { display: none !important; }
.hero-badge { text-indent: 0; }

/* ICONOGRAFIA. Diez emoji sustituidos por iconos de trazo. El emoji se queda en
   el HTML (no se toca el contenido) pero deja de verse. */
.service-icon {
  font-size: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  width: 40px !important; height: 40px !important;
  border: 1px solid color-mix(in srgb, var(--ne-marca) 22%, var(--ne-linea)) !important;
  background-color: var(--ne-marca-suave) !important;
  border-radius: 9px !important;
  display: grid !important; place-items: center !important;
}
/* 1 · Evaluacion completa — portapapeles con visto */
.services-grid > .service-card:nth-child(1) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E") !important; }
/* 2 · Neurodesarrollo — figura que crece */
.services-grid > .service-card:nth-child(2) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2.4'/%3E%3Cpath d='M12 8.4V15'/%3E%3Cpath d='M8.5 11.5h7'/%3E%3Cpath d='M9.5 21l2.5-6 2.5 6'/%3E%3C/svg%3E") !important; }
/* 3 · Dano cerebral — pulso */
.services-grid > .service-card:nth-child(3) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-6 3 12 3-9 2 3h4'/%3E%3C/svg%3E") !important; }
/* 4 · Demencias — reloj */
.services-grid > .service-card:nth-child(4) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") !important; }
/* 5 · Rehabilitacion — ciclo */
.services-grid > .service-card:nth-child(5) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E") !important; }
/* 6 · Inteligencia — barras */
.services-grid > .service-card:nth-child(6) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Crect x='6' y='12' width='3' height='6' rx='.6'/%3E%3Crect x='11' y='8' width='3' height='10' rx='.6'/%3E%3Crect x='16' y='4' width='3' height='14' rx='.6'/%3E%3C/svg%3E") !important; }
/* 7 · Fonoaudiologia — ondas de voz */
.services-grid.compacta > .service-card:nth-child(1) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9v6M10 6v12M14 8v8M18 10.5v3'/%3E%3C/svg%3E") !important; }
/* 8 · Terapia ocupacional — mano */
.services-grid.compacta > .service-card:nth-child(2) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M12 11V4.5a1.5 1.5 0 0 1 3 0V12'/%3E%3Cpath d='M15 12V7.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6v-3a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E") !important; }
/* 9 · Psicoterapia — dos voces */
.services-grid.compacta > .service-card:nth-child(3) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A1.5 1.5 0 0 1 5.5 5h8A1.5 1.5 0 0 1 15 6.5v5A1.5 1.5 0 0 1 13.5 13H8l-4 3z'/%3E%3Cpath d='M18 9h.5A1.5 1.5 0 0 1 20 10.5v5A1.5 1.5 0 0 1 18.5 17H17l-3 2.5V17'/%3E%3C/svg%3E") !important; }
/* 10 · Psicoterapia online — pantalla */
.services-grid.compacta > .service-card:nth-child(4) .service-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M9 21h6M12 17v4'/%3E%3C/svg%3E") !important; }

/* FOTO. La original mide 360x527 y se estaba estirando a 380x556: por eso se veia
   blanda. Se recorta en vertical y se sube el encuadre para que la cara quede en
   el tercio superior, que es donde se mira. */
.hero-side .hero-photo-card { aspect-ratio: 4 / 5 !important; max-height: none !important; overflow: hidden; }
.hero-side .hero-photo-card img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 12% !important;
}

/* ==========================================================================
   Superficies oscuras
   La seccion de contacto y el pie conservaban el degradado gris pizarra original
   (#0f172a), pero las reglas generales de arriba les pusieron tinta oscura encima:
   el titular "Agenda tu Cita en Pereira" quedaba a 1,14 de contraste. Se quedan
   oscuras a proposito —cortan el ritmo de la pagina— pero con texto claro.
   ========================================================================== */
:root { --ne-oscuro: #12211F; }

section.contact, footer, .footer, .site-footer {
  background-image: none !important;
  background-color: var(--ne-oscuro) !important;
}
section.contact, section.contact h1, section.contact h2, section.contact h3,
section.contact h4, section.contact p, section.contact li, section.contact span,
footer, footer h1, footer h2, footer h3, footer h4, footer p, footer li, footer span,
.footer p, .footer li, .footer span {
  color: var(--ne-papel) !important;
}
section.contact .section-subtitle, footer .legal, footer small {
  color: color-mix(in srgb, var(--ne-papel) 72%, transparent) !important;
}
section.contact a, footer a, .footer a { color: #fff !important; text-decoration: none; }
section.contact a:hover, footer a:hover { text-decoration: underline; }

/* Las tarjetas de contacto sobre fondo oscuro: translucidas, no blancas. */
section.contact .contact-item {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
section.contact .contact-item * { color: var(--ne-papel) !important; }

/* El boton de WhatsApp mantiene su verde, que ahi si significa algo. */
section.contact .btn-wa, section.contact a[href*="wa.me"], footer a[href*="wa.me"] {
  background: var(--ne-wa) !important; color: #fff !important;
  border-radius: 8px !important; padding: 9px 16px !important;
  display: inline-block; font-weight: 600 !important; text-decoration: none !important;
}

/* Los iconos dentro de la banda oscura llevaban el fondo claro de las tarjetas. */
section.contact .service-icon, section.contact .contact-icon, section.contact [class*="icon"] {
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* ==========================================================================
   Bloque CTA de las paginas de contenido
   Conservaba un degradado teal→naranja que en fondo claro se ve como una mancha
   irregular, y sus dos botones quedaban pegados (11px) y de anchos distintos.
   ========================================================================== */
.cta {
  background-image: none !important;
  background-color: var(--ne-marca-suave) !important;
  border: 1px solid color-mix(in srgb, var(--ne-marca) 16%, var(--ne-linea)) !important;
  border-radius: var(--ne-r) !important;
  padding: 28px 24px !important;
}
.cta h2, .cta h3 { margin: 0 0 6px !important; }
.cta p { margin: 0 auto 18px !important; }

/* Los botones como un grupo, con hueco propio y misma altura. */
.cta .btn, .cta a[class*="btn"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px !important;
  margin: 0 6px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   UNIFICACIÓN VISUAL (2026-08-31)
   Al bajar por la home se notaba cambio de diseño: el radio de las tarjetas
   iba saltando de sección en sección (10px en servicios y FAQ, 16px en
   reseñas, 20px en proceso) y el título de Contacto salía a 48px contra los
   36px del resto. Aquí se fija un solo lenguaje.
   ========================================================================== */

/* Un único radio para toda tarjeta, venga de donde venga */
.service-card, .review-card, .rs-card, .card, .paso, .step, .art-card,
.faq-item, .content-card, .qcf-card, .sol-wrap, .pl-item {
  border-radius: 16px !important;
}

/* Un único tamaño de título de sección */
.section-title, section > .container > h2, section h2.section-title,
.contact h2, #contacto h2 {
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.2 !important;
}

/* Mismo aire vertical en todas las secciones */
section.section, section#servicios, section#resenas, section#proceso,
section#faq, section#contacto, section.content-sec {
  padding-top: clamp(44px, 5vw, 68px) !important;
  padding-bottom: clamp(44px, 5vw, 68px) !important;
}

/* Ritmo de fondos: alternar de forma regular en vez de un blanco suelto */
section#servicios { background: #f8fafc !important; }
section#resenas, section#faq { background: #ffffff !important; }

/* Pretítulo sobre el h1 (mismo par que ya usaba la home en su hero).
   Aporta contexto local/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;
}
header .pretitulo, .hero .pretitulo { margin-inline: auto !important }
