/* FotheSalud - Ajustes específicos sobre el Theme (no modifica style.css del theme) */

/* Página Mensaje Enviado */
.fh-thankyou {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}
.fh-thankyou .container {
  position: relative;
  z-index: 1;
}
/* Página Error: la foto es clara y el texto se perdía; se agrega un degradado
   de opacidad de izquierda (más claro/opaco, donde va el texto) a derecha
   (transparente, para que se siga viendo la foto) */
.fh-thankyou-error::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0.35) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
}
.fh-thankyou-content {
  max-width: 640px;
  padding: 60px 0;
}
.fh-thankyou-check-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.fh-thankyou-line {
  flex: 1;
  max-width: 130px;
  height: 2px;
  background-color: var(--title-color);
}
.fh-thankyou-check {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fh-thankyou-title {
  font-size: 56px;
  font-weight: 800;
  color: var(--title-color);
  line-height: 1.15;
  margin-bottom: 20px;
}
.fh-thankyou-subtitle {
  position: relative;
  font-size: 26px;
  font-weight: 700;
  color: var(--title-color);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
.fh-thankyou-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: var(--theme-color);
}
.fh-thankyou-text {
  font-size: 17px;
  color: var(--text-color);
  margin-bottom: 0;
}
/* En pantallas medianas/pequeñas la imagen (ancha, con el camión a la derecha)
   se recorta distinto y el texto puede quedar sobre una zona menos clara del
   fondo; se agrega un velo claro para que el texto siga siendo legible. */
@media (max-width: 991px) {
  .fh-thankyou::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.82);
    z-index: 0;
  }
  .fh-thankyou-content {
    max-width: 100%;
  }
  .fh-thankyou-title {
    font-size: 42px;
  }
  .fh-thankyou-subtitle {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .fh-thankyou {
    min-height: auto;
    padding: 70px 0;
  }
  .fh-thankyou-line {
    max-width: 40px;
  }
  .fh-thankyou-title {
    font-size: 32px;
  }
  .fh-thankyou-subtitle {
    font-size: 18px;
  }
  .fh-thankyou-text {
    font-size: 15px;
  }
}

/* Header y Header2: ícono de WhatsApp del botón "Asesor Disponible" más grande,
   con el texto centrado verticalmente respecto al ícono */
.header-buttons .vs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-buttons .vs-btn i.fa-whatsapp {
  font-size: 26px;
  line-height: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* Página Contáctenos: iconos de Teléfono/Email/Dirección/Horarios con círculo
   rojo (como el resto del sitio) y un poco más grandes que el tamaño del theme */
.media-style1 .media-icon {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  line-height: 80px !important;
  background-color: var(--theme-color);
  border: none;
}
.media-style1 .media-icon i {
  font-size: 32px !important;
  color: var(--white-color);
}
.media-style1 .media-contact {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Página Contáctenos: casilla visual estilo reCAPTCHA ("No soy un robot").
   Nota: es solo visual, no valida nada en el servidor; para una validación real
   se necesita integrar Google reCAPTCHA con una site key propia del proyecto. */
.fh-fake-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 12px 18px;
  background-color: var(--white-color);
}
.fh-fake-captcha input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--theme-color);
  margin: 0;
}
.fh-fake-captcha label {
  margin: 0;
  color: var(--title-color);
  cursor: pointer;
}
.fh-fake-captcha-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-color);
}
.fh-fake-captcha-badge i {
  color: var(--theme-color);
}

/* Detalle de Blog: fecha con ícono encima de la imagen, como en el diseño */
.fh-blog-single-date {
  color: var(--theme-color);
  font-weight: 600;
  margin-bottom: 20px;
}
.fh-blog-single-date i {
  margin-right: 8px;
}

/* Página Blog: el botón "Ver más" de cada tarjeta lleva el círculo en azul marino,
   como en el diseño (el theme lo trae en rojo por defecto) */
.fh-blog-list .icon-btn {
  border-color: var(--title-color);
}
.fh-blog-list .icon-btn i {
  background-color: var(--title-color);
}
.fh-blog-list .vs-btn1:hover .icon-btn i {
  background-color: var(--theme-color);
}

/* Sidebar de Servicios: el link solo cubría el texto, no toda la fila del <li>
   (que trae el padding). Se expande el <a> al área completa del <li>. */
.fh-service-nav li a {
  display: block;
  margin: -16px -25px;
  padding: 16px 25px;
}

/* Página Servicios: rayita roja bajo el título del servicio, botones extra
   (oscuro / blanco) y separación de los botones */
.fh-servicio-title {
  position: relative;
  padding-bottom: 16px;
}
.fh-servicio-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: var(--theme-color);
}
.fh-servicio-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}
.fh-btn-dark {
  background-color: var(--title-color);
}
.fh-btn-dark::after,
.fh-btn-dark::before {
  background-color: var(--theme-color);
}
.fh-btn-white {
  background-color: var(--white-color);
  color: var(--theme-color);
  margin-top: 10px;
}
.fh-btn-white::after,
.fh-btn-white::before {
  background-color: var(--title-color);
}
.fh-btn-white:hover {
  color: var(--white-color);
}
.emergency-call .emergency-icon {
  color: var(--white-color);
  font-size: 48px;
  line-height: 1;
}
.emergency-call .emergency-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 25px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
}
.fh-emergency-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--theme-color);
  font-size: 16px;
  flex-shrink: 0;
}

/* Páginas internas: header estático (no flotante) sobre el breadcumb, como en el diseño */
.fh-header-static {
  position: relative !important;
  top: 0 !important;
}
.fh-header-static .header-top {
  border-radius: 0;
  position: relative;
  z-index: 1;
}
.fh-header-static .header-top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--title-color);
  z-index: -1;
}
.fh-header-static .sticky-wrapper {
  border-radius: 0;
}

/* Breadcumb (migas de pan): degradado oscuro-a-transparente de izquierda a derecha,
   como en el diseño aprobado, en vez de un velo plano. Los textos llevan sombra
   para que se lean sobre cualquier parte de la foto. Alto fijo de 250px y título
   más pequeño (el theme trae 64px por defecto, se ve muy grande). */
.breadcumb-wrapper {
  position: relative;
  padding: 0 !important;
  height: 250px;
  display: flex;
  align-items: center;
}
.breadcumb-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 34, 62, 0.92) 0%,
    rgba(4, 34, 62, 0.75) 30%,
    rgba(4, 34, 62, 0.15) 65%,
    rgba(4, 34, 62, 0) 100%
  );
  z-index: -1;
}
.breadcumb-wrapper .container {
  position: relative;
  z-index: 1;
  padding-left: 60px;
}
.breadcumb-title,
.breadcumb-menu span {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.breadcumb-title {
  font-size: 38px;
}
@media (max-width: 991px) {
  .breadcumb-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .breadcumb-wrapper {
    height: 200px;
  }
  .breadcumb-title {
    font-size: 26px;
  }
}

/* Página Quiénes Somos: imagen con acento decorativo rojo, como en el diseño */
.fh-quienes-img {
  position: relative;
}
.fh-quienes-img::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 90px;
  height: 90px;
  background-color: var(--theme-color);
  z-index: -1;
  border-radius: 6px;
}
.fh-quienes-img img {
  width: 100%;
  border-radius: 10px;
  position: relative;
}

/* Página Quiénes Somos: acordeón Misión / Visión */
.fh-mv-accordion {
  margin-top: 10px;
}
.fh-mv-item {
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}
.fh-mv-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  text-align: left;
  padding: 20px 25px;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--title-font);
  color: var(--title-color);
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  cursor: pointer;
}
.fh-mv-header.active {
  background-color: var(--theme-color);
  color: var(--white-color);
  border-color: var(--theme-color);
}
.fh-mv-icon {
  font-size: 22px;
  line-height: 1;
}
.fh-mv-body {
  padding: 20px 25px;
  border: 1px solid var(--border-color);
  border-top: none;
  color: var(--text-color);
  text-align: justify;
}

.fh-valores-section .vs-arrows {
  margin-bottom: 40px;
}

/* Página Quiénes Somos: tarjetas de Valores */
.fh-valor-card {
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 35px 25px;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease;
}
.fh-valor-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}
.fh-valor-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #c72529;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}
.fh-valor-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.fh-valor-title {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--title-color);
}
.fh-valor-text {
  color: var(--text-color);
  font-size: 15px;
  margin-bottom: 0;
}

/* Header móvil/tablet: al desplazar hacia arriba reaparece la barra sticky (logo +
   menú hamburguesa), pero su fondo blanco no siempre queda sólido, dejándola ver
   transparente sobre el contenido. Se refuerza el fondo y una sombra para que
   siempre se vea opaca y bien delimitada. */
@media (max-width: 991px) {
  .header-layout3 .sticky-wrapper,
  .header-layout3 .will-sticky.sticky-wrapper,
  .header-layout3 .will-sticky .sticky-active {
    background-color: var(--white-color) !important;
    opacity: 1 !important;
    height: 115px;
  }
  .header-layout3 .will-sticky .sticky-active.active {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12);
  }
}

/* Color de marca: reemplaza el pastel por defecto del theme (#F8F5F1 / #F3ECDC) en
   TODOS los fondos que lo usan (cajas, secciones "smoke", etc.) por el pastel de FotheSalud */
:root {
  --theme-color2: #f6f9fe;
  --body-color: #f6f9fe;
  --smoke-color: #f6f9fe;
  --fh-team-accent: #4ea1f2;
}

/* Sección Nuestros Servicios: fondo pastel de marca (el theme no le define fondo propio) */
.service-layout1 {
  background-color: #f6f9fe;
}

/* Sección Preguntas Frecuentes: el fondo original del theme (faq-bg1.jpg) es un
   patrón casi blanco/imperceptible; se reemplaza por el pastel de marca */
.faq-layout1 {
  background-color: #fff;
}

/* Sección Blog & Noticias: el theme trae una imagen de fondo propia; se reemplaza
   por el pastel de marca */
.blog-layout1 {
  background-color: #f6f9fe;
}

/* Blog & Noticias: en las 2 tarjetas horizontales (blog-style3) el theme limita
   la imagen a max-height:239px; como nuestros títulos son más largos y hacen la
   tarjeta más alta que eso, la imagen se quedaba corta y dejaba un espacio vacío
   debajo. Se quita el límite y se recorta con object-fit para que la imagen
   siempre llene el 100% del alto de la tarjeta, sin deformarse. */
.blog-style3 .blog-img {
  max-height: none;
}
.blog-style3 .blog-img img {
  object-fit: cover;
}

/* Preguntas Frecuentes: la foto del recuadro es panorámica y el theme no la recorta
   (solo width:100%, sin alto definido), por eso se veía aplastada/deformada.
   Se fija una proporción y se recorta con object-fit para que se vea igual al diseño. */
.faq-box1 .faq-img {
  aspect-ratio: 494 / 420;
  overflow: hidden;
}
.faq-box1 .faq-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sección Nuestros Servicios: separación entre las flechas de navegación y el carrusel */
.service-layout1 .vs-arrows {
  margin-bottom: 40px;
}

/* Box debajo del banner: mismo alto en las 4 tarjetas */
.service-layout2 .service-item {
  display: flex;
}
.service-layout2 .service-style2 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* El logo de FotheSalud es un lockup compuesto (icono + nombre + eslogan), distinto
   al wordmark pequeño para el que header-layout3 diseñó un fondo decorativo rojo
   detrás del logo. Se retira ese decorado y se ajusta el tamaño para que el logo
   se vea completo y limpio, tal como en la propuesta aprobada. */
.header-layout3 .header-logo::before {
  display: none;
}
.header-layout3 .header-logo {
  max-width: none;
}
.header-layout3 .header-logo .logo,
.header-layout3 .header-logo .logo2 {
  max-height: 80px;
  width: auto;
  margin:18px 0px;
}
.mobile-logo .logo,
.sidemenu-content .logo,
.preloader-inner img {
  max-height: 100px;
  width: auto;
}

/* Banner (hero-layout3): se quita la animación de "zoom" continuo (Ken Burns)
   que el theme aplica por defecto a .hero-bg — a pedido explícito, el cambio
   entre banners sigue siendo un fundido (fade, ver assets/js/main.js), sin
   ningún movimiento lateral ni de zoom sobre la imagen fija. */
.hero-layout3 .hero-bg {
  animation: none;
}

/* Banner (hero-layout3): oscurece la imagen de fondo para que el texto sea legible.
   Se apaga cuando ESE banner concreto no muestra texto ni botón (patrón 3.19 de
   EYWA-BACKEND): sin nada que proteger, oscurecer la foto es un defecto, no una
   decisión de diseño. */
.hero-layout3 .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(4, 34, 62, 0.35);
  transition: opacity 0.3s ease;
}
.hero-layout3 .hero-bg.hero-bg--sin-texto::after {
  opacity: 0;
}

/* Banner en modo video (patrón 3.46 de EYWA-BACKEND): Vimeo a pantalla completa
   con preloader, dentro del mismo hero-item que el modo fotos. A diferencia del
   modo fotos, aquí no hay Swiper que genere su propio contexto de apilamiento
   (el modo video reemplaza al slider por completo, nunca convive con él), así
   que .hero-video-bg fija su propio "position:relative; z-index:0" a mano. */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78%;
  transform: translate(-50%, -50%);
  z-index: -3;
}
.hero-video-embed iframe {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-video-preloader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: opacity 0.6s ease;
}
.hero-video-preloader--oculto {
  opacity: 0;
  pointer-events: none;
}
.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(4, 34, 62, 0.35);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.hero-video-bg.hero-video-bg--sin-texto::after {
  opacity: 0;
}

/* "Difuminar contenido" (patrón 3.46): texto/botón y su degradado de fondo
   desaparecen suavemente pasados unos segundos — ver assets/js/banner-dinamico.js. */
.hero-content {
  transition: opacity 1s ease;
}
.hero-content--difuminado {
  opacity: 0;
  pointer-events: none;
}
.swiper-slide.hero-slide--difuminado .hero-bg::after {
  opacity: 0;
}
.hero-layout3.hero-video-difuminado .hero-video-bg::after {
  opacity: 0;
}

/* Banner (hero-layout3): sombra sutil en el texto para que no se pierda sobre fondos claros */
.hero-layout3 .hero-title,
.hero-layout3 .hero-text {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Banner (hero-layout3): el theme trae un padding vertical muy alto (295px/215px).
   Se reduce para un banner más compacto, acorde a la propuesta aprobada. */
.hero-layout3 .hero-item {
  box-sizing: border-box;
  padding: 350px 0 120px;
}
/* Ese padding es fijo en píxeles y no bajaba entre 1920px y 1200px, por lo que a
   1600px de ancho la misma altura se veía desproporcionadamente alta. Se agrega
   un nivel intermedio para ese rango. */
@media (max-width: 1699px) {
  .hero-layout3 .hero-item {
    padding: 250px 0 100px;
  }
}
@media (max-width: 1199px) {
  .hero-layout3 .hero-item {
    padding: 130px 0 70px;
  }
}
@media (max-width: 767px) {
  .hero-layout3 .hero-item {
    padding: 220px 0 60px;
  }
}

/* Banner: la altura NO puede depender del contenido (título/subtítulo con o sin
   salto de línea según cuántas palabras entren en el ancho de columna real de
   cada "Ubicación de Texto") — un banner "Centro" (columna angosta, más
   probable que el título salte a 2 líneas) quedaba visiblemente más alto que
   un banner "Izquierda"/"Derecha" (columna completa, título en 1 línea) con
   exactamente el mismo texto, "subiendo y bajando" al cambiar de slide. Se fija
   una altura real (no min-height: con fondo aplicado vía JS a partir de
   data-bg-src, un min-height puede no repintar el fondo hasta cubrir toda la
   caja) medida sobre el contenido real más alto en cada rango de ancho —
   el banner en modo video (sin párrafo de Descripción) también respeta esta
   altura en vez de colapsar a su propio contenido, más corto. */
.hero-layout3 .hero-item {
  height: 940px;
}
@media (max-width: 1699px) {
  .hero-layout3 .hero-item {
    height: 660px;
  }
}
/* Entre 992 y 1199px el header salta a su altura más alta (287-299px, ver
   assets/js/banner-dinamico.js) justo en el mismo rango donde Bootstrap ya
   usa la columna col-lg-10 — el padding-top dinámico que despeja el header
   crece mucho ahí mismo, así que este tramo necesita más alto reservado que
   el resto del tramo 768-1199; medido: 850px, sin el cual el botón quedaba
   cortado exactamente en este rango. */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-layout3 .hero-item {
    height: 850px;
  }
}
@media (max-width: 991px) {
  .hero-layout3 .hero-item {
    height: 720px;
  }
}
@media (max-width: 767px) {
  .hero-layout3 .hero-item {
    height: 700px;
  }
}

/* Banner: "Ubicación Textos" Izquierda/Derecha ensancha la columna a col-12
   (ver includes/banner.php) para que el texto realmente llegue al borde del
   container. Pero cuando hay 2+ banners de fotos, las flechas de navegación
   (.vs-swiper-button-prev/next) flotan fijas a right/left:5% del ancho de
   pantalla — un h1 largo en una sola línea puede terminar justo debajo de
   esa flecha. Se reserva un respiro horizontal fijo para que el texto nunca
   quede debajo de las flechas, solo desde donde estas se muestran (d-lg-block). */
@media (min-width: 992px) {
  .hero-layout3 .hero-item .hero-content.text-start,
  .hero-layout3 .hero-item .hero-content.text-end {
    padding-left: 120px;
    padding-right: 120px;
  }
}

/* Iconos de FontAwesome dentro de los círculos de servicio (el theme original usa imágenes) */
.service-style2 .service-icon,
.service-style3 .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 24px;
}
.service-style2:hover .service-icon {
  background-color: #000000;
  color: var(--theme-color);
}
.vs-btn > img {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  object-fit: contain;
  vertical-align: middle;
}
.service-style2 .service-icon img {
  width: 40px;
  height: auto;
  object-fit: contain;
}

/* Sección "Sobre Nosotros" (inicio): el checklist se edita como HTML simple
   (<ul><li>texto</li></ul>) desde textos_paginas (Contenido 1) — el ícono de
   check se agrega por CSS en vez de depender de un <img> escrito a mano en
   el editor de texto enriquecido. */
.fh-about-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fh-about-checklist ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
}
.fh-about-checklist ul li:last-child {
  margin-bottom: 0;
}
.fh-about-checklist ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: url("../img/icons/check-icon1.svg") no-repeat center / contain;
}

/* Firma de texto "Trabajando estratégicamente" (el theme original usa una imagen de firma) */
.fh-about-signature {
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--title-color);
}

/* Widget flotante de WhatsApp con popup de chat simulado (patrón 3.16 de
   EYWA-BACKEND, según IMPORTANTE/whatsapp1 - fixed.jpg y whatsapp2 - fixed.jpg).
   El acento sigue el color de marca de FotheSalud (--theme-color, #E22222);
   el punto de estado "en línea" y el botón enviar/flotante son siempre verde
   WhatsApp fijo (#25d366) — no siguen el acento del proyecto. */
.whatsapp-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1050;
}

.whatsapp-widget__boton {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.whatsapp-widget__boton:hover {
  transform: scale(1.08);
}

.whatsapp-widget__popup {
  display: none;
  position: absolute;
  bottom: 76px;
  left: 0;
  width: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  background: #fff;
}

.whatsapp-widget__popup--abierto {
  display: block;
}

.whatsapp-widget__header {
  background: #1a1a1a;
  border-bottom: 3px solid var(--theme-color, #e22222);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 15px!important;
}

.whatsapp-widget__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--theme-color, #e22222);
  object-fit: cover;
}

.whatsapp-widget__info {
  flex: 1;
  color: #fff;
  font-size: 1.3rem;
}

.whatsapp-widget__estado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  color: #cfcfcf;
}

.whatsapp-widget__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}

.whatsapp-widget__cerrar {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.whatsapp-widget__cuerpo {
  background: #f4efe6;
  background-image: radial-gradient(#e3ddce 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 16px;
}

.whatsapp-widget__burbuja {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.whatsapp-widget__remitente {
  display: block;
  color: var(--theme-color, #e22222);
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.whatsapp-widget__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee;
}

.whatsapp-widget__input,
.whatsapp-widget__input:focus {
  flex: 1;
  border: 1px solid var(--theme-color, #e22222);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 1rem;
  color: #222; /* ver patrón 3.50: el reset global del theme puede dejar texto/placeholder blanco */
}
.whatsapp-widget__input::placeholder {
  color: #888;
  opacity: 1;
}

.whatsapp-widget__enviar {
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 700;
}

.justify {
  text-align: justify !important;
}

/* Formulario "Solicita una Cotización": rayita roja bajo el título, como en el diseño */
.contact-form2 .form-style1 .title-area .sec-title {
  position: relative;
  padding-bottom: 16px;
}
.contact-form2 .form-style1 .title-area .sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: var(--theme-color);
}

/* Formulario: el select "Tipo de servicio" (vía nice-select) recortaba las opciones
   largas con puntos suspensivos y podía quedar tapado por el mapa. Se permite que
   el texto de cada opción haga salto de línea y se sube el z-index del desplegable. */
.nice-select.fh-service-select {
  width: 100%;
  height: auto;
  min-height: 60px;
  white-space: normal;
}
.nice-select.fh-service-select .current {
  white-space: normal;
  line-height: 1.4;
  display: inline-block;
  padding: 8px 0;
}
.nice-select.fh-service-select .list {
  width: 100%;
  z-index: 50;
}
.nice-select.fh-service-select .option {
  white-space: normal;
  line-height: 1.4;
  min-height: auto;
  padding: 10px 18px;
}

/* Formulario: checkbox de aceptación de política de datos */
.fh-privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}
.fh-privacy-check .form-check-input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--theme-color);
}
.fh-privacy-check .form-check-label {
  font-size: 15px;
  color: var(--text-color);
}
.fh-privacy-check .form-check-label a {
  color: var(--theme-color);
  text-decoration: underline;
}

/* Formulario de contacto: los íconos de teléfono/email/dirección usaban un círculo
   blanco (pensado para fondos oscuros) sobre la tarjeta blanca del formulario, por
   eso se veían casi invisibles y muy pequeños. Se les da el mismo tratamiento de
   insignia roja que el resto del sitio. */
.media-style2 .media-icon {
  background-color: transparent !important;
  box-shadow: none !important;
}
.media-style2 .media-icon i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 62px !important;
  height: 62px !important;
  font-size: 26px !important;
  background-color: var(--theme-color) !important;
  color: var(--white-color) !important;
  border-radius: 50%;
  box-shadow: none;
}

/* Sección "Nuestra experiencia nos respalda": el theme deja esta sección en blanco
   (.trust-style1{background-color:var(--white-color)}), pero la propuesta aprobada
   la muestra con fondo azul marino y texto en blanco. Se ajusta el fondo y se
   corrigen los textos/barras de progreso para que se lean bien sobre ese fondo. */
.trust-style1 {
  background-color: var(--title-color);
}
.trust-style1 .sec-subtitle,
.trust-style1 .progress-title,
.trust-style1 .progress-text,
.trust-style1 .progress-box__title,
.trust-style1 .progress-box__number {
  color: var(--white-color);
}
.trust-style1 .progress-box__progress {
  background-color: rgba(255, 255, 255, 0.2);
}

@media only screen and (min-width: 1000px) and (max-width: 1499px) {
  .vs-hero .hero-title {
    font-size: 48px !important;
  }
  .header-layout3 .header-logo .logo,
  .header-layout3 .header-logo .logo2 {
    max-height: 95px !important;
  }
  .sec-title {
    font-size: 40px !important;
  }
  .fh-thankyou-content {
    padding: 0px 0px 0px 104px;
    margin-top: -150px;
  }
}

@media only screen and (min-width: 100px) and (max-width: 999px) {
  .fh-thankyou-content {
    padding: 0px;
    margin-top: -45px;
  }
}

/* Página Equipo de Trabajo: grilla y tarjeta de cada integrante, según el diseño
   aprobado (fondo azul marino, figura decorativa celeste detrás de la foto circular
   y botón "CONOCER MÁS" en celeste). Estas clases venían en el HTML sin estilos propios. */
.cs_doctors_grid.cs_style_1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 1199px) {
  .cs_doctors_grid.cs_style_1 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .cs_doctors_grid.cs_style_1 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .cs_doctors_grid.cs_style_1 {
    grid-template-columns: 1fr;
  }
}

.cs_team.cs_style_1 {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 40px 25px 35px;
  text-align: center;
  height: 100%;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.cs_team.cs_style_1.cs_blue_bg {
  background-color: var(--title-color);
}
.cs_team.cs_style_1:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(4, 34, 62, 0.25);
}
.cs_team_shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 55%;
  clip-path: polygon(32% 0, 100% 0, 100% 58%);
}
.cs_team_shape.cs_accent_bg {
  background-color: #e22221;
}
.cs_team_thumbnail {
  position: relative;
  z-index: 1;
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 25px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--white-color);
}
.cs_team_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: top;
}
.cs_team_bio {
  position: relative;
  z-index: 1;
}
.cs_team_title {
  font-size: 22px;
  margin-bottom: 8px;
}
.cs_team_title a {
  color: var(--white-color);
  text-decoration: none;
}
.cs_extra_bold {
  font-weight: 800;
}
.cs_team_subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  margin-bottom: 18px;
}
.cs_center {
  text-align: center;
}
.blue2 {
  display: inline-block;
  color: var(--fh-team-accent);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}
.blue2:hover {
  color: var(--white-color);
}

/* Página Detalle de Equipo (detalle-equipo-*.php): foto con figuras decorativas,
   nombre/cargo en azul y rojo, y caja de Ubicación/E-mail. Estas clases venían en
   el HTML sin estilos propios, igual que cs_team arriba. Colores tomados del sitio
   hermano fothesaludips.com donde este mismo componente ya está en producción. */
.cs_doctor_details_thumbnail {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.cs_doctor_details_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs_doctor_details_thumbnail .cs_doctor_thumbnail_shape1,
.cs_doctor_details_thumbnail .cs_doctor_thumbnail_shape2 {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  transform: scale(0.7);
  opacity: 0.5;
  z-index: 1;
}
.cs_doctor_details_thumbnail .cs_doctor_thumbnail_shape1 {
  left: -70px;
  top: -100px;
  background-color: #002060;
}
.cs_doctor_details_thumbnail .cs_doctor_thumbnail_shape2 {
  left: -100px;
  top: -40px;
  background-color: #2ea6f7;
}

.cs_doctor_details {
  width: 100%;
}
.cs_doctor_info_header h3.blue {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 6px;
}
.cs_doctor_info_header h4.red {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}
.cs_doctor_details .blue {
  color: #002060;
}
.cs_doctor_details .red {
  color: #d90501;
}
.cs_doctor_details .justifi {
  text-align: justify;
}
.cs_doctor_info_wrapper {
  width: 100%;
  border: 1px solid var(--border-color);
}
.cs_doctor_info_row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border-color);
}
.cs_doctor_info_row:last-child {
  border-bottom: 0;
}
.cs_doctor_info_row::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border-color);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
@media (max-width: 575px) {
  .cs_doctor_info_row {
    grid-template-columns: 1fr;
  }
  .cs_doctor_info_row::after {
    display: none;
  }
}
.cs_doctor_info_col {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cs_iconbox.cs_style_10 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 5px;
}
.cs_iconbox.cs_style_10 .cs_iconbox_icon {
  font-size: 26px;
  color: #2ea6f7;
}
.cs_iconbox.cs_style_10 .cs_iconbox_title {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 2px;
}
.cs_iconbox.cs_style_10 .cs_iconbox_subtitle {
  margin: 0;
  color: var(--text-color);
}

/* Popup promocional (Integración de Configuración > Popup, index únicamente).
   El ancho lo fija SIEMPRE el estilo inline calculado en PHP a partir del
   tamaño real de la imagen (ver includes/popup-promocional.php) — Magnific
   Popup fuerza width:100% en .mfp-content para el tipo "inline", así que sin
   este ancho propio el popup se estiraría a casi todo el ancho de pantalla. */
.popup-promocional {
  position: relative;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}
.popup-promocional img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.popup-promocional .swiper-slide {
  position: relative;
}
.popup-promocional__cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background-color: var(--white-color);
  color: var(--title-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.popup-promocional__overlay {
  position: absolute;
  z-index: 2;
  bottom: 8%;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--white-color);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.popup-promocional__overlay--izquierda {
  left: 6%;
  align-items: flex-start;
  text-align: left;
}
.popup-promocional__overlay--centro {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
}
.popup-promocional__overlay--derecha {
  right: 6%;
  align-items: flex-end;
  text-align: right;
}
.popup-promocional__texto {
  font-size: 15px;
  line-height: 1.5;
}
.popup-promocional__boton {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-weight: 700;
  font-size: 14px;
  text-shadow: none;
}
.popup-promocional__dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.popup-promocional__dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background-color: var(--white-color);
  opacity: 0.6;
}
.popup-promocional__dots .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--theme-color);
}
/* El popup debe quedar siempre por encima del header sticky del theme. */
.mfp-bg {
  z-index: 10050;
}
.mfp-wrap {
  z-index: 10060;
}