@charset "utf-8";
/* =========================================================
   CSS CUSTOMIZADO – PÁGINA SEO (Estruturado por sessões)
   Usar junto com o CSS principal da marca
   ========================================================= */

/* ------------------------- */
/* 0) Utilitários globais    */
/* ------------------------- */
:root{
  --reading-gutter: 1rem; /* ajuste se precisar */
}

section{ padding:5px 0 !important; }

.txt-center{ text-align:center !important; }
.txt-justify{ text-align: justify!important; }

.badge_ttl{
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; background:var(--white-color);
  border:1px solid var(--neutral-550-color); border-radius:2rem;
  width:max-content;
}

/* =========================================================
   1) HEADER
   ========================================================= */
.page-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--neutral-550-color);
}
.page-header__content{ display:flex; align-items:center; justify-content:space-between; height:4rem; }
.page-header__logo{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:inherit; text-decoration:none; }
.page-header__logo-icon{ width:2rem; height:2rem; border-radius:.5rem;
  background:linear-gradient(to right, var(--primary-50-color), var(--secondary-50-color));
}
.page-header__logo-subtitle{ color:var(--neutral-250-color); font-weight:600; }
.page-header__nav{ display:none; }
.page-header__nav ul{ display:flex; align-items:center; gap:1.5rem; list-style:none; font-weight:600; }
.page-header__nav a{ color:inherit; text-decoration:none; transition:color .2s; }
.page-header__nav a:hover{ color:var(--primary-50-color); }
.page-header__cta{
  display:inline-flex; align-items:center; border-radius:.5rem;
  background:linear-gradient(to right, var(--primary-50-color), var(--secondary-50-color));
  color:var(--white-color); padding:.5rem 1rem; text-transform:uppercase; font-size:.875rem; font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.07); text-decoration:none;
}
.page-header__mobile-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:2px solid var(--primary-50-color); color:var(--primary-50-color);
  padding:.5rem .75rem; border-radius:.5rem; font-weight:800; text-transform:uppercase; font-size:.75rem; background:none; cursor:pointer;
}
.page-header__mobile-nav{ display:none; border-top:1px solid var(--neutral-550-color); background:var(--white-color); }
.page-header__mobile-nav.active{ display:block; }
.page-header__mobile-nav ul{ padding:1rem 0; display:grid; gap:.75rem; list-style:none; font-weight:600; }
.page-header__mobile-nav a{ display:block; padding:.25rem 0; color:inherit; text-decoration:none; transition:color .2s; }
.page-header__mobile-nav a:hover{ color:var(--primary-50-color); }

/* Header – breakpoints */
@media (min-width:1024px){
  .page-header__nav{ display:flex; }
  .page-header__mobile-btn{ display:none; }
}

/* =========================================================
   2) HERO
   ========================================================= */
.page-hero{ background:linear-gradient(to bottom, var(--white-color), #fff1f2); }
.page-hero .container{ padding-left:var(--reading-gutter); padding-right:var(--reading-gutter); }
.page-hero__content{ padding:2.5rem 0; text-align:center; }

.page-hero__title{ margin-top:.5rem; font-size:1.875rem; font-weight:900; line-height:1.25; }
.page-hero__description{ margin-top:.75rem; color:var(--neutral-200-color); margin-bottom:.75rem; }
.page-hero__cta-group{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* Imagem alinhada ao container */
.page-hero__image{
  width:100%; margin:2rem 0 0; border-radius:12px; overflow:hidden;
}


.page-hero__image figcaption{ text-align:center; font-size:.875rem; color:var(--neutral-250-color); margin-top:.5rem; }
.page-hero__breadcrumbs{ margin-top:2.5rem; font-size:.875rem; color:var(--neutral-250-color); }
.page-hero__breadcrumbs a{ color:inherit; text-decoration:none; transition:color .2s; }
.page-hero__breadcrumbs a:hover{ color:var(--primary-50-color); }
.page-hero__breadcrumbs strong{ color:var(--neutral-100-color); }

/* CTA do hero (ex.: .hero_page_btn) */
article .page_btn{
  display:inline-flex; margin:1.5rem auto 0; justify-content:center; text-align:center; 
}
.page-hero__content .hero_page_btn{
  display:inline-flex; margin:1.5rem auto 0; justify-content:center; text-align:center; display:none;
}
.page-hero__description{ text-align: center}

/* Hero – breakpoints */
@media (max-width:768px){
  .page-hero__image{ border-radius:10px; margin-top:1.5rem; }
  .page-hero__breadcrumbs{ margin-top:0 !important; }
  .page-hero__content .hero_page_btn{ width:fit-content; display:block; }
  article .page_btn{ width:fit-content; display:block; }
  .page-hero__description{ text-align: center}
}
@media (min-width:768px){
  .page-hero__title{ font-size:3rem; line-height:1; margin-top:30px; }
  .page-hero__description{ font-size:1.125rem; line-height:1.75rem; }
}

/* =========================================================
   3) LAYOUT PRINCIPAL
   ========================================================= */
.page-main{ margin:2.5rem 0; }
/*.page-content-layout{ display:grid; grid-template-columns:1fr; gap:2.5rem; }*/

@media (min-width:768px){
  .page-main{ margin:3.5rem 0; }
  .page-content-layout{ gap:3.5rem; }
}
@media (min-width:1024px){
  .page-content-layout{ grid-template-columns:1fr 280px; gap:2.5rem; }
  .page-content-layout{ display:grid; gap:2.5rem; }
}
@media (min-width:1320px){
  .page-main{ margin:3.5rem 0; }
  .page-content-layout{ gap:2.5rem; }
}
@media (min-width:1560px){
  .page-main{ margin:6rem 0; }
}

/* =========================================================
   4) ARTIGO / CONTEÚDO — responsivo por bloco
   ========================================================= */
.page-article{
  max-width:min(72ch,100%);
  margin:0 auto;
  color:var(--neutral-100-color);
  font-size:clamp(1rem, 0.98rem + 0.25vw, 1.125rem);
  line-height:1.75;
  overflow:visible;
  overflow-wrap:break-word;
  word-break:normal;
}
.page-article__meta{ color:var(--neutral-250-color); font-size:.875rem; margin-bottom:1rem; }

.page-article h2{
  color:var(--neutral-50-color); font-weight:700;
  margin:2rem 0 1rem; scroll-margin-top:6rem;
  font-size:clamp(1.25rem, 1.15rem + 0.8vw, 1.75rem); line-height:1.25;
}
.page-article h3{
  color:var(--neutral-50-color); font-weight:600;
  margin:1.5rem 0 .75rem; scroll-margin-top:6rem;
  font-size:clamp(1.0625rem, 1.02rem + 0.5vw, 1.375rem);
}
.page-article p{ margin-bottom:1rem; text-align: justify; }
.page-article strong{ font-weight:600; color:var(--neutral-50-color); }
.page-article em{ font-style:italic; }

.page-article ul, .page-article ol{ margin:.5rem 0 1rem 1.25rem; padding:0; }
.page-article li{ margin-bottom: 20px; }

.page-article figure{ margin:1.25rem 0; }
.page-article figure img{
  display:block; width:100%; height:auto; border-radius:.75rem;
   object-fit:cover; max-width:100%;
}
.page-article figcaption{
  font-size:.875rem; color:var(--neutral-250-color);
  text-align:center; margin-top:.5rem; font-weight:600;
}

.page-article .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== TABELAS PADRÃO ===== */
.page-article .table-wrap{
  width:100%;
  max-width:100%;
  overflow:hidden;                  /* sem scroll no desktop */
  border-radius:8px;
}

/* tabela não deve virar block no desktop */
.page-article table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;               /* não estoura a coluna do layout */
  font-size:14px;
  margin:1.25rem 0;
}

/* cabeçalho */
.page-article thead th{
  background:#f8f8f8;
  font-weight:600;
  text-align:left;
  padding:12px 15px;
  border:1px solid #ccc;
}

/* corpo */
.page-article tbody td{
  padding:12px 15px;
  border:1px solid #ccc;
  vertical-align:top;
  line-height:1.55;
  word-break:break-word;            /* quebra termos longos */
  overflow-wrap:anywhere;
}

/* zebra */
.page-article tbody tr:nth-child(even){ background:#fafafa; }

/* ===== Responsivo ===== */
/* até 992px: ativa rolagem horizontal no wrapper, não no table */
@media (max-width: 992px){
  .page-article .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .page-article table{
    min-width:720px;                /* legível; ajuste se quiser */
  }
}

/* barra de rolagem (opcional) */
.page-article .table-wrap::-webkit-scrollbar{ height:8px; }
.page-article .table-wrap::-webkit-scrollbar-thumb{ background:#d0d0d0; border-radius:8px; }
.page-article .table-wrap::-webkit-scrollbar-track{ background:#f2f2f2; }




/* Article breakpoints */
@media (min-width:768px){ .page-article{ max-width:min(78ch,100%); } }
@media (min-width:1024px){ .page-article{ max-width:min(80ch,100%); } }
@media (min-width:1320px){ .page-article{ max-width:min(82ch,100%); } }

/* =========================================================
   5) FORMULÁRIO
   ========================================================= */
.page-form{ display:grid; gap:1rem; margin-top:1rem; }
.page-form input, .page-form textarea{
  width:100%; padding:.75rem; border:1px solid var(--neutral-450-color);
  border-radius:.5rem; font-size:1rem; font-family:var(--theme-font);
  transition:border-color .2s, box-shadow .2s;
}
.page-form input:focus, .page-form textarea:focus{
  outline:none; border-color:var(--primary-50-color); box-shadow:0 0 0 3px rgba(255,1,112,.1);
}
.page-form textarea{ height:8rem; resize:vertical; }
.page-form button{
  display:inline-flex; align-items:center; width:max-content; border:none; cursor:pointer;
  border-radius:.5rem; background:linear-gradient(to right, var(--primary-50-color), var(--secondary-50-color));
  color:var(--white-color); padding:.75rem 1.25rem; text-transform:uppercase; font-size:.875rem; font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.07); font-family:var(--theme-font); transition:transform .2s;
}
.page-form button:hover{ transform:translateY(-1px); }

@media (min-width:768px){
  .page-form{ grid-template-columns:repeat(2,1fr); }
  .page-form textarea{ grid-column:span 2; }
}

/* =========================================================
   6) SIDEBAR
   ========================================================= */
.page-sidebar{ font-size:.875rem; line-height:1.5; }
.page-sidebar__title{ font-weight:800; color:var(--neutral-50-color); margin-bottom:.5rem; }
.page-sidebar__list{ margin-top:.5rem; display:flex; flex-direction:column; gap:.25rem;
  color:var(--neutral-200-color); list-style:none; }
.page-sidebar__list a{ color:inherit; text-decoration:none; transition:color .2s; }
.page-sidebar__list a:hover{ color:var(--primary-50-color); }

.page-sidebar__cities{ margin-top:2rem; }
.page-sidebar__cities ul{ margin-top:.5rem; display:flex; flex-direction:column; gap:.25rem;
  color:var(--neutral-200-color); list-style:none; }
.page-sidebar__cities a{
  text-decoration:underline; text-decoration-color:rgba(255,1,112,.4);
  color:inherit; transition:color .2s;
}
.page-sidebar__cities a:hover{ color:var(--primary-50-color); }

/* =========================================================
   7) FOOTER
   ========================================================= */
.page-footer{ background:var(--neutral-950-color); color:var(--neutral-300-color); }
.page-footer__content{ padding:2.5rem 0; }
.page-footer__grid{ display:grid; grid-template-columns:1fr; gap:2rem; }

.page-footer__logo{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:var(--white-color); text-decoration:none; }
.page-footer__logo-icon{
  width:2rem; height:2rem; border-radius:.5rem;
  background:linear-gradient(to right, var(--primary-50-color), var(--secondary-50-color));
}
.page-footer__logo-subtitle{ color:var(--neutral-350-color); font-weight:600; }
.page-footer__description{ margin-top:.75rem; color:var(--neutral-350-color); }
.page-footer__section-title{ font-weight:800; color:var(--white-color); margin-bottom:.5rem; }
.page-footer__contact p{ margin-top:.5rem; }
.page-footer__contact a{ text-decoration:underline; text-decoration-color:rgba(255,1,112,.4); color:inherit; transition:color .2s; }
.page-footer__contact a:hover{ color:var(--white-color); }
.page-footer__social{ margin-top:.5rem; display:flex; gap:.5rem; }
.page-footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.5rem; border:1px solid var(--neutral-200-color);
  color:inherit; text-decoration:none; transition:border-color .2s;
}
.page-footer__social a:hover{ border-color:var(--primary-50-color); }
.page-footer__bottom{ margin-top:1.5rem; border-top:1px solid var(--neutral-200-color); padding-top:1rem; font-size:.875rem; color:var(--neutral-350-color); }

@media (min-width:768px){
  .page-footer__grid{ grid-template-columns:repeat(3,1fr); }
}

/* =========================================================
   8) Mapa
   ========================================================= */
.mapa-itu {padding: 0 !important;}

/* =========================================================
   9) FIXES DE GUTTER & OVERFLOW
   ========================================================= */
.container.container-small{
  --gutter:16px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
@media (max-width:767px){ .page-article h2, .page-article h3{ text-align: center;} }
@media (min-width:768px){ .container.container-small{ --gutter:24px; } }
@media (min-width:1024px){ .container.container-small{ --gutter:32px; } }

html, body, #smooth-wrapper, #smooth-content{ overflow-x:hidden; }