/* --- Estilos para la Sección del Banner Principal (Hero Banner) --- */
.hero-banner {
    width: 100%; /* Asegura que ocupe el 100% del ancho del viewport */
    min-height: 500px; /* VERIFICADO: Altura mínima para el banner en ESCRITORIO (SIN CAMBIOS) */
    background: url('../img/trabajaconnosotros.webp') no-repeat center center/cover; /* CORREGIDO: Vuelve a center center en escritorio */
    position: relative;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-start; /* Alinea el contenido a la izquierda en escritorio */
    color: var(--color-blanco); /* Color de texto por defecto para todo el banner */
    overflow: hidden; /* Oculta cualquier desbordamiento de los pseudo-elementos */
}

/* Capa de superposición y efecto diagonal */
/* .hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 40, 99, 0.8);
    z-index: 1;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
} */

.hero-content {
    position: relative; /* Asegura que el contenido esté sobre la capa de superposición */
    z-index: 2;
    max-width: 1400px; /* Establece el ancho máximo para el contenedor del contenido */
    margin: 0 auto; /* Centra el contenido */
    width: 100%; /* Asegura que ocupe el 100% del ancho del padre hasta el max-width */
    padding: 20px; /* Añade un padding para que el contenido no toque los bordes */
}

.hero-text {
    max-width: 600px; /* Limita el ancho del texto para mejor lectura */
    padding: 30px;
    /* background-color: rgba(0, 0, 0, 0.2); Fondo semitransparente para el texto */
    border-radius: 8px;
    text-align: left; /* Alineación izquierda en escritorio */
}

.hero-title {
    line-height: 1.2; /* AJUSTADO: Se subió el line-height para mejor legibilidad */
    margin-bottom: 20px;
}

.hero-title .text-green {
    font-family: 'Bilmond';
    font-size: 50px; /* Tamaño de fuente de escritorio */
    color: var(--color-verde-principal);
    font-weight: 700;
    display: block; /* Para asegurar que ocupe su propia línea */
}

.hero-title .text-white {
    font-family: 'Bilmond';
    color: var(--color-blanco);
    font-weight: 400;
    font-size: 50px; /* Tamaño de fuente de escritorio */
    display: block; /* Asegura que vaya en una nueva línea por defecto */
    margin-bottom: 0;
}

.hero-title .text-white-p {
    font-family: 'Bilmond'; /* Se mantiene si es la fuente deseada */
    color: var(--color-blanco);
    font-weight: 300;
    font-size: 20px; /* Tamaño de fuente de escritorio */
    display: block;
    margin-top: 10px;
    max-width: 400px; /* Mantener el max-width para escritorio */
}

/* --- Responsive para el Banner Principal (replicando lógica del "caballo ganador") --- */

@media (max-width: 1200px) {
    .hero-title {
        font-size: 45px; /* Ligeramente más pequeño que 50px */
    }
    .hero-title .text-white {
        font-size: 45px;
    }
    .hero-title .text-white-p {
        font-size: 18px;
        max-width: 380px;
    }
}

@media (max-width: 992px) { /* Breakpoint para tabletas y laptops pequeñas */
    .hero-banner {
        min-height: 400px; /* Mantener el valor original de este breakpoint, si es deseado */
    }

    .hero-banner::before {
        clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%); 
    }

    .hero-content {
        max-width: 100%; /* Ocupa el 100% del ancho en estas pantallas */
        padding: 15px;
    }

    .hero-text {
        max-width: 500px; /* Ajustar el ancho del texto */
        padding: 20px;
    }

    .hero-title {
        font-size: 40px; /* Ajuste para este breakpoint */
    }
    .hero-title .text-white {
        font-size: 40px;
    }
    .hero-title .text-white-p {
        font-size: 16px;
        max-width: 350px;
    }
}


@media (max-width: 768px) { /* Breakpoint para móviles */
    .hero-banner {
        min-height: 260px; /* AJUSTADO: Altura mínima replicando "caballo ganador" */
        background-position: 25% center; /* CORREGIDO: Mueve la imagen de fondo a la derecha SOLO EN MÓVIL */
        justify-content: flex-start; /* AJUSTADO: Alinea el contenido a la IZQUIERDA en móvil */
        align-items: center; /* Centra verticalmente el contenido en móvil */
    }

    .hero-banner::before {
        clip-path: none; /* Elimina el corte diagonal para una superposición completa */
        background-color: rgba(25, 40, 99, 0.85); /* Aumentar un poco la opacidad si no hay corte */
    }

    .hero-content {
        max-width: 95%; /* AJUSTADO: Ancho máximo del "caballo ganador" */
        padding: 0 10px; /* AJUSTADO: Padding horizontal del "caballo ganador" */
        text-align: left; /* AJUSTADO: Alinea el texto a la IZQUIERDA dentro de hero-content */
    }

    .hero-text {
        max-width: 60%; /* AJUSTADO: Ancho del contenedor de texto al 60% del hero-content */
        margin: 0; /* AJUSTADO: Elimina margin: auto para que no se centre */
        padding: 15px 0; /* Reduce padding para móvil, sin padding lateral explícito aquí */
      
        text-align: left; /* Asegura que el texto esté alineado a la IZQUIERDA en su caja */
    }

    .hero-title {
        font-size: 7vw; /* AJUSTADO: Usa 'vw' para un tamaño de fuente responsivo */
        line-height: 1.3; /* AJUSTADO: Line-height para mejor lectura */
        margin-bottom: 10px;
    }

    .hero-title .text-green {
        display: block; /* Fuerza "que ofrecemos" a su propia línea */
        font-size: initial; /* Para que herede de .hero-title */
    }

    .hero-title .text-white {
        font-size: 7vw; /* Ajustar tamaño como .text-green para que parezcan iguales */
        display: block; /* Asegura que "Servicios" esté en su propia línea */
    }
    
    .hero-title .text-white-p {
        font-size: 3.8vw; /* Ajuste con vw */
        margin-top: 5px; /* Reduce margin-top si es necesario */
        max-width: 100%; /* Permite que ocupe todo el 60% del .hero-text */
    }
}

@media (max-width: 480px) {
    .hero-banner {
        min-height: 200px; /* AJUSTADO: Altura mínima aún más reducida replicando "caballo ganador" */
        padding-bottom: 0;
    }

    .hero-text {
        max-width: 60%; /* Mantiene el 60% también para pantallas muy pequeñas */
        padding: 10px 0; /* Ajusta padding */
    }

    .hero-title {
        font-size: 6vw; /* Ajuste con vw */
    }
    .hero-title .text-white {
        font-size: 6vw; /* Ajuste con vw */
    }
    .hero-title .text-white-p {
        font-size: 3.2vw; /* Ajuste con vw */
    }
}

/* --- Estilos para la Sección Misión --- */
.seccion-mision {
    background-color: var(--color-blanco-oscuro); /* O el color de fondo que desee */
    padding: 80px 0; /* Espaciado superior e inferior para escritorio */
    display: flex; /* Para centrar el contenedor principal */
    justify-content: center; /* Centra el contenedor principal */
}

.contenedor-mision {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    align-items: center; /* Alinea los ítems verticalmente */
    gap: 40px; /* Espacio entre el texto y la imagen */
    max-width: 1200px; /* Ancho máximo para el contenedor principal en escritorio */
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 0 15px; /* Pequeño padding horizontal para que no toque los bordes de la pantalla */
}

.texto-mision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    text-align: left; /* Alineación del texto a la izquierda en escritorio */
}

.texto-mision h3 {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 700; /* Negrita para el título, ajuste el peso si es diferente */
    font-size: 40px; /* Tamaño del título */
    color: var(--color-verde-principal); /* Color del título, ajuste según su paleta */
    margin-bottom: 20px;
}

.texto-mision p {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 400; /* Regular para el párrafo, ajuste el peso si es diferente */
    font-size: 24px; /* Tamaño del párrafo */
    line-height: 1.6;
    color: var(--color-gris-oscuro); /* Color del texto del párrafo */
}

.imagen-mision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    border-radius: 15px; /* Bordes redondeados para la imagen */
    overflow: hidden; /* Asegura que el border-radius funcione */
    display: flex; /* Para centrar la imagen si es más pequeña que su contenedor */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

.imagen-mision img {
    display: block;
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor */
    height: auto; /* Mantiene la proporción */
    max-height: 400px; /* Tamaño determinado para la altura de la imagen, ajuste según necesite */
    object-fit: contain; /* Para que la imagen se vea completa dentro de los límites */
    border-radius: 15px; /* Para que la imagen también tenga los bordes redondeados */
}

/* --- Responsive para la Sección Misión --- */
@media (max-width: 992px) {
    .seccion-mision {
        padding: 60px 0; /* Ajuste de padding para pantallas medianas */
    }
    .contenedor-mision {
        flex-direction: column; /* Apila el texto y la imagen en columnas (texto arriba, imagen abajo) */
        align-items: center; /* Centra horizontalmente los elementos hijos */
        gap: 30px; /* Ajuste el gap para pantallas más pequeñas */
    }

    .texto-mision,
    .imagen-mision {
        flex-basis: auto; /* Eliminar flex-basis basado en porcentaje */
        max-width: 90%; /* Ajustar el ancho máximo para los elementos en móvil */
        width: 100%; /* Asegurar que ocupen el ancho disponible hasta el max-width */
        margin: 0 auto; /* Centrar los bloques de texto y imagen */
    }

    .texto-mision h3 {
        font-size: 34px;
        text-align: center; /* Centrar el título de la misión */
    }

    .texto-mision p {
        font-size: 20px;
        padding: 0; /* Eliminar padding lateral para que el max-width funcione mejor */
        text-align: center; /* Centrar el párrafo de la misión */
    }

    .imagen-mision img {
        width: 100%; /* Asegurar que la imagen ocupe el 100% de su contenedor (que es max-width: 90%) */
        height: auto; /* Mantiene la proporción */
        max-height: none; /* Eliminar la altura máxima para que se ajuste proporcionalmente */
    }
}

@media (max-width: 768px) {
    .seccion-mision {
        padding: 60px 0;
    }
    .texto-mision h3 {
        font-size: 28px;
    }
    .texto-mision p {
        font-size: 18px;
    }
    .imagen-mision {
        max-width: 80%; /* Ajuste de ancho de imagen en tablets */
    }
}

@media (max-width: 480px) {
    .seccion-mision {
        padding: 50px 0;
    }
    .texto-mision h3 {
        font-size: 24px;
    }
    .texto-mision p {
        font-size: 16px;
    }
    .imagen-mision {
        max-width: 90%; /* Ajuste de ancho de imagen en móviles pequeños para que no sea diminuta */
    }
}

/* --- Estilos para la Sección de Contenido de Quienes Somos --- */
.seccion-quienes-somos-contenido {
    background-color: var(--color-blanco); /* Fondo blanco */
    padding: 40px 0; /* Espaciado superior e inferior */
    display: flex; /* Para centrar el contenedor principal */
    justify-content: center; /* Centra el contenedor principal */
}

.contenedor-quienes-somos {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    align-items: center; /* Alinea los ítems verticalmente al centro */
    gap: 80px; /* Espacio entre la imagen y el texto */
    justify-content: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 0 15px; /* Pequeño padding horizontal para que no toque los bordes de la pantalla */
}

.imagen-quienes-somos {
    flex-basis: calc(30% - 20px); /* 30% del ancho del padre, restando la mitad del gap */
    max-width: calc(30% - 20px); /* Asegura que no exceda el 30% */
    width: 100%; /* Se adapta a su flex-basis */
    overflow: hidden; /* Asegura que el border-radius se aplique a la imagen */
}

.imagen-quienes-somos img {
    margin: 0 auto;
    border-radius: 20px; /* Bordes redondeados */
    display: block;
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    height: auto; /* Mantiene la proporción */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}

.texto-quienes-somos {
    flex-basis: calc(70% - 20px); /* Ajustado para que el texto ocupe el resto del espacio en escritorio */
    max-width: calc(70% - 20px); /* Asegura que no exceda el 70% */
    width: 100%; /* Se adapta a su flex-basis */
    text-align: right; /* Alineación del texto a la derecha */
}

.texto-quienes-somos p {
    font-family: 'Bilmond', sans-serif; /* Fuente Bilmond */
    font-weight: 400; /* Asumiendo Bilmond Regular, ajuste si es diferente */
    font-size: 24px; /* Tamaño de fuente para el párrafo */
    line-height: 1.5;
    color: var(--color-gris-oscuro); /* Color de texto general */
    margin-bottom: 0;
    font-style: italic; /* Texto itálico como en la imagen */
    text-align: center; /* Centrar el texto en escritorio */
}

/* --- Responsive para la Sección de Contenido de Quienes Somos --- */
@media (max-width: 992px) {
    .contenedor-quienes-somos {
        flex-direction: column; /* Apila la imagen y el texto en columnas */
        align-items: center; /* Centra los ítems horizontalmente en el contenedor */
        gap: 30px; /* Ajuste el gap para pantallas más pequeñas */
    }

    .imagen-quienes-somos,
    .texto-quienes-somos {
        flex-basis: auto; /* Eliminar flex-basis basado en porcentaje */
        max-width: 90%; /* Limitar el ancho de los elementos a un porcentaje del contenedor padre */
        width: 100%; /* Ocupa el 100% del ancho disponible hasta el max-width */
        margin: 0 auto; /* Centrar los bloques de imagen y texto */
        padding-left: 0; /* Elimina padding lateral */
        padding-right: 0; /* Asegura que no haya padding que impida el centrado */
    }
    
    .imagen-quienes-somos img {
        width: 100%; /* Asegurar que la imagen ocupe el 100% de su contenedor ajustado */
        height: auto; /* Mantiene la proporción */
        max-width: 80%; /* Hacer la imagen un poco más pequeña que 100% de su contenedor */
        margin: 0 auto; /* Centrar la imagen si es más pequeña */
    }

    .texto-quienes-somos p {
        font-size: 24px;
        padding: 0; /* Eliminar padding lateral para que el max-width funcione mejor */
        text-align: center; /* Centrar el párrafo en móviles */
    }
}

@media (max-width: 768px) {
    .seccion-quienes-somos-contenido {
        padding: 50px 0;
    }
    .texto-quienes-somos p {
        font-size: 20px;
    }
    .imagen-quienes-somos {
        max-width: 70%; /* Ajuste para tablets */
    }
}

@media (max-width: 480px) {
    .seccion-quienes-somos-contenido {
        padding: 40px 0;
    }
    .texto-quienes-somos p {
        font-size: 18px;
    }
    .imagen-quienes-somos {
        max-width: 90%; /* Ajuste para que la imagen no se vea muy pequeña en móviles muy pequeños */
    }
}

/* --- Nueva Sección: Imagen 'personal.webp' a ancho completo debajo del banner --- */
.trabaja-nosotros-imagen-completa {
    padding: 40px 0; /* Espacio arriba y abajo de la imagen */
    background-color: var(--color-blanco);
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;
    /* Altura máxima del contenedor de la imagen para recortar a la mitad (ajustable) */
    max-height: 400px; /* Manteniendo el valor que acordamos para la mitad de la altura */
    overflow: hidden; /* Esto recortará la imagen si es más alta que max-height */
    
    /* Agregado para separar del banner principal */
    margin-top: 40px; /* Espacio superior de 40px */
}

.trabaja-nosotros-imagen-completa .container {
    /* El .container del HTML ayuda a limitar el ancho, pero lo controlaremos en mobile */
    max-width: 1200px; /* Limita el ancho del contenedor */
    width: 100%;
    padding: 0 15px; /* Padding para que el contenido no toque los bordes en escritorio */
    box-sizing: border-box; /* Incluir padding en el width */
    display: flex; /* Para centrar la imagen internamente si es más pequeña */
    justify-content: center;
}

.trabaja-nosotros-img-full {
    width: 100%;
    max-width: 1200px; /* Limita el ancho de la imagen */
    height: auto; /* Mantener la altura automática para que no se distorsione */
    display: block; /* Elimina el espacio extra debajo de la imagen */
    
    /* Propiedades para centrar y recortar la imagen sin distorsión */
    object-fit: cover; /* La imagen cubrirá el área, recortando si es necesario */
    object-position: center; /* Centrar la imagen dentro de su contenedor */

    /* Nuevas propiedades añadidas: Borde y Border-radius */
    border: 20px solid var(--color-blanco); /* Borde de 20px blanco */
    border-radius: 20px; /* Bordes redondeados de 20px */
    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); Sombra suave (ya estaba) */
}

/* --- Nueva Sección: Contenido (Texto a la izquierda y Formulario a la derecha) --- */
.trabaja-nosotros-contenido-doble {
    padding: 60px 30px;
    background-color: var(--color-blanco); /* Mismo fondo para continuidad */
}

.trabaja-nosotros-grid-contenido {
    display: flex;
    align-items: flex-start; /* Alinea los elementos al inicio (parte superior) */
    gap: 10px; /* Espacio entre el texto y el formulario */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
}

.trabaja-nosotros-texto-columna {
    flex: 1 1 50%; /* Ocupa el 50% del ancho en pantallas grandes */
    max-width: 45%; /* Asegura que no crezca más allá del 50% */
    padding-right: 20px; /* Pequeño padding a la derecha para separar del formulario */
}

.trabaja-nosotros-form-columna {
    flex: 1 1 45%; /* Ocupa el 45% del ancho, dejando espacio para el gap */
    max-width: 100%; /* Asegura que no crezca más allá del 45% */
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.trabaja-nosotros-heading {
    font-family: 'Bilmond', sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: var(--color-verde-principal);
    margin-bottom: 15px;
    line-height: 1.2;
    text-align: left; /* Asegura la alineación a la izquierda */
}

.trabaja-nosotros-subheading {
    font-family: 'Bilmond', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: var(--color-gris-oscuro);
    margin-bottom: 30px;
    text-align: left; /* Asegura la alineación a la izquierda */
}

/* Estilos del formulario (se mantienen como estaban) */
.trabaja-nosotros-form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre los campos del formulario */
}

.trabaja-nosotros-form input[type="text"],
.trabaja-nosotros-form input[type="email"],
.trabaja-nosotros-form input[type="tel"],
.trabaja-nosotros-form input[type="file"] { /* Añadido input[type="file"] aquí */
    width: 100%;
    padding: 15px 15px;
    border: none;
    border-radius: 8px;
    font-family: 'Fashion Fetish';
    font-weight: 400;
    font-size: 14px;
    color: var(--color-gris-oscuro);
    background-color: #ebebeb; /* Fondo ligero para los campos */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.trabaja-nosotros-form input[type="text"]:focus,
.trabaja-nosotros-form input[type="email"]:focus,
.trabaja-nosotros-form input[type="tel"]:focus,
.trabaja-nosotros-form input[type="file"]:focus { /* Añadido input[type="file"] aquí */
    border-color: var(--color-verde-principal);
    box-shadow: 0 0 0 3px rgba(var(--color-verde-principal-rgb), 0.2); /* Sombra al enfocar */
    outline: none;
}


.trabaja-nosotros-form input::placeholder {
    /* color: var(--color-gris-intermedio); */
    opacity: 1; /* Para Firefox */
    /* font-weight: 200; CAMBIO CLAVE: Hace la letra del placeholder más delgada (Extra Light) */
}

/* Estilo específico para la etiqueta del CV */
.etiqueta-cv {
    font-family: 'Bilmond', sans-serif; /* Usando la fuente de los encabezados/subtítulos */
    font-size: 16px; /* Tamaño de fuente para la etiqueta */
    color: var(--color-gris-oscuro);
    margin-bottom: 5px; /* Espacio debajo de la etiqueta */
    display: block; /* Para que ocupe su propia línea */
    font-weight: 700; /* Negrita para destacarla */
}




.btn-enviar-mensaje {
    display: block;
    width: 100%;
    padding: 15px 25px;
    background-color: var(--color-azul-oscuro); /* Color azul oscuro para el botón */
    color: var(--color-blanco);
    border: none;
    border-radius: 5px;
    font-family: 'Bilmond', sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 15px; /* Espacio encima del botón */
}

.btn-enviar-mensaje:hover {
    background-color: var(--color-verde-principal); /* Cambia a verde en hover */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}


/* --- Responsive para la Sección de Contenido (Texto y Formulario) --- */
@media (max-width: 992px) {
    /* Ajustes para la imagen completa */
    .trabaja-nosotros-imagen-completa {
        padding: 30px 0; /* Reducir padding en móvil */
        max-height: 350px; /* Ajustar la altura máxima para pantallas medianas */
        margin-top: 30px; /* Ajuste para móviles */
    }
    .trabaja-nosotros-imagen-completa .container {
        padding: 0 10px; /* Reducir el padding del contenedor interno */
    }
    .trabaja-nosotros-img-full {
        border: 10px solid var(--color-blanco); /* Reducir el borde */
        border-radius: 10px; /* Reducir el border-radius */
        max-width: 98%; /* Para que ocupe "casi" el 100% del contenedor */
        width: 100%; /* Asegura que la imagen sea fluida */
        margin: 0 auto; /* Centrar la imagen */
    }

    .trabaja-nosotros-grid-contenido {
        flex-direction: column; /* Apila el texto y el formulario en columnas */
        align-items: center; /* Centra los ítems horizontalmente */
        gap: 30px;
        padding: 0 15px; /* Asegurar un padding lateral en móvil para el grid */
    }

    .trabaja-nosotros-texto-columna,
    .trabaja-nosotros-form-columna {
        flex: 1 1 100%; /* Ocupa el 100% del ancho */
        max-width: 100%; /* Asegura que no desborde */
        padding-right: 0; /* Elimina el padding derecho cuando se apila */
        width: 100%; /* Asegura que ocupe el 100% de su contenedor padre */
    }

    .trabaja-nosotros-texto-columna {
        text-align: center; /* Centra el texto en pantallas pequeñas */
        margin-bottom: 0; /* Eliminar margen inferior si hay */
    }

    .trabaja-nosotros-form-columna {
        padding: 30px;
        box-sizing: border-box; /* Asegura que el padding se incluya en el width */
    }

    .trabaja-nosotros-heading {
        font-size: 28px;
        text-align: center; /* Centrar el título en móvil */
    }

    .trabaja-nosotros-subheading {
        font-size: 16px;
        text-align: center; /* Centrar el subtítulo en móvil */
        margin-bottom: 25px;
    }
}

@media (max-width: 768px) {
    .trabaja-nosotros-imagen-completa {
        padding: 20px 0;
        max-height: 250px; /* Ajustar la altura máxima para móviles si es necesario */
        margin-top: 25px; /* Ajuste para móviles */
    }
    .trabaja-nosotros-imagen-completa .container {
        padding: 0 8px; /* Más reducción de padding */
    }
    .trabaja-nosotros-img-full {
        border: 8px solid var(--color-blanco); /* Reducir el borde */
        border-radius: 8px; /* Reducir radio para pantallas pequeñas si se desea */
        max-width: 98%; /* Ajusta un poco más para pantallas muy pequeñas */
    }

    .trabaja-nosotros-contenido-doble {
        padding: 40px 0;
    }

    .trabaja-nosotros-grid-contenido {
        padding: 0 15px;
        gap: 25px;
    }

    .trabaja-nosotros-form-columna {
        padding: 15px 10px;
    }

    .trabaja-nosotros-heading {
        font-size: 24px;
    }

    .trabaja-nosotros-subheading {
        font-size: 15px;
    }

.trabaja-nosotros-form input[type="text"],
.trabaja-nosotros-form input[type="email"],
.trabaja-nosotros-form input[type="tel"],
.trabaja-nosotros-form input[type="file"] { /* Añadido input[type="file"] aquí */
    font-family: 'Bilmond';
    font-size: 14px;
    font-weight: 700 ;
    padding: 12px 15px;
}

    .btn-enviar-mensaje {
        padding: 12px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .trabaja-nosotros-imagen-completa {
        padding: 15px 0;
        max-height: 180px; /* Ajuste para pantallas muy pequeñas */
        margin-top: 20px; /* Ajuste para pantallas muy pequeñas */
    }
    .trabaja-nosotros-imagen-completa .container {
        padding: 0 5px; /* Mínimo padding para los bordes */
    }
    .trabaja-nosotros-img-full {
        border: 5px solid var(--color-blanco); /* Reducir aún más en móviles muy pequeños */
        border-radius: 5px; /* Reducir aún más en móviles muy pequeños */
        max-width: 98%; /* Mantener casi a ancho completo */
    }
    .trabaja-nosotros-contenido-doble {
        padding: 30px 0;
    }
  
    .trabaja-nosotros-heading {
        font-size: 22px;
    }
    .trabaja-nosotros-subheading {
        font-size: 14px;
    }
}