/* ==================================================== INSTITUTO NUR — Stylesheet v1.4 Tipografia: PT Sans Pro Cond Bold (display) + Cormorant Garamond (serifada nos destaques) + Avenir (corpo) Aesthetic: editorial · refinado · ouro + tinta + creme + pastel ==================================================== */ /* --- Fonte display: PT Sans Pro Cond Bold com fallback PT Sans Narrow do Google Fonts --- */ /* Caso o cliente faça upload da PT Sans Pro Cond Bold local em fonts/, ela será usada; senão a PT Sans Narrow Bold (carregada via Google Fonts no ) cobre como fallback. */ @font-face { font-family: 'PT Sans Pro Cond'; src: local('PT Sans Pro Cond Bold'), local('PTSansPro-CondBold'), url('../fonts/PT-Sans-Pro-Cond-Bold.woff2') format('woff2'), url('../fonts/PT-Sans-Pro-Cond-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* --- Fontes corpo: Avenir (mantidas) --- */ @font-face { font-family: 'Avenir'; src: url('../fonts/avenir-medium.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('../fonts/avenir-heavy.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; } :root { /* Palette — base da marca + tons pastel suaves */ --ink: #0b0a08; --ink-2: #161310; --ink-3: #2a2520; --cream: #f6efe2; --cream-2: #ece2cf; --paper: #fbf7ee; /* Pastéis quentes coordenados com a paleta de ouro */ --pastel-1: #f7f1e6; /* champagne suave - fundo principal */ --pastel-2: #f1e9d8; /* champagne médio */ --pastel-3: #f5ede0; /* areia */ --pastel-4: #efe5d2; /* areia mais quente */ --gold-1: #a8843e; --gold-2: #d4a857; --gold-3: #f0d488; --gold-soft: #c9a35c; --line: rgba(212,168,87,.22); --shadow-lg: 0 30px 80px -30px rgba(11,10,8,.45); --shadow-md: 0 12px 40px -16px rgba(11,10,8,.35); --shadow-sm: 0 6px 20px -10px rgba(11,10,8,.2); /* Typography --font-display : títulos / textos com tom forte e condensado (substitui a antiga Kristall) --font-serif : usada nos de destaque (sabor editorial) --font-sans : corpo de texto */ --font-display: 'PT Sans Pro Cond', 'PT Sans Narrow', 'Avenir', sans-serif; --font-sans: 'Avenir', system-ui, -apple-system, sans-serif; --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; /* Layout */ --maxw: 1280px; --gutter: clamp(20px, 5vw, 64px); --radius: 4px; } /* -------- reset / base -------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--pastel-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } button { font: inherit; } ::selection { background: var(--gold-2); color: var(--ink); } /* -------- Brand inline ("Instituto NUR" no meio do texto) -------- Sempre que o nome aparece em texto, "NUR" usa a fonte display (PT Sans Pro Cond Bold) em maiúsculas. "Instituto" mantém a fonte sans do parágrafo. */ .brand { font-style: normal; font-weight: inherit; } .brand em { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* -------- typography helpers -------- */ .section-eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 28px; } .section-head--light .section-eyebrow { color: var(--gold-3); } .section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -.005em; margin: 0 0 32px; text-transform: uppercase; color: var(--ink); } .section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; background: linear-gradient(120deg, var(--gold-1), var(--gold-3) 40%, var(--gold-1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 .05em; } .section-head--light .section-title { color: var(--cream); } .section-head { margin-bottom: 56px; } .section-deck { font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.6; color: rgba(246,239,226,.7); max-width: 620px; margin: -16px 0 0; } .section-deck--ink { color: var(--ink-3); } /* -------- buttons -------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 32px; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; cursor: pointer; transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; white-space: nowrap; } .btn--small { padding: 12px 22px; font-size: .72rem; letter-spacing: .14em; gap: 8px; } .btn--primary { color: var(--ink); background: linear-gradient(120deg, var(--gold-2), var(--gold-3) 50%, var(--gold-2)); box-shadow: 0 16px 40px -16px rgba(212,168,87,.6); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(212,168,87,.7); } .btn--ghost { color: var(--ink); border: 1px solid var(--ink); background: transparent; } .btn--ghost:hover { background: var(--ink); color: var(--cream); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); background: linear-gradient(180deg, rgba(11,10,8,.55) 0%, rgba(11,10,8,.3) 60%, rgba(11,10,8,0) 100%); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease, border-color .35s ease; } .nav.is-scrolled { background: rgba(11,10,8,.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 12px var(--gutter); border-bottom: 1px solid rgba(212,168,87,.15); } .nav__logo { display: flex; align-items: center; height: 44px; /* ATENÇÃO: logo-gold.png é RGBA com fundo TRANSPARENTE. NÃO adicione background, border-radius+overflow:hidden, ou qualquer filtro que destrua a transparência. Não converta o PNG para JPEG. Em cada atualização, verificar: file assets/logo-gold.png deve dizer RGBA. */ } .nav__logo img { height: 100%; width: auto; display: block; } .nav.is-scrolled .nav__logo { height: 36px; } .nav__links { display: flex; /* v2.14: gap reduzido novamente de 22px → 16px para compactar mais o menu. Histórico: v1.0 28px → v2.13 22px → v2.14 16px. Mais reduções podem comprometer a legibilidade dos sublinhados de hover entre itens. */ gap: 16px; } .nav__links a { color: var(--cream); font-family: var(--font-sans); font-weight: 500; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; position: relative; padding: 6px 0; transition: color .25s ease; } .nav__links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); transition: width .35s ease; } .nav__links a:hover { color: var(--gold-3); } .nav__links a:hover::after { width: 100%; } .nav__cta { display: inline-flex; align-items: center; padding: 12px 24px; font-family: var(--font-sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: linear-gradient(120deg, var(--gold-2), var(--gold-3)); border-radius: 999px; transition: transform .3s ease; } .nav__cta:hover { transform: translateY(-1px); } .nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid rgba(246, 239, 226, .3); border-radius: 6px; cursor: pointer; } .nav__burger span { display: block; width: 18px; height: 1.5px; margin: 0 auto; background: var(--cream); transition: transform .3s ease, opacity .3s ease; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ HERO (foto da equipe ao fundo + overlay) ============================================================ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px var(--gutter) 80px; background: var(--ink); color: var(--cream); overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; } /* Foto da equipe — desfocada e em saturação leve, sai de cena no mobile */ .hero__photo { position: absolute; inset: 0; display: block; overflow: hidden; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(.85) contrast(.95) brightness(.7); transform: scale(1.04); animation: heroPhotoZoom 24s ease-in-out infinite alternate; } @keyframes heroPhotoZoom { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.1) translateX(-1.5%); } } /* Overlay rico: gradiente escuro à esquerda (onde está o texto), suave à direita */ .hero__photo-overlay { position: absolute; inset: 0; background: /* fade lateral esquerdo para escuro (legibilidade do texto) */ linear-gradient(95deg, rgba(11,10,8,.92) 0%, rgba(11,10,8,.78) 30%, rgba(11,10,8,.45) 55%, rgba(11,10,8,.25) 80%, rgba(11,10,8,.55) 100%), /* sombra superior+inferior para colar com nav e seção seguinte */ linear-gradient(180deg, rgba(11,10,8,.5) 0%, rgba(11,10,8,0) 25%, rgba(11,10,8,0) 75%, rgba(11,10,8,.55) 100%); } .hero__glow { position: absolute; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: -20%; right: -10%; background: radial-gradient(circle at 50% 50%, rgba(240,212,136,.15) 0%, rgba(212,168,87,.05) 30%, transparent 60%); filter: blur(40px); animation: float 18s ease-in-out infinite; mix-blend-mode: screen; } .hero__grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3%, 4%); } } .hero::before { content: ''; position: absolute; left: var(--gutter); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(212,168,87,.3) 30%, rgba(212,168,87,.3) 70%, transparent); z-index: 0; } .hero::after { content: ''; position: absolute; right: var(--gutter); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(212,168,87,.15) 30%, rgba(212,168,87,.15) 70%, transparent); z-index: 0; } .hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; z-index: 1; } .hero__kicker { display: inline-block; font-family: var(--font-sans); font-style: italic; font-weight: 500; font-size: 1rem; letter-spacing: .04em; color: var(--gold-3); margin-bottom: 36px; opacity: 0; animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) forwards; } /* Lede do hero — substitui hero__title + hero__sub. Texto editorial, max 2 linhas grandes */ .hero__lede { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.18; letter-spacing: -.005em; color: var(--cream); max-width: 780px; margin: 0 0 48px; opacity: 0; animation: rise 1s .35s cubic-bezier(.2,.7,.2,1) forwards; text-shadow: 0 2px 30px rgba(0,0,0,.45); } .hero__lede em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--gold-3); /* font-size é um pouco maior pq Cormorant é mais fino */ font-size: 1.06em; } /* Variante: o "NUR" da frase de abertura usa a fonte display do logo (PT Sans Pro Cond Bold), em maiúsculas, mantendo o dourado. "luz" e "detalhe" continuam em Cormorant itálico. */ .hero__lede em.is-mark { font-family: var(--font-display); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1em; /* PT Sans Cond não precisa de uplift como Cormorant */ } .hero__lede br { display: block; content: ''; margin-top: .25em; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 80px; opacity: 0; animation: rise 1s .65s cubic-bezier(.2,.7,.2,1) forwards; } .hero__actions .btn--ghost { color: var(--cream); border-color: rgba(246,239,226,.5); backdrop-filter: blur(6px); background: rgba(11,10,8,.18); } .hero__actions .btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); backdrop-filter: none; } .hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 720px; padding-top: 36px; border-top: 1px solid rgba(212,168,87,.25); opacity: 0; animation: rise 1s .9s cubic-bezier(.2,.7,.2,1) forwards; } .hero__meta div { display: flex; flex-direction: column; gap: 6px; } .hero__meta-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; background: linear-gradient(120deg, var(--gold-2), var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__meta-lab { font-size: .78rem; font-weight: 400; letter-spacing: .04em; color: rgba(246,239,226,.65); line-height: 1.4; } .hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 24px; height: 40px; border: 1px solid rgba(246,239,226,.4); border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; } .hero__scroll span { display: block; width: 2px; height: 8px; background: var(--gold-3); border-radius: 1px; animation: scrollWheel 1.8s ease-in-out infinite; } @keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: .3; } 100% { transform: translateY(0); opacity: 1; } } @keyframes rise { to { opacity: 1; transform: translateY(0); } } /* ============================================================ SOBRE — pastel ============================================================ */ .sobre { background: var(--pastel-1); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; } .sobre::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .sobre__inner { max-width: var(--maxw); margin: 0 auto; } .sobre__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; } .sobre__lead { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink); margin: 0 0 24px; } .sobre__text p { color: var(--ink-3); margin: 0 0 18px; } .sobre__quick-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .sobre__image { position: relative; margin: 0; position: sticky; top: 100px; } .sobre__image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-lg); } .sobre__image::before { content: ''; position: absolute; top: -16px; left: -16px; right: 30%; bottom: 30%; border: 1px solid var(--gold-soft); border-radius: 6px; z-index: -1; } .sobre__image figcaption { margin-top: 16px; font-style: italic; font-size: .92rem; color: var(--ink-3); text-align: right; } /* ============================================================ AVALIAÇÕES — intermezzo editorial entre Sobre (01) e Especialidades (02). Sem número próprio · fundo creme suave (--paper) para diferenciar da Sobre (--pastel-1) sem competir com a Especialidades (--ink). ============================================================ */ .reviews { background: var(--paper); padding: clamp(72px, 10vw, 130px) var(--gutter); position: relative; } .reviews::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(160px, 30%, 360px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .reviews__inner { max-width: var(--maxw); margin: 0 auto; } .reviews .section-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } /* O .section-deck por padrão tem margin: -16px 0 0 (sem auto), o que o gruda à esquerda mesmo quando o pai é text-align:center. Aqui na faixa de Avaliações queremos a deck também centrada em relação ao widget. */ .reviews .section-deck { margin-left: auto; margin-right: auto; } .reviews__widget { /* Elfsight monta sua própria árvore de DOM aqui — damos só uma faixa respiráveis e deixamos o widget governar tipografia/cores internas. */ width: 100%; margin: 0 auto; min-height: 300px; } /* Garante que o div da app Elfsight ocupe toda a largura */ .reviews__widget > div[class^="elfsight-app-"] { width: 100%; } /* ============================================================ ESPECIALIDADES (dark) ============================================================ */ .esp { background: var(--ink); color: var(--cream); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; overflow: hidden; } .esp::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(212,168,87,.12), transparent 60%), radial-gradient(ellipse 50% 50% at 100% 100%, rgba(168,132,62,.08), transparent 60%); pointer-events: none; } .esp__inner { position: relative; max-width: var(--maxw); margin: 0 auto; } .esp__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .esp-card { position: relative; padding: 40px 36px; background: linear-gradient(180deg, rgba(246,239,226,.04), rgba(246,239,226,.01)); border: 1px solid rgba(212,168,87,.18); border-radius: 8px; transition: transform .4s ease, border-color .4s ease, background .4s ease; } .esp-card:hover { transform: translateY(-4px); border-color: rgba(212,168,87,.5); background: linear-gradient(180deg, rgba(246,239,226,.06), rgba(246,239,226,.02)); } .esp-card__num { position: absolute; top: 28px; right: 32px; font-family: var(--font-display); font-size: .9rem; letter-spacing: .14em; color: var(--gold-2); opacity: .8; } .esp-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 8px; color: var(--cream); } .esp-card__doctor { font-style: italic; font-weight: 500; font-size: 1rem; color: var(--gold-3); margin: 0 0 16px; line-height: 1.4; } .esp-card > p { color: rgba(246,239,226,.75); font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.55; margin: 0 0 24px; } .esp-card ul li { padding: 8px 0; font-size: .92rem; font-weight: 400; color: rgba(246,239,226,.85); border-bottom: 1px solid rgba(212,168,87,.12); position: relative; padding-left: 18px; } .esp-card ul li:last-child { border-bottom: 0; } .esp-card ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 1px; background: var(--gold-2); } /* ============================================================ CORPO CLÍNICO — pastel, equal-sized doctor cards ============================================================ */ .team { background: var(--pastel-2); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; } .team::before, .team::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .team::before { top: 0; } .team::after { bottom: 0; } .team__inner { max-width: var(--maxw); margin: 0 auto; } /* === Team group: agrupa Médicos / Equipe NUR com cabeçalho próprio === */ .team-group { position: relative; } .team-group + .team-group { margin-top: clamp(80px, 10vw, 130px); padding-top: clamp(80px, 10vw, 130px); } /* Separador editorial entre Médicos e Equipe NUR — linha dourada centralizada com ornamento. Não é uma "barra de baixo" da última card, é um divisor próprio do grupo. */ .team-group + .team-group::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(140px, 26%, 320px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .team-group + .team-group::after { content: '✦'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-family: var(--font-serif); font-size: 1.1rem; color: var(--gold-1); background: var(--pastel-2); padding: 0 14px; line-height: 1; } .team-group__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(50px, 7vw, 90px); max-width: 720px; margin-left: auto; margin-right: auto; } .team-group__label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 14px; } .team-group__label::before, .team-group__label::after { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--gold-soft); } .team-group__title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0; color: var(--ink); } .team-group__deck { font-family: var(--font-sans); font-size: .98rem; line-height: 1.7; color: var(--ink-3); margin: 18px 0 0; max-width: 56ch; } /* === Team feature: foto grande + texto, alternando lados === */ .team-feature { display: grid; grid-template-columns: 0.95fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: center; margin-bottom: clamp(60px, 8vw, 110px); padding-bottom: clamp(60px, 8vw, 110px); border-bottom: 1px solid var(--line); } /* O último card de cada grupo perde a borda inferior (evita linha dupla com o separador) */ .team-group .team-feature:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .team-feature:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .team-feature--reverse { grid-template-columns: 1.1fr 0.95fr; } .team-feature--reverse figure { order: 2; } .team-feature figure { margin: 0; position: relative; } .team-feature figure::before { content: ''; position: absolute; inset: -16px -16px 35% 35%; border: 1px solid var(--gold-soft); border-radius: 6px; z-index: 0; pointer-events: none; } .team-feature--reverse figure::before { inset: -16px 35% 35% -16px; } .team-feature figure img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-lg); filter: saturate(1.05); } .team-feature__body { display: flex; flex-direction: column; } .team-feature__role { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 18px; } .team-feature h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.005em; margin: 0 0 14px; text-transform: uppercase; color: var(--ink); } /* Placeholder de nome — herda fonte display PT Sans Pro Cond Bold do

, sem itálico, sem dourado: visualmente igual a um nome real (ex.: "Dr. Ricardo Siufi"). */ .team-feature__placeholder { font-family: inherit; font-style: normal; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; -webkit-text-fill-color: currentColor; } .team-feature__title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--gold-1); margin: 0 0 24px; } .team-feature__bio { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--ink-3); margin: 0 0 26px; max-width: 56ch; } .team-feature__creds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .team-feature__creds li { padding: 8px 18px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--font-sans); font-size: .78rem; font-weight: 500; letter-spacing: .04em; } .team-feature__creds strong { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; margin-right: 8px; color: var(--gold-1); font-size: .72rem; } .team-feature__cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 13px 24px; font-family: var(--font-sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: linear-gradient(120deg, var(--gold-2), var(--gold-3)); border-radius: 999px; transition: transform .3s ease, box-shadow .3s ease; } .team-feature__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(212,168,87,.55); } .team-feature__cta svg { color: #25D366; } /* ============================================================ EXAMS (dark) ============================================================ */ .exams { background: var(--ink); color: var(--cream); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; overflow: hidden; } .exams::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 100% 0%, rgba(212,168,87,.1), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(168,132,62,.08), transparent 60%); pointer-events: none; } .exams__inner { position: relative; max-width: var(--maxw); margin: 0 auto; } .exams__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .exam-card { position: relative; background: linear-gradient(180deg, rgba(246,239,226,.04), rgba(246,239,226,.01)); border: 1px solid rgba(212,168,87,.18); border-radius: 8px; transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; display: flex; flex-direction: column; overflow: hidden; } .exam-card:hover { transform: translateY(-3px); border-color: rgba(212,168,87,.45); box-shadow: 0 18px 48px -20px rgba(0,0,0,.5); } /* Carousel de imagens dos exames (estilo Taggy) — track + dots indicators */ .exam-card__media { position: relative; background: #0f0d0a; overflow: hidden; aspect-ratio: 4/3; } /* Wrapper interno deslizante que segura todas as imagens lado a lado */ .exam-card__track { display: flex; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .exam-card__media img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Dots indicators sobrepostas no canto inferior */ .exam-card__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; pointer-events: auto; z-index: 2; } .exam-card__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(246,239,226,.45); cursor: pointer; padding: 0; transition: background .25s ease, transform .25s ease, width .3s ease; box-shadow: 0 0 0 1px rgba(11,10,8,.35); } .exam-card__dots button:hover { background: rgba(246,239,226,.75); transform: scale(1.15); } .exam-card__dots button.is-active { background: var(--gold-3); width: 22px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(11,10,8,.4), 0 0 12px rgba(240,212,136,.4); } /* Botões de navegação invisíveis (cliques nas laterais) — opcional, mas torna a UX melhor */ .exam-card__media::before, .exam-card__media::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; z-index: 1; pointer-events: none; } .exam-card__media::before { left: 0; } .exam-card__media::after { right: 0; } .exam-card__body { padding: 30px 32px 28px; display: flex; flex-direction: column; flex: 1; } .exam-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(212,168,87,.18); } .exam-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); margin: 0; } .exam-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; background: linear-gradient(120deg, var(--gold-2), var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } .exam-card__price small { font-size: 1rem; letter-spacing: 0; } .exam-card__price--text { font-size: 1.25rem; letter-spacing: .04em; } .exam-card p { font-family: var(--font-sans); font-weight: 400; font-size: .98rem; line-height: 1.55; color: rgba(246,239,226,.78); margin: 0 0 24px; flex: 1; } .exam-card__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; align-self: flex-start; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); border: 1px solid rgba(212,168,87,.4); border-radius: 999px; transition: background .3s ease, color .3s ease, border-color .3s ease; } .exam-card__cta::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25D366; } .exam-card__cta:hover { background: var(--gold-2); color: var(--ink); border-color: var(--gold-2); } /* Card "sob demanda" — arte SVG no lugar do carousel */ .exam-card--demand { background: linear-gradient(180deg, rgba(212,168,87,.08), rgba(212,168,87,.02)); border-style: dashed; } .exam-card__media--art { display: block; position: relative; aspect-ratio: 4/3; background: #0f0d0a; overflow: hidden; } .exam-card__art { position: absolute; inset: 0; } .exam-card__art svg { width: 100%; height: 100%; display: block; } /* ============================================================ A CLÍNICA — gallery (pastel) ============================================================ */ .clinic { background: var(--pastel-3); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; } .clinic::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .clinic__inner { max-width: var(--maxw); margin: 0 auto; } .clinic__feature { margin: clamp(32px,5vw,56px) 0 0; position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); } /* Track: slides side-by-side, clips to one at a time */ .clinic__carousel-track { display: flex; transition: transform .55s cubic-bezier(.25,.8,.25,1); will-change: transform; } /* Each slide = full-width button that also opens lightbox */ .clinic__slide { flex: 0 0 100%; display: block; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; } .clinic__slide img { width: 100%; height: clamp(320px, 52vw, 640px); object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; } .clinic__slide:hover img { transform: scale(1.02); } /* Arrows — sobrepostos no canto vertical-center, nas laterais */ .clinic__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(11,10,8,.55); backdrop-filter: blur(6px); border: 1px solid rgba(240,212,136,.25); border-radius: 50%; color: var(--gold-3); cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .clinic__arrow:hover { background: rgba(11,10,8,.85); border-color: var(--gold-2); transform: translateY(-50%) scale(1.08); } .clinic__arrow--prev { left: 16px; } .clinic__arrow--next { right: 16px; } /* Dots — sobrepostos no rodapé da imagem, estilo igual exam-card__dots */ .clinic__dots { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .clinic__dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(240,212,136,.45); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, transform .25s ease; } .clinic__dots button.is-active { background: var(--gold-3); transform: scale(1.35); } /* Caption — faixa no rodapé da imagem */ .clinic__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 24px 18px; background: linear-gradient(180deg, transparent, rgba(11,10,8,.82)); display: flex; flex-direction: column; gap: 3px; font-family: var(--font-sans); font-size: .82rem; font-style: italic; color: rgba(240,212,136,.75); pointer-events: none; } #clinicCaptionText { font-family: var(--font-display); font-style: normal; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-3); font-weight: 700; } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(11,10,8,.95); display: none; align-items: center; justify-content: center; z-index: 200; padding: 40px; } .lightbox.is-open { display: flex; } .lightbox__close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(246,239,226,.3); border-radius: 50%; color: var(--cream); cursor: pointer; } .lightbox__close:hover { background: rgba(246,239,226,.1); } .lightbox__inner { margin: 0; max-width: 1100px; max-height: 90vh; display: flex; flex-direction: column; gap: 16px; } .lightbox__inner img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-lg); } .lightbox__inner figcaption { font-family: var(--font-display); font-weight: 700; text-align: center; color: var(--cream); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; } .lightbox__inner figcaption em { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gold-3); font-size: 1.3rem; margin-left: 6px; } /* ============================================================ EDUCAÇÃO MÉDICA — pastel com arte SVG ============================================================ */ .edu { background: var(--pastel-1); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; } .edu::before, .edu::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .edu::before { top: 0; } .edu::after { bottom: 0; } .edu__inner { max-width: var(--maxw); margin: 0 auto; } .edu__construction { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; margin-top: 16px; } .edu__art { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(212,168,87,.3); aspect-ratio: 600 / 380; } .edu__art svg { width: 100%; height: 100%; display: block; } .edu__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .edu__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-1); background: rgba(168,132,62,.08); border: 1px solid rgba(168,132,62,.3); border-radius: 999px; } .edu__copy h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 4px; color: var(--ink); } .edu__copy p { font-family: var(--font-sans); font-weight: 400; font-size: 1.02rem; line-height: 1.65; color: var(--ink-3); margin: 0; max-width: 56ch; } .edu__copy-secondary { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem !important; color: var(--gold-1) !important; } .edu__copy .btn { margin-top: 6px; } /* ============================================================ CONECTE-SE / REDES SOCIAIS Janelas para Instagram, YouTube, Blog, LinkedIn e Imprensa. Fundo creme quente para se diferenciar do pastel da Educação. Cards em papel claro com borda dourada sutil + ícone marcado por tom da plataforma, no estilo editorial do NUR. ============================================================ */ .social { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,168,87,.07), transparent 60%), var(--paper); padding: clamp(80px, 12vw, 160px) var(--gutter); position: relative; overflow: hidden; } .social::before, .social::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .social::before { top: 0; } .social::after { bottom: 0; } .social__inner { max-width: var(--maxw); margin: 0 auto; position: relative; } .social__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 28px); margin-top: clamp(40px, 6vw, 70px); } /* Cada cartão: papel suave, borda dourada sutil, header / corpo / footer */ .social-card { display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); position: relative; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; min-height: 380px; } .social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); } /* Card largo (Imprensa) ocupa as duas colunas */ .social-card--wide { grid-column: 1 / -1; } .social-card__head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); } .social-card__brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .social-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--gold-3), var(--gold-2)); color: var(--ink); flex-shrink: 0; box-shadow: 0 4px 14px -6px rgba(168,132,62,.55); } .social-card__platform { display: block; font-family: var(--font-sans); font-weight: 600; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 4px; } .social-card__handle { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.005em; color: var(--ink); margin: 0; text-transform: uppercase; line-height: 1.1; } .social-card__follow { flex-shrink: 0; display: inline-flex; align-items: center; padding: 8px 14px; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--gold-soft); border-radius: 999px; transition: background .25s ease, color .25s ease, border-color .25s ease; } .social-card__follow:hover { background: linear-gradient(120deg, var(--gold-2), var(--gold-3)); border-color: transparent; } .social-card__body { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; } .social-card__foot { padding: 14px 26px 18px; border-top: 1px dashed var(--line); } .social-card__foot small { font-family: var(--font-sans); font-size: .72rem; color: var(--ink-3); opacity: .8; font-style: italic; } /* === Instagram: grid 3x3 === */ .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* Variante: corpo com widget Elfsight (Instagram Feed real do @pneumologista). O Elfsight renderiza um