/* ==========================================================================
   Adchor Jobs – Shared Styles (Bootstrap 5 compatible)
   ========================================================================== */

/* Base */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; width:100%; font-family:'Poppins', sans-serif; overflow-x:hidden; }

/* Header */

/* Static Gradient Background */
.job-header {
    background: linear-gradient(135deg, #000c64 0%, #041ab5 25%, #001fff 50%, #3b82f6 75%, #60a5fa 100%);
}

/* Dark mode enhancement */
@media (prefers-color-scheme: dark) {
    .job-header {
        background: linear-gradient(135deg, #000c64 0%, #041ab5 25%, #001fff 50%, #3b82f6 75%, #60a5fa 100%);
    }
}
.job-header{ margin-top:33px;  min-height:169px; display:flex; align-items:center; padding:20px 0; }
.job-header-content{ display:flex; align-items:center; width:100%; max-width:1445px; margin:0 auto; padding:0 20px 0 75px; }
.job-logo{ width:101px; height:89px; object-fit:contain; margin-right:30px; }
.job-info{ color:#fff; }
.job-title{ font-size:2.3rem; font-weight:600; letter-spacing:-.4px; margin:0 0 8px; line-height:1.2; }
.job-location{ font-size:1.4rem; font-weight:400; letter-spacing:-.24px; margin:0; line-height:1.2; }

/* Tabs (sticky) */
:root{ --tabs-h:72px; }
.job-tabs{ background:#f8f9fa; border-bottom:1px solid #dee2e6; position:sticky; top:0; z-index:1050; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.job-tabs .nav-tabs{ border-bottom:none; justify-content:flex-start; padding-left:75px; }
.job-tabs .nav-link{ color:#666; font-size:18px; border:none; border-bottom:3px solid transparent; background:transparent; padding:15px 30px; margin-right:20px; }
.job-tabs .nav-link.active{ color:#021de0 !important; border-bottom-color:#021de0; background: transparent;}
.job-tabs .nav-link:hover{ color:#021de0; }
.job-tabs.is-fixed{ position:fixed; left:0; right:0; top:0; background:#f8f9fa; }
.job-tabs.is-fixed + .job-content{ padding-top:var(--tabs-h); }

/* Main content */
.job-content{ padding:0; background:#fff; }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* Overview */
.role-image{ width:100%; max-width:611px; aspect-ratio:196/179; object-fit:cover; border-radius:8px; }
.role-description{ color:#000; font-size:20px; line-height:1.5; letter-spacing:-.24px; margin-bottom:30px; max-width:607px; }
.apply-btn{
  display:inline-flex; width:207px; height:52px; padding:15px 45px; justify-content:center; align-items:center;
  border-radius:10px; background:#021de0; color:#fff; text-decoration:none; font-size:16px; font-weight:500; border:none; transition:.3s;
}
.apply-btn:hover{ background:#2966d9; color:#fff; transform:translateY(-2px); }

/* Responsibilities */
.responsibilities-title{ font-size:30px; font-weight:600; color:#000; margin:30px 0; }
.responsibility-item{ width:100%; border-radius:21px; background:#E6EAF1; cursor:pointer; transition:.3s; overflow:hidden; }
.responsibility-item:hover{ transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,.1); }
.responsibility-header{ display:flex; padding:32px 40px; align-items:center; justify-content:space-between; gap:36px; }
.responsibility-text{ color:#595C66; font-size:20px; letter-spacing:-.24px; flex-grow:1; }

.arrow-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
	transform: rotate(-90deg);
	flex-shrink: 0;
}
.arrow-icon.expanded{ transform:rotate(0); }

.responsibility-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding: 0 40px;
}
.responsibility-content.expanded {
	max-height: 600px;
	padding: 0 40px 30px 40px;
}
.responsibility-content ul{ list-style:none; padding:0; margin:20px 0 0; }
.responsibility-content li{ color:#595C66; font-size:18px; letter-spacing:-.18px; line-height:1.5; margin-bottom:12px; padding-left:20px; position:relative; }
.responsibility-content li:before{ content:"•"; color:#8B8D93; font-size:20px; position:absolute; left:0; }

/* Job details (blue) */
.job-details{ background:linear-gradient(135deg,#2161BF 0%,#2161BF 100%); padding:80px 0; color:#fff; margin-bottom:0;}
.job-details-content{ display:flex; align-items:center; gap:60px; }
.job-details-left {
	flex: 1;
}
.job-details-right {
	flex: 1;
}
.job-details-title{ font-size:40px; font-weight:600; margin-bottom:40px; }
.job-detail-item{ margin-bottom:35px;margin-left:2rem; }
.job-detail-header{ display:flex; align-items:center; gap:15px; margin-bottom:8px; }
.job-detail-icon{ width:24px; height:24px; fill:#fff; }
.job-detail-label{ font-size:24px; font-weight:600; margin:0; }
.job-detail-value{
  font-size:20px;
  color:rgba(255,255,255,.9);
  padding-left:39px;
  display: block !important;
  text-align: left; 
}

.job-details-image{ width:100%; height:auto; border-radius:12px; object-fit:cover; }

.job-details-apply-btn {
	display: inline-flex;
	padding: 15px 30px;
	border: 2px solid white;
	border-radius: 8px;
	background: transparent;
	color: white;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	transition: all 0.3s ease;
	margin-top: 50px;
  display: flex;
  width: 207px;
  height: 52px;
  padding: 14px 40px;
  justify-content: center;
   align-items: center;
   flex-shrink: 0;
   margin-left:2rem;
}  
.job-details-apply-btn:hover {
	background: white;
	color: #367FFF;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Final section: keep carousel card styling (2 centered cards) */
.car-background{ background:#201D1D; }
.job-car-title{ 
  color: #FFF;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -0.3px;
  margin-bottom: 2rem;
  text-align: left;
}
.job-card-custom{ background:#414145; border-radius:16px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,.25); color:#E6ECFF; height:100%; }
.job-top-container{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.job-category span{ display:inline-block; background:#1b2a4a; color:#8FB3FF; border:1px solid #2a3e6a; padding:4px 10px; border-radius:999px; font-size:.75rem; }
.job-date{ color:#fff; text-align:center; line-height:1; }
.job-date div:first-child{ font-size:20px; font-weight:700; color:#367FFF }
.job-date div:last-child{ font-size:12px; letter-spacing:1px; opacity:.85; }
.job-card-title{ color:#fff; font-weight:700; font-size:1.1rem; margin-bottom:.25rem; }
.job-description{ color:#c7d3f0; font-size:.925rem; min-height:3.5em; }
.apply-now{ margin-top:12px; display:inline-block; color:#fff; background:#367FFF; border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; text-align:center; }
.apply-now:hover{ background:#2966d9; }

/* Application tab */
.app-form{ background:#fff; }
.app-form .form-title{ font-size:24px; font-weight:600; margin-bottom:24px; color:#000; }
.form-card{ max-width:880px; margin:0 auto; }
.input-skel .form-control{ background:#EDEDED; border-color:#EDEDED; height:48px; border-radius:8px; }
.btn-pill{ border-radius:999px; padding:.5rem 1.25rem; font-weight:500; }
.btn-attach{ background:#fff; border:1.5px solid #367FFF; color:#367FFF; }
.btn-attach:hover{ background:#367FFF; color:#fff; }
.btn-outline-manual{ border:1.5px solid #B9C3D4; color:#3f4a5d; background:#fff; }
.btn-outline-manual:hover{ background:#f3f6fb; color:#2e3a4d; }
.field-hint{ font-size:11px; color:#98a2b3; margin-top:.35rem; }
.file-picker{ display:none; }
.file-name{ display:inline-block; margin-left:.5rem; font-size:.875rem; color:#6c757d; }
.manual-container textarea{ min-height:180px; resize:vertical; }
.btn-stack{ display:flex; flex-direction:column; gap:.5rem; max-width:200px; }
.app-select .form-select{ height:48px; border-radius:8px; background:#EDEDED; border-color:#EDEDED; }
.app-submit{ display:flex; justify-content:center; }
.app-submit .btn{ background:#367FFF; border:none; border-radius:10px; padding:.9rem 1.75rem; color:#fff; }


/* ===== Cards v2 (look de tu mockup) ===== */
.job-cards-v2 .job-card-custom{
  background:#414145;                 /* gris del mockup */
  border-radius:28px;                  /* esquinas grandes */
  padding:36px;
  box-shadow:none;
  color:#E9EDF4;
}
.job-cards-v2 .job-category span{
  background:transparent;
  border:1px solid #C7CCD3;
  color:#E9EDF4;
  padding:10px 20px;
  border-radius:999px;
  font-size:0.95rem;
  letter-spacing:.2px;
}
.job-cards-v2 .job-date{
  color:#2F73FF;                       /* azul vibrante del mockup */
  font-weight:800;
}
.job-cards-v2 .job-date div:first-child{ 
  color: #367FFF;
  font-size: 40px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.4px;
  margin-bottom: 0.5rem;
}

.job-cards-v2 .job-date div:last-child{ 
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.2px; 
  }

.job-cards-v2 .job-card-title{
  color:#fff;
  font-weight:300;
  font-size:1.2rem;                    /* título grande */
  line-height:1.1;
  margin:18px 0;
}
.job-cards-v2 .job-description{
  color:#D3D8E0;
  font-size:0.9rem;
  text-align: left;
  line-height:1.5;
  min-height:auto;
}

/* "Apply Now" como texto (no botón, sin subrayado) */
.job-cards-v2 .apply-now{
  display:inline-block;
  margin-top:18px;
  padding:0;
  background:transparent;
  border-radius:0;
  color:#2F73FF;
  font-weight:700;
  text-decoration:none;
}
.job-cards-v2 .apply-now:hover{ opacity:.85; text-decoration:none; }

/* Layout: 2 por fila centrados; 1 en mobile */
.job-cards-v2 .row{ justify-content:center; }
.job-cards-v2 .col-card{              /* helper para columnas simétricas */
  flex:0 0 auto;
}
@media (min-width: 768px){
  .job-cards-v2 .col-card{ width:50%; max-width:560px; }
}
@media (min-width: 992px){
  .job-cards-v2 .col-card{ width:45%; }
}
@media (max-width: 767.98px){
  .job-cards-v2 .col-card{ width:100%; }
}

/* Responsive */
@media (max-width: 992px){
  .role-overview-content .col-md-6:first-child{ margin-bottom:40px; }
}
@media (max-width: 768px){
  .job-header-content{ flex-direction:column; text-align:center; padding:0 20px; }
  .job-logo{ margin:0 0 20px; }
  .job-title{ font-size:28px; }
  .job-location{ font-size:18px; }
  .job-tabs .nav-tabs{ padding-left:20px; flex-wrap:nowrap; overflow-x:auto; }
  .job-tabs .nav-link{ font-size:16px; padding:12px 20px; margin-right:10px; white-space:nowrap; }
  .job-content{ padding:40px 0; }
  .role-description{ font-size:18px; margin-bottom:25px; }
  .apply-btn{ width:180px; height:48px; font-size:14px; }
  .job-details{ padding:60px 0; }
  .job-details-content{ flex-direction:column; gap:40px; }
  .job-details-title{ font-size:30px; }
  .job-detail-label{ font-size:24px; font-weight:400; }
  .job-detail-value{ font-size:18px; }
}
@media (max-width: 576px){
  .job-header{ min-height:auto; padding:30px 0; }
  .job-title{ font-size:24px; }
  .job-location{ font-size:16px; }
  .apply-btn{ width:160px; height:44px; padding:12px 20px; }
}







/* =============================ADCHOR JOBS ANIMATIONS ONLY ==============================================
Professional solution - Animations that work with Bootstrap tabs
=======================================================================================*/

/* HEADER SECTION ANIMATIONS */
.job-header {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-header.animate {
  opacity: 1;
  transform: translateY(0);
}

.job-logo {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-logo.animate {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

.job-title {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-title.animate {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

.job-location {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-location.animate {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

.job-tabs {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.job-tabs.animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* TAB CONTENT ANIMATIONS - Only apply when tab is active AND has animate class */
.tab-content.active .role-image:not(.animate) {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}

.tab-content.active .role-image.animate {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease 0.2s;
}

.tab-content.active .role-description:not(.animate) {
  opacity: 0;
  transform: translateY(30px);
}

.tab-content.active .role-description.animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease 0.3s;
}

.tab-content.active .apply-btn:not(.animate) {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.tab-content.active .apply-btn.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.8s ease, transform 0.8s ease 0.4s;
}

.tab-content.active .responsibilities-title:not(.animate) {
  opacity: 0;
  transform: translateY(30px);
}

.tab-content.active .responsibilities-title.animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease 0.1s;
}

.tab-content.active .responsibility-item:not(.animate) {
  opacity: 0;
  transform: translateY(30px);
}

.tab-content.active .responsibility-item.animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tab-content.active .responsibility-item:nth-child(1).animate { transition-delay: 0.2s; }
.tab-content.active .responsibility-item:nth-child(2).animate { transition-delay: 0.3s; }
.tab-content.active .responsibility-item:nth-child(3).animate { transition-delay: 0.4s; }
.tab-content.active .responsibility-item:nth-child(4).animate { transition-delay: 0.5s; }
.tab-content.active .responsibility-item:nth-child(5).animate { transition-delay: 0.6s; }

/* JOB DETAILS SECTION */
.job-details {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.job-details.animate {
  opacity: 1;
  transform: translateY(0);
}

.job-details-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-details.animate .job-details-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.job-detail-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-details.animate .job-detail-item {
  opacity: 1;
  transform: translateX(0);
}

.job-details.animate .job-detail-item:nth-child(1) { transition-delay: 0.3s; }
.job-details.animate .job-detail-item:nth-child(2) { transition-delay: 0.4s; }
.job-details.animate .job-detail-item:nth-child(3) { transition-delay: 0.5s; }
.job-details.animate .job-detail-item:nth-child(4) { transition-delay: 0.6s; }

.job-details-image {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-details.animate .job-details-image {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.4s;
}

.job-details-apply-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.job-details.animate .job-details-apply-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* CAROUSEL/CARDS SECTION */
.car-background {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.car-background.animate {
  opacity: 1;
  transform: translateY(0);
}

.job-car-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.car-background.animate .job-car-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.job-card-custom {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.car-background.animate .job-card-custom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.car-background.animate .job-card-custom:nth-child(1) { transition-delay: 0.3s; }
.car-background.animate .job-card-custom:nth-child(2) { transition-delay: 0.4s; }
.car-background.animate .col-card:nth-child(1) .job-card-custom { transition-delay: 0.3s; }
.car-background.animate .col-card:nth-child(2) .job-card-custom { transition-delay: 0.4s; }

/* ===== ACCESSIBILITY & PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .job-header,
  .job-logo,
  .job-title,
  .job-location,
  .tab-content.active .role-image,
  .tab-content.active .role-description,
  .tab-content.active .apply-btn,
  .tab-content.active .responsibility-item,
  .job-details,
  .job-card-custom {
    transition-duration: 0.6s;
  }
}