:root{
  --gold: #e3a127;
  --bg-main: #050708;
  --blue: #091116;

  --glass: rgba(0,0,0,0.45);
  --glass-border: rgba(255,255,255,0.10);

  --text: rgba(255,255,255,0.86);
  --muted: rgba(255,255,255,0.70);

  --radius-md: 12px;
  --radius-lg: 16px;

  --scroll-offset: 110px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:"Montserrat", sans-serif;
  background: var(--bg-main);
  color: var(--text);
  overflow-x:hidden;
}

section[id]{ scroll-margin-top: var(--scroll-offset); }

.section-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

/* =========================
   FOCUS
========================= */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible{
  outline: 2px solid rgba(227,161,39,0.65);
  outline-offset: 3px;
}

/* =========================
   HEADER
========================= */
#header{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  z-index: 50;
}

.header-container{
  width:100%;
  height: 70px;
  padding: 0 18px;
  border-radius: var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.header-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.header-logo{
  width: 230px;
  height: auto;
  display:block;
}

nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 26px;
}
nav a{
  text-decoration:none;
  color: rgba(255,255,255,.82);
  font-weight: 500;
  font-size: 15px;
  transition: .25s;
}
nav a:hover{ color: var(--gold); }

/* =========================
   CONTEÚDO
========================= */
#mainContent{
  padding-top: 120px;
}

.section{
  width: 100%;
  padding: 80px 0;
  min-height: 70vh;
}

.section-head{ max-width: 760px; }
.section-head h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.4px;
}
.section-head p{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}

/* =========================
   INÍCIO
========================= */
.section-inicio{
  padding-top: 40px;
  background: var(--bg-main);
}

.mobile-logo-wrap{
  display: none;
  justify-content: center;
  margin: 10px 0 22px;
}
.mobile-logo{
  width: 230px;
  height: auto;
  display:block;
  opacity: .95;
}

.inicio-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.inicio-texto{ padding-top: 6px; }

.inicio-texto h1{
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.gold{ color: var(--gold); }

.inicio-texto p{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 540px;
}

.inicio-cta{
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  transition: .25s ease;
  font-size: 14px;
}

.btn-primary{
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
}

.btn-primary:hover{
  transform: translateY(-1px);

  /* mantém a mesma cor sempre */
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
}

.btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.16);
}
.btn-ghost:hover{ border-color: rgba(255,255,255,0.28); }

.inicio-nota{
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.inicio-imagem{ display: flex; justify-content: flex-end; }

.img-frame{
  width: min(420px, 100%);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.img-frame img{ width: 100%; height: auto; display: block; }

/* =========================
   COMO FUNCIONA
========================= */
.section-como{ 
  padding-top: 10px;
  background: #0B0F14;
}

.como-controls{
  margin-top: 18px;
  display: none;
  gap: 10px;
  justify-content: flex-end;
}

.como-nav{
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: .2s ease;
}
.como-nav:hover{
  border-color: rgba(227,161,39,0.45);
  color: var(--gold);
  transform: translateY(-1px);
}

.como-carousel{ margin-top: 18px; position: relative; }

.como-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.como-track::-webkit-scrollbar{ height: 8px; }
.como-track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}

.como-card{
  width: 280px;
  min-height: 220px;
  padding: 22px 22px 18px;
  border-radius: 0px;

  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;

  scroll-snap-align: start;
  flex: 0 0 auto;
}
.como-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.50);
  box-shadow: 0 26px 70px rgba(0,0,0,0.36);
}

.como-icon{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 14px;
}
.como-icon svg{ width: 26px; height: 26px; color: var(--gold); }

.como-card h3{
  font-size: 22px;
  letter-spacing: -0.3px;
  font-weight: 700;
  line-height: 1.15;
}
.como-card p{
  margin-top: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  font-size: 14.5px;
}

.como-footer{
  margin-top: 26px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.como-note{
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  font-size: 14px;
  max-width: 780px;
}

@media (min-width: 1180px){
  .como-track{
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .como-card{ width: auto; min-height: 240px; }
}

/* =========================
   PLANOS
========================= */
.section-planos{ 
  padding-top: 10px; 
  background: #0B0F14;
  position: relative;
}

.section-planos::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.planos-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.plano-card{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 0px;

  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(227,161,39,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 22px 70px rgba(0,0,0,0.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.plano-card:hover{
  transform: translateY(-8px);
  background: rgba(0,0,0,0.50);
  border-color: rgba(227,161,39,0.52);
  box-shadow: 0 28px 90px rgba(0,0,0,0.45);
}

.plano-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  margin: 0 auto 14px;
}
.plano-icon svg{ width: 26px; height: 26px; color: var(--gold); }

.plano-card h3{
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-top: 6px;
}

.plano-prices{
  margin-top: 18px;
  text-align: center;
}

.price-line{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px;
}

.price-label{
  color: rgba(255,255,255,0.72);
  font-size: 13px;
}

.price-value{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.price-sub{
  margin-top: 6px;
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  line-height: 1.5;
}

.plano-benefits{
  margin-top: 18px;
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0 4px;
}

.plano-benefits li{
  display: flex;
  gap: 10px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.55;
}

.check{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(227,161,39,0.14);
  border: 1px solid rgba(227,161,39,0.45);
  color: var(--gold);
  font-weight: 800;
  flex: 0 0 auto;
  margin-top: 2px;
}

.plano-btn{
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

/* =========================
   ATENDIMENTO (layout ref + linhas diagonais)
========================= */
.section-atendimento{
  padding-top: 10px;
  position: relative;
  background: var(--bg-main);
}

/* grid topo: valores à esquerda / specs à direita */
.at-main-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 42px;
  align-items: start;
}

.at-col{ min-width: 0; }

.at-subtitle{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}

/* VALORES (sem “misturar”) */
.at-price-list{
  display: grid;
  gap: 14px;
}

.at-price-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.at-price-row:last-of-type{
  border-bottom: 0;
  padding-bottom: 0;
}

.at-price-name{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
}

.at-price-sub{
  margin-top: 6px;
  color: rgba(255,255,255,0.62);
  font-size: 12.5px;
  line-height: 1.5;
}

.at-price-value{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.2px;
  align-self: start;
}

.at-price-note{
  margin-top: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.6;
}

/* ESPECIFICAÇÕES (ícones + texto fora) */
.at-spec-list{
  display: grid;
  gap: 18px;
}

.at-spec-item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
}

.at-spec-text h4{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.at-spec-text p{
  margin-top: 6px;
  color: rgba(255,255,255,0.74);
  line-height: 1.7;
  font-size: 14.5px;
  max-width: 680px;
}

/* ícones circulares */
.at-ico{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--gold);
  flex: 0 0 auto;
}
.at-ico svg{ width: 26px; height: 26px; }

/* linhas sutis padrão entre blocos */
.at-section-divider{
  margin: 30px 0;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.08);
}

/* =========================
   DEPOIMENTOS (1 por vez, centralizado)
========================= */
.dep-wrap{ margin-top: 2px; }

.dep-head{
  max-width: 900px;
  margin-bottom: 14px;
}
.dep-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  position: relative;
  padding-left: 46px;
}
.dep-kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 36px;
  height: 2px;
  background: rgba(227,161,39,0.65);
}

.dep-head h3{
  margin-top: 8px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.2px;
}

.dep-carousel{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 14px;
  align-items: center;
}

.dep-viewport{
  overflow: hidden;
  width: 100%;
}

.dep-track{
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}

.dep-card{
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 22px 22px 18px;

  /* SEM glass: apenas sólido escuro */
  background: #0d1114;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;

  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.dep-stars{
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 14px;
  opacity: .95;
}

.dep-text{
  margin-top: 12px;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  font-size: 14.5px;
}

.dep-person{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: rgba(255,255,255,0.78);
}
.dep-person b{ color: rgba(255,255,255,0.92); }
.dep-person span{ color: rgba(255,255,255,0.60); font-size: 13px; }

.dep-nav{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;

  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  transition: .2s ease;
}
.dep-nav:hover{
  border-color: rgba(227,161,39,0.45);
  color: var(--gold);
  transform: translateY(-1px);
}

.dep-dots{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dep-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.dep-dot.is-active{
  background: rgba(227,161,39,0.75);
  box-shadow: 0 0 0 3px rgba(227,161,39,0.12);
}

/* =========================
   BASE: compare + horário (esquerda) / localização (direita)
========================= */
.at-bottom-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: start;
}

.at-bottom-title{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.at-title-ico{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--gold);
}
.at-title-ico svg{ width: 22px; height: 22px; }

.at-bottom-title h3{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* compare (mantém balão, mas agora título fica fora) */
.at-compare-card{
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.at-compare-list{
  list-style: none;
  display: grid;
  gap: 10px;
}

.at-compare-list li{
  display: flex;
  gap: 10px;
  color: rgba(255,255,255,0.76);
  line-height: 1.6;
  font-size: 13.5px;
}

.at-compare-list b{ color: rgba(255,255,255,0.92); }

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(227,161,39,0.60);
  box-shadow: 0 0 0 3px rgba(227,161,39,0.12);
  flex: 0 0 auto;
}

.at-cta-row{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* card “Horário” SEM glass (sólido) */
.at-info-card{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;

  padding: 18px 16px;
  border-radius: 16px;
  background: #1c242a; /* sólido como sua ref */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

.at-info-ico{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--gold);
}
.at-info-ico svg{ width: 22px; height: 22px; }

.at-info-card h4{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.at-info-card p{
  margin-top: 6px;
  color: rgba(255,255,255,0.70);
  font-size: 14px;
}

/* localização (foto + endereço) */
.at-loc-card{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0d1114;
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

.at-loc-media img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.at-loc-text{
  padding: 14px 14px 16px;
}

.at-loc-label{
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.at-loc-value{
  margin-top: 6px;
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  line-height: 1.55;
  font-size: 13.5px;
}

.at-loc-near{
  margin-top: 6px;
  color: rgba(255,255,255,0.60);
  font-size: 12.5px;
}

/* responsivo */
@media (max-width: 980px){
  .at-main-grid{ grid-template-columns: 1fr; gap: 26px; }
  .dep-carousel{ grid-template-columns: 44px 1fr 44px; }
  .at-bottom-grid{ grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 680px){
  .dep-carousel{ grid-template-columns: 40px 1fr 40px; }
  .at-loc-media img{ height: 280px; }
}

/* ÚNICO BALÃO permitido: endereço */
.at-address-balloon{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.at-address-balloon .label{
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.at-address-balloon .value{
  margin-top: 6px;
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  line-height: 1.55;
  font-size: 13.5px;
}

.at-address-balloon .near{
  margin-top: 6px;
  color: rgba(255,255,255,0.60);
  font-size: 12.5px;
}

/* =========================
   SOBRE (com linha sutil entre texto e foto)
========================= */
.section-sobre{
  width: 100%;
  background: #0B0F14;
  margin-top: 40px;
  padding: 80px 0;
}

.section-sobre .sobre-grid{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.sobre-texto h2{
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.4px;
}

.sobre-texto p{
  margin-top: 16px;
  line-height: 1.75;
  color: var(--muted);
  font-size: 16px;
  max-width: 620px;
}

.sobre-loc{
  margin-top: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}

.sobre-tags{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tag-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 10px;

  background: #0d1114;
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;

  transition: .25s ease;
}

.tag-chip:hover{
  border-color: rgba(227,161,39,0.45);
  transform: translateY(-2px);
}

.tag-check{
  width: 18px;
  height: 18px;

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

  border-radius: 999px;

  background: rgba(227,161,39,0.15);
  border: 1px solid rgba(227,161,39,0.45);

  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

/* linha sutil como no estilo do separador */
.sobre-imagem{
  display: flex;
  justify-content: flex-end;
  padding-left: 28px;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.sobre-imagem img{
  width: min(460px, 100%);
  border-radius: 16px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06);

  display: block;
}

/* =========================
   FOOTER
========================= */
.site-footer{
  width: 100%;
  background: #1c242a;
  color: rgba(255,255,255,0.85);
  margin-top: 0;
}

.footer-container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.footer-topbar{
  background: #222c33;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-topbar-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.footer-topbar-ico{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.footer-topbar-ico svg{ width: 22px; height: 22px; }

.footer-topbar-label{
  font-weight: 700;
  color: rgba(255,255,255,0.88);
}

.footer-topbar-text{
  color: rgba(255,255,255,0.75);
}

.footer-main{ padding: 48px 0 34px; }

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 34px;
  align-items: start;
}

.footer-logo{
  width: 190px;
  height: auto;
  display: block;
}

.footer-desc{
  margin-top: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.70);
  max-width: 520px;
}

.footer-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 22px 0 18px;
}

.footer-email{
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.footer-email:hover{ color: var(--gold); }

.footer-actions{
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.footer-social{
  width: 42px;
  height: 42px;

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

  border-radius: 999px;

  background: #12181c;
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.80);
  text-decoration: none;

  transition: .25s ease;
}

.footer-social svg{ width: 22px; height: 22px; }

.footer-social:hover{
  transform: translateY(-3px);
  border-color: rgba(227,161,39,0.45);
  color: var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.footer-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-top: 6px;
}

.footer-map{
  margin-top: 14px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.footer-map iframe{
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  background: #182027;
}

.footer-bottom-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  flex-wrap: wrap;

  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.6;
}

.footer-author-link{
  color: rgba(255,255,255,0.90);
  text-decoration: none;
  font-weight: 700;
  transition: .25s ease;
}
.footer-author-link:hover{ color: var(--gold); }

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 980px){
  .inicio-grid{ grid-template-columns: 1fr; gap: 22px; }
  .inicio-imagem{ justify-content: flex-start; }
  .section{ padding: 60px 0; }
  .planos-grid{ grid-template-columns: 1fr; }

  .at-grid{ grid-template-columns: 1fr; gap: 24px; }

  .sobre-imagem{
    justify-content: flex-start;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 22px;
  }

  .footer-grid{ grid-template-columns: 1fr; }
  .footer-map iframe{ height: 240px; }

  .section-sobre .sobre-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 680px){
  .header-container{ height: auto; padding: 14px 16px; }
  .header-brand{ display: none; }

  nav ul{
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .mobile-logo-wrap{ display: flex; }

  .inicio-texto{ padding-top: 0; }
  .section-inicio{ padding-top: 22px; }

  .como-controls{ display: flex; }

  .at-loc-media img{
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .btn, .plano-card, .como-card, .footer-social{ transition: none !important; }
}


/* =========================
   FORMULÁRIO (formulario.html)
   Cole este bloco no FINAL do style.css
========================= */

.form-body{
  background: var(--bg-main);
  color: var(--text);
  min-height: 100vh;
}

/* header do formulário */
.form-header{
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 18px 0;
  background: rgba(5,7,8,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.form-header-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.back-link{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-weight: 600;
}
.back-link:hover{ color: var(--gold); }

.form-logo{
  width: 170px;
  height: auto;
  display: block;
  opacity: .95;
}

/* container do form */
.form-wrap{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 70px;
}

.form-card{
  padding: 26px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.form-card-solid{
  background: #0d1114; /* sólido escuro (sem glass) */
}

.form-card h1{
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.3px;
}

.form-sub{
  margin-top: 10px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}

/* grid dos campos */
.form-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.field{ display: grid; gap: 8px; }

.field-full{ grid-column: 1 / -1; }

.field label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.field-help{
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* inputs */
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
  outline: none;
  font-family: inherit;
  font-size: 14px;
}

.field textarea{
  resize: vertical;
  min-height: 140px;
}

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(255,255,255,0.45);
}

/* contador */
.char-row{
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* botão enviar */
.form-submit{
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 13px 18px;
}

/* status */
.form-note{
  grid-column: 1 / -1;
  margin-top: 8px;
  color: rgba(255,255,255,0.60);
  font-size: 12.5px;
  line-height: 1.6;
}

.form-status{
  grid-column: 1 / -1;
  margin-top: 8px;
  font-weight: 700;
  font-size: 13px;
}

.form-status-ok{ color: #7CFFB1; }
.form-status-error{ color: #FF7C7C; }

/* responsivo */
@media (max-width: 780px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-logo{ width: 150px; }
}

/* =========================
   SOBRE.HTML (página) - estilos novos
   Cole no FINAL do style.css
========================= */

/* HERO */
.page-hero{
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 38px 0 28px;
  overflow: hidden;
  background: #0B0F14;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.page-hero-bg{
  position: absolute;
  inset: 0;
  /* Você pode trocar por uma imagem depois:
     background: url("assets/hero-sobre.jpg") center/cover no-repeat; */
  background:
    radial-gradient(900px 320px at 20% 40%, rgba(227,161,39,0.10), transparent 60%),
    radial-gradient(900px 420px at 80% 40%, rgba(255,255,255,0.06), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.85));
  transform: scale(1.05);
}

.page-hero-inner{
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  text-align: center;
  padding-top: 22px;
}

.page-hero h1{
  font-size: clamp(30px, 3.4vw, 52px);
  letter-spacing: -0.6px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

.breadcrumb{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}

.breadcrumb a{
  color: rgba(227,161,39,0.95);
  text-decoration: none;
  font-weight: 700;
}
.breadcrumb a:hover{ text-decoration: underline; }

.breadcrumb-sep{
  opacity: 0.65;
}

/* SECTION BASE */
.section-about-page{
  background: var(--bg-main);
  padding-top: 40px;
}

.page-divider{
  margin: 34px 0;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.08);
}

/* GRID FOTO + TEXTO */
.about-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}

.about-photo{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0d1114;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  min-height: 420px;
  position: relative;
}

.about-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-photo-placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(420px 280px at 50% 40%, rgba(227,161,39,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
}

.about-photo.is-empty .about-photo-placeholder{ display: grid; }
.about-photo:not(.is-empty) .about-photo-placeholder{ display: none; }

.ph-title{
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 18px;
  color: rgba(255,255,255,0.88);
}
.ph-sub{
  margin-top: 8px;
  color: rgba(255,255,255,0.62);
  font-size: 12.5px;
  line-height: 1.5;
}

.about-kicker{
  color: rgba(227,161,39,0.95);
  font-weight: 900;
  letter-spacing: 0.8px;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.about-copy h2{
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.4px;
}

.about-role{
  margin-top: 10px;
  color: rgba(255,255,255,0.70);
  font-size: 14px;
  line-height: 1.6;
}

.about-text{
  margin-top: 16px;
  color: rgba(255,255,255,0.74);
  line-height: 1.8;
  font-size: 15.5px;
  max-width: 680px;
  text-align: justify;
  hyphens: auto;
}

.about-cta{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-tags{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* FORMAÇÃO */
.about-cred h3{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.2px;
}

.about-cred-list{
  list-style: none;
  margin-top: 14px;
  display: grid;
  gap: 12px;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.7;
}

.cred-bullet{
  color: rgba(227,161,39,0.90);
  font-weight: 900;
  margin-right: 8px;
}

.about-cred-cta{
  margin-top: 18px;
}

/* INSTAGRAM (somente cabeçalho + botão) */
.ig-wrap{padding-bottom:10px}
.ig-head{text-align:center;max-width:900px;margin:0 auto}
.ig-kicker{
  display:inline-block;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.55);
  text-transform:uppercase;position:relative;padding:0 46px
}
.ig-kicker::before,.ig-kicker::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:2px;background:rgba(227,161,39,.65)
}
.ig-kicker::before{left:0}
.ig-kicker::after{right:0}
.ig-head h3{margin-top:10px;font-size:clamp(20px,2.4vw,34px);font-weight:900;letter-spacing:-.2px}
.ig-icon{margin:12px auto 0;width:46px;height:46px;display:grid;place-items:center;color:rgba(255,255,255,.80)}
.ig-icon svg{width:26px;height:26px}
.ig-follow{margin-top:10px}

/* FOOTER: faixa de horário */
.footer-hours{
  background: #222c33;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-hours-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.footer-hours-ico{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.footer-hours-ico svg{ width: 22px; height: 22px; }

.footer-hours-label{
  font-weight: 800;
  color: rgba(255,255,255,0.88);
}

.footer-hours-text{
  color: rgba(255,255,255,0.75);
}

/* RESPONSIVO */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-photo{
    min-height: 340px;
  }
  .ig-grid{
    grid-template-columns: 1fr;
  }
  .ig-thumb{
    height: 280px;
  }
}

/* =========================
   CONSULTAS.HTML (nova estrutura)
   Cole no FINAL do style.css
========================= */

/* INTRO: foto + texto */
.at-intro-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}

.at-kicker{
  color: rgba(227,161,39,0.95);
  font-weight: 900;
  letter-spacing: 0.8px;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.at-intro-copy h2{
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -0.4px;
  max-width: 720px;
}

.at-lead{
  margin-top: 14px;
  color: rgba(255,255,255,0.74);
  line-height: 1.85;
  font-size: 15.5px;
  max-width: 720px;
}

/* Foto (sem card extra: apenas frame sólido) */
.at-photo{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0d1114;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  min-height: 420px;
  position: relative;
}

.at-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.at-photo-placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(420px 280px at 50% 40%, rgba(227,161,39,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
}

.at-photo.is-empty .at-photo-placeholder{ display: grid; }
.at-photo:not(.is-empty) .at-photo-placeholder{ display: none; }

/* (NOVO) Foto menor para blocos dinâmicos (listas/vídeo) */
.at-photo--compact{
  min-height: 320px;
}

/* DETALHES (presencial) */
.at-details-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.at-details h3{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

.at-bullets{
  list-style: none;
  display: grid;
  gap: 10px;
}

.at-bullets li{
  color: rgba(255,255,255,0.76);
  line-height: 1.7;
  font-size: 14.5px;
  position: relative;
  padding-left: 16px;
}

.at-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(227,161,39,0.70);
  box-shadow: 0 0 0 3px rgba(227,161,39,0.10);
}

.at-note{
  margin-top: 16px;
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  font-size: 13.5px;
  max-width: 920px;
}

/* VALORES + foto alternada */
.at-values-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}

.at-values-content{
  min-width: 0;
}

/* CTA alinhada após valores */
.at-values-content .at-cta-row{
  margin-top: 18px;
}

/* CONSULTA ONLINE (tópicos em linha, sem cards) */
.at-online-head{
  max-width: 880px;
}

.at-online-head h3{
  margin-top: 8px;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.2px;
}

.at-online-head p{
  margin-top: 10px;
  color: rgba(255,255,255,0.70);
  line-height: 1.75;
  font-size: 14.5px;
}

.at-online-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 22px;
  align-items: start;
}

.at-online-item h4{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.92);
}

.at-online-item p{
  margin-top: 8px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  font-size: 14px;
}

/* DIFERENÇAS */
.at-diff-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.at-diff h3{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

/* =========================
   (NOVO) BLOCO DINÂMICO: ACOMPANHAMENTO (listas + imagens alternadas)
========================= */

/* Cabeçalho no estilo “Depoimentos” */
.at-followup-head{
  margin-bottom: 18px;
}

/* Grid alternado (imagem <-> lista) */
.at-followup-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}

/* Título interno das listas */
.at-followup-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

/* reforço caps quando precisar */
.at-followup-title--caps{
  text-transform: uppercase;
}

/* =========================
   (NOVO) BLOCO VÍDEO
========================= */

.at-video-section{
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.at-video-title{
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: rgba(255,255,255,0.92);
}

.at-video-title span{
  color: var(--gold);
}

.at-video-sub{
  margin-top: 10px;
  color: rgba(255,255,255,0.70);
  font-size: 15px;
  line-height: 1.7;
}

.at-video-embed{
  margin: 26px auto 0;
  max-width: 320px;       /* tamanho do vídeo (vertical) */
  aspect-ratio: 9 / 16;

  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0d1114;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.at-video{
  width: 100%;
  height: 100%;
  display: block;
  background: #0d1114;
  object-fit: cover;
}

/* RESPONSIVO */
@media (max-width: 980px){
  .at-intro-grid{ grid-template-columns: 1fr; gap: 22px; }
  .at-details-grid{ grid-template-columns: 1fr; gap: 22px; }
  .at-values-grid{ grid-template-columns: 1fr; gap: 22px; }
  .at-online-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-diff-grid{ grid-template-columns: 1fr; gap: 22px; }
  .at-photo{ min-height: 340px; }

  /* (NOVO) responsivo do acompanhamento + vídeo */
  .at-followup-grid{ grid-template-columns: 1fr; gap: 22px; }
  .at-video-grid{ grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 640px){
  .at-online-grid{ grid-template-columns: 1fr; }
}

/* =========================
   CONSULTAS.HTML — CONSULTA ONLINE (layout + Step Cards estilo referência)
   (AJUSTADO p/ cores do site: preto fosco + dourado)
========================= */

/* Layout: valores (esq) + cards (dir) */
.at-online-layout{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

/* =========================
   ORDERED LIST CARDS (ol-cards) — igual ao design da imagem
   (AJUSTADO p/ preto fosco + dourado)
========================= */

/* reset só do componente */
.ol-cards,
.ol-cards *,
.ol-cards *::before,
.ol-cards *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* lista */
.ol-cards{
  /* cores do componente */
  --ol-cards-color-bg: #0d1114;                /* preto fosco do card */
  --ol-cards-color-accent: var(--gold);        /* dourado (padrão) */

  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /* deixa o bloco “encaixado” na coluna direita */
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0;

  counter-reset: ol-cards-counter;
}

/* card */
.ol-cards li{
  display: grid;
  grid-template-areas:
    "step title"
    "step content";
  grid-template-columns: 140px 1fr;

  row-gap: 6px;
  column-gap: 18px;

  padding: 14px 18px 14px 0;

  counter-increment: ol-cards-counter;

  text-align: left;
  background: var(--ol-cards-color-bg);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.38);
}

/* alternado (par: step na direita, “tarja” invertida) */
.ol-cards.alternate li:nth-child(even){
  grid-template-areas:
    "title step"
    "content step";
  grid-template-columns: 1fr 140px;
  padding: 14px 0 14px 18px;
}

/* faixa colorida com número + bolinha do ícone */
.ol-cards li .step{
  grid-area: step;

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

  background: var(--ol-cards-color-accent);
  border-radius: 0 999px 999px 0;

  padding: 12px 12px;
  gap: 12px;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.35);
}

/* invertido no alternado */
.ol-cards.alternate li:nth-child(even) .step{
  border-radius: 999px 0 0 999px;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

/* número grande 01, 02... */
.ol-cards li .step::before{
  content: "0" counter(ol-cards-counter);
  font-weight: 900;
  letter-spacing: -0.6px;
  font-size: 24px;
  line-height: 1;

  color: var(--ol-cards-color-bg); /* número “recortado” no dourado */
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* bolinha do ícone (usa o <i> do seu HTML) */
.ol-cards li .step i{
  width: 44px;
  height: 44px;

  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--ol-cards-color-bg);
  border: 3px solid rgba(255,255,255,0.10);

  color: var(--ol-cards-color-accent);
  font-size: 18px;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* título e texto */
.ol-cards li .title{
  grid-area: title;
  color: var(--ol-cards-color-accent);
  font-weight: 900;
  letter-spacing: -0.2px;
  align-self: end;
  font-size: 14.5px;
}

.ol-cards li .content{
  grid-area: content;
  color: rgba(255,255,255,0.74);
  line-height: 1.65;
  font-size: 13.5px;
  padding-right: 12px;
}

/* ===== Responsivo do layout online ===== */
@media (max-width: 980px){
  .at-online-layout{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ol-cards{
    max-width: 100%;
  }
}

/* responsivo do componente (como no modelo, mas com ajuste pro seu layout) */
@media (max-width: 520px){
  .ol-cards li{
    grid-template-areas:
      "step title"
      "content content";
    grid-template-columns: min-content 1fr;
    column-gap: 10px;
    padding: 12px 0;
  }

  .ol-cards.alternate li:nth-child(even){
    grid-template-areas:
      "title step"
      "content content";
    grid-template-columns: 1fr min-content;
    padding: 12px 0;
  }

  .ol-cards li .title{
    padding: 0 12px;
    align-self: center;
  }

  .ol-cards li .step{
    padding: 10px;
    gap: 10px;
  }

  .ol-cards li .step::before{
    font-size: 18px;
  }

  .ol-cards li .step i{
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ol-cards li .content{
    padding: 0 12px 10px;
  }
}

/* MOBILE: cards acima dos valores (somente na seção online) */
@media (max-width: 980px){
  .at-online-layout{
    display: flex;          /* troca grid por flex no mobile */
    flex-direction: column; /* empilha */
    gap: 22px;
  }

  /* cards primeiro */
  .at-online-layout .ol-cards{
    order: 1;
  }

  /* valores depois */
  .at-online-layout .at-values-content--online{
    order: 2;
  }
}

/* =========================
   CONSULTAS.HTML — DIFERENÇA (TABELA GLASS)
   Versão SEM fundo e SEM overlay
========================= */

.at-diff--glass{
  position: relative;
  padding: 60px 0 20px;
  background: var(--bg-main); /* fundo normal do site */
}

/* garante que o conteúdo fique acima */
.at-diff--glass .section-inner{
  position: relative;
  z-index: 1;
}

/* título */
.at-diff-title{
  text-align: center;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -0.4px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px; /* reduzido para encaixar o hint abaixo */
}

/* hint (fica escondido no desktop) */
.at-diff-hint{
  display: none;
}

/* superfície central */
.at-diff-surface{
  width: 100%;
  display: grid;
  place-items: center;
}

/* =========================
   GLASS TABLE
========================= */

.at-diff-table-wrap{
  width: min(980px, 100%);
  border-radius: 16px;
  padding: 22px;

  /* glass mais elegante sem imagem atrás */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);

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

  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

/* tabela */
.at-diff-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
}

/* header */
.at-diff-table thead th{
  text-align: left;
  padding: 16px 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.95);

  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* divisor vertical header */
.at-diff-table thead th:first-child{
  border-right: 1px solid rgba(255,255,255,0.10);
}

/* células */
.at-diff-table tbody td{
  padding: 16px 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  font-size: 14.5px;
  vertical-align: top;

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

/* remove última borda */
.at-diff-table tbody tr:last-child td{
  border-bottom: 0;
}

/* divisor vertical */
.at-diff-table tbody td:first-child{
  border-right: 1px solid rgba(255,255,255,0.10);
}

/* hover premium */
.at-diff-table tbody tr:hover td{
  background: rgba(255,255,255,0.05);
  transition: background .25s ease;
}

/* CTA centralizada */
.at-cta-row--center{
  justify-content: center;
  margin-top: 22px;
}

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

@media (max-width: 720px){

  /* mostra o hint apenas no mobile */
.at-diff-hint{
  display: flex;          /* ← muda de inline-flex */
  align-items: center;
  justify-content: center;

  margin: 10px auto 14px; /* auto centraliza */
  width: fit-content;     /* largura do conteúdo */

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  color: rgba(255,255,255,0.70);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 8px 14px;

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

  text-align: center;
}

  .at-diff-table-wrap{
    padding: 14px;
    overflow-x: auto;

    /* rolagem mais suave no iOS/Android */
    -webkit-overflow-scrolling: touch;
  }

  .at-diff-table{
    min-width: 640px;
  }
}

/* =========================
   COMO FUNCIONA — split (cards | divisor | vídeo)
========================= */

.como-split{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 2px 0.95fr; /* esq | linha | dir */
  gap: 34px;
  align-items: start;
}

/* divisor vertical */
.como-divider{
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}

/* coluna esquerda */
.como-left-head h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.4px;
}

.como-lead{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;

  /* ✅ impede de “invadir” o espaço da direita */
  max-width: 560px;
}

.como-sub{
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
  max-width: 560px;
}

.como-btn{
  margin-top: 16px;
}

/* coluna direita: alinha o topo com o "Como funciona?" */
.como-right{
  padding-top: 0; /* garante alinhamento */
}

/* responsivo: empilha e remove divisor */
@media (max-width: 980px){
  .como-split{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .como-divider{
    display: none;
  }

  .como-lead,
  .como-sub{
    max-width: 100%;
  }

  /* centraliza o vídeo no mobile se quiser manter como antes */
  .como-right{
    text-align: center;
  }
}

/* =========================
   CENTRALIZAR BLOCO DO VÍDEO
========================= */

.como-right{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centraliza horizontal */
  text-align: center;    /* centraliza textos */
}

/* limita largura do texto para ficar elegante */
.como-right .at-video-sub{
  max-width: 420px;
}

/* garante que o vídeo fique centralizado */
.como-right .at-video-embed{
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   AJUSTES GERAIS — FUNDO PRETO PADRÃO (remove azul antigo)
========================= */

/* garante que o site inteiro use o preto padrão */
body{
  background: var(--bg-main);
}

/* remove o azul antigo das seções que estavam com #0B0F14 */
.section-como,
.section-planos,
.section-sobre,
.page-hero{
  background: var(--bg-main);
}

/* se você quiser manter o footer como está, não mexo nele.
   (o footer já tem #1c242a e #182027, ok) */


/* =========================
   DIVISÓRIA ENTRE "INÍCIO" E "COMO FUNCIONA"
   (linha sutil no topo do Como Funciona)
========================= */

.section-como{
  position: relative;
  padding-top: 10px; /* mantém seu respiro */
}

/* linha horizontal no início do bloco "Como funciona" */
.section-como::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}


/* =========================
   PLANOS — remover imagem + centralizar textos
========================= */

/* remove qualquer background-image que estava aplicado */
.section-planos{
  background: var(--bg-main);
  background-image: none !important;
  overflow: visible; /* não precisa mais do corte do fundo */
}

/* remove overlay escuro que existia por causa da imagem */
.section-planos::before{
  content: none !important;
}

/* mantém a linha sutil no topo da seção Planos (você já tinha) */
.section-planos::after{
  content:"";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

/* centraliza o cabeçalho de Planos */
.section-planos .section-head{
  text-align: center;
  margin: 0 auto;
}

/* centraliza e limita o texto abaixo do título */
.section-planos .section-head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}