/* ==========================================================================
   HR CODE · Landing ES
   Negro + oro de marca (#EFBE00). Mobile-first (375 → 768 → 1024 → 1440).
   Todo el contenido es visible sin JavaScript; la animación se superpone.
   ========================================================================== */

/* ---------------------------------- 1. Tokens --------------------------- */
:root{
  /* Diseño comprometido con el negro de marca: los desplegables nativos y la
     barra de scroll acompañan al fondo oscuro en cualquier tema del sistema. */
  color-scheme: dark;

  /* Superficies. Los negros llevan una pizca de amarillo (no son grises puros):
     junto al oro de marca la página se lee cálida, no azulada. */
  --ink:      #0A0907;
  --ink-2:    #100E0B;
  --ink-3:    #16140F;
  --ink-4:    #1F1C15;
  --paper:    #F7F5F0;
  --paper-2:  #FFFFFF;

  /* marca */
  --gold:     #EFBE00;
  --gold-hi:  #FFD84D;
  --gold-lo:  #B88F00;
  --gold-ink: #6B5200;          /* oro legible sobre fondo claro (7:1) */

  /* texto sobre oscuro */
  --tx:       #FFFFFF;
  --tx-soft:  rgba(255,255,255,.74);
  --tx-mute:  rgba(255,255,255,.54);
  --line:     rgba(255,255,255,.12);
  --line-2:   rgba(255,255,255,.06);

  /* texto sobre claro */
  --tx-d:     #0A0A0B;
  --tx-d-soft:#3A3A40;
  --tx-d-mute:#5A5A62;
  --line-d:   rgba(10,10,11,.12);

  --ok:       #2FBF6B;
  --err:      #FF6B6B;
  --err-d:    #B3261E;

  /* tipografía */
  --f-head: 'Archivo', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* escala de espacio (densidad estándar) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-full: 999px;

  --shadow-1: 0 2px 8px rgba(0,0,0,.24);
  --shadow-2: 0 12px 40px rgba(0,0,0,.32);
  --shadow-gold: 0 8px 32px rgba(239,190,0,.28);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --z-bg: 0; --z-body: 10; --z-sticky: 40; --z-fab: 60; --z-hdr: 100; --z-intro: 9999;

  /* Retraso con el que arranca todo el hero: espera a que la cortina de oro
     empiece a salir, para que el contenido se descubra ya en movimiento.
     .seen-intro (segunda visita en la sesión) y .skip-intro lo ponen a 0. */
  --intro-offset: 1.98s;

  --wrap: 1200px;
  --wrap-narrow: 760px;
}

/* ----------------------- 1b. Fondo ambiental (puntero) ------------------ */
/*  Capa fija tras todo el contenido. Las secciones oscuras se vuelven
    transparentes (más abajo) para que este campo se vea a través de ellas;
    las secciones claras siguen siendo opacas y cortan el efecto a propósito,
    dando ritmo entre tramos oscuros luminosos y tramos claros limpios.        */
.ambient{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  /* el puntero escribe --mx/--my en un rango de -1 a 1 (0 = centro) */
  --mx:0; --my:0;
}
.ambient__glow{
  position:absolute; display:block; border-radius:50%;
  filter:blur(100px); will-change:transform;
  /* la transición hace de "trailing": el brillo persigue al puntero, no salta.
     En reposo los brillos están APAGADOS (opacity 0): el fondo es negro pleno y
     solo mientras el puntero se mueve (.is-moving, app.js) asoman muy tenues. */
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}
/* Brillos de fondo RETIRADOS del todo (usuario, 03.09): ni en reposo ni en
   movimiento. Queda solo el canvas de chispas. Las reglas quedan a 0 por si
   algún día se quiere un rastro mínimo — basta subir estos tres valores. */
.ambient.is-moving .ambient__glow--1{ opacity:0; }
.ambient.is-moving .ambient__glow--2{ opacity:0; }
.ambient.is-moving .ambient__glow--3{ opacity:0; }
.ambient__glow--1{
  width:min(72vw,680px); aspect-ratio:1; left:-10%; top:-8%; opacity:0;
  background:radial-gradient(circle,#EFBE00 0%,rgba(239,190,0,0) 68%);
  transform:translate3d(calc(var(--mx)* 46px), calc(var(--my)* 34px), 0);
}
.ambient__glow--2{
  width:min(64vw,600px); aspect-ratio:1; right:-12%; bottom:-10%; opacity:0;
  background:radial-gradient(circle,#FF8A00 0%,rgba(255,138,0,0) 66%);
  transform:translate3d(calc(var(--mx)* -58px), calc(var(--my)* -40px), 0);
}
.ambient__glow--3{
  width:min(58vw,520px); aspect-ratio:1; left:40%; top:38%; opacity:0;
  background:radial-gradient(circle,#B88F00 0%,rgba(184,143,0,0) 70%);
  transform:translate3d(calc(var(--mx)* 30px), calc(var(--my)* -26px), 0);
}

/* Capa de chispas (canvas) sobre las manchas de color, siempre tras el contenido.
   Se ve solo a través de las secciones oscuras (las claras son opacas). */
.fx{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  width:100%; height:100%;
  opacity:0;
  transition:opacity 1.6s ease-out;
}
.fx.is-on{ opacity:1; }

/* ---------------------------------- 2. Base ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--gold); color:#000; }

h1,h2,h3{ font-family:var(--f-head); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }

em{ font-style:normal; color:var(--gold); }
strong{ font-weight:600; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap--narrow{ max-width:var(--wrap-narrow); }
@media (min-width:768px){ .wrap{ padding-inline:40px; } }
@media (min-width:1280px){ .wrap{ padding-inline:24px; } }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}

/* enfoque visible en todo el sitio */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* marcador de dato pendiente de rellenar */
.ph{
  border-bottom:1px dashed currentColor;
  opacity:.9;
  padding-bottom:1px;
  overflow-wrap:anywhere;   /* nunca debe ensanchar su contenedor */
}

/* Ningún hijo de un grid puede imponer su ancho mínimo a la pista. */
.cards > *, .jobs > *, .steps > *, .quotes > *, .two > *, .stats > *{ min-width:0; }

/* ------------------------------ 3. Botones ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 22px;
  font-family:var(--f-body); font-size:15px; font-weight:600; line-height:1.2;
  text-decoration:none; white-space:nowrap;
  border:1.5px solid transparent; border-radius:var(--r-full);
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .18s var(--ease),
             box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--gold{ background:var(--gold); color:#000; box-shadow:0 4px 16px rgba(239,190,0,.22); }
.btn--gold:hover{ background:var(--gold-hi); box-shadow:var(--shadow-gold); }

.btn--outline{ border-color:var(--line); color:var(--tx); background:rgba(255,255,255,.03); }
.btn--outline:hover{ border-color:var(--gold); color:var(--gold); background:rgba(239,190,0,.06); }

.btn--ghost{ color:var(--tx-soft); background:transparent; }
.btn--ghost:hover{ color:var(--gold); }

.btn--sm{ min-height:40px; padding:9px 16px; font-size:14px; }
/* en pantallas táctiles el objetivo mínimo es 44 px (Apple HIG / Material) */
@media (hover:none){ .btn--sm{ min-height:44px; padding:11px 18px; } }
.btn--lg{ min-height:56px; padding:16px 28px; font-size:16px; }
.btn--full{ width:100%; }

.btn__spin{ display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:#000; animation:spin .7s linear infinite; }
.btn.is-busy{ pointer-events:none; opacity:.75; }
.btn.is-busy .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lnk{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--gold-ink); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:gap .2s var(--ease);
}
.lnk:hover{ gap:11px; }

/* ------------------------------ 4. Header ------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-hdr);
  padding-block:12px;
  background:rgba(10,10,11,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease), padding .3s var(--ease);
}
.hdr.is-stuck{
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-2);
  padding-block:8px;
}
.hdr__in{ display:flex; align-items:center; gap:var(--s4); }

.logo{ display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--f-head); font-weight:800; letter-spacing:-.02em; }
.logo__mark{
  display:grid; place-items:center; width:34px; height:34px;
  background:var(--gold); color:#000; border-radius:8px;
  font-size:14px; letter-spacing:-.04em;
}
.logo__word{ font-size:17px; color:var(--tx); }
/* logo wektorowe (biały napis + żółta kropka z pliku .ai) — wysokość, szerokość z proporcji */
.logo__img{ display:block; height:26px; width:auto; }
.ftr .logo__img{ height:24px; }
.intro__logo{ display:block; width:min(64vw,440px); height:auto; }

.hdr__nav{ display:none; margin-left:auto; gap:var(--s5); }
.hdr__nav a{
  font-size:14px; font-weight:500; color:var(--tx-soft); text-decoration:none;
  padding-block:6px; position:relative;
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--gold);
  /* scaleX, no width: animar width provoca reflow en cada fotograma */
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.hdr__nav a:hover{ color:var(--tx); }
.hdr__nav a:hover::after{ transform:scaleX(1); }

/* capa de idioma: envoltorio neutro, no debe afectar al layout ni crear
   contexto de apilamiento (el fondo ambiental fijo cuelga del root) */
.lang{ display:contents; }
.lang[hidden]{ display:none; }

/* conmutador ES | EN */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--line); border-radius:var(--r-full);
  background:rgba(255,255,255,.04);
}
.lang-switch__btn{
  appearance:none; border:0; cursor:pointer; font-family:var(--f-body);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--tx-mute); background:transparent;
  padding:8px 12px; min-height:38px; border-radius:var(--r-full);   /* 38 + 2×3 de padding del grupo = 44 */
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.lang-switch__btn:hover{ color:var(--tx); }
.lang-switch__btn.is-on{ background:var(--gold); color:#000; }

.hdr__act{ display:flex; align-items:center; gap:var(--s2); margin-left:auto; }
.hdr__wa{ display:none; }
@media (min-width:900px){
  .hdr__nav{ display:flex; }
  .hdr__act{ margin-left:0; }
  .hdr__wa{ display:inline-flex; }
}

/* ------------------------ 4b. Secuencia de apertura --------------------- */
/*  t=0.00  la marca entra sobre negro
    t=0.18  un resplandor dorado crece muy despacio detrás de ella
    t=0.32  la línea de oro se abre bajo la marca
    t=0.54  "TRABAJO EN POLONIA" cierra su espaciado
    t=1.18  ── PAUSA ── la composición se queda quieta ~0,45 s y solo respira:
            la marca escala un 2 %, la línea recibe un halo. Sin esta pausa la
            marca se leía y desaparecía en el mismo instante.
    t=1.60  una barra de oro barre la pantalla de izquierda a derecha
    t=1.91  cubre del todo; el negro y la marca desaparecen detrás
    t=1.98  arranca el hero (aún tapado)
    t=2.46  la barra sale por la derecha y descubre el hero en pleno movimiento

    Todos los tiempos cuelgan de este bloque: para acortar o alargar la
    secuencia se tocan estos números y --intro-offset, nada más.            */

.intro{ position:fixed; inset:0; z-index:var(--z-intro); pointer-events:none;
  animation:introEnd .001s linear 2.5s both; }
@keyframes introEnd{ to{ visibility:hidden; } }

.intro__cover{
  position:absolute; inset:0; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  animation:introCoverOut .001s linear 1.88s both;
}
@keyframes introCoverOut{ to{ opacity:0; } }

/* resplandor de fondo: evita que la pausa se sienta como una imagen congelada */
.intro__cover::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 58% 42% at 50% 50%, rgba(239,190,0,.17), transparent 70%);
  animation:introGlow 2.1s var(--ease) .18s both;
}
@keyframes introGlow{
  from{ opacity:0; transform:scale(.8); }
  55% { opacity:1; transform:scale(1); }
  to  { opacity:1; transform:scale(1.07); }
}

.intro__mark{
  position:relative;
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(28px,8vw,46px);
  /* la segunda animación usa "forwards", no "both": si usara "both" aplicaría
     su estado inicial durante el retraso y anularía la entrada de introMark */
  animation:introMark .7s var(--ease) both,
            introBreath 1.7s ease-in-out .7s forwards;
}
@keyframes introMark{ from{ opacity:0; transform:translateY(12px) scale(.93); } to{ opacity:1; transform:none; } }
@keyframes introBreath{ from{ transform:none; } to{ transform:scale(1.022); } }

.intro__hr{ display:grid; place-items:center; padding:.16em .28em;
  background:var(--gold); color:#000; border-radius:.2em; }
.intro__word{ color:var(--tx); }

.intro__line{
  height:2px; width:min(52vw,240px);
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
  transform:scaleX(0);
  animation:introLine .7s var(--ease) .32s both,
            introLineGlow 1.5s ease-in-out 1.02s forwards;
}
@keyframes introLine{ to{ transform:scaleX(1); } }
@keyframes introLineGlow{
  0%  { box-shadow:0 0 0 0 rgba(239,190,0,0); }
  55% { box-shadow:0 0 28px 2px rgba(239,190,0,.42); }
  100%{ box-shadow:0 0 14px 0 rgba(239,190,0,.18); }
}

.intro__sub{
  position:relative;
  font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tx-mute);
  animation:introSub .78s var(--ease) .54s both;
}
@keyframes introSub{ from{ opacity:0; letter-spacing:.62em; } to{ opacity:1; letter-spacing:.24em; } }

.intro__wipe{
  position:absolute; inset:0; background:var(--gold);
  transform:translateX(-101%);
  animation:introWipe .86s var(--ease-io) 1.6s both;
}
@keyframes introWipe{
  0%  { transform:translateX(-101%); }
  36% { transform:translateX(0); }
  50% { transform:translateX(0); }
  100%{ transform:translateX(101%); }
}

/* segunda visita en la misma sesión, o el usuario toca la pantalla: sin cortina */
.seen-intro .intro,
.skip-intro .intro{ display:none; }
.seen-intro, .skip-intro{ --intro-offset:0s; }

/* -------------------------------- 5. Hero ------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:calc(84px + var(--s8)) var(--s8);
  background:transparent;   /* el fondo ambiental se ve tras el hero */
}
@media (min-width:768px){ .hero{ padding-block:calc(88px + var(--s7)) var(--s8); } }

/* La aurora "se enciende" cuando la cortina de oro empieza a salir:
   el hero no aparece hecho, aparece encendiéndose. */
.hero__aurora{
  position:absolute; inset:-20% -10%; z-index:-2; pointer-events:none;
  animation:auroraOn 1.7s ease-out calc(var(--intro-offset) - .1s) both;
  will-change:transform;
  /* APAGADA (decisión del usuario, 03.09): las tres manchas grandes del hero
     lavaban el negro de arriba; el efecto de chispas luce solo sobre negro
     pleno, como abajo. Queda únicamente el campo ambiental de toda la página. */
  display:none;
}
@keyframes auroraOn{ from{ opacity:0; } to{ opacity:1; } }

.blob{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.62;
  will-change:transform;
}
.blob--1{ width:min(70vw,620px); aspect-ratio:1; left:-14%; top:-6%;
  background:radial-gradient(circle,#EFBE00 0%,rgba(239,190,0,0) 68%);
  animation:drift1 26s ease-in-out infinite alternate; }
.blob--2{ width:min(58vw,520px); aspect-ratio:1; right:-12%; top:14%;
  background:radial-gradient(circle,#FF8A00 0%,rgba(255,138,0,0) 66%); opacity:.34;
  animation:drift2 32s ease-in-out infinite alternate; }
.blob--3{ width:min(62vw,540px); aspect-ratio:1; left:26%; bottom:-24%;
  background:radial-gradient(circle,#B88F00 0%,rgba(184,143,0,0) 70%); opacity:.3;
  animation:drift3 38s ease-in-out infinite alternate; }
@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(9%,7%,0) scale(1.16); } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(1.08); } to{ transform:translate3d(-11%,10%,0) scale(.9); } }
@keyframes drift3{ from{ transform:translate3d(0,0,0) scale(.95); } to{ transform:translate3d(8%,-9%,0) scale(1.2); } }

/* Grano fino sobre el negro. Sustituye a la rejilla de líneas que había aquí:
   una cuadrícula decorativa da un aire de panel de control que no es el de esta
   marca, mientras que el grano da textura fotográfica y deja mandar al oro. */
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* APAGADO (usuario, 03.09, 3.ª iteración): el grano con mix-blend overlay
     aclaraba el negro del hero a una neblina parda — era la "poświata" que
     quedaba arriba y no abajo. El hero debe ser el mismo negro que el resto. */
  display:none;
  opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  animation:grainOn 2.2s var(--ease) calc(var(--intro-offset) + .1s) both;
}
@keyframes grainOn{ from{ opacity:0; } to{ opacity:.3; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; margin-bottom:var(--s5);
  font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx-soft); background:rgba(255,255,255,.045);
  border:1px solid var(--line); border-radius:var(--r-full);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none;
  box-shadow:0 0 0 0 rgba(239,190,0,.6); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(239,190,0,0); } 100%{ box-shadow:0 0 0 0 rgba(239,190,0,0); } }

.hero__h1{
  /* Tope en 68px: por encima de eso el titular empuja el CTA fuera de la
     primera pantalla en portátiles de 720-800 px de alto. */
  font-size:clamp(34px, 6.6vw, 68px);
  max-width:15ch;
  margin-bottom:var(--s5);
  text-wrap:balance;
}
/* revelado por líneas — CSS puro, funciona aunque el JS no cargue */
.hero__h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__h1 .ln > span{
  display:block;
  animation:lineUp .95s var(--ease) both;
}
.hero__h1 .ln:nth-child(1) > span{ animation-delay:calc(var(--intro-offset) + .06s); }
.hero__h1 .ln:nth-child(2) > span{ animation-delay:calc(var(--intro-offset) + .15s); }
.hero__h1 .ln:nth-child(3) > span{ animation-delay:calc(var(--intro-offset) + .24s); }
.hero__h1 .ln:nth-child(4) > span{ animation-delay:calc(var(--intro-offset) + .33s); }
@keyframes lineUp{ from{ transform:translateY(105%); } to{ transform:translateY(0); } }

/* Entrada del resto del hero: CSS puro, con estado final visible.
   No depende de IntersectionObserver — lo primero que se ve nunca queda en blanco. */
.up{ animation:riseIn .8s var(--ease) both; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero .eyebrow{ animation-delay:calc(var(--intro-offset) + .02s); }
.hero__sub  { animation-delay:calc(var(--intro-offset) + .48s); }
.hero__cta  { animation-delay:calc(var(--intro-offset) + .58s); }
.hero__micro{ animation-delay:calc(var(--intro-offset) + .66s); }
.stats      { animation-delay:calc(var(--intro-offset) + .78s); }

/* La cabecera y el botón de WhatsApp llegan cuando el hero ya está puesto.
   fill-mode "backwards", no "both": al terminar, el elemento vuelve a sus
   estilos normales y el :hover recupera su propio transform. */
.hdr   { animation:riseIn .7s var(--ease) calc(var(--intro-offset) + .30s) backwards; }
.wa-fab{ animation:pop .5s var(--ease) calc(var(--intro-offset) + 1.0s) backwards; }

.hero__sub{
  max-width:56ch; margin-bottom:var(--s6);
  font-size:clamp(16px,4.2vw,19px); color:var(--tx-soft);
}
.hero__sub strong{ color:var(--tx); }

.hero__cta{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5); }
@media (min-width:560px){ .hero__cta{ flex-direction:row; flex-wrap:wrap; } }

.hero__micro{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  font-size:13px; color:var(--tx-mute);
}
.hero__micro .sep{ opacity:.4; }
.ic--check{ width:15px; height:15px; color:var(--gold); stroke-width:2.5; }

/* estadísticas */
.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-top:var(--s7);
  background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:768px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ padding:var(--s5) var(--s4); background:rgba(255,255,255,.018); }
.stat__n{
  font-family:var(--f-head); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(28px,7vw,40px); color:var(--gold); line-height:1;
  font-variant-numeric:tabular-nums;
}
.plus{ color:var(--tx-mute); }
.stat__l{ margin:8px 0 0; font-size:12.5px; color:var(--tx-mute); line-height:1.4; }

/* ------------------------------ 6. Marquee ------------------------------ */
.marquee{
  overflow:hidden; padding-block:var(--s4);
  border-block:1px solid var(--line-2); background:var(--ink-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee__set{
  display:flex; align-items:center; flex:none;
  font-family:var(--f-head); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,5vw,30px); color:rgba(255,255,255,.16);
  white-space:nowrap;
}
.marquee__set i{ display:inline-block; width:8px; height:8px; margin-inline:22px;
  border-radius:50%; background:var(--gold); opacity:.5; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee__cap{ padding:var(--s3) 20px 0; text-align:center;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mute); }

/* ------------------------------ 7. Secciones ---------------------------- */
.sec{ padding-block:var(--s8); }
@media (min-width:768px){ .sec{ padding-block:var(--s9); } }

/* transparente para dejar ver el fondo ambiental; el negro lo pone el body */
.sec--dark{ background:transparent; }
.sec--paper{ background:var(--paper); color:var(--tx-d); }
.sec--paper h1,.sec--paper h2,.sec--paper h3{ color:var(--tx-d); }
.sec--paper em{ color:var(--gold-ink); }

.sh{ max-width:44ch; margin:0 auto var(--s7); text-align:center; }
.sh--left{ margin-inline:0; text-align:left; }
.sh__k{
  margin-bottom:var(--s3);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
.sec--paper .sh__k{ color:var(--gold-ink); }
.sh__t{ font-size:clamp(28px,7.2vw,48px); text-wrap:balance; }
.sh__d{ margin-top:var(--s4); font-size:16px; color:var(--tx-soft); text-wrap:pretty; }
.sec--paper .sh__d{ color:var(--tx-d-soft); }

/* -------------------------- 8. Tarjetas ventajas ------------------------ */
.cards{ display:grid; gap:var(--s3); }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); } }
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{
  position:relative; overflow:hidden;
  padding:var(--s5);
  background:var(--ink-3); border:1px solid var(--line-2); border-radius:var(--r);
  transition:border-color .28s var(--ease), transform .28s var(--ease), background-color .28s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(239,190,0,.09), transparent 62%);
  opacity:0; transition:opacity .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:rgba(239,190,0,.32); background:var(--ink-4); }
.card:hover::before{ opacity:1; }
.card--hi{ border-color:rgba(239,190,0,.34); background:linear-gradient(180deg,rgba(239,190,0,.07),rgba(239,190,0,0) 55%),var(--ink-3); }

.card__ic{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:var(--s4);
  color:var(--gold); background:rgba(239,190,0,.11);
  border:1px solid rgba(239,190,0,.2); border-radius:12px;
}
.card__ic .ic{ width:22px; height:22px; }
.card__t{ font-size:18px; letter-spacing:-.02em; margin-bottom:8px; }
.card__d{ font-size:14.5px; color:var(--tx-soft); line-height:1.62; }

/* ------------------------------ 9. Puestos ------------------------------ */
.jobs{ display:grid; gap:var(--s3); }
@media (min-width:600px){ .jobs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .jobs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.job{
  display:flex; flex-direction:column;
  padding:var(--s5);
  background:var(--paper-2); border:1px solid var(--line-d); border-radius:var(--r);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.job:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(10,10,11,.1); border-color:rgba(239,190,0,.6); }
.job__ic{ width:26px; height:26px; color:var(--gold-ink); margin-bottom:var(--s4); }
.job__t{ font-size:17px; letter-spacing:-.02em; margin-bottom:6px; }
.job__p{
  font-family:var(--f-head); font-weight:800; font-size:26px; letter-spacing:-.03em;
  color:var(--tx-d); font-variant-numeric:tabular-nums; line-height:1.1; margin-bottom:8px;
  /* Un marcador {{PAGO_...}} sin rellenar es una palabra larga e indivisible:
     sin esto ensancha la columna del grid y la rejilla se sale de la pantalla. */
  min-width:0; overflow-wrap:anywhere;
}
.job__u{ font-size:14px; font-weight:600; color:var(--tx-d-mute); letter-spacing:0; }
.job__d{ font-size:13.5px; color:var(--tx-d-mute); line-height:1.55; }
.job--more{ background:var(--tx-d); color:var(--tx); border-color:var(--tx-d); justify-content:center; }
.job--more .job__t{ color:var(--tx); }
.job--more .job__d{ color:var(--tx-mute); margin-bottom:var(--s4); }
.job--more .lnk{ color:var(--gold); align-self:flex-start; }

.note{
  max-width:70ch; margin:var(--s6) auto 0; padding:var(--s4) var(--s5);
  font-size:13.5px; line-height:1.6; color:var(--tx-d-soft); text-align:center;
  background:rgba(239,190,0,.11); border:1px solid rgba(239,190,0,.34); border-radius:var(--r-sm);
}
@media (max-width:767px){ .note{ text-align:left; } }   /* párrafo largo centrado se lee mal en estrecho */

/* oficios cualificados — panel oscuro bajo la rejilla de puestos */
.trades{
  display:grid; gap:var(--s5); margin-top:var(--s6);
  padding:var(--s5); background:var(--tx-d); color:var(--tx);
  border-radius:var(--r-lg);
}
@media (min-width:900px){
  .trades{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s7); padding:var(--s6); align-items:center; }
}
.trades .sh__k{ color:var(--gold); margin-bottom:var(--s3); }
.trades .trades__t{ color:var(--tx); font-size:clamp(21px,3vw,26px); letter-spacing:-.025em; margin-bottom:var(--s3); text-wrap:balance; }
.trades__d{ font-size:14.5px; color:var(--tx-soft); line-height:1.6; }
.trades__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
@media (max-width:479px){ .trades__list{ grid-template-columns:1fr; } }   /* dos columnas no caben en 375 px */
.trades__list li{ position:relative; padding-left:18px; font-size:14.5px; color:var(--tx-soft); line-height:1.45; }
.trades__list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; background:var(--gold); border-radius:2px; }

/* ------------------------------ 10. Pasos ------------------------------- */
.steps{ display:grid; gap:var(--s4); counter-reset:step; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.step{ position:relative; padding-top:var(--s5); border-top:1px solid var(--line); }
.step__n{
  display:block; margin-bottom:var(--s4);
  font-family:var(--f-head); font-weight:800; font-size:36px; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(239,190,0,.55);
  font-variant-numeric:tabular-nums;
}
.step__t{ font-size:19px; letter-spacing:-.02em; margin-bottom:8px; }
.step__d{ font-size:14.5px; color:var(--tx-soft); line-height:1.62; }

/* ---------------------------- 11. Requisitos ---------------------------- */
.two{ display:grid; gap:var(--s4); }
@media (min-width:900px){ .two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } }

.panel{
  padding:var(--s5); border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line-d);
}
.panel--yes{ background:var(--tx-d); color:var(--tx); border-color:var(--tx-d); }
.panel--yes .panel__t{ color:var(--tx); }
.panel__k{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:var(--s3); }
.panel--yes .panel__k{ color:var(--gold); }
.panel__t{ font-size:23px; letter-spacing:-.025em; margin-bottom:var(--s5); }
.panel__f{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-d);
  font-size:13.5px; color:var(--tx-d-mute); line-height:1.6; }
.panel--yes .panel__f{ border-top-color:var(--line); color:var(--tx-mute); }

.ticks li{
  position:relative; padding-left:30px; margin-bottom:var(--s3);
  font-size:14.5px; line-height:1.55;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:19px; height:19px; border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.ticks--muted li::before{ background:var(--tx-d-mute); }

/* --------------------------- 12. Testimonios ---------------------------- */
/* Los testimonios no son tarjetas: son voces. Se presentan como tipografía bajo
   un filete, sin caja y sin franja de color al costado — la palabra del
   trabajador pesa más suelta que metida en un recuadro. */
.quotes{ display:grid; gap:var(--s6); }
@media (min-width:900px){ .quotes{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s7); } }
.quote{ padding-top:var(--s5); border-top:1px solid var(--line); }
.quote__t{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(17px,2.3vw,19px); line-height:1.52; letter-spacing:-.015em;
  color:var(--tx); margin-bottom:var(--s4); text-wrap:pretty;
}
.quote__a{
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold);
}

/* ------------------------------- 13. FAQ -------------------------------- */
.faq{ border-top:1px solid var(--line-d); }
.fq{ border-bottom:1px solid var(--line-d); }
.fq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) 0; min-height:56px;
  font-family:var(--f-head); font-weight:700; font-size:17px; letter-spacing:-.02em;
  line-height:1.35; cursor:pointer; list-style:none;
  transition:color .2s var(--ease);
}
.fq__q::-webkit-details-marker{ display:none; }
.fq__q:hover{ color:var(--gold-ink); }
.fq__x{ width:22px; height:22px; flex:none; margin-top:2px; color:var(--gold-ink);
  transform:rotate(90deg); transition:transform .3s var(--ease); }
.fq[open] .fq__x{ transform:rotate(-90deg); }
.fq__a{ padding-bottom:var(--s5); max-width:66ch; }
.fq__a p{ font-size:15px; line-height:1.68; color:var(--tx-d-soft); }
.fq[open] .fq__a{ animation:fqIn .34s var(--ease) both; }
@keyframes fqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------------------------- 14. Formulario ---------------------------- */
.sec--form{ position:relative; isolation:isolate; overflow:hidden;
  background:transparent; padding-block:var(--s8) var(--s9); }
/* APAGADA (usuario, 03.09): el formulario también va sobre negro pleno. */
.form__aurora{ position:absolute; inset:-30% -20% auto; height:120%; z-index:-1; pointer-events:none; display:none; }
.blob--f1{ width:min(80vw,600px); aspect-ratio:1; left:-10%; top:-10%;
  background:radial-gradient(circle,#EFBE00 0%,rgba(239,190,0,0) 70%); opacity:.24;
  animation:drift1 30s ease-in-out infinite alternate; }
.blob--f2{ width:min(70vw,520px); aspect-ratio:1; right:-14%; top:20%;
  background:radial-gradient(circle,#FF8A00 0%,rgba(255,138,0,0) 70%); opacity:.16;
  animation:drift2 36s ease-in-out infinite alternate; }

.frm{
  padding:var(--s5);
  background:rgba(22,22,27,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
}
@media (min-width:768px){ .frm{ padding:var(--s6); } }

.frm__row{ margin-bottom:var(--s4); }
.frm__row--phone{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:520px){ .frm__row--phone{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }

.fld{ display:flex; flex-direction:column; }
.fld__l{
  display:block; margin-bottom:8px;
  font-size:13.5px; font-weight:600; color:var(--tx);
}
.req{ color:var(--gold); }
.opt{ font-weight:400; color:var(--tx-mute); }

.fld__i{
  width:100%; min-height:52px; padding:14px 16px;
  font-family:var(--f-body); font-size:16px; /* 16px evita el zoom automático en iOS */
  color:var(--tx); background:rgba(255,255,255,.05);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.fld__i::placeholder{ color:rgba(255,255,255,.34); }
.fld__i:hover{ border-color:rgba(255,255,255,.24); }
.fld__i:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(239,190,0,.16);
}
.fld__i--ta{ min-height:96px; resize:vertical; line-height:1.55; }

select.fld__i{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFBE00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:42px;
}
select.fld__i option{ background:var(--ink-3); color:var(--tx); }

.fld__h{ margin-top:7px; font-size:12.5px; color:var(--tx-mute); line-height:1.45; }
.fld__e{ margin-top:7px; font-size:12.5px; font-weight:500; color:var(--err); min-height:0; }
.fld__e:empty{ display:none; }
.fld__i[aria-invalid="true"]{ border-color:var(--err); }

.fset{ margin:0 0 var(--s5); padding:0; border:0; }
.fset .fld__l{ margin-bottom:var(--s3); }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:11px 17px;
  font-size:14px; font-weight:500; color:var(--tx-soft);
  background:rgba(255,255,255,.045); border:1.5px solid var(--line);
  border-radius:var(--r-full);
  transition:all .18s var(--ease);
}
.chip:hover span{ border-color:rgba(255,255,255,.28); color:var(--tx); }
.chip input:checked + span{ background:var(--gold); border-color:var(--gold); color:#000; font-weight:600; }
.chip input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:3px; }

.cons{ display:flex; gap:13px; align-items:flex-start; margin:var(--s5) 0 var(--s3); cursor:pointer; }
.cons input{ position:absolute; opacity:0; width:1px; height:1px; }
.cons__box{
  display:grid; place-items:center; flex:none; width:26px; height:26px; margin-top:1px;
  background:rgba(255,255,255,.05); border:1.5px solid var(--line); border-radius:7px;
  transition:all .18s var(--ease);
}
.cons__box .ic{ width:15px; height:15px; stroke-width:3.2; color:#000; opacity:0; transition:opacity .15s var(--ease); }
.cons input:checked + .cons__box{ background:var(--gold); border-color:var(--gold); }
.cons input:checked + .cons__box .ic{ opacity:1; }
.cons input:focus-visible + .cons__box{ outline:3px solid var(--gold); outline-offset:3px; }
.cons__t{ font-size:12.5px; line-height:1.6; color:var(--tx-mute); }
.cons__t a{ color:var(--gold); text-underline-offset:3px; }

.frm__foot{
  display:flex; align-items:flex-start; gap:9px; margin-top:var(--s4);
  font-size:12.5px; color:var(--tx-mute); line-height:1.5;
}
.frm__msg{ margin-top:var(--s4); font-size:14px; line-height:1.55; }
.frm__msg:empty{ display:none; }
.frm__msg.is-err{ padding:var(--s3) var(--s4); color:var(--err);
  background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.34); border-radius:var(--r-sm); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Bloques condicionales del formulario. Sin JS se ven los dos (el servidor
   valida según «¿Dónde estás?»); con JS solo el que corresponde. */
.cond{
  padding:var(--s4); margin-bottom:var(--s4);
  border:1px dashed var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);
}
.cond > .frm__row:last-child, .cond > .fset:last-child{ margin-bottom:0; }
.js .cond{ display:none; }
.js .cond.is-on{ display:block; animation:fqIn .3s var(--ease) both; }

input[type="date"].fld__i{ min-height:52px; }
input[type="date"].fld__i::-webkit-calendar-picker-indicator{
  filter:invert(1) sepia(1) saturate(4) hue-rotate(5deg); opacity:.8; cursor:pointer;
}

/* pantalla de éxito */
.done{ padding:var(--s7) var(--s5); text-align:center;
  background:rgba(22,22,27,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(239,190,0,.34); border-radius:var(--r-lg); }
.done__ic{ display:grid; place-items:center; width:66px; height:66px; margin:0 auto var(--s5);
  background:var(--gold); border-radius:50%; animation:pop .5s var(--ease) both; }
.done__ic .ic{ width:32px; height:32px; color:#000; stroke-width:3; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.done__t{ font-size:clamp(24px,6vw,34px); margin-bottom:var(--s4); }
.done__d{ max-width:46ch; margin:0 auto var(--s6); color:var(--tx-soft); font-size:15.5px; }

/* ------------------------------ 15. Footer ------------------------------ */
.ftr{ background:var(--ink-2); border-top:1px solid var(--line-2); padding-top:var(--s8); }
.ftr__in{ display:grid; gap:var(--s6); padding-bottom:var(--s7); }
@media (min-width:820px){ .ftr__in{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr); gap:var(--s7); } }
.ftr__d{ margin-top:var(--s4); max-width:40ch; font-size:14px; color:var(--tx-mute); line-height:1.6; }
.ftr__h{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s4); }
.ftr__list li{ margin-bottom:11px; font-size:14px; color:var(--tx-soft); }
/* enlaces de texto: área táctil ampliada sin mover el ritmo vertical */
.ftr__list a, .ftr__bar a, .lnk{ display:inline-block; padding-block:8px; margin-block:-8px; }
.ftr__list a{ text-decoration:none; transition:color .2s var(--ease); }
.ftr__list a:hover{ color:var(--gold); }
.ftr__list--plain li{ color:var(--tx-mute); font-size:13.5px; }
.ftr__p{ margin-top:var(--s4); max-width:44ch; font-size:13.5px; color:var(--tx-soft); line-height:1.6; }
.ftr__p strong{ color:var(--gold); }
.ftr__legal{ padding-bottom:var(--s5); max-width:100ch; font-size:12px; line-height:1.65; color:var(--tx-mute); }

.ftr__bar{
  display:flex; flex-direction:column; gap:var(--s2);
  padding-block:var(--s5); border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--tx-mute);
}
.ftr__bar a{ color:var(--tx-soft); text-underline-offset:3px; }
.ftr__bar a:hover{ color:var(--gold); }
@media (min-width:640px){ .ftr__bar{ flex-direction:row; justify-content:space-between; align-items:center; } }

/* --------------------------- 16. CTA flotantes -------------------------- */
.wa-fab{
  position:fixed; right:16px; z-index:var(--z-fab);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:grid; place-items:center; width:56px; height:56px;
  color:#fff; background:#25D366; border-radius:50%; text-decoration:none;
  box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wa-fab .ic{ width:29px; height:29px; }
.wa-fab:hover{ transform:scale(1.07); box-shadow:0 12px 34px rgba(37,211,102,.55); }

.mbar{
  position:fixed; inset:auto 0 0 0; z-index:var(--z-sticky);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .32s var(--ease);
  display:flex; align-items:center; gap:10px;
}
.mbar.is-on{ transform:translateY(0); }
/* WhatsApp dentro de la barra: en móvil la burbuja flotante tapaba el borde
   derecho del contenido (botón del hero, chips del formulario). Aquí no tapa nada. */
.mbar__wa{
  flex:none; display:grid; place-items:center; width:52px; height:52px;
  color:#fff; background:#25D366; border-radius:50%; text-decoration:none;
  box-shadow:0 6px 18px rgba(37,211,102,.35);
}
.mbar__wa .ic{ width:27px; height:27px; }
@media (max-width:899px){ .wa-fab{ display:none; } }
@media (min-width:900px){ .mbar{ display:none; } }

/* ------------------- 17. Revelado al hacer scroll ----------------------- */
/* Sin JS no se aplica nada: el contenido queda visible por defecto. */
.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ------------------------ 18. Movimiento reducido ----------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* La cortina de apertura no existe: ni se muestra ni retrasa nada. */
  :root{ --intro-offset:0s !important; }
  .intro{ display:none !important; }
  /* el fondo ambiental se queda quieto, sin seguir al puntero */
  .ambient__glow{ transition:none !important; }
  .blob{ animation:none !important; }
  .marquee__track{ animation:none !important; }
  .hero__h1 .ln > span{ animation:none !important; transform:none !important; }
  .js .rv{ opacity:1 !important; transform:none !important; }
  .btn:hover,.card:hover,.job:hover{ transform:none !important; }
}

/* --------------------------- 19. Impresión ------------------------------ */
@media print{
  .hdr,.mbar,.wa-fab,.marquee,.hero__aurora,.form__aurora,.hero__grain,.intro{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ----------------------- 16. Sobre Polonia / Clientes ------------------- */
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin-bottom:var(--s6); }
@media (min-width:768px){ .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); } }
.fact{ padding:var(--s5) var(--s4); background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:var(--r-sm); min-width:0; }
.fact__v{ display:block; font-family:var(--f-head); font-weight:800; font-size:clamp(26px,3.4vw,34px); letter-spacing:-.03em; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; }
.fact__l{ display:block; margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--tx-soft); }

.cards--4{ margin-bottom:var(--s6); }
@media (min-width:1024px){ .cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.card__k{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }

/* paneles en sección oscura: lo bueno en dorado, lo que conviene saber en papel */
.panel--gold{ background:linear-gradient(180deg,rgba(239,190,0,.09),rgba(239,190,0,.02)),var(--ink-3); border-color:rgba(239,190,0,.34); color:var(--tx); }
.panel--gold .panel__k{ color:var(--gold); }
.panel--paper{ color:var(--tx-d); }
.panel--paper .panel__k{ color:var(--gold-ink); }
.two--pl .ticks li:last-child{ margin-bottom:0; }
.legal{ max-width:70ch; margin-top:var(--s6); padding-left:var(--s4); border-left:2px solid var(--line); font-size:13px; line-height:1.6; color:var(--tx-mute); }

/* B2B sobre papel: los pasos y botones nacen para fondo oscuro */
.b2b .step{ border-top-color:var(--line-d); }
.b2b .step__n{ -webkit-text-stroke-color:rgba(107,82,0,.7); }
.b2b .step__d{ color:var(--tx-d-soft); }
.b2b .btn--outline{ border-color:var(--line-d); color:var(--tx-d); background:transparent; }
.b2b .btn--outline:hover{ border-color:var(--gold-ink); color:var(--gold-ink); background:rgba(239,190,0,.08); }
.b2b__foot{ display:grid; gap:var(--s5); margin-top:var(--s7); align-items:center; }
@media (min-width:1000px){ .b2b__foot{ grid-template-columns:minmax(0,1fr) auto; } }
.reg{ padding:var(--s4) var(--s5); background:var(--paper-2); border:1px solid var(--line-d); border-radius:var(--r-sm); font-size:13.5px; line-height:1.6; color:var(--tx-d-soft); }
.reg b{ color:var(--tx-d); }
.reg__row{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; }
.reg a{ color:var(--gold-ink); }
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* nav: 5 enlaces no caben entre 900 y 1140 px — el de empresas vive en el pie */
.hdr__nav a{ white-space:nowrap; }
.hdr__nav a[href="#clientes"]{ display:none; }
@media (min-width:1140px){ .hdr__nav a[href="#clientes"]{ display:inline-block; } }
/* CTA B2B: el botón largo no debe ensanchar la página en móvil */
.cta-row .btn{ max-width:100%; min-width:0; white-space:normal; text-align:center; }
.reg__note{ margin-top:8px; font-size:12.5px; color:var(--tx-d-mute); }