*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0
   }

   :root {
       --navy: #112040;
       --navy-mid: #1C4780;
       --light-bg: #F1F7FF;
       --white: #fff;
       --input-label: #1F477E;
       --input-border: #C3C6D8;
       --input-ph: #909AA7;
       --chevron-color: #1C477E;
   }

   body {
       font-family: 'Open Sans', sans-serif;
       background: var(--light-bg);
       -webkit-font-smoothing: antialiased;
   }

   /* ── WRAPPER ─────────────────────────────────── */
   .vacantes-block {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 80px;
       width: 1272px;
       max-width: 100%;
       margin: 0 auto;
       margin-bottom: 40px;
       margin-top: 40px;
   }

   /* ── FILTERS HEADER ──────────────────────────── */
   .filters-block {
       width: 100%;
       display: flex;
       flex-direction: column;
       gap: 48px;
       align-items: center;
   }

   .list-label {
       font-family: 'Poppins', sans-serif;
       font-size: 24px;
       font-weight: 700;
       line-height: 36px;
       color: var(--navy-mid);
       text-decoration: underline;
       text-underline-offset: 3px;
       align-self: flex-start;
   }

   .filters-row {
       width: 100%;
       display: flex;
       gap: 24px;
   }

   /* Input with label component */
   .input-field {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 6px;
   }

   .input-field label {
       font-family: 'Poppins', sans-serif;
       font-size: 14px;
       font-weight: 600;
       line-height: 20px;
       letter-spacing: 0.1px;
       color: var(--input-label);
   }

   .input-field .input-wrap {
       position: relative;
       display: flex;
       align-items: center;
   }

   .input-field select {
       width: 100%;
       height: 48px;
       background: var(--white);
       border: 1px solid var(--input-border);
       border-radius: 4px;
       padding: 0 36px 0 12px;
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       font-weight: 400;
       line-height: 21px;
       letter-spacing: 0.5px;
       color: var(--input-ph);
       appearance: none;
       outline: none;
       cursor: pointer;
       box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
       transition: border-color .2s;
   }

   .input-field select:focus {
       border-color: var(--navy-mid);
   }

   /* Chevron icon inside select */
   .input-field .chevron {
       position: absolute;
       right: 12px;
       pointer-events: none;
       display: flex;
       align-items: center;
   }

   .input-field .chevron svg {
       width: 8px;
       height: 4px;
   }

   /* ── JOB CARDS GRID ──────────────────────────── */
   .jobs-grid {
       width: 100%;
       display: flex;
       flex-direction: column;
       gap: 24px;
   }

   .jobs-row {
       display: flex;
       gap: 24px;
       align-items: flex-start;
   }

   /* ── JOB CARD ────────────────────────────────── */
   .job-card {
       flex: 0 0 calc(33.333% - 16px);
       background: var(--navy);
       border-radius: 18px;
       padding: 21px 51px;
       display: flex;
       flex-direction: column;
       gap: 32px;
       cursor: pointer;
       transition: transform .25s ease, box-shadow .25s ease;
       overflow: hidden;
       position: relative;
       min-height: 212px
   }

   .job-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
   }

   /* Expanded state */
   .job-card.expanded .job-card__detail {
       display: flex;
   }

   /* Top content: title + location */
   .job-card__top {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .job-card__title {
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       font-weight: 700;
       line-height: 36px;
       color: var(--white);
       text-align: center;
   }

   .job-card__location {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }

   /* Country flag emoji or image */
   .job-card__flag {
       width: 29px;
       height: 21px;
       border-radius: 2px;
       object-fit: cover;
       flex-shrink: 0;
       font-size: 18px;
       line-height: 21px;
       text-align: center;
   }

   .job-card__city {
       font-family: 'Open Sans', sans-serif;
       font-size: 16px;
       font-weight: 400;
       line-height: 26px;
       color: var(--white);
   }

   /* Footer: ver más + chevron */
   .job-card__footer {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0;
   }

   .job-card__ver-mas {
       font-family: 'Open Sans', sans-serif;
       font-size: 16px;
       font-weight: 600;
       line-height: 26px;
       color: var(--white);
   }

   /* Chevron rotated: chevron_left (‹) rotated 180° = points right (›) */
   .job-card__chevron {
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       color: var(--white);
       line-height: 1;
       transition: transform .25s ease;
   }

   .job-card:hover .job-card__chevron {
       transform: translateX(4px);
   }

   /* Expanded detail panel */
   .job-card__detail {
       display: none;
       flex-direction: column;
       gap: 16px;
       padding-top: 8px;
       border-top: 1px solid rgba(255, 255, 255, .2);
   }

   .job-card__detail-text {
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
       color: rgba(255, 255, 255, .85);
   }

   .job-card__detail-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-family: 'Open Sans', sans-serif;
       font-size: 14px;
       font-weight: 600;
       color: var(--white);
       background: rgba(255, 255, 255, .15);
       border: none;
       border-radius: 6px;
       padding: 8px 16px;
       cursor: pointer;
       width: fit-content;
       transition: background .2s;
   }

   .job-card__detail-btn:hover {
       background: rgba(255, 255, 255, .25);
   }

   /* ── VER MÁS BUTTON (secundario) ─────────────── */
   /* Exact Figma specs:
       padding: 16px 32px, border-radius: 8px, bg: white, border: 1px solid #112040
       backdrop-filter: blur(20px), text: Poppins SemiBold 18px #112040
       ON_HOVER → filled navy */
   .btn-ver-mas {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 16px 32px;
       border-radius: 8px;
       background: var(--white);
       border: 1px solid var(--navy);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       font-family: 'Poppins', sans-serif;
       font-size: 18px;
       font-weight: 600;
       line-height: 1.1;
       color: var(--navy);
       cursor: pointer;
       text-decoration: none;
       transition: background .25s ease, color .25s ease, box-shadow .25s ease;
       align-self: center;
   }

   .btn-ver-mas:hover {
       background: var(--navy);
       color: var(--white);
       box-shadow: 0 4px 16px rgba(17, 32, 64, .25);
   }

   /* ── RESPONSIVE ──────────────────────────────── */
   @media(max-width:1024px) {
       body {
           padding: 60px 40px
       }

       .jobs-row {
           flex-wrap: wrap
       }

       .job-card {
           min-width: calc(50% - 12px);
           flex: none
       }
   }

   @media(max-width:640px) {
       body {
           padding: 40px 20px
       }

       .filters-row {
           flex-direction: column
       }

       .jobs-row {
           flex-direction: column
       }

       .job-card {
           padding: 21px 32px
       }

       .job-card__title {
           font-size: 17px
       }
   }