:root{--cr-bg:#F5F7FA;--cr-surface:#FFFFFF;--cr-blue:#0D6EFD;--cr-navy:#0A1F33;--cr-text:#1D1F23;--cr-text-secondary:#596575;--cr-gray:#6B7280;--cr-border:#DCE4EE;--cr-blue-soft:rgba(13,110,253,.08);--cr-navy-soft:rgba(10,31,51,.05);--b:var(--cr-blue);--n:var(--cr-navy);--t:var(--cr-text);--m:var(--cr-text-secondary);--l:var(--cr-bg);--line:var(--cr-border)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--t);line-height:1.6;background:var(--cr-bg)}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.c{width:min(1160px,calc(100% - 40px));margin:auto}.hdr{position:sticky;top:0;z-index:50;background:#fffffff2;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.hr{height:78px;display:flex;align-items:center;justify-content:space-between}.brand img{width:220px}.nav{display:flex;align-items:center;gap:24px;font-size:14px;color:#425066}.menu{display:none}.btn{display:inline-flex;padding:12px 18px;border-radius:12px;font-weight:800;border:1px solid transparent}.primary{background:var(--b);color:#fff}.outline{border-color:#ffffff45;color:#fff}.hero,.ph{background:radial-gradient(circle at 78% 40%,var(--cr-blue-soft),transparent 30%),var(--cr-navy);color:#fff}.hero{padding:88px 0}.hg,.pl{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}.hero h1,.ph h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.055em;margin:24px 0 20px}.hero h1 span{color:#55A3FF}.hero p,.ph p{font-size:18px;color:#C6D2E0}.kick{display:inline-flex;border:1px solid #ffffff2a;border-radius:999px;padding:7px 12px;color:#C6D2E0;font-size:12px;font-weight:800;letter-spacing:.08em}.mark{display:grid;place-items:center}.mark img{width:min(380px,88%)}.act{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}section{padding:76px 0}.light{background:var(--l)}.eye{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--m)}.title{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;line-height:1.08;margin:10px 0 14px;color:var(--n)}.lead{color:var(--m);max-width:780px;font-size:17px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}.card{border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--cr-surface);transition:.2s}.card:hover,.realCard:hover{transform:translateY(-3px);box-shadow:0 16px 45px #0a1f331a}.card h3{margin:18px 0 8px;color:var(--n)}.card p{margin:0;color:var(--m);font-size:14px}.tag{display:inline-flex;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:800;background:#EAF2FF;color:#0C5CD4}.purple{background:#F4ECFF;color:#7A36C9}.olive{background:#F4F4E8;color:#657036}.green{background:#EAF8F2;color:#13755A}.red{background:#FDEBEC;color:#B4232B}.teal{background:#E9F8F5;color:#0B7B6A}.cyan{background:#EAF7FA;color:#176A78}.more{display:inline-flex;margin-top:18px;color:var(--b);font-size:13px;font-weight:800}.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.statement{font-size:18px;color:#4B596A}.statement strong{color:var(--n)}.num{font-size:12px;font-weight:800;color:var(--b)}.realGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.realCard{background:var(--cr-surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.2s}.realCard img{width:100%;aspect-ratio:16/9;object-fit:cover}.realCard div{padding:16px}.realCard b{display:block;color:var(--n)}.realCard span{font-size:13px;color:var(--m)}.cta{background:var(--n);color:#fff}.ctag{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}.lightEye{color:#90A5BA}.lightTitle{color:#fff}.lightLead{color:#B8C7D8}.channels{display:grid;gap:12px;margin-top:24px}.channels a{display:grid}.channels span{color:#C6D2E0;font-size:14px}.form{background:var(--cr-surface);color:var(--t);border-radius:22px;padding:26px}.tabs{display:flex;background:#F1F4F8;padding:4px;border-radius:12px;margin-bottom:18px}.tabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:9px;font-weight:800}.tabs .active{background:#fff;box-shadow:0 1px 8px #0a1f3317}.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fg label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:#536174}.fg .full{grid-column:1/-1}.fg input,.fg select,.fg textarea{border:1px solid #D6DEE8;border-radius:11px;padding:12px;font:inherit}.submit{margin-top:18px;border:0}.hp{position:absolute;left:-9999px}.footer{padding:42px 0;border-top:1px solid var(--line)}.ft{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:30px}.footer h4{margin:0 0 12px;color:var(--n)}.footer p,.footer a{font-size:13px;color:var(--m)}.links{display:grid;gap:7px}.copy{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;color:var(--m);font-size:12px}.ph{padding:74px 0 64px}.back{display:inline-flex;margin-bottom:18px;color:#C3D0DE;font-size:13px}.realShot{background:var(--cr-surface);border-radius:22px;padding:10px}.realShot img{border-radius:15px}.presentation{margin-top:30px;background:var(--cr-surface);border:1px solid var(--line);border-radius:24px;padding:14px}.presentation img{border-radius:16px}.privacy{max-width:820px}.privacy h2{color:var(--n)}
@media(max-width:900px){.nav{display:none}.nav.open{display:flex;position:absolute;top:78px;left:0;right:0;background:#fff;padding:18px 24px;flex-direction:column;align-items:flex-start}.menu{display:block}.hg,.pl,.split,.ctag{grid-template-columns:1fr}.g3,.g4,.realGrid{grid-template-columns:1fr 1fr}.ft{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.c{width:min(100% - 28px,1160px)}.brand img{width:170px}section{padding:58px 0}.hero{padding:68px 0 60px}.hero h1{font-size:42px}.g3,.g4,.realGrid,.fg{grid-template-columns:1fr}.fg .full{grid-column:auto}.act>*{width:100%}.ft{grid-template-columns:1fr}}
.productGallery{display:grid;gap:22px;margin-top:30px}
.galleryItem{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;background:var(--cr-surface);border:1px solid var(--line);border-radius:24px;padding:14px 22px 14px 14px;box-shadow:0 16px 45px var(--cr-navy-soft)}
.galleryImage{overflow:hidden;border-radius:18px;background:#eef2f6}
.galleryImage img{width:100%;height:auto;display:block}
.galleryCopy h3{margin:0 0 8px;color:var(--n);font-size:22px}
.galleryCopy p{margin:0;color:var(--m)}
@media(max-width:900px){.galleryItem{grid-template-columns:1fr;padding:12px}.galleryCopy{padding:4px 6px 10px}}

.productsAction{overflow:hidden}
.showcaseGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:36px}
.showcaseCard{grid-column:span 6;background:var(--cr-surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:.22s;box-shadow:0 12px 32px var(--cr-navy-soft)}
.showcaseCard:hover{transform:translateY(-4px);box-shadow:0 20px 55px #0a1f3316}
.showcaseMedia{background:linear-gradient(180deg,#eef3f8,#e8eef5);padding:16px}
.showcaseMedia img{width:100%;height:300px;object-fit:cover;object-position:top center;border-radius:17px;box-shadow:0 8px 24px #0a1f3314}
.showcaseCopy{padding:22px}
.showcaseCopy h3{margin:14px 0 7px;color:var(--n);font-size:24px;letter-spacing:-.025em}
.showcaseCopy p{margin:0;color:var(--m);font-size:14px}
.showcaseMeta{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px}
.showcaseMeta span{color:#66758a}
.showcaseMeta b{color:var(--b);white-space:nowrap}
@media(min-width:1000px){
  .showcaseCard:nth-child(1),.showcaseCard:nth-child(4){grid-column:span 7}
  .showcaseCard:nth-child(2),.showcaseCard:nth-child(3){grid-column:span 5}
  .showcaseCard:nth-child(5),.showcaseCard:nth-child(6){grid-column:span 6}
  .showcaseCard:nth-child(1) .showcaseMedia img,.showcaseCard:nth-child(4) .showcaseMedia img{height:340px}
}
@media(max-width:900px){.showcaseCard{grid-column:span 12!important}.showcaseMedia img{height:270px}}
@media(max-width:620px){.showcaseGrid{gap:16px}.showcaseMedia{padding:10px}.showcaseMedia img{height:220px}.showcaseCopy{padding:18px}.showcaseMeta{align-items:flex-start;flex-direction:column;gap:8px}}

/* Ajuste específico da Home para o CR Accesso.net: evitar aspecto achatado */
.showcaseCard.tallAccesso .showcaseMedia{padding:16px}
.showcaseCard.tallAccesso .showcaseMedia img{
  height:340px;
  object-fit:cover;
  object-position:center top;
  background:transparent;
}
@media(max-width:900px){
  .showcaseCard.tallAccesso .showcaseMedia img{height:300px}
}
@media(max-width:620px){
  .showcaseCard.tallAccesso .showcaseMedia img{
    height:220px;
    max-height:none;
    object-fit:cover;
  }
}

/* =========================================================
   Revisão responsiva — Home e páginas públicas
   Foco: celular primeiro, sem alterar a identidade desktop.
   ========================================================= */

@media(max-width:900px){
  .hdr{position:sticky}
  .hr{height:72px}
  .brand img{width:185px}
  .menu{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--n);
    font-size:20px;
  }
  .nav.open{
    top:72px;
    padding:18px 20px 22px;
    gap:8px;
    box-shadow:0 18px 42px #0a1f3315;
  }
  .nav.open a{
    width:100%;
    padding:11px 4px;
    border-bottom:1px solid #eef2f6;
  }
  .nav.open .btn{
    margin-top:8px;
    padding:12px 16px;
    border-bottom:0;
    text-align:center;
  }

  .hero{padding:64px 0 52px}
  .hero .hg{gap:30px}
  .hero h1,.ph h1{
    max-width:760px;
    letter-spacing:-.045em;
  }
  .hero p,.ph p{font-size:17px}
  .mark img{width:min(270px,70vw)}

  .ph{padding:58px 0 52px}
  .pl{gap:34px}
  .realShot{max-width:760px;margin:auto}

  .split{gap:28px}
  .ctag{gap:32px}
  .form{padding:22px}
  .ft{gap:26px}

  .galleryItem{
    padding:12px;
    border-radius:20px;
  }
  .galleryCopy{padding:6px 8px 10px}

  .showcaseGrid{gap:18px}
  .showcaseCard{border-radius:20px}
  .showcaseMedia{padding:12px}
  .showcaseCopy{padding:20px}
}

@media(max-width:620px){
  body{font-size:15px}
  .c{width:min(100% - 28px,1160px)}
  .hr{height:66px}
  .brand img{width:158px}
  .menu{width:40px;height:40px}
  .nav.open{top:66px}

  section{padding:50px 0}
  .hero{padding:52px 0 44px}
  .hero .hg{gap:24px}
  .hero h1{
    font-size:clamp(37px,11vw,48px);
    line-height:1.03;
    margin:18px 0 16px;
  }
  .ph h1{
    font-size:clamp(35px,10vw,46px);
    line-height:1.04;
    margin:18px 0 16px;
  }
  .hero p,.ph p{
    font-size:16px;
    line-height:1.65;
  }
  .kick{
    font-size:10px;
    line-height:1.35;
    padding:7px 10px;
  }
  .mark{
    order:-1;
    justify-content:start;
  }
  .mark img{width:104px}

  .act{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:24px;
  }
  .act>*{
    width:100%;
    text-align:center;
  }

  .title{
    font-size:clamp(29px,9vw,38px);
    line-height:1.08;
  }
  .lead{font-size:15.5px}

  .g3,.g4,.realGrid,.fg,.showcaseGrid{
    grid-template-columns:1fr;
  }
  .card{
    border-radius:18px;
    padding:20px;
  }
  .card h3{font-size:20px}

  .showcaseCard{grid-column:auto!important}
  .showcaseMedia{padding:10px}
  .showcaseMedia img{
    height:auto;
    max-height:none;
    object-fit:contain;
    background:#fff;
  }
  .showcaseCard.tallAccesso .showcaseMedia img{
    height:auto;
    max-height:520px;
    object-fit:contain;
  }
  .showcaseCopy{padding:17px}
  .showcaseCopy h3{font-size:22px}
  .showcaseMeta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .realShot{
    padding:8px;
    border-radius:18px;
  }
  .realShot img{border-radius:12px}
  .presentation{
    padding:8px;
    border-radius:18px;
  }
  .presentation img{border-radius:12px}

  .productGallery{gap:16px}
  .galleryItem{
    grid-template-columns:1fr;
    gap:12px;
    padding:10px;
    border-radius:18px;
  }
  .galleryImage{border-radius:14px}
  .galleryCopy h3{font-size:20px}

  .split{
    grid-template-columns:1fr;
    gap:20px;
  }
  .statement{font-size:16px}

  .ctag{
    grid-template-columns:1fr;
    gap:26px;
  }
  .channels{gap:10px}
  .form{
    border-radius:18px;
    padding:18px;
  }
  .tabs{margin-bottom:16px}
  .fg{gap:12px}
  .fg label{font-size:11px}
  .fg input,.fg select,.fg textarea{
    font-size:16px; /* evita zoom automático em iPhone */
  }
  .submit{width:100%}

  .ft{
    grid-template-columns:1fr;
    gap:24px;
  }
  .footer{padding:34px 0}
  .copy{margin-top:22px}
}

@media(max-width:390px){
  .brand img{width:145px}
  .hero h1{font-size:36px}
  .ph h1{font-size:34px}
  .title{font-size:30px}
  .showcaseCopy h3{font-size:20px}
}

.formStatus{margin:0 0 16px;padding:12px 14px;border-radius:11px;font-size:13px;font-weight:700}
.formStatus.ok{background:#ECFDF3;color:#166534;border:1px solid #BBF7D0}
.formStatus.erro{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}

/* CR Brand 1.1 — convite institucional */
.solutionInvite{background:var(--cr-bg);padding-top:0}
.inviteCard{position:relative;overflow:hidden;background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:26px;padding:34px 38px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:0 14px 36px var(--cr-navy-soft)}
.inviteCard:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-95px;top:-110px;background:var(--cr-blue-soft);pointer-events:none}
.inviteCard .title{margin-bottom:0;max-width:760px}
.inviteCard .btn{position:relative;z-index:1;white-space:nowrap}
@media(max-width:760px){.inviteCard{grid-template-columns:1fr;padding:26px 22px}.inviteCard .btn{width:100%;justify-content:center}}


/* CR Sistemas v1.5.2 — Nossa Equipe + Instagram */
.companyIntro{margin-bottom:56px}
.teamBlock{padding-top:4px}
.teamHeading{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:end;margin-bottom:28px}
.teamHeading .lead{margin:0}
.teamGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.teamCard{background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:22px;overflow:hidden;box-shadow:0 12px 34px var(--cr-navy-soft)}
.teamPhoto{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center center;background:#E9EEF4}
.teamCopy{padding:20px 20px 22px}
.teamCopy h3{margin:0;color:var(--cr-navy);font-size:22px;letter-spacing:-.025em}
.teamRole{margin:4px 0 14px;color:var(--cr-blue);font-size:13px;font-weight:800}
.teamCard details{border-top:1px solid var(--cr-border);padding-top:12px}
.teamCard summary{cursor:pointer;color:var(--cr-navy);font-size:13px;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.teamCard summary::-webkit-details-marker{display:none}
.teamCard summary:after{content:"+";display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--cr-blue-soft);color:var(--cr-blue);font-size:18px;font-weight:700;transition:.2s}
.teamCard details[open] summary:after{content:"−"}
.teamCard summary:focus-visible{outline:3px solid rgba(13,110,253,.25);outline-offset:4px;border-radius:6px}
.teamBio{padding-top:10px;color:var(--cr-text-secondary);font-size:14px}
.teamBio p{margin:0 0 10px}
.instagramChannel{display:flex!important;align-items:center;gap:11px}
.instagramChannel>.socialIcon{flex:0 0 22px}
.instagramChannel>span{display:grid}
.instagramChannel>span>span{color:#C6D2E0;font-size:14px}
.socialIcon{width:20px;height:20px;display:inline-block;vertical-align:middle}
.footerSocial{display:inline-flex!important;align-items:center;gap:8px}
.footerSocial .socialIcon{width:16px;height:16px;flex:0 0 16px}
@media(max-width:900px){
  .teamHeading{grid-template-columns:1fr;gap:8px}
  .teamGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .companyIntro{margin-bottom:42px}
  .teamGrid{grid-template-columns:1fr;gap:16px}
  .teamCard{border-radius:18px}
  .teamCopy{padding:18px}
}


/* =========================================================
   CR Sistemas v1.5.2.1 — Correção robusta Nossa Equipe
   ========================================================= */
#empresa .teamBlock{
  margin-top:56px;
}
#empresa .teamHeading{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px;
  align-items:end;
  margin-bottom:24px;
}
#empresa .teamHeading .lead{
  margin:0;
}
#empresa .teamGrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:start !important;
  width:100% !important;
}
#empresa .teamCard{
  min-width:0 !important;
  width:100% !important;
  background:var(--cr-surface) !important;
  border:1px solid var(--cr-border) !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
#empresa .teamPhoto{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
  object-fit:cover !important;
  object-position:center center !important;
}
#empresa .teamCopy{
  padding:20px 20px 22px !important;
}
#empresa .teamCopy h3{
  margin:0 !important;
  font-size:22px !important;
}
#empresa .teamRole{
  margin:4px 0 14px !important;
}
@media (max-width:900px){
  #empresa .teamHeading{
    grid-template-columns:1fr;
    gap:10px;
  }
  #empresa .teamGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:620px){
  #empresa .teamBlock{
    margin-top:42px;
  }
  #empresa .teamGrid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}


/* =========================================================
   CR Sistemas v1.5.3 — Seção Comercial Panorâmica
   ========================================================= */
.commercialPanorama{padding:64px 0;background:var(--cr-bg)}
.commercialFrame{position:relative;overflow:hidden;border:1px solid var(--cr-border);border-radius:28px;background:#EAF2FB;box-shadow:0 18px 52px rgba(10,31,51,.08);min-height:560px;isolation:isolate}
.commercialPicture{position:absolute;inset:0;display:block;z-index:0}
.commercialPicture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.commercialContent{position:relative;z-index:2;width:min(52%,600px);padding:clamp(38px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start}
.commercialEye{color:#536B84}
.commercialContent h2{margin:9px 0 14px;color:var(--cr-navy);font-size:clamp(34px,4.1vw,54px);line-height:1.03;letter-spacing:-.048em;max-width:12.5em}
.commercialLead{margin:0;color:var(--cr-text-secondary);font-size:16px;line-height:1.65;max-width:34em}
.commercialBenefits{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:#34475B;font-size:15px;max-width:34em}
.commercialBenefits li{position:relative;padding-left:27px}
.commercialBenefits li:before{content:"✓";position:absolute;left:0;top:-1px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--cr-blue-soft);color:var(--cr-blue);font-size:12px;font-weight:900}
.commercialActions{display:flex;gap:11px;flex-wrap:wrap;margin-top:25px}
.commercialWhatsApp{gap:9px}
.commercialWhatsApp svg{width:18px;height:18px;flex:0 0 auto}
.commercialSecondary{background:#fff;color:var(--cr-navy);border-color:#CBD8E6;box-shadow:0 4px 12px rgba(10,31,51,.04)}
.commercialSecondary:hover{border-color:#9DB9DB;color:var(--cr-blue)}
.commercialSafety{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;margin-top:20px;padding:13px 14px;border:1px solid rgba(13,110,253,.16);border-radius:13px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px);color:#42566B;max-width:39em}
.commercialSafety svg{width:20px;height:20px;color:var(--cr-blue);margin-top:1px}
.commercialSafety p{margin:0;font-size:12.5px;line-height:1.5}
.commercialSafety strong{color:var(--cr-navy)}
.commercialPanorama a:focus-visible{outline:3px solid rgba(13,110,253,.35);outline-offset:3px}
@media(max-width:980px){
  .commercialFrame{min-height:520px}
  .commercialContent{width:min(56%,540px);padding:38px}
  .commercialContent h2{font-size:clamp(30px,4vw,44px)}
  .commercialLead,.commercialBenefits{font-size:14px}
}
@media(max-width:760px){
  .commercialPanorama{padding:50px 0}
  .commercialFrame{min-height:590px}
  .commercialContent{width:61%;padding:28px}
  .commercialContent h2{font-size:31px}
  .commercialActions{display:grid;width:100%}
  .commercialActions .btn{width:100%}
  .commercialSafety{background:rgba(255,255,255,.82)}
}
@media(max-width:620px){
  .commercialPanorama{padding:44px 0}
  .commercialFrame{min-height:0;aspect-ratio:9/16;border-radius:22px}
  .commercialPicture img{object-position:center center}
  .commercialContent{position:absolute;inset:0 auto auto 0;width:100%;padding:24px 20px 0}
  .commercialContent h2{font-size:clamp(27px,8vw,36px);max-width:12.3em;margin-top:7px}
  .commercialLead{font-size:14px;line-height:1.5;max-width:32em}
  .commercialBenefits{margin-top:14px;gap:7px;font-size:13px;line-height:1.38;max-width:32em}
  .commercialBenefits li{padding-left:23px}
  .commercialBenefits li:before{width:17px;height:17px;font-size:10px}
  .commercialActions{margin-top:16px;gap:8px;max-width:100%}
  .commercialActions .btn{padding:11px 14px;font-size:13px}
  .commercialSafety{margin-top:11px;padding:10px 11px;gap:8px;background:rgba(255,255,255,.9);max-width:100%}
  .commercialSafety p{font-size:10.5px;line-height:1.35}
  .commercialSafety svg{width:17px;height:17px}
}
@media(max-width:390px){
  .commercialContent{padding:20px 16px 0}
  .commercialContent h2{font-size:26px}
  .commercialLead{font-size:12.5px}
  .commercialBenefits{font-size:11.6px}
  .commercialActions .btn{font-size:12px;padding:10px 12px}
  .commercialSafety p{font-size:9.6px}
}


/* =========================================================
   CR Sistemas v1.5.4 — Hero | Marca em movimento
   Movimento sutil, institucional e acessível
   ========================================================= */

.hero .mark{
  position:relative;
  isolation:isolate;
  min-height:360px;
  display:grid;
  place-items:center;
  overflow:visible;
}

.hero .mark::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:min(440px,92%);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(85,163,255,.16) 0%,
      rgba(13,110,253,.08) 34%,
      rgba(13,110,253,0) 70%);
  transform:scale(.78);
  opacity:0;
  animation:crMarkHaloIn 1.15s cubic-bezier(.2,.8,.2,1) .18s forwards,
            crMarkHaloPulse 6.8s ease-in-out 1.5s infinite;
}

.hero .mark::after{
  content:"";
  position:absolute;
  z-index:2;
  width:52%;
  height:130%;
  top:-15%;
  left:-46%;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 22%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.17) 50%,
    rgba(255,255,255,0) 62%,
    transparent 78%
  );
  transform:skewX(-12deg);
  opacity:0;
  animation:crMarkShine 7.5s ease-in-out 2.2s infinite;
}

.hero .mark img{
  position:relative;
  z-index:1;
  width:min(380px,88%);
  height:auto;
  opacity:0;
  transform:translateY(18px) scale(.965);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.14));
  transform-origin:center;
  will-change:transform,opacity;
  animation:crMarkReveal .95s cubic-bezier(.2,.8,.2,1) .08s forwards,
            crMarkFloat 5.8s ease-in-out 1.15s infinite;
}

@keyframes crMarkReveal{
  0%{opacity:0;transform:translateY(18px) scale(.965)}
  72%{opacity:1;transform:translateY(-2px) scale(1.005)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes crMarkFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(.35deg)}
}

@keyframes crMarkHaloIn{
  from{opacity:0;transform:scale(.78)}
  to{opacity:1;transform:scale(1)}
}

@keyframes crMarkHaloPulse{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.035)}
}

@keyframes crMarkShine{
  0%,70%{left:-46%;opacity:0}
  74%{opacity:.28}
  84%{left:94%;opacity:.18}
  88%,100%{left:94%;opacity:0}
}

/* Hover somente em dispositivos com mouse: microparallax sem exagero */
@media (hover:hover) and (pointer:fine){
  .hero .mark{
    transition:transform .35s ease;
  }
  .hero .mark:hover{
    transform:translateY(-2px);
  }
}

/* Tablet */
@media(max-width:900px){
  .hero .mark{
    min-height:300px;
  }
  .hero .mark::before{
    width:min(390px,86%);
  }
}

/* Celular: mantém movimento, mas ainda mais discreto */
@media(max-width:620px){
  .hero .mark{
    min-height:245px;
    margin-top:12px;
  }
  .hero .mark img{
    width:min(260px,76%);
    animation:crMarkReveal .9s cubic-bezier(.2,.8,.2,1) .08s forwards,
              crMarkFloatMobile 6.4s ease-in-out 1.15s infinite;
  }
  .hero .mark::before{
    width:min(300px,82%);
  }
  .hero .mark::after{
    animation-duration:9s;
  }
}

@keyframes crMarkFloatMobile{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* Acessibilidade: sem movimento quando o usuário solicitar redução */
@media (prefers-reduced-motion: reduce){
  .hero .mark,
  .hero .mark::before,
  .hero .mark::after,
  .hero .mark img{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .hero .mark img{opacity:1 !important}
  .hero .mark::before{opacity:.72 !important}
  .hero .mark::after{display:none !important}
}


/* =========================================================
   CR Sistemas v1.5.4.1 — Hero | Corrente de energia contínua
   Inspirada no movimento orbital já usado no ecossistema CR
   ========================================================= */

/* Desativa o shine anterior e substitui pela órbita energética */
.hero .mark::after{
  content:"";
  position:absolute;
  z-index:0;
  width:min(470px,94%);
  aspect-ratio:1;
  top:50%;
  left:50%;
  height:auto;
  pointer-events:none;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 32deg,
      rgba(85,163,255,0) 32deg 55deg,
      rgba(85,163,255,.14) 58deg,
      rgba(85,163,255,.88) 72deg,
      rgba(255,255,255,.96) 78deg,
      rgba(85,163,255,.72) 84deg,
      rgba(85,163,255,.12) 98deg,
      transparent 118deg 360deg
    );
  -webkit-mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2.2px)
  );
  mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2.2px)
  );
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:.86;
  animation:crEnergyOrbit 7.8s linear infinite;
}

/* Segunda trilha muito discreta cria sensação de circuito/corrente */
.hero .mark{
  --cr-orbit-size:min(410px,82%);
}
.hero .mark > img{
  z-index:2;
}
.hero .mark .cr-energy-inner{
  position:absolute;
  z-index:1;
  width:var(--cr-orbit-size);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(85,163,255,.14);
  box-shadow:
    0 0 28px rgba(13,110,253,.08),
    inset 0 0 24px rgba(13,110,253,.04);
}
.hero .mark .cr-energy-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    conic-gradient(
      from 210deg,
      transparent 0deg 88deg,
      rgba(85,163,255,.04) 92deg,
      rgba(85,163,255,.45) 108deg,
      rgba(255,255,255,.82) 114deg,
      rgba(85,163,255,.34) 120deg,
      transparent 138deg 360deg
    );
  -webkit-mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.2px)
  );
  mask:radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.2px)
  );
  animation:crEnergyOrbitReverse 11s linear infinite;
}

@keyframes crEnergyOrbit{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes crEnergyOrbitReverse{
  to{transform:rotate(-360deg)}
}

/* Pequenos pontos luminosos que reforçam a sensação de energia percorrendo */
.hero .mark .cr-energy-node{
  position:absolute;
  z-index:3;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8CC3FF;
  box-shadow:
    0 0 8px rgba(140,195,255,.9),
    0 0 18px rgba(13,110,253,.62);
  transform-origin:0 0;
  pointer-events:none;
}
.hero .mark .cr-energy-node.n1{
  animation:crEnergyNode1 7.8s linear infinite;
}
.hero .mark .cr-energy-node.n2{
  width:5px;height:5px;opacity:.72;
  animation:crEnergyNode2 11s linear infinite;
}

@keyframes crEnergyNode1{
  0%{transform:rotate(0deg) translateX(232px)}
  100%{transform:rotate(360deg) translateX(232px)}
}
@keyframes crEnergyNode2{
  0%{transform:rotate(180deg) translateX(205px)}
  100%{transform:rotate(-180deg) translateX(205px)}
}

@media(max-width:900px){
  .hero .mark::after{width:min(410px,88%)}
  .hero .mark{--cr-orbit-size:min(360px,78%)}
  @keyframes crEnergyNode1{
    0%{transform:rotate(0deg) translateX(202px)}
    100%{transform:rotate(360deg) translateX(202px)}
  }
  @keyframes crEnergyNode2{
    0%{transform:rotate(180deg) translateX(178px)}
    100%{transform:rotate(-180deg) translateX(178px)}
  }
}

@media(max-width:620px){
  .hero .mark::after{
    width:min(300px,84%);
    opacity:.7;
    animation-duration:9.5s;
  }
  .hero .mark{--cr-orbit-size:min(270px,72%)}
  .hero .mark .cr-energy-node{width:5px;height:5px}
  .hero .mark .cr-energy-node.n2{width:4px;height:4px}
  @keyframes crEnergyNode1{
    0%{transform:rotate(0deg) translateX(148px)}
    100%{transform:rotate(360deg) translateX(148px)}
  }
  @keyframes crEnergyNode2{
    0%{transform:rotate(180deg) translateX(132px)}
    100%{transform:rotate(-180deg) translateX(132px)}
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .mark::after,
  .hero .mark .cr-energy-inner::before,
  .hero .mark .cr-energy-node{
    animation:none !important;
  }
  .hero .mark .cr-energy-node{
    display:none !important;
  }
}