/* Intersection Legal — /hire y /contratar. Hoja propia: la pagina es nueva y no
   comparte estilos con talent.css, asi que nada de aqui puede romper otra pagina.
   Lenguaje visual inspirado en paretotalent.com (bandas oscuras alternadas,
   tarjetas translucidas de borde capilar, pildoras de paso, cifra fantasma,
   calculadora que el visitante mueve) traducido a la paleta slate/sage de IL. */
:root{
  --slate:#37454E;--slate-d:#2B363D;--night:#11181d;--sage:#7D9C97;--accent:#4C6B66;
  --aod:#B2C6C2;--ink:#272B2E;--ink-2:#4a565e;--line:#DED9CB;--paper:#FBF9F2;--cream:#F2F6F5;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.65}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.wrap-n{max-width:760px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── nav (mismo patron que /talent) ── */
nav{background:var(--slate);padding:16px 0;position:relative;z-index:30}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
nav img{width:170px;height:auto;display:block}
nav .links{display:flex;align-items:center;gap:22px}
nav .links a{color:var(--aod);text-decoration:none;font-size:.82rem;letter-spacing:.06em}
nav .links a:hover{color:#fff}
nav .links a.langsw{border:1px solid rgba(178,198,194,.4);padding:4px 10px;border-radius:3px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--aod);margin:4px 0}

/* ── piezas comunes ── */
.hx-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px}
.hx-dark .hx-eyebrow,.hx-hero .hx-eyebrow,.hx-diff .hx-eyebrow{color:var(--aod)}
.hx-sec{padding:92px 0}
.hx-sec h2{font-weight:800;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(1.75rem,3.6vw,2.7rem);color:var(--slate);max-width:22ch;margin-bottom:16px}
.hx-dark h2,.hx-diff h2{color:#fff}
.hx-sub{color:var(--ink-2);font-size:1.02rem;max-width:62ch;margin-bottom:44px}
.hx-dark .hx-sub,.hx-diff .hx-sub{color:rgba(255,255,255,.72)}
.hx-dark h2,.hx-diff h2{margin-bottom:40px}

.hx-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:15px 30px;border-radius:6px;font-size:.95rem;font-weight:600;border:0;cursor:pointer;
  font-family:inherit;box-shadow:0 12px 30px rgba(76,107,102,.24);
  transition:transform .25s ease,box-shadow .25s ease,background .18s ease}
.hx-btn:hover{background:#3f5a56;transform:translateY(-2px);box-shadow:0 18px 40px rgba(76,107,102,.32)}
.hx-btn.ghost{background:transparent;border:1px solid rgba(178,198,194,.5);color:var(--aod);box-shadow:none}
.hx-btn.ghost:hover{background:rgba(178,198,194,.1);color:#fff}

/* revelado al hacer scroll — sin JS todo queda visible */
@media (prefers-reduced-motion:no-preference){
  .rv-on .rv{opacity:0;transform:translateY(18px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .rv-on .rv.in{opacity:1;transform:none}
  .rv-on .rv:nth-child(2){transition-delay:.07s}.rv-on .rv:nth-child(3){transition-delay:.14s}
  .rv-on .rv:nth-child(4){transition-delay:.21s}.rv-on .rv:nth-child(5){transition-delay:.28s}
  .rv-on .rv:nth-child(6){transition-delay:.35s}
}

/* ── 1. hero ── */
.hx-hero{position:relative;overflow:hidden;isolation:isolate;padding:104px 0 88px;
  background:radial-gradient(120% 90% at 76% 2%,#33474a 0%,#243036 44%,var(--night) 100%);color:#fff}
.hx-hero-in{position:relative;z-index:1}
.hx-glow{position:absolute;z-index:0;width:58vw;height:58vw;max-width:720px;max-height:720px;
  right:-10%;top:-20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(125,156,151,.32) 0%,rgba(125,156,151,0) 68%);
  animation:hxBreath 8s ease-in-out infinite}
@keyframes hxBreath{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hx-hero h1{font-weight:800;letter-spacing:-.03em;line-height:1.04;color:#fff;
  font-size:clamp(2.2rem,5.4vw,4rem);margin-bottom:20px;max-width:17ch}
.hx-hero h1 em{font-style:italic;color:var(--aod);padding-right:.08em}
.hx-lead{color:rgba(255,255,255,.8);font-size:clamp(1rem,1.5vw,1.16rem);max-width:56ch;margin-bottom:34px}
.hx-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.hx-facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.03)}
.hx-facts li{padding:20px 18px;border-right:1px solid rgba(255,255,255,.1)}
.hx-facts li:last-child{border-right:0}
.hx-facts b{display:block;font-size:.95rem;color:#fff;margin-bottom:3px}
.hx-facts span{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.4}

/* ── bandas ── */
.hx-dark{background:var(--night);color:#fff}
.hx-diff{background:linear-gradient(180deg,#1a242a 0%,var(--night) 100%);color:#fff}
.hx-faq{background:var(--cream)}
.hx-brief{background:var(--paper)}
/* costura luminosa al entrar en cada banda oscura */
.hx-dark,.hx-diff{position:relative}
.hx-dark::before,.hx-diff::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(178,198,194,.5) 50%,transparent)}

/* ── 2. tarjetas de dolor ── */
.hx-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hx-card{position:relative;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:26px 24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease}
.hx-card::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(120% 80% at 50% -10%,rgba(125,156,151,.17),rgba(125,156,151,0) 62%)}
.hx-card:hover{transform:translateY(-4px);border-color:rgba(178,198,194,.42);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.hx-card:hover::before{opacity:1}
.hx-card h3{font-size:1.02rem;font-weight:700;color:#fff;margin-bottom:9px;line-height:1.3}
.hx-card p{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.68)}

/* Variante clara de la banda de pasos. Al retirarse la calculadora quedaban
   cinco bandas oscuras seguidas; esta devuelve el respiro que daba aquella. */
.hx-lightband{background:var(--cream)}
.hx-lightband h2{color:var(--slate)}
.hx-lightband .hx-eyebrow{color:var(--accent)}
.hx-lightband .hx-step{background:#fff;border-color:var(--line)}
.hx-lightband .hx-step:hover{border-color:rgba(125,156,151,.6);
  box-shadow:0 14px 34px rgba(43,56,64,.09)}
.hx-lightband .hx-step h3{color:var(--slate)}
.hx-lightband .hx-step p{color:var(--ink-2)}
.hx-lightband .hx-ghost{color:rgba(55,69,78,.06)}
.hx-lightband .hx-pill{color:var(--accent);background:rgba(125,156,151,.12);
  border-color:rgba(125,156,151,.34)}

/* ── 4. pasos ── */
.hx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hx-step{position:relative;overflow:hidden;isolation:isolate;padding:24px 22px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.hx-step:hover{transform:translateY(-4px);border-color:rgba(178,198,194,.4)}
.hx-ghost{position:absolute;top:-.3em;right:.06em;z-index:-1;font-weight:800;font-size:5.6rem;
  line-height:1;color:rgba(255,255,255,.055);pointer-events:none;user-select:none}
.hx-pill{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--aod);background:rgba(125,156,151,.14);
  border:1px solid rgba(178,198,194,.28);border-radius:999px;padding:4px 11px;margin-bottom:13px}
.hx-step h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}
.hx-step p{font-size:.88rem;line-height:1.58;color:rgba(255,255,255,.66)}

/* ── 5. comparativa por citas ── */
.hx-vs{border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.02)}
.hx-vs-head{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.12)}
.hx-vs-col{padding:18px 24px}
.hx-vs-col.a{border-right:1px solid rgba(255,255,255,.12)}
.hx-vs-col b{display:block;font-size:1rem;color:#fff}
.hx-vs-col.b b{color:var(--aod)}
.hx-vs-col span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hx-vs-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.09)}
.hx-vs-row:last-child{border-bottom:0}
.hx-vs-cell{padding:22px 24px}
.hx-vs-cell.a{border-right:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.16)}
.hx-vs-cell.b{background:rgba(125,156,151,.05)}
.hx-vs-tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:9px;color:rgba(255,255,255,.45)}
.hx-vs-cell.b .hx-vs-tag{color:var(--aod)}
.hx-vs-cell q{display:block;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.62);font-style:italic}
.hx-vs-cell.b q{color:#fff;font-style:normal}

/* ── 6. que incluye ── */
.hx-inc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hx-inc-item{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);
  transition:border-color .3s ease,background .3s ease}
.hx-inc-item:hover{border-color:rgba(178,198,194,.35);background:rgba(255,255,255,.045)}
.hx-inc-n{flex:0 0 auto;font-weight:800;font-size:.92rem;color:var(--aod);
  background:rgba(125,156,151,.16);border-radius:8px;padding:6px 10px;line-height:1}
.hx-inc-item h3{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:5px}
.hx-inc-item p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.65)}

/* ── 8. faq ── */
.hx-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.hx-faq summary{cursor:pointer;font-weight:700;color:var(--slate);font-size:1.02rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:'+';font-size:1.3rem;color:var(--accent);font-weight:400;line-height:1}
.hx-faq details[open] summary::after{content:'\2013'}
.hx-faq details p{margin-top:12px;color:var(--ink-2);font-size:.96rem;max-width:62ch}

/* ── 9. formulario ── */
.hx-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
#hxForm label{display:block;font-size:.85rem;font-weight:600;color:var(--slate)}
#hxForm .opt{font-weight:400;color:var(--ink-2)}
#hxForm input,#hxForm textarea{width:100%;margin-top:7px;padding:13px 14px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
#hxForm input:focus,#hxForm textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hx-full{display:block;margin-bottom:18px}
.hx-formerr{color:#8c2f2f;font-size:.88rem;margin-bottom:14px;font-weight:600}
.hx-formnote{margin-top:14px;font-size:.84rem;color:var(--ink-2)}
.hx-ok{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;text-align:center}
.hx-okmark{width:54px;height:54px;border-radius:50%;border:2px solid var(--sage);color:var(--sage);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px}
.hx-ok h3{font-size:1.3rem;font-weight:800;color:var(--slate);margin-bottom:8px;outline:none}
.hx-ok p{color:var(--ink-2);font-size:.95rem}

/* ── pie ── */
footer{background:var(--slate-d);color:rgba(255,255,255,.6);padding:34px 0;font-size:.78rem;line-height:1.7}
footer a{color:var(--aod)}

/* ── responsive ── */
@media (max-width:940px){
  .hx-grid3,.hx-steps,.hx-inc{grid-template-columns:1fr 1fr}
  .hx-facts{grid-template-columns:1fr 1fr}
  .hx-facts li:nth-child(2){border-right:0}
  .hx-facts li:nth-child(1),.hx-facts li:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}
}
@media (max-width:680px){
  .hx-sec{padding:66px 0}
  .hx-grid3,.hx-steps,.hx-inc,.hx-fgrid{grid-template-columns:1fr}
  .hx-facts{grid-template-columns:1fr}
  .hx-facts li{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .hx-facts li:last-child{border-bottom:0}
  /* la comparativa pasa a pares apilados para no partir las citas */
  .hx-vs-head{display:none}
  .hx-vs-row{grid-template-columns:1fr}
  .hx-vs-cell.a{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  /* En movil desaparece la cabecera de dos columnas, asi que cada celda lleva su
     etiqueta. El texto se toma de data-col para que sirva en ingles y en espanol. */
  .hx-vs-cell::before{content:attr(data-col);display:block;font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;margin-bottom:6px}
  .hx-vs-cell.a::before{color:rgba(255,255,255,.38)}
  .hx-vs-cell.b::before{color:var(--sage)}
  nav .links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--slate);
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 26px 18px}
  nav .links.open{display:flex}
  nav .links a{padding:11px 0;font-size:.95rem}
  .nav-toggle{display:block}
}