/* ==== Motion system ====
   Scroll-reveal is opt-in via JS (assets/js/main.js), which adds
   .reveal-pending then .reveal-in the first time an element crosses into
   view -- wrapped in prefers-reduced-motion:no-preference so a slow/failed
   script can never leave content permanently hidden for users who asked
   for reduced motion (they simply never get the pending/hidden state). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending{opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.16,.8,.3,1), transform .55s cubic-bezier(.16,.8,.3,1);}
  .reveal-pending.reveal-in{opacity:1; transform:translateY(0);}
}
/* Universal safety net: collapse every remaining transition/animation
   (mega-menu open/close, mobile drawer, hover states) to effectively
   instant for anyone who has asked the OS for reduced motion, rather than
   only handling the decorative reveal system above. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ==== Buttons & basics ==== */
a{text-decoration:none; transition:color .15s ease;}
ul, ol{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; line-height:1.16; margin:0 0 .5em; color:var(--ink);}
p{margin:0 0 1em;}
.eyebrow{font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--signal-dark); display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-tint);}
.eyebrow-onDark{color:#DFF6F7;}
.eyebrow-onDark::before{background:#5FE0E8; box-shadow:0 0 0 4px rgba(95,224,232,.25);}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:15px; padding:13px 26px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease, color .18s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:#428400; color:#fff; box-shadow:0 1px 2px rgba(66,132,0,.15);}
.btn-primary:hover{background:#026A0F; box-shadow:0 8px 20px -6px rgba(2,106,15,.4); transform:translateY(-1px);}
.btn-signal{background:#428400; color:#fff; box-shadow:0 1px 2px rgba(66,132,0,.15);}
.btn-signal:hover{background:#026A0F; box-shadow:0 8px 20px -6px rgba(2,106,15,.4); transform:translateY(-1px);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff;}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal-dark); background:var(--signal-tint); transform:translateY(-1px);}
.btn-onDark{border-color:rgba(255,255,255,.6); color:#fff; background:rgba(0,38,43,.4);}
.btn-onDark:hover{background:rgba(0,38,43,.6); border-color:#fff; transform:translateY(-1px);}
.empty-state{grid-column:1/-1; padding:32px; text-align:center; color:var(--ink-soft); border:1px dashed var(--line); border-radius:var(--radius); font-size:14px;}

/* ==== Partner trust bar (persistent, site-wide) ==== */
.partner-bar{position:relative; overflow:hidden; background:linear-gradient(135deg, #082226 0%, #0A2A2E 55%, #0D3439 100%); color:#DCE7E9;}
.partner-bar::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px; opacity:.5; pointer-events:none;}
.partner-bar-row{position:relative; display:flex; align-items:center; justify-content:center; gap:20px; padding:16px 32px;}
.partner-bar-row img{width:120px; height:auto; flex:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));}
.partner-bar-divider{width:1px; align-self:stretch; min-height:36px; background:rgba(255,255,255,.18); flex:none;}
.partner-bar-text{display:flex; flex-direction:column; gap:2px; text-align:left;}
.partner-bar-brand{font-family:var(--font-display); font-size:16.5px; font-weight:800; letter-spacing:.005em; color:#fff;}
.partner-bar-tagline{font-size:13px; font-weight:600; color:#AFD3D5; letter-spacing:.01em;}
@media (max-width:640px){
  .partner-bar-row{padding:12px 20px; gap:14px;}
  .partner-bar-row img{width:84px;}
  .partner-bar-divider{min-height:30px;}
  .partner-bar-brand{font-size:14px;}
  .partner-bar-tagline{font-size:11.5px;}
}
@media (max-width:400px){
  .partner-bar-row{gap:12px;}
  .partner-bar-row img{width:66px;}
  .partner-bar-tagline{font-size:10.5px;}
}

/* ==== Header / mega nav ==== */
.site-header{position:sticky; top:0; z-index:100; background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(240,250,250,.96) 100%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,131,143,.12); transition:box-shadow .2s ease, border-color .2s ease;}
/* The header now carries two full nav groups (SupportCR + ESET) plus the
   utility zone and CTA -- more chrome than the rest of the page's
   1240px .wrap was sized for. Chrome bars are conventionally allowed to
   use more of the viewport than the content column below them, so the
   header gets its own wider cap instead of forcing everything into 1240px. */
.site-header .wrap{max-width:1520px;}
.site-header.is-scrolled{box-shadow:0 8px 24px -4px rgba(0,95,104,.16); border-bottom-color:rgba(0,131,143,.2);}
html.has-locked-scroll{overflow:hidden;}
.nav-row{position:relative; display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px;}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink);}
.logo .mark{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden;}
.logo .mark img{width:100%; height:100%; object-fit:contain;}
.logo .sub{font-family:var(--font-body); font-size:10px; color:var(--ink-soft); font-weight:600; letter-spacing:.04em; display:block; margin-top:1px;}
.primary-nav-list{display:flex; align-items:center; gap:2px;}
.primary-nav-list > li{position:relative;}
/* .mega's containing block is its own triggering <li> (not .nav-row) so the
   panel starts with zero gap directly under whichever item is hovered --
   that geometric continuity is what lets the pointer travel from the nav
   link into the panel without the hover state dropping. Centering it under
   the item can still push it past the viewport/content edge for items near
   either end of the bar (e.g. "Plataforma" on the far left), so
   assets/js/main.js measures each panel on hover/focus and overrides
   `left` with a clamped pixel value that keeps the whole panel inside
   .nav-row's bounds -- `left:0` below is only the pre-JS/no-JS fallback. */
.nav-link{position:relative; display:flex; align-items:center; gap:5px; padding:15px 16px; font-size:14.5px; font-weight:600; border-radius:var(--radius-sm); color:var(--ink); outline-offset:-2px; transition:color .15s ease, background .15s ease;}
.nav-link:hover{color:var(--signal-dark); background:rgba(0,131,143,.06);}
.nav-link:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}
.nav-link::after{content:''; position:absolute; left:16px; right:16px; bottom:8px; height:2px; background:var(--signal); border-radius:2px; transform:scaleX(0); transition:transform .15s ease;}
.nav-link:hover::after{transform:scaleX(1);}
.is-current > .nav-link{color:var(--signal-dark);}
.is-current > .nav-link::after{transform:scaleX(1);}
.mega{position:absolute; top:100%; left:0; transform:translateY(-6px); width:780px; max-width:90vw; background:linear-gradient(165deg, rgba(255,255,255,.98) 0%, rgba(238,250,250,.98) 100%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(0,131,143,.1); border-radius:var(--radius-lg); box-shadow:0 32px 64px -20px rgba(10,42,46,.28), 0 6px 16px rgba(10,42,46,.08); padding:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;}
/* Opening is exclusive and JS-managed (assets/js/main.js): .is-open is the
   authoritative trigger. :focus-within stays as a keyboard-only safety net
   (a single focused subtree can never be ambiguous the way hover can), but
   plain :hover was removed deliberately -- with two independent <ul>s (the
   SupportCR nav and the ESET nav) sharing no CSS relationship, ambient
   hover could leave both panels visibly open at once (fast pointer travel
   between triggers, or any touch device where :hover never really
   "leaves"). That was the wall-of-overlapping-text bug; only one thing
   ever adds .is-open now, and it always removes it from every sibling
   first, so two panels open at once is no longer structurally possible. */
.has-mega:focus-within .mega, .has-mega.is-open .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .16s ease, transform .16s ease;}
/* Column count/width follow how many .mega-col groups a panel actually has
   instead of a fixed 3-up grid -- a menu with only one or two real columns
   used to render inside the same 780px/3-col frame anyway, leaving an
   empty grid cell that read as a layout bug. */
.mega:not(:has(> .mega-col:nth-child(2))){grid-template-columns:1fr; width:280px;}
.mega:has(> .mega-col:nth-child(2)):not(:has(> .mega-col:nth-child(3))){grid-template-columns:repeat(2,1fr); width:560px;}
.mega:has(> .mega-col:nth-child(4)){grid-template-columns:repeat(4,1fr); width:960px; gap:26px;}
.mega-col h5{font-family:var(--font-body); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; font-weight:700;}
.mega-col-list li a{display:block; padding:7px 8px; margin:0 -8px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600; color:var(--ink); transition:color .15s ease, background .15s ease;}
.mega-col-list li a:hover{color:var(--signal-dark); background:rgba(0,131,143,.07);}
.nav-groups{display:flex; align-items:center; min-width:0;}
.nav-divider{width:1px; height:26px; background:var(--line); margin:0 18px; flex:none;}
/* The ESET side is wrapped in its own pill container -- a visibly distinct
   "system" sitting inside the same header, not just more nav-links blended
   into SupportCR's own row. This is the direct fix for "it should not feel
   like an ESET website with random SupportCR content added to it": the eye
   should be able to tell the two apart before reading a single label. */
.eset-nav{display:flex; align-items:center; gap:8px; padding:7px 8px 7px 14px; border-radius:999px; background:rgba(0,131,143,.05); border:1px solid rgba(0,131,143,.14);}
.eset-nav .nav-link{padding-top:8px; padding-bottom:8px;}
.vendor-badge{display:inline-flex; align-items:center; font-family:var(--font-body); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:20px; line-height:1.5; flex:none;}
.vendor-badge--eset{color:#fff; background:#1B3A6B;}
.vendor-badge--supportcr{color:var(--signal-dark); background:var(--signal-tint);}
.eyebrow .vendor-badge{margin-left:2px; vertical-align:middle;}
.module--eset{border-top:3px solid #1B3A6B;}
.module--eset .vendor-badge{margin-bottom:2px;}
.nav-actions{display:flex; align-items:center; gap:16px; flex:none;}
.nav-actions .zone{display:flex;}
.nav-actions .zone a{display:block; font-size:14px; font-weight:600; padding:10px 6px; color:var(--ink-soft);}
.nav-actions .zone a:hover{color:var(--signal-dark);}
.mobile-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink);}
/* .mobile-nav must sit ABOVE .mobile-nav-backdrop in the stacking order.
   Both are direct children of <header> in DOM order (backdrop is inserted
   right after #mobile-nav via JS), but the backdrop is `position:fixed`
   with its own z-index while .mobile-nav previously had no position/z-index
   of its own -- positioned elements always paint above static ones
   regardless of DOM order, so the semi-opaque backdrop was rendering ON TOP
   of the menu, visually dimming every item and swallowing all its clicks.
   Explicit position+higher z-index here is the fix. */
.mobile-nav{position:relative; z-index:95; background:linear-gradient(180deg, #FFFFFF 0%, #F0FAFA 100%); border-top:1px solid rgba(0,131,143,.14); box-shadow:0 12px 24px -8px rgba(10,42,46,.14); padding:16px 24px 24px; max-height:calc(100vh - 64px); overflow-y:auto;}
.mobile-nav:not([hidden]){animation:mobileDrawerIn .22s ease;}
@keyframes mobileDrawerIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.mobile-nav-backdrop{position:fixed; inset:0; top:64px; background:rgba(24,28,32,.35); z-index:90; animation:mobileBackdropIn .22s ease;}
@keyframes mobileBackdropIn{from{opacity:0;} to{opacity:1;}}
@media (min-width:641px){.mobile-nav-backdrop{top:72px;}}
.mobile-nav-heading{font-family:var(--font-body); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--ink-soft); padding:18px 0 6px; border-top:2px solid var(--line);}
.mobile-nav-heading:first-child{padding-top:2px; border-top:none;}
.mobile-nav-heading--eset{color:var(--signal-dark);}
.mobile-nav-list > li.mobile-item{border-bottom:1px solid var(--line);}
.mobile-nav-list > li.mobile-item > a{display:block; padding:12px 4px; margin:0 -4px; border-radius:var(--radius-sm); font-weight:700; font-size:16px; transition:color .15s ease, background .15s ease;}
.mobile-nav-list > li.mobile-item > a:hover, .mobile-nav-list > li.mobile-item > a:active{color:var(--signal-dark); background:var(--signal-tint);}
.mobile-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.mobile-row > a{flex:1; padding:12px 0; font-weight:700; font-size:16px; transition:color .15s ease;}
.mobile-row > a:hover{color:var(--signal-dark);}
.mobile-accordion-toggle{display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:12px 4px; font:inherit; font-weight:700; font-size:16px; color:var(--ink); text-align:left; width:100%; border-radius:var(--radius-sm); transition:color .15s ease, background .15s ease;}
.mobile-accordion-toggle:hover, .mobile-accordion-toggle:focus-visible{color:var(--signal-dark); background:var(--signal-tint);}
.mobile-row .mobile-accordion-toggle{width:auto; padding:8px; color:var(--signal-dark);}
.mobile-accordion-toggle svg{transition:transform .15s ease; flex:none;}
.mobile-item.is-open > .mobile-accordion-toggle svg,
.mobile-row .mobile-accordion-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.mobile-item > .mobile-sub{max-height:0; padding-left:6px; overflow:hidden; transition:max-height .25s ease;}
.mobile-item.is-open > .mobile-sub{max-height:900px;}
.mobile-col-title{padding-left:0;}
.mobile-col-title-label{display:block; padding:10px 0 4px; font-family:var(--font-body); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
.mobile-sub li a{display:block; padding:9px 0 9px 14px; font-size:14.5px; color:var(--ink-soft);}
.mobile-sub li a:hover{color:var(--signal-dark);}
.mobile-cta{width:100%; justify-content:center; margin-top:16px;}

/* ==== Hero ==== */
.hero{position:relative; padding:76px 0 0; overflow:hidden; isolation:isolate;}
.hero-wash{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,60,66,.94) 0%, rgba(0,90,99,.90) 38%, rgba(0,110,120,.78) 58%, rgba(0,131,143,.42) 74%, rgba(244,245,244,.1) 90%, var(--paper-raised) 100%);
}
.hero-wash::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background:radial-gradient(120% 100% at 50% 100%, var(--paper-raised) 0%, var(--paper-raised) 40%, rgba(244,245,244,0) 100%);}
.hero-grid{position:relative; display:grid; grid-template-columns:1.3fr .9fr; gap:48px; align-items:start; padding-bottom:64px;}
.hero-copy{padding-top:12px;}
.hero h1{font-size:48px; color:#fff;}
.hero h1 .accent{color:#5FE0E8;}
.hero p.lead{font-size:17.5px; color:#DCE7E9; max-width:480px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.hero-trust-inline{display:flex; align-items:center; gap:10px; margin:28px 0 0; font-size:13.5px; font-weight:600; color:#CFE4E6;}
.hero-trust-inline b{font-family:var(--font-display); font-size:12.5px; font-weight:800; color:#0A2226; background:#5FE0E8; padding:3px 8px; border-radius:4px; letter-spacing:.03em;}
.hero-shortcuts{background:rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:22px; margin-top:8px;}
.hero-shortcuts h2{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#0A2226; font-weight:800; margin-bottom:10px;}
.hero-shortcut{display:flex; align-items:center; gap:12px; padding:13px 8px; border-top:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); font-size:14px; font-weight:600; transition:background .15s ease;}
.hero-shortcut:first-of-type{border-top:none;}
.hero-shortcut:hover{background:rgba(0,131,143,.07);}
.hero-shortcut .ico{width:30px; height:30px; border-radius:50%; background:var(--signal-tint); color:var(--signal-dark); display:flex; align-items:center; justify-content:center; flex:none;}
.hero-shortcut .ico svg{width:16px; height:16px;}
.hero-shortcut span:nth-child(2){flex:1;}
.hero-shortcut .arrow{color:var(--ink-soft); transition:transform .15s ease, color .15s ease;}
.hero-shortcut:hover .arrow{color:var(--signal-dark); transform:translateX(3px);}
.illus{max-width:100%; height:auto; display:block;}
.hero-illustration{position:absolute; top:-10px; right:-60px; width:460px; max-width:none; opacity:.9; pointer-events:none; z-index:-1;}
.hero-illustration .illus{width:100%; height:auto;}
@media (max-width:1080px){.hero-illustration{display:none;}}

/* ==== Split / alternating feature sections (image+text rhythm) ==== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split-copy .eyebrow{margin-bottom:14px;}
.split-copy h2{font-size:28px;}
.split-copy p{color:var(--ink-soft); font-size:15.5px;}
.split-copy ul{margin:20px 0 24px; display:flex; flex-direction:column; gap:10px;}
.split-copy ul li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink); font-weight:600;}
.split-copy ul li::before{content:'✓'; color:var(--lime); font-weight:800; flex:none; margin-top:1px;}
.split.reverse .split-visual{order:2;}
.split.reverse .split-copy{order:1;}
.visual-panel{position:relative; background:linear-gradient(155deg,#0A2A2E 0%, var(--signal-dark) 55%, var(--signal) 100%); border-radius:var(--radius-lg); padding:40px; min-height:320px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-lg);}
.visual-panel::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size:26px 26px; opacity:.12;}
.visual-panel .illus{position:relative; width:100%; max-width:340px; height:auto;}
.visual-panel--light{background:var(--paper); border:1px solid var(--line); box-shadow:none;}
.visual-panel--light .illus{color:var(--signal);}
.visual-panel--light::before{opacity:.06; background-image:radial-gradient(var(--ink) 1px, transparent 1px);}
.visual-panel--photo{background-size:cover; background-position:center; min-height:360px;}
.visual-panel--photo::before{content:none;}

/* ==== Page hero band (Plataforma and other archive/landing pages) ==== */
.page-hero{position:relative; padding:64px 0 76px; overflow:hidden; isolation:isolate; background:linear-gradient(165deg, #0A2A2E 0%, var(--signal-dark) 60%, var(--signal) 100%); color:#fff;}
.page-hero::before{content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size:28px 28px; opacity:.5;}
.page-hero .breadcrumbs ol{color:#BFD9DB;}
.page-hero .breadcrumbs a{color:#DFF6F7;}
.page-hero .eyebrow{color:#DFF6F7;}
.page-hero .eyebrow::before{background:#5FE0E8; box-shadow:0 0 0 4px rgba(95,224,232,.25);}
.page-hero h1{color:#fff; font-size:38px; max-width:720px;}
.page-hero p.lead{color:#DCE7E9; font-size:16px; max-width:600px;}
.page-hero-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:center;}
.page-hero .hero-illustration{position:static; opacity:1; width:100%; max-width:340px; margin:0 auto;}
@media (max-width:1080px){.page-hero-grid{grid-template-columns:1fr;} .page-hero .hero-illustration{display:none;}}

/* ESET page-hero variant: real supplied ESET photography instead of the
   CSS gradient, with a readability overlay so heading/lead/CTAs stay
   legible over the photo regardless of crop. */
.page-hero--eset{background:#0A2A2E;}
.page-hero--eset::before{content:none;}
.page-hero-photo{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;}
.page-hero-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,20,22,.94) 0%, rgba(6,20,22,.82) 42%, rgba(6,20,22,.45) 75%, rgba(6,20,22,.25) 100%);}
.page-hero-grid--single{grid-template-columns:1fr; max-width:760px;}
.partner-chip{display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:50px; padding:6px 18px 6px 6px; margin-top:28px; transition:background .2s ease, border-color .2s ease;}
.partner-chip:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5);}
.partner-chip img{width:96px; height:auto; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}
.partner-chip--light img{filter:none;}
.partner-chip span{font-size:13px; font-weight:600; color:#fff; line-height:1.3; max-width:230px;}
.partner-chip--light{background:var(--paper); border-color:var(--line);}
.partner-chip--light:hover{background:var(--signal-tint); border-color:var(--signal);}
.partner-chip--light span{color:var(--ink);}

/* ==== Trust strip ==== */
.trust{background:var(--paper-raised);}
.trust.wrap{display:flex; gap:0; padding:26px 32px; flex-wrap:wrap; justify-content:space-between;}
.trust-item{font-size:13.5px; color:var(--ink-soft); font-weight:600; display:flex; flex-direction:column; gap:4px; padding:0 28px; border-left:1px solid var(--line);}
.trust-item:first-child{border-left:none; padding-left:0;}
.trust--detailed .trust-item b{font-size:78px; line-height:1; color:#428400;}

/* ==== Sections ==== */
section{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:30px;}
.section-head p{color:var(--ink-soft); font-size:15.5px;}
.section-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.module-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.module{background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; min-height:160px; display:flex; flex-direction:column; gap:12px; color:var(--ink); box-shadow:0 1px 2px rgba(24,28,32,.04); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.module:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--paper-raised);}
.module .ico,.vertical-card .ico,.feature-item .ico{width:40px; height:40px; border-radius:11px; background:linear-gradient(145deg, var(--signal-tint) 0%, #CFEDEF 100%); display:flex; align-items:center; justify-content:center; color:var(--signal-dark); flex:none; box-shadow:inset 0 0 0 1px rgba(0,131,143,.12); transition:transform .2s ease;}
.module:hover .ico,.vertical-card:hover .ico{transform:scale(1.08) rotate(-3deg);}
.module .ico svg,.vertical-card .ico svg,.feature-item .ico svg{width:19px; height:19px;}
.mega-col-list .ico{display:none;}
.module h4{font-size:15.5px;}
.module p{font-size:13.5px; color:var(--ink-soft); margin:0;}

.service-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.service-row{display:grid; grid-template-columns:56px 1fr 1fr auto; align-items:center; gap:24px; padding:26px 28px; background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); transition:background .2s ease;}
.service-row:hover{background:linear-gradient(155deg, #FFFFFF 0%, #E3F3F4 100%);}
.service-row .idx{font-family:var(--font-display); font-weight:800; color:var(--signal); font-size:15px;}
.service-row .btn{padding:10px 20px; font-size:13.5px;}

.vertical-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.vertical-grid--3col{grid-template-columns:repeat(3,1fr);}
.vertical-grid--2col{grid-template-columns:repeat(2,1fr);}
.vertical-grid--6col{grid-template-columns:repeat(3,1fr);}
.vertical-card{display:block; background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; color:var(--ink); box-shadow:0 1px 2px rgba(24,28,32,.04); transition:box-shadow .15s ease, transform .15s ease;}
.vertical-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.vertical-card .num{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--signal); display:block; margin-bottom:16px;}

.resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.resource-card{display:block; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); box-shadow:0 1px 2px rgba(24,28,32,.04); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.resource-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--paper-raised);}
.ficha-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; margin-top:36px; align-items:start;}
.ficha-content h3{margin-top:1.4em; font-size:19px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}

.cta-band{position:relative; overflow:hidden; isolation:isolate; background:var(--signal); color:#fff; padding:56px 0;}
.cta-band::before{content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:24px 24px; opacity:.6;}
.cta-band .row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:#fff; font-size:26px;}
.cta-band .btn-ghost{background:#fff; color:var(--signal-dark); border-color:#fff;}

/* ==== Certifications ==== */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px;}
.cert-card{background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:0 1px 2px rgba(24,28,32,.04); transition:box-shadow .2s ease, transform .2s ease;}
.cert-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.cert-card h4{font-size:15px; margin-bottom:10px;}
.cert-card ul{display:flex; flex-direction:column; gap:6px;}
.cert-card li{font-size:13px; color:var(--ink-soft); padding-left:16px; position:relative;}
.cert-card li::before{content:'✓'; position:absolute; left:0; color:var(--lime); font-weight:800;}
.cert-row{display:flex; flex-wrap:wrap; gap:12px;}
.cert-chip{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:50px; padding:11px 22px; font-size:14px; font-weight:700; color:var(--ink); box-shadow:0 1px 2px rgba(24,28,32,.04); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.cert-chip:hover{border-color:var(--signal); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.cert-chip--eset{background:linear-gradient(155deg,#428400 0%, #026A0F 100%); color:#fff; border-color:#026A0F;}
.cert-chip--eset img{flex:none; width:30px; height:auto;}
.cert-chip--eset:hover{border-color:#7CB342; box-shadow:0 10px 22px -8px rgba(2,106,15,.5);}

/* ==== ESET partnership band (homepage) ==== */
.partnership-band{position:relative; overflow:hidden; isolation:isolate; color:#fff;}
.partnership-band-photo{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;}
.partnership-band-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,20,22,.95) 0%, rgba(6,20,22,.85) 45%, rgba(6,20,22,.55) 80%, rgba(6,20,22,.4) 100%);}
.partnership-band-grid{padding:80px 0;}
.partnership-band-grid--single{max-width:640px;}
.partnership-band h2{color:#fff; font-size:34px; max-width:620px;}
.partnership-band p{color:#DCE7E9; max-width:560px; font-size:15.5px;}
.partnership-band-badge{margin-top:28px; width:220px; height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));}
@media (max-width:640px){.partnership-band-grid{padding:56px 0;} .partnership-band-badge{width:170px;}}

/* ==== Feature band (homepage "Por qué SupportCR" preview) ==== */
.feature-band{background:linear-gradient(180deg, var(--signal-tint) 0%, var(--paper-raised) 100%);}
.feature-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px;}
.feature-item{background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:0 1px 2px rgba(24,28,32,.04); transition:box-shadow .2s ease, transform .2s ease;}
.feature-item:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.feature-item .ico{margin-bottom:14px;}
.feature-item h4{font-size:15px; margin-bottom:6px;}
.feature-item p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ==== Pagination (archive listings, e.g. Plataforma) ==== */
.pagination .nav-links{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; flex-wrap:wrap;}
.pagination .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.pagination .page-numbers{display:inline-flex; align-items:center; gap:6px; min-width:40px; height:40px; padding:0 14px; border-radius:var(--radius); border:1.5px solid var(--line); color:var(--ink); font-weight:700; font-size:14px; justify-content:center; transition:border-color .18s ease, color .18s ease, background .18s ease, transform .15s ease;}
.pagination a.page-numbers:hover{border-color:var(--signal); color:var(--signal-dark); background:var(--signal-tint); transform:translateY(-1px);}
.pagination .page-numbers.current{background:var(--signal); border-color:var(--signal); color:#fff;}
.pagination .page-numbers.dots{border:none; color:var(--ink-soft);}
.pagination .prev.page-numbers, .pagination .next.page-numbers{padding:0 16px;}

/* ==== Single ficha (module/service/industry detail) ==== */
.breadcrumbs ol{display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin-bottom:24px;}
.breadcrumbs a:hover{color:var(--signal-dark);}
.breadcrumbs li:not(:last-child)::after{content:'/'; margin-left:8px; color:var(--line);}
.benefit-list li{padding:10px 0 10px 28px; position:relative; border-bottom:1px solid var(--line);}
.benefit-list li::before{content:'✓'; position:absolute; left:0; top:10px; color:var(--lime); font-weight:800;}

.tab-visual{background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-md);}
.ficha-side-block{background:linear-gradient(155deg, #FFFFFF 0%, #EFFAFA 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; margin-top:16px;}
.ficha-side-block--eset{background:linear-gradient(165deg,#0A2A2E 0%, var(--signal-dark) 100%); padding:18px 16px; overflow:hidden; color:#fff;}
.ficha-side-block--eset .vendor-badge{margin:0 0 8px;}
.ficha-side-block--eset p{font-size:12.5px; color:#CFE4E6; margin:0;}
.ficha-side-block h4{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.tier-list, .resource-links{list-style:none; margin:0; padding:0;}
.tier-list li, .resource-links li{padding:7px 0; border-bottom:1px solid var(--line); font-size:14px;}
.tier-list li:last-child, .resource-links li:last-child{border-bottom:none;}
.tier-list a, .resource-links a{color:var(--ink); text-decoration:none; transition:color .15s ease;}
.tier-list a:hover, .resource-links a:hover{color:var(--signal-dark);}

/* ==== Forms ==== */
.lead-form{display:grid; gap:14px; max-width:480px;}
.lead-form label{font-size:13.5px; font-weight:700; display:block; margin-bottom:6px;}
.lead-form input, .lead-form textarea, .lead-form select{width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14.5px; background:#fff; transition:border-color .18s ease, box-shadow .18s ease;}
.lead-form input:hover, .lead-form textarea:hover, .lead-form select:hover{border-color:#C7D3D4;}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus{outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal); box-shadow:0 0 0 4px var(--signal-tint);}
.form-message{padding:12px 14px; border-radius:var(--radius-sm); font-size:14px; display:none;}
.form-message.is-success{display:block; background:var(--signal-tint); color:var(--signal-dark);}
.form-message.is-error{display:block; background:#FCEFDA; color:#8A5A12;}

/* ==== Footer ==== */
.site-footer{background:var(--footer-bg); color:#AEB8BD; padding:60px 0 0;}
.footer-brand .logo{color:#fff;}
.footer-brand .logo .sub{color:#8B969C;}
.footer-brand p{font-size:13.5px; color:#8B969C; max-width:260px;}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px; padding-bottom:44px; border-bottom:1px solid #333C42;}
.footer-col h5{font-family:var(--font-body); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8B969C; margin-bottom:16px; font-weight:700;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-size:13.5px; color:#C3CBCF;}
.footer-col a:hover{color:#fff;}
.footer-bottom{padding:26px 0;}
.footer-bottom p{font-size:12px; color:#6B767C; max-width:800px; line-height:1.6;}
.footer-bottom--split{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.footer-bottom--split p{margin:0;}
.footer-partner-badge{width:88px; height:auto; flex:none; opacity:.92; transition:opacity .2s ease;}
.footer-partner-badge:hover{opacity:1;}
@media (max-width:640px){.footer-bottom--split{flex-direction:column; align-items:flex-start;}}

/* ==== Prose (single posts, ficha body copy) ==== */
.entry-content h2, .ficha-content h2{font-size:24px; margin-top:1.3em;}
.entry-content h3, .ficha-content h3{font-size:19px; margin-top:1.3em;}
.entry-content a, .ficha-content a{color:var(--signal-dark); text-decoration:underline; text-decoration-color:rgba(0,95,104,.35); transition:color .15s ease, text-decoration-color .15s ease;}
.entry-content a:hover, .ficha-content a:hover{color:var(--signal); text-decoration-color:currentColor;}
.entry-content ul:not(.benefit-list), .ficha-content ul:not(.benefit-list){list-style:disc; padding-left:22px; margin-bottom:1em;}
.entry-content li{margin-bottom:.4em;}

/* Desktop nav must stay visible down to real laptop/small-desktop widths --
   only fall back to the hamburger when it genuinely can't fit. Compaction
   is tiered instead of a single breakpoint: each tier trims spacing/type
   size/secondary chrome a bit more, so the two full nav groups (SupportCR +
   ESET) plus utility zone and CTA keep fitting on one row as far down as
   1024px, matching real laptop viewports rather than just large monitors. */
@media (max-width:1023px){
  .nav-groups, .nav-actions .zone{display:none;}
  .mobile-toggle{display:block;}
  .nav-row{height:72px;}
}
/* Desktop compaction never drops nav-link font below 13.6px -- smaller than
   that reads as "impossible to identify" rather than merely compact. Space
   is reclaimed instead by trimming padding/gaps and, at the tightest tier,
   dropping the small "ESET" pill inside .eset-nav (redundant once the pill
   container + "ESET Solutions" label already say so). */
@media (min-width:1024px) and (max-width:1500px){
  .nav-link{padding:15px 10px; font-size:13.9px; white-space:nowrap;}
  .nav-groups{gap:0;}
  .nav-divider{margin:0 10px;}
  .eset-nav{gap:6px; padding-left:12px;}
  .vendor-badge{font-size:9.5px; padding:3px 7px;}
}
@media (min-width:1024px) and (max-width:1400px){
  .logo .sub{display:none;}
  .nav-link{padding:13px 9px; font-size:13.6px; gap:3px;}
  .nav-actions{gap:10px;}
  .nav-actions .zone{display:none;}
  .nav-actions .btn-primary{padding:11px 18px; font-size:13.5px;}
  .nav-divider{margin:0 6px;}
  .eset-nav{gap:4px; padding:6px 6px 6px 10px;}
  .eset-nav .vendor-badge{display:none;}
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .module-grid, .vertical-grid, .resource-grid, .feature-row, .cert-grid{grid-template-columns:repeat(2,1fr);}
  .ficha-grid, .contact-grid{grid-template-columns:1fr; gap:32px;}
  .footer-top{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:480px){
  .logo .sub{display:none;}
  .nav-row{gap:10px;}
  .nav-actions{gap:10px;}
  .nav-actions .btn-primary{padding:9px 14px; font-size:12.5px; white-space:nowrap;}
}
@media (max-width:768px){
  .hero{padding-top:56px;}
  .hero h1{font-size:36px;}
  .trust.wrap{gap:18px;}
  .trust-item{border-left:none; padding:0;}
  .service-row{grid-template-columns:1fr; gap:8px;}
}
@media (max-width:640px){
  .nav-row{height:64px;}
  .hero h1{font-size:32px;}
  .module-grid, .vertical-grid, .resource-grid, .feature-row, .cert-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  section{padding:56px 0;}
}

/* ==== ESET-style diagonal wave dividers ==== */
/* La firma visual de ESET: un corte diagonal curvo entre bloques de color,
   en vez de líneas rectas. Se aplica agregando la clase a cualquier section. */
.wave-divider{position:relative; overflow:hidden; isolation:isolate;}
.wave-divider::after{
  content:''; position:absolute; left:-5%; right:-5%; bottom:-1px; height:90px;
  background:var(--paper-raised);
  clip-path:polygon(0 100%, 0 55%, 100% 15%, 100% 100%);
  z-index:1;
}
.wave-divider--to-alt::after{background:var(--paper);}
.wave-divider--to-dark::after{background:var(--signal-dark);}
.wave-divider--to-signal::after{background:var(--signal);}

/* ==== Hero: richer, slightly animated gradient wash (ESET-like glow) ==== */
.hero-wash{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(0,187,197,.35) 0%, rgba(0,187,197,0) 45%),
    linear-gradient(180deg, rgba(0,45,51,.96) 0%, rgba(0,75,85,.92) 32%, rgba(0,113,127,.82) 55%, rgba(0,150,161,.5) 75%, rgba(244,245,244,.1) 92%, var(--paper-raised) 100%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-wash{background-size:140% 140%, 100% 100%; animation:heroGlow 14s ease-in-out infinite alternate;}
  @keyframes heroGlow{
    0%{background-position:0% 0%, 0 0;}
    100%{background-position:100% 30%, 0 0;}
  }
}

/* ==== Cards: extra lift + colored glow shadow on hover (deeper than before) ==== */
.module:hover, .vertical-card:hover, .feature-item:hover, .cert-card:hover, .resource-card:hover{
  box-shadow:var(--shadow-glow);
}

/* ==== Circuit/dot texture reused as a subtle animated shimmer on dark bands ==== */
@media (prefers-reduced-motion: no-preference){
  .hero-wash::before, .page-hero::before, .partner-bar::before, .cta-band::before{
    animation:driftDots 30s linear infinite;
  }
  @keyframes driftDots{
    from{background-position:0 0;}
    to{background-position:120px 120px;}
  }
}

/* ==== Section eyebrow: small glow dot pulse (draws the eye, very cheap) ==== */
@media (prefers-reduced-motion: no-preference){
  .eyebrow::before{animation:pulseDot 2.4s ease-in-out infinite;}
  @keyframes pulseDot{
    0%,100%{box-shadow:0 0 0 4px var(--signal-tint);}
    50%{box-shadow:0 0 0 7px rgba(0,187,197,.18);}
  }
}

/* ==== Button: subtle sheen sweep on hover ==== */
.btn-primary, .btn-signal{position:relative; overflow:hidden;}
.btn-primary::after, .btn-signal::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .5s ease;
}
.btn-primary:hover::after, .btn-signal:hover::after{left:130%;}

@media (prefers-reduced-motion: no-preference){
  .illus--integration path[stroke-dasharray]{animation:dashFlow 3s linear infinite;}
  @keyframes dashFlow{to{stroke-dashoffset:-16;}}
}

.visual-panel--flush{
	padding:0;
	overflow:hidden;
	max-width:none;
	width:100%;
	height:100%;
	border-radius:var(--radius-lg);
}
.illus--ecosystem-img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	margin:0;
	border-radius:inherit;
}

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:32px 0;}
.stat-number{font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--signal); line-height:1;}
.stat-label{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:10px 0 6px; color:var(--ink);}
.stat-desc{font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0;}
@media (max-width:640px){.stats-row{grid-template-columns:1fr; gap:24px;}}

.trust.wrap.trust--detailed{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 40px; align-items:start; padding:26px 32px;}
.trust--detailed .trust-item{gap:4px;}
.trust--detailed .trust-item span{text-transform:uppercase; letter-spacing:.03em; font-size:12.5px;}
.trust-desc{font-size:13px; font-weight:400; color:var(--ink-soft); line-height:1.5; margin:6px 0 0;}
@media (max-width:768px){.trust.wrap.trust--detailed{grid-template-columns:1fr; gap:24px;}}