/*!
 InovaClin Theme (Bootstrap 5.3) — gold/white/beige, elegant type 
 Versão ajustada (mobile e offcanvas) — 2025-09-09
*/

/* =========================================================
   0) Tokens de cor e variáveis globais
   ========================================================= */
   :root{
    /* Brand palette */
    --gold: #C2A661;
    --gold-600:#AF9557;
    --beige:#F7F3EC;
    --ink:#2B2B2B;
    --muted:#6B6B6B;
    --white:#ffffff;
  
    /* Categorias */
    --cat-facial-bg: var(--gold);               /* Facial */
    --cat-corporal-bg: #B6A999;                 /* Corporal */
    --cat-injetaveis-start:#B65D5D;             /* Injetáveis gradient */
    --cat-injetaveis-end:#C46F6F;
  
    /* Bootstrap overrides */
    --bs-body-bg: var(--beige);
    --bs-body-color: var(--ink);
    --bs-link-color: var(--gold);
    --bs-link-hover-color: var(--gold-600);
    --bs-primary: var(--gold);
    --bs-secondary: #B6A999;
    --bs-success: #4CAF50;
    --bs-warning: #C2A661;
    --bs-info: #89A8B2;
    --bs-danger: #B65D5D;
    --bs-border-color: rgba(0,0,0,.08);
    --bs-focus-ring-color: rgba(194,166,97,.25);
  }
  
  html,body{height:100%}
  body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
  }
  
  /* =========================================================
     1) Tipografia
     ========================================================= */
  h1,h2,h3,h4,.display-1,.display-2,.display-3,.display-4{
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: .2px;
    line-height: 1.3;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 1rem;
  }
  
  h1, .display-1, .display-2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  h2, .display-3 {
    font-size: 2rem;
    font-weight: 600;
  }
  
  h3 {
    font-size: 1.5rem;
    font-weight: 600;
  }
  
  h4 {
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .lead{
    color: #4a4a4a;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
  }
  
  p {
    margin-bottom: 1rem;
    line-height: 1.7;
  }
  
  /* =========================================================
     2) Navbar
     ========================================================= */
  .navbar{
    backdrop-filter:saturate(120%) blur(6px);
    -webkit-backdrop-filter:saturate(120%) blur(6px);
  }
  .navbar.shadow-on-scroll{ box-shadow:0 10px 30px rgba(0,0,0,.06); }
  .navbar .btn{border-radius: 999px;}
  .nav-link{font-weight:500}
  
  /* Altura do logo: desktop e mobile ajustado */
  .navbar-brand img{height:90px}
  @media (max-width: 575.98px){
    .navbar-brand img{height:90px}
  }

  /* Centraliza o logo somente dentro do menu offcanvas e em telas pequenas */
  @media (max-width: 992px) { /* 992px é o breakpoint lg do Bootstrap */
    .offcanvas-header .logo-offcanvas {
      margin-left: auto;
      margin-right: auto;
    }
    /* Garante que o botão de fechar permaneça à direita */
    .offcanvas-header {
      position: relative;
    }
    .offcanvas-header .btn-close {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }

/* Centraliza apenas em telas menores que 992px (breakpoint lg do Bootstrap) */
@media (max-width: 992px) {
  .navbar .logo-navbar-mobile {
    margin-left: auto;
    margin-right: auto;
  }
  /* Garante que o botão toggler não desloque o logo */
  .navbar-toggler {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .navbar .container {
    position: relative;
  }
}

  
  /* =========================================================
     3) Botões
     ========================================================= */
  .btn{ border-radius: 999px; padding:.7rem 1.1rem }
  .btn-gold{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--gold);
    --bs-btn-border-color:var(--gold);
    --bs-btn-hover-bg:var(--gold-600);
    --bs-btn-hover-border-color:var(--gold-600);
    --bs-btn-focus-shadow-rgb:194,166,97;
  }
  .btn-outline-gold{
    --bs-btn-color:var(--gold);
    --bs-btn-border-color:var(--gold);
    --bs-btn-hover-bg:var(--gold);
    --bs-btn-hover-color:#fff;
  }
  /* tamanho mais contido em listas de tratamentos */
  .card--treatment .btn{ padding:.55rem .9rem; font-size:.95rem }
  /* Remove legado */
  .btn--primary, .btn--outline { all: unset; display: none !important; }

  /* ===== Busca de tratamentos ===== */
  .treatment-search .input-group { border-radius: 999px; overflow: hidden; }
  .treatment-search .input-group .form-control { border-left: 0; }
  .treatment-search .input-group-text { background: #fff; }

  /* ===== Paginação – transições laterais ===== */
  @keyframes tpager-slide-in-left {
    from { transform: translateX(-28px); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
  }
  @keyframes tpager-slide-in-right {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  .tpager-anim-in-left  { animation: tpager-slide-in-left  .45s ease both; }
  .tpager-anim-in-right { animation: tpager-slide-in-right .45s ease both; }

  @media (prefers-reduced-motion: reduce) {
    .tpager-anim-in-left,
    .tpager-anim-in-right { animation: none !important; }
  }
  
  /* =========================================================
     4) Seções e banners
     ========================================================= */
  .hero, .page-banner{ background: linear-gradient(180deg, #fff 0%, var(--beige) 100%); }
  .hero{ padding-top: 6.5rem; }
  .page-banner{ padding: 8rem 0 3rem; }
  .page-section{ padding: 4rem 0; }
  .page-section--light{ background:#fff; }
  .page-section--primary{
    background: radial-gradient(1200px 600px at 50% 10%, #c2a66133 0%, #c2a6610d 40%, #c2a66100 70%), var(--gold);
    color:#fff;
  }

  /* Altura padrão de banner */
.hero-banner {
  height: 600px; /* padrão desktop */
}

.hero-banner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Responsividade */
@media (max-width: 992px) {
  .hero-banner {
    height: 400px; /* tablets */
  }
}

@media (max-width: 576px) {
  .hero-banner {
    height: 390px; /* celulares */
  }
}


  
  /* Títulos / subtítulos */
  .section-title{ 
    font-family: "Playfair Display", serif; 
    font-weight: 600; 
    font-size: 2.25rem;
    line-height: 1.2;
    color: #2c2c2c;
    margin-bottom: 1rem;
  }
  .section-title--light{ 
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .section-subtitle{ 
    color: #656565;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
  }
  .section-subtitle--light{ 
    color: rgba(255,255,255,.85);
    font-size: 1.125rem;
    line-height: 1.6;
  }
  
  /* =========================================================
     5) Cards (genéricos)
     ========================================================= */
  .card{
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.05);
    transition: transform .25s ease, box-shadow .25s ease;
    background-color: #fff;
  }
  .card:hover{ transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.08); }
  
  /* ⚠️ NÃO pinte todos os badges de dourado — respeite as categorias */
  .card .badge:not(.badge-facial):not(.badge-corporal):not(.badge-injetaveis){
    background: var(--gold);
    color:#fff;
  }
  
  .card--testimonial{ background:#fff; border:none; padding:1.25rem; border-radius:1.2rem; }
  .card__avatar{ box-shadow:0 6px 16px rgba(0,0,0,.12); }
  
  /* Blog cards */
  .card--blog .card__image img{object-fit:cover;height:260px;width:100%}
  .blog-article--featured .blog-article__image img{object-fit:cover;height:100%;width:100%}
  
  /* Image optimization */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Image fallback and loading states */
  img[src=""], img:not([src]) {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f8f9fa'/%3E%3Ctext x='50' y='50' font-family='Arial' font-size='12' fill='%236c757d' text-anchor='middle' dy='.3em'%3EImagem%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
  }
  
  /* Loading placeholder */
  .img-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }
  
  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  /* Error state for images */
  .img-error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f8d7da'/%3E%3Ctext x='50' y='50' font-family='Arial' font-size='12' fill='%23721c24' text-anchor='middle' dy='.3em'%3EErro%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
  }
  
  .card-img-top {
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-img-top {
    transform: scale(1.05);
  }
  
  /* Avatar styling */
  .card__avatar {
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* Blog typography */
  .blog-article__title {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2c2c2c;
    margin-bottom: 0.75rem;
  }
  
  .blog-article__excerpt {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  .blog-article__meta {
    color: #888;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .page-banner__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2c2c2c;
  }
  
  .page-banner__subtitle {
    font-size: 1.125rem;
    color: #666;
    line-height: 1.5;
    font-weight: 400;
  }
  
  
  /* Page feature cards */
  .page-card{
    background:#fff;
    border-radius:1.2rem;
    padding:1.5rem;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    height:100%;
  }
  .page-card__icon{
    width:54px; height:54px; display:grid; place-items:center;
    border-radius:14px; background:rgba(194,166,97,.12); color:var(--gold); font-size:1.25rem;
    margin-bottom:.75rem;
  }
  .page-card__title{ 
    font-weight: 700; 
    font-size: 1.25rem;
    line-height: 1.3;
    color: #2c2c2c;
    margin-bottom: 0.75rem;
  }
  .page-card__description{ 
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  /* Utilidades */
  .text-gold{color:var(--gold)!important}
  .bg-beige{background:var(--beige)!important}
  .shadow-soft{ box-shadow:0 14px 34px rgba(0,0,0,.08)!important }
  .rounded-2xl{ border-radius:1.25rem!important }
  
  /* Badges (base) */
  .badge{ border-radius:.6rem; padding:.5rem .7rem; font-weight:600 }
  .badge.bg-primary{ background:var(--gold)!important }
  
  /* =========================================================
     6) Modal de Agendamento (custom)
     ========================================================= */
  .booking-modal{ position:fixed; inset:0; display:none; z-index:1060 }
  .booking-modal[aria-hidden="false"]{ display:block }
  .booking-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
  .booking-modal__dialog{
    position:relative; margin:6vh auto; max-width:980px; max-height:90vh; width:80%; background:#fff; border-radius:1.2rem; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
  }
  .booking-modal__header{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--bs-border-color) }
  .booking-modal__title{ margin:0; font-weight:700 }
  .booking-modal__close{ border:0; background:transparent; font-size:1.8rem; line-height:1; padding:.25rem .5rem; cursor:pointer }
  .booking-modal__body{ padding:0 }
  .booking-modal iframe{ width:100%; height:90vh; max-height:1000px; display:block; }
  
  /* =========================================================
     7) Filtros (blog, resultados, tratamentos)
     ========================================================= */
  .btn-filter{ border:1px solid var(--gold); color:var(--gold); background:#fff; }
  .btn-filter.active, .btn-filter:hover{ background:var(--gold); color:#fff }
  
  /* =========================================================
     8) Footer
     ========================================================= */
  .site-footer{ background:#fff; border-top:1px solid var(--bs-border-color) }
  .site-footer .nav-link{ color:var(--muted) }
  .site-footer .nav-link:hover{ color:var(--gold) }
  
  .footer{
    background: linear-gradient(180deg, #fff 0%, var(--beige) 100%);
    border-top: 2px solid rgba(194,166,97,.2);
    font-size: .95rem;
    color: var(--muted);
  }
  .footer h6{
    font-weight:700;
    letter-spacing:.5px;
    font-size:.85rem;
    position:relative;
  }
  .footer h6::after{
    content:"";
    display:block;
    width:24px;
    height:2px;
    background: var(--gold);
    margin-top:.35rem;
    border-radius:1px;
  }
  .footer a{
    color: var(--muted);
    text-decoration:none;
    transition:color .2s ease, transform .2s ease;
  }
  .footer a:hover{
    color: var(--gold-600);
    transform: translateX(2px);
  }
  .footer .fs-4 a{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(194,166,97,.08);
    transition: all .25s ease;
  }
  .footer .fs-4 a:hover{
    background: var(--gold);
    color:#fff;
    transform: translateY(-2px);
    box-shadow:0 6px 14px rgba(194,166,97,.25);
  }
  .footer p.small{ font-size:.8rem; color:#999; }
  .footer-brand img{height:125px}
  .footer .footer-bottom{
    border-top:1px solid rgba(0,0,0,.08);
    margin-top:2rem;
    padding-top:1rem;
    text-align:center;
    font-size:.82rem;
    color:#aaa;
  }
  
  /* Patch: offcanvas “inativo” no desktop — AJUSTADO */
  @media (min-width: 992px){ .offcanvas:not(.show){ visibility:hidden; } }
  
  /* =========================================================
     9) Formulários
     ========================================================= */
  .form-control, .form-select{ border-radius:.8rem }
  .input-group-text{ border-radius:.8rem 0 0 .8rem }
  
  /* =========================================================
     10) Helpers/Media/AOS
     ========================================================= */
  .object-fit-cover{ object-fit:cover }
  [data-aos]{ will-change: transform, opacity }
  
  /* Evitar rolagem lateral no mobile */
  html, body{ overflow-x:hidden; }
  img, video{ max-width:100%; height:auto; }
  iframe{ max-width:100%; display:block; }
  
  /* =========================================================
     11) PÁGINA: TRATAMENTOS
     ========================================================= */
  /* Banner de página */
  .page-banner.page-banner--tratamentos{
    background:
      radial-gradient(900px 300px at 70% -10%, rgba(194,166,97,.20) 0%, rgba(194,166,97,0) 60%),
      linear-gradient(180deg, #fff 0%, var(--beige) 100%);
    padding: 7.5rem 0 3.25rem;
    text-align: center;
  }
  .page-banner__title{
    font-family: "Playfair Display", serif;
    font-weight: 700;
    letter-spacing: .3px;
  }
  .page-banner__subtitle{
    color:#666;
    max-width: 720px;
    margin: .5rem auto 0;
  }
  
  /* Toolbar de categorias */
  .treatment-categories{
    position: sticky; top: 56px; z-index: 1010;
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
  }
  @media (max-width: 991.98px){
    .treatment-categories{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  }
  .treatment-categories__wrapper .btn,
  .results-filters__buttons .btn{
    border-width:2px;
    font-weight:700;
    border-radius:999px;
    padding:.55rem 1rem;
  }
  .treatment-categories__wrapper .btn.active,
  .results-filters__buttons .btn.active{
    background:var(--gold);
    color:#fff;
    box-shadow:0 6px 18px rgba(194,166,97,.22);
  }
  
  /* Cards de tratamento */
  .card--treatment{
    overflow:hidden;
    border-radius:1.1rem;
    border:1px solid rgba(0,0,0,.06);
    background:#fff;
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .card--treatment:hover{
    transform: translateY(-4px);
    box-shadow:0 16px 38px rgba(0,0,0,.10);
  }
  .card--treatment .card__image{ display:block; width:100%; height:260px; object-fit:cover; }
  @media (min-width: 992px){ .card--treatment .card__image{ height: 300px; } }
  .card--treatment .card__body{ padding:1.05rem 1.05rem 1.15rem; }
  .card--treatment h3{ margin-bottom:.25rem; line-height:1.25; }
  .card--treatment ul{ padding-left:0; margin:0 0 .75rem; list-style:none; }
  .card--treatment li{ margin-bottom:.25rem; }
  
  /* =========================================================
     12) PADRONIZAÇÃO DE CORES POR CATEGORIA
     ========================================================= */
  /* Facial */
  .badge.badge-facial{ background: var(--cat-facial-bg); color:#fff; }
  .card .badge.badge-facial{ background: var(--cat-facial-bg); color:#fff; }
  .results-header-facial{ background: var(--cat-facial-bg); color:#fff; }
  /* Corporal */
  .badge.badge-corporal{ background: var(--cat-corporal-bg); color:#fff; }
  .card .badge.badge-corporal{ background: var(--cat-corporal-bg); color:#fff; }
  .results-header-corporal{ background: var(--cat-corporal-bg); color:#fff; }
  /* Injetáveis */
  .badge.badge-injetaveis{
    background: linear-gradient(90deg, var(--cat-injetaveis-start) 0%, var(--cat-injetaveis-end) 100%);
    color:#fff;
  }
  .card .badge.badge-injetaveis{
    background: linear-gradient(90deg, var(--cat-injetaveis-start) 0%, var(--cat-injetaveis-end) 100%);
    color:#fff;
  }
  .results-header-injetaveis{
    background: linear-gradient(90deg, var(--cat-injetaveis-start) 0%, var(--cat-injetaveis-end) 100%);
    color:#fff;
  }
  /* Compat: quando existir markup antigo com bg-* */
  .badge.bg-primary{ background: var(--cat-facial-bg)!important; color:#fff!important; }
  .badge.bg-secondary{ background: var(--cat-corporal-bg)!important; color:#fff!important; }
  .badge.bg-danger{ background: linear-gradient(90deg, var(--cat-injetaveis-start) 0%, var(--cat-injetaveis-end) 100%)!important; color:#fff!important }
  
  /* =========================================================
     13) BLOG
     ========================================================= */
  .page-banner.page-banner--blog{ /* herda o ajuste mobile via .page-banner */ }
  .blog-article__meta .bi{ vertical-align:-.1em; }
  .blog-filters__categories .btn{ border-color:var(--gold); color:var(--gold); }
  .blog-filters__categories .btn.active{ background:var(--gold); color:#fff; }
  
  /* =========================================================
     14) RESULTADOS (antes/depois, filtros)
     ========================================================= */
  .results-filters__buttons .btn{ border-color:var(--gold); color:var(--gold); }
  .results-filters__buttons .btn.active{ background:var(--gold); color:#fff; }

  /* Grid de resultados: cards e imagens com tamanho uniforme */
  #results-grid .results-item{ height:100%; }
  #results-grid .results-item__card{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  #results-grid .results-item__header{
    flex-shrink:0;
    min-height:4.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #results-grid .results-item__content{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #results-grid .results-item__images{
    flex-shrink:0;
    height:200px;
  }
  @media (min-width: 992px){ #results-grid .results-item__images{ height:220px; } }
  #results-grid .results-item__images > [class*="col-"]{ height:100%; }
  #results-grid .results-item__image-wrapper{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:var(--bs-border-radius, 0.375rem);
    background:#f0f0f0;
  }
  #results-grid .results-item__image-wrapper img{
    flex:1;
    min-height:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  #results-grid .results-item__image-wrapper .badge{ flex-shrink:0; }
  #results-grid .results-item__details{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #results-grid .results-item__description-wrap{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    line-clamp:4;
  }
  #results-grid .results-item__description-wrap .results-item__description:last-child{ margin-bottom:0; }
  #results-grid .results-item__meta{ flex-shrink:0; }
  
  /* =========================================================
     15) CONTATO — mapa responsivo
     ========================================================= */
  .map-section__map .ratio{ background:#f8f9fa; }
  .map-section__map iframe{ width:100%; height:100%; border:0; }
  
  /* =========================================================
     16) OFFCANVAS — ajustes gerais
     ========================================================= */
  /* Evita que o offcanvas cause largura extra quando oculto */
  .custom-offcanvas{ will-change: transform, opacity; }
  
  /* Em telas menores, nenhuma interferência especial */
  @media (max-width: 991.98px){
    .navbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background-color: rgba(255,255,255,.95); }
  }
  
  /* =========================================================
     17) Misc
     ========================================================= */
  /* Espaçamentos sutis para títulos dentro de cartões */
  .card .h5, .card h5{ line-height:1.25; }
  
  /* Alivia pequenos gaps que às vezes geram overflow por subpixels */
  .container, .container-fluid{ overflow-x:hidden; }
  
  /* -------- HOTFIX SCROLL / NAVBAR / OFFCANVAS -------- */

/* 1) Voltar ao comportamento padrão do Bootstrap para offcanvas
      (invisível fechado; visível só quando .show) */
.offcanvas { visibility: hidden; }
.offcanvas.show { visibility: visible; }

/* 2) Garantir que o offcanvas não cause overflow horizontal
      quando estiver fora da tela por transform */
.offcanvas, .offcanvas-backdrop {
  overscroll-behavior: contain;
  contain: layout paint; /* isola layout para evitar “vazar” largura */
}

/* 3) Navbar compacta no mobile (altura real menor) */
@media (max-width: 575.98px) {
  .navbar {
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
  .navbar-brand img {
    height: 90px; /* reduz um pouco mais no mobile */
  }
  
  /* Typography adjustments for mobile */
  h1, .display-1, .display-2 {
    font-size: 2rem;
  }
  
  h2, .display-3 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.375rem;
  }
  
  .section-title {
    font-size: 1.875rem;
  }
  
  .page-banner__title {
    font-size: 2.25rem;
  }
  
  .page-banner__subtitle {
    font-size: 1rem;
  }
}

/* 4) Corta qualquer “baba” horizontal causada por transforms, gutters, etc. */
html, body { overflow-x: clip; } /* melhor que hidden p/ evitar bugs de rolagem */

/* Suaviza a transição da navbar ao rolar (se usar .shadow-on-scroll) */
.navbar { transition: box-shadow .2s ease, background-color .2s ease; }

/* Garante que a área clicável do toggler seja confortável no mobile */
.navbar-toggler { padding: .5rem .75rem; }

/* Evita “quicar” quando o offcanvas abre/fecha (iOS/Android) */
.offcanvas, .offcanvas-backdrop { overscroll-behavior: contain; }

/* Hero: dar mais fôlego abaixo da navbar fixa */
.hero{
  /* antes: 6.5rem; aumentei para compensar a altura da navbar/logo */
  padding-top: 8.25rem;
}

@media (max-width: 575.98px){
  /* no mobile a navbar é menor, mas ainda assim sobe um pouco */
  .hero{ padding-top: 7.25rem; }
}

/* Se usar âncoras (#id), evita que a navbar cubra o título ao rolar */
:root{ scroll-padding-top: 7.5rem; }
@media (max-width: 575.98px){
  :root{ scroll-padding-top: 6.5rem; }
}

.team-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  border: 3px solid var(--gold);
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

@media (max-width: 575.98px) {
  .team-avatar {
    width: 110px;
    height: 110px;
  }
}

.structure-photo {
  width: 100%;
  height: 400px; /* altura uniforme */
  object-fit: cover;
  border-radius: 1rem;
  border: 3px solid var(--gold); /* borda dourada */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: transform .35s ease, box-shadow .35s ease;
}

.structure-photo:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

@media (max-width: 575.98px) {
  .structure-photo {
    height: 200px;
  }
}

.structure-photo-banner {
  width: 100%;
  height: 430px; /* altura uniforme */
  object-fit: cover;
  border-radius: 1rem;
  border: 3px solid var(--gold); /* borda dourada */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: transform .35s ease, box-shadow .35s ease;
}

.structure-photo-banner:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

@media (max-width: 575.98px) {
  .structure-photo-banner {
    margin-top: 1rem;
    height: 200px;
  }
}

/* === InovaClin: Elegant Animations Pack (2025-09-09) === */
.card--treatment .card__image { transition: transform .45s ease, filter .45s ease; }
.card--treatment:hover .card__image { transform: scale(1.03); filter: saturate(1.02) contrast(1.02); }

.card--treatment .badge { transition: transform .35s ease, box-shadow .35s ease; will-change: transform; }
.card--treatment:hover .badge { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }

.btn { transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* Slide-in (já existem keyframes .tpager-anim) — usamos classes abaixo via JS */
.treatment-col { transition: transform .25s ease, opacity .25s ease; will-change: transform, opacity; }
.treatment-col.is-hidden { opacity: 0; transform: scale(.98); pointer-events: none; }

/* Soft reveal para títulos/subtítulos (IntersectionObserver liga .is-in) */
.reveal-soft { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal-soft.is-in { opacity: 1; transform: translateY(0); }

/* Focus-ring dourado suave (inputs/botões) */
.form-control:focus, .form-select:focus, .btn:focus {
  box-shadow: 0 0 0 .2rem rgba(194,166,97,.20);
  outline: none;
}

@media (prefers-reduced-motion: reduce){
  .card--treatment .card__image,
  .card--treatment .badge,
  .btn,
  .treatment-col { transition: none !important; }
}
/* === /Elegant Animations Pack === */

/* realce rápido quando a busca "joga" para a seção */
.section-pulse{
  animation: sectionPulse .6s ease;
}
@keyframes sectionPulse{
  0%{ box-shadow: 0 0 0 0 rgba(194,166,97,.0); }
  40%{ box-shadow: 0 0 0 8px rgba(194,166,97,.20); }
  100%{ box-shadow: 0 0 0 0 rgba(194,166,97,.0); }
}

/* Botão flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 60px;          /* Distância do rodapé */
  right: 60px;           /* Distância da lateral direita */
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  line-height: 60px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
}

/* Ajuste para telas menores */
@media (max-width: 576px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 28px;
    line-height: 50px;
    bottom: 15px;
    right: 15px;
  }
}
.whatsapp-float::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  animation: pulse 1.5s infinite;
  z-index: -1;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* === Página de manutenção InovaClin (ajuste navbar fixa) === */
.maintenance-container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  text-align: center;

  /* NOVO: distância do topo para não ficar atrás da navbar */
  padding-top: calc(2rem + 8.25rem); /* desktop: altura navbar/logo + padding interno */
}

@media (max-width: 575.98px){
  .maintenance-container {
    padding-top: calc(2rem + 7.25rem); /* mobile: navbar menor */
  }
}

/* Formulario Honeypot */
form .hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ====== BLOG PAGE STYLES ====== */
  .page-banner {
    padding-bottom: 0rem;
  }
  
  /* Additional typography improvements */
  .card-title {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: #2c2c2c;
    margin-bottom: 0.75rem;
  }
  
  .card-text {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  .btn {
    font-weight: 500;
    letter-spacing: 0.025em;
  }
  
  .nav-link {
    font-weight: 500;
    letter-spacing: 0.025em;
  }
  
  /* Better text contrast and readability */
  .text-muted {
    color: #6c757d !important;
  }
  
  small, .small {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  /* Image loading states */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  img[loading="lazy"].loaded {
    opacity: 1;
  }
  
  /* Blur-up effect for images - only apply to lazy loaded images */
  .card-img-top[loading="lazy"] {
    filter: blur(5px);
    transition: filter 0.3s ease;
  }
  
  .card-img-top[loading="lazy"].loaded {
    filter: blur(0);
  }