/*==============================================
    Paleta del logo en todo el sitio
    Marino #0c2340 | Teal #14b8bd | Rojizo #d4736f
==============================================*/

:root {
  --careon-accent: #d4736f;
  --careon-accent-rgb: 212, 115, 111;
  --careon-accent-light: #e89590;
  --careon-accent-dark: #b85a56;
  --brand-gradient: linear-gradient(
    135deg,
    #0c2340 0%,
    #14b8bd 52%,
    #d4736f 100%
  );
  --brand-gradient-soft: linear-gradient(
    160deg,
    rgba(12, 35, 64, 0.04) 0%,
    rgba(20, 184, 189, 0.08) 50%,
    rgba(212, 115, 111, 0.06) 100%
  );
  --banner-overlay: linear-gradient(
    125deg,
    rgba(12, 35, 64, 0.94) 0%,
    rgba(12, 35, 64, 0.7) 40%,
    rgba(20, 184, 189, 0.3) 72%,
    rgba(212, 115, 111, 0.2) 100%
  );
}

::selection {
  background: rgba(var(--careon-base-rgb), 0.25);
  color: var(--careon-black);
}

/* —— Encabezados de sección —— */
.section-title-three__tagline,
.section-title-two__tagline {
  color: var(--careon-base);
}

.section-title-three.text-center .section-title-three__tagline::after,
.section-title-two.text-center .section-title-two__tagline::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--brand-gradient);
}

.section-title-three__title,
.section-title-two__title {
  color: var(--careon-black);
}

/* —— Botones principales —— */
.thm-btn::before {
  background: var(--careon-base);
}

.thm-btn::after {
  background: var(--careon-accent);
}

.thm-btn:hover {
  color: var(--careon-white);
}

.main-slider-three .thm-btn::before {
  background: var(--careon-accent);
}

.main-slider-three .thm-btn::after {
  background: var(--careon-base);
}

/* —— Banner / cabeceras internas —— */
.page-header__bg::before {
  background: linear-gradient(
    125deg,
    rgba(12, 35, 64, 0.88) 0%,
    rgba(15, 53, 84, 0.78) 45%,
    rgba(20, 184, 189, 0.35) 75%,
    rgba(212, 115, 111, 0.25) 100%
  );
}

/* —— Secciones alternas (ritmo visual marca) —— */
.services-five {
  background: var(--brand-gradient-soft);
}

.about-five {
  background-color: var(--careon-white);
}

.testimonial-two {
  background: linear-gradient(
    180deg,
    var(--careon-white) 0%,
    rgba(var(--careon-base-rgb), 0.06) 100%
  );
}

.videos-cirugia {
  background: linear-gradient(
    180deg,
    rgba(var(--careon-base-rgb), 0.06) 0%,
    var(--careon-white) 50%,
    rgba(var(--careon-accent-rgb), 0.05) 100%
  ) !important;
}

/* —— Tarjetas de servicios / beneficios —— */
.services-five__single:hover {
  border-color: rgba(var(--careon-base-rgb), 0.35);
}

.services-five__single:hover .services-five__title {
  color: var(--careon-accent);
}

.services-five__icon {
 
  border-radius: 12px;
  padding: 8px;
}

/* —— Iconos de contacto en footer —— */
.footer-widget__contact-icon {
  background: linear-gradient(
    145deg,
    var(--careon-base) 0%,
    var(--careon-accent) 100%
  ) !important;
}

.footer-widget__contact-icon i {
  color: var(--careon-white) !important;
}

/* —— Enlaces y hover —— */
a:hover {
  color: var(--careon-accent);
}

.main-menu .main-menu__list > li > a:hover,
.main-menu .main-menu__list > li.current > a {
  color: var(--careon-accent);
}

/* —— Lista biografía (checks) —— */
.about-five__point .icon span,
.about-five__point--two .icon span {
  color: var(--careon-base);
}

.about-five__point li:hover .text p {
  color: var(--careon-accent-dark);
}

/* —— Testimonios —— */
.testimonial-two__client-name {
  color: var(--careon-black);
}

.icon-star,
.testimonial-two__rating .icon-star {
  color: #F8BC26;
}

/* —— FAQ / acordeón si aplica —— */
.faq-one__tab-buttons .tab-btn.active-btn {
  color: var(--careon-base);
}

/* —— Barra flotante contacto (plantilla) —— */
.contacto a {
  background: var(--brand-gradient) !important;
}

.contacto a:hover {
  background: linear-gradient(
    135deg,
    var(--careon-accent) 0%,
    var(--careon-base) 100%
  ) !important;
}

.icono {
  background-image: var(--brand-gradient) !important;
  border-color: rgba(var(--careon-accent-rgb), 0.5) !important;
}

.btn-whatsapp {
  background-image: var(--brand-gradient) !important;
}

/* —— Paginación swiper banner —— */
#main-slider-pagination .swiper-pagination-bullet-active {
  background: var(--careon-accent) !important;
}

#main-slider-pagination .swiper-pagination-bullet {
  background: var(--careon-base) !important;
  opacity: 0.45;
}