/* ============================================================ Instituto Marzola — sistema visual. Preto e dourado do próprio Instituto (dourado amostrado das fotos), com uma terceira superfície: a foto da clínica, clara, em faixa full-bleed. Dois temas no mesmo arquivo: | Elemento-assinatura: "a marcação" — anel + fio-guia + rótulo, a anotação de planejamento que o Dr. Gabriel desenha no rosto antes de aplicar. ============================================================ */ /* fontes auto-hospedadas (variáveis, subset latin) — zero origem de terceiro */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/playfair.woff2) format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-italic.woff2) format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/dm-sans.woff2) format('woff2'); } :root { --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* paleta da marca */ --gold: #D8A863; --gold-light: #E7C48D; --gold-dark: #8B5E20; --wa: #25D366; /* verde do WhatsApp: todo botão primário leva ao WhatsApp */ --wa-dark: #1DB954; --breu: #0C0D0A; /* superfície do argumento (leitura) */ --osso: #1A1D16; /* superfície da prova (presença) */ --ink-deep: #12130F; --ink-mid: #1E211A; --cream: #EDEBE3; --cream-light:#F8F7F2; --text: #1A1A1A; --text-muted: #6B6B6B; /* canto quase reto lê editorial; 12px lê app */ --radius: 4px; --radius-lg: 6px; --r-img: 3px; --shadow-card: none; --shadow-lift: 0 0 0 1px var(--gold-light); --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem; --step--1: clamp(.9375rem, 1.5vw, 1.0625rem); --step-0: clamp(1rem, 1.6vw, 1.125rem); --step-1: clamp(1.25rem, 3vw, 1.75rem); --step-lead: clamp(1.0625rem, 1.4vw, 1.1875rem); --step-2: clamp(1.75rem, 4vw, 2.75rem); --step-3: clamp(2.1rem, 5.2vw, 3.6rem); } /* ---------- TEMA CLEAN (descarte — mantido só para o build da versão clara) ---------- */ :root[data-tema="clean"] { --pagina: var(--cream-light); --superficie-a: var(--cream-light); --superficie-b: var(--cream); --superficie-esc:var(--cream); --card: #FFFFFF; --borda: rgba(20,18,15,.10); --texto-a: var(--text); --texto-a-mudo: var(--text-muted); --texto-esc: #F4F1EA; --texto-esc-mudo:#B9B2A5; --header-bg: rgba(253,251,247,.92); --header-txt: var(--text); --header-borda: rgba(20,18,15,.08); --acento: var(--gold-dark); --shadow-card: 0 4px 24px rgba(20,18,15,.07); } /* ---------- TEMA DARK: breu para ler, osso para provar, foto para respirar ---------- */ :root[data-tema="dark"] { --pagina: var(--breu); --superficie-a: var(--breu); --superficie-b: var(--osso); /* contraste a/b = 1,9:1 — perceptível */ --superficie-esc:var(--cream); --card: #23261E; --borda: rgba(216,168,99,.20); --texto-a: #F4F1EA; --texto-a-mudo: #B9B2A5; --texto-esc: var(--text); --texto-esc-mudo:var(--text-muted); --header-bg: rgba(12,13,10,.92); --header-txt: #F4F1EA; --header-borda: rgba(216,168,99,.18); --acento: var(--gold-light); } /* ============================== base ============================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.7; color: var(--texto-a); background: var(--pagina); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: var(--step-3); } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; } .wrap { width: min(1180px, 92vw); margin-inline: auto; } /* bloco estreito = medida de leitura do CONTEÚDO; o contêiner mantém a borda esquerda */ .wrap--narrow { width: min(1180px, 92vw); } .wrap--narrow > * { max-width: 62ch; } .wrap--narrow > .faq, .wrap--narrow > .quote { max-width: 68ch; } .skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--ink-deep); padding: 12px 20px; z-index: 999; } .skip:focus { left: 0; } /* rótulo de seção: vive na régua — fio de 1px que atravessa, rótulo embutido */ .eyebrow { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s4); font-family: var(--font-body); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-block-end: var(--s5); } .eyebrow::after { content: ""; height: 1px; background: var(--borda); } .lead { font-size: var(--step-lead); font-family: var(--font-body); font-weight: 300; line-height: 1.55; } .muted { color: var(--texto-a-mudo); } .fine { font-size: var(--step--1); color: var(--texto-a-mudo); } /* ============================== header ============================== */ .header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); border-block-end: 1px solid var(--header-borda); } .header__bar { display: flex; align-items: center; gap: var(--s5); padding-block: var(--s3); } .header__logo img { height: 40px; width: auto; } :root[data-tema="clean"] .header__logo img { filter: brightness(.3) saturate(1.5); } :root[data-tema="clean"] .section--ink { background: var(--cream); } :root[data-tema="clean"] .section--ink .quote--card { background: #FFFFFF; } .nav { display: flex; gap: var(--s5); margin-inline-start: auto; } .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-burger { display: none; } .nav a { font-size: .9375rem; color: var(--header-txt); opacity: .8; padding-block: 4px; border-block-end: 1px solid transparent; transition: all .25s; } .nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: var(--acento); border-color: var(--acento); } /* ============================== botões ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: .9375rem; padding: 16px 32px; border-radius: var(--radius); min-height: 52px; transition: all .3s cubic-bezier(.25,.46,.45,.94); border: 1px solid transparent; cursor: pointer; } /* CTA primário = WhatsApp (decisão do cliente, 03/09): verde da plataforma, com o glifo */ .btn--primary { background: var(--wa); color: #FFFFFF; } .btn--primary:hover { background: var(--wa-dark); box-shadow: 0 0 0 1px rgba(37,211,102,.5); } .btn--primary[href*="whatsapp.yepag.com/t/"]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.9C8.8 2.9 2.9 8.8 2.9 16c0 2.3.6 4.6 1.8 6.6L2.8 29.2l6.8-1.8c1.9 1.1 4.1 1.6 6.4 1.6 7.2 0 13.1-5.9 13.1-13.1S23.2 2.9 16 2.9zm0 23.9c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1.1 1.1-3.9-.3-.4c-1.1-1.7-1.6-3.7-1.6-5.8 0-6 4.9-10.9 10.9-10.9S26.9 10 26.9 16 22 26.8 16 26.8zm6-8.1c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.2 1.3 3.4c.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.9C8.8 2.9 2.9 8.8 2.9 16c0 2.3.6 4.6 1.8 6.6L2.8 29.2l6.8-1.8c1.9 1.1 4.1 1.6 6.4 1.6 7.2 0 13.1-5.9 13.1-13.1S23.2 2.9 16 2.9zm0 23.9c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1.1 1.1-3.9-.3-.4c-1.1-1.7-1.6-3.7-1.6-5.8 0-6 4.9-10.9 10.9-10.9S26.9 10 26.9 16 22 26.8 16 26.8zm6-8.1c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.2 1.3 3.4c.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E") center / contain no-repeat; } .btn--ghost { border-color: currentColor; color: var(--acento); background: transparent; } .btn--ghost:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); } .btn--sm { padding: 12px 22px; min-height: 44px; font-size: .875rem; } /* ============================== seções ============================== */ .section { padding-block: var(--s9); } .section--paper { background: var(--superficie-a); color: var(--texto-a); } .section--paper + .section--paper { padding-block-start: 0; } .section--ink { background: var(--superficie-b); color: var(--texto-a); } .section--hair-top { border-block-start: 1px solid var(--borda); } .section h2 + .lead, .section h2 + .muted { margin-block-start: var(--s4); } .section .muted + .muted { margin-block-start: var(--s4); } .section .btn { margin-block-start: var(--s5); } .section--paper p + p, .section--ink p + p { margin-block-start: var(--s4); } /* ---- hero ---- */ .hero { background: var(--superficie-esc); color: var(--texto-esc); padding-block: var(--s8); } :root[data-tema="clean"] .hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%); color: var(--text); } :root[data-tema="clean"] .hero .lead, :root[data-tema="clean"] .hero .fine { color: var(--text-muted); } :root[data-tema="clean"] .hero .btn--ghost, :root[data-tema="clean"] .hero__credencial { color: var(--gold-dark); } :root[data-tema="dark"] .hero { background: var(--breu); color: #F4F1EA; } .hero .lead { color: color-mix(in srgb, currentColor 82%, transparent); max-width: 54ch; margin-block-start: var(--s4); } .hero .fine { color: color-mix(in srgb, currentColor 62%, transparent); max-width: 54ch; } .hero .btn--ghost { color: var(--gold-light); } .hero__grid { display: grid; gap: var(--s7); grid-template-columns: 1.05fr .95fr; align-items: center; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s6) var(--s4); } /* credencial: pill, não rótulo de seção */ .hero__credencial { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; margin-block-end: var(--s5); border: 1px solid var(--borda); border-radius: 999px; font-size: .8125rem; letter-spacing: .04em; color: var(--gold-light); } /* H1 em dois níveis: o termo (sans, pequeno) e a tese (serifada, grande) */ .hero__h1 { max-width: 20ch; } .hero__h1-kicker { display: block; font-family: var(--font-body); font-weight: 500; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); letter-spacing: .06em; line-height: 1.4; color: var(--gold-light); margin-block-end: var(--s3); max-width: none; } .hero__fig { position: relative; margin: 0; } .hero__fig img { width: 100%; border-radius: var(--r-img); object-fit: cover; aspect-ratio: 4/5; object-position: center 30%; } .hero__stamp { position: absolute; left: var(--s5); bottom: var(--s5); background: rgba(12,13,10,.82); backdrop-filter: blur(8px); border: 1px solid rgba(216,168,99,.45); border-radius: var(--radius); padding: 12px 18px; color: #F4F1EA; } .hero__stamp b { display: block; font-family: var(--font-heading); font-size: 1.0625rem; } .hero__stamp span { font-size: .8125rem; color: var(--gold-light); letter-spacing: .06em; } .hero__stamp--caso b { font-family: var(--font-body); font-weight: 500; font-size: .9375rem; } .hero--simples { padding-block: var(--s8) var(--s7); } .hero--simples .wrap--narrow > * { max-width: 62ch; } /* ---- faixa de credenciais ---- */ .creds { background: var(--superficie-b); color: #F4F1EA; padding-block: var(--s6); border-block: 1px solid var(--borda); } :root[data-tema="clean"] .creds { background: #FFFFFF; color: var(--text); } :root[data-tema="clean"] .creds b { color: var(--gold-dark); } :root[data-tema="clean"] .creds span { color: var(--text-muted); } .creds ul { list-style: none; padding: 0; display: grid; gap: var(--s5); align-items: start; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .creds li { display: grid; grid-template-rows: auto 1fr; } .creds b { display: flex; align-items: flex-end; min-height: 2.4em; text-wrap: balance; font-family: var(--font-heading); font-size: clamp(1.15rem, 1.5vw, 1.6rem); font-weight: 500; color: var(--gold-light); margin-block-end: 4px; } .creds span { font-size: .9375rem; color: #B9B2A5; line-height: 1.5; white-space: nowrap; } /* ---- blocos editoriais: fichas com fio superior, sem caixa ---- */ .ed-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } @media (min-width: 900px) { .ed-grid { grid-template-columns: repeat(2, 1fr); } } .ed { border-block-start: 1px solid var(--borda); padding-block-start: var(--s5); } .ed h3 { margin-block: var(--s2) var(--s3); font-size: 1.3rem; } .ed p { color: var(--texto-a-mudo); font-size: var(--step--1); } .ed .eyebrow { margin-block-end: var(--s3); font-size: .75rem; } .ed .eyebrow::after { content: none; } /* ---- passos numerados: ficha + a marcação (anel na margem, fio descendo) ---- */ .steps { list-style: none; padding: 0; display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-block: var(--s7); } .step { position: relative; padding: var(--s5) 0 0 var(--s6); border-block-start: 1px solid var(--borda); } .step::before { content: ""; position: absolute; left: 0; top: calc(var(--s5) + .55em); width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; } .step::after { content: ""; position: absolute; left: 4px; top: calc(var(--s5) + .55em + 9px); width: 1px; height: calc(100% - var(--s5) - 3em); background: linear-gradient(180deg, rgba(216,168,99,.45), transparent); } .step b { display: block; font-family: var(--font-heading); font-size: 2.25rem; color: var(--acento); line-height: 1; margin-block-end: var(--s3); } .step h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; margin-block-end: var(--s2); } .step p { color: var(--texto-a-mudo); font-size: var(--step--1); } .steps--tres { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1023px) { .steps--tres { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } /* ---- citações e prova social ---- */ .quote { border-inline-start: 2px solid var(--gold); padding-inline-start: var(--s5); margin: var(--s6) 0; } .quote p { font-family: var(--font-heading); font-style: normal; font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.55; letter-spacing: 0; color: var(--texto-a); } .quote cite { display: block; margin-block-start: var(--s4); font-style: normal; font-size: var(--step--1); color: var(--acento); } /* avaliação de paciente: sans, não serifada — a serifada itálica é a voz do Dr. Gabriel */ .quote--card { display: flex; flex-direction: column; margin: 0; background: var(--card); border: 1px solid var(--borda); border-inline-start: 2px solid var(--gold); border-radius: var(--radius); padding: var(--s5) var(--s6); } .quote--card p { font-family: var(--font-body); font-style: normal; font-size: var(--step-0); line-height: 1.6; } .quote--card cite { margin-block-start: auto; padding-block-start: var(--s4); color: var(--texto-a); font-weight: 600; } .quote--card cite span { display: block; font-weight: 400; color: var(--texto-a-mudo); font-size: .8125rem; } .quote--card .fonte { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-a-mudo); margin-block-end: var(--s3); } .quote--card .fonte::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; } .grid { display: grid; gap: var(--s5); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--s6); } .quotes-col { display: grid; gap: var(--s4); } @media (max-width: 860px) { .grid--2 { grid-template-columns: 1fr; } } /* ---- prova social nas páginas de procedimento: foto + 3 avaliações ---- */ .prova-bloco { display: grid; gap: var(--s6); grid-template-columns: .8fr 1.2fr; align-items: start; } .prova-bloco__fig { margin: 0; position: sticky; top: 90px; } .prova-bloco__fig img { width: 100%; border-radius: var(--r-img); aspect-ratio: 4/5; object-fit: cover; } .prova-bloco__fig figcaption { margin-block-start: var(--s2); } .prova-bloco--solo { grid-template-columns: 1fr; } @media (max-width: 860px) { .prova-bloco { grid-template-columns: 1fr; } .prova-bloco__fig { position: static; } } /* ---- casos da casa: grade de antes/depois (o ativo que ninguém copia) ---- */ .casos { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-block: var(--s6) var(--s4); } .casos figure { margin: 0; position: relative; } .casos img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-img); } .casos figcaption { margin-block-start: var(--s2); font-size: .8125rem; color: var(--texto-a-mudo); } .casos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .casos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- análise: o mapa anotado em tamanho legível, full-bleed ---- */ .analise { margin-inline: calc(50% - 50vw); width: 100vw; background: var(--superficie-a); padding-block: var(--s8); border-block: 1px solid var(--borda); } .analise__in { width: min(1180px, 92vw); margin-inline: auto; display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } .analise__fig { margin: 0; } .analise__fig img { width: 100%; height: auto; border-radius: var(--r-img); } .analise__txt h2 { margin-block-end: var(--s4); } .analise__txt p { color: var(--texto-a-mudo); max-width: 48ch; } @media (max-width: 900px) { .analise__in { grid-template-columns: 1fr; } } /* ---- faixa-luz: a foto da clínica como terceira superfície ---- */ .faixa-luz { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; min-height: clamp(320px, 42vw, 560px); display: grid; align-items: end; overflow: hidden; } .faixa-luz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .faixa-luz figcaption { position: relative; z-index: 1; width: min(1180px, 92vw); margin-inline: auto; padding-block: var(--s7) var(--s6); color: #F4F1EA; } .faixa-luz figcaption::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw) 0 calc(50% - 50vw); background: linear-gradient(0deg, rgba(12,13,10,.9) 0%, rgba(12,13,10,0) 100%); z-index: -1; } .faixa-luz b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: var(--step-1); } .faixa-luz span { font-size: var(--step--1); color: #D9D3C6; } /* ---- duas frentes ---- */ .frentes { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-block: var(--s7); } .frente { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .frente__fig { aspect-ratio: 4/5; overflow: hidden; position: relative; } @media (max-width: 700px) { .frente__fig { aspect-ratio: 3/2; } } .frente__fig img { width: 100%; height: 100%; object-fit: cover; } .frente__fig::after { content: ""; position: absolute; left: 16px; bottom: 16px; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(12,13,10,.35); } .frente__body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; } .frente__body .fine a { color: var(--acento); } .frente__body .btn { margin-block-start: auto; align-self: flex-start; } /* ---- CTA intermediário ---- */ .cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); margin-block-start: var(--s7); padding: var(--s6) 0 0; border-block-start: 1px solid var(--borda); } .cta-inline p { color: var(--texto-a-mudo); max-width: 62ch; margin: 0; } .cta-inline .btn { margin: 0; flex: none; } .cta-inline .fine { flex-basis: 100%; margin: 0; font-size: .8125rem; } /* ---- FAQ ---- */ .faq { margin-block-start: var(--s6); } .faq details { border-block-end: 1px solid var(--borda); } .faq summary { cursor: pointer; list-style: none; padding: var(--s5) 40px var(--s5) 0; position: relative; font-weight: 500; font-size: 1.0625rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--acento); font-size: 1.5rem; font-weight: 300; } .faq details[open] summary::after { content: "−"; } .faq__a p { color: var(--texto-a-mudo); padding-block-end: var(--s5); } /* ---- ficha de contato (rótulo | valor), sem caixa ---- */ .ficha { display: grid; gap: 0; margin-block: var(--s6); max-width: 60ch; } .ficha div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s4); padding-block: var(--s4); border-block-start: 1px solid var(--borda); } .ficha div:last-child { border-block-end: 1px solid var(--borda); } .ficha dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); padding-block-start: 4px; } .ficha dd { margin: 0; color: var(--texto-a); } .ficha dd .fine { display: block; } @media (max-width: 640px) { .ficha div { grid-template-columns: 1fr; gap: 4px; } } /* ---- mapa (facade com foto da entrada) ---- */ .mapa { position: relative; min-height: 420px; border-radius: var(--radius-lg); cursor: pointer; display: grid; place-items: end start; padding: var(--s6); border: 1px solid var(--borda); overflow: hidden; background: var(--superficie-b) center / cover no-repeat; } .mapa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,13,10,.85), rgba(12,13,10,.15)); } .mapa p { position: relative; display: flex; flex-direction: column; gap: 6px; color: #F4F1EA; } .mapa b { font-family: var(--font-heading); font-size: 1.25rem; } .mapa span { font-size: .9375rem; color: #D9D3C6; } .mapa__cta { color: var(--gold-light) !important; font-weight: 500; border-block-end: 1px solid currentColor; align-self: flex-start; } .mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } :root[data-tema="clean"] .mapa { background-color: #FFFFFF; } /* ---- CTA final: superfície da prova, alinhado à esquerda, com a marcação ---- */ .cta { background: var(--superficie-b); color: var(--texto-a); position: relative; border-block: 1px solid rgba(216,168,99,.28); } .cta::before { content: ""; position: absolute; left: max(4vw, calc(50% - 590px)); top: 0; width: 1px; height: var(--s7); background: linear-gradient(180deg, var(--gold), transparent); } .cta .wrap { display: grid; gap: var(--s4); } .cta .wrap > * { max-width: 62ch; } .cta h2 { margin: 0; } .cta .fine { color: var(--texto-a-mudo); } .cta .cta__actions + .fine { max-width: none; white-space: nowrap; } @media (max-width: 860px) { .cta .cta__actions + .fine { white-space: normal; } } .cta__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-block: var(--s3) 0; } :root[data-tema="clean"] .cta { background: var(--ink-deep); color: #EDEBE3; } :root[data-tema="clean"] .cta .fine { color: #B9B2A5; } /* ---- rodapé ---- */ .footer { background: var(--breu); color: #B9B2A5; padding-block: var(--s8) 0; border-block-start: 1px solid var(--borda); } .footer__grid { display: grid; gap: var(--s6); grid-template-columns: 1.4fr 1.2fr repeat(3, .9fr); } .footer h2 { font-family: var(--font-body); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin-block-end: var(--s4); } .footer ul { list-style: none; padding: 0; display: grid; gap: 8px; } .footer a:hover { color: var(--gold-light); } .footer img { height: 44px; width: auto; margin-block-end: var(--s4); } .footer .fine { color: #B9B2A5; } .footer__social { display: flex; gap: var(--s4); margin-block-start: var(--s4); } .footer__end { font-style: normal; display: grid; gap: 12px; font-size: .9375rem; line-height: 1.55; } .footer__end p { margin: 0; } .footer__end a { color: var(--gold-light); } .footer__hora { white-space: nowrap; } .footer__social a { color: var(--gold-light); font-size: .875rem; border-block-end: 1px solid transparent; } .footer__social a:hover { border-color: currentColor; } .footer__legal { margin-block-start: var(--s7); border-block-start: 1px solid rgba(255,255,255,.08); padding-block: var(--s5); font-size: .8125rem; } .footer__legal p { margin-block-end: 4px; } .footer__legal a { color: var(--gold-light); } /* ---- depoimentos em vídeo: poster desenhado, player só depois do toque ---- */ .depo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); justify-items: center; margin-block: var(--s6) var(--s4); max-width: 900px; margin-inline: auto; } .depo { margin: 0; width: min(100%, 400px); } .depo__play { all: unset; display: block; position: relative; cursor: pointer; width: 100%; } .depo__play img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--r-img); } .depo__anel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border: 1px solid var(--gold); border-radius: 50%; background: rgba(12,13,10,.45); backdrop-filter: blur(2px); display: grid; place-items: center; transition: transform .25s; } .depo__anel::after { content: ""; border-inline-start: 12px solid var(--gold-light); border-block: 8px solid transparent; margin-inline-start: 4px; } .depo__play:hover .depo__anel { transform: scale(1.06); } .depo__play:focus-visible .depo__anel { outline: 2px solid var(--gold-light); outline-offset: 4px; } .depo video { width: 100%; height: auto; aspect-ratio: 9/16; border-radius: var(--r-img); background: #000; display: block; } .depo figcaption { margin-block-start: var(--s3); } .depo figcaption q { font-family: var(--font-heading); font-style: normal; font-size: 1.125rem; line-height: 1.45; display: block; color: var(--texto-a); } .depo figcaption span { font-size: .8125rem; color: var(--texto-a-mudo); } /* nas páginas de procedimento: vídeo ao lado do texto, nunca sozinho no meio */ .depo-split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s7); align-items: center; margin-block-start: var(--s6); } .depo-split .depo { width: 100%; } @media (max-width: 860px) { .depo-grid, .depo-split { grid-template-columns: 1fr; } } /* ---- galeria da clínica (/sobre/) ---- */ .casa-txt p { max-width: 68ch; } .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-block-start: var(--s6); } .galeria figure { margin: 0; } .galeria img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-img); } .galeria figcaption { margin-block-start: var(--s2); } @media (max-width: 860px) { .galeria { grid-template-columns: 1fr; } } /* ---- barra fixa mobile + bolha única no desktop ---- */ .dock { display: none; } .tel-float { display: none; } .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 98; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); border: 0; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .25s ease; } .wa-float svg { width: 30px; height: 30px; fill: #FFFFFF; } .wa-float:hover { transform: scale(1.06); } /* ============================== a marcação ============================== */ /* 1. selo do hero: o anel pousa na foto, o fio desce e entrega o rótulo */ .hero__stamp::before { content: ""; position: absolute; left: 26px; top: -46px; width: 11px; height: 11px; border: 1px solid var(--gold); border-radius: 50%; background: rgba(12,13,10,.35); } .hero__stamp::after { content: ""; position: absolute; left: 31px; top: -35px; width: 1px; height: 35px; background: linear-gradient(180deg, var(--gold), rgba(216,168,99,.25)); } /* 2. credenciais: anel + fio antes do número */ .creds li { position: relative; padding-inline-start: 18px; } .creds li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; } .creds li::after { content: ""; position: absolute; left: 3px; top: 17px; width: 1px; height: calc(100% - 20px); background: rgba(216,168,99,.28); } /* 3 e 4: passos (.step::before/::after) e casos (.casos figure::after) — acima */ /* ============================== responsivo ============================== */ @media (max-width: 900px) { .hero { padding-block: var(--s6) var(--s7); } .hero__grid { grid-template-columns: 1fr; gap: var(--s5); } /* a foto abre a dobra, curta; o texto vem logo abaixo */ .hero__fig { order: 0; } .hero__grid > div { order: 1; } .hero__fig img { aspect-ratio: auto; height: 34vh; max-height: 320px; object-position: center top; } /* antes/depois é composição: nunca recortar — no celular mostra inteiro */ .hero__fig--caso img { height: auto; max-height: none; aspect-ratio: 4/5; object-position: center; } .hero__stamp { left: var(--s4); bottom: var(--s4); padding: 8px 12px; } .hero__h1 { max-width: none; } .footer__grid { grid-template-columns: 1fr 1fr; } .header__bar { flex-wrap: wrap; gap: var(--s3); } .nav-burger { display: block; width: 46px; height: 46px; margin-inline-start: auto; cursor: pointer; border: 1px solid currentColor; border-radius: var(--radius); position: relative; color: var(--header-txt); } .nav-burger span, .nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .25s; } .nav-burger span { top: 22px; } .nav-burger::before { top: 16px; } .nav-burger::after { top: 28px; } .nav-toggle:checked ~ .nav-burger span { opacity: 0; } .nav-toggle:checked ~ .nav-burger::before { transform: translateY(6px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger::after { transform: translateY(-6px) rotate(-45deg); } .nav { display: none; flex-direction: column; width: 100%; gap: 0; padding-block-end: var(--s3); } .nav-toggle:checked ~ .nav { display: flex; } .nav a { padding: 14px 2px; min-height: 46px; display: flex; align-items: center; border-block-end: 1px solid var(--header-borda); border-inline: 0; } .header__bar > .btn--primary { order: 2; } .nav { order: 4; } } @media (max-width: 860px) { .section { padding-block: var(--s8); } .cta-inline { flex-direction: column; align-items: flex-start; } /* barra fixa desde y=0; os flutuantes saem — dois floats no mobile nunca se justificam */ .wa-float { display: none !important; } .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(12,13,10,.97); border-block-start: 1px solid rgba(216,168,99,.3); } .dock[hidden] { display: none; } .dock a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--radius); font-weight: 600; font-size: .875rem; } .dock__call { flex: 0 0 104px; border: 1px solid var(--gold); color: var(--gold-light); } .dock__wa { background: var(--wa); color: #FFFFFF; } body.com-barra { padding-block-end: 76px; } .fine, .eyebrow, cite, .creds span, .step p, .ed p, .footer p, .footer a, .faq__a p, .mapa span, .nav a { font-size: 15px !important; } } @media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } .hero__actions .btn, .cta__actions .btn { width: 100%; } .eyebrow { font-size: .75rem; letter-spacing: .1em; } .hero__stamp::before, .hero__stamp::after { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---- complementos ---- */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ed h2 { font-size: 1.3rem; margin-block: var(--s2) var(--s3); scroll-margin-top: 90px; } .areas-intro { max-width: 62ch; margin-block: var(--s7) var(--s5); } #faq, #avaliacao { scroll-margin-top: 80px; } /* ---- quebras de linha: sem palavra órfã na última linha ---- pretty: parágrafos e itens evitam a última linha com uma palavra só. balance: textos curtos (legendas, micros, citações) quebram em linhas de tamanho parecido em vez de "linha cheia + sobra". */ p, li, dd, summary { text-wrap: pretty; } .fine, figcaption, cite, .hero__credencial, .eyebrow, .lead, .cta .fine, .cta-inline p, .casos figcaption, .depo figcaption, .quote p, .quote--card p, .creds span, .step h3, .step p, .ed h3, .ed p, .faq__a p, .muted, .analise__txt p, .frente__body p, .btn, .hero .fine, .footer__end p, .ficha dd { text-wrap: balance; } .btn { text-align: center; } .section h2, .analise__txt h2 { max-width: 24ch; } /* celular: parágrafos passam de 6 linhas e o balance é ignorado; pretty evita a palavra órfã */ @media (max-width: 860px) { .ed p, .faq__a p, .muted, .lead, .step p, .analise__txt p, .frente__body p, .quote p { text-wrap: pretty; } } /* cabeçalho no celular: o botão precisa caber ao lado do menu; o glifo sai só aqui */ @media (max-width: 900px) { .header__bar > .btn--sm::before { display: none; } .header__bar > .btn--sm { padding-inline: 16px; } }