@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../fonts/NHaasGroteskDSPro-95Blk.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../fonts/NHaasGroteskDSPro-65Md.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../fonts/NHaasGroteskDSPro-45Lt.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 900;
}

.lead,
.eyebrow,
.section-head p,
.card h3,
.feature-item strong,
.reason strong,
.footer-title {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 500;
}

p,
span,
a,
li,
button,
input,
select,
textarea {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 300;
}

/* Fontes locais: usar os arquivos licenciados da pasta /fonts original. */
:root {
         --navy:#071c35;
         --navy-2:#0c2b50;
         --blue:#1233B3;
         --cyan:#1eb6d9;
         --red:#e9344c;
         --rose:#ff5e72;
         --ink:#132238;
         --muted:#617086;
         --line:#dfe7f0;
         --soft:#f4f8fc;
         --white:#fff;
         --rp: #25237B;
         --whatsapp: #25D366 ;
         --success:#18a66b;
         --shadow:0 20px 60px rgba(7,28,53,.12);
         --radius:24px;
         --container:1180px;
         --dark-site:#06172c;

}

    * {
  box-sizing:border-box
}

    html {
  scroll-behavior:smooth;
  scroll-padding-top: 140px;
}

    body {
  margin:0;
  font-family:"Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--white);
  line-height:1.55
}


/* ========================================
   HIERARQUIA GLOBAL DE TIPOGRAFIA
======================================== */

/* Títulos — Neue Haas Grotesk Display Pro 95 Black */
h1,
h2,
h3,
h4,
h5,
h6,
.footer-title,
.stat strong,
.metric strong,
.device-screen b {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 900;
}

/* Subtítulos — Neue Haas Grotesk Display Pro 65 Medium */
.eyebrow,
.lead,
.section-head p,
.nav-links,
.btn,
.hero-proof,
.card-link,
.feature-item strong,
.reason strong,
.segment h3,
.step h3,
.faq button,
.badge,
.float-tag,
.footer-links,
.topbar {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 500;
}

/* Corpo — Neue Haas Grotesk Display Pro 45 Light */
body,
p,
a,
span,
small,
li,
label,
input,
select,
textarea,
button {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-weight: 300;
}

/* Mantém pesos de destaque onde necessário */
strong,
b {
  font-weight: 500;
}


    a {
  color:inherit;
  text-decoration:none
}

    button,input,select,textarea {
  font:inherit
}

    img,svg {
  max-width:100%;
  display:block
}

    .container {
  width:min(calc(100% - 40px),var(--container));
  margin-inline:auto
}

    .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--blue)
}

    .eyebrow:before {
  content:"";
  width:28px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--rp),var(--cyan))
}

    h1,h2,h3,p {
  margin-top:0
}

    h1 {
  font-size:clamp(2.55rem,6vw,5rem);
  line-height:1.02;
  letter-spacing:-.055em;
  margin-bottom:24px
}

    h2 {
  font-size:clamp(2rem,4.4vw,3.35rem);
  line-height:1.08;
  letter-spacing:-.04em;
  margin-bottom:18px
}

    h3 {
  font-size:1.25rem;
  line-height:1.25;
  margin-bottom:10px
}

    .lead {
  font-size:clamp(1.05rem,1.8vw,1.25rem);
  color:var(--muted);
  max-width:1050px
}

    .section {
  padding:20px 0
}

    .section-soft {
  background:var(--soft)
}

    .section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px
}

    .section-head p {
  max-width:560px;
  color:var(--muted);
  margin-bottom:0
}

    .topbar {
  background:var(--navy);
  color:#d9e6f4;
  font-size:.86rem
}

    .topbar .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:38px;
  gap:20px
}

    .topbar-list {
  display:flex;
  gap:22px;
  align-items:center
}

    .topbar a:hover {
  color:#fff
}

    .header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.40);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(223,231,240,.8)
}

    .nav {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

    .brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:-.05em;
  width: 220px;
  height: auto;
  display: block;
}

    .brand-mark {
  position:relative;
  width:39px;
  height:35px
}

    .brand-mark span {
  position:absolute;
  width:10px;
  border-radius:2px;
  transform:skew(-10deg)
}

    .brand-mark span:nth-child(1) {
  height:28px;
  left:1px;
  top:5px;
  background:var(--blue)
}

    .brand-mark span:nth-child(2) {
  height:20px;
  left:14px;
  top:12px;
  background:var(--white);
  border:3px solid var(--navy)
}

    .brand-mark span:nth-child(3) {
  height:31px;
  right:1px;
  top:2px;
  background:var(--rp)
}

    .brand-copy {
  font-size:1.24rem;
  line-height:.82
}

    .brand-copy small {
  font-size:.56rem;
  display:block;
  letter-spacing:.18em;
  margin-bottom:4px;
  color:var(--muted)
}

    .nav-links {
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:700;
  font-size:1.1rem
}

    .nav-links a {
  position:relative
}

    .nav-links a:after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:2px;
  background:var(--rp);
  transition:.25s
}

    .nav-links a:hover:after {
  right:0
}

    .nav-actions {
  display:flex;
  align-items:center;
  gap:10px
}

    .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
  white-space:nowrap
}

    .btn:hover {
  transform:translateY(-2px)
}

    .btn-primary {
  background:linear-gradient(135deg,var(--blue),var(--rp));
  color:#fff;
  box-shadow:0 12px 28px rgba(61, 146, 185, 0.25)
}

    .btn-primary:hover {
  box-shadow:0 16px 36px var(--rp)
}

    .btn-secondary {
  background:#fff;
  color:var(--navy);
  border-color:var(--line)
}

    .btn-dark {
  background:var(--navy);
  color:#fff
}

    .btn-whatsapp {
  background:#20b866;
  color:#fff
}

    .menu-btn {
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  font-size:1.25rem
}

    .hero {
  position:relative;
  overflow:hidden;
  padding:88px 0 70px;
  background: radial-gradient(circle at 78% 18%,rgba(30,182,217,.18),transparent 26%), radial-gradient(circle at 95% 65%,rgba(233,52,76,.12),transparent 24%),       linear-gradient(180deg,#f8fbff 0,#fff 100%);
  scroll-margin-top: 140px
}

    .hero:after {
  content:"";
  position:absolute;
  inset:auto -5% -150px 40%;
  height:310px;
  background:repeating-linear-gradient(120deg,transparent 0 22px,rgba(25,118,210,.045) 23px 24px);
  transform:rotate(-8deg);
  pointer-events:none
}

    .hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:center;
  gap:54px
}

    .hero h1 span {
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

    .hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:32px 0
}

    .hero-proof {
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  color:var(--muted);
  font-weight:700;
  font-size:.92rem
}

    .hero-proof span {
  display:flex;
  align-items:center;
  gap:8px
}

    .check {
  width:21px;
  height:21px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:#e8f8f1;
  color:var(--success);
  font-size:.75rem
}

    .visual {
  position:relative;
  min-height:530px
}

    .visual-orbit {
  position:absolute;
  inset:4% 2% 2% 5%;
  border-radius:48% 52% 43% 57%;
  background:linear-gradient(145deg,var(--navy),var(--navy-2));
  box-shadow:var(--shadow);
  transform:rotate(-3deg)
}

    .visual-orbit:before {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-24px;
  top:-24px;
  border:22px solid rgba(30,182,217,.35)
}

    .visual-orbit:after {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  border-radius:28px;
  left:-36px;
  bottom:34px;
  background:linear-gradient(135deg,var(--blue),var(--rp));
  transform:rotate(16deg)
}

    .dashboard {
  position:absolute;
  inset:74px 12px 28px 32px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 32px 70px rgba(0,0,0,.25);
  border-radius:26px;
  overflow:hidden;
  transform:rotate(2deg)
}

    .dash-top {
  height:58px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 22px;
  gap:8px
}

    .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d7e0ea
}

.dot:nth-child(1) {
  background:var(--rp)
}

.dot:nth-child(2) {
  background:#f1bd38
}

.dot:nth-child(3) {
  background:#36bd79
}

    .dash-body {
  display:grid;
  grid-template-columns:90px 1fr;
  min-height:360px
}

    .dash-side {
  background:#0b2444;
  padding:22px 15px;
  display:grid;
  align-content:start;
  gap:15px
}

    .dash-side i {
  height:11px;
  border-radius:99px;
  background:rgba(255,255,255,.2)
}

    .dash-side i:nth-child(1) {
  background:var(--cyan)
}

    .dash-main {
  padding:24px;
  background:#f6f9fc
}

    .dash-title {
  height:14px;
  width:42%;
  border-radius:99px;
  background:#c7d4e2;
  margin-bottom:20px
}

    .metric-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

    .metric {
  background:#fff;
  border:1px solid #e6edf4;
  border-radius:14px;
  padding:14px;
  min-height:78px
}

    .metric strong {
  display:block;
  color:var(--navy);
  font-size:1.3rem
}

.metric small {
  color:var(--muted)
}

    .chart {
  height:130px;
  margin-top:13px;
  background:#fff;
  border:1px solid #e6edf4;
  border-radius:16px;
  padding:18px;
  display:flex;
  gap:9px;
  align-items:end
}

    .chart i {
  flex:1;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  min-height:20%
}

    .chart i:nth-child(2) {
  height:65%
}

.chart i:nth-child(3) {
  height:45%
}

.chart i:nth-child(4) {
  height:82%
}

.chart i:nth-child(5) {
  height:56%
}

.chart i:nth-child(6) {
  height:92%
}

.chart i:nth-child(7) {
  height:72%
}

    .face-card {
  position:absolute;
  right:-16px;
  bottom:6px;
  width:180px;
  background:#fff;
  border-radius:20px;
  padding:16px;
  box-shadow:0 20px 42px rgba(7,28,53,.22);
  transform:rotate(-4deg)
}

    .face-icon {
  height:86px;
  border-radius:16px;
  background:linear-gradient(145deg,#e9f5fb,#d8e9f8);
  position:relative;
  overflow:hidden
}

    .face-icon:before {
  content:"";
  position:absolute;
  width:43px;
  height:43px;
  border:4px solid var(--blue);
  border-radius:50%;
  top:14px;
  left:50%;
  transform:translateX(-50%)
}

    .face-icon:after {
  content:"";
  position:absolute;
  width:78px;
  height:42px;
  border:4px solid var(--blue);
  border-bottom:0;
  border-radius:52px 52px 0 0;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%)
}

    .face-card b {
  display:block;
  margin-top:11px
}

.face-card small {
  color:var(--success);
  font-weight:800
}

    .stats {
  position:relative;
  margin-top:-1px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff
}

    .stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

    .stat {
  padding:30px 26px;
  border-right:1px solid var(--line)
}

    .stat:last-child {
  border-right:0
}

    .stat strong {
  display:block;
  color:var(--navy);
  font-size:clamp(1.7rem,3vw,2.4rem);
  letter-spacing:-.05em;

}

.about-text {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 0px;
  padding: 24px 32px;
  min-height: 280px;

  background:
     /* Esmaece em cima e embaixo */
  /*linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 12%,
    rgba(255, 255, 255, 0) 88%,
    #ffffff 100%
  ),*/

  linear-gradient(
  to bottom,
  #ffffff 0%,
  rgba(255, 255, 255, 0) 12%,
  rgba(255, 255, 255, 0) 80%,
  rgba(255, 255, 255, 0.85) 92%,
  #ffffff 97%,
  #ffffff 100%
),

  /* Esmaece a borda direita */
  linear-gradient(
    to left,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 14%
  ),

  /* Protege o texto e revela a foto à direita */
  linear-gradient(
    to right,
    #ffffff 0%,
    rgba(255, 255, 255, 0.98) 30%,
    rgba(255, 255, 255, 0.72) 52%,
    rgba(255, 255, 255, 0.08) 90%
  ),

    url("../img/fachadaRP.JPG");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  border: none;
  outline: none;
  box-shadow: none;

  background-color: #ffffff;

/* Garante que nenhum pixel da imagem apareça na base */
box-shadow: inset 0 -3px 0 #ffffff !important;
}
.about-text .stat {
  padding: 0;
  margin: 0 0 8px 0;
  border: none;
}

.about-text .stat strong {
  display: block;
  margin: 0;
}

.about-text .lead {
  margin: 0;
  max-width: 680px;
}

    .stat span {
  color:var(--muted);
  font-weight:700
}

    .cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

    .card {
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  transition:.25s;
  overflow:hidden
}

    .card:hover {
  transform:translateY(-7px);
  box-shadow:var(--shadow);
  border-color:transparent
}

    .card:after {
  content:"";
  position:absolute;
  width:95px;
  height:95px;
  border-radius:50%;
  right:-48px;
  top:-48px;
  background:rgba(30,182,217,.1)
}

    .icon {
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(145deg,#e6f5fc,#eef7ff);
  display:grid;
  place-items:center;
  color:var(--blue);
  margin-bottom:22px
}

    .icon svg {
  width:29px;
  height:29px
}

    .card p {
  color:var(--muted);
  font-size:.94rem;
  min-height:86px
}

    .card-link {
  font-weight:900;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px
}

    .feature-grid {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:62px;
  align-items:center
}

    .feature-visual {
  min-height:530px;
  border-radius:34px;
  background:linear-gradient(145deg,var(--navy),#124478);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow)
}

    .feature-visual:before {
  content:"";
  position:absolute;
  inset:-90px auto auto -80px;
  width:270px;
  height:270px;
  border-radius:50%;
  border:50px solid rgba(30,182,217,.17)
}

    .device {
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  height:355px;
  transform:translate(-50%,-50%) rotate(-3deg);
  background:linear-gradient(145deg,#111722,#303c4c);
  border-radius:28px;
  box-shadow:0 34px 70px rgba(0,0,0,.4);
  padding:28px 24px
}

    .device-screen {
  height:116px;
  border-radius:16px;
  background:linear-gradient(145deg,#dff8ff,#89d9ef);
  padding:18px;
  color:#0b3855
}

    .device-screen b {
  font-size:2.1rem;
  display:block;
  letter-spacing:-.05em
}

.device-screen span {
  font-size:.8rem;
  font-weight:800
}

    .device-face {
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.65);
  margin:37px auto 0;
  position:relative
}

    .device-face:before,.device-face:after {
  content:"";
  position:absolute;
  background:rgba(255,255,255,.7);
  left:50%;
  transform:translateX(-50%)
}

    .device-face:before {
  width:20px;
  height:20px;
  border-radius:50%;
  top:12px
}

.device-face:after {
  width:38px;
  height:18px;
  border-radius:30px 30px 8px 8px;
  bottom:10px
}

    .float-tag {
  position:absolute;
  border-radius:16px;
  padding:14px 17px;
  background:#fff;
  box-shadow:0 18px 38px rgba(0,0,0,.22);
  font-weight:900
}

    .float-tag small {
  display:block;
  color:var(--muted);
  font-weight:700
}

.tag-one {
  right:24px;
  top:54px
}

.tag-two {
  left:22px;
  bottom:45px
}

    .feature-list {
  display:grid;
  gap:18px;
  margin:28px 0 34px
}

    .feature-item {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px
}

    .feature-item .num {
  width:42px;
  height:42px;
  border-radius:13px;
  background:#eaf4fd;
  color:var(--blue);
  font-weight:900;
  display:grid;
  place-items:center
}

    .feature-item p {
  color:var(--muted);
  margin:3px 0 0
}

    .trust-grid {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:70px;
  align-items:start
}

    .trust-box {
  background:var(--navy);
  color:#fff;
  border-radius:32px;
  padding:44px;
  position:sticky;
  top:120px;
  overflow:hidden
}

    .trust-box:after {
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  right:-100px;
  bottom:-100px;
  background:rgba(30,182,217,.16)
}

    .trust-box h2 {
  font-size:clamp(2rem,4vw,3rem)
}

    .trust-box p {
  color:#c9d8e8
}

    .trust-badges {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px
}

    .badge {
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:16px;
  font-weight:800
}

    .reasons {
  display:grid;
  gap:15px
}

    .reason {
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:25px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:17px;
  align-items:start;
  margin-top: 10px;
  margin-bottom: 10px
}

    .reason strong {
  font-size:1.08rem
}

.reason p {
  margin:5px 0 0;
  color:var(--muted)
}

    .reason-index {
  width:54px;
  height:54px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--blue),var(--rp));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1.2rem
}

    .segments {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
    .segment {
  min-height:190px;
  border-radius:22px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  color:#fff;
  position:relative;
  overflow:hidden;
  background-color: #0a2648;
}

/*    .segment:nth-child(1),.segment:nth-child(3), .segment:nth-child(5) {
  background:linear-gradient(145deg,var(--blue),var(--rp))
}

    .segment:nth-child(2),.segment:nth-child(4), .segment:nth-child(6) {
  background:linear-gradient(145deg, var(--rp),var(--cyan))
}*/

    .segment:before {
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  border:28px solid rgba(255,255,255,.08);
  border-radius:50%;
  right:-38px;
  top:-38px
}

    .segment h3,.segment p {
  position:relative;
  z-index:1
}

.segment p {
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:.92rem
}

    .process {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  counter-reset:step
}

    .step {
  position:relative;
  padding:0 30px 0 0;
  counter-increment:step
}

    .step:before {
  content:counter(step);
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--navy);
  color:#fff;
  font-weight:900;
  font-size:1.2rem;
  margin-bottom:20px
}

    .step:not(:last-child):after {
  content:"";
  position:absolute;
  top:26px;
  left:65px;
  right:13px;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--line))
}

    .step p {
  color:var(--muted)
}

    .faq-grid {
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:68px;
  align-items:start
}

    .faq-list {
  display:grid;
  gap:12px
}

    .faq {
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden
}

    .faq button {
  width:100%;
  border:0;
  background:#fff;
  padding:21px 24px;
  text-align:left;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  color:var(--ink)
}

    .faq button span:last-child {
  color:var(--blue);
  font-size:1.25rem
}

    .faq-content {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
}

    .faq-content p {
  padding:0 24px 22px;
  color:var(--muted);
  margin:0
}

    .faq.open .faq-content {
  max-height:240px
}

    .cta {
  padding:70px 0 70px
}

    .cta-box {
  border-radius:34px;
  background:       radial-gradient(circle at 85% 10%,rgba(30,182,217,.27),transparent 30%),       linear-gradient(135deg,var(--navy),#103d6e);
  color:#fff;
  padding:64px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:40px;
  overflow:hidden;
  position:relative
}

    .cta-box p {
  color:#cfdeec;
  max-width:650px;
  margin-bottom:0
}

    .cta-actions {
  display:flex;
  gap:12px;
  flex-direction:column
}

    footer {
  background: var(--dark-site);
  color:#c8d5e3;
  padding:70px 0 24px
}

    .footer-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr 1fr;
  gap:48px;
  padding-bottom:44px
}

    footer .brand {
  color:#fff;
  margin-bottom:20px
}

.footer-copy {
  max-width:330px;
  color:#9eb1c5
}

    .footer-title {
  color:#fff;
  font-weight:900;
  margin-bottom:18px
}

    .footer-links {
  display:grid;
  gap:10px
}

.footer-links a:hover {
  color:#fff
}

    .footer-bottom {
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.85rem;
  color:#8fa4ba
}

    .wa-float {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  width:100px;
  height:100px;
  border-radius:50%;
  background: var(--whatsapp);
  display:grid;
  place-items:center;
  box-shadow:0 14px 30px rgba(32,184,102,.38);
  font-weight:900;
  font-size:1.35rem;
  border:1px solid #fff
}

.wa-float:hover {
  background-color: var(--rp); /* Muda a cor de fundo para azul */
  transform: scale(1.1);     /* Opcional: faz o botão dar um pequeno zoom de 10% */
}

    @media(max-width:1020px) {
         .nav-links {
    display:none;
    position:absolute;
    left:20px;
    right:20px;
    top:88px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch
  }
         .nav-links.open {
    display:flex
  }
  .nav-actions .btn {
    display:none
  }
  .menu-btn {
    display:block
  }
         .hero-grid,.feature-grid,.trust-grid,.faq-grid {
    grid-template-columns:1fr
  }
  .hero {
    padding-top:58px
  }
  .hero-copy {
    text-align:center
  }
  .hero .lead,.hero-proof {
    margin-inline:auto;
    justify-content:center
  }
  .hero-actions {
    justify-content:center
  }
  .visual {
    max-width:650px;
    width:100%;
    margin:0 auto
  }
  .cards {
    grid-template-columns:1fr 1fr
  }
  .trust-box {
    position:relative;
    top:auto
  }
  .stats-grid {
    grid-template-columns:1fr 1fr
  }
  .stat:nth-child(2) {
    border-right:0
  }
  .stat:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .process {
    grid-template-columns:1fr 1fr;
    gap:34px
  }
  .step:nth-child(2):after {
    display:none
  }
  .cta-box {
    grid-template-columns:1fr
  }
  .cta-actions {
    flex-direction:row
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }

}

    @media(max-width:680px) {
         .topbar .container {
    justify-content:center
  }
  .topbar-list:last-child {
    display:none
  }
  .container {
    width:min(calc(100% - 28px),var(--container))
  }
  .nav {
    min-height:72px
  }
  .brand-copy {
    font-size:1.08rem
  }
  .section {
    padding:72px 0
  }
  .section-head {
    display:block
  }
  .section-head p {
    margin-top:15px
  }
  .hero {
    padding:48px 0 54px
  }
  .hero h1 {
    font-size:clamp(2.45rem,14vw,3.6rem)
  }
  .visual {
    min-height:420px
  }
  .dashboard {
    inset:64px 4px 20px 20px
  }
  .dash-body {
    grid-template-columns:60px 1fr
  }
  .dash-main {
    padding:15px
  }
  .metric-row {
    grid-template-columns:1fr 1fr
  }
  .metric:nth-child(3) {
    display:none
  }
  .face-card {
    width:150px;
    right:0
  }
  .cards,.segments,.process,.footer-grid {
    grid-template-columns:1fr
  }
  .card p {
    min-height:auto
  }
  .stats-grid {
    grid-template-columns:1fr 1fr
  }
  .stat {
    padding:22px 15px
  }
  .feature-grid {
    gap:38px
  }
  .feature-visual {
    min-height:440px
  }
  .device {
    width:230px;
    height:320px
  }
  .trust-box,.cta-box {
    padding:36px 26px
  }
  .trust-badges {
    grid-template-columns:1fr
  }
  .reason {
    grid-template-columns:46px 1fr;
    padding:20px
  }
  .reason-index {
    width:46px;
    height:46px
  }
  .step {
    padding-right:0
  }
  .step:after {
    display:none
  }
  .cta-actions {
    flex-direction:column
  }
  .footer-bottom {
    display:block
  }
  .footer-bottom span {
    display:block;
    margin-top:8px
  }
  .wa-float {
    width:54px;
    height:54px;
    right:14px;
    bottom:14px
  }
  .topbar-list {
    gap:12px;
    font-size:.78rem
  }

}

/* Variações reutilizáveis que substituem estilos inline */ .eyebrow-light {
     color: #67d8ee;

}

.footer-brand-label {
     color: #9eb1c5;

}

/* ========================================
   CARROSSEL DE BANNERS
======================================== */

.banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f4f8fc;
  min-height: 0;
  margin-top: -82px;

}

.carousel-track {
  position: relative;
  width: 100%;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

.carousel-slide.active {
  position: relative;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  z-index: 1;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

  width: 48px;
  height: 48px;
  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: rgba(7, 28, 53, 0.78);
  cursor: pointer;
  border: 2px solid white;

  transform: translateY(-50%);
}

.carousel-arrow::before {
  content: "";
  width: 11px;
  height: 11px;

  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}

.carousel-prev {
  left: 24px;
}

.carousel-next {
  right: 24px;
}

.carousel-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.carousel-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.carousel-arrow:hover {
  background: rgba(7, 28, 53, 0.95);
}

.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 10;

  display: flex;
  gap: 9px;

  transform: translateX(-50%);
}

.carousel-dot {
  width: 12px;
  height: 12px;

  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.45);

  cursor: pointer;
}

.carousel-dot.active {
  width: 30px;
  border-radius: 999px;
  background: #ffffff;
}

.hero-circle-grid {
  display: grid;
  grid-template-columns: repeat(2, 190px);

  /* Distância horizontal e vertical */
  column-gap: 110px;
  row-gap: 70px;

  justify-content: center;
  align-content: center;

  width: 100%;
  min-height: 550px;
}

.hero-circle {
  width: 190px;
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border-radius: 50%;
  overflow: hidden;

  background: #ffffff;
  border: 3px solid rgba(37, 35, 123, 0.12);
  box-shadow: 0 18px 42px rgba(7, 28, 53, 0.16);

  /* Remove deslocamentos antigos */
  transform: none;
}

.hero-circle img {
  display: block;

  width: 200px;
  height: 200px;

  max-width: none;
  margin: 0;
  padding: 0;

  object-fit: contain;
  object-position: center;
  transform: none;
}

.topbar-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-socials a {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 50%;/*
  background: #000000;*/
  color: #ffffff;

  font-size: 16px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.topbar-socials a:hover {
  transform: translateY(-2px);
  background: var(--rp);
}

/* ========================================
   RESPONSIVIDADE DO HERO COM 4 CÍRCULOS
======================================== */

@media (max-width: 1200px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-proof {
    justify-content: center;
  }

  .hero-circle-grid {
    grid-template-columns: repeat(2, 170px);
    column-gap: 55px;
    row-gap: 45px;

    width: 100%;
    min-height: auto;
    justify-content: center;
    align-content: center;

    margin: 0 auto;
    padding: 20px 0 40px;
  }

  .hero-circle {
    width: 170px;
    height: 170px;
  }

  .hero-circle img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 680px) {
  .hero {
    padding: 40px 0 45px;
  }

  .hero-grid {
    gap: 30px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 14vw, 3.8rem);
    line-height: 0.98;
  }

  .hero-circle-grid {
    grid-template-columns: repeat(2, 125px);

    column-gap: 25px;
    row-gap: 28px;

    width: 100%;
    min-height: auto;
    padding: 10px 0 25px;
  }

  .hero-circle {
    width: 125px;
    height: 125px;
    border-width: 2px;
  }

  .hero-circle img {
    width: 105px;
    height: 105px;
    max-width: none;

    object-fit: contain;
    object-position: center;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .hero-circle-grid {
    grid-template-columns: repeat(2, 110px);
    column-gap: 18px;
    row-gap: 22px;
  }

  .hero-circle {
    width: 110px;
    height: 110px;
  }

  .hero-circle img {
    width: 92px;
    height: 92px;
  }
}

/* Menu no topo, sobre o carrossel */
.header {
  background: rgba(7, 28, 53, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

/* Links brancos enquanto estiver no topo */
.header .nav-links a {
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Botão do menu mobile */
.header .menu-btn {
  color: #ffffff;
}

/* Menu depois que a página descer */
.header.header-scrolled {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 25px rgba(7, 28, 53, 0.1);
}

/* Links escuros depois que descer */
.header.header-scrolled .nav-links a {
  color: var(--ink);
}

.header.header-scrolled .menu-btn {
  color: var(--ink);
}

.header .nav-links a::after {
  background: #ffffff;
}

.header.header-scrolled .nav-links a::after {
  background: var(--rp);
}

.logo-top {
  display: block;
}

.logo-scrolled {
  display: none;
}

.header.header-scrolled .logo-top {
  display: none;
}

.header.header-scrolled .logo-scrolled {
  display: block;
}

/* Botão de orçamento enquanto o menu está no topo:
   branco, sem anel/borda aparente e com glow branco no hover. */
.header:not(.header-scrolled) .nav-actions .btn-primary {
  background: #ffffff;
  color: #25237B;
  border: 1px solid transparent;
  box-shadow: none;
}

.header:not(.header-scrolled) .nav-actions .btn-primary:hover {
  background: #ffffff;
  color: #25237B;
  border-color: transparent;

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.95),
    0 0 38px rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.15);

  transform: translateY(-2px);
}


/* ========================================
   FOTOS DOS SEGMENTOS
======================================== */

.segment {
  min-height: 240px;
  padding: 28px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 22px;
  color: #ffffff;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-size 0.4s ease;
}

.segments .segment {
  min-height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Remove o círculo decorativo antigo */
.segment::before {
  display: none;
}

.segment:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(7, 28, 53, 0.25);
}

.segment h3,
.segment p {
  position: relative;
  z-index: 2;
}

.segment h3 {
  margin-bottom: 8px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.segment p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Imagens individuais */

.segments .segment-industria {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/industria.png");
}

.segments .segment-escritorio {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/escritorio.png");
}

.segments .segment-condominio {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/condominio.png");
}

.segments .segment-escola {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/escola.png");
}

.segments .segment-hospital {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/hospital.png");
}

.segments .segment-filiais {
  background-image:
    linear-gradient(
      to top,
      rgba(7, 28, 53, 0.92) 0%,
      rgba(7, 28, 53, 0.55) 52%,
      rgba(7, 28, 53, 0.12) 100%
    ),
    url("../img/segmentos/filiais.png");
}

.feature-visual-image {
  position: relative;
  width: 100%;
  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  overflow: visible;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.feature-visual-image::before,
.feature-visual-image::after {
  display: none;
  content: none;
}

.feature-visual-image img {
  display: block;
  width: 100%;
  height: 530px;
  max-height: 530px;

  object-fit: contain;
  object-position: center;

  border: 0;
  border-radius: 34px;
  box-shadow: none;
}

@media (max-width: 680px) {
  .feature-visual-image {
    min-height: auto;
    border-radius: 24px;
  }

  .feature-visual-image img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 24px;
  }
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 240px);
  gap: 14px;

  justify-content: center;
  margin-top: 28px;
}

.trust-badge-image {
  position: relative;

  width: 240px;
  height: 85px;

  overflow: hidden;
  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.trust-badge-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.35s ease;
}

/* Escurece a imagem para preservar a leitura */
.trust-badge-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(7, 28, 53, 0.88),
    rgba(7, 28, 53, 0.35)
  );
}

.trust-badge-image span {
  position: absolute;
  left: 16px;
  right: 12px;
  top: 50%;
  z-index: 2;

  transform: translateY(-50%);

  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.trust-badge-image:hover img {
  transform: scale(1.08);
}

@media (max-width: 680px) {
  .trust-badges {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .trust-badge-image {
    width: min(100%, 320px);
    height: 100px;
  }
}

/* =========================================================
   CARDS DE SOLUÇÕES COM FOTOS + PÁGINAS INTERNAS
   Arquivo complementar: mantenha também o css/style.css original.
========================================================= */

.cards-five {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.cards-five .solution-card {
  grid-column: span 2;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background-color: #071c35;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 42px rgba(7, 28, 53, 0.16);
}

/* ========================================
   GRADE COM 6 CARDS DE SOLUÇÕES
======================================== */

.cards-five {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cards-five .solution-card,
.cards-five .solution-card:nth-child(4),
.cards-five .solution-card:nth-child(5),
.cards-five .solution-card:nth-child(6) {
  grid-column: auto;
  width: 100%;
  min-height: 330px;
}

@media (max-width: 1020px) {
  .cards-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-five .solution-card,
  .cards-five .solution-card:last-child {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 680px) {
  .cards-five {
    grid-template-columns: 1fr;
  }

  .cards-five .solution-card {
    width: 100%;
    min-height: 300px;
  }
}

.cards-five .solution-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(7, 28, 53, 0.16) 0%,
    rgba(7, 28, 53, 0.55) 48%,
    rgba(7, 28, 53, 0.96) 100%
  );
}

/* Remove o círculo decorativo original dos cards somente nesta grade. */
.cards-five .solution-card::after {
  display: none;
  content: none;
}

.cards-five .solution-card > * {
  position: relative;
  z-index: 1;
}

.cards-five .solution-card .icon {
  margin-bottom: auto;
  background: rgba(255, 255, 255, 0.92);
  color: #1233b3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cards-five .solution-card h3 {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.cards-five .solution-card p {
  color: rgba(255, 255, 255, 0.9);
  min-height: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.cards-five .solution-card .card-link {
  color: #ffffff;
}

.cards-five .solution-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

/* Coloque as cinco fotos nestes caminhos. Se uma foto ainda não existir,
   o card continuará aparecendo com o fundo azul de segurança. */
.solution-card-ponto {
  background-image: url("../img/solucoes/controle-de-ponto.jpg");
}

.solution-card-seguranca {
  background-image: url("../img/solucoes/seguranca-eletronica.jpg");
}

.solution-card-nuvem {
  background-image: url("../img/solucoes/sistemas-em-nuvem.jpg");
}

.solution-card-assistencia {
  background-image: url("../img/solucoes/assistencia-tecnica.jpg");
}

.solution-card-identidade {
  background-image: url("../img/solucoes/identidade-visual.jpg");
}

.solution-card-suporte {
  background-image: url("../img/solucoes/suporte.png");
}

/* Cabeçalho legível nas páginas internas, que não têm carrossel atrás. */
.internal-page .header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(223, 231, 240, 0.7);
  box-shadow: 0 8px 25px rgba(7, 28, 53, 0.08);
}

.internal-page .header .nav-links a,
.internal-page .header .menu-btn {
  color: var(--ink) !important;
}

.internal-page .header .nav-links a::after {
  background: var(--rp) !important;
}

.internal-page .logo-top {
  display: none !important;
}

.internal-page .logo-scrolled {
  display: block !important;
}

.internal-page .header .nav-actions .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--rp));
  color: #ffffff;
  border-color: transparent;
}

.internal-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 72px;
  background:
    radial-gradient(circle at 85% 15%, rgba(30, 182, 217, 0.18), transparent 28%),
    radial-gradient(circle at 100% 80%, rgba(233, 52, 76, 0.1), transparent 24%),
    linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%);
}

.internal-hero .eyebrow {
  margin-bottom: 16px;
}

.internal-hero h1 {
  margin-bottom: 18px;
}

.internal-hero .lead {
  max-width: 1050px;
  width: 100%;
}

.internal-page-content {
  min-height: 420px;
}

.internal-empty-area {
  min-height: 300px;
  padding: 40px;
  border: 1px dashed var(--line);
  border-radius: 24px;
  background: #ffffff;
}

@media (max-width: 1200px) {
  /* Tablet: 6 soluções em 2 colunas x 3 linhas, todas com a mesma largura. */
  .cards-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-five .solution-card,
  .cards-five .solution-card:nth-child(4),
  .cards-five .solution-card:nth-child(5),
  .cards-five .solution-card:nth-child(6),
  .cards-five .solution-card:last-child {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 680px) {
  .cards-five {
    grid-template-columns: 1fr;
  }

  .cards-five .solution-card,
  .cards-five .solution-card:last-child {
    grid-column: auto;
    width: 100%;
    min-height: 300px;
  }

  .internal-hero {
    padding: 72px 0 54px;
    text-align: center;
  }

  .internal-hero .lead {
    max-width: 1050px;
    width: 100%;
  }

  .internal-empty-area {
    min-height: 220px;
    padding: 24px;
  }
}

/* =========================
   MENU NO TOPO
   Transparente e sem blur
========================= */

.header:not(.header-scrolled) {
  background: transparent !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border: none !important;
  box-shadow: none !important;
}


/* =========================
   MENU APÓS ROLAR A PÁGINA
   Branco + efeito blur
========================= */

.header.header-scrolled {
  background: rgba(255, 255, 255, 0.72) !important;

  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;

  border-bottom: 1px solid rgba(220, 228, 238, 0.45) !important;

  box-shadow: 0 8px 28px rgba(7, 28, 53, 0.08) !important;
}

/* Garante que a área interna também não tenha fundo */
.header:not(.header-scrolled) .nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ========================================
   MENU RESPONSIVO
======================================== */

.header .nav {
  position: relative;
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

/* Evita quebra dos textos no desktop */
.nav-links {
  flex-wrap: nowrap;
}

.nav-links a {
  white-space: nowrap;
}

/* Tablet e telas menores */
@media (max-width: 1200px) {
  .header .nav {
    min-height: 76px;
    gap: 20px;
  }

  .brand {
    width: 200px;
    height: auto;
    flex-shrink: 0;
  }

  .brand img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .nav-links {
    display: none;

    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 100;

    width: 100%;
    padding: 20px;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(223, 231, 240, 0.8);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(7, 28, 53, 0.18);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    padding: 14px 12px;

    color: var(--ink) !important;
    border-bottom: 1px solid var(--line);
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .nav-links a::after {
    display: none;
  }

  .menu-btn {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    flex-shrink: 0;

    color: var(--ink);
    background: rgba(255, 255, 255, 0.95);
  }

  .nav-actions {
    margin-left: auto;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .nav-dropdown-trigger .nav-main-link {
    flex: 1;
    border-bottom: 0 !important;
  }

  .submenu-toggle {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: var(--ink);
  }

  .nav-dropdown.open .submenu-toggle {
    transform: rotate(180deg);
  }

  .submenu {
    position: static;

    width: 100%;
    padding: 6px 0 8px 16px;

    display: none;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown.open .submenu {
    display: grid;
  }

  .header .submenu a {
    padding: 12px 14px;
    border-bottom: 0;
    background: rgba(244, 248, 252, 0.9);
  }
}

@media (max-width: 680px) {
  .header .nav {
    width: min(calc(100% - 28px), var(--container));
    min-height: 68px;
  }

  .brand {
    width: 165px;
    height: auto;
  }

  .menu-btn {
    width: 42px;
    height: 42px;
  }

  .nav-links {
    top: calc(100% + 5px);
    padding: 14px;
    border-radius: 14px;
  }

  .nav-links a {
    padding: 13px 10px;
    font-size: 1rem;
  }
}

@media (max-width: 380px) {
  .brand {
    width: 145px;
  }

  .header .nav {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .topbar .container {
    justify-content: center;
  }

  .topbar-list:first-child {
    display: none;
  }

  .topbar-socials {
    margin: 0;
  }
}

@media (max-width: 680px) {
  .topbar-list a[href^="mailto:"] {
    display: none;
  }

  .topbar-socials {
    gap: 12px;
  }
}

/* ========================================
   PÁGINA RELÓGIOS DE PONTO
======================================== */

.relogios-hero {
  padding-bottom: 65px;
}

.relogios-section {
  padding-top: 70px;
}

.relogios-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.relogio-card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;

  box-shadow: 0 16px 40px rgba(7, 28, 53, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.relogio-card:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: 0 24px 55px rgba(7, 28, 53, 0.16);
}

.relogio-image {
  width: 100%;
  height: 300px;
  padding: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(30, 182, 217, 0.17),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f8fbff,
      #edf4fa
    );
}

.relogio-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 250px;

  object-fit: contain;
  object-position: center;

  transition: transform 0.35s ease;
}

.relogio-card:hover .relogio-image img {
  transform: scale(1.06);
}

.relogio-content {
  min-height: 125px;
  padding: 24px 26px 28px;
}

.relogio-category {
  display: block;
  margin-bottom: 7px;

  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.relogio-content h2 {
  margin: 0;
  color: var(--navy);

  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

@media (max-width: 1020px) {
  .relogios-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relogio-image {
    height: 280px;
  }
}

@media (max-width: 680px) {
  .relogios-hero {
    text-align: center;
  }

  .relogios-hero .lead {
    margin-inline: auto;
  }

  .relogios-section {
    padding-top: 50px;
  }

  .relogios-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .relogio-image {
    height: 270px;
    padding: 25px;
  }

  .relogio-image img {
    max-width: 230px;
  }

  .relogio-content {
    min-height: auto;
    padding: 22px 24px 25px;
    text-align: center;
  }
}

/* ========================================
   SUBMENU DE SOLUÇÕES
======================================== */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-main-link {
  white-space: nowrap;
}

.submenu-toggle {
  display: none;

  width: 28px;
  height: 28px;
  padding: 0;

  border: 0;
  background: transparent;
  color: inherit;

  cursor: pointer;
  font-size: 15px;
  line-height: 1;

  transition: transform 0.25s ease;
}

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 300;

  width: 245px;
  padding: 10px;

  display: grid;
  gap: 2px;

  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(223, 231, 240, 0.9);
  border-radius: 16px;

  box-shadow: 0 20px 45px rgba(7, 28, 53, 0.18);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(8px);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

.submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
}

/* Mantém o submenu aberto com mouse ou teclado */
.nav-dropdown:hover .submenu,
.nav-dropdown:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header .submenu a {
  display: block;
  width: 100%;
  padding: 12px 14px;

  color: var(--ink) !important;
  font-size: 0.98rem;
  white-space: nowrap;

  border-radius: 10px;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.header .submenu a:hover {
  color: var(--rp) !important;
  background: var(--soft);
}

/* Remove a linha animada dos links internos do submenu */
.header .submenu a::after {
  display: none !important;
}

/* ========================================
   MENU ESCURO NAS PÁGINAS DOS RELÓGIOS
======================================== */

body.relogio-page .header,
body.relogio-page .header:not(.header-scrolled),
body.relogio-page .header.header-scrolled {
  background: rgba(7, 28, 53, 0.95) !important;

  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 25px rgba(7, 28, 53, 0.2) !important;
}

/* Textos do menu em branco */
body.relogio-page .header .nav-links a {
  color: #ffffff !important;
}

/* Linha do efeito hover */
body.relogio-page .header .nav-links a::after {
  background: #ffffff !important;
}

/* Mostra o logo branco */
body.relogio-page .logo-top {
  display: block !important;
}

body.relogio-page .logo-scrolled {
  display: none !important;
}

/* Botão de orçamento */
body.relogio-page .header .nav-actions .btn-primary {
  background: #ffffff !important;
  color: #25237b !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}

/* Botão do menu mobile */
body.relogio-page .header .menu-btn {
  color: #25237b !important;
  background: #ffffff !important;
}

/* Mantém o submenu claro e legível */
body.relogio-page .header .submenu {
  background: rgba(255, 255, 255, 0.98);
}

body.relogio-page .header .submenu a {
  color: var(--ink) !important;
}

body.relogio-page .header .submenu a:hover {
  color: var(--rp) !important;
  background: var(--soft);
}


/* ========================================
   CARROSSEL DAS PÁGINAS DE RELÓGIOS
======================================== */

.produto-carousel {
  position: relative;

  width: min(100%, 620px);
  height: 440px;

  margin: 35px auto 55px;
  overflow: hidden;

  background: #ffffff;
  border-radius: 28px;
  border: 1px solid var(--line);

  box-shadow: 0 18px 45px rgba(7, 28, 53, 0.1);
}

.produto-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.produto-slide {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 35px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.produto-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.produto-slide img {
  display: block;

  width: auto;
  height: auto;

  max-width: 88%;
  max-height: 350px;

  object-fit: contain;
  object-position: center;
}

/* Botões laterais */

.produto-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

  width: 46px;
  height: 46px;
  padding: 0;

  display: grid;
  place-items: center;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: rgba(7, 28, 53, 0.8);
  cursor: pointer;

  transform: translateY(-50%);
}

.produto-carousel-arrow::before {
  content: "";

  width: 11px;
  height: 11px;

  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}

.produto-prev {
  left: 18px;
}

.produto-next {
  right: 18px;
}

.produto-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.produto-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.produto-carousel-arrow:hover {
  background: var(--rp);
}

/* Indicadores */

.produto-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 10;

  display: flex;
  gap: 8px;

  transform: translateX(-50%);
}

.produto-dot {
  width: 11px;
  height: 11px;
  padding: 0;

  border: 2px solid var(--rp);
  border-radius: 50%;

  background: transparent;
  cursor: pointer;
}

.produto-dot.active {
  width: 28px;
  border-radius: 999px;
  background: var(--rp);
}

@media (max-width: 680px) {
  .produto-carousel {
    width: 100%;
    height: 340px;
    margin: 25px auto 40px;
    border-radius: 22px;
  }

  .produto-slide {
    padding: 25px;
  }

  .produto-slide img {
    max-width: 82%;
    max-height: 260px;
  }

  .produto-carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .produto-prev {
    left: 10px;
  }

  .produto-next {
    right: 10px;
  }
}

.relogio-page .internal-page-content {
  padding: 30px 0 65px;
  padding-top: 0;
}



.relogio-page .produto-carousel {
  margin: 0 auto 35px;
}

.especificacoes-relogio {
  display: grid;
  gap: 0px;
}

.especificacoes-relogio p {
  margin: 0;
  line-height: 1.45;
}

.produto-carousel-arrow,
.produto-carousel-dots,
.produto-dot {
  pointer-events: auto;
}

.produto-carousel-arrow {
  z-index: 20;
}

.produto-carousel-dots {
  z-index: 20;
}

.fotos-relogios {
  position: relative;

  width: min(100%, 620px);
  height: 440px;

  margin: 35px auto 55px;
  overflow: hidden;
  margin-top: 0;
}

/* ========================================
   LAYOUT INTERNO DAS PÁGINAS DE RELÓGIOS
======================================== */

.relogio-page .internal-page-content > .container {
  display: flex;
  align-items: center;
  gap: 55px;
}

/* Lado da imagem / carrossel */
.relogio-page .produto-carousel,
.relogio-page .fotos-relogios {
  flex: 0 0 48%;
  width: 48%;
  margin: 0;
}

/* Lado das informações */
.relogio-page .internal-empty-area {
  flex: 1;
  min-width: 0;
  min-height: auto;

  padding: 35px;

  border: none;
  border-radius: 0;
  background: transparent;
}
@media (max-width: 900px) {

  .relogio-page .internal-page-content > .container {
    flex-direction: column;
    gap: 35px;
  }

  .relogio-page .produto-carousel,
  .relogio-page .fotos-relogios,
  .relogio-page .internal-empty-area {
    width: 100%;
    flex: none;
  }

  .relogio-page .produto-carousel,
  .relogio-page .fotos-relogios {
    margin: 0 auto;
  }

  .relogio-page .internal-empty-area {
    padding: 20px 5px;
  }

}

.relogio-page .produto-carousel {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* =====================================================
   MENU ESCURO - PÁGINAS INTERNAS
===================================================== */

body.produto-page .header,
body.produto-page .header:not(.header-scrolled),
body.produto-page .header.header-scrolled {
  background: rgba(7, 28, 53, 0.95) !important;

  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow:
    0 8px 25px rgba(7, 28, 53, 0.20) !important;
}


/* LINKS PRINCIPAIS DO MENU */

body.produto-page .header .nav-links > a,
body.produto-page .header .nav-main-link {
  color: #ffffff !important;
}


/* LINHA DE HOVER */

body.produto-page .header .nav-links > a::after,
body.produto-page .header .nav-main-link::after {
  background: #ffffff !important;
}


/* LOGO BRANCO SEMPRE */

body.produto-page .logo-top,
body.produto-page .header.header-scrolled .logo-top {
  display: block !important;
}

body.produto-page .logo-scrolled,
body.produto-page .header.header-scrolled .logo-scrolled {
  display: none !important;
}


/* BOTÃO SOLICITAR ORÇAMENTO - PÁGINAS INTERNAS */

body.produto-page .header .nav-actions .btn-primary,
body.produto-page .header.header-scrolled .nav-actions .btn-primary {
  background: #ffffff !important;
  color: #25237b !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}


/* HOVER: glow branco suave, sem anel */
body.produto-page .header .nav-actions .btn-primary:hover,
body.produto-page .header.header-scrolled .nav-actions .btn-primary:hover {
  background: #ffffff !important;
  color: #25237b !important;
  border-color: transparent !important;

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.95),
    0 0 38px rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.15) !important;

  transform: translateY(-2px);
}


/* BOTÃO MOBILE */

body.produto-page .header .menu-btn {
  color: #25237b !important;
  background: #ffffff !important;
}


/* SUBMENU CONTINUA BRANCO */

body.produto-page .header .submenu {
  background: rgba(255, 255, 255, 0.98) !important;
}

body.produto-page .header .submenu a {
  color: var(--ink) !important;
}

body.produto-page .header .submenu a:hover {
  color: var(--rp) !important;
  background: var(--soft) !important;
}

/* ========================================
   TOPBAR + MENU SOBRE O CARROSSEL - HOME
======================================== */

/* Topbar sobre o banner */
body.home-page .topbar {
  position: relative;
  z-index: 60;

  background: transparent;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-bottom: 1px solid rgba(255,255,255,0.0);
}

/* Melhora leitura dos textos */
body.home-page .topbar,
body.home-page .topbar a {
  color: #ffffff;
}

body.home-page .topbar a {
  text-shadow: 0 1px 5px rgba(0,0,0,0.35);
}


/* Carrossel sobe por trás da topbar + menu */
body.home-page .banner-carousel {
  margin-top: -120px;
}

@media (max-width: 1200px) {

  body.home-page .banner-carousel {
    margin-top: -114px;
  }

}

@media (max-width: 680px) {

  body.home-page .banner-carousel {
    margin-top: -106px;
  }

}

/* ========================================
   TOPBAR DAS PÁGINAS INTERNAS
======================================== */

body.relogio-page .header,
body.relogio-page .header:not(.header-scrolled),
body.relogio-page .header.header-scrolled,
body.produto-page .header,
body.produto-page .header:not(.header-scrolled),
body.produto-page .header.header-scrolled {
  background: var(--dark-site) !important;
}

body.relogio-page .topbar,
body.produto-page .topbar {
  background: var(--dark-site) !important;
}

/* ========================================
   PÁGINA SISTEMAS EM NUVEM
======================================== */

.sistemas-section {
  padding-top: 65px;
  padding-bottom: 80px;
}

.sistemas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}


/* CARD */

.sistema-card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 24px;

  box-shadow: 0 16px 40px rgba(7, 28, 53, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.sistema-card:hover {
  transform: translateY(-7px);

  border-color: transparent;

  box-shadow:
    0 24px 55px rgba(7, 28, 53, 0.16);
}


/* ÁREA DA IMAGEM */

.sistema-image {
  width: 100%;
  height: 280px;

  padding: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(30, 182, 217, 0.15),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #f8fbff,
      #edf4fa
    );
}


.sistema-image img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 270px;
  max-height: 210px;

  object-fit: contain;
  object-position: center;

  transition: transform 0.35s ease;
}


.sistema-card:hover .sistema-image img {
  transform: scale(1.05);
}


/* CONTEÚDO */

.sistema-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 26px 28px 30px;
}


.sistema-category {
  display: block;

  margin-bottom: 8px;

  color: var(--blue);

  font-size: 0.78rem;
  font-weight: 500;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.sistema-content h2 {
  margin: 0 0 12px;

  color: var(--navy);

  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


.sistema-content p {
  margin-bottom: 22px;

  color: var(--muted);

  font-size: 1rem;
  line-height: 1.5;
}


.sistema-content .card-link {
  margin-top: auto;

  color: var(--rp);

  font-weight: 500;
}

@media (max-width: 1020px) {

  .sistemas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 680px) {

  .sistemas-section {
    padding-top: 45px;
  }

  .sistemas-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sistema-image {
    height: 250px;
  }

  .sistema-content {
    padding: 23px 24px 26px;
    text-align: center;
  }

}

.especificacoes-relogio p.lead {
  margin: 0 !important;
  padding: 0;
  line-height: 1.45;
}

/* ========================================
   PÁGINA SEGURANÇA ELETRÔNICA
======================================== */

.seguranca-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

.seguranca-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}


/* CARD */

.seguranca-card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 24px;

  box-shadow: 0 16px 40px rgba(7, 28, 53, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.seguranca-card:hover {
  transform: translateY(-7px);

  border-color: transparent;

  box-shadow:
    0 24px 55px rgba(7, 28, 53, 0.16);
}


/* IMAGEM */

.seguranca-image {
  width: 100%;
  height: 245px;

  padding: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(30, 182, 217, 0.15),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #f8fbff,
      #edf4fa
    );
}


.seguranca-image img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 500px;
  max-height: 500px;

  object-fit: contain;
  object-position: center;

  transition: transform 0.35s ease;
}


.seguranca-card:hover .seguranca-image img {
  transform: scale(1.05);
}


/* CONTEÚDO */

.seguranca-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 24px 25px 28px;
}


.seguranca-category {
  display: block;

  margin-bottom: 7px;

  color: var(--blue);

  font-size: 0.76rem;
  font-weight: 500;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.seguranca-content h2 {
  margin: 0 0 12px;

  color: var(--navy);

  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


.seguranca-content p {
  margin: 0;

  color: var(--muted);

  font-size: 0.98rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {

  .seguranca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 680px) {

  .seguranca-section {
    padding-top: 45px;
  }

  .seguranca-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .seguranca-image {
    height: 240px;
  }

  .seguranca-content {
    padding: 22px 24px 26px;
    text-align: center;
  }

}

/* ========================================
   CARROSSEL DOS CARDS DE SEGURANÇA
======================================== */

.seguranca-carousel {
  position: relative;
  overflow: hidden;
}


/* Imagens do carrossel */

.seguranca-carousel .seguranca-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  margin: auto;

  padding: 30px;

  object-fit: contain;
  object-position: center;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


/* Imagem atualmente visível */

.seguranca-carousel .seguranca-slide.active {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   IMAGENS GRANDES NOS CARDS DE SEGURANÇA
======================================== */

.seguranca-image {
  position: relative;
  width: 100%;
  height: 245px;

  padding: 0;
  overflow: hidden;

  background: #f4f8fc;
}


/* Imagens do carrossel ocupando toda a área */

.seguranca-carousel .seguranca-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    transform 4s ease;
}


.seguranca-carousel .seguranca-slide.active {
  opacity: 1;
  visibility: visible;
}


/* Efeito suave nas bordas */

.seguranca-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;

  pointer-events: none;

  box-shadow:
    inset 0 0 22px rgba(7, 28, 53, 0.10),
    inset 0 -18px 25px rgba(255, 255, 255, 0.16);
}

/* ========================================
   ALTURA IGUAL DOS CARDS DE RELÓGIOS
======================================== */

.relogios-grid {
  align-items: stretch;
}

/* Caso o link esteja envolvendo o card */
.relogios-grid > a {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Card sempre ocupa toda a altura disponível */
.relogio-card {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

/* Área de texto preenche o restante do card */
.relogio-content {
  flex: 1;

  display: flex;
  flex-direction: column;
}

/* =====================================================
   PÁGINA SUPORTE TÉCNICO
===================================================== */


/* =====================================================
   APRESENTAÇÃO - FOTO INTEGRADA AO FUNDO
===================================================== */

.suporte-intro {
  padding-top: 70px;
  padding-bottom: 70px;
}


.suporte-intro-box {
  position: relative;

  min-height: 500px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border-radius: 32px;

  background:
    linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 44%,
      rgba(255, 255, 255, 0.96) 53%,
      rgba(255, 255, 255, 0.65) 67%,
      rgba(255, 255, 255, 0.10) 100%
    ),
    url("../img/suporte/suporte-tecnico.jpg");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  box-shadow: 0 18px 50px rgba(7, 28, 53, 0.08);
}


.suporte-intro-content {
  position: relative;
  z-index: 2;

  width: 58%;
  max-width: 690px;

  padding: 60px;
}


.suporte-intro-content h2 {
  margin-top: 10px;
}


.suporte-intro-content .lead {
  margin-bottom: 20px;
}



/* =====================================================
   FAIXA DE MARCAS
===================================================== */

.suporte-marcas-section {
  padding: 35px 0 65px;
}


.suporte-marcas-titulo {
  margin-bottom: 30px;

  text-align: center;

  color: var(--muted);

  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}


.suporte-marcas {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  padding: 30px 45px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


.suporte-marcas img {
  display: block;

  width: auto;
  height: 45px;

  max-width: 145px;

  object-fit: contain;

  opacity: 0.60;

  filter: grayscale(100%);

  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}


.suporte-marcas img:hover {
  opacity: 1;

  filter: grayscale(0%);

  transform: translateY(-3px);
}



/* =====================================================
   MANUTENÇÃO / LOCAÇÃO
===================================================== */

.suporte-servico {
  overflow: hidden;
}


.suporte-servico-grid {
  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  gap: 70px;

  align-items: center;
}


.suporte-servico-imagem {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  border-radius: 32px;

  box-shadow: 0 22px 55px rgba(7, 28, 53, 0.14);
}


.suporte-servico-imagem img {
  display: block;

  width: 100%;
  height: 520px;

  object-fit: cover;
  object-position: center;

  transition: transform 0.8s ease;
}


.suporte-servico-imagem:hover img {
  transform: scale(1.035);
}


/* Efeito suave nas bordas da foto */

.suporte-servico-imagem::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  box-shadow:
    inset 0 0 30px rgba(7, 28, 53, 0.10);
}


.suporte-servico-content h2 {
  margin-top: 10px;
  margin-bottom: 25px;
}


.suporte-servico-content .lead {
  margin-bottom: 20px;
}



/* =====================================================
   PALAVRAS DE DESTAQUE
===================================================== */

.suporte-destaques {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 32px;

  color: var(--navy);

  font-weight: 500;

  text-transform: uppercase;

  font-size: 0.8rem;
  letter-spacing: 0.07em;
}


.suporte-destaques i {
  display: block;

  width: 28px;
  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--rp),
    var(--cyan)
  );
}



/* =====================================================
   COMO FUNCIONA
===================================================== */

.suporte-processo {
  background: #ffffff;
}


.suporte-processo-head {
  margin-bottom: 65px;
}


.suporte-processo-linha {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 35px;
}


/* Linha que conecta as etapas */

.suporte-processo-linha::before {
  content: "";

  position: absolute;

  top: 27px;

  left: 7%;
  right: 7%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--rp),
      var(--cyan)
    );
}


.suporte-etapa {
  position: relative;
  z-index: 2;
}


.suporte-etapa-numero {
  width: 56px;
  height: 56px;

  margin-bottom: 22px;

  display: grid;
  place-items: center;

  border-radius: 18px;

  background: var(--dark-site, #06172c);

  color: #ffffff;

  font-size: 1rem;
  font-weight: 500;

  box-shadow: 0 10px 25px rgba(7, 28, 53, 0.18);
}


.suporte-etapa h3 {
  margin-bottom: 8px;
}


.suporte-etapa p {
  margin: 0;

  max-width: 240px;

  color: var(--muted);

  line-height: 1.5;
}



/* =====================================================
   ATENDIMENTO AVULSO
===================================================== */

.suporte-avulso {
  position: relative;

  min-height: 520px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(6, 23, 44, 0.97) 0%,
      rgba(6, 23, 44, 0.93) 42%,
      rgba(6, 23, 44, 0.62) 65%,
      rgba(6, 23, 44, 0.18) 100%
    ),
    url("../img/suporte/atendimento-avulso.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.suporte-avulso-content {
  position: relative;
  z-index: 2;

  width: 58%;
  max-width: 700px;

  color: #ffffff;
}


.suporte-avulso-content h2 {
  margin-top: 10px;

  color: #ffffff;
}


.suporte-avulso-content .lead {
  max-width: 680px;

  color: rgba(255, 255, 255, 0.82);
}


.suporte-avulso-content strong {
  color: #ffffff;
}


.suporte-avulso-content .btn {
  margin-top: 15px;
}



/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 1020px) {

  .suporte-intro-box {
    min-height: 470px;
  }


  .suporte-intro-content {
    width: 70%;

    padding: 45px;
  }


  .suporte-marcas {
    flex-wrap: wrap;

    justify-content: center;

    gap: 35px 50px;
  }


  .suporte-servico-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  /* Na locação, mantém imagem primeiro no tablet */

  .suporte-servico-invertido .suporte-servico-imagem {
    order: -1;
  }


  .suporte-servico-imagem,
  .suporte-servico-imagem img {
    min-height: 420px;
    height: 420px;
  }


  .suporte-processo-linha {
    grid-template-columns: repeat(2, 1fr);

    gap: 50px 40px;
  }


  .suporte-processo-linha::before {
    display: none;
  }


  .suporte-avulso-content {
    width: 75%;
  }

}



@media (max-width: 680px) {

  .suporte-intro {
    padding-top: 45px;
    padding-bottom: 45px;
  }


  .suporte-intro-box {
    min-height: auto;

    padding-top: 250px;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.15) 30%,
        #ffffff 53%,
        #ffffff 100%
      ),
      url("../img/suporte/suporte-tecnico.jpg");

    background-size: auto 300px;
    background-position: center top;
    background-repeat: no-repeat;

    border-radius: 24px;
  }


  .suporte-intro-content {
    width: 100%;
    max-width: none;

    padding: 30px 24px 35px;
  }


  .suporte-intro-content h2 {
    font-size: 2rem;
  }


  .suporte-marcas-section {
    padding-bottom: 45px;
  }


  .suporte-marcas {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    justify-items: center;

    padding: 25px 15px;
  }


  .suporte-marcas img {
    max-width: 110px;
    height: 38px;
  }


  .suporte-servico-grid {
    gap: 30px;
  }


  .suporte-servico-imagem,
  .suporte-servico-imagem img {
    min-height: 300px;
    height: 300px;

    border-radius: 24px;
  }


  .suporte-servico-content {
    text-align: left;
  }


  .suporte-servico-content h2 {
    font-size: 2rem;
  }


  .suporte-destaques {
    gap: 10px;

    font-size: 0.72rem;
  }


  .suporte-destaques i {
    width: 15px;
  }


  .suporte-processo-head {
    margin-bottom: 40px;
  }


  .suporte-processo-linha {
    display: grid;

    grid-template-columns: 1fr;

    gap: 0;
  }


  .suporte-etapa {
    position: relative;

    padding:
      0 0 38px 78px;
  }


  .suporte-etapa:last-child {
    padding-bottom: 0;
  }


  /* linha vertical mobile */

  .suporte-etapa:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 27px;
    top: 56px;

    width: 2px;
    height: calc(100% - 30px);

    background:
      linear-gradient(
        to bottom,
        var(--rp),
        var(--cyan)
      );
  }


  .suporte-etapa-numero {
    position: absolute;

    left: 0;
    top: 0;
  }


  .suporte-etapa p {
    max-width: none;
  }


  .suporte-avulso {
    min-height: 600px;

    align-items: flex-end;

    background:
      linear-gradient(
        to bottom,
        rgba(6, 23, 44, 0.18) 0%,
        rgba(6, 23, 44, 0.55) 30%,
        rgba(6, 23, 44, 0.96) 64%,
        rgba(6, 23, 44, 1) 100%
      ),
      url("../img/suporte/atendimento-avulso.jpg");

    background-position: center;
  }


  .suporte-avulso-content {
    width: 100%;

    padding-top: 230px;
  }


  .suporte-avulso-content h2 {
    font-size: 2.1rem;
  }

}

/*assistencia técnica*/

.assistencia-intro-box {
  position: relative;

  min-height: 500px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border-radius: 32px;

  background:
    linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 44%,
      rgba(255, 255, 255, 0.96) 53%,
      rgba(255, 255, 255, 0.65) 67%,
      rgba(255, 255, 255, 0.10) 100%
    ),
    url("../img/lab2.png");

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  box-shadow: 0 18px 50px rgba(7, 28, 53, 0.08);
}


.assistencia-intro-content {
  position: relative;
  z-index: 2;

  width: 58%;
  max-width: 690px;

  padding: 60px;
}


.assistencia-intro-content h2 {
  margin-top: 10px;
}


.assistencia-intro-content .lead {
  margin-bottom: 20px;
}

/* ========================================
   PÁGINA IDENTIDADE VISUAL
======================================== */

.identidade-section {
  padding-top: 65px;
  padding-bottom: 85px;
}


.identidade-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}


/* Primeiros 3 cards */
.identidade-card {
  grid-column: span 2;
}


/* Quarto card centralizado na segunda linha */
.identidade-card:nth-child(4) {
  grid-column: 2 / span 2;
}


/* Quinto card ao lado do quarto */
.identidade-card:nth-child(5) {
  grid-column: 4 / span 2;
}


/* ========================================
   CARD
======================================== */

.identidade-card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  height: 100%;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 24px;

  box-shadow: 0 16px 40px rgba(7, 28, 53, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.identidade-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 24px 55px rgba(7, 28, 53, 0.14);
}


/* ========================================
   CARROSSEL
======================================== */

.identidade-carousel {
  position: relative;

  width: 100%;
  height: 260px;

  overflow: hidden;

  background: #ffffff
}


/* Somente um efeito visual nas bordas */

.identidade-carousel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 5;

  pointer-events: none;

  box-shadow:
    inset 0 0 22px rgba(7, 28, 53, 0.08),
    inset 0 -12px 18px rgba(255, 255, 255, 0.16);
}


/* Imagens */

.identidade-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  object-fit: cover;

  object-fit: contain;
  object-position: center;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    transform 4.5s ease;
}


/* Slide visível */

.identidade-slide.active {
  opacity: 1;
  visibility: visible;

  transform: scale(1.22);
}


/* ========================================
   CONTEÚDO
======================================== */

.identidade-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 25px 25px 30px;
}


.identidade-category {
  display: block;

  margin-bottom: 8px;

  color: var(--blue);

  font-size: 0.76rem;
  font-weight: 500;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.identidade-content h2 {
  margin: 0 0 12px;

  color: var(--navy);

  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


.identidade-content p {
  margin: 0;

  color: var(--muted);

  font-size: 0.98rem;
  line-height: 1.5;
}


/* ========================================
   RESPONSIVIDADE
======================================== */

@media (max-width: 1000px) {

  .identidade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .identidade-card,
  .identidade-card:nth-child(4),
  .identidade-card:nth-child(5) {
    grid-column: auto;
  }

}


@media (max-width: 680px) {

  .identidade-section {
    padding-top: 45px;
  }

  .identidade-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .identidade-card,
  .identidade-card:nth-child(4),
  .identidade-card:nth-child(5) {
    grid-column: auto;
  }

  .identidade-carousel {
    height: 280px;
  }

  .identidade-content {
    padding: 23px 24px 27px;
    text-align: center;
  }

}

/* =====================================================
   SEO / PÁGINA DE ASSISTÊNCIA TÉCNICA
   Estrutura visual para o conteúdo ampliado de manutenção
===================================================== */

.assistencia-hero .lead {
  max-width: 900px;
}

.assistencia-hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.assistencia-links-contextuais {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.assistencia-links-contextuais a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 28, 53, 0.2);
}

.assistencia-links-contextuais a:hover {
  border-color: var(--rp);
}

.assistencia-section-head {
  max-width: 820px;
  margin-bottom: 48px;
}

.assistencia-section-head h2 {
  margin-top: 10px;
  margin-bottom: 16px;
}

.assistencia-section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.assistencia-diagnostico {
  background: #f7f9fc;
}

.assistencia-problemas-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.assistencia-problema {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 30px 28px 30px 0;
  border-bottom: 1px solid var(--line);
}

.assistencia-problema:nth-child(odd) {
  padding-right: 42px;
  border-right: 1px solid var(--line);
}

.assistencia-problema:nth-child(even) {
  padding-left: 42px;
}

.assistencia-numero {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dark-site, #06172c);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
}

.assistencia-problema h3 {
  margin: 2px 0 9px;
  font-size: 1.08rem;
}

.assistencia-problema p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.assistencia-tipos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.assistencia-tipo {
  position: relative;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
}

.assistencia-tipo-label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7, 28, 53, .07);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.assistencia-tipo h3 {
  margin-bottom: 14px;
}

.assistencia-tipo p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.assistencia-marcas-section {
  background: var(--dark-site, #06172c);
  color: #fff;
}

.assistencia-marcas-section h2,
.assistencia-marcas-section .eyebrow {
  color: #fff;
}

.assistencia-marcas-section .lead {
  color: rgba(255,255,255,.78);
}

.assistencia-marcas-texto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

.assistencia-marcas-texto span {
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-weight: 500;
}

.assistencia-observacao {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  color: rgba(255,255,255,.68);
}

.assistencia-equipamentos-grid,
.assistencia-laboratorio-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.assistencia-check-list {
  border-top: 1px solid var(--line);
}

.assistencia-check-list > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-weight: 500;
}

.assistencia-check-list i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(19, 178, 207, .12);
  color: var(--rp);
  font-size: .75rem;
}

.assistencia-processo {
  background: #f7f9fc;
}

.assistencia-processo-linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px 25px;
}

.assistencia-etapa {
  position: relative;
  flex: 0 1 300px;
  width: 300px;
  height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--dark-site);
  color: #ffffff;
}

.assistencia-etapa-numero {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
}

.assistencia-etapa-texto h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #ffffff;
}

.assistencia-etapa-texto p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  font-size: .92rem;
}

.assistencia-etapa::after {
  position: absolute;
  z-index: 5;
  color: var(--muted);
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  pointer-events: none;
}

/* =====================================================
   FLUXO DAS 6 ETAPAS - DESKTOP
   Ordem visual:
   01 → 02 → 03
             ↓
   06 ← 05 ← 04

   IMPORTANTE:
   No HTML, a segunda linha está na ordem 06, 05, 04.
   Portanto:
   nth-child(4) = etapa 06
   nth-child(5) = etapa 05
   nth-child(6) = etapa 04
===================================================== */
@media (min-width: 1021px) {

  /* 01 → 02 e 02 → 03 */
  .assistencia-etapa:nth-child(1)::after,
  .assistencia-etapa:nth-child(2)::after {
    content: "→";
    display: block;
    top: 50%;
    right: -29px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }

  /* 03 desce para 04 */
  .assistencia-etapa:nth-child(3)::after {
    content: "↓";
    display: block;
    top: auto;
    right: auto;
    bottom: -43px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 06 encerra o fluxo */
  .assistencia-etapa:nth-child(4)::after {
    content: none;
    display: none;
  }

  /* 05 → 06 e 04 → 05, ambos apontando para a esquerda */
  .assistencia-etapa:nth-child(5)::after,
  .assistencia-etapa:nth-child(6)::after {
    content: "←";
    display: block;
    top: 50%;
    right: auto;
    bottom: auto;
    left: -29px;
    transform: translateY(-50%);
  }
}


/* =====================================================
   TABLET - fluxo em 2 colunas
   01 → 02
        ↓
   04 ← 03
   ↓
   05 → 06
===================================================== */
@media (min-width: 721px) and (max-width: 1020px) {

  .assistencia-processo-linha {
    column-gap: 55px;
    row-gap: 55px;
  }

  /* Reorganiza apenas visualmente as etapas */
  .assistencia-etapa:nth-child(1) { order: 1; }
  .assistencia-etapa:nth-child(2) { order: 2; }
  .assistencia-etapa:nth-child(6) { order: 3; } /* 04 */
  .assistencia-etapa:nth-child(3) { order: 4; } /* 03 */
  .assistencia-etapa:nth-child(5) { order: 5; } /* 05 */
  .assistencia-etapa:nth-child(4) { order: 6; } /* 06 */

  .assistencia-etapa::after {
    content: none;
    display: none;
  }

  /* 01 → 02 */
  .assistencia-etapa:nth-child(1)::after {
    content: "→";
    display: block;
    top: 50%;
    right: -43px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }

  /* 02 ↓ 03 */
  .assistencia-etapa:nth-child(2)::after {
    content: "↓";
    display: block;
    top: auto;
    right: auto;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 03 ← 04 */
  .assistencia-etapa:nth-child(3)::after {
    content: "←";
    display: block;
    top: 50%;
    right: auto;
    bottom: auto;
    left: -43px;
    transform: translateY(-50%);
  }

  /* 04 ↓ 05 */
  .assistencia-etapa:nth-child(6)::after {
    content: "↓";
    display: block;
    top: auto;
    right: auto;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 05 → 06 */
  .assistencia-etapa:nth-child(5)::after {
    content: "→";
    display: block;
    top: 50%;
    right: -43px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
  }

  /* 06 encerra */
  .assistencia-etapa:nth-child(4)::after {
    content: none;
    display: none;
  }
}

.assistencia-laboratorio {
  background: #fff;
}

.assistencia-laboratorio-copy p:not(.lead) {
  color: var(--muted);
  line-height: 1.7;
}

.assistencia-endereco {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-style: normal;
  line-height: 1.7;
}

.assistencia-endereco strong {
  color: var(--navy);
}

.assistencia-endereco a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.assistencia-laboratorio-destaques {
  display: grid;
  gap: 16px;
}

.assistencia-laboratorio-destaques > div {
  padding: 28px 32px;
  border-radius: 22px;
  background: #f7f9fc;
  border: 1px solid var(--line);
}

.assistencia-laboratorio-destaques strong,
.assistencia-laboratorio-destaques span {
  display: block;
}

.assistencia-laboratorio-destaques strong {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 1.12rem;
}

.assistencia-laboratorio-destaques span {
  color: var(--muted);
}

.assistencia-faq {
  background: #f7f9fc;
}

.assistencia-faq-list {
  max-width: 900px;
}

.assistencia-faq-list details {
  border-top: 1px solid var(--line);
}

.assistencia-faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.assistencia-faq-list summary {
  position: relative;
  padding: 23px 42px 23px 0;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.assistencia-faq-list summary::-webkit-details-marker {
  display: none;
}

.assistencia-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 19px;
  font-size: 1.45rem;
  font-weight: 300;
}

.assistencia-faq-list details[open] summary::after {
  content: "−";
}

.assistencia-faq-list details p {
  max-width: 800px;
  margin: -4px 0 24px;
  color: var(--muted);
  line-height: 1.7;
}

.produto-assistencia {
  padding: 58px 0;
  background: #f7f9fc;
}

.produto-assistencia-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 34px 38px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #fff;
}

.produto-assistencia h2 {
  margin: 6px 0 10px;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
}

.produto-assistencia p {
  max-width: 800px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.relogio-resumo {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.catalogo-assistencia {
  padding-top: 10px;
}

@media (max-width: 1020px) {
  .assistencia-problemas-lista {
    grid-template-columns: 1fr;
  }

  .assistencia-problema:nth-child(odd),
  .assistencia-problema:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .assistencia-processo-linha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .assistencia-equipamentos-grid,
  .assistencia-laboratorio-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

@media (max-width: 720px) {
  .assistencia-intro-box {
    min-height: 0;
    background:
      linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
      url("../img/lab2.png");
    background-size: cover;
    background-position: center;
  }

  .assistencia-intro-content {
    width: 100%;
    max-width: none;
    padding: 34px 24px;
  }

  .assistencia-tipos-grid {
    gap: 55px;
  }

  .assistencia-processo-linha {
    gap: 55px;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* No mobile, mostra as etapas em ordem lógica: 01, 02, 03, 04, 05, 06 */
  .assistencia-etapa:nth-child(1) { order: 1; }
  .assistencia-etapa:nth-child(2) { order: 2; }
  .assistencia-etapa:nth-child(3) { order: 3; }
  .assistencia-etapa:nth-child(6) { order: 4; } /* 04 */
  .assistencia-etapa:nth-child(5) { order: 5; } /* 05 */
  .assistencia-etapa:nth-child(4) { order: 6; } /* 06 */

  .assistencia-etapa {
    width: min(300px, 100%);
    min-height: 300px;
    height: auto;
    flex: 0 0 auto;
  }

  .assistencia-etapa::after {
    content: none;
    display: none;
  }

  /* Setas verticais entre 01 → 02 → 03 → 04 → 05 → 06 */
  .assistencia-etapa:nth-child(1)::after,
  .assistencia-etapa:nth-child(2)::after,
  .assistencia-etapa:nth-child(3)::after,
  .assistencia-etapa:nth-child(6)::after,
  .assistencia-etapa:nth-child(5)::after {
    content: "↓";
    display: block;
    top: auto;
    right: auto;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 06 é a última etapa */
  .assistencia-etapa:nth-child(4)::after {
    content: none;
    display: none;
  }

  .assistencia-tipo {
    padding: 28px 24px;
  }

  .assistencia-problema {
    grid-template-columns: 46px 1fr;
    gap: 14px;
  }

  .produto-assistencia-inner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
}

/* =====================================================
   AJUSTES FINAIS DE RESPONSIVIDADE - MOBILE
   1) HOME: banner não fica mais por trás do cabeçalho
   2) PÁGINAS INTERNAS: menu/submenu mobile com contraste
===================================================== */

/* ---------- MENU MOBILE DAS PÁGINAS INTERNAS ---------- */
@media (max-width: 1200px) {
  body.produto-page .header .nav-links,
  body.relogio-page .header .nav-links,
  body.internal-page .header .nav-links {
    background: rgba(7, 28, 53, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28) !important;
  }

  body.produto-page .header .nav-links > a,
  body.produto-page .header .nav-main-link,
  body.relogio-page .header .nav-links > a,
  body.relogio-page .header .nav-main-link,
  body.internal-page .header .nav-links > a,
  body.internal-page .header .nav-main-link {
    color: #ffffff !important;
  }

  body.produto-page .header .nav-links > a,
  body.relogio-page .header .nav-links > a,
  body.internal-page .header .nav-links > a,
  body.produto-page .nav-dropdown-trigger,
  body.relogio-page .nav-dropdown-trigger,
  body.internal-page .nav-dropdown-trigger {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }

  body.produto-page .submenu-toggle,
  body.relogio-page .submenu-toggle,
  body.internal-page .submenu-toggle {
    color: #ffffff !important;
  }

  body.produto-page .header .submenu,
  body.relogio-page .header .submenu,
  body.internal-page .header .submenu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.produto-page .header .submenu a,
  body.relogio-page .header .submenu a,
  body.internal-page .header .submenu a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-bottom: 4px;
  }

  body.produto-page .header .submenu a:hover,
  body.produto-page .header .submenu a:focus-visible,
  body.relogio-page .header .submenu a:hover,
  body.relogio-page .header .submenu a:focus-visible,
  body.internal-page .header .submenu a:hover,
  body.internal-page .header .submenu a:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
  }
}

/* ---------- HOME / BANNER EM SMARTPHONES ---------- */
@media (max-width: 680px) {
  /* No celular o cabeçalho deixa de ficar sobre o banner. */
  body.home-page .topbar {
    background: var(--dark-site) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-page .header,
  body.home-page .header:not(.header-scrolled) {
    background: var(--dark-site) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
  }

  /* Quando rolar a página, mantém o comportamento claro já existente. */
  body.home-page .header.header-scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom-color: rgba(223, 231, 240, 0.8) !important;
    box-shadow: 0 8px 25px rgba(7, 28, 53, 0.10) !important;
  }

  body.home-page .banner-carousel {
    margin-top: 0 !important;
    min-height: 0 !important;
    background: var(--dark-site);
  }

  body.home-page .carousel-track {
    min-height: 0 !important;
  }

  body.home-page .carousel-slide img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Controles menores para não esconder a arte do banner. */
  body.home-page .carousel-arrow {
    width: 36px;
    height: 36px;
    border-width: 1px;
  }

  body.home-page .carousel-arrow::before {
    width: 8px;
    height: 8px;
    border-top-width: 2px;
    border-right-width: 2px;
  }

  body.home-page .carousel-prev {
    left: 10px;
  }

  body.home-page .carousel-next {
    right: 10px;
  }

  body.home-page .carousel-dots {
    bottom: 9px;
    gap: 6px;
  }

  body.home-page .carousel-dot {
    width: 9px;
    height: 9px;
  }

  body.home-page .carousel-dot.active {
    width: 24px;
  }
}

/* =========================================================
   AJUSTES FINAIS - INDEX + SUPORTE TÉCNICO
========================================================= */



/* ---------------------------------------------------------
   CELULAR
--------------------------------------------------------- */

@media (max-width: 680px) {

  /* =========================================
     INDEX - DESDE 1996
     Remove a foto da fachada no celular
  ========================================= */

  body.home-page #diferenciais .about-text {
    background: #ffffff !important;

    min-height: auto !important;

    padding: 24px 20px !important;

    overflow: visible !important;
  }


  /* =========================================
     SUPORTE TÉCNICO
     Remove a foto do suporte no celular
  ========================================= */

  body.internal-page .suporte-intro-box {
    min-height: auto !important;

    padding-top: 0 !important;

    background: #ffffff !important;

    background-image: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
  }


  body.internal-page .suporte-intro-content {
    width: 100% !important;
    max-width: none !important;

    padding: 20px 0 30px !important;
  }

}

/* =====================================================
   CORREÇÃO FINAL - SUPORTE + DESDE 1996
===================================================== */



/* -----------------------------------------------------
   MOBILE
----------------------------------------------------- */

@media (max-width: 680px) {



  /* ===================================================
     SUPORTE TÉCNICO
     Remove completamente a imagem no celular
  =================================================== */

  body.produto-page .suporte-intro-box {
    min-height: auto !important;

    padding-top: 0 !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
  }


  body.produto-page .suporte-intro-content {
    width: 100% !important;
    max-width: none !important;

    padding: 20px 0 30px !important;
  }

}

/* =====================================================
   PÁGINA DE LOCAÇÃO DE EQUIPAMENTOS
   COLE ESTE BLOCO NO FINAL DO style.css
===================================================== */


/* =========================================
   HERO
========================================= */

.locacao-hero .lead {
  max-width: 930px;
}

.locacao-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 30px;
}


/* =========================================
   APRESENTAÇÃO
========================================= */

.locacao-apresentacao-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;
}

.locacao-apresentacao-copy p:not(.lead) {
  color: var(--muted);

  line-height: 1.75;
}


/* =========================================
   EQUIPAMENTOS
========================================= */

.locacao-equipamentos-visual {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}


.locacao-equipamento {
  min-height: 230px;

  padding: 26px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  position: relative;

  overflow: hidden;


  border:
    1px solid var(--line);

  border-radius: 24px;


  background:

    radial-gradient(
      circle at 75% 15%,
      rgba(30, 182, 217, 0.16),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #f8fbff,
      #edf4fa
    );


  box-shadow:
    0 18px 42px
    rgba(7, 28, 53, 0.08);
}


.locacao-equipamento-destaque {
  grid-row: span 2;

  min-height: 476px;
}


.locacao-equipamento img {
  width: 100%;

  height: 180px;

  object-fit: contain;

  object-position: center;


  transition:
    transform 0.35s ease;
}


.locacao-equipamento-destaque img {
  height: 350px;
}


.locacao-equipamento:hover img {
  transform: scale(1.04);
}


.locacao-equipamento span {
  margin-top: 14px;

  color: var(--navy);

  font-weight: 500;
}


/* =========================================
   CABEÇALHOS DAS SEÇÕES
========================================= */

.locacao-section-head {
  max-width: 850px;

  margin-bottom: 48px;
}


.locacao-section-head h2 {
  margin-top: 10px;
}


.locacao-section-head-center {
  margin-left: auto;

  margin-right: auto;

  text-align: center;
}


/* =========================================
   BENEFÍCIOS
========================================= */

.locacao-beneficios-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 25px;
}


.locacao-beneficio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  padding: 25px;
  border-radius: 50%;
  background: var(--success);
  color: #ffffff;
  margin: 0 auto;
}


.locacao-beneficio > span {
  display: block;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.locacao-section-head.locacao-vantagens-head {
  max-width: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
}

.locacao-section-head.locacao-vantagens-head h2 {
  max-width: 850px;
  margin-bottom: 16px;
}


.locacao-beneficio h3 {
  color: #ffffff;
  font-size: 1.1rem;
}


.locacao-beneficio p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.65;
}


/* =========================================
   PONTOS DE ATENÇÃO
========================================= */

.locacao-atencao-grid {
  display: grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap: 80px;

  align-items: start;
}


.locacao-atencao-lista {
  border-top:
    1px solid var(--line);
}


.locacao-atencao-lista > div {
  padding: 24px 0;

  display: grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap: 30px;


  border-bottom:
    1px solid var(--line);
}


.locacao-atencao-lista strong {
  color: var(--navy);

  font-size: 1.06rem;
}


.locacao-atencao-lista p {
  margin: 0;

  color: var(--muted);

  line-height: 1.65;
}


/* =========================================
   COMPARATIVO
========================================= */

.locacao-comparativo-box {
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 28px;

  background: #ffffff;


  box-shadow:
    0 20px 50px
    rgba(7, 28, 53, 0.08);
}


.locacao-comparativo-header,
.locacao-comparativo-row {
  display: grid;

  grid-template-columns:
    0.8fr 1.1fr 1.1fr;
}


.locacao-comparativo-header {
  background:
    var(--dark-site);

  color: #ffffff;

  font-weight: 500;
}


.locacao-comparativo-header > div {
  padding: 20px 24px;
}


.locacao-comparativo-row {
  border-bottom:
    1px solid var(--line);
}


.locacao-comparativo-row:last-child {
  border-bottom: 0;
}


.locacao-comparativo-row > * {
  margin: 0;

  padding: 23px 24px;

  border-right:
    1px solid var(--line);
}


.locacao-comparativo-row > *:last-child {
  border-right: 0;
}


.locacao-comparativo-row > strong {
  color: var(--navy);
}


.locacao-comparativo-row p {
  color: var(--muted);

  line-height: 1.55;
}


.locacao-comparativo-row p:nth-child(2) {
  background:
    rgba(18, 51, 179, 0.025);
}


.locacao-comparativo-row b {
  color: var(--navy);
}


/* =========================================
   LOCAÇÃO OU AQUISIÇÃO
========================================= */

.locacao-escolha-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}


.locacao-escolha-card {
  padding: 40px;

  border:
    1px solid var(--line);

  border-radius: 28px;

  background: #ffffff;
}


.locacao-escolha-card-destaque {
  color: #ffffff;

  border-color: transparent;


  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(30,182,217,0.25),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      var(--navy),
      #103d6e
    );
}


.locacao-escolha-label {
  display: inline-block;

  margin-bottom: 22px;

  padding: 7px 13px;

  border-radius: 999px;


  background:
    rgba(7,28,53,0.07);

  color: var(--navy);


  font-size: 0.76rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.locacao-escolha-card-destaque
.locacao-escolha-label {
  color: #ffffff;

  background:
    rgba(255,255,255,0.12);
}


.locacao-escolha-card h3 {
  margin-bottom: 24px;
}


.locacao-escolha-card-destaque h3 {
  color: #ffffff;
}


.locacao-escolha-card ul {
  margin: 0;

  padding: 0;

  list-style: none;
}


.locacao-escolha-card li {
  position: relative;

  padding:
    15px 0 15px 28px;

  border-bottom:
    1px solid var(--line);

  color: var(--muted);
}


.locacao-escolha-card li:last-child {
  border-bottom: 0;
}


.locacao-escolha-card li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: var(--rp);

  font-weight: 700;
}


.locacao-escolha-card-destaque li {
  color:
    rgba(255,255,255,0.80);

  border-bottom-color:
    rgba(255,255,255,0.12);
}


.locacao-escolha-card-destaque li::before {
  color: #67d8ee;
}


/* =========================================
   PROCESSO
========================================= */

.locacao-processo-linha {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;
}


.locacao-processo-linha article {
  padding: 28px;

  border:
    1px solid var(--line);

  border-radius: 22px;

  background: #ffffff;
}


.locacao-processo-linha article > span {
  display: inline-grid;

  place-items: center;


  width: 42px;

  height: 42px;

  margin-bottom: 25px;


  border-radius: 13px;


  background:
    var(--dark-site);


  color: #ffffff;


  font-size: 0.78rem;

  font-weight: 600;
}


.locacao-processo-linha h3 {
  color: var(--navy);
}


.locacao-processo-linha p {
  margin: 0;

  color: var(--muted);

  line-height: 1.6;
}


/* =========================================
   FAQ
========================================= */

.locacao-faq-grid {
  display: grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap: 70px;

  align-items: start;
}


.locacao-faq-list {
  max-width: 900px;
}


.locacao-faq-list details {
  border-top:
    1px solid var(--line);
}


.locacao-faq-list details:last-child {
  border-bottom:
    1px solid var(--line);
}


.locacao-faq-list summary {
  position: relative;

  padding:
    23px 42px 23px 0;

  color: var(--navy);

  font-weight: 600;

  cursor: pointer;

  list-style: none;
}


.locacao-faq-list summary::-webkit-details-marker {
  display: none;
}


.locacao-faq-list summary::after {
  content: "+";

  position: absolute;

  right: 0;

  top: 19px;

  font-size: 1.45rem;

  font-weight: 300;
}


.locacao-faq-list details[open]
summary::after {
  content: "−";
}


.locacao-faq-list details p {
  max-width: 800px;

  margin:
    -4px 0 24px;

  color: var(--muted);

  line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1020px) {


  .locacao-apresentacao-grid,
  .locacao-atencao-grid,
  .locacao-faq-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .locacao-beneficios-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .locacao-processo-linha {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 720px) {


  .locacao-hero-actions {
    flex-direction: column;
  }


  .locacao-hero-actions .btn {
    width: 100%;
  }


  .locacao-equipamentos-visual {
    grid-template-columns: 1fr;
  }


  .locacao-equipamento,
  .locacao-equipamento-destaque {
    grid-row: auto;

    min-height: 260px;
  }


  .locacao-equipamento img,
  .locacao-equipamento-destaque img {
    height: 210px;
  }


  .locacao-beneficios-grid,
  .locacao-escolha-grid,
  .locacao-processo-linha {
    grid-template-columns: 1fr;
  }

  .locacao-atencao-lista > div {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .locacao-escolha-card {
    padding: 30px 24px;
  }


  /* -----------------------------------------
     COMPARATIVO NO CELULAR
  ----------------------------------------- */

  .locacao-comparativo-box {
    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  .locacao-comparativo-header {
    display: none;
  }


  .locacao-comparativo-row {
    display: block;

    margin-bottom: 18px;

    overflow: hidden;


    border:
      1px solid var(--line);

    border-radius: 20px;


    background: #ffffff;
  }


  .locacao-comparativo-row > * {
    display: block;

    padding: 17px 20px;

    border-right: 0;

    border-bottom:
      1px solid var(--line);
  }


  .locacao-comparativo-row > *:last-child {
    border-bottom: 0;
  }


  .locacao-comparativo-row > strong {
    background:
      var(--dark-site);

    color: #ffffff;
  }


  .locacao-comparativo-row
  p:nth-child(2)::before {
    content: "Locação";

    display: block;

    margin-bottom: 5px;


    color: var(--rp);


    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
  }


  .locacao-comparativo-row
  p:nth-child(3)::before {
    content: "Aquisição";

    display: block;

    margin-bottom: 5px;


    color: var(--navy);


    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
  }

}

.card-link-wrapper {
  display: flex;
  text-decoration: none;
  color: inherit;
}
.card-link-wrapper .card {
  width: 100%;
}

/* =====================================================
   RECURSOS OPCIONAIS - PÁGINA DE LOCAÇÃO
===================================================== */

.locacao-opcionais {
  width: 100%;

  margin-top: 55px;
  padding: 42px;

  border: 1px solid var(--line);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(30, 182, 217, 0.10),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #f8fbff,
      #edf4fa
    );

  box-shadow:
    0 18px 45px rgba(7, 28, 53, 0.06);
}


/* TEXTO */

.locacao-opcionais-texto {
  max-width: 100%;
}

.locacao-opcionais-texto .eyebrow {
  margin-bottom: 10px;
}

.locacao-opcionais-texto h3 {
  max-width: 850px;

  margin-bottom: 16px;

  color: var(--navy);

  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
}

.locacao-opcionais-texto .lead {
  max-width: none;

  margin-bottom: 0;

  color: var(--muted);
}


/* =========================================
   ITENS
========================================= */

.locacao-opcionais-itens {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;

  margin-top: 38px;
}


/* CARD INDIVIDUAL */

.locacao-opcional-item {
  display: grid;

  grid-template-columns: 190px 1fr;

  min-height: 220px;

  overflow: hidden;

  border:
    1px solid rgba(223, 231, 240, 0.9);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.78);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.locacao-opcional-item:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 38px rgba(7, 28, 53, 0.10);
}


/* IMAGEM */

.locacao-opcional-imagem {
  min-height: 220px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 25px;

  background: #ffffff;
}


.locacao-opcional-imagem img {
  display: block;

  width: 100%;
  height: 170px;

  object-fit: contain;
  object-position: center;

  transition:
    transform 0.35s ease;
}


.locacao-opcional-item:hover
.locacao-opcional-imagem img {
  transform: scale(1.05);
}


/* TEXTO DO ITEM */

.locacao-opcional-info {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding: 28px;
}


.locacao-opcional-info > span {
  display: block;

  margin-bottom: 7px;

  color: var(--blue);

  font-size: 0.74rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.locacao-opcional-info h4 {
  margin: 0 0 10px;

  color: var(--navy);

  font-size: 1.35rem;
}


.locacao-opcional-info p {
  margin: 0;

  color: var(--muted);

  font-size: 0.96rem;
  line-height: 1.55;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1020px) {

  .locacao-opcionais {
    padding: 35px;
  }

  .locacao-opcionais-itens {
    grid-template-columns: 1fr;
  }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 680px) {

  .locacao-opcionais {
    margin-top: 35px;

    padding: 26px 20px;

    border-radius: 22px;
  }


  .locacao-opcional-item {
    grid-template-columns: 1fr;
  }


  .locacao-opcional-imagem {
    min-height: 210px;

    padding: 22px;
  }


  .locacao-opcional-imagem img {
    height: 180px;
  }


  .locacao-opcional-info {
    padding: 24px;
  }

}

/* =====================================================
   RECLAME AQUI - SELO OFICIAL
===================================================== */

.ra-home-verificacao {
  margin-top: 28px;
  padding-top: 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;

  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ra-home-verificacao-copy strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 500;
}

.ra-home-verificacao-copy p {
  max-width: 380px;
  margin: 0;
  color: #c9d8e8;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Não estilizamos internamente o selo oficial: o próprio Reclame Aqui controla o visual. */
.ra-home-verificacao-selo {
  min-width: 155px;
  min-height: 58px;

  display: grid;
  place-items: center;

  position: relative;
}

/*#ra-verified-seal {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
}*/

/* =====================================================
   RECLAME AQUI - SELOS OFICIAIS
===================================================== */

#ra-verified-seal-home,
#ra-verified-seal-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Footer */

.footer-ra-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  margin-top: 24px;
}


/* evita regras antigas da imagem fallback */
.footer-ra-link img {
  max-width: none;
}

/* Se o embed oficial renderizar, esta imagem de contingência é ocultada pelo JS. */
.ra-seal-fallback {
  display: block;
  line-height: 0;
}

.ra-seal-fallback.is-hidden {
  display: none;
}

.ra-seal-fallback img {
  display: block;
  width: 149px;
  height: auto;
  max-width: 100%;
}

/* Enquanto o embed está vazio, ele não reserva uma caixa branca artificial. */
#ra-verified-seal.is-empty {
  display: none;
}

.footer-ra-link {
  display: inline-block;
  width: 142px;
  max-width: 100%;
  margin-top: 18px;
  line-height: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-ra-link img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-ra-link:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

@media (max-width: 680px) {
  .ra-home-verificacao {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ra-home-verificacao-copy p {
    max-width: none;
  }

  .ra-home-verificacao-selo {
    width: 100%;
    justify-items: start;
  }
}

/* =====================================================
   IMAGEM DECORATIVA - VANTAGENS DA LOCAÇÃO
===================================================== */

.locacao-section-head.locacao-vantagens-head {
  position: relative;

  max-width: none;

  min-height: 300px;

  padding-right: 430px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;
}


/* Mantém texto na frente da imagem */
.locacao-vantagens-head > * {
  position: relative;
  z-index: 2;
}


/* Equipamento no canto direito */
.locacao-vantagens-head::after {
  content: "";

  position: absolute;

  right: 20px;
  top: 50%;

  width: 390px;
  height: 290px;

  transform: translateY(-50%);

  background-image: url("../img/idclass2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.22;

  z-index: 1;

  pointer-events: none;
}
@media (max-width: 1020px) {

  .locacao-section-head.locacao-vantagens-head {
    padding-right: 300px;
  }

  .locacao-vantagens-head::after {
    width: 290px;
    height: 250px;
    right: 0;
    opacity: 0.18;
  }

}
@media (max-width: 680px) {

  .locacao-section-head.locacao-vantagens-head {
    min-height: auto;
    padding-right: 0;
  }

  .locacao-vantagens-head::after {
    display: none;
  }

}

.locacao-opcional-link-wrapper {
  text-decoration: none;
  color: inherit;
  display: flex;
}

.locacao-opcional-link-wrapper .locacao-opcional-item {
  width: 100%;
}

.locacao-opcional-info .card-link {
  margin-top: auto;
}

/* =====================================================
   ASSISTÊNCIA TÉCNICA
   MAIS ESPAÇO ENTRE OS CÍRCULOS - DESKTOP
===================================================== */

@media (min-width: 1021px) {

  .assistencia-processo-linha {
    /* primeiro valor = distância vertical
       segundo valor = distância horizontal */
    gap: 85px 70px;
  }


  /* =========================================
     SETAS DA PRIMEIRA LINHA
     01 → 02 → 03
  ========================================= */

  .assistencia-etapa:nth-child(1)::after,
  .assistencia-etapa:nth-child(2)::after {
    right: -52px;
    left: auto;

    font-size: 2.4rem;
  }


  /* =========================================
     SETA DO 03 PARA O 04
  ========================================= */

  .assistencia-etapa:nth-child(3)::after {
    content: "↓";

    top: auto;
    bottom: -64px;

    left: 50%;
    right: auto;

    transform: translateX(-50%);

    font-size: 2.4rem;
  }


  /* =========================================
     SEGUNDA LINHA
     06 ← 05 ← 04

     nth-child(4) = 06
     nth-child(5) = 05
     nth-child(6) = 04
  ========================================= */

  /* 05 → aponta para o 06 */
  .assistencia-etapa:nth-child(5)::after,

  /* 04 → aponta para o 05 */
  .assistencia-etapa:nth-child(6)::after {
    content: "←";

    left: -52px;
    right: auto;

    top: 50%;

    transform: translateY(-50%);

    font-size: 2.4rem;

    color: var(--muted);

    display: block !important;
  }


  /* 06 termina o processo */
  .assistencia-etapa:nth-child(4)::after {
    content: none !important;
    display: none !important;
  }

}

/* =====================================================
   BOTÃO "SOLICITAR ORÇAMENTO" - REGRAS DEFINITIVAS
===================================================== */

/* HOME NO TOPO:
   branco, sem borda/anel aparente e glow branco no hover.
   O estado .header-scrolled NÃO é alterado aqui, portanto
   o glow azul que já existe após rolar a Home é preservado. */
body.home-page .header:not(.header-scrolled) .nav-actions .btn-primary {
  position: relative;
  overflow: visible;

  background: #ffffff !important;
  color: #25237b !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

body.home-page .header:not(.header-scrolled) .nav-actions .btn-primary:hover {
  background: #ffffff !important;
  color: #25237b !important;
  border-color: transparent !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.95),
    0 0 38px rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.15) !important;
}


/* PÁGINAS INTERNAS:
   botão branco e glow branco no hover em qualquer estado do header. */
body.produto-page .header .nav-actions .btn-primary,
body.relogio-page .header .nav-actions .btn-primary {
  position: relative;
  overflow: visible;

  background: #ffffff !important;
  color: #25237b !important;
  border: 1px solid transparent !important;
  box-shadow: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

body.produto-page .header .nav-actions .btn-primary:hover,
body.relogio-page .header .nav-actions .btn-primary:hover {
  background: #ffffff !important;
  color: #25237b !important;
  border-color: transparent !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.95),
    0 0 38px rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.15) !important;
}


/* =====================================================
   PÁGINA REAL POWER
===================================================== */

.real-power-hero .lead {
  max-width: 980px;
}

.real-power-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.real-power-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.real-power-visual {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 72% 18%, rgba(30,182,217,.18), transparent 30%),
    linear-gradient(145deg, #f8fbff, #edf4fa);
  box-shadow: 0 20px 50px rgba(7,28,53,.08);
}

.real-power-product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 90px;
  object-fit: contain;
  object-position: center;
  z-index: 2;
}

.real-power-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  padding: 35px;
  color: var(--navy);
}

.real-power-visual.has-image .real-power-placeholder {
  display: none;
}

.real-power-placeholder-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: var(--dark-site);
  color: #fff;
  font-size: 2.25rem;
  box-shadow: 0 18px 38px rgba(7,28,53,.18);
}

.real-power-placeholder strong {
  font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
}

.real-power-placeholder span {
  color: var(--muted);
  font-weight: 500;
}

.real-power-placeholder small {
  max-width: 300px;
  margin-top: 10px;
  color: #8a98aa;
  font-size: .78rem;
}

.real-power-copy h2 {
  margin-top: 10px;
}

.real-power-copy > p:not(.lead) {
  color: var(--muted);
  line-height: 1.72;
}

.real-power-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 30px;
}

.real-power-highlights > div {
  min-width: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.real-power-highlights i {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(18,51,179,.08);
  color: var(--rp);
}

.real-power-highlights span,
.real-power-highlights strong,
.real-power-highlights small {
  display: block;
}

.real-power-highlights strong {
  color: var(--navy);
  font-size: .96rem;
}

.real-power-highlights small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.25;
}

.real-power-section-head {
  max-width: 800px;
  margin-bottom: 42px;
}

.real-power-section-head h2 {
  margin-top: 10px;
}

.real-power-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.real-power-benefits-grid article {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.real-power-benefits-grid article > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 13px;
  background: var(--dark-site);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
}

.real-power-benefits-grid h3 {
  color: var(--navy);
}

.real-power-benefits-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.real-power-manual-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 10%, rgba(30,182,217,.12), transparent 30%),
    linear-gradient(145deg, #f8fbff, #edf4fa);
  box-shadow: 0 18px 45px rgba(7,28,53,.06);
}

.real-power-manual-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--dark-site);
  color: #fff;
  font-size: 2rem;
}

.real-power-manual-box h2 {
  margin: 7px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.real-power-manual-box .lead {
  margin-bottom: 0;
}

.real-power-manual-action {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.real-power-manual-action small {
  color: var(--muted);
  font-size: .72rem;
}

@media (max-width: 1020px) {
  .real-power-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .real-power-visual {
    min-height: 420px;
  }

  .real-power-highlights {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .real-power-manual-box {
    grid-template-columns: auto 1fr;
  }

  .real-power-manual-action {
    grid-column: 1 / -1;
    justify-items: start;
    padding-left: 106px;
  }
}

@media (max-width: 720px) {
  .real-power-hero-actions {
    flex-direction: column;
  }

  .real-power-hero-actions .btn {
    width: 100%;
  }

  .real-power-visual {
    min-height: 330px;
    border-radius: 24px;
  }

  .real-power-product-image {
    padding: 28px;
  }

  .real-power-placeholder-icon {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    font-size: 1.8rem;
  }

  .real-power-placeholder small {
    display: none;
  }

  .real-power-highlights,
  .real-power-benefits-grid {
    grid-template-columns: 1fr;
  }

  .real-power-manual-box {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .real-power-manual-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 1.65rem;
  }

  .real-power-manual-action {
    grid-column: auto;
    justify-items: stretch;
    padding-left: 0;
  }

  .real-power-manual-action .btn {
    width: 100%;
  }
}
/* =====================================================
   REAL POWER - BENEFÍCIOS, COMPATIBILIDADE E FAQ
   Adicione este bloco ao FINAL do css/style.css
===================================================== */


/* =========================================
   CABEÇALHO DAS NOVAS SEÇÕES
========================================= */

.real-power-section-head {
  max-width: 880px;
  margin-bottom: 46px;
}

.real-power-section-head h2 {
  margin-top: 10px;
}

.real-power-section-head .lead {
  margin-bottom: 0;
}


/* =========================================
   BENEFÍCIOS
========================================= */

.real-power-benefits-grid-completo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.real-power-benefits-grid-completo article {
  min-height: 235px;
  padding: 28px;

  display: flex;
  flex-direction: column;

  border: 1px solid var(--line);
  border-radius: 22px;

  background: #ffffff;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.real-power-benefits-grid-completo article:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 20px 45px rgba(7, 28, 53, 0.10);
}

.real-power-benefits-grid-completo article > span {
  width: 42px;
  height: 42px;

  margin-bottom: 22px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--dark-site);
  color: #ffffff;

  font-size: .78rem;
  font-weight: 700;
}

.real-power-benefits-grid-completo h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 1.08rem;
}

.real-power-benefits-grid-completo p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: .94rem;
}


/* =========================================
   COMPATIBILIDADE
========================================= */

.real-power-compat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.real-power-compat-card {
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 26px;

  background: #ffffff;

  box-shadow: 0 16px 40px rgba(7, 28, 53, 0.07);
}

.real-power-compat-brand {
  padding: 24px 28px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(30, 182, 217, .18),
      transparent 35%
    ),
    var(--dark-site);

  color: #ffffff;

  font-size: 1.35rem;
  font-weight: 900;
}

.real-power-compat-card ul {
  margin: 0;
  padding: 12px 28px 20px;

  list-style: none;
}

.real-power-compat-card li {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 0;

  border-bottom: 1px solid var(--line);

  color: var(--navy);
  font-weight: 500;
}

.real-power-compat-card li:last-child {
  border-bottom: 0;
}

.real-power-compat-card li i {
  color: var(--success);
}


/* AVISO PARA OUTROS MODELOS */

.real-power-compat-alert {
  margin-top: 26px;
  padding: 24px 28px;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;

  gap: 20px;
  align-items: center;

  border: 1px solid rgba(18, 51, 179, .14);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(18, 51, 179, .045),
      rgba(30, 182, 217, .07)
    );
}

.real-power-compat-alert-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: var(--navy);
  color: #ffffff;

  font-size: 1.2rem;
}

.real-power-compat-alert > div:nth-child(2) {
  max-width: 720px;
}

.real-power-compat-alert strong {
  display: block;

  margin-bottom: 5px;

  color: var(--navy);
  font-size: 1.05rem;
}

.real-power-compat-alert p {
  margin: 0;

  color: var(--muted);

  font-size: 0.96rem;
  line-height: 1.5;
}


/* =========================================
   FAQ
========================================= */

.real-power-faq-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  align-items: start;
}

.real-power-faq-intro {
  position: sticky;
  top: 120px;
}

.real-power-faq-list {
  border-top: 1px solid var(--line);
}

.real-power-faq-list details {
  border-bottom: 1px solid var(--line);
}

.real-power-faq-list summary {
  position: relative;

  padding: 22px 42px 22px 0;

  color: var(--navy);
  font-weight: 600;

  cursor: pointer;
  list-style: none;
}

.real-power-faq-list summary::-webkit-details-marker {
  display: none;
}

.real-power-faq-list summary::after {
  content: "+";

  position: absolute;
  right: 0;
  top: 17px;

  color: var(--rp);

  font-size: 1.55rem;
  font-weight: 300;
}

.real-power-faq-list details[open] summary::after {
  content: "−";
}

.real-power-faq-list details p {
  margin: -2px 0 22px;
  padding-right: 40px;

  color: var(--muted);
  line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1020px) {

  .real-power-benefits-grid-completo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .real-power-faq-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .real-power-faq-intro {
    position: static;
  }

  .real-power-compat-alert {
    grid-template-columns: auto 1fr;
  }

  .real-power-compat-alert .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 680px) {

  .real-power-benefits-grid-completo,
  .real-power-compat-grid {
    grid-template-columns: 1fr;
  }

  .real-power-benefits-grid-completo article {
    min-height: 0;
    padding: 24px;
  }

  .real-power-compat-brand {
    padding: 21px 22px;
  }

  .real-power-compat-card ul {
    padding: 10px 22px 16px;
  }

  .real-power-compat-alert {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .real-power-compat-alert .btn {
    width: 100%;
  }

  .real-power-faq-list details p {
    padding-right: 0;
  }

}

/* =====================================================
   REAL POWER - PREVIEW DOS EQUIPAMENTOS NO HOVER
===================================================== */

.real-power-compat-card {
  overflow: visible;
}

.real-power-compat-brand {
  border-radius: 25px 25px 0 0;
}

.real-power-modelo {
  position: relative;

  cursor: default;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}


/* destaque suave da linha */
.real-power-modelo:hover {
  color: var(--rp);

  background:
    rgba(18, 51, 179, 0.035);
}


/* FOTO FLUTUANTE */

.real-power-modelo-preview {
  position: absolute;

  left: 50%;
  bottom: calc(100% + 12px);

  width: 190px;

  padding: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 18px;

  box-shadow:
    0 18px 45px rgba(7, 28, 53, 0.18);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translate(-50%, 8px)
    scale(0.96);

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease;

  z-index: 50;
}


/* FOTO */

.real-power-modelo-preview img {
  width: 150px;
  height: 150px;

  object-fit: contain;
  object-position: center;
}


/* NOME ABAIXO DA FOTO */

.real-power-modelo-preview strong {
  margin-top: 10px;

  color: var(--navy);

  font-size: 0.9rem;
}


/* MOSTRA NO HOVER */

.real-power-modelo:hover
.real-power-modelo-preview {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, 0)
    scale(1);
}

/* =====================================================
   REAL POWER - IMAGEM PRINCIPAL SEM QUADRO
===================================================== */

body.real-power-page .real-power-visual {
  min-height: 520px;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding: 0;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible;
}


/* remove qualquer decoração criada por pseudo-elementos */
body.real-power-page .real-power-visual::before,
body.real-power-page .real-power-visual::after {
  display: none !important;
  content: none !important;
}


/* imagem do produto */
body.real-power-page .real-power-product-image {
  display: block;

  width: 100%;
  max-width: 1000px;

  height: 940px;
  max-height: none;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}

body.real-power-page .real-power-grid {
  grid-template-columns: 0.95fr 1.05fr;
  gap: 55px;
  align-items: start;
}
@media (max-width: 680px) {

  body.real-power-page .real-power-visual {
    min-height: auto;
    margin-bottom: 25px;
  }

  body.real-power-page .real-power-product-image {
    width: 100%;
    max-width: 390px;
    height: auto;

    margin: 0 auto;
  }

}
/* =====================================================
   LOCAÇÃO - AUMENTAR SOMENTE A IMAGEM DA REAL POWER
===================================================== */

.locacao-opcional-link-wrapper[href="real-power.html"]
.locacao-opcional-imagem {
  padding: 10px;
}


/* aumenta somente o produto */
.locacao-opcional-link-wrapper[href="real-power.html"]
.locacao-opcional-imagem img {
  width: 100%;
  height: 190px;

  object-fit: contain;
  object-position: center;

  transform: 
  translateX(25px)
  scale(1.65);

  transition: transform 0.35s ease;
}


/* mantém o efeito de hover */
.locacao-opcional-link-wrapper[href="real-power.html"]
.locacao-opcional-item:hover
.locacao-opcional-imagem img {
  transform: 
  translateX(30px)
  scale(1.80);
}

.locacao-opcional-link-wrapper[href="modulos.html"]
.locacao-opcional-imagem img {
  transform: translateX(12px);
}

.locacao-opcional-link-wrapper[href="modulos.html"]
.locacao-opcional-item:hover
.locacao-opcional-imagem img {
  transform:
    translateX(12px)
    scale(1.05);
}

/* =====================================================
   LOCAÇÃO - CARROSSEL DE EQUIPAMENTOS
===================================================== */

.locacao-equipamentos-carousel {
  position: relative;

  width: 100%;
  height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* área dos slides */

.locacao-carousel-track {
  position: relative;

  width: 100%;
  height: 440px;
}


/* slide */

.locacao-carousel-slide {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transform: scale(.96);

  transition:
    opacity .55s ease,
    visibility .55s ease,
    transform .55s ease;

  pointer-events: none;
}


.locacao-carousel-slide.active {
  opacity: 1;
  visibility: visible;

  transform: scale(1);

  pointer-events: auto;
}


/* imagem */

.locacao-carousel-slide img {
  display: block;

  width: 100%;
  height: 350px;

  max-width: 430px;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;
}


/* descrição */

.locacao-carousel-slide span {
  margin-top: 8px;

  color: var(--navy);

  font-size: 1.08rem;
  font-weight: 500;

  text-align: center;
}


/* =====================================================
   SETAS
===================================================== */

.locacao-carousel-arrow {
  position: absolute;

  top: 46%;
  z-index: 10;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: rgba(255, 255, 255, .92);

  color: var(--navy);

  font-size: 1.8rem;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 10px 30px rgba(7, 28, 53, .10);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.locacao-carousel-arrow:hover {
  transform: scale(1.08);

  box-shadow:
    0 14px 32px rgba(7, 28, 53, .16);
}


.locacao-carousel-prev {
  left: 5px;
}


.locacao-carousel-next {
  right: 5px;
}


/* =====================================================
   BOLINHAS
===================================================== */

.locacao-carousel-dots {
  position: absolute;

  left: 50%;
  bottom: 5px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 8px;
}


.locacao-carousel-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #cbd6e2;

  cursor: pointer;

  transition:
    width .25s ease,
    background .25s ease;
}


.locacao-carousel-dot.active {
  width: 25px;

  background: var(--rp);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 680px) {

  .locacao-equipamentos-carousel {
    height: 400px;
  }

  .locacao-carousel-track {
    height: 345px;
  }

  .locacao-carousel-slide img {
    height: 270px;
    max-width: 310px;
  }

  .locacao-carousel-arrow {
    width: 40px;
    height: 40px;

    font-size: 1.5rem;
  }

  .locacao-carousel-prev {
    left: 0;
  }

  .locacao-carousel-next {
    right: 0;
  }

}

/* =====================================================
   LOCAÇÃO - SETAS DO CARROSSEL
===================================================== */

.locacao-carousel-arrow {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  background: #ffffff;

  border: 1px solid var(--line);
  border-radius: 50%;

  box-shadow: none !important;

  cursor: pointer;

  /* esconde o ‹ e › do HTML */
  font-size: 0;

  transform: none;

  transition:
    border-color .2s ease,
    background .2s ease;
}


/* desenha a seta */
.locacao-carousel-arrow::before {
  content: "";

  width: 9px;
  height: 9px;

  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
}


/* seta esquerda */
.locacao-carousel-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}


/* seta direita */
.locacao-carousel-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}


/* hover mais discreto */
.locacao-carousel-arrow:hover {
  background: #ffffff;

  border-color: var(--rp);

  box-shadow: none !important;
  transform: none;
}


/* clique */
.locacao-carousel-arrow:active {
  transform: none;
  box-shadow: none !important;
}

/* =====================================================
   INDEX - MAIS RESPIRO ENTRE TODAS AS SEÇÕES
===================================================== */

body.home-page .section {
  padding-top: 125px;
  padding-bottom: 125px;
}

.stat .experiencia-linha {
  display: inline-block;
  white-space: nowrap;
}

#anosExperiencia {
  display: inline;
}

/* =====================================================
   REAL POWER - ESPAÇAMENTO ENTRE SEÇÕES
===================================================== */

body.real-power-page .section {
  padding-top: 90px;
  padding-bottom: 90px;
}


/* Benefícios */
body.real-power-page .real-power-benefits {
  padding-top: 90px;
  padding-bottom: 105px;
}


/* Compatibilidade */
body.real-power-page .real-power-compatibilidade {
  padding-top: 105px;
  padding-bottom: 105px;
}


/* FAQ */
body.real-power-page .real-power-faq {
  padding-top: 105px;
  padding-bottom: 105px;
}


/* Manual */
body.real-power-page .real-power-manual-section {
  padding-top: 95px;
  padding-bottom: 95px;
}

@media (max-width: 680px) {

  body.real-power-page .section,
  body.real-power-page .real-power-benefits,
  body.real-power-page .real-power-compatibilidade,
  body.real-power-page .real-power-faq,
  body.real-power-page .real-power-manual-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

}

/* =====================================================
   ASSISTÊNCIA TÉCNICA - RESPIRO ENTRE SEÇÕES
===================================================== */

body.assistencia-page .section {
  padding-top: 105px;
  padding-bottom: 105px;
}


/* =====================================================
   SUPORTE TÉCNICO - RESPIRO ENTRE SEÇÕES
===================================================== */

body.suporte-page .section {
  padding-top: 105px;
  padding-bottom: 105px;
}

body.suporte-page .suporte-marcas-section {
  padding-top: 75px;
  padding-bottom: 95px;
}

@media (max-width: 680px) {

  body.assistencia-page .section,
  body.suporte-page .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  body.suporte-page .suporte-marcas-section {
    padding-top: 50px;
    padding-bottom: 60px;
  }

}

/* =====================================================
   ASSISTÊNCIA - CENTRALIZAÇÃO DA SEÇÃO DE MARCAS
===================================================== */

body.assistencia-page .assistencia-marcas-section > .container {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-left: auto;
  margin-right: auto;
}


/* título e descrição */
body.assistencia-page
.assistencia-marcas-section
.assistencia-section-head-center {
  width: 100%;
  max-width: 820px;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 48px;

  text-align: center;
}


/* marcas */
body.assistencia-page .assistencia-marcas-texto {
  width: 100%;
  max-width: 920px;

  margin-left: auto;
  margin-right: auto;

  justify-content: center !important;
}


/* texto final */
body.assistencia-page .assistencia-observacao {
  width: 100%;
  max-width: 760px;

  margin: 30px auto 0;

  text-align: center;
}

@media (max-width: 720px) {

  body.assistencia-page .assistencia-marcas-texto {
    justify-content: center !important;
  }

  body.assistencia-page
  .assistencia-marcas-section
  .assistencia-section-head-center {
    text-align: center;
  }

}

/* =====================================================
   LOCAÇÃO - RESPIRO ENTRE AS SEÇÕES
===================================================== */

body.locacao-page .section {
  padding-top: 105px;
  padding-bottom: 105px;
}


/* seção de apresentação tem bastante conteúdo,
   incluindo os recursos opcionais */
body.locacao-page .locacao-apresentacao-grid {
  margin-bottom: 65px;
}


/* dá um pouco mais de espaço antes dos recursos opcionais */
body.locacao-page .locacao-opcionais {
  margin-top: 70px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1020px) {

  body.locacao-page .section {
    padding-top: 85px;
    padding-bottom: 85px;
  }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 680px) {

  body.locacao-page .section {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  body.locacao-page .locacao-apresentacao-grid {
    margin-bottom: 45px;
  }

  body.locacao-page .locacao-opcionais {
    margin-top: 45px;
  }

}

/* =====================================================
   MÓDULOS - PÁGINA EXPANDIDA
   Adicione este bloco ao FINAL do css/style.css
===================================================== */
body.modulos-page .section { padding-top:105px; padding-bottom:105px; }

body.modulos-page .modulos-intro-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
body.modulos-page .modulos-intro-visual { min-height:420px; display:flex; align-items:center; justify-content:center; padding:35px; border-radius:28px; background:radial-gradient(circle at 75% 20%,rgba(30,182,217,.16),transparent 34%),linear-gradient(145deg,#f8fbff,#edf4fa); }
body.modulos-page .modulos-intro-visual img { display:block; width:100%; max-width:370px; max-height:340px; object-fit:contain; }
body.modulos-page .modulos-intro-copy h2,
body.modulos-page .modulos-section-head h2,
body.modulos-page .modulos-faq-intro h2 { margin-top:10px; margin-bottom:18px; }
body.modulos-page .modulos-beneficios-rapidos { margin-top:28px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
body.modulos-page .modulos-beneficios-rapidos > div { min-height:92px; padding:18px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--navy); font-weight:600; }
body.modulos-page .modulos-beneficios-rapidos i { color:var(--blue); }

body.modulos-page .modulos-aplicacao-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center; }
body.modulos-page .modulos-checklist { list-style:none; padding:0; margin:30px 0 0; display:grid; gap:14px; }
body.modulos-page .modulos-checklist li { display:flex; align-items:flex-start; gap:12px; color:var(--muted); line-height:1.65; }
body.modulos-page .modulos-checklist i { margin-top:5px; color:var(--success); flex-shrink:0; }
body.modulos-page .modulos-aplicacao-media { display:flex; justify-content:center; }
body.modulos-page .modulos-media-card { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 18px 45px rgba(7,28,53,.08); }
body.modulos-page .modulos-media-card-large { width:100%; max-width:430px; }
body.modulos-page .modulos-media-card img { display:block; width:100%; height:520px; object-fit:cover; object-position:center; }
body.modulos-page .modulos-media-card figcaption { padding:18px 20px 22px; color:var(--muted); font-size:.9rem; line-height:1.5; }

body.modulos-page .modulos-section-head { max-width:860px; margin-bottom:42px; }
body.modulos-page .modulos-galeria-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
body.modulos-page .modulos-galeria-item { overflow:hidden; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:0 16px 35px rgba(7,28,53,.07); }
body.modulos-page .modulos-galeria-item img { display:block; width:100%; height:430px; object-fit:cover; object-position:center; }
body.modulos-page .modulos-galeria-content { padding:26px 28px 30px; }
body.modulos-page .modulos-galeria-label { display:block; margin-bottom:8px; color:var(--blue); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
body.modulos-page .modulos-galeria-content h3 { margin:0 0 10px; color:var(--navy); font-size:1.35rem; }
body.modulos-page .modulos-galeria-content p { margin:0; color:var(--muted); line-height:1.7; }

body.modulos-page .modulos-cenarios-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
body.modulos-page .modulos-cenario-card { padding:28px 24px; border:1px solid var(--line); border-radius:22px; background:#fff; }
body.modulos-page .modulos-cenario-icon { width:50px; height:50px; margin-bottom:20px; display:grid; place-items:center; border-radius:14px; background:rgba(18,51,179,.08); color:var(--blue); }
body.modulos-page .modulos-cenario-card h3 { margin:0 0 10px; color:var(--navy); font-size:1.15rem; }
body.modulos-page .modulos-cenario-card p { margin:0; color:var(--muted); line-height:1.65; }

body.modulos-page .modulos-processo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
body.modulos-page .modulos-processo-card { position:relative; padding:30px 24px; border:1px solid var(--line); border-radius:22px; background:#fff; }
body.modulos-page .modulos-processo-numero { width:44px; height:44px; margin-bottom:20px; display:grid; place-items:center; border-radius:13px; background:var(--dark-site); color:#fff; font-size:.8rem; font-weight:700; }
body.modulos-page .modulos-processo-card h3 { margin:0 0 10px; color:var(--navy); font-size:1.15rem; }
body.modulos-page .modulos-processo-card p { margin:0; color:var(--muted); line-height:1.65; }

body.modulos-page .modulos-faq-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
body.modulos-page .modulos-faq-intro { position:sticky; top:120px; }
body.modulos-page .modulos-faq-list { border-top:1px solid var(--line); }
body.modulos-page .modulos-faq-list details { border-bottom:1px solid var(--line); }
body.modulos-page .modulos-faq-list summary { position:relative; padding:22px 42px 22px 0; color:var(--navy); font-weight:600; cursor:pointer; list-style:none; }
body.modulos-page .modulos-faq-list summary::-webkit-details-marker { display:none; }
body.modulos-page .modulos-faq-list summary::after { content:"+"; position:absolute; right:0; top:17px; color:var(--rp); font-size:1.55rem; font-weight:300; }
body.modulos-page .modulos-faq-list details[open] summary::after { content:"−"; }
body.modulos-page .modulos-faq-list details p { margin:-2px 0 22px; padding-right:40px; color:var(--muted); line-height:1.7; }

@media (max-width:1020px) {
  body.modulos-page .section { padding-top:85px; padding-bottom:85px; }
  body.modulos-page .modulos-intro-grid,
  body.modulos-page .modulos-aplicacao-grid,
  body.modulos-page .modulos-faq-grid { grid-template-columns:1fr; gap:45px; }
  body.modulos-page .modulos-faq-intro { position:static; }
  body.modulos-page .modulos-cenarios-grid,
  body.modulos-page .modulos-processo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  body.modulos-page .section { padding-top:65px; padding-bottom:65px; }
  body.modulos-page .modulos-intro-visual { min-height:300px; padding:24px; }
  body.modulos-page .modulos-intro-visual img { max-width:280px; max-height:260px; }
  body.modulos-page .modulos-beneficios-rapidos,
  body.modulos-page .modulos-galeria-grid,
  body.modulos-page .modulos-cenarios-grid,
  body.modulos-page .modulos-processo-grid { grid-template-columns:1fr; }
  body.modulos-page .modulos-media-card img { height:390px; }
  body.modulos-page .modulos-galeria-item img { height:340px; }
  body.modulos-page .modulos-faq-list details p { padding-right:0; }
}


/* =====================================================
   MÓDULOS - IMAGENS PRINCIPAIS SEM QUADRO
===================================================== */

body.modulos-page .modulos-intro-visual {
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 35px;

  padding: 0;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible;
}


/* cada modelo */
body.modulos-page .modulos-intro-produto {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;

  border: 0;
  box-shadow: none;
}


/* imagens maiores */
body.modulos-page .modulos-intro-produto img {
  display: block;

  width: 100%;
  max-width: 600px;

  height: 410px;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;
}

@media (max-width: 680px) {

  body.modulos-page .modulos-intro-visual {
    gap: 25px;
  }

  body.modulos-page .modulos-intro-produto img {
    max-width: 330px;
    height: 220px;
  }

}

/* =====================================================
   CORREÇÃO FINAL - MENU MOBILE / TABLET - DEIXAR SEMPRE POR ULTIMO
===================================================== */

@media (max-width: 1200px) {

  /* menu principal pode rolar se ficar maior que a tela */
  .header .nav-links {
    max-height: calc(100vh - 95px);
    max-height: calc(100dvh - 95px);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }


  /* linha "Soluções + seta" */
  .header .nav-dropdown {
    width: 100%;
  }

  .header .nav-dropdown-trigger {
    width: 100%;

    display: flex;
    align-items: center;
  }

  .header .nav-dropdown-trigger .nav-main-link {
    flex: 1;
  }


  /* força a seta a aparecer */
  .header .submenu-toggle {
    display: grid !important;
    place-items: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    padding: 0;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    background: transparent;
    border: 0;

    color: inherit;

    font-size: 18px;

    cursor: pointer;
  }


  /* submenu no mobile fica dentro do menu */
  .header .submenu {
    position: static !important;

    top: auto !important;
    left: auto !important;

    width: 100% !important;

    margin: 0;
    padding: 6px 0 8px 16px;

    display: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }


  /* abre quando o JS coloca .open */
  .header .nav-dropdown.open .submenu {
    display: grid !important;
  }


  /* fecha quando não está aberto */
  .header .nav-dropdown:not(.open) .submenu {
    display: none !important;
  }


  /* seta gira ao abrir */
  .header .nav-dropdown.open .submenu-toggle {
    transform: rotate(180deg);
  }


  /* links internos */
  .header .submenu a {
    width: 100%;

    padding: 12px 14px;

    white-space: normal;
  }

}/* DEIXAR ESSE BLOCO SEMPRE POR ULTIMO*/