/* =====================================================
   TALENTO - BRANDING & UX (CLEAN + CONSOLIDATED)
   CodersLink Bridge – Talento v1 / templates/layouts/child.css

   TABLE OF CONTENTS
   -----------------
   0) TOKENS (PALETA TALENTO)        — Design team
   1) BASE TYPOGRAPHY                — Design team
   2) HERO (KL)                      — Design team
   3) HEADER (Bridge)                — Design team
   4) MOBILE HEADER                  — Design team
   5) HERO RESPONSIVE                — Design team
   6) FOOTER (Bridge Override)       — Design team
   8) BRIDGE UTILITIES               — Design team
   9) CASE STUDY LAYOUT              — Design team

   RULES:
   - Each section is owned by the team indicated above.
   - Do NOT edit or remove another team's section.
   - New sections should be added at the end with the next number (e.g., 8).
   - Job portal styles (section 7) use "pt-*" class prefix to avoid conflicts.
   - If in doubt, coordinate with the other team before making changes.

   ===================================================== */


/* =========================
   0) TOKENS (PALETA TALENTO)
========================= */
:root{
  /* --- COLORES PRINCIPALES (TALENTO) --- */
  --cl-accent-base: #533E96;
  --cl-accent-light: #9473FF;
  --cl-accent-hover-bright: #3E2D6E;
  --cl-accent-secondary: #F7822F;

  /* --- NEUTROS & BASE --- */
  --cl-white: #FFFFFF;
  --cl-text-900: #101828;
  --cl-text-700: #475467;
  --cl-neutral-900: #212529;

  --cl-surface-1: var(--cl-white);
  --cl-surface-2: rgba(16, 24, 40, 0.04);
  --cl-border-subtle: rgba(16, 24, 40, 0.12);
  --cl-border-strong: rgba(16, 24, 40, 0.22);

  /* --- UI --- */
  --cl-radius-sm: 6px;
  --cl-radius-md: 8px;
  --cl-radius-lg: 12px;

  --cl-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --cl-font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --cl-shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --cl-shadow-md: 0 6px 16px rgba(16,24,40,0.10);

  --cl-ease: ease;
  --cl-dur-140: 140ms;
  --cl-dur-160: 160ms;
  --cl-focus-ring: 0 0 0 3px var(--cl-accent-light);

  /* --- LAYOUT & SPACING --- */
  --bridge-gap-md: 14px;
  --bridge-gap-sm: 8px;
  --bridge-body-max: 80ch;
  --bridge-container-max: 1400px;
  --bridge-container-px: 24px;

  /* --- TYPOGRAPHY SCALING --- */
  --bridge-section-title-color: var(--cl-neutral-900);
  --bridge-section-desc-color: var(--cl-text-700);

  --bridge-section-title-size: 36px;
  --bridge-section-title-line: 40px;
  --bridge-section-title-weight: 700;
  --bridge-section-title-mb: 16px;

  --bridge-section-desc-size: 15px;
  --bridge-section-desc-line: 1.6;
  --bridge-section-desc-max: 72ch;

  /* --- EYEBROW --- */
  --bridge-eyebrow-font-family: var(--cl-font-body);
  --bridge-eyebrow-font-size: 14px;
  --bridge-eyebrow-line-height: 1.4;
  --bridge-eyebrow-font-weight: 700;
  --bridge-eyebrow-letter-spacing: 0.12em;
  --bridge-eyebrow-text-transform: uppercase;
  --bridge-eyebrow-color: var(--cl-accent-base);
  --bridge-eyebrow-margin-bottom: 12px;

  /* --- BUTTON CONFIG --- */
  --cl-btn-font-size: 0.75rem;
  --cl-btn-font-weight: 700;
  --cl-btn-letter-spacing: 0.06em;
  --cl-btn-gap: 8px;
  --cl-btn-border: 1px;

  --cl-btn-lg-minh: 44px;
  --cl-btn-lg-py: 10px;
  --cl-btn-lg-px: 28px;

  --cl-btn-md-minh: 40px;
  --cl-btn-md-py: 8px;
  --cl-btn-md-px: 24px;

  --cl-btn-sm-minh: 32px;
  --cl-btn-sm-py: 6px;
  --cl-btn-sm-px: 16px;

  --cl-btn-lg-minh-mobile: 48px;
  --cl-btn-lg-py-mobile: 12px;
  --cl-btn-lg-px-mobile: 32px;

  --cl-text-inverse: var(--cl-white);
  --cl-surface-overlay: rgba(16, 24, 40, 0.72);

  /* --- FOOTER THEME (Light) --- */
  --bridge-footer-bg: rgba(83, 62, 150, 0.04);
  --bridge-footer-text: rgba(16, 24, 40, 0.92);
  --bridge-footer-muted: rgba(16, 24, 40, 0.70);
  --bridge-footer-link: rgba(16, 24, 40, 0.80);
  --bridge-footer-link-hover: rgba(16, 24, 40, 0.92);
  --bridge-footer-border: rgba(16, 24, 40, 0.10);

  --bridge-footer-title-size: 24px;
  --bridge-footer-title-line: 1.25;
  --bridge-footer-title-weight: 700;

  --bridge-footer-link-size: 16px;
  --bridge-footer-link-line: 1.55;

  /* --- OPTIONAL (Hero highlights only; scoped below) --- */
  --cl-highlight-peach: rgba(255, 133, 95, 0.25);
  --cl-highlight-lavender: rgba(148, 115, 255, 0.2);
  --cl-highlight-mint: rgba(153, 235, 206, 0.3);
}

@media (max-width: 768px){
  :root{
    --bridge-section-title-size: 28px;
    --bridge-section-title-line: 32px;
    --bridge-section-title-mb: 16px;
    --bridge-container-px: 18px;
  }
}

/* =========================
   1) BASE TYPOGRAPHY
========================= */
body{
  font-family: var(--cl-font-body) !important;
  color: var(--cl-text-900);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* =========================
   2) HERO (KL)
========================= */
.kl-hero-02{
  padding: 80px 32px !important;
  overflow: hidden;
}

.kl-hero-02__image img,
.kl-hero-02__image .floating-element img,
.kl-hero-02__image .floating-element:not(:empty){
  border-radius: 24px !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04) !important;
}

/* HIGHLIGHTS (scoped to hero/rich text to avoid footer bleed) */
.kl-hero-02 .highlight,
.kl-rich-text .highlight{
  color: inherit !important;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.1;
}

.kl-hero-02 .highlight--peach,
.kl-rich-text .highlight--peach{ background-color: var(--cl-highlight-peach) !important; }

.kl-hero-02 .highlight--lavender,
.kl-rich-text .highlight--lavender{ background-color: var(--cl-highlight-lavender) !important; }

.kl-hero-02 .highlight--mint,
.kl-rich-text .highlight--mint{ background-color: var(--cl-highlight-mint) !important; }

/* Typography (Hero + Rich Text) */
.kl-hero-02 h1,
.kl-rich-text h1{
  font-family: var(--cl-font-heading) !important;
  font-size: 56px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--cl-text-900) !important;
  margin-bottom: 16px !important;
}

.kl-hero-02 p,
.kl-rich-text p{
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--cl-text-900) !important;
  max-width: 564px !important;
  margin-bottom: 24px !important;
}

.kl-rich-text__preheader{
  font-size: 14px !important;
  letter-spacing: 1.68px !important;
  font-weight: 700 !important;
  color: var(--cl-text-700) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: block;
}

.kl-hero-02__micro-copy{
  margin-top: 24px !important;
  font-size: 13px !important;
  color: var(--cl-text-700) !important;
  font-weight: 500 !important;
}

/* Buttons (scoped — no rompe Header) */
.kl-hero-02 .cl-btn,
.kl-hero-02 .hs-button,
.kl-hero-02 .kl-button,
.kl-rich-text .cl-btn,
.kl-rich-text .hs-button,
.kl-rich-text .kl-button{
  height: 48px !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: var(--cl-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  transition: all 0.2s ease-in-out !important;
}

.kl-hero-02 .cl-btn--primary,
.kl-rich-text .cl-btn--primary{
  background-color: var(--cl-accent-base) !important;
  color: var(--cl-white) !important;
}

.kl-hero-02 .cl-btn--secondary,
.kl-rich-text .cl-btn--secondary{
  border: 1px solid var(--cl-accent-base) !important;
  color: var(--cl-accent-base) !important;
  background: transparent !important;
}

/* =========================
   3) HEADER (Bridge)
========================= */
.bridge-header{
  background: var(--cl-white);
  position: relative;
  z-index: 999;
}

.bridge-header__wrap{
  border-bottom: 1px solid rgba(16, 24, 40, 0.10);
  background: var(--cl-white);
  position: relative;
  z-index: 1001;
}

.bridge-header__inner{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 14px var(--bridge-container-px);
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-start;
}

/* Logo */
.bridge-header__brand{
  display: flex !important;
  align-items: center !important;
  min-width: 180px;
}

.bridge-header__brand img,
.bridge-header__brand svg{
  height: 34px !important;
  width: auto !important;
  max-height: none !important;
  display: block !important;
}

/* Panel */
.bridge-header__panel{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  justify-content: flex-end;
  flex: 1;
}

/* Header layout guardrails */
.bridge-header{
  overflow-x: clip;
}

.bridge-header__wrap{
  overflow-x: clip;
}

.bridge-header__inner{
  width: 100%;
  box-sizing: border-box;
}

/* Nav */
.bridge-header__nav .hs-menu-wrapper > ul{
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}

.bridge-header__nav .hs-menu-wrapper > ul > li{
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bridge-header__nav .hs-menu-wrapper > ul > li > a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cl-text-900) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  padding: 6px 0 !important;
}

/* Underline animado — solo desktop */
.bridge-header__nav .hs-menu-wrapper > ul > li > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 3px !important;
  background: var(--cl-text-900) !important;
  border-radius: 999px !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cl-dur-160) var(--cl-ease);
}

.bridge-header__nav .hs-menu-wrapper > ul > li > a:hover::after{
  transform: scaleX(1);
}

/* Items con submenú — sin underline */
.bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children > a::after{
  display: none !important;
}

/* ── FIX: Chevron inyectado por JS como <span class="bridge-chevron"> ── */
.bridge-chevron{
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
  color: var(--cl-text-700);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  line-height: 1;
  pointer-events: none;
}

/* =========================
   FIX 1: Chevron — desktop explícito
   Agrega este bloque en sección 3, después del bloque .bridge-chevron existente
========================= */
@media (min-width: 901px){
  .bridge-chevron{
    display: inline-block !important;
    font-size: 16px !important;         /* sobreescribe el font-size:0 del mobile */
    transform: rotate(90deg) !important;
    margin-left: 4px !important;
    color: var(--cl-text-700) !important;
    transition: transform 0.2s ease !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  .bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children:hover > a .bridge-chevron{
    transform: rotate(-90deg) !important;
  }
}

/* =========================
   FIX 2: Scroll lock — reemplaza el bloque body.bridge-menu-open actual
   (el que está fuera del @media)
   
   NOTA: position:fixed en body puede causar scroll jump.
   Guarda la posición del scroll en el JS antes de aplicarlo.
========================= */
body.bridge-menu-open{
  overflow: hidden !important;
  overflow-y: hidden !important;
  touch-action: none !important;
  position: fixed !important;
  width: 100% !important;
}

/* Desktop hover: rota al revés */
.bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children:hover > a .bridge-chevron{
  transform: rotate(-90deg);
}

/* Active states */
.bridge-header__nav .hs-menu-wrapper > ul > li.hs-menu-item.active > a::after,
.bridge-header__nav .hs-menu-wrapper > ul > li.active > a::after,
.bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children.active-branch > a::after,
.bridge-header__nav .hs-menu-wrapper > ul > li.active-branch > a::after{
  transform: scaleX(1);
}

/* Submenús desktop */
.bridge-header__nav .hs-menu-wrapper ul ul,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper{
  display: none !important;
  position: absolute !important;
  top: 100%;
  left: 0;
  min-width: 240px !important;
  padding: 10px 0 !important;
  background: var(--cl-white) !important;
  border: 1px solid rgba(16,24,40,0.12) !important;
  border-radius: 12px !important;
  box-shadow: var(--cl-shadow-md) !important;
  z-index: 999;
}

@media (min-width: 901px){
  .bridge-header__nav .hs-menu-wrapper > ul > li:hover > ul,
  .bridge-header__nav .hs-menu-wrapper > ul > li:hover > .hs-menu-children-wrapper{
    display: block !important;
  }
}

/* Reset items del submenú */
.bridge-header__nav .hs-menu-wrapper ul ul li,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* Links del submenú desktop */
.bridge-header__nav .hs-menu-wrapper ul ul li a,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li a{
  display: block !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--cl-text-700) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background var(--cl-dur-140) var(--cl-ease),
              color var(--cl-dur-140) var(--cl-ease);
}

.bridge-header__nav .hs-menu-wrapper ul ul li a::after,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li a::after{
  display: none !important;
}

.bridge-header__nav .hs-menu-wrapper ul ul li a:hover,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li a:hover{
  background: var(--cl-surface-2) !important;
  color: var(--cl-accent-base) !important;
}

/* Actions */
.bridge-header__actions{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.bridge-header__cta{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
}

/* CTAs base — solo desktop */
@media (min-width: 901px){
  .bridge-header__cta-item .hs-button,
  .bridge-header__cta-item a.hs-button{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--cl-radius-md) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 24px !important;
    line-height: 1 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    background: var(--cl-accent-base) !important;
    color: var(--cl-white) !important;
    transition: transform var(--cl-dur-160) var(--cl-ease),
                background var(--cl-dur-160) var(--cl-ease),
                border-color var(--cl-dur-160) var(--cl-ease),
                color var(--cl-dur-160) var(--cl-ease);
  }
}

.bridge-header__cta > *{
  display: flex !important;
  align-items: center !important;
}

/* Login — divisor + texto plano desktop */
.bridge-header__cta-item--login{
  display: flex !important;
  align-items: center !important;
}

.bridge-header__cta-item--login::before{
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: 18px !important;
  background: var(--cl-border-strong) !important;
  margin-right: 14px !important;
}

.bridge-header__cta-item--login .hs-button,
.bridge-header__cta-item--login a.hs-button{
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cl-text-900) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Underline animado en login */
.bridge-header__cta-item--login .hs-button::after,
.bridge-header__cta-item--login a.hs-button::after{
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: -6px !important;
  height: 3px !important;
  background: var(--cl-text-900) !important;
  border-radius: 999px !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--cl-dur-160) var(--cl-ease) !important;
}

.bridge-header__cta-item--login .hs-button:hover::after,
.bridge-header__cta-item--login a.hs-button:hover::after{
  transform: scaleX(1) !important;
}

.bridge-header__cta-item--login .hs-button:hover,
.bridge-header__cta-item--login a.hs-button:hover{
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cl-text-900) !important;
  transform: none !important;
}

/* Signup (primary) */
.bridge-header .bridge-header__cta-item--signup .hs-button,
.bridge-header .bridge-header__cta-item--signup a.hs-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  border-radius: var(--cl-radius-md) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: var(--cl-accent-base) !important;
  border: 1px solid var(--cl-accent-base) !important;
  color: var(--cl-white) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.bridge-header__cta-item--signup .hs-button:hover,
.bridge-header__cta-item--signup a.hs-button:hover{
  background: var(--cl-accent-hover-bright) !important;
  border-color: var(--cl-accent-hover-bright) !important;
  transform: translateY(-1px);
}

.bridge-header__cta-item .hs-button:focus-visible,
.bridge-header__cta-item a.hs-button:focus-visible{
  outline: none !important;
  box-shadow: var(--cl-focus-ring) !important;
}

/* Desktop hidden */
.bridge-header__toggle{ display: none; }
.bridge-header__signin{ display: none !important; }

/* Skip link */
.bridge-skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
}

/* ++ SEGMENT SWITCHER ++ */
.bridge-header__switcher{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  position: relative !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  color: var(--cl-text-700) !important;
  padding: 6px 0 6px 16px !important;
  transition: color var(--cl-dur-160) var(--cl-ease) !important;
}

.bridge-header__switcher::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 18px !important;
  background: var(--cl-border-strong) !important;
}

.bridge-header__switcher::after{
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 0 !important;
  border-bottom: 1px dashed rgba(16, 24, 40, 0.30) !important;
  transition: border-color var(--cl-dur-160) var(--cl-ease) !important;
}

.bridge-header__switcher:hover{
  color: var(--cl-accent-base) !important;
}

.bridge-header__switcher:hover::after{
  border-color: var(--cl-accent-base) !important;
}

.bridge-header__switcher svg{
  flex-shrink: 0 !important;
  opacity: 0.5 !important;
  transition: opacity var(--cl-dur-160) var(--cl-ease) !important;
}

.bridge-header__switcher:hover svg{
  opacity: 1 !important;
}

/* =========================
   4) MOBILE HEADER
========================= */

/* ── FIX scroll lock: FUERA del @media para que aplique globalmente ── */
body.bridge-menu-open{
  overflow: hidden !important;
  touch-action: none; /* iOS Safari */
}

@media (max-width: 900px){

  html, body{
    overflow-x: hidden;
  }

  .bridge-header__inner{
    padding: 14px var(--bridge-container-px) !important;
  }

  .bridge-header__actions{
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Oculta CTAs desktop — JS los mueve al panel */
  .bridge-header__cta{
    display: none !important;
  }

  /* Switcher en mobile */
  .bridge-header__switcher{
    display: flex !important;
    width: 100% !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(16, 24, 40, 0.06) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cl-text-700) !important;
    margin-top: 4px !important;
  }

  .bridge-header__switcher::before,
  .bridge-header__switcher::after{
    display: none !important;
  }

  /* ── Burger ── */
  .bridge-header__toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent !important;
    border: none !important;
    padding: 0;
    cursor: pointer !important;
    z-index: 1102;
    -webkit-tap-highlight-color: transparent;
  }

  .bridge-header__toggle-icon{
    position: relative !important;
    width: 24px !important;
    height: 2px !important;
    background-color: var(--cl-text-900) !important;
    border-radius: 4px;
    display: inline-block !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bridge-header__toggle-icon::before,
  .bridge-header__toggle-icon::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 24px !important;
    height: 2px !important;
    background-color: var(--cl-text-900) !important;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bridge-header__toggle-icon::before{ top: -8px !important; }
  .bridge-header__toggle-icon::after{ top: 8px !important; }

  .bridge-header.is-open .bridge-header__toggle-icon{
    background-color: transparent !important;
  }
  .bridge-header.is-open .bridge-header__toggle-icon::before{
    top: 0 !important;
    transform: rotate(45deg) !important;
    background-color: var(--cl-accent-base) !important;
  }
  .bridge-header.is-open .bridge-header__toggle-icon::after{
    top: 0 !important;
    transform: rotate(-45deg) !important;
    background-color: var(--cl-accent-base) !important;
  }

  /* ── Panel ── */
  .bridge-header__panel{
    display: none;
    position: fixed;
    top: 72px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    margin: 0 !important;
    flex-direction: column;
    align-items: flex-start;
    background: var(--cl-white);
    padding: 24px var(--bridge-container-px) !important;
    border-top: 1px solid var(--cl-border-subtle);
    box-shadow: 0 16px 48px rgba(16,24,40,0.28) !important;
    z-index: 1100;
    box-sizing: border-box;
    overflow-x: hidden !important;
    /* FIX: scroll interno del panel si el menú es largo */
    overflow-y: auto;
    max-height: calc(100vh - 72px);
  }

  .bridge-header.is-open .bridge-header__panel{
    display: flex !important;
  }

  /* ── Nav mobile ── */
  .bridge-header__nav{
    width: 100%;
    max-width: 100%;
  }

  .bridge-header__nav .hs-menu-wrapper,
  .bridge-header__nav .hs-menu-wrapper > ul{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transform: none !important;
  }

  .bridge-header__nav .hs-menu-wrapper > ul{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .bridge-header__nav .hs-menu-wrapper > ul > li{
    width: 100%;
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
    margin: 0 !important;
    padding: 0 !important;
  }

  .bridge-header__nav .hs-menu-wrapper > ul > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    overflow: visible !important;
  }

  /* Oculta underline desktop en mobile */
  .bridge-header__nav .hs-menu-wrapper > ul > li > a::after{
    display: none !important;
  }

  .bridge-header__nav .hs-menu-wrapper > ul > li:empty{ display: none !important; }
  .bridge-header__nav .hs-menu-wrapper > ul > li > a:empty{ display: none !important; }

  /* Submenús ocultos por defecto */
  .bridge-header__nav .hs-menu-wrapper ul ul,
  .bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper{
    display: none !important;
  }

  /* Item con submenú */
  .bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children > a{
    position: relative !important;
  }

  /* ── FIX: Chevron mobile — <span> inyectado por JS ── */
  .bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children > a .bridge-chevron{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }

  /* El › visible a la derecha via ::after */
  .bridge-header__nav .hs-menu-wrapper > ul > li.hs-item-has-children > a .bridge-chevron::after{
    content: "›" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(90deg) !important;
    font-size: 20px !important;
    color: var(--cl-text-700) !important;
    transition: transform 0.2s ease !important;
    line-height: 1 !important;
  }

  /* Chevron rotado cuando submenú abierto */
  .bridge-header__nav .hs-menu-wrapper > ul > li.bridge-open > a .bridge-chevron::after{
    transform: translateY(-50%) rotate(-90deg) !important;
  }

  /* Submenú abierto */
  .bridge-header__nav .hs-menu-wrapper > ul > li.bridge-open > ul,
  .bridge-header__nav .hs-menu-wrapper > ul > li.bridge-open > .hs-menu-children-wrapper{
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 8px 16px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Links dentro del submenú mobile */
  .bridge-header__nav .hs-menu-wrapper > ul > li.bridge-open > ul > li > a,
  .bridge-header__nav .hs-menu-wrapper > ul > li.bridge-open > .hs-menu-children-wrapper > li > a{
    padding: 10px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--cl-text-700) !important;
  }

  .bridge-header__signin{ display: none !important; }

  /* ── CTAs mobile ── */
  .bridge-header__mobile-cta{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bridge-header__mobile-cta .bridge-header__cta-item{
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bridge-header__mobile-cta > *,
  .bridge-header__mobile-cta > * > *,
  .bridge-header__mobile-cta > * > * > *{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }

  .bridge-header__mobile-cta .hs-button,
  .bridge-header__mobile-cta a.hs-button{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-radius: var(--cl-radius-md) !important;
    font-family: var(--cl-font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  /* Login — outline morado */
  .bridge-header__mobile-cta .bridge-header__cta-item--login .hs-button,
  .bridge-header__mobile-cta .bridge-header__cta-item--login a.hs-button{
    background: transparent !important;
    border: 1.5px solid var(--cl-accent-base) !important;
    color: var(--cl-accent-base) !important;
    position: static !important;
  }

  .bridge-header__mobile-cta .bridge-header__cta-item--login .hs-button:hover,
  .bridge-header__mobile-cta .bridge-header__cta-item--login a.hs-button:hover{
    background: rgba(83, 62, 150, 0.08) !important;
    transform: none !important;
  }

  /* Oculta pseudo-elementos heredados del login en mobile */
  .bridge-header__mobile-cta .bridge-header__cta-item--login::before,
  .bridge-header__mobile-cta .bridge-header__cta-item--login .hs-button::after,
  .bridge-header__mobile-cta .bridge-header__cta-item--login a.hs-button::after{
    display: none !important;
  }

}

/* =========================
   5) HERO RESPONSIVE
========================= */
@media (max-width: 767px){
  .kl-hero-02{ padding: 60px 20px !important; }

  .kl-hero-02 .row{
    display: flex !important;
    flex-direction: column !important;
  }

  .kl-hero-02 h1{
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .kl-hero-02__buttons{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .kl-hero-02 .cl-btn{
    width: 100% !important;
    min-width: 100% !important;
  }

  .kl-hero-02__image-container{
    order: 3 !important;
    margin-top: 48px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .kl-hero-02__image{
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 10px !important;
    width: 100vw !important;
    margin-left: -20px !important;
    padding-left: 20px !important;
  }

  .kl-hero-02__image img,
  .kl-hero-02__image .card-float,
  .kl-hero-02__image .floating-element{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 200px !important;
    flex-shrink: 0 !important;
  }
}

/* =========================
   6) FOOTER (Bridge Override)
========================= */
.bridge-footer{
  background: var(--bridge-footer-bg) !important;
  color: var(--bridge-footer-text) !important;
}

/* Footer wrapper */
.bridge-footer__wrap{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 72px var(--bridge-container-px) 32px;
}

/* Layout */
.bridge-footer__top{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

/* Brand col */
.bridge-footer__brand{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bridge-footer__logo img{
  max-width: 160px;
  height: auto;
  display: block;
}

/* Address — kill ghost highlight (covers mark + any injected wrappers) */
.bridge-footer__address,
.bridge-footer__address *{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Cross-link Employers */
.bridge-footer__crosslink{
  border-top: 1px solid var(--bridge-footer-border);
  padding-top: 16px;
  margin-top: 4px;
}

.bridge-footer__crosslink-link{
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

.bridge-footer__crosslink-label{
  font-size: 13px;
  line-height: 1.4;
  color: var(--bridge-footer-muted);
}

.bridge-footer__crosslink-cta{
  font-size: 15px;
  font-weight: 700;
  color: var(--bridge-footer-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bridge-footer__crosslink-link:hover .bridge-footer__crosslink-cta{
  text-decoration-color: var(--bridge-footer-text);
}

/* Social layout */
.bridge-footer__social{
  margin-top: 8px;
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 14px;
}

/* Social icons — FORCE color to match footer text */
.bridge-footer__social a,
.bridge-footer__social a svg,
.bridge-footer__social a svg path,
.bridge-footer__social a svg rect,
.bridge-footer__social a svg circle{
  color: var(--bridge-footer-muted) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.bridge-footer__social a:hover,
.bridge-footer__social a:hover svg,
.bridge-footer__social a:hover svg path{
  color: var(--bridge-footer-text) !important;
  fill: currentColor !important;
}

/* Columns */
.bridge-footer__cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 64px;
}

.bridge-footer__col-title{
  font-family: var(--cl-font-heading);
  font-size: var(--bridge-footer-title-size);
  font-weight: var(--bridge-footer-title-weight);
  line-height: var(--bridge-footer-title-line);
  margin: 0 0 20px 0;
  color: var(--bridge-footer-text);
}

/* Links */
.bridge-footer__cols a{
  color: var(--bridge-footer-link);
  text-decoration: none;
  font-size: var(--bridge-footer-link-size);
  line-height: var(--bridge-footer-link-line);
  font-weight: 500;
}
.bridge-footer__cols a:hover{
  color: var(--bridge-footer-link-hover);
  text-decoration: underline;
}

/* Bottom */
.bridge-footer__bottom{
  margin-top: 64px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 14px;
  color: var(--bridge-footer-muted);
}

/* Lists reset (sandbox/prod consistent) */
.bridge-footer ul,
.bridge-footer ol{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bridge-footer li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Legal menu */
.bridge-footer__legal .hs-menu-wrapper ul,
.bridge-footer__legal ul{
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.bridge-footer__legal .hs-menu-wrapper ul > li,
.bridge-footer__legal ul > li{
  display: inline-flex !important;
}
.bridge-footer__legal a{
  color: var(--bridge-footer-muted) !important;
  text-decoration: none !important;
}
.bridge-footer__legal a:hover{
  color: var(--bridge-footer-text) !important;
  text-decoration: underline !important;
}

/* Footer responsive */
@media (max-width: 1100px){
  .bridge-footer__top{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bridge-footer__cols{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 900px){
  .bridge-footer__brand{
    order: 2;
  }
  .bridge-footer__cols{
    order: 1;
  }
}

@media (max-width: 640px){
  .bridge-footer__wrap{
    padding: 56px var(--bridge-container-px) 24px;
  }
  .bridge-footer__cols{
    grid-template-columns: 1fr;
  }
  .bridge-footer__bottom{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
}

.bridge-footer__badge {
  margin-top: 48px;
  margin-bottom: -24px;
}

.bridge-footer__badge img {
  width: 120px;
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(145%) brightness(78%);
}


/* =========================
   7) JOB PORTAL (pt-*)
========================= */

/* --- 7.1 Hero --- */
.pt-hero{
  background: var(--cl-surface-2);
  padding: 64px var(--bridge-container-px) 48px;
}

.pt-hero__inner{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

.pt-hero__text{
  flex: 1 1 55%;
}

.pt-hero__text h1{
  font-family: var(--cl-font-heading);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cl-text-900);
  margin: 0 0 12px;
}

.pt-hero__text p{
  font-size: 16px;
  line-height: 1.5;
  color: var(--cl-text-700);
  margin: 0;
  max-width: 520px;
}

.pt-hero__search{
  flex: 1 1 45%;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.pt-hero__search-input{
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--cl-font-body);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-md);
  background: var(--cl-white);
  color: var(--cl-text-900);
  outline: none;
  transition: border-color var(--cl-dur-140) var(--cl-ease),
              box-shadow var(--cl-dur-140) var(--cl-ease);
}

.pt-hero__search-input::placeholder{
  color: var(--cl-text-700);
}

.pt-hero__search-input:focus{
  border-color: var(--cl-accent-base);
  box-shadow: var(--cl-focus-ring);
}

.pt-hero__search-btn{
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  font-family: var(--cl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-white);
  background: var(--cl-accent-base);
  border: none;
  border-radius: var(--cl-radius-md);
  cursor: pointer;
  transition: background var(--cl-dur-140) var(--cl-ease),
              transform var(--cl-dur-140) var(--cl-ease);
}

.pt-hero__search-btn:hover{
  background: var(--cl-accent-hover-bright);
  transform: translateY(-1px);
}

.pt-hero__quick{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--cl-text-700);
}

.pt-hero__quick a{
  color: var(--cl-accent-base);
  text-decoration: none;
  font-weight: 500;
}

.pt-hero__quick a:hover{
  text-decoration: underline;
}

/* --- 7.2 Toolbar --- */
.pt-toolbar{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 20px var(--bridge-container-px) 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pt-toolbar__count{
  font-size: 15px;
  font-weight: 500;
  color: var(--cl-text-900);
  margin: 0;
}

.pt-toolbar__count b{
  font-weight: 700;
}

.pt-toolbar__sort{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cl-text-700);
}

.pt-toolbar__sort select{
  font-family: var(--cl-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cl-text-900);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-sm);
  padding: 6px 28px 6px 10px;
  background: var(--cl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23475467'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* --- 7.3 Main Layout (filters + cards) --- */
.pt-main{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 0 var(--bridge-container-px) 64px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* --- 7.4 Filter Panel --- */
.pt-filters{
  position: sticky;
  top: 24px;
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 24px 20px;
  box-shadow: var(--cl-shadow-sm);
}

.pt-filters h4{
  font-family: var(--cl-font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cl-text-900);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cl-border-subtle);
}

.pt-filters h4:not(:first-child){
  margin-top: 20px;
}

.pt-filters label{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--cl-text-700);
  cursor: pointer;
}

.pt-filters label:hover{
  color: var(--cl-text-900);
}

.pt-filters input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--cl-accent-base);
  cursor: pointer;
  flex-shrink: 0;
}

.pt-filters__clear{
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  font-family: var(--cl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-accent-base);
  background: transparent;
  border: 1px solid var(--cl-accent-base);
  border-radius: var(--cl-radius-md);
  cursor: pointer;
  transition: background var(--cl-dur-140) var(--cl-ease),
              color var(--cl-dur-140) var(--cl-ease);
}

.pt-filters__clear:hover{
  background: rgba(83, 62, 150, 0.06);
}

/* --- 7.5 Job Cards --- */
.pt-cards{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pt-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 24px 28px;
  box-shadow: var(--cl-shadow-sm);
  transition: box-shadow var(--cl-dur-160) var(--cl-ease),
              border-color var(--cl-dur-160) var(--cl-ease),
              transform var(--cl-dur-160) var(--cl-ease);
}

.pt-card:hover{
  box-shadow: var(--cl-shadow-md);
  border-color: var(--cl-accent-light);
  transform: translateY(-2px);
}

.pt-card__date{
  font-size: 12px;
  color: var(--cl-text-700);
  margin: 0 0 10px;
}

.pt-card__seniority{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cl-accent-base);
  margin: 0 0 4px;
}

.pt-card__title{
  font-family: var(--cl-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-text-900);
  margin: 0 0 4px;
}

.pt-card__salary{
  font-size: 15px;
  font-weight: 600;
  color: var(--cl-accent-secondary);
  margin: 0 0 12px;
}

.pt-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--cl-text-700);
  margin: 0 0 14px;
}

.pt-card__meta span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pt-card__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pt-card__chip{
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--cl-surface-2);
  color: var(--cl-text-900);
  border-radius: 999px;
  border: 1px solid var(--cl-border-subtle);
  line-height: 1.4;
}

/* --- 7.6 Detail Page --- */

/* Search bar (gray) */
.pt-searchbar{
  background: var(--cl-text-900);
  padding: 20px var(--bridge-container-px);
}

.pt-searchbar__inner{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.pt-searchbar__text{
  flex: 1 1 auto;
  font-family: var(--cl-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-white);
  margin: 0;
  white-space: nowrap;
}

.pt-searchbar__form{
  flex: 0 1 480px;
  display: flex;
  gap: 10px;
}

.pt-searchbar__form input{
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--cl-font-body);
  border: none;
  border-radius: var(--cl-radius-md);
  background: var(--cl-white);
  color: var(--cl-text-900);
}

.pt-searchbar__form button{
  flex-shrink: 0;
  height: 44px;
  padding: 0 24px;
  font-family: var(--cl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-white);
  background: var(--cl-accent-secondary);
  border: none;
  border-radius: var(--cl-radius-md);
  cursor: pointer;
  transition: background var(--cl-dur-140) var(--cl-ease);
}

.pt-searchbar__form button:hover{
  background: #d96a1f;
}

/* Back link */
.pt-back{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 24px var(--bridge-container-px) 8px;
}

.pt-back a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-accent-base);
  text-decoration: none;
}

.pt-back a:hover{
  text-decoration: underline;
}

/* Detail layout (main + sidebar) */
.pt-detail{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 16px var(--bridge-container-px) 64px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

/* Detail header card */
.pt-detail__header{
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 28px 32px;
  box-shadow: var(--cl-shadow-sm);
}

.pt-detail__date{
  float: right;
  font-size: 13px;
  color: var(--cl-text-700);
  margin: 0;
}

.pt-detail__seniority{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--cl-text-700);
  margin: 8px 0 2px;
}

.pt-detail__title{
  font-family: var(--cl-font-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cl-text-900);
  margin: 0 0 6px;
}

.pt-detail__salary{
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-text-900);
  margin: 0 0 2px;
}

.pt-detail__salary-note{
  font-size: 12px;
  color: var(--cl-text-700);
  margin: 0 0 16px;
}

.pt-detail__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--cl-text-700);
}

.pt-detail__meta span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Description body */
.pt-detail__body{
  padding: 32px 0 0;
}

.pt-detail__body h2,
.pt-detail__body h3,
.pt-detail__body h4{
  font-family: var(--cl-font-heading);
  color: var(--cl-text-900);
  margin: 28px 0 12px;
}

.pt-detail__body h2{ font-size: 22px; font-weight: 700; }
.pt-detail__body h3{ font-size: 18px; font-weight: 700; }
.pt-detail__body h4{ font-size: 16px; font-weight: 700; }

.pt-detail__body h2:first-child,
.pt-detail__body h3:first-child,
.pt-detail__body h4:first-child{
  margin-top: 0;
}

.pt-detail__body p,
.pt-detail__body li{
  font-size: 15px;
  line-height: 1.7;
  color: var(--cl-text-700);
}

.pt-detail__body ul,
.pt-detail__body ol{
  padding-left: 20px;
  margin: 8px 0 16px;
}

.pt-detail__body li{
  margin-bottom: 4px;
}

/* Normalized job description content (DEO-352) + section rhythm for legibility */
.pt-detail__section-body ul,
.job-description ul{
  list-style: disc;
  margin: 10px 0 28px;
  padding-left: 20px;
}

.pt-detail__section-body ul li,
.job-description ul li{
  font-size: 0.9rem;
  line-height: 1.6;
  margin-left: 1.25rem;
}

.pt-detail__section-body .job-section-header,
.job-description .job-section-header{
  padding-top: 2rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--cl-text-900);
  font-family: var(--cl-font-heading);
  font-size: 1.05rem;
  line-height: 1.35;
}

.pt-detail__section-body .job-section-header:first-child,
.job-description .job-section-header:first-child{
  padding-top: 0;
}

/* Breathing room between section title and the list that follows */
.pt-detail__section-body .job-section-header + ul,
.job-description .job-section-header + ul{
  margin-top: 4px;
}

.pt-detail__section-body .job-subsection-header,
.job-description .job-subsection-header{
  padding-top: 1rem;
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--cl-text-900);
  font-family: var(--cl-font-heading);
  font-size: 0.95rem;
  line-height: 1.35;
}

.pt-detail__section-body .job-subsection-header + ul,
.job-description .job-subsection-header + ul{
  margin-top: 4px;
}

/* Skills section in detail */
.pt-detail__skills{
  padding-top: 32px;
  border-top: 1px solid var(--cl-border-subtle);
  margin-top: 32px;
}

.pt-detail__skills h3{
  font-family: var(--cl-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-text-900);
  margin: 0 0 14px;
}

.pt-detail__skills-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pt-detail__skill-chip{
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  background: var(--cl-surface-2);
  color: var(--cl-text-900);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-sm);
  min-width: 80px;
}

/* Sidebar */
.pt-sidebar{
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Apply CTA box */
.pt-sidebar__cta{
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--cl-shadow-sm);
}

.pt-sidebar__cta h4{
  font-family: var(--cl-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-text-900);
  margin: 0 0 16px;
}

/* DEO-320: display:flex required for text centering — do NOT revert to display:block */
.pt-sidebar__apply-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  font-family: var(--cl-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-white);
  background: var(--cl-accent-secondary);
  border: none;
  border-radius: var(--cl-radius-md);
  cursor: pointer;
  transition: background var(--cl-dur-140) var(--cl-ease),
              transform var(--cl-dur-140) var(--cl-ease);
}

.pt-sidebar__apply-btn:hover{
  background: #d96a1f;
  transform: translateY(-1px);
}

/* Share links */
.pt-sidebar__share{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.pt-sidebar__share-label{
  font-size: 13px;
  color: var(--cl-text-700);
  margin: 0;
}

.pt-sidebar__share a,
.pt-sidebar__share button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cl-border-subtle);
  background: var(--cl-white);
  color: var(--cl-text-700);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cl-dur-140) var(--cl-ease),
              color var(--cl-dur-140) var(--cl-ease);
}

.pt-sidebar__share a:hover,
.pt-sidebar__share button:hover{
  border-color: var(--cl-accent-base);
  color: var(--cl-accent-base);
}

/* Job details sidebar */
.pt-sidebar__details{
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 24px;
  box-shadow: var(--cl-shadow-sm);
}

.pt-sidebar__details p{
  font-size: 14px;
  color: var(--cl-text-700);
  margin: 0 0 10px;
  line-height: 1.5;
}

.pt-sidebar__details p:last-child{
  margin-bottom: 0;
}

.pt-sidebar__details strong{
  color: var(--cl-text-900);
}

/* Related jobs */
.pt-related{
  max-width: var(--bridge-container-max);
  margin: 0 auto;
  padding: 0 var(--bridge-container-px) 64px;
}

.pt-related__title{
  font-family: var(--cl-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--cl-text-900);
  margin: 0 0 24px;
}

.pt-related__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pt-related__card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--cl-white);
  border: 1px solid var(--cl-border-subtle);
  border-radius: var(--cl-radius-lg);
  padding: 24px 20px;
  box-shadow: var(--cl-shadow-sm);
  transition: box-shadow var(--cl-dur-160) var(--cl-ease),
              transform var(--cl-dur-160) var(--cl-ease);
}

.pt-related__card:hover{
  box-shadow: var(--cl-shadow-md);
  transform: translateY(-2px);
}

.pt-related__card-seniority{
  font-size: 12px;
  font-weight: 600;
  color: var(--cl-text-700);
  margin: 0 0 2px;
}

.pt-related__card-title{
  font-family: var(--cl-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-text-900);
  margin: 0 0 12px;
}

.pt-related__card-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--cl-text-700);
  margin: 0 0 12px;
}

.pt-related__card-meta span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pt-related__card-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* --- 7.7 No results --- */
.pt-no-results{
  display: none;
  text-align: center;
  padding: 48px 24px;
  color: var(--cl-text-700);
  font-size: 15px;
}

/* --- 7.8 Responsive --- */
@media (max-width: 900px){
  .pt-hero__inner{
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .pt-hero__text h1{
    font-size: 28px;
  }

  .pt-hero__text p{
    max-width: 100%;
  }

  .pt-hero__search{
    flex-direction: column;
    width: 100%;
  }

  .pt-hero__quick{
    justify-content: center;
  }

  .pt-main{
    grid-template-columns: 1fr;
  }

  .pt-filters{
    position: static;
  }

  .pt-card{
    padding: 20px;
  }

  /* Detail responsive */
  .pt-searchbar__inner{
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .pt-searchbar__form{
    flex: 1 1 auto;
    width: 100%;
  }

  .pt-detail{
    grid-template-columns: 1fr;
  }

  .pt-sidebar{
    position: static;
  }

  .pt-related__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .pt-hero{
    padding: 40px var(--bridge-container-px) 32px;
  }

  .pt-toolbar{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pt-card__title{
    font-size: 17px;
  }

  .pt-card__meta{
    gap: 10px;
  }

  /* Detail responsive */
  .pt-searchbar__form{
    flex-direction: column;
  }

  .pt-detail__header{
    padding: 20px;
  }

  .pt-detail__title{
    font-size: 22px;
  }

  .pt-related__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   10) BLOG (CWV)
========================= */

/* Hero featured image wrapper — sits between blog header and body as a standalone block */
.hs-featured-image-wrapper {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 0 clamp(16px, 4vw, 24px);
  box-sizing: border-box;
  overflow: hidden;
}

/* Override HubSpot's default `.hs-featured-image { float: right; max-width: 50% }`
   Higher specificity (2 classes) wins over HubSpot's 1-class default rule. */
.hs-featured-image-wrapper .hs-featured-image {
  float: none;
  margin: 0;
  max-width: 100%;
  display: block;
  border-radius: var(--t-radius, 8px);
}

/* CLS — reserve 16:9 space for featured images in listing cards and related-posts.
   CSS aspect-ratio is a fallback for when RTE strips width/height attrs. */
.bridge-card__media img,
.blog-related__thumb img,
.hs-featured-image,
.blog-post-banner img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* CLS — reserve space for embeds (YouTube iframes, videos) inside post body */
.blog-post__body iframe,
.blog-post__body video,
.blog-post__body embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
}

/* Fix height for WordPress-migrated images inside post body.
   HTML width/height attrs (e.g. width="2240" height="1260") act as a UA
   presentational hint that sets an explicit height. Without this rule the
   image renders at its attr height instead of a proportional auto height. */
.blog-post__body img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hs-menu-item hs-menu-depth-1[
  background-color:red:
]

/* Touch targets — nav (desktop + mobile) */
.bridge-header__nav .hs-menu-wrapper a[role="none"],
.bridge-header__nav .hs-menu-wrapper > ul > li > a,
.bridge-header__nav .hs-menu-wrapper ul ul li a,
.bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li a {
  min-height: 48px !important;
  min-width: 48px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;

}


@media (max-width: 900px) {
  .bridge-header__nav .hs-menu-wrapper ul ul li a,
  .bridge-header__nav .hs-menu-wrapper .hs-menu-children-wrapper li a {
    min-height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center;
    padding: 12px 0 !important; /* o padding-block para llegar a 48px */
  }
}

/* CLS — ensure below-fold images don't cause layout shift while loading */
img[loading="lazy"] {
  content-visibility: auto;
}