:root{--glass-panel:rgba(255,255,255,.62);--glass-elev:rgba(255,255,255,.48);--glass-border:rgba(255,255,255,.82);--glass-shadow:0 24px 70px rgba(26,36,82,.12);--glass-ease:cubic-bezier(.23,1,.32,1)}
body{background:radial-gradient(circle at 82% 8%,rgba(224,228,255,.9),transparent 28%),radial-gradient(circle at 10% 45%,rgba(233,247,255,.82),transparent 31%),var(--bg)}
.site-header{position:sticky;top:10px;z-index:20;width:min(1120px,calc(100% - 48px));height:58px;padding:0 14px;border:1px solid var(--glass-border);border-radius:18px;background:var(--glass-panel);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--glass-shadow)}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}.brand-icon{width:36px!important;height:36px;max-height:none!important;display:block}.brand-name{color:var(--navy);font-family:Arial,sans-serif;font-size:14px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}.brand-name span{font-weight:400}.header-nav{display:flex;align-items:center;gap:18px}.header-link{font-size:12px;letter-spacing:.01em}.header-link::after{bottom:-7px;height:1px}
.site-header::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.button{border:1px solid rgba(255,255,255,.4);transition:transform 160ms var(--glass-ease),box-shadow 200ms var(--glass-ease),background-color 200ms ease}
.button.primary{background:rgba(48,56,223,.84);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 32px rgba(48,56,223,.2)}
.trust-strip,.step-card,.network-section,.enterprise-section,.privacy-card{border-color:var(--glass-border);background:var(--glass-panel);-webkit-backdrop-filter:blur(30px) saturate(185%);backdrop-filter:blur(30px) saturate(185%);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),var(--glass-shadow)}
.step-card.featured{background:rgba(238,240,255,.7)}
.signal-card{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.56);-webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 42px rgba(26,36,82,.12)}
.enterprise-section,.network-section{position:relative;overflow:hidden}
.enterprise-section::before,.network-section::before{content:"";position:absolute;z-index:0;width:280px;height:280px;right:-70px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(160,170,255,.36),transparent 70%);filter:blur(12px);pointer-events:none}.enterprise-section>*,.network-section>*{position:relative;z-index:1}.enterprise-section>.enterprise-intro{position:absolute;top:234px;right:42px;z-index:2;transform:translateY(-50%)}
.hero-visual{isolation:isolate}
.hero{position:relative;display:block;min-height:0;padding:30px 0 56px}.hero-stage{position:relative}.hero-visual{width:100%;min-height:0;display:block}.hero-render-frame{width:100%;max-width:none;aspect-ratio:2.2727/1;overflow:hidden;border:0!important;border-radius:24px;background:transparent;box-shadow:0 28px 70px rgba(7,26,59,.22)}.hero-render{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}.hero-copy{position:absolute;z-index:4;top:24px;bottom:24px;left:24px;width:min(30%,360px);height:auto;min-height:0;padding:20px 22px;border:1px solid rgba(255,255,255,.82);border-radius:24px;background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 24px 55px rgba(26,36,82,.16);display:flex;flex-direction:column;justify-content:center}.hero-copy h1{font-size:clamp(30px,3vw,46px);line-height:.98}.hero-lede{margin:14px 0 20px;font-size:15px}.hero-actions .button{min-height:48px}
.hero-copy::before,.whistle-copy::before,.enterprise-intro::before,.site-footer::before{display:none!important}
.whistle-section{margin-top:72px}
.trust-strip{width:min(1080px,calc(100% - 48px));margin:0 auto;border:1px solid var(--glass-border);border-radius:22px;padding:27px 52px}.whistle-copy h3{max-width:400px;margin:18px 0 0;color:#fff;font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-.035em}.whistle-copy .button{background:rgba(255,255,255,.94);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px rgba(0,0,0,.18)}
.privacy-card{grid-template-columns:.9fr 1.1fr;align-items:stretch;gap:28px;padding:18px}.privacy-visual{min-height:280px;overflow:hidden;border-radius:18px}.privacy-visual img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}.privacy-copy{display:flex;flex-direction:column;justify-content:center;padding:22px 26px}.privacy-copy h2{max-width:520px}.privacy-copy p:not(.eyebrow){max-width:520px}.privacy-copy>a{align-self:flex-start;margin-top:20px;color:var(--blue);font-size:14px;font-weight:800}
.step-icon svg,.enterprise-icon svg{display:block;width:24px;height:24px}.enterprise-icon svg{width:21px;height:21px}
.button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 18px 38px rgba(48,56,223,.24)}.step-card:hover,.privacy-card:hover{transform:translateY(-3px);transition:transform 220ms var(--glass-ease),box-shadow 220ms var(--glass-ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 76px rgba(26,36,82,.16)}}
@media(max-width:760px){.site-header{top:8px;width:calc(100% - 32px);padding:0 12px}.brand-icon{width:32px!important;height:32px}.brand-name{font-size:13px}.trust-strip{border-radius:0}.step-card:hover,.privacy-card:hover{transform:none}.enterprise-section>.enterprise-intro{position:relative;top:auto;right:auto;transform:none}}

/* Keep content modules anchored while hovering. */
.protocol-card:hover,.step-card:hover,.privacy-card:hover{transform:none!important}
@media(max-width:760px){.hero{display:flex;flex-direction:column;gap:22px;padding:42px 0 56px}.hero-stage{display:flex;flex-direction:column;gap:22px}.hero-copy{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%;height:auto;max-height:none;min-height:0;transform:none;padding:24px;border-radius:20px;order:0}.hero-visual{order:1}.hero-copy h1{font-size:clamp(40px,11vw,58px)}.hero-render-frame{width:100%;max-width:680px;border-radius:20px}.whistle-section{margin-top:40px}.trust-strip{width:calc(100% - 32px);padding:25px 24px}.privacy-card{grid-template-columns:1fr;gap:18px}.privacy-visual{min-height:220px}.privacy-visual img{min-height:220px}.privacy-copy{padding:20px 8px 10px}}
@media(prefers-reduced-motion:reduce){.button,.step-card,.privacy-card{transition:none}.button:active{transform:none}}

/* Use one consistent rhythm between primary modules. */
.hero{padding-bottom:72px}
.trust-strip{margin-bottom:72px}
.whistle-section{margin-top:0;margin-bottom:72px}
.protocol-section{padding-top:0;padding-bottom:72px}
.enterprise-section{margin-bottom:72px}
.emergency-section{padding-bottom:72px}
.content-section.compact{padding-top:0}
#empresas,#privacidad{scroll-margin-top:88px}
@media(max-width:760px){.hero{padding-bottom:40px}.trust-strip{margin-bottom:40px}.whistle-section{margin-top:0;margin-bottom:40px}.protocol-section{padding-bottom:40px}.enterprise-section{margin-bottom:40px}.emergency-section{padding-bottom:40px}}

.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;padding-bottom:24px}
.feature-card{min-height:190px;padding:20px 22px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:rgba(255,255,255,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 14px 30px rgba(26,36,82,.08)}
.feature-visual{display:grid;place-items:center;width:50px;height:50px;margin-bottom:18px;border-radius:16px;background:var(--navy);color:#fff}
.feature-visual svg{width:30px;height:30px}
.feature-card strong{font-size:17px;line-height:1.15}
.feature-card span{font-size:14px;line-height:1.4}
.privacy-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.privacy-links a{margin-top:0!important}
.privacy-features{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.privacy-features article{padding:22px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:rgba(255,255,255,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 14px 30px rgba(26,36,82,.08)}
.privacy-feature-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;border-radius:16px;background:var(--navy);color:#fff}
.privacy-feature-icon svg{width:30px;height:30px}
.privacy-features h3{margin:0;font-size:17px;line-height:1.15}
.privacy-features p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.4}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr;gap:12px}.feature-card{min-height:0}.privacy-links{display:grid;gap:10px}.privacy-features{grid-template-columns:1fr}}

/* Blend illustration canvases into the card's existing surface. */
.protocol-card > img {
  mix-blend-mode: multiply;
  filter: brightness(1.05);
  background: transparent;
  border-bottom: 0;
}

/* Extra breathing room above and below every protocol illustration. */
.protocol-card > img,
.protocol-card > .protocol-image {
  margin-block: 12px;
}

/* One shared stage and iPhone silhouette for all three screen examples. */
.protocol-card > .protocol-image {
  display: grid;
  place-items: center;
  height: 280px;
  padding: 16px;
  background: transparent;
}
.protocol-phone {
  position: relative;
  height: 248px;
  aspect-ratio: 1 / 2.06;
  overflow: hidden;
  border-radius: 15% / 7.3%;
  background: #fff;
  box-shadow: 0 9px 16px rgb(26 36 82 / 16%);
}
.protocol-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #29313d;
  border-radius: inherit;
  pointer-events: none;
}
/* Crop each source to its device bounds, excluding its baked-in canvas.
   Percentages map those bounds to the same device silhouette. */
.protocol-phone img {
  position: absolute;
  display: block;
  max-width: none;
  width: var(--source-width);
  height: var(--source-height);
  left: var(--source-left);
  top: var(--source-top);
  object-fit: fill;
  background: transparent;
  border: 0;
}
.protocol-phone--consulta {
  --source-width: 145.638%;
  --source-height: 121.886%;
  --source-left: -25.168%;
  --source-top: -9.596%;
}
.protocol-phone--reporta {
  --source-width: 137.342%;
  --source-height: 120.667%;
  --source-left: -19.304%;
  --source-top: -8.833%;
}
.protocol-phone--comunica {
  --source-width: 133.242%;
  --source-height: 120.431%;
  --source-left: -15.797%;
  --source-top: -8.692%;
}
@media (max-width: 760px) {
  .protocol-card > .protocol-image { height: 300px; }
  .protocol-phone { height: 268px; }
}

/* Mobile landing: full-height image stage with bottom-aligned copy. */
@media (max-width: 760px) {
  .hero {
    width: calc(100% - 32px);
    display: block;
    padding: 16px 0 40px;
  }
  .hero-stage {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    min-height: calc(100vh - 90px);
    min-height: calc(100svh - 90px);
    overflow: hidden;
    border-radius: 18px;
    isolation: isolate;
  }
  .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
  }
  .hero-render-frame {
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 18px;
    box-shadow: none;
  }
  .hero-render {
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 70% center;
  }
  .hero-copy {
    flex: 0 0 auto;
    margin-top: 180px;
    padding: 64px 24px 24px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(247,248,255,0), rgba(247,248,255,.94) 28%, #f7f8ff 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .hero-copy h1 { font-size: clamp(32px, 9vw, 48px); }
  .hero-actions .button { width: 100%; }

  /* Match the privacy lock image's corner radius. */
  .enterprise-custom-image {
    width: calc(100% - 36px);
    margin-inline: 18px;
    border-radius: 18px;
  }
  .whistle-gallery figure,
  .whistle-gallery img,
  .protocol-card > img,
  .privacy-visual img { border-radius: 18px; }
}

/* Mobile menu stays hidden until toggle opens it. */
@media (max-width: 760px) {
  .site-header .header-nav { display: none; }
  .site-header .header-nav.is-open { display: flex; }

  /* Keep original overlay layout; move image further upward. */
  .hero-render-frame picture {
    display: block;
    height: 100%;
  }
  .hero-render {
    position: relative;
    height: 100%;
    transform: none;
    top: -25%;
    object-position: 70% center;
  }
}

@media (min-width: 761px) {
  .site-header {
    top: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
  }
  .hero-render-frame picture {
    height: 100%;
  }
  .hero-render {
    position: relative;
    height: 100%;
    top: auto;
    transform: none;
    object-fit: cover;
    object-position: center;
  }
}
