/* Estilos propios de ddos-detector.html — externalizados desde el <style>
   en linea, que la CSP de produccion bloquea (style-src 'self'). */

.dd-hero{position:relative;overflow:hidden;min-height:100svh;
  display:flex;align-items:center;}
.dd-hero > .wrap{position:relative;z-index:2;}
#dd-globe{position:absolute;z-index:0;display:block;
  top:110px;bottom:10px;left:auto;
  width:min(52%,660px);height:calc(100% - 120px);right:2%;}
.dd-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 10% 45%,
    rgba(21,11,30,.97) 0%, rgba(21,11,30,.82) 38%,
    rgba(21,11,30,.28) 66%, rgba(21,11,30,0) 100%);}
@media(max-width:900px){
  #dd-globe{width:100%;right:0;opacity:.30;top:14%;height:64%;}
  .dd-hero{min-height:100svh;padding-block:150px 64px;}
}
@media(max-width:560px){
  #dd-globe{opacity:.34;top:9%;height:46%;width:118%;right:-9%;}
  .dd-veil{background:radial-gradient(120% 62% at 50% 78%,
    rgba(21,11,30,.97) 0%, rgba(21,11,30,.88) 44%,
    rgba(21,11,30,.34) 74%, rgba(21,11,30,0) 100%);}
}
@media (prefers-reduced-motion:reduce){#dd-globe{display:none;}}
.pg-hero{padding-block:clamp(122px,15vh,170px) clamp(44px,7vh,74px);
  background:radial-gradient(ellipse 66% 88% at 76% 18%,rgba(255,138,115,.13),transparent 60%),
             linear-gradient(180deg,var(--void),var(--aubergine));
  border-bottom:1px solid var(--line);}
.pg-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.04;max-width:19ch;text-wrap:balance;}
.pg-hero .lede{margin-top:22px;font-size:clamp(1.05rem,2vw,1.26rem);
  color:var(--bone-dim);max-width:58ch;line-height:1.55;}
.pg-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.is-here{color:var(--heliotrope) !important;}

.dd-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.dd-card{background:var(--card);border:1px solid var(--line);padding:26px 26px 28px;
  transition:transform .45s var(--ease),border-color .45s var(--ease);}
.dd-card:hover{transform:translateY(-4px);border-color:rgba(255,138,115,.36);}
.dd-card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ember);}
.dd-card h3{font-family:var(--display);font-weight:700;font-size:1.14rem;
  letter-spacing:-.02em;margin-top:12px;}
.dd-card p{margin-top:11px;color:var(--bone-dim);font-size:.94rem;line-height:1.6;}

.dd-flow{display:grid;gap:0;margin-top:28px;counter-reset:f;}
.dd-step{counter-increment:f;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:start;}
.dd-step:first-child{border-top:1px solid var(--line);}
.dd-step::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);
  font-size:.76rem;color:var(--ember);letter-spacing:.1em;padding-top:3px;}
.dd-step h3{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.015em;}
.dd-step p{margin-top:7px;color:var(--bone-dim);font-size:.93rem;line-height:1.58;max-width:64ch;}

.dd-plan{margin-top:30px;padding:clamp(26px,4vw,40px);background:var(--card-2);
  border:1px solid var(--line-strong);border-left:3px solid var(--viridian);
  display:grid;gap:22px;align-items:center;}
@media(min-width:820px){.dd-plan{grid-template-columns:1fr auto;gap:38px;}}
.dd-plan .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--viridian);}
.dd-plan h3{font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.62rem);letter-spacing:-.025em;margin-top:12px;text-wrap:balance;}
.dd-plan p{margin-top:13px;color:var(--bone-dim);max-width:64ch;line-height:1.6;}
@media (prefers-reduced-motion:reduce){.dd-card{transition:none;}}

@media(max-width:640px){
  .pg-hero,.op-hero{min-height:100svh;padding-block:150px 64px;
    align-items:center;}
  .pg-hero h1,.op-hero h1{font-size:clamp(1.8rem,7.8vw,2.4rem);max-width:100%;}
  .pg-hero .lede,.op-hero .lede{font-size:1rem;}
  .pg-cta,.op-hero .cta-row{gap:10px;}
  .pg-cta .btn,.op-hero .cta-row .btn{width:100%;justify-content:center;}
}