/* HumanOff · portada (oct 2026): hero con red de agentes, problema y solución,
   cómo trabajamos en 5 pasos, calculadora de ahorro y casos. */

/* ---------- Hero con parallax: la plataforma y sus agentes ---------- */
.ph{position:relative;overflow:hidden;background:#000;color:#f5f5f7;isolation:isolate;padding-top:var(--nav-h)}
.ph__bg{position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;will-change:transform}
.ph__glow{position:absolute;inset:0;background:radial-gradient(40% 45% at 72% 48%,rgba(111,243,220,.16),transparent 70%),radial-gradient(30% 35% at 18% 20%,rgba(255,255,255,.05),transparent 70%)}
.ph__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(55% 60% at 60% 45%,#000,transparent 75%);mask-image:radial-gradient(55% 60% at 60% 45%,#000,transparent 75%)}
.ph__in{max-width:1240px;margin:0 auto;padding:clamp(36px,6vh,72px) var(--gut) clamp(72px,10vh,110px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,3.5vw,56px);align-items:center;min-height:calc(100svh - var(--nav-h));max-height:1000px}
.ph__copy,.ph__layer{will-change:transform}
.ph__chip{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 13px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13.5px;font-weight:500;color:#e5e5ea;animation:phIn .9s var(--ease-out) both}
.ph__chip i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:tealPing 2.2s infinite}
.ph__title{font-size:clamp(38px,4.5vw,66px);letter-spacing:-.05em;line-height:1.02;margin:22px 0 20px;animation:phIn 1s var(--ease-out) .08s both}
.ph__title span{display:block;font-weight:300;background:linear-gradient(95deg,#fff 0%,#c8fff4 40%,var(--teal) 75%,var(--teal-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.ph__sub{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:#c7c7cc;max-width:48ch;animation:phIn 1s var(--ease-out) .16s both}
.ph__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;animation:phIn 1s var(--ease-out) .24s both}
.ph__wa svg{width:19px;height:19px;color:#25D366}
@media (min-width:901px){.ph__wa{width:52px;padding-inline:0;justify-content:center}.ph__wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.ph__facts{list-style:none;margin:36px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px 32px;animation:phIn 1s var(--ease-out) .32s both}
.ph__facts li{font-size:13px;color:#8e8e93;line-height:1.35}
.ph__facts b{display:block;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
@keyframes phIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ph__scene{position:relative;width:100%;max-width:600px;aspect-ratio:1/1;justify-self:center}
.ph__layer{position:absolute}
.ph__orbit{inset:0}
.ph__orbit svg{width:100%;height:100%;overflow:visible}
.ph__orbit circle{fill:none;stroke:rgba(255,255,255,.09);stroke-dasharray:3 7}
.ph__win{text-align:left;left:6%;right:2%;top:11%;border-radius:22px;background:rgba(20,22,24,.78);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);overflow:hidden;animation:phIn 1.1s var(--ease-out) .2s both}
.win__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.win__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.win__bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:#d1d1d6}
.win__body{display:grid;grid-template-columns:104px 1fr;min-height:250px}
.win__side{list-style:none;margin:0;padding:12px 8px;border-right:1px solid rgba(255,255,255,.07);display:grid;align-content:start;gap:2px}
.win__side li{font-size:12px;color:#8e8e93;padding:7px 10px;border-radius:8px}
.win__side li.on{background:rgba(255,255,255,.08);color:#fff}
.win__main{padding:14px 16px 16px}
.win__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.win__master{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff}
.win__master i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:tealPing 2.2s infinite}
.win__h small{font-size:11px;color:#6e6e73}
.win__feed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.win__feed li{position:relative;padding:10px 12px 10px 38px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.35;animation:feed 9s var(--ease-out) infinite both}
.win__feed li::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.win__feed b{display:block;color:#fff;font-weight:600}
.win__feed span{color:#a1a1a6}
.win__feed li:nth-child(2){animation-delay:.9s}.win__feed li:nth-child(3){animation-delay:1.8s}.win__feed li:nth-child(4){animation-delay:2.7s}
@keyframes feed{0%{opacity:0;transform:translateY(10px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.ph__chat{left:-4%;bottom:-1%;display:grid;gap:8px;width:min(270px,52%);animation:phIn 1s var(--ease-out) .5s both}
.ph__chat p{padding:10px 14px;font-size:13px;line-height:1.35;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ph__chat .u{background:#fff;color:#111;border-radius:16px 16px 16px 4px;justify-self:start}
.ph__chat .a{background:var(--teal);color:#00140f;border-radius:16px 16px 4px 16px;justify-self:end;font-weight:500}
.ph__tag{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:rgba(20,22,24,.7);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12.5px;font-weight:500;color:#fff;white-space:nowrap;animation:phIn 1s var(--ease-out) .6s both}
.ph__tag i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.ph__tag--1{right:0;top:2%}
.ph__tag--2{right:-2%;bottom:6%}
.ph__down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px}
.ph__down i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:phDown 1.8s var(--ease) infinite}
@keyframes phDown{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:900px){
  .ph__in{grid-template-columns:1fr;min-height:0;max-height:none;text-align:center;padding-top:36px;padding-bottom:64px}
  .ph__sub{margin-inline:auto}
  .ph__ctas,.ph__facts{justify-content:center}
  .ph__ctas{flex-direction:column;align-items:stretch;max-width:380px;margin-inline:auto}
  .ph__scene{max-width:460px;aspect-ratio:auto;display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:8px}
  .ph__layer{position:relative;inset:auto!important;translate:none!important}
  .ph__orbit{display:none}
  .ph__win{order:2}
  .ph__tag{order:1;align-self:flex-start}
  .ph__tag--2{order:4;align-self:flex-end}
  .ph__chat{order:3;width:auto;max-width:300px;margin-left:8px}
  .ph__down{display:none}
}
@media (max-width:520px){.win__body{grid-template-columns:1fr}.win__side{display:none}.ph__facts{gap:12px 22px}}
@media (prefers-reduced-motion:reduce){.ph *,.ph__copy,.ph__layer{animation:none!important;transform:none!important}}

/* ---------- Qué hace HumanOff ---------- */
.what{padding-block:var(--sec)}
.what__grid{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.what__grid li{background:var(--gray-1);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.what__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#000;color:#fff;font-size:14px;font-weight:600;margin-bottom:22px}
.what__grid h3{font-size:clamp(21px,2vw,25px);margin-bottom:10px}
.what__grid p{color:var(--gray-t);font-size:16px;line-height:1.5}
.what__note{text-align:center;margin-top:28px;font-size:clamp(16px,1.5vw,18px);color:var(--gray-t)}
@media (max-width:820px){.what__grid{grid-template-columns:1fr}}

/* ---------- Problema y solución ---------- */
.sol{padding-block:var(--sec)}
.sol__rows{display:grid;gap:clamp(56px,8vw,96px);margin-top:clamp(36px,5vw,56px)}
.sol__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sol__n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#000;color:#fff;font-size:15px;font-weight:600;margin-bottom:18px}
.sol__row h2{font-size:clamp(30px,4.2vw,52px)}
.sol__row p{color:var(--gray-t);font-size:clamp(17px,1.5vw,20px);line-height:1.5;margin-top:16px;max-width:44ch}
.sol__card{border-radius:var(--r-lg);background:var(--gray-1);padding:clamp(22px,3vw,34px);min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.sol__mess{display:flex;flex-wrap:wrap;gap:10px}
.sol__mess span{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.sol__mess span:nth-child(odd){transform:rotate(-1.5deg)}
.sol__mess span:nth-child(3n){transform:rotate(2deg)}
.sol__mess i{font-style:normal;color:var(--gray-d);align-self:center}
.sol__agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sol__agents span{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#000;color:#fff;font-size:15px;font-weight:500}
.sol__agents span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);flex:none}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flow li{position:relative;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:#000;color:#fff;font-size:15px;line-height:1.35}
.flow li b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#000;font-size:13px}
.flow li:not(:last-child)::after{content:"";position:absolute;left:29px;bottom:-11px;width:2px;height:12px;background:var(--teal)}
.flow__end{font-weight:600;font-size:16px;margin-top:6px}
@media (max-width:820px){.sol__row{grid-template-columns:1fr}}

/* Cierre: una sola frase */
.words--close p{max-width:20ch}

/* ---------- Cómo trabajamos: 5 pasos ---------- */
.steps--5{grid-template-columns:repeat(5,1fr);gap:22px}
.steps--5::before,.steps--5::after{right:calc(20% - 12px)}
.js .proc.in .step:nth-child(5) .dot,.js .proc.in .step:nth-child(5) .dot::after{transition-delay:2.5s}
.steps--5 .step h3{font-size:clamp(19px,1.7vw,22px)}
.steps--5 .step p{font-size:15px}
@media (max-width:980px) and (min-width:821px){.steps--5{grid-template-columns:repeat(3,1fr)}.steps--5::before,.steps--5::after{display:none}}
@media (max-width:820px){.steps--5{grid-template-columns:1fr;gap:0}.steps--5::before,.steps--5::after{right:auto}}

/* ---------- Funciona con lo que ya usas ---------- */
.uses{padding-block:clamp(40px,5vw,56px) clamp(56px,7vw,88px);border-top:0}
.uses__head{text-align:center;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.03em;margin-bottom:18px;color:#f5f5f7}
.uses .ticker{border-top:0}

/* ---------- Calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,32px);margin-top:clamp(36px,5vw,52px);align-items:stretch}
.calc__in{background:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:grid;gap:22px;border:1px solid var(--line)}
.calc__in label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.calc__in input[type=number]{width:100%;font:inherit;font-size:20px;padding:12px 16px;border-radius:14px;border:1px solid #d2d2d7;background:#fff;color:var(--ink)}
.calc__in input[type=number]:focus{outline:2px solid #000;outline-offset:1px}
.calc__pct{display:flex;align-items:center;gap:16px}
.calc__pct input{flex:1;accent-color:#000;height:28px}
.calc__pct output{min-width:58px;text-align:right;font-size:20px;font-weight:600}
.calc__hint{font-size:13px;color:var(--gray-t);margin-top:6px}
.calc__out{background:#000;color:#f5f5f7;border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}
.calc__out::before{content:"";position:absolute;inset:auto -20% -40% auto;width:70%;height:90%;background:radial-gradient(closest-side,rgba(111,243,220,.18),transparent);pointer-events:none}
.calc__lead{font-size:17px;color:#a1a1a6}
.calc__big{font-size:clamp(44px,6.4vw,76px);font-weight:600;letter-spacing:-.05em;line-height:1;color:#fff}
.calc__big.is-empty{color:#48484a}
.calc__txt{font-size:clamp(17px,1.6vw,20px);line-height:1.45}
.calc__save{font-size:16px;color:#c7c7cc;border-top:1px solid var(--line-d);padding-top:16px;margin-top:4px}
.calc__out .pill{align-self:flex-start;margin-top:6px;position:relative}
.calc__formula{font-size:12.5px;color:#86868b}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* ---------- Casos ---------- */
.cases{padding-block:var(--sec)}
.cases__soon{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 16px;border-radius:99px;background:var(--gray-1);font-weight:500;font-size:15px}
.cases__soon i{width:8px;height:8px;border-radius:50%;background:var(--teal-2);animation:tealPing 2.2s infinite}
.case-tpl{margin-top:clamp(28px,4vw,44px);border:1px dashed #c7c7cc;border-radius:var(--r-lg);display:grid;grid-template-columns:1.1fr 1fr 1fr .9fr;overflow:hidden}
.case-tpl div{padding:22px 24px;border-right:1px dashed #d2d2d7}
.case-tpl div:last-child{border-right:0}
.case-tpl b{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.case-tpl span{display:block;font-size:14px;color:var(--gray-t);line-height:1.45}
.case-tpl em{display:block;font-style:normal;font-size:28px;font-weight:600;color:#d2d2d7;margin-top:10px}
@media (max-width:820px){.case-tpl{grid-template-columns:1fr 1fr}.case-tpl div:nth-child(2){border-right:0}.case-tpl div:nth-child(-n+2){border-bottom:1px dashed #d2d2d7}}
@media (max-width:460px){.case-tpl{grid-template-columns:1fr}.case-tpl div{border-right:0;border-bottom:1px dashed #d2d2d7}.case-tpl div:last-child{border-bottom:0}}

/* ---------- Hero de las páginas de servicios ---------- */
.ph__crumbs{justify-content:flex-start;margin-bottom:18px;animation:phIn .8s var(--ease-out) both}
.ph--svc .ph__in{min-height:calc(94svh - var(--nav-h))}
@media (max-width:900px){.ph__crumbs{justify-content:center}}
.ph--svc .ph__title{font-size:clamp(34px,3.9vw,56px)}
.what__k{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2);margin-bottom:6px}
.what__grid li:nth-child(1) .what__k{color:var(--gray-d)}

/* ---------- Calculadora por país y datos del mercado ---------- */
.calc__sel{width:100%;font:inherit;font-size:18px;padding:12px 44px 12px 16px;border-radius:14px;border:1px solid #d2d2d7;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center/14px no-repeat;-webkit-appearance:none;appearance:none;color:var(--ink)}
.calc__sel:focus{outline:2px solid #000;outline-offset:1px}
.calc__note{font-size:14px;color:#a1a1a6;line-height:1.45}
.calc__src{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px}
.calc__src summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:15px}
.calc__src div{padding-bottom:18px}
.calc__src ul{margin:0 0 12px;padding-left:18px;display:grid;gap:8px}
.calc__src li,.calc__src p{font-size:13.5px;color:var(--gray-t);line-height:1.5}
.mkt{padding-block:var(--sec)}
.mkt__grid{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.6vw,18px)}
.mkt__grid li{background:var(--gray-1);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:10px}
.mkt__grid b{font-size:clamp(34px,3.6vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1}
.mkt__grid p{font-size:15.5px;line-height:1.45;color:var(--ink);flex:1}
.mkt__grid a{font-size:12.5px;color:var(--gray-t);text-decoration:underline;text-underline-offset:2px}
@media (min-width:1100px){.mkt__grid{grid-template-columns:repeat(5,1fr)}}
.mkt__grid b{white-space:nowrap}@media (min-width:1100px){.mkt__grid b{font-size:clamp(30px,2.5vw,38px)}}
.soft .mkt__grid li{background:#fff;border:1px solid var(--line)}

/* Hero con video de fondo (red neuronal): el texto queda sobre la zona mas oscura */
.ph__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity 1.2s ease;filter:saturate(.9) contrast(1.05)}
.ph__vid.is-on{opacity:.78}
.ph__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.25) 64%,rgba(0,0,0,.45) 100%),linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 72%,#000 100%)}
.ph .ph__grid{opacity:.45}
@media (max-width:980px){.ph__vid{object-position:50% 50%}.ph__vid.is-on{opacity:.6}.ph__shade{background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.82) 80%,#000 100%)}}
@media (prefers-reduced-motion:reduce){.ph__vid{display:none}}

/* Inicio: sin la ventana de ejemplo, el video ocupa todo el lado derecho */
#inicio .ph__in{grid-template-columns:minmax(0,700px)}
#inicio .ph__vid.is-on{opacity:.9}
#inicio .ph__shade{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 36%,rgba(0,0,0,.12) 66%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%,transparent 75%,#000 100%)}
@media (max-width:980px){#inicio .ph__in{grid-template-columns:1fr}#inicio .ph__vid.is-on{opacity:.65}#inicio .ph__shade{background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.8) 80%,#000 100%)}}
/* ph__wa fondo solido: legible sobre el video */
.ph .pill--glass.ph__wa{background:#25D366;border-color:#25D366;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 24px -10px rgba(37,211,102,.7)}
.ph .pill--glass.ph__wa:hover{background:#1ebe5b;border-color:#1ebe5b}
.ph .ph__wa svg{color:#fff}