/* Litang Investments — overrides y clases nuevas sobre style.css */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--charcoal);
}

h1, h2, h3, h4, h5, h6,
.wordmark,
.section-title h2,
.slider_content h1 {
  font-family: "Archivo", sans-serif;
}

h1, h2, h3 {
  font-weight: 600;
}

/* --- Misión / Visión / Valores (home): las tres tarjetas tienen textos de
   distinta longitud (Valores es mucho más largo), por lo que sin esto
   quedaban de alturas distintas. El .row del theme ya es flex, así que
   solo hace falta que la tarjeta llene la altura estirada de su columna. --- */
.service_area.minus_padding .row .single_service {
  height: calc(100% - 30px);
}

/* --- Servicios (home): mismos textos de distinta longitud que en
   Misión/Visión/Valores, así que se aplica el mismo criterio de altura
   igualada por columna. --- */
.service_area.equal_height .row .single_service {
  height: calc(100% - 30px);
}

/* Borde y sombra más marcados que el default muy sutil del theme
   (#E8E8E8 casi invisible, sombra solo en hover al 0.04 de opacidad). */
.service_area.equal_height .single_service {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.service_area.equal_height .single_service:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.16);
  border-color: transparent;
}

/* El theme trae padding-top: 100px en .service_area; sumado al
   margin-bottom: 50px del bloque "about" anterior, dejaba un salto de
   150px antes de "Misión" que se veía como un espacio excesivo. */
.service_area.minus_padding {
  padding-top: 40px;
}

/* --- Logo del footer + wordmark "LITANG / INVESTMENTS" (mismo lockup
   de marca que en info/index.html) --- */
.footer_logo .brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer_logo img {
  width: 56px;
  height: auto;
}

.footer_logo .wordmark {
  line-height: 1;
}

.footer_logo .wordmark .name {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  display: block;
}

.footer_logo .wordmark .sub {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.42em;
  color: var(--copper);
  margin-top: 4px;
  display: block;
}

/* --- Logo del navbar + palabra "LITANG" al lado --- */
.header-area .logo .brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-area .logo img {
  width: 42px;
  height: auto;
}

.header-area .logo .wordmark {
  line-height: 1;
}

.header-area .logo .brand-name {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1;
  display: block;
}

.header-area .logo .sub-brand {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.42em;
  color: #fff;
  margin-top: 4px;
  display: block;
}

/* --- Nombre de la empresa (home): tipografía de marca en vez del
   peso 300 (light) que trae el theme por defecto. --- */
.brand-name-heading {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- Hero slider backgrounds (fotos reales de proyectos) ---
   La imagen de cada slide se define inline en sections/carousel.php
   (style="background-image: url(...)"), así se pueden agregar o
   quitar slides sin tocar el CSS. --- */
.slider_bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.slider_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(58, 15, 12, 0.82) 0%, rgba(58, 15, 12, 0.45) 60%, rgba(58, 15, 12, 0.15) 100%);
}

.slider_bg .slider_content {
  position: relative;
  z-index: 2;
}

/* --- Flechas del carrusel del home: el theme original las deja
   transparentes con borde gris (#707070) y solo se ven al hacer hover,
   por lo que se pierden sobre las fotos. Se les da fondo sólido y
   contraste permanente. --- */
.slider_active.owl-carousel .owl-nav div {
  background: rgba(24, 19, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  opacity: 1;
  visibility: visible;
}

.slider_active.owl-carousel:hover .owl-nav div:hover {
  background: var(--copper);
  border: 1px solid transparent;
  color: #fff;
}

/* --- Cabecera interior (bradcam) de páginas internas ---
   La imagen se elige agregando una clase .bradcam-banner-N (definida más abajo)
   junto a .bradcam_bg_litang, así el mismo componente CSS se reutiliza con una
   imagen distinta por página sin necesitar un style="" inline (bloqueado por CSP). --- */
.bradcam_bg_litang {
  background-image: linear-gradient(90deg, rgba(162, 106, 58, 0.85), rgba(162, 106, 58, 0.6)), var(--bradcam-bg-image, url(/assets/img/banner.jpg));
  background-size: cover;
  background-position: center;
}

/* --- Barra de navegación: fondo burgundy-deep sólido siempre (el theme
   original la dejaba transparente sobre el hero). --- */
#sticky-header.main-header-area {
  background: var(--burgundy-deep);
}

/* --- Menú móvil propio ---
   El theme original depende de slicknav con offsets negativos calibrados para
   una altura de header específica; en la práctica el botón terminaba fuera
   del área visible en anchos angostos. Se sustituye por un toggle simple. --- */
@media (max-width: 991px) {
  .header_bottom_border .row {
    position: relative;
    min-height: 60px;
  }

  .mobile_menu {
    width: auto !important;
    z-index: 1000;
  }
}

.litang_menu_toggle {
  position: fixed !important;
  top: 15px;
  right: 15px;
  z-index: 1000;
}

.litang_menu_toggle {
  display: block;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.litang_menu_toggle span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.litang_menu_toggle span:nth-child(1) { top: 0; }
.litang_menu_toggle span:nth-child(2) { top: 10px; }
.litang_menu_toggle span:nth-child(3) { top: 20px; }

.litang_menu_toggle.is-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.litang_menu_toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.litang_menu_toggle.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.litang_mobile_nav {
  display: none;
  background: var(--burgundy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.litang_mobile_nav.is-open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 980;
  overflow-y: auto;
  padding-top: 60px;
}

.litang_mobile_nav ul {
  list-style: none;
  margin: 0;
  padding: 10px 20px 20px;
}

.litang_mobile_nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.litang_mobile_nav li:last-child {
  border-bottom: 0;
}

.litang_mobile_nav a {
  display: block;
  padding: 14px 5px;
  color: var(--cream);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
}

.litang_mobile_nav a.active {
  color: var(--red);
}

.litang_mobile_nav a.litang_mobile_cta {
  margin-top: 10px;
  color: #fff;
  background: var(--charcoal);
  border: 1px solid #fff;
  border-radius: 30px;
  text-align: center;
}

@media (min-width: 992px) {
  .litang_mobile_nav {
    display: none !important;
  }
}

/* --- Proyectos destacados (home): las fotos vienen con relieves distintos
   (horizontales y verticales), por lo que sin una altura fija de imagen
   las tarjetas quedaban de tamaños distintos. Se replica el mismo criterio
   de .single_service (height: 100% de la columna estirada por el .row flex
   de Bootstrap) más una altura fija para la miniatura. --- */
.case_study_area .row .single_case {
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
}

.case_study_area .single_case .case_thumb img {
  height: 260px;
  object-fit: cover;
}

.case_study_area .single_case .case_heading {
  flex: 1;
}

/* --- Galería de proyectos: tiles de altura fija para mezclar horizontales y verticales --- */
.project_tile {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 30px;
}

.project_tile img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.project_tile:hover img {
  transform: scale(1.06);
}

/* --- Tarjetas de servicio: forzar degradado cobre consistente (el theme original
   asignaba un color distinto por nth-child, incompatible con una sola marca) --- */
.service_area .single_service .service_icon,
.service_area .col-xl-4:nth-child(2) .single_service .service_icon,
.service_area .col-xl-4:nth-child(3) .single_service .service_icon,
.service_area .col-xl-4:nth-child(4) .single_service .service_icon,
.service_area .col-xl-4:nth-child(6) .single_service .service_icon {
  background: linear-gradient(to bottom, var(--copper-light) 0%, var(--copper) 100%);
}

.single_service .servcie_icon i {
  color: var(--copper);
}

/* --- Botones: charcoal sólido en vez del degradado cobre del theme,
   siguiendo el mismo tratamiento del botón CTA en litang.com.do
   (fondo charcoal, texto blanco, hover red-deep, foco copper). --- */
.boxed-btn3 {
  background: var(--charcoal) !important;
  color: #fff !important;
  border: 1px solid #fff;
}

.boxed-btn3:hover {
  background: var(--red-deep) !important;
}

.boxed-btn3:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
}

/* --- Botón del nav bar ("Solicitar Cotización"): outline blanco sobre el
   fondo burgundy-deep de la barra, en vez del relleno charcoal. --- */
.header-area .main-header-area .Appointment .book_btn a {
  background: transparent !important;
  border: 1px solid #fff;
  color: #fff !important;
}

.header-area .main-header-area .Appointment .book_btn a:hover {
  background: #fff !important;
  color: var(--burgundy-deep) !important;
}

.boxed-btn {
  border-color: var(--charcoal);
  color: var(--charcoal) !important;
}

.boxed-btn:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

/* --- Acento rojo: el sitio real reserva --red para destacar el ítem
   activo/foco de atención (acento del titular). Se aplica al indicador
   de navegación activa, que antes usaba cobre. --- */
.header-area .main-header-area .main-menu ul li a::before,
.header-area .main-header-area .main-menu ul li a.active::before {
  background: var(--red);
}

/* --- CTA final (home) --- */
.litang_cta_area {
  background: var(--burgundy-deep);
  color: var(--cream);
  padding: 60px 0;
}

.litang_cta_area h3 {
  color: var(--cream);
  margin-bottom: 10px;
}

.litang_cta_area p {
  color: var(--cream-2);
  margin-bottom: 0;
}

.litang_cta_area .boxed-btn3 {
  display: inline-block;
}

/* --- Footer: el theme original trae padding vertical (145px/129px) y
   line-height (42px) calibrados para un layout mucho más espaciado del
   que necesita este contenido; se reduce todo el ritmo vertical. --- */
.footer .footer_top {
  padding-top: 70px;
  padding-bottom: 50px;
}

.footer .footer_top .footer_widget .footer_title {
  margin-bottom: 18px;
}

.footer .footer_top .footer_widget .footer_logo {
  margin-bottom: 16px;
}

.footer .footer_top .footer_widget p {
  line-height: 1.7;
  margin-bottom: 10px;
}

.footer .footer_top .footer_widget ul li {
  line-height: 1.3;
  margin-bottom: 8px;
}

.footer .footer_top .footer_widget ul li:last-child {
  margin-bottom: 0;
}

.footer .footer_top .footer_widget .newsletter_text {
  margin-bottom: 10px;
}

/* --- Página de contacto: el glifo fa-mobile de Font Awesome 4 es más
   angosto que fa-phone al mismo font-size, se ve visualmente más chico. --- */
.contact-info__icon .fa-mobile {
  font-size: 34px;
}

/* --- Aviso de envío del formulario de contacto --- */
.form-alert {
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 24px;
  font-weight: 500;
}

.form-alert.success {
  background: #e6f4ea;
  color: #1e7a34;
  border: 1px solid #b7e0c3;
}

.form-alert.info {
  background: #e8f0fe;
  color: #1a4a8a;
  border: 1px solid #c3d7f5;
}

/* --- Páginas de detalle de servicio (services/*.php): mismo tratamiento
   de imagen redondeada que .about_info_area .about_thumb, pero sin
   depender de ese contenedor padre. --- */
.service_detail_thumb {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
}

.service_detail_thumb img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* --- .section_title p trae margin-bottom: 0 (pensado para un subtítulo de
   una sola línea); las páginas de detalle de servicio meten varios
   párrafos de texto ahí, así que necesitan su propio espaciado. --- */
.service_detail_text p {
  margin-bottom: 16px;
}

.form-alert.error {
  background: #fbe9e7;
  color: var(--red-deep);
  border: 1px solid #f3c4bd;
}

/* --- Utilidades para reemplazar estilos inline ---
   Requerido para que la CSP pueda omitir 'unsafe-inline' en style-src. --- */
.u-icon-fs-38 { font-size: 38px; color: #fff; line-height: 98px; }
.u-icon-fs-46 { font-size: 46px; color: #fff; }
.u-icon-fs-36 { font-size: 36px; color: #fff; line-height: 98px; }
.u-icon-fs-42 { font-size: 42px; color: #fff; line-height: 98px; }
.u-text-upper-900 { text-transform: uppercase; font-weight: 900; }
.u-icon-pad-top { padding-top: 7px; }
.u-icon-circle-copper {
  margin: 0 auto 20px;
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--copper-light) 0%, var(--copper) 100%);
}
.u-fw-600 { font-weight: 600; }
.u-fw-800 { font-weight: 800; }
.u-fw-900 { font-weight: 900; }
.u-mt-50 { margin-top: 50px; }
.u-map-embed { height: 420px; width: 100%; border: 0; }
.u-visually-hidden-offscreen { position: absolute; left: -9999px; }

/* Banners fijos del bradcam (antes vía --bradcam-bg-image inline) */
.bradcam-banner-1 { --bradcam-bg-image: url('/assets/img/banners/banner1.jpg'); }
.bradcam-banner-2 { --bradcam-bg-image: url('/assets/img/banners/banner2.jpg'); }
.bradcam-banner-3 { --bradcam-bg-image: url('/assets/img/banners/banner3.jpg'); }
.bradcam-banner-4 { --bradcam-bg-image: url('/assets/img/banners/banner4.jpg'); }

/* Slides fijos del carousel de inicio (antes vía background-image inline) */
.u-slide-banner-1 { background-image: url(/assets/img/banners/banner1.jpg); }
.u-slide-banner-2 { background-image: url(/assets/img/banners/banner2.jpg); }
.u-slide-banner-3 { background-image: url(/assets/img/banners/banner3.jpg); }
.u-slide-banner-4 { background-image: url(/assets/img/banners/banner4.jpg); }
.u-slide-banner-5 { background-image: url(/assets/img/banners/banner5.jpg); }