/* ══════════════════════════════════════════════════════
   ciberseguridad.css  —  Yeapdata® · Servicios
   Light theme · Brand accents · Cyber aesthetic
   Full Responsive Edition
══════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --pk:       #FF1D75;
  --pk-10:    rgba(255,29,117,.10);
  --pk-15:    rgba(255,29,117,.15);
  --pk-20:    rgba(255,29,117,.20);
  --pk-sh:    0 8px 28px rgba(255,29,117,.20);
  --tl:       #6DC0AA;
  --tl-10:    rgba(109,192,170,.10);
  --tl-20:    rgba(109,192,170,.20);
  --ind:      #4B509C;
  --ind-10:   rgba(75,80,156,.10);
  --ind-20:   rgba(75,80,156,.20);

  /* Backgrounds */
  --bg:       #FFFFFF;
  --bg-ice:   #F7F8FC;
  --bg-mist:  #F0F4F8;
  --bg-pale:  #FAFBFF;
  --slate:    #1A2740;

  /* Text */
  --t1:   #0A0F1C;
  --t2:   #5A6375;
  --t3:   #9CA3AF;

  /* Borders */
  --brd:  #E5E7EB;
  --brd2: #D1D5DB;

  /* Shadows */
  --sh-sm: 0 2px 12px rgba(10,15,28,.05);
  --sh-md: 0 8px 40px rgba(10,15,28,.07);
  --sh-lg: 0 20px 72px rgba(10,15,28,.10);

  /* Easing */
  --ease:  cubic-bezier(.22,1,.36,1);
  --snap:  cubic-bezier(.34,1.56,.64,1);
  --max:   1200px;
}

/* ── RESET ── */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--t1);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--pk);color:#fff }
a { text-decoration:none;color:inherit }
img,svg { display:block }

/* ── REVEAL ── */
.reveal-up {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease) var(--d,0ms),
             transform .6s var(--ease) var(--d,0ms);
}
.reveal-up.show {
  opacity:1;
  transform:translateY(0);
}

/* ── SHARED LAYOUT ── */
.wrap { max-width:var(--max);margin:0 auto;padding:0 2rem }
.sec  { padding:88px 0 }
.tag  {
  display:inline-block;
  font-size:.67rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pk);margin-bottom:.9rem;
}
.sec-title {
  font-family:'EurostileExtdBlack','Rajdhani','Poppins',sans-serif;
  font-size:clamp(28px,3.5vw,44px);font-weight:800;
  letter-spacing:-.3px;line-height:1.1;color:var(--t1);
}
.sec-lead {
  font-size:.97rem;font-weight:300;line-height:1.8;color:var(--t2);max-width:540px;
}
.divider { width:52px;height:3px;background:var(--pk);margin:1.1rem 0 2rem }
.divider-c { margin-left:auto;margin-right:auto }
.sec-head { margin-bottom:3rem }
.sec-head-c { text-align:center }
.sec-head-c .sec-lead { text-align:center }

/* ── BUTTONS ── */
.btn-pk {
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;
  font-family:'Poppins',sans-serif;
  font-size:.78rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  border-radius:50px;
  background:var(--pk);color:#fff;
  border:1.5px solid var(--pk);
  cursor:pointer;
  transition:all .32s var(--ease);
  box-shadow:var(--pk-sh);
}
.btn-pk:hover { background:#e6005f;transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,29,117,.3) }
.btn-pk svg { transition:transform .28s }
.btn-pk:hover svg { transform:translateX(3px) }

.btn-ol {
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;
  font-family:'Poppins',sans-serif;
  font-size:.78rem;font-weight:500;letter-spacing:.6px;text-transform:uppercase;
  border-radius:50px;
  background:transparent;color:var(--t2);
  border:1.5px solid var(--brd);
  cursor:pointer;
  transition:all .3s;
}
.btn-ol:hover { border-color:var(--pk);color:var(--pk);transform:translateY(-2px) }


/* ════════════════════════════════════════
   §1 HERO
════════════════════════════════════════ */
.ch {
  position:relative;
  min-height:90vh;
  background:var(--bg-pale);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ch-canvas {
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:.55;
  pointer-events:none;z-index:0;
}

.ch-scanline {
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,
    rgba(109,192,170,.012) 3px,rgba(109,192,170,.012) 4px
  );
  pointer-events:none;z-index:0;
}

.ch-topline {
  position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,var(--pk) 30%,var(--tl) 70%,transparent 100%);
  z-index:2;
}

/* Topbar */
.ch-topbar {
  position:relative;z-index:3;
  border-bottom:1px solid rgba(109,192,170,.15);
  background:rgba(250,251,255,.85);
  backdrop-filter:blur(8px);
}
.ch-topbar-inner {
  display:flex;justify-content:space-between;align-items:center;
  padding-top:.55rem;padding-bottom:.55rem;
  gap:1rem;
  flex-wrap:wrap;
}
.ch-live {
  display:flex;align-items:center;gap:.5rem;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;
  color:var(--tl);text-transform:uppercase;
}
.ch-live-dot {
  width:6px;height:6px;border-radius:50%;background:var(--tl);
  animation:blink 1.6s infinite;
}
.ch-certs {
  display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;
}
.ch-cert {
  font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:.2rem .55rem;
  border:1px solid var(--brd);border-radius:50px;
}
.ch-cert-sep {
  width:1px;height:14px;background:var(--brd);
}
.ch-clock {
  font-family:'Courier New',monospace;
  font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--t2);
}

/* Inner */
.ch-inner {
  position:relative;z-index:2;
  flex:1;display:flex;align-items:center;
  justify-content:space-between;gap:4rem;
  padding-top:60px;padding-bottom:72px;
}
.ch-content { max-width:580px;flex-shrink:0 }

/* Badge */
.ch-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem 1rem;border-radius:50px;
  background:rgba(255,29,117,.07);
  border:1px solid rgba(255,29,117,.18);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pk);
  margin-bottom:1.8rem;
  opacity:0;animation:fadeUp .6s var(--ease) .1s forwards;
}
.ch-badge-dot {
  width:6px;height:6px;border-radius:50%;background:var(--pk);
  animation:pkPulse 1.8s infinite;
}

/* Title */
.ch-title {
  font-family:'EurostileExtdBlack','Rajdhani','Poppins',sans-serif;
  display:flex;flex-direction:column;gap:.1em;
  font-size:clamp(32px,4.8vw,50px);
  font-weight:800;line-height:1.04;letter-spacing:-1px;color:var(--t1);
  margin-bottom:1.4rem;
}
.ch-clip {
  display:block;overflow:hidden;
  opacity:0;transform:translateY(100%);
  animation:clipUp .75s var(--ease) calc(var(--d,0)*1ms + .2s) forwards;
}
.ch-title-accent { color:var(--tl) }
.ch-title-light { color:var(--t2);font-size:.75em;font-weight:500;letter-spacing:-.2px }

.ch-sub {
  font-size:.98rem;font-weight:300;line-height:1.75;color:var(--t2);
  max-width:480px;margin-bottom:2rem;
  opacity:0;animation:fadeUp .7s var(--ease) .52s forwards;
}

.ch-actions {
  display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;animation:fadeUp .7s var(--ease) .64s forwards;
  margin-bottom:2.4rem;
}

/* Trust strip */
.ch-trust {
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp .7s var(--ease) .78s forwards;
  padding:1rem 1.4rem;
  background:var(--bg);
  border:1px solid var(--brd);border-radius:14px;
  box-shadow:var(--sh-sm);
}
.ch-trust-item {
  display:flex;flex-direction:column;align-items:center;
  line-height:1;
}
.ch-trust-val {
  font-family:'EurostileExtdBlack','Rajdhani',sans-serif;
  font-size:1.35rem;font-weight:800;color:var(--t1);letter-spacing:-.5px;
}
.ch-trust-unit { font-size:.62rem;font-weight:700;color:var(--pk);margin-left:1px }
.ch-trust-lbl { font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-top:.3rem }
.ch-trust-div { width:1px;height:32px;background:var(--brd) }

/* Dashboard wrap */
.ch-dash-wrap {
  flex-shrink:0;width:400px;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;animation:fadeLeft .9s var(--ease) .42s forwards;
}

/* Main dashboard */
.ch-dash {
  background:#0D1117;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;overflow:hidden;
  box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.02);
  position:relative;
}
.ch-dash::after {
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.007) 3px,rgba(255,255,255,.007) 4px);
  pointer-events:none;z-index:0;
}

.ch-dash-bar {
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ch-dash-dots { display:flex;gap:.32rem }
.ch-dash-dots span {
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.ch-dash-dots span:first-child { background:var(--pk);opacity:.55 }
.ch-dash-label {
  font-size:.52rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.ch-dash-live-pill {
  display:flex;align-items:center;gap:.28rem;
  font-size:.52rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tl);
}
.ch-dash-live-dot {
  width:5px;height:5px;border-radius:50%;background:var(--tl);
  animation:tlPulse 2s infinite;
}

.ch-dash-metrics {
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ch-dm {
  padding:.8rem .7rem;text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.ch-dm:last-child { border-right:none }
.ch-dm-n { font-size:1.2rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em }
.ch-dm-n small { font-size:.6rem;opacity:.4 }
.c-pk { color:var(--pk) }
.c-tl { color:var(--tl) }
.ch-dm-l { font-size:.48rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-top:.2rem }

.ch-dash-body { position:relative;z-index:1;padding:.9rem }
.ch-slabel { font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:.6rem }

.ch-kpis { display:flex;flex-direction:column;gap:.55rem;margin-bottom:.8rem }
.ch-kpi-head { display:flex;justify-content:space-between;margin-bottom:.24rem }
.ch-kpi-lbl { font-size:.58rem;font-weight:400;color:rgba(255,255,255,.38) }
.ch-kpi-num { font-size:.58rem;font-weight:700;color:#fff;letter-spacing:.03em }
.ch-kpi-track { height:2px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden }
.ch-kpi-bar {
  height:100%;border-radius:1px;
  background:var(--bc);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease);
}

.ch-status-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.6rem;
}
.ch-status {
  display:flex;align-items:center;gap:.45rem;
  padding:.4rem .6rem;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  border-radius:8px;
}
.ch-status-ico {
  width:18px;height:18px;flex-shrink:0;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
}
.ch-status-ico svg { width:10px;height:10px }
.ch-status.ok  .ch-status-ico { background:rgba(109,192,170,.14) }
.ch-status.ok  .ch-status-ico svg { color:var(--tl) }
.ch-status.warn .ch-status-ico { background:rgba(255,29,117,.12) }
.ch-status.warn .ch-status-ico svg { color:var(--pk) }
.ch-status p { font-size:.52rem;font-weight:500;color:rgba(255,255,255,.35);line-height:1.35 }
.ch-status p b { font-weight:700;color:rgba(255,255,255,.65) }

.ch-dash-foot {
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .9rem;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.01);
}
.ch-dash-foot span { font-size:.48rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22) }
.ch-dash-foot-ok { display:flex;align-items:center;gap:.28rem;font-size:.48rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tl) }

/* Threat mini card */
.ch-threat {
  background:var(--bg);
  border:1px solid var(--brd);
  border-radius:14px;
  padding:.9rem 1rem;
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.ch-threat-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.65rem }
.ch-threat-lbl { font-size:.55rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:.2rem }
.ch-threat-n { font-family:'EurostileExtdBlack','Rajdhani',sans-serif;font-size:1.6rem;font-weight:800;color:var(--t1);line-height:1;letter-spacing:-.02em }
.ch-threat-badge {
  display:flex;align-items:center;gap:.3rem;
  padding:.25rem .6rem;
  background:var(--pk-10);border:1px solid rgba(255,29,117,.18);
  border-radius:50px;
  font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pk);
}
.ch-sparkline { display:block;width:100%;height:44px }


/* ════════════════════════════════════════
   §2 QUÉ ES
════════════════════════════════════════ */
.cq-sec { background:var(--bg) }
.cq-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.cq-text p {
  font-size:.95rem;font-weight:300;line-height:1.85;color:var(--t2);margin-bottom:1.1rem;
}
.cq-text p strong { font-weight:600;color:var(--t1) }
.cq-quote {
  border-left:3px solid var(--pk);
  padding:.9rem 1.2rem;
  background:rgba(255,29,117,.04);
  border-radius:0 12px 12px 0;
  margin-top:1.4rem;
  font-size:.93rem;font-style:italic;font-weight:300;color:var(--t1);line-height:1.6;
}
.cq-quote strong { font-style:normal;font-weight:600 }

.cq-pills { display:flex;flex-direction:column;gap:.65rem }
.cq-pill {
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1.1rem;
  background:var(--bg);
  border:1px solid var(--brd);
  border-radius:14px;
  box-shadow:var(--sh-sm);
  transition:all .32s var(--ease);
}
.cq-pill:hover { border-color:rgba(255,29,117,.28);transform:translateX(4px);box-shadow:var(--sh-md) }
.cq-pill-ico {
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:var(--ico-bg,rgba(109,192,170,.1));
  display:flex;align-items:center;justify-content:center;
}
.cq-pill-ico svg { width:16px;height:16px;color:var(--ico-c,var(--tl)) }
.cq-pill h5 { font-size:.8rem;font-weight:600;margin-bottom:.1rem }
.cq-pill p  { font-size:.7rem;color:var(--t3);line-height:1.4 }


/* ════════════════════════════════════════
   §3 PROBLEMAS
════════════════════════════════════════ */
.cp-sec {
  background:var(--bg-ice);
  position:relative;overflow:hidden;
}

/* Decorative rings */
.cp-rings {
  position:absolute;top:-120px;right:-120px;
  pointer-events:none;z-index:0;
}
.cp-rings div {
  position:absolute;border-radius:50%;
  border:1px solid rgba(109,192,170,.12);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.cp-rings div:nth-child(1) { width:300px;height:300px }
.cp-rings div:nth-child(2) { width:480px;height:480px;border-color:rgba(75,80,156,.08) }
.cp-rings div:nth-child(3) { width:660px;height:660px;border-color:rgba(255,29,117,.05) }

.cp-grid {
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:2.5rem;
}
.cp-card {
  background:var(--bg);
  padding:28px 24px;
  border:1px solid var(--brd);
  border-radius:18px;
  transition:all .4s var(--ease);
}
.cp-card:hover { border-color:rgba(255,29,117,.22);box-shadow:var(--sh-md);transform:translateY(-4px) }
.cp-ico {
  width:40px;height:40px;flex-shrink:0;
  background:var(--bg-ice);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.9rem;
  transition:all .3s;
}
.cp-ico svg { width:16px;height:16px;color:var(--t2) }
.cp-card:hover .cp-ico { background:var(--pk-10) }
.cp-card:hover .cp-ico svg { color:var(--pk) }
.cp-card h4 { font-family:'EurostileExtdMedium','Poppins',sans-serif;font-size:.85rem;color:var(--t1);margin-bottom:.45rem }
.cp-card p { font-size:.8rem;color:var(--t2);line-height:1.65;font-weight:300 }


/* ════════════════════════════════════════
   §4 CAPACIDADES
════════════════════════════════════════ */
.cc-sec {
  background:var(--bg);
  position:relative;overflow:hidden;
}
.cc-mesh {
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(109,192,170,.04) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(75,80,156,.04) 0%,transparent 50%);
}
.cc-grid {
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:2.5rem;
}
.cc-card {
  background:var(--bg);
  padding:32px 26px;
  border:1px solid var(--brd);
  border-radius:18px;
  position:relative;overflow:hidden;
  transition:all .4s var(--ease);
}
.cc-card:hover { border-color:rgba(255,29,117,.25);box-shadow:0 20px 48px rgba(255,29,117,.07);transform:translateY(-6px) }

.cc-n {
  position:absolute;top:-.5rem;right:.6rem;
  font-family:'EurostileExtdBlack','Rajdhani',sans-serif;
  font-size:5.5rem;font-weight:800;
  color:var(--t1);opacity:.025;line-height:1;pointer-events:none;
  transition:opacity .3s;
}
.cc-card:hover .cc-n { opacity:.055 }

.cc-line {
  position:absolute;bottom:0;left:0;right:0;
  height:2.5px;
  background:linear-gradient(90deg,var(--pk),var(--tl));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.cc-card:hover .cc-line { transform:scaleX(1) }

.cc-ico {
  width:46px;height:46px;
  background:var(--pk-10);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
  transition:all .3s var(--ease);
}
.cc-ico svg { width:20px;height:20px;color:var(--pk) }
.cc-card:hover .cc-ico { background:var(--pk-20) }

.cc-card h3 {
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:1rem;color:var(--t1);margin-bottom:.5rem;
  transition:color .3s;
}
.cc-card:hover h3 { color:var(--pk) }
.cc-card p { font-size:.78rem;color:var(--t2);line-height:1.62;font-weight:300 }


/* ════════════════════════════════════════
   §5 INTEGRA ID
════════════════════════════════════════ */
.ci-sec {
  background:var(--bg-mist);
  position:relative;overflow:hidden;
}
.ci-canvas {
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.4;pointer-events:none;z-index:0;
}
.ci-inner { position:relative;z-index:1 }

.ci-etag { color:var(--ind) }

.ci-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5px;
  background:var(--brd);
  border:1px solid var(--brd);
  border-radius:18px;overflow:hidden;
  margin-top:2.5rem;
  box-shadow:var(--sh-md);
}
.ci-cell {
  padding:1.8rem 1.6rem;
  background:var(--bg);
  position:relative;overflow:hidden;
  transition:all .4s var(--ease);
}
.ci-cell:hover { background:var(--bg-pale) }
.ci-top-bar {
  position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--tl),var(--ind));
  transform:scaleX(0);transform-origin:left;
  transition:transform .48s var(--ease);
}
.ci-cell:hover .ci-top-bar { transform:scaleX(1) }

.ci-badge {
  display:inline-block;
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ind);background:var(--ind-10);
  border:1px solid rgba(75,80,156,.2);
  padding:.18rem .55rem;border-radius:50px;
  margin-bottom:.85rem;
}
.ci-cell h4 { font-family:'EurostileExtdMedium','Poppins',sans-serif;font-size:.95rem;color:var(--t1);margin-bottom:.4rem }
.ci-cell p { font-size:.75rem;color:var(--t2);line-height:1.65;font-weight:300 }
.ci-link {
  margin-top:.9rem;
  display:flex;align-items:center;gap:.3rem;
  font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brd2);
  transition:color .3s,gap .3s;
}
.ci-cell:hover .ci-link { color:var(--tl);gap:.5rem }

.ci-ghost {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.6rem;
  background:var(--bg-mist) !important;
}
.ci-ghost svg { color:var(--brd2);opacity:.6 }
.ci-ghost p { font-size:.68rem;color:var(--t3);line-height:1.5 }


/* ════════════════════════════════════════
   §6 NET-SURE
════════════════════════════════════════ */
.cn-sec { background:var(--bg) }
.cn-split {
  display:grid;grid-template-columns:55fr 45fr;gap:64px;align-items:center;
}
.cn-list {
  list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-top:2rem;
}
.cn-list li {
  display:flex;align-items:flex-start;gap:.75rem;
}
.cn-dot {
  width:8px;height:8px;flex-shrink:0;border-radius:50%;
  background:var(--dc,var(--tl));margin-top:.35rem;
}
.cn-list li div { display:flex;flex-direction:column;gap:.15rem }
.cn-list li strong { font-size:.82rem;font-weight:600;color:var(--t1) }
.cn-list li span { font-size:.75rem;color:var(--t2);font-weight:300 }

.cn-card {
  background:var(--bg-pale);
  border:1px solid var(--brd);
  border-radius:18px;padding:1.5rem;
  box-shadow:var(--sh-md);
}
.cn-card-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem }
.cn-card-title { font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t2) }
.cn-card-live { display:flex;align-items:center;gap:.3rem;font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tl) }
.cn-live-dot { width:5px;height:5px;border-radius:50%;background:var(--tl);animation:tlPulse 2s infinite }

.cn-bars { display:flex;flex-direction:column;gap:.85rem;margin-bottom:1rem }
.cn-bar-row {}
.cn-bar-meta { display:flex;justify-content:space-between;margin-bottom:.3rem }
.cn-bar-meta span { font-size:.7rem;font-weight:500;color:var(--t2) }
.cn-bar-meta .ok   { color:var(--tl);font-weight:600 }
.cn-bar-meta .warn { color:var(--pk);font-weight:600 }
.cn-bar-track { height:4px;background:var(--brd);border-radius:2px;overflow:hidden }
.cn-bar-fill {
  height:100%;border-radius:2px;
  background:var(--bc,var(--tl));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.cn-alert {
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem .8rem;
  background:rgba(255,29,117,.05);
  border:1px solid rgba(255,29,117,.14);
  border-radius:8px;
  font-size:.65rem;font-weight:500;color:var(--pk);
}


/* ════════════════════════════════════════
   §7 PROCESO
════════════════════════════════════════ */
.cpr-sec {
  background:var(--bg-ice);
  position:relative;overflow:hidden;
}
.cpr-topo {
  position:absolute;bottom:0;left:0;right:0;height:200px;
  pointer-events:none;z-index:0;width: 100%;
}
.topo-p {
  fill:none;
  stroke:var(--tl);
  stroke-width:1.2;
  opacity:.18;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:topoIn 2.5s var(--ease) var(--td,0s) forwards;
}

.cpr-grid {
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin-top:3rem;
}
.cpr-conn {
  position:absolute;top:32px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,var(--pk),var(--tl),var(--ind));
  opacity:.2;
}
.cpr-step {
  text-align:center;
}
.cpr-num {
  width:54px;height:54px;border-radius:50%;
  border:1.5px solid var(--brd);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.1rem;
  font-family:'EurostileExtdMedium','Poppins',sans-serif;
  font-size:.7rem;font-weight:700;color:var(--pk);
  position:relative;z-index:1;
  box-shadow:var(--sh-sm);
  transition:all .35s var(--ease);
}
.cpr-step:hover .cpr-num { background:var(--t1);color:#fff;border-color:var(--t1);transform:scale(1.08) }
.cpr-body { padding:0 .5rem }
.cpr-tag { font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tl);margin-bottom:.5rem }
.cpr-step h4 { font-family:'EurostileExtdMedium','Poppins',sans-serif;font-size:.85rem;margin-bottom:.35rem;color:var(--t1) }
.cpr-step p  { font-size:.75rem;color:var(--t2);line-height:1.55;font-weight:300 }
.cpr-tags {
  display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.85rem;
}
.cpr-tags span {
  font-size:.58rem;font-weight:600;letter-spacing:.06em;
  padding:.2rem .55rem;border-radius:50px;
  background:var(--bg);border:1px solid var(--brd);color:var(--t3);
}
.cpr-tags span.special {
  background:rgba(109,192,170,.1);border-color:rgba(109,192,170,.28);color:var(--tl);
}


/* ════════════════════════════════════════
   §8 KPIs
════════════════════════════════════════ */
.ck-sec { background:var(--bg) }
.ck-chips {
  display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;
  margin-top:2.5rem;
}
.ck-chip {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.2rem;
  background:var(--bg-pale);
  border:1px solid var(--brd);border-radius:50px;
  font-size:.78rem;font-weight:500;color:var(--t1);
  box-shadow:var(--sh-sm);
  transition:all .35s var(--ease);
}
.ck-chip:hover { border-color:var(--pk);box-shadow:0 4px 18px rgba(255,29,117,.14);transform:scale(1.03) translateY(-2px) }
.ck-dot { width:6px;height:6px;border-radius:50%;background:var(--pk);flex-shrink:0 }
.ck-v   { font-size:.72rem;font-weight:700;color:var(--pk);margin-left:.1rem }


/* ════════════════════════════════════════
   §9 DIFERENCIAL
════════════════════════════════════════ */
.cd-sec { background:var(--bg-ice) }
.cd-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.5px;
  background:var(--brd);
  border:1px solid var(--brd);
  border-radius:18px;overflow:hidden;
  margin-top:2.5rem;
  box-shadow:var(--sh-sm);
}
.cd-cell {
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.8rem;
  background:var(--bg);
  transition:all .35s var(--ease);
}
.cd-cell:hover { background:var(--bg-pale) }
.cd-chk {
  width:26px;height:26px;flex-shrink:0;border-radius:7px;
  background:rgba(109,192,170,.12);
  display:flex;align-items:center;justify-content:center;margin-top:2px;
  transition:all .3s;
}
.cd-chk svg { width:12px;height:12px;color:var(--tl) }
.cd-cell:hover .cd-chk { background:var(--tl-20) }
.cd-cell h5 { font-family:'EurostileExtdMedium','Poppins',sans-serif;font-size:.85rem;color:var(--t1);margin-bottom:.25rem }
.cd-cell p  { font-size:.75rem;color:var(--t2);line-height:1.6;font-weight:300 }


/* ════════════════════════════════════════
   §10 CTA
════════════════════════════════════════ */
.ct-sec {
  padding:100px 0 0;
  background:var(--bg-pale);
  text-align:center;
  position:relative;overflow:hidden;
}
.ct-canvas {
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.45;pointer-events:none;z-index:0;
}
.ct-line {
  position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--pk) 30%,var(--tl) 70%,transparent);
  z-index:1;
}
.ct-inner { position:relative;z-index:2;max-width:700px;margin:0 auto;padding-bottom:80px }
.ct-tag { display:block;margin-bottom:1.5rem }
.ct-title {
  font-family:'EurostileExtdBlack','Rajdhani','Poppins',sans-serif;
  font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.5px;
  line-height:1.05;color:var(--t1);
  margin-bottom:1.2rem;
  display:flex;flex-direction:column;gap:.05em;align-items:center;
}
.ct-clip {
  display:block;overflow:hidden;
  opacity:0;transform:translateY(100%);
  animation:clipUp .75s var(--ease) calc(var(--d,0)*1ms + .1s) forwards;
}
.ct-sub { font-size:.97rem;font-weight:300;color:var(--t2);line-height:1.75 }
.ct-btns { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.2rem }

/* Slate strip */
.ct-strip {
  background:var(--slate);
  padding:1.6rem 0;
  margin-top:80px;
}
.ct-strip-txt {
  font-size:.9rem;font-weight:300;color:rgba(255,255,255,.45);
  text-align:center;line-height:1.7;letter-spacing:.01em;
}
.ct-strip-txt strong { font-weight:700;color:rgba(255,255,255,.85) }


/* ════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════ */
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft { from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)} }
@keyframes clipUp   { from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)} }
@keyframes blink    { 0%,100%{opacity:1}50%{opacity:.25} }
@keyframes pkPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(255,29,117,.4)}50%{box-shadow:0 0 0 6px rgba(255,29,117,0)} }
@keyframes tlPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(109,192,170,.4)}50%{box-shadow:0 0 0 6px rgba(109,192,170,0)} }
@keyframes topoIn   { from{stroke-dashoffset:2000}to{stroke-dashoffset:0} }


/* ════════════════════════════════════════
   RESPONSIVE — 1280px (XL)
════════════════════════════════════════ */
@media(max-width:1280px){
  .ch-dash-wrap { width:360px }
  .ch-inner { gap:3rem }
}


/* ════════════════════════════════════════
   RESPONSIVE — 1100px (LG)
════════════════════════════════════════ */
@media(max-width:1100px){
  /* Hero */
  .ch { min-height:auto }
  .ch-inner {
    flex-direction:column;
    gap:2.5rem;
    align-items:flex-start;
    padding-top:48px;
    padding-bottom:56px;
  }
  .ch-content { max-width:100% }
  .ch-dash-wrap { width:100%;max-width:520px }

  /* §2 */
  .cq-grid { grid-template-columns:1fr;gap:2.5rem }

  /* §4 */
  .cc-grid { grid-template-columns:repeat(2,1fr) }

  /* §5 */
  .ci-grid { grid-template-columns:repeat(2,1fr) }

  /* §9 */
  .cd-grid { grid-template-columns:1fr }

  /* Shared */
  .sec { padding:72px 0 }
}


/* ════════════════════════════════════════
   RESPONSIVE — 900px (MD-LG)
════════════════════════════════════════ */
@media(max-width:900px){
  /* §3 */
  .cp-grid { grid-template-columns:repeat(2,1fr) }

  /* §6 */
  .cn-split { grid-template-columns:1fr;gap:2.5rem }

  /* §7 */
  .cpr-grid { grid-template-columns:repeat(2,1fr);gap:1.2rem }
  .cpr-conn { display:none }

  /* Topbar */
  .ch-certs { display:none }
  .ch-clock { display:none }
}


/* ════════════════════════════════════════
   RESPONSIVE — 768px (MD)
════════════════════════════════════════ */
@media(max-width:768px){
  /* Layout */
  .wrap { padding:0 1.25rem }
  .sec  { padding:60px 0 }

  /* §1 Hero */
  .ch-inner { padding-top:40px;padding-bottom:48px }
  .ch-title { font-size:clamp(28px,7vw,40px);letter-spacing:-.5px }
  .ch-sub   { font-size:.92rem }
  .ch-dash-wrap { max-width:100% }
  .ch-actions { gap:10px }
  .btn-pk,
  .btn-ol { padding:12px 22px;font-size:.74rem }

  /* §2 */
  .cq-pill { padding:.75rem .9rem }

  /* §3 */
  .cp-grid { grid-template-columns:1fr }
  .cp-rings { display:none }

  /* §4 */
  .cc-grid { grid-template-columns:1fr }

  /* §5 */
  .ci-grid { grid-template-columns:1fr }
  .ci-cell { padding:1.4rem 1.2rem }

  /* §6 */
  .cn-card { padding:1.2rem }

  /* §7 */
  .cpr-grid { grid-template-columns:repeat(2,1fr) }

  /* §8 */
  .ck-chip { font-size:.72rem;padding:.55rem 1rem }

  /* §9 */
  .cd-cell { padding:1.4rem }

  /* §10 CTA */
  .ct-sec { padding:72px 0 0 }
  .ct-inner { padding-bottom:60px }
  .ct-strip { margin-top:60px }

  /* Sections headers */
  .sec-title { font-size:clamp(24px,5.5vw,36px) }
  .sec-lead  { font-size:.9rem }
}


/* ════════════════════════════════════════
   RESPONSIVE — 600px (SM-MD)
════════════════════════════════════════ */
@media(max-width:600px){
  /* Hero trust strip */
  .ch-trust { gap:.75rem;padding:.85rem 1rem }
  .ch-trust-val { font-size:1.1rem }
  .ch-trust-div { height:24px }

  /* Dashboard metrics row — 2 cols */
  .ch-dash-metrics { grid-template-columns:repeat(3,1fr) }

  /* Status grid single col */
  .ch-status-grid { grid-template-columns:1fr }

  /* §7 process */
  .cpr-grid { grid-template-columns:1fr }
  .cpr-step { max-width:320px;margin:0 auto }

  /* §9 diferencial */
  .cd-cell { flex-direction:column;gap:.6rem }
  .cd-chk  { margin-top:0 }

  /* CTA buttons */
  .ct-btns { flex-direction:column;align-items:center }
  .ct-btns .btn-pk,
  .ct-btns .btn-ol { width:100%;max-width:280px;justify-content:center }

  /* Strip text */
  .ct-strip-txt { font-size:.82rem;padding:0 1rem }
}


/* ════════════════════════════════════════
   RESPONSIVE — 480px (SM)
════════════════════════════════════════ */
@media(max-width:480px){
  /* Layout */
  .wrap { padding:0 1rem }
  .sec  { padding:52px 0 }

  /* Hero */
  .ch-title { font-size:clamp(26px,8vw,36px);letter-spacing:-.3px }
  .ch-badge { font-size:.66rem;padding:1rem .85rem }
  .ch-sub   { font-size:.88rem }
  .ch-actions { flex-direction:column }
  .ch-actions .btn-pk,
  .ch-actions .btn-ol { width:100%;justify-content:center }
  .ch-trust { gap:.55rem }
  .ch-trust-div { height:20px }
  .ch-trust-val { font-size:1rem }

  /* Topbar compact */
  .ch-topbar-inner { justify-content:center }
  .ch-clock { display:none }

  /* Dashboard */
  .ch-dash-metrics { grid-template-columns:1fr 1fr 1fr }
  .ch-dm-n { font-size:1rem }

  /* Cards general */
  .cp-card,
  .cc-card { padding:22px 18px }

  /* §5 integra */
  .ci-cell { padding:1.2rem 1rem }
  .ci-cell h4 { font-size:.88rem }

  /* §6 net-sure */
  .cn-alert { font-size:.6rem }

  /* §7 process numbers */
  .cpr-num { width:46px;height:46px }

  /* §8 KPIs */
  .ck-chips { gap:.45rem }
  .ck-chip  { font-size:.7rem;padding:.5rem .85rem }

  /* Sections */
  .sec-title { font-size:clamp(22px,7vw,30px) }
  .divider   { margin:1rem 0 1.6rem }

  /* CTA */
  .ct-sec    { padding:56px 0 0 }
  .ct-inner  { padding-bottom:48px }
  .ct-strip  { margin-top:48px;padding:1.4rem 0 }
}


/* ════════════════════════════════════════
   RESPONSIVE — 360px (XS)
   Target: 360×740 — hero must not overflow
════════════════════════════════════════ */
@media(max-width:380px){
  .wrap { padding:0 .9rem }
  .sec  { padding:44px 0 }

  /* ── Hero: reduce every vertical gap ── */
  .ch { min-height:auto;overflow:visible }

  .ch-inner {
    padding-top:28px;
    padding-bottom:32px;
    gap:1.8rem;
  }

  /* Badge */
  .ch-badge {
    font-size:.6rem;
    padding:.32rem .75rem;
    margin-bottom:1.1rem;
    letter-spacing:.07em;
  }

  /* Title — fluid, never wider than viewport */
  .ch-title {
    font-size:clamp(22px,6.5vw,28px);
    letter-spacing:-.2px;
    gap:.06em;
    margin-bottom:1rem;
    word-break:break-word;
    overflow-wrap:break-word;
  }
  .ch-title-light { font-size:.7em }

  /* Subtitle */
  .ch-sub {
    font-size:.82rem;
    line-height:1.65;
    margin-bottom:1.4rem;
    max-width:100%;
  }

  /* Actions */
  .ch-actions {
    flex-direction:column;
    gap:8px;
    margin-bottom:1.6rem;
  }
  .ch-actions .btn-pk,
  .ch-actions .btn-ol {
    width:100%;
    justify-content:center;
    padding:11px 16px;
    font-size:.72rem;
  }

  /* Trust strip — single row, tighter */
  .ch-trust {
    gap:.5rem;
    padding:.7rem .9rem;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .ch-trust-item { flex:1;min-width:0 }
  .ch-trust-val  { font-size:.9rem }
  .ch-trust-lbl  { font-size:.5rem }
  .ch-trust-div  { height:18px }

  /* Dashboard — collapsed on tiny screens */
  .ch-dash-wrap  { gap:8px }
  .ch-dash-body  { padding:.7rem }
  .ch-dash-metrics { grid-template-columns:repeat(3,1fr) }
  .ch-dm         { padding:.6rem .4rem }
  .ch-dm-n       { font-size:.9rem }
  .ch-dm-l       { font-size:.44rem }

  .ch-status-grid { grid-template-columns:1fr }
  .ch-status      { padding:.35rem .5rem }
  .ch-status p    { font-size:.5rem }

  .ch-kpi-lbl,
  .ch-kpi-num     { font-size:.54rem }

  .ch-slabel      { font-size:.44rem }

  /* Threat card */
  .ch-threat      { padding:.7rem .85rem }
  .ch-threat-n    { font-size:1.3rem }
  .ch-sparkline   { height:32px }

  /* ── Rest of page ── */
  .btn-pk,
  .btn-ol { padding:10px 16px;font-size:.7rem }

  .sec-title { font-size:clamp(20px,6vw,28px) }
  .sec-lead  { font-size:.84rem }
  .divider   { margin:.9rem 0 1.4rem }

  .cq-quote  { font-size:.84rem }
  .ck-chip   { font-size:.67rem;padding:.42rem .72rem }
}