/*
 Theme Name:   Lhomka Landing
 Theme URI:    https://tusitio.com/
 Author:       Tu Nombre
 Author URI:   https://tusitio.com/
 Description:  Tema a medida para Grupo Lhomka.
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  lhomka-landing
*/

:root{
	--top-bar-height:46px;
	--navbar-height:110px;
}

/* ---------- Reset básico ---------- */
body{
	margin:0;
	padding-top:calc(var(--top-bar-height) + var(--navbar-height));
}

/* ---------- Top Bar ---------- */
.top-bar{
	position:fixed;
	top:0;left:0;right:0;
	height:var(--top-bar-height);
	background:rgba(1,56,47,.9);
	z-index:1030;
}
.top-bar .container{height:100%}

/* ---------- Navbar fija debajo del Top Bar ---------- */
.navbar.fixed-nav{
	position:fixed;
	top:var(--top-bar-height);
	left:0;right:0;
	height:var(--navbar-height);
	background:#fff;
	z-index:1020;
}
.navbar.fixed-nav .container{
	height:100%;
	display:flex;
	align-items:center;
}
.navbar.fixed-nav .navbar-brand img{
	max-height:80px;
	width:auto;
	display:block;
}

/* ---------- Enlaces de menú ---------- */
.nav-link{
	padding:.5rem 1rem;
	color:#000!important;
	position:relative;
	transition:color .3s;
	font-weight:500; /* .fw-medium */
}
.nav-link:hover{
	color:#3eba90!important;
}
.nav-link:hover::after{
	content:'';
	position:absolute;
	bottom:0;left:0;
	width:100%;
	height:2px;
	background:#3eba90;
}

/* ---------- HERO ---------- */
#inicio{
	background:url('https://www.grupolhomka.com/wp-content/uploads/2025/06/hero-bg.jpg') center/cover no-repeat;
	color:#fff;
	position:relative;
}
#inicio .hero-cards{
	margin-top:80px;     /* baja los cards */
	margin-bottom:-150px;/* los solapa sobre la sig. sección */
}
#inicio .hero-cards .card{
	min-height:300px;
	box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* ---------- SECCIÓN QUIÉNES SOMOS ---------- */
#quienes{margin-top:200px;}                 /* compensar el solapamiento */
#quienes .row.align-items-center{
	align-items:flex-start!important;       /* texto arriba, imagen centrada verticalmente */
}

/* ---------- ESTADÍSTICAS ---------- */
#estadisticas .stat-card{
	background:#fff;
	border-radius:.5rem;
	box-shadow:0 4px 15px rgba(0,0,0,.05);
}

/* ---------- Sección “Trabaja con nosotros” ---------- */
#carreras{
	background:#0b3c2f;
	color:#fff;
}
#carreras img{
	border:5px solid #fff;
}

/* ---------- Sección Cotización ---------- */
#contacto{
	background:#3eba90;
	color:#fff;
}
#contacto .card{
	background:#2bbd8c;
	border:none;
	max-width:700px;
}

/* ---------- Widget-footer (enlaces/contacto) ---------- */
.widget-footer img{max-height:200px}

/* ---------- Footer full-width ---------- */
footer.bg-dark a{text-decoration:none}


/* ============================================================
   TOP-BAR – Ajuste responsive (≤ 768 px)
   ============================================================ */
@media (max-width: 767.98px) {

  /* 1️⃣  Forzar disposición vertical */
  .top-bar .row{
    flex-direction: column !important;   /* apila los 3 elementos */
    align-items: center !important;      /* centra horizontalmente */
  }

  /* 2️⃣  Cada bloque ocupa toda la línea y se centra */
  .top-bar .col-md-4{
    width: 100% !important;              /* toma 100% de ancho */
    padding: .4rem 0 !important;         /* aire vertical */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 3️⃣  Iconos algo más pequeños */
  .top-bar .fas,
  .top-bar .fab{
    font-size: .9rem !important;
    margin-right: .35rem !important;
  }

  /* 4️⃣  Texto / enlace más compacto */
  .top-bar a,
  .top-bar span{
    font-size: .85rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;      /* evita saltos raros */
  }
}

/* 1) Línea verde de 2px como borde inferior del navbar */
.navbar.fixed-nav {
  position: fixed !important;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 1020;
  padding: 0;
  border-bottom: none;
}

/* Línea inferior que ocupa todo el ancho */
.navbar.fixed-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;            /* ahora cubre todo el ancho del nav */
  height: 2px;
  background-color: #3eba90;
  pointer-events: none;
}

/* Rombo centrado en la parte inferior */
.navbar.fixed-nav::before {
  content: "";
  position: absolute;
  bottom: -3px;           /* mitad de la altura del rombo */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background-color: #3eba90;
  pointer-events: none;
}