/* ============================================================ WORD NERDS — Protótipo de design (editorial newspaper minimalism) Toggle A/B de tipografia + toggle PT/EN no painel de validação. Cores de destaque marcadas como PLACEHOLDER (--accent / --ink-deep) até a paleta oficial da marca chegar do Drive. ============================================================ */ :root{ /* Paleta oficial Word Nerds (kit de identidade da marca) */ --bone:#FAF9F5; /* Seashell White — canvas */ --bone-2:#F1EFE8; /* seashell levemente mais fechado (superficies) */ --navy:#142A57; /* Deep Navy — primaria */ --ink:#142A57; /* tinta = navy (titulos / texto forte) */ --ink-soft:#28344F; /* navy levemente elevado (corpo de texto) */ --muted:#6A6C6F; /* Graphite Grey — secundario / rotulos */ --hair:rgba(20,42,87,0.18); --hair-soft:rgba(20,42,87,0.10); --ink-deep:#142A57; /* banda escura = Deep Navy */ --sage:#94AE88; /* Muted Sage Green — banda calma */ --soft:#EEF0EA; /* sage bem palido (fundos sutis) */ --accent:#EB7635; /* Bonfire Orange — acento pontual */ --accent-soft:#F3996A; /* laranja suavizado (sobre navy) */ --maxw:1200px; --read:680px; /* Tipografia definida pela cliente (PDF) — "manchete de jornal" */ --font-display:'Vidaloka', Georgia, 'Times New Roman', serif; /* títulos e subtítulos */ --font-body:'Spectral', Georgia, 'Times New Roman', serif; /* corpo do texto */ --font-label:'Alegreya SC', Georgia, serif; /* menu / rótulos / CTA */ /* Escala exata da cliente (PDF): Headers 24-28 · SubHeader 16-18 · Spectral 14 · Alegreya SC 14 --fs-scale escala TODA a hierarquia proporcionalmente (seletor "Tamanho" no painel de protótipo). 1 = tamanho exato da cliente (corpo 14). */ --fs-scale:1; --fs-hero:calc(1.75rem * var(--fs-scale)); /* manchete (Header 24-28 → 28px) */ --fs-h:calc(1.5rem * var(--fs-scale)); /* títulos de seção (Header 24px) */ --fs-sub:calc(1.125rem * var(--fs-scale)); /* títulos de accordion (18px) */ --fs-tag:calc(1rem * var(--fs-scale)); /* taglines / subheads / hero-sub (16px) */ --fs-body:calc(.875rem * var(--fs-scale)); /* corpo Spectral (14px) */ --fs-label:calc(.875rem * var(--fs-scale)); /* Alegreya SC (14px) — menu/rótulos/CTA */ --fs-mini:calc(.8125rem * var(--fs-scale)); /* itens de lista dos accordions (13px) */ } /* 3 tamanhos proporcionais do protótipo (corpo ≈ 14 · 16 · 18) — "Compacto" é o spec da cliente */ html[data-fs="m"]{--fs-scale:1.143;} /* corpo ~16 */ html[data-fs="g"]{--fs-scale:1.286;} /* corpo ~18 */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} body{ background:var(--bone); color:var(--ink); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.68; overflow-x:hidden; } /* ---------- Idioma: mostra/oculta por atributo data-lang dos blocos duplicados ---------- */ /* :not(body) evita esconder o proprio , que carrega data-lang apenas como estado */ [data-lang]:not(body){display:none;} body[data-lang="pt"] [data-lang="pt"]{display:revert;} body[data-lang="en"] [data-lang="en"]{display:revert;} /* ---------- Helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px);} .read{max-width:var(--read);} .reveal{opacity:0;transform:translateY(18px);filter:blur(8px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);} .reveal.in{opacity:1;transform:none;filter:blur(0);} /* split: o container fica presente; as palavras animam (blur por palavra) */ .reveal.split{opacity:1;transform:none;filter:none;} .split .word{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(18px) scale(1.03); transition:opacity .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);} .split .word.in{opacity:1;filter:blur(0);transform:none;} .label{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--muted); font-weight:500; } .brk{color:var(--accent);font-family:var(--font-display);font-weight:400;} .sec-num{font-family:var(--font-label);color:var(--accent);letter-spacing:.12em;font-size:.74rem;} h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:-.01em;color:var(--ink);} .serif-quote{font-family:var(--font-display);} .nowrap{white-space:nowrap;} .convo .product{color:var(--navy);font-family:var(--font-display);font-style:normal;} a{color:inherit;} .link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair); transition:border-color .25s, color .25s; } .link:hover{color:var(--accent);border-color:var(--accent);} /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-label); text-transform:uppercase;letter-spacing:.12em;font-size:.8rem; padding:16px 28px; background:var(--ink);color:var(--bone); border:1px solid var(--ink); border-radius:2px; text-decoration:none;cursor:pointer; transition:background .25s, transform .12s, color .25s; } .btn:hover{background:var(--ink-soft);} .btn:active{transform:scale(.985);} .btn--ghost{ background:transparent;color:var(--ink);border-color:var(--ink); } .btn--ghost:hover{background:var(--ink);color:var(--bone);} .btn--light{background:var(--bone);color:var(--ink);border-color:var(--bone);} .btn--light:hover{background:transparent;color:var(--bone);border-color:var(--bone);} .btn .arrow{font-family:var(--font-display);font-size:1.05em;line-height:0;} /* ============================================================ HEADER / MASTHEAD ============================================================ */ .masthead{ position:sticky;top:0;z-index:60; background:rgba(250,249,245,.86); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--hair); } .masthead-inner{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:18px 32px;max-width:var(--maxw);margin:0 auto; } .logo{ display:inline-flex;align-items:baseline;gap:.35em; font-family:var(--font-display);font-size:1.5rem;letter-spacing:.01em; text-decoration:none;color:var(--ink);white-space:nowrap; } .logo .brk{font-size:1.25em;} .logo small{ display:block;font-family:var(--font-label);text-transform:uppercase; letter-spacing:.22em;font-size:.52rem;color:var(--muted);margin-top:2px; } .logo img{height:54px;width:auto;display:block;} nav.main{display:flex;gap:26px;align-items:center;} nav.main a{ font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em; font-size:.74rem;color:var(--ink-soft);text-decoration:none; padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s; } nav.main a:hover{color:var(--accent);border-color:var(--accent);} .social{display:flex;gap:14px;align-items:center;} .social a{color:var(--muted);transition:color .25s, transform .2s;display:inline-flex;} .social a:hover{color:var(--accent);transform:translateY(-1px);} .social svg{width:18px;height:18px;display:block;} .menu-toggle{display:none;} /* ============================================================ HERO ============================================================ */ .hero{padding:44px 0 56px;position:relative;overflow:hidden;} .hero::before{ /* respiro de luz quente, sutil */ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 50% at 78% 18%, rgba(235,118,53,.06), transparent 70%); } .hero-grid{ position:relative;display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:center; } .hero-kicker{margin-bottom:26px;display:flex;align-items:center;gap:14px;} .hero-rule{height:1px;background:var(--hair);flex:1;} .hero h1{ font-size:clamp(2.5rem,5.6vw,4.6rem); margin-bottom:28px; } .hero .sub{color:var(--ink-soft);max-width:36em;margin-bottom:24px;line-height:1.62;} .hero-subhead{font-family:var(--font-display);font-size:var(--fs-sub);color:var(--ink);line-height:1.35;margin-bottom:14px;max-width:30em;} .hero .reassure{ font-family:var(--font-display);font-style:italic;color:var(--accent); font-size:1.18rem;margin-bottom:36px; } body[data-type="b"] .hero .reassure{font-style:normal;} .hero-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;} /* moldura de retrato (placeholder foto #31) */ .portrait{ position:relative;aspect-ratio:4/5;border:1px solid var(--hair); background:var(--bone-2);overflow:hidden; } .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;} .portrait::after{ /* moldura interna fina */ content:"";position:absolute;inset:10px;border:1px solid rgba(250,249,245,.55);pointer-events:none;z-index:1; } .portrait .cap{ position:absolute;left:0;right:0;bottom:0;z-index:2; font-family:var(--font-label);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem; color:var(--bone);background:linear-gradient(transparent, rgba(20,42,87,.6)); padding:30px 10px 12px;text-align:center; } /* ============================================================ BLOCO DE CONVERSAÇÃO (aside editorial) ============================================================ */ .convo{background:#6A6C6F;color:var(--bone);padding:66px 0;position:relative;overflow:hidden;} .convo-card{position:relative;padding:26px 62px;} .convo-mark{display:none;} /* V3 Ajuste 3: apenas os colchetes LARANJA — diagonal (abertura topo-esquerda + fechamento base-direita, meia altura) */ .convo-brk{position:absolute;width:18px;height:130px;max-height:34%;border:1.7px solid var(--accent);pointer-events:none;} .convo-brk--open{top:-2px;left:6px;border-right:0;} .convo-brk--close{bottom:-2px;right:6px;border-left:0;} .convo-card h3{margin-bottom:14px;color:var(--bone);} .convo-card p{color:rgba(250,249,245,.9);margin-bottom:20px;} .convo .product{color:#fff;} .convo-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:8px;} .convo-foot .btn--ghost{color:var(--bone);border-color:var(--bone);} .convo-foot .btn--ghost:hover{background:var(--bone);color:#6A6C6F;} .convo-closing{font-family:var(--font-display);font-style:italic;color:rgba(250,249,245,.75);} /* ============================================================ SEÇÕES (genérico) ============================================================ */ section.block{padding:clamp(64px,9vw,104px) 0;} .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px;} .sec-title{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:8px 0 26px;} .sec-intro{color:var(--ink-soft);font-size:1.12rem;max-width:40em;line-height:1.66;} .sec-transition{font-family:var(--font-display);font-size:1.25rem;color:var(--ink);margin-top:30px;} body[data-type="b"] .sec-transition{letter-spacing:0;} /* ---------- Accordion de serviços ---------- */ .services-list{margin-top:40px;border-top:1px solid var(--hair);} .acc{border-bottom:1px solid var(--hair);} .acc-head{ width:100%;background:none;border:0;cursor:pointer;text-align:left; display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:baseline; padding:30px 6px;color:var(--ink);transition:padding .3s; } .acc-head:hover{padding-left:14px;} .acc-idx{font-family:var(--font-label);color:var(--accent);font-size:.82rem;letter-spacing:.1em;} .acc-titles{display:flex;flex-direction:column;gap:7px;} .acc-title{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.12;} .acc-quote{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted);} .acc-sign{ font-family:var(--font-display);font-size:1.7rem;color:var(--accent);line-height:1; width:1.2em;text-align:center;transition:transform .35s cubic-bezier(.16,1,.3,1); } .acc.open .acc-sign{transform:rotate(45deg);} .acc-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1);} .acc-body-inner{padding:0 6px 36px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;} .acc-desc{color:var(--ink-soft);font-size:1.06rem;line-height:1.66;} .acc-list{list-style:none;display:flex;flex-direction:column;gap:0;} .acc-list li{ padding:12px 0;border-bottom:1px solid var(--hair-soft); font-size:var(--fs-mini);color:var(--ink);display:flex;gap:12px;align-items:baseline;line-height:1.5; } .acc-list li::before{content:"—";color:var(--accent);font-family:var(--font-display);} .acc-list li:last-child{border-bottom:0;} /* ---------- Banda escura de destaque (transição serviços) ---------- */ .band-dark{ background:var(--sage);color:var(--navy);position:relative;overflow:hidden; } .band-dark::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(55% 60% at 18% 18%, rgba(250,249,245,.40), transparent 70%); } .band-dark .wrap{position:relative;padding-top:96px;padding-bottom:96px;text-align:center;} .band-dark .brk{color:var(--navy);} .band-dark .label{color:rgba(20,42,87,.62);} .band-dark .big{ font-family:var(--font-display);font-size:calc(1.55rem * var(--fs-scale));line-height:1.26; max-width:24em;margin:0 auto 16px;color:var(--navy); } .band-dark .big:last-child{margin-bottom:0;} .band-dark .big em{color:var(--navy);font-style:italic;} /* parágrafo do meio da banda = corpo Spectral 14 (as linhas de ênfase ficam Vidaloka Bold 16) */ .band-dark .big.band-note{font-family:var(--font-body);font-weight:400;font-size:calc(1.15rem * var(--fs-scale));line-height:1.5;max-width:34em;} /* ---------- Como Trabalhamos — texto à ESQUERDA + imagem à DIREITA (V3 Ajuste 5a: espelha o "Sobre a WN", que é imagem-esquerda/texto-direita) ---------- */ .how-layout{display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:start;} .how-aside{position:sticky;top:96px;align-self:start;} .how-col{margin-bottom:40px;} .how-col:last-child{margin-bottom:0;} .how-title{font-family:var(--font-display);font-size:var(--fs-h);font-weight:700;line-height:1.18;margin-bottom:20px;max-width:20em;color:var(--ink);} .how-col p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.78;margin-bottom:16px;} .how-col p:last-child{margin-bottom:0;} .how-portrait .img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--muted);padding:0 18px;line-height:1.9;} /* ---------- Sobre ---------- */ .about{background:var(--bone-2);} .about-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;} .about-body p{color:var(--ink-soft);line-height:1.74;margin-bottom:18px;} .about-body > p:first-of-type{font-size:var(--fs-sub);color:var(--ink);} .about-body h3{font-family:var(--font-display);color:var(--ink);margin:32px 0 14px;} .about-body .about-close{font-family:var(--font-display);color:var(--navy);font-size:var(--fs-h);margin-top:18px;line-height:1.2;} .about-aside{position:sticky;top:96px;align-self:start;} .about-aside .label{white-space:nowrap;letter-spacing:.05em;} .about-aside .sec-head{margin-bottom:20px;} /* ---------- Depoimentos ---------- */ .testi-cards{max-width:1000px;margin:40px auto 0;display:flex;flex-direction:column;gap:clamp(40px,6vw,64px);} .testi-card{display:grid;grid-template-columns:240px 1fr;gap:50px;align-items:center;} .testi-card.no-photo{grid-template-columns:1fr;max-width:680px;margin:0 auto;} .testi-portrait{position:relative;aspect-ratio:3/4;border:1px solid var(--hair);background:var(--bone-2);overflow:hidden;} .testi-portrait .testi-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.6rem;color:var(--accent);background:var(--bone-2);} .testi-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;} .testi-portrait::after{content:"";position:absolute;inset:8px;border:1px solid rgba(250,249,245,.5);pointer-events:none;} .testi-body .qmark{font-family:var(--font-display);font-size:3rem;color:var(--accent);line-height:.4;opacity:.5;display:block;margin-bottom:8px;} .testi-body blockquote{font-family:var(--font-display);font-size:1.12rem;line-height:1.55;color:var(--ink);margin:0 0 22px;} .testi-body blockquote p{margin-bottom:14px;} .testi-body blockquote p:last-child{margin-bottom:0;} .testi-body cite{font-style:normal;display:block;} .testi-body .cite-name{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--ink);} .testi-body .cite-firm{display:block;margin-top:6px;color:var(--muted);font-size:.95rem;} /* ---------- Reflexões & Recursos ---------- */ .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--hair);} .res-card{ padding:38px 30px;border-right:1px solid var(--hair);text-decoration:none;color:var(--ink); display:flex;flex-direction:column;gap:12px;min-height:230px;transition:background .3s; } .res-card:last-child{border-right:0;} .res-card:hover{background:var(--bone-2);} .res-kicker{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--accent);} .res-card h3{font-size:1.3rem;} .res-card p{color:var(--muted);font-size:.96rem;margin-top:auto;} .res-card .go{font-family:var(--font-display);color:var(--accent);font-size:1.1rem;} .res-soon{margin-top:40px;padding:46px 32px;border:1px dashed var(--hair);text-align:center;color:var(--muted);font-family:var(--font-display);font-size:1.18rem;} /* ---------- Contato ---------- */ .contact{background:var(--ink-deep);color:var(--bone);} .contact .wrap{position:relative;} .contact .label{color:rgba(247,245,239,.6);} .contact h2{color:var(--bone);font-size:clamp(2rem,3.8vw,3.1rem);max-width:16em;margin:20px 0 26px;} .contact .lede{color:rgba(247,245,239,.82);font-size:1.12rem;max-width:34em;line-height:1.7;margin-bottom:40px;} .contact-cta{font-family:var(--font-display);font-size:1.5rem;color:var(--bone);margin-bottom:24px;} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;} .cform{display:flex;flex-direction:column;gap:24px;} .cfield{display:flex;flex-direction:column;gap:8px;} .cfield label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:rgba(247,245,239,.65);} .cfield input,.cfield textarea{ background:transparent;border:0;border-bottom:1px solid rgba(247,245,239,.28); color:var(--bone);font-family:var(--font-body);font-size:1.05rem;padding:8px 0; transition:border-color .25s; } .cfield input:focus,.cfield textarea:focus{outline:0;border-color:var(--accent-soft);} .cfield textarea{resize:vertical;min-height:84px;} .cform .btn{align-self:flex-start;margin-top:8px;} /* ---------- Rodapé ---------- */ footer.site{background:var(--ink-deep);color:var(--bone);border-top:1px solid rgba(247,245,239,.12);} footer.site .wrap{padding:56px 32px 70px;} .foot-logo{height:36px;width:auto;display:block;margin-bottom:34px;} .foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end;} .foot-tag{font-family:var(--font-display);font-size:1.4rem;color:var(--bone);max-width:18em;} .foot-org{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:rgba(247,245,239,.6);} .foot-social{display:flex;gap:16px;margin-top:18px;} .foot-social a{color:rgba(247,245,239,.7);} .foot-social a:hover{color:var(--accent-soft);} .foot-social svg{width:20px;height:20px;} .flourish{ margin-top:48px;padding-top:24px;border-top:1px solid rgba(247,245,239,.12); font-family:var(--font-display);font-style:italic;color:rgba(247,245,239,.55);font-size:1.05rem; } body[data-type="b"] .flourish{font-style:normal;} /* ---------- Troca de idioma (header) ---------- */ .lang-switch{display:flex;align-items:center;gap:7px;margin-left:20px;font-family:var(--font-label);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;} .lang-switch button{background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);padding:2px;transition:color .2s;} .lang-switch button:hover{color:var(--ink);} .lang-switch button.active{color:var(--ink);font-weight:700;} .lang-switch span{color:var(--hair);} /* ============================================================ PAINEL DE VALIDAÇÃO (removido na produção — CSS mantido, inofensivo) ============================================================ */ .vpanel{ position:fixed;right:22px;bottom:22px;z-index:90; background:var(--bone);border:1px solid var(--ink);border-radius:4px; box-shadow:0 6px 22px rgba(26,24,21,.10); font-family:var(--font-label);width:236px;overflow:hidden; } .vpanel-head{ display:flex;align-items:center;justify-content:space-between; padding:11px 14px;border-bottom:1px solid var(--hair);background:var(--ink);color:var(--bone); } .vpanel-head .t{text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;} .vpanel-head button{background:none;border:0;color:var(--bone);cursor:pointer;font-size:1rem;line-height:1;font-family:var(--font-display);} .vpanel-body{padding:14px;display:flex;flex-direction:column;gap:14px;} .vrow .vlabel{text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;color:var(--muted);display:block;margin-bottom:7px;} .seg{display:flex;border:1px solid var(--hair);border-radius:3px;overflow:hidden;} .seg button{ flex:1;background:var(--bone);border:0;cursor:pointer;padding:9px 6px; font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--muted); border-right:1px solid var(--hair);transition:.2s; } .seg button:last-child{border-right:0;} .seg button.active{background:var(--ink);color:var(--bone);} .vhint{font-family:var(--font-body);font-size:.72rem;line-height:1.45;color:var(--muted);} .vpanel.collapsed .vpanel-body{display:none;} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:880px){ body{font-size:17px;} nav.main{display:none;} .menu-toggle{display:inline-flex;background:none;border:0;cursor:pointer;font-family:var(--font-label); text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ink);} nav.main.open{ display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:var(--bone);border-bottom:1px solid var(--hair);padding:8px 0; } nav.main.open a{padding:14px 32px;border-bottom:1px solid var(--hair-soft);} .hero-grid{grid-template-columns:1fr;gap:44px;} .portrait{max-width:380px;} .convo-card{grid-template-columns:1fr;gap:18px;} .acc-body-inner{grid-template-columns:1fr;gap:22px;} .how-layout{grid-template-columns:1fr;gap:34px;} .how-aside{position:static;max-width:340px;} .about-grid{grid-template-columns:1fr;gap:32px;} .about-aside{position:static;} .about-aside .portrait{max-width:380px;} .testi-card{grid-template-columns:1fr;gap:26px;justify-items:center;} .testi-portrait{width:100%;max-width:300px;} .res-grid{grid-template-columns:1fr;} .res-card{border-right:0;border-bottom:1px solid var(--hair);} .res-card:last-child{border-bottom:0;} .contact-grid{grid-template-columns:1fr;gap:44px;} section.block{padding:78px 0;} .vpanel{right:12px;bottom:12px;width:210px;} } @media (max-width:560px){ body{font-size:16px;} .hero h1{font-size:clamp(1.5rem,6vw,1.75rem);} .convo-card{padding:30px 26px;} .band-dark .wrap{padding-top:64px;padding-bottom:64px;} .testi-portrait{max-width:240px;} } /* ============================================================ ESCALA TIPOGRÁFICA COMPACTA (spec da cliente — "manchete de jornal") Vidaloka títulos/subtítulos · Spectral corpo · Alegreya SC rótulos ============================================================ */ .hero h1{font-size:var(--fs-hero);line-height:1.12;} .sec-title,.contact h2,.foot-tag,.how-title{font-size:var(--fs-h);line-height:1.15;} .acc-title,.testi-body blockquote{font-size:var(--fs-sub);line-height:1.3;} .hero-subhead,.hero .reassure,.sec-transition,.convo-card h3,.about-body h3,.contact-cta,.convo-closing{font-size:var(--fs-tag);line-height:1.34;} .hero .sub,.sec-intro,.acc-desc,.how-col p,.about-body p,.contact .lede,.res-card p,.convo-card p{font-size:var(--fs-body);line-height:1.62;} .label,.sec-num,nav.main a,.btn,.acc-quote,.foot-org,.testi-body .cite-name,.res-kicker{font-size:var(--fs-label);} .convo-card p{max-width:60em;} /* Vidaloka "Bold" — no PDF a cliente marca TÍTULOS e SUBTÍTULOS como Bold. Vidaloka é fonte de peso único (400) no Google Fonts; 700 aplica o negrito que ela pede. Corpo (Spectral) e menu/rótulos/CTA (Alegreya SC) ficam em peso normal, como no PDF. */ .hero h1,.hero-subhead,.hero .reassure,.sec-title,.sec-transition,.acc-title,.convo-card h3,.how-title,.band-dark .big,.about-body h3,.about-close,.contact h2,.contact-cta,.foot-tag,.convo-closing{font-weight:700;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none;} .split .word{opacity:1!important;transform:none!important;filter:none!important;} html{scroll-behavior:auto;} }