/* Colima Fitness — Reclutamiento
   Paleta tomada de los renders reales de fachada (Di Frenna Arquitectos):
   concreto cálido, acero corten cobrizo, follaje. Cálida y luminosa, sutil. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream:        #faf6ee;
  --stone-50:     #f4efe4;
  --stone-100:    #ece3d2;
  --stone-200:    #ddd0b4;
  --concrete:     #cabb9c;
  --ink:          #2a2117;
  --ink-soft:     #5c5145;
  --ink-faint:    #8a7d6c;
  --copper-300:   #e3a374;
  --copper-500:   #c17a45;
  --copper-600:   #a85a35;
  --copper-700:   #8a462a;
  --moss-500:     #5c6b46;
  --moss-600:     #495637;
  --rust-700:     #8a3f2c;
  --charcoal-900: #1c1712;
  --charcoal-800: #241d16;
  --charcoal-700: #2f2620;

  --header-h: 84px;
  --header-h-mobile: 64px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-soft: 0 18px 40px -22px rgba(42, 33, 23, 0.35);
  --shadow-lift: 0 24px 60px -20px rgba(42, 33, 23, 0.45);

  --ease: cubic-bezier(.22,.88,.32,1);

  color-scheme: light;
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
@media (max-width: 760px){
  html{ scroll-padding-top: calc(var(--header-h-mobile) + 14px); }
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  scrollbar-gutter: stable;
}

h1,h2,h3,h4{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

button, input, select, textarea{ font: inherit; color: inherit; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ---------- Logo: sin marco, sin cuadrado. La marca respira sobre el fondo. ---------- */
.logo-mark{
  --size: 40px;
  width: var(--size);
  height: var(--size);
  background-color: currentColor;
  -webkit-mask-image: url('assets/logo-mark.png');
  mask-image: url('assets/logo-mark.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: none;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand .logo-mark{ color: var(--ink); }
.brand-type{ display: flex; flex-direction: column; line-height: 1.05; }
.brand-name{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand-tag{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--copper-600);
  margin-top: 2px;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 60;
  display: flex;
  align-items: center;
  background: rgba(250, 246, 238, 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(42,33,23,0.08);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{
  box-shadow: 0 10px 30px -18px rgba(42,33,23,0.35);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 760px){
  .site-header{ height: var(--header-h-mobile); }
  .brand-tag{ display: none; }
  .brand{ gap: 9px; }
  .brand .logo-mark{ --size: 30px; }
  .brand-name{ font-size: 14.5px; letter-spacing: 0.015em; }
}
@media (max-width: 360px){
  .brand-name{ font-size: 13px; }
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a{
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 10px 16px;
  border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.main-nav a:hover{ color: var(--ink); background: rgba(42,33,23,0.06); }

.header-meta{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.header-meta a{ text-decoration: none; }
.header-meta .dot{ color: var(--copper-500); }

.btn{
  --btn-bg: var(--copper-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 12px 24px -10px rgba(168, 90, 53, 0.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), opacity .2s;
  text-decoration: none;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(168, 90, 53, 0.6); }
.btn:active{ transform: translateY(0); }
.btn.btn-ghost{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: none;
  border: 1.5px solid rgba(42,33,23,0.18);
}
.btn.btn-ghost:hover{ background: rgba(42,33,23,0.05); border-color: rgba(42,33,23,0.3); }
.btn.btn-light{
  --btn-bg: rgba(255,255,255,0.14);
  --btn-fg: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn.btn-light:hover{ background: rgba(255,255,255,0.24); }
.btn.btn-sm{ padding: 9px 16px; font-size: 13px; }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(42,33,23,0.15);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.hero-media{
  position: absolute; inset: 0;
  background-color: var(--stone-100);
  background-image: url('assets/nosotros-bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.03);
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(28,23,18,0.35) 0%, rgba(28,23,18,0.35) 30%, rgba(24,19,14,0.86) 82%, rgba(20,16,12,0.94) 100%),
    linear-gradient(100deg, rgba(168,90,53,0.28), rgba(28,23,18,0) 55%);
}
.hero-content{
  position: relative;
  padding-top: 64px;
  padding-bottom: 76px;
  color: #fff;
  max-width: 760px;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-300);
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1.5px;
  background: var(--copper-300);
}
.hero h1{
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  line-height: 1.06;
  color: #fff;
  font-weight: 700;
}
.hero h1 em{
  font-style: normal;
  color: var(--copper-300);
}
.hero p.lead{
  margin-top: 20px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255,255,255,0.82);
  max-width: 560px;
}
.hero-actions{
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-stats{
  margin-top: 52px;
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 26px;
}
.hero-stats div strong{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  color: #fff;
}
.hero-stats div span{
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}

/* ---------- Sections generales ---------- */
section{ scroll-margin-top: calc(var(--header-h) + 18px); }
.section{ padding: 96px 0; }
.section-tight{ padding: 64px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head .eyebrow{ color: var(--copper-600); }
.section-head .eyebrow::before{ background: var(--copper-600); }
.section-head h2{
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-top: 10px;
}
.section-head p{
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.section-alt{ background: var(--stone-50); }

/* ---------- Nosotros ----------
   Sin fotos de la fachada: el fondo es el relieve de la espiral de la marca
   en concreto, desenfocado, para que el panel de vidrio sea lo que destaque
   sobre el "entorno" en vez de competir con imágenes nuevas. */
.about-section{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 0;
}
.about-bg{
  position: absolute;
  inset: -60px;
  z-index: -2;
  background-color: var(--stone-100);
  background-image: url('assets/nosotros-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.05);
  transform: scale(1.12);
}
.about-section::after{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(250,246,238,0.58), rgba(250,246,238,0.74));
}
.about-panel{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 6vw, 64px);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-soft);
}
.about-panel p{ color: var(--ink-soft); font-size: 1.02rem; margin-top: 16px; max-width: 58ch; margin-left: auto; margin-right: auto; }
.value-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.chip::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper-500);
}

@media (max-width: 640px){
  .about-section{ padding: 88px 0; }
}

/* ---------- Vacantes ---------- */
.jobs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1180px){ .jobs-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){ .jobs-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .jobs-grid{ grid-template-columns: 1fr; } }

.job-card{
  background: #fff;
  border: 1px solid rgba(42,33,23,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.job-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(168,90,53,0.28);
}

/* Foto de la vacante: domina la tarjeta, sin panel de vidrio encima. Solo
   una insignia mínima (status-pill) flota sobre ella, igual que un badge
   de precio sobre una foto de alojamiento: nunca un bloque que la tape. */
.job-photo-wrap{ position: relative; aspect-ratio: 5/4; }
.job-photo{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: filter .3s var(--ease);
}
.job-card:hover .job-photo{ filter: saturate(1.06); }
.job-photo.is-closed{ filter: grayscale(0.85); }
.job-photo::after{
  /* Solo lo justo para que la insignia blanca no se pierda sobre fotos claras, nunca un velo completo */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,23,18,0.32) 0%, rgba(28,23,18,0) 26%);
}
.job-photo--placeholder{
  background: var(--stone-100);
  color: var(--copper-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.job-photo--placeholder span{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.job-photo--placeholder::after{ content: none; }

.status-pill{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill.open{ background: rgba(92,107,70,0.14); color: var(--moss-600); }
.status-pill.closed{ background: rgba(42,33,23,0.08); color: var(--ink-faint); }
.status-pill.on-photo{
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 6px 16px -6px rgba(20,16,12,0.35);
}
.status-pill.on-photo.open{ color: var(--moss-600); }
.status-pill.on-photo.closed{ color: var(--ink-faint); }

/* Cuerpo: el botón va justo debajo del título, antes de la descripción,
   para que siempre sea visible sin importar cuánto texto tenga cada vacante. */
.job-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.job-title{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.96rem; line-height: 1.24; }
.job-dept{ font-size: 11.5px; color: var(--ink-faint); margin-top: -3px; }
.job-card .btn{ margin-top: 2px; align-self: flex-start; padding: 8px 15px; font-size: 12.5px; }
.job-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-faint);
  padding-top: 6px;
  border-top: 1px solid rgba(42,33,23,0.08);
}
.job-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.job-desc{
  font-size: 12.4px;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Postulación ---------- */
.apply-wrap{
  background: var(--charcoal-900);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.apply-wrap::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 420px at 88% -10%, rgba(193,122,69,0.35), transparent 60%),
    radial-gradient(500px 400px at -10% 110%, rgba(92,107,70,0.22), transparent 60%);
}
.apply-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
}
.apply-grid > *{ min-width: 0; }
@media (max-width: 900px){ .apply-grid{ grid-template-columns: 1fr; } }

.apply-intro .eyebrow{ color: var(--copper-300); }
.apply-intro .eyebrow::before{ background: var(--copper-300); }
.apply-intro h2{ color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 10px; }
.apply-intro p{ color: rgba(255,255,255,0.72); margin-top: 14px; font-size: 0.98rem; }
.apply-intro .apply-facts{ margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.apply-facts div{ display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: rgba(255,255,255,0.78); }
.apply-facts svg{ flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--copper-300); }

/* Contenedor con altura mínima reservada: al pasar de formulario -> confirmación
   NO colapsa el alto, así la página no "brinca" ni se pierde el scroll del usuario. */
.apply-panel{
  min-height: 520px;
  position: relative;
}
.apply-form, .apply-success{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apply-success{
  display: none;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-height: 520px;
  animation: fadeUp .5s var(--ease);
}
.apply-panel.is-success .apply-form{ display: none; }
.apply-panel.is-success .apply-success{ display: flex; }

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

.form-row{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 560px){ .form-row{ grid-template-columns: minmax(0,1fr); } }
/* minmax(0,1fr) en vez de 1fr: un <input type="number"> tiene un ancho mínimo
   propio del navegador que si no, empuja la columna más allá del 1fr y desborda
   la tarjeta (pasaba en escritorio Y en celular). */
.form-row-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px){ .form-row-3{ grid-template-columns: 1fr; } }

.salary-block{ display: flex; flex-direction: column; gap: 4px; }
.salary-block-label{ font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.72); }
.salary-block-hint{ font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.salary-block .form-row-3{ margin-top: 2px; }
/* Montos de sueldo: nadie va a escribir más de 5-6 dígitos, así que la caja
   no necesita estirarse a lo ancho de la columna. Máx. 130px, se ve como lo
   que es (un número corto) en vez de un campo de texto largo vacío. */
.salary-block input{ max-width: 130px; }
@media (max-width: 640px){ .salary-block input{ max-width: 160px; } }

.field{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label{ font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.72); }
.field input, .field select, .field textarea{
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 13px 14px;
  color: #fff;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,0.35); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--copper-300);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 4px rgba(193,122,69,0.18);
}
.field select option{ color: #1c1712; }
.field.has-error input, .field.has-error select{ border-color: #d97757; }
.field-error{ font-size: 11.5px; color: #f0a689; min-height: 14px; }

/* Pulso sutil cuando "Postularme" preselecciona un puesto, en vez de un salto brusco */
.field.pulse{ animation: pulseField 1.1s var(--ease); }
@keyframes pulseField{
  0%{ box-shadow: 0 0 0 0 rgba(193,122,69,0.55); border-radius: 12px; }
  60%{ box-shadow: 0 0 0 10px rgba(193,122,69,0); }
  100%{ box-shadow: 0 0 0 0 rgba(193,122,69,0); }
}

.consent{ display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.consent input{ margin-top: 3px; }

.apply-form .btn{ margin-top: 6px; align-self: flex-start; }

.success-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(92,107,70,0.22);
  color: #a9c08a;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.success-icon svg{ width: 26px; height: 26px; }
.apply-success h3{ color: #fff; font-size: 1.4rem; }
.apply-success p{ color: rgba(255,255,255,0.72); margin-top: 10px; max-width: 440px; font-size: 14.5px; }
.folio-box{
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px 18px;
  border-radius: 12px;
}
.folio-box .folio-num{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.04em; }
.apply-success .track-link{ margin-top: 22px; font-size: 13.5px; }
.apply-success .track-link a{ color: var(--copper-300); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--charcoal-900);
  color: rgba(255,255,255,0.6);
  padding: 56px 0 28px;
}
.footer-top{
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-top .brand-name, .footer-top .brand-tag{ color: #fff; }
.footer-top .brand-tag{ color: var(--copper-300); }
.footer-cols{ display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4{ color: #fff; font-size: 13px; letter-spacing: 0.05em; margin-bottom: 14px; }
.footer-col a, .footer-col div{ display: block; font-size: 13.5px; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 9px; }
.footer-col a:hover{ color: var(--copper-300); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 12.5px;
}
.footer-bottom a{ text-decoration: none; color: rgba(255,255,255,0.45); }
.footer-bottom a:hover{ color: rgba(255,255,255,0.75); }

/* ---------- Modal genérico (posición fija: nunca reacomoda el documento) ---------- */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(20,16,12,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.modal-overlay.is-open{ opacity: 1; pointer-events: auto; }
.modal-card{
  background: var(--cream);
  border-radius: var(--radius-md);
  max-width: 460px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 30px;
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--ease);
  box-shadow: var(--shadow-lift);
}
.modal-overlay.is-open .modal-card{ transform: translateY(0) scale(1); }
.modal-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(42,33,23,0.06);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-card{ position: relative; }
.modal-card h3{ font-size: 1.25rem; padding-right: 30px; }
.modal-card .job-desc-full{ margin-top: 14px; color: var(--ink-soft); font-size: 14.5px; }
.modal-card .job-meta{ margin-top: 16px; }
.modal-card .btn{ margin-top: 22px; width: 100%; }

body.modal-open{ overflow: hidden; }

/* ---------- Botón flotante de WhatsApp: siempre visible, respuesta instantánea al toque ---------- */
.whatsapp-fab{
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 150;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 28px -6px rgba(19, 122, 68, 0.55), 0 2px 6px rgba(0,0,0,0.15);
  /* Estado natural en reposo: scale(1)/opacity 1. Durante el delay inicial,
     fill-mode "backwards" hace que se vea el 0% del keyframe (scale 0.5, oculto)
     en vez de este reposo; al terminar, JS limpia la animación y este mismo
     reposo ya coincide con el último frame -> sin salto. */
  transform: scale(1);
  opacity: 1;
  animation: fabMaterialize .4s cubic-bezier(0.23, 1, 0.32, 1) .6s both;
  transition: transform .1s ease-out, box-shadow .25s var(--ease);
}
.whatsapp-fab svg{ width: 29px; height: 29px; }
.whatsapp-fab:hover{ box-shadow: 0 14px 34px -6px rgba(19, 122, 68, 0.6), 0 2px 6px rgba(0,0,0,0.18); }
.whatsapp-fab:active{ transform: scale(0.92); transition: transform .1s ease-out; }
@keyframes fabMaterialize{
  from{ transform: scale(0.5); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab{ animation: none; transform: scale(1); opacity: 1; }
}
@media (max-width: 760px){
  .whatsapp-fab{ width: 52px; height: 52px; }
  .whatsapp-fab svg{ width: 26px; height: 26px; }
}

/* Utilidad */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Barra de progreso del formulario (mate, con relieve) ---------- */
.progress-block{ margin-bottom: 24px; }
.progress-message{
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  min-height: 20px;
}
.progress-message.is-swap{ animation: progressMsgSwap .35s var(--ease); }
@keyframes progressMsgSwap{
  0%{ opacity: 0; transform: translateY(4px); }
  100%{ opacity: 1; transform: translateY(0); }
}
.progress-track{
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.18));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.06);
  padding: 3px;
}
.progress-fill{
  height: 100%;
  width: 0%;
  min-width: 22px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f0c94a 0%, #dba627 55%, #b9821a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.35);
  transition: width .5s var(--ease), background .4s var(--ease);
}
.progress-fill.is-complete{
  background: linear-gradient(180deg, #9cc470 0%, #6c7f4f 55%, #4a5636 100%);
}
.progress-shine{
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.4) 46%, transparent 62%);
  background-size: 220% 100%;
  animation: progressShine 2.4s linear infinite;
}
@keyframes progressShine{
  0%{ background-position: 220% 0; }
  100%{ background-position: -60% 0; }
}
.progress-pct{
  margin-top: 8px;
  text-align: right;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.submit-hint{
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  margin: 2px 0 0;
}
.btn-submit{
  animation: submitPop .5s var(--ease);
}
@keyframes submitPop{
  from{ opacity: 0; transform: scale(.92) translateY(8px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Confirmación con vidrio líquido (glassmorphism) ---------- */
.apply-success .glass-card{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 25px 60px -24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}
.apply-success .glass-card::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 12% -10%, rgba(255,255,255,0.3), transparent 60%);
  pointer-events: none;
}
.apply-success .glass-card > *{ position: relative; }
.glass-lead{ font-size: 15px !important; }

/* ---------- Así evaluamos ---------- */
.criteria-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
@media (max-width: 980px){ .criteria-grid{ grid-template-columns: repeat(2, 1fr); } }
.criteria-card{
  background: #fff;
  border: 1px solid rgba(42,33,23,0.08);
  border-radius: var(--radius-md);
  padding: 20px;
}
.criteria-card .num{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--copper-500);
  font-size: 12px;
  margin-bottom: 8px;
}
.criteria-card h4{ font-size: 14.5px; }
.criteria-card p{ font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

.stages-row{
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 8px;
}
.stage-item{
  flex: 1 1 160px;
  min-width: 160px;
  padding: 0 20px 0 0;
  position: relative;
}
.stage-item::after{
  content: "";
  position: absolute; top: 17px; right: 0;
  width: 100%; height: 2px;
  background: var(--stone-200);
}
.stage-item:last-child::after{ display: none; }
.stage-num{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--charcoal-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 13px;
  position: relative; z-index: 2;
  margin-bottom: 10px;
}
.stage-item h4{ font-size: 13.5px; }
.stage-item p{ font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* ---------- Modal de vacante: contenido extenso ---------- */
.modal-card-lg{
  max-width: 680px;
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.modal-card-lg .modal-close{ z-index: 5; }
.modal-scroll{ overflow-y: auto; padding: 34px 34px 8px; }
.modal-sticky-cta{
  padding: 16px 34px 28px;
  border-top: 1px solid rgba(42,33,23,0.08);
  background: var(--cream);
}
.modal-card-lg h3{ font-size: 1.35rem; padding-right: 34px; margin-top: 12px; }
.job-modal-body{ margin-top: 20px; display: flex; flex-direction: column; gap: 24px; }
.jm-section h4{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--copper-600);
  margin-bottom: 10px;
  font-weight: 700;
}
.jm-section p{ font-size: 14px; color: var(--ink-soft); }
.jm-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.jm-list li{ font-size: 13.5px; color: var(--ink-soft); padding-left: 18px; position: relative; }
.jm-list li::before{
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--copper-500);
}
.jm-note{
  background: rgba(193,122,69,0.08);
  border: 1px solid rgba(193,122,69,0.22);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--copper-700);
}
.jm-no{
  background: rgba(138,63,44,0.06);
  border: 1px solid rgba(138,63,44,0.16);
  border-radius: 12px;
  padding: 16px 18px;
}
.jm-no h4{ color: var(--rust-700); }
.jm-no .jm-list li::before{ background: var(--rust-700); }
.jm-eval-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.jm-eval-tags span{
  font-size: 12px; font-weight: 600;
  background: var(--stone-100); color: var(--ink-soft);
  padding: 6px 12px; border-radius: 999px;
}

.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(20,16,13,0.32);
  z-index: 110;
}
.nav-backdrop[hidden]{ display: none; }

@media (max-width: 760px){
  .section{ padding: 64px 0; }
  .main-nav{ display: none; }
  .header-meta{ display: none; }
  .nav-toggle{ display: flex; }
  .modal-scroll{ padding: 26px 22px 8px; }
  .modal-sticky-cta{ padding: 14px 22px 22px; }
  .stages-row{ flex-wrap: nowrap; }
}