/* * ============================================================ * REAVIVA — MODERN OVERRIDE (Premium Clínico) * Atualização visual 2026 * Carregado APÓS style.css para sobrescrever com segurança. * * Este arquivo é a versão CSS compilada das mudanças feitas * em tokens.less e structure.less. Quando o LESS for * recompilado, este arquivo pode ser removido e a classe * `.modernized` em pode ser descartada. * ============================================================ */ /* ---------- 1. TOKENS (variáveis globais) ---------- */ /* * PALETA OFICIAL REAVIVA — iv-reaviva (manual da marca) * Primary: Turquesa #0EA5B7 (institucional, CTAs, títulos) * Accent: Amarelo #FFC300 (eyebrow, badges, acentos) * Texto: Navy #2B3342 (corpo em fundos claros) */ :root { /* PRIMARY — Turquesa oficial REAVIVA */ --rv-primary: #0EA5B7; --rv-primary-deep: #087990; --rv-primary-soft: #D5F2F7; /* ACCENT — Amarelo oficial REAVIVA */ --rv-accent: #FFC300; --rv-accent-deep: #E0A800; --rv-accent-soft: #FEF2CC; /* Aliases para compatibilidade interna */ --rv-secondary: #FFC300; --rv-secondary-soft: #FEF2CC; /* Neutros (navy/grafite da iv-reaviva) */ --rv-ink: #2B3342; --rv-ink-soft: #3F4A5C; --rv-muted: #6B7280; --rv-line: #E5E9EC; --rv-surface: #FFFFFF; --rv-bg: #F7FBFA; /* Coral de sinalização (uso restrito — citações/divisores emocionais) */ --rv-coral: #F28B7D; /* Fontes REAVIVA (iv-reaviva com fallbacks Google Fonts) */ --font-principal: 'Nunito Sans', 'Vista Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-secundaria: 'Open Sans', 'Aller', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Sombras (baseadas no turquesa oficial) */ --rv-shadow-sm: 0 2px 8px -2px rgba(14, 165, 183, 0.06); --rv-shadow-md: 0 8px 24px -8px rgba(14, 165, 183, 0.14); --rv-shadow-lg: 0 18px 48px -12px rgba(14, 165, 183, 0.18); --rv-shadow-brand: 0 10px 28px -8px rgba(14, 165, 183, 0.38); --rv-shadow-accent: 0 10px 28px -8px rgba(255, 195, 0, 0.40); --rv-shadow-ring: 0 0 0 4px rgba(14, 165, 183, 0.15); /* Raios */ --rv-radius-sm: 0.8rem; --rv-radius-md: 1.2rem; --rv-radius-lg: 1.8rem; --rv-radius-xl: 2.4rem; --rv-radius-pill: 999rem; /* Gradientes */ --rv-gradient: linear-gradient(135deg, #0EA5B7 0%, #087990 100%); --rv-gradient-accent: linear-gradient(135deg, #FFC300 0%, #E0A800 100%); /* Transições */ --rv-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Override de variáveis do sistema existente */ --btn-border-radius: var(--rv-radius-pill); --link-hover-color: var(--rv-accent-deep); --body-font-weight: 400; } /* ---------- Tipografia REAVIVA (iv-reaviva) ---------- */ body, body p, body li, body td, body input, body textarea, body select, body button { font-family: var(--font-secundaria); } h1, h2, h3, h4, h5, h6, .title, .eyebrow, .btn, nav, .menu, .section-title { font-family: var(--font-principal); letter-spacing: -0.005em; } h1, h2, h3 { color: var(--rv-primary); font-weight: 700; } h4, h5, h6 { color: var(--rv-ink); font-weight: 600; } p, li { color: var(--rv-ink-soft); line-height: 1.6; } html { scroll-behavior: smooth; } body { background: var(--rv-bg); color: var(--rv-ink-soft); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tipografia — refinamentos globais */ .title, h1.title, h2.title, h3.title { color: var(--rv-ink) !important; letter-spacing: -0.015em; text-shadow: none !important; } .title-display { color: var(--rv-ink) !important; letter-spacing: -0.025em; text-shadow: none !important; font-weight: 700; line-height: 1.05; } .subtitle { color: var(--rv-ink-soft); letter-spacing: -0.01em; } p, li { color: var(--rv-ink-soft); } /* ---------- Transição sutil no carregamento da página ---------- */ @keyframes rvPageIn { from { opacity: 0; } to { opacity: 1; } } .v2-hero { animation: rvPageIn 0.45s var(--rv-ease) both; } @media (prefers-reduced-motion: reduce) { .v2-hero { animation: none; } } /* Eyebrow — pretitle moderno (mantém verde como assinatura Reaviva) */ .rv-eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1.4rem; background: var(--rv-accent-soft); color: var(--rv-accent-deep); border-radius: var(--rv-radius-pill); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem; } .rv-eyebrow::before { content: ""; width: 1.2rem; height: 0.2rem; background: var(--rv-accent-deep); border-radius: 99px; } /* ---------- 2. BOTÕES — todos padrão pill, hover elevado ---------- */ .btn { border-radius: var(--rv-radius-pill) !important; transition: all 0.25s var(--rv-ease); font-weight: 600 !important; letter-spacing: 0.01em; position: relative; overflow: hidden; white-space: nowrap; } .btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: var(--rv-shadow-md) !important; } .btn i { transition: transform 0.3s var(--rv-ease); } .btn:hover i { transform: translateX(2px); } /* Primary (navy institucional) — CTA principal */ .btn-primary, .btn.btn-primary { background: var(--rv-gradient) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--rv-shadow-brand); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #087990 0%, #064A5C 100%) !important; color: #fff !important; box-shadow: 0 14px 32px -8px rgba(4, 62, 77, 0.5) !important; } /* Black — convertido para navy premium */ .btn-black, .btn.btn-black { background: var(--rv-gradient) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--rv-shadow-brand); } .btn-black:hover, .btn-black:focus { background: linear-gradient(135deg, #087990 0%, #064A5C 100%) !important; color: #fff !important; box-shadow: 0 14px 32px -8px rgba(4, 62, 77, 0.5) !important; } /* Accent — botão amarelo/ouro (para CTAs secundários ou destaque vivo) */ .btn-accent, .btn.btn-accent { background: var(--rv-gradient-accent) !important; color: var(--rv-primary) !important; border-color: transparent !important; box-shadow: var(--rv-shadow-accent); } .btn-accent:hover, .btn-accent:focus { background: linear-gradient(135deg, #E0A800 0%, #9E7A00 100%) !important; color: var(--rv-primary-deep) !important; box-shadow: 0 14px 32px -8px rgba(224, 168, 0, 0.5) !important; } /* Outline refinado */ .btn-outline-primary, .btn.btn-outline-primary { background: transparent !important; color: var(--rv-primary) !important; border: 2px solid var(--rv-primary) !important; } .btn-outline-primary:hover { background: var(--rv-primary-soft) !important; color: var(--rv-primary-deep) !important; border-color: var(--rv-primary-deep) !important; } /* Secondary — compatibilidade: usa verde accent */ .btn-secondary, .btn.btn-secondary { background: var(--rv-gradient-accent) !important; color: #fff !important; border-color: transparent !important; } /* Tamanho padrão modernizado */ .btn-lg { padding: 1.8rem 4rem !important; font-size: 2rem !important; } .btn-md { padding: 1.5rem 3.2rem !important; font-size: 1.5rem !important; } .btn-sm { padding: 1.2rem 2.4rem !important; font-size: 1.4rem !important; } /* ---------- 3. HEADER — navy institucional (alinhado com a logo oficial) ---------- */ .header-site { position: sticky !important; top: 0; z-index: 100; background: #2B3342 !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: box-shadow 0.3s var(--rv-ease), background 0.3s var(--rv-ease); } .header-site.rv-scrolled { box-shadow: var(--rv-shadow-lg); background: #2B3342 !important; } /* ---------- Layout do header: logo esquerda, menu direita, items juntinhos ---------- */ .header-site .wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 3rem; padding: 1rem 2rem !important; max-width: 1320px; margin: 0 auto; grid-template-columns: none !important; } .header-site .navbar-brand { display: flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0; } .header-site .navbar-brand img { height: 9rem; width: auto; max-width: none; border-radius: 0; display: block; } /* Marca LOGO TEXTO — substitui logo-simbolo no header */ .header-site .navbar-brand--logo { height: auto; text-decoration: none !important; } .header-site .navbar-brand--logo a { text-decoration: none; display: block; line-height: 0; } .rv-brand-logo { /* Compact: header + hero + stats devem caber em 1080p sem scroll */ height: 10rem !important; width: auto !important; max-width: none !important; display: block; margin: -1.5rem 0; } /* Header NÃO encolhe ao rolar — mantém mesmo tamanho */ .header-site.rv-scrolled .rv-brand-logo { height: 10rem !important; /* mesma altura do estado inicial */ margin: -1.5rem 0; } .header-site .menu-desktop { margin-left: auto !important; } .header-site .menu-desktop .menu { max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 2.6rem !important; flex-wrap: nowrap !important; } .header-site .menu-desktop .menu li { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; } .header-site .menu-desktop .menu a { position: relative; font-weight: 500; color: rgba(255, 255, 255, 0.80); transition: color 0.25s var(--rv-ease), transform 0.25s var(--rv-ease); padding: 0.6rem 0; display: inline-block; } /* Underline por item — desliza do centro, 70% no ativo, 100% no hover */ .header-site .menu-desktop .menu a::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -0.4rem !important; width: 0 !important; height: 3px !important; background: var(--rv-accent) !important; border-radius: 2px !important; transform: translateX(-50%) !important; transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) !important; box-shadow: 0 2px 10px rgba(255, 195, 0, 0.55); pointer-events: none; } .header-site .menu-desktop .menu a:hover::after { width: 100% !important; } .header-site .menu-desktop .menu a.active::after { width: 70% !important; } .header-site .menu-desktop .menu a:hover, .header-site .menu-desktop .menu a.active { color: #ffffff; } /* Click — pulso no item + underline expande para 100% antes da navegação */ @keyframes rvMenuClick { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .header-site .menu-desktop .menu a.is-clicking { animation: rvMenuClick 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); color: #ffffff !important; } .header-site .menu-desktop .menu a.is-clicking::after { width: 100% !important; box-shadow: 0 0 14px rgba(255, 195, 0, 0.85); } /* Botão hamburger mobile — ícone branco discreto */ .header-site .btn-slideout-open, .header-site .btn-slideout-open i { color: #ffffff !important; font-size: 2.2rem !important; background: transparent !important; border: 0 !important; padding: 4px 8px !important; } /* Esconde a variante mobile da lede do CTA por default (desktop usa a versão completa) */ .footer-cta-lede-mob { display: none; } /* ============================================================ EDITOR DE ESTILOS POR SEÇÃO — Toolbar flutuante (Word-like) ============================================================ */ .rv-style-toolbar { position: fixed; z-index: 100010; background: #1B2530; color: #fff; border-radius: 10px; padding: 6px 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.06) inset; display: flex; align-items: center; gap: 4px; font-family: 'Nunito Sans', sans-serif; animation: rvTbFadeIn 0.18s ease-out; user-select: none; } .rv-style-toolbar[hidden] { display: none !important; } @keyframes rvTbFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .rv-tb-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #F5BE1A; padding: 0 8px; border-right: 1px solid rgba(255,255,255,0.12); margin-right: 4px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .rv-tb-group { display: inline-flex; background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px; } .rv-tb-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.12); margin: 0 4px; } .rv-tb-btn { background: transparent; border: 0; color: rgba(255,255,255,0.85); cursor: pointer; padding: 6px 8px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: 700; transition: background 0.12s, color 0.12s; min-width: 28px; } .rv-tb-btn:hover { background: rgba(255,255,255,0.12); color: #fff; } .rv-tb-btn.is-active { background: #17A39C; color: #fff; } .rv-tb-btn-text { font-family: monospace; letter-spacing: 0.02em; } .rv-tb-btn-reset { color: #F5BE1A; } .rv-tb-btn-reset:hover { background: rgba(245,190,26,0.18); } .rv-tb-btn-close { font-size: 14px; color: rgba(255,255,255,0.7); } .rv-tb-btn-close:hover { background: rgba(220,60,60,0.25); color: #fff; } .rv-tb-value { display: inline-flex; align-items: center; justify-content: center; font-family: monospace; font-size: 11px; color: rgba(255,255,255,0.7); padding: 0 6px; min-width: 36px; text-align: center; } /* Word-like editor (data-section-style-id) — REMOVIDO. Outline, cursor:pointer e tooltip de label foram removidos pra evitar confundir admin (parecia clicável mas não tinha handler). O único editor ativo agora é o .rv-edit-btn (modal-trigger) injetado por modern.js. */ .rv-style-btn { display: none !important; } /* ============================================================ MINI-TOOLBAR DE SELEÇÃO (Word-like floating toolbar) ============================================================ */ .rv-sel-toolbar { position: fixed; z-index: 100020; background: #1B2530; color: #fff; border-radius: 8px; padding: 4px 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) inset; display: flex; align-items: center; gap: 2px; font-family: 'Nunito Sans', sans-serif; animation: rvSelFadeIn 0.12s ease-out; user-select: none; } .rv-sel-toolbar[hidden] { display: none !important; } @keyframes rvSelFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .rv-sel-btn { background: transparent; border: 0; color: rgba(255,255,255,0.85); cursor: pointer; padding: 6px 8px; border-radius: 4px; font-family: inherit; font-size: 13px; font-weight: 700; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s, color 0.1s; } .rv-sel-btn:hover { background: rgba(255,255,255,0.12); color: #fff; } .rv-sel-btn.is-active { background: #17A39C; color: #fff; } .rv-sel-btn b, .rv-sel-btn i, .rv-sel-btn u { font-size: 13px; } .rv-sel-italic i { font-style: italic; } .rv-sel-text { font-family: monospace; font-size: 11px; } .rv-sel-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.15); margin: 0 3px; } /* ============================================================ RESIZE HANDLES NAS BORDAS DAS SEÇÕES (Word-like) ============================================================ */ .rv-resize-handle { position: absolute; left: 0; right: 0; height: 14px; cursor: row-resize; z-index: 45; display: flex; align-items: center; justify-content: center; background: transparent; transition: background 0.15s; } .rv-resize-handle--top { top: 0; } .rv-resize-handle--bottom { bottom: 0; } .rv-resize-handle::before { content: ""; width: 60px; height: 4px; background: rgba(23,163,156,0.4); border-radius: 2px; transition: background 0.15s, width 0.15s; } .rv-resize-handle:hover { background: rgba(23,163,156,0.08); } .rv-resize-handle:hover::before { background: #17A39C; width: 120px; } .rv-resize-handle.is-dragging::before { background: #F5BE1A; width: 160px; } /* Tooltip mostrando valor durante resize */ .rv-resize-tooltip { position: fixed; z-index: 100015; background: #1B2530; color: #fff; padding: 4px 10px; border-radius: 4px; font-family: monospace; font-size: 11px; font-weight: 700; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* Drag-to-reorder: grip que aparece à esquerda do elemento em hover */ .rv-drag-grip { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); width: 16px; height: 28px; background: rgba(23,163,156,0.8); border-radius: 3px; cursor: grab; z-index: 45; opacity: 0; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; line-height: 1; } .rv-edit-mode [data-edit-key]:hover > .rv-drag-grip, .rv-edit-mode [data-edit-key].rv-has-grip:hover .rv-drag-grip-host { opacity: 1; } .rv-drag-grip:hover { background: #17A39C; } .rv-drag-grip.is-dragging { cursor: grabbing; background: #F5BE1A; } .rv-drag-grip::before { content: "⋮⋮"; letter-spacing: -2px; } /* Drop zones — linhas indicadoras entre elementos durante drag */ .rv-drop-line { position: absolute; left: 0; right: 0; height: 3px; background: #17A39C; border-radius: 99px; z-index: 40; pointer-events: none; box-shadow: 0 0 8px rgba(23,163,156,0.6); } /* Elementos editáveis em modo edição — outline sutil + cursor de texto */ .rv-edit-mode [data-edit-key]:not(.rv-text-editing), .rv-edit-mode .rv-text-editable { cursor: text; transition: outline 0.12s; outline: 1px dashed transparent; outline-offset: 2px; border-radius: 3px; } .rv-edit-mode [data-edit-key]:hover:not(.rv-text-editing), .rv-edit-mode .rv-text-editable:hover { outline: 1px dashed rgba(23,163,156,0.4); background: rgba(23,163,156,0.04); } .rv-edit-mode .rv-text-editing[contenteditable="true"] { outline: 2px solid #17A39C !important; background: rgba(255,255,255,0.5); border-radius: 3px; padding: 2px 4px !important; margin: -2px -4px !important; min-height: 1.2em; } .rv-edit-mode .rv-text-editing[contenteditable="true"]:focus { outline: 2px solid #17A39C !important; } /* (Word-like editor legacy CSS removido — havia bloco dangling sem seletor) */ /* Painel lateral de edição de estilos */ .rv-styles-panel { position: fixed; top: 0; right: 0; width: 340px; height: 100vh; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.18); z-index: 100001; display: flex; flex-direction: column; font-family: 'Nunito Sans', sans-serif; animation: rvStylesSlideIn 0.25s ease-out; } .rv-styles-panel[hidden] { display: none; } @keyframes rvStylesSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .rv-styles-panel-inner { display: flex; flex-direction: column; height: 100%; } .rv-styles-panel-head { padding: 20px 22px 16px; border-bottom: 1px solid #E5E9F0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .rv-styles-panel-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #17A39C; margin-bottom: 4px; } .rv-styles-panel-title { font-size: 18px; font-weight: 800; color: #2B3342; margin: 0 0 4px; } .rv-styles-panel-key { font-family: monospace; font-size: 11px; color: #6B7682; background: #F4F6F7; padding: 2px 6px; border-radius: 4px; } .rv-styles-panel-close { background: transparent; border: 0; font-size: 28px; line-height: 1; color: #6B7682; cursor: pointer; padding: 0 4px; } .rv-styles-panel-close:hover { color: #2B3342; } .rv-styles-panel-body { flex: 1; overflow-y: auto; padding: 18px 22px; } .rv-styles-group { border: 0; padding: 0; margin: 0 0 22px; } .rv-styles-group legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #2B3342; margin-bottom: 10px; padding: 0; } .rv-styles-group label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: #2B3342; } .rv-styles-group label > span { flex: 1; font-weight: 500; } .rv-styles-group input[type="number"] { width: 70px; padding: 6px 8px; font-size: 13px; font-family: monospace; border: 1px solid #DDE2E8; border-radius: 6px; background: #fafbfc; text-align: right; } .rv-styles-group input[type="number"]:focus { outline: none; border-color: #17A39C; background: #fff; } .rv-styles-align { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .rv-styles-align label { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #DDE2E8; border-radius: 6px; cursor: pointer; font-size: 12px; background: #fafbfc; margin: 0; } .rv-styles-align label:has(input:checked) { border-color: #17A39C; background: rgba(23,163,156,0.08); } .rv-styles-align input[type="radio"] { margin: 0; } .rv-styles-align span { font-weight: 600; } .rv-styles-panel-foot { padding: 14px 22px 18px; border-top: 1px solid #E5E9F0; display: flex; gap: 8px; } .rv-styles-btn { flex: 1; padding: 10px 14px; font-family: 'Nunito Sans', sans-serif; font-size: 13px; font-weight: 700; border: 0; border-radius: 8px; cursor: pointer; transition: filter 0.15s, transform 0.08s; } .rv-styles-btn-reset { background: transparent; color: #C0392B; border: 1px solid rgba(192,57,43,0.3); } .rv-styles-btn-reset:hover { background: rgba(192,57,43,0.08); } .rv-styles-btn-save { background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); color: #fff; box-shadow: 0 4px 12px rgba(23,163,156,0.35); } .rv-styles-btn-save:hover { filter: brightness(1.08); transform: translateY(-1px); } @media (max-width: 500px) { .rv-styles-panel { width: 100vw; } } /* Bloqueia o swipe-back horizontal do Chrome Android MAS permite pinch-zoom (gesto de pinçar pra dar zoom com a mão). `touch-action: pan-y pinch-zoom` = scroll vertical + zoom de dois dedos permitidos, swipe horizontal continua bloqueado. */ html, body, .handle-mobile, main, section { overscroll-behavior-x: none !important; touch-action: pan-y pinch-zoom !important; } html, body { background-color: #1E2B38; } /* O sidebar precisa de touch-action: auto pra permitir tap nos links internos */ #menu-mobile, #menu-mobile *, .slideout-menu, .slideout-menu * { touch-action: auto !important; } /* O WhatsApp flutuante e botões também */ .whatsapp_fix, .btn, button, a { touch-action: manipulation !important; } /* ============================================================ MOBILE — tudo mais compacto e proporcional ============================================================ */ @media (max-width: 900px) { /* No mobile, header é fixed (não sticky), então podemos ter overflow-x: hidden no body sem quebrar nada. Isso garante que nada vaze horizontalmente. */ body { overflow-x: hidden !important; } /* HEADER FIXO no mobile — sempre visível ao rolar, com o botão hambúrguer sempre disponível pra abrir a sidebar */ .header-site { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 200 !important; } /* Compensa o espaço do header fixo com padding-top no main */ .handle-mobile > main { padding-top: 70px !important; } /* Hero compacto — padding-top 3rem (48px) pra dar respiro entre o header navy e o eyebrow do hero turquesa (antes estava 1rem = colado demais). Laterais continuam 1rem pra alinhar com o texto das seções abaixo. */ .v2-hero.v2-hero--about.v2-hero--compact, .v2-hero--compact { padding: 3rem 1rem 2rem !important; } .v2-hero.v2-hero--about.v2-hero--compact > .v2-wrap, .v2-hero--compact .v2-wrap { padding: 0 !important; max-width: 100% !important; margin: 0 !important; } .v2-hero.v2-hero--about.v2-hero--compact .v2-hero-text, .v2-hero--compact .v2-hero-text { text-align: left !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; } .v2-hero.v2-hero--about.v2-hero--compact .v2-hero-text > *, .v2-hero--compact .v2-hero-text > * { margin-left: 0 !important; padding-left: 0 !important; max-width: 100% !important; } /* H1 do hero — tamanho equilibrado (não muito pequeno, não muito grande) */ .v2-hero.v2-hero--about.v2-hero--compact h1, .v2-hero--compact h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.2 !important; margin: 0.4rem 0 0.6rem !important; text-align: left !important; letter-spacing: -0.005em !important; } .v2-hero.v2-hero--about.v2-hero--compact .v2-lede, .v2-hero--compact .v2-lede { font-size: 0.95rem !important; line-height: 1.5 !important; text-align: left !important; max-width: 100% !important; margin: 0 !important; } .v2-hero.v2-hero--about.v2-hero--compact .v2-eyebrow, .v2-hero--compact .v2-eyebrow { font-size: 0.72rem !important; text-align: left !important; display: inline-flex !important; margin: 0 0 0.5rem !important; } /* ===== HEADERS DE SEÇÕES: TUDO ALINHADO À ESQUERDA (padrão único) ===== Pilares, Valores, Especialidades, Serviços, Parcerias — left-aligned. Eyebrow, h2 e lede com espaçamento padrão "Nossa História" (~1.6rem de respiração entre h2 e parágrafo abaixo, sem ficar colado nem ficar "quebra de linha"). */ .v2-parceiros-header, .v2-pilares-header, .v2-valores-header, .rv-offerings-header, .services .section-header-center, .section-header-center { text-align: left !important; max-width: 100% !important; margin: 0 0 1.4rem !important; /* mais perto dos cards (gap menor) */ } /* TÍTULO: tamanho padrão "Nascemos para trazer" pra TODAS as seções. Força `.services .title` (que tem font-size desktop !important) a obedecer. */ .v2-parceiros-header h2, .v2-pilares-header h2, .v2-valores-header h2, .rv-offerings-title, .services .section-header-center .title, .services .section-header-center h2 { text-align: left !important; font-size: clamp(1.5rem, 4.3vw, 1.9rem) !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; margin: 0.3rem 0 1.6rem !important; /* margin-bottom generoso (padrão Nossa História) */ } /* LEDE: cola no topo (h2 cuida do espaçamento) — fonte e cor consistentes */ .v2-parceiros-header p, .v2-pilares-header p, .v2-valores-header p, .rv-offerings-lede, .services .section-subtitle { text-align: left !important; margin: 0 !important; max-width: 100% !important; font-size: 1.05rem !important; line-height: 1.5 !important; } .v2-parceiros-header .v2-eyebrow, .v2-pilares-header .v2-eyebrow, .v2-valores-header .v2-eyebrow, .rv-offerings-header .rv-eyebrow, .services .section-header-center .rv-eyebrow { text-align: left !important; display: inline-block !important; margin-bottom: 0.3rem !important; } /* Marcos (numeros animados "12+ Anos de mercado / 5.000+ Vidas reavivadas") bem compactos no mobile — grid 2x2 e fontes reduzidas */ .v2-marcos { padding: 2rem 0 !important; } .v2-marcos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.4rem 0.8rem !important; } .v2-marco { padding: 0.5rem 0.3rem !important; } .v2-marco-num { font-size: 1.9rem !important; /* antes era clamp(4.4rem...) ~70px */ margin-bottom: 0.3rem !important; letter-spacing: -0.02em !important; } .v2-marco-num sup { font-size: 0.5em !important; } .v2-marco-label { font-size: 0.7rem !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; } /* Esconde separadores verticais entre marcos no mobile (grid 2x2) */ .v2-marco + .v2-marco::before { display: none !important; } /* Exceção: o footer CTA ("Pronto para dar o próximo passo?") continua CENTRALIZADO */ .footer-cta .wrap, .footer-cta-content, .footer-cta-content h2, .footer-cta-content p, .footer-cta-actions { text-align: center !important; justify-content: center !important; } /* MENU SLIDEOUT — mais estreito, sem logo, lado esquerdo */ #menu-mobile.slideout-menu, .slideout-menu { width: 200px !important; /* antes 240px */ max-width: 65vw !important; background: #1B2530 !important; padding: 1.2rem 0 1rem !important; color: #fff !important; border-right: 1px solid rgba(255,255,255,0.05) !important; border-left: 0 !important; box-shadow: 20px 0 40px -10px rgba(0,0,0,0.4); left: 0 !important; right: auto !important; } /* Sem logo no topo da sidebar agora */ .rv-mobile-brand { display: none !important; } /* HTML/body com fundo navy quando slideout aberto — fecha qualquer "gap branco" */ html.slideout-open, body.slideout-open { background: #1B2530 !important; } body.slideout-open .handle-mobile { background: var(--rv-bg, #fff) !important; } /* Logo turquesa no topo do sidebar — grande e bem visível */ .rv-mobile-brand { display: flex !important; align-items: center; justify-content: center; padding: 1.2rem 1rem 1.8rem !important; margin-bottom: 1rem !important; border-bottom: 1px solid rgba(255,255,255,0.10); } .rv-mobile-brand img { height: 6.5rem !important; width: auto !important; display: block !important; max-width: 95% !important; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); } #menu-mobile .menu { padding: 0.4rem 1rem !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } #menu-mobile .menu li { margin: 0 !important; list-style: none !important; } #menu-mobile .menu li a { font-family: 'Nunito Sans', sans-serif; font-size: 1.35rem !important; font-weight: 500 !important; color: rgba(255,255,255,0.78) !important; padding: 0.8rem 1rem !important; display: block !important; border-radius: 6px !important; text-decoration: none !important; letter-spacing: 0.01em; transition: color 0.15s, background 0.15s; } #menu-mobile .menu li a:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; } #menu-mobile .menu li a.active { color: #17A39C !important; /* turquesa pra marcar página atual */ background: rgba(23,163,156,0.10) !important; font-weight: 600 !important; } /* Botão Loja virtual — destaque turquesa outline */ #menu-mobile .menu li a.btn.btn-outline-primary { display: inline-flex !important; align-items: center; justify-content: center; margin: 1rem 0 0 !important; padding: 0.7rem 1.4rem !important; background: transparent !important; color: #17A39C !important; border: 2px solid #17A39C !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 1.2rem !important; letter-spacing: 0.02em; width: auto !important; text-align: center; } #menu-mobile .menu li a.btn.btn-outline-primary:hover { background: #17A39C !important; color: #1B2530 !important; } /* Botão CLOSE — discreto, igual o de abrir */ .header-site .btn-slideout-open .icon-times, .btn-slideout-open .icon-times { color: #ffffff !important; background: transparent !important; border: 0 !important; font-size: 2rem !important; padding: 4px 8px !important; } /* Hero mobile — vídeo 1:1 (quadrado) ocupa proporção certa pro novo encode. Stage fica em flex column (vídeo + texto empilhados) — só o vídeo recebe aspect-ratio. */ .v2-hero--video { min-height: 0 !important; } .v2-hero-bg-video { aspect-ratio: 1 / 1 !important; } /* TIPOGRAFIA — bem mais enxuta pra mobile (telas estavam gigantes) */ h1 { font-size: clamp(1.5rem, 4.7vw, 2rem) !important; line-height: 1.18 !important; letter-spacing: -0.015em !important; white-space: normal !important; } /* H1 do hero — overlay sobre o vídeo, com sombra pra legibilidade */ .v2-hero-text h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important; line-height: 1.18 !important; letter-spacing: -0.015em !important; text-wrap: balance; margin: 0.4rem 0 0.6rem !important; } .v2-hero-text .v2-lede { font-size: clamp(0.85rem, 3vw, 1.05rem) !important; margin: 0 auto 0.8rem !important; max-width: 32ch !important; } .v2-hero-actions { margin-top: 0.5rem !important; } .v2-hero-text .v2-btn--lg { font-size: 0.95rem !important; padding: 0.7rem 1.4rem !important; } .v2-title, .v2-title--xl, .v2-title--lg, .v2-title--md { font-size: clamp(1.55rem, 4.5vw, 2rem) !important; line-height: 1.22 !important; letter-spacing: -0.01em !important; } .v2-process .v2-process-header h2, .v2-pilares-header h2, .v2-valores-header h2, .v2-catalog-header h2, .v2-map-header h2, .v2-form-side h2, .v2-about-story-body h2, .v2-manifesto blockquote, .rv-offerings-title, .v2-banner h2, .v2-cta-band h2, section h2 { font-size: clamp(1.5rem, 4.3vw, 1.9rem) !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; } .v2-lede, .rv-offerings-lede, .section-subtitle { font-size: 1.05rem !important; line-height: 1.5 !important; } .v2-eyebrow, .v2-eyebrow.is-ink, .rv-eyebrow, span.v2-eyebrow { font-size: 0.8rem !important; letter-spacing: 0.06em !important; } .v2-eyebrow--brand { font-size: 0.95rem !important; } p, li, .v2-text, .text-content p { font-size: 1.05rem !important; line-height: 1.55 !important; } /* SEÇÕES — padding vertical pequeno em mobile */ .v2-process, .v2-pilares, .v2-valores, .v2-about-story, .v2-magnet, .v2-form, .v2-catalog, .v2-banner, .v2-cta-band, .rv-offerings, .services, .guides { padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; } /* Manifesto com respiro extra no topo, bem apertado no bottom (sem espaço pós-citação) */ .v2-manifesto { padding-top: 3.4rem !important; padding-bottom: 0.4rem !important; /* praticamente cola na seção seguinte */ } .v2-manifesto cite { margin-top: 0.6rem !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; } /* Catálogo logo abaixo do manifesto — sem padding-top extra */ .v2-manifesto + .v2-catalog { padding-top: 0.6rem !important; } /* CATÁLOGO — colar a descrição direto sob o título (sem gap grande no header) */ .v2-catalog-header { gap: 0.4rem !important; margin-bottom: 1.4rem !important; flex-direction: column !important; } .v2-catalog-header-text { max-width: 100% !important; } .v2-catalog-header .v2-title--xl { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; } .v2-catalog-header > p.v2-lede { margin-top: 0 !important; max-width: 100% !important; } /* Título dos cards (Próteses de Perna, Próteses de Mão, Palmilhas, etc.) menor */ .v2-cat-card-title { font-size: 1.3rem !important; line-height: 1.15 !important; } .v2-cat-card-info .v2-cat-card-title { font-size: 1.3rem !important; } .v2-cat-card-meta { font-size: 0.85rem !important; padding-top: 1rem !important; margin-top: 1rem !important; } /* BIBLIOTECA — título "Todos os nossos materiais gratuitos." em 1 linha só */ .v2-magnet-body h2, .v2-guides-header h2 { font-size: clamp(1.3rem, 4vw, 1.7rem) !important; line-height: 1.2 !important; margin-bottom: 0.8rem !important; white-space: nowrap; overflow: visible; text-wrap: balance; } /* Se realmente não couber, libera quebra natural sem deixar gigante */ @supports not (text-wrap: balance) { .v2-magnet-body h2, .v2-guides-header h2 { white-space: normal; } } /* FORMULÁRIO de Avaliação — compacto + RESPIRO LATERAL dentro do card */ .reaviva-avaliacao { padding: 2rem 1.4rem !important; } .reaviva-avaliacao .ra-wrap { padding: 2rem 1.4rem !important; /* respiro lateral interno */ border-radius: 10px !important; max-width: 100% !important; margin: 0 0.4rem !important; /* respiro lateral externo extra */ } /* Quando o form já está embutido em .v2-form-card (modo compact), aplica padding direto */ .v2-form-card .reaviva-avaliacao { padding: 1.2rem 0.8rem !important; } .v2-form-card .reaviva-avaliacao .ra-wrap { padding: 1.4rem 1.2rem !important; margin: 0 !important; } /* Garante que NENHUM input encoste na borda */ .ra-form { padding: 0 0.4rem !important; } /* PADRONIZAÇÃO DE FONTES DO FORM — todos os labels/inputs no mesmo tamanho */ .ra-form input, .ra-form select, .ra-form textarea { font-size: 0.95rem !important; line-height: 1.4 !important; } .ra-label > span, .ra-label > span em { font-size: 0.82rem !important; font-weight: 600 !important; line-height: 1.3 !important; } .ra-btn, .ra-status { font-size: 0.9rem !important; line-height: 1.3 !important; } .ra-disclaimer { font-size: 0.75rem !important; line-height: 1.3 !important; } /* Contatos da barra lateral do form (WhatsApp, Telefone, E-mail, Endereço) — todos com mesmo padrão */ .v2-form-contacts li { margin: 0 !important; } .v2-form-contact { gap: 0.7rem !important; padding: 0.5rem 0 !important; } .v2-form-contact .ico { width: 2.4rem !important; height: 2.4rem !important; min-width: 2.4rem !important; font-size: 0.9rem !important; } .v2-form-contact .ico i { font-size: 0.9rem !important; } .v2-form-contact .lbl { font-size: 0.7rem !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; } .v2-form-contact strong { font-size: 0.92rem !important; line-height: 1.25 !important; font-weight: 600 !important; } .ra-head h2 { font-size: 1.4rem !important; } .ra-head p { font-size: 0.9rem !important; } .ra-form { gap: 0.7rem !important; } .ra-form input, .ra-form select, .ra-form textarea { font-size: 0.95rem !important; padding: 0.6rem 0.7rem !important; border-radius: 6px !important; } .ra-form textarea { min-height: 60px !important; } .ra-label > span { font-size: 0.78rem !important; } .ra-btn { padding: 0.8rem !important; margin-top: 0.4rem !important; } .v2-form-card { padding: 0 !important; } .v2-form-side h2 { font-size: 1.5rem !important; } /* PADRÃO GLOBAL: padding 2rem (20px) laterais — margem visual em ambos os lados. Aplicado em wraps, hero e header pra TODO conteúdo respirar igual. */ .v2-wrap, .wrap { padding-left: 2rem !important; padding-right: 2rem !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .header-site .wrap { padding: 1rem 2rem !important; max-width: 100% !important; } /* Hero compacto + hero da home com mesmo padding lateral 2rem */ .v2-hero.v2-hero--about.v2-hero--compact, .v2-hero--compact { padding: 1rem 2rem 1.4rem !important; } /* Headings sem letter-spacing negativo pra texto não "vazar" pra esquerda */ .v2-hero.v2-hero--about.v2-hero--compact h1, .v2-hero--compact h1, h1, h2, .v2-title, .v2-title--xl, .rv-offerings-title { letter-spacing: 0 !important; } /* Seções diretas (sem .wrap interno) também ganham 2rem laterais */ .v2-stats, .v2-manifesto, .v2-catalog, .v2-form, .v2-magnet, .v2-marcos, .v2-pilares, .v2-valores, .v2-about-story, .v2-parceiros, .rv-offerings, .services, .guides, .footer-cta { padding-left: 0 !important; padding-right: 0 !important; } /* FAIXA DE STATS — 2x2 (4 stats em 2 colunas, mais respirável) */ .v2-stats { padding: 0 !important; } .v2-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0 !important; } .v2-stat { padding: 1rem 0.6rem !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .v2-stat:nth-child(2n) { border-right: none !important; } .v2-stat:nth-last-child(-n+2) { border-bottom: none !important; } .v2-stat-num, .v2-stat-num .rv-stat-num-main, .v2-stat-num .rv-stat-num-sfx { font-size: 2.2rem !important; line-height: 1 !important; } .v2-stat-label { font-size: 0.82rem !important; margin-top: 4px !important; line-height: 1.25 !important; letter-spacing: 0.04em !important; } /* PROCESSO — ícones números menores */ .v2-step-num { width: 42px !important; height: 42px !important; font-size: 1.2rem !important; } .v2-step h3 { font-size: 1.15rem !important; } .v2-step p { font-size: 0.95rem !important; } /* VALORES (Cuidado humano / Excelência técnica / Jornada compartilhada) — mobile: layout LEFT (ícone topo-esquerda, título e descrição à esquerda) */ .v2-valor, .v2-valor--big { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; padding: 2rem 1.2rem !important; gap: 0.6rem !important; } .v2-valor-icon { width: 3.4rem !important; height: 3.4rem !important; margin: 0 0 0.4rem !important; flex-shrink: 0 !important; } .v2-valor-icon svg { width: 1.7rem !important; height: 1.7rem !important; } .v2-valor h3, .v2-valor--big h3 { text-align: left !important; font-size: 1.2rem !important; margin: 0 !important; line-height: 1.25 !important; } .v2-valor-desc { text-align: left !important; font-size: 0.95rem !important; line-height: 1.45 !important; margin: 0 !important; } .v2-valor-tags { padding-top: 0.7rem !important; gap: 0.4rem !important; justify-content: flex-start !important; flex-wrap: wrap !important; } .v2-valor-tags li { font-size: 0.78rem !important; padding: 0.3rem 0.7rem !important; } /* Pilares (Missão, Visão, Propósito) — mesma estrutura LEFT */ .v2-pilar { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; padding: 1.4rem 1.1rem !important; gap: 0.5rem !important; } .v2-pilar-icon { width: 3.4rem !important; height: 3.4rem !important; margin: 0 0 0.4rem !important; } .v2-pilar-icon svg { width: 1.7rem !important; height: 1.7rem !important; } .v2-pilar h3 { text-align: left !important; font-size: 1.2rem !important; margin: 0 !important; line-height: 1.25 !important; } .v2-pilar p { text-align: left !important; font-size: 0.95rem !important; line-height: 1.45 !important; margin: 0 !important; } /* Parcerias — sem espaço antes, logos mais juntos */ .v2-parceiros { padding-top: 0.4rem !important; /* praticamente cola na Nossa história */ padding-bottom: 1.5rem !important; } .v2-parceiros-header { margin-bottom: 1rem !important; } .v2-parceiros-grid { grid-template-columns: repeat(3, 1fr) !important; /* 3 colunas pra mais logos por linha */ gap: 0.3rem !important; /* espaçamento mínimo entre logos */ margin: 0 !important; justify-items: center !important; max-width: 100% !important; } .v2-parceiro { padding: 0.4rem 0.2rem !important; min-height: 60px !important; justify-content: center !important; } .v2-parceiro--logo img { max-height: 42px !important; margin: 0 !important; } /* Reduz padding-bottom da seção Nossa história pra colar nas parcerias */ .v2-about-story { padding-bottom: 1rem !important; } /* OFFERINGS / ESPECIALIDADES — cards LEFT (igual versão web) */ .rv-offerings-grid { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; } .rv-offering { padding: 1.2rem 0.9rem !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 0.5rem !important; } .rv-offering-icon { width: 40px !important; height: 40px !important; margin: 0 0 0.4rem !important; } .rv-offering-icon svg { width: 20px !important; height: 20px !important; } .rv-offering h3 { font-size: 0.98rem !important; line-height: 1.2 !important; margin: 0 0 0.3rem !important; text-align: left !important; } .rv-offering p { font-size: 0.82rem !important; line-height: 1.4 !important; text-align: left !important; margin: 0 !important; } /* SERVIÇOS — service-item empilhado e compacto */ .service-item { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; gap: 0.8rem !important; margin-bottom: 2rem !important; } .service-item figure { margin: 0 !important; } .service-item .text-content h3 { font-size: 1.3rem !important; margin-bottom: 0.5rem !important; } .service-item .text-content p { font-size: 0.95rem !important; } /* GUIDES — cards compactos pra caber 100% na tela com botão visível */ .guides { padding: 0 !important; } .guides .wrap { padding: 0 2rem !important; max-width: 100% !important; } .guides .data-list { display: flex !important; flex-direction: column !important; gap: 1.2rem !important; padding: 0 !important; margin: 0 !important; } .card-guide { padding: 0 0 1rem 0 !important; border-radius: 12px !important; overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } /* Imagem do e-book — limita altura pra não ocupar tela inteira */ .card-guide .card-image { max-height: 220px !important; overflow: hidden !important; margin: 0 !important; border-radius: 12px 12px 0 0; } .card-guide .card-image img { width: 100% !important; height: auto !important; max-height: 220px !important; object-fit: cover !important; object-position: center center !important; display: block !important; } .card-guide .card-content { padding: 1rem 1.2rem 0.5rem !important; } .card-guide .card-title { font-size: 1.15rem !important; margin: 0 0 0.6rem !important; line-height: 1.25 !important; } .card-guide p { font-size: 0.9rem !important; line-height: 1.5 !important; margin: 0 0 0.8rem !important; } .card-guide .card-btn { width: calc(100% - 2.4rem) !important; margin: 0 1.2rem 1.2rem !important; font-size: 0.95rem !important; padding: 10px 14px !important; box-sizing: border-box !important; } /* FOOTER MOBILE — layout reorganizado, centralizado e compacto */ .footer-site-middle { padding: 2.4rem 0 2rem !important; } .footer-site-middle .wrap { grid-template-columns: 1fr !important; gap: 2rem !important; text-align: center !important; } .footer-col { text-align: center !important; } .footer-col-brand { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.6rem !important; } .footer-logo { width: 56px !important; max-width: 56px !important; height: auto !important; margin: 0 !important; } .footer-tagline { font-size: 0.92rem !important; line-height: 1.5 !important; max-width: 32ch !important; margin: 0 auto !important; text-align: center !important; } /* Títulos das colunas — sublinhado central + menores */ .footer-title { font-size: 0.85rem !important; margin-bottom: 0.9rem !important; padding-bottom: 0.6rem !important; letter-spacing: 0.14em !important; } .footer-title::after { left: 50% !important; transform: translateX(-50%) !important; width: 2rem !important; } /* Navegação — links inline em vez de coluna */ .footer-links { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem 1.1rem !important; } .footer-links li a { font-size: 0.92rem !important; padding: 0 !important; } .footer-links a:hover { padding-left: 0 !important; } /* Onde estamos — cada item se auto-centraliza (versão que ficou visualmente melhor) */ .footer-col:nth-child(3) { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; text-align: center !important; } .footer-col:nth-child(3) .footer-title { text-align: center !important; width: 100% !important; } .footer-address, .footer-contact-link { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: left !important; font-size: 0.88rem !important; line-height: 1.35 !important; font-weight: 400 !important; gap: 0.7rem !important; margin: 0 auto 0.5rem !important; width: auto !important; max-width: 92vw !important; white-space: nowrap !important; color: rgba(255,255,255,0.82) !important; } .footer-address { margin-bottom: 0.7rem !important; } .footer-address div, .footer-contact-link strong, .footer-contact-link { font-size: 0.88rem !important; font-weight: 400 !important; line-height: 1.35 !important; white-space: nowrap !important; color: rgba(255,255,255,0.92) !important; } /* Quebra o
entre rua e cidade: vira inline */ .footer-address div br { display: none !important; } .footer-address i, .footer-contact-link i { width: 2rem !important; height: 2rem !important; min-width: 2rem !important; font-size: 0.82rem !important; flex-shrink: 0 !important; } /* ESCONDE a coluna NAVEGAÇÃO no mobile (menu já está no hambúrguer) */ .footer-col:nth-child(2) { display: none !important; } /* Barra inferior (copyright + CNPJ) totalmente centralizada */ .footer-site-bottom .wrap { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 1rem 1rem !important; gap: 0.4rem !important; } .footer-legal { text-align: center !important; width: 100% !important; margin: 0 auto !important; } .footer-cnpj { text-align: center !important; display: block !important; width: 100% !important; margin: 0 auto !important; } /* Redes sociais — ÍCONES DESTACADOS (amarelo + tamanho generoso) */ .footer-social { justify-content: center !important; gap: 1rem !important; margin-top: 0.3rem !important; } .footer-social a { width: 3.6rem !important; height: 3.6rem !important; font-size: 2rem !important; background: var(--rv-accent, #F5BE1A) !important; color: var(--rv-ink, #1B2530) !important; border-color: var(--rv-accent, #F5BE1A) !important; box-shadow: 0 4px 14px -3px rgba(245,190,26,0.55) !important; } .footer-social a:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.08); } .footer-social-hint { font-size: 0.85rem !important; margin: 0 auto 1rem !important; max-width: 28ch !important; } /* Esconder link "dmd" do rodapé no mobile (só acessível pelo /admin direto) */ .footer-made-by, .footer-dmd { display: none !important; } /* CTA banner do rodapé — centralizado, mais enxuto */ .footer-cta { padding: 2rem 1rem !important; overflow: hidden !important; } .footer-cta .wrap { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 1rem !important; max-width: 100% !important; overflow: hidden !important; } .footer-cta-content { text-align: center !important; width: 100% !important; max-width: 100% !important; } .footer-cta-content h2 { font-size: 1.3rem !important; line-height: 1.25 !important; margin-bottom: 0.4rem !important; } /* Versão curta da lede pra mobile (cabe em 1 linha); esconde a versão desktop */ .footer-cta-lede-desk { display: none !important; } .footer-cta-lede-mob { display: block !important; font-size: 0.85rem !important; line-height: 1.35 !important; margin: 0 auto !important; text-align: center !important; color: rgba(255,255,255,0.78) !important; } .footer-cta-actions { justify-content: center !important; flex-wrap: wrap !important; gap: 0.6rem !important; } .footer-btn { font-size: 0.85rem !important; padding: 0.6rem 1.2rem !important; } /* Frase do manifesto + barra inferior — minimalistas */ .footer-quote { padding: 2rem 0 !important; } .footer-quote p { font-size: 1rem !important; } .footer-legal { font-size: 0.75rem !important; } .footer-cnpj { font-size: 0.7rem !important; } .footer-site-bottom .wrap { padding: 1rem 1.2rem !important; } /* CTA / BANNERS — pílulas e botões dimensionados */ .v2-btn, .v2-btn-primary, .v2-btn--lg { font-size: 1rem !important; padding: 0.8rem 2rem !important; } } /* Em viewports muito pequenos (<= 360), libera quebra do email */ @media (max-width: 360px) { .footer-address, .footer-contact-link { white-space: normal !important; word-break: break-all !important; } .footer-contact-link strong { white-space: normal !important; } } /* ========== AJUSTES FINOS POR PÁGINA (cleanup geral) ========== */ /* HOME — Onde Estamos: subir + alinhar à esquerda (fontes seguem padrão do site) */ .v2-catalog { padding-bottom: 1rem !important; } .v2-map { padding: 1.4rem 0 1.6rem !important; } .v2-map-header { text-align: left !important; max-width: 100% !important; margin: 0 0 1rem !important; } .v2-map-header h2, .v2-map-header p, .v2-map-header .v2-eyebrow { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* H2 e p usam o tamanho padrão do site (regras gerais .v2-title e .v2-lede) */ .v2-map-header h2 { margin-top: 0.6rem !important; } .v2-map-header p { margin-top: 0.6rem !important; } .v2-map-frame { aspect-ratio: 4 / 3 !important; } /* HOME — Como trabalhamos: header à esquerda, steps (1,2,3,4) centralizados. H2 usa o tamanho padrão do site (regra geral .v2-title acima) */ .v2-process { padding: 1.6rem 0 1.6rem !important; } .v2-process-header { text-align: left !important; max-width: 100% !important; margin: 0 0 1.4rem !important; } .v2-process-header h2, .v2-process-header p, .v2-process-header .v2-eyebrow { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } .v2-process-header h2 { margin-top: 0.6rem !important; } /* Steps continuam centralizados (1, 2, 3, 4 com texto) */ .v2-step { text-align: center !important; } .v2-step .v2-step-num { margin: 0 auto 0.6rem !important; } /* SOBRE/SERVIÇOS/GUIAS — hero colado direto no header (sem gap branco) */ body:not(#page-home) .handle-mobile > main > .v2-hero--compact:first-child, body:not(#page-home) .handle-mobile > main > section:first-child { margin-top: 0 !important; } /* SOBRE — "O QUE GUIA CADA ENTREGA" (valores): ajustar visual dos cards mobile */ .v2-valores { padding: 1.4rem 0 1.8rem !important; } /* Grid 1 col só em telas estreitas reais (≤640px). Desktop/tablet maior fica 3 cols. */ @media (max-width: 640px) { .v2-valores-grid, .v2-valores-grid--three { display: flex !important; flex-direction: column !important; gap: 0.8rem !important; grid-template-columns: 1fr !important; } } .v2-valor, .v2-valor--big { border: 1px solid rgba(14,165,183,0.18) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06) !important; } /* SERVIÇOS — ESPECIALIDADES: header bem colado nos cards */ .rv-offerings { padding: 1.4rem 0 1.8rem !important; } .rv-offerings-header { margin: 0 0 0.4rem !important; } /* praticamente cola */ .rv-offerings-lede { margin: 0.2rem 0 0 !important; line-height: 1.4 !important; } /* SERVIÇOS — "COMO PODEMOS AJUDAR" / Nossos serviços + service-items à esquerda */ .services { padding: 1.4rem 0 1.8rem !important; } .services .section-header-center { margin: 0 0 1rem !important; gap: 0.5rem !important; } /* Sobrescreve a regra desktop .section-header-center .title (clamp 2.6-4rem) pra usar a fonte padrão do mobile (1.5-1.9rem) — mesma das outras seções */ .section-header-center .title, .section-header-center h2, .services .section-header-center .title, .services .section-header-center h2 { font-size: clamp(1.5rem, 4.3vw, 1.9rem) !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; } .section-header-center .section-subtitle, .services .section-subtitle { font-size: 1.05rem !important; line-height: 1.5 !important; max-width: 100% !important; } /* Service items (Equipe multidisciplinar, etc) — alinhados à ESQUERDA no mobile */ .services .service-item .text-content { text-align: left !important; } .services .service-item .text-content h3 { text-align: left !important; font-size: 1.3rem !important; margin-bottom: 0.8rem !important; padding-bottom: 0.8rem !important; } .services .service-item .text-content h3::after { left: 0 !important; } .services .service-item .text-content p { text-align: left !important; font-size: 0.95rem !important; line-height: 1.5 !important; max-width: 100% !important; } /* GENÉRICO — qualquer h2/h3 em section deve ser alinhado à esquerda (cobre EQUIPE MULTIDISCIPLINAR, CONTEÚDOS PARA SEU DESENVOLVIMENTO, etc.) */ main section > .wrap > h2, main section > .v2-wrap > h2, main section .section-title, main section .section-header { text-align: left !important; margin-left: 0 !important; } /* Telas muito pequenas (<= 480) — última compressão */ @media (max-width: 480px) { h1, .v2-hero-text h1 { font-size: 1.4rem !important; } .v2-title, .v2-title--xl { font-size: 1.35rem !important; } .v2-process .v2-process-header h2, .v2-pilares-header h2, .v2-valores-header h2, .v2-catalog-header h2, .v2-map-header h2, .rv-offerings-title, section h2 { font-size: 1.3rem !important; } .v2-lede, .rv-offerings-lede, .section-subtitle { font-size: 1rem !important; } .v2-stat-num, .v2-stat-num .rv-stat-num-main, .v2-stat-num .rv-stat-num-sfx { font-size: 1.5rem !important; } .v2-stat-label { font-size: 0.65rem !important; } /* Hero text overlay — padding equilibrado pra texto ficar centralizado sobre o vídeo */ .v2-hero-text--center { padding: 1rem 0.8rem !important; } /* Biblioteca: título sem nowrap em telas muito pequenas (libera quebra natural) */ .v2-magnet-body h2, .v2-guides-header h2 { white-space: normal !important; font-size: 2rem !important; } } /* Botão "Loja virtual" — contraste com navy + padding generoso pra não colar nas laterais */ .header-site .menu-desktop .menu .btn-outline-primary { background: transparent !important; color: var(--rv-accent) !important; border: 2px solid var(--rv-accent) !important; padding: 0.8rem 2.4rem !important; border-radius: 999px !important; white-space: nowrap !important; display: inline-block; line-height: 1.2; } .header-site .menu-desktop .menu .btn-outline-primary:hover { background: var(--rv-accent) !important; color: var(--rv-primary) !important; } .header-site .menu-desktop .menu a:hover::after, .header-site .menu-desktop .menu a.active::after { width: 70%; } /* WhatsApp no menu com destaque */ .header-site .menu-desktop .menu a.whatsapp { background: #25D366; color: #fff !important; padding: 1rem 1.8rem !important; border-radius: var(--rv-radius-pill); box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.55); } .header-site .menu-desktop .menu a.whatsapp:hover { background: #1ebd5a; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.6); } .header-site .menu-desktop .menu a.whatsapp::after { display: none; } /* ============ WHATSAPP FLUTUANTE — estilo Lottie bionicenter ============ Técnica: container ".whatsapp_fix" fixo na tela, composto de: - 3 ondas de pulso sobrepostas (::before, ::after e um box-shadow em camadas) - Ícone SVG com respiração (scale 1 → 1.08 → 1) - Hover pausa tudo + lift ============================================================ */ .whatsapp_fix { position: fixed !important; top: auto !important; /* reset override do style.css legado */ left: auto !important; bottom: 2rem !important; right: 2rem !important; width: 4rem !important; /* tamanho original do arquivo (40x40) */ height: 4rem !important; display: block !important; background: url("../images/whatsapp-icon.gif") center center / auto auto no-repeat !important; background-color: transparent !important; border-radius: 50%; text-decoration: none; z-index: 999; filter: drop-shadow(0 4px 10px rgba(37, 211, 102, 0.4)); transition: transform 0.35s var(--rv-ease), filter 0.35s var(--rv-ease); overflow: visible; font-size: 0; line-height: 0; } /* Pulso sutil atrás do GIF (anéis expandindo) — não distorce a imagem */ .whatsapp_fix::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(37, 211, 102, 0.28); z-index: -1; animation: waRipple 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; pointer-events: none; } .whatsapp_fix::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(37, 211, 102, 0.18); z-index: -1; animation: waRipple 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; animation-delay: 0.7s; pointer-events: none; } @keyframes waRipple { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } .whatsapp_fix:hover { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 10px 22px rgba(37, 211, 102, 0.55)); } .whatsapp_fix:hover::before, .whatsapp_fix:hover::after { animation-play-state: paused; } /* Esconde o WhatsApp flutuante quando o rodapé está visível (JS IntersectionObserver) */ .whatsapp_fix.rv-hidden { opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) scale(0.85) !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important; } /* Telegram flutuante — escondido por padrão (não usamos) */ .telegram_fix { display: none !important; } @media (max-width: 768px) { .whatsapp_fix { width: 4rem !important; height: 4rem !important; bottom: 1.4rem !important; right: 1.4rem !important; } } @media (prefers-reduced-motion: reduce) { .whatsapp_fix, .whatsapp_fix::before, .whatsapp_fix::after { animation: none !important; } } /* ---------- 4. HERO (home) — remover decorações datadas ---------- */ #page-home .apresentation { background: radial-gradient(1200px 800px at 85% 15%, rgba(14, 165, 183, 0.08) 0%, transparent 60%), radial-gradient(800px 600px at 5% 95%, rgba(255, 195, 0, 0.08) 0%, transparent 55%); --section-background: none; padding-top: 4rem; padding-bottom: 6rem; } /* Remover SVGs circulares datados do hero */ #page-home .apresentation .ap-svg1, #page-home .apresentation .ap-svg2, #page-home .apresentation .ap-svg3 { display: none !important; } #page-home .apresentation .title-display { font-size: clamp(3.2rem, 5.5vw, 5.8rem) !important; line-height: 1.02 !important; text-shadow: none !important; color: var(--rv-ink) !important; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 2rem; } #page-home .apresentation .subtitle { color: var(--rv-ink-soft) !important; font-size: 1.8rem !important; font-weight: 400; line-height: 1.5; max-width: 52ch; } #page-home .apresentation .image-top { border-radius: var(--rv-radius-xl); box-shadow: var(--rv-shadow-lg), 0 0 0 1px rgba(14, 165, 183, 0.10); max-height: 560px; object-fit: cover; } /* Clients trust card */ #page-home .apresentation .clients { background: var(--rv-surface); padding: 1.2rem 2rem; border-radius: var(--rv-radius-pill); box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); width: fit-content; margin-top: 2.4rem; } #page-home .apresentation .clients p { font-size: 1.3rem; color: var(--rv-ink-soft); margin: 0; } #page-home .apresentation .clients .icon-plus { background: var(--rv-gradient) !important; color: #fff !important; font-size: 1.2rem; } /* ---------- 5. PHRASE — editorial ---------- */ #page-home .effect-phrase { --title-font-size: clamp(2.6rem, 3.8vw, 4.2rem) !important; padding: clamp(4rem, 5vw, 5.5rem) 0 !important; } #page-home .effect-phrase .title { font-style: normal !important; font-weight: 600; color: var(--rv-ink) !important; max-width: 880px; margin: 0 auto; } #page-home .effect-phrase .aspas-left, #page-home .effect-phrase .aspas-right { opacity: 0.15 !important; } /* ---------- 6. ABOUT / SOLUTIONS — cards com respiração ---------- */ #page-home .about .side-left img, #page-home .solutions .side-right img { border-radius: var(--rv-radius-xl); box-shadow: var(--rv-shadow-md); } #page-home .about .side-right, #page-home .solutions .side-left { padding: 2rem 0; } #page-home .about .side-right .title, #page-home .solutions .side-left .title { font-size: clamp(2.6rem, 3.5vw, 3.8rem); margin-bottom: 2rem; } /* ---------- 7. BANNER MIDDLE — cover with gradient overlay ---------- */ .banner-middle { border-radius: var(--rv-radius-xl); overflow: hidden; margin: 4rem auto; max-width: calc(100% - 4rem); position: relative; isolation: isolate; } .banner-middle::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(4, 62, 77, 0.78) 0%, rgba(14, 165, 183, 0.55) 100%); z-index: 1; } .banner-middle .banner-content { position: relative; z-index: 2; } .banner-middle .title-display { color: #fff !important; } /* ---------- 8. GUIDE — redesign completo ---------- */ #page-home .guide { padding: clamp(3.5rem, 5vw, 5rem) 0; } #page-home .guide .background-box { /* guide mantém gradient verde como ponto vivo/destaque único na home */ background: var(--rv-gradient-accent) !important; border-radius: var(--rv-radius-xl) !important; box-shadow: var(--rv-shadow-accent), var(--rv-shadow-lg); } #page-home .guide .guide-preview { border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-lg); } #page-home .guide .middle-text .title { color: #fff !important; font-size: clamp(2.4rem, 3.2vw, 3.6rem); } #page-home .guide .middle-text p { color: rgba(255, 255, 255, 0.92); } #page-home .guide .middle-text .btn { background: #fff !important; color: var(--rv-accent-deep) !important; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25); } #page-home .guide .middle-text .btn:hover { background: var(--rv-accent-soft) !important; color: var(--rv-accent-deep) !important; } /* ---------- 9. TESTIMONY — cards modernos ---------- */ #page-home .testimony .title { font-size: clamp(2.8rem, 3.8vw, 4rem); margin-bottom: 2.4rem; } .card-testimony { background: var(--rv-surface) !important; border-radius: var(--rv-radius-lg) !important; padding: 3rem 2.4rem !important; box-shadow: var(--rv-shadow-md); border: 1px solid var(--rv-line); transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); } .card-testimony:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-lg); } .card-testimony svg { color: var(--rv-accent) !important; opacity: 0.3; } .card-testimony img { border-radius: 50%; object-fit: cover; border: 3px solid var(--rv-accent-soft); box-shadow: 0 4px 12px -4px rgba(255, 195, 0, 0.35); } .card-testimony .card-title { color: var(--rv-ink); font-size: 1.8rem; } .card-testimony .person-details { color: var(--rv-accent-deep); font-weight: 500; font-size: 1.3rem; } /* Remover SVG circulares verdes/amarelos decorativos do testimony */ #page-home .testimony .svg-circle-yellow, #page-home .testimony .svg-circle-green { opacity: 0.15 !important; } /* ---------- 10. OTHER BRANDS — clean grid ---------- */ #page-home .other-brands { padding: 6rem 0 !important; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); } #page-home .other-brands img { filter: grayscale(100%); opacity: 0.55; transition: all 0.3s var(--rv-ease); } #page-home .other-brands img:hover { filter: grayscale(0); opacity: 1; } /* ---------- 11. PROFESSIONALS — cards elevados ---------- */ .card-professional { background: var(--rv-surface) !important; border-radius: var(--rv-radius-lg) !important; box-shadow: var(--rv-shadow-sm); overflow: hidden; transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); border: 1px solid var(--rv-line); } .card-professional:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); } .card-professional .card-image { overflow: hidden; aspect-ratio: 4 / 5; } .card-professional .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--rv-ease); } .card-professional:hover .card-image img { transform: scale(1.05); } .card-professional .card-content { padding: 2rem 2rem 2.4rem !important; } .card-professional .employ { color: var(--rv-accent-deep); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; } .card-professional .card-title { color: var(--rv-ink); font-size: 1.8rem; margin-bottom: 0; } .card-professional .card-description { color: var(--rv-muted); font-size: 1.4rem; line-height: 1.5; margin-top: 1rem; } .card-professional .social-icons a { width: 3.4rem; height: 3.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rv-accent-soft); color: var(--rv-accent-deep); transition: all 0.2s var(--rv-ease); } .card-professional .social-icons a:hover { background: var(--rv-accent); color: #fff; transform: translateY(-2px); } /* ---------- 12. AVALIATION (form) — clean & inviting ---------- */ .avaliation { padding: clamp(3.5rem, 5vw, 5rem) 0 !important; } .avaliation header { text-align: center; max-width: 640px; margin: 0 auto 2.4rem; } .avaliation header .title { font-size: clamp(2.8rem, 4vw, 4rem); margin-bottom: 1.2rem; } .avaliation header h4 { color: var(--rv-ink-soft); font-size: 1.8rem; font-weight: 500; margin-bottom: 0.8rem; } .avaliation header p { color: var(--rv-muted); font-size: 1.5rem; } .avaliation .form { max-width: 880px; margin: 0 auto; padding: clamp(2.4rem, 4vw, 4rem); background: var(--rv-surface); border-radius: var(--rv-radius-xl); box-shadow: var(--rv-shadow-md); border: 1px solid var(--rv-line); } /* Form inputs — refinados */ .form-filled input[type="text"], .form-filled input[type="email"], .form-filled input[type="tel"], .form-filled select, .form-filled textarea { border-radius: var(--rv-radius-sm) !important; border: 1.5px solid var(--rv-line) !important; background: #fff !important; transition: border-color 0.2s var(--rv-ease), box-shadow 0.2s var(--rv-ease); } .form-filled input:focus, .form-filled select:focus, .form-filled textarea:focus { border-color: var(--rv-accent) !important; box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.22) !important; outline: none !important; } .form-filled label { color: var(--rv-muted) !important; font-weight: 500 !important; } .form .box-button { text-align: center; margin-top: 1rem; } .form .box-button .btn { min-width: 240px; } /* Radio group / solution question */ .radio-group .helper-radio { border-radius: var(--rv-radius-sm) !important; border: 1.5px solid var(--rv-line) !important; background: var(--rv-surface) !important; } .radio-group .helper-radio p { color: var(--rv-ink-soft); font-weight: 500; } /* ---------- 13. BANNERS DE TOPO (sobre, produtos, guias) ---------- */ .banner.bn-main-about, .banner.bn-main-guides, .banner.bn-main-product { position: relative; isolation: isolate; min-height: 480px; } .banner.bn-main-about::before, .banner.bn-main-guides::before, .banner.bn-main-product::before { content: ""; position: absolute; inset: 0; /* Overlay navy/turquesa opaco para garantir contraste do texto */ background: linear-gradient(100deg, rgba(43, 51, 66, 0.92) 0%, rgba(8, 121, 144, 0.86) 45%, rgba(14, 165, 183, 0.80) 100%); z-index: 1; } .banner.bn-main-about .banner-content, .banner.bn-main-guides .banner-content, .banner.bn-main-product .banner-content { position: relative; z-index: 2; } .banner.bn-main-about .banner-image, .banner.bn-main-guides .banner-image, .banner.bn-main-product .banner-image { filter: saturate(108%); } /* Conteúdo dos banners internos — tipografia IV + contraste */ .banner .hold-content.text-white .title-display, .banner .hold-content .title-display { color: #fff !important; font-family: var(--font-principal) !important; font-weight: 800 !important; letter-spacing: -0.02em; font-size: clamp(3.2rem, 5vw, 5.4rem) !important; line-height: 1.05 !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important; margin-bottom: 1.4rem; } .banner .hold-content .subtitle { color: rgba(255, 255, 255, 0.92) !important; font-weight: 500; font-size: clamp(1.7rem, 2vw, 2rem) !important; max-width: 52ch; } .banner .hold-content p { color: rgba(255, 255, 255, 0.88) !important; } .banner .hold-content .btn-primary { background: var(--rv-accent) !important; color: var(--rv-ink) !important; border-color: transparent !important; box-shadow: 0 10px 26px -6px rgba(255, 195, 0, 0.5); } .banner .hold-content .btn-primary:hover { background: var(--rv-accent-deep) !important; color: #fff !important; } /* Eyebrow amarelo com pill em fundo claro */ .rv-eyebrow { background: var(--rv-accent-soft) !important; color: var(--rv-accent-deep) !important; } /* ---------- 13b. Seções internas — aplicar IV uniformemente ---------- */ /* Títulos de seção em turquesa/navy, Nunito Sans */ body:not(.v2-page) .title, body:not(.v2-page) h1.title, body:not(.v2-page) h2.title { font-family: var(--font-principal) !important; color: var(--rv-ink) !important; font-weight: 700; letter-spacing: -0.015em; } body:not(.v2-page) .subtitle { font-family: var(--font-principal); color: var(--rv-primary); font-weight: 600; } /* Seção-header centrado (guias, sobre, avaliação) */ .section-header-center .title, .section-header-center h1.title { color: var(--rv-ink) !important; font-weight: 800; font-size: clamp(3rem, 4vw, 4rem) !important; } .section-header-center .section-subtitle { color: var(--rv-ink-soft); font-size: clamp(2rem, 1.8vw, 1.8rem); max-width: 62ch; margin: 1.4rem auto 0; } /* Cartões de contato (fale-conosco) — aplicar estilo IV */ #page-contact .contact-hero { padding: clamp(3.5rem, 4.5vw, 5rem) 0 3rem; } #page-contact .contact-hero .title-display { color: var(--rv-ink) !important; font-family: var(--font-principal); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(3.2rem, 5vw, 5rem) !important; } #page-contact .contact-card { background: #fff; border-radius: var(--rv-radius-lg); padding: 2.8rem 2.4rem; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); transition: transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease); text-decoration: none; } #page-contact .contact-card:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-md); border-color: var(--rv-primary-soft); } #page-contact .contact-card-icon { width: 5.2rem; height: 5.2rem; display: flex; align-items: center; justify-content: center; background: var(--rv-primary-soft); color: var(--rv-primary); border-radius: 50%; font-size: 2.4rem; margin-bottom: 2rem; } #page-contact .contact-card-whatsapp .contact-card-icon { background: #25D366; color: #fff; box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5); } #page-contact .contact-card h3 { color: var(--rv-ink) !important; font-family: var(--font-principal); font-weight: 700; margin-bottom: 0.5rem; } #page-contact .contact-card-value { color: var(--rv-primary-deep); font-size: 2rem; font-weight: 600; } #page-contact .contact-card-hint { color: var(--rv-muted); font-size: 1.3rem; } /* Formulário de avaliação */ #page-home.avaliation .title, .avaliation .title { color: var(--rv-ink) !important; font-family: var(--font-principal); font-weight: 800; } .form-avaliation .box-input input, .form-avaliation .box-input textarea, .form-avaliation .box-select select { border-color: var(--rv-line); border-radius: var(--rv-radius-sm); transition: border-color 0.2s, box-shadow 0.2s; } .form-avaliation .box-input input:focus, .form-avaliation .box-input textarea:focus, .form-avaliation .box-select select:focus { border-color: var(--rv-primary); box-shadow: var(--rv-shadow-ring); outline: none; } /* Cartões de produtos/guias com layout limpo */ .data-list .data-item, .guides-list .guide-item { border-radius: var(--rv-radius-lg); overflow: hidden; box-shadow: var(--rv-shadow-sm); transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); } .data-list .data-item:hover, .guides-list .guide-item:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); } /* ---------- 14. ABOUT (sobre) — sections ---------- */ #page-about .history { padding: clamp(3.5rem, 5vw, 5rem) 0 !important; } #page-about .history img { border-radius: var(--rv-radius-xl); box-shadow: var(--rv-shadow-md); } #page-about .history .right-side .title { font-size: clamp(2.8rem, 3.8vw, 4rem); margin-bottom: 1.8rem; } #page-about .ideals { background: linear-gradient(180deg, #F4F8F7 0%, #fff 100%); padding: clamp(3.5rem, 5vw, 5rem) 0 !important; } #page-about .ideals .title { margin-bottom: 2.4rem; font-size: clamp(2.6rem, 3.5vw, 3.6rem); } #page-about .ideals .card { background: var(--rv-surface) !important; border-radius: var(--rv-radius-lg) !important; padding: 3rem 2.4rem !important; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); text-align: center; transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); } #page-about .ideals .card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-md); } #page-about .ideals .card-image { width: 7rem; height: 7rem; margin: 0 auto 2rem !important; background: var(--rv-accent-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 1.4rem; } #page-about .ideals .card-image img { max-width: 100%; max-height: 100%; object-fit: contain; } #page-about .ideals .card-title { color: var(--rv-ink); font-size: 1.8rem !important; margin-bottom: 1rem !important; } /* ---------- 15. GUIDES page ---------- */ #page-guides .guides { padding: clamp(3.5rem, 5vw, 5rem) 0 !important; } #page-guides .guides .title { font-size: clamp(2.8rem, 3.8vw, 4rem); margin-bottom: 3.2rem; } .card-guide { background: var(--rv-surface) !important; border-radius: var(--rv-radius-lg) !important; overflow: hidden; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); display: flex; flex-direction: column; } .card-guide:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-md); } .card-guide .card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rv-primary-soft); } .card-guide .card-image img { width: 100%; height: 100%; object-fit: cover; } .card-guide .card-content { padding: 2rem 2rem 1.4rem !important; flex: 1; } .card-guide .card-title { color: var(--rv-ink); font-size: 1.7rem !important; margin-bottom: 1rem !important; } .card-guide .card-content p { color: var(--rv-muted); font-size: 1.4rem; } .card-guide .card-btn { margin: 0 2rem 2rem !important; } /* ---------- 16. PRODUCT / SERVICES pages ---------- */ #page-product .products, #page-product .services { padding: clamp(3.5rem, 5vw, 5rem) 0 !important; } .card-product { background: var(--rv-surface) !important; border-radius: var(--rv-radius-lg) !important; overflow: hidden; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); } .card-product:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-md); } .card-product .card-image { aspect-ratio: 1 / 1; background: linear-gradient(180deg, #F4F8F7 0%, #fff 100%); overflow: hidden; } .card-product .card-image img { width: 100%; height: 100%; object-fit: contain; padding: 2rem; transition: transform 0.4s var(--rv-ease); } .card-product:hover .card-image img { transform: scale(1.06); } .card-product .card-content { padding: 1.8rem 2rem 2.2rem !important; } .card-product .card-title { color: var(--rv-ink); font-size: 1.7rem !important; } #page-product-view .preview-product { padding: clamp(3rem, 4vw, 4rem) 0 !important; } #page-product-view .side-left .figure-main-img { background: linear-gradient(180deg, #F4F8F7 0%, #fff 100%); border-radius: var(--rv-radius-xl); padding: 4rem; box-shadow: var(--rv-shadow-sm); } #page-product-view .side-right .title { font-size: clamp(2.6rem, 3.5vw, 3.6rem); margin-bottom: 1rem; } #page-product-view .side-right .subtitle { color: var(--rv-accent-deep); font-weight: 600; font-size: 2rem; margin-bottom: 2rem; } /* ---------- 17. SERVICES list ---------- */ #page-product .services .service-item { background: var(--rv-surface); border-radius: var(--rv-radius-xl); overflow: hidden; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); margin-bottom: 3rem; } #page-product .services .service-item figure img { border-radius: var(--rv-radius-lg); } /* ==================================================================== FOOTER — Redesenho IV-REAVIVA 2026 Estrutura: [CTA] → [4 colunas] → [frase marca] → [legal + expression] ==================================================================== */ .footer-site { background: var(--rv-ink) !important; color: rgba(255, 255, 255, 0.82); font-family: var(--font-secundaria); position: relative; padding: 0 !important; margin: 0; overflow: hidden; } /* Detalhe amarelo sutil no topo — assinatura da marca */ .footer-site::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rv-gradient-accent); z-index: 2; } /* ========== FAIXA CTA (topo do footer) ========== */ .footer-cta { background: var(--rv-primary) !important; /* turquesa sólido, sem gradiente */ padding: clamp(3rem, 4vw, 4.5rem) 0; position: relative; } .footer-cta .wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; /* Mesmo wrap do header (max-width 1320 + padding 2rem) pra alinhar com a logo REAVIVA */ max-width: 1320px; margin: 0 auto; padding: 0 2rem; } .footer-cta-content h2 { font-family: var(--font-principal); color: #fff !important; font-size: clamp(2.4rem, 3vw, 3.4rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.8rem; } .footer-cta-content p { color: rgba(255, 255, 255, 0.88) !important; font-size: clamp(1.5rem, 1.7vw, 1.7rem); margin: 0; max-width: 54ch; } .footer-cta-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; } .footer-btn { display: inline-flex; align-items: center; gap: 0.8rem; padding: 1.4rem 2.4rem; font-family: var(--font-principal); font-weight: 700; font-size: 1.45rem; border-radius: 999px; text-decoration: none; transition: transform 0.25s var(--rv-ease), box-shadow 0.25s var(--rv-ease), background 0.25s ease, color 0.25s ease; } .footer-btn-whatsapp { background: #25D366; color: #fff !important; box-shadow: 0 10px 22px -6px rgba(37, 211, 102, 0.45); } .footer-btn-whatsapp:hover { background: #1EB855; transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(37, 211, 102, 0.6); } .footer-btn-outline { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.4); } .footer-btn-outline:hover { background: #fff; color: var(--rv-primary-deep) !important; border-color: #fff; transform: translateY(-2px); } /* ========== 4 COLUNAS ========== */ .footer-site-middle { padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(3.2rem, 5vw, 4.8rem); } .footer-site-middle .wrap { /* Mesmo wrap do header pra colunas do footer alinharem com a logo REAVIVA */ max-width: 1320px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: clamp(2.8rem, 4vw, 5rem); align-items: flex-start; } .footer-col { min-width: 0; } .footer-col-brand .footer-logo { height: 8rem; width: auto; display: block; margin: 0 0 2rem -0.8rem; /* alinha óptico com o texto abaixo */ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } .footer-tagline { color: rgba(255, 255, 255, 0.72) !important; font-size: 1.45rem; line-height: 1.6; max-width: 36ch; margin: 0; } /* Título das colunas com underline amarelo curto */ .footer-title { color: #fff !important; font-family: var(--font-principal); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.8rem; padding-bottom: 1rem; position: relative; } .footer-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 2.6rem; height: 2px; background: var(--rv-accent); border-radius: 99px; } /* Lista de links */ .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .footer-links a { color: rgba(255, 255, 255, 0.75) !important; text-decoration: none; font-size: 1.45rem; transition: color 0.2s ease, padding-left 0.25s var(--rv-ease); } .footer-links a:hover { color: var(--rv-accent) !important; padding-left: 0.6rem; } /* Endereço + links de contato */ .footer-address { display: flex; align-items: flex-start; gap: 1.2rem; font-style: normal; font-size: 1.45rem; color: rgba(255, 255, 255, 0.82); line-height: 1.5; margin: 0 0 2rem; } .footer-address i { flex-shrink: 0; width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 195, 0, 0.14); color: var(--rv-accent); border-radius: 50%; font-size: 1.3rem; } .footer-contact-link { display: flex; align-items: center; gap: 1.2rem; color: rgba(255, 255, 255, 0.82) !important; font-size: 1.45rem; margin-bottom: 1.2rem; text-decoration: none; transition: color 0.2s ease; } .footer-contact-link i { flex-shrink: 0; width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 195, 0, 0.14); color: var(--rv-accent); border-radius: 50%; font-size: 1.3rem; transition: background 0.25s ease, color 0.25s ease; } .footer-contact-link:hover { color: var(--rv-accent) !important; } .footer-contact-link:hover i { background: var(--rv-accent); color: var(--rv-ink); } .footer-contact-link strong { color: #fff; font-weight: 600; } /* Redes sociais */ .footer-social-hint { color: rgba(255, 255, 255, 0.65) !important; font-size: 1.35rem; margin: 0 0 2rem; max-width: 28ch; line-height: 1.5; } .footer-social { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-social a { width: 4.2rem; height: 4.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 2rem; border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.25s var(--rv-ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease; text-decoration: none; } .footer-social a:hover { transform: translateY(-3px); background: var(--rv-accent); color: var(--rv-ink); border-color: var(--rv-accent); box-shadow: 0 8px 18px -6px rgba(255, 195, 0, 0.55); } /* ========== FRASE DA MARCA ========== */ .footer-quote { background: rgba(0, 0, 0, 0.2); padding: 3rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-quote .wrap { max-width: 920px; margin: 0 auto; padding: 0 2.4rem; text-align: center; } .footer-quote p { color: rgba(255, 255, 255, 0.72) !important; font-family: var(--font-principal); font-style: italic; font-size: clamp(1.5rem, 1.8vw, 1.75rem); line-height: 1.5; margin: 0; letter-spacing: -0.005em; } /* ========== BARRA INFERIOR — legal + expression ========== */ .footer-site-bottom { background: rgba(0, 0, 0, 0.25); position: relative; } .footer-site-bottom .wrap { max-width: 1320px; margin: 0 auto; padding: 1.4rem 2rem; display: flex; justify-content: center; align-items: center; gap: 1.2rem; } .footer-legal { color: rgba(255, 255, 255, 0.55); font-size: 1.15rem; line-height: 1.55; margin: 0; text-align: center; } .footer-cnpj { color: rgba(255, 255, 255, 0.4); font-size: 1.05rem; } /* dmd na esquerda com respiro equivalente à margem direita do WhatsApp flutuante */ .footer-made-by { position: absolute; left: 2rem; /* mesmo respiro do botão WhatsApp à direita */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; margin: 0; } .footer-dmd { display: inline-block; padding: 0; font-family: 'Nunito Sans', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); text-decoration: none; border: 0; background: transparent; transition: color 0.25s ease; line-height: 1; } .footer-dmd:hover { color: var(--rv-primary, #0EA5B7); } /* ========== MOBILE ========== */ @media (max-width: 960px) { .footer-site-middle .wrap { grid-template-columns: 1fr 1fr; gap: 3rem; } .footer-col-brand { grid-column: 1 / -1; } .footer-cta .wrap { grid-template-columns: 1fr; text-align: center; } .footer-cta-content p { margin: 0 auto; } .footer-cta-actions { justify-content: center; } } @media (max-width: 560px) { .footer-site-middle .wrap { grid-template-columns: 1fr; gap: 3.2rem; } .footer-site-bottom .wrap { flex-direction: column; align-items: center; /* CENTRALIZADO no mobile (não left) */ text-align: center; } } /* ---------- 19. MODAIS ---------- */ .modal-container { border-radius: var(--rv-radius-lg) !important; box-shadow: var(--rv-shadow-lg) !important; background: var(--rv-surface); } .modal-header { border-bottom: 1px solid var(--rv-line) !important; } .modal-title { color: var(--rv-ink); font-weight: 700; } .modal-close { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--rv-line); color: var(--rv-ink); transition: all 0.2s var(--rv-ease); } .modal-close:hover { background: var(--rv-accent-soft); color: var(--rv-accent-deep); } /* ---------- 20. SWIPER nav buttons ---------- */ .swiper-button-next, .swiper-button-prev { width: 4.4rem !important; height: 4.4rem !important; background: var(--rv-surface) !important; border-radius: 50% !important; box-shadow: var(--rv-shadow-sm) !important; color: var(--rv-primary) !important; border: 1px solid var(--rv-line); transition: all 0.2s var(--rv-ease); } .swiper-button-next:hover, .swiper-button-prev:hover { background: var(--rv-primary) !important; color: #fff !important; transform: scale(1.05); } .swiper-pagination-bullet { background: var(--rv-line) !important; opacity: 1 !important; } .swiper-pagination-bullet-active { background: var(--rv-accent) !important; width: 2.4rem !important; border-radius: 99px !important; } /* ---------- 23. FALE CONOSCO (página nova) ---------- */ #page-contact { background: var(--rv-bg); } #page-contact .contact-hero { padding: clamp(3.5rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3.5rem); background: radial-gradient(900px 500px at 80% 20%, rgba(14, 165, 183, 0.08) 0%, transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(255, 195, 0, 0.08) 0%, transparent 55%); text-align: center; } #page-contact .contact-hero .title-display { font-size: clamp(3rem, 4.8vw, 5rem) !important; max-width: 820px; margin: 0 auto 2rem; color: var(--rv-ink); letter-spacing: -0.025em; line-height: 1.05; } #page-contact .contact-hero-sub { color: var(--rv-ink-soft); font-size: 1.8rem; max-width: 640px; margin: 0 auto; line-height: 1.55; } #page-contact .contact-cards { padding: 2rem 0 clamp(3rem, 4vw, 4rem); } #page-contact .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } #page-contact .contact-card { background: var(--rv-surface); border: 1px solid var(--rv-line); border-radius: var(--rv-radius-lg); padding: 3rem 2.4rem; text-align: center; box-shadow: var(--rv-shadow-sm); transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease), border-color 0.3s var(--rv-ease); display: block; text-decoration: none; color: inherit; } #page-contact .contact-card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); border-color: var(--rv-accent); } #page-contact .contact-card-icon { width: 6.4rem; height: 6.4rem; margin: 0 auto 1.8rem; border-radius: 50%; background: var(--rv-primary); color: var(--rv-accent); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; transition: all 0.3s var(--rv-ease); } #page-contact .contact-card:hover .contact-card-icon { background: var(--rv-accent); color: var(--rv-primary); transform: scale(1.08); } #page-contact .contact-card-whatsapp .contact-card-icon { background: #25D366; color: #fff; } #page-contact .contact-card-whatsapp:hover .contact-card-icon { background: #1ebd5a; color: #fff; } #page-contact .contact-card h3 { color: var(--rv-ink); font-size: 1.8rem; font-weight: 700; margin-bottom: 0.6rem; } #page-contact .contact-card-value { color: var(--rv-primary); font-size: 2rem; font-weight: 600; margin: 0.4rem 0 0.8rem; word-break: break-word; } #page-contact .contact-card-value strong { color: var(--rv-primary); } #page-contact .contact-card-hint { color: var(--rv-muted); font-size: 1.3rem; display: block; } /* Formulário + aside */ #page-contact .contact-form-section { padding: clamp(3rem, 4vw, 4rem) 0; background: linear-gradient(180deg, #fff 0%, #EEFAFC 100%); } #page-contact .contact-form-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; } #page-contact .contact-form-wrap { background: var(--rv-surface); border-radius: var(--rv-radius-xl); box-shadow: var(--rv-shadow-md); padding: clamp(2.4rem, 4vw, 4rem); border: 1px solid var(--rv-line); border-top: 4px solid var(--rv-accent); } #page-contact .contact-form-wrap header { margin-bottom: 3rem; } #page-contact .contact-form-wrap header .title { font-size: clamp(2.4rem, 3vw, 3rem); margin: 1rem 0 0.8rem; color: var(--rv-ink); } #page-contact .contact-form-wrap header p { color: var(--rv-muted); font-size: 1.5rem; } #page-contact .contact-form-wrap .box-button { text-align: center; margin-top: 1.2rem; } #page-contact .contact-form-wrap .box-button .btn { min-width: 260px; } /* Aside */ #page-contact .contact-aside { display: flex; flex-direction: column; gap: 2rem; } #page-contact .contact-info-card, #page-contact .contact-hours-card, #page-contact .contact-social-card { background: var(--rv-surface); border-radius: var(--rv-radius-lg); padding: 2.4rem; border: 1px solid var(--rv-line); box-shadow: var(--rv-shadow-sm); } #page-contact .contact-info-card { border-left: 4px solid var(--rv-primary); } #page-contact .contact-info-card .title { font-size: 1.8rem; color: var(--rv-ink); margin: 1rem 0 1.4rem; } #page-contact .contact-address { color: var(--rv-ink-soft); font-size: 1.4rem; line-height: 1.6; margin-bottom: 2rem; display: flex; gap: 1rem; } #page-contact .contact-address i { color: var(--rv-primary); background: var(--rv-accent-soft); width: 3.2rem; height: 3.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.4rem; } #page-contact .contact-hours-title, #page-contact .contact-social-title { font-size: 1.4rem; color: var(--rv-ink); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.4rem; padding-bottom: 1rem; position: relative; } #page-contact .contact-hours-title::after, #page-contact .contact-social-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 2px; background: var(--rv-accent); } #page-contact .contact-hours-list { list-style: none; padding: 0; margin: 0; } #page-contact .contact-hours-list li { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px dashed var(--rv-line); font-size: 1.4rem; color: var(--rv-ink-soft); } #page-contact .contact-hours-list li:last-child { border-bottom: none; } #page-contact .contact-hours-list li strong { color: var(--rv-primary); font-weight: 600; } #page-contact .contact-social-card .social-icons { display: flex; gap: 1rem; } #page-contact .contact-social-card .social-icons a { width: 4rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rv-primary-soft); color: var(--rv-primary); transition: all 0.2s var(--rv-ease); text-decoration: none; font-size: 2rem; } #page-contact .contact-social-card .social-icons a:hover { background: var(--rv-primary); color: var(--rv-accent); transform: translateY(-2px); } /* Mapa */ #page-contact .contact-map { padding: 0 0 clamp(3rem, 4vw, 4rem); } #page-contact .contact-map-card { border-radius: var(--rv-radius-xl); overflow: hidden; box-shadow: var(--rv-shadow-md); position: relative; aspect-ratio: 16 / 6; background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-primary-deep) 100%); border: 1px solid var(--rv-line); } #page-contact .contact-map-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; text-decoration: none; transition: all 0.3s var(--rv-ease); } #page-contact .contact-map-link:hover { background: rgba(255, 195, 0, 0.08); } #page-contact .contact-map-overlay { display: flex; align-items: center; gap: 1.2rem; background: var(--rv-accent); color: var(--rv-primary); padding: 2rem 2.8rem; border-radius: var(--rv-radius-pill); font-weight: 700; font-size: 1.5rem; box-shadow: var(--rv-shadow-accent); } #page-contact .contact-map-overlay i { font-size: 1.8rem; } /* Mobile */ @media (max-width: 900px) { #page-contact .contact-grid { grid-template-columns: 1fr; } #page-contact .contact-form-grid { grid-template-columns: 1fr; gap: 2.4rem; } #page-contact .contact-map-card { aspect-ratio: 4 / 3; } } /* ---------- 24. SECTION HEADER (eyebrow + title + subtitle) — agora à esquerda ---------- */ .section-header-center { text-align: left; /* alinhado à esquerda (era center) */ max-width: 100%; /* full width pra subtitle longo caber em 1 linha */ margin: 0 0 2.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; /* gap menor entre eyebrow/h2/subtitle */ } /* Override defensivo: se alguém colar `.text-center` num h2 dentro deste header, força o text-align: left mesmo assim */ .section-header-center .text-center, .section-header-center h2.text-center { text-align: left !important; } .section-header-center .rv-eyebrow, .section-header-center .title, .section-header-center .section-subtitle, .section-header-center h2, .section-header-center p { /* Tudo começa exatamente no mesmo X (sem margin-left/padding-left extras) */ margin: 0 !important; padding-left: 0 !important; text-align: left !important; align-self: flex-start !important; } .section-header-center .title { font-size: clamp(2.6rem, 3.5vw, 4rem); letter-spacing: -0.015em; color: var(--rv-ink); } .section-subtitle { color: var(--rv-ink-soft); font-size: 1.7rem; line-height: 1.5; max-width: 100%; /* sem limite — frase longa cabe em 1 linha */ margin-left: 0 !important; text-align: left !important; align-self: flex-start !important; } /* Ajuste fino: eyebrow em ideals (about) centrada */ #page-about .ideals .section-header-center { margin-bottom: 2.4rem; } #page-about .ideals .data-list { margin-top: 0; } /* ---------- 25. HERO VIDEO (substitui img estática quando banner-video.mp4 existe) ---------- */ #page-home .apresentation .hero-media { position: relative; display: block; border-radius: var(--rv-radius-xl); overflow: hidden; box-shadow: var(--rv-shadow-lg), 0 0 0 1px rgba(14, 165, 183, 0.10); aspect-ratio: 4 / 5; max-height: 560px; margin-left: auto; background: var(--rv-primary); } #page-home .apresentation .hero-media .image-top, #page-home .apresentation .hero-media .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; box-shadow: none !important; max-height: none !important; } #page-home .apresentation .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(14, 165, 183, 0.12) 100%); pointer-events: none; z-index: 1; } @media (max-width: 991px) { #page-home .apresentation .hero-media { display: none; } } /* ---------- 26. 3 CARDS DE CATEGORIAS (portfólio, abaixo do hero) ---------- */ #page-home .home-categories { padding: clamp(2rem, 3vw, 3.5rem) 0 clamp(3rem, 4vw, 4rem); margin-top: -3rem; position: relative; z-index: 2; } #page-home .home-categories .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } #page-home .home-categories .cat-card { background: var(--rv-surface); border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-md); border: 1px solid var(--rv-line); overflow: hidden; transition: all 0.3s var(--rv-ease); display: flex; flex-direction: column; } #page-home .home-categories .cat-card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); border-color: var(--rv-accent); } #page-home .home-categories .cat-card-image { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-primary-deep) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } #page-home .home-categories .cat-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.20) 100%); pointer-events: none; } #page-home .home-categories .cat-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--rv-ease); } #page-home .home-categories .cat-card:hover .cat-card-image img { transform: scale(1.05); } #page-home .home-categories .cat-card-icon { width: 6.4rem; height: 6.4rem; border-radius: 50%; background: rgba(255, 195, 0, 0.92); color: var(--rv-primary); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; position: relative; z-index: 1; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.3); } #page-home .home-categories .cat-card-body { padding: 2.4rem 2rem 2.4rem; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } #page-home .home-categories .cat-card-body h3 { color: var(--rv-ink) !important; font-size: 1.8rem; margin: 0; letter-spacing: -0.01em; line-height: 1.25; font-weight: 700; } #page-home .home-categories .cat-card-body p { color: var(--rv-muted); font-size: 1.4rem; line-height: 1.5; margin: 0; flex: 1; } #page-home .home-categories .cat-card-body .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 900px) { #page-home .home-categories .cat-grid { grid-template-columns: 1fr; gap: 2rem; } #page-home .home-categories { margin-top: 0; padding-top: 3rem; } } /* ---------- 27. BIBLIOTECA DE GUIAS (lead magnet ampliado) ---------- */ #page-home .guides-library { padding: clamp(3.5rem, 5vw, 5rem) 0; background: linear-gradient(180deg, #fff 0%, #EEFAFC 100%); } #page-home .guides-library .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-bottom: 3.2rem; } #page-home .guides-library .guide-mini { background: var(--rv-surface); border-radius: var(--rv-radius-lg); overflow: hidden; box-shadow: var(--rv-shadow-sm); border: 1px solid var(--rv-line); transition: all 0.3s var(--rv-ease); display: flex; flex-direction: column; position: relative; } #page-home .guides-library .guide-mini::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--rv-gradient-accent); opacity: 0; transition: opacity 0.3s var(--rv-ease); z-index: 2; } #page-home .guides-library .guide-mini:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); } #page-home .guides-library .guide-mini:hover::before { opacity: 1; } #page-home .guides-library .guide-mini-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rv-primary-soft); margin: 0; } #page-home .guides-library .guide-mini-image img { width: 100%; height: 100%; object-fit: cover; } #page-home .guides-library .guide-mini-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-primary-deep) 100%); color: var(--rv-accent); font-size: 3.6rem; } #page-home .guides-library .guide-mini-body { padding: 2rem 2rem 2.4rem; flex: 1; display: flex; flex-direction: column; gap: 1rem; } #page-home .guides-library .guide-mini-body h3 { color: var(--rv-ink) !important; font-size: 2rem; margin: 0; letter-spacing: -0.01em; line-height: 1.3; font-weight: 700; } #page-home .guides-library .guide-mini-body p { color: var(--rv-muted); font-size: 1.4rem; line-height: 1.5; margin: 0; flex: 1; } #page-home .guides-library .guide-mini-body .btn { margin-top: auto; align-self: flex-start; } #page-home .guides-library .guides-library-footer { text-align: center; } @media (max-width: 900px) { #page-home .guides-library .guides-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ---------- 21. UTILITIES ---------- */ .rv-lift { transition: transform 0.3s var(--rv-ease), box-shadow 0.3s var(--rv-ease); } .rv-lift:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-md); } /* Fade-in on scroll (ready for IntersectionObserver JS) */ .rv-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--rv-ease), transform 0.7s var(--rv-ease); } .rv-reveal.rv-visible { opacity: 1; transform: none; } /* Respect user preference for reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .whatsapp_fix { animation: none !important; } } /* ---------- 22. RESPONSIVO — ajustes mobile ---------- */ @media (max-width: 768px) { #page-home .apresentation { padding: 3rem 0 4rem; } #page-home .apresentation .title-display { font-size: clamp(2.6rem, 7vw, 3.6rem) !important; } .banner-middle { margin: 2rem 1rem; max-width: calc(100% - 2rem); } .avaliation .form { padding: 2rem 2rem; border-radius: var(--rv-radius-lg); } .footer-site .footer-phrase { font-size: 1.4rem; padding: 2rem; } } /* ============================================================ MODO DE EDIÇÃO ADMIN — barra superior + pencils por seção ============================================================ */ .rv-editbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #0F172A; color: #fff; border-bottom: 2px solid var(--rv-primary, #0EA5B7); box-shadow: 0 6px 20px -8px rgba(0,0,0,0.4); font-family: 'Nunito Sans', sans-serif; font-size: 2rem; } .rv-editbar-inner { max-width: 1280px; margin: 0 auto; padding: 0.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; } .rv-editbar-left { display: flex; align-items: center; gap: 0.9rem; } .rv-editbar-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 99px; background: var(--rv-primary, #0EA5B7); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .rv-editbar-title { font-weight: 600; opacity: 0.85; } .rv-editbar-right { display: flex; align-items: center; gap: 0.6rem; } .rv-editbar-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 99px; background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-family: inherit; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .rv-editbar-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); } .rv-editbar-toggle[aria-pressed="true"] { background: var(--rv-primary, #0EA5B7); border-color: var(--rv-primary, #0EA5B7); } .rv-editbar-link { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 1.15rem; padding: 0.45rem 0.8rem; transition: color 0.2s ease; } .rv-editbar-link:hover { color: #fff; } .rv-editbar-logout { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 2rem; font-weight: 400; line-height: 1; padding: 0 0.6rem; transition: color 0.2s ease; } .rv-editbar-logout:hover { color: #EF4444; } /* Quando modo admin ATIVO (editbar visível), empurra o layout para baixo */ body.rv-admin-on { padding-top: 54px; } body.rv-admin-on .header-site { top: 54px; } /* GAP HEADER → HERO: zerar qualquer margin-top da primeira section em páginas não-home (Sobre, Serviços, Guias) pra que o hero turquesa cole direto no bottom do header navy. Vale tanto pra desktop quanto pra mobile. */ body:not(#page-home) > .handle-mobile > main > section:first-child, body:not(#page-home) > .handle-mobile > main > .v2-hero:first-child { margin-top: 0 !important; } /* Remove a linha branca de border-bottom do header em páginas não-home pra cole 100% no hero sem nenhum traço visível */ body:not(#page-home) .header-site { border-bottom: 0 !important; } /* MODO ATIVO — destacar seções editáveis + mostrar pencils */ .rv-edit-mode section[data-edit] { position: relative; outline: 2px dashed rgba(14,165,183,0.35); outline-offset: -10px; transition: outline-color 0.2s ease; } .rv-edit-mode section[data-edit]:hover { outline-color: var(--rv-primary, #0EA5B7); } .rv-edit-mode section[data-edit]::after { content: "✎ " attr(data-edit-label); position: absolute; top: 14px; right: 14px; z-index: 50; background: var(--rv-primary, #0EA5B7); color: #fff; font-family: 'Nunito Sans', sans-serif; font-size: 1.15rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 99px; box-shadow: 0 6px 18px -4px rgba(14,165,183,0.6); cursor: pointer; letter-spacing: 0.02em; opacity: 0.92; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .rv-edit-mode section[data-edit]:hover::after { opacity: 1; transform: translateY(-2px); } /* Clicável via overlay invisível sobre o pseudo-elemento */ .rv-edit-mode section[data-edit] > .rv-edit-btn { display: block; } .rv-edit-btn { display: none; position: absolute; top: 8px; right: 8px; width: calc(100% - 16px); max-width: 320px; height: 44px; z-index: 51; background: transparent; border: 0; cursor: pointer; margin-left: auto; text-indent: -9999px; } /* ============================================================ PHOTO SWAP — clicar em img dentro de [data-edit] = trocar ============================================================ */ .rv-edit-mode .rv-swap-target { cursor: pointer; position: relative; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color 0.18s ease, filter 0.18s ease, transform 0.18s ease; } .rv-edit-mode .rv-swap-target:hover { outline-color: #17A39C; filter: brightness(1.05); transform: scale(1.01); } /* Overlay "trocar foto" no hover (pseudo-elemento no parent figure / parent img) */ .rv-edit-mode .rv-swap-target::after { content: ""; /* placeholder — overlay real fica via wrapper se necessário */ } /* ============================================================ MODAL ADMIN — Catálogo (e variantes futuras) ============================================================ */ .rv-modal { position: fixed; inset: 0; z-index: 99000; display: flex; align-items: center; justify-content: center; } .rv-modal[hidden] { display: none; } .rv-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 35, 0.78); backdrop-filter: blur(4px); cursor: pointer; } .rv-modal-content { position: relative; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5); max-height: 92vh; width: 92vw; display: flex; flex-direction: column; overflow: hidden; z-index: 1; color: #2B3342; } .rv-modal-content--lg { max-width: 1200px; } .rv-modal-content--xl { max-width: 920px; width: 94vw; } /* ============================================================ GUIAS — grid centralizado quando poucos cards ============================================================ */ .guides { padding: clamp(4rem, 6vw, 7rem) 0; } .guides .data-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.4rem; } .guides .data-list.is-centered-few { grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; } /* Esconder botão "Saiba mais" se houver no banner antigo (defesa) */ .bn-main-guides .banner-content .btn { display: none !important; } /* ============================================================ BANNER topo da página Serviços/Produtos — full width ============================================================ */ .bn-main-product { position: relative; width: 100%; overflow: hidden; background: linear-gradient(135deg, #128A84 0%, #17A39C 50%, #1FBFB7 100%); } .bn-main-product .banner-image { width: 100% !important; height: 100%; max-width: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .bn-main-product .banner-content { position: relative; z-index: 2; padding: clamp(4rem, 8vw, 8rem) 0; min-height: 280px; display: flex; align-items: center; } .bn-main-product .banner-content .hold-content { max-width: 720px; padding: 0 clamp(2rem, 4vw, 4rem); } /* ============================================================ ESPECIALIDADES — Tudo o que oferecemos (6 cards) ============================================================ */ .rv-offerings { /* Padding-top maior; padding-bottom AINDA maior pra dar respiro depois dos cards */ padding: clamp(8rem, 11vw, 12rem) 0 clamp(10rem, 13vw, 14rem); background: linear-gradient(180deg, #FAFCFD 0%, #F2F8F9 100%); } .rv-offerings-header { text-align: left; max-width: 100%; margin: 0 0 1.4rem; } /* Título "Tudo o que oferecemos." colado na descrição "De próteses..." */ .rv-offerings-title { margin-bottom: 0.4rem !important; } .rv-offerings-lede { margin-top: 0.2rem !important; } .rv-offerings-lede { max-width: 100% !important; /* sem cap — texto fica em 1 linha no web */ white-space: nowrap; /* mantém em uma linha mesmo se viewport reduzir */ } @media (max-width: 900px) { /* Mobile pode quebrar normal — frase é longa demais pra caber em 1 linha */ .rv-offerings-lede { white-space: normal !important; } } .rv-offerings-header .rv-eyebrow { color: var(--rv-primary, #17A39C); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 2rem; display: inline-block; margin-bottom: 1.4rem; text-align: left; } .rv-offerings-header .rv-offerings-title, .rv-offerings-header .rv-offerings-lede { text-align: left; } .rv-offerings-title { font-family: 'Nunito Sans', sans-serif; font-size: clamp(2.8rem, 3.4vw, 4rem); font-weight: 800; color: #2B3342; margin: 0 0 1.2rem; letter-spacing: -0.02em; } .rv-offerings-lede { color: #5A6473; font-size: 1.55rem; line-height: 1.55; margin: 0; } .rv-offerings-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.4rem; } .rv-offering { background: #fff; border-radius: 16px; padding: 3rem 2.4rem 2.6rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: 0 6px 20px -10px rgba(15,30,40,0.12); border: 1px solid #ECF2F4; transition: transform 0.25s var(--rv-ease, ease), box-shadow 0.25s var(--rv-ease, ease); } .rv-offering:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -12px rgba(14,165,183,0.25); border-color: rgba(23,163,156,0.3); } .rv-offering-icon { width: 52px; height: 52px; background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -2px rgba(23,163,156,0.35); } .rv-offering-icon svg { width: 26px; height: 26px; } .rv-offering h3 { font-family: 'Nunito Sans', sans-serif; font-size: 1.75rem; font-weight: 800; color: #2B3342; margin: 0; letter-spacing: -0.01em; line-height: 1.25; } .rv-offering p { color: #5A6473; font-size: 1.4rem; line-height: 1.55; margin: 0; } /* ============================================================ SERVIÇOS — design editorial limpo, sem retângulos ============================================================ */ .services { padding: clamp(7rem, 10vw, 10rem) 0 clamp(5rem, 7vw, 8rem); background: #fff; } .services .section-header-center { margin-bottom: clamp(4rem, 6vw, 7rem) !important; text-align: center !important; } /* Override completo do .rv-eyebrow legado (sem pill amarela) */ .services .section-header-center .rv-eyebrow, .rv-offerings-header .rv-eyebrow { background: transparent !important; color: var(--rv-primary, #17A39C) !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-size: 2rem !important; margin-bottom: 1.4rem !important; padding: 0 !important; border-radius: 0 !important; display: inline-block !important; } .services .section-header-center .rv-eyebrow::before, .rv-offerings-header .rv-eyebrow::before { display: none !important; } .services .section-header-center .title { font-family: 'Nunito Sans', sans-serif !important; font-size: clamp(2.8rem, 3.4vw, 4rem) !important; font-weight: 800 !important; color: #2B3342 !important; margin: 0 0 1.2rem !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; } .services .section-header-center .section-subtitle { max-width: 100%; margin: 0.2rem 0 0 !important; /* praticamente colada no h2 acima */ color: #5A6473 !important; font-size: 1.55rem !important; line-height: 1.5 !important; text-align: left !important; } /* Reduz gap interno do section-header-center (entre eyebrow/h2/subtitle) */ .services .section-header-center { gap: 0.4rem !important; margin-bottom: 1.4rem !important; /* menos espaço antes do primeiro service-item */ } .services .section-header-center .title, .services .section-header-center h2 { margin: 0 0 0.2rem !important; } /* Cards de serviço — alternam lado e ZERO borda/box */ .services .service-item { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; gap: clamp(2rem, 5vw, 6rem) !important; /* Margem entre service items reduzida — itens mais próximos */ margin-bottom: clamp(1.5rem, 2.5vw, 3rem) !important; grid-template-columns: 42% 1fr !important; align-items: center !important; } /* Primeiro service item cola na descrição "Cuidado humano..." */ .services .section-header-center + .service-item, .services .service-item:first-of-type { margin-top: 0.5rem !important; } .services .service-item:last-child { margin-bottom: 0 !important; } /* (alternância par/ímpar removida — todas as imagens à esquerda) */ /* Foto — limpa, com sombra muito sutil */ .services .service-item figure:before, .services .service-item figure:after { display: none !important; content: none !important; } .services .service-item figure { padding: 0 !important; margin: 0 !important; position: relative; width: auto !important; } .services .service-item img { width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: 14px; box-shadow: 0 12px 28px -14px rgba(0,0,0,0.18); display: block !important; } /* Texto */ .services .service-item .text-content { padding: 0 !important; } .services .service-item .text-content h3 { font-family: 'Nunito Sans', sans-serif; font-size: clamp(2rem, 2.2vw, 2.4rem) !important; font-weight: 800; color: #2B3342; margin: 0 0 2rem !important; letter-spacing: -0.015em; line-height: 1.2; position: relative; padding-bottom: 1.2rem; } /* Risco amarelo sutil abaixo do título de cada serviço */ .services .service-item .text-content h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 3.6rem; height: 3px; background: var(--rv-accent, #F5BE1A); border-radius: 2px; } .services .service-item:nth-child(even) .text-content h3::after { left: 0; } .services .service-item .text-content p { color: #5A6473 !important; font-size: 1.4rem !important; line-height: 1.65 !important; margin: 0 0 1rem !important; max-width: 52rem; } .services .service-item .text-content p:last-child { margin-bottom: 0; } /* Mobile: stack vertical */ @media (max-width: 768px) { .services .service-item, .services .service-item:nth-child(even) { grid-template-columns: 1fr !important; gap: 2rem !important; } .services .service-item:nth-child(even) figure { order: 0; } .services .service-item .text-content { text-align: center; } } /* ============================================================ MODAL DE CONFIRMAÇÃO genérico — substitui confirm() nativo ============================================================ */ .rv-confirm { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; } .rv-confirm[hidden] { display: none; } .rv-confirm-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 35, 0.62); backdrop-filter: blur(3px); cursor: pointer; } .rv-confirm-card { position: relative; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45); width: 92vw; max-width: 420px; padding: 30px 28px 22px; text-align: center; animation: rvConfirmIn 0.22s ease both; z-index: 1; } @keyframes rvConfirmIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .rv-confirm-icon { width: 56px; height: 56px; margin: 0 auto 14px; background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); color: #fff; font-size: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -4px rgba(23,163,156,0.5); } .rv-confirm--danger .rv-confirm-icon { background: linear-gradient(135deg, #E36B5C 0%, #C0392B 100%); box-shadow: 0 6px 18px -4px rgba(192,57,43,0.5); } .rv-confirm-title { margin: 0 0 6px; font-family: 'Nunito Sans', sans-serif; font-size: 2rem; font-weight: 800; color: #2B3342; } .rv-confirm-msg { margin: 0 0 22px; font-size: 1.4rem; line-height: 1.45; color: #5A6473; } .rv-confirm-actions { display: flex; gap: 10px; justify-content: center; } .rv-confirm-btn { font-family: inherit; font-size: 1.35rem; font-weight: 600; padding: 11px 22px; border-radius: 8px; cursor: pointer; min-width: 110px; transition: filter 0.15s, background 0.15s, transform 0.05s; } .rv-confirm-cancel { background: #f5f5f5; color: #2B3342; border: 1px solid #ddd; } .rv-confirm-cancel:hover { background: #ececec; } .rv-confirm-ok { background: #17A39C; color: #fff; border: 0; } .rv-confirm-ok:hover { filter: brightness(1.08); } .rv-confirm-ok:active { transform: translateY(1px); } .rv-confirm--danger .rv-confirm-ok { background: #C0392B; } /* ============================================================ MODAL CATÁLOGO v4 — Layout limpo (2 colunas, sem caixas) ============================================================ */ .rv-cat4-body { display: grid; grid-template-columns: 240px 1fr; height: 72vh; max-height: 680px; overflow: hidden; background: #fff; } .rv-cat4-sidebar { display: flex; flex-direction: column; border-right: 1px solid #ececec; background: #fafafa; overflow: hidden; } .rv-cat4-cards { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; } .rv-cat4-card-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s; } .rv-cat4-card-item:hover { background: rgba(23,163,156,0.08); } .rv-cat4-card-item.is-selected { background: rgba(23,163,156,0.14); outline: 1px solid #17A39C; } .rv-cat4-card-thumb { width: 42px; height: 42px; flex-shrink: 0; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .rv-cat4-card-thumb img { width: 100%; height: 100%; object-fit: contain; } .rv-cat4-card-thumb span { font-size: 16px; color: #ccc; } .rv-cat4-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rv-cat4-card-meta strong { font-size: 2rem; color: #2B3342; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-cat4-card-meta small { font-size: 1.05rem; color: #888; } .rv-cat4-add-card { margin: 8px; padding: 9px 12px; background: #17A39C; color: #fff; border: 0; border-radius: 6px; font-size: 2rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: filter 0.15s; } .rv-cat4-add-card:hover { filter: brightness(1.08); } /* Editor: sem caixa interna, direto no fundo branco do modal */ .rv-cat4-editor { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; width: 100%; box-sizing: border-box; } .rv-cat4-empty { margin: auto; text-align: center; color: #999; font-style: italic; } .rv-cat4-editor-top { display: flex; align-items: center; gap: 10px; } .rv-cat4-card-title { flex: 1; font-size: 2rem !important; font-weight: 600 !important; padding: 10px 14px !important; } .rv-cat4-delete-card { background: transparent; color: #C0392B; border: 1px solid rgba(192,57,43,0.35); border-radius: 6px; padding: 8px 14px; font-size: 1.2rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .rv-cat4-delete-card:hover { background: rgba(192,57,43,0.10); border-color: #C0392B; } /* Lista de fotos do card */ .rv-cat4-photos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rv-cat4-empty-photos { padding: 18px; text-align: center; background: #fafafa; border: 1px dashed #ccc; border-radius: 6px; color: #888; font-size: 1.2rem; } .rv-cat4-photo { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fafafa; border: 1px solid #ececec; border-radius: 6px; cursor: grab; transition: background 0.15s, border-color 0.15s, transform 0.05s, opacity 0.15s; } .rv-cat4-photo:hover { background: #f5f5f5; } .rv-cat4-photo.is-dragging { opacity: 0.4; cursor: grabbing; } .rv-cat4-photo.is-drag-target { background: rgba(23,163,156,0.10); border-color: #17A39C; transform: scale(1.005); } .rv-cat4-photo-grip { color: #ccc; font-size: 18px; line-height: 1; user-select: none; padding: 0 2px; } .rv-cat4-photo-thumb { width: 56px; height: 56px; flex-shrink: 0; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; } .rv-cat4-photo-thumb img { width: 100%; height: 100%; object-fit: contain; } .rv-cat4-photo-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; } .rv-cat4-photo-fields .rv-input { font-size: 1.2rem !important; padding: 5px 8px !important; } .rv-cat4-photo-del { width: 28px; height: 28px; background: rgba(192,57,43,0.85); color: #fff; border: 0; border-radius: 4px; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 2px 0; flex-shrink: 0; } .rv-cat4-photo-del:hover { background: #C0392B; } /* Dropzone */ .rv-cat4-dropzone { margin-top: 4px; padding: 22px; text-align: center; border: 2px dashed #17A39C; border-radius: 8px; background: rgba(23,163,156,0.04); color: #17A39C; font-size: 1.3rem; transition: background 0.15s; } .rv-cat4-dropzone:hover { background: rgba(23,163,156,0.10); } .rv-cat4-dropzone.is-drag-over { background: rgba(23,163,156,0.20); border-style: solid; } .rv-cat4-dropzone small { display: block; color: #666; font-size: 1.1rem; margin-top: 2px; } /* Mobile */ @media (max-width: 720px) { .rv-cat4-body { grid-template-columns: 1fr; grid-template-rows: 140px 1fr; height: 85vh; } .rv-cat4-sidebar { border-right: 0; border-bottom: 1px solid #ececec; flex-direction: row; } .rv-cat4-cards { display: flex; flex: 1; padding: 8px; } .rv-cat4-card-item { flex-shrink: 0; min-width: 160px; } } .rv-modal-content--md { max-width: 760px; } .rv-modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid #eee; } .rv-modal-header h2 { margin: 0; font-size: 2rem; font-weight: 700; color: #2B3342; flex: 1; } .rv-modal-close { background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #999; padding: 4px 10px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .rv-modal-close:hover { background: #f5f5f5; color: #2B3342; } .rv-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .rv-modal-hint { margin: 0 0 16px 0; color: #666; font-size: 1.35rem; line-height: 1.5; } .rv-modal-footer { display: flex; gap: 10px; padding: 14px 24px; border-top: 1px solid #eee; background: #fafafa; } .rv-btn-primary, .rv-btn-ghost { font-family: inherit; font-size: 1.4rem; font-weight: 600; padding: 10px 22px; border-radius: 8px; cursor: pointer; border: 0; transition: filter 0.15s, transform 0.05s; } .rv-btn-primary { background: #17A39C; color: #fff; } .rv-btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .rv-btn-primary:disabled { opacity: 0.5; cursor: wait; } .rv-btn-ghost { background: transparent; color: #2B3342; border: 1px solid #ddd; display: inline-flex; align-items: center; gap: 6px; } .rv-btn-ghost:hover { background: #f0f0f0; } .rv-btn-ghost input[type=file] { display: none; } /* ============================================================ MODAL CATÁLOGO v3 — Layout 3 colunas com drag&drop ============================================================ */ .rv-cat3-body { display: grid !important; grid-template-columns: 240px 1fr; /* lista cards 240 + editor preenche resto */ gap: 0 !important; padding: 0 !important; height: 72vh; max-height: 720px; overflow: hidden !important; } .rv-cat3-col { display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e5e5e5; overflow: hidden; } .rv-cat3-col:last-child { border-right: 0; } .rv-cat3-col-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e5e5e5; background: #f5f5f5; } .rv-cat3-col-header h3 { margin: 0; flex: 1; font-size: 1.45rem; font-weight: 700; color: #2B3342; } .rv-btn-tiny { font-size: 1.1rem; font-weight: 600; padding: 5px 12px; border-radius: 5px; border: 0; cursor: pointer; background: transparent; color: #2B3342; display: inline-flex; align-items: center; gap: 4px; } .rv-btn-tiny.rv-btn-primary { background: #17A39C; color: #fff; } .rv-btn-tiny.rv-btn-primary:hover { filter: brightness(1.08); } .rv-btn-tiny.rv-btn-danger { background: transparent; color: #C0392B; border: 1px solid rgba(192,57,43,0.35); } .rv-btn-tiny.rv-btn-danger:hover { background: rgba(192,57,43,0.10); border-color: #C0392B; } /* Coluna 1: lista de cards */ .rv-cat3-cards-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; } .rv-cat3-card-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; transition: background 0.15s; } .rv-cat3-card-item:hover { background: #f0f0f0; } .rv-cat3-card-item.is-selected { background: rgba(23,163,156,0.12); outline: 1px solid #17A39C; } .rv-cat3-card-thumb { width: 48px; height: 48px; flex-shrink: 0; background: #fafafa; border: 1px solid #eee; border-radius: 4px; overflow: hidden; } .rv-cat3-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .rv-cat3-card-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #ccc; } .rv-cat3-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rv-cat3-card-info strong { font-size: 2rem; color: #2B3342; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-cat3-card-info small { font-size: 1.05rem; color: #888; } /* Coluna 2: editor — ocupa toda a largura disponível da coluna central */ .rv-cat3-editor-body { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: none; } .rv-cat3-empty { margin: 0; padding: 30px 14px; text-align: center; color: #888; font-style: italic; } .rv-cat3-field { display: flex; flex-direction: column; gap: 4px; } .rv-cat3-field span { font-size: 1.2rem; font-weight: 600; color: #555; } .rv-cat3-photos-label { font-size: 1.15rem; color: #555; margin-top: 6px; } .rv-cat3-photos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rv-cat3-photos-empty { padding: 14px; background: #fafafa; border: 1px dashed #ccc; border-radius: 6px; color: #888; text-align: center; font-size: 1.2rem; } .rv-cat3-photo-row { display: flex; gap: 8px; align-items: center; padding: 6px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; } .rv-cat3-photo-handle { color: #ccc; font-size: 18px; cursor: grab; padding: 0 4px; user-select: none; } .rv-cat3-photo-row { transition: background 0.15s, border-color 0.15s, transform 0.05s; } .rv-cat3-photo-row[draggable="true"] { cursor: grab; } .rv-cat3-photo-row.is-dragging { opacity: 0.4; cursor: grabbing; } .rv-cat3-photo-row.is-drag-target { border-color: #17A39C !important; background: rgba(23,163,156,0.08) !important; transform: scale(1.01); } .rv-cat3-photo-thumb { width: 52px; height: 52px; flex-shrink: 0; background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .rv-cat3-photo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .rv-cat3-photo-label { font-size: 2rem !important; padding: 6px 8px !important; } .rv-cat3-photo-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; } .rv-cat3-photo-fit { font-size: 1.1rem !important; padding: 4px 6px !important; color: #666; } .rv-cat3-photo-del { width: 26px; height: 26px; background: rgba(192,57,43,0.85); color: #fff; border: 0; border-radius: 4px; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; padding-bottom: 2px; } .rv-cat3-photo-del:hover { background: #C0392B; } .rv-cat3-dropzone { margin-top: 8px; border: 2px dashed #17A39C; border-radius: 8px; background: rgba(23,163,156,0.04); padding: 24px; text-align: center; transition: background 0.15s, border-color 0.15s; } .rv-cat3-dropzone.is-drag-over { background: rgba(23,163,156,0.18); border-color: #0E7C76; border-style: solid; } .rv-cat3-dropzone-inner { pointer-events: none; color: #17A39C; font-size: 1.3rem; } .rv-cat3-dropzone-inner small { color: #666; font-size: 1.1rem; } /* Coluna 3: explorer */ .rv-cat3-search { margin: 8px 12px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 2rem; font-family: inherit; color: #2B3342; } .rv-cat3-search:focus { outline: 2px solid #17A39C; outline-offset: -1px; border-color: #17A39C; } .rv-cat3-explorer-grid { flex: 1; overflow-y: auto; padding: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; align-content: start; } .rv-cat3-file { background: #2B3342; border: 1px solid #d5d5d5; border-radius: 6px; overflow: hidden; cursor: grab; display: flex; flex-direction: column; transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s; } .rv-cat3-file:hover { border-color: #17A39C; box-shadow: 0 4px 12px -2px rgba(23,163,156,0.35); } .rv-cat3-file:active { cursor: grabbing; transform: scale(0.97); } .rv-cat3-file img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; /* fundo branco pra PNGs transparentes aparecerem */ display: block; padding: 4px; box-sizing: border-box; } .rv-cat3-file span { background: #fff; } .rv-cat3-file span { font-size: 0.95rem; padding: 3px 5px; color: #555; background: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #eee; } .rv-cat3-hint { font-size: 1rem; color: #888; margin: 0; padding: 6px 12px; border-top: 1px solid #eee; text-align: center; } /* Footer status */ .rv-cat3-status { font-size: 1.2rem; color: #666; align-self: center; } .rv-cat3-status--ok { color: #17A39C; font-weight: 600; } .rv-cat3-status--err { color: #C0392B; font-weight: 600; } .rv-cat3-status--info{ color: #2B3342; } /* ============================================================ MODAL DOWNLOAD GUIA — "Quase lá!" visual Reaviva ============================================================ */ .rv-guide-modal.show .rv-guide-modal-card, .rv-guide-modal[open] .rv-guide-modal-card { animation: rvGuideIn 0.28s var(--rv-ease, ease) both; } @keyframes rvGuideIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .rv-guide-modal-card { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45); max-width: 480px !important; width: 92vw; margin: auto; padding: 36px 32px 28px !important; overflow: hidden; box-sizing: border-box; } .rv-guide-modal-card * { box-sizing: border-box; } /* Borda decorativa turquesa no topo */ .rv-guide-modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #17A39C 0%, #F5BE1A 100%); } .rv-guide-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: transparent; border: 0; font-size: 26px; line-height: 1; color: #999; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 0 3px 0; transition: background 0.15s, color 0.15s; } .rv-guide-modal-close:hover { background: #f5f5f5; color: #2B3342; } .rv-guide-modal-header { text-align: center; margin-bottom: 24px; } .rv-guide-modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; box-shadow: 0 8px 20px -6px rgba(23,163,156,0.55); } .rv-guide-modal-header h3 { font-family: 'Nunito Sans', sans-serif; font-size: 2.4rem; font-weight: 800; color: #2B3342; margin: 0 0 6px; } .rv-guide-modal-sub { font-size: 1.4rem; color: #5A6473; margin: 0; line-height: 1.5; } .rv-guide-form { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0; padding: 0; } .rv-guide-form fieldset { border: 0; margin: 0; padding: 0; } .rv-guide-field { display: flex; flex-direction: column; gap: 5px; } .rv-guide-field span { font-size: 1.15rem; font-weight: 600; color: #2B3342; letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 4px; } .rv-guide-field span em { color: #E36B5C; font-style: normal; font-weight: 700; } .rv-guide-field span small { color: #999; font-weight: 400; font-size: 1rem; } .rv-guide-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .rv-guide-field-row { grid-template-columns: 1fr; } } .rv-guide-disclaimer em { color: #E36B5C; font-style: normal; font-weight: 700; } .rv-guide-field input { font-family: inherit !important; font-size: 1.45rem !important; padding: 12px 14px !important; border: 1.5px solid #DDE2E8 !important; border-radius: 8px !important; background: #fafbfc !important; color: #2B3342 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; margin: 0 !important; box-sizing: border-box !important; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .rv-guide-field input::placeholder { color: #B8BEC7; } .rv-guide-field input:focus { outline: none; border-color: #17A39C; background: #fff; box-shadow: 0 0 0 3px rgba(23,163,156,0.12); } .rv-guide-field input:invalid:not(:placeholder-shown) { border-color: #E36B5C; } .rv-guide-field input:valid:not(:placeholder-shown) { border-color: #17A39C; } .rv-guide-submit { margin-top: 8px; background: linear-gradient(135deg, #F5BE1A 0%, #EBAB02 100%); color: #2B3342; font-family: inherit; font-size: 1.55rem; font-weight: 700; padding: 14px 24px; border: 0; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px -4px rgba(245,190,26,0.55); transition: transform 0.08s, box-shadow 0.15s, filter 0.15s; } .rv-guide-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 24px -4px rgba(245,190,26,0.7); } .rv-guide-submit:active { transform: translateY(0); } .rv-guide-submit:disabled { opacity: 0.6; cursor: wait; } .rv-guide-disclaimer { font-size: 1.1rem; color: #888; text-align: center; margin: 6px 0 0; line-height: 1.4; } /* Responsivo — modal mais compacto no celular (fontes/paddings menores) */ @media (max-width: 480px) { .rv-guide-modal-card { padding: 22px 18px 18px !important; max-width: 92vw !important; border-radius: 12px !important; } .rv-guide-modal-close { width: 28px; height: 28px; font-size: 22px; top: 10px; right: 10px; } .rv-guide-modal-header { margin-bottom: 16px; } .rv-guide-modal-icon { width: 44px; height: 44px; font-size: 20px; margin: 0 auto 10px; } .rv-guide-modal-header h3 { font-size: 1.5rem !important; margin: 0 0 4px; } .rv-guide-modal-sub { font-size: 1rem !important; line-height: 1.4; } .rv-guide-form { gap: 10px !important; } .rv-guide-field { gap: 3px !important; } .rv-guide-field span { font-size: 0.9rem !important; } .rv-guide-field span small { font-size: 0.8rem !important; } .rv-guide-field input { font-size: 1.05rem !important; padding: 9px 11px !important; border-radius: 6px !important; } .rv-guide-field-row { gap: 8px !important; } .rv-guide-submit { font-size: 1.1rem !important; padding: 11px 18px !important; border-radius: 8px !important; margin-top: 4px !important; } .rv-guide-disclaimer { font-size: 0.85rem !important; margin: 4px 0 0; } } /* ============ Biblioteca: grid de cards no modal ============ */ .rv-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .rv-library-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.05s; display: flex; flex-direction: column; } .rv-library-card:hover { border-color: #17A39C; } .rv-library-card:active { transform: scale(0.99); } .rv-library-cover { position: relative; width: 100%; aspect-ratio: 16/10; background: #fafafa; overflow: hidden; } .rv-library-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rv-library-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 1.2rem; font-style: italic; } .rv-library-inactive { position: absolute; top: 8px; right: 8px; background: rgba(192,57,43,0.92); color: #fff; font-size: 1rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; } .rv-library-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .rv-library-info strong { font-size: 1.35rem; color: #2B3342; line-height: 1.3; } .rv-library-info small { font-size: 1.1rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Responsivo: empilha em mobile */ @media (max-width: 900px) { .rv-cat3-body { grid-template-columns: 1fr; grid-template-rows: 180px 1fr 220px; height: 85vh; } .rv-cat3-col { border-right: 0; border-bottom: 1px solid #e5e5e5; } } /* ============================================================ MODAL CATÁLOGO v2 (legado) — Grid dos cards no modal ============================================================ */ .rv-catalog-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .rv-card-editor { background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .rv-card-editor-field { display: flex; flex-direction: column; gap: 3px; } .rv-card-editor-field span { font-size: 1.15rem; font-weight: 600; color: #555; } .rv-input { width: 100%; font-family: inherit; font-size: 1.35rem; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #2B3342; } .rv-input:focus { outline: 2px solid #17A39C; outline-offset: -1px; border-color: #17A39C; } /* Lista de fotos do card (cada uma com label) */ .rv-card-photos { display: flex; flex-direction: column; gap: 10px; } .rv-photo-slot { display: flex; gap: 10px; align-items: center; } .rv-photo-thumb { position: relative; width: 70px; height: 70px; flex-shrink: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.05s; } .rv-photo-thumb:hover { border-color: #17A39C; } .rv-photo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .rv-photo-delete { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; background: rgba(192, 57, 43, 0.92); color: #fff; border: 0; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; padding-bottom: 2px; transition: background 0.15s, transform 0.05s; } .rv-photo-delete:hover { background: #C0392B; transform: scale(1.1); } .rv-photo-label { flex: 1; font-size: 2rem !important; padding: 6px 10px !important; } /* Rodapé do card: ícones excluir card + adicionar foto */ .rv-card-footer { display: flex; gap: 8px; padding-top: 8px; border-top: 1px dashed #ddd; margin-top: 4px; } .rv-icon-btn { flex: 1; background: transparent; border: 1px solid #ccc; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 1.2rem; font-weight: 500; color: #555; transition: background 0.15s, border-color 0.15s, color 0.15s; } .rv-icon-btn.rv-icon-add { color: #17A39C; border-color: #17A39C; } .rv-icon-btn.rv-icon-add:hover { background: rgba(23,163,156,0.10); } .rv-icon-btn.rv-icon-del { color: #C0392B; border-color: rgba(192,57,43,0.4); } .rv-icon-btn.rv-icon-del:hover { background: rgba(192,57,43,0.10); border-color: #C0392B; } /* Picker de imagem */ .rv-image-picker-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; } .rv-image-picker-status { color: #666; font-size: 2rem; } .rv-image-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .rv-image-pick { cursor: pointer; background: #fff; border: 2px solid #eee; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s, transform 0.05s; } .rv-image-pick:hover { border-color: #17A39C; } .rv-image-pick:active { transform: scale(0.97); } .rv-image-pick img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fafafa; display: block; } .rv-image-pick span { font-size: 1.05rem; padding: 4px 6px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ INLINE TEXT EDIT — manifesto, stats ============================================================ */ .rv-edit-mode .rv-inline-edit-target { cursor: text; outline: 2px dashed rgba(23, 163, 156, 0.4); outline-offset: 4px; border-radius: 4px; transition: outline-color 0.18s ease, background 0.18s ease; } .rv-edit-mode .rv-inline-edit-target:hover { outline-color: rgba(23, 163, 156, 0.75); background: rgba(23, 163, 156, 0.06); } .rv-edit-mode .rv-inline-edit-target.rv-inline-edit-active { outline: 2px solid #17A39C; background: rgba(23, 163, 156, 0.10); } /* Em fundo escuro (manifesto, stats), usar amarelo pra contraste */ .v2-manifesto .rv-inline-edit-target, .v2-stats .rv-inline-edit-target { outline-color: rgba(245, 190, 26, 0.4); } .v2-manifesto .rv-inline-edit-target:hover, .v2-stats .rv-inline-edit-target:hover { outline-color: rgba(245, 190, 26, 0.8); background: rgba(245, 190, 26, 0.10); } .v2-manifesto .rv-inline-edit-target.rv-inline-edit-active, .v2-stats .rv-inline-edit-target.rv-inline-edit-active { outline-color: #F5BE1A; background: rgba(245, 190, 26, 0.15); } /* Toast de feedback do swap */ .rv-swap-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 99999; padding: 12px 22px; font-family: 'Nunito Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; background: #1E2B38; border-radius: 100px; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.45); letter-spacing: 0.3px; animation: rvSwapToastIn 0.25s ease-out; } .rv-swap-toast--ok { background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); } .rv-swap-toast--err { background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%); } .rv-swap-toast--info{ background: linear-gradient(135deg, #1E2B38 0%, #2B3342 100%); } @keyframes rvSwapToastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ============================================================ HEADER — botão "Painel" (só visível pra admin logado) ============================================================ */ .rv-header-admin-li { display: flex; align-items: center; } .rv-header-admin-btn { display: inline-flex !important; align-items: center; padding: 8px 16px !important; background: linear-gradient(135deg, #17A39C 0%, #128A84 100%); color: #fff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 100px; text-decoration: none; border: 0; box-shadow: 0 4px 12px rgba(23,163,156,0.30); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; } .rv-header-admin-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(23,163,156,0.40); transform: translateY(-1px); color: #fff !important; } .rv-header-admin-btn:active { transform: translateY(0); } /* ============================================================ AVALIAÇÃO GRATUITA — formulário REAVIVA (IV oficial) POSTa para app.reavivareabilitacao.com.br ============================================================ */ .reaviva-avaliacao, .ra-form-host { --ra-brand: #17A39C; --ra-brand-dk: #128A84; --ra-amarelo: #F5BE1A; --ra-navy: #2B3342; --ra-grafite: #3F4A5C; --ra-vermelho: #C0392B; --ra-bg: #F4F6F7; --ra-border: #E4E8EE; } .reaviva-avaliacao { font-family: "Nunito Sans", "Lato", -apple-system, "Segoe UI", system-ui, sans-serif; padding: 48px 16px; background: var(--ra-bg); } .reaviva-avaliacao .ra-wrap { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(43,51,66,0.08); padding: 28px 24px; } .ra-head { text-align: center; margin-bottom: 20px; } .ra-badge { display: inline-block; padding: 4px 12px; background: var(--ra-amarelo, #F5BE1A); color: var(--ra-navy, #2B3342); border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; } .ra-head h2 { color: var(--ra-navy, #2B3342); font-size: 28px; font-weight: 800; margin: 0 0 8px; } .ra-head p { color: var(--ra-grafite, #3F4A5C); font-size: 14px; margin: 0; line-height: 1.5; } /* form grid 2-col padrão */ .ra-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-family: "Nunito Sans", "Lato", -apple-system, "Segoe UI", system-ui, sans-serif; } .ra-label { display: flex; flex-direction: column; gap: 4px; } .ra-label.ra-full, .ra-form > .ra-btn, .ra-form > .ra-status, .ra-form > .ra-disclaimer { grid-column: 1 / -1; } .ra-label > span { font-size: 12px; color: var(--ra-navy, #2B3342); font-weight: 600; } .ra-label > span em { font-style: normal; color: var(--ra-grafite, #3F4A5C); font-weight: 400; } .ra-form input, .ra-form select, .ra-form textarea { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--ra-border, #E4E8EE); border-radius: 8px; background: #fff; color: var(--ra-navy, #2B3342); transition: border-color .15s, box-shadow .15s; width: 100%; } .ra-form input:focus, .ra-form select:focus, .ra-form textarea:focus { outline: none; border-color: var(--ra-brand, #17A39C); box-shadow: 0 0 0 3px rgba(23,163,156,0.15); } .ra-form textarea { resize: vertical; min-height: 90px; font-family: inherit; } .ra-btn { background: var(--ra-brand, #17A39C); color: #fff; border: none; padding: 14px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: background .15s, transform .1s; margin-top: 8px; font-family: inherit; } .ra-btn:hover { background: var(--ra-brand-dk, #128A84); } .ra-btn:active { transform: scale(0.98); } .ra-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ra-status { font-size: 13px; text-align: center; margin: 4px 0 0; min-height: 18px; } .ra-status.loading { color: var(--ra-grafite, #3F4A5C); } .ra-status.success { color: var(--ra-brand-dk, #128A84); font-weight: 700; } .ra-status.error { color: var(--ra-vermelho, #C0392B); font-weight: 600; } .ra-disclaimer { font-size: 11px; color: var(--ra-grafite, #3F4A5C); text-align: center; margin: 4px 0 0; line-height: 1.4; } @media (max-width: 520px) { .ra-form { grid-template-columns: 1fr; } .reaviva-avaliacao { padding: 32px 12px; } .reaviva-avaliacao .ra-wrap { padding: 22px 16px; } .ra-head h2 { font-size: 24px; } } /* ============================================================ MOBILE OVERRIDE FINAL — vence regras desktop posteriores no arquivo (.services .section-header-center .title em ~linha 4174-4199 tem !important e vinha vencendo por source order). Aqui no final do arquivo + dentro de @media garante que padrão mobile prevaleça. ============================================================ */ @media (max-width: 900px) { /* TÍTULO de seções (Pilares, Valores, Especialidades, Nossos Serviços, Conheça Também) — tamanho padrão menor pra hierarquia visual */ body .v2-pilares-header h2, body .v2-valores-header h2, body .rv-offerings-title, body .services .section-header-center .title, body .services .section-header-center h2, body .section-header-center .title, body .section-header-center h2 { font-size: clamp(1.5rem, 4.3vw, 1.9rem) !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; margin: 0.3rem 0 1.6rem !important; text-align: left !important; } /* LEDE/parágrafo abaixo do título — cola no topo (h2 cuida do gap) */ body .v2-pilares-header p, body .v2-valores-header p, body .rv-offerings-lede, body .services .section-subtitle, body .section-header-center .section-subtitle { margin: 0 !important; font-size: 0.95rem !important; /* "Cuidado humano + ..." mais discreto */ line-height: 1.5 !important; text-align: left !important; max-width: 100% !important; font-weight: 400 !important; color: #5A6473 !important; } /* PARCERIAS — "Componentes e materiais de fornecedores..." mesmo tamanho do parágrafo da Nossa História ("Começamos fabricando palmilhas...") — fonte menor (mesma proporção dos demais ledes mobile) */ body .v2-parceiros-header p, body .v2-about-story-body p { margin: 0 0 1.6rem !important; font-size: 1.05rem !important; line-height: 1.55 !important; text-align: left !important; max-width: 100% !important; color: var(--v2-ink-soft) !important; } /* SERVICE-ITEMS — Equipe Multidisciplinar, Conteúdos para seu desenvolvimento, etc. Mesmo tratamento: h3 com tamanho do título padrão, p com fonte lede, espaçamento h3→p generoso (~1.6rem), e p:last-child sem margin-bottom. */ body .services .service-item .text-content h3, body .services .service-item h3 { font-family: 'Nunito Sans', sans-serif !important; font-size: clamp(1.5rem, 4.3vw, 1.9rem) !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; font-weight: 800 !important; color: #2B3342 !important; text-align: left !important; margin: 0 0 1.6rem !important; padding-bottom: 0.8rem !important; } /* O risco amarelo abaixo do h3 — manter mas mais discreto */ body .services .service-item .text-content h3::after { width: 2.8rem !important; height: 2px !important; left: 0 !important; } body .services .service-item .text-content p, body .services .service-item p { font-size: 1.05rem !important; line-height: 1.5 !important; color: #5A6473 !important; text-align: left !important; margin: 0 0 0.8rem !important; max-width: 100% !important; } body .services .service-item .text-content p:last-child, body .services .service-item p:last-child { margin-bottom: 0 !important; } /* NOSSA HISTÓRIA + PARCERIAS — h2 "Nascemos para trazer evolução..." e "Trabalhamos com as melhores marcas do mundo." mesmo tamanho (um pouco maior que o padrão das outras seções) */ body .v2-about-story-body h2, body .v2-parceiros-header h2 { font-size: clamp(1.7rem, 5vw, 2.2rem) !important; line-height: 1.22 !important; letter-spacing: -0.008em !important; } /* PARCERIAS — quebra de linha (margem generosa) entre eyebrow "PARCERIAS QUE ENTREGAM EXCELÊNCIA" e h2 "Trabalhamos com as melhores..." */ body .v2-parceiros-header .v2-eyebrow { margin-bottom: 1.4rem !important; } /* HEADER — espaço no topo (acima do logo) nas páginas internas (Sobre, Serviços, Guias). Home fica como está (vídeo full-bleed). Compensa main padding-top pra não cortar o conteúdo abaixo do header fixo. */ body:not(#page-home) .header-site .wrap { padding-top: 2.4rem !important; padding-bottom: 1.4rem !important; } body:not(#page-home) .handle-mobile > main { padding-top: 100px !important; } /* COMO PODEMOS AJUDAR — específico: h2 "Nossos serviços" com gap simples pra section-subtitle "Cuidado humano + ..." (não generoso como outros section-headers). Subtitle no mesmo tamanho dos parágrafos dos service-items abaixo ("Para que a sua reabilitação...") */ body .services .section-header-center .title, body .services .section-header-center h2 { margin: 0.3rem 0 0.4rem !important; /* quebra de linha simples */ } body .services .section-header-center .section-subtitle, body .services .section-subtitle { font-size: 1.05rem !important; /* igual ao p dos service-items */ line-height: 1.5 !important; margin: 0 !important; font-weight: 400 !important; color: #5A6473 !important; } /* ESPECIALIDADES — tirar gap entre lede ("De próteses sob medida...") e os cards. Antes tinha 0.4rem de margin-bottom no header. */ body .rv-offerings-header { margin: 0 !important; } body .rv-offerings-grid { margin-top: 0 !important; } } /* ============================================================ WEB/DESKTOP — Especialidades com linhas divisórias no topo/base pra dar respiro visual entre seções ============================================================ */ @media (min-width: 901px) { body .rv-offerings { border-top: 1px solid #E5E9F0; border-bottom: 1px solid #E5E9F0; } /* PARCERIAS — espaçamento eyebrow/h2/lede igual ao padrão Nossa História (eyebrow → 1.4rem → h2 → 2rem → p). Antes estava bem mais apertado. */ body .v2-parceiros-header h2 { margin: 1.4rem 0 2rem !important; } body .v2-parceiros-header p { margin: 0 !important; } }