/* Fondo general gris claro */
body.contact-page {
    background: #d9d9d9; /* gris claro elegante */
    color: #222; /* texto general oscuro */
}

/* Imagen superior responsive */
.contact-page .contact-header-image {
    width: 100%;
    aspect-ratio: 16 / 6; /* proporción elegante en escritorio */
    background-image: url("images/header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.75em;
    margin-bottom: 2em;
}

/* Ajuste especial para móviles */
@media (max-width: 768px) {
    .contact-page .contact-header-image {
        aspect-ratio: 16 / 9; /* más alta en móvil */
        border-radius: 0.5em;
    }
}

/* Caja del formulario en rojo vino transparente */
.contact-page .box {
    background: rgba(139, 0, 0, 0.45); /* rojo vino medio transparente */
    border: 1px solid rgba(139, 0, 0, 0.6);
    padding: 2em;
    border-radius: 0.75em;
}

/* Títulos */
.contact-page h2,
.contact-page h3 {
    color: #222; /* negro suave */
    font-weight: 600;
}

/* Inputs y textarea con texto negro */
.contact-page input,
.contact-page textarea {
    background: rgba(255, 255, 255, 0.8); /* fondo claro */
    border: 1px solid #8b0000; /* borde vino */
    color: #000000; /* texto negro */
    border-radius: 0.5em;
    padding: 0.75em;
    transition: all 0.3s ease;
}

/* Cuando escribes, texto negro */
.contact-page input::placeholder,
.contact-page textarea::placeholder {
    color: #444; /* gris oscuro */
}

.contact-page input:focus,
.contact-page textarea:focus {
    background: rgba(255, 255, 255, 1);
    border-color: #600000; /* vino más oscuro */
    outline: none;
    color: #000; /* texto negro */
}

/* Botón */
.contact-page .button.alt {
    background: #8b0000; /* rojo vino */
    color: #fff !important;
    border-radius: 0.5em;
    font-weight: bold;
    transition: all 0.3s ease;
}

.contact-page .button.alt:hover {
    background: #600000;
}

/* Separadores */
.contact-page hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    margin: 2em 0;
}