/* index-template.css: estilos mínimos para que index.html se vea bien con tus assets */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:#111827;}
a{text-decoration:none;}
.header-area{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:0;z-index:999;}
.header-upper{background:#111827;color:#fff;font-size:14px;}
.header-upper .inner-content{padding:10px 0;}
.header-upper a{color:#fff;opacity:.95;}
.main-menu{display:flex;gap:18px;align-items:center;}
.main-menu ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center;}
.main-menu ul li{position:relative;}
.main-menu ul li a{color:#111827;font-weight:600;padding:14px 6px;display:block;}
.logo-box img{max-height:54px;}
.service-card,.news-card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;height:100%;box-shadow:0 10px 30px rgba(0,0,0,.06);background:#fff;}
.service-card__icon{font-size:30px;margin-bottom:10px;}
.service-card__link,.news-card__link{display:inline-block;margin-top:10px;color:#ef4444;font-weight:700;}
.news-card__img img{width:100%;height:180px;object-fit:cover;border-radius:10px;}
.footer-area{background:#111827;color:#e5e7eb;padding:40px 0;margin-top:40px;}
.footer-area a{color:#e5e7eb;}
.footer-area a:hover{color:#ef4444;}
/* FIX LOGO HEADER: evita que crezca y rompa el layout */
.header-lower-left .logo img,
.sticky-header .logo img{
  display: block;
  max-width: 220px;     /* ajusta 180–260 según te guste */
  width: auto;
  height: auto;
  max-height: 62px;     /* controla el alto del header */
  object-fit: contain;
}

/* Asegura contenedor estable */
.header-lower-left .logo{
  display: flex;
  align-items: center;
  height: 70px;         /* si tu header es más alto, súbelo */
}

@media (max-width: 991px){
  .header-lower-left .logo img,
  .sticky-header .logo img{
    max-width: 180px;
    max-height: 70px
  }

.header-lawer-content{ display:flex; align-items:center; }
.header-lower-left{ flex:0 0 auto; }
.header-lower-right{ flex:10 1 auto; }
}
/* === LOGO CENTRADO HEADER === */

.logo-centered-wrapper{
    text-align:center;
    padding:15px 0;
}

.logo-centered-wrapper .logo img{
    max-height:70px;
    width:auto;
}

.header-lawer-content.logo-centered{
    display:block;
    text-align:center;
}

.header-lawer-content.logo-centered .main-menu{
  float:none;
  display:inline-block;
  margin-top:10px;
}
.header-lawer-content.logo-centered{
  display:block;
  text-align:center;
}

/* ===== Modern Hero Slider (Swiper) ===== */
.hero-slider { position: relative; }
.heroSwiper { width: 100%; height: 700px; }
.heroSwiper .swiper-slide { position: relative; }

.hero-slide-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-top: 260px;   /* ajusta si quieres el texto más arriba/abajo */
  color: #fff;
}

.hero-left{ text-align:left; }
.hero-right{ text-align:right; margin-left:auto; }

.hero-content .title{
  font-size: 18px;
  letter-spacing: .5px;
  opacity: .9;
  margin-bottom: 10px;
}

.hero-content .big-title{
  font-size: 58px;
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero-content .text{
  font-size: 16px;
  opacity: .92;
  max-width: 640px;
}

.hero-right .text{ margin-left:auto; }

.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next{
  color: #fff;
}

.heroSwiper .swiper-pagination-bullet{
  background: rgba(255,255,255,.65);
  opacity: 1;
}
.heroSwiper .swiper-pagination-bullet-active{
  background: #fff;
}

@media (max-width: 991px){
  .heroSwiper{ height: 560px; }
  .hero-content{ padding-top: 190px; }
  .hero-content .big-title{ font-size: 38px; }
  .hero-right{ text-align:left; margin-left:0; }
}



.heroSwiper .swiper-slide { overflow: hidden; }
.hero-slide-bg { z-index: 0; }
.hero-overlay { z-index: 1; }
.hero-content { z-index: 2; }
}




/* ==========================================================================
   SOLO COLORES - Header Gobierno Cuencamé (gris/rojo/azul)
   Pegar al final del CSS para que tenga prioridad
   ========================================================================== */

:root{
  --gm-gray-900:#2b2f36;
  --gm-gray-800:#3a404a;
  --gm-gray-700:#4a515d;
  --gm-gray-200:#e7eaee;
  --gm-gray-100:#f4f6f8;

  --gm-red:#c1121f;      /* acento principal */
  --gm-red-dark:#9b0e18;

  --gm-blue:#1d4ed8;     /* secundario */
  --gm-blue-dark:#163fae;

  --gm-text:#1f2328;
  --gm-white:#ffffff;
}

/* ===== Header upper (barra superior tipo captura) ===== */
.header-area .header-upper,
.header-area .header-upper .container,
.header-area .header-upper .outer-box{
  background: var(--gm-gray-800);
}

.header-area .header-upper p,
.header-area .header-upper a,
.header-area .header-upper .text-box p,
.header-area .header-upper .state-content,
.header-area .header-upper .state-content *{
  color: var(--gm-gray-100);
}

.header-area .header-upper .icon-box span,
.header-area .header-upper .icon-holder span,
.header-area .header-upper .flaticon-globe,
.header-area .header-upper .flaticon-technology,
.header-area .header-upper .flaticon-note{
  color: var(--gm-red);
}

/* Social icons */
.header-area .header-upper .sociallinks-style-one li a{
  color: var(--gm-gray-100);
}
.header-area .header-upper .sociallinks-style-one li a:hover{
  color: var(--gm-red);
}

/* ===== Header lower (zona blanca con menú) ===== */
.header-area .header-lower{
  background: var(--gm-white);
}

/* Links del menú */
.header-area .main-menu .navigation > li > a{
  color: var(--gm-gray-900);
}

/* Hover / activo */
.header-area .main-menu .navigation > li:hover > a,
.header-area .main-menu .navigation > li.current > a{
  color: var(--gm-red);
}

/* Submenús (dropdown) */
.header-area .main-menu .navigation > li > ul{
  background: var(--gm-gray-900);
}
.header-area .main-menu .navigation > li > ul > li > a{
  color: var(--gm-gray-100);
}
.header-area .main-menu .navigation > li > ul > li:hover > a{
  color: var(--gm-red);
}

/* ===== Search + carrito (solo colores) ===== */
.header-area .outer-search-box .seach-toggle i,
.header-area .cart_select button i{
  color: var(--gm-gray-900);
}
.header-area .outer-search-box:hover .seach-toggle i,
.header-area .cart_select button:hover i{
  color: var(--gm-red);
}
.header-area .cart_select button .color1{
  color: var(--gm-blue);
}

/* Search dropdown */
.header-area .outer-search-box .search-box{
  background: var(--gm-gray-900);
}
.header-area .outer-search-box .search-box input{
  background: var(--gm-white);
  color: var(--gm-text);
}
.header-area .outer-search-box .search-box button i{
  color: var(--gm-red);
}

/* ===== Botón "Free Enquiry" (solo color; no cambia texto) ===== */
.header-area .mainmenu-right-box .thm-btn{
  background: var(--gm-red);
  border-color: var(--gm-red);
  color: var(--gm-white);
}
.header-area .mainmenu-right-box .thm-btn:hover{
  background: var(--gm-red-dark);
  border-color: var(--gm-red-dark);
  color: var(--gm-white);
}

/* ===== Sticky header ===== */
.sticky-header{
  background: var(--gm-gray-900);
}
.sticky-header .main-menu .navigation > li > a{
  color: var(--gm-gray-100);
}
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a{
  color: var(--gm-red);
}

/* Dropdown en sticky */
.sticky-header .main-menu .navigation > li > ul{
  background: var(--gm-gray-900);
}
.sticky-header .main-menu .navigation > li > ul > li > a{
  color: var(--gm-gray-100);
}
.sticky-header .main-menu .navigation > li > ul > li:hover > a{
  color: var(--gm-red);
}

/* (Opcional) línea/acento bajo item activo si tu template la usa */
.header-area .main-menu .navigation > li.current > a:after,
.sticky-header .main-menu .navigation > li.current > a:after{
  background: var(--gm-red);
}

/* ==========================================================================
   STICKY HEADER estilo "barra azul" (con tus colores) + logo-icono.png
   SOLO CSS
   ========================================================================== */

:root{
  --gm-gray-900:#2b2f36;
  --gm-gray-800:#3a404a;
  --gm-gray-100:#f4f6f8;
  --gm-red:#c1121f;
  --gm-blue:#1d4ed8;
}

/* Sticky visible al hacer scroll (tu template normalmente lo activa con fixed) */
.sticky-header{
  background: var(--gm-gray-800) !important; /* franja sólida */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Alineación tipo captura */
.sticky-header .left-colum,
.sticky-header .right-colum{
  display: flex;
  align-items: center;
  height: 70px; /* ajusta a gusto */
}

/* Quita el logo del template (logo-2.png) sin tocar HTML */
.sticky-header .left-colum .logo img{
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Inyecta tu logo-icono.png por CSS */
.sticky-header .left-colum .logo a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  line-height: 1;
}

.sticky-header .left-colum .logo a::before{
  content:"";
  width: 54px;
  height: 54px;
  background: url("../img/logo-icono.png") center/contain no-repeat;
  display: inline-block;
}

/* Menú en blanco, centrado vertical */
.sticky-header .main-menu .navigation > li > a{
  color: var(--gm-gray-100) !important;
  font-weight: 700;
}

/* Hover y activo en rojo */
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a{
  color: var(--gm-red) !important;
}

/* Subrayado rojo bajo activo (como la captura) */
.sticky-header .main-menu .navigation > li > a{
  position: relative;
}
.sticky-header .main-menu .navigation > li.current > a::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -12px;
  width: 100%;
  height: 3px;
  background: var(--gm-red);
  border-radius: 2px;
}

/* Dropdown (si se abre) */
.sticky-header .main-menu .navigation > li > ul{
  background: var(--gm-gray-900) !important;
}
.sticky-header .main-menu .navigation > li > ul > li > a{
  color: var(--gm-gray-100) !important;
}
.sticky-header .main-menu .navigation > li > ul > li:hover > a{
  color: var(--gm-red) !important;
}

/* Botón hamburguesa en móvil (si aparece) */
.sticky-header .navbar-toggle .icon-bar{
  background: var(--gm-gray-100) !important;
}

/* ===== FIX: Sticky header (usar fixed-header en el PADRE, no en .sticky-header) ===== */

/* Ojo: tu index-template.css tenía .header-area { position:sticky } y eso puede estorbar.
   Lo regresamos a comportamiento normal del template */
.header-area{
  position: relative !important;
  top: auto !important;
}

/* No ocultes por display:none, el template oculta por opacity/visibility */
.sticky-header{
  display: block !important;          /* <- clave */
  background: var(--gm-gray-800) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Estilo barra: alto/alineación */
.sticky-header .left-colum,
.sticky-header .right-colum{
  display:flex;
  align-items:center;
  height:70px;
}

/* Menú en blanco, activo/hover rojo */
.sticky-header .main-menu .navigation > li > a{
  color: var(--gm-gray-100) !important;
  font-weight: 700;
}
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a{
  color: var(--gm-red) !important;
}

/* Subrayado rojo como la captura */
.sticky-header .main-menu .navigation > li.current > a:after{
  background: var(--gm-red) !important;
  height: 3px;
  top: auto;
  bottom: -12px;
  opacity: 1 !important;
}.fb-page,
.fb-page iframe {
  width: 100% !important;
}
.fb-page,
.fb-page iframe {
  width: 100% !important;
}


html, body { height: 100%; }

body{
  /* Mantén el fondo base por si no carga la imagen */
  background: #f4f6f8;
  position: relative;
}

/* Imagen fija detrás de TODO */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;                 /* siempre detrás */
  background: url("../img/background.jpg") center/cover no-repeat;
  background-attachment: fixed;
  transform: translateZ(0);
}

/* Overlay para que el contenido se lea bien (ajusta opacidad) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(244, 246, 248, .86); /* 0.78–0.92 recomendado */
}

/* Si tu template tiene wrappers con fondo blanco duro y quieres que “respire” el background,
   comenta esto; si no, déjalo así para que se vea limpio */
.page-wrapper,
.boxed_wrapper,
.main-content{
  background: transparent !important;
}

/* ===== BACKGROUND UNIVERSAL ===== */

body{
  background: url("../img/background.jpg") center center no-repeat fixed !important;
  background-size: cover !important;