/* 🔥 asi funciona */

@font-face {
  font-family: 'MuseoSans';
  src: url('../../fonts/MuseoSans.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MuseoSans700';
  src: url('../fonts/MuseoSans-700.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'MuseoSans900';
  src: url('../fonts/MuseoSans-900Italic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}




body {
   margin-top: 0 !important;
       font-family: 'MuseoSans', sans-serif !important;
}

.custom-card-container {
    display: flex;
}



#destacado {

    background: none;
    height: 951.16px !important;
  
}



.espacio-responsive {
    display: none;
}





.container-1 {
    width: 500px;
    height: 300px;
    border: 0.25rem solid #3b344d;
    margin-left: 10%;
    margin-top: 5%;
    margin-right: 10%;
}




 

    .carousel-container {
position: relative;
width: 65%;
margin: auto;

  overflow: visible; /* 🔥 permite que sobresalga hacia arriba */
    min-height: 400px; /* altura inicial mínima */
    padding: 0 60px;   /* espacio suficiente a izquierda y derecha */
		
    }

    .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
        align-items: center; /* centra verticalmente */
		
		
		
    }

  .card1 {
     background: #eeeeef;
        border: 1px solid #ddd; /* Borde gris suave */

    flex: 0 0 35%;       /* más ancho que antes, ajusta según necesites */
    max-width: 750px;    /* límite de ancho */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;   /* permite que sobresalga */
         border-radius: 12px 12px 12px 12px; /* mismos bordes inferiores */
}




.card1 img {
     width: 130%;
    height: 10%;
    object-fit: cover; /* llena todo el espacio del card */
    background: #f2f2f2;
    display: block; /* elimina espacios indeseados */
    border-radius: inherit; /* si el card tiene bordes redondeados */
}
  
	
	.card1.active img {
    transform: scale(1.0);
    transition: transform 0.3s ease;
}

 .card1-footer {
    background: #066a88;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 15px 10px; /* reducido para permitir que la card suba */
    border-radius: 0 0 12px 12px;
    margin: 0; /* sin márgenes */
}

    
    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: white;
        border: 2px solid #ddd; /* borde gris suave */
        color: #066a88;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
        z-index: 10;
    }

    .arrow:hover {
        background: #f0f0f0;
    }

    .arrow.left {
        left: 0; /* pegado al card */
    }

    .arrow.right {
        right: 0; /* pegado al card */
    }



@media (min-width: 1600px) {
    .espacio-responsive {
        display: block;
        height: 110px; /* altura que quieras */
    

    }


    .titulo-destacados2 {
  color: #066a88 !important;
  margin-top: 45px !important;
  margin-bottom: 90px !important;
  font-size: 55px !important;
  font-weight: 700 !important; /* bold */
}

#imgArriba 
{

  height: 100px !important;
}

    
}

  /* 📱 versión para teléfonos */
@media (max-width: 768px) {

  .carousel-container {
  width: 100%;
  padding: 0; /* sin cortes en los lados */
  overflow-x: auto;   /* permite deslizar horizontalmente */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  display: flex;
}

.carousel {
  display: flex;
  gap: 10px; /* espacio entre cards */
  align-items: stretch; /* 🔑 hace que todos los cards respeten su alto */
}

.card1 {
  flex: 0 0 80%;        /* ocupa casi todo el ancho del móvil */
  margin: 10px 0;       /* separa arriba y abajo */
  background: #eeeeef;
  border: 1px solid #ddd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* evita recortes */
  overflow: hidden;
}

.card1 img {
  width: 100%;
  height: auto;          /* 🔑 se ajusta al contenido */
  max-height: 315px;     /* límite razonable */
  object-fit: cover;
  border-radius: inherit;
}

.container-1 {
  width: 90%;           
  height: auto;
  margin: 20px auto;    /* centrado con margen arriba y abajo */
}
}



@media (min-width: 769px) and (max-width: 1599px) {

  .espacio-responsive {
        display: block;
        height: 70px; /* altura que quieras */
    


    }


    .titulo-destacados2 {
  color: #066a88 !important;
  margin-top: 5px !important;
  margin-bottom: 45px !important;
     font-size:24px !important;
  font-weight: 700 !important; /* bold */
   font-family: 'MuseoSans700';
}

#imgArriba 
{

  height: 50px !important;
}





      .card1 {
     background: #eeeeef;
        border: 1px solid #ddd; /* Borde gris suave */

    flex: 0 0 30%;       /* más ancho que antes, ajusta según necesites */
    max-width: 650px !important;    /* límite de ancho */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;   /* permite que sobresalga */
         border-radius: 12px 12px 12px 12px; /* mismos bordes inferiores */
}

#destacado {

    background: none;
     height: 88vh !important;   
  
}


   .carousel-container {
position: relative;
width: 62% !important;
margin: auto;
 margin-left: 320px !important; /* 🔥 lo empuja hacia la derecha */
  overflow: visible; /* 🔥 permite que sobresalga hacia arriba */
    min-height: 400px; /* altura inicial mínima */
    padding: 0 20px !important;   /* espacio suficiente a izquierda y derecha */
		
    }

    .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
        align-items: center; /* centra verticalmente */
		
		
		
    }


   .arrow {
        position: absolute !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
     
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        background: white !important;
        border: 2px solid #ddd; /* borde gris suave */
        color: #066a88;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
        z-index: 10;
    }

}



.titulo-destacados2 {

        font-family: 'MuseoSans700' !important;
}