/* ==========================================================================
   NOVA DESIGN SYSTEM
   Un solo origen de verdad para botones/secciones de Elementor y bloques HTML.
   Aplica estas clases en:
   - Elementor: pestaña "Avanzado" -> campo "CSS Classes" de cualquier widget
   - HTML: directamente en el atributo class="" de tus bloques
   Usa exactamente los mismos nombres de clase que tu bloque HTML del hero,
   asi que puedes borrar el <style> inline de ese bloque y dejar que este
   archivo tome el control, sin tocar el markup.

   IMPORTANTE — criterio de fuentes e íconos (ver playbook de optimización):
   - Ninguna sección debe traer su propio <style> inline ni cargar fuentes
     o librerías de íconos externas (Google Fonts CDN, Font Awesome, etc).
     Todo vive acá.
   - Fuentes: autohospedadas vía @font-face (abajo), nunca vía Elementor
     ni Google Fonts CDN. En Elementor -> Ajustes -> Características,
     Google Fonts debe estar en "No cargar".
   - Íconos: SVG, no fuentes de íconos. Los que se repiten en el sitio van
     en el sprite central (nova-child/icons/icons-sprite.svg) y se referencian
     con <use>. Los que aparecen en una sola sección van inline directo en
     el HTML de esa sección. Ambos casos comparten la clase .nova-icon.
   ========================================================================== */

/* ---------- Fuentes (autohospedadas) ----------
   Pesos incluidos: solo los que el sitio usa hoy. Si una sección nueva
   necesita un peso distinto, agregar el @font-face acá, no cargarlo aparte. */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores */
  --nova-primary: #5e3bdb;
  --nova-primary-hover: #7858f5;
  --nova-secondary: #006398;
  --nova-secondary-bg: #cde5ff;
  --nova-text-heading: #312E81;
  --nova-text-body: #484555;
  --nova-text-dark: #191c1f;
  --nova-border: #c9c4d7;
  --nova-border-light: #f0edf9;
  --nova-badge-bg: #E0D7FF;
  --nova-star: #F59E0B;
  --nova-surface: #ffffff;
  --nova-surface-alt: #f8f9fe;

  /* Escala de espaciado — adoptada formalmente a partir de la página de
     Psicología (primer resultado real generado con Stitch + nova-design.md).
     El sistema no tenía una escala hasta acá; se agrega porque es de uso
     transversal y no choca con nada existente. */
  --nova-space-xs: 8px;
  --nova-space-sm: 16px;
  --nova-space-md: 24px;
  --nova-space-lg: 40px;
  --nova-space-xl: 80px;

  /* Sombras — mismo origen que la escala de spacing. */
  --nova-shadow-soft: 0 10px 40px rgba(94, 59, 219, 0.06);
  --nova-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Confirmado por muestreo de píxel directo sobre la captura real del sitio
     (texto "AGENDAR CONSULTA" y teléfono destacado) — no es una estimación. */
  --nova-cta: #cc3366;
  --nova-cta-hover: #a82a54;

  /* Tipografía */
  --nova-font: 'Poppins', sans-serif;

  /* Radios */
  --nova-radius-pill: 9999px;
  --nova-radius-lg: 24px;
  --nova-radius-md: 12px;

  /* Breakpoint (coincide con el max-width original del hero) */
  --nova-bp-tablet: 992px;
}

/* ---------- Base ---------- */
html,
body {
  /* Red de seguridad contra scroll horizontal: hay al menos una sección
     (.especialidades-section-wrapper, ver más abajo) que usa el truco de
     "full-bleed" con 100vw/-50vw para salirse del contenedor de Elementor.
     Ese truco es frágil en mobile (100vw no siempre coincide exacto con
     el ancho visible por scrollbar/URL bar del navegador) y puede generar
     un desborde de 1-2px que activa scroll horizontal en toda la página.
     overflow-x: hidden neutraliza cualquier desborde mínimo sin recortar
     contenido visible. */
  overflow-x: hidden;
}

body {
  font-family: var(--nova-font);
}

/* Reset de elementos nativos — faltaba desde que se migró contenido de
   Stitch a HTML plano. Los <a> del sitio ya se resuelven con !important
   por componente, pero <button> nativo (usado en tabs/modal) no tenía
   reset propio y mostraba el borde por defecto del navegador. */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Íconos SVG (sprite + inline comparten esta clase) ---------- */
.nova-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---------- Hero: layout ---------- */
.nova-hero-section {
  position: relative;
  padding: 10px 20px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: transparent;
}

.nova-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: center;
}

@media (max-width: 992px) {
  .nova-hero-section {
    /* Antes -20px: metía el Hero (y su badge "Presencial") debajo del
       header sticky, tapándolo en pantallas angostas. */
    margin-top: 0;
  }

  .nova-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nova-hero-title {
    font-size: 2.2rem;
  }

  .nova-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nova-hero-actions .nova-btn-primary,
  .nova-hero-actions .nova-btn-outline {
    width: 100%;
  }
}

/* ---------- Badge ---------- */
.nova-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--nova-badge-bg);
  color: var(--nova-text-heading);
  padding: 6px 16px;
  border-radius: var(--nova-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: var(--nova-font);
}

.nova-badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--nova-primary);
  border-radius: 50%;
}

/* ---------- Tipografía del hero ---------- */
.nova-hero-title {
  font-size: 3rem;
  line-height: 1.15;
  color: var(--nova-text-heading);
  font-weight: 800;
  margin: 0 0 20px 0;
}

.nova-hero-title .highlight {
  color: var(--nova-primary);
}

.nova-hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--nova-text-body);
  margin-bottom: 32px;
  max-width: 540px;
}

.nova-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* ---------- Botones ---------- */
.nova-btn-primary,
.nova-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--nova-radius-pill);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.nova-btn-primary {
  color: var(--nova-surface);
  background-color: var(--nova-primary);
  border: none;
}

.nova-btn-primary:hover {
  background-color: var(--nova-primary-hover);
  color: var(--nova-surface) !important;
  box-shadow: 0 8px 20px rgba(94, 59, 210, 0.3);
  transform: translateY(-2px);
}

.nova-btn-outline {
  background-color: transparent;
  color: var(--nova-primary) !important;
  border: 1px solid var(--nova-border);
}

.nova-btn-outline:hover {
  background-color: var(--nova-surface);
  border-color: var(--nova-primary);
}

/* ---------- Trust ---------- */
.nova-hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--nova-text-body);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 20px;
}

.trust-stars {
  color: var(--nova-star);
  font-weight: bold;
}

/* ---------- Card de agendamiento ---------- */
.nova-booking-card {
  padding: 32px;
  border-radius: var(--nova-radius-lg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(49, 46, 129, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.card-header h3 {
  font-size: 1.5rem;
  color: var(--nova-text-heading);
  margin: 0 0 6px 0;
}

.card-header p {
  font-size: 0.9rem;
  color: var(--nova-text-body);
  margin: 0 0 24px 0;
}

/* ---------- Formulario ---------- */
.nova-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nova-text-heading);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-md);
  background-color: var(--nova-surface);
  font-size: 0.95rem;
  color: var(--nova-text-dark);
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--nova-primary);
}

.form-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  margin-top: 8px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--nova-text-body);
  font-family: var(--nova-font);
}

/* ==========================================================================
   SECCIÓN: Especialidades
   Migrado desde <style> inline de la sección HTML original.
   Cambios respecto al original:
   - Colores hardcodeados -> variables del design system (tabla en el playbook)
   - Se retiran los !important: si Elementor sigue ganando especificidad,
     el fix correcto es la prioridad de carga de este archivo, no volver a
     forzar con !important acá. Probar en staging tras el cambio.
   - Iconos: SVG puro vía sprite (.nova-icon) — sin dependencia de fuentes web
   ========================================================================== */
.especialidades-section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 20px;
  background-color: var(--nova-surface-alt);
  box-sizing: border-box;
}

/* Header */
.esp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 20px;
}

.esp-header-text h2 {
  color: var(--nova-primary);
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.esp-header-text p {
  color: var(--nova-text-body);
  font-size: 1rem;
  margin: 0;
  max-width: 580px;
  line-height: 1.5;
}

.esp-link-equipo {
  color: var(--nova-primary);
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: gap 0.2s ease;
}

.esp-link-equipo:hover {
  gap: 10px;
}

/* Layout Grid Asimétrico */
.esp-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* Relación de aspecto Ancho / Estrecho */
  gap: 24px;
}

/* Tarjetas base */
.esp-card {
  border-radius: var(--nova-radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.esp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Variaciones de fondo */
.card-white {
  background-color: var(--nova-surface);
  border: 1px solid var(--nova-border-light);
}

.card-violet {
  background-color: var(--nova-primary);
  color: var(--nova-surface);
}

.card-blue {
  background-color: var(--nova-secondary);
  color: var(--nova-surface);
}

/* Títulos e íconos dentro de las tarjetas */
.esp-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.esp-card h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.card-white h3 {
  color: var(--nova-text-heading);
}

.card-violet h3,
.card-blue h3 {
  color: var(--nova-surface);
}

.esp-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.card-white p {
  color: var(--nova-text-body);
}

.card-violet p,
.card-blue p {
  color: rgba(255, 255, 255, 0.9);
}

/* Círculos de íconos */
.esp-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.esp-icon-circle .nova-icon {
  width: 22px;
  height: 22px;
}

.icon-violet {
  background-color: var(--nova-badge-bg);
  color: var(--nova-primary);
}

.icon-blue {
  background-color: var(--nova-secondary-bg);
  color: var(--nova-secondary);
}

.icon-standalone {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 20px;
  display: block;
}

/* Botones píldora */
.esp-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--nova-radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  width: fit-content;
  margin-top: 24px;
  transition: all 0.25s ease;
}

.btn-outline-violet {
  border: 1.5px solid var(--nova-primary);
  color: var(--nova-primary);
  background: transparent;
}

.btn-outline-violet:hover {
  background-color: var(--nova-primary);
  color: var(--nova-surface);
}

.btn-outline-blue {
  border: 1.5px solid var(--nova-secondary);
  color: var(--nova-secondary);
  background: transparent;
}

.btn-outline-blue:hover {
  background-color: var(--nova-secondary);
  color: var(--nova-surface);
}

.btn-glass {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--nova-surface);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Responsivo para celulares */
@media (max-width: 850px) {
  .esp-grid {
    grid-template-columns: 1fr; /* Pasa a 1 sola columna en móvil */
  }

  .esp-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   SECCIONES: Home intermedio (Intro / Video CTA / Equipo / Cita / Contacto /
   Compromiso)
   Migrado desde bloques wp:generateblocks/* con estilos por atributo.

   CORRECCIÓN (post-QA visual contra staging real):
   La primera versión de este bloque reemplazaba los SVG decorativos
   originales (circular_background.svg, circular-shape.svg, dots_blue.svg,
   light-blue_dot.svg) y el favicon-como-decoración por manchas de un solo
   color en CSS. Comparado contra el sitio real, esto NO correspondía:
   - Los SVG decorativos son ilustraciones reales (blobs de dos tonos +
     círculos punteados), no una mancha lisa — y ya eran livianos (vectores
     de pocos KB), así que no había ningún ahorro real que justificara
     perder fidelidad visual.
   - El único caso con peso real desperdiciado es el favicon de 512px
     reusado como logo decorativo — ESE sí conviene optimizar (versión más
     chica), pero como imagen real, no como CSS.
   Se revierte a usar los assets SVG/PNG reales (con HTTPS corregido), y se
   deja .nova-decor solo como utilidad disponible para casos futuros donde
   sí aplique una mancha de color lisa — no se usa en las secciones de abajo.

   Colores confirmados por muestreo de píxel directo sobre captura real
   (no estimados): eyebrow/título de la sección Intro = var(--nova-text-body);
   CTA de texto (botón "Agendar Consulta", teléfono destacado) = --nova-cta
   #cc3366.
   ========================================================================== */

/* ---------- Utilidad: mancha decorativa en CSS (disponible, no usada abajo) ---------- */
.nova-decor {
  position: relative;
  overflow: hidden;
}

.nova-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--decor-x, 50%) var(--decor-y, 50%),
    var(--decor-color, var(--nova-primary)) 0%,
    transparent 55%
  );
  opacity: var(--decor-opacity, 0.1);
  pointer-events: none;
  z-index: 0;
}

.nova-decor > * {
  position: relative;
  z-index: 1;
}

/* ---------- Fondo decorativo real (SVG ilustrado, en ::before para poder
   controlar su opacidad sin afectar el contenido de encima) ---------- */
.nova-section--decor-bg {
  position: relative;
  overflow: hidden;
}

.nova-section--decor-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--decor-image);
  background-repeat: no-repeat;
  background-position: var(--decor-position, left center);
  background-size: var(--decor-size, 30%);
  opacity: var(--decor-opacity, 0.13);
  pointer-events: none;
  z-index: 0;
}

.nova-section--decor-bg > .nova-section-inner {
  position: relative;
  z-index: 1;
}

/* Logo/mark decorativo a baja opacidad (favicon reusado, ya optimizado) */
.nova-corner-mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  max-width: 380px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Fondo de textura de puntos (grilla real en CSS, sin imagen) ----------
   Confirmado contra captura: es una grilla regular de círculos en offset, no
   una forma orgánica — por eso SÍ se puede recrear fiel en CSS puro, a
   diferencia del blob de la sección Intro. Se desvanece hacia los bordes
   con un mask radial. Se aplica una sola vez al wrapper de la sección
   completa (imagen + columnas comparten el mismo fondo). */
.nova-section--dot-bg {
  position: relative;
}

.nova-section--dot-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--nova-primary) 1.6px, transparent 1.8px);
  background-size: 16px 16px;
  background-position: var(--dot-position, 55% 0%);
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(circle at var(--dot-position, 55% 20%), black 0%, transparent 65%);
  mask-image: radial-gradient(circle at var(--dot-position, 55% 20%), black 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.nova-section--dot-bg > .nova-section-inner {
  position: relative;
  z-index: 1;
}

/* ---------- Variante de card sin caja (columnas de texto plano) ---------- */
.nova-card--flat {
  background: none;
  padding: 0;
  box-shadow: none;
}

.nova-card--flat h3,
.nova-card--flat h4 {
  color: var(--nova-text-body);
}

/* ---------- Wrapper genérico de sección ---------- */
.nova-section {
  padding: 60px 40px;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .nova-section {
    padding: 60px 30px;
  }
}

.nova-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.nova-section--soft {
  background: linear-gradient(71deg, var(--nova-surface) 50%, var(--nova-surface-alt) 50%);
}

.nova-section--primary {
  background-color: var(--nova-primary);
  color: var(--nova-surface);
}

/* ---------- Eyebrow (etiqueta pequeña sobre un título) ---------- */
.nova-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nova-primary);
  margin: 0 0 12px 0;
}

.nova-eyebrow--center {
  justify-content: center;
}

.nova-eyebrow--on-primary {
  color: var(--nova-surface);
}

/* Variante confirmada por captura real: eyebrow en gris oscuro, no morado */
.nova-eyebrow--muted {
  color: var(--nova-text-body);
}

/* ---------- Enlace CTA en texto (sin fondo/relleno) ---------- */
.nova-link-cta {
  display: inline-block;
  color: var(--nova-cta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
}

.nova-link-cta:hover {
  color: var(--nova-cta-hover);
}

/* ---------- Sección: Intro home ("Desde tu casa") ---------- */
.nova-intro {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.nova-intro-content,
.nova-intro-media {
  flex: 1 1 420px;
}

.nova-intro-title {
  font-size: 2.75rem;
  line-height: 1.15;
  color: var(--nova-text-body);
  font-weight: 700;
  margin: 0 0 16px 0;
}

.nova-intro-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nova-text-body);
  margin: 0 0 28px 0;
}

.nova-intro-media {
  position: relative;
}

.nova-intro-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 24px;
  text-align: right;
}

.nova-intro-contact-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nova-text-body);
  margin: 0;
}

.nova-intro-contact-phone {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--nova-cta);
  margin: 0;
}

.nova-intro-contact-phone a {
  color: inherit;
  text-decoration: none;
}

.nova-intro-image {
  max-width: 350px;
  margin: 0 auto;
  display: block;
}

.nova-intro-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 992px) {
  .nova-intro {
    flex-direction: column;
  }
}

/* ---------- Sección: Video CTA ---------- */
.nova-video-cta {
  display: flex;
  align-items: stretch;
  gap: 50px;
  flex-wrap: wrap;
}

.nova-video-cta-action {
  flex: 1 1 320px;
  position: relative;
  min-height: 380px;
  border-radius: var(--nova-radius-lg);
  overflow: hidden;
  background-image: var(--video-cta-image);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.nova-video-cta-link {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nova-surface);
  text-decoration: none !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.nova-video-cta-link .nova-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nova-video-cta-link strong {
  display: block;
  font-size: 1.1rem;
}

.nova-video-cta-content {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nova-video-cta-title {
  color: var(--nova-text-body);
  font-size: 2rem;
  margin: 0 0 12px 0;
}

.nova-video-cta-text {
  color: var(--nova-text-body);
  margin: 0 0 24px 0;
}

/* Lista de especialidades como tags (no interactivos) */
.nova-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nova-tag {
  display: inline-block;
  padding: 0;
  background-color: transparent;
  color: var(--nova-text-body);
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---------- Cards genéricas (equipo / compromiso, reutilizable) ---------- */
.nova-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.nova-card {
  background-color: var(--nova-surface-alt);
  border-radius: var(--nova-radius-md);
  padding: 24px;
  box-sizing: border-box;
}

.nova-card h3,
.nova-card h4 {
  font-size: 1.1rem;
  color: var(--nova-text-heading);
  margin: 0 0 10px 0;
}

.nova-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--nova-text-body);
  margin: 0;
}

/* ---------- Feature con imagen (bloque "Certificados ADOS-2") ---------- */
.nova-feature {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.nova-feature-image {
  flex: 1 1 280px;
}

.nova-feature-image img {
  width: 100%;
  height: auto;
  border-radius: var(--nova-radius-lg);
  display: block;
}

.nova-feature-content {
  flex: 2 1 480px;
}

.nova-feature-content h2 {
  color: var(--nova-text-body);
  margin: 0 0 16px 0;
}

.nova-feature-content p {
  color: var(--nova-text-body);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* ---------- Cita / Quote ---------- */
.nova-quote {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.nova-quote-mark {
  height: 90px;
  width: auto;
  flex-shrink: 0;
}

.nova-quote blockquote {
  margin: 0;
  flex: 1 1 420px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--nova-text-body);
}

/* ---------- Contacto ---------- */
.nova-contact {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.nova-contact-media,
.nova-contact-content {
  flex: 1 1 380px;
}

.nova-contact-media {
  border-radius: var(--nova-radius-lg, 16px); /* Fallback de 16px por si no carga la variable */
  overflow: hidden;                          /* Obliga a recortar todo lo que esté dentro */
  display: block;
  width: 100%;
}

.nova-section .nova-contact-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;                    /* Hereda los bordes redondeados del padre */
}

.nova-contact-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

@media (max-width: 600px) {
  .nova-contact-buttons {
    grid-template-columns: 1fr;
  }
}

/* .nova-form-card vivía acá con una tercera definición, pero quedaba muerta:
   la cascada la sobrescribía en los otros dos puntos donde se redefine.
   La versión vigente es la de la sección "Solicitar Convenio" — ver
   docs/auditoria-css-actual.md. */

/* ==========================================================================
   COMPONENTES: Tabs, Modal, Reveal-on-scroll
   Promovidos a design-system.css desde el HTML generado con Stitch para la
   página de Psicología — se documentan acá porque las próximas páginas de
   especialidad (Fonoaudiología, Psicopedagogía, Terapia Ocupacional) muy
   probablemente necesiten el mismo patrón de pestañas + modal de
   agendamiento. Evita que cada página nueva redefina su propio CSS de tabs
   y modal desde cero.
   ========================================================================== */

/* ---------- Tabs (selector de contenido tipo "trastornos que tratamos") ---------- */
.nova-tabs {
  display: flex;
  flex-direction: column;
  border-radius: var(--nova-radius-lg);
  overflow: hidden;
  background: var(--nova-surface);
  border: 1px solid var(--nova-border-light);
}

@media (min-width: 768px) {
  .nova-tabs {
    flex-direction: row;
    min-height: 600px;
  }
}

.nova-tabs-sidebar {
  background: var(--nova-surface-alt);
  border-right: 1px solid var(--nova-border-light);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .nova-tabs-sidebar {
    width: 30%;
  }
}

.nova-tabs-item {
  padding: var(--nova-space-md);
  display: flex;
  align-items: center;
  gap: var(--nova-space-sm);
  text-align: left;
  transition: all 0.3s ease;
  font-weight: 600;
  color: var(--nova-text-body);
  border: none;
  border-left: 4px solid transparent;
  outline: none;
  background: none;
  cursor: pointer;
  width: 100%;
}

.nova-tabs-item:hover {
  background-color: rgba(94, 59, 219, 0.05);
}

.nova-tabs-item.is-active {
  background-color: var(--nova-badge-bg);
  color: var(--nova-primary);
  border-left: 4px solid var(--nova-primary);
}

.nova-tabs-item.is-disabled {
  color: var(--nova-border);
  cursor: default;
  opacity: 0.6;
}

.nova-tabs-item.is-disabled:hover {
  background-color: transparent;
}

.nova-tabs-content {
  padding: var(--nova-space-lg);
  flex: 1;
}

.nova-tab-panel {
  display: none;
  animation: nova-fade-in 0.4s ease-out;
}

.nova-tab-panel.is-active {
  display: block;
}

.nova-tab-panel--pending {
  color: var(--nova-text-body);
  font-style: italic;
}

@keyframes nova-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal (agendamiento) ---------- */
.nova-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(49, 46, 129, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.nova-modal-overlay.is-active {
  display: flex;
}

.nova-modal {
  background: var(--nova-surface);
  width: 100%;
  max-width: 600px;
  border-radius: var(--nova-radius-lg);
  padding: var(--nova-space-lg);
  box-shadow: var(--nova-shadow-md);
  margin: var(--nova-space-md);
}

/* B. — Botón de cierre de modal (UX/UI fijo y protegido contra desaparición) */
.nova-modal-close {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  color: var(--nova-text-body);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Tamaño y visibilidad del icono interno */
.nova-modal-close .nova-icon {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor;
  opacity: 1 !important;
  visibility: visible !important;
}

.nova-modal-close .nova-icon {
  width: 24px;
  height: 24px;
}

/* Efecto Hover protegido: Cambia de fondo y color, pero JAMÁS desaparece */
.nova-modal-close:hover {
  background-color: rgba(88, 43, 232, 0.08) !important;
  color: var(--purple-main, #582be8) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1.05);
}

.nova-modal-close:active {
  transform: scale(0.95);
}
/* form-group / input ya existen más arriba en este archivo — reutilizar esas
   clases en formularios nuevos, no crear una clase .form-input paralela. */

/* ---------- Reveal on scroll ---------- */
.nova-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.nova-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   UTILIDADES DE LAYOUT
   Promovidas desde el HTML de Stitch de la página de Psicología. Todas
   prefijadas con nova- (a diferencia de como las generó Stitch, ej. "mb-sm"
   sin prefijo) para evitar choques con clases de otros plugins/temas que
   usan nombres genéricos iguales (text-center, mb-sm, etc. son nombres muy
   comunes en otras librerías CSS).
   ========================================================================== */

.nova-section-alt {
  background-color: var(--nova-surface-alt);
}

.nova-flex-gap {
  display: flex;
  gap: var(--nova-space-md);
}

.nova-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-lg);
}

@media (min-width: 768px) {
  .nova-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.nova-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-lg);
}

@media (min-width: 768px) {
  .nova-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nova-text-center { text-align: center; }
.nova-mb-sm { margin-bottom: var(--nova-space-sm); }
.nova-mb-md { margin-bottom: var(--nova-space-md); }
.nova-mb-lg { margin-bottom: var(--nova-space-lg); }
.nova-mt-md { margin-top: var(--nova-space-md); }
.nova-mt-lg { margin-top: var(--nova-space-lg); }

/* Variante de .nova-feature-image para fotos que necesitan recorte uniforme
   (object-fit: cover) + sombra suave — ej. imagen de hero. Reutiliza el
   wrapper .nova-feature-image ya existente, no crea un componente nuevo. */
.nova-feature-image--cover img {
  object-fit: cover;
  box-shadow: var(--nova-shadow-soft);
}

/* ==========================================================================
   COMPONENTE: Header / Navegación
   Movido más abajo — ver "COMPONENTE: Header / Navegación (Optimizado y
   100% Responsivo)" cerca del final del archivo. Esta era la primera
   propuesta (duplicada, perdía la cascada); se retira para dejar una sola
   fuente de verdad. Ver docs/auditoria-css-actual.md, sección A.
   ========================================================================== */

/* ==========================================================================
   COMPONENTE: Footer
   Sin fusión con el CTA (se descartó esa dirección) — el CTA final sigue
   siendo una sección aparte, como estaba antes. Footer limpio, fondo
   sólido, con línea divisoria vertical entre el bloque de contacto y las
   columnas de links (confirmado contra el diseño real).
   Colores del footer real migrados a tokens del sistema — el footer
   original tenía colores sin migrar (#9c3ff4, #1448d7, ver nota en el
   playbook 1.1), no se replican acá.
   Actualizado: se agregaron animaciones hover (logo, links, íconos
   sociales, dirección) y la dirección ahora es un <a> a Google Maps, no
   solo texto — ver footer-propuesta.html para el HTML correspondiente.
   ========================================================================== */

.nova-footer {
  background-color: var(--nova-surface);
  padding: var(--nova-space-xl) var(--nova-space-md) 0;
}

@media (min-width: 993px) {
  .nova-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ---------- Footer real ---------- */
.nova-footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nova-space-xl);
  padding-top: var(--nova-space-lg);
}

.nova-footer-brand {
  flex: 1 1 260px;
  max-width: 320px;
}

.nova-footer-brand img {
  height: 40px !important;
  width: auto !important;
  max-width: none;
  display: block;
  margin-bottom: var(--nova-space-md);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

.nova-footer-brand img:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(94, 59, 219, 0.25));
}

.nova-footer-contact-block {
  margin-bottom: var(--nova-space-md);
}

.nova-footer-contact-block h4,
.nova-footer-social h4 {
  color: var(--nova-primary);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.nova-footer-contact-block p {
  margin: 0;
  font-size: 0.9rem;
  max-width: 100%;
}

.nova-footer-contact-block a {
  color: var(--nova-text-body);
  display: inline-block;
  max-width: 100%;
  /* El correo (atencionpacientes@novamente.cl) es el texto sin espacios
     más largo del footer — sin esto podría empujar el ancho de la
     columna igual que pasaba con "Especialidades". */
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nova-footer-contact-block a:hover {
  color: var(--nova-primary);
  transform: translateX(4px);
}

.nova-footer-social-icons {
  display: flex;
  gap: 12px;
}

.nova-footer-social-icons a {
  color: var(--nova-primary);
  display: inline-flex;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nova-footer-social-icons .nova-icon {
  width: 20px;
  height: 20px;
}

.nova-footer-social-icons a:hover {
  color: var(--nova-primary-hover);
  transform: translateY(-4px);
  opacity: 0.85;
}

.nova-footer-columns {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--nova-space-lg) var(--nova-space-xl);
  border-left: 1px solid var(--nova-border);
  padding-left: var(--nova-space-xl);
}

.nova-footer-column {
  /* Los items de grid no se encogen más allá del ancho natural de su
     contenido por defecto (min-width: auto) — sin esto, una palabra larga
     como "Especialidades" fuerza la columna a desbordarse en mobile. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.nova-footer-column h3 {
  color: var(--nova-primary);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--nova-space-sm) 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nova-footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-sm);
  line-height: 1.5;
  max-width: 100%;
}

.nova-footer-column ul li {
  line-height: 1.5;
  max-width: 100%;
}

.nova-footer-column a {
  color: var(--nova-text-body);
  font-size: 0.92rem;
  line-height: 1.5;
  display: block;
  max-width: 100%;
  /* "anywhere" (no solo break-word) permite partir en cualquier punto,
     incluso sin espacios/guiones — necesario para que un correo largo
     (atencionpacientes@novamente.cl) o una palabra larga (Especialidades)
     nunca empujen el ancho de la columna, sin importar el largo real
     del contenido de cada sección del footer. */
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nova-footer-column a:hover {
  color: var(--nova-primary);
  transform: translateX(6px);
}

.nova-footer-bottom {
  margin-top: var(--nova-space-xl);
  padding-top: var(--nova-space-md);
  border-top: 1px solid var(--nova-border-light);
  font-size: 0.88rem;
}

.nova-footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nova-text-body);
  transition: transform 0.25s ease, color 0.25s ease;
}

.nova-footer-bottom a:hover {
  color: var(--nova-primary);
  transform: translateX(4px);
}

.nova-footer-bottom .nova-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .nova-footer {
    /* Margen de seguridad extra en los lados para que nada quede pegado
       al borde de la pantalla en mobile. */
    padding-left: 28px;
    padding-right: 28px;
  }

  .nova-footer-columns {
    grid-template-columns: 1fr 1fr;
    border-left: none;
    padding-left: 0;
    /* Antes el gap horizontal usaba --nova-space-lg (40px), dejando muy
       poco ancho por columna en pantallas angostas y causando que
       "Especialidades" se desbordara. */
    gap: var(--nova-space-md) var(--nova-space-sm);
  }

  /* El footer apila mucho contenido real (marca + 2 bloques de contacto +
     redes + 3 columnas + dirección); en mobile se comprime el espaciado
     entre bloques para que no quede excesivamente largo, sin quitar
     contenido. */
  .nova-footer-content {
    gap: var(--nova-space-lg);
    padding-top: var(--nova-space-md);
  }

  .nova-footer-contact-block {
    margin-bottom: var(--nova-space-sm);
  }

  .nova-footer-bottom {
    margin-top: var(--nova-space-lg);
    padding-top: var(--nova-space-sm);
  }
}



/* ==========================================================================
   ==========================================================================
   AMPLIACIÓN DEL SISTEMA — páginas Contacto, Nosotros y Psicología
   Consolidado. Reemplaza y deduplica todos los parches anteriores.

   Se divide en tres partes:
     A. Escala tipográfica (tokens nuevos)
     B. Componentes nuevos
     C. Compatibilidad con Elementor (crítico — leer la nota de C.0)
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   PARTE A — ESCALA TIPOGRÁFICA

   El sistema tenía 16 font-size distintos y ninguna escala declarada. Estos
   tokens no son inventados: son los valores más frecuentes ya presentes en
   este archivo, promovidos a token.

   PENDIENTE: migrar los selectores antiguos a estos tokens y absorber los
   huérfanos (0.88, 0.9, 0.92, 1.5, 2.75rem). No se hace todavía para no
   cambiar el render del home en la misma tanda.
   ========================================================================== */

:root {
  --nova-text-2xs: 0.8rem;
  --nova-text-xs: 0.85rem;
  --nova-text-sm: 0.95rem;
  --nova-text-base: 1rem;
  --nova-text-lg: 1.1rem;
  --nova-text-xl: 1.3rem;
  --nova-text-2xl: 1.6rem;
  --nova-text-3xl: 2rem;
  --nova-text-4xl: 2.2rem;
  --nova-text-5xl: 3rem;
}


/* ==========================================================================
   PARTE B — COMPONENTES NUEVOS
   ========================================================================== */

/* B.1 — Reset de margen superior de títulos.
   El sistema nunca declaró uno. Al inyectar un <h1>/<h2> como primer hijo de
   un contenedor, el margin-top del navegador se colapsa hacia afuera y
   desalinea el padding de .nova-section. */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

/* B.2 — <textarea> en .form-group.
   El selector original cubre input y select únicamente. */
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-md);
  background-color: var(--nova-surface);
  font-family: inherit;
  font-size: var(--nova-text-sm);
  color: var(--nova-text-dark);
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--nova-primary);
}

/* B.3 — Variante de .nova-icon para íconos de trazo.
   .nova-icon declara `fill: currentColor`, y una regla CSS le gana al atributo
   de presentación `fill="none"` del SVG — sin este modificador un ícono
   outline se renderiza como mancha sólida, sin error en consola. */
.nova-icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nova-icon--lg {
  width: 2rem;
  height: 2rem;
}

/* B.4 — Título de página (H1 de páginas interiores).
   No reutilizar .nova-hero-title, que pertenece al hero del home y arrastra
   su propio breakpoint.
   COLOR PENDIENTE DE CONFIRMAR contra el sitio real. */
.nova-page-title {
  font-size: var(--nova-text-4xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--nova-text-heading);
  margin: 0 0 var(--nova-space-sm) 0;
}

@media (min-width: 768px) {
  .nova-page-title {
    font-size: var(--nova-text-5xl);
  }
}

/* B.5 — Título de sección (H2). */
.nova-section-title {
  font-size: var(--nova-text-3xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--nova-text-heading);
  margin: 0 0 var(--nova-space-md) 0;
}

.nova-section-title--on-primary {
  color: var(--nova-surface);
}

/* B.6 — Encabezado de sección centrado (eyebrow + título + bajada + regla). */
.nova-section-header {
  max-width: 720px;
  margin: 0 auto var(--nova-space-lg) auto;
  text-align: center;
}

.nova-section-header p {
  color: var(--nova-text-body);
  margin: 0;
}

.nova-section-rule {
  width: 64px;
  height: 4px;
  border-radius: var(--nova-radius-pill);
  background-color: var(--nova-badge-bg);
  margin: var(--nova-space-md) auto 0 auto;
}

/* B.7 — Card elevada: blanca, radio grande, sombra suave.
   .nova-card base es surface-alt / radius-md / sin sombra — sobre una sección
   .nova-section-alt (mismo color) desaparece.
   Antes .nova-form-card era alias acá, pero esa clase termina redefinida más
   abajo (sección "Solicitar Convenio") con un diseño propio — se retiró el
   alias para no competir con esa definición vigente. */
.nova-card--elevated {
  background-color: var(--nova-surface);
  border-radius: var(--nova-radius-lg);
  padding: var(--nova-space-md);
  box-shadow: var(--nova-shadow-soft);
}

/* B.8 — Título de card, independiente del nivel de encabezado.
   El sistema ya estila `.nova-card h3, .nova-card h4`, pero las páginas nuevas
   usan <h2>/<h3> según la jerarquía semántica. Esta clase desacopla el estilo
   visual del nivel del tag. */
.nova-card-title {
  font-size: var(--nova-text-2xl);
  font-weight: 700;
  color: var(--nova-text-heading);
  line-height: 1.2;
  margin: 0 0 var(--nova-space-sm) 0;
}

.nova-card-title--sm {
  font-size: var(--nova-text-xl);
}

/* B.9 — Rótulo de campo (encabeza un dato dentro de un bloque).
   Distinto del eyebrow: el eyebrow encabeza una sección completa. */
.nova-field-label {
  font-size: var(--nova-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nova-primary);
  margin: 0 0 var(--nova-space-xs) 0;
}

/* B.10 — Listas. */
.nova-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--nova-text-body);
}

.nova-list li {
  margin-bottom: var(--nova-space-xs);
}

.nova-list li:last-child {
  margin-bottom: 0;
}

.nova-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-md);
}

.nova-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--nova-space-sm);
  color: var(--nova-text-body);
}

.nova-icon-list .nova-icon {
  color: var(--nova-primary);
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.1em;
}

.nova-icon-list strong {
  color: var(--nova-text-heading);
}

/* B.11 — Migas de pan. */
.nova-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nova-space-xs);
  font-size: var(--nova-text-2xs);
  color: var(--nova-text-body);
  margin-bottom: var(--nova-space-md);
}

.nova-breadcrumb a:hover {
  color: var(--nova-primary);
}

.nova-breadcrumb .nova-icon {
  width: 1em;
  height: 1em;
}

.nova-breadcrumb [aria-current="page"] {
  color: var(--nova-primary);
  font-weight: 600;
}

/* B.12 — Cabecera de modal y fila de dos campos (Alineado a la izquierda) */
.nova-modal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Fuerza la alineación a la izquierda de todos los elementos hijos */
  justify-content: flex-start;
  text-align: left;        /* Asegura que cualquier texto interno se alinee a la izquierda */
  gap: var(--nova-space-sm);
  margin-bottom: var(--nova-space-md);
  width: 100%;
}

.nova-modal-header h2,
.nova-modal-header h3,
.nova-modal-header p {
  margin: 0;
  text-align: left;        /* Evita centrados heredados en títulos o párrafos */
  width: 100%;
}

.nova-modal-header p {
  color: var(--nova-text-body);
}

.nova-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-sm);
}

@media (min-width: 600px) {
  .nova-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* B.13 — Testimonio / mensaje con autor.
   Mismo componente en Contacto (pacientes) y Nosotros (coordinación): cambia
   el dato, no la apariencia. */
.nova-testimonial-text {
  font-size: var(--nova-text-sm);
  line-height: 1.6;
  color: var(--nova-text-body);
  margin: 0 0 var(--nova-space-md) 0;
}

.nova-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--nova-space-sm);
}

.nova-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--nova-border-light);
  flex-shrink: 0;
}

.nova-testimonial-name {
  margin: 0;
  color: var(--nova-primary);
  font-size: var(--nova-text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.nova-testimonial-role {
  margin: 0;
  font-size: var(--nova-text-xs);
  line-height: 1.4;
  color: var(--nova-text-body);
}

/* B.14 — Sección Contacto: imagen con esquinas redondeadas.
   No se toca `.nova-contact-media img` directo para no alterar el home. */
.nova-contact-media--rounded img {
  border-radius: var(--nova-radius-lg);
}

/* B.15 — Banner con tarjetas solapadas (Nosotros).
   Se nombra .nova-banner-* y no .nova-hero-* para no colisionar con el hero
   del home. ALTURA 400px PENDIENTE DE CONFIRMAR: viene del export. */
.nova-section img.nova-banner-image {
  width: 100%;
  height: 500px; /* Cambia aquí la altura deseada (ej. 200px, 250px, 280px) */
  object-fit: cover;
  object-position: top center;
  border-radius: var(--nova-radius-lg);
  display: block;
  background-color: var(--nova-surface-alt);
}

.nova-banner-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-md);
  margin-top: var(--nova-space-md);
}

@media (min-width: 768px) {
  .nova-banner-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--nova-space-lg);
    margin-top: calc(-1 * var(--nova-space-xl));
    padding: 0 var(--nova-space-lg);
    position: relative;
    z-index: 1;
  }
}

/* Versión Mobile */
@media (max-width: 767px) {
  .nova-section img.nova-banner-image {
    height: 160px;
  }
}

/* B.16 — Statement (título + divisor + declaración).
   Distinto de .nova-quote, que lleva una comilla ilustrada como imagen. */
.nova-statement {
  background-color: var(--nova-surface-alt);
  border-radius: var(--nova-radius-lg);
  padding: var(--nova-space-lg) var(--nova-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-md);
}

@media (min-width: 768px) {
  .nova-statement {
    flex-direction: row;
    align-items: center;
    gap: var(--nova-space-lg);
    padding: var(--nova-space-xl) var(--nova-space-lg);
  }
}

.nova-statement-title {
  flex: 0 0 auto;
  border-bottom: 2px solid var(--nova-border);
  padding-bottom: var(--nova-space-md);
}

@media (min-width: 768px) {
  .nova-statement-title {
    border-bottom: none;
    border-right: 2px solid var(--nova-border);
    padding-bottom: 0;
    padding-right: var(--nova-space-lg);
  }
}

.nova-statement-title h2 {
  margin: 0;
  font-size: var(--nova-text-3xl);
  font-weight: 700;
  color: var(--nova-text-heading);
  line-height: 1.2;
}

.nova-statement-text {
  margin: 0;
  font-size: var(--nova-text-xl);
  line-height: 1.5;
  color: var(--nova-text-body);
}

/* B.17 — Galería. ALTURA 200px PENDIENTE DE CONFIRMAR: viene del export. */
.nova-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-sm);
}

@media (min-width: 600px) {
  .nova-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .nova-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nova-space-md);
  }
}

.nova-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--nova-radius-md);
  display: block;
  background-color: var(--nova-surface-alt);
}

/* B.18 — Hero de página de especialidad: texto 60% / imagen 40%.
   No reutiliza .nova-hero-container (grid 1.2fr/0.8fr del home) para no
   acoplar las páginas interiores al hero del home. */
.nova-page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-lg);
  align-items: center;
}

.nova-page-hero-content,
.nova-page-hero-media {
  width: 100%;
}

@media (min-width: 768px) {
  .nova-page-hero {
    flex-direction: row;
  }
  .nova-page-hero-content {
    width: 60%;
  }
  .nova-page-hero-media {
    width: 40%;
  }
}

.nova-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--nova-radius-lg);
  box-shadow: var(--nova-shadow-soft);
  aspect-ratio: 16 / 9;
  /* evita el marco de "imagen rota" mientras el asset real no esté subido */
  background-color: var(--nova-surface-alt);
}

@media (min-width: 768px) {
  .nova-page-hero-media img {
    aspect-ratio: 1 / 1;
  }
}

/* B.19 — Panel de contenido dentro de las tabs. */
.nova-panel-title {
  display: flex;
  align-items: center;
  gap: var(--nova-space-sm);
  font-size: var(--nova-text-2xl);
  font-weight: 700;
  color: var(--nova-text-heading);
  line-height: 1.3;
  margin: 0 0 var(--nova-space-lg) 0;
}

.nova-panel-title .nova-icon {
  color: var(--nova-primary);
  width: 1.2em;
  height: 1.2em;
}

.nova-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-lg);
}

@media (min-width: 768px) {
  .nova-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.nova-panel-grid p {
  margin: 0;
  color: var(--nova-text-body);
}

/* B.20 — Card con ícono arriba. Reutiliza .icon-standalone, ya existente. */
.nova-card--icon-top .nova-icon {
  color: var(--nova-primary);
}


/* ==========================================================================
   PARTE C — COMPATIBILIDAD CON ELEMENTOR
   ==========================================================================

   C.0 — POR QUÉ EXISTE ESTA PARTE. No borrar sin leer.

   El Kit Global de Elementor genera reglas del tipo

       .elementor-kit-123 h1     { font-size: ...; }
       .elementor-kit-123 button { background: ...; border: ...; }

   con especificidad (0,1,1). Nuestras clases semánticas (.nova-page-title,
   .nova-btn-primary) son (0,1,0) y PIERDEN la cascada.

   Síntoma característico, verificado contra staging: en un <h1> el COLOR sí se
   aplica (Elementor no declara color) pero el TAMAÑO no. Y todo <button>
   pierde el fondo y muestra el borde del tema, mientras un <a> con la misma
   clase se ve bien.

   SOLUCIÓN: repetir la clase (.x.x) sube la especificidad a (0,2,0), que gana
   a (0,1,1) SIN DEPENDER DEL ORDEN DE CARGA. Es más robusto que !important
   solo: si Elementor también usa !important, entre dos !important gana el de
   mayor especificidad, no el que carga después.

   ALTERNATIVA DE FONDO (mejor a largo plazo): dejar la Tipografía Global de
   Elementor sin valores de tamaño para h1-h6, de modo que no genere estas
   reglas. Mientras eso no se haga, esta parte es necesaria.
   ========================================================================== */

/* C.1 — Títulos: recuperar el tamaño. */
.nova-page-title.nova-page-title {
  font-size: var(--nova-text-4xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--nova-text-heading);
}

@media (min-width: 768px) {
  .nova-page-title.nova-page-title {
    font-size: var(--nova-text-5xl);
  }
}

.nova-section-title.nova-section-title {
  font-size: var(--nova-text-3xl);
  font-weight: 700;
  line-height: 1.3;
}

.nova-card-title.nova-card-title {
  font-size: var(--nova-text-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.nova-card-title--sm.nova-card-title--sm {
  font-size: var(--nova-text-xl);
}

.nova-panel-title.nova-panel-title {
  font-size: var(--nova-text-2xl);
  font-weight: 700;
  line-height: 1.3;
}

.nova-hero-title.nova-hero-title {
  font-size: var(--nova-text-5xl);
}

@media (max-width: 992px) {
  .nova-hero-title.nova-hero-title {
    font-size: var(--nova-text-4xl);
  }
}

/* C.2 — Botones: recuperar fondo, color y borde.
   El borde transparente del botón lleno NO es decorativo: iguala su altura a
   la del botón outline, que suma 1px arriba y abajo. Sin esto, dos botones
   lado a lado quedan desalineados. */
.nova-btn-primary.nova-btn-primary {
  background-color: var(--nova-primary) !important;
  color: var(--nova-surface) !important;
  border: 1px solid transparent !important;
  gap: var(--nova-space-xs);
  outline: none;
}

.nova-btn-primary.nova-btn-primary:hover {
  background-color: var(--nova-primary-hover) !important;
}

.nova-btn-primary.nova-btn-primary:focus-visible {
  outline: 2px solid var(--nova-primary);
  outline-offset: 2px;
}

.nova-btn-outline.nova-btn-outline {
  background-color: transparent !important;
  color: var(--nova-primary) !important;
  border: 1px solid var(--nova-border) !important;
  gap: var(--nova-space-xs);
  outline: none;
}

.nova-btn-outline.nova-btn-outline:hover {
  border-color: var(--nova-primary) !important;
}

.nova-btn-outline.nova-btn-outline:focus-visible {
  outline: 2px solid var(--nova-primary);
  outline-offset: 2px;
}

/* C.3 — Botones-ícono (tabs, modal, hamburguesa, off-canvas).
   También son <button> nativos y heredaban el borde del tema. */
.nova-tabs-item.nova-tabs-item {
  background: none;
  border: none !important;
  border-left: 4px solid transparent !important;
}

.nova-tabs-item.nova-tabs-item.is-active {
  background-color: var(--nova-badge-bg);
  border-left: 4px solid var(--nova-primary) !important;
}

.nova-modal-close.nova-modal-close,
.nova-nav-toggle.nova-nav-toggle,
.nova-offcanvas-close.nova-offcanvas-close {
  background: none !important;
  border: none !important;
}

/* C.4 — Badge: el tamaño también lo pisaba el Kit Global. */
.nova-badge.nova-badge {
  font-size: var(--nova-text-xs);
  font-weight: 600;
}


/* ==========================================================================
   MODIFICADOR: Tabs con chips arriba  —  .nova-tabs--chips
   ========================================================================== */

.nova-tabs--chips {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

@media (min-width: 768px) {
  .nova-tabs--chips {
    min-height: 0;
    flex-direction: column;
  }
}

/* ---- Barra de chips (Scroll horizontal en móvil, Grid/Wrap en Desktop) ---- */
.nova-tabs-chipbar {
  display: flex;
  gap: var(--nova-space-xs);
  margin-bottom: var(--nova-space-md);
  /* Accesibilidad visual: no cortar sombras */
  padding: 4px; 
}

@media (min-width: 768px) {
  .nova-tabs-chipbar {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .nova-tabs-chipbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ocultar barra de scroll para un look limpio */
    scrollbar-width: none; 
    padding-bottom: var(--nova-space-xs);
  }
  .nova-tabs-chipbar::-webkit-scrollbar {
    display: none;
  }
}

/* ---- Chip (Botón) ---- */
.nova-tabs--chips .nova-tabs-item.nova-tabs-item {
  flex: 0 0 auto; /* Evita que los chips se encojan en el scroll móvil */
  scroll-snap-align: start;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--nova-space-xs);
  padding: 10px 18px; /* Padding fijo, sin hacks */
  
  /* Uso de box-shadow inset en lugar de border para evitar saltos de layout */
  border: none !important; 
  box-shadow: inset 0 0 0 1px var(--nova-border) !important;
  
  border-radius: var(--nova-radius-pill);
  background-color: transparent !important;
  color: var(--nova-text-body) !important;
  font-size: var(--nova-text-xs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

.nova-tabs--chips .nova-tabs-item.nova-tabs-item:hover {
  box-shadow: inset 0 0 0 1px var(--nova-primary) !important;
  color: var(--nova-primary) !important;
  background-color: transparent !important;
  transform: translateY(-1px);
}

/* Estado Activo: Se engrosa la sombra interior a 2px sin alterar el tamaño de la caja */
.nova-tabs--chips .nova-tabs-item.nova-tabs-item.is-active {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 2px var(--nova-primary) !important;
  color: var(--nova-primary) !important;
  font-weight: 700;
  transform: translateY(0);
}

.nova-tabs--chips .nova-tabs-item.nova-tabs-item:focus-visible {
  outline: 2px solid var(--nova-primary);
  outline-offset: 2px;
}

.nova-tabs--chips .nova-tabs-item .nova-icon {
  width: 1.15em;
  height: 1.15em;
  transition: transform 0.3s ease;
}

.nova-tabs--chips .nova-tabs-item.nova-tabs-item.is-active .nova-icon {
  transform: scale(1.1); /* Pequeño realce visual al ícono activo */
}

@media (max-width: 600px) {
  .nova-tabs--chips .nova-tabs-item.nova-tabs-item {
    padding: 8px 16px;
    font-size: var(--nova-text-2xs);
  }
}

/* ---- Panel de contenido y Animaciones ---- */
.nova-tabs--chips .nova-tabs-content {
  padding: var(--nova-space-lg);
  background: var(--nova-surface);
  border: 1px solid var(--nova-border-light);
  border-radius: var(--nova-radius-lg);
  position: relative;
  overflow: hidden;
}

/* Transición suave al cambiar de panel */
.nova-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.nova-tab-panel.is-active {
  display: block;
  animation: fadePanelIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadePanelIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .nova-tabs--chips .nova-tabs-content {
    padding: var(--nova-space-md);
  }
  .nova-tabs--chips .nova-panel-title {
    align-items: flex-start;
    font-size: var(--nova-text-xl);
  }
  .nova-tabs--chips .nova-panel-title .nova-icon {
    margin-top: 0.15em;
  }
}

/* ---- Grilla interna del panel (Diagramación) ---- */
.nova-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-space-md);
  margin-top: var(--nova-space-md);
}

@media (min-width: 768px) {
  .nova-panel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nova-space-lg);
  }
}

/* Estilización de los subtítulos internos para mayor jerarquía */
.nova-field-label {
  font-weight: 700;
  color: var(--nova-primary);
  font-size: var(--nova-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--nova-space-2xs, 8px);
  display: block;
}


/* ==========================================================================
   COMPONENTES: Especialidades Evaluación (Integrado a Nova)
   ========================================================================== */

.card-eval {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-eval:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.card-eval-header {
  display: flex;
  align-items: center;
  gap: var(--nova-space-sm);
  margin-bottom: var(--nova-space-sm);
  padding-bottom: var(--nova-space-xs);
  border-bottom: 2px dashed var(--nova-border-light);
}

.card-eval-icon {
  width: 36px;
  height: 36px;
  background-color: var(--nova-badge-bg);
  border-radius: var(--nova-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--nova-primary);
}

.card-eval-icon .nova-icon {
  width: 20px;
  height: 20px;
}

/* Lista compacta en formato "chips" con salto de línea:
   evita que tarjetas con muchos ítems (p. ej. Terapia Ocupacional,
   19 elementos) disparen la altura de toda la sección/grid. */
.card-eval-list {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-eval-list li {
  display: inline-flex;
  background-color: var(--nova-surface-alt);
  padding: 6px 12px;
  border-radius: var(--nova-radius-pill, 999px);
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.card-eval-list li:hover {
  background-color: var(--nova-badge-bg);
  transform: translateY(-2px);
}

.list-check.list-check {
  width: 14px;
  height: 14px;
  margin-top: 0; /* Resetea el margen superior del default .nova-icon-list */
  flex-shrink: 0;
  color: var(--nova-primary);
}

.card-eval-link {
  font-size: var(--nova-text-xs, 0.8125rem);
  font-weight: 600;
  color: var(--nova-text-body);
  transition: color 0.2s ease;
  display: inline;
  width: auto;
  line-height: 1.3;
}

.card-eval-list li:hover .card-eval-link {
  color: var(--nova-primary);
}

/* En pantallas grandes, 4 columnas para reducir la altura total
   de la sección (antes 2x2 muy alto por listas largas). */
@media (min-width: 1100px) {
  .nova-grid-2.nova-grid-2--eval {
    grid-template-columns: repeat(4, 1fr);
  }
}



/* =========================================
   NOVA DESIGN SYSTEM: TRATAMIENTOS
   ========================================= */

/* Grid de 3 columnas para tarjetas */
.nova-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .nova-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .nova-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Encabezado de la sección de Tratamientos — antes reusaba el nombre
   .nova-section-header (línea 1712), que ya significa otra cosa: el
   eyebrow+título centrado (B.6). Mismo nombre, dos diseños distintos por
   copy-paste. Se renombra a .nova-tratamientos-header; se conserva
   .nova-section-header acá como alias para no romper HTML existente que
   ya lo use en esta sección — ver docs/auditoria-css-actual.md. */
.nova-tratamientos-header,
.nova-section-header {
  border-bottom: 1px solid #f0edf9;
  padding-bottom: 16px;
  margin-bottom: 32px;
}
.nova-tratamientos-header h2,
.nova-section-header h2 {
  color: #312E81;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  margin-bottom: 8px;
}
.nova-tratamientos-header p,
.nova-section-header p {
  color: #797586;
}

/* Tarjeta estándar de tratamiento */
.nova-card-treatment {
  background-color: #f8f9fe;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid #f0edf9;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s;
}
.nova-card-treatment:hover {
  border-color: rgba(70, 22, 195, 0.3);
}
.nova-card-treatment h3 {
  color: #312E81;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.nova-card-treatment p {
  font-size: 15px;
  line-height: 1.6;
  color: #484555;
}

/* Ícono de la tarjeta estándar */
.nova-treatment-icon {
  width: 48px;
  height: 48px;
  background-color: #E0D7FF;
  color: #4616c3;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.3s;
}
.nova-card-treatment:hover .nova-treatment-icon {
  transform: scale(1.1);
}

/* Tarjeta Destacada (Featured) */
.nova-card-treatment--featured {
  background-color: #5e3bdb;
  color: #d8ceff;
  grid-column: 1 / -1;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 100%;
}
@media (min-width: 1024px) {
  .nova-card-treatment--featured {
    grid-column: span 3;
    width: 66.666%;
    margin: 0 auto;
  }
}
.nova-card-treatment--featured h3 {
  color: #ffffff;
}
.nova-card-treatment--featured p {
  color: #cabeff;
}

/* Contenido e Ícono de la Tarjeta Destacada */
.nova-treatment-featured-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .nova-treatment-featured-content {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 24px;
  }
}
.nova-treatment-featured-icon {
  width: 64px;
  height: 64px;
  background-color: rgba(255,255,255,0.2);
  color: #ffffff;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* =========================================
   NOVA DESIGN SYSTEM: PREGUNTAS FRECUENTES (FAQ)
   ========================================= */

.nova-faq-container {
  background-color: #f1ebf9;
  border-radius: 24px;
  padding: 40px 16px;
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .nova-faq-container {
    padding: 64px 24px;
  }
}

.nova-faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.nova-faq-header h2 {
  color: #312E81;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  margin-bottom: 8px;
}

.nova-faq-header p {
  color: #797586;
}

.nova-faq-item {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #f0edf9;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow: hidden;
}

.nova-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #312E81;
  list-style: none;
  gap: 12px;
}

@media (min-width: 768px) {
  .nova-faq-item summary {
    padding: 20px;
    font-size: 18px;
  }
}

/* Ocultar la flecha por defecto del navegador */
.nova-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Animación y dimensiones del icono SVG integrado */
.nova-faq-item summary .nova-icon {
  color: #797586;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.nova-faq-item[open] summary .nova-icon {
  transform: rotate(180deg);
}

.nova-faq-content {
  padding: 0 20px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #484555;
}


/* =========================================
   NOVA DESIGN SYSTEM: SECCIÓN INFORMACION CLAVE
   ========================================= */

.nova-info-container {
  background: linear-gradient(135deg, #f8f9fe 0%, #f3f0fc 100%);
  border-radius: 24px;
  padding: 32px 20px;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #e2dbf5;
  box-shadow: 0 10px 25px -5px rgba(49, 46, 129, 0.05);
  position: relative;
  overflow: hidden;
}

/* Elemento gráfico decorativo de fondo */
.nova-info-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(49, 46, 129, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .nova-info-container {
    padding: 48px 40px;
  }
}

.nova-info-header {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #e8e3f4;
  padding-bottom: 20px;
}

.nova-info-badge {
  background-color: #312E81;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nova-info-header h2 {
  color: #312E81;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  margin: 0;
}

/* Cuerpo transformado en un sistema de bloques dinámicos */
.nova-info-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .nova-info-body {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tarjeta interna de contenido — antes reusaba .nova-info-card, el mismo
   nombre que la tarjeta de "Ubicación" (con ícono, en fila) más abajo en
   el archivo. Al ser selectores idénticos sin scope, esta (column, con
   h3/p) "filtraba" flex-direction:column hacia la otra por venir primero
   en la cascada. Se renombra a .nova-info-card-titled; se conserva
   .nova-info-card como alias para no romper HTML que ya la use así — ver
   docs/auditoria-css-actual.md. */
.nova-info-card-titled,
.nova-info-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 32px 24px;
  border: 1px solid #ede8f7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nova-info-card-titled:hover,
.nova-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(49, 46, 129, 0.08);
}

/* Variante de tarjeta destacada que ocupa todo el ancho */
.nova-info-card-titled.full-width,
.nova-info-card.full-width {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ffffff 0%, #faf8ff 100%);
  border-left: 4px solid #312E81;
}

.nova-info-card-titled h3,
.nova-info-card h3 {
  font-size: 17px;
  color: #312E81;
  font-weight: 600;
  margin: 0;
}

.nova-info-card-titled p,
.nova-info-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #484555;
  margin: 0;
}


/* Reset para ancho completo (Full Width) en WordPress */
/* GRILLA ESPECIALIDADES HOME */
.especialidades-section-wrapper {
  /* calc(50% - 50vw) en vez de left:50%/margin:-50vw duplicados: evita el
     desajuste de 100vw en mobile (scrollbar/URL bar) que causaba scroll
     horizontal en el Home. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #f8f9fc;
  box-sizing: border-box;
}

/* Contenedor Principal */
.especialidades-section {
  --purple-main: #582be8;       /* Morado principal vibrante */
  --purple-medium: #4321aa;     /* Morado medio balanceado */
  --purple-light-bg: #ece8fe;   /* Fondo lavanda para iconos */
  --text-dark: #1e1b4b;         /* Texto oscuro de títulos */
  --text-body: #52525b;         /* Texto de párrafos */
  
  width: 100%;
  padding: 4rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

.especialidades-section * {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.esp-container {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}

/* Encabezado */
.esp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.esp-header-text h2 {
  color: var(--purple-main);
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
}

.esp-header-text p {
  color: var(--text-body);
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  max-width: 500px;
  line-height: 1.6;
}

/* Enlace Superior */
.esp-link-equipo {
  color: var(--purple-main);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.esp-link-equipo:hover {
  opacity: 0.85;
}

.esp-link-equipo:hover .esp-arrow-icon {
  transform: translateX(4px);
}

.esp-arrow-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

/* Grilla Asimétrica */
.esp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.esp-card {
  grid-column: span 12;
  border-radius: 20px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.esp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(88, 43, 232, 0.15);
}

@media (min-width: 768px) {
  .card-wide { grid-column: span 7; }
  .card-narrow { grid-column: span 5; }
  /* Con 5 tarjetas (número impar) la 5ª no tiene pareja para sumar 12 en
     su fila — en vez de dejar espacio vacío, cierra la grilla como fila
     completa. En mobile no aplica (todas las cards ya son span 12 por
     defecto), así que no afecta la responsividad angosta. */
  .card-full { grid-column: span 12; }
  /* Layout tipo bento: fila 1 = wide + narrow (7+5=12), fila 2 = tres
     tarjetas iguales (4+4+4=12). Las cards con esta clase se agrupan
     naturalmente en su propia fila porque suman 12 exacto. */
  .card-third { grid-column: span 4; }
}

/* Tarjetas Blancas (Psicología y Psicopedagogía) */
.card-white {
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.card-white h3 {
  color: var(--text-dark);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.card-white p {
  color: var(--text-body);
  font-size: 0.925rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Tarjeta Morada Vibrante (Fonoaudiología) */
.card-purple-main {
  background-color: var(--purple-main);
  color: #ffffff;
}

.card-purple-main h3 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.card-purple-main p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.925rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Tarjeta Morada Media (Terapia Ocupacional) */
.card-purple-medium {
  background-color: var(--purple-medium);
  color: #ffffff;
}

.card-purple-medium h3 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.card-purple-medium p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.925rem;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Elementos internos */
.esp-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.esp-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--purple-light-bg);
  color: var(--purple-main);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.esp-icon-circle svg {
  width: 22px;
  height: 22px;
}

/* Variante para usar esp-icon-circle sobre fondos morados (cards
   card-purple-main / card-purple-medium) — círculo blanco semitransparente
   en vez del morado claro pensado para cards blancas. */
.esp-icon-circle--on-purple {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.icon-standalone {
  width: 32px;
  height: 32px;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.esp-icon-circle .icon-standalone {
  width: 22px;
  height: 22px;
  margin-bottom: 0;
}

/* Botones estilo píldora */
.esp-btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  align-self: flex-start;
  margin-top: 1.75rem;
  transition: all 0.2s ease;
}

.btn-outline-purple {
  border: 1.5px solid var(--purple-main);
  color: var(--purple-main);
  background: transparent;
}

.btn-outline-purple:hover {
  background-color: var(--purple-main);
  color: #ffffff;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Sección de Convenios y Reembolsos Isapres — Estilos CSS Globales
   ========================================================================== */

.isapres-section-container {
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--surface, #ffffff);
}

.isapres-section {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.isapres-section h2 {
  color: #5e3bdb;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.isapres-section p {
  color: #484555;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 40px auto;
}

/* Contenedor o ventana del carrusel */
.isapres-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

/* Pista de desplazamiento horizontal continua */
.isapre-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 24px;
  margin: 0 !important;
  padding: 10px 0;
  animation: scrollIsapreCards 30s linear infinite;
}

/* Pausa la animación al pasar el cursor o interactuar */
.isapres-carousel-viewport:hover .isapre-grid,
.isapres-carousel-viewport:active .isapre-grid,
.isapre-grid:hover,
.isapre-grid:active {
  animation-play-state: paused;
}

/* Tarjetas individuales de Isapres */
.isapre-card {
  flex: 0 0 210px !important;
  width: 210px !important;
  min-width: 210px !important;
  height: 110px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e0d7ff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.isapre-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.isapre-card img {
  max-width: 100%;
  height: auto;
  max-height: 55px;
  object-fit: contain;
}

/* Animación de desplazamiento infinito */
@keyframes scrollIsapreCards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 3 - 8px));
  }
}

  /* ==========================================================================
   Sección Ubicación y Mapa - Novamente (Design System Nova)
   ========================================================================== */

.nova-ubicacion-section {
  --nova-font: var(--e-global-typography-primary-font-family, 'Poppins', sans-serif);
  --nova-primary: #7c5dfa;
  --nova-primary-light: rgba(124, 93, 250, 0.1);
  --nova-bg: #eceef3;
  --nova-card-bg: #ffffff;
  --nova-text-title: #191c1f;
  --nova-text-body: #484555;
  --nova-border: rgba(224, 215, 255, 0.4);
  --nova-shadow: 0 10px 30px rgba(124, 93, 250, 0.08);

  padding: 80px 20px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--nova-font);
}

.nova-ubicacion-section * {
  box-sizing: border-box;
  font-family: var(--nova-font);
}

.nova-ubicacion-container {
  max-width: 1200px;
  margin: 0 auto;
}

.nova-ubicacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .nova-ubicacion-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Información de Contacto */
.nova-ubicacion-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nova-ubicacion-title {
  color: var(--nova-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.nova-ubicacion-description {
  font-size: 16px;
  color: var(--nova-text-body);
  line-height: 1.6;
  margin: 0;
}

.nova-ubicacion-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

/* Tarjetas de información con hover */
.nova-info-card {
  background-color: var(--nova-card-bg);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--nova-border);
  box-shadow: var(--nova-shadow);
  display: flex;
  flex-direction: row; /* Explícito: sin esto heredaba `column` de la otra
    definición de .nova-info-card (línea ~2849) por venir antes en la
    cascada — descuadraba el icono y el texto. Ver docs/auditoria-css-actual.md */
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.nova-info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(124, 93, 250, 0.16);
  border-color: rgba(124, 93, 250, 0.5);
}

/* Contenedor del Icono e interacción hover */
.nova-icon-box {
  background-color: var(--nova-primary-light);
  color: var(--nova-primary);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.nova-info-card:hover .nova-icon-box {
  background-color: var(--nova-primary);
  color: #ffffff;
  transform: scale(1.08) rotate(-4deg);
}

.nova-icon-svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.nova-info-text {
  display: flex;
  flex-direction: column;
}

.nova-info-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--nova-text-title);
  margin: 0;
  line-height: 1.4;
}

.nova-info-subtext {
  font-size: 15px;
  color: var(--nova-text-body);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

/* Botón con animación hover y click */
.nova-btn-llegar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border: 2px solid rgba(124, 93, 250, 0.3);
  color: var(--nova-primary);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-top: 8px;
}

.nova-btn-llegar:hover {
  background-color: var(--nova-primary);
  color: #ffffff;
  border-color: var(--nova-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(124, 93, 250, 0.25);
}

.nova-btn-llegar:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(124, 93, 250, 0.2);
}

/* Contenedor del Mapa */
.nova-map-wrapper {
  height: 460px;
  width: 100%;
  background-color: var(--nova-card-bg);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--nova-border);
  box-shadow: var(--nova-shadow);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nova-map-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(124, 93, 250, 0.14);
}

.nova-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.nova-form-container {
  max-width: 850px;
  margin: 0 auto;
}


/* ==========================================================================
   Sección Solicitar Convenio - Corrección Definitiva de Layout
   ========================================================================== */

.nova-form-section {
  padding: 60px 20px;
  background-color: var(--surface-alt, #f8f9fe);
  box-sizing: border-box;
}

.nova-form-container {
  max-width: 850px;
  margin: 0 auto;
}

/* Tarjeta Principal */
.nova-form-card {
  background-color: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 35px rgba(94, 59, 219, 0.08);
  overflow: hidden;
}

/* Encabezado con Flexbox Seguro */
.nova-form-header {
  background: linear-gradient(135deg, #5e3bdb 0%, #4a2db6 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nova-form-header-icon {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nova-form-header-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nova-form-header-text {
  flex-grow: 1;
}

.nova-form-title {
  color: #ffffff !important;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 6px 0 !important;
  line-height: 1.2;
}

.nova-form-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem;
  margin: 0 !important;
  line-height: 1.4;
}

/* Cuerpo del Formulario */
.nova-form-body {
  padding: 36px;
}

.nova-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .nova-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.nova-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nova-form-group.full-width {
  grid-column: 1 / -1;
}

.nova-form-group label {
  font-weight: 600;
  font-size: 0.88rem;
  color: #312e81;
}

.nova-form-group label .required {
  color: #e53e3e;
}

/* Homogeneización de Inputs, Select y Textarea */
.nova-form-group input,
.nova-form-group select,
.nova-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dcd8e8;
  border-radius: 12px !important; /* Fuerza bordes redondeados uniformes */
  font-family: inherit;
  font-size: 0.95rem;
  color: #484555;
  background-color: #fcfcfd;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.nova-form-group input:focus,
.nova-form-group select:focus,
.nova-form-group textarea:focus {
  outline: none;
  border-color: #5e3bdb;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(94, 59, 219, 0.12);
}

.nova-form-group textarea {
  resize: vertical;
  min-height: 110px;
}

/* Select con Flecha SVG Indestructible */
.select-wrapper {
  position: relative;
  width: 100%;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%235e3bdb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Captcha y Botón Footer */
.nova-form-footer {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 640px) {
  .nova-form-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.captcha-placeholder {
  background-color: #f7fafc;
  border: 1px solid #e2e8f0;
  padding: 12px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: fit-content;
}

.captcha-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #4a5568;
  user-select: none;
}

.captcha-checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: #5e3bdb;
  cursor: pointer;
}

.captcha-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a0aec0;
  font-size: 0.75rem;
  font-weight: 600;
}

.captcha-brand svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Botón Primary Unificado */
.nova-btn-submit {
  background-color: #5e3bdb !important; /* Garantiza el color morado corporativo */
  color: #ffffff !important;
  border: none;
  padding: 14px 32px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(94, 59, 219, 0.25);
}

.nova-btn-submit:hover {
  background-color: #4a2db6 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(94, 59, 219, 0.35);
}

.nova-btn-submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.nova-btn-submit:hover svg {
  transform: translateX(3px);
}

/* Corrección global para botones de envío de formularios */
form button[type="submit"],
.elementor-button[type="submit"] {
    background-color: var(--nova-primary, #5e3bdb) !important; /* Asegura tu morado principal */
    border: none !important; /* Elimina el borde oscuro/rojizo intruso */
    outline: none !important; /* Evita contornos por defecto al hacer clic */
    color: #ffffff !important;
    box-shadow: none !important; /* Limpia cualquier sombra heredada */
}

/* Estado Hover para mantener la consistencia */
form button[type="submit"]:hover,
.elementor-button[type="submit"]:hover {
    background-color: var(--nova-primary-hover, #4a2bb3) !important; /* Ajusta a tu variable de hover si existe */
    border: none !important;
}



/* ==========================================================================
   COMPONENTE: Tarjeta ADOS-2 (.nova-ados-card) - Versión Responsiva Optimizada
   ========================================================================== */

.nova-ados-card {
  background-color: var(--nova-surface, #ffffff);
  border-radius: var(--nova-radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--nova-border-light, rgba(124, 93, 250, 0.15));
  box-shadow: 0 10px 30px rgba(124, 93, 250, 0.10);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px; /* Evita que crezca de manera descontrolada en pantallas grandes */
  margin: 0 auto;    /* Centra la tarjeta automáticamente */
  transition: box-shadow 0.3s ease;
}

.nova-ados-card:hover {
  box-shadow: 0 15px 40px rgba(124, 93, 250, 0.15);
}

/* ---- Contenedor de la Imagen (Compacto en móvil, dinámico en desktop) ---- */
.nova-ados-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px; /* Reducido para móvil para que no se vea gigante */
  overflow: hidden;
  flex-shrink: 0;
}

.nova-ados-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Contenido de Texto ---- */
.nova-ados-content {
  padding: 24px 20px; /* Padding más compacto en móvil */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.nova-ados-title {
  color: var(--nova-primary, #7c5dfa);
  font-size: 22px; /* Tamaño controlado para móvil */
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
}

.nova-ados-description {
  color: var(--nova-text-body, #484555);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ---- Botón de Acción (CTA) ---- */
.nova-ados-actions {
  width: 100%;
}

.nova-btn-primary {
  background-color: var(--nova-primary, #7c5dfa);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  border-radius: var(--nova-radius-md, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  width: 100%;
}

.nova-btn-primary:hover {
  background-color: var(--nova-primary-hover, #6445dc);
  box-shadow: 0 8px 20px rgba(124, 93, 250, 0.25);
  color: #ffffff;
}

.nova-btn-primary:active {
  transform: scale(0.97);
}

.nova-btn-primary .nova-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---- Responsividad: Tablets y Desktop ---- */
@media (min-width: 640px) {
  .nova-btn-primary {
    width: fit-content;
  }
}

@media (min-width: 768px) {
  .nova-ados-card {
    flex-direction: row;
    align-items: stretch;
  }

  .nova-ados-image-wrapper {
    width: 45%;
    height: auto; /* La imagen toma el alto natural del contenido en desktop */
    min-height: 100%;
  }

  .nova-ados-content {
    width: 55%;
    padding: 48px 56px;
  }

  .nova-ados-title {
    font-size: 28px;
    margin-bottom: 16px;
  }
  
  .nova-ados-description {
    font-size: 16px;
    margin-bottom: 24px;
  }
}


/* ==========================================================================
   FIX HEADER — .nova-header-cta también lleva la clase .nova-btn-primary,
   que trae `display: inline-flex` propio. Sin este !important, esa regla
   base le gana en la cascada al `display: none` de abajo y el CTA no se
   oculta en móvil (desborde horizontal, empuja la hamburguesa fuera de
   pantalla). El resto de las reglas responsivas del header (breakpoint,
   box-sizing) ya vive una sola vez en el bloque de abajo — ver
   docs/auditoria-css-actual.md.
   ========================================================================== */
@media (min-width: 992px) {
  .nova-header-cta.nova-header-cta {
    display: inline-flex !important;
  }
}

@media (max-width: 991px) {
  .nova-header-cta.nova-header-cta {
    display: none !important;
  }
}

/* ==========================================================================
   COMPONENTE: Header / Navegación (Optimizado y 100% Responsivo)
   ========================================================================== */

.nova-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--nova-surface);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.nova-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

@media (max-width: 992px) {
  .nova-header-inner {
    padding: 12px 16px; /* Padding más compacto en móviles */
    gap: 16px;          /* Gap adaptativo para evitar desbordamientos */
  }
}

.nova-header-logo {
  display: block;
  flex-shrink: 1; /* Permite que el contenedor del logo se adapte si es necesario */
  min-width: 0;   /* Previene el desbordamiento en contenedores flexibles */
}

.nova-header-logo img {
  display: block;
  height: 44px !important;
  width: auto !important;
  max-width: 100%; /* Evita que la imagen rompa el ancho de pantallas chicas */
  object-fit: contain;
}

@media (max-width: 992px) {
  .nova-header-logo img {
    height: 32px !important; /* Altura optimizada para móviles */
  }
}

/* ---------- Navegación de escritorio ---------- */
.nova-nav {
  display: none;
  align-items: center;
  gap: 32px;
}

@media (min-width: 992px) {
  .nova-nav {
    display: flex;
  }
}

.nova-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nova-text-body);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nova-nav-link:hover {
  color: var(--nova-primary);
}

.nova-nav-link .nova-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* Submenú de escritorio */
.nova-nav-item {
  position: relative;
}

.nova-nav-item:hover .nova-nav-link .nova-icon,
.nova-nav-item:focus-within .nova-nav-link .nova-icon {
  transform: rotate(180deg);
}

.nova-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--nova-surface);
  border: 1px solid var(--nova-border-light);
  border-radius: var(--nova-radius-md);
  box-shadow: var(--nova-shadow-md);
  padding: 8px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s ease;
}

.nova-nav-item:hover .nova-nav-submenu,
.nova-nav-item:focus-within .nova-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nova-nav-submenu-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--nova-radius-md);
  color: var(--nova-text-body);
  font-size: 0.9rem;
  font-weight: 600;
}

.nova-nav-submenu-link:hover {
  background-color: var(--nova-surface-alt);
  color: var(--nova-primary);
}

/* CTA del header (Escritorio) */
.nova-header-cta {
  display: none;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .nova-header-cta {
    display: inline-flex;
  }
}

/* ---------- Botón hamburguesa (solo móvil) ---------- */
.nova-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--nova-primary);
  border: none;
  outline: none;
  background: transparent;
  flex-shrink: 0; /* Asegura que el botón nunca se deforme */
}

.nova-nav-toggle:focus-visible {
  outline: 2px solid var(--nova-primary);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .nova-nav-toggle {
    display: none;
  }
}

.nova-nav-toggle .nova-icon {
  width: 26px;
  height: 26px;
}

/* ---------- Off-canvas (panel + overlay) ---------- */
.nova-offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(49, 46, 129, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 60;
}

.nova-offcanvas-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.nova-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--nova-surface);
  z-index: 61;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  box-shadow: var(--nova-shadow-md);
  -webkit-overflow-scrolling: touch; /* Scroll fluido en iOS */
}

.nova-offcanvas.is-active {
  transform: translateX(0);
}

.nova-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.nova-offcanvas-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nova-primary);
  border: none;
  outline: none;
  background: none;
}

.nova-offcanvas-close:focus-visible {
  outline: 2px solid var(--nova-primary);
  outline-offset: 2px;
}

.nova-offcanvas-close .nova-icon {
  width: 24px;
  height: 24px;
}

.nova-offcanvas-nav {
  display: flex;
  flex-direction: column;
}

.nova-offcanvas-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--nova-border-light);
  color: var(--nova-text-body);
  font-weight: 600;
}

.nova-offcanvas-link .nova-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.nova-offcanvas-item.is-expanded .nova-offcanvas-link .nova-icon {
  transform: rotate(180deg);
}

.nova-offcanvas-submenu {
  display: none;
  flex-direction: column;
  padding: 4px 4px 10px 16px;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-offcanvas-item.is-expanded .nova-offcanvas-submenu {
  display: flex;
}

.nova-offcanvas-submenu a {
  padding: 8px 0;
  color: var(--nova-text-body);
  font-size: 0.9rem;
}

.nova-offcanvas-submenu a:hover {
  color: var(--nova-primary);
}

.nova-offcanvas-cta {
  margin-top: 24px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   NOVA SIDEBAR DESIGN SYSTEM
   ========================================================== */

/* Contenedor principal de la barra lateral */
.nova-sidebar {
  width: 100%;
  box-sizing: border-box;
}

/* Posicionamiento sticky para mantener la barra fija al hacer scroll */
.nova-sidebar-sticky {
  position: sticky;
  top: 20px;
}

/* Tarjeta contenedora principal del sidebar */
.nova-card {
  background-color: #f4f5ff;
  border: 1px solid #e0d7ff;
  border-radius: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Título principal superior ("Test y evaluaciones") */
.nova-sidebar-nav-title {
  background-color: #5e3bdb;
  color: #FFFFFF !important;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: center;
  margin: 0;
  box-shadow: 0 4px 12px rgba(94, 59, 219, 0.2);
}

/* Títulos de cada grupo/especialidad (Fonoaudiología, Psicología, etc.) */
.nova-sidebar-nav-group-title {
  color: #5e3bdb;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px 0;
}

/* Listas de elementos */
.nova-sidebar-nav-list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nova-sidebar-nav-list li {
  color: #484555;
  font-size: 0.9rem;
  line-height: 1.4;
}

.nova-sidebar-nav-list li::marker {
  color: #5e3bdb;
}

/* Enlaces de navegación */
.nova-sidebar-link {
  color: #484555;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nova-sidebar-link:hover {
  color: #5e3bdb;
  text-decoration: underline;
}

/* Enlace activo (página actual) */
.nova-sidebar-link.active {
  color: #5e3bdb;
  font-weight: 600;
}

/* ==========================================================================
   PARTE D — AJUSTES MOBILE DE WIDGETS DE TERCEROS (no editables por archivo)
   ==========================================================================
   El plugin WP WhatsApp (wp-whatsapp) solo trae un toggle GLOBAL para
   mostrar/ocultar la etiqueta del botón flotante (isShowBtnLabel), sin
   distinguir desktop/mobile. En mobile la etiqueta desplegada ("¿Necesitas
   ayuda? Chatea con nosotros") ocupa demasiado espacio y no aporta — el
   ícono ya comunica su función. Se oculta solo en mobile vía CSS,
   manteniéndola visible en desktop.
   ========================================================================== */
@media (max-width: 768px) {
  .wa__btn_popup_txt {
    display: none !important;
  }
}