:root{
  /* ===== Sistema de color unificado (una sola fuente para todo el sitio, ver CLAUDE.md) =====
     --bg-primary / --bg-primary-soft: fondo base de pagina (dos tonos, para variar secciones oscuras sin salirse del sistema)
     --bg-elevated / --bg-elevated-2: tarjetas y paneles (dos paradas, para el degradado sutil que ya usan las tarjetas)
     --bg-hero-overlay-top / --bg-hero-overlay-mid: el degradado oscuro que va SOBRE el video del hero, no un fondo solido
     --border-subtle: borde en reposo de tarjetas/paneles oscuros
     --text-secondary: texto secundario sobre fondo oscuro */
  --bg-primary:#151d2e; --bg-primary-soft:#1a2338;
  --bg-elevated:#1e293f; --bg-elevated-2:#232d47;
  --bg-hero-overlay-top:rgba(15,30,60,.48); --bg-hero-overlay-mid:rgba(20,40,80,.38);
  --border-subtle:rgba(90,162,226,.16);
  --text-secondary:rgba(226,234,248,.8);
  /* Alias de compatibilidad: el resto del CSS del sitio sigue usando estos nombres,
     asi que un solo cambio arriba se propaga a todas las secciones sin reescribir selector por selector */
  --bg:var(--bg-primary); --bg2:var(--bg-primary-soft); --panel:var(--bg-elevated);
  --brand:#5AA2E2; --brand-dark:#1c62a0; --gold:#FFEB0A; --sky:#4db8ff;
  --text:#f5f8ff; --muted:var(--text-secondary); --line:var(--border-subtle);
  --radius:22px;
  --bg-light:#ffffff; --panel-light:#f6f8fb; --text-dark:#0a1730; --muted-dark:rgba(10,23,48,.66); --line-light:rgba(10,23,48,.12); --blue:#155fd1;
  /* Degradados de transicion oscuro<->claro entre secciones, con varios stops intermedios
     (en vez de solo 2) para evitar el "banding" perceptual (efecto Mach band) que se ve
     como una franja/linea en un degradado de solo 2 colores muy distintos. Escritos a mano
     con los valores ACTUALES de --bg-primary/--bg-primary-soft/--bg-light -- si esos 3
     tokens cambian de color en el futuro, regenerar estos 3 tambien (no se recalculan solos).
     Los stops van en PX (no %) sobre un total de 220px: asi el degradado ocupa esa altura
     exacta desde el borde superior de la seccion y se queda solido con el ultimo color para
     el resto de la seccion -- igual que el truco viejo de mezclar "0"/"160px", solo que
     ahora con varios colores intermedios en vez de 2. IMPORTANTE: no usar stops en % junto
     con background-size para esto -- el color solido final NO se repite fuera de ese tamano
     y el resto de la seccion queda transparente (bug real encontrado y corregido en la
     Sesion 41: el texto quedaba oscuro sobre el fondo oscuro del body, que se veia a
     traves de la parte de la seccion que el degradado ya no cubria). */
  --fade-dark-light:linear-gradient(180deg,#151d2e 0,#1b2841 24px,#2c3c5c 48px,#445876 75px,#647892 103px,#8797ab 132px,#abb8c8 158px,#cfd8e3 185px,#eaeef4 207px,#ffffff 220px);
  --fade-light-dark:linear-gradient(180deg,#ffffff 0,#eaeef4 13px,#cfd8e3 35px,#abb8c8 62px,#8797ab 88px,#647892 117px,#445876 145px,#2c3c5c 172px,#1b2841 196px,#151d2e 220px);
  --fade-bg2-light:linear-gradient(180deg,#1a2338 0,#202d47 24px,#30405f 48px,#485c79 75px,#687b95 103px,#8a99ac 132px,#acbbc9 158px,#cfdae3 185px,#eaeef4 207px,#ffffff 220px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:148px}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--brand);color:#0a0f1a}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.12;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92%);margin:0 auto}
section{position:relative;padding:110px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brand)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brand)}
.sec-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;margin:.55em 0 .3em}
.sec-sub{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.12rem);max-width:560px}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:10001;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 2px 20px rgba(90,162,226,.15);border-bottom:1px solid rgba(90,162,226,.14);transition:background-color .4s,box-shadow .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(255,255,255,.98);box-shadow:0 4px 24px rgba(90,162,226,.22)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:85px;overflow:visible}
.logo{display:flex;align-items:center;gap:11px;font-family:'Sora';font-weight:700;font-size:1.12rem;letter-spacing:-.01em;flex-shrink:0;align-self:flex-start}
.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#1c62a0);display:grid;place-items:center;box-shadow:0 6px 18px rgba(90,162,226,.28)}
.logo-mark svg{width:20px;height:20px}
.logo b{color:var(--brand);font-weight:700}
/* Pedido explicito del cliente: el logo se ve COMPLETO (sin recortar la
   imagen) y grande -- lo que se acorta es el fondo BLANCO del navbar
   (.nav-inner a la mitad de lo que mediria el logo), asi que el logo
   sobresale por abajo del fondo blanco de forma natural (overflow, no
   clip-path). .logo queda anclado arriba (align-self:flex-start) para que
   el excedente se desborde hacia abajo, no hacia arriba (que quedaria
   fuera de la pantalla, invisible). */
.nav .logo-img{height:170px;width:auto;display:block;flex-shrink:0}
.foot-brand .logo-img{height:76px;margin-bottom:6px}
/* Pedido explicito del cliente: que el navbar del Home (index.html) sea
   transparente al llegar arriba de la pagina -- igual que ya pasaba SOLO en
   movil desde la Sesion 62 -- y se ponga blanco solido al hacer scroll
   (.nav.scrolled, ya la agrega js/main.js segun scrollY). Se extiende ese
   mismo criterio a PC (antes era intencionalmente opaco siempre en
   escritorio, ver Sesion 38/62 -- el cliente pidio explicitamente
   revertirlo). Solo en index.html (body sin .subpage): las demas paginas
   usan .page-hero, oscuro desde el arranque, sin video detras, y siguen
   necesitando el nav opaco siempre. */
body:not(.subpage) .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:none}
body:not(.subpage) .nav.scrolled{background:rgba(255,255,255,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 4px 24px rgba(90,162,226,.22);border-bottom:none}
body:not(.subpage) .nav:not(.scrolled) .nav-links a{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
body:not(.subpage) .nav:not(.scrolled) .nav-links .has-dropdown>a::before{border-color:#fff}
/* El dropdown "Destinos" tiene SIEMPRE su propio panel blanco opaco, sin
   importar el estado transparente/opaco del nav -- su texto debe quedar
   oscuro siempre, no heredar el blanco de arriba (bug real encontrado al
   verificar: quedaba texto blanco sobre el panel blanco, ilegible). */
body:not(.subpage) .nav:not(.scrolled) .nav-dropdown a{color:var(--muted-dark);text-shadow:none}
body:not(.subpage) .burger span{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
body:not(.subpage) .nav.scrolled .burger span{background:var(--text-dark);box-shadow:none}
@media (max-width:760px){
  .nav-inner{height:50px}
  .nav .logo-img{height:100px}
}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links li{position:relative}
.nav-links .has-dropdown>a{display:inline-flex;align-items:center;gap:5px}
.nav-links .has-dropdown>a::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s;order:2}
.nav-links .has-dropdown::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:190px;height:14px}
.nav-dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);min-width:190px;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);border:1px solid var(--line-light);border-radius:16px;padding:10px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 24px 50px rgba(10,23,48,.18)}
.nav-links .has-dropdown:hover .nav-dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-links .has-dropdown:hover>a::before{transform:rotate(225deg) translateY(2px)}
.nav-dropdown a{display:block;padding:10px 14px;border-radius:10px;font-size:.85rem;color:var(--muted-dark);transition:background-color .25s,color .25s}
.nav-dropdown a:hover{background:rgba(90,162,226,.12);color:var(--brand-dark)}
.nav-links a{font-size:.86rem;font-weight:500;color:var(--muted-dark);position:relative;padding:6px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand);border-radius:2px;transition:width .35s cubic-bezier(.6,0,.2,1)}
.nav-links a:hover{color:var(--brand-dark)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:#fff;background:var(--brand);padding:11px 20px;border-radius:100px;transition:transform .3s,box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,162,226,.35)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;place-items:center}
.burger span{display:block;width:24px;height:2px;background:var(--text-dark);margin:5px auto;border-radius:2px;transition:transform .35s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:10000;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Sora';font-size:1.5rem;font-weight:600;padding:12px;color:var(--text-dark);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
.mobile-menu.open a{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 90px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.94;filter:saturate(1.3) contrast(1.08) brightness(1.04)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 32% 38%,rgba(90,162,226,.16) 0%,transparent 55%),
  linear-gradient(135deg,var(--bg-hero-overlay-top) 0%,var(--bg-hero-overlay-mid) 50%,rgba(30,50,90,.44) 100%),
  linear-gradient(180deg,transparent 68%,var(--bg) 100%)}
.stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.25;animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:.85;transform:scale(1.25)}}
.hero-spotlight{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(90,162,226,.22) 0%,rgba(90,162,226,.08) 35%,transparent 65%)}
.hero:hover .hero-spotlight{opacity:1}
@media (hover:none){.hero-spotlight{display:none}}
.hero-content{max-width:780px}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem);font-weight:800;margin:.4em 0 .35em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(115%);animation:riseUp 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.14s}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#93c5fd 0%,#eaf5ff 20%,var(--sky) 40%,#eaf5ff 60%,#93c5fd 80%,#eaf5ff 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;animation:heroEmShimmer 5.5s ease-in-out infinite,heroEmGlow 5.5s ease-in-out infinite}
/* El texto usa background-clip:text (relleno transparente con un degradado), no un
   color solido -- por eso el brillo pulsante se logra moviendo la POSICION del propio
   degradado (efecto shimmer, barre azul->blanco->azul) en vez de animar "color", que
   no haria nada visible aca. El glow de afuera (drop-shadow) pulsa en paralelo, mismo
   timing que el shimmer para que se sientan como un solo efecto. Sesion 60: mismo
   brillo aplicado tambien a .page-hero h1 em (los <em> destacados de los titulos de
   montenegro/polonia/croacia/sobre-nosotros/testimonios/recursos/blog.html, todos usan
   este mismo patron) reusando estos 2 @keyframes -- y se afloja la velocidad de 3.6s a
   5.5s en las 2 reglas, pedido explicito del cliente ("mas lento y suave"). */
@keyframes heroEmShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes heroEmGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(147,197,253,.45))}50%{filter:drop-shadow(0 0 34px rgba(255,255,255,.55))}}
@keyframes riseUp{to{transform:none}}
.hero-sub{color:#e0e8f0;font-size:clamp(1rem,1.6vw,1.2rem);max-width:560px;margin-bottom:38px;opacity:0;animation:fadeUp .9s .5s forwards;text-shadow:0 1px 10px rgba(0,0,0,.3)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s .7s forwards}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Sora';font-weight:600;font-size:.95rem;padding:16px 30px;border-radius:100px;transition:transform .3s,box-shadow .3s,background-color .3s;cursor:pointer;border:0}
.btn-gold{background:var(--brand);color:#fff;box-shadow:0 10px 34px rgba(90,162,226,.38)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(90,162,226,.4)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btn svg{width:18px;height:18px}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:var(--muted);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(var(--brand),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
/* Utilidad para reiniciar animaciones por JS (usada en "Tu viaje en 4 pasos"): quitar
   la clase que activa una animacion NO la resetea al instante -- como la transicion
   tambien corre "en reversa", el elemento se queda casi en el mismo valor durante los
   primeros milisegundos. Con esta clase se apaga la transicion un instante para que el
   salto a estado oculto sea inmediato antes de volver a animar desde cero. */
.js-resetting,.js-resetting *{transition:none!important}
.reveal.visible{opacity:1;transform:none}

/* ---------- DESTINOS ---------- */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.dest-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;border:1px solid var(--line);isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;transform:translateZ(0)}
.dest-card:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(90,162,226,.28)}
.dest-img{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform;transform:scale(1.06)}
.dest-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(185deg,rgba(21,29,46,.24) 0%,rgba(21,29,46,.4) 30%,rgba(21,29,46,.88) 68%)}
.dest-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;background:var(--brand);padding:7px 14px;border-radius:100px;margin-bottom:auto}
.dest-tag.tag-star{color:#3a2f00;background:var(--gold)}
.dest-card h3{font-size:1.9rem;font-weight:700;margin:22px 0 8px}
.dest-card>p{color:rgba(235,242,252,.9);font-size:.95rem;margin-bottom:20px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.dest-card h3{text-shadow:0 2px 10px rgba(0,0,0,.5)}
.dest-list{list-style:none;display:grid;gap:9px}
.dest-list li{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:rgba(235,242,252,.92);text-shadow:0 1px 6px rgba(0,0,0,.55)}
.dest-list svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--brand)}
.dest-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.82rem;font-weight:700;color:var(--brand);transition:gap .3s}
.dest-more:hover{gap:12px}
.dest-more svg{width:15px;height:15px}

/* ---------- PASOS ---------- */
.steps{background:var(--bg2)}
.steps-track{position:relative;margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.steps-line{position:absolute;top:26px;left:12.5%;right:12.5%;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.steps-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brand),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform 1.6s .3s cubic-bezier(.6,0,.2,1)}
.steps-track.visible .steps-line i{transform:scaleX(1)}
.step{text-align:center;padding:0 6px}
.step-node{width:52px;height:52px;margin:0 auto 22px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);position:relative;z-index:1;transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.3,1.4,.4,1),opacity .6s,box-shadow .6s}
.step-node svg{width:22px;height:22px}
.steps-track.visible .step-node{transform:scale(1);opacity:1;box-shadow:0 0 0 8px rgba(90,162,226,.06)}
.steps-track.visible .step:nth-child(2) .step-node{transition-delay:.45s}
.steps-track.visible .step:nth-child(3) .step-node{transition-delay:.75s}
.steps-track.visible .step:nth-child(4) .step-node{transition-delay:1.05s}
.steps-track.visible .step:nth-child(5) .step-node{transition-delay:1.35s}
.step h3{font-size:1.06rem;font-weight:600;margin-bottom:8px}

/* ===== Sesión 22 — "azul marino rico" pedido por Johanna: --bg2/--panel/--muted ya se subieron en :root arriba y se propagan solos a toda sección oscura del sitio. Este glow extra queda solo aquí, como acento del timeline ===== */
.steps .steps-track.visible .step-node{box-shadow:0 0 0 8px rgba(90,162,226,.16),0 0 34px rgba(90,162,226,.3)}
/* Hover de los 4 íconos de "Tu viaje en 4 pasos" — misma base que .job-icon/.b-icon (scale+rotate+glow),
   con transición propia más rápida (.28s ease) para que el hover se sienta ágil y no herede el
   rebote elástico de .6s de la animación de entrada. */
.steps .steps-track.visible .step-node:hover{transform:scale(1.1) translateY(-3px) rotate(3deg);box-shadow:0 0 0 8px rgba(90,162,226,.16),0 0 36px rgba(90,162,226,.42);transition:transform .15s ease,box-shadow .15s ease}
.steps .steps-line i{filter:brightness(1.2)}
.step p{font-size:.86rem;color:var(--muted)}

/* ---------- EMPLEOS ---------- */
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;perspective:1100px}
.job-card{position:relative;background:linear-gradient(160deg,var(--bg-elevated),var(--bg-elevated-2));border:1px solid rgba(90,162,226,.26);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:16px;transform-style:preserve-3d;box-shadow:0 18px 40px rgba(2,6,20,.45),0 0 24px rgba(90,162,226,.14),inset 0 1px 0 rgba(125,211,252,.10);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s,box-shadow .45s}
.job-card:hover{transform:translateY(-8px) rotateX(4deg) rotateY(-4deg);border-color:rgba(90,162,226,.45);box-shadow:0 30px 60px rgba(2,6,20,.55),inset 0 1px 0 rgba(125,211,252,.18)}
.job-card .job-icon{width:54px;height:54px;border-radius:16px;background:rgba(90,162,226,.14);border:1px solid rgba(90,162,226,.28);display:grid;place-items:center;color:#7dd3fc;transition:transform .45s,background-color .4s,color .4s,box-shadow .4s}
.job-card:hover .job-icon{transform:scale(1.08) rotate(5deg);background:var(--brand);color:#0a0f1a;box-shadow:0 8px 22px rgba(90,162,226,.4)}
.job-card .job-icon svg{width:24px;height:24px}
.job-card h3{font-size:1.08rem;font-weight:700;color:#fff}
.job-card .job-meta{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:#9fb3c8;margin-top:auto}
.job-card .job-country{display:inline-flex;align-items:center;gap:7px;color:#cfe3f7}
.job-card .job-country svg{width:14px;height:14px;color:var(--brand)}
.job-card .job-slots{font-weight:600;color:#bfe3ff;background:rgba(90,162,226,.16);border:1px solid rgba(90,162,226,.34);padding:5px 12px;border-radius:100px;font-size:.74rem}
@media (prefers-reduced-motion: reduce){
  .job-card,.job-card:hover,.job-card .job-icon{transition:none!important;transform:none!important}
  .step-node,.step-node:hover{transition:none!important;transform:none!important}
}
.jobs-more{text-align:center;margin-top:48px}

/* ---------- TESTIMONIOS ---------- */
/* Fondo claro (coherencia con Empleos/Blog, pedido explicito) -- ya no necesita degradado
   propio porque la seccion anterior (Recursos) YA es clara: queda continua. Las tarjetas
   .car-slide tienen su propio fondo oscuro (var(--panel)), no se tocan. */
.testi{background:var(--bg-light);overflow:hidden}
.testi .sec-title{color:var(--text-dark)}
.testi .eyebrow{color:var(--blue)}
.testi .eyebrow::before{background:var(--blue)}
.testi .car-dot{background:rgba(10,23,48,.18)}
.carousel{position:relative;margin-top:56px;overflow:hidden;border-radius:var(--radius)}
.car-track{display:flex;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.car-slide{min-width:100%;padding:64px clamp(24px,8vw,90px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-align:center}
.car-slide blockquote{font-family:'Sora';font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:500;line-height:1.6;max-width:760px;margin:0 auto 26px;text-align:justify;text-align-last:left;text-justify:inter-word;letter-spacing:.01em;-webkit-hyphens:auto;hyphens:auto}
.car-slide blockquote::before{content:"“";display:block;font-size:4rem;line-height:.5;color:var(--brand);margin-bottom:22px;font-family:Georgia,serif}
.car-author{display:inline-flex;align-items:center;gap:13px;text-align:left}
.car-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--sky),#2a6fd6);display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:.85rem;color:#fff}
.car-author b{display:block;font-size:.92rem}
.car-author small{color:var(--muted);font-size:.78rem}
.car-dots{display:flex;gap:10px;justify-content:center;margin-top:30px}
.car-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:transform .3s,background-color .3s;padding:0}
.car-dot.active{background:var(--brand);transform:scale(1.35)}

/* ---------- NOSOTROS ---------- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;margin-top:20px}
.about-text p{color:var(--muted);font-size:1.02rem;margin-top:22px}
.team{display:grid;gap:16px}
  .member{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid rgba(90,162,226,.16);border-radius:18px;padding:18px 22px;transition:transform .4s,border-color .4s;perspective:700px}
.member:hover{transform:translateX(8px);border-color:rgba(90,162,226,.35)}
a.member{text-decoration:none;color:inherit;cursor:pointer}
  .member-photo{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:1.05rem;color:#0a0f1a;overflow:hidden;box-shadow:0 6px 16px rgba(28,98,160,.18);animation:photoFloat 4.5s ease-in-out infinite;transition:transform .4s,box-shadow .4s}
  .member-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .member:hover .member-photo{animation:none;transform:rotateY(10deg) rotateX(5deg) scale(1.06);box-shadow:0 14px 30px rgba(28,98,160,.3)}
  @keyframes photoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.member:nth-child(1) .member-photo{background:linear-gradient(135deg,var(--brand),#1c62a0)}
.member:nth-child(2) .member-photo{background:linear-gradient(135deg,var(--sky),#2f8fe0)}
.member:nth-child(3) .member-photo{background:linear-gradient(135deg,#eaf5ff,var(--brand))}
.member b{display:block;font-family:'Sora';font-size:1rem}
  .member small{color:var(--muted);font-size:.82rem}
  .member .team-member-wa{display:flex;margin-top:10px}

/* === Tarjeta "Equipo comercial" (animación premium) ===
   Para bajar/subir el respiro del glow azul, ajusta la opacidad en @keyframes teamGlow
   (valores 0.30 / 0.60). Si quieres apagarlo del todo, borra el bloque @media no-preference. */
.member.member-team{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .4s; }
.member.member-team:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(28,98,160,.22); border-color: rgba(90,162,226,.45); }
.member-stack{ position:relative; display:flex; align-items:center; }
.mini{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Sora'; font-weight:700; font-size:.95rem; color:#0a0f1a;
  background:linear-gradient(135deg,var(--brand),#1c62a0);
  border:2px solid var(--panel-light);
  margin-left:-16px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * .05s);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.mini:first-child{ margin-left:0; }
.mini-plus{
  background:linear-gradient(135deg,#eaf5ff,var(--brand));
  display:flex; align-items:center; justify-content:center; gap:1px;
}
.mini-plus .count{ font-variant-numeric: tabular-nums; }
.member.member-team:hover .mini{ transform: translateX(calc(var(--i) * 9px)); }
.member-info{ display:flex; flex-direction:column; gap:2px; position:relative; }
.member-info b{ transition: color .3s ease; }
.member.member-team:hover .member-info b{ color:var(--brand-dark); }
.team-go{
  position:absolute; left:0; bottom:-18px;
  opacity:0; transform: translateX(-10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  color:var(--brand); font-size:1.1rem; font-weight:700;
}
.member.member-team:hover .team-go{ opacity:1; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference){
  .mini-plus{ animation: teamGlow 2.5s ease-in-out infinite; }
}
@keyframes teamGlow{
  0%,100%{ box-shadow:0 0 10px 2px rgba(90,162,226,.30); }
  50%{ box-shadow:0 0 22px 7px rgba(90,162,226,.60); }
}

/* ---------- CTA FINAL ---------- */
.final{padding:150px 0;background:radial-gradient(120% 120% at 50% 0%,#12203d 0%,var(--bg) 60%);text-align:center;overflow:hidden;position:relative}
.final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(90,162,226,.16) 0%,transparent 62%);pointer-events:none}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(2.3rem,5.6vw,4.2rem);font-weight:800;max-width:820px;margin:0 auto 20px;text-align:center}
/* Sesion 61: mismo shimmer que .hero h1 em / .page-hero h1 em (Sesiones 59-60) en vez
   del glow viejo (historyGlow, color solido + text-shadow pulsante) -- pedido explicito
   del cliente para que TODOS los titulos destacados del sitio se vean y animen igual.
   Cubre los 7 CTA finales que usan <em> (index/montenegro/polonia/croacia/sobre-nosotros/
   testimonios/recursos.html) con un solo cambio, sin tocar HTML. */
.final h2 em{font-style:normal;background:linear-gradient(100deg,#93c5fd 0%,#eaf5ff 20%,var(--sky) 40%,#eaf5ff 60%,#93c5fd 80%,#eaf5ff 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;display:inline-block;animation:heroEmShimmer 5.5s ease-in-out infinite,heroEmGlow 5.5s ease-in-out infinite}
.final p{color:var(--muted);font-size:1.1rem;margin:0 auto 44px;max-width:560px;text-align:center;line-height:1.6}
.btn-xl{font-size:1.05rem;padding:20px 44px}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:60px 0 34px;background:var(--bg-primary)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-brand p{color:var(--muted);font-size:.86rem;max-width:300px;margin-top:16px}
.foot-col h4{font-family:'Sora';font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-size:.88rem;color:rgba(226,234,248,.75);transition:color .3s}
.foot-col a:hover{color:var(--brand)}
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:color .3s,border-color .3s,transform .3s}
.socials a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}

/* =======================================================
   JUSTIFICACIÓN DE PÁRRAFOS (pedido explícito de Johanna)
   Aplica text-align:justify SOLO a bloques de texto de
   párrafo/descripción reales (varias líneas). No toca
   títulos, botones, badges, nav ni listas cortas.
   .car-slide blockquote (cita grande del carrusel de Home) tiene su
   propia regla de justify más arriba (con text-align-last:center para
   no romper la composición centrada de la tarjeta) — antes se dejaba
   sin justificar a propósito por el riesgo de "ríos" en móvil con
   pocas palabras por línea; revisar ese breakpoint si vuelve a pasar.
   ======================================================= */
.sec-sub,
.hero-sub,
.dest-card>p,
.step p,
.about-text p,
.foot-brand p,
.faq-item p,
.article-card p,
.page-hero p,
.benefit-card p,
.blog-card p,
.testi-card blockquote,
.why-card p,
.founder-info p,
.article-content p,
.legal-content p,
.legal-content li{
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .dest-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .dest-card{min-height:440px}
  .jobs-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:760px){
  section{padding:84px 0}
  .nav-links,.nav .nav-cta{display:none}
  .burger{display:grid}
  .jobs-grid{grid-template-columns:1fr}
  .steps-track{grid-template-columns:1fr;gap:0}
  .steps-line{left:25px;right:auto;top:6%;bottom:6%;width:2px;height:auto}
  .steps-line i{transform:scaleY(0);transform-origin:top}
  .steps-track.visible .steps-line i{transform:scaleY(1)}
  .step{display:grid;grid-template-columns:52px 1fr;gap:20px;text-align:left;padding:22px 0}
  .step-node{margin:0}
  .hero-actions .btn{width:100%;justify-content:center}
  /* Pedido explicito del cliente: el carrusel de testimonios del Home (.car-slide, UNA
     cita a la vez, no una grilla de tarjetas) tenia demasiado padding en movil (64px
     arriba/abajo) y comillas/avatar grandes -- se compacta sin tocar el diseño de PC. */
  .car-slide{padding:36px 22px}
  .car-slide blockquote::before{font-size:2.2rem;margin-bottom:12px}
  .car-avatar{width:38px;height:38px;font-size:.76rem}
  .car-author b{font-size:.85rem}
  .car-author small{font-size:.72rem}
  .scroll-hint{display:none}
  /* El video del hero es un plano panoramico (1920x1074, ~16:9) con el avion hacia el
     centro-izquierda (x=340-850 de 1920) y la persona hacia la derecha (x=1160-1650) --
     medido a pixel sobre un frame real del video, no a ojo. En movil, object-fit:cover
     recorta el ancho al ancho visible = ancho_del_hero * alto_del_video / alto_del_hero:
     con el hero a pantalla completa (~831px reales) eso daba solo ~496px de los 1920
     originales visibles -- ni el avion ni la persona entraban bien (Sesiones 42-44).
     Sesion 45 (decision del cliente, opcion "achicar el hero a la mitad"): se baja el
     hero en movil a un formato tipo banner (~450px reales en vez de ~830) para ensanchar
     esa ventana a ~950px -- ahi SI entran los dos, avion y persona, con la posicion 52%
     centrada justo en el hueco entre ambos. Para que el CONTENIDO quepa en ese alto menor
     (el min-height/padding solos no alcanzan si el texto sigue necesitando 800px), se
     compacta tambien el titulo, los parrafos y los botones -- SOLO en este breakpoint,
     el resto del sitio no se toca. */
  .hero{min-height:auto;padding:92px 0 32px}
  .hero h1{font-size:1.65rem;line-height:1.2;margin:.3em 0 .2em}
  /* .hero-sub hereda text-align:justify + hyphens:auto de la regla global de
     parrafos (Sesion 33, pedido explicito para desktop) -- en una columna tan
     angosta como el hero movil eso genera espacios irregulares entre palabras y
     corta palabras a la mitad ("Eu-ropa"), que es lo que se veia "mal formateado".
     Se desactiva SOLO aca (no toca el resto de parrafos justificados del sitio). */
  .hero-sub{font-size:.85rem;line-height:1.45;margin-bottom:14px;text-align:left;-webkit-hyphens:none;hyphens:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* La linea de estadisticas extra (4 años/900 clientes/0 devoluciones) se habia ocultado
     en la Sesion 45 para recuperar altura para el hero banner -- el cliente la quiere de
     vuelta visible en movil, completa (las 3 estadisticas, sin cortar). Se probo en 1 sola
     linea con line-clamp:1 pero el texto es muy largo ("✈ 4 años de experiencia · Más de
     900 clientes enviados · 0 personas devueltas en migración", ~90 caracteres) y en
     telefonos angostos la 3ra estadistica quedaba directamente cortada con "…" -- eso
     incumple el pedido de que se vean las 3 completas. Se permiten 2 lineas (sin
     line-clamp, ajusta solo) en vez de forzar 1: agrega algo mas de alto que el intento
     anterior, pero mantiene el formato de una sola pieza con separadores "·" (no se
     parte en 3 lineas individuales, que hubiera agregado aun mas alto). */
  [data-testid="hero-differentiator"]{font-size:.72rem;line-height:1.4;margin-top:0 !important;margin-bottom:12px;opacity:.92}
  /* Los botones lado a lado (no apilados) para no ocupar una franja vertical extra encima
     del avion -- con el hero ya bajo a formato banner, cada fila de mas de contenido tapa
     una porcion grande de la imagen. */
  .hero-actions{gap:10px;margin-top:4px;flex-wrap:nowrap}
  .hero-actions .btn{width:auto;flex:1 1 0;padding:12px 14px;font-size:.76rem;white-space:normal;text-align:center;justify-content:center}
  /* El fondo del hero es un VIDEO (object-fit:cover), no un background-image -- no existe
     "background-size" para agrandarlo. El equivalente real es un transform:scale() sobre
     el propio <video>, aplicado DESPUES de que object-fit ya hizo su recorte normal, asi
     que zoomea sobre lo que ya se ve (recorta un poco mas de los bordes, acerca el resto).
     Zoom moderado (1.18) para que la persona/avion se vean mas cerca sin perder el
     encuadre logrado en sesiones anteriores. */
  /* El zoom uniforme (scale, centrado en el medio) recorta parejo arriba y abajo --
     con scale(1.45) eso se comia la cabeza de la persona por arriba (no habia recorte
     vertical antes del zoom, ver Sesion 44: el alto del video ya cabia completo). Se
     mueve el punto de anclaje del zoom mas arriba (22% en vez de 50%) para que el
     recorte se lo coma el piso/las piernas -- menos importante -- en vez de la cabeza. */
  .hero-media video{object-position:52% center;transform:scale(1.3);transform-origin:52% 22%}
  /* El overlay del hero se calibró para desktop (Sesión 40): en pantallas chicas, con la
     imagen ya recortada más de cerca (ver object-position de arriba), ese mismo nivel de
     oscurecimiento tapaba demasiado el avión/la persona. Se aclara solo en móvil, subiendo
     un poco el text-shadow del título/subtítulo para que el texto siga legible sobre un
     fondo ahora más visible. */
  /* Sesion 65: el zoom del video (transform:scale, arriba) cambio que parte de la imagen
     queda justo en el borde inferior del hero -- ahi aparecia un "valle" de brillo (baja,
     toca fondo, vuelve a subir) en la costura con la seccion de equipo, mismo tipo de
     problema ya diagnosticado y resuelto en la Sesion 46, pero con otros numeros porque
     el contenido visible ahi cambio. Fix igual: el fundido llega a var(--bg) SOLIDO antes
     del borde (94% en vez de 100%), dejando un colchon final ya totalmente opaco que
     tapa cualquier brillo del video de abajo, sin importar que tan claro sea ese pixel
     puntual del video. */
  .hero-media::after{background:
    radial-gradient(ellipse at 32% 38%,rgba(90,162,226,.16) 0%,transparent 55%),
    linear-gradient(135deg,rgba(15,30,60,.4) 0%,rgba(20,40,80,.32) 50%,rgba(30,50,90,.38) 100%),
    linear-gradient(180deg,transparent 28%,rgba(21,29,46,.4) 50%,rgba(21,29,46,.75) 70%,rgba(21,29,46,.92) 85%,var(--bg) 94%)}
  /* Sesión 46: con el hero ya corto (formato banner, Sesión 45), el fundido a oscuro de
     arriba (antes "transparent 68%, var(--bg) 100%", solo 2 stops) y el fundido oscuro->
     claro de la sección de equipo (--fade-dark-light, Sesión 41) se encontraban casi
     pegados -- medido a pixel: el brillo bajaba, tocaba fondo justo en la costura y volvía
     a subir, formando un "valle" oscuro visible (una franja, no una transición). No era
     falta de stops (la sección de equipo YA tenía 10), era que las 2 curvas se juntaban de
     golpe sin una zona intermedia que las conecte. Se alarga el fundido del hero (arranca
     antes, a los 30% en vez de 68%, con 2 stops intermedios en vez de ninguno) para que la
     bajada de brillo sea mas gradual y la costura con la sección de abajo quede continua
     en vez de formar un pico. */
  .hero h1{text-shadow:0 2px 24px rgba(0,0,0,.65)}
  .hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.55)}
  .stat-box b{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:16px;max-width:820px;margin:56px auto 0}
.faq-item{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--panel);border:1px solid var(--line);border-left:3px solid transparent;border-radius:18px;padding:24px 28px;transition:border-color .35s,transform .35s,box-shadow .35s;overflow:hidden}
.faq-item::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--brand),var(--sky));opacity:0;transition:opacity .35s}
.faq-item:hover{transform:translateX(4px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.faq-item:hover::before,.faq-item[open]::before{opacity:1}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Sora';font-weight:600;font-size:1.02rem;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:rgba(90,162,226,.12);color:var(--brand);display:grid;place-items:center;font-size:1.2rem;transition:transform .4s cubic-bezier(.3,1.4,.4,1),background-color .35s,color .35s}
.faq-item[open] summary::after{transform:rotate(135deg);background:var(--brand);color:#0a0f1a}
.faq-item p{color:var(--muted);font-size:.93rem;margin-top:16px;line-height:1.7;max-width:640px}
.faq-item[open]{animation:faqOpen .4s cubic-bezier(.2,.7,.2,1)}
@keyframes faqOpen{from{opacity:.5}to{opacity:1}}

/* ---------- RECURSOS / ARTÍCULOS ---------- */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.article-card{background:var(--panel);border:1px solid rgba(90,162,226,.16);border-radius:var(--radius);padding:30px;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s,box-shadow .45s}
.article-card:hover{transform:translateY(-7px);border-color:rgba(90,162,226,.32);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.article-card h3{font-size:1.06rem;font-weight:600;margin-bottom:12px}
.article-card p{color:var(--muted);font-size:.88rem;line-height:1.65}

/* ---------- BOTÓN DE AUDIO (leer contenido en voz alta) ---------- */
/* Pensado tambien para adultos mayores / baja alfabetizacion leyendo desde
   celular o tablet: se prioriza un area de toque generosa (min 44px) sobre
   compacidad visual, incluso en movil. */
.audio-guide-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn-audio-guia{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff;border:none;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .3s,box-shadow .3s,background .3s;box-shadow:0 2px 8px rgba(37,211,102,.3);font-family:inherit}
/* Navegadores sin Web Speech API: el motor (js/main.js) marca <html> con
   esta clase y oculta cualquier boton de audio, incluidos los agregados
   dinamicamente despues (ej. blog.html), sin necesidad de re-escanear el DOM. */
.no-speech-synthesis .btn-audio-guia,.no-speech-synthesis .btn-audio-restart{display:none}
.btn-audio-guia:hover{background:linear-gradient(135deg,#128C7E 0%,#075E54 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,211,102,.4)}
.btn-audio-guia:active{transform:translateY(0)}
.btn-audio-guia.playing{background:linear-gradient(135deg,#128C7E 0%,#075E54 100%);animation:pulseAudio 1.5s ease-in-out infinite}
@keyframes pulseAudio{0%,100%{box-shadow:0 2px 8px rgba(37,211,102,.3)}50%{box-shadow:0 2px 16px rgba(37,211,102,.6)}}
.btn-audio-guia .icon-play,.btn-audio-guia .icon-pause{flex-shrink:0}
.btn-audio-restart{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(37,211,102,.14);color:#128C7E;border:1.5px solid rgba(37,211,102,.4);cursor:pointer;transition:transform .3s,background .3s}
.btn-audio-restart:hover{background:rgba(37,211,102,.26);transform:rotate(-40deg)}
.btn-audio-restart:active{transform:rotate(-40deg) scale(.94)}
.section-light .btn-audio-restart{background:rgba(18,140,126,.1);color:#128C7E;border-color:rgba(18,140,126,.32)}
@media (prefers-reduced-motion:reduce){.btn-audio-guia.playing{animation:none}.btn-audio-restart:hover{transform:none}}
@media (max-width:760px){.btn-audio-guia{padding:10px 16px;font-size:13px}}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);animation:waPulse 2.6s ease-in-out infinite;transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px}
@keyframes waPulse{0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45)}50%{box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 10px rgba(37,211,102,.14)}}

@media (max-width:960px){
  .articles-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:24px;height:24px}
}

/* =======================================================
   SECCIONES CLARAS (azul/blanco) — variante de tema
   ======================================================= */
.section-light{background:var(--bg-light);color:var(--text-dark)}
.section-light .eyebrow{color:var(--blue)}
.section-light .eyebrow::before{background:var(--blue)}
.section-light .sec-title{color:var(--text-dark)}
.section-light .sec-sub{color:var(--muted-dark)}
.section-light .article-card,.section-light .faq-item,.section-light .member{background:var(--panel-light);border-color:var(--line-light);box-shadow:0 4px 20px rgba(10,23,48,.06)}
.section-light .article-card h3,.section-light .faq-item summary,.section-light .member b{color:var(--text-dark)}
.section-light .jobs-grid .job-card{background:linear-gradient(160deg,var(--bg-elevated),var(--bg-elevated-2));border:1px solid rgba(90,162,226,.26);box-shadow:0 18px 40px rgba(2,6,20,.45),0 0 24px rgba(90,162,226,.08),inset 0 1px 0 rgba(125,211,252,.10)}
.section-light .jobs-grid .job-card h3{color:#fff}
.section-light .jobs-grid .job-card:hover{box-shadow:0 30px 60px rgba(2,6,20,.55),inset 0 1px 0 rgba(125,211,252,.18)}
.section-light .jobs-grid .job-meta{color:#9fb3c8}
.section-light .jobs-grid .job-icon{background:rgba(90,162,226,.14);border-color:rgba(90,162,226,.28);color:#7dd3fc}
.section-light .jobs-grid .job-country{color:#cfe3f7}
.section-light .jobs-grid .job-country svg{color:var(--brand)}
.section-light .jobs-grid .job-slots{color:#bfe3ff;background:rgba(90,162,226,.16);border-color:rgba(90,162,226,.34)}
.section-light .article-card p,.section-light .faq-item p{color:var(--muted-dark)}
.section-light .faq-item{border-left-color:transparent}
.section-light .faq-item::before{background:linear-gradient(180deg,var(--blue),var(--brand))}
.section-light .faq-item summary::after{background:rgba(21,95,209,.1);color:var(--blue)}
.section-light .faq-item[open] summary::after{background:var(--blue);color:#fff}
.section-light .member small{color:var(--muted-dark)}
.section-light .about-text p{color:var(--muted-dark)}
.section-light .btn-ghost{background:rgba(10,23,48,.05);color:var(--text-dark);border-color:rgba(10,23,48,.14)}
.section-light .btn-ghost:hover{background:rgba(10,23,48,.09)}
.section-light.steps{background:var(--bg-light)}
/* Transiciones suaves entre secciones oscuras y claras del Home — en vez de un corte
   duro azul/blanco, cada sección que cambia de tono funde el color de la anterior
   hacia el propio en sus primeros ~220px (antes de que empiece el contenido real,
   que arranca a los 110px de padding-top de .section). Los degradados usan varios
   stops intermedios (--fade-*, definidos en :root) en vez de solo 2 colores, porque
   un salto de solo 2 colores muy distintos genera "banding" perceptual (efecto Mach
   band): el ojo ve una franja/linea donde no hay ninguna de verdad. Los stops de
   --fade-* van en px (0 a 220px) en vez de %, asi el degradado queda solido con su
   color final para el resto de la sección sin necesitar background-size. */
#empleos{background:var(--fade-bg2-light)}
/* [data-testid="nosotros-teaser-section"] (el teaser de equipo) se movio (Sesion 39) a
   justo despues del hero en index.html -- ver las 2 reglas de transicion nuevas mas abajo
   (.hero + section.section-light / .section-light + [data-testid="impacto-section"]).
   Ya NO le sigue .testi: ahora .testi (clara) queda seguida directo por .faq-sec, que
   sigue teniendo su propio degradado explicito claro->oscuro de siempre. */
.faq-sec{background:var(--fade-light-dark)}
/* Mismo criterio, ahora en TODO el sitio (destinos, sobre-nosotros, contacto) — pedido
   explícito para que ninguna transición oscuro/claro quede con corte duro. Se usan
   selectores de hermano adyacente (`A + B`) en vez de repetir la regla por página: cada
   una se activa sola solo donde el DOM real de esa página tiene ese cambio de color, así
   que no hace falta mantener una lista aparte por cada destino ni tocar HTML de más.
   Página por página, qué activa cada regla:
   - .page-hero + section.section-light → el hero (oscuro) pasando a la 1a sección clara,
     en montenegro/polonia/croacia/sobre-nosotros/contacto (index.html usa .hero, no
     .page-hero, así que esta regla no lo toca).
   - .section-light + #proceso → solo en polonia/croacia (ahí "El proceso" viene después
     de una sección clara); en montenegro NO se activa porque #proceso ahí viene después
     de #caso-exito, que ya es oscuro — no hace falta transición.
   - #proceso + .section-light → la sección clara que sigue a "El proceso" en las 3
     páginas de destino.
   - .section-light + #caso-exito → solo en montenegro.
   - #por-que-elegirnos → sección oscura de sobre-nosotros.html que sigue a una clara.
   - .team-sec → sección clara del equipo en sobre-nosotros.html (clase exclusiva de
     esa página), sigue a #por-que-elegirnos (oscura).
   - .section-light + .final → el CTA final oscuro cuando viene después de una sección
     clara (montenegro/polonia/croacia/sobre-nosotros); en index.html y testimonios.html
     el CTA ya viene después de una sección oscura, así que esta regla no se activa ahí
     — evita romper una transición que ya estaba bien. */
.page-hero + section.section-light{background:var(--fade-dark-light)}
/* index.html (Sesion 39): el teaser de equipo se movio justo despues del .hero (el hero
   remata oscuro en su ultimo tramo, ver --bg-hero-overlay-*), y luego la seccion de
   "Cifras de impacto" que le sigue vuelve a ser oscura (sin clase, hereda el fondo oscuro
   del body) -- mismo patron de las 2 reglas de arriba/abajo para que ninguno de los 2
   nuevos cortes claro/oscuro quede duro. */
.hero + section.section-light{background:var(--fade-dark-light)}
.section-light + [data-testid="impacto-section"]{background:var(--fade-light-dark)}
.section-light + #proceso{background:var(--fade-light-dark)}
#proceso + .section-light{background:var(--fade-dark-light)}
.section-light + #caso-exito{background:var(--fade-light-dark)}
#por-que-elegirnos{background:var(--fade-light-dark)}
.team-sec{background:var(--fade-dark-light)}
.section-light + .final{background:var(--fade-light-dark)}
/* blog.html: la seccion de las 6 tarjetas + testimonios pasa de oscura a azul acero
   claro (coherencia pedida con el fondo real de empleos.html) -- .blog-card se queda
   oscura, que es justamente lo que hace que "combine con empleos" hoy (empleos.html
   es fondo claro + tarjetas oscuras, no tarjetas blancas). */
#blog-articulos{background:var(--fade-dark-light)}
#blog-articulos + footer{background:var(--fade-light-dark)}
/* testimonios.html: mismo criterio -- la grilla de .testi-card (ya oscura de una sesion
   previa, no se toca) pasa a vivir sobre fondo claro en vez de oscuro. */
#testimonios-grid{background:var(--fade-dark-light)}
#testimonios-grid + .final{background:var(--fade-light-dark)}
/* contacto.html: hero chico y claro (reemplaza el .page-hero oscuro grande de antes) --
   el pedido explicito es que sea pequeno/limpio, no el hero dramatico de las demas
   paginas, asi que es una seccion nueva en vez de reusar .page-hero. */
/* Pedido explicito del cliente: el hero de contacto.html se sentia demasiado blanco/
   plano al entrar, desconectado del resto del sitio (color de marca). Se agrega un
   glow radial azul sutil de fondo (mismo lenguaje visual que ya usa .final::before en
   el CTA final) para darle "un colorcito" sin volver al hero dramatico oscuro que el
   cliente ya habia pedido sacar de aca antes (Sesion 33) -- sigue siendo la version
   chica y clara, solo que ya no totalmente plana. */
.contact-hero{padding:100px 0 56px;text-align:center;background:var(--fade-dark-light);position:relative;overflow:hidden}
.contact-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(90,162,226,.14) 0%,transparent 62%);pointer-events:none}
.contact-hero .wrap{position:relative;z-index:1}
.contact-hero .eyebrow{color:var(--blue);justify-content:center}
.contact-hero .eyebrow::before{background:var(--blue)}
.contact-hero h1{font-family:'Sora';font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--text-dark);max-width:640px;margin:14px auto 12px}
.contact-hero p{color:var(--muted-dark);font-size:1.05rem;max-width:560px;margin:0 auto}
/* La seccion del equipo en contacto.html reusa .section-light a secas (NO .team-sec,
   que trae su propio degradado oscuro->claro pensado para sobre-nosotros.html donde
   antes viene una seccion oscura -- aqui el hero ya es claro, seria un corte falso).
   Mismo pedido de "colorcito" de arriba: un glow radial azul MUY sutil, acotado solo a
   esta seccion (no a .section-light en general, que se reusa en el resto del sitio). */
#equipo-contacto{position:relative;overflow:hidden}
#equipo-contacto::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(90,162,226,.08) 0%,transparent 65%);pointer-events:none}
#equipo-contacto>.wrap{position:relative;z-index:1}
.section-light .step p{color:var(--muted-dark)}
.section-light .step-node{background:var(--panel-light);border-color:var(--line-light);color:var(--blue)}
.section-light .steps-line{background:var(--line-light)}
.section-light .dest-list li{color:var(--text-dark);text-shadow:none}
.section-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block;pointer-events:none}

/* =======================================================
   SUBPÁGINAS (destinos, empleos, blog, legal)
   ======================================================= */
body.subpage .nav{background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 2px 20px rgba(90,162,226,.15);border-bottom:1px solid rgba(90,162,226,.14)}
.page-hero{position:relative;padding:170px 0 90px;background:radial-gradient(120% 100% at 20% 0%,#12203d 0%,var(--bg) 62%);overflow:hidden;text-align:left}
.page-hero .wrap{position:relative;z-index:1}
.page-hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--brand);padding:8px 18px;border-radius:100px;margin-bottom:26px}
.page-hero-tag.tag-star{color:#3a2f00;background:var(--gold)}
.page-hero h1{font-family:'Sora';font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:800;max-width:760px;margin-bottom:20px}
.page-hero h1 em{font-style:normal;background:linear-gradient(100deg,#93c5fd 0%,#eaf5ff 20%,var(--sky) 40%,#eaf5ff 60%,#93c5fd 80%,#eaf5ff 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;animation:heroEmShimmer 5.5s ease-in-out infinite,heroEmGlow 5.5s ease-in-out infinite}
.page-hero p{color:var(--muted);font-size:1.1rem;max-width:600px;margin-bottom:34px}
.page-hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:44px}
.page-hero-stats div b{display:block;font-family:'Sora';font-size:1.9rem;font-weight:800;color:var(--brand)}
.page-hero-stats div span{font-size:.8rem;color:var(--muted)}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:24px}
.breadcrumb a{color:var(--muted);transition:color .3s}
.breadcrumb a:hover{color:var(--brand)}

/* ---------- BENEFICIOS (destino) ---------- */
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.benefits-grid-5{grid-template-columns:repeat(5,1fr)}
.benefits-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.benefits-grid-3{grid-template-columns:1fr}}
/* Los breakpoints reales de .benefits-grid-5 viven mas abajo, DESPUES del
   @media(max-width:960px){.benefits-grid{1fr}} generico (usado por
   croacia/montenegro/polonia/etc) -- si se declaran aqui arriba, ese bloque
   generico les gana en cascada (misma especificidad, ultimo declarado gana)
   y las tarjetas terminaban en 1 columna desde los 960px en vez de 1400px,
   quedando mucho mas angostas de lo esperado. Ver el bloque junto a
   .why-us-dark mas abajo. */
.benefit-card{background:var(--panel-light);border:1px solid var(--line-light);border-radius:var(--radius);padding:32px;transition:transform .4s,box-shadow .4s}
.benefit-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(10,23,48,.1)}
.benefit-card .b-icon{width:50px;height:50px;border-radius:14px;background:rgba(21,95,209,.08);color:var(--blue);display:grid;place-items:center;margin-bottom:18px}
.benefit-card .b-icon svg{width:24px;height:24px}
.benefit-card h3{color:var(--text-dark);font-size:1.08rem;font-weight:700;margin-bottom:8px}
.benefit-card p{color:var(--muted-dark);font-size:.9rem;line-height:1.6}

/* ---------- "Por qué elegirnos" (Home) — versión oscura acotada SOLO a esta sección, no toca .benefit-card/.benefits-grid globales ---------- */
.why-us-dark{background:var(--bg2);position:relative;overflow:hidden}
.why-us-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(90,162,226,.12),transparent 70%);pointer-events:none}
.why-us-dark .benefit-card{background:linear-gradient(160deg,var(--bg-elevated),var(--bg-elevated-2));border:1px solid rgba(90,162,226,.22);box-shadow:0 18px 40px rgba(2,6,20,.35);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.why-us-dark .benefit-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(2,6,20,.5),0 0 30px rgba(90,162,226,.22);border-color:rgba(90,162,226,.42)}
.why-us-dark .benefit-card .b-icon{width:58px;height:58px;background:rgba(90,162,226,.14);border:1px solid rgba(90,162,226,.28);color:#7dd3fc;box-shadow:0 0 18px rgba(90,162,226,.18);transition:transform .4s,box-shadow .4s}
.why-us-dark .benefit-card .b-icon svg{width:27px;height:27px}
.why-us-dark .benefit-card:hover .b-icon{transform:scale(1.08) rotate(3deg);box-shadow:0 0 26px rgba(90,162,226,.32)}
/* Textos de esta sección pedidos mas grandes para mejor legibilidad en PC (vista cansada) --
   acotado a .why-us-dark, NO toca .eyebrow/.sec-title/.sec-sub/.benefit-card globales que
   se reusan en el resto del sitio (destinos, testimonios, empleos, faq, etc.) */
.why-us-dark .eyebrow{font-size:16px}
.why-us-dark .sec-title{font-size:52px}
.why-us-dark .sec-sub{font-size:20px;max-width:620px}
.why-us-dark .benefit-card h3{color:var(--text);font-size:22px}
.why-us-dark .benefit-card p{color:var(--muted);font-size:17px;line-height:1.7}
@media (max-width:760px){
  .why-us-dark .sec-title{font-size:34px}
  .why-us-dark .sec-sub{font-size:1rem}
  .why-us-dark .benefit-card h3{font-size:1.18rem}
  .why-us-dark .benefit-card p{font-size:1rem}
}

/* ---------- STAT STRIP ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.stat-box{position:relative;background:var(--panel-light);border:1px solid var(--line-light);border-radius:18px;padding:30px 20px 26px;text-align:center;overflow:hidden}
.stat-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand)}
.stat-box b{display:block;font-family:'Sora';font-size:42px;font-weight:800;color:#60a5fa;transition:transform .3s ease}
.stat-box span{font-size:.78rem;color:var(--muted-dark)}

/* ---------- EMPLEOS (listado completo) ---------- */
.jobs-full{display:grid;gap:16px;margin-top:50px}
.job-row{display:grid;grid-template-columns:52px 1.4fr .9fr .7fr auto;align-items:center;gap:18px;background:var(--panel-light);border:1px solid var(--line-light);border-radius:16px;padding:18px 22px;transition:transform .35s,box-shadow .35s}
.job-row:hover{transform:translateX(6px);box-shadow:0 14px 34px rgba(10,23,48,.1)}
.job-row .job-icon{width:44px;height:44px;border-radius:12px}
.job-row .job-icon svg{width:20px;height:20px}
.job-row h3{color:var(--text-dark);font-size:.98rem;font-weight:700}
.job-row .job-req{color:var(--muted-dark);font-size:.78rem;margin-top:2px}
.job-row .job-country{color:var(--muted-dark);font-size:.84rem}
.job-row .job-slots{justify-self:start}
.jobs-group-title{font-family:'Sora';font-weight:700;font-size:1.2rem;color:var(--text-dark);margin:44px 0 4px}
.jobs-group-title:first-child{margin-top:0}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.blog-card{background:linear-gradient(160deg,var(--bg-elevated),var(--bg-elevated-2));border:1px solid rgba(90,162,226,.22);border-radius:var(--radius);padding:0;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(2,6,20,.3)}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(2,6,20,.45),0 0 24px rgba(90,162,226,.16);border-color:rgba(90,162,226,.4)}
.blog-card-top{padding:26px 26px 0}
.blog-cat{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7dd3fc;background:rgba(90,162,226,.14);padding:5px 12px;border-radius:100px;margin-bottom:14px}
.blog-card h3{color:var(--text);font-size:1.02rem;font-weight:700;line-height:1.35;margin-bottom:10px}
.blog-card p{color:var(--muted);font-size:.87rem;line-height:1.6;padding:0 26px 26px}
.blog-date{font-size:.76rem;color:var(--muted);padding:0 26px 22px;margin-top:auto}

/* ---------- LEGAL ---------- */
.legal-content{max-width:820px;margin:50px auto 0}
.legal-content h2{font-family:'Sora';font-size:1.5rem;font-weight:700;color:var(--text-dark);margin:44px 0 18px}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-family:'Sora';font-size:1.08rem;font-weight:700;color:var(--blue);margin:26px 0 10px}
.legal-content p,.legal-content li{color:var(--muted-dark);font-size:.94rem;line-height:1.75}
.legal-content ul{padding-left:22px;margin-bottom:14px}
.legal-content li{margin-bottom:8px}
.legal-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(21,95,209,.08);color:var(--blue);border:1px solid rgba(21,95,209,.2);padding:8px 16px;border-radius:100px;font-size:.8rem;font-weight:600;margin-bottom:30px;transition:background .25s,border-color .25s}
a.legal-badge:hover{background:rgba(21,95,209,.16);border-color:rgba(21,95,209,.4)}

@media (max-width:960px){
  .benefits-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:1fr 1fr}
  .job-row{grid-template-columns:44px 1fr;grid-template-areas:"icon title" "icon meta" "icon slots"}
  .job-row .job-icon{grid-area:icon}
  .job-row h3{grid-area:title}
  .job-row .job-req{grid-area:title}
  .job-row .job-country{grid-area:meta}
  .job-row .job-slots{grid-area:slots}
}

/* ---------- "Por qué elegirnos": tarjetas mas anchas (pedido explicito, texto ya
   no se corta con guion) — acotado a esta seccion, no toca otras paginas que
   tambien usan .benefits-grid/.benefit-card. Los breakpoints de .benefits-grid-5
   van aqui a proposito: esta clase es exclusiva de esta seccion (unico <html>
   que la usa), pero si se declaraban mas arriba en el archivo el bloque generico
   de @media(960px) recien cerrado les ganaba la cascada (misma especificidad,
   gana el ultimo declarado) y las tarjetas caian a 1 columna desde los 960px. */
.why-us-dark .wrap{width:min(1500px,94%)}
.why-us-dark .benefits-grid{gap:28px}
/* Con 5 columnas el justify se veia con espacios enormes SIN IMPORTAR cuanto se
   ensanchara el contenedor (probado en vivo hasta 1500px, seguia mal -- el problema
   es dividir entre 5, no el ancho total). Se prueba justify con tarjetas MAS ANCHAS
   de verdad: 3 por fila en vez de 5 en todo el rango de escritorio, para que cada
   parrafo tenga ~370px reales de texto en vez de ~210px. */
.why-us-dark .benefit-card p{text-align:justify;text-align-last:left;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;word-break:normal;overflow-wrap:normal;letter-spacing:.01em;word-spacing:.02em}
@media (min-width:1500px){
  /* 3 arriba + 2 abajo centradas: flexbox en vez de grid, asi la fila
     incompleta se centra sola sin tener que apuntar a las tarjetas por
     nth-child. Arranca en 1500px (probado en vivo, no antes): a 1300-1400px
     el parrafo quedaba en ~320-350px reales y el justify todavia se notaba
     con huecos -- mejor 2 columnas mas anchas ahi (ver el breakpoint de
     abajo) que 3 angostas. */
  .why-us-dark .benefits-grid-5{display:flex;flex-wrap:wrap;justify-content:center}
  .why-us-dark .benefits-grid-5 .benefit-card{flex:0 1 calc(33.333% - 19px);max-width:440px}
}
@media (min-width:768px) and (max-width:1499px){
  .benefits-grid-5{grid-template-columns:repeat(2,1fr)}
}
/* Pedido explicito del cliente: en movil, "Por que elegirnos" (unica seccion que usa
   .benefits-grid-5) se veia muy larga apilada en 1 sola columna -- pasa a grid de 2,
   con la 5ta tarjeta (la que queda sola en la ultima fila) centrada a medio ancho en
   vez de estirada a las 2 columnas. Tarjetas mas compactas (menos padding, icono mas
   chico, texto un poco mas chico) para que se vea prolija en 2 columnas angostas. */
@media (max-width:767px){
  .benefits-grid-5{grid-template-columns:repeat(2,1fr);gap:14px}
  .benefits-grid-5 .benefit-card:last-child{grid-column:1/-1;max-width:calc(50% - 7px);margin:0 auto}
}

@media (max-width:760px){
  .page-hero{padding:140px 0 70px}
  .page-hero-stats{gap:24px}
  .blog-grid{grid-template-columns:1fr}
  .benefit-card h3{font-size:1.18rem}
  .benefit-card p{font-size:1rem}
  .benefits-grid-5 .benefit-card{padding:20px 16px}
  .benefits-grid-5 .benefit-card .b-icon{width:42px;height:42px;margin-bottom:12px}
  .benefits-grid-5 .benefit-card .b-icon svg{width:20px;height:20px}
  .why-us-dark .benefits-grid-5 .benefit-card h3{font-size:.95rem;margin-bottom:6px}
  .why-us-dark .benefits-grid-5 .benefit-card p{font-size:.82rem;line-height:1.5}
}

/* Pedido explicito del cliente: en movil, las tarjetas de vacantes de "Oportunidades
   disponibles ahora" (Home) se veian muy grandes y eran demasiadas -- se limita a 3 y se
   compactan. Scopeado con "#empleos #jobGrid" (el <section id="empleos"> es exclusivo del
   Home) para NO afectar a empleos.html, que comparte el mismo componente .df-card/#jobGrid
   pero ahi SI deben verse todas las vacantes con su tamaño normal. El boton "Ver todas las
   vacantes" ya existia de antes (.jobs-more, visible en todos los tamaños) y no hizo falta
   agregarlo. */
@media (max-width:760px){
  #empleos #jobGrid{grid-template-columns:1fr;gap:18px}
  #empleos #jobGrid .df-card:nth-child(n+4){display:none}
  #empleos #jobGrid .df-card-image{height:140px}
  #empleos #jobGrid .df-card-icon{top:110px;width:44px;height:44px;font-size:1.15rem}
  #empleos #jobGrid .df-card-body{padding:28px 16px 16px}
  #empleos #jobGrid .df-card-title{font-size:.95rem;margin-bottom:6px}
  #empleos #jobGrid .df-card-desc{font-size:.8rem;line-height:1.4;margin-bottom:12px;-webkit-line-clamp:2}
  #empleos #jobGrid .df-progress-wrap{margin-bottom:12px}
  #empleos #jobGrid .df-price-main{font-size:.85rem}
  #empleos #jobGrid .df-price-secondary{font-size:.64rem}
  #empleos #jobGrid .df-apply-btn{padding:9px 16px;font-size:.76rem}
}