/* Fixed header */
.header-style {
  background-color: #007bff;
  color: #fff;
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Icon styling */
.icon-style, .social-icon {
  font-size: 1rem;
  color: #fff;
  transition: transform .2s;
}
.social-icon:hover {
  transform: scale(1.2);
}

/* Link hover in navbar */
.navbar-nav .nav-link:hover {
  color: #007bff !important;
}
.header-style .container {
  flex-wrap: nowrap !important;
}

/* Header – no permitir wrapping en texto ni iconos */
.header-style .contact,
.header-style .social-media {
  white-space: nowrap;
  overflow-x: auto;
}

/* Opcional: etiquetas y enlaces nunca rompen línea */
.header-style .contact label,
.header-style .social-media a {
  white-space: nowrap;
}

/* Media tweaks */
@media (max-width: 767.98px) {
  .header-style .row > [class*="col-"] {
    padding-bottom: .5rem;
  }
}

/* Reducir tamaño de texto en el header */
.header-style .contact label {
  font-size: 0.75rem;
}
.header-style .icon-style,
.header-style .social-icon {
  font-size: 0.75rem;
}

/* Tamaño marca */
.navbar-brand.brand-text{
  font-size: 1.05rem;
  line-height: 1.2;
}
@media (max-width: 575.98px){
  .navbar-brand.brand-text{
    font-size: 0.65rem !important;
  }
}

/* Enlaces navbar */
.navbar-nav .nav-link {
  font-size: 0.85rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (max-width: 767.98px) {
  .header-style .contact label,
  .header-style .icon-style,
  .header-style .social-icon {
    font-size: 0.65rem;
  }
  .navbar-brand { font-size: 0.76rem !important; }
  .navbar-nav .nav-link { font-size: 0.8rem; }
}

/* =========================================================
   SECCIÓN INICIO
   ========================================================= */
.inicio-overlay{
  position:absolute;
  inset:0;
  background:#000;
  opacity:.35;
  z-index:1;
}
.inicio-section{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  margin-bottom: 0 !important;   /* elimina espacio extra */
  padding-bottom: 0 !important;
}
.hero-swiper{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  margin-bottom:0 !important;
}
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  width:100%;
  height:100%;
}
.hero-swiper video,
.hero-swiper img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

/* Contenedor tarjetas */
.cards-container{
  position:absolute;
  z-index:2;
  inset-inline:0;
  bottom:3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  padding:0 1rem;
}
.cards-container .card{
  background:#fff;
  border:none;
  border-radius:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:1.75rem 1.5rem;
  width:300px;
  max-width:100%;
  transition:transform .25s;
  text-align:center;
}
.cards-container .card:hover{transform:translateY(-6px);}
.cards-container .card1{width:400px;}
.icon-blue{color:#0d6efd;}
.btn-leer-mas{color:#0d6efd;font-weight:500;text-decoration:none;}
.btn-leer-mas:hover{text-decoration:underline;}

@media (min-width:992px){
  .cards-container{top:50%;bottom:auto;transform:translateY(-50%);}
}
@media (max-width:991.98px){
  .cards-container{position:static;margin-top:2rem;transform:none;}
  .cards-container .card1{flex:1 1 100%;max-width:600px;margin-inline:auto;}
  .cards-container .card{flex:1 1 45%;width:auto;}
}
@media (max-width:575.98px){
  .cards-container{flex-direction:column;align-items:center;gap:1.25rem;}
  .cards-container .card,
  .cards-container .card1{flex:none;width:90%;max-width:22rem;}
  .cards-container .card h3{font-size:1.25rem;}
  .cards-container .card p{font-size:1rem;line-height:1.35;}
}

/* Reducir espacio entre #inicio y la siguiente sección */
#inicio + section {
  margin-top: 1rem !important; /* pequeño respiro */
}

/* =========================================================
   SECCIÓN PROMOCIONALES
   ========================================================= */
.promocionales-section {
  position: relative;
  height: auto;
  margin-top: 10px;
  padding: 60px 0;
  gap: 10px;
  background: #ffffff;
}
.promocionales-section .container {
  max-width: 1200px;
  margin-top: 30px;
}
.promocionales-section .video-item {
  cursor: pointer;
  padding: 10px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.promocionales-section .video-thumbnail {
  width: 150px;
  height: 100px;
  border-radius: 8px;
  margin-right: 15px;
}
#video-container {
  box-shadow: 0 0 15px rgba(0, 52, 89, 0.1);
  border-radius: 8px;
  padding: 10px;
  height: 460px;
}
iframe { margin-top: 5px; }
.promocionales-section video,
.promocionales-section iframe {
  border-radius: 8px;
  width: 100%;
  height: auto;
  box-shadow: 0 0 15px rgba(0, 52, 89, 0.1);
}
.promocionales-section iframe {
  height: 500px;
  object-fit: cover;
}
.promocionales-section .list-group {
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 52, 89, 0.1);
}
.promocionales-section .list-group-item {
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
  font-weight: bold;
  color: #000000;
  background: #ffffff;
}
#main-title {
  margin-top:90px;
  font-size: 24px;
  font-weight: bold;
  color: #003459;
  margin-bottom: 20px;
  text-align: center;
}
.promocionales-section .video-description {
  font-size: 14px;
  color: #000000;
  margin-top: 10px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  color: #444444;
  background-color: #f8f9fb;
  font-size: 14px;
  padding: 40px 0 0 0;
  position: relative;
}
.footer .icon { color: #106eea; margin-right: 15px; font-size: 24px; line-height: 0; }
.footer h4 { font-size: 16px; font-weight: 700; margin-bottom: 15px; }
.footer .address p { margin-bottom: 0px; font: arial; }
.footer .social-links a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, #444444, transparent 50%);
  font-size: 16px; color: color-mix(in srgb, #444444, transparent 50%);
  margin-right: 10px; transition: 0.3s;
}
.footer .social-links a:hover { color: #106eea; border-color: #106eea; }
.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, #444444, transparent 90%);
  font: Roboto;
}
.footer .copyright p { margin-bottom: 0; font: Roboto; }
.footer .credits { margin-top: 5px; font-size: 13px; }
/* Reducir aún más el espacio entre #inicio y #nosotros */
#nosotros {
  margin-top: 0 !important;   /* elimina espacio extra */
  padding-top: 1rem !important; /* si quieres un poco de aire; ajusta o pon 0 */
}

/* Opcional: si quieres que todas las secciones queden más pegadas */
section {
  margin-top: 0 !important;
  padding-top: 0 !important; /* ajusta según necesites */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important; /* ajusta según necesites */
}


/* Quitar cualquier espacio/margen del carrusel y el video */
#inicio .hero-swiper,
#inicio .hero-swiper .swiper-slide,
#inicio .hero-swiper video {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 0 !important;  /* elimina espacios "inline" */
}

/* Forzar que la sección #inicio no deje espacio al siguiente */
#inicio {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

