/* ================================================================= DIGEST · Endoscopia Digestiva — Site institucional Home / Início Direção: "clínico editorial". Papel branco, tinta azul-marinho, fios de 1px como estrutura, fotografia tratada como prancha. Os efeitos vêm da precisão — revelações em máscara, fios que se desenham, números que contam. ================================================================= */ /* ───────────────────────────────────────────────────────────── 1. TOKENS ───────────────────────────────────────────────────────────── */ :root{ /* tinta */ --ink: #0B1D4D; /* azul-marinho dos títulos */ --ink-soft: #1B2F63; --body: #64708A; /* cinza-azulado do texto corrido */ --mute: #8C95A8; --faint: #B4BCCB; /* papel */ --paper: #ffffff; --paper-2: #F7F9FC; --paper-3: #EDF1F8; --deep: #071238; /* faixas escuras */ --deep-2: #0B1D4D; /* ação */ --brand: #0146ff; --brand-dp: #0033c4; --brand-wash: #EEF3FF; --whats: #5EC900; /* fios */ --line: rgba(11,29,77,.10); --line-2: rgba(11,29,77,.17); --line-3: rgba(11,29,77,.28); --line-dark: rgba(255,255,255,.14); /* tipografia */ --f-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; --f-text: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* ritmo */ --shell: 1260px; --shell-tight:1060px; --gut: clamp(1.25rem, 4.2vw, 3.75rem); --sect: clamp(4.75rem, 8.5vw, 9rem); --r: 14px; --r-lg: 22px; /* movimento */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); --header-h: 84px; } /* ───────────────────────────────────────────────────────────── 2. RESET / BASE ───────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); } body{ margin:0; background:var(--paper); color:var(--body); font-family:var(--f-text); font-size:clamp(1rem, .96rem + .2vw, 1.0625rem); line-height:1.7; letter-spacing:.002em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--f-display); color:var(--ink); font-weight:700; line-height:1.1; letter-spacing:-.026em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } /* o padrão do navegador é margin:1em 40px — engoliria 80px de cada prancha */ figure,figcaption,blockquote{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,svg{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } hr{ border:0; height:1px; background:var(--line); margin:0; } ::selection{ background:var(--ink); color:#fff; } /* Âncoras marcadas com data-destino-pendente ficam sem href de propósito: as páginas internas ainda não existem. Mantêm a aparência para a revisão do layout, mas não fingem ser clicáveis. É só preencher o href quando as URLs definitivas estiverem prontas. */ [data-destino-pendente]{ cursor:default; } :focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:3px; } .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); } .shell--tight{ max-width:var(--shell-tight); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* grão sutil — dá textura ao branco sem sujar */ .grain{ position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.30; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); } /* ───────────────────────────────────────────────────────────── 3. TIPOGRAFIA COMPARTILHADA ───────────────────────────────────────────────────────────── */ .eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin:0 0 1.6rem; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--line-3); transform-origin:left; } .eyebrow--light{ color:rgba(255,255,255,.55); } .eyebrow--light::before{ background:rgba(255,255,255,.3); } .h-xl{ font-size:clamp(2.35rem, 1.35rem + 3.5vw, 4.375rem); line-height:1.02; letter-spacing:-.038em; font-weight:800; } .h-lg{ font-size:clamp(2rem, 1.25rem + 2.9vw, 3.5rem); line-height:1.07; letter-spacing:-.032em; font-weight:700; } .h-md{ font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height:1.14; letter-spacing:-.026em; } .h-sm{ font-size:clamp(1.15rem, 1.02rem + .5vw, 1.4rem); line-height:1.22; letter-spacing:-.02em; } .lead{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height:1.62; color:var(--body); } .section{ padding-block:var(--sect); position:relative; } .section--tint{ background:var(--paper-2); } .section--deep{ background:var(--deep); color:rgba(255,255,255,.66); } .section--deep h2,.section--deep h3,.section--deep h4{ color:#fff; } .section-head{ max-width:36rem; } .section-head--wide{ max-width:44rem; } /* deixa a quebra por conta do
do HTML, não da largura */ .section-head--free{ max-width:none; } /* cabeçalho de seção com fio e "índice" à direita */ .rule-head{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:1.5rem; border-bottom:1px solid var(--line); margin-bottom:clamp(2.5rem,5vw,4rem); } .rule-head .idx{ font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; } /* ───────────────────────────────────────────────────────────── 4. BOTÕES ───────────────────────────────────────────────────────────── */ .btn{ --bg:var(--brand); --fg:#fff; --shadow:rgba(1,70,255,.42); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.6rem; font-family:var(--f-display); font-size:.875rem; font-weight:600; letter-spacing:-.005em; color:var(--fg); background:var(--bg); border-radius:100px; white-space:nowrap; transform:scale(1); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } /* hover: zoom leve, sem troca de cor */ .btn:hover{ transform:scale(1.045); box-shadow:0 16px 32px -16px var(--shadow); } .btn:active{ transform:scale(.99); } .btn svg{ width:16px; height:16px; flex:none; } .btn--lg{ padding:1.12rem 2rem; font-size:.9375rem; } .btn--lg svg{ width:18px; height:18px; } .btn--sm{ padding:.7rem 1.15rem; font-size:.8125rem; gap:.5rem; } .btn--sm svg{ width:14px; height:14px; } .btn--whats{ --bg:var(--whats); --shadow:rgba(94,201,0,.5); } /* link com fio que se desenha */ .link-line{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:600; font-size:.875rem; color:var(--ink); position:relative; padding-bottom:.35rem; } .link-line::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform-origin:right; transform:scaleX(1); transition:transform .45s var(--ease-out); } .link-line:hover::after{ transform-origin:left; transform:scaleX(0); } .link-line svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); } .link-line:hover svg{ transform:translateX(5px); } .link-line--light{ color:#fff; } .link-line--light::after{ background:rgba(255,255,255,.6); } /* ───────────────────────────────────────────────────────────── 5. HEADER ───────────────────────────────────────────────────────────── */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:120; height:var(--header-h); display:flex; align-items:center; transition:height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } /* No topo o menu é só um branco leve sobre a foto; ao rolar ele fecha e vira uma barra branca com o fio inferior. Sem backdrop-filter. */ .site-header::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.5); border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease); } .site-header.is-stuck{ height:70px; } .site-header.is-stuck::after{ background:rgba(255,255,255,.95); border-bottom-color:var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; } .brand{ display:block; flex:none; } .brand img{ height:38px; width:auto; transition:height .4s var(--ease); } .site-header.is-stuck .brand img{ height:32px; } .nav{ display:flex; align-items:center; gap:.35rem; } .nav a{ position:relative; padding:.55rem .85rem; font-family:var(--f-display); font-size:.875rem; font-weight:500; color:var(--ink-soft); transition:color .3s var(--ease); } .nav a::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:1px; background:var(--brand); transform:scaleX(0); transform-origin:right; transition:transform .42s var(--ease-out); } .nav a:hover{ color:var(--brand); } .nav a:hover::after{ transform:scaleX(1); transform-origin:left; } .nav a.is-active{ color:var(--ink); } .nav a.is-active::after{ transform:scaleX(1); background:var(--ink); } .header-cta{ display:flex; align-items:center; gap:.55rem; flex:none; } .burger{ display:none; width:44px; height:44px; border-radius:50%; /* flex-direction:column — sem isso os dois traços saem lado a lado */ flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .3s var(--ease), background .3s var(--ease); } .burger:hover{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); } .burger span{ display:block; width:17px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease-out), opacity .25s var(--ease), background .3s; } .burger span + span{ margin-top:5px; } .burger:hover span{ background:#fff; } /* menu mobile */ .mobile-scrim{ position:fixed; inset:0; z-index:125; background:rgba(7,18,56,.4); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); } .mobile-scrim.is-open{ opacity:1; pointer-events:auto; } /* painel que desce do topo — não toma a tela inteira */ .mobile-menu{ position:fixed; top:0; left:0; right:0; z-index:130; background:var(--paper); display:flex; flex-direction:column; padding:.9rem var(--gut) 1.75rem; border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:0 30px 70px -34px rgba(11,29,77,.5); max-height:min(86vh, 620px); overflow-y:auto; transform:translateY(-101%); transition:transform .55s var(--ease-out); } .mobile-menu.is-open{ transform:translateY(0); } .mobile-top{ display:flex; align-items:center; justify-content:space-between; height:calc(var(--header-h) - 1.4rem); } .mobile-close{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line-2); } .mobile-close svg{ width:16px; height:16px; } .mobile-nav{ margin-top:1.35rem; border-top:1px solid var(--line); } .mobile-nav a{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-size:1.125rem; font-weight:600; letter-spacing:-.022em; color:var(--ink); opacity:0; transform:translateY(14px); } .mobile-menu.is-open .mobile-nav a{ animation:mm-in .6s var(--ease-out) forwards; animation-delay:calc(.1s + var(--i) * .055s); } @keyframes mm-in{ to{ opacity:1; transform:none; } } .mobile-nav a span{ font-family:var(--f-text); font-size:.6875rem; color:var(--faint); font-weight:400; letter-spacing:.1em; } .mobile-actions{ display:grid; gap:.55rem; margin-top:1.5rem; } .mobile-actions .btn{ width:100%; } /* ───────────────────────────────────────────────────────────── 6. HERO ───────────────────────────────────────────────────────────── */ .hero{ position:relative; display:flex; align-items:center; min-height:clamp(600px, 56vw, 800px); padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem)); padding-bottom:clamp(2.5rem,5vw,4rem); overflow:hidden; background:var(--paper); } /* a foto ocupa a dobra inteira; é 6% mais alta que a seção para o parallax ter curso sem descolar das bordas */ .hero-bg{ position:absolute; left:0; right:0; top:-3%; height:106%; z-index:0; will-change:transform; } .hero-bg picture{ display:block; width:100%; height:100%; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:78% 50%; /* segura os médicos à direita e preserva o claro da esquerda */ } /* véu claro: garante contraste do texto mesmo quando o corte aperta */ .hero-bg::after{ content:""; position:absolute; inset:0; background: /* emenda com o branco da página: sem isso a foto termina em corte reto quando o recorte come o degradê que a própria arte já tem */ linear-gradient(to top, var(--paper) 0px, rgba(255,255,255,.55) 90px, rgba(255,255,255,0) 190px), linear-gradient(96deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 26%, rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 64%); } .hero-inner{ position:relative; z-index:2; } .hero-copy{ max-width:min(58%, 37rem); } .hero h1{ margin-bottom:1.5rem; } .hero .lead{ max-width:34ch; margin-bottom:2.25rem; } .hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; } /* ───────────────────────────────────────────────────────────── 7. FAIXA DE NÚMEROS (referência do anexo 1) ───────────────────────────────────────────────────────────── */ .stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); padding-block:clamp(2.25rem,4vw,3.25rem); } .stat{ padding-inline:clamp(1rem,2.4vw,2.25rem); position:relative; } .stat:first-child{ padding-left:0; } .stat:last-child{ padding-right:0; } .stat + .stat::before{ content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:1px; background:var(--line); transform:scaleY(0); transform-origin:top; transition:transform .8s var(--ease-out) calc(var(--d,0) * 1s); } .stats.is-in .stat + .stat::before{ transform:scaleY(1); } .stat .n{ display:block; font-family:var(--f-display); font-size:clamp(2.25rem,1.4rem + 2.8vw,3.5rem); font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; margin-bottom:.7rem; } .stat .l{ font-size:.9375rem; line-height:1.45; color:var(--body); max-width:15ch; } /* ───────────────────────────────────────────────────────────── 8. O QUE FAZEMOS ───────────────────────────────────────────────────────────── */ .about-center{ text-align:center; max-width:62rem; margin-inline:auto; } .about-center .eyebrow{ margin-bottom:1.9rem; } .about-statement{ font-family:var(--f-display); font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem); font-weight:700; line-height:1.16; letter-spacing:-.032em; margin-bottom:2.5rem; text-wrap:balance; } /* ── spotlight: o texto acende sob o cursor ────────────────────────────── O

guarda o texto em tom claro; uma cópia idêntica por cima recebe uma máscara radial ancorada no ponteiro. Só entra em ponteiros com hover real — a classe .is-spot é adicionada pelo JS. Sem ela (mobile, teclado, sem JS, reduced-motion) o texto fica em tinta cheia e legível. */ .spotlight{ position:relative; color:var(--ink); } .spotlight__fill{ display:none; } .spotlight.is-spot{ color:var(--faint); } .spotlight.is-spot .spotlight__fill{ display:block; position:absolute; inset:0; color:var(--ink); pointer-events:none; opacity:0; transition:opacity .45s var(--ease); --spot-r:clamp(150px, 17vw, 250px); --mask:radial-gradient(circle var(--spot-r) at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.72) 42%, transparent 74%); -webkit-mask-image:var(--mask); mask-image:var(--mask); } .spotlight.is-spot.is-lit .spotlight__fill{ opacity:1; } @media (max-width:1020px){ .spotlight.is-spot{ color:var(--ink); } .spotlight.is-spot .spotlight__fill{ display:none; } } /* pilares */ .pillars{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:clamp(3.75rem,7vw,6rem); } .pillar{ padding:2.25rem clamp(1rem,2vw,1.75rem) 0 0; position:relative; } .pillar + .pillar{ padding-left:clamp(1rem,2vw,1.75rem); } .pillar + .pillar::before{ content:""; position:absolute; left:0; top:2.25rem; bottom:.25rem; width:1px; background:var(--line); } .pillar .num{ font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; color:var(--faint); display:block; margin-bottom:1.1rem; } .pillar h3{ font-size:1.0625rem; font-weight:700; margin-bottom:.6rem; letter-spacing:-.018em; } .pillar p{ font-size:.9375rem; line-height:1.6; } /* ───────────────────────────────────────────────────────────── 9. DIVISOR — foto larga entre as seções ───────────────────────────────────────────────────────────── */ /* Dentro das margens do site, cantos arredondados como as outras pranchas. A foto entra inteira — a altura vem da proporção original, nada é cortado. */ .divider{ margin:0 auto; width:100%; max-width:var(--shell); padding-inline:var(--gut); } .divider-frame{ display:block; overflow:hidden; border-radius:var(--r-lg); background:var(--paper-3); box-shadow:0 44px 90px -60px rgba(11,29,77,.55); } .divider-frame img{ display:block; width:100%; height:auto; transform:scale(1.03); /* abertura mais curta: esticada demais, a revelação parecia carregamento */ transition:clip-path .85s var(--ease-out), transform 1.2s var(--ease-out); } .divider-frame.is-in img{ transform:scale(1); } /* ───────────────────────────────────────────────────────────── 10. HOSPITAIS (referência do anexo 2) ───────────────────────────────────────────────────────────── */ .hospitals{ border-top:1px solid var(--line); } .hospital{ display:grid; grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; padding:clamp(2.25rem,4vw,3.5rem) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .5s var(--ease-out); } .hospital::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out); } .hospital:hover{ padding-left:1rem; } .hospital:hover::after{ transform:scaleX(1); } .hospital .n{ font-family:var(--f-display); font-size:.8125rem; font-weight:600; letter-spacing:.1em; color:var(--faint); transition:color .35s var(--ease); padding-top:.45rem; } .hospital:hover .n{ color:var(--brand); } .hospital h3{ font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; } .hospital p{ font-size:1rem; line-height:1.65; } /* ───────────────────────────────────────────────────────────── 11. CONVÊNIOS (referência do anexo 3) ───────────────────────────────────────────────────────────── */ .plans-row{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2.6fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.5rem,4.5vw,3.75rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .plans-row .lbl{ font-family:var(--f-display); font-size:clamp(1rem,.94rem + .3vw,1.15rem); font-weight:600; line-height:1.35; letter-spacing:-.02em; color:var(--ink); max-width:16ch; } .plans-logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1rem,2.5vw,2.25rem); align-items:center; } .plans-logos li{ display:grid; place-items:center; } .plans-logos img{ height:clamp(44px,4.6vw,62px); width:auto; max-width:100%; object-fit:contain; /* coloridas desde o início — o hover só dá o mesmo zoom dos botões */ transform:scale(1); transition:transform .45s var(--ease-out); } .plans-logos li:hover img{ transform:scale(1.045); } /* ───────────────────────────────────────────────────────────── 12. EQUIPE ───────────────────────────────────────────────────────────── */ .team-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem); } .team-head .side{ max-width:42ch; } /* carrossel: as setas ficam nas laterais, centradas na altura da foto */ .team-carousel{ --card-w:clamp(240px, 27vw, 340px); position:relative; } .team-track{ display:flex; gap:clamp(.75rem,1.6vw,1.25rem); overflow-x:auto; overflow-y:hidden; padding-bottom:.5rem; scrollbar-width:none; /* sem scroll-snap: brigaria com o laço automático */ } .team-track::-webkit-scrollbar{ display:none; } .team-card{ flex:0 0 var(--card-w); scroll-snap-align:start; } .team-card .plate{ aspect-ratio:1/1; border-radius:var(--r); background:var(--paper-3); } /* o enquadramento sobe um pouco para o corte quadrado não comer as cabeças */ .team-card .plate img{ object-position:50% 16%; } .team-card .plate img{ transform:scale(1); transition:transform .7s var(--ease-out); } .team-card:hover .plate img{ transform:scale(1.045); } .team-card .name{ font-family:var(--f-display); font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:-.015em; margin-top:1.1rem; line-height:1.3; } .team-card .role{ font-size:.8438rem; color:var(--mute); line-height:1.45; margin-top:.25rem; } /* setinhas discretas, na margem — nunca por cima das fotos */ .track-btn{ position:absolute; z-index:5; top:calc(var(--card-w) * 0.5); /* metade da altura da foto (1/1) */ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); transform:translateY(-50%) scale(1); transition:transform .45s var(--ease-out), background .3s var(--ease), box-shadow .3s var(--ease); } .track-btn svg{ width:13px; height:13px; color:var(--ink); transition:color .3s var(--ease); } .track-btn:hover{ transform:translateY(-50%) scale(1.12); background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); } .track-btn:hover svg{ color:#fff; } .track-btn:active{ transform:translateY(-50%) scale(.98); } .track-btn--prev{ left:-2.75rem; } .track-btn--next{ right:-2.75rem; } /* onde não cabem as setas, as bolinhas avisam que a faixa arrasta */ .track-dots{ display:none; } .track-dots button{ width:26px; height:28px; display:grid; place-items:center; } .track-dots button::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--line-3); transition:width .4s var(--ease-out), background .3s var(--ease), border-radius .4s var(--ease-out); } .track-dots button.is-on::before{ width:20px; border-radius:4px; background:var(--ink); } /* ───────────────────────────────────────────────────────────── 13. FAIXA ESCURA / MANTRA ───────────────────────────────────────────────────────────── */ .mantra{ position:relative; overflow:hidden; background:var(--deep); color:rgba(255,255,255,.68); } /* a foto é 36% mais alta que a seção — a sobra é o curso do parallax */ .mantra-bg{ position:absolute; left:0; right:0; top:-18%; height:136%; z-index:0; will-change:transform; } .mantra-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; opacity:.26; } .mantra-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,18,56,.72), rgba(7,18,56,.94)); } .mantra .shell{ position:relative; z-index:2; } .mantra-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center; } .mantra blockquote{ margin:0; } /* mesma família e mesmo tratamento das headlines da página */ .mantra blockquote p{ font-family:var(--f-display); font-size:clamp(2rem,1.25rem + 2.9vw,3.5rem); font-weight:700; line-height:1.07; letter-spacing:-.032em; color:#fff; margin:0; text-wrap:balance; } .mantra blockquote cite{ font-style:normal; font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.42); } .mantra-side p{ font-size:1rem; line-height:1.7; margin-bottom:1.75rem; } /* ───────────────────────────────────────────────────────────── 14. FAQ ───────────────────────────────────────────────────────────── */ .faq-grid{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; } .faq-aside .plate{ aspect-ratio:1/1; } .faq-aside .helper{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9375rem; } .faq-aside .helper a{ color:var(--ink); font-weight:600; white-space:nowrap; } /* o título mora na coluna das perguntas, alinhado ao topo da foto */ .faq-col{ min-width:0; } .faq-head{ margin-bottom:clamp(1.75rem,3vw,2.5rem); } .faq-head .eyebrow{ margin-bottom:1.25rem; } .faq-list{ border-top:1px solid var(--line-2); } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; width:100%; text-align:left; padding:1.6rem 0; font-family:var(--f-display); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); font-weight:600; letter-spacing:-.02em; line-height:1.35; color:var(--ink); transition:color .3s var(--ease); } .faq-q:hover{ color:var(--brand); } .faq-sign{ flex:none; position:relative; width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-2); margin-top:.1rem; transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease-out); } .faq-sign::before,.faq-sign::after{ content:""; position:absolute; top:50%; left:50%; width:11px; height:1.5px; background:var(--ink); border-radius:2px; transform:translate(-50%,-50%); transition:transform .45s var(--ease-out), background .3s; } .faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq-item.is-open .faq-sign{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); transform:rotate(180deg); } .faq-item.is-open .faq-sign::before, .faq-item.is-open .faq-sign::after{ background:#fff; } .faq-item.is-open .faq-sign::after{ transform:translate(-50%,-50%) rotate(0deg); } .faq-item.is-open .faq-q{ color:var(--ink); } .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease-out); } .faq-item.is-open .faq-a{ grid-template-rows:1fr; } .faq-a-inner{ overflow:hidden; } .faq-a-inner > div{ padding:0 3rem 1.9rem 0; max-width:62ch; opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease) .1s, transform .5s var(--ease-out) .1s; } .faq-item.is-open .faq-a-inner > div{ opacity:1; transform:none; } .faq-a p{ font-size:.9688rem; line-height:1.68; margin-bottom:.85em; } .faq-a ul{ display:grid; gap:.5rem; margin:.35rem 0 1em; } .faq-a li{ position:relative; padding-left:1.15rem; font-size:.9688rem; line-height:1.6; } .faq-a li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:1px; background:var(--faint); } .faq-a b{ color:var(--ink); font-weight:600; } .faq-a a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } /* ───────────────────────────────────────────────────────────── 15. BLOG ───────────────────────────────────────────────────────────── */ .posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem); } .post .plate{ aspect-ratio:3/2; border-radius:var(--r); margin-bottom:1.35rem; } .post .kicker{ font-family:var(--f-display); font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:.7rem; } .post h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.022em; line-height:1.3; margin-bottom:1rem; } /* o cartão inteiro é clicável, mas o único sinal de hover é a cor daqui */ .post .more{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-display); font-size:.8125rem; font-weight:600; color:var(--ink); transition:color .3s var(--ease); } .post .more svg{ width:13px; height:13px; } .post:hover .more{ color:var(--brand); } /* ───────────────────────────────────────────────────────────── 16. NEWSLETTER ───────────────────────────────────────────────────────────── */ .news{ background:var(--deep); border-radius:var(--r-lg); padding:clamp(2.25rem,5vw,4.25rem); position:relative; overflow:hidden; } .news::before{ content:""; position:absolute; top:-45%; right:-10%; width:520px; aspect-ratio:1; background:radial-gradient(circle, rgba(1,70,255,.4), transparent 62%); pointer-events:none; } .news-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:center; } .news h2{ color:#fff; margin-bottom:.9rem; } .news p{ color:rgba(255,255,255,.6); font-size:.9688rem; max-width:38ch; } .news-form{ display:grid; gap:1rem; } .field{ position:relative; } .field input[type=email], .field input[type=text]{ width:100%; padding:1.05rem 3.5rem 1.05rem 1.25rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:100px; color:#fff; font-size:.9375rem; transition:border-color .3s var(--ease), background .3s var(--ease); } .field input::placeholder{ color:rgba(255,255,255,.38); } .field input:focus{ outline:none; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); } .field .send{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; transition:background .3s var(--ease), transform .35s var(--ease-out); } .field .send svg{ width:15px; height:15px; color:var(--deep); transition:color .3s; } .field .send:hover{ background:var(--brand); transform:translateY(-50%) scale(1.06); } .field .send:hover svg{ color:#fff; } .consent{ display:flex; align-items:flex-start; gap:.65rem; font-size:.8125rem; color:rgba(255,255,255,.5); line-height:1.5; cursor:pointer; } .consent input{ appearance:none; -webkit-appearance:none; flex:none; width:17px; height:17px; margin-top:.15rem; border:1px solid rgba(255,255,255,.3); border-radius:4px; position:relative; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease); } .consent input:checked{ background:var(--brand); border-color:var(--brand); } .consent input:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); } .consent a{ color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:3px; } .news-msg{ font-size:.8125rem; color:#8FE05C; min-height:1.2em; } /* honeypot */ .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; } /* ───────────────────────────────────────────────────────────── 18. RODAPÉ ───────────────────────────────────────────────────────────── */ .site-footer{ background:var(--deep); color:rgba(255,255,255,.55); padding-top:clamp(3.5rem,6vw,5.5rem); padding-bottom:2rem; font-size:.9063rem; } .footer-top{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3, minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,4vw,3.5rem); border-bottom:1px solid var(--line-dark); } .footer-brand img{ height:42px; width:auto; margin-bottom:1.5rem; } .footer-brand p{ max-width:30ch; font-size:.9063rem; line-height:1.65; } .footer-col h4{ color:#fff; font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.35rem; } .footer-col li + li{ margin-top:.7rem; } .footer-col .hours li + li{ margin-top:1.35rem; } /* o endereço é o item mais longo da coluna; um corpo um pouco menor garante que cada linha caiba sem quebrar sozinha */ .footer-col .endereco{ font-size:.8438rem; line-height:1.6; margin-bottom:1.35rem; } .footer-col .k{ display:block; font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:.4rem; } .footer-col a{ position:relative; display:inline-block; transition:color .3s var(--ease), transform .35s var(--ease-out); } .footer-col a:hover{ color:#fff; transform:translateX(3px); } .socials{ display:flex; gap:.5rem; margin-top:1.5rem; } .socials a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line-dark); transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .socials a svg{ width:15px; height:15px; color:rgba(255,255,255,.6); transition:color .3s; } .socials a:hover{ background:#fff; box-shadow:inset 0 0 0 1px #fff; transform:translateY(-2px); } .socials a:hover svg{ color:var(--deep); } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.75rem; font-size:.8125rem; color:rgba(255,255,255,.38); } .footer-bottom a{ transition:color .3s var(--ease); } .footer-bottom a:hover{ color:#fff; } .footer-bottom-end{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem clamp(1.25rem,3vw,2.25rem); } .footer-bottom-end .credit a{ color:rgba(255,255,255,.62); } /* ───────────────────────────────────────────────────────────── 19. WHATSAPP FLUTUANTE ───────────────────────────────────────────────────────────── */ .whats-float{ position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:110; display:flex; align-items:center; gap:.65rem; height:56px; padding-inline:1.05rem; background:var(--whats); color:#fff; border-radius:100px; box-shadow:0 14px 34px -14px rgba(94,201,0,.85); font-family:var(--f-display); font-size:.875rem; font-weight:600; opacity:0; transform:translateY(18px) scale(.94); pointer-events:none; transition:opacity .5s var(--ease), transform .6s var(--ease-out), box-shadow .3s; } .whats-float.is-on{ opacity:1; transform:none; pointer-events:auto; } .whats-float:hover{ box-shadow:0 18px 40px -14px rgba(94,201,0,.95); } .whats-float svg{ width:23px; height:23px; flex:none; } .whats-float .lbl{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .5s var(--ease-out), opacity .35s var(--ease), margin .5s var(--ease-out); } .whats-float:hover .lbl{ max-width:12rem; opacity:1; } /* barra de progresso de leitura */ .progress{ position:fixed; top:0; left:0; height:2px; z-index:140; background:var(--brand); width:0; transition:width .12s linear; } /* ───────────────────────────────────────────────────────────── 20. REVELAÇÕES ───────────────────────────────────────────────────────────── */ .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease-out) var(--d,0s), transform .95s var(--ease-out) var(--d,0s); } .js .reveal.is-in{ opacity:1; transform:none; } /* revelação em máscara — linhas do H1 */ .js .mask{ overflow:hidden; display:block; } .js .mask > span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease-out) var(--d,0s); } .js .mask.is-in > span{ transform:none; } /* prancha que se abre — o clip vai na imagem, não no elemento observado: clip-path no próprio alvo zera o intersectionRatio e o observer nunca dispara */ .js .plate-reveal > img{ clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease-out) var(--d,0s), transform .9s var(--ease-out); } .js .plate-reveal.is-in > img{ clip-path:inset(0 0 0 0); } /* fio que se desenha */ .js .rule-draw{ transform:scaleX(0); transform-origin:left; transition:transform .95s var(--ease-out) var(--d,0s); } .js .rule-draw.is-in{ transform:scaleX(1); } /* carga inicial da hero, sem observer */ .js .hero .load{ opacity:0; transform:translateY(20px); animation:load-in .95s var(--ease-out) forwards; animation-delay:var(--d,0s); } @keyframes load-in{ to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .js .reveal,.js .mask > span,.js .plate-reveal > img,.js .rule-draw,.js .hero .load{ opacity:1 !important; transform:none !important; clip-path:none !important; } } /* ───────────────────────────────────────────────────────────── 21. RESPONSIVO ───────────────────────────────────────────────────────────── */ /* abaixo disso a dupla não cabe numa linha e volta a empilhar */ @media (max-width:359px){ .hero-actions{ flex-wrap:wrap; } .hero-actions .btn{ flex:1 1 100%; } } @media (max-width:1180px){ .nav a{ padding-inline:.65rem; font-size:.8438rem; } } @media (max-width:1080px){ .team-track{ margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); } .track-btn{ display:none; } .track-dots{ display:flex; justify-content:center; gap:.2rem; margin-top:1.35rem; } } @media (max-width:1020px){ :root{ --header-h:76px; } .nav{ display:none; } .header-cta .btn--whats{ display:none; } .burger{ display:flex; } .pillars{ grid-template-columns:repeat(2,1fr); } .pillar:nth-child(3){ padding-left:0; border-top:1px solid var(--line); margin-top:2rem; } .pillar:nth-child(4){ border-top:1px solid var(--line); margin-top:2rem; } .pillar:nth-child(3)::before{ display:none; } .hospital{ grid-template-columns:3.5rem minmax(0,1fr); } .hospital p{ grid-column:2; margin-top:1rem; font-size:.9688rem; } .plans-row{ grid-template-columns:1fr; gap:2rem; } .plans-row .lbl{ max-width:none; } .team-head{ grid-template-columns:1fr; align-items:start; gap:1.75rem; } .mantra-grid{ grid-template-columns:1fr; } .faq-grid{ grid-template-columns:1fr; } .faq-aside{ max-width:460px; } .faq-aside .plate{ aspect-ratio:16/10; } .posts{ grid-template-columns:repeat(2,1fr); } .post:last-child{ display:none; } .news-grid{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:repeat(2,1fr); } .footer-brand{ grid-column:1 / -1; } } @media (max-width:900px){ .hero{ align-items:flex-end; min-height:clamp(640px,175vw,800px); } .hero-copy{ max-width:none; } .hero .lead{ max-width:38ch; } /* a arte vertical traz os médicos em cima e o claro embaixo, então o texto desce e o véu sobe a partir da base */ .hero-bg img{ object-position:50% 50%; } .hero-bg::after{ background:linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 34%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 74%); } } @media (max-width:720px){ :root{ --header-h:70px; --r-lg:16px; } body{ line-height:1.65; } /* os dois CTAs lado a lado, dividindo a largura em partes iguais, para a dupla caber na primeira tela sem rolar */ .hero-actions{ flex-wrap:nowrap; gap:.6rem; } .hero-actions .btn{ flex:1 1 0; min-width:0; padding-inline:.7rem; font-size:.84rem; gap:.4rem; } .hero-actions .btn svg{ width:15px; height:15px; } /* um pilar embaixo do outro, separados por fio horizontal */ .pillars{ grid-template-columns:1fr; } .pillar, .pillar + .pillar{ padding:1.6rem 0; margin-top:0; border-top:0; } .pillar + .pillar{ border-top:1px solid var(--line); } .pillar + .pillar::before{ display:none; } .pillar p{ max-width:46ch; } .stats-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 0; } .stat{ padding-inline:0; } .stat:nth-child(even){ padding-left:1.25rem; } .stat + .stat::before{ display:none; } .stat:nth-child(even)::after{ content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:1px; background:var(--line); } .stat .l{ font-size:.875rem; } .hospital{ grid-template-columns:1fr; gap:.85rem; padding-block:2rem; } .hospital .n{ padding-top:0; } .hospital p{ grid-column:1; margin-top:0; } .plans-logos{ grid-template-columns:repeat(3,1fr); gap:1.75rem 1rem; } .posts{ grid-template-columns:1fr; gap:2.5rem; } .post:last-child{ display:block; } .faq-a-inner > div{ padding-right:0; } .footer-top{ grid-template-columns:1fr; gap:2.25rem; } .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.75rem; } .footer-bottom-end{ flex-direction:column; align-items:flex-start; gap:.5rem; } .whats-float{ height:52px; padding-inline:.9rem; } .whats-float .lbl{ display:none; } } /* ============================================================= PÁGINA SOBRE Reaproveita todo o sistema da home. Só o que é exclusivo desta página mora aqui embaixo. ============================================================= */ /* hero de página interna: mais baixo que o da home, que é dobra de entrada */ /* altura mínima 100vh, como no painel. O svh vem depois porque no celular o vh conta a área embaixo da barra do navegador e empurra conteúdo para fora */ .hero--pagina{ min-height:100vh; min-height:100svh; } /* equivalente ao painel do Elementor: imagem completa, centro ao centro, sem repetição, tamanho de exibição "cobertura" */ .hero--pagina .hero-bg img{ object-position:center center; } /* A arte desta página já traz o claro à esquerda e o esmaecido no rodapé. O véu do CSS entra só como rede de segurança: em telas muito largas o recorte come parte do degradê da própria arte. */ .hero--pagina .hero-bg::after{ background: linear-gradient(to top, var(--paper) 0px, rgba(255,255,255,.42) 60px, rgba(255,255,255,0) 150px), linear-gradient(96deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.28) 22%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 50%); } /* o subtítulo quebra antes de alcançar a roupa escura do rapaz na foto */ .hero--pagina .lead{ max-width:36ch; } /* ── texto + foto lado a lado ──────────────────────────────── */ .split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.5rem,5vw,5rem); align-items:center; } .split-copy > p{ max-width:46ch; } .split-copy .h-lg{ margin-bottom:1.5rem; } .split-media{ aspect-ratio:4/3; } /* selos de certificação */ .selos{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,3vw,2.5rem); margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--line); } .selos li{ display:flex; align-items:baseline; gap:.7rem; } .selo-n{ font-family:var(--f-display); font-size:1.375rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); } .selo-l{ font-size:.8125rem; line-height:1.4; color:var(--mute); max-width:14ch; } .selos-nota{ margin-top:1rem; font-size:.875rem; color:var(--mute); max-width:44ch; } /* ── fundadores ───────────────────────────────────────────── */ .historia-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:start; } .historia-grid > div > p{ max-width:44ch; } .fundadores{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); } .fundadores .plate{ aspect-ratio:3/4; border-radius:var(--r); background:var(--paper-3); } .fundadores .name{ font-family:var(--f-display); font-size:.9375rem; font-weight:600; color:var(--ink); letter-spacing:-.015em; margin-top:1rem; line-height:1.3; } .fundadores .role{ font-size:.8125rem; color:var(--mute); line-height:1.45; margin-top:.25rem; } /* ── barras que enchem ────────────────────────────────────── */ .barras-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; } .barras{ display:grid; gap:1.75rem; } .barra-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.75rem; } .barra-nome{ font-family:var(--f-display); font-size:1rem; font-weight:600; letter-spacing:-.018em; color:var(--ink); } .barra-num{ font-family:var(--f-display); font-size:.875rem; font-weight:600; color:var(--brand); font-variant-numeric:tabular-nums; } .barra-trilho{ display:block; height:5px; border-radius:100px; background:var(--paper-3); overflow:hidden; } .barra-preenche{ display:block; height:100%; width:var(--pct,100%); border-radius:100px; background:linear-gradient(90deg, var(--ink), var(--brand)); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out) var(--d,0s); } .barra.is-cheia .barra-preenche{ transform:scaleX(1); } /* ── carrossel de fotos da clínica ────────────────────────── */ .shots-carousel{ --card-w:clamp(280px, 32vw, 420px); } .shot-card{ flex:0 0 var(--card-w); } .shot-card .plate{ aspect-ratio:16/10; border-radius:var(--r); background:var(--paper-3); } .shot-card .plate img{ transform:scale(1); transition:transform .7s var(--ease-out); } .shot-card:hover .plate img{ transform:scale(1.045); } .shots-carousel .track-btn{ top:calc(var(--card-w) * 0.3125); } /* metade de 16/10 */ /* ── missão · visão · valores em grade ────────────────────── */ .mvv{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); align-items:stretch; } .mvv-card{ display:flex; flex-direction:column; padding:clamp(1.75rem,3vw,2.5rem); border-radius:var(--r-lg); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .mvv-card:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-3), 0 26px 50px -34px rgba(11,29,77,.45); } .mvv-icone{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--brand-wash); color:var(--brand); margin-bottom:1.5rem; } .mvv-icone svg{ width:24px; height:24px; } .mvv-card h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.024em; margin-bottom:.85rem; } .mvv-card > p{ font-size:.9688rem; line-height:1.6; } .mvv-lista{ display:grid; gap:0; border-top:1px solid var(--line); } .mvv-lista li{ position:relative; padding:.58rem 0 .58rem 1.35rem; border-bottom:1px solid var(--line); font-size:.9375rem; line-height:1.4; color:var(--body); } .mvv-lista li:last-child{ border-bottom:0; padding-bottom:0; } .mvv-lista li::before{ content:""; position:absolute; left:0; top:1.02rem; width:5px; height:5px; border-radius:50%; background:var(--brand); } /* subtítulo dentro do cabeçalho de seção */ .section-sub{ margin-top:1.15rem; max-width:52ch; } /* nota com os nomes da equipe, abaixo do carrossel */ .nota-equipe{ margin-top:clamp(2rem,4vw,3rem); padding-top:1.75rem; border-top:1px solid var(--line); font-size:.9375rem; line-height:1.65; max-width:70ch; color:var(--mute); } @media (max-width:1020px){ .mvv{ grid-template-columns:1fr; } .split{ grid-template-columns:1fr; } .split-media{ max-width:560px; } .historia-grid{ grid-template-columns:1fr; } .barras-grid{ grid-template-columns:1fr; gap:2.5rem; } } @media (max-width:720px){ /* A arte do celular já vem montada: as pessoas no topo e o branco embaixo, reservado para o texto. Então ela entra inteira, sem recorte e sem véu — e a copy começa logo onde as pessoas terminam. O conteúdo escuro da arte acaba em 42,5% da altura dela; como a proporção é 941×1672, isso dá 0,755 × a largura da tela. 80vw deixa uma folga. */ .hero--pagina{ min-height:0; align-items:flex-start; padding-top:calc(80vw + .75rem); /* em 320px a folga sem isso cai para 14px */ padding-bottom:clamp(2rem,7vw,3rem); } .hero--pagina .hero-bg{ top:0; height:auto; } .hero--pagina .hero-bg picture{ height:auto; } .hero--pagina .hero-bg img{ height:auto; object-fit:fill; } /* o rodapé da arte é (252,251,252), quase branco mas não branco: um degradê curto emenda com a página sem deixar linha */ .hero--pagina .hero-bg::after{ background:linear-gradient(to top, var(--paper) 0px, rgba(255,255,255,0) 70px); } .hero--pagina .lead{ max-width:none; } /* no celular vira lista: foto à esquerda, nome e função empilhados à direita. A foto ocupa as duas linhas — sem isso a função cai na coluna estreita. */ .fundadores{ grid-template-columns:1fr; gap:1.5rem; } .fundadores li{ display:grid; grid-template-columns:104px minmax(0,1fr); grid-template-rows:auto auto; column-gap:1.15rem; row-gap:.25rem; align-content:center; } .fundadores li .plate{ grid-column:1; grid-row:1 / span 2; align-self:center; margin:0; } .fundadores .name{ grid-column:2; grid-row:1; align-self:end; margin-top:0; } .fundadores .role{ grid-column:2; grid-row:2; align-self:start; margin-top:0; } .selos{ flex-direction:column; gap:1.15rem; } .selo-l{ max-width:none; } } /* ============================================================= PÁGINA EXAMES E PROCEDIMENTOS ============================================================= */ /* hero só de texto — sem foto e sem animação de entrada */ .hero--texto{ display:block; min-height:0; padding-top:calc(var(--header-h) + clamp(3.5rem,8vw,7rem)); padding-bottom:clamp(2.5rem,5vw,4rem); background:var(--paper); } .hero--texto .hero-copy{ max-width:none; } .hero--texto h1{ margin:0; text-wrap:balance; } .hero--texto .eyebrow{ margin-bottom:1.6rem; } /* grade dos procedimentos */ .exames-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.5rem); } /* nome branco sobre a foto, seta aparecendo no hover — como no site atual */ .exame-link{ position:relative; display:block; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:var(--paper-3); } .exame-link img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:clip-path .85s var(--ease-out) var(--d,0s), transform .8s var(--ease-out); } /* véu escuro: sem ele o texto branco não lê sobre foto clara */ .exame-link::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(7,18,56,.85) 0%, rgba(7,18,56,.5) 34%, rgba(7,18,56,.16) 62%, rgba(7,18,56,.06) 100%); transition:background .45s var(--ease); } .exame-legenda{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(1.05rem,1.8vw,1.45rem); } .exame-nome{ font-family:var(--f-display); font-size:clamp(1rem,.88rem + .42vw,1.25rem); font-weight:700; line-height:1.2; letter-spacing:-.022em; color:#fff; /* "Colangiopancreatografia" não cabe na coluna: hifeniza em vez de partir seco */ hyphens:auto; overflow-wrap:break-word; } .exame-seta{ display:block; margin-top:.75rem; width:22px; height:22px; color:#fff; opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .45s var(--ease-out); } .exame-seta svg{ width:22px; height:22px; } .exame-link:hover img{ transform:scale(1.06); } .exame-link:hover::after{ background:linear-gradient(to top, rgba(7,18,56,.9) 0%, rgba(7,18,56,.6) 38%, rgba(7,18,56,.26) 66%, rgba(7,18,56,.12) 100%); } .exame-link:hover .exame-seta{ opacity:1; transform:none; } /* destino ainda não existe: sem cursor de clique e sem seta */ .exame-link[data-destino-pendente]{ cursor:default; } .exame-link[data-destino-pendente]:hover .exame-seta{ opacity:0; transform:translateY(8px); } .exames-foot{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:clamp(3rem,5vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line); } .exames-foot p{ max-width:38ch; font-size:.9688rem; margin:0; } @media (max-width:1020px){ .exames-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .hero--texto .hero-copy{ max-width:none; } } @media (max-width:720px){ .exames-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .exame h3{ font-size:.9375rem; } .exames-foot{ flex-direction:column; align-items:flex-start; gap:1.5rem; } .exames-foot .btn{ width:100%; } } /* ============================================================= PÁGINA DE UM PROCEDIMENTO ============================================================= */ /* voltar para a listagem, no lugar do eyebrow */ .voltar{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-display); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:1.6rem; transition:color .3s var(--ease); } .voltar svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); } .voltar:hover{ color:var(--ink); } .voltar:hover svg{ transform:translateX(-4px); } .procedimento{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; } .procedimento-texto > p{ max-width:60ch; } .procedimento-foto{ aspect-ratio:3/4; border-radius:var(--r); background:var(--paper-3); } /* bloco do parceiro */ .nota-parceiro{ margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.5rem,3vw,2rem); border-radius:var(--r); background:var(--brand-wash); max-width:60ch; } .nota-parceiro p{ font-size:.9688rem; line-height:1.65; margin-bottom:1.15rem; } @media (max-width:1020px){ .procedimento{ grid-template-columns:1fr; } .procedimento-foto{ max-width:460px; order:-1; } } /* vídeo incorporado nas páginas de procedimento */ .video{ margin:clamp(2rem,4vw,3rem) 0 0; max-width:60ch; } .video-quadro{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:var(--paper-3); } .video-quadro iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video figcaption{ margin-top:.9rem; font-size:.8125rem; color:var(--mute); } /* ============================================================= PÁGINA DE BLOG — listagem Estrutura de laço: todos os cartões iguais, para virar Loop Grid no Elementor sem exceção nenhuma. ============================================================= */ .hero--texto .hero-sub{ margin-top:1.5rem; max-width:46ch; } .posts--blog{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2.25rem,4vw,3.25rem) clamp(1.25rem,2.5vw,2rem); } .posts--blog .post{ display:flex; flex-direction:column; } .posts--blog h2{ font-size:1.125rem; font-weight:600; letter-spacing:-.022em; line-height:1.3; color:var(--ink); margin-bottom:.75rem; } .post-resumo{ font-size:.9375rem; line-height:1.6; color:var(--body); margin-bottom:1.1rem; } .posts--blog .more{ margin-top:auto; } .posts--blog .post:hover h2{ color:var(--brand); } @media (max-width:1020px){ /* a home esconde o 3º cartão; na listagem do blog todos aparecem */ .posts--blog{ grid-template-columns:repeat(2,minmax(0,1fr)); } .posts--blog .post{ display:flex !important; } } @media (max-width:720px){ .posts--blog{ grid-template-columns:1fr; } } /* ============================================================= PÁGINA DE ARTIGO ============================================================= */ .hero--artigo{ padding-bottom:clamp(1.75rem,3vw,2.5rem); } .artigo-cabeca{ max-width:44rem; } .artigo-titulo{ font-family:var(--f-display); font-size:clamp(1.9rem,1.25rem + 2.4vw,3.15rem); font-weight:800; line-height:1.08; letter-spacing:-.032em; color:var(--ink); margin:0; text-wrap:balance; } .artigo-data{ margin-top:1.15rem; font-family:var(--f-display); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); } /* capa larga: ocupa a coluna inteira, bem mais larga que o texto, e encosta mais no corpo do artigo */ .artigo-capa{ margin:0 0 clamp(1.5rem,2.6vw,2.25rem); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); aspect-ratio:2/1; } .artigo-capa img{ width:100%; height:100%; object-fit:cover; } /* corpo do texto: medida de leitura confortável */ .artigo-corpo{ max-width:68ch; font-size:clamp(1rem,.97rem + .18vw,1.0625rem); line-height:1.75; } .artigo-corpo > * + *{ margin-top:1.15em; } .artigo-corpo p{ margin:0; } .artigo-corpo strong{ color:var(--ink); font-weight:600; } .artigo-corpo h2{ font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem); font-weight:700; letter-spacing:-.026em; line-height:1.2; margin-top:2.25em; } .artigo-corpo h3{ font-size:clamp(1.125rem,1.02rem + .45vw,1.3125rem); font-weight:700; letter-spacing:-.022em; line-height:1.25; margin-top:2em; } .artigo-corpo h4{ font-size:1.0625rem; font-weight:600; letter-spacing:-.018em; margin-top:1.75em; } .artigo-corpo ul, .artigo-corpo ol{ display:grid; gap:.55rem; padding-left:0; } .artigo-corpo li{ position:relative; padding-left:1.4rem; } .artigo-corpo ul > li::before{ content:""; position:absolute; left:.15rem; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--brand); } .artigo-corpo ol{ counter-reset:passo; } .artigo-corpo ol > li{ counter-increment:passo; padding-left:1.9rem; } .artigo-corpo ol > li::before{ content:counter(passo) "."; position:absolute; left:0; top:0; font-family:var(--f-display); font-weight:600; font-size:.9375rem; color:var(--brand); } .artigo-corpo a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .artigo-corpo blockquote{ padding-left:1.25rem; border-left:2px solid var(--brand); color:var(--ink); } .artigo-video{ margin:2rem 0; border-radius:var(--r); overflow:hidden; background:var(--deep); } .artigo-video video{ display:block; width:100%; height:auto; } @media (max-width:720px){ .artigo-capa{ aspect-ratio:3/2; border-radius:var(--r); } } /* ============================================================= PÁGINA CONTATO ============================================================= */ /* foto à esquerda, cartão do formulário à direita — o cartão sobe um pouco sobre a foto, como na página original */ .contato{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:stretch; /* a foto acompanha a altura do cartão — sem buraco ao lado */ } .contato-foto{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); min-height:clamp(19rem,30vw,26rem); } .contato-foto img{ width:100%; height:100%; object-fit:cover; } .contato-card{ background:var(--deep); border-radius:var(--r-lg); padding:clamp(1.9rem,3.4vw,3.25rem); } .contato-form{ display:grid; gap:1rem; } /* mesmos campos da newsletter, mas empilhados e com o ícone à esquerda */ .campo{ position:relative; } .campo > svg{ position:absolute; left:1.15rem; top:1.2rem; width:17px; height:17px; color:rgba(255,255,255,.42); pointer-events:none; transition:color .3s var(--ease); } .campo input, .campo textarea{ width:100%; padding:1.05rem 1.25rem 1.05rem 3rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); color:#fff; font-family:var(--f-text); font-size:.9375rem; transition:border-color .3s var(--ease), background .3s var(--ease); } .campo textarea{ resize:vertical; min-height:7.5rem; line-height:1.6; } .campo input::placeholder, .campo textarea::placeholder{ color:rgba(255,255,255,.38); } .campo input:focus, .campo textarea:focus{ outline:none; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); } .campo:focus-within > svg{ color:rgba(255,255,255,.8); } .contato-form .btn{ justify-self:start; margin-top:.35rem; } .contato-msg{ font-size:.8125rem; color:#8FE05C; min-height:1.2em; } /* os três canais, com o número gigante por trás — igual ao original */ .canais{ display:grid; /* as colunas se acertam sozinhas com a quantidade de canais: hoje são dois, mas se voltar a três o grid se reorganiza sem tocar no CSS */ grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap:clamp(1.5rem,3vw,2.75rem); } .canal{ position:relative; display:flex; align-items:center; gap:.85rem; min-height:clamp(5.5rem,9vw,7.5rem); padding-left:clamp(2.75rem,5vw,4.5rem); } .canal::before{ content:attr(data-n); position:absolute; left:0; top:50%; transform:translateY(-50%); font-family:var(--f-display); font-size:clamp(4.5rem,8vw,7.5rem); font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--paper-3); z-index:0; pointer-events:none; user-select:none; } .canal > svg, .canal-texto{ position:relative; z-index:1; } .canal > svg{ flex:none; width:26px; height:26px; color:var(--whats); } .canal-texto{ font-family:var(--f-display); font-size:clamp(.9688rem,.88rem + .3vw,1.125rem); font-weight:700; letter-spacing:-.02em; line-height:1.45; color:var(--ink); text-wrap:pretty; } a.canal .canal-texto{ transition:color .3s var(--ease); } a.canal:hover .canal-texto{ color:var(--brand); } .canal--local > svg{ color:var(--brand); } @media (max-width:1020px){ .contato{ grid-template-columns:minmax(0,1fr); } .contato-foto{ min-height:0; aspect-ratio:16/9; } .canais{ grid-template-columns:minmax(0,1fr); gap:.5rem; } .canal{ min-height:0; padding:1.15rem 0 1.15rem clamp(3rem,11vw,4.5rem); } .canal::before{ font-size:clamp(3.5rem,13vw,5rem); } } /* ============================================================= PONTE PARA O ELEMENTOR Os widgets do Elementor emitem um DOM diferente do HTML original: o menu ganha um