/* === Arial Nova (TTF local) === */
@font-face {
  font-family: "Arial Nova";
  src: url("../font/ArialNova.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Italic";
  src: url("../font/ArialNova-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Light";
  src: url("../font/ArialNova-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Nova LI";
  src: url("../font/ArialNova-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Bold";
  src: url("../font/ArialNova-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Nova";
  src: url("../font/ArialNova-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Opcional: versão condensada para títulos */
@font-face {
  font-family: "Arial Nova Cond";
  src: url("../font/ArialNovaCond.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Cond Bold";
  src: url("../font/ArialNovaCond-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Cond Italic";
  src: url("../font/ArialNovaCond-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Arial Nova Cond Bold Italic";
  src: url("../font/ArialNovaCond-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}


:root{
  --brand-green:#3FA16C;
  --brand-green-dark:#2e7f53;
  --brand-navy:#193544;
  --brand-navy-2:#15323f;
  --brand-gray:#c6c6c6;
  --brand-deep:#253746;
  --text:#1d2430;
  --muted:#5b6975;
  --white:#ffffff;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Arial Nova", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;color:var(--text);background:#c6c6c6;scroll-behavior:smooth;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 32px}
@media (min-width: 1440px){
  .container{ max-width: 1280px; padding: 0 40px; }
}
header.site{
  position:fixed;top:0;z-index:999;background:#fff;border-bottom:1px solid #e9ecf0;
  backdrop-filter:saturate(1.2) blur(6px); --menu-h: 110px; --logo-h: 88px;
  width: 100%;
}

html { scroll-behavior: smooth; } /* rolagem suave */

.reumatologia-section,
.medicinaEsportiva {
  scroll-margin-top: var(--menu-h, 90px); /* compensa a altura do menu */
}



/* Layout do topo em GRID com áreas explícitas */
.nav{
  display: grid;
  grid-template-columns: auto 1fr;          /* esquerda | direita */
  grid-template-areas: "brand menu";
  align-items: center;
  min-height: var(--menu-h);
}

/* Posicionamento fixo de cada bloco */
.brand{ grid-area: brand; }
header .menu{ grid-area: menu; justify-self: end; }

/* Spacer não é mais necessário */
.spacer{ display: none !important; }

/* Marca (logo + texto) */
.brand a{
  display:flex; align-items:center; gap:14px;
  height: var(--menu-h); margin-right: 30px;
}

/* Logo: tamanho único controlado pela variável */
.brand img{
  height: var(--logo-h) !important;
  width: 300px;
  display:block;
  flex-shrink: 0;
}

/* Links do menu com zona de clique alta */
header .menu{
  display:flex; align-items:center; gap:22px;
  white-space: nowrap;
}
header .menu a{
  display:flex; align-items:center;
  height: var(--menu-h);
  padding: 0 12px;
  border-radius:10px;
  color:#1e2a36;
  font-size:18px; font-weight:500;
  white-space: nowrap;
}
header .menu a:hover{ background:#f1f5f9; }



header .menu a.active{ color:var(--brand-green); }

.btn, .btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand-green);color:#fff;border-radius:999px;padding:10px 16px;
  font-size:18px;font-weight:500;border:5px solid transparent;box-shadow:var(--shadow)
}
.btn:hover{background:var(--brand-green)}
.btn-outline{background:transparent;color:var(--brand-green);border-color:var(--brand-green);box-shadow:none}
.btn-outline:hover{background:var(--brand-green);color:#fff}
.hero{background:linear-gradient(180deg, rgba(25,53,68,.85), rgba(25,53,68,.85)), url('../img/4.png') center/cover no-repeat;color:#fff}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;min-height:420px;padding:20px 20px; padding-bottom: 90px;}
.hero h1{font-family:"Arial Nova Light", sans-serif;font-size:3rem;padding-left: 35px ;line-height:1.15;margin:0 0 14px}
.hero p{color:#e4eef2;max-width:560px}
.hero img{margin-top:0; margin-bottom:-60px;  width:500px !important; max-width:500px !important;}
.hero .btn{padding:20px 40px;font-size:25px;margin:50px 0; border-radius: 90px; background: #3FA16C !important;}
.hero .btn:hover{background: var(--brand-green-dark) !important;}
.badge{display:inline-block;padding:8px 12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);border-radius:999px;font-size:12px;margin-bottom:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #000;border-radius:0;padding:30px;width:100%;max-width:350px;margin:0 auto;}
.specialty-card{background:#c6c6c6;border:1px solid #000;border-radius:50px;padding:30px;width:100%;max-width:350px;margin:0 auto;position:relative;}
.card.center{text-align:center}
.card .icon{width:120px;height:120px;border:2px #a7dfc2;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:#2d8857;font-weight:900}
.specialty-card .icon img{width:150px;height:130px;}
.card h3{margin:15px 0 10px;font-size:24px;}
.card p{color:var(--muted);font-size:16px;line-height:1.5;margin-bottom:30px;}
.specialty-card h3{font-family:"Arial Nova Bold", sans-serif;font-size:28px;color:#000;margin:20px 0 15px;}
.specialty-card p{font-family:"Arial Nova Light", sans-serif;font-size:18px;color:#000;line-height:1.6;margin-bottom:40px;}
.btn-outline{margin-top:0;position:relative;bottom:-15px;left:50%;transform:translateX(-50%);}
.specialty-btn{background:#3aa068 !important;color:#fff;border-radius:10px;padding:10px 20px;position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);}
.specialty-btn:hover{background:#2e7f53 !important;}
.blog{padding:40px 0;background:#c6c6c6}


.section.dark{background:#142f40;color:#fff;padding:0;}
.section.dark.refactored .container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.section.dark.refactored .left-content h1{font-family:"Arial Nova Bold", sans-serif;color:#2e7f53;font-size:36px;}
.section.dark.refactored .left-content p{color:#fff;font-size:16px;line-height:1.6;margin-bottom:30px;}
.section.dark.refactored .left-content .btn{background:#3aa068;border-radius:50px;padding:15px 30px;font-size:18px;}
.section.dark.refactored .right-content{display:flex;justify-content:center;align-items:center;}
.section.dark.refactored .image-container{position:relative;}
.section.dark.refactored .image-container img{max-width:100%;height:auto;}
.section.dark.refactored .cross-btn{background:#f2f2f2; font-family: "Arial Nova Bold"; color: black;border:none;border-radius:20px;width:180px;height:60px;position:absolute;font-size:14px;display:flex;justify-content:center;align-items:center;}
.section.dark.refactored .cross-btn.top{top:80px;left:50%;transform:translateX(-50%);}
.section.dark.refactored .cross-btn.left{left:30px;top:50%;transform:translateY(-50%);}
.section.dark.refactored .cross-btn.right{right:30px;top:50%;transform:translateY(-50%);}
.section.dark.refactored .cross-btn.bottom{bottom:80px;left:50%;transform:translateX(-50%);}



.diferenciais{background:url('../img/dif.png') center/cover no-repeat;padding:80px 0;}
.diferenciais .container{display:grid;grid-template-columns:40% 60%;gap:40px;align-items:center;}
.diferenciais .left-content h1{font-family:"Arial Nova Cond Bold", sans-serif;color:#3aa068;font-size:42px;margin-bottom:20px;}
.diferenciais .left-content p{color:#fff;font-size:21px;line-height:1.6;}
.diferenciais .right-content{display:flex;flex-direction:column;gap:20px;}
.diferenciais .diff-btn{background:#3aa068;color:#fff;border-radius:50px; margin: 20px;padding:25px 35px;display:flex;align-items:center;gap:15px;font-family:"Arial Nova Bold", sans-serif;font-size:20px;}


.equipe-medica{background:#c6c6c6;padding:80px 0;}
.equipe-medica .title{font-family:"Arial Nova Bold", sans-serif;font-size:36px;color:#000;}
.equipe-medica .two-col{gap:20px;}
.equipe-medica .card{background:#c6c6c6;border:none;box-shadow:none;transition:transform 0.3s;text-align:center;width:100%;max-width:500px;margin:0 auto;}
.equipe-medica .card:hover{transform:scale(1.05);}
.equipe-medica .card img{width:100% !important;height:auto !important;border-radius:14px;margin:0 auto 20px;display:block;max-width:500px !important;}
.equipe-medica .card strong{font-family:"Arial Nova Bold", sans-serif;font-size:30px;color:#000;}
.equipe-medica .card .small{font-family:"Arial Nova Light", sans-serif; font-size: 16px;color:#000;}
.section.dark p{color:#cbdbe3}


.section{background-color: #c6c6c6; margin-top: var(--menu-h);}
.hero { margin-top: 0; }
.kv-pills{display:grid;gap:12px}
.kv-pills .pill{background:#0f2c38;color:#d7edf2;border-radius:999px;padding:12px 18px;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.15)}
.kv-title{font-size:22px;margin-bottom:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
h2.title{font-size:26px;margin:0 0 18px;color:var(--deeper,#0f2230)}
.small{font-size:14px;color:var(--muted)}
footer{background:#7c7c7c;color:#fff;padding:40px 0 0 0;margin-top:auto;margin-bottom:0;}
.copyright-bar{background:#3aa068;color:#fff;text-align:center;padding:20px 0;}
.copyright-bar p{margin:0;font-family:"Arial Nova", sans-serif;font-size:14px;}
footer .container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:0 40px 40px 40px;max-width:1200px;margin:0 auto;}
.footer-left{text-align:left;}
.footer-left img{width:500px; padding: 30px;}
.footer-center{text-align:left;}
.footer-center h4{font-family:"Arial Nova Bold", sans-serif;margin-bottom:15px;}
.footer-center ul{list-style:none;padding:0;}
.footer-center li{margin-bottom:10px;}
.footer-center a{color:#fff;text-decoration:none;font-family:"Arial Nova Light", sans-serif;}
.footer-center a:hover{text-decoration:underline;}
.footer-right{text-align:left;}
.footer-right h4{font-family:"Arial Nova Bold", sans-serif;margin-bottom:15px;}
.contact-info div{margin-bottom:10px;font-family:"Arial Nova Light", sans-serif;}
.contact-info i{margin-right:10px;}
/* Animações */
section{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease, transform 0.6s ease;}
section.animate-in{opacity:1;transform:translateY(0);}

/* Responsividade adicional */
@media (max-width: 980px){
  .fale-conosco .container{grid-template-columns:1fr;}
  .fale-conosco .right-info{text-align:center;padding-left:0;margin:20px auto;}
  .diferenciais .container{grid-template-columns:1fr;}
  .section.dark.refactored .container{grid-template-columns:1fr;}
  footer .container{grid-template-columns:1fr;}
  .footer-left, .footer-center, .footer-right{text-align:center;}
  .footer-left img{margin:0 auto 20px;}
  .footer-left .social{display:flex;justify-content:center;gap:10px;padding-right: 55px;}
  .footer-center ul{text-align:center;}
  .footer-right .contact-info{text-align:center;}
}
@media (max-width: 768px){
  .hero .container{padding:15px;}
  .hero h1{font-size:32px;}
  .section{padding:30px 0;}
  .fale-conosco{padding:40px 0;}
  .fale-conosco h1{font-size:28px;}
  .equipe-medica .card img{max-width:300px !important;}
  .specialty-card{max-width:300px;}
}
.social{display:flex;gap:10px}
.social a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4)}
.hero.small .container{min-height:250px}
.banner{background:#54a77b;color:#fff;border-radius:18px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.banner .cta{display:flex;gap:12px;align-items:center}
blockquote.banner{font-weight:700;font-size:14px;letter-spacing:.3px}

/* blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-card{background:#3aa068;border-radius:22px;padding:0 0 16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;color:#fff;}
.blog-card img{height:180px;object-fit:cover;}
.blog-card .content{padding:16px}
.blog-card h3{color:#fff;margin:0 0 8px;font-family:"Arial Nova Bold", sans-serif;}
.blog-card .meta{font-size:12px;color:#fff;padding:0 16px 16px}

.readmore{background:#2e7f53;color:#fff;border-radius:16px;padding:12px 20px;text-align:center;margin:0 16px 14px;font-family:"Arial Nova Bold", sans-serif;}
.readmore:hover{filter:brightness(1.05)}
/* contact form */
.form{display:grid;gap:12px}
.input, textarea{
  width:100%;padding:14px 16px;border:2px solid #dae3ea;border-radius:999px;background:#f6f8fa;outline:none;
}
textarea{border-radius:18px;min-height:120px}
input:focus, textarea:focus{border-color:#a9d9c1;background:#fff}
/* dropdown */
.dropdown{position:relative}
.dropdown > a{display:flex;align-items:center;gap:6px}
.dropdown-menu{
  position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease
}
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover{opacity:1;visibility:visible}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:10px;color:#123}
.dropdown-menu a:hover{background:#f2f6f9}


/* tables/values */
.values{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.pills{display:grid;grid-template-columns:1fr;gap:12px}
.pill-item{background:#0b2a36;color:#d4ebf0;border:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:12px}
/* Responsive */
@media (max-width: 980px){
  .grid-3, .two-col, .blog-grid, .values, footer .container{grid-template-columns:1fr}
  .hero .container{grid-template-columns:1fr;min-height:unset}
  .dropdown-menu{position:static;display:block;border:none;box-shadow:none;padding:0}
  header .menu{flex-wrap:wrap}
}
.fale-conosco{background:url('../img/4.png') center/cover no-repeat;padding:80px 0;}
.fale-conosco .container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.fale-conosco .left-form{text-align:center;}
.fale-conosco h1{color:#fff;font-family:"Arial Nova Bold", sans-serif;font-size:36px;margin-bottom:30px;}
.fale-conosco .contact-form{padding:30px;max-width:500px;margin:0 auto;}
.fale-conosco .contact-form input, .fale-conosco .contact-form textarea{width:100%;padding:12px;margin-bottom:15px;border:1px solid #ccc;border-radius:10px;background:rgba(255,255,255,0.5);color:#fff;font-weight:lighter;font-family:"Arial Nova", sans-serif;}
.fale-conosco .contact-form input::placeholder, .fale-conosco .contact-form textarea::placeholder{color:#3aa068;}
.fale-conosco .contact-form textarea{min-height:100px;resize:vertical}
.fale-conosco .contact-form button{background:#3aa068;color:#fff;border:none;padding:15px 60px;border-radius:10px;font-family:"Arial Nova Bold", sans-serif;font-size:24px;cursor:pointer;}
.fale-conosco .right-info{text-align:left;color:#fff;max-width:400px;margin:60px auto; padding-left: 50px;}
.fale-conosco .info-content h2{font-family:"Arial Nova Bold", sans-serif;font-size:24px;margin-top:20px;margin-bottom:10px;}
.fale-conosco .info-content p{font-family:"Arial Nova", sans-serif;line-height:1.6;}


/* ====== Vars do header ====== */
header.site{ --menu-h: 84px; --logo-h: 48px; } /* desktop base */

/* Hambúrguer: escondido no desktop */
.hamburger{
  display:none; background:transparent; border:0; padding:0 6px; margin-left:12px;
  height: var(--menu-h); align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span{ display:block; width:28px; height:2px; background:#1e2a36; margin:5px 0; border-radius:2px; transition:transform .2s, opacity .2s; }

/* Overlay full-screen (mobile menu) */
.nav-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(16,23,40,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
body.menu-open .nav-overlay{ opacity:1; pointer-events:auto; }
.nav-close{
  position:absolute; top:14px; right:16px; font-size:36px; line-height:1;
  background:transparent; border:0; color:#fff; cursor:pointer;
}
.mobile-menu{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}
.mobile-menu a{
  color:#fff; font-size:20px; font-weight:600; padding:10px 0; display:block;
}

/* Dropdowns dentro do overlay: sempre visíveis, formatados */
.nav-overlay .dropdown{ width:100%; }
.nav-overlay .dropdown > a{ pointer-events:auto; color:#cfe7d9; }
.nav-overlay .dropdown-menu{
  display:grid !important; gap:10px; position:static;
  background:transparent; border:0; box-shadow:none; padding:4px 0 0 0;
}
.nav-overlay .dropdown-menu a{ opacity:.95; font-weight:500; }

/* ====== Mobile / Tablet ====== */
@media (max-width: 980px){
  /* header compacto */
  header.site{ --menu-h: 72px; --logo-h: 44px; }
  .nav{ display:flex !important; align-items:center; }
  .brand{ margin-right:auto; }
  .brand a{ display:flex; align-items:center; height:var(--menu-h); }
  .brand img{ height:var(--logo-h); width:auto; display:block; }

  /* esconde menu desktop e mostra hambúrguer */
  header .menu{ display:none !important; }
  .hamburger{ display:inline-flex; margin-left:auto; }

  /* trava o scroll do corpo com overlay aberto */
  body.menu-open{ overflow:hidden; }
}


/* 1) Some com as “barrinhas” antigas do hamburger */
.hamburger span{ display:none !important; }

/* 2) Hover consistente (desktop e overlay) */
header .menu a:hover,
header .menu .dropdown:hover > a{ background:#f1f5f9; }

/* 3) No overlay mobile: dropdown fechado por padrão e abre ao tocar */
.nav-overlay .dropdown-menu{
  display:none !important;         /* estava sempre visível */
  position:static; background:transparent; border:0; box-shadow:none; padding:6px 0 0 0;
}
.nav-overlay .dropdown.open .dropdown-menu{
  display:grid !important;
  gap:10px;
}

/* Indicador/caret no overlay */
.nav-overlay .dropdown > a{
  pointer-events:auto; color:#fff; display:inline-flex; align-items:center; gap:8px;
}
.nav-overlay .dropdown > a::after{
  content:"▾"; font-size:0.9em; transform:translateY(1px); opacity:.9;
}
.nav-overlay .dropdown.open > a::after{ content:"▴"; }

/* Hover no overlay */
.mobile-menu a:hover{ opacity:0.9; }


/* Hover consistente no DESKTOP */
header .menu > a:hover,
header .menu .dropdown:hover > a{
  background:#f1f5f9;
  border-radius:10px;
}

/* Itens do submenu no desktop */
header .menu .dropdown-menu a{
  display:block;            /* garante área clicável cheia */
  border-radius:8px;
}
header .menu .dropdown-menu a:hover{
  background:#f1f5f9;
}

/* No OVERLAY mobile/tablet:
   - dropdown fechado por padrão; abre com .open;
   - hover visual (em desktop responsivo) */
.nav-overlay .dropdown-menu{ display:none !important; }
.nav-overlay .dropdown.open .dropdown-menu{
  display:grid !important;
  gap:10px;
}
.mobile-menu a:hover{ opacity:0.9; }

/* Se você ainda vê um "traço" no ícone, esconda spans legados */
.hamburger span{ display:none !important; }

@media (min-width: 981px){
  header .menu .dropdown > a::after{
    content:"▾";
    margin-left:6px;
    font-size:.9em;
    opacity:.8;
    transition: transform .2s ease;
  }
  /* gira a seta ao abrir via hover no desktop */
  header .menu .dropdown:hover > a::after{
    transform: rotate(180deg);
  }
}

/* Carousel for testimonials */
.testimonial {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.testimonial.active {
  display: block;
  opacity: 1;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.carousel-arrow:hover {
  color: #4fa1d3;
}

.left-arrow {
  left: 10px;
}

.depoimento-card {
  max-width: 500px;
}

/* Responsividade para sobre.html */
@media (max-width: 980px) {
  .heroSobre .container {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }
  .heroSobre h1 {
    font-size: 2rem;
  }
  .conhecaSobre .container {
    display: block !important;
  }
  .conhecaSobre .container > div:first-child {
    text-align: center !important;
  }
  .conhecaSobre .container > div:last-child {
    display: none !important;
  }
  .visaoSobre .container {
    grid-template-columns: 1fr !important;
  }
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center !important;
  }

  .cards-grid > div {
    width: 100% !important;
    height: 120px !important;
    overflow: hidden !important;
  }

/* GRID dos 6 cards — centralizado */
.visaoSobre .cards-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr)); /* 2 colunas no mobile */
  gap: 16px;

  /* centraliza a grade no meio da seção */
  justify-content: center;      /* centra as colunas */
  max-width: 720px;             /* evita “colar” nas bordas em telas pequenas */
  margin-inline: auto;          /* centraliza o bloco da grade */
}

/* Cada card (assume que os 6 itens são filhos diretos da .cards-grid) */
.visaoSobre .cards-grid > *{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* tudo no centro */
  text-align: center;

  min-height: 140px;            /* altura uniforme */
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  overflow: hidden;             /* corta qualquer sobra */
}

/* Ícone do card */
.visaoSobre .cards-grid > * img,
.visaoSobre .cards-grid > * svg{
  width: 56px; height: 56px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

/* Título: trava em 2 linhas (não deixa “puxar” a altura) */
.visaoSobre .cards-grid > * h4,
.visaoSobre .cards-grid > * .title{
  font-size: 14px;
  line-height: 1.3;
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quebras de layout (ajuste se quiser) */
@media (min-width: 600px){
  .visaoSobre .cards-grid{
    grid-template-columns: repeat(3, minmax(160px, 1fr)); /* 3 colunas */
    max-width: 900px;
  }
}
@media (min-width: 980px){
  .visaoSobre .cards-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 20px;
    max-width: none;            /* usa a largura da .container */
  }
  .visaoSobre .cards-grid > *{ min-height: 160px; }
}

  .aboutSecaoMauro .container,
  .aboutSecaoPedro .container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .depoimentos .two-col {
    grid-template-columns: 1fr !important;
  }
  .agende .container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .agende .container > div:first-child {
    padding: 0 !important;
  }
  .agende img {
    width: 90% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  .heroSobre {
    padding: 40px 0;
    padding-top: 100px;
  }
  .heroSobre h1 {
    font-size: 1.8rem;
  }
  .conhecaSobre,
  .visaoSobre,
  .aboutSecaoMauro,
  .aboutSecaoPedro,
  .depoimentos,
  .agende {
    padding: 40px 0;
  }
  .lineSobre h1 {
    font-size: 1.2rem;
  }
  .visaoSobre h1,
  .aboutSecaoMauro h1,
  .aboutSecaoPedro h1 {
    font-size: 2rem;
  }
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center !important;
  }
  .cards-grid > div {
    width: 100% !important;
    height: 120px !important;
    overflow: hidden !important;
  }
  .depoimentos h1 {
    font-size: 1.8rem !important;
  }
  .depoimentos h4 {
    font-size: 1.2rem !important;
  }
  .agende h1 {
    font-size: 1.8rem !important;
  }
  .agende img {
    width: 90% !important;
    max-width: none !important;
  }
}

.right-arrow {
  right: 10px;}
/* === Estilos para seção de Reumatologia === */
.reumatologia-section {
  margin-top: var(--menu-h);
}

.postBlog {background: #f2f0ef; padding: 80px 0;}
.postBlog.contpostblog {gap: 40px; align-items: center;}
.postBlog .share-btn{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#fff; border:1px solid #e7ecf1; box-shadow:var(--shadow);
  font-size:32px;                 /* << AUMENTA O ÍCONE */
  color:#142f40;
  transition:transform .15s ease, background .2s ease;
}
.postBlog .share-btn:hover{ transform:translateY(-2px); background:#f5f7f9; }
.postBlog .share-wa{ color:#25D366; }   /* WhatsApp verde */
.postBlog .share-ig{ color:#C13584; }   /* Instagram magenta */
.postBlog .share-copy{ color:#142f40; } /* Paper plane */

@media (max-width:768px){
  .postBlog .share-btn{ width:52px; height:52px; font-size:28px; }
}



/* Responsividade */
@media (max-width: 768px) {
  .reumatologia-grid {
    grid-template-rows: 300px 1fr 1fr;
  }

  .reumatologia-hero {
    height: 300px;
  }

  .reumatologia-hero h1 {
    font-size: 32px;
    left: 15px;
    bottom: 15px;
  }

  .reumatologia-info,
  .reumatologia-diseases {
    padding: 40px 20px;
  }

  .reumatologia-info h1,
  .reumatologia-diseases h1 {
    font-size: 28px;
  }

  .diseases-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .disease-card {
    padding: 20px;
    min-height: 180px;
  }

  .lineReumato {
    padding: 40px 20px;
  }

  .lineReumato p {
    font-size: 18px;
  }
}