/* Fontes self-hosted (subset PT) */ @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-600.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-700.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2');} /* ═══════════════════════════════════════════════════════════ DRA. FLÁVIA MAGALINI — Design System Agência Wood · Padrão multi-page (estrutura Bertoli) Paleta: azul-marinho + dourado (identidade da marca) ═══════════════════════════════════════════════════════════ */ :root { --azul: #1B3F6B; --azul-escuro: #0D2A4A; --azul-claro: #2E5FA3; --azul-suave: #EEF3FA; /* O site original não usa dourado — o destaque é AZUL. Mantemos os nomes de variável "dourado" apenas para não reescrever cada uso; o valor é azul. */ --dourado: #2E5FA3; --dourado-claro: #7FA8D9; --dourado-linha: rgba(46, 95, 163, .22); --branco: #FFFFFF; --cinza: #F5F6FA; --cinza-texto: #7881A7; --texto: #191F3A; /* Verde de CTA do site antigo (sólido + gradiente) */ --verde-wpp: #3FB343; --verde-wpp-escuro: #2F853B; --verde-grad-de: #64EE77; --verde-grad-ate: #2F853B; --serif: 'Sora', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; --sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --radius: 12px; --sombra: 0 4px 24px rgba(27, 63, 107, .10); --sombra-hover: 0 8px 40px rgba(27, 63, 107, .18); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 16px; color: var(--texto); background: var(--branco); line-height: 1.65; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--azul); } /* ─── REVEAL ─── Conteúdo é VISÍVEL por padrão. Só é ocultado (para animar) quando o JS confirma uma viewport funcional e adiciona .reveal-on ao . Se o JS falhar ou a viewport for inválida, o conteúdo nunca some. */ html.reveal-on .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; } html.reveal-on .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { html.reveal-on .reveal { opacity: 1; transform: none; transition: none; } } /* ─── NAV ─── */ nav.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--branco); padding: 0 max(5%, calc((100vw - 1180px) / 2)); height: 72px; display: flex; align-items: center; justify-content: space-between; transition: box-shadow .3s; } nav.topo.scrolled { box-shadow: 0 2px 20px rgba(27, 63, 107, .12); } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo img { height: 44px; width: auto; } .nav-logo-txt { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--azul); letter-spacing: .02em; text-decoration: none; } .nav-logo-txt span { color: var(--dourado); } .nav-links { display: flex; align-items: center; gap: 1.7rem; list-style: none; } .nav-links > li { position: relative; } .nav-links a { color: var(--texto); text-decoration: none; font-size: .82rem; font-weight: 500; letter-spacing: .04em; transition: color .2s; } .nav-links a:hover { color: var(--azul-claro); } .nav-drop-btn { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; } .nav-drop-btn::after { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); } .nav-drop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--branco); border-radius: var(--radius); box-shadow: var(--sombra-hover); padding: .6rem; min-width: 250px; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; border: 1px solid var(--azul-suave); } .nav-links li:hover .nav-drop, .nav-links li:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-drop a { display: block; padding: .55rem .9rem; border-radius: 8px; font-size: .82rem; } .nav-drop a:hover { background: var(--azul-suave); } .nav-cta { background: var(--verde-wpp); color: #fff !important; font-weight: 700; padding: .6rem 1.3rem; border-radius: 2rem; font-size: .8rem !important; display: inline-flex; align-items: center; gap: .45rem; transition: background .2s, transform .15s; } .nav-cta:hover { background: var(--verde-wpp-escuro); color: #fff !important; transform: translateY(-1px); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; border: none; background: none; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--azul); border-radius: 2px; transition: .3s; } .mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 99; background: var(--branco); flex-direction: column; padding: 1.2rem 1.5rem 1.6rem; gap: .95rem; border-top: 1px solid var(--azul-suave); box-shadow: 0 18px 32px rgba(27, 63, 107, .16); max-height: calc(100vh - 72px); overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--texto); text-decoration: none; font-size: 1.02rem; font-weight: 500; } .mobile-menu a:hover { color: var(--azul-claro); } .mobile-menu .mm-grupo { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cinza-texto); margin-top: .4rem; } .mobile-menu .nav-cta { justify-content: center; margin-top: .5rem; } /* ─── BOTÕES ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; text-decoration: none; font-weight: 700; font-size: .92rem; padding: .95rem 1.9rem; border-radius: 2.4rem; min-height: 48px; transition: transform .15s, box-shadow .2s, background .2s; } .btn-wpp { background: linear-gradient(180deg, var(--verde-grad-de) 0%, var(--verde-grad-ate) 100%); color: #fff; box-shadow: 0 8px 24px rgba(63, 179, 67, .32); } .btn-wpp:hover { background: linear-gradient(180deg, var(--verde-grad-ate) 0%, var(--verde-grad-ate) 100%); transform: translateY(-2px); } .btn-outline { border: 1.6px solid var(--azul); color: var(--azul); background: transparent; } .btn-outline:hover { background: var(--azul); color: #fff; } .btn-outline-claro { border: 1.6px solid rgba(255,255,255,.55); color: #fff; background: transparent; } .btn-outline-claro:hover { background: rgba(255,255,255,.12); } /* ─── WHATSAPP FLOAT ─── */ .wpp-float { position: fixed; bottom: 26px; right: 26px; z-index: 110; background: var(--verde-wpp); color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); transition: transform .2s; } .wpp-float:hover { transform: translateY(-3px) scale(1.05); } .wpp-float svg { width: 30px; height: 30px; fill: #fff; } /* ─── LAYOUT / SEÇÕES ─── */ .container { max-width: 1180px; margin: 0 auto; padding: 0 5%; } section { padding: 4.3rem 0; } .eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--dourado); margin-bottom: .9rem; } h1, h2, h3 { font-family: var(--serif); color: var(--azul-escuro); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; } h2.titulo { font-size: clamp(1.5rem, 2.5vw, 2.05rem); margin-bottom: .8rem; } h2.titulo em, h1 em { font-style: normal; color: var(--azul-claro); } .sub { color: var(--cinza-texto); font-size: .95rem; max-width: 620px; } .centro { text-align: center; } .centro .sub, .sub.centro { margin-left: auto; margin-right: auto; } .bg-suave { background: var(--azul-suave); } .bg-cinza { background: var(--cinza); } .bg-escuro { background: var(--azul-escuro); } .bg-escuro h2, .bg-escuro h3 { color: #fff; } .bg-escuro p { color: rgba(255,255,255,.75); } /* ─── HERO HOME ─── */ .hero { min-height: 82vh; display: grid; grid-template-columns: 1.22fr .88fr; gap: 2.6rem; align-items: center; padding: 7.5rem max(5%, calc((100vw - 1180px) / 2)) 3.5rem; background: linear-gradient(160deg, var(--branco) 55%, var(--azul-suave) 100%); } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--dourado-linha); background: rgba(201,169,110,.08); border-radius: 2rem; padding: .35rem 1rem; font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--azul); margin-bottom: 1.6rem; } .hero h1 { font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.15; margin-bottom: 1.1rem; } .hero .sub { margin-bottom: 2.2rem; } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; } .hero-provas { display: flex; gap: 2.2rem; flex-wrap: wrap; } .hero-prova strong { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--azul); } .hero-prova span { font-size: .78rem; color: var(--cinza-texto); } .hero-foto { position: relative; } .hero-foto img { border-radius: 16px; box-shadow: var(--sombra-hover); width: 100%; max-width: 420px; aspect-ratio: 3/4; object-fit: cover; object-position: center 18%; margin-left: auto; } .hero-foto-selo { position: absolute; bottom: 22px; left: 0; background: var(--branco); border-radius: var(--radius); box-shadow: var(--sombra); padding: .9rem 1.2rem; display: flex; align-items: center; gap: .7rem; font-size: .8rem; } .hero-foto-selo strong { color: var(--azul); display: block; font-size: .86rem; } /* ─── HERO LP (interna) ─── */ .hero-lp { position: relative; display: grid; grid-template-columns: 1.18fr .82fr; gap: 2.6rem; align-items: center; padding: 7.5rem max(5%, calc((100vw - 1180px) / 2)) 3.5rem; background: linear-gradient(160deg, var(--branco) 55%, var(--azul-suave) 100%); } .hero-lp-bg { display: none; } /* aposentada a imagem azul de centro cirúrgico */ .hero-lp-inner { max-width: 600px; } .hero-lp-foto img { width: 100%; max-width: 420px; margin-left: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 0 18px 18px 0; filter: drop-shadow(0 14px 30px rgba(27, 63, 107, .14)); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%); mask-image: linear-gradient(to right, transparent 0, #000 11%); } .crumb { font-size: .78rem; color: var(--cinza-texto); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .crumb a { color: var(--azul); text-decoration: none; } .crumb a:hover { text-decoration: underline; } .hero-lp .hero-badge { border-color: var(--dourado-linha); color: var(--azul); background: rgba(46,95,163,.08); } .hero-lp h1 { color: var(--azul-escuro); font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.16; margin-bottom: 1.1rem; } .hero-lp h1 em { color: var(--azul-claro); font-style: normal; } .hero-lp .sub { color: var(--cinza-texto); margin-bottom: 2.2rem; } /* ─── BAND CREDENCIAIS ─── */ .band { background: var(--azul-escuro); padding: 1.4rem 0; } .band-inner { display: flex; justify-content: center; align-items: center; gap: 2.8rem; flex-wrap: wrap; } .band-item { color: rgba(255,255,255,.85); font-size: .84rem; display: flex; align-items: center; gap: .55rem; } .band-item strong { color: var(--dourado-claro); font-weight: 700; } /* ─── CARDS ESPECIALIDADES / GRID ─── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .card { background: var(--branco); border-radius: var(--radius); padding: 1.7rem 1.4rem 1.5rem; text-align: center; box-shadow: var(--sombra); border: 1px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: var(--dourado-linha); } .card-icone { width: 52px; height: 52px; border-radius: 14px; background: var(--azul-suave); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; font-size: 1.4rem; } .card h3 { font-size: 1.12rem; margin-bottom: .9rem; text-align: center; } .card p { color: var(--cinza-texto); font-size: .85rem; line-height: 1.5; flex-grow: 0; } .card ul { list-style: none; margin: 0 auto 1.1rem; display: inline-block; text-align: left; } .card ul li { font-size: .82rem; padding: .18rem 0 .18rem 1.35rem; position: relative; color: var(--texto); } .card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--dourado); font-weight: 700; } .card .card-link { margin-top: auto; align-self: center; text-decoration: none; background: var(--azul); color: #fff; font-weight: 700; font-size: .78rem; padding: .68rem 1.25rem; border-radius: 2rem; min-height: 42px; display: inline-flex; align-items: center; gap: .45rem; box-shadow: 0 4px 14px rgba(27,63,107,.22); transition: background .2s, transform .15s, box-shadow .2s; } .card .card-link:hover { background: var(--azul-claro); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(27,63,107,.3); } /* nos cards que levam ao WhatsApp, mantém o verde para não competir com o azul de navegação */ .card .card-link.wpp { background: linear-gradient(180deg, var(--verde-grad-de) 0%, var(--verde-grad-ate) 100%); box-shadow: 0 4px 14px rgba(63,179,67,.28); } .card .card-link.wpp:hover { background: var(--verde-wpp-escuro); box-shadow: 0 6px 18px rgba(63,179,67,.36); } /* ─── EMPATIA / PAS ─── */ .empatia-box { max-width: 760px; margin: 0 auto; text-align: center; } .empatia-box p { font-size: 1.12rem; color: var(--texto); margin-bottom: 1.3rem; } .empatia-box p strong { color: var(--azul); } .empatia-destaque { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-style: italic; color: var(--azul); line-height: 1.4; margin: 2rem 0; } /* ─── TÉCNICAS NUMERADAS ─── */ .tecnica-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; } .tecnica-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--branco); border-radius: var(--radius); padding: 1.9rem 1.5rem; box-shadow: var(--sombra); min-height: 318px; border: 1px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; } .tecnica-item:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: var(--dourado-linha); } .tecnica-num { font-family: var(--serif); font-size: 1.9rem; color: var(--azul-claro); font-weight: 700; line-height: 1; margin-bottom: .7rem; } .tecnica-item h3 { font-size: 1.12rem; margin-bottom: .5rem; } .tecnica-item p { color: var(--cinza-texto); font-size: .85rem; line-height: 1.5; } .tecnica-tags { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; margin-top: .9rem; } .tecnica-tags span { background: var(--azul-suave); color: var(--azul); font-size: .7rem; font-weight: 600; padding: .28rem .7rem; border-radius: 2rem; } /* ─── JORNADA / PROTOCOLO ─── */ .jornada { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.8rem; } .jornada-step { background: var(--branco); border-radius: var(--radius); padding: 1.9rem 1.5rem; box-shadow: var(--sombra); position: relative; } .jornada-step:not(:last-child)::after { content: '›'; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%); font-size: 1.9rem; color: var(--dourado); font-weight: 600; z-index: 2; } .jornada-num { width: 42px; height: 42px; border-radius: 50%; background: var(--azul); color: var(--dourado-claro); font-family: var(--serif); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .jornada-step h3 { font-size: 1.06rem; margin-bottom: .45rem; } .jornada-step p { font-size: .86rem; color: var(--cinza-texto); } /* ─── SOBRE ─── */ .sobre-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.6rem; align-items: center; } .sobre-foto img { border-radius: var(--radius); box-shadow: var(--sombra-hover); } .sobre-citacao { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--azul); border-left: 3px solid var(--dourado); padding-left: 1.3rem; margin: 1.5rem 0; line-height: 1.5; } .sobre-lista { list-style: none; margin-top: 1.6rem; display: grid; gap: .8rem; } .sobre-lista li { display: flex; gap: .7rem; align-items: start; font-size: .94rem; } .sobre-lista li::before { content: '✓'; color: var(--azul-claro); font-weight: 700; flex-shrink: 0; } /* ─── VÍDEO ─── */ .video-wrap { max-width: 860px; margin: 2.6rem auto 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra-hover); position: relative; } .video-wrap video { width: 100%; display: block; } /* ─── DEPOIMENTOS ─── */ .dep-card { background: var(--branco); border-radius: var(--radius); padding: 2rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 1rem; } .dep-estrelas { color: var(--dourado); font-size: 1rem; letter-spacing: .18em; } .dep-texto { font-size: .95rem; color: var(--texto); font-style: italic; flex-grow: 1; } .dep-autor strong { color: var(--azul); display: block; font-size: .9rem; } .dep-autor span { font-size: .78rem; color: var(--cinza-texto); } /* ─── FAQ ─── */ .faq-lista { max-width: 780px; margin: 2.6rem auto 0; display: grid; gap: .9rem; } .faq-lista details { background: var(--branco); border-radius: var(--radius); box-shadow: var(--sombra); overflow: hidden; border: 1px solid transparent; transition: border-color .2s; } .faq-lista details[open] { border-color: var(--dourado-linha); } .faq-lista summary { cursor: pointer; padding: 1.25rem 3.4rem 1.25rem 1.5rem; font-weight: 600; font-size: .98rem; color: var(--azul-escuro); list-style: none; position: relative; min-height: 48px; } .faq-lista summary::-webkit-details-marker { display: none; } .faq-lista summary::after { content: '+'; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--dourado); font-weight: 400; transition: transform .25s; } .faq-lista details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-lista details p { padding: 0 1.5rem 1.4rem; color: var(--cinza-texto); font-size: .93rem; } /* ─── BLOG CARDS ─── */ .blog-card { background: var(--branco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; text-decoration: none; } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); } .blog-card img { height: 190px; object-fit: cover; width: 100%; } .blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex-grow: 1; } .blog-card-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dourado); } .blog-card h3 { font-size: 1.22rem; color: var(--azul-escuro); } .blog-card p { font-size: .86rem; color: var(--cinza-texto); flex-grow: 1; } .blog-card .ler { color: var(--azul); font-weight: 700; font-size: .82rem; } /* ─── ARTIGO (blog post) ─── */ .artigo-hero { padding: 9.5rem 0 3rem; background: var(--azul-suave); } .artigo-hero h1 { font-size: clamp(1.65rem, 2.9vw, 2.3rem); max-width: 780px; margin: .9rem 0 1rem; line-height: 1.18; } .artigo-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .82rem; color: var(--cinza-texto); align-items: center; } .artigo-meta strong { color: var(--azul); } .artigo-body { max-width: 780px; margin: 0 auto; padding: 3.5rem 5%; } .artigo-body > * + * { margin-top: 1.3rem; } .artigo-body h2 { font-size: 1.75rem; margin-top: 2.6rem; } .artigo-body h3 { font-size: 1.35rem; margin-top: 2rem; } .artigo-body ul, .artigo-body ol { padding-left: 1.4rem; } .artigo-body li + li { margin-top: .5rem; } .artigo-body img { border-radius: var(--radius); box-shadow: var(--sombra); margin: 2rem 0; } .artigo-body strong { color: var(--azul-escuro); } .tldr { background: var(--azul-suave); border-left: 3px solid var(--dourado); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.4rem 1.6rem; font-size: .97rem; } .tldr strong { color: var(--azul); } .alerta-box { background: #FDF6EC; border: 1px solid var(--dourado-linha); border-radius: var(--radius); padding: 1.3rem 1.5rem; font-size: .93rem; } .autor-bio { display: flex; gap: 1.3rem; align-items: center; background: var(--cinza); border-radius: var(--radius); padding: 1.6rem; margin-top: 3rem; } .autor-bio img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; } .autor-bio strong { color: var(--azul); display: block; font-size: 1rem; } .autor-bio p { font-size: .84rem; color: var(--cinza-texto); margin-top: .3rem; } .cta-artigo { background: var(--azul-escuro); border-radius: var(--radius); padding: 2.2rem; text-align: center; margin-top: 3rem; } .cta-artigo h3 { color: #fff; font-size: 1.5rem; margin-bottom: .6rem; } .cta-artigo p { color: rgba(255,255,255,.75); font-size: .92rem; margin-bottom: 1.4rem; } /* ─── CTA FINAL ─── */ .cta-final { background: linear-gradient(150deg, var(--azul-escuro) 0%, var(--azul) 100%); text-align: center; padding: 6rem 0; } .cta-final .eyebrow { color: var(--dourado-claro); } .cta-final h2 { color: #fff; font-size: clamp(1.55rem, 2.7vw, 2.15rem); margin-bottom: .8rem; } .cta-final p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 2.2rem; } .cta-final .hero-ctas { justify-content: center; } /* ─── FOOTER ─── */ footer { background: var(--azul-escuro); color: rgba(255,255,255,.72); padding: 4rem 0 2rem; font-size: .87rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.6rem; margin-bottom: 2.8rem; } .footer-logo img { height: 52px; width: auto; margin-bottom: 1.1rem; } footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.1rem; } footer ul { list-style: none; display: grid; gap: .6rem; } footer a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; } footer a:hover { color: var(--dourado-claro); } .footer-cred { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .9rem; } .footer-base { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .76rem; color: rgba(255,255,255,.5); } .aviso-legal { font-size: .74rem; color: rgba(255,255,255,.45); margin-top: 1.2rem; max-width: 900px; } /* ─── RESPONSIVO ─── */ @media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } .jornada { grid-template-columns: 1fr 1fr; } .jornada-step:not(:last-child)::after { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } section { padding: 3.8rem 0; } .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 7rem; gap: 2.4rem; } .hero-foto img { margin: 0 auto; } .hero-lp { min-height: auto; padding-top: 7.5rem; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .jornada { grid-template-columns: 1fr; } .sobre-grid { grid-template-columns: 1fr; gap: 2.2rem; } .tecnica-lista { grid-template-columns: 1fr; } .tecnica-item { min-height: auto; padding: 1.6rem 1.4rem; } .btn { width: 100%; } .hero-ctas { flex-direction: column; } .band-inner { gap: 1.1rem; flex-direction: column; align-items: flex-start; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-base { flex-direction: column; } .wpp-float { bottom: 18px; right: 18px; width: 56px; height: 56px; } .autor-bio { flex-direction: column; text-align: center; } } /* ─── Hero empilha mais cedo (evita H1 espremido na faixa tablet/laptop) ─── */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 6.5rem; gap: 1.8rem; } .hero-foto img { margin: 0 auto; } .hero h1 { font-size: clamp(1.9rem, 5.2vw, 2.4rem); } } /* ═══════════════ VÍDEO EM DESTAQUE (conteúdo das redes) ═══════════════ */ .video-destaque { background: linear-gradient(160deg, var(--azul-suave) 0%, #fff 100%); } .video-grid { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: center; } .video-grid .eyebrow { color: var(--azul-claro); } .video-destaque h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1rem; } .video-destaque .sub { margin-bottom: 1.6rem; } .video-frame { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-hover); cursor: pointer; background: #0b1a2e; } .video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-frame .video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5rem; padding-bottom: 1.2rem; background: linear-gradient(to top, rgba(11,26,46,.55) 0%, transparent 45%); transition: background .25s; } .video-frame:hover .video-play { background: linear-gradient(to top, rgba(11,26,46,.65) 0%, rgba(11,26,46,.1) 60%); } .video-play-btn { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .2s; } .video-frame:hover .video-play-btn { transform: scale(1.08); } .video-play-btn svg { width: 22px; height: 22px; fill: var(--azul); margin-left: 3px; } .video-play-label { color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.4); } /* Modal de vídeo (assistir com som) */ .video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(9,17,30,.86); backdrop-filter: blur(4px); } .video-modal.open { display: flex; } .video-modal-inner { position: relative; width: min(92vw, 400px); aspect-ratio: 9 / 16; max-height: 88vh; } .video-modal video { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; background: #000; } .video-modal-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s; } .video-modal-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; } .video-modal-close:hover { background: rgba(255,255,255,.28); } @media (max-width: 768px) { .video-grid { grid-template-columns: 1fr; gap: 1.8rem; } .video-grid .video-frame { max-width: 300px; } } /* ═══════════════ SLIDESHOW DE FOTOS (Sobre a Dra.) ═══════════════ */ .sobre-slides { position: relative; width: 100%; max-width: 420px; margin-left: auto; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-hover); background: var(--azul-suave); } .sobre-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0; transition: opacity 1.1s ease; } .sobre-slide.ativo { opacity: 1; } .sobre-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 7px; } .sobre-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s, transform .3s; border: none; padding: 0; cursor: pointer; } .sobre-dot.ativo { background: #fff; transform: scale(1.3); } /* ═══════════════ LOCALIZAÇÃO ═══════════════ */ .local-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center; } .local-info h3 { font-size: 1.15rem; margin-bottom: .4rem; } .local-lista { list-style: none; display: grid; gap: 1.1rem; margin: 1.4rem 0 1.8rem; } .local-lista li { display: flex; gap: .8rem; align-items: start; font-size: .92rem; } .local-lista li strong { display: block; color: var(--azul-escuro); font-size: .95rem; margin-bottom: .1rem; } .local-lista li span { color: var(--cinza-texto); } .local-mapa { border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); min-height: 320px; border: 1px solid var(--azul-suave); } .local-mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } @media (max-width: 768px) { .sobre-slides { margin: 0 auto; max-width: 320px; } .local-grid { grid-template-columns: 1fr; gap: 1.6rem; } } /* ═══════════════ CARDS DE VÍDEO (padrão José/Marco) — seção 2 das LPs ═══════════════ */ .video-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; } .vcard { background: var(--branco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; border: 1px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; } .vcard:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: var(--dourado-linha); } .vcard-thumb { position: relative; aspect-ratio: 4/5; overflow: hidden; cursor: pointer; background: #0b1a2e; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .vcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vcard-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,42,74,.18) 0%, transparent 35%, rgba(13,42,74,.52) 100%); } .vcard-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.93); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: transform .2s; } .vcard-thumb:hover .vcard-play { transform: translate(-50%,-50%) scale(1.09); } .vcard-play svg { width: 20px; height: 20px; fill: var(--azul); margin-left: 3px; } .vcard-body { padding: 1.2rem 1.2rem 1.4rem; display: flex; flex-direction: column; flex-grow: 1; text-align: center; } .vcard-body h3 { font-size: 1.02rem; margin-bottom: .6rem; } .vcard-body ul { list-style: none; margin: 0 auto .9rem; display: inline-block; text-align: left; } .vcard-body ul li { font-size: .8rem; color: var(--cinza-texto); padding: .16rem 0 .16rem 1.2rem; position: relative; } .vcard-body ul li::before { content: '✓'; position: absolute; left: 0; color: var(--azul-claro); font-weight: 700; } .vcard-body .btn { margin-top: auto; font-size: .8rem; padding: .7rem 1.1rem; min-height: 42px; } /* CTA dos cards de vídeo: azul da paleta (hierarquia secundária vs verde do WhatsApp) */ .vcard-body .btn-azul { background: var(--azul); color: #fff; box-shadow: 0 4px 14px rgba(27,63,107,.22); } .vcard-body .btn-azul:hover { background: var(--azul-claro); box-shadow: 0 6px 18px rgba(27,63,107,.3); transform: translateY(-2px); } /* Ícone do WhatsApp dentro dos botões de CTA */ .btn .ico-wpp { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; } /* ═══════════ AJUSTES MOBILE (legibilidade 40-70 anos + alvos de toque) ═══════════ */ @media (max-width: 768px) { /* textos maiores: público da Flávia tem 40-70 anos */ .card ul li { font-size: .92rem; padding: .3rem 0 .3rem 1.4rem; } .vcard-body ul li { font-size: .88rem; padding: .26rem 0 .26rem 1.2rem; } .vcard-body h3 { font-size: 1.08rem; } .vcard-body .btn { font-size: .88rem; min-height: 48px; } .card p { font-size: .92rem; } .sub { font-size: 1rem; } .local-lista li { font-size: .95rem; } .faq-lista summary { font-size: 1rem; } .faq-lista details p { font-size: .95rem; } /* alvos de toque >= 48px */ .nav-hamburger { padding: 14px; min-width: 44px; min-height: 44px; } .card .card-link { min-height: 48px; font-size: .86rem; padding: .8rem 1.4rem; } footer ul li a { display: flex; align-items: center; min-height: 44px; } footer ul li { min-height: 44px; display: flex; align-items: center; } .footer-base a { display: flex; align-items: center; min-height: 44px; } footer p { font-size: .9rem; } .footer-cred { font-size: .85rem; } .aviso-legal { font-size: .8rem; line-height: 1.55; } .nav-drop a { min-height: 44px; display: flex; align-items: center; } } /* ═══════ HERO MOBILE: H1 → texto → foto → botão ═══════ */ @media (max-width: 900px) { .hero { display: flex; flex-direction: column; } /* dissolve a coluna esquerda para poder ordenar os filhos junto com a foto */ .hero-left { display: contents; } .hero .hero-badge { order: 1; } .hero h1 { order: 2; } .hero .sub { order: 3; margin-bottom: 1.6rem; } .hero .hero-foto { order: 4; margin-bottom: 1.6rem; } .hero .hero-ctas { order: 5; margin-bottom: 0; } } /* Hero mobile compacto: cabe H1 + texto + foto + botão na mesma tela */ @media (max-width: 900px) { .hero { padding-top: 5.4rem; padding-bottom: 2.2rem; gap: 1.1rem; } .hero-badge { margin-bottom: .2rem; font-size: .64rem; padding: .3rem .8rem; } .hero h1 { font-size: clamp(1.6rem, 6.2vw, 2rem); line-height: 1.18; margin-bottom: .5rem; } .hero .sub { font-size: .92rem; line-height: 1.5; margin-bottom: .4rem; } /* foto em retrato maior (padrão dos outros sites), centralizada */ .hero-foto img { max-width: 340px; width: 100%; margin: 0 auto; aspect-ratio: 3/4; object-position: center 12%; border-radius: 16px; } .hero-ctas { gap: .7rem; } } /* ═══════════════ CARROSSEL DE AVALIAÇÕES ═══════════════ */ .aval-wrap { position: relative; margin-top: 2.2rem; } .aval-track { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .3rem .2rem 1.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .aval-track::-webkit-scrollbar { display: none; } .aval-card { flex: 0 0 clamp(260px, 84vw, 340px); scroll-snap-align: center; background: var(--branco); border-radius: var(--radius); padding: 1.5rem 1.4rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .8rem; border: 1px solid transparent; transition: box-shadow .25s, border-color .25s; } .aval-card:hover { box-shadow: var(--sombra-hover); border-color: var(--dourado-linha); } .aval-topo { display: flex; align-items: center; gap: .6rem; } .aval-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--azul-suave); color: var(--azul); font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; } .aval-nome { font-weight: 700; font-size: .92rem; color: var(--azul-escuro); line-height: 1.2; } .aval-meta { font-size: .76rem; color: var(--cinza-texto); } .aval-estrelas { color: #FBBC05; font-size: .95rem; letter-spacing: .1em; } .aval-texto { font-size: .9rem; color: var(--texto); line-height: 1.6; flex-grow: 1; } .aval-nav { display: flex; justify-content: center; gap: .7rem; margin-top: .2rem; } .aval-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.6px solid var(--dourado-linha); background: var(--branco); color: var(--azul); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; } .aval-btn:hover { background: var(--azul-suave); border-color: var(--azul-claro); } .aval-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .aval-google { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-size: .86rem; font-weight: 600; color: var(--azul); text-decoration: none; } .aval-google:hover { color: var(--azul-claro); } .aval-google svg { width: 17px; height: 17px; } @media (min-width: 900px) { .aval-card { flex-basis: 330px; } } /* ─── Resumo de avaliações + selo Google ─── */ .aval-resumo { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 1.6rem; } .aval-nota { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--azul-escuro); line-height: 1; } .aval-resumo .aval-estrelas { font-size: 1.1rem; } .aval-resumo-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--azul); text-decoration: none; } .aval-resumo-link:hover { text-decoration: underline; } .g-seal { width: 18px; height: 18px; flex: none; } .aval-topo { display: flex; align-items: center; gap: .7rem; } .aval-id { flex: 1; min-width: 0; } .aval-topo .g-seal { width: 20px; height: 20px; margin-left: auto; } .aval-nome { font-weight: 700; font-size: .92rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aval-meta { font-size: .76rem; color: var(--cinza-texto); } /* ═══════ HERO LP MOBILE — padrão da home: h1 → texto → foto → botão ═══════ */ @media (max-width: 900px) { /* menu só com logo + hambúrguer também no tablet */ .nav-links { display: none; } .nav-hamburger { display: flex; } .hero-lp { display: flex; flex-direction: column; grid-template-columns: none; min-height: auto; padding: 5.6rem 5% 2.4rem; } /* dissolve o wrapper de texto p/ ordenar seus filhos junto com a foto */ .hero-lp-inner { max-width: 100%; display: contents; } .hero-lp .crumb { order: 0; margin-bottom: .9rem; } .hero-lp .hero-badge { order: 1; align-self: center; text-align: center; margin-bottom: .6rem; } .hero-lp h1 { order: 2; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.18; margin-bottom: .6rem; } .hero-lp .sub { order: 3; font-size: 1rem; margin-bottom: 1.3rem; } .hero-lp-foto { order: 4; display: block; margin: 0 auto 1.4rem; max-width: 340px; width: 100%; } .hero-lp-foto img { width: 100%; max-width: 340px; aspect-ratio: 3/4; object-fit: cover; object-position: center 12%; border-radius: 16px; box-shadow: var(--sombra-hover); margin: 0 auto; -webkit-mask-image: none; mask-image: none; filter: none; } .hero-lp .hero-ctas { order: 5; gap: .7rem; } .hero-lp .btn-outline-claro { border-color: var(--azul); color: var(--azul); } .hero-lp .btn-outline-claro:hover { background: var(--azul); color: #fff; } } /* Crédito Agência Wood no rodapé */ .footer-wood { color: var(--azul); font-weight: 600; text-decoration: none; } .footer-wood:hover { text-decoration: underline; } /* Passo-a-passo: número e título centralizados no card */ .jornada-step { text-align: center; } .jornada-num { margin-left: auto; margin-right: auto; } .jornada-cta { text-align: center; margin-top: 2.6rem; } /* ═══════ MENU MOBILE — hambúrguer vira X, trava a rolagem, painel limpo ═══════ */ .nav-hamburger span { transition: transform .28s ease, opacity .2s ease; transform-origin: center; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.menu-aberto { overflow: hidden; } /* fundo não rola com o menu aberto */ .mobile-menu.open { display: flex; height: calc(100dvh - 72px); } /* painel limpo, sem invadir */ /* ═══════ TIPOGRAFIA MOBILE — mais legível, sem mexer no layout ═══════ */ @media (max-width: 768px) { .sub { font-size: 1rem; line-height: 1.55; } section p { font-size: 1rem; line-height: 1.62; } .jornada-step h3 { font-size: 1.12rem; } .jornada-step p { font-size: .95rem; line-height: 1.5; } .card ul li { font-size: .96rem; } .aval-texto { font-size: 1rem; line-height: 1.55; } .aval-nome { font-size: .98rem; } .aval-meta { font-size: .82rem; } .faq-lista summary { font-size: 1rem; } .faq-lista details > p, .faq-lista details p { font-size: .96rem; line-height: 1.55; } .crumb { font-size: .82rem; } .hero-lp .sub { font-size: 1rem; } .local-lista li, .footer-links a, footer p { font-size: .95rem; } } /* Badge do hero da LP: pill centralizado no mobile */ @media (max-width: 900px) { .hero-lp .hero-badge { align-self: center; text-align: center; } } /* Home: foto do hero dissolve no fundo claro pela esquerda (desktop) */ @media (min-width: 901px) { .hero-foto img { border-radius: 0 18px 18px 0; box-shadow: none; filter: drop-shadow(0 14px 30px rgba(27, 63, 107, .14)); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%); mask-image: linear-gradient(to right, transparent 0, #000 11%); } }