@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #a40000; /* Rojo de la tarjeta */
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo h1 {
    font-family: 'Anton', sans-serif; /* Similar a 'YAHWEH' */
    margin: 0;
    font-size: 2.5rem;
    letter-spacing: 2px;
}

header .logo p {
    margin: 0;
    font-size: 1rem;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

#banner {
    position: relative;
    text-align: center;
    color: white;
}

.banner-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    filter: brightness(0.6);
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-content h2 {
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.cta-button {
    background-color: #fff;
    color: #a40000;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #ddd;
}

#servicios {
    padding: 2rem;
    text-align: center;
}

#servicios h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #333;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 410px; 
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(75, 28, 5, 0.851);
}

.card img {
    width: 100%;
    /* Aumenta el tamaño visual de la imagen en la card */
    height: 435px; /* Altura fija para hacerla más visible */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
    border-radius: 8px 8px 0 0;
    margin-bottom: 10px;
}

.card h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #a40000;
}

.card .precio {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0.5rem 0;
}

.card .detalles {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* ESTILO: Para el aviso de reserva */
.card .aviso-reserva {
    color: #a40000; /* Color llamativo para el aviso */
    font-size: 0.95rem;
    font-weight: bold;
    margin: 1rem 0;
    padding: 5px;
    border: 1px dashed #a40000;
    border-radius: 5px;
}

/* MODIFICADO: Estilo para el botón (ahora es <button> no <a>) */
.card .solicitar-btn {
    display: inline-block;
    background-color: #333; /* Negro/gris oscuro */
    color: white;
    border: none; /* Importante para el botón */
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 10px; 
    /* Propiedades adicionales para el botón */
    width: auto;
}

.card .solicitar-btn:hover {
    background-color: #555;
}

footer {
    background-color: #1a1a1a; 
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

/* Centrar el contenedor del footer */
.footer-container {
    display: flex;
    justify-content: center; /* Centra el único div que queda */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.info-contacto {
    min-width: 300px;
    max-width: 400px; 
    text-align: center; /* Centra el contenido dentro del div */
}

.info-contacto h2 {
    color: #fff;
    border-bottom: 2px solid #a40000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.info-contacto p {
    margin: 0.8rem 0;
    line-height: 1.6;
}

.footer-logo {
    width: 120px;
    margin-top: 1rem;
}

.copyright {
    margin-top: 2rem;
    border-top: 1px solid #444;
    padding-top: 1.5rem;
}

/* --- ESTILOS PARA DISPOSITIVOS MÓVILES (RESPONSIVE) --- */
@media (max-width: 768px) {

    /* Ajustamos el encabezado para móviles */
    header {
        flex-direction: column;
        padding: 1rem;
    }

    header nav ul {
        margin-top: 1rem;
    }

    header nav ul li {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* Hacemos el texto del banner más pequeño */
    .banner-content h2 {
        font-size: 2rem;
    }
    
    .banner-image {
        height: 300px;
    }

    /* Hacemos que las tarjetas se apilen verticalmente */
    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 90%; 
        max-width: 400px; /* Ajuste para móvil */
    }
    
    .card img {
        height: 200px; /* Ajuste para móvil para no ser demasiado grande */
    }

    /* Ajustamos el pie de página para que sea vertical */
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
}
/* creditos desarrollador */

.creditos {
    margin-top: 1rem;
}
.creditos p {
    font-size: 0.9rem;
    color: #ffffff;
}
.creditos a {
    color: #aaa;
    text-decoration: none;
}
.creditos a:hover {
    text-transform: uppercase;
    text-shadow: #0efed6 5px 5px 5px;
}
.creditos span {
    color: #db1a1a;
    font-weight: bold;
}
.creditos a:hover span {
    color: #13ffe3;
}