/* ===========================================================
   INDEX2 · Variante "más blanca" de la home (body.theme-lighter)
   Convierte las secciones oscuras topográficas (#2c2820) en
   fondo muy claro con la misma textura, y adapta el texto y los
   botones que estaban pensados para fondo oscuro.
   No afecta a la home original (welcome.blade.php).
   =========================================================== */

/* --- Secciones oscuras → fondo casi blanco con textura suave --- */
body.theme-lighter .title-bg-h4,
body.theme-lighter .sc-bg-right,
body.theme-lighter .sc-bg-left,
body.theme-lighter .experience,
body.theme-lighter .appointment.sc-bg-right {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)),
    url('/images/fondo-secciones-inicio.png') !important;
  border-top: 1px solid #ecebe6;
  border-bottom: 1px solid #ecebe6;
}

/* --- Texto que era blanco → azul/gris oscuro de marca --- */
body.theme-lighter .title-bg-h4 .cl-white,
body.theme-lighter .sc-bg-left .cl-white,
body.theme-lighter .sc-bg-right .cl-white,
body.theme-lighter .experience .cl-white,
body.theme-lighter .appointment.sc-bg-right .cl-white,
body.theme-lighter .title-bg-h4 h1.cl-white,
body.theme-lighter .title-bg-h4 h2.cl-white,
body.theme-lighter .title-bg-h4 h3.cl-white,
body.theme-lighter .title-bg-h4 h4.cl-white,
body.theme-lighter .sc-bg-left h2.cl-white,
body.theme-lighter .sc-bg-left h3.cl-white,
body.theme-lighter .sc-bg-left h4.cl-white,
body.theme-lighter .sc-bg-right h2.cl-white,
body.theme-lighter .sc-bg-right h3.cl-white,
body.theme-lighter .sc-bg-right h4.cl-white,
body.theme-lighter .experience h2.cl-white,
body.theme-lighter .experience h4.cl-white {
  color: #33454F !important; /* brand-dark */
}

/* Cuerpo de texto un pelín más suave que los títulos */
body.theme-lighter .exp-detail p.cl-white,
body.theme-lighter .appoint-detail p.cl-white,
body.theme-lighter .appoint-detail ul.cl-white,
body.theme-lighter .appoint-detail ul.cl-white li,
body.theme-lighter .exp-detail p {
  color: #5a6b76 !important;
}

/* Números de las métricas */
body.theme-lighter .experience .countfect.cl-white {
  color: #445A6E !important;
}

/* --- Etiquetas/acentos verde claro → azul de marca --- */
body.theme-lighter .title-bg-h4 .cl-green,
body.theme-lighter .title-bg-h4 .cl-lgreen,
body.theme-lighter .sc-bg-left .cl-green,
body.theme-lighter .sc-bg-left .cl-lgreen,
body.theme-lighter .sc-bg-right .cl-green,
body.theme-lighter .sc-bg-right .cl-lgreen,
body.theme-lighter .experience .cl-green,
body.theme-lighter .experience .cl-lgreen,
body.theme-lighter .appointment.sc-bg-right .cl-green,
body.theme-lighter .appointment.sc-bg-right .cl-lgreen {
  color: #445A6E !important;
}

/* Iconos de check dentro del listado del portal profesional */
body.theme-lighter .appoint-detail .fa-check.cl-lgreen {
  color: #7a9a5b !important; /* verde discreto para el check */
}

/* --- Botones blancos (pensados para fondo oscuro) → relleno de marca --- */
body.theme-lighter .sc-bg-left .btn-white-lb,
body.theme-lighter .sc-bg-right .btn-white-lb,
body.theme-lighter .experience .btn-white-lb {
  background: #445A6E !important;
  color: #ffffff !important;
}

/* ===========================================================
   INDEX2 · CABECERA BLANCA (no transparente, no superpuesta)
   con el logo en color (logo.png). Estilo tipo defelipe.com
   =========================================================== */
body.theme-lighter .home-hero { position: static; }

/* Header en flujo normal, blanco, con sombra suave */
body.theme-lighter .header-transparent.main_header_area,
body.theme-lighter .main_header_area {
  position: relative !important;
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(16, 42, 68, 0.08);
}
/* Topbar visible con fondo claro y texto oscuro (home E internas, igual) */
body.theme-lighter .header-transparent .topbar-wrap,
body.theme-lighter .main_header_area .topbar-wrap {
  display: block !important;
  background: #f5f7f9 !important;
  border-bottom: 1px solid #e7ecf1;
}
body.theme-lighter .main_header_area .topbar-wrap,
body.theme-lighter .main_header_area .topbar-wrap ul li,
body.theme-lighter .main_header_area .topbar-wrap .t-address li,
body.theme-lighter .main_header_area .topbar-wrap .t-address li i,
body.theme-lighter .main_header_area .topbar-wrap .t-social li a,
body.theme-lighter .main_header_area .topbar-wrap a {
  color: #1f2933 !important;
}
body.theme-lighter .main_header_area .topbar-wrap .t-address li::after {
  background: rgba(68, 90, 110, 0.25);
}
/* Menú principal en texto oscuro */
body.theme-lighter .header-transparent .nav.navbar-nav > li > a,
body.theme-lighter .header-transparent .nav.navbar-nav > li > a > i,
body.theme-lighter .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a,
body.theme-lighter .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a > i {
  color: #1f2933 !important;
}
body.theme-lighter .header-transparent .nav.navbar-nav > li > a:hover,
body.theme-lighter .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a:hover {
  color: var(--brand, #C88B4A) !important;
}
/* Logo EN COLOR (quitar el filtro que lo pone blanco) */
body.theme-lighter .header-transparent .navbar-brand img,
body.theme-lighter .main_header_area .navbar-brand img {
  filter: none !important;
}
/* Iconos del header (usuario, calendario, área privada) en gris muy oscuro */
body.theme-lighter .main_header_area .header-btn > a,
body.theme-lighter .main_header_area .header-btn > a i,
body.theme-lighter .main_header_area .header-icon,
body.theme-lighter .main_header_area .header-icon i,
body.theme-lighter .main_header_area .topbar-status,
body.theme-lighter .main_header_area .topbar-status-dot {
  color: #1f2933 !important;
}
/* Barra fija al hacer scroll: blanca también */
@media (min-width: 992px) {
  body.theme-lighter .main_header_area .header_menu.fixed-top {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(16, 42, 68, 0.12) !important;
  }
}

/* ===========================================================
   INDEX2 · SLIDER a pantalla completa (bajo la cabecera blanca)
   =========================================================== */
/* Alto = 16:9 del ancho (56.25vw) → una foto 1920×1080 se ve COMPLETA,
   sin recortar arriba/abajo. Con tope y mínimo para pantallas extremas. */
/* Altura explícita (no 100%) en hero y slide para que Swiper no colapse el
   alto y la foto llene TODO (ancho y alto). Alto = 16:9 del ancho. */
.idx-hero { position: relative; height: 96vh; max-height: 940px; min-height: 620px; overflow: hidden; background: #0a1628; padding: 0 !important; margin: 0 !important; }
.idx-hero .swiper-container, .idx-hero .swiper-wrapper { height: 100%; }
.idx-hero .swiper-slide { height: 96vh; max-height: 940px; min-height: 620px; }
.idx-slide { position: relative; width: 100%; height: 96vh; max-height: 940px; min-height: 620px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.idx-slide .idx-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.idx-slide .idx-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,.55) 0%, rgba(10,22,40,.28) 42%, rgba(10,22,40,.62) 100%); }
.idx-slide .idx-inner { position: relative; z-index: 2; max-width: 940px; padding: 0 24px; text-align: center; color: #fff; text-shadow: 0 2px 20px rgba(10,22,40,.5); }
.idx-slide .idx-eyebrow { display: inline-block; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 400; color: #fff !important; margin-bottom: 16px; }
.idx-slide h1 { font-family: "Gibson","Helvetica Neue",Arial,sans-serif; font-size: clamp(40px, 7vw, 82px); line-height: 1.05; font-weight: 400; margin: 0 0 18px; color:#fff; }
.idx-slide p { font-size: clamp(16px, 2.1vw, 21px); font-weight: 300; margin: 0 auto 30px; max-width: 640px; color: #fff !important; }
/* Refuerzo: TODO el texto del slider en blanco (el eyebrow mantiene el dorado) */
.idx-slide .idx-inner h1, .idx-slide .idx-inner p { color: #fff !important; }
.idx-slide .idx-cta { display: inline-block; background: transparent; border: 1.5px solid rgba(255,255,255,.9); color: #fff; border-radius: 40px; padding: 14px 38px; font-weight: 400; letter-spacing: .5px; text-decoration: none; transition: all .25s ease; }
.idx-slide .idx-cta:hover { background: #fff; color: #1a2a45; }
/* Textos siempre visibles (el fundido del slide ya hace la entrada) */
.idx-slide .idx-inner .idx-eyebrow,
.idx-slide .idx-inner h1,
.idx-slide .idx-inner p,
.idx-slide .idx-inner .idx-cta { opacity: 1; transform: none; }
.idx-hero .idx-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(10,22,40,.25); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; }
.idx-hero .idx-arrow:hover { background: #fff; color: #1a2a45; }
.idx-hero .idx-prev { left: 24px; }
.idx-hero .idx-next { right: 24px; }
.idx-hero .swiper-pagination { bottom: 26px !important; }
.idx-hero .swiper-pagination-bullet { width: 30px; height: 4px; border-radius: 3px; background: #fff; opacity: .45; transition: opacity .2s, width .2s; }
.idx-hero .swiper-pagination-bullet-active { opacity: 1; width: 46px; background: #e6c79c; }
@media (max-width: 700px) { .idx-hero .idx-arrow { display: none; } }

/* --- Blog: en index2 la sección es clara → texto oscuro otra vez --- */
body.theme-lighter .blog-main.title-bg-h4 .article-list .artl-detail h3 a {
  color: #445A6E !important;
}
body.theme-lighter .blog-main.title-bg-h4 .article-list .artl-detail p {
  color: #4a4238 !important;
}
body.theme-lighter .blog-main.title-bg-h4 .article-footer .cl-lgrey2,
body.theme-lighter .blog-main.title-bg-h4 .article-footer a.cl-lgrey2 {
  color: #6b6258 !important;
}

/* --- Un punto más de aire/luminosidad en las secciones claras --- */
body.theme-lighter .aboutus,
body.theme-lighter .w-process.wprocess-1.bg-sfgrey,
body.theme-lighter .team,
body.theme-lighter .testimonials {
  background: #ffffff !important;
}

/* ===========================================================
   SOLO HOME (body.home-overlay) · Header transparente SUPERPUESTO
   sobre el slider (logo blanco + overlay negro sobre las fotos).
   Reactiva el overlay original de custom.css ganando en especificidad
   a las reglas de "cabecera blanca" de este mismo archivo.
   Las páginas internas (sin .home-overlay) siguen con cabecera blanca.
   =========================================================== */
body.theme-lighter.home-overlay .home-hero { position: relative; }

/* El header (topbar + menú) flota sobre el slider, sin ocupar alto */
body.theme-lighter.home-overlay .header-transparent.main_header_area,
body.theme-lighter.home-overlay .main_header_area {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: transparent !important;
  box-shadow: none !important;
}
body.theme-lighter.home-overlay .header-transparent .header_menu,
body.theme-lighter.home-overlay .header-transparent .navbar.navbar-default {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Barra superior (teléfono/email) OCULTA en la home */
body.theme-lighter.home-overlay .header-transparent .topbar-wrap,
body.theme-lighter.home-overlay .main_header_area .topbar-wrap {
  display: none !important;
}
/* Menú principal en BLANCO */
body.theme-lighter.home-overlay .header-transparent .nav.navbar-nav > li > a,
body.theme-lighter.home-overlay .header-transparent .nav.navbar-nav > li > a > i,
body.theme-lighter.home-overlay .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a,
body.theme-lighter.home-overlay .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a > i {
  color: #ffffff !important;
}
body.theme-lighter.home-overlay .header-transparent .nav.navbar-nav > li > a:hover {
  color: var(--brand-light, #E6ECF1) !important;
}
/* Iconos / estado / botón del header en blanco */
body.theme-lighter.home-overlay .main_header_area .header-btn > a,
body.theme-lighter.home-overlay .main_header_area .header-btn > a i,
body.theme-lighter.home-overlay .main_header_area .header-icon,
body.theme-lighter.home-overlay .main_header_area .header-icon i,
body.theme-lighter.home-overlay .main_header_area .topbar-status,
body.theme-lighter.home-overlay .main_header_area .topbar-status-dot {
  color: #ffffff !important;
}
/* LOGO en blanco (el PNG es en color; se invierte a blanco) */
body.theme-lighter.home-overlay .header-transparent .navbar-brand img,
body.theme-lighter.home-overlay .main_header_area .navbar-brand img {
  filter: brightness(0) invert(1) !important;
}

/* Al hacer scroll el menú se fija: fondo blanco y contenido oscuro legible */
@media (min-width: 992px) {
  body.theme-lighter.home-overlay .main_header_area .header_menu.fixed-top {
    position: fixed !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(16, 42, 68, 0.12) !important;
  }
  body.theme-lighter.home-overlay .main_header_area .header_menu.fixed-top .nav.navbar-nav > li > a,
  body.theme-lighter.home-overlay .main_header_area .header_menu.fixed-top .nav.navbar-nav > li > a > i {
    color: #1f2933 !important;
  }
  body.theme-lighter.home-overlay .main_header_area .header_menu.fixed-top .nav.navbar-nav > li > a:hover {
    color: var(--brand, #C88B4A) !important;
  }
  body.theme-lighter.home-overlay .main_header_area .header_menu.fixed-top .navbar-brand img {
    filter: none !important;
  }
}

/* Overlay NEGRO sobre las fotos del slider (las imágenes NO se tocan) */
body.theme-lighter.home-overlay .idx-slide .idx-ov {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.62) 100%) !important;
}

/* Home · artículos: miniatura de altura FIJA para que todas las tarjetas queden
   alineadas (aunque las fotos tengan distinta proporción) */
body.theme-lighter .blog-main .at-thumbnail {
  height: 220px;
  overflow: hidden;
}
body.theme-lighter .blog-main .at-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================================================
   HOME · el header flota sobre el slider, asi que en vez de
   sticky va fijo (no ocupa alto) y al bajar pasa a barra blanca
   =========================================================== */
body.theme-lighter.home-overlay .header-transparent.main_header_area,
body.theme-lighter.home-overlay .main_header_area {
  position: fixed !important;
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
body.theme-lighter.home-overlay.nav-compact .header-transparent.main_header_area,
body.theme-lighter.home-overlay.nav-compact .main_header_area {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(16, 42, 68, 0.12) !important;
}
/* Sobre fondo blanco, el texto y el logo vuelven a ser oscuros */
body.theme-lighter.home-overlay.nav-compact .header-transparent .nav.navbar-nav > li > a,
body.theme-lighter.home-overlay.nav-compact .header-transparent .nav.navbar-nav > li > a > i,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a > i,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header-btn > a,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header-btn > a i,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header-icon,
body.theme-lighter.home-overlay.nav-compact .main_header_area .header-icon i {
  color: #1f2933 !important;
}
body.theme-lighter.home-overlay.nav-compact .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a:hover {
  color: var(--brand, #C88B4A) !important;
}
body.theme-lighter.home-overlay.nav-compact .header-transparent .navbar-brand img,
body.theme-lighter.home-overlay.nav-compact .main_header_area .navbar-brand img {
  filter: none !important;
}
/* Hamburguesa del movil, tambien oscura sobre la barra blanca */
body.theme-lighter.home-overlay.nav-compact .main_header_area .slicknav_btn.slicknav_open:before,
body.theme-lighter.home-overlay.nav-compact .main_header_area .slicknav_btn.slicknav_collapsed:before {
  color: #1f2933 !important;
}
body.theme-lighter.home-overlay.nav-compact .main_header_area #slicknav-mobile .slicknav_btn,
body.theme-lighter.home-overlay.nav-compact .main_header_area .slicknav_icon-bar {
  background-color: #1f2933 !important;
}