/* =============================================================================
   armonia-tema.css — 2026-07-31
   Armoniza las páginas que CONSERVAN el tema antiguo con el diseño del index.

   Es solo presentación: no cambia ni una palabra del HTML, así que no hay
   riesgo de SEO. Debe cargarse DESPUÉS del tema y de psico.css.
   ============================================================================= */

/* 1) TIPOGRAFÍA — la lleva ahora psico.css, que cargan TODAS las páginas migradas
   (aquí solo llegaba a las que conservan restos del tema, y el H1 de la página de 140
   leads seguía en Muli). Además esta regla usaba `span:not([class*="icon"])`, que SÍ
   coincide con `<span class="fa fa-star">` —no contiene "icon"— y con `!important`
   ganaba a Font Awesome: 17 landings se quedaron sin icono. Retirada 2026-08-01. */
/* Solo tipografía: NO se fuerza el color. Muchos héroes llevan foto oscura con
   texto blanco y forzar var(--ink) los dejaba ilegibles (verificado 2026-07-31). */
h1, h2, h3 { letter-spacing: -.02em !important; font-weight: 800 !important; }
h1 { font-size: clamp(2rem, 3.2vw, 3rem) !important; line-height: 1.12 !important; }
h2 { font-size: clamp(1.6rem, 2.3vw, 2.15rem) !important; line-height: 1.18 !important; }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem) !important; font-weight: 700 !important; }

/* 2) CTAs — el tema los pinta de azul fijo; jerarquía de marca:
      principal naranja · secundaria fantasma con borde */
.button a.active, .slider_button a.active, .button.color_two a,
a.dtbtn, .techno_nav_manu a.dtbtn, .ajustes-softwares-btn a.active {
  background: var(--brand) !important; border-color: var(--brand) !important;
  color: #fff !important; border-radius: 10px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.button a.active:hover, .slider_button a.active:hover, .button.color_two a:hover,
.ajustes-softwares-btn a.active:hover {
  background: var(--brand-d) !important; border-color: var(--brand-d) !important; color: #fff !important;
}
/* :not(:empty) — el tema deja enlaces vacíos que, al recibir fondo blanco y
   borde, se veían como recuadros sueltos junto al CTA (2026-07-31). */
.button a:not(.active):not(:empty), .slider_button a:not(.active):not(:empty),
.ajustes-softwares-btn a:not(.active):not(:empty) {
  background: #fff !important; border: 1px solid var(--line) !important;
  color: var(--ink) !important; border-radius: 10px !important; font-weight: 600 !important;
  text-transform: none !important;
}
.button a:not(.active):not(:empty):hover, .ajustes-softwares-btn a:not(.active):not(:empty):hover {
  border-color: var(--ink) !important; background: #fff !important; color: var(--ink) !important;
}
.button a:before, .slider_button a:before { background: transparent !important; }

/* 3b) El bloque de logos del tema (.brand_area) duplica la franja compartida
      `_inc/clientes.php`: el usuario vio DOS filas de logos (2026-07-31). Se oculta
      por CSS y no por cirugía de markup porque en una página los <div> están
      desbalanceados y el recorte se llevó 117 KB de contenido.
      Solo aplica donde se carga esta hoja, es decir, en páginas ya migradas —y todas
      ellas incluyen la franja nueva, así que nunca deja a una página sin logos. */
.brand_area { display: none !important; }
/* 3c) Igual con el pie del tema: donde ya está el pie compartido, el viejo quedaba
      con texto blanco sobre fondo blanco = invisible pero ocupando espacio. */
.footer-middle, .footer-middle-content { display: none !important; }

/* 3) La barra de teléfonos del tema duplica el topbar del partial */
.header_top_menu, #header_top_menu { display: none !important; }

/* 4) Tarjetas y secciones al mismo lenguaje visual que el index */
.card-e, .single_service_inner, .single_team_inner, .card.wow {
  border: 1px solid var(--line) !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
.section_e, .services_area, .team_area { background: #fff !important; }

/* 5) Iconos SVG del sistema nuevo dentro del tema */
.ps-ico { display: inline-block; vertical-align: -.125em; width: 1em; height: 1em; flex: 0 0 auto; }

/* 6) NO se toca el color de los encabezados en ningún caso.
   Los héroes del tema llevan `color: white` EN LÍNEA; cualquier regla con
   !important aquí (incluida `color: inherit`) los dejaba ilegibles sobre foto
   oscura. Verificado 2026-07-31 contra el original. */

/* 7) El tema deja enlaces `tel:` SIN TEXTO dentro de los contenedores de botón.
   `:empty` no los detecta (llevan espacios en blanco), así que la regla del botón
   fantasma les daba fondo y borde y aparecían como recuadros sueltos junto al CTA.
   No se ocultan —siguen siendo un enlace válido—, solo se les quita la caja. */
/* :not(.active):not(:empty) iguala la especificidad de la regla del botón
   fantasma (0,3,1); al ir después en el archivo, esta gana. */
.button a[href^="tel:"]:not(.active):not(:empty),
.slider_button a[href^="tel:"]:not(.active):not(:empty),
.ajustes-softwares-btn a[href^="tel:"]:not(.active):not(:empty) {
  background: none !important; border: 0 !important;
  padding: 0 !important; box-shadow: none !important;
}


/* ── Menú móvil del TEMA VIEJO ────────────────────────────────────────────────
   `mobile-menu-area` (plugin meanmenu) es la barra de navegación anterior a la
   migración. En 10 de las 63 páginas seguía visible en móvil DEBAJO de la barra
   compartida: dos barras apiladas con el logo repetido, y en el catálogo llegaba
   a 380 px desplegada.
   La auditoría no lo veía porque cuenta `.ps-nav` —y solo hay una— y porque su
   logo no es un `<img>`. Salió al mirar una captura de móvil a tamaño real.
   Se oculta, no se borra: comprobado antes que sus 16-18 enlaces existen todos en
   la barra nueva o en el pie; el único que no, es el de la página a sí misma. */
.mobile-menu-area, .mean-container, .mean-bar { display: none !important; }