/* Página /trabaja-con-nosotros — mismos tokens y componentes que la home de Gauzz. */
:root{
  --bg:#ffffff; --bg-soft:#fafaf8; --surface:#f0f0ed; --border:#e8e8e6;
  --ink:#1a1a1a; --ink-soft:#282828; --muted:#86888b;
  --orange:#f68c1f; --orange-tint:#fdf1e2; --orange-tint-strong:#fbe3c2;
  --danger:#b3261e; --danger-tint:#fdf1f0;
  --shadow:0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.05);
  --maxw:1120px; color-scheme:light;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:300; line-height:1.5; -webkit-font-smoothing:antialiased;}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-weight:500; margin:0; text-wrap:balance;}
p{margin:0;}
em{font-style:italic; color:var(--orange); font-weight:400;}
::selection{background:var(--orange-tint-strong);}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:3px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:clamp(20px,6vw,32px); padding-right:clamp(20px,6vw,32px);}
.narrow{max-width:760px;}
section{padding:clamp(56px,10vw,96px) 0;}
section + section{border-top:1px solid var(--border);}
.band{background:var(--surface);}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); font-weight:500; margin-bottom:14px; display:block;}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem); max-width:22ch; margin-bottom:28px;}
.fineprint{margin-top:24px; font-size:13.5px; color:var(--muted); max-width:62ch;}

/* ---------- header ---------- */
header.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px clamp(20px,6vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand-logo{height:26px; width:auto; flex-shrink:0;}
.nav-links{display:none; gap:28px; font-size:14px; color:var(--muted);}
.nav-links a{text-decoration:none; transition:color .15s ease;}
.nav-links a:hover{color:var(--ink);}
@media (min-width:820px){ .nav-links{display:flex;} }

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--orange); color:#fff; font-family:inherit; font-weight:500; font-size:15px; padding:13px 22px; border-radius:9px; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.08);}
.btn:hover{background:#e67d10; transform:translateY(-1px); box-shadow:0 6px 16px rgba(246,140,31,.28);}
.btn:active{transform:translateY(0);}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;}
.btn-nav{padding:10px 16px; font-size:14px;}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--border); box-shadow:none;}
.btn-ghost:hover{background:var(--surface); box-shadow:none;}
.btn-block{width:100%;}
.btn-lg{padding:17px 30px; font-size:16.5px; border-radius:11px;}
.linklike{background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer;}

/* ---------- hero: copy + chat a la vista desde el primer segundo ---------- */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(36px,6vw,72px);}
.hero-grid{display:grid; gap:clamp(22px,4vw,48px); align-items:center;}
@media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);} }
.hero h1{font-size:clamp(1.9rem,5.6vw,3.2rem); line-height:1.1; letter-spacing:-.01em; max-width:19ch;}
.hero .lede{margin-top:16px; font-size:clamp(15.5px,2.3vw,18px); color:var(--muted); max-width:46ch;}
.nav-wa{font-size:14px; color:var(--muted); text-decoration:none;}
.nav-wa:hover{color:var(--ink);}

/* ---------- perfiles ---------- */
.roles-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:760px){ .roles-grid{grid-template-columns:1fr 1fr;} }
.role-card{border:1px solid var(--border); border-radius:14px; padding:clamp(22px,4vw,30px); background:#fff; box-shadow:var(--shadow);}
.role-card h3{font-size:1.25rem; margin-bottom:10px;}
.role-card p{color:var(--ink-soft); margin-bottom:14px;}
.role-card ul{margin:0; padding-left:1.1em; color:var(--muted); font-size:14.5px;}
.role-card li + li{margin-top:6px;}

/* ---------- cómo funciona ---------- */
.steps{list-style:none; margin:0 0 32px; padding:0; display:grid; gap:14px; counter-reset:step;}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);} }
.steps li{counter-increment:step; background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:8px;}
.steps li::before{content:"0" counter(step); font-family:"DM Mono",ui-monospace,monospace; font-size:12px; color:var(--orange); font-weight:500;}
.steps b{font-weight:500; font-size:1.05rem;}
.steps span{color:var(--muted); font-size:14.5px;}
.notice{background:var(--orange-tint); border:1px solid var(--orange-tint-strong); border-radius:14px; padding:clamp(20px,4vw,28px);}
.notice h3{font-size:1.05rem; margin-bottom:10px;}
.notice ul{margin:0; padding-left:1.1em; font-size:14.5px; color:var(--ink-soft);}
.notice li + li{margin-top:6px;}
.notice a{color:#a35c0c;}

/* ---------- chat ---------- */
[hidden]{display:none !important;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.panel{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:var(--shadow); overflow:hidden; min-height:440px;}
.chat-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; font-weight:500;}
.chat-head .who{display:flex; align-items:center; gap:8px;}
.dot{width:9px; height:9px; border-radius:50%; background:#2fb36a; box-shadow:0 0 0 3px #e3f6ec;}
.chat-head .step{font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-left:auto;}
.chat-head .x{display:none; background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:0 2px;}
.progress{height:3px; background:var(--surface);}
.progress i{display:block; height:100%; width:0; background:var(--orange); transition:width .4s ease;}

.chat-log{flex:1; display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:16px; min-height:150px; max-height:min(52vh,460px); scroll-behavior:smooth; background:var(--bg-soft);}
.msg{max-width:86%; padding:10px 14px; border-radius:16px; font-size:15.5px; font-weight:400; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; animation:pop .18s ease-out;}
.msg.ai{align-self:flex-start; background:#fff; border:1px solid var(--border); border-bottom-left-radius:5px;}
.msg.me{align-self:flex-end; background:var(--orange); color:#fff; border-bottom-right-radius:5px;}
.msg a{color:inherit;}
@keyframes pop{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.typing{align-self:flex-start; background:#fff; border:1px solid var(--border); border-radius:16px; border-bottom-left-radius:5px; padding:13px 15px; display:flex; gap:5px;}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite ease-in-out;}
.typing i:nth-child(2){animation-delay:.18s;} .typing i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){ .typing i{animation:none; opacity:.6;} html,.chat-log{scroll-behavior:auto;} .msg{animation:none;} }

.roles-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px 4px;}
.role-btn{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; font:inherit; background:#fff; color:var(--ink); border:1.5px solid var(--orange); border-radius:12px; padding:13px 14px; cursor:pointer; transition:background .15s ease,transform .15s ease;}
.role-btn b{font-weight:500; font-size:16px;}
.role-btn span{font-size:13px; color:var(--muted); font-weight:400; line-height:1.3;}
.role-btn:hover{background:var(--orange-tint); transform:translateY(-1px);}
.role-btn[disabled]{opacity:.5; cursor:wait;}
@media (max-width:420px){ .roles-pick{grid-template-columns:1fr;} }

.card{padding:14px 16px; border-top:1px solid var(--border); background:#fff;}
.card label{display:block; font-size:13.5px; color:var(--ink-soft); margin:10px 0 5px; font-weight:400;}
.card label:first-child{margin-top:0;}
.card input[type=text]{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:16px; font-weight:400; background:#fff; color:var(--ink);}
.card input:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);}
.card .btn{margin-top:12px;}
.card .pair{display:grid; gap:0 10px; grid-template-columns:1fr;}
@media (min-width:480px){ .card .pair{grid-template-columns:1fr 1fr;} .card .pair label{margin-top:0;} }
.card .row{display:flex; gap:10px;}
.card .row .btn{margin-top:0; padding:0 20px;}
.card .linklike{margin-top:10px; font-size:13px; color:var(--muted);}

.composer{display:flex; gap:10px; align-items:flex-end; padding:12px 16px; border-top:1px solid var(--border); background:#fff;}
.composer textarea{flex:1; min-height:46px; max-height:150px; resize:none; padding:12px 14px; border:1px solid var(--border); border-radius:14px; font:inherit; font-size:16px; font-weight:400; color:var(--ink); line-height:1.35;}
.composer textarea:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);}
.send{flex:0 0 46px; height:46px; display:grid; place-items:center; border:none; border-radius:50%; background:var(--orange); color:#fff; cursor:pointer; transition:background .15s ease;}
.send:hover{background:#e67d10;}
.send[disabled]{opacity:.5; cursor:not-allowed;}

.note{padding:12px 16px; font-size:14px; color:var(--ink-soft); font-weight:400; background:var(--orange-tint); border-top:1px solid var(--orange-tint-strong);}
.error{margin:0; padding:10px 16px; font-size:14px; font-weight:400; color:var(--danger); background:var(--danger-tint); border-top:1px solid #f0d5d3;}
.chat-foot{margin:0; padding:10px 16px 12px; font-size:12px; color:var(--muted); font-weight:400; line-height:1.4; display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between;}
.chat-foot a{color:inherit;}

/* ---------- botones ---------- */
.btn-block{width:100%;}

/* ---------- móvil: al empezar, el chat ocupa toda la pantalla ---------- */
@media (max-width:760px){
  body.live{overflow:hidden;}
  body.live header.nav{display:none;}
  body.live .panel{position:fixed; inset:0; z-index:100; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none;}
  body.live .chat-log{max-height:none; min-height:0;}
  body.live .chat-head .x{display:block;}
  body.live .chat-foot{padding-bottom:max(12px,env(safe-area-inset-bottom));}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border); padding:44px 0;}
.footer-top{display:flex; flex-direction:column; gap:24px;}
@media (min-width:700px){ .footer-top{flex-direction:row; justify-content:space-between; align-items:flex-start;} }
.footer-top .brand-logo{height:20px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:12px 20px; font-size:13.5px; color:var(--muted);}
.footer-nav a{text-decoration:none;} .footer-nav a:hover{color:var(--ink);}
.footer-bottom{margin-top:36px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:20px;}

/* ---------- aviso de privacidad ---------- */
.legal{max-width:760px;}
.legal h1{font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:12px;}
.legal h2{font-size:1.2rem; max-width:none; margin:32px 0 10px;}
.legal p,.legal li{color:var(--ink-soft); font-weight:400; font-size:15.5px;}
.legal ul{padding-left:1.2em;} .legal li + li{margin-top:6px;}
.legal .draft{background:var(--danger-tint); border:1px solid #f0d5d3; color:var(--danger); border-radius:10px; padding:12px 16px; font-size:14px; font-weight:400; margin:18px 0;}