/* Hero: título, subtítulo y una llamada a la acción sobre un slider de territorios.
   Cada slide = una foto, UN recuadro de detección y UNA alerta. */
.hs{position:relative;min-height:640px;height:100svh;overflow:hidden;background:var(--bg);isolation:isolate}
.hs-scene{position:absolute;inset:0;container-type:size;z-index:-2}
.hs-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hs-slide.is-on{opacity:1}
/* The stage keeps the photo's 16:9 and covers the hero, so boxes stay on their subject at any size. */
.hs-stage{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.hs-stage img{width:100%;height:100%;object-fit:cover}
.hs-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#071219 0%,#071219f2 26%,#071219b3 44%,#07121900 66%),linear-gradient(0deg,#071219 0%,#07121900 28%),linear-gradient(180deg,#071219cc 0%,#07121900 22%)}
.hs-body{position:relative;padding-top:clamp(120px,19vh,210px)}
.hs-body .eyebrow{margin-bottom:22px;letter-spacing:.14em}
.hs h1{max-width:860px;font-size:clamp(52px,min(5.6vw,9vh),96px);text-transform:uppercase;letter-spacing:-.01em;line-height:.96}
.hs-lead{max-width:470px;margin:26px 0 34px;color:#c4d1d6;font-size:15px}
.hs-lead strong{color:var(--ink);font-weight:500}

/* Detection box + alert */
.hs-box{position:absolute;border:1.5px solid var(--accent);box-shadow:0 0 24px #83e8ce33;opacity:0;transform:scale(1.35);transition:opacity .35s .4s,transform .7s .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.hs-slide.is-on .hs-box{opacity:1;transform:none}
.hs-box.is-alert{border-color:var(--alert,#ff5a4f);box-shadow:0 0 28px #ff5a4f55}
.hs-tag{position:absolute;left:-1.5px;bottom:100%;margin-bottom:5px;white-space:nowrap;font:500 11px var(--mono);letter-spacing:.06em;background:var(--accent);color:#071219;padding:3px 8px}
.hs-box.is-alert .hs-tag{background:var(--alert,#ff5a4f);color:#fff}
.hs-alert{position:absolute;right:4%;bottom:150px;width:min(340px,30vw);display:grid;gap:6px;padding:14px 16px;background:#0c1b24f2;border:1px solid var(--line);border-left:3px solid var(--accent);font:11px/1.5 var(--mono);color:var(--ink);opacity:0;transform:translateY(14px);transition:opacity .4s 1.4s,transform .4s 1.4s}
.hs-alert b{font-weight:500;letter-spacing:.08em;color:var(--accent)}
.hs-slide:not([data-kind="search"]) .hs-alert{border-left-color:var(--alert,#ff5a4f)}
.hs-slide:not([data-kind="search"]) .hs-alert b{color:var(--alert,#ff5a4f)}
.hs-slide.is-on .hs-alert{opacity:1;transform:none}
.hs-answer{margin:4px 0 0;padding-top:8px;border-top:1px solid var(--line);color:var(--accent);min-height:3em}

/* Controls: caption, one tab per slide with its progress, pause */
.hs-controls{position:absolute;left:0;right:0;bottom:34px;margin:auto}
.hs-caption{margin:0 0 12px;font:10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.hs-tabs{display:flex;gap:10px;align-items:stretch}
.hs-tab{position:relative;flex:1;display:flex;gap:10px;align-items:center;padding:12px 0 14px;background:none;border:0;border-top:1px solid #ffffff2e;color:var(--muted);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
.hs-tab span{color:var(--accent);opacity:.6}
.hs-tab:hover,.hs-tab.is-on{color:var(--ink)}.hs-tab.is-on span{opacity:1}
.hs-tab i{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);box-shadow:0 0 8px var(--accent);transform-origin:left;transform:scaleX(0)}
.hs-tab.is-on i{transform:scaleX(var(--p,0))}
.hs-pause{flex:0 0 auto;padding:0 4px 2px 16px;background:none;border:0;border-top:1px solid #ffffff2e;color:var(--ink);font:11px var(--mono);cursor:pointer}
.hs-pause:hover{color:var(--accent)}

@media(max-width:767px){
  .hs{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start}
  .hs-shade{background:linear-gradient(0deg,#071219 0%,#071219f0 48%,#07121966 72%,#07121900 100%),linear-gradient(180deg,#071219cc 0%,#07121900 20%)}
  /* Phone: a top band of the photo, centered on the subject (--fx = subject's x within the photo). */
  /* --fy (0–100, subject's y in the photo) puts the subject in the middle of the photo band, between the header (76px) and the text (44svh). */
  .hs-stage{top:0;left:50%;width:auto;height:58svh;transform:translate(calc(-1 * var(--fx,50%)),min(76px,calc((76px + 44svh) / 2 - var(--fy,50) * .58svh)))}
  .hs-body{padding-top:44svh}
  .hs h1{font-size:clamp(40px,11.5vw,56px)}
  .hs-lead{font-size:14px;margin:18px 0 26px}
  .hs-alert{display:none}
  .hs-controls{position:relative;bottom:auto;margin:28px auto 26px}
  .hs-tabs{gap:6px}
  .hs-tab{font-size:0;padding:10px 0}.hs-tab span{font-size:9px}
  .hs-pause{font-size:0;padding:0 0 2px 6px}.hs-pause:first-letter{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.hs-box{transition:none;transform:none}}

/* Per-slide copy: eyebrow, title and lead cross-fade on each change; the lead keeps three lines so the button never jumps. */
.hs-swap{transition:opacity .28s ease,transform .28s ease}
.hs-swap.is-out{opacity:0;transform:translateY(8px)}
.hs-lead{min-height:4.95em}
@media(prefers-reduced-motion:reduce){.hs-swap{transition:none}}
@media(max-width:767px){.hs h1{min-height:3.85em}.hs-lead{min-height:6.6em}}