*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  position: relative;
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Segoe UI',sans-serif;
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
}

.hero {
    height: 90vh;
    background-size: cover;
    background-image: url(../../assets/img/webp/banner.webp);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding-top: 10px; /* espacio si el menú es fijo */
}

@media screen and (min-width:768px) {
    .hero {
        background-attachment: fixed;
    }
}

@media screen and (min-width:800px) {
    .main {
        max-width: 1700px;
        margin: 0 auto;
    }
}

.galeria {
    overflow: hidden;
}

@media screen and (max-width:768px) {
    .galeria {
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin-bottom: 1rem;
    }
    .galeria .foto {
        width: 100%;
    }
}

@media screen and (min-width:768px) {
    .galeria {
        margin-bottom: 1rem;
    }
    .galeria .foto {
        width: 50%;
    }
}

.galeria .foto {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.galeria .foto img {
/*    vertical-align: top;*/
    width: 100%;
    height: auto;
    display: block;
/*    opacity: 1;*/
}

.galeria .foto img:hover {
    opacity: .9;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.galeria .foto h4 {
    color: aliceblue;
    position: absolute;
    font-weight: 900;
    font-size: 15px;
    padding: 1rem;
    text-align: center;
}

.galeria .foto .h4 {
    font-size: 12px;
}

.galeria .foto p {
    position: absolute;
    bottom: 1rem;
    right: 0.1rem;
    color: #fff;
    font-size: 8px;
}

nav {
    background-color: transparent;
    position: relative; /* o fixed si es sticky */
    z-index: 10;
}

.galeria .fa-arrow-circle-left {
   width: 2rem;
/*    width: 140%;*/
}

/* media querys */

@media screen and (min-width:768px) {
    .galeria .foto h4 {
        font-size: 32px;
    }
    .galeria .foto .h4 {
        font-size: 25px;
    }
    .galeria .foto p {
        bottom: 2rem;
        right: 5rem;
        font-size: 14px;
    }
}

.separador-amarillo {
     width: 100%;
  max-width: 80%;
  margin: 0 auto;
  height: 5px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.oferta {
/*    padding: 2rem;
    background-color: #f8f8f8;*/
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
    padding: 2rem 1rem;
    background-image: url('../../assets/img/webp/patron.webp'); /* Ajusta la ruta a tu imagen */
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed; /* opcional, efecto parallax */
    position: relative;
}

.categoria {
 width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0 auto 3rem auto;
  padding: 0;
}

.categoria h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #8d1d1f;
    margin: 0 auto 2rem;
    border-bottom: 3px solid #FEC10A;
    display: inline-block;
    padding-bottom: 0.5rem;
}


.grid-carreras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tarjeta {
    width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
/*   transition:all 0.3s ease-in-out; transform 0.3s ease;*/
    transition: transform 0.3s;
 }

.tarjeta:hover {
/*    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);*/
    transform: translateY(-5px);
}

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

.tarjeta .info {
    padding: 1rem;
    text-align: center;
}

.tarjeta .info h3 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.tarjeta .info p {
    font-size: 0.9rem;
    color: #666;
}

.titulo-categoria {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.titulo-categoria h2 {
    font-size: 2.2rem;
    color: #8d1d1f;
    border-bottom: 3px solid #FEC10A;
    padding-bottom: 0.5rem;
    text-align: center;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}