/* ========================================================================= Estilo das páginas Clínicas-Escola (listagem "Início" + página de cada clínica). Todo o CSS está namespaceado sob .clinica-escola-v4 (o contêiner externo dos templates) para não vazar no header/menu/footer do tema. O reset e o estilo de base também ficam escopados sob esse contêiner; só as variáveis :root e o scroll-behavior do html são globais. O fundo do banner entra pela variável --banner-img, definida inline em cada template (a imagem real vem do campo do post); se vier vazia, cai no gradiente. As fontes (Playfair Display, Inter, Bebas Neue) são carregadas no cabeçalho. ========================================================================= */ /* Paleta e tokens de cor usados em toda a página. */ :root{ --gold:#C49A20; --cream:#faf9f6; --cream-2:#f1ede4; --ink:#111; --muted:#6b6b6b; --line:#e5e2dc; } html{scroll-behavior:smooth} /* Reset e base, escopados ao contêiner da página (não afeta o resto do tema). */ .clinica-escola-v4 *{box-sizing:border-box;margin:0;padding:0} .clinica-escola-v4{ background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; line-height:1.65; font-size:16px; /* clip (e não 'hidden') contém o full-bleed da galeria sem forçar overflow-y:auto — 'hidden' num eixo obriga o outro a virar 'auto' e criaria scroll vertical interno. */ overflow-x:clip; overflow-y:visible; } .clinica-escola-v4 a{color:inherit;text-decoration:none} /* ---------------------------------------------------------------- BANNER Faixa de topo de cada página: imagem de fundo + escurecimento + título. */ .clinica-escola-v4 .banner{position:relative;padding:90px 64px 70px;color:#fff;overflow:hidden;text-align:center} /* Imagem de fundo (--banner-img, vinda inline); cai no gradiente se não houver. */ .clinica-escola-v4 .banner::before{content:'';position:absolute;inset:0;z-index:0;background:var(--banner-img),linear-gradient(135deg,#2a2a2a,#0a0a0a);background-size:cover;background-position:center;background-repeat:no-repeat} .clinica-escola-v4 .banner::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.75) 100%)} .clinica-escola-v4 .banner > *{position:relative;z-index:2} .clinica-escola-v4 .banner .b-eyebrow{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.25em;color:var(--gold);margin-bottom:16px;text-transform:uppercase} .clinica-escola-v4 .banner h1{font-family:'Playfair Display',serif;font-size:72px;font-weight:500;letter-spacing:-.025em;line-height:1.02;max-width:1000px;margin:0 auto} .clinica-escola-v4 .banner h1 em{font-style:italic;color:var(--gold)} .clinica-escola-v4 .banner .b-lead{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;color:#dcdcdc;max-width:680px;margin:22px auto 0;line-height:1.5} /* ------------------------------------------------------------- BARRA DE ABAS Cada aba é um link (uma página); a aba da página atual recebe .active. */ .clinica-escola-v4 .tabs-nav{position:relative;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)} /* overflow-y:hidden explícito evita que o overflow-x:auto force scroll vertical; a barra rola na horizontal por toque no mobile, com a barra de rolagem escondida. */ .clinica-escola-v4 .tabs-inner{max-width:1240px;margin:0 auto;padding:0 64px;display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .clinica-escola-v4 .tabs-inner::-webkit-scrollbar{display:none} .clinica-escola-v4 .tab-btn{flex:0 0 auto;background:transparent;border:0;padding:18px 22px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;text-transform:uppercase;display:inline-block} .clinica-escola-v4 .tab-btn:hover{color:#000} .clinica-escola-v4 .tab-btn.active{color:#000;border-bottom-color:var(--gold)} /* ----------------------------------------------------------------- WRAP / PAINEL .wrap centraliza o conteúdo; .tab-panel é o painel visível da página. */ .clinica-escola-v4 .wrap-outer{max-width:none;margin:0} .clinica-escola-v4 .wrap{max-width:1240px;margin:0 auto;padding:64px 64px 80px} /* Só um painel é renderizado por página; ele recebe .active e fica visível. */ .clinica-escola-v4 .tab-panel{display:none;animation:fade .3s ease} .clinica-escola-v4 .tab-panel.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ------------------------------------------------------------- CONTEÚDO Cabeçalho do painel + grade de texto principal e cartão lateral. */ .clinica-escola-v4 .panel-head{margin-bottom:32px} .clinica-escola-v4 .panel-head .eyebrow{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:12px} .clinica-escola-v4 .panel-head .eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)} .clinica-escola-v4 .panel-head h2{font-family:'Playfair Display',serif;font-size:46px;font-weight:500;letter-spacing:-.02em;line-height:1.05;color:#000} .clinica-escola-v4 .panel-head h2 em{font-style:italic;color:var(--gold)} .clinica-escola-v4 .content{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start} .clinica-escola-v4 .content .main p{margin-bottom:16px;color:#333;line-height:1.75;max-width:none} .clinica-escola-v4 .content .main p strong{color:#000;font-weight:600} .clinica-escola-v4 .content .main .lede{font-family:'Playfair Display',serif;font-style:italic;font-size:19px;color:#222;margin-bottom:22px;line-height:1.5} /* O conteúdo do post traz uma