/*--------------------------------------------------------------
  Template Name: Psychocare || Multi Concept Psychological HTML Template.
  Template URI: #
  Description: Psychocare is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: HasTech
  Author URI: https://themeforest.net/user/hastech/portfolio
  Version: 1.0
---------------------------------------------------------------*/

/* ----------------------------------------------------
	You can put your custom css code here:
-------------------------------------------------------*/

/* Balance Integral: color de marca (reemplaza el índigo #303f9f de la plantilla) */
.htc__btn,
.bg__theme,
#scrollUp {
  background: #1a249e !important;
}
.text--theme,
.text--blue,
.main__menu li a:hover {
  color: #1a249e;
}
::selection {
  background: #1a249e;
  color: #fff;
}

/* El botón "volver arriba" (scrollUp, de main.js) se reposiciona a la izquierda
   para no chocar con el botón flotante de WhatsApp, que ocupa el bottom-right */
#scrollUp {
  right: auto !important;
  left: 20px;
}

/* El hero usa una foto real con degradado oscuro inline (ver index.html);
   el atributo data--black__overlay de la plantilla no tiene CSS asociado, así que
   el texto se fuerza a blanco en vez del índigo por defecto de .slider__inner h1 */
.slider--3 .slider__inner h1,
.slider--3 .slider__inner p {
  color: #fff;
}

/* Logo real en el header (la plantilla no define un tamaño máximo para .logo img);
   el contenedor .logo mide 120px de alto, así que hay margen para agrandarlo */
.logo img {
  max-height: 96px;
  width: auto;
}

/* Barra superior (dirección + WhatsApp) más delgada: la plantilla trae 64px de alto,
   se reduce a 40px con texto un poco más pequeño para que no compita con el header */
.htc__header__top {
  height: 40px;
}
.ht__header__top__left p,
.ht__header__top__right p {
  font-size: 13px;
}

/* Tarjetas de icono (.service--3): la plantilla solo trae layouts de 2 en 2;
   aquí se vuelve un grid flexible que también acomoda filas de 3 */
.service--3 .ht__service__content {
  flex-wrap: wrap;
  gap: 40px;
}
.service--3 .ht__service__content .service {
  flex: 1 1 240px;
  text-align: center;
}
/* La plantilla trae padding-right:24% en la descripción (pensado para el layout
   original con texto a la izquierda). Con las tarjetas centradas, ese padding
   asimétrico descentra el párrafo respecto al título; se anula aquí. */
.service--3 .service__details p {
  padding-right: 0;
}
.service__icon i {
  color: #1a249e;
  display: inline-block;
  font-size: 48px;
  margin-bottom: 10px;
}

/* Panel simple para bloques de contenido sin el componente de formulario original
   (Charlas para Empresas: temas + CTA, y horarios de visita) */
.bi__panel {
  background: #fafafa;
  border-radius: 6px;
  padding: 50px 40px;
}
.bi__check__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bi__check__list li {
  padding: 6px 0;
}
.bi__check__list li i {
  color: #1a249e;
  margin-right: 10px;
}

/* Ubicaciones: ambas sucursales se muestran siempre lado a lado (sin pestañas).
   .bi__location es la tarjeta que agrupa nombre + dirección + mapa de cada una.
   Sin iconos ni WhatsApp aquí (ya está el botón flotante para eso). */
.bi__location {
  background: #fafafa;
  border-radius: 6px;
  height: 100%;
  padding: 40px;
}
.bi__location__title {
  font-size: 24px;
  margin-bottom: 16px;
  text-align: center;
}
.bi__location__address {
  color: #606060;
  margin-bottom: 20px;
  text-align: center;
}
.bi__location__address a {
  color: inherit;
}

/* El header (topbar + menú) es fixed/sticky con ~160px de alto (40px topbar + 120px
   menú). El scroll de anclas de main.js salta a $(hash).offset().top sin restar esa
   altura, así que el título de la sección queda tapado. Se usa un span invisible justo
   antes de cada sección, desplazado hacia arriba con position:relative, como objetivo
   real del ancla. */
.bi__anchor {
  display: block;
  position: relative;
  top: -160px;
  visibility: hidden;
}