/* ============================================================= Modelos de referência · motor partilhado ------------------------------------------------------------- Um único motor estrutural — grid, escala, componentes, ritmo de conversão — servindo quatro identidades diferentes. Cada modelo declara um "brand pack" no : paleta, tipo de display, raio e variante de composição. Nada de ConnectVia entra aqui: o site do cliente é do cliente. O que a ConnectVia leva para dentro é o método, não a cor. É também a prova de que a arquitetura de tokens é temável: as regras abaixo não conhecem nenhuma cor, só papéis. ============================================================= */ /* ---------- faces de display, uma por especialidade ---------- */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/archivo-lat.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/bodoni-lat.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap; src:url('../fonts/fraunces-lat.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Syne';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/syne-lat.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ---------- valores que nenhum pack muda ---------- */ :root{ --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --fs-hero:clamp(38px,6.4vw,84px); --fs-h2:clamp(28px,3.8vw,50px); --fs-h3:clamp(19px,1.9vw,23px); --fs-lede:clamp(16.5px,1.6vw,20px); --fs-body:16.5px; --fs-small:14.5px; --fs-label:11.5px; --pad-x:clamp(20px,5vw,72px); --sec-y:clamp(64px,7.5vw,120px); --gap:clamp(16px,1.9vw,28px); --content:1200px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --ease:cubic-bezier(.16,.84,.44,1); --t:220ms; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} p{margin:0;max-width:62ch} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)} .wrap{max-width:var(--content);margin:0 auto} .section{padding:var(--sec-y) var(--pad-x)} .section--alt{background:var(--ground-2)} .section--ink{background:var(--ink);color:var(--ground)} .section--ink .lede,.section--ink .small{color:var(--on-ink-2)} .section--ink .stats{border-color:rgba(255,255,255,.22)} .section--ink .label{color:var(--accent-on-ink)} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)} .grid>*{min-width:0} @media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}.grid>*{grid-column:1/-1 !important}} /* ---------- tipografia ---------- */ h1,h2,h3,.display{ font-family:var(--font-display); font-weight:var(--fw-display); font-variation-settings:var(--vf-display); letter-spacing:var(--ls-display); line-height:1.05;margin:0;text-wrap:balance; } h1{font-size:var(--fs-hero);max-width:16ch} h2{font-size:var(--fs-h2);max-width:18ch} h3{font-size:var(--fs-h3);line-height:1.2} .lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2);max-width:50ch;margin:0} .small{font-size:var(--fs-small);color:var(--ink-2);margin:0} .label{ display:block;font-size:var(--fs-label);font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink); } .num{font-variant-numeric:tabular-nums} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; height:50px;padding:0 26px;border:0;border-radius:var(--r-btn); font-family:var(--font-ui);font-weight:600;font-size:15px; text-decoration:none;cursor:pointer;white-space:nowrap; background:var(--accent);color:var(--accent-on); transition:transform 140ms var(--ease),background-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .btn:hover{transform:translateY(-1px);background:var(--accent-hover)} .btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--line-2)} .btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px currentColor} .btn--on-ink{background:var(--accent-on-ink);color:var(--ink)} .btn--on-ink:hover{background:var(--ground)} @media (max-width:640px){.btn{width:100%}} /* ---------- header ---------- */ .hdr{ position:sticky;top:0;z-index:50; background:var(--ground); border-bottom:1px solid var(--line); } .hdr__in{ max-width:var(--content);margin:0 auto;height:70px; padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:var(--s5); } .brand{ font-family:var(--font-display);font-weight:var(--fw-display); font-variation-settings:var(--vf-display); font-size:21px;letter-spacing:var(--ls-brand);text-decoration:none;line-height:1; } .brand span{color:var(--accent-ink)} .hdr nav{display:flex;gap:clamp(16px,2vw,28px);align-items:center} .hdr nav a{font-size:15px;text-decoration:none;opacity:.78;transition:opacity var(--t)} .hdr nav a:hover{opacity:1} .hdr .btn{height:42px;padding:0 20px;font-size:14px;width:auto} @media (max-width:860px){.hdr nav{display:none}} @media (max-width:640px){.hdr .btn{width:auto}} /* ---------- hero ---------- */ .hero{padding-top:clamp(48px,6vw,88px)} .hero__grid{align-items:center} .hero__body{grid-column:1/7} .hero__media{grid-column:8/13} .hero--centred .hero__body{grid-column:3/11;text-align:center} .hero--centred h1,.hero--centred .lede{margin-left:auto;margin-right:auto} .hero--centred .hero__cta{justify-content:center} .hero--centred .hero__media{grid-column:1/13;margin-top:var(--s8)} /* à largura toda, o retrato 4:5 vira um bloco de 1200×1500 e engole a página — no herói centrado a moldura é panorâmica */ .hero--centred .hero__media .ph{aspect-ratio:21/9} .hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)} .hero__note{margin-top:var(--s5);font-size:14px;color:var(--ink-2)} /* moldura de imagem: sem fotografia de produção, campo chapado com a legenda do enquadramento — nunca imagem de banco */ .ph{ position:relative;overflow:hidden;border-radius:var(--r); background:var(--ph-bg); display:flex;align-items:flex-end;padding:14px; } .ph--portrait{aspect-ratio:4/5} .ph--wide{aspect-ratio:16/10} .ph--square{aspect-ratio:1} .ph span{ font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ph-ink); } /* ---------- tratamentos ---------- */ .treat{border-top:1px solid var(--line)} .treat li{ display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto; gap:var(--gap);align-items:baseline; padding:var(--s6) 0;border-bottom:1px solid var(--line); } .treat li>*{min-width:0} .treat .price{font-weight:600;white-space:nowrap;color:var(--accent-ink)} @media (max-width:860px){ .treat li{grid-template-columns:minmax(0,1fr);gap:var(--s3)} } /* ---------- equipa ---------- */ .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap)} .team>*{min-width:0} .team h3{margin-top:var(--s4)} .team p{margin-top:4px} /* ---------- prova ---------- */ .quote{ font-family:var(--font-display);font-weight:var(--fw-display); font-variation-settings:var(--vf-display); font-size:clamp(21px,2.6vw,32px);line-height:1.3;letter-spacing:var(--ls-display); max-width:22ch;margin:0; } .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap); border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s7)} .stats>*{min-width:0} .stat__v{ font-family:var(--font-display);font-weight:var(--fw-display); font-variation-settings:var(--vf-display); font-size:clamp(28px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums; } .stat__k{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase; margin-top:8px;opacity:.7} /* ---------- marcação ---------- */ .book__grid{align-items:start} .book__form{grid-column:1/7} .book__info{grid-column:8/13} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s5)} .field span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7} .field input,.field select{ height:50px;padding:0 14px;border-radius:var(--r); border:1px solid var(--line-2);background:var(--ground);color:var(--ink); transition:border-color var(--t) var(--ease); } .field input:focus,.field select:focus{outline:none;border-color:var(--accent)} .field input:focus-visible,.field select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .hours{border-top:1px solid var(--line)} .hours li{display:flex;justify-content:space-between;gap:var(--s4); padding:11px 0;border-bottom:1px solid var(--line);font-size:15px} /* ---------- footer ---------- */ .ftr{padding:var(--s8) var(--pad-x) var(--s6);background:var(--ink);color:var(--ground)} .ftr__in{max-width:var(--content);margin:0 auto; display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s7)} .ftr__in>*{min-width:0} /* o rodapé assenta em --ink: o rótulo tem de usar o acento da versão escura, não o de fundo claro */ .ftr .label{color:var(--accent-on-ink)} .ftr a{text-decoration:none;opacity:.75} .ftr a:hover{opacity:1} .ftr li{padding:3px 0;font-size:14.5px} .ftr__base{ max-width:var(--content);margin:var(--s7) auto 0;padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.22); display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap; font-size:13px;opacity:.65; } /* ---------- faixa de retorno ao site da agência ---------- O modelo é uma peça de venda da ConnectVia, e tem de dizer o que é sem se disfarçar de site real de uma clínica que não existe. */ .demobar{ position:relative;z-index:60; background:#1E1815;color:#F1EBE1; font-family:'Instrument Sans',sans-serif;font-size:13px;line-height:1.5; padding:10px clamp(20px,5vw,72px); display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap; } .demobar b{color:#DCC8A4;font-weight:600} /* dentro da página de modelos a moldura já diz o que é aquilo, e o aviso repetido só rouba altura ao modelo. Fora dela — modelo aberto sozinho — continua a aparecer, que é quando faz falta. */ [data-embedded] .demobar{display:none} .demobar a{color:#F1EBE1;text-underline-offset:.2em}