/* =============================================
   INICIO.CSS — Portal Careers Nuvoil
   ============================================= */

:root {
   --rojo:        #D71921;
   --rojo-oscuro: #A51018;
   --negro:       #1A1A1A;
   --gris-claro:  #F5F5F5;
   --gris-borde:  #DEDEDE;
   --texto:       #444444;
   --texto-claro: #777777;
   --blanco:      #FFFFFF;
   --font:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Override Bootstrap blues */
a { color: var(--rojo); }
a:hover, a:focus { color: var(--rojo-oscuro); }
a:focus { outline: 2px solid var(--rojo); outline-offset: 2px; }
input:focus, select:focus, textarea:focus {
   border-color: var(--rojo) !important;
   box-shadow: 0 0 0 2px rgba(215,25,33,0.15) !important;
   outline: none !important;
}

* { box-sizing: border-box; }
body { font-family: var(--font); }
.main-content { margin: 0; padding: 0; }

.seccion-label {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--rojo);
   margin-bottom: 14px;
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero-seccion {
   position: relative;
   min-height: 70vh;
   display: flex;
   align-items: center;
   background-image: url('/static/images/difusion/home-careers.jpg');
   background-size: cover;
   background-position: center center;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, rgba(0,0,0,0.82) 40%, rgba(0,0,0,0.20) 100%);
}

.hero-inner {
   position: relative;
   z-index: 2;
   padding: 100px 15px 80px;
   text-align: center;
   width: 100%;
}

.hero-eyebrow {
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: rgba(255,255,255,0.65);
   margin-bottom: 16px;
}

.hero-titulo {
   font-size: 58px;
   font-weight: 800;
   color: #fff;
   line-height: 1.15;
   margin: 0 0 20px;
   font-family: var(--font);
}

.hero-subtitulo {
   font-size: 18px;
   color: rgba(255,255,255,0.82);
   max-width: 560px;
   margin: 0 auto 44px;
   line-height: 1.7;
   font-weight: 300;
}

/* Formulario hero */
.hero-form { max-width: 920px; margin: 0 auto; }

.hero-form-inner {
   background: rgba(255,255,255,0.97);
   border-radius: 14px;
   padding: 10px 10px 10px 10px;
   display: flex;
   gap: 8px;
   align-items: stretch;
   box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.hero-field { flex: 1; min-width: 0; }

.hero-field input[type="text"],
.hero-field .select2-container {
   width: 100% !important;
   height: 50px;
}

.hero-field input[type="text"] {
   border: 1px solid var(--gris-borde);
   border-radius: 8px;
   padding: 0 16px;
   font-size: 14px;
   font-family: var(--font);
   color: var(--negro);
   outline: none;
   transition: border-color 0.2s;
}

.hero-field input[type="text"]:focus { border-color: var(--rojo); }

.hero-btn {
   background: var(--rojo);
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 0 30px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.2s, transform 0.15s;
   font-family: var(--font);
   height: 50px;
}

.hero-btn:hover {
   background: var(--rojo-oscuro);
   transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   PROPÓSITO
═══════════════════════════════════════ */
.proposito-seccion {
   padding: 88px 0;
   background: var(--blanco);
}

.proposito-row {
   display: flex;
   align-items: center;
   gap: 48px;
}

.proposito-texto {
   flex: 0 0 38%;
   max-width: 38%;
}

.proposito-beneficios {
   flex: 1;
   min-width: 0;
}

.proposito-texto h2 {
   font-size: 44px;
   font-weight: 800;
   color: var(--negro);
   line-height: 1.25;
   margin: 8px 0 20px;
   font-family: var(--font);
}

.proposito-texto p {
   color: var(--texto);
   line-height: 1.8;
   margin-bottom: 14px;
   font-size: 15px;
}

.btn-nuvoil {
   display: inline-block;
   margin-top: 16px;
   padding: 13px 28px;
   background: var(--rojo);
   color: #fff !important;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none !important;
   transition: background 0.2s, transform 0.15s;
   font-family: var(--font);
}

.btn-nuvoil:hover {
   background: var(--rojo-oscuro);
   transform: translateY(-1px);
}

/* Beneficios */
.beneficios-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.beneficio-card {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 20px;
   border-radius: 12px;
   background: var(--gris-claro);
   border: 1px solid var(--gris-borde);
   transition: box-shadow 0.2s, transform 0.2s;
}

.beneficio-card:hover {
   box-shadow: 0 6px 24px rgba(0,0,0,0.08);
   transform: translateY(-2px);
}

.beneficio-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: var(--rojo);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
   flex-shrink: 0;
}

.beneficio-info h4 {
   font-size: 14px;
   font-weight: 700;
   color: var(--negro);
   margin: 0 0 6px;
}

.beneficio-info p {
   font-size: 13px;
   color: var(--texto-claro);
   margin: 0;
   line-height: 1.6;
}

/* ═══════════════════════════════════════
   NUESTRA GENTE
═══════════════════════════════════════ */
.nuestra-gente-seccion {
   position: relative;
   background-image: url('/static/images/difusion/personas-careers.jpg');
   background-size: cover;
   background-position: center 30%;
   text-align: center;
   padding: 140px 0 130px;
}

.nuestra-gente-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.62);
}

.nuestra-gente-inner {
   position: relative;
   z-index: 2;
}

.nuestra-gente-inner .seccion-label {
   color: rgba(255,255,255,0.70);
}

.cifras-titulo {
   font-size: 48px;
   font-weight: 800;
   color: #fff;
   margin: 8px 0 40px;
   font-family: var(--font);
}

.cifras-img {
   max-width: 680px;
   width: 100%;
   display: block;
   margin: 0 auto;
   border-radius: 14px;
   box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* ═══════════════════════════════════════
   PROCESO
═══════════════════════════════════════ */
.proceso-seccion {
   padding: 100px 0;
   background: var(--gris-claro);
}

/* Layout dos columnas */
.proceso-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
}

/* Columna izquierda */
.proceso-encabezado { max-width: 420px; }

.proceso-titulo {
   font-size: 46px;
   font-weight: 800;
   color: var(--negro);
   margin: 8px 0 14px;
   line-height: 1.15;
   font-family: var(--font);
}

.proceso-subtitulo {
   color: var(--texto-claro);
   font-size: 17px;
   margin: 0 0 32px;
   line-height: 1.7;
}

/* Columna derecha: pasos verticales */
.proceso-pasos {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.proceso-paso {
   display: flex;
   gap: 28px;
   align-items: flex-start;
   position: relative;
   padding-bottom: 40px;
}

/* Línea vertical entre pasos */
.proceso-paso:not(.proceso-paso--ultimo)::after {
   content: '';
   position: absolute;
   left: 24px;
   top: 52px;
   bottom: 0;
   width: 1.5px;
   background: var(--gris-borde);
}

/* Ícono del paso */
.proceso-paso-icono {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--blanco);
   border: 1.5px solid var(--gris-borde);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
   color: var(--texto-claro);
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

/* Paso activo (Postúlate) */
.proceso-paso--activo .proceso-paso-icono {
   background: var(--rojo);
   border-color: var(--rojo);
   color: #fff;
   box-shadow: 0 6px 20px rgba(215,25,33,0.28);
}

/* Línea del paso activo en rojo */
.proceso-paso--activo::after {
   background: rgba(215,25,33,0.20);
}

/* Contenido */
.proceso-paso-contenido { padding-top: 10px; }

.proceso-paso-contenido h3 {
   font-size: 20px;
   font-weight: 700;
   color: var(--negro);
   margin: 0 0 8px;
   font-family: var(--font);
}

.proceso-paso--activo .proceso-paso-contenido h3 {
   color: var(--rojo);
}

.proceso-paso-contenido p {
   font-size: 15px;
   color: var(--texto-claro);
   line-height: 1.7;
   margin: 0;
}

.proceso-paso--ultimo { padding-bottom: 0; }

/* ═══════════════════════════════════════
   CTA VACANTES
═══════════════════════════════════════ */
.cta-seccion {
   position: relative;
   background-image: url('/static/images/difusion/careers-personas-campo.jpg');
   background-size: cover;
   background-position: center 30%;
   background-attachment: fixed;
   padding: 110px 0;
   text-align: center;
}

.cta-seccion::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.62);
}

.cta-seccion .container {
   position: relative;
   z-index: 2;
}

.cta-seccion h2 {
   font-size: 36px;
   font-weight: 700;
   color: #fff;
   margin: 0 0 14px;
   font-family: var(--font);
}

.cta-seccion p {
   font-size: 16px;
   color: rgba(255,255,255,0.85);
   margin-bottom: 36px;
   max-width: 520px;
   margin-left: auto;
   margin-right: auto;
}

.btn-cta {
   display: inline-block;
   padding: 16px 44px;
   background: var(--rojo);
   color: #fff !important;
   border-radius: 8px;
   font-weight: 700;
   font-size: 16px;
   text-decoration: none !important;
   transition: background 0.2s, transform 0.15s;
   font-family: var(--font);
}

.btn-cta:hover {
   background: var(--rojo-oscuro);
   transform: translateY(-2px);
}

@media (max-width: 767px) {
   .cta-seccion { background-attachment: scroll; padding: 80px 0; }
}

/* ═══════════════════════════════════════
   NEW ENERGY
═══════════════════════════════════════ */
.newenergy-seccion {
   padding: 100px 0;
   background: var(--blanco);
}

.newenergy-header {
   text-align: center;
   margin-bottom: 56px;
}

.newenergy-badge {
   display: inline-block;
   background: #FFF0F1;
   color: var(--rojo);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 6px 18px;
   border-radius: 20px;
   border: 1px solid #FFCED1;
   margin-bottom: 16px;
}

.newenergy-titulo {
   font-size: 52px;
   font-weight: 800;
   color: var(--negro);
   margin: 0 0 16px;
   font-family: var(--font);
   letter-spacing: -1px;
}

.newenergy-desc {
   font-size: 17px;
   color: var(--texto-claro);
   max-width: 560px;
   margin: 0 auto;
   line-height: 1.7;
}

/* ── Fila de números grandes ── */
.ne-nums-row {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   margin-bottom: 0;
}

.ne-nums-row span {
   font-size: 72px;
   font-weight: 800;
   color: var(--rojo);
   font-family: var(--font);
   line-height: 1;
   padding: 0 24px;
   opacity: 0.90;
}

/* ── Línea conectora ── */
.ne-linea {
   margin-bottom: 0;
   padding: 0 24px;
}

.ne-linea-track {
   position: relative;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   align-items: center;
   border-top: 2px solid var(--gris-borde);
}

.ne-dot {
   width: 12px;
   height: 12px;
   background: var(--rojo);
   border-radius: 50%;
   margin-top: -7px;
   justify-self: start;
   margin-left: 28px;
   box-shadow: 0 0 0 3px rgba(215,25,33,0.15);
}

/* ── Cards de requisitos ── */
.newenergy-requisitos {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 0;
   margin-bottom: 56px;
}

.requisito-card {
   padding: 24px 24px 24px;
   border-right: 1px solid var(--gris-borde);
   transition: background 0.2s;
}

.requisito-card:last-child { border-right: none; }
.requisito-card:hover { background: var(--gris-claro); }

.requisito-card h4 {
   font-size: 15px;
   font-weight: 700;
   color: var(--negro);
   margin: 0 0 8px;
   font-family: var(--font);
}

.requisito-card p {
   font-size: 13px;
   color: var(--texto-claro);
   line-height: 1.7;
   margin: 0;
}

.requisito-card p strong {
   color: var(--negro);
}

.newenergy-cta {
   text-align: center;
}

/* ═══════════════════════════════════════
   LINKEDIN
═══════════════════════════════════════ */
.linkedin-seccion {
   background: var(--negro);
   padding: 80px 0;
}

.linkedin-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 60px;
}

/* Lado izquierdo */
.linkedin-left {
   display: flex;
   align-items: flex-start;
   gap: 24px;
   flex: 1;
}

.linkedin-icon-grande {
   font-size: 48px;
   color: #0077B5;
   flex-shrink: 0;
   line-height: 1;
   margin-top: 4px;
}

.linkedin-titulo {
   font-size: 26px;
   font-weight: 700;
   color: #fff;
   margin: 0 0 10px;
   font-family: var(--font);
}

.linkedin-desc {
   font-size: 15px;
   color: rgba(255,255,255,0.55);
   margin: 0 0 24px;
   line-height: 1.7;
   max-width: 400px;
}

.btn-linkedin {
   display: inline-block;
   padding: 12px 28px;
   background: #0077B5;
   color: #fff !important;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none !important;
   transition: background 0.2s, transform 0.15s;
   font-family: var(--font);
}

.btn-linkedin:hover {
   background: #005885;
   transform: translateY(-1px);
}

/* Pilares lado derecho */
.linkedin-pilares {
   display: flex;
   flex-direction: column;
   gap: 20px;
   flex-shrink: 0;
}

.linkedin-pilar {
   padding: 15px 24px;
   border: 1px solid rgba(255,255,255,0.10);
   border-radius: 10px;
   background: rgba(255,255,255,0.04);
   min-width: 220px;
   transition: background 0.2s, border-color 0.2s;
}

.linkedin-pilar:hover {
   background: rgba(255,255,255,0.08);
   border-color: rgba(255,255,255,0.18);
}

.linkedin-pilar span {
   font-size: 14px;
   font-weight: 500;
   color: rgba(255,255,255,0.80);
   font-family: var(--font);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
   .newenergy-requisitos { grid-template-columns: repeat(3, 1fr); }
   .ne-nums-row          { grid-template-columns: repeat(3, 1fr); }
   .ne-linea-track       { grid-template-columns: repeat(3, 1fr); }
   .ne-nums-row span:nth-child(n+4),
   .ne-dot:nth-child(n+4) { display: none; }
}

@media (max-width: 991px) {
   .proposito-row        { flex-direction: column; gap: 32px; }
   .proposito-texto,
   .proposito-beneficios { flex: 0 0 100%; max-width: 100%; }
   .proceso-layout       { grid-template-columns: 1fr; gap: 48px; }
   .proceso-encabezado   { max-width: 100%; }
   .newenergy-requisitos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
   .linkedin-inner       { flex-direction: column; gap: 40px; }
   .linkedin-pilares     { flex-direction: row; flex-wrap: wrap; }
   .linkedin-pilar       { min-width: 0; flex: 1; }
}

@media (max-width: 767px) {
   .hero-titulo          { font-size: 34px; }
   .hero-subtitulo       { font-size: 15px; }
   .hero-form-inner      { flex-direction: column; padding: 16px; gap: 10px; }
   .hero-btn             { width: 100%; padding: 14px; }
   .hero-field           { width: 100%; }
   .beneficios-grid      { grid-template-columns: 1fr; }
   .proceso-titulo,
   .proposito-texto h2,
   .cta-seccion h2,
   .cifras-titulo,
   .newenergy-titulo     { font-size: 32px; }
   .newenergy-requisitos { grid-template-columns: 1fr; border-top: 1px solid var(--gris-borde); }
   .requisito-card       { border-right: none; border-bottom: 1px solid var(--gris-borde); }
   .ne-nums-row          { grid-template-columns: repeat(2, 1fr); }
   .ne-linea-track       { grid-template-columns: repeat(2, 1fr); }
   .ne-nums-row span     { font-size: 48px; }
   .ne-nums-row span:nth-child(n+3),
   .ne-dot:nth-child(n+3) { display: none; }
   .newenergy-titulo     { font-size: 36px; }
   .nuestra-gente-seccion { padding: 80px 0; }
   .cifras-titulo        { font-size: 28px; }
}