/* ─────────────────────────────────────────────────────────────
   Mobile / responsive guards — tightens problem spots that
   surfaced at narrow viewports (<= 640px, then <= 480px).
   ───────────────────────────────────────────────────────────── */

/* Global overflow guard — no element should ever break the viewport */
html, body { max-width: 100%; }
img, svg, video { max-width: 100%; }

/* Nav: logo competes with burger menu under ~420px */
@media (max-width: 480px) {
  .nav-inner { height: 60px; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .logo-img { height: 22px; }
  .nav-burger { padding: 6px; }
}

/* Hero — give the title some breathing room on phones and let the
   visual panel sit comfortably below it */
@media (max-width: 880px) {
  .hero { padding-top: 100px; min-height: auto; }
  .hero-title { font-size: clamp(40px, 9vw, 64px); }
  .hero-grid { gap: 32px; padding-block: 24px clamp(20px, 5vw, 48px); }
  .hero-visual { width: 100%; }
}
@media (max-width: 640px) {
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { justify-content: center; }
  .hero-metrics { grid-template-columns: 1fr; gap: 12px; }
  .hero-metrics li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; }
  .hero-metrics strong { font-size: 26px; }
  .hero-metrics span { font-size: 12px; }
}

/* SOC Panel — stack map ABOVE side stats on phones (was: 2 cols) */
@media (max-width: 720px) {
  .panel-body { grid-template-columns: 1fr; }
  .map-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
  .panel-side { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ring-block { grid-column: 1 / -1; }
  .panel-foot { flex-wrap: wrap; font-size: 10px; gap: 8px; }
  .panel-foot .grow { display: none; }
  .src-resync { font-size: 9px; padding: 2px 7px; }
  .panel-head { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  .panel-head-right { font-size: 10px; }
  .stat-value { font-size: clamp(18px, 5vw, 22px); }
}

/* DashMock — stack kpi above chart, then events full-width */
@media (max-width: 720px) {
  .dash-row { grid-template-columns: 1fr !important; gap: 10px; }
  .dash-body { padding: 12px; gap: 12px; }
  .bars { height: 84px; }
  .ev { grid-template-columns: 60px 44px 1fr; gap: 8px; font-size: 11px; }
  .ev-who { display: none; }
}

/* Pillars 2x2 → 1 column already at 760px (ok); tighten card padding */
@media (max-width: 640px) {
  .pillar { min-height: 0; padding: 22px; }
}

/* Stats strip: 4 → 2 cols (ok) → at very narrow, single column */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; padding: 18px 0; }
  .stat-cell { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-cell:last-child { border-bottom: 0; }
}

/* Section heads with .row layout — let CTAs wrap below title */
@media (max-width: 720px) {
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .section-head.row > div { max-width: 100%; }
}

/* Service cards: featured spans 2 → 1 on mobile (ok); softer padding */
@media (max-width: 640px) {
  .service-card { padding: 22px; }
  .service-card h3 { font-size: 20px; }
  .svc-card-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .svc-card-foot .more { align-self: flex-end; }
}

/* Trust strip logos — already flex-wrap; tighten gap on mobile */
@media (max-width: 640px) {
  .trust-strip-inner { gap: 16px; }
  .trust-strip-logos { gap: 10px; }
  .trust-logo { font-size: 9px; height: 20px; padding: 3px 10px; }
}

/* Contact: form + copy stack; chips wrap */
@media (max-width: 720px) {
  .contact-methods li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .contact-methods a { font-size: 15px; }
}

/* Plataforma module-side sticky → release on mobile */
@media (max-width: 840px) {
  .module-side { position: static; flex-direction: row; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; }
  .module-side .mod-num { font-size: 22px; }
  .module-block { padding-block: clamp(36px, 6vw, 64px); }
}

/* Restrict page: shield + card padding */
@media (max-width: 480px) {
  .restrict-card { padding: 22px 18px; }
  .restrict-card h1 { font-size: 22px; }
}

/* Final CTA: stack actions */
@media (max-width: 720px) {
  .final-cta-inner { flex-direction: column; align-items: flex-start; }
  .final-cta-actions { width: 100%; flex-direction: column; }
  .final-cta-actions .btn { justify-content: center; }
}

/* Security stance panel — keep clear of the WhatsApp fab area on mobile.
   Tweaks panel sits bottom-right; sec panel moves to bottom-left so they
   don't stack on top of each other on small screens. */
@media (max-width: 720px) {
  .sec-panel { right: auto; left: 12px; bottom: 76px; }
  .sec-panel-card { right: auto; left: 0; width: min(320px, calc(100vw - 24px)); }
  .sec-panel-fab .mono { display: none; }   /* shield icon alone on phones */
  .sec-panel-fab { padding: 10px; }
}

/* Steps list cards on phones — single column, no overflow */
@media (max-width: 480px) {
  .steps-list { gap: 10px; }
  .steps-list li { padding: 18px; }
}

/* Team grid 3 → 2 → 1 (already defined). On very narrow, smaller avatar */
@media (max-width: 540px) {
  .team-avatar-icon { width: 48px; height: 48px; }
  .team-avatar-icon svg { width: 22px; height: 22px; }
}

/* Foot bottom: stack copyright + links */
@media (max-width: 540px) {
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-links { gap: 14px; flex-wrap: wrap; }
}

/* Tweaks panel adjustment (host owns most of this, but the toggle FAB
   can collide with our sec panel — host already places it bottom-right) */

/* Section pad shrinks more aggressively on small screens for density */
@media (max-width: 540px) {
  .section-pad { padding-block: clamp(48px, 12vw, 80px); }
}

/* Make the WhatsApp / hero CTA buttons easily tappable (44px target min) */
.btn { min-height: 44px; }
.chip { min-height: 36px; }

/* Mobile nav: ensure all items are reachable with finger */
@media (max-width: 960px) {
  .nav-mobile a { padding: 12px 0; font-size: 15px; }
  .nav-mobile .btn { min-height: 48px; justify-content: center; }
}

/* Avoid horizontal scroll caused by very long mono strings (CVE IDs) */
.ev-msg, .ticker-item, .panel-title { overflow-wrap: anywhere; }