/* ==========================================================================
   ESTILOS ESPECÍFICOS - PÁGINA DE CONTACTO
   ========================================================================== */

body {
    background-color: #f4f6f7; /* Gris muy suave para resaltar las tarjetas blancas */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Tarjetas fijas sin efecto de elevación 3D para mayor estabilidad visual */
.card {
    transition: box-shadow 0.3s ease; /* Quitamos 'transform' de la transición */
    border: none !important;
}

/* Eliminado el movimiento (translateY) para mantener el formulario estático y serio */
.card:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important; /* Sombra sutil fija */
}

/* Personalización de Inputs para que se vean modernos y limpios */
.form-control, .form-select {
    border: 1px solid #dee2e6;
    padding: 12px;
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color, #121b25);
    box-shadow: 0 0 0 0.25rem rgba(18, 27, 37, 0.1);
    outline: none;
}

/* Control del cuadro de mensaje: tamaño fijo y scroll interno automático */
#mensajeInput {
    resize: none !important; /* Bloquea el tirador para que el usuario no deforme la web */
    overflow-y: auto;        /* Activa el scroll vertical automático si escribe mucho */
}

/* ==========================================================================
   BOTONES CON EFECTO DE LLENADO/INVASIÓN FLUIDO (NATIVO GLOBAL)
   ========================================================================== */

/* Botón principal del Formulario (Enviar Formulario) */
.btn-dark, #submitBtn { 
    position: relative;
    overflow: hidden;
    background: var(--primary-color, #121b25) !important;
    border: 1px solid var(--primary-color, #121b25) !important;
    color: var(--white, #ffffff) !important;
    font-weight: 600;
    z-index: 1;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease !important;
}

.btn-dark::before, #submitBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Inicia completamente fuera del botón a la izquierda */
    width: 100%;
    height: 100%;
    background: #c5a059; /* Tu dorado de global.css e historia.css */
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-dark:hover, #submitBtn:hover {
    color: var(--white, #ffffff) !important;
    transform: translateY(-2px); /* Movimiento sutil hacia arriba */
}

.btn-dark:hover::before, #submitBtn:hover::before {
    transform: translateX(100%); /* Desplaza la barra dorada invadiendo y rellenando el fondo */
}


/* Botones de "Contacto Directo" (Mailto y Teléfono) */
.btn-outline-dark {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--primary-color, #121b25) !important;
    color: var(--primary-color, #121b25) !important;
    font-weight: 600;
    background: transparent !important;
    z-index: 1;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease !important;
}

.btn-outline-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Barra invisible lista para invadir */
    width: 100%;
    height: 100%;
    background: #c5a059; /* Tu dorado premium */
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-outline-dark:hover {
    color: var(--white, #ffffff) !important; /* El texto pasa a blanco de forma fluida */
    border-color: #c5a059 !important;
    transform: translateY(-2px); /* Movimiento sutil hacia arriba */
}

.btn-outline-dark:hover::before {
    transform: translateX(100%); /* Efecto de barrido que consume el color anterior */
}


/* ==========================================================================
   MÁRGENES Y AJUSTES FINALES
   ========================================================================== */

/* Ajuste optimizado para que el contenido suba y quede alineado al Navbar */
main {
    padding-top: 50px !important;    /* Reducido de 120px a 50px para subir las tarjetas */
    padding-bottom: 50px !important; /* Espaciado inferior equilibrado */
}

@media (max-width: 768px) {
    main {
        padding-top: 30px !important;  /* Ajuste ligero para móviles */
    }
}

/* Espacio extra abajo para que no toque el footer */
main {
    padding-bottom: 30px !important; 
}

/* Opcional: Si quieres que el contador se vea elegante */
#charCounter {
    font-size: 0.75rem;
    margin-top: 5px;
    font-weight: 500;
}