/* ========================================================= Núcleo Fogo Sagrado — Home As variáveis de design (cores, fontes, temas) moraram aqui e agora ficam em css/variaveis.css, compartilhado com futuras páginas do site. Este arquivo assume que variaveis.css já foi carregado antes dele (ver no do index.html). ========================================================= */ /* ================= RESET ================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* header fixo cobre o topo de qualquer âncora sem isto — o valor é maior que a altura do header (~73px) de propósito, pra sobrar respiro em vez de colar o conteúdo (ex: fotos dos cards) na borda dele */ scroll-padding-top: 7rem; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--navy-deep); font-weight: 600; } p { margin: 0; } button { font: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 1.75rem; } @media (max-width: 640px) { .container { padding: 0 1.25rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================= REVEAL-ON-SCROLL ================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); } /* ================= HEADER / NAV ================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--theme-bg); border-bottom: 1px solid var(--theme-border); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; transition: padding 0.3s var(--ease); } .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35); } .site-header.is-scrolled .container { padding-top: 0.7rem; padding-bottom: 0.7rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.01em; text-decoration: none; color: var(--theme-fg); flex-shrink: 0; } .brand img { width: 38px; height: auto; flex-shrink: 0; } .brand .logo-on-light { display: none; } [data-theme="b"] .brand .logo-on-dark { display: none; } [data-theme="b"] .brand .logo-on-light { display: block; } .nav-links { display: flex; align-items: center; gap: 1.8rem; } .nav-links a { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--theme-fg); opacity: 0.85; position: relative; padding-bottom: 0.2rem; transition: opacity 0.2s ease, color 0.2s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--fire); transition: right 0.3s var(--ease); } .nav-links a:hover, .nav-links a.is-active { opacity: 1; color: var(--fire); } .nav-links a:hover::after, .nav-links a.is-active::after { right: 0; } .nav-toggle { display: none; position: relative; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--theme-border); background: transparent; color: var(--theme-fg); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle svg { width: 20px; height: 20px; } .nav-toggle .icon-close { display: none; } .nav-open .nav-toggle .icon-burger { display: none; } .nav-open .nav-toggle .icon-close { display: block; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav-links { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--theme-bg); padding: 6.5rem 1.75rem 2.5rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .nav-open .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-links a { width: 100%; padding: 0.95rem 0; border-bottom: 1px solid var(--theme-border); font-size: 0.85rem; } } /* ================= HERO ================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 5rem; overflow: hidden; background: var(--cream); } .hero-glow { position: absolute; inset: 0; pointer-events: none; will-change: transform; } .hero-glow::before, .hero-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); } .hero-glow::before { width: 640px; height: 640px; right: -220px; top: -180px; background: radial-gradient( circle at 30% 30%, rgba(var(--navy-mid-rgb), 0.28), rgba(var(--navy-mid-rgb), 0) 70% ); } .hero-glow::after { width: 480px; height: 480px; left: -180px; bottom: -220px; background: radial-gradient( circle at 60% 60%, rgba(var(--fire-rgb), 0.22), rgba(var(--fire-rgb), 0) 70% ); } /* camada de fotos ambiente — desktop (Proposta B2): 14 fotos soltas em 3 raias fixas x 3 bandas verticais, timing calculado pra nunca sobrepor espacialmente as que ficam visíveis ao mesmo tempo. Só aparece acima de 900px (ver media query abaixo); no mobile quem assume é .hero-marquee-top/.hero-marquee-bottom. */ .hero-photos { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-photo { position: absolute; display: block; width: auto; height: auto; /* nunca corta a foto: a imagem escala mantendo a proporção, limitada só por estas duas bordas */ max-width: var(--w, 360px); max-height: 38vh; border-radius: var(--radius-md); box-shadow: 0 20px 40px -20px rgba(var(--ink-rgb), 0.35); opacity: 0; animation: heroPhotoFade var(--dur, 21s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes heroPhotoFade { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 6% { opacity: var(--peak, 0.26); transform: scale(1.04) rotate(var(--rot, 0deg)); } 14% { opacity: var(--peak, 0.26); transform: scale(1.04) rotate(var(--rot, 0deg)); } 22% { opacity: 0; transform: scale(1) rotate(0deg); } } /* camada de fotos ambiente — mobile (Proposta I4): duas faixas de carrossel contínuo (uma acima, uma abaixo do texto), cada uma com 10 fotos únicas dobradas pra dar loop sem costura, em direções opostas. Escondida por padrão; só aparece ≤900px (ver media query abaixo). */ .hero-marquee-top, .hero-marquee-bottom { display: none; position: absolute; left: 0; right: 0; height: 15vh; z-index: 0; overflow: hidden; align-items: center; pointer-events: none; mask-image: linear-gradient( to right, transparent 0%, black 16%, black 84%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, black 16%, black 84%, transparent 100% ); } .hero-marquee-top { top: 7.5rem; } .hero-marquee-bottom { bottom: 2.5rem; } .hero-marquee-track { display: flex; align-items: center; gap: 0.8rem; will-change: transform; } .hero-marquee-top .hero-marquee-track { animation: heroMarqueeSlide 90s linear infinite; } .hero-marquee-bottom .hero-marquee-track { animation: heroMarqueeSlideReverse 90s linear infinite; } .hero-marquee-img { height: 11.25vh; width: auto; max-width: none; flex-shrink: 0; border-radius: var(--radius-sm); box-shadow: 0 6px 12px -8px rgba(var(--ink-rgb), 0.4); opacity: 0.65; } @keyframes heroMarqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes heroMarqueeSlideReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (max-width: 900px) { .hero-photos { display: none; } /* carrosséis .hero-marquee-top/.hero-marquee-bottom desativados no mobile: permanecem display: none (regra padrão acima). */ } @media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; opacity: 0; } .hero-marquee-track { animation: none; } .hero-marquee-img { opacity: 0; } } /* pausa as duas camadas quando o hero sai da viewport (ver IntersectionObserver em main.js) */ .hero.is-hero-paused .hero-photo, .hero.is-hero-paused .hero-marquee-track { animation-play-state: paused; } .hero-inner { position: relative; z-index: 1; max-width: 760px; } /* halo na cor do fundo do hero, garantindo legibilidade caso uma .hero-photo apareça com opacidade mais alta bem atrás do texto */ .hero-inner .eyebrow, .hero h1, .hero-sub, .scroll-cue { text-shadow: 0 0 6px var(--cream), 0 0 6px var(--cream), 0 0 6px var(--cream), 0 0 6px var(--cream); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gold-classic); margin-bottom: 1.4rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--fire-gradient); } .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.18; font-weight: 600; margin-bottom: 1.5rem; } .hero h1 em { font-style: italic; color: var(--navy-mid); } .hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 54ch; line-height: 1.75; margin-bottom: 2.4rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; } .scroll-cue { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--gold-classic), transparent); position: relative; overflow: hidden; } .scroll-cue .line::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--fire); animation: scrollcue 1.8s var(--ease) infinite; } @keyframes scrollcue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* ================= BUTTONS ================= */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.9rem; border-radius: 100px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease); } .btn-fire { background: var(--gold-classic); color: var(--white); box-shadow: 0 8px 24px -8px rgba(var(--fire-rgb), 0.55); } .btn-fire:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 40px -10px rgba(var(--fire-rgb), 0.8); filter: brightness(1.08); } .btn-outline { background: var(--cream); border-color: rgba(var(--ink-rgb), 0.25); color: var(--ink); } .btn-outline:hover { border-color: var(--fire); color: var(--gold-classic); } .btn-solid-navy { background: var(--navy-deep); color: var(--white); box-shadow: 0 8px 24px -8px rgba(var(--navy-deep-rgb), 0.45); } .btn-solid-navy:hover { transform: translateY(-2px); filter: brightness(1.3); } .btn-ghost { background: transparent; border: none; color: var(--ink); padding: 0.4rem 0.1rem; border-radius: 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.3); } .btn-ghost:hover { color: var(--gold-classic); border-color: var(--gold-classic); } .btn-lg { padding: 1.1rem 2.5rem; font-size: 0.98rem; } /* ================= SECTION SHELL ================= */ .section { position: relative; padding: 6.5rem 0; } .section-light { background: var(--cream); } .section-white { background: var(--white); } .section-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; } .section-head .eyebrow { justify-content: center; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.28; } .section-head p { margin-top: 1rem; color: var(--ink-soft); line-height: 1.75; } /* ================= TIMELINE / SCROLLYTELLING ================= */ .timeline-intro { max-width: 700px; margin: 0 auto 4.5rem; text-align: center; } .timeline { position: relative; max-width: 1040px; margin: 0 auto; } .timeline-spine { position: absolute; /* fica no vão entre a coluna do numeral (act-heading) e a coluna dos bullets (act-items), passando pelo centro do bullet de 12px: recuo do .ato + largura do act-heading + metade do gap */ left: calc(3.6rem + 230px + 2.75rem + 6px); top: 0; bottom: 0; width: 2px; background: rgba(var(--ink-rgb), 0.1); } .timeline-spine-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--fire-gradient); box-shadow: 0 0 16px rgba(var(--fire-rgb), 0.55); transition: height 0.15s linear; } .ato { position: relative; padding: 3.5rem 0; padding-left: 3.6rem; } /* grid: número/título do ato à direita da espinha, eventos ao lado */ .act-grid { display: grid; grid-template-columns: 230px 1fr; gap: 2.75rem; align-items: start; } .act-heading { position: relative; } .act-number { display: block; font-family: var(--font-display); font-size: 4.6rem; line-height: 1; color: rgba(var(--navy-mid-rgb), 0.14); margin-bottom: 0.3rem; } .act-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--navy-deep); } .act-subtitle { margin-top: 0.5rem; font-family: var(--font-display); font-style: italic; color: var(--ink-soft); } @media (min-width: 901px) { .act-heading { position: sticky; top: 8rem; } } .act-items { display: flex; flex-direction: column; gap: 3.2rem; } .event { position: relative; padding-left: 2rem; } .event-node { position: absolute; left: 0; top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .event.is-visible .event-node { border-color: var(--fire); box-shadow: 0 0 0 5px rgba(var(--fire-rgb), 0.16); } .event-date { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--navy-mid); margin-bottom: 0.4rem; } .event h3 { font-size: 1.18rem; margin-bottom: 0.6rem; color: var(--navy-deep); } .event p { color: var(--ink-soft); line-height: 1.75; max-width: 62ch; } .event blockquote { margin: 1rem 0 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 2px solid var(--fire); font-family: var(--font-display); font-style: italic; color: var(--navy-mid); font-size: 1.02rem; line-height: 1.6; } .event-photos { display: flex; gap: 0.55rem; margin-top: 1.3rem; flex-wrap: wrap; } .event-photos img { width: 160px; height: 118px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 14px 28px -16px rgba(var(--ink-rgb), 0.4); transition: transform 0.85s var(--ease), box-shadow 0.85s var(--ease); } .event-photos img:hover { position: relative; z-index: 5; transform: scale(2); box-shadow: 0 30px 60px -20px rgba(var(--ink-rgb), 0.55); } @media (max-width: 900px) { .hide-mobile { display: none !important; } } img.align-photo-top { object-position: top; } img.align-photo-center-top { object-position: 50% 25%; } .event-photo-single img { width: 100%; max-width: 360px; height: 220px; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 18px 34px -18px rgba(var(--ink-rgb), 0.4); } /* stats callout dentro do Ato IV */ .stats-row { display: flex; gap: 2.5rem; margin: 1.6rem 0 0; flex-wrap: wrap; } .stat { min-width: 140px; } .stat-num { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.7rem); font-weight: 600; color: var(--gold-classic); line-height: 1; } .stat-label { display: block; margin-top: 0.4rem; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } /* fechamento "Nos dias de hoje" (vive dentro de um .ato, herda o recuo do pai) */ .today { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.8rem; align-items: center; } .today > div:first-child { /* mesmo recuo do texto dos eventos (.event{padding-left:2rem}), pra não ficar embaixo da espinha */ padding-left: 2rem; } .today-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(var(--ink-rgb), 0.45); } .today h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 1rem; } .today p { color: var(--ink-soft); line-height: 1.8; margin-bottom: 1rem; } .today .signature { display: block; margin-top: 1.6rem; font-family: var(--font-display); font-style: italic; color: var(--navy-mid); } @media (max-width: 760px) { .today { grid-template-columns: 1fr; } } /* rail de progresso fixo (desktop) */ .ato-rail { position: fixed; left: 2.1rem; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .ato-rail.is-active { opacity: 1; pointer-events: auto; } .ato-rail button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(var(--ink-rgb), 0.22); cursor: pointer; padding: 0; transition: background 0.3s ease, transform 0.3s ease; } .ato-rail button.is-current { background: var(--fire); transform: scale(1.5); } @media (max-width: 1180px) { .ato-rail { display: none; } } @media (max-width: 900px) { .act-grid { grid-template-columns: 1fr; gap: 0.75rem; } .act-heading { /* sai do recuo do .ato e ocupa a largura toda, centralizado, pra não ficar embaixo da espinha */ position: static; margin: 0 0 1.6rem -3.6rem; width: calc(100% + 3.6rem); text-align: center; } .act-heading .eyebrow { justify-content: center; } .act-number { font-size: 3rem; } .timeline-spine { left: calc(3.6rem + 6px); } .event-photos { justify-content: center; } .event-photos img:hover { transform: none; box-shadow: 0 14px 28px -16px rgba(var(--ink-rgb), 0.4); } } @media (max-width: 640px) { .ato { padding-left: 1.6rem; } .event { padding-left: 1.6rem; } .timeline-spine { left: calc(1.6rem + 6px); } .act-heading { margin-left: -1.6rem; width: calc(100% + 1.6rem); } } /* ================= INTERLÚDIO EM VÍDEO ================= */ .interlude { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--navy-deep); } .interlude-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .interlude-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(var(--navy-deep-rgb), 0.75) 0%, rgba(var(--navy-deep-rgb), 0.55) 50%, rgba(var(--navy-deep-rgb), 0.8) 100% ); } .interlude-quote { position: relative; z-index: 2; max-width: 720px; text-align: center; margin: 0 auto; padding: 5rem 1.5rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--white); line-height: 1.5; } .interlude-shout { display: block; margin-top: 9rem; font-style: normal; font-weight: 600; font-size: 1.3em; letter-spacing: 0.02em; color: var(--fire); } /* ================= TÉCNICA ================= */ .tecnica { display: grid; grid-template-columns: 1fr 0.62fr; gap: 3.5rem; align-items: start; max-width: 980px; margin: 0 auto; } .tecnica p { color: var(--ink-soft); line-height: 1.85; margin-bottom: 1.2rem; } .tecnica p:last-child { margin-bottom: 0; } .tecnica-photo { margin-bottom: 1.6rem; border-radius: var(--radius-md); overflow: hidden; } .tecnica-photo img { width: 100%; height: 260px; object-fit: cover; } .tecnica-book { background: var(--cream); border-radius: var(--radius-md); padding: 1.8rem; text-align: center; border: 1px solid rgba(var(--ink-rgb), 0.08); } .tecnica-book img { width: 100%; max-width: 190px; margin: 0 auto 1rem; border-radius: 6px; box-shadow: 0 20px 40px -20px rgba(var(--ink-rgb), 0.5); } .tecnica-book p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; } .tecnica-book .btn { margin-top: 1.2rem; } @media (max-width: 780px) { .tecnica { grid-template-columns: 1fr; } .tecnica-book { max-width: 320px; margin: 0 auto; } } /* ================= OFERTAS ================= */ .offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 1080px; margin: 0 auto; } .offer-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(var(--ink-rgb), 0.08); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); text-decoration: none; display: block; } .offer-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(var(--ink-rgb), 0.35); } .offer-photo { height: 190px; overflow: hidden; } .offer-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .offer-card:hover .offer-photo img { transform: scale(1.06); } .offer-body { padding: 1.6rem 1.6rem 1.9rem; } .offer-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--gold-classic); display: block; margin-bottom: 0.5rem; } .offer-body h3 { font-size: 1.15rem; margin-bottom: 0.55rem; } .offer-body p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; } .offer-body .offer-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.78rem; font-weight: 700; color: var(--navy-mid); text-decoration: none; } .offers-note { text-align: center; margin-top: 2.5rem; color: var(--ink-soft); font-size: 0.88rem; } @media (max-width: 900px) { .offers-grid { grid-template-columns: 1fr; max-width: 440px; } } /* ================= QUOTE / CTA ================= */ .quote-section { background: var(--navy-deep); color: var(--white); padding: 6rem 0; text-align: center; position: relative; overflow: hidden; } .quote-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 0%, rgba(var(--fire-rgb), 0.18), transparent 60% ); pointer-events: none; } .quote-section .container { position: relative; } .quote-eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--fire); margin-bottom: 1.3rem; } .quote-section blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.3rem); line-height: 1.4; max-width: 820px; margin: 0 auto 2.3rem; } .quote-attr { display: block; font-size: 0.82rem; color: rgba(var(--cream-rgb), 0.7); margin-bottom: 2.4rem; } /* ================= FORMULÁRIO / CONTATO ================= */ .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; max-width: 1040px; margin: 0 auto; align-items: start; } .contact-info h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.1rem; } .contact-info p { color: var(--ink-soft); line-height: 1.8; margin-bottom: 1.8rem; } .contact-detail { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0; border-top: 1px solid rgba(var(--ink-rgb), 0.1); font-size: 0.92rem; } .contact-detail:last-of-type { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); } .contact-detail strong { color: var(--navy-deep); font-weight: 600; } .contact-detail a { text-decoration: none; } .contact-detail a:hover { color: var(--gold-classic); } .contact-form { background: var(--white); border-radius: var(--radius-lg); padding: 2.4rem; border: 1px solid rgba(var(--ink-rgb), 0.08); box-shadow: 0 30px 60px -34px rgba(var(--ink-rgb), 0.35); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem; } .field input, .field textarea { width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), 0.18); font-family: var(--font-body); font-size: 0.94rem; color: var(--ink); background: var(--cream); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-classic); box-shadow: 0 0 0 3px rgba(var(--gold-classic-rgb), 0.18); } .field textarea { resize: vertical; min-height: 96px; } .checks { margin: 1.4rem 0 1.6rem; display: flex; flex-direction: column; gap: 0.65rem; } .check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer; } .check input { margin-top: 0.2rem; accent-color: var(--gold-classic); width: 16px; height: 16px; flex-shrink: 0; } .form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .form-note { font-size: 0.76rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.5; } .form-feedback { display: none; margin-top: 1.1rem; padding: 0.85rem 1.1rem; border-radius: 10px; font-size: 0.86rem; font-weight: 600; } .form-feedback.is-visible { display: block; } .form-feedback.is-success { background: rgba(var(--navy-mid-rgb), 0.12); color: var(--navy-mid); } .form-feedback.is-error { background: rgba(179, 38, 30, 0.1); color: #b3261e; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } .contact-form { padding: 1.6rem; } } /* ================= RODAPÉ ================= */ .site-footer { position: relative; background: var(--theme-bg); color: var(--theme-fg-soft); padding: 3.6rem 0 1.75rem; transition: background 0.4s var(--ease), color 0.4s var(--ease); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fire-gradient); } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.2rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--theme-border); } .footer-logo { width: 200px; height: auto; margin-bottom: 1.2rem; } .site-footer p { font-size: 0.87rem; line-height: 1.7; margin: 0; } .footer-col h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fire); margin: 0 0 0.9rem; font-weight: 700; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.86rem; } .footer-col ul a { text-decoration: none; } .footer-col ul a:hover { color: var(--fire); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between; align-items: center; font-size: 0.76rem; color: var(--theme-fg-soft); opacity: 0.85; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.9rem; } } /* ================= WHATSAPP FAB ================= */ .wa-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: flex; align-items: center; gap: 0.6rem; background: #25d366; color: #fff; text-decoration: none; padding: 0.85rem 1.1rem; border-radius: 100px; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.45); font-size: 0.85rem; font-weight: 600; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .wa-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.5); } .wa-fab svg { width: 22px; height: 22px; flex-shrink: 0; } .wa-fab .wa-text { white-space: nowrap; } @media (max-width: 640px) { .wa-fab .wa-text { display: none; } .wa-fab { padding: 0.85rem; } } /* ================= VOLTAR AO TOPO ================= */ .back-to-top { position: fixed; right: 1.5rem; bottom: 5.75rem; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cream); background: var(--navy-deep); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 14px 28px -14px rgba(var(--ink-rgb), 0.5); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease); } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { filter: brightness(1.3); transform: translateY(-3px); } .back-to-top svg { width: 20px; height: 20px; } @media (max-width: 640px) { .back-to-top { right: 1rem; bottom: 5.5rem; width: 42px; height: 42px; } } /* ================= UTIL ================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }