/* ========================================================= Dra. Nayara Maia Monteiro — Site Vitrine Editorial Dourado/Nude · mobile-first ========================================================= */ /* ---------- Theme tokens ---------- Three on-brand palettes ship as swappable themes — flip the attribute (nude | noir | lilas) and the attribute (editorial | classic) to switch. */ :root{ /* default = Nude Editorial */ --bg:#F4ECE2; --bg-2:#EDE2D4; --surface:#FBF6EF; --card:#FDFAF4; --ink:#2C2118; --ink-2:#5C4D40; --ink-3:#917F6C; --gold:#A9783F; --gold-2:#C9A064; --gold-soft:#E7D4B4; --accent:#C28C7E; --line:rgba(44,33,24,.12); --line-strong:rgba(44,33,24,.22); --shadow:0 24px 60px -32px rgba(44,33,24,.45); --hero-grad:linear-gradient(180deg,rgba(20,14,9,0) 0%,rgba(20,14,9,.08) 42%,rgba(20,14,9,.66) 100%); --font-display:'Cormorant Garamond',serif; --font-label:'Jost',sans-serif; --font-body:'Mulish',sans-serif; --display-weight:600; } [data-theme="noir"]{ --bg:#15110D; --bg-2:#1B1611; --surface:#201A13; --card:#231C15; --ink:#F3EADC; --ink-2:#CBBDAB; --ink-3:#998A78; --gold:#C9A064; --gold-2:#E3C28A; --gold-soft:#3A2E1F; --accent:#E0A99C; --line:rgba(243,234,220,.14); --line-strong:rgba(243,234,220,.26); --shadow:0 30px 70px -34px rgba(0,0,0,.8); --hero-grad:linear-gradient(180deg,rgba(10,7,4,0) 0%,rgba(10,7,4,.25) 42%,rgba(10,7,4,.82) 100%); } [data-theme="lilas"]{ --bg:#F1EAF1; --bg-2:#E8DDEA; --surface:#FAF5FB; --card:#FCF8FC; --ink:#352A3D; --ink-2:#5E4F66; --ink-3:#8B7C92; --gold:#A9803F; --gold-2:#C9A064; --gold-soft:#E4D7B8; --accent:#9A6FA8; --line:rgba(53,42,61,.12); --line-strong:rgba(53,42,61,.22); --shadow:0 24px 60px -32px rgba(53,42,61,.4); --hero-grad:linear-gradient(180deg,rgba(30,20,34,0) 0%,rgba(30,20,34,.08) 42%,rgba(30,20,34,.62) 100%); } /* ---------- Font pairings ---------- */ [data-font="classic"]{ --font-display:'Playfair Display',serif; --font-label:'Montserrat',sans-serif; --display-weight:600; } /* ---------- Reset & base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s ease,color .5s ease; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--gold);color:#fff} /* page is a centered mobile column that grows gracefully */ .page{ width:100%; max-width:520px; margin:0 auto; background:var(--bg); position:relative; overflow:hidden; transition:background .5s ease; } /* ---------- Type helpers ---------- */ .eyebrow{ font-family:var(--font-label); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:500; display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:26px;height:1px; background:var(--gold); display:inline-block; opacity:.7; } .eyebrow.center::after{ content:""; width:26px;height:1px; background:var(--gold); display:inline-block; opacity:.7; } .display{ font-family:var(--font-display); font-weight:var(--display-weight); line-height:1.02; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } .serif{font-family:var(--font-display)} .gold-text{color:var(--gold)} .muted{color:var(--ink-2)} /* ---------- Layout primitives ---------- */ section{position:relative} .wrap{padding:0 26px} .sec{padding:70px 26px} .sec-tight{padding:52px 26px} .kicker-row{margin-bottom:22px} .rule{height:1px;background:var(--line);border:0} .gold-rule{ width:54px;height:2px;border:0; background:linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius:2px; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--font-label); font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500; padding:16px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent; transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease; line-height:1; } .btn-primary{ background:linear-gradient(120deg,var(--gold),var(--gold-2)); color:#fff; box-shadow:0 14px 30px -14px var(--gold); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px var(--gold)} .btn-ghost{ background:transparent;color:var(--ink); border:1px solid var(--line-strong); } .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-block{width:100%} .btn .wa{width:17px;height:17px;fill:currentColor} /* ---------- Top bar ---------- */ .topbar{ position:fixed;top:0;left:50%;transform:translateX(-50%); width:100%;max-width:520px;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:14px 22px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:.35s ease; opacity:0;pointer-events:none;transform:translate(-50%,-12px); } .topbar.show{opacity:1;pointer-events:auto;transform:translateX(-50%);border-bottom-color:var(--line)} .topbar .mono{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.04em;color:var(--ink)} .topbar .mini-cta{ font-family:var(--font-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);font-weight:500;border:1px solid var(--gold);padding:9px 16px;border-radius:2px; } /* anchor menu — desktop only (mobile keeps the minimal logo + CTA) */ .topnav{display:none} .topnav a{ font-family:var(--font-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-2);font-weight:500;transition:color .25s ease;position:relative; } .topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--gold);transition:right .3s ease} .topnav a:hover{color:var(--gold)} .topnav a:hover::after{right:0} /* ---------- Monogram ---------- */ .monogram{ font-family:var(--font-display); font-weight:600; display:inline-flex;flex-direction:column;align-items:center;line-height:.9; } .monogram .nm{font-size:30px;letter-spacing:.06em;color:var(--ink)} .monogram .nm b{color:var(--gold)} .monogram .nm-sub{ font-family:var(--font-label);font-size:8px;letter-spacing:.34em;text-transform:uppercase; color:var(--ink-3);margin-top:6px;font-weight:500; } /* ========================================================= HERO ========================================================= */ .hero{ min-height:100svh; display:flex;flex-direction:column; position:relative; padding:26px 26px 40px; background: radial-gradient(120% 80% at 80% -10%, color-mix(in srgb,var(--gold-soft) 60%,transparent) 0%, transparent 55%), var(--bg); overflow:hidden; } .hero-top{display:flex;justify-content:center;padding-top:14px} .hero-art{ position:relative;margin:30px -6px 0; border-radius:3px;overflow:hidden; flex:1;min-height:340px; box-shadow:var(--shadow); } .hero-art .photo{width:100%;height:100%;min-height:340px} .hero-art::after{ content:"";position:absolute;inset:0;background:var(--hero-grad);pointer-events:none;z-index:2; } .hero-frame{ position:absolute;inset:12px;border:1px solid rgba(255,255,255,.45); z-index:3;pointer-events:none;mix-blend-mode:overlay; } .hero-art .hero-credit{ position:absolute;left:20px;right:20px;bottom:20px;z-index:4;color:#fff; } .hero-art .hero-credit .nm-line{ font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:.01em; text-shadow:0 2px 18px rgba(0,0,0,.4); } .hero-art .hero-credit .role{ font-family:var(--font-label);font-size:10px;letter-spacing:.28em;text-transform:uppercase; margin-top:8px;color:rgba(255,255,255,.92);display:flex;gap:10px;align-items:center;flex-wrap:wrap; } .hero-art .hero-credit .role span{opacity:.55} .hero-copy{padding-top:30px} .hero h1{ font-size:clamp(40px,13vw,60px); margin:18px 0 0; } .hero h1 em{font-style:italic;color:var(--gold)} .hero .sub{ margin-top:20px;font-size:16.5px;color:var(--ink-2);max-width:38ch;line-height:1.7; } .hero .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:30px} /* trust strip */ .trust{ display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center;justify-content:center; padding:22px 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--surface); } .trust .item{display:flex;align-items:center;gap:9px} .trust .item .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)} .trust .item span{ font-family:var(--font-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-2);font-weight:500; } /* ========================================================= SECTION HEADINGS ========================================================= */ .sec-head{margin-bottom:34px} .sec-head h2{ font-family:var(--font-display);font-weight:var(--display-weight); font-size:clamp(31px,9vw,44px);line-height:1.05;margin-top:16px;color:var(--ink); letter-spacing:-.01em;text-wrap:balance; } .sec-head h2 em{font-style:italic;color:var(--gold)} .sec-head p{margin-top:16px;color:var(--ink-2);font-size:16px;max-width:46ch} /* ========================================================= SOBRE ========================================================= */ .sobre{background:var(--bg-2)} .about-portrait{ position:relative;border-radius:3px;overflow:hidden;box-shadow:var(--shadow); margin-bottom:30px;height:440px; } .about-portrait .photo{width:100%;height:440px} .about-portrait .tag{ position:absolute;left:18px;bottom:18px;background:var(--card); padding:12px 16px;border-radius:2px;box-shadow:var(--shadow);z-index:3; } .about-portrait .tag b{font-family:var(--font-display);font-size:18px;color:var(--ink);display:block} .about-portrait .tag span{ font-family:var(--font-label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold); } .about-body p{color:var(--ink-2);font-size:16.5px;margin-top:16px;line-height:1.75} .about-body p:first-child{margin-top:0} .pullquote{ margin:30px 0 0;padding:24px 0 6px;border-top:1px solid var(--line); font-family:var(--font-display);font-style:italic;font-weight:500; font-size:25px;line-height:1.3;color:var(--ink);text-wrap:balance; } .pullquote .sig{ display:block;margin-top:14px;font-family:var(--font-label);font-style:normal; font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold); } .cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)} .cred-grid .cell{background:var(--bg-2);padding:20px 18px} .cred-grid .cell b{font-family:var(--font-display);font-size:30px;color:var(--gold);display:block;line-height:1} .cred-grid .cell span{font-family:var(--font-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:8px;display:block} /* ========================================================= DIFERENCIAIS ========================================================= */ .diff-list{display:flex;flex-direction:column;gap:2px;margin-top:8px} .diff{ display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start; padding:24px 0;border-top:1px solid var(--line); } .diff:last-child{border-bottom:1px solid var(--line)} .diff .num{font-family:var(--font-display);font-size:26px;color:var(--gold);line-height:1;font-weight:600;min-width:34px} .diff h3{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);line-height:1.15} .diff p{color:var(--ink-2);font-size:15px;margin-top:8px;line-height:1.65} /* ========================================================= FEATURED (glúteo / olhos) ========================================================= */ .feature{position:relative;padding:0} .feature .art{position:relative;height:420px;overflow:hidden} .feature .art .photo{width:100%;height:100%} .feature .art::after{content:"";position:absolute;inset:0;background:var(--hero-grad);z-index:2} .feature .body{padding:40px 26px 56px} .feature.dark{background:var(--ink)} .feature.dark .body h2,.feature.dark .body p,.feature.dark .body .lead{color:#F4ECE2} .feature.dark .body .muted{color:rgba(244,236,226,.72)} .feature .lead{ font-family:var(--font-display);font-style:italic;font-weight:500;font-size:27px;line-height:1.28; color:var(--ink);text-wrap:balance;margin-bottom:18px; } .feature .lead b{font-style:normal;color:var(--gold)} .feature .body p{color:var(--ink-2);font-size:16px;margin-top:14px} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .chip{ font-family:var(--font-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase; padding:9px 14px;border:1px solid var(--line-strong);border-radius:40px;color:var(--ink-2);font-weight:500; } .feature.dark .chip{border-color:rgba(244,236,226,.3);color:rgba(244,236,226,.85)} .feature-cta{ display:inline-flex;align-items:center;gap:.7em;margin-top:28px; font-family:var(--font-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--gold);border-bottom:1px solid var(--line-strong);padding-bottom:7px; transition:color .25s ease,border-color .25s ease; } .feature-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease} .feature-cta:hover{color:var(--gold-2);border-color:var(--gold)} .feature-cta:hover svg{transform:translateX(4px)} .feature.dark .feature-cta{color:var(--gold-2);border-color:rgba(244,236,226,.28)} .feature.dark .feature-cta:hover{border-color:var(--gold-2)} /* ========================================================= SERVIÇOS (accordion categories) ========================================================= */ .cats{display:flex;flex-direction:column;gap:14px;margin-top:8px} .cat{ background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden; transition:border-color .3s ease,box-shadow .3s ease; } .cat[open]{border-color:var(--line-strong);box-shadow:var(--shadow)} .cat summary{ list-style:none;cursor:pointer;padding:24px 22px; display:flex;align-items:center;gap:16px; } .cat summary::-webkit-details-marker{display:none} .cat .cat-no{font-family:var(--font-display);font-size:16px;color:var(--gold);font-weight:600;min-width:26px} .cat .cat-title{flex:1} .cat .cat-title b{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);display:block;line-height:1.1} .cat .cat-title span{font-family:var(--font-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;display:block} .cat .plus{width:22px;height:22px;position:relative;flex-shrink:0;transition:transform .35s ease} .cat .plus::before,.cat .plus::after{content:"";position:absolute;background:var(--gold);border-radius:2px} .cat .plus::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)} .cat .plus::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);transition:transform .35s ease} .cat[open] .plus{transform:rotate(180deg)} .cat[open] .plus::after{transform:translateX(-50%) scaleY(0)} .cat-items{padding:0 22px 8px 64px} .cat-items li{ list-style:none;padding:13px 0;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:14px;align-items:baseline; } .cat-items li b{font-weight:600;font-size:15.5px;color:var(--ink)} .cat-items li span{font-size:13px;color:var(--ink-3);text-align:right;max-width:52%} /* ========================================================= JORNADA ========================================================= */ .jornada{background:var(--bg-2)} .steps{display:flex;flex-direction:column;gap:0;margin-top:8px;position:relative} .step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:0 0 36px} .step .marker{display:flex;flex-direction:column;align-items:center} .step .marker .ring{ width:46px;height:46px;border-radius:50%;border:1px solid var(--gold); display:flex;align-items:center;justify-content:center;flex-shrink:0; font-family:var(--font-display);font-size:18px;color:var(--gold);font-weight:600;background:var(--bg-2); } .step .marker .line{width:1px;flex:1;background:var(--line);margin:8px 0 -28px} .step:last-child .marker .line{display:none} .step .txt{padding-top:6px} .step .txt h3{font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--ink)} .step .txt p{color:var(--ink-2);font-size:15px;margin-top:8px;line-height:1.65} /* ========================================================= DEPOIMENTOS ========================================================= */ .quotes{display:flex;flex-direction:column;gap:16px;margin-top:8px} .qcard{ background:var(--card);border:1px solid var(--line);border-radius:3px;padding:26px 24px; } .qcard .stars{color:var(--gold-2);letter-spacing:3px;font-size:15px;margin-bottom:14px} .qcard p{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.45;color:var(--ink);text-wrap:pretty} .qcard .who{ margin-top:18px;display:flex;align-items:center;gap:12px; } .qcard .who .av{ width:38px;height:38px;border-radius:50%;background:linear-gradient(120deg,var(--gold),var(--gold-2)); display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:16px; } .qcard .who b{font-size:14px;color:var(--ink);font-family:var(--font-body);font-weight:700} .qcard .who span{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:2px} .social-proof{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px; padding:22px;border:1px solid var(--line);border-radius:3px;background:var(--surface); transition:border-color .3s ease,box-shadow .3s ease; } .social-proof:hover{border-color:var(--gold);box-shadow:var(--shadow)} .social-proof b{font-family:var(--font-display);font-size:30px;color:var(--gold);line-height:1} .social-proof span{font-size:13px;color:var(--ink-2);line-height:1.4} .social-proof .sp-cta{ flex-basis:100%;display:inline-flex;align-items:center;justify-content:center;gap:.6em; margin-top:4px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--font-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold); } .social-proof .sp-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease} .social-proof:hover .sp-cta svg{transform:translateX(4px)} /* ========================================================= FAQ ========================================================= */ .faq{display:flex;flex-direction:column} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:16px;align-items:flex-start; font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink);line-height:1.25; } .faq summary::-webkit-details-marker{display:none} .faq summary .q-ico{ width:20px;height:20px;flex-shrink:0;position:relative;margin-top:4px;transition:transform .35s ease; } .faq summary .q-ico::before,.faq summary .q-ico::after{content:"";position:absolute;background:var(--gold);border-radius:2px} .faq summary .q-ico::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)} .faq summary .q-ico::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);transition:transform .3s ease} .faq details[open] summary .q-ico::after{transform:translateX(-50%) scaleY(0)} .faq .ans{padding:0 0 24px 36px;color:var(--ink-2);font-size:15.5px;line-height:1.7} /* ========================================================= LOCALIZAÇÃO ========================================================= */ .local{background:var(--bg-2)} .map-card{border-radius:3px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin-top:8px} .map-embed{width:100%;height:260px;border:0;display:block;filter:saturate(.85)} .map-fallback{ height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px; background: repeating-linear-gradient(45deg,color-mix(in srgb,var(--gold-soft) 50%,transparent) 0 2px,transparent 2px 22px), var(--surface); color:var(--ink-3);font-family:var(--font-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase; } .info-rows{margin-top:22px;display:flex;flex-direction:column;gap:2px} .info-row{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);align-items:start} .info-row:last-child{border-bottom:1px solid var(--line)} .info-row .lbl{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:3px;min-width:74px} .info-row .val{color:var(--ink);font-size:15.5px;line-height:1.5} .info-row .val a{border-bottom:1px solid var(--line-strong);padding-bottom:1px} .info-row .val a:hover{color:var(--gold);border-color:var(--gold)} .info-row .val .map-link{ display:inline-block;margin-top:10px;border:0; font-family:var(--font-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold); } .info-row .val .map-link:hover{color:var(--gold-2)} /* ========================================================= CTA FINAL ========================================================= */ .cta-final{ text-align:center;padding:80px 30px;position:relative;overflow:hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--gold-soft) 55%,transparent) 0%, transparent 60%), var(--bg); } .cta-final .eyebrow{justify-content:center} .cta-final h2{ font-family:var(--font-display);font-weight:var(--display-weight); font-size:clamp(34px,10vw,50px);line-height:1.06;margin:18px 0 0;color:var(--ink);text-wrap:balance; } .cta-final h2 em{font-style:italic;color:var(--gold)} .cta-final p{margin:18px auto 0;color:var(--ink-2);font-size:16px;max-width:36ch} .cta-final .btn{margin-top:30px} /* ========================================================= FOOTER ========================================================= */ .foot{background:var(--ink);color:#EFE5D8;padding:54px 26px 34px} [data-theme="noir"] .foot{background:#0E0B07} .foot .monogram .nm{color:#F4ECE2} .foot .monogram .nm b{color:var(--gold-2)} .foot .monogram .nm-sub{color:rgba(244,236,226,.5)} .foot-top{display:flex;justify-content:center;padding-bottom:30px;border-bottom:1px solid rgba(244,236,226,.14)} .foot-grid{display:flex;flex-direction:column;gap:30px;margin:34px 0;text-align:center} .foot-col h4{ font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold-2);font-weight:600;margin-bottom:14px; } .foot-col a,.foot-col p{ display:block;font-family:var(--font-body);font-size:13.5px;line-height:1.7;color:rgba(244,236,226,.72); } .foot-col a{transition:color .25s ease} .foot-col a:hover{color:var(--gold-2)} .foot-col p{margin-bottom:10px} .foot-col p + a{font-weight:600;color:var(--gold-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .foot .reg{ text-align:center;font-size:12px;line-height:1.7;color:rgba(244,236,226,.6); border-top:1px solid rgba(244,236,226,.14);padding-top:24px;max-width:40ch;margin:0 auto; } .foot .copy{text-align:center;margin-top:20px;font-family:var(--font-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,236,226,.4)} /* "Desenvolvido por Time Saving Tech" credit */ .ft-credit{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;opacity:.7;transition:opacity .3s ease} .ft-credit:hover{opacity:1} .ft-credit img{height:20px;width:auto} .ft-credit span{font-family:var(--font-body);font-size:.8rem;color:rgba(244,236,226,.55)} /* ========================================================= FLOATING WHATSAPP ========================================================= */ .wa-float{ position:fixed;bottom:20px;right:max(20px,calc(50% - 260px + 20px));z-index:70; display:flex;align-items:center;gap:10px; background:linear-gradient(120deg,var(--gold),var(--gold-2));color:#fff; padding:14px 20px 14px 16px;border-radius:50px; box-shadow:0 18px 36px -14px rgba(0,0,0,.5); font-family:var(--font-label);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; transition:transform .25s ease; } .wa-float:hover{transform:translateY(-3px)} .wa-float svg{width:22px;height:22px;fill:#fff} .wa-float .lbl{white-space:nowrap} /* ========================================================= PHOTO PLACEHOLDERS The container carries an elegant on-brand fill (warm gold gradient + "NM" watermark) so empty photo areas read as intentional. Drop a real photo in by replacing the
with an inside .photo — when an is present it covers the placeholder and the guidance hint hides automatically. ========================================================= */ .hero-art,.about-portrait,.feature .art{ background: radial-gradient(115% 85% at 82% 8%, color-mix(in srgb,var(--gold-soft) 72%,transparent) 0%, transparent 54%), radial-gradient(95% 70% at 8% 96%, color-mix(in srgb,var(--accent) 20%,transparent) 0%, transparent 52%), linear-gradient(155deg, var(--surface) 0%, var(--bg-2) 100%); } .hero-art::before,.about-portrait::before,.feature .art::before{ content:"NM"; position:absolute;z-index:0; right:-6px;bottom:-22px; font-family:var(--font-display);font-weight:600; font-size:170px;line-height:1;letter-spacing:.02em; color:color-mix(in srgb,var(--gold) 16%,transparent); pointer-events:none;user-select:none; } .about-portrait::before{font-size:150px;right:-4px;bottom:-16px} .photo{position:relative;display:block;overflow:hidden} .photo img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1; } .photo-hint{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:18px;text-align:center; font-family:var(--font-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase; color:color-mix(in srgb,var(--gold) 70%,var(--ink));font-weight:500; } .photo-hint small{ font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);font-weight:500; } /* a real photo (any inside .photo) hides the guidance hint */ .photo:has(img) .photo-hint{display:none} .feature.dark .photo-hint{color:color-mix(in srgb,var(--gold-2) 80%,#fff)} .feature.dark .photo-hint small{color:rgba(244,236,226,.55)} /* discreet compliance label for illustrative (non-patient) imagery */ .feature .art .illus-tag{ position:absolute;left:14px;bottom:14px;z-index:3; font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase; font-weight:500;color:rgba(255,255,255,.92); background:rgba(20,14,9,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); padding:5px 10px;border-radius:2px;pointer-events:none; } /* reveal animation */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}} @media (min-width:521px){ body{ background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb,var(--gold-soft) 40%,transparent) 0%, transparent 60%), var(--bg-2); padding:0; } [data-theme="noir"] body{background:radial-gradient(80% 50% at 50% 0%, rgba(201,160,100,.10) 0%, transparent 60%),#0E0B07} .page{ box-shadow:0 40px 120px -50px rgba(44,33,24,.55); min-height:100vh; } .wa-float{right:max(20px,calc(50% - 260px + 18px))} .topbar{box-shadow:0 0 0 1px var(--line)} } /* ========================================================= DESKTOP (>= 900px) The mobile-first column above stays untouched; from here the layout becomes genuinely two-dimensional so the site fills a monitor instead of floating as a phone-width strip. ========================================================= */ @media (min-width:900px){ .page{ max-width:1240px; box-shadow:0 55px 150px -64px rgba(44,33,24,.5); } /* fixed chrome follows the wider column */ .topbar{max-width:1240px;padding:16px 56px} .wa-float{right:32px;bottom:32px;left:auto} /* breathing room + larger headings */ .sec{padding:110px 64px} .trust{padding:26px 64px;gap:22px 40px} .sec-head h2{font-size:clamp(36px,3.4vw,52px)} /* ---- HERO: copy left, portrait right ---- */ .hero{ display:grid; grid-template-columns:1.02fr .98fr; grid-template-rows:auto 1fr; grid-template-areas:"top top" "copy art"; column-gap:60px; min-height:100vh; padding:44px 64px 64px; } .hero-top{grid-area:top;justify-content:flex-start;padding-top:0} .hero-copy{grid-area:copy;align-self:center;padding-top:0} .hero-art{grid-area:art;align-self:stretch;margin:0;min-height:560px} .hero-art .photo{min-height:560px} .hero h1{font-size:clamp(52px,5.2vw,78px)} .hero .sub{font-size:18px;max-width:42ch} .hero .cta-row{flex-direction:row;flex-wrap:wrap} .hero .cta-row .btn{width:auto;flex:0 0 auto} /* ---- SOBRE: portrait + body ---- */ .sobre{ display:grid; grid-template-columns:.92fr 1.08fr; grid-template-areas:"head head" "portrait body"; column-gap:64px; align-items:start; } .sobre .sec-head{grid-area:head} .about-portrait{grid-area:portrait;height:600px;margin-bottom:0} .about-portrait .photo{height:600px} .about-body{grid-area:body;align-self:center} /* ---- DIFERENCIAIS: two columns ---- */ .diff-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px} .diff:nth-last-child(2){border-bottom:1px solid var(--line)} /* ---- FEATURES: image + text side by side, alternating sides ---- */ .feature{display:flex;align-items:stretch} .feature>.art{flex:1 1 50%;height:auto;min-height:560px} .feature>.body{flex:1 1 50%;align-self:center;padding:64px 56px} .feature.dark{flex-direction:row-reverse} .feature .lead{font-size:30px} /* ---- SERVIÇOS: two-column accordion ---- */ .cats{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} /* ---- JORNADA: horizontal 4-step timeline ---- */ .jornada .steps{flex-direction:row;gap:0;margin-top:26px} .jornada .step{flex:1;display:flex;flex-direction:column;gap:20px;padding:0 24px 0 0} .jornada .step .marker{flex-direction:row;align-items:center} .jornada .step .marker .line{width:auto;height:1px;flex:1;margin:0 0 0 12px} .jornada .step:last-child .marker .line{display:none} .jornada .step .txt{padding-top:0} /* ---- DEPOIMENTOS: three across, author rows aligned ---- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .qcard{display:flex;flex-direction:column} .qcard .who{margin-top:auto} /* ---- FAQ: two columns ---- */ .faq{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start} /* ---- LOCALIZAÇÃO: map + contact side by side ---- */ .local{ display:grid; grid-template-columns:1.35fr .65fr; grid-template-areas:"head head" "map info"; column-gap:48px; align-items:stretch; } .local .sec-head{grid-area:head} .local .map-card{grid-area:map;margin-top:0} .local .map-embed{height:100%;min-height:440px} .local .info-rows{grid-area:info;margin-top:0;align-self:start} /* ---- NAVBAR: anchor menu ---- */ .topnav{display:flex;gap:30px;margin:0 auto} /* ---- hover polish (pointer devices) ---- */ .qcard{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .qcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)} .cat summary{transition:background .25s ease} .cat:hover{border-color:var(--line-strong)} /* ---- CTA + FOOTER ---- */ .cta-final{padding:130px 30px} .foot{padding:68px 64px 40px} .foot-grid{flex-direction:row;justify-content:space-between;gap:56px;text-align:left;margin:40px 0} .foot-col{flex:1} } @media (min-width:1280px){ .page{max-width:1300px} .topbar{max-width:1300px;padding-left:72px;padding-right:72px} .hero,.sec{padding-left:80px;padding-right:80px} /* intentional "lit stage" framing so the side space reads as deliberate, not dead */ body{ background: radial-gradient(72% 60% at 50% -8%, color-mix(in srgb,var(--gold-soft) 42%,transparent) 0%, transparent 56%), radial-gradient(130% 120% at 50% 45%, transparent 56%, rgba(0,0,0,.055) 100%), var(--bg-2); } [data-theme="noir"] body{ background: radial-gradient(72% 60% at 50% -8%, rgba(201,160,100,.12) 0%, transparent 56%), radial-gradient(130% 120% at 50% 45%, transparent 56%, rgba(0,0,0,.45) 100%), #0E0B07; } }