body {
  font-family: system-ui, Arial, sans-serif;
}

h2 {
  font-weight: 600;
}

section {
  scroll-margin-top: 80px;
}

.navbar-brand span {
  color: #ffc107;
}
.scrollToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.navbar-collapse.open {
  display: block !important;
}

.animate {
  opacity: 0;
  transition: all 0.6s ease;
}

.animate.animated {
  opacity: 1;
  transform: translateY(0);
}
.banner {
  background: url('img/banner.jpg') center center / cover no-repeat;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imageBanner {
  height: 100vh;
  min-height: 500px;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.overlay {
  background: rgba(0,0,0,0.5);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;
  color: white;
}

.content h1 {
  font-size: 3rem;
  font-weight: bold;
}

.content p {
  font-size: 1.5rem;
}
.banner::before {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5); /* oscurece la imagen */
}

.banner h1 {
  position: relative;
  color: #fff;
  font-size: 64px;
  font-weight: bold;
  z-index: 2;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}
/* ===== SLIDER PROFESIONAL ===== */
.slider {
  width: 100%;
  height: 90vh;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 90vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.slider,
.slide {
  height: 100vh;
  min-height: 500px;
}

.slide {
  background-size: cover;
  background-position: center center;
}



.overlay {
  background: rgba(0, 0, 0, 0.55); /* clave para que se vea el texto */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;
  color: #fff;
}

.content h1 {
  font-size: 60px;
  font-weight: bold;
  letter-spacing: 3px;
}

.content p {
  font-size: 22px;
  margin-top: 10px;
}

.blogimg_container {
    width:100%;    
    overflow: hidden;
    margin-bottom: 8px;
}
.blog_img img {
  height: 100%;
  width:100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
  transform: translate3d(0px, 0px, 0px);
}
.blog_img:hover img {
  opacity: 0.8;
  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -moz-transform:scale(1.1); /* Firefox */
  -ms-transform:scale(1.1); /* IE 9 */
  -o-transform:scale(1.1); /* Opera */
  transform:scale(1.1);
}
.img-box {
  height: 250px;
}

@media (min-width: 768px) {
  .img-box {
    height: 300px;
  }
}

@media (min-width: 1200px) {
  .img-box {
    height: 350px;
  }
}
#mision .card {
  transition: all 0.3s;
}

#mision .card:hover {
  transform: translateY(-8px);
}
#aboutUs {
  background: #f8f9fa;
}

#aboutUs .divider {
  width: 70px;
  height: 4px;
  background: #0d6efd;
}
/* =========================================
   BANNER INTERNO
========================================= */

.page-banner{
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../img/banner.jpg') center/cover no-repeat;
  min-height: 320px;
  display:flex;
  align-items:center;
  text-align:center;
  color:#fff;
}

.banner-content h1{
  font-size:3rem;
  font-weight:800;
  margin-bottom:15px;
}

.banner-content p{
  font-size:1.1rem;
  max-width:700px;
  margin:auto;
}

/* =========================================
   TARJETAS
========================================= */

.section-card{
  background:#fff;
  border-radius:18px;
  padding:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.section-title{
  text-align:center;
  margin-bottom:40px;
}

.section-title h2{
  font-weight:800;
  color:#1f2937;
  margin-bottom:10px;
}

.section-title p{
  color:#6b7280;
}

.info-card{
  background:#f8fafc;
  border-radius:16px;
  padding:25px;
  height:100%;
  display:flex;
  gap:20px;
  transition:.3s;
  border:1px solid #e5e7eb;
}

.info-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.icon-box{
  width:70px;
  height:70px;
  min-width:70px;
  border-radius:15px;
  background:#0d6efd;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

.info-content h4{
  font-weight:700;
  margin-bottom:10px;
  color:#111827;
}

.info-content p{
  color:#6b7280;
  margin-bottom:18px;
}

.btn-epo{
  background:#0d6efd;
  color:#fff;
  border-radius:10px;
  padding:10px 20px;
  font-weight:600;
  border:none;
}

.btn-epo:hover{
  background:#0b5ed7;
  color:#fff;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

  .banner-content h1{
    font-size:2.2rem;
  }

  .section-card{
    padding:25px;
  }

  .info-card{
    flex-direction:column;
    text-align:center;
  }

  .icon-box{
    margin:auto;
  }

}
/* =========================================
   TITULOS COLORIDOS
========================================= */

.section-title h2{
  font-weight:800;
  color:#0d47a1;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

.section-title h2::after{
  content:'';
  width:80px;
  height:4px;
  background:linear-gradient(90deg,#0d6efd,#00bcd4);
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  border-radius:10px;
}

/* TITULOS DE TARJETAS */

.info-content h4{
  color:#1565c0;
  font-weight:700;
  margin-bottom:12px;
}

/* =========================================
   LINKS SUBRAYADOS
========================================= */

a{
  text-decoration:underline;
  transition:.3s;
}

a:hover{
  text-decoration:none;
}

/* LINKS DE BOTONES */

.btn-epo{
  text-decoration:none !important;
}

.btn-epo:hover{
  text-decoration:none !important;
}

/* LINKS NORMALES */

.info-content a:not(.btn-epo){
  color:#0d47a1;
  font-weight:600;
}

.info-content a:not(.btn-epo):hover{
  color:#1976d2;
}

/* =========================================
   TITULOS GENERALES DEL SITIO
========================================= */

h1, h2, h3{
  letter-spacing:.5px;
}

h1{
  color:#ffffff;
}

h2{
  color:#0d47a1;
}

h3{
  color:#1565c0;
}
/* =========================================
   BANNER
========================================= */

.page-banner{
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../img/banner.jpg') center/cover no-repeat;

  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  color:#fff;
}

.banner-content{
  width:100%;
  max-width:800px;
  margin:auto;
}

.banner-content h1{
  font-size:3.2rem;
  font-weight:800;
  margin-bottom:20px;
  color:#fff;
}

.banner-content p{
  font-size:1.2rem;
  line-height:1.8;
  color:#f1f1f1;
}
.img-70 {
  width: 70%;          /* ocupa el 70% del ancho del contenedor */
  max-width: 70%;      /* asegura que no se expanda más */
  display: block;      /* convierte la imagen en bloque */
  margin: 0 auto;      /* centra horizontalmente */
}

.logo-banner {
  width: 120px;          /* tamaño base para móviles */
  height: auto;
  margin: 0 auto 20px;
  display: block;
  opacity: 0.85;         /* transparencia */
  filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.5));
}

/* Pantallas medianas (tablets) */
@media (min-width: 768px) {
  .logo-banner {
    width: 180px;
  }
}

/* Pantallas grandes (desktop) */
@media (min-width: 1200px) {
  .logo-banner {
    width: 250px;
  }
}

/* Imágenes del carrusel */
.carousel-item img {
  width: 70%;             /* tamaño base para móviles */
  height: 70%;
  object-fit: cover;        /* mantiene proporción y recorta lo que sobra */
  object-position: center;
  margin: 0 auto;
  border-radius: 8px;
}

/* Pantallas medianas (tablets) */
@media (min-width: 768px) {
  .carousel-item img {
    width: 70%;
    height: 70%;
  }
}

/* Pantallas grandes (desktop) */
@media (min-width: 1200px) {
  .carousel-item img {
    width: 60%;
    height: 60%;
  }
}

/* Botones del carrusel en azul y pegados al cuadro */
.carousel-control-prev,
.carousel-control-next {
  width: 10%;               /* reduce el ancho del área de los botones */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;   /* quitamos el ícono por defecto */
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  font-size: 40px;
  color: #0d6efd;           /* azul Bootstrap */
}

.carousel-control-prev-icon::after {
  content: '‹';
}

.carousel-control-next-icon::after {
  content: '›';
}