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

body, html { height: 100%; margin: 0; font-family: 'Poppins', sans-serif; overflow-x: hidden; }

img,
video,
iframe { max-width: 100%; }

/* Efecto de fondos cruzados */
.fondo-capa {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: opacity 2s ease-in-out; opacity: 0; z-index: -1;
}
.visible { opacity: 1; }

.main-content { position: relative; z-index: 10; padding-top: 5vh; }
h1 { font-family: 'Playfair Display', serif; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }

/* Estilo del Modal */
.modal-content { border-radius: 15px; backdrop-filter: blur(10px); background: rgba(0,0,0,0.8) !important; }
.form-control { border: 1px solid rgba(255,255,255,0.2); }
.form-control:focus { background: rgba(255,255,255,0.1); color: white; border-color: #007bff; box-shadow: none; }

@media (max-width: 640px) {
    .main-content { padding: 18px 12px; }
    h1 { overflow-wrap: anywhere; }
    .modal-dialog { margin-inline: 12px; }
}