@charset "utf-8";
/* CSS Document */
/*=============================================
ESCRITORIO (XL revisamos en 1366px en adelante)
=============================================*/
@font-face {
  font-family: 'MiFuente';
  src: url('PaytoneOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  /*font-family: 'Paytone_One', sans-serif;
  /*font-family: 'Chewy', cursive;*/

  font-family: 'Poppins', sans-serif;
}

  /* Oculta la barra superior gris que Google inyecta */
  .google_translate_element,
  .goog-te-banner-frame.skiptranslate {
    display: none !important;
  }

  /* Evita que Google mueva el contenido hacia abajo */
  body {
    top: 0px !important;
    position: static !important;
  }

  /* Oculta el fondo gris que aparece cuando se traduce */
  .google_translate_element,
  .goog-te-spinner-pos,
  .goog-te-balloon-frame {
    display: none !important;
  }

  /* Evita el iframe flotante pequeño en la esquina inferior */
  .google_translate_element,
  iframe.goog-te-banner-frame {
    display: none !important;
  }

  /* Elimina fondo o sombra del traductor flotante si aparece */
  .google_translate_element,
  .goog-te-gadget-icon {
    display: none !important;
  }







 html {
    position: relative !important;
  }

  body {
    top: 0px !important;
    position: static !important;
  }

body {
  top: 0px !important;
}




body {
  font-family: 'Poppins', sans-serif;
}
html {
  scroll-behavior: smooth;
   overflow-x: hidden;
}
body{
	
	 overflow-x: hidden;
    /*background-color: rgb(246,236,203,1);*/
     color: #034b94;
     }
.div-idiomas{
  background: #034b94;
}
header{
  color: #034b94;;
  font-weight: bold;
 
}
.img-icon-res{
  height:150px;
  width: auto;
}

section#programacion img {
  max-height: 500px;
  object-fit: contain;
}
section {
  padding-top: 60px;
  padding-bottom: 60px;
}
.textPlano{
  font-size: 14px;
}
.textPlanoInput{
  font-size: 3rem;
}
.div-text-img{
   background: url("../imagenes/fondoR.png") no-repeat center/cover;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 3rem;
  padding-bottom: 2rem;

}
.div-text-h{
  text-align: justify;
  padding-left: 30px;
  padding-right: 30px;
}
.c-counter{
   border-bottom: solid 1px #007bff2e;
  
}
.modalFuera {
  position: fixed;
  /*top:0px;*/
  left: 0px;
  background:rgba(0,0,0,0.7);  /*linear-gradient(90deg, rgba(0,175,239,0.9) 0%, rgba(59,96,170,0.9) 50%, rgba(166,80,157,0.8) 100%, rgba(166,80,157,0.6) 100%);*/
  color: #fff;
  /*border-radius: 5px 5px 5px 5px;*/
   width: 100vw;
  height: 100vh;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.4s;
  /*padding-bottom: 30px;*/
  align-content: center;
  align-items: center;

}

.esconderModal {
  top: -20000px;
  
}
.verModal {
  top: 0px;
}
.mobileMenu{
  display: none;
}

.modal-contenido {
  background: #fff;
  width: 100%;
  max-width: 1140px; /* como modal-xl */
  max-height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}

/* Asegura que el carrusel se ajuste bien dentro */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.carousel-inner img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*************************************************************************
menu viejo
*************************************************/
.nav-ico img{
     height: 100px;
    width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.nav-link {
  color: inherit !important;          /* Hereda color del contenedor */
  /*text-decoration: none !important;   /* Qita subrayado */
   
}

.item-text{
  font-weight:700;
  padding-bottom: 0px;
  border-bottom: solid 1px #ffffff;
  font-size: 14px;

}
.item-text:hover{
   font-weight:700;
   border-bottom: solid 1px #007bff2e;

}






/******************************************************************
MENU ACTUAL
***************************************************************/
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 1.3rem;
    color: #333;
  }
  .navbar-nav .nav-link:hover {
    color: #007bff;
  }
  .offcanvas-body .nav-link {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  .mobileMenu img{
     width: 30px;
     height: 30px;
  }
  .menu-div{
  display: block;
}
  /**************************************************************
  BANNER PRINCIPAL
  ******************************************************/


.div-banner-principal img{
  width: 100%;
  height: auto;
  max-height: 100vh;
  }

.card-body img{
  width: 253px;
  height: 253px;
    transition: all 0.3s ease; /* Para una transición suave */
  cursor: pointer;
}
.card-body img.enlarged {
  width: 260px;
  height: 260px;
}
.offcanvas .nav-link {
  font-size: 1.2rem;
  padding: 0.5rem 0;
}

/********************************************************************
TEXTO FERIA NACIONAL DE LA GANADERIA
**************************************************************/
.div-text-principal{
  text-align: justify;
  
}

/*=============================================
    PROGRAMACION 
=============================================*/
.div-relativo{
  position: relative;
}


/* Estilo para la burbuja */
.card-body-img {
      width: 100%;
      width: 220px;

      height: auto;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .card-body-img.enlarged {
      max-width: 250px;
    }

    .div-burbuja {
            margin-top: 10px;
            padding: 20px;
            border-radius: 15px;
            background-color: #fdf2e9; /* Color de fondo */
            position: absolute;
            bottom: -750px; /* Ajusta según altura del contenido */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
            border: 2px solid #fdf2e9;
            animation: fadeIn 0.3s ease;
            text-align: left;
            width: 700px;   
           /* height: 700px;           /* Más responsivo que 200% */
           /* max-width: 600px;        /* Límite en pantallas grandes */
            z-index: 10;
}

/* Flecha que apunta a la imagen */
.div-burbuja::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 10px solid #fdf2e9;
}

/* Imágenes dentro del carrusel */
/*.div-burbuja .carousel-inner img {*/
.img-carrusel-prog{
  width: 600px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

   

    .div-burbuja .cerrar {
      position: absolute;
      top: 5px;
      right: 10px;
      background: transparent;
      border: none;
      font-size: 28px;
      cursor: pointer;
      color: #333;
      font-weight: bold;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    
/*=============================================
    CARRUSEL PUEBLITO CORDOBES
=============================================*/

.carousel-indicators {
  position: static;
  margin-top: 1rem;
  justify-content: center;
}

.carousel-indicators [data-bs-target] {
  width: 20px;           /* Más ancho */
  height: 20px;          /* Más alto */
  border-radius: 50%;    /* Círculo perfecto */
  background-color: #034b94; /*#007bff; /* Azul Bootstrap */
  opacity: 0.5;          /* Semitransparente por defecto */
  border: none;
  margin: 0 8px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-indicators .active {
  opacity: 1;
  transform: scale(1.2); /* Efecto de agrandamiento al estar activo (opcional) */
}

.custom-carousel-control {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0;
  color: #e9ded6; /*#004080; /* color aplicado a stroke gracias a currentColor */
}

/* Estilo del SVG */
.carousel-icon {
  width: 60px;  /* más grande */
  height: 60px;
}

/* Hover opcional */
.custom-carousel-control:hover {
  color: #e9ded6; 
}

/* Izquierda fuera del carrusel */
.carousel-control-prev {
  left: -120px;
}

/* Derecha fuera del carrusel */
.carousel-control-next {
  right: -120px;
}

/* En móviles, meter flechas dentro */
@media (max-width: 767.98px) {
  .carousel-control-prev {
    left: 10px;
  }
  .carousel-control-next {
    right: 10px;
  }
}




/*=============================================
     GALERIA DE TURISMO 
=============================================*/

.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7rem 1rem;  /* 2rem vertical, 1rem horizontal */
  padding: 0.5rem;
  
  
}

.tarjeta-imagen {
  width: 100%;
  max-width: 410px;
  margin: 0.5rem;
  border-radius: 20px;
  /*overflow: hidden;*/
 /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
 /* transition: transform 0.2s ease;*/
  display: flex;
  flex-direction: column;

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

  text-align: center; 
  border: none;  
              /* Centra el contenido si hay texto */
     
}
.marco1{
  position:absolute;
  top: -5px;
  /*left:10px;*/
  left: 10px;
  
 /* width: 95%;*/
 width: 95%;
  height: 98%;
  /*max-width: 350px;
  /*background: url("../imagenes/marco-turismo.png") no-repeat center/cover;*/
  background: url("../imagenes/marco1.png") no-repeat center/cover;
  /*border-radius: 10px 10px 10px 10px;*/
}
.marco2{
  position:absolute;
  top:-5px;
  left:10px;
  
  /*width: 100%;
  height: 102%;*/

  width: 95%;
  height: 98%;
  /*max-width: 350px;
  /*background: url("../imagenes/marco-turismo.png") no-repeat center/cover;*/
  background: url("../imagenes/marco2.png") no-repeat center/cover;
  /*border-radius: 10px 10px 10px 10px;*/
}
.card-text{
 position: absolute;
  bottom: -50px;
  left: 50%; /* mover al centro horizontal */
  transform: translateX(-50%); /* centrar desde el medio */
  background: #FFF;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

}
.ver-mas-turismo{
  color: #004080;
}
/*.tarjeta-imagen:hover {
 transform: scale(1.02);
}*/

.imagen-contenedor {
  width: 100%;
  aspect-ratio: 4 / 3; /* ✅ Mantiene la proporción automática */
  overflow: hidden;
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.tarjeta-imagen .card-text {
  font-size: 1rem;
  color: #333;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.text-noms{
   background-color: #004080;
  color: white;
  /*padding: 0.75rem 1.5rem;*/
  padding:5px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 600;
  width: 100%;
  /*border-radius: 6px;
  transition: background-color 0.3s ease;*/

  border-radius: 30px;
 
  
}


.img-carrusel-prog {
  width: 100%;  
  height: 600px;
  object-fit: cover;
  border-radius: 20px;

  
}

.modal-body {
  max-height: 90vh; /* o 80vh, lo que prefieras */
  overflow-y: auto;
}











/*=============================================
      CARRUSEL DE IMAGENES PATROCINADORES 
=============================================*/
.carousel2-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel2-track {
  display: flex;
  animation: scroll 40s linear infinite;
  width: max-content;
}

.carousel2-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.img-slider {
  max-height: 250px;
  object-fit: contain;
  padding: 10px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


    */
/*=============================================
      ALIADOS
=============================================*/

 #aliados img {
    max-height: 80px;
    object-fit: contain;
    transition: transform 0.3s ease;
  }

  #aliados a:hover img {
    transform: scale(1.05);
  }

  #aliados p {
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 0;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
  }

  .tab-content{
    height:250px;
    
  }
 
  .nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: #004080;
  transition: width 0.6s ease;
}

.nav-item.tab-activo::after {
  width: 100%;
}
.div-text{
  width: 300px;
}
.div-text img{
  width: 300px;
  height: auto;
}


/*=============================================
      contadores
=============================================*/
.counter {
 /* font-size: 3rem;*/
  font-weight: bold;
  /*color: #333;*/
}
.div-idiomas img{
  width: 30px;
  height: auto;
}
a{
  text-decoration: none;
}
a img{
  width: 40px;
  height: auto;
}
.btn-custom {
  background-color: #004080;
  color: white;
  /*padding: 0.75rem 1.5rem;*/
  padding:15px;
  padding-left: 35px;
  padding-right: 35px;

  font-weight: 600;
  /*border-radius: 6px;
  transition: background-color 0.3s ease;*/

  border-radius: 30px;
}

.btn-custom2 {
  background-color: #fff;
  color:  #004080;
  /*padding: 0.75rem 1.5rem;*/
  padding:15px;
  padding-left: 35px;
  padding-right: 35px;

  font-weight: 600;
  /*border-radius: 6px;
  transition: background-color 0.3s ease;*/

  border-radius: 30px;
}

.btn-custom:hover {
  background-color: #0066cc;
  color: #fff;
}
.div-img-pueblito img{
  width: 100%;
  height: auto;
  max-height: 90dvh;
}
 .div-de-fotter {
  overflow: hidden;
}

.footer-img {
  display: block;
  width: 100%;
  height: auto;
}

.div-redes-sociales-footer {
  max-width: 100%;
  padding: 0rem;
  top: 25% !important; /* o ajusta al gusto: 30%, 25%, etc. */
}

 

.div-text-turismo{
  text-align: center;
}

/*#rutas img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease-in-out;
}*/
@media (max-width: 991.98px) {
  .textPlano{
     font-size: 12px;
  }
  .textPlanoInput{
    font-size: 26px;
  }
  .menu-div{
     position: fixed;
      top: 0px;
      background:#FFF;
    
      height: 100dvh;
      z-index: 110;
      overflow-x: hidden;
      overflow-y: auto;
      
      padding-left: 15px;
      padding-right: 15px;
 
  }
  .nomenu{
     right: -200000px;
     transform: translateY(-20000x);
  }
  .simenu{
    right: -0px;
    transform: translateY(0x);

  }
  .item-text{
      font-weight:bold;
      padding: 10px;
      border-bottom: solid 1px #007bff31;
 

    }
.tarjeta-imagen {
    max-width: 100%;
    max-width: 350px;
  }

  .imagen-contenedor {
    aspect-ratio: 4 / 3;
  }
   .footer {
  padding: 10px;
  
  max-height: 100vh;                    /* Ajusta el color del texto si lo necesitas */
}
.div-burbuja {
     bottom: -500px; /* Ajusta según altura del contenido */
}

.carousel-indicators [data-bs-target] {
  width: 15px;           /* Más ancho */
  height: 15px;          /* Más alto */
  
}
.carousel-indicators .active {
  opacity: 1;
  transform: scale(1); /* Efecto de agrandamiento al estar activo (opcional) */
}
/********************************************************************
TEXTO FERIA NACIONAL DE LA GANADERIA
**************************************************************/
.div-text-principal{
  text-align: justify;
  padding-left: 10px;
  padding-right: 10px;
}
.card-text{
 position: absolute;
  bottom: -80px;
  left: 50%; /* mover al centro horizontal */
  transform: translateX(-50%); /* centrar desde el medio */
  background: #FFF;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

}
/* Flecha izquierda */
.carousel-control-prev-icon::after {
  
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 12L6.5 8L10.5 4' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  position: absolute;
  top: -10%;
  left: 0px;
   
}

/* Flecha derecha */
.carousel-control-next-icon::after {
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 4L9.5 8L5.5 12' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  position: absolute;
            right: -0px;
            top: -10%;

  
}
.div-redes-sociales-footer {
  max-width: 100%;
  padding: 0.5rem;
  left: 55% !important;
  top: 55% !important; /* o ajusta al gusto: 30%, 25%, etc. */
}



}

@media (max-width: 575.98px) {
  /* Estilos para pantallas muy pequeñas */
  .mobileMenu{
      display: block;
  }
.menu-div{
    
  width: 100%;
  
  }
  .nomenu{
   right: -200000px;
     transform: translateY(-20000x);
  }
  .simenu{
    right: -0px;
    transform: translateY(0x);

  }
  .div-text-h{
  text-align: justify;
  padding-left: 12px;
  padding-right: 12px;
}
  .div-burbuja {
    
      width: 100%;
      z-index: 10;
      left: 50%;
      bottom: -200px;

      
    }
     .tarjeta-imagen {
        max-width: 100%;
        max-width: 310px;
    }
   .div-text-turismo{
  text-align:justify;
}
.carousel2-slide {
        width: 100px;
      }

    /*  .img-slider {
        height: 120px;
        width: auto;
      }*/
      .img-slider {
      max-height: 120px;
      object-fit: contain;
      padding: 10px;
      }
      /* Estilo del SVG */
      .carousel-icon {
        width: 40px;  /* más grande */
        height: 40px;
      }
.div-text-principal{
  padding-left: 15px;
  padding-right: 15px;

}
.img-icon-res{
  height: 120px;
  width: auto;
}

.div-redes-sociales-footer {
  max-width: 100%;
  padding: 0.5rem;
  left: 60% !important;
  top: 28% !important; /* o ajusta al gusto: 30%, 25%, etc. */
}
.turismo-carrusel{
  padding-left: 10px;
  padding-right: 10px;
}

 

}

/* SM: Pequeño (teléfonos en horizontal) - Desde 576px hasta 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Estilos para teléfonos medianos */
  .mobileMenu{
       display: block;
  }
  .menu-div{
    
    width: 70%;
    
  }

  .nomenu{
   right: -200000px;
     transform: translateY(-20000x);
  }
  .simenu{
    right: -0px;
    transform: translateY(0x);

  }
 .div-burbuja {
    
      width: 120%;
      z-index: 10;
       left: 50%;
        bottom: -100px;
     }
    .div-text-turismo{
  text-align:justify;
}
.carousel2-slide {
        width: 100px;
      }

      .img-slider {
          max-height: 120px;
          object-fit: contain;
          /*padding: 30px;*/
      }
      /* Estilo del SVG */
      .carousel-icon {
        width: 40px;  /* más grande */
        height: 40px;
      }
     .img-icon-res{
        height: 120px;
        width: auto;
    }

    .div-redes-sociales-footer {
        max-width: 100%;
        padding: 0.5rem;
        left: 55% !important;
        top: 25% !important; /* o ajusta al gusto: 30%, 25%, etc. */
      }
}

/* MD: Mediano (tablets) - Desde 768px hasta 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Estilos para tablets */
  .mobileMenu{
      display: block;
  }
.menu-div{
    
  width: 40%;
  
  }
  .nomenu{
   right: -200000px;
     transform: translateY(-20000x);
  }
  .simenu{
    right: -0px;
    transform: translateY(0x);

  }
  .div-burbuja {
    
      width: 130%;
      z-index: 10;
      left: 50%;
       bottom: -230px;

      
    }
     .img-slider {
        height: 200px;
        width: auto;
        
      }

      .div-redes-sociales-footer {
  max-width: 100%;
  padding: 0.5rem;
  left: 55% !important;
  top: 28% !important; /* o ajusta al gusto: 30%, 25%, etc. */
}
  
}

/* LG: Grande (laptops pequeños) - Desde 992px hasta 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Estilos para laptops pequeños */

  .div-burbuja {
    
      width: 110%;
      z-index: 10;
      left: 50%;
       bottom: -420px;

      
    }
     .img-slider {
        height: 230px;
        width: auto;
        
      }
  
  
}

/* XL: Extra grande (escritorios) - Desde 1200px hasta 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Estilos para monitores grandes */
 
}