/* ============================================ Dra. Luana Filus Mallmann — Landing Page Tokens extraídos do Manual de Marca oficial (v1.0) Fontes carregadas via do Google Fonts no ============================================ */ :root{ /* cor — paleta oficial do Manual de Marca */ --rose-50:#FFF7F5; /* creme — bg de página */ --rose-100:#FDF3F1; /* creme card — superfície de cards */ --rose-200:#E3CDCA; /* rosé névoa — soft accent bg */ --rose-400:#B28C8B; /* rosé da marca — accent primário */ --rose-500:#9C6F6E; /* rosé escuro — hover/links */ --rose-700:#6E4A49; /* rosé profundo — headings, fundo reverso */ --ink-900:#6E4A49; /* headings = rosé profundo (marca não usa preto) */ --ink-700:#5A4A48; /* tinta — corpo de texto */ --ink-500:#AB9F9F; /* taupe — texto secundário/legendas */ --areia:#F4ECE9; /* areia — bg de seção alternada */ --dourado:#A38A6E; /* nude dourado — acento pontual (10%) */ --dourado-claro:#C9B79B; --white:#FFFFFF; --bg-page:var(--rose-50); --bg-surface:var(--rose-100); --bg-surface-alt:var(--areia); --bg-accent:var(--rose-400); --bg-accent-soft:var(--rose-200); --text-heading:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --text-on-accent:var(--rose-50); --border-subtle:rgba(110,74,73,0.14); --link:var(--rose-500); --link-hover:var(--rose-700); /* tipografia — 3 famílias: display / corpo / rótulos (manual, p.7) */ --font-display:'Cormorant Garamond',Cambria,Georgia,serif; --font-body:'Lora',Cambria,Georgia,serif; --font-sans:'Montserrat',Calibri,Arial,sans-serif; --text-display-1:clamp(36px,4.5vw,64px); --text-display-2:clamp(32px,5vw,52px); --text-h1:clamp(32px,5vw,40px); --text-h2:clamp(26px,4vw,30px); --text-h3:22px; --text-body-lg:19px; --text-body:16px; --text-small:13px; --text-eyebrow:13px; --lh-display:1.05; --lh-heading:1.15; --lh-body:1.65; --ls-eyebrow:0.18em; --ls-wide:0.08em; /* espaçamento */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --radius-sm:2px; --radius-md:4px; --radius-lg:10px; --radius-pill:999px; --shadow-sm:0 1px 3px rgba(51,44,43,0.08); --shadow-md:0 8px 24px rgba(51,44,43,0.10); --shadow-lg:0 20px 48px rgba(51,44,43,0.14); --ease-standard:cubic-bezier(.4,0,.2,1); --duration-fast:150ms; --duration-base:260ms; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:var(--font-body); font-weight:400; font-size:var(--text-body); line-height:var(--lh-body); color:var(--text-body); background:var(--bg-page); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:var(--link);text-decoration:none;} a:hover{color:var(--link-hover);} h1,h2,h3{ font-family:var(--font-display); font-weight:500; color:var(--text-heading); line-height:var(--lh-heading); } .container{ max-width:1180px; margin-inline:auto; padding-inline:var(--space-5); } .eyebrow{ display:inline-block; font-family:var(--font-sans); font-size:var(--text-eyebrow); font-weight:500; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rose-700); } .section{ padding-block:var(--space-9); } .section--alt{ background:var(--bg-surface-alt); } .section-heading{ max-width:640px; margin-bottom:var(--space-7); } .section-heading h2{ font-size:var(--text-h2); margin-top:var(--space-3); } .section-heading--center{ margin-inline:auto; text-align:center; } /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-size:var(--text-body); font-weight:500; white-space:nowrap; padding:14px 28px; border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer; transition:background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .btn--primary{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg-accent); color:var(--text-on-accent); } .btn--outline{ background:transparent; border-color:var(--ink-900); color:var(--ink-900); } .btn--outline:hover{background:var(--ink-900);color:var(--rose-50);} .btn--icon svg{width:18px;height:18px;flex-shrink:0;} /* ---------- botão primário: preenchimento em ponto (hover) ---------- */ /* Estrutura injetada por js/main.js: .btn__dot + dois .btn__label */ .btn__dot{ position:absolute; left:16px; top:50%; translate:0 -50%; width:10px; height:10px; border-radius:var(--radius-pill); background:var(--dourado); z-index:0; transition:width var(--duration-base) var(--ease-standard), height var(--duration-base) var(--ease-standard), left var(--duration-base) var(--ease-standard), top var(--duration-base) var(--ease-standard), translate var(--duration-base) var(--ease-standard); } .btn--primary:hover .btn__dot{ left:0; top:0; translate:0 0; width:100%; height:100%; border-radius:var(--radius-pill); } .btn__label{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:var(--space-2); transition:transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); } .btn--primary:hover .btn__label:not(.btn__label--hover){ transform:translateX(10px); opacity:0; } .btn__label--hover{ position:absolute; inset:0; z-index:1; justify-content:center; transform:translateX(-10px); opacity:0; color:var(--rose-50); pointer-events:none; } .btn--primary:hover .btn__label--hover{ transform:translateX(0); opacity:1; } .cta .btn__dot{background:var(--rose-700);} /* ---------- header ---------- */ .header{ position:fixed; top:0;left:0;right:0; z-index:100; background:rgba(251,241,238,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-subtle); } .header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-3); } .header__logo{ display:flex; align-items:center; gap:var(--space-3); } .header__logo img{height:44px;width:auto;} .header__logo-text{ font-family:var(--font-display); font-size:20px; color:var(--text-heading); line-height:1.1; } .header__logo-text small{ display:block; font-family:var(--font-sans); font-size:11px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--text-muted); font-weight:500; margin-top:2px; } .header__nav{ display:flex; align-items:center; gap:var(--space-4); margin-right:var(--space-6); } .header__nav a{ font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--text-body); white-space:nowrap; } .header__nav a:hover{color:var(--rose-700);} .header__actions{display:flex;align-items:center;gap:var(--space-4);} .header__menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:var(--space-2); } .header__menu-toggle svg{width:26px;height:26px;color:var(--ink-900);} .header__mobile-nav{ display:none; flex-direction:column; gap:var(--space-4); padding:var(--space-5); background:var(--bg-page); border-top:1px solid var(--border-subtle); } .header__mobile-nav a{font-family:var(--font-sans);font-size:16px;font-weight:500;color:var(--text-heading);} .header__mobile-nav.is-open{display:flex;} /* ---------- hero ---------- */ .hero{ min-height:100vh; display:flex; align-items:center; padding-top:calc(var(--space-7) + 72px); padding-bottom:var(--space-7); position:relative; } .hero .hero__grid{width:100%;} .hero__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-8); align-items:center; } .hero__eyebrow{margin-bottom:var(--space-4);} .hero h1{ font-size:var(--text-display-1); letter-spacing:-0.01em; } .hero__sub{ font-size:var(--text-body-lg); color:var(--text-body); max-width:480px; margin-top:var(--space-4); } .hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); margin-top:var(--space-5); } .hero__proof{ display:flex; align-items:center; gap:var(--space-3); font-size:14px; color:var(--text-muted); } .hero__proof svg{width:16px;height:16px;color:var(--rose-500);flex-shrink:0;} .hero__media{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--rose-200),var(--rose-400)); outline:1px solid var(--rose-400); outline-offset:8px; } .hero__media img{ width:100%;height:100%;object-fit:cover;object-position:center 15%; } .hero__media-caption{ position:absolute; left:var(--space-5); bottom:var(--space-5); background:rgba(251,241,238,0.94); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-small); color:var(--text-heading); box-shadow:var(--shadow-md); } /* ---------- dor / problema ---------- */ .pain{ text-align:center; } .pain__lead{ font-family:var(--font-display); font-size:var(--text-display-2); font-weight:400; font-style:italic; color:var(--text-heading); max-width:820px; margin-inline:auto; line-height:1.3; } .pain__lead em{color:var(--rose-700);font-style:italic;} /* blur reveal — cada palavra entra desfocada, escalonada por --i */ .blur-word{ display:inline-block; opacity:0; filter:blur(12px); transform:translateY(10px); transition:opacity 0.5s var(--ease-standard), filter 0.5s var(--ease-standard), transform 0.5s var(--ease-standard); transition-delay:calc(var(--i, 0) * 30ms); } [data-reveal].is-visible .blur-word{ opacity:1; filter:blur(0); transform:translateY(0); } /* ---------- serviços ---------- */ .services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .card{ background:var(--bg-surface); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); transition:box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);} .card__icon{ width:44px;height:44px; border-radius:var(--radius-md); background:var(--bg-accent-soft); display:flex;align-items:center;justify-content:center; margin-bottom:var(--space-5); color:var(--rose-700); } .card__icon svg{width:22px;height:22px;} .card h3{font-size:var(--text-h3);margin-bottom:var(--space-3);} .card p{color:var(--text-body);font-size:15px;} /* ---------- prova social ---------- */ .testimonials__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .testimonial{ background:var(--bg-surface); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); } .testimonial__quote{ font-family:var(--font-display); font-size:20px; font-style:italic; color:var(--text-heading); line-height:1.4; margin-bottom:var(--space-5); } .testimonial__author{ display:flex; align-items:center; gap:var(--space-3); } .testimonial__avatar{ width:40px;height:40px; border-radius:50%; background:var(--bg-accent-soft); flex-shrink:0; } .testimonial__name{font-size:14px;font-weight:500;color:var(--text-heading);} .testimonial__meta{font-size:13px;color:var(--text-muted);} /* ---------- sobre ---------- */ .about{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-8); align-items:center; } .about__media{ aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--rose-200),var(--ink-900)); } .about__media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;} .about__facts{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); margin-top:var(--space-6); } .about__fact{ display:flex; align-items:center; gap:var(--space-2); font-size:14px; color:var(--text-muted); } .about__fact svg{width:18px;height:18px;color:var(--rose-500);flex-shrink:0;} /* ---------- filosofia (o que é parto humanizado) ---------- */ .philosophy{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); text-align:center; } .philosophy__icon{ width:48px;height:48px; border-radius:50%; background:var(--bg-accent-soft); color:var(--rose-700); display:flex;align-items:center;justify-content:center; margin-inline:auto; margin-bottom:var(--space-4); } .philosophy__icon svg{width:24px;height:24px;} .philosophy__item h3{font-size:18px;margin-bottom:var(--space-2);} .philosophy__item p{font-size:15px;color:var(--text-body);max-width:280px;margin-inline:auto;} /* ---------- timeline (como funciona) ---------- */ .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); } .timeline__item{ position:relative; padding-top:var(--space-6); border-top:2px solid var(--rose-400); } .timeline__number{ display:block; font-family:var(--font-display); font-size:32px; color:var(--rose-400); margin-bottom:var(--space-2); } .timeline__item h3{font-size:17px;margin-bottom:var(--space-2);} .timeline__item p{font-size:14px;color:var(--text-body);} /* ---------- FAQ ---------- */ .faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-3); } .faq__item{ background:var(--bg-surface); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-sm); } .faq__item summary{ cursor:pointer; font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--text-heading); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); } .faq__item summary::-webkit-details-marker{display:none;} .faq__item summary::after{ content:'+'; font-family:var(--font-sans); font-size:22px; color:var(--rose-500); flex-shrink:0; transition:transform var(--duration-base) var(--ease-standard); } .faq__item[open] summary::after{transform:rotate(45deg);} .faq__item p{ margin-top:var(--space-3); font-size:15px; color:var(--text-body); } /* ---------- localização ---------- */ .location{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--space-8); align-items:center; } .location__card{ aspect-ratio:4/3; border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--rose-200),var(--rose-400)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); color:var(--ink-900); } .location__card svg{width:40px;height:40px;} .location__card span{font-family:var(--font-display);font-size:20px;} /* ---------- diferenciais ---------- */ .diff{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-8); align-items:center; } .diff__media{ aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--rose-400),var(--ink-900)); } .diff__media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;} .diff__list{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);} .diff__item{display:flex;gap:var(--space-4);} .diff__item-icon{ width:32px;height:32px;flex-shrink:0; border-radius:50%; background:var(--bg-accent-soft); display:flex;align-items:center;justify-content:center; color:var(--rose-700); } .diff__item-icon svg{width:16px;height:16px;} .diff__item h3{font-size:17px;margin-bottom:4px;} .diff__item p{font-size:15px;color:var(--text-body);} /* ---------- CTA final ---------- */ .cta{ background:var(--ink-900); color:var(--rose-50); text-align:center; border-radius:var(--radius-lg); padding:var(--space-9) var(--space-6); } .cta .eyebrow{color:var(--dourado-claro);} .cta h2{color:var(--rose-50);font-size:var(--text-h1);margin-top:var(--space-3);} .cta p{color:var(--rose-200);max-width:520px;margin:var(--space-4) auto 0;font-size:var(--text-body-lg);} .cta__actions{margin-top:var(--space-7);} .cta .btn--primary{background:var(--dourado);color:var(--rose-50);} /* ---------- footer ---------- */ .footer{ background:var(--bg-surface-alt); padding-block:var(--space-8) var(--space-6); border-top:1px solid var(--border-subtle); } .footer__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-7); } .footer__logo{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);} .footer__logo img{height:36px;width:auto;} .footer__logo-text{font-family:var(--font-display);font-size:18px;color:var(--text-heading);} .footer p{font-size:14px;color:var(--text-muted);max-width:320px;} .footer h4{ font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--text-heading); margin-bottom:var(--space-4); } .footer__links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);} .footer__links a{font-size:14px;color:var(--text-muted);} .footer__links a:hover{color:var(--rose-700);} .footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-4);} .footer__social a{ width:36px;height:36px; border-radius:50%; background:var(--bg-surface); display:flex;align-items:center;justify-content:center; color:var(--ink-900); transition:background var(--duration-base) var(--ease-standard); } .footer__social a:hover{background:var(--bg-accent);color:var(--rose-50);} .footer__social svg{width:16px;height:16px;} .footer__bottom{ margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--border-subtle); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:13px; color:var(--text-muted); } /* ---------- blog: listagem ---------- */ .blog-hero{ padding-top:calc(var(--space-8) + 72px); padding-bottom:var(--space-7); text-align:center; } .blog-hero h1{font-size:var(--text-h1);margin-top:var(--space-3);} .blog-hero p{ margin:var(--space-4) auto 0; max-width:560px; font-size:var(--text-body-lg); color:var(--text-body); } .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .blog-card{ display:block; background:var(--bg-surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);} .blog-card__media{ aspect-ratio:16/10; background:linear-gradient(160deg,var(--rose-200),var(--rose-400)); } .blog-card__media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;} .blog-card__body{padding:var(--space-6);} .blog-card__body .eyebrow{margin-bottom:var(--space-3);} .blog-card__body h2{font-size:var(--text-h3);margin-bottom:var(--space-3);} .blog-card__body p{font-size:15px;color:var(--text-body);} .blog-card__read{ display:inline-block; margin-top:var(--space-4); font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--rose-700); } /* ---------- blog: artigo ---------- */ .article-hero{ padding-top:calc(var(--space-8) + 72px); padding-bottom:var(--space-7); } .article-hero__inner{max-width:760px;margin-inline:auto;text-align:center;} .article-hero h1{font-size:var(--text-h1);margin-top:var(--space-3);} .article-meta{ display:flex; justify-content:center; gap:var(--space-3); margin-top:var(--space-4); font-size:13px; color:var(--text-muted); } .article-cover{ aspect-ratio:21/9; max-width:960px; margin:0 auto var(--space-8); border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--rose-200),var(--ink-900)); } .article-cover img{width:100%;height:100%;object-fit:cover;object-position:center 15%;} .article{ max-width:680px; margin-inline:auto; padding-bottom:var(--space-9); } .article p{margin-top:var(--space-4);} .article h2{ font-size:var(--text-h2); margin-top:var(--space-8); margin-bottom:var(--space-3); } .article h3{ font-size:19px; margin-top:var(--space-6); margin-bottom:var(--space-2); } .article ul,.article ol{margin-top:var(--space-4);padding-left:20px;} .article li{margin-top:var(--space-2);} .article li::marker{color:var(--rose-400);} .article strong{color:var(--text-heading);font-weight:600;} .article blockquote{ margin:var(--space-6) 0; padding:var(--space-5) var(--space-6); background:var(--bg-surface); border-radius:var(--radius-lg); font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--text-heading); } .article-back{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--rose-700); margin-bottom:var(--space-6); } .article-back svg{width:16px;height:16px;} /* ---------- modal "onde agendar" (liquid glass) ---------- */ /* Markup injetado por js/main.js — intercepta todo link para o WhatsApp e oferece 3 destinos (Cascavel / Medianeira / Online) num único modal. */ .wa-modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-5); background:rgba(46,31,31,0.55); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity var(--duration-base) var(--ease-standard); } .wa-modal-overlay.is-open{opacity:1;pointer-events:auto;} .wa-modal{ position:relative; width:100%; max-width:380px; padding:var(--space-8) var(--space-6) var(--space-6); border-radius:28px; background:linear-gradient(165deg,rgba(110,74,73,0.72),rgba(51,34,34,0.88)); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border:1px solid rgba(255,255,255,0.14); box-shadow:0 24px 64px rgba(20,12,12,0.45), inset 0 1px 0 rgba(255,255,255,0.10); color:var(--rose-50); text-align:center; overflow:hidden; transform:translateY(12px) scale(0.97); transition:transform var(--duration-base) var(--ease-standard); } .wa-modal-overlay.is-open .wa-modal{transform:translateY(0) scale(1);} .wa-modal::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,0.22),transparent 60%); pointer-events:none; } .wa-modal__close{ position:absolute; top:var(--space-4); right:var(--space-4); width:32px;height:32px; border-radius:50%; background:rgba(255,255,255,0.08); border:none; color:var(--rose-50); display:flex;align-items:center;justify-content:center; cursor:pointer; transition:background var(--duration-fast) var(--ease-standard); } .wa-modal__close:hover{background:rgba(255,255,255,0.18);} .wa-modal__close svg{width:16px;height:16px;} .wa-modal__icon{ position:relative; width:52px;height:52px; border-radius:50%; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.14); display:flex;align-items:center;justify-content:center; margin:0 auto var(--space-5); color:var(--rose-50); } .wa-modal__icon svg{width:24px;height:24px;} .wa-modal h3{ position:relative; font-size:22px; color:var(--rose-50); margin-bottom:var(--space-2); } .wa-modal p{ position:relative; font-family:var(--font-sans); font-size:13px; color:rgba(255,247,245,0.72); margin-bottom:var(--space-6); } .wa-modal__options{ position:relative; display:flex; flex-direction:column; gap:var(--space-3); } .wa-modal__option{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); padding:14px 20px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:var(--rose-50); font-family:var(--font-sans); font-size:15px; font-weight:500; cursor:pointer; transition:background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .wa-modal__option:hover{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.32); transform:translateY(-1px); } @media (prefers-reduced-motion: reduce){ .wa-modal-overlay,.wa-modal,.wa-modal__option,.wa-modal__close{transition:none;} } /* ---------- WhatsApp flutuante ---------- */ .whatsapp-float{ position:fixed; bottom:var(--space-5); right:var(--space-5); z-index:90; width:56px;height:56px; border-radius:50%; background:var(--bg-accent); color:var(--rose-50); display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-lg); transition:background var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard); } .whatsapp-float:hover{background:var(--rose-500);color:var(--rose-50);transform:scale(1.05);} .whatsapp-float svg{width:26px;height:26px;} /* ---------- reveal on scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } [data-reveal].is-visible{ opacity:1; transform:translateY(0); } /* ---------- foco visível (acessibilidade) ---------- */ a:focus-visible, button:focus-visible{ outline:2px solid var(--rose-700); outline-offset:3px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} [data-reveal]{opacity:1;transform:none;transition:none;} .card,.btn,.btn__dot,.btn__label,.whatsapp-float{transition:none;} .blur-word{opacity:1;filter:none;transform:none;transition:none;} } /* ============================================ RESPONSIVO — mobile-first (breakpoints acima) ============================================ */ @media (max-width:960px){ .hero{min-height:0;display:block;} .hero__grid{grid-template-columns:1fr;} .hero__media{order:-1;aspect-ratio:16/10;} .services__grid{grid-template-columns:repeat(2,1fr);} .blog-grid{grid-template-columns:repeat(2,1fr);} .about{grid-template-columns:1fr;} .about__media{order:-1;aspect-ratio:16/10;} .philosophy{grid-template-columns:1fr;gap:var(--space-7);} .timeline{grid-template-columns:repeat(2,1fr);} .location{grid-template-columns:1fr;} .location__card{order:-1;aspect-ratio:16/9;} .testimonials__grid{ grid-template-columns:1fr; gap:var(--space-4); overflow-x:auto; display:flex; scroll-snap-type:x mandatory; padding-bottom:var(--space-3); } .testimonial{min-width:280px;scroll-snap-align:start;} .diff{grid-template-columns:1fr;} .diff__media{order:-1;aspect-ratio:16/10;} .footer__grid{grid-template-columns:1fr 1fr;} } @media (max-width:720px){ .header__nav{display:none;} .header__menu-toggle{display:block;} .header__actions{display:none;} .header__logo-text small{display:none;} .services__grid{grid-template-columns:1fr;} .blog-grid{grid-template-columns:1fr;} .timeline{grid-template-columns:1fr;} .timeline__item{padding-top:var(--space-4);} .faq__item{padding:var(--space-4) var(--space-5);} .faq__item summary{font-size:17px;} .footer__grid{grid-template-columns:1fr;gap:var(--space-6);} .hero{padding-top:calc(var(--space-8) + 64px);} .section{padding-block:var(--space-8);} .cta{padding:var(--space-8) var(--space-4);} }