@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/cinzel/Cinzel-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Cinzel';
    src: url('../fonts/cinzel/CinzelDecorative-Regular.woff') format('woff');
    font-weight: bold;
    font-style: normal;
  }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garantiza que el contenido ocupe toda la pantalla */
}

#background-section {
    flex: 1; /* Hace que el contenido principal crezca y empuje el footer hacia abajo */
    background: white;
    padding: 50px 0;
    height: 100vh;
}


.container {
    position: relative; /* Agregamos esto */
    max-width: 1200px;
    height: 90vh;
    margin: auto;
    text-align: center;

}

  
.border-text::before {
    content: "";
    display: block;
    width: 100%;
    height: 20px; /* Grosor del borde */
    background-color: #611232;
    position: absolute;
    left: 0;
    bottom: 0px; /* Lo coloca debajo de la sección */
}


/* Contenedor del título con las plecas */
.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espaciado entre los elementos */
    margin-bottom: 10px; /* Espacio entre el título y las tarjetas */
}

.title {
    font-size: 4rem;
    font-family: "Patria", sans-serif;
    text-align: center;
    white-space: nowrap;
    color: #611232;
    margin: 0;
    position: relative; /* Necesario para el ::after */
    display: inline-block;
}

.title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px; /* Ajusta la distancia del subrayado */
    width: 20%;
    height: 8px; /* Grosor de la línea */
    background-color: #611232; /* Color dorado */
    border-radius: 4px; /* Redondeo para estética */
    transform: translateX(-50%); /* Centra la línea */
}



.custom-card {
    margin-bottom: 20px; /* Asegura separación vertical */
  }
  


@media screen and (max-width: 768px) {
    .container {
        height: 260vh;
        top: 10vh;
        right: 5px;
    }
    
}
h2 {
    display: flex; /* Hace que funcione align-items */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Asegura el centrado vertical si hay altura */
    text-align: center;
    margin-bottom: 10px;
    margin-top: -100px; /* Cuidado con esto, puede ser mejor usar padding */
    width: 100%; /* Asegura que ocupe el ancho completo */
}


.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Menos ancho */
    gap: 8px; /* Espacio más reducido entre las cards */
    justify-content: center;
}


.card {
    left: 40px;
    top: 70px;
    position: relative; /* Para el borde animado */
    border-radius: 20px;
    background: #f8f8f8;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow:5px 5px 5px rgba(128, 126, 126, 0.5); /* Borde más expandido */
    min-height: 270px; /* Aumenta la altura */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: space-between; /* Distribuye mejor el contenido */
    padding: 15px;
    width: 80%; /* Hace que las cards sean más delgadas */
}

/* Pseudo-elemento para crear el borde animado */
.card::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border: 5px solid transparent; /* Inicialmente invisible */
    border-radius: 20px;
    transition: border-color 0.3s ease-in-out;
}

/* Hover: agranda la card y muestra el borde */
.card:hover {
    transform: scale(1.05); /* Hace la card más grande */
}

.card:hover::after {
    border-color: maroon; /* Aparece el borde */
}

@media (max-width: 768px) {
    .card:active {
        transform: scale(1.05); /* Simula el hover al tocar */
    }
}

.card img {
    width: 80px;
    margin-top: 40px; /* Baja la imagen */
}

.card h3 {
    font-size: 24px;
    color: #611232;
    font-weight: bold;
    font-family: "Patria", sans-serif;
    margin-bottom: 5px; /* Reduce espacio entre el título y el botón */
    
}

.ver-mas {
    display: inline-block;
    font-family: "Patria", sans-serif; /* Asegúrate de que la fuente esté cargada */
    font-size: 14px;
    font-weight: bold;
    color: #a57f2c;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    margin-top: 5px; /* Más cerca del título */
    transition: color 0.3s ease-in-out;
    z-index: 1;
}

.ver-mas:hover {
    text-decoration: underline;
}

.apertura-titulo {
    margin-top: -10px; /* Ajusta la posición solo para este texto */
}