/* TEPITO - Estilos exclusivos de Contacto y Reservas */

.contact-hero { padding: 4rem 1rem 3rem; text-align: center; }

.contact-icon { 
    background-color: rgba(249,115,22,0.1); 
    width: 80px; height: 80px; 
    border-radius: 2rem; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 1.5rem; 
}

.contact-icon svg { width: 3rem; height: 3rem; color: var(--primary); }

.contact-title { 
    font-size: clamp(3rem, 10vw, 5rem); 
    line-height: 1; 
    margin-bottom: 1rem; 
    font-family: 'Bebas Neue', sans-serif; 
}

.contact-sub { color: var(--muted-foreground); font-size: 1.125rem; max-width: 700px; margin: 0 auto; }

.contact-grid { display: grid; gap: 2rem; margin: 2rem 0 4rem; }

@media (min-width: 768px) { 
    .contact-grid { grid-template-columns: 1fr 1fr; } 
}

.info-card { 
    background-color: var(--card); 
    border: 1px solid var(--border); 
    border-radius: 0.75rem; 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    text-align: left;
}

.info-card h3 { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 1.5rem; 
    margin-bottom: 1rem; 
    font-family: 'Bebas Neue', sans-serif; 
}

.contact-form { 
    background-color: var(--card); 
    border: 1px solid var(--border); 
    border-radius: 0.75rem; 
    padding: 2rem; 
}

.form-group { margin-bottom: 1.25rem; text-align: left; }

.form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.875rem; }

.form-group input, .form-group textarea { 
    width: 100%; 
    padding: 0.75rem 1rem; 
    border-radius: 0.5rem; 
    border: 1px solid var(--border); 
    background-color: var(--background); 
    color: var(--foreground); 
    font-family: inherit;
}

.map-container { 
    margin: 2rem 0; 
    border-radius: 0.75rem; 
    overflow: hidden; 
    border: 1px solid var(--border); 
    height: 400px; 
}

.map-container iframe { width: 100%; height: 100%; border: 0; }