:root {
    --bg:#0b0f12;
    --surface:#0f1720;
    --white:#fff;
    --hmo-color: #39B54A;
    --gris-claro: #D9D9D9;
    --Amarilloconstrucción:#FFC300;
    --Negrocarbón:#1C1C1C;
    --Grisacero:#6E6E6E;
 }

/* Forzar fondo blanco general para la página de postulaciones */
body { 
    background: var(--white); 
    font-family: 'Roboto', sans-serif; -webkit-font-smoothing:antialiased;
}

/* TODO lo de esta página queda protegido */
.trabaja-page * {
  box-sizing: border-box;
}

/* HERO */
.trabaja-page .hero {
    position: relative;
    padding: 100px 1.5rem;
    background: center/cover no-repeat url('/assets/img/trabajacon.webp');
    display:flex;
    align-items:center;
    justify-content:center;
}

.trabaja-page .hero-overlay {
    background: rgba(0,0,0,.5);/* overlay verde suave */
    padding: 2rem;
    border-radius: 15px;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(16, 46, 20, 0.09);
}

.hero h1 { 
    margin: 0; 
    color: var(--white); 
    font-size: 2rem; 
}
    
.hero p { 
    color: var(--white); 
    margin-top: 0.9rem; 
    font-size: 1.1rem;
    margin-bottom:1rem ;
    line-height:1.5; 
}

    .btn-verde {
        font-size: 1.2rem;
        padding: 12px 24px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        background: var(--hmo-color);
        color:var(--white);
        font-weight: bold;
        text-decoration: none;
        transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.5s ease;
        /* Animación de entrada */
        opacity: 0;
        animation: fadeSlide 1.2s ease forwards;
    }
    .btn-verde:hover { 
        color: var(--bg);
        transform: scale(1.8);
        background: var(--Amarilloconstrucción);
        box-shadow:3px 3px 6px rgba(0, 0, 0, 0.9); 
    }
    /* Keyframes para aparecer suavemente */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TARJETAS */
.trabaja-page .seccion-container {
    max-width: 1200px; 
        margin: 2.5rem auto; 
        padding: 0 1.5rem; 
        display:grid; 
        gap:1.25rem; 
        grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); 
}

.trabaja-page .card {
    text-align: center;
    max-width: 480px;
    width: 100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height: auto;
    background:var(--white);
    padding:1.25rem;
    border-radius:12px;
    box-shadow:0 8px 18px rgba(16,24,32,0.04);
    transition:transform var(--transition),box-shadow var(--transition);
    border-top:6px solid transparent

}

.trabaja-page .card:hover{
    transform:translateY(-14px);
    box-shadow:0 18px 36px rgba(16,24,32,0.9);
    border-top-color:var(--Amarilloconstrucción)
}

.card .icono {
    width: 64px;
    height: 64px;
    margin-bottom: 0.8rem; 
    display:block; 
}
.card h3 {
    margin: 0 0 0.6rem 0; 
    color: var(--Negrocarbón); 
    font-size: 1.1rem; 
}

.card p { 
    margin: 0; color: var(--Grisacero); 
    line-height:1.45; 
}

.trabaja-page .card ul {
    margin: 0.6rem 0 0 1rem; color: var(--Grisacero);  
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.card .cta { 
    margin-top: 
    1rem; 
    align-self:start; 
}

.trabaja-page .card ul li {
    border-bottom: 1px solid #ddd;
    padding: .35rem 0;
}

/* FORMULARIO */
.trabaja-page .form-section {

    flex: 1 1 350px;
    display: flex;
    flex-direction: column;
    max-width: 50%; 
    margin: 2rem auto 4rem; 
    background: var(--Negrocarbón); 
    border-radius: 12px; 
    padding: 1.6rem; 
    box-shadow: 0 8px 30px rgba(8,8,8,0.05); 
}

.trabaja-page .form-section h2{
    color: var(--white);
    text-align: center;
    padding: 2rem;
}

.trabaja-page .app-form {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.trabaja-page .full {
    grid-column: 1 / -1;
}

.trabaja-page input,
.trabaja-page select,
.trabaja-page textarea {
    width: 100% !important;
    padding: 0.8rem;
    border-radius: 6px;
    border: none;
    background: var(--gris-claro);
    color: var(--bg);
    font-size: 1rem;
}

.btn-submit{
    border: none;
    font-size: 1.2rem;
    padding: 12px 24px;
    border-radius: 6px;
    background: var(--hmo-color);
    color:var(--white);
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.5s ease;
    /* Animación de entrada */
    opacity: 0;
    animation: fadeSlide 1.2s ease forwards;
}

.btn-submit:hover{
    color: var(--bg);
    transform: scale(1.8);
    background: var(--Amarilloconstrucción);
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.9);
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* RESPONSIVE */
@media(max-width: 768px) {
  .trabaja-page .app-form {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .trabaja-page .form-section {
    margin-top: 3rem;
    max-width: 100%;
  }
}