/* ============================================================ pages.css — layout compartilhado: cluster + páginas locais rodrigomsobroza.com.br · 2026-05-31 Fontes carregadas via (preload + link); não usar @import aqui. ============================================================ */ /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#fff; color:#1b2735;line-height:1.75;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:#112D4E;text-decoration:none} /* ── Variáveis ── */ :root{ --navy: #112D4E; --gold: #B8893B; --gold2: #C9A24B; --teal: #1683A3; --ink: #1b2735; --muted: #697586; --cream: #FAF8F4; --line: #e8e3da; --dark: #0c1929; } /* ── Containers ── */ .wrap {width:100%;max-width:760px; margin:0 auto;padding:0 clamp(1.1rem,4vw,1.5rem)} .wrap-wide{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)} /* ── Botões ── */ .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; background:var(--navy);color:#fff;font-weight:700;padding:1rem 2rem; border-radius:8px;font-size:1rem;transition:background .18s,transform .18s} .btn-primary:hover{background:#0c1929;transform:translateY(-1px)} .btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; background:transparent;color:var(--navy);border:1.5px solid var(--line); font-weight:600;padding:1rem 2rem;border-radius:8px;font-size:1rem;transition:border-color .18s} .btn-outline:hover{border-color:var(--navy)} .btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; background:linear-gradient(135deg,#DEA46A,#EEC49A);color:#0c1929;font-weight:800; padding:1.05rem 2.4rem;border-radius:8px;font-size:1rem; box-shadow:0 6px 22px rgba(184,137,59,.35);transition:transform .18s,box-shadow .18s} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,137,59,.45)} /* ── Topnav ── */ .top{position:sticky;top:0;z-index:50;height:68px; background:rgba(255,255,255,.94);backdrop-filter:blur(16px); border-bottom:1px solid var(--line)} .top .wrap-wide{height:100%;display:flex;align-items:center;justify-content:space-between} .top-logo{display:flex;align-items:center} .top-logo img{height:36px;width:auto} .top nav{display:flex;gap:1.6rem;align-items:center} .top nav a{color:var(--muted);font-size:.875rem;font-weight:500;transition:color .15s} .top nav a:hover{color:var(--navy)} .top nav a.pill{background:var(--navy);color:#fff;padding:.5rem 1.25rem; border-radius:8px;font-weight:700} .top nav a.pill:hover{background:#0c1929;color:#fff} @media(max-width:768px){.top nav a.hidem{display:none}} /* ── Hero: split (texto esquerda / foto direita como bg) ── */ .hero{background:linear-gradient(170deg,#fff 45%,var(--cream) 100%)} .hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(540px,70vh,680px)} .hero-text{display:flex;flex-direction:column;justify-content:center; padding:clamp(2.5rem,5vw,4rem) clamp(1.4rem,3vw,3.5rem)} .hero-text-inner{max-width:580px;margin-left:auto;width:100%} /* coluna foto: posição relativa p/ acomodar o card de prova social */ .hero-photo-wrap{position:relative;overflow:hidden} .hero-photo{position:absolute;inset:0; background-size:cover;background-position:center 18%; background-repeat:no-repeat;background-color:#e8ecf0} /* card flutuante (prova social) */ .photo-card{position:absolute;bottom:28px;right:28px;z-index:2; background:#fff;border:1px solid var(--line);border-radius:12px; padding:.8rem 1.15rem;box-shadow:0 12px 28px -10px rgba(17,45,78,.22); display:flex;align-items:center;gap:.75rem} .photo-card-n{font-family:'Fraunces',Georgia,serif;font-size:1.75rem; font-weight:600;color:var(--navy);line-height:1} .photo-card-l{font-size:.72rem;color:var(--muted);line-height:1.35} /* elementos do hero */ .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.1rem} .hero h1{font-family:'Fraunces',Georgia,serif; font-size:clamp(2rem,4vw,3.2rem);font-weight:600; line-height:1.1;letter-spacing:-.015em;color:var(--navy);margin-bottom:1.2rem} .hero h1 em{font-style:italic;color:var(--gold)} .hero-crumb{font-size:.78rem;color:var(--muted);margin-bottom:1.2rem} .hero-crumb a{color:var(--muted)} .hero-lead{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted); line-height:1.72;margin-bottom:1.8rem;max-width:520px} .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.7rem} .trust-row{display:flex;align-items:center;gap:.65rem;font-size:.9rem;color:var(--muted)} .stars{color:var(--gold2);letter-spacing:.04em} .trust-row b{color:var(--ink);font-weight:600} /* ── Trust strip ── */ .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff} .strip .wrap-wide{display:flex;justify-content:space-evenly;align-items:center; padding:1.4rem 0;gap:1rem;flex-wrap:wrap;text-align:center} .strip-it b{font-family:'Fraunces',Georgia,serif;display:block; font-size:1.55rem;font-weight:600;color:var(--navy);line-height:1} .strip-it span{font-size:.82rem;color:var(--muted)} /* ── Corpo do artigo ── */ .body{padding:clamp(2.5rem,5vw,4rem) 0 1rem} .body-intro{font-size:clamp(1.08rem,1.8vw,1.2rem);color:var(--ink); font-weight:500;line-height:1.65;margin-bottom:1.5rem} .body h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.45rem,2.8vw,1.95rem);font-weight:600;color:var(--navy); line-height:1.18;margin:2.8rem 0 1rem;letter-spacing:-.01em} .body h3{font-size:1.12rem;font-weight:700;color:var(--navy);margin:1.8rem 0 .6rem} .body p{margin-bottom:1.2rem;color:var(--ink)} .body ul,.body ol{margin:0 0 1.3rem 1.2rem} .body li{margin-bottom:.65rem;padding-left:.3rem;color:var(--ink)} .body strong{color:var(--ink)} .body blockquote{border-left:4px solid var(--gold);background:var(--cream); border-radius:0 12px 12px 0;padding:1.2rem 1.5rem;margin:2rem 0; font-family:'Fraunces',Georgia,serif;font-size:1.15rem;font-style:italic; font-weight:500;color:var(--navy);line-height:1.5} .body a{color:var(--navy);text-decoration:underline; text-decoration-color:rgba(184,137,59,.4);text-underline-offset:2px} .body a:hover{text-decoration-color:var(--gold)} /* caixas de destaque */ .callout{background:#f0f6fb;border:1px solid #d4e6f1;border-left:4px solid var(--teal); border-radius:14px;padding:1.5rem 1.7rem;margin:2.2rem 0} .callout h3{margin-top:0;color:var(--teal);font-size:1.05rem} .callout p:last-child{margin-bottom:0} .signs{background:var(--cream);border:1px solid #eee0cc;border-radius:14px; padding:1.6rem 1.8rem;margin:2.2rem 0} .signs ul{list-style:none;margin-left:0} .signs li{position:relative;padding-left:1.85rem;margin-bottom:.75rem;color:var(--ink)} .signs li::before{content:'✓';position:absolute;left:0;top:.1rem; background:var(--gold2);color:#fff;width:1.2rem;height:1.2rem;border-radius:50%; font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center} /* ── Seção Método EIXO ── */ .eixo{background:var(--cream);padding:clamp(3rem,6vw,5rem) 0} .eixo-head{text-align:center;max-width:38rem;margin:0 auto 2.8rem} .eixo-head h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.65rem,3.2vw,2.3rem);font-weight:600; color:var(--navy);margin:.5rem 0 .85rem;line-height:1.15} .eixo-head h2 em{font-style:italic;color:var(--gold)} .eixo-head p{color:var(--muted);font-size:1rem} .eixo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .estep{background:#fff;border:1px solid var(--line);border-radius:14px; padding:1.7rem 1.5rem;transition:transform .18s,box-shadow .18s} .estep:hover{transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(17,45,78,.14)} .estep-l{font-family:'Fraunces',Georgia,serif;font-size:2.8rem;font-weight:600; color:var(--gold2);line-height:1;margin-bottom:.8rem} .estep h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.5rem} .estep p{font-size:.9rem;color:var(--muted);line-height:1.6;margin:0} .eixo-foot{text-align:center;margin-top:2.5rem} /* ── FAQ ── */ .faq{background:#f7f9fb;padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line)} .faq-head{text-align:center;margin-bottom:2rem} .faq-head h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.45rem,2.8vw,1.9rem);font-weight:600;color:var(--navy)} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px; padding:1.1rem 1.4rem;margin-bottom:.6rem} .faq summary{font-weight:700;font-size:1rem;color:var(--navy);cursor:pointer; list-style:none;display:flex;justify-content:space-between; align-items:center;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';color:var(--gold);font-weight:800;font-size:1.3rem;line-height:1;flex:none} .faq details[open] summary::after{content:'−'} .faq details[open]{border-color:var(--gold)} .faq details p{margin-top:.85rem;color:var(--muted);line-height:1.7;font-size:.97rem} /* ── Cards relacionados ── */ .rel{padding:clamp(2.5rem,5vw,4rem) 0} .rel-head{text-align:center;margin-bottom:2rem} .rel-head h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.4rem,2.8vw,1.85rem);font-weight:600;color:var(--navy)} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem} .rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px; padding:1.3rem 1.4rem;transition:transform .18s,box-shadow .18s,border-color .18s} .rel-card:hover{text-decoration:none;border-color:var(--gold); transform:translateY(-3px);box-shadow:0 10px 24px rgba(17,45,78,.1)} .rel-card-tag{display:block;font-size:.7rem;color:var(--gold2);font-weight:700; text-transform:uppercase;letter-spacing:.07em;margin-bottom:.4rem} .rel-card strong{display:block;color:var(--navy);font-size:.98rem; line-height:1.35;font-weight:700} .rel-card .arr{color:var(--teal);font-size:.85rem;font-weight:600; margin-top:.7rem;display:inline-block} /* ── CTA final ── */ .endcta{background:var(--dark);padding:clamp(3.5rem,8vw,5.5rem) 0;text-align:center} .endcta .eyebrow{color:var(--gold)} .endcta h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.7rem,4vw,2.6rem);font-weight:600; color:#fff;line-height:1.15;margin:.8rem 0 1rem} .endcta h2 em{font-style:italic;color:var(--gold)} .endcta p{color:rgba(255,255,255,.78);max-width:500px;margin:0 auto 2rem;line-height:1.7} .endcta .subnote{margin-top:1.2rem;font-size:.85rem;color:rgba(255,255,255,.5)} /* ── Footer ── */ .foot{background:#060d1a;color:rgba(255,255,255,.42);font-size:.82rem; text-align:center;padding:2.2rem 0} .foot a{color:rgba(255,255,255,.55)} .foot a:hover{color:rgba(255,255,255,.8)} .foot-links{margin-top:.6rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .8rem} .foot-disc{margin-top:.8rem;font-size:.74rem;color:rgba(255,255,255,.3)} /* ── WhatsApp flutuante ── */ .wa{position:fixed;bottom:1.3rem;right:1.3rem;z-index:60;width:56px;height:56px; border-radius:50%;background:#25D366;display:flex;align-items:center; justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.45); transition:transform .18s,box-shadow .18s} .wa:hover{transform:scale(1.08)} .wa svg{width:28px;height:28px;fill:#fff} /* ══════════════════════════════════ RESPONSIVO — Mobile First ══════════════════════════════════ */ @media(max-width:860px){ /* Hero: foto no topo, texto embaixo */ .hero-grid{grid-template-columns:1fr;min-height:0} .hero-photo-wrap{order:1;height:56vw;max-height:430px;min-height:220px} .hero-photo{background-position:center 12%} .hero-text{order:2;padding:1.7rem clamp(1.2rem,4vw,1.5rem) 2.2rem} .hero-text-inner{margin:0;max-width:none} .hero h1{font-size:clamp(1.85rem,7.5vw,2.4rem)} .hero-lead{font-size:1.02rem;margin-bottom:1.5rem} .cta-row{flex-direction:column} .cta-row .btn-primary,.cta-row .btn-outline,.cta-row .btn-gold{width:100%;padding:1rem} /* Eixo */ .eixo-grid{grid-template-columns:1fr;gap:.75rem} .estep{display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.3rem} .estep-l{font-size:2.2rem;margin-bottom:0;flex:none;min-width:2.2rem;text-align:center} /* strip */ .strip .wrap-wide{gap:.8rem} } @media(max-width:480px){ /* tela muito pequena: card flutuante esconde pra foto respirar */ .photo-card{display:none} }