/* ============================================================================= Pilar — sistema visual partilhado. Sistema monocromático derivado do que a Apple realmente usa (medido em apple.com): texto #1d1d1f, superfícies #fff e #f5f5f7, secundário #86868b, divisórias #d2d2d7, botões em pílula, pesos 600, tracking negativo apertado nas manchetes. Diferença deliberada: o acento é o PRETO DA LOGO (#0b0b0c), não o azul da Apple. A cor vem da fotografia — a interface é um enquadramento neutro. ── Porque um ficheiro partilhado ───────────────────────────────────────── Cada página tinha ~300 linhas de CSS embutido, quase todas iguais. A marca já mudou cinco vezes e cada mudança obrigou a editar oito ficheiros. Agora é aqui, uma vez. As páginas só declaram o que lhes é específico. ========================================================================== */ :root{ --ink:#1d1d1f; --ink-strong:#0b0b0c; --surface:#ffffff; --surface-alt:#f5f5f7; --text-2:#86868b; --divider:#d2d2d7; --divider-soft:#e8e8ed; /* Retidos para estados: sucesso e aviso precisam de cor, o resto não. */ --positive:#1d7a4c; --warning:#8a5a00; /* Um só acento, de propósito — o mesmo padrão da Bricks.co (laranja) e da XP Investimentos (amarelo): base quase inteiramente P&B, com uma única cor usada com disciplina nos pontos que pedem destaque (CTA principal, progresso, badges numerados) — nunca espalhada por texto corrido, links ou ícones decorativos. Dourado envelhecido, não o laranja/amarelo dos concorrentes: evoca valor e arquitetura clássica (colunas), coerente com "Pilar" — sem competir com Bricks nem XP. */ --accent:#b8862e; --accent-strong:#8f6a23; --accent-soft:#f3e6ce; --radius-card:18px; --radius-pill:980px; --wrap:1024px; --font:'Google Sans Flex','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; /* Aliases dos nomes antigos, para o HTML existente continuar a funcionar sem ser reescrito linha a linha. */ --bg:var(--surface); --bg-alt:var(--surface-alt); --card:var(--surface); --border:var(--divider); --text-body:#494b4f; --text-body-dim:var(--text-2); /* No sistema monocromático estes aliases são tons neutros: o HTML antigo usa-os em avatares e chips decorativos, onde cor não acrescenta nada. */ --terracotta:#3a3a3c; --terracotta-dark:rgba(0,0,0,.72); --terracotta-light:var(--surface-alt); --azulejo:#5a5a5e; --azulejo-light:var(--surface-alt); --teal:#8a8a8e; --teal-light:var(--surface-alt); --radius:var(--radius-card); --radius-sm:12px; } *{box-sizing:border-box;} /* overflow-x:hidden vive no , não no . Motivo nada óbvio: a spec de CSS Overflow promove automaticamente o outro eixo para "auto" sempre que um eixo é "hidden" e o outro fica "visible" (para poder mostrar scrollbars). Em isso cria um SEGUNDO scroller, aninhado dentro do de — window.scrollTo()/scrollY passam a não corresponder ao que está realmente visível, e é exatamente isso que faz o estado ".scrolled" do cabeçalho nunca disparar (o "scroll" real acontece dentro do , não na janela). Em a promoção é inofensiva: já É o scroller principal, é para ali que window.scrollY aponta de qualquer forma. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;} body{ margin:0;background:var(--surface);color:var(--ink); font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.01em; -webkit-font-smoothing:antialiased; } img{max-width:100%;} a{color:inherit;} :focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;border-radius:4px;} .container{max-width:var(--wrap);margin:0 auto;padding:0 22px;} /* ---- Tipografia ------------------------------------------------------- */ h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.08;} h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.035em;} h2{font-size:clamp(28px,3.9vw,44px);} h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.022em;} h4{font-size:15px;letter-spacing:-.015em;} p{margin:0 0 1em;} .eyebrow{ display:inline-block;font-size:12px;font-weight:500;text-transform:uppercase; letter-spacing:.06em;color:var(--text-2);margin-bottom:14px; } /* ---- Botões ----------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:var(--radius-pill);font-family:inherit;font-size:15px;font-weight:500; letter-spacing:-.01em;padding:11px 22px;text-decoration:none;cursor:pointer; border:1px solid transparent;transition:opacity .2s,background .2s,border-color .2s; white-space:nowrap; } .btn-primary{background:var(--accent);color:var(--ink-strong);} .btn-primary:hover{background:var(--accent-strong);opacity:1;} .btn-secondary,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--divider);} .btn-secondary:hover,.btn-ghost:hover{background:var(--surface-alt);} .btn-sm{font-size:13px;padding:7px 15px;} /* ---- Cabeçalho -------------------------------------------------------- */ /* `header` só posiciona e dá margem ao topo (position:fixed + padding-top). O logótipo (.brand-name) fica sempre fora de qualquer fundo — é a marca, não um item de navegação. A pílula visível é só `.nav-pill` (links + CTAs). Antes de rolar, a pílula é só desfoque, sem cor — não compete com o vídeo do hero por baixo. Ao rolar (".scrolled"), é o `nav` inteiro que ganha o vidro fosco claro e a sombra, envolvendo também o logótipo: as duas formas soltas juntam-se numa única cápsula. `.nav-pill` nesse estado fica sem fundo próprio — quem mostra o vidro passa a ser o `nav` à sua volta. */ header{ position:fixed;top:0;left:0;right:0;z-index:50; padding-top:18px; } header nav{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:14px; border-radius:var(--radius-pill); transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,padding .4s ease; } header.scrolled nav{ background:rgba(255,255,255,.72); border:1px solid var(--divider-soft); box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 32px rgba(0,0,0,.06); padding:7px 7px 7px 20px; } .brand-name{ display:flex;align-items:center;gap:9px;font-size:19px;font-weight:600; letter-spacing:-.022em;color:var(--ink-strong);text-decoration:none; } header .brand-name{font-size:22px;gap:11px;flex-shrink:0;} .brand-mark{width:24px;height:24px;flex-shrink:0;object-fit:contain;} header .brand-mark{width:32px;height:32px;} .nav-pill{ display:flex;align-items:center;gap:22px; padding:8px 8px 8px 22px; border-radius:var(--radius-pill); border:1px solid rgba(0,0,0,.07); background:transparent; /* Sem saturate: sobre um fundo já saturado (céu azul do vídeo do hero), saturate(180%) transformava o desfoque num disco de cor sólida em vez de vidro — o mesmo problema já corrigido no .nav-burger. */ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,padding .4s ease; } header.scrolled .nav-pill{ background:transparent;border-color:transparent;box-shadow:none;padding:0; backdrop-filter:none;-webkit-backdrop-filter:none; } .nav-links{display:flex;align-items:center;gap:26px;} .nav-links a{font-size:13.5px;text-decoration:none;color:var(--ink);opacity:.82;transition:opacity .18s;} .nav-links a:hover,.nav-links a.active{opacity:1;} .nav-right{display:flex;align-items:center;gap:10px;} /* Mesma altura que .btn-sm (padding+font-size+borda idênticos) — antes ficavam desalinhados porque cada um tinha as suas próprias medidas. */ .lang-toggle{ display:inline-flex;align-items:center;justify-content:center; font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;user-select:none; border:1px solid var(--divider);border-radius:var(--radius-pill);padding:7px 15px; transition:border-color .18s,color .18s; } .lang-toggle:hover{border-color:var(--ink);color:var(--ink);} /* ---- Menu mobile (burger) ---------------------------------------------- Substitui nav-links + nav-right abaixo de 900px: um botão redondo com dois traços (não três — pedido explícito, mais discreto) que se transforma em "×" e abre uma folha a ecrã inteiro, deslizando de cima para baixo — não um cartão pequeno flutuante, que ficava perdido e difícil de ler. */ .nav-burger{ -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent; position:relative;z-index:2; display:none;align-items:center;justify-content:center; width:38px;height:38px;flex-shrink:0;border-radius:50%; border:1px solid rgba(0,0,0,.07);background:transparent;cursor:pointer;padding:0;margin:0; /* Sem saturate: ao contrário da pílula (com texto a dar forma), o burger é um alvo pequeno e isolado — saturate(180%) sobre um fundo saturado (ex.: céu azul do vídeo) tornava-o um disco de cor sólida, ilegível como "vidro". Só desfoque, com reforço de opacidade abaixo. */ backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); transition:background .4s ease,border-color .4s ease; } .nav-burger:focus:not(:focus-visible){outline:none;} header.scrolled .nav-burger{border-color:var(--divider-soft);background:rgba(255,255,255,.72);} /* Aberto: fica sempre sobre fundo branco sólido (a folha por baixo), nunca sobre o vídeo — por isso o mesmo tratamento do estado "scrolled". */ .nav-burger.open{border-color:var(--divider-soft);background:var(--surface);} .nav-burger-bars{position:relative;display:block;width:15px;height:11px;} .nav-burger-bars span{ position:absolute;left:0;display:block;height:1.5px;width:100%; background:var(--ink);border-radius:1px; transition:transform .3s cubic-bezier(.16,1,.3,1),top .3s cubic-bezier(.16,1,.3,1),opacity .2s ease; } .nav-burger-bars span:first-child{top:0;} .nav-burger-bars span:last-child{top:9.5px;} .nav-burger.open .nav-burger-bars span:first-child{top:4.75px;transform:rotate(45deg);} .nav-burger.open .nav-burger-bars span:last-child{top:4.75px;transform:rotate(-45deg);} /* Folha a ecrã inteiro, não um cartão — desliza de cima para baixo (translateY) e cobre tudo, incluindo o vídeo do hero. Itens de navegação grandes ficam no topo; idioma + Entrar ficam presos ao fundo da folha (margin-top:auto no primeiro elemento depois dos links). */ .mobile-menu{ position:fixed;inset:0;z-index:1; display:flex;flex-direction:column; padding:104px 28px 40px; background:var(--surface); overflow-y:auto; opacity:0;visibility:hidden; transform:translateY(-100%); transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease,visibility .5s; } .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);} .mobile-menu a{ display:block;padding:16px 0; font-size:clamp(30px,9.5vw,42px);font-weight:600;letter-spacing:-.03em; color:var(--ink);text-decoration:none;border-bottom:1px solid var(--divider-soft); } .mobile-menu a:first-child{padding-top:0;} .mobile-menu-divider{margin-top:auto;height:0;} /* O rodapé quebra deliberadamente com o resto do site (pílulas com contorno): dentro de uma folha já feita de tipografia grande e sem caixas, um botão com borda destoava. Aqui só texto — um "Entrar →" que se comporta como mais um item da lista, e "EN" ao lado, discreto. */ .mobile-menu-foot{display:flex;align-items:center;justify-content:space-between;padding-top:28px;} .mobile-menu-foot .lang-toggle{ border:0;background:none;padding:0;border-radius:0; font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text-2); } .mobile-menu-foot .lang-toggle:hover{color:var(--ink);} .mobile-menu-cta{ font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink); text-decoration:none;opacity:.9;transition:opacity .18s; } .mobile-menu-cta:hover{opacity:1;} /* ---- Cabeçalho de página (páginas de conteúdo) ------------------------ */ .page-hero{background:var(--surface-alt);padding:114px 0 66px;border-bottom:1px solid var(--divider-soft);} .page-hero h1{max-width:min(20ch,100%);margin-bottom:16px;} .page-hero p{font-size:clamp(17px,1.9vw,20px);color:var(--text-2);max-width:min(56ch,100%);margin:0;} section{padding:78px 0;} section.alt{background:var(--surface-alt);} /* ---- Conteúdo legal --------------------------------------------------- */ .legal-content{max-width:min(72ch,100%);} .legal-content h2{margin:52px 0 16px;font-size:clamp(23px,2.6vw,30px);} .legal-content h2:first-child{margin-top:0;} .legal-content h3{margin:32px 0 10px;} .legal-content p,.legal-content li{color:var(--text-body);font-size:16.5px;line-height:1.6;} .legal-content ul,.legal-content ol{padding-left:1.15em;margin:0 0 1em;} .legal-content li{margin-bottom:.45em;} .legal-content a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} .legal-meta{font-size:13.5px;color:var(--text-2);margin-bottom:38px;padding-bottom:22px;border-bottom:1px solid var(--divider-soft);} .legal-note{ background:var(--surface-alt);border-radius:var(--radius-card); padding:22px 24px;margin:30px 0;font-size:15px;line-height:1.6;color:var(--text-body); } .legal-note strong{color:var(--ink);} /* ---- Cartões genéricos ------------------------------------------------ */ .card{ background:var(--surface);border:1px solid var(--divider-soft); border-radius:var(--radius-card);padding:26px;min-width:0; } /* ---- Rodapé ----------------------------------------------------------- */ footer{background:var(--surface-alt);padding:62px 0 34px;border-top:1px solid var(--divider-soft);} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:38px;margin-bottom:44px;} .footer-col{min-width:0;} .footer-col h4{margin-bottom:15px;color:var(--ink);} .footer-col a{ display:block;font-size:14px;color:var(--text-2);text-decoration:none; margin-bottom:9px;transition:color .18s; } .footer-col a:hover,.footer-col a.active{color:var(--ink);} .newsletter-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;} .newsletter-form input{ flex:1;min-width:0;font-family:inherit;font-size:14px;color:var(--ink); background:var(--surface);border:1px solid var(--divider); border-radius:var(--radius-pill);padding:10px 16px; } .newsletter-form input::placeholder{color:var(--text-2);} .newsletter-form input:focus{outline:none;border-color:var(--ink);} .footer-bottom{ display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; padding-top:26px;border-top:1px solid var(--divider);font-size:12.5px;color:var(--text-2); } .social-row{display:flex;gap:20px;} .social-row a{color:var(--text-2);text-decoration:none;transition:color .18s;} .social-row a:hover{color:var(--ink);} /* ---- Responsivo ------------------------------------------------------- */ @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px;} /* Abaixo de 900px a pílula de navegação (links + CTAs) dá lugar ao burger: não há uma combinação intermédia de "só alguns itens" — ou cabem todos na pílula, ou vão todos para o menu flutuante. */ .nav-pill{display:none;} .nav-burger{display:inline-flex;} section{padding:60px 0;} .page-hero{padding:96px 0 50px;} } @media (max-width:560px){ body{font-size:16px;} .footer-grid{grid-template-columns:1fr;gap:30px;} .footer-bottom{flex-direction:column;align-items:flex-start;} .container{padding:0 18px;} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} } /* ---- Revelação ao scroll (estilo Apple) -------------------------------- Utilitário sitewide: qualquer elemento com .reveal nasce discretamente deslocado e transparente, e ganha a posição final quando entra no viewport (ver script no fundo de cada página). O `!important` no bloco de motion reduzida garante que o conteúdo nunca fica invisível se alguém tiver essa preferência ativa — a app não depende do JS correr para o conteúdo aparecer. */ .reveal{ opacity:0;transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); transition-delay:var(--reveal-delay,0ms); } .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important;} } /* ============================================================================= Componentes das páginas de conteúdo (equipa, sobre, contacto, legais). Vivem aqui porque são partilhados por várias páginas — cada uma só declara o que for mesmo exclusivo seu. ========================================================================== */ /* ---- Prova social (homepage): avatares reais + selo de governança ------- */ .proof-avatars{display:flex;margin-bottom:18px;} .proof-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;position:relative; border:2.5px solid var(--surface);margin-left:-12px;background:var(--surface-alt);flex-shrink:0;} .proof-avatar:first-child{margin-left:0;} .proof-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .proof-avatar .avatar-fallback{display:none;} .proof-avatar.fallback .avatar-fallback{display:flex;position:absolute;inset:0; align-items:center;justify-content:center;font-size:15px;font-weight:600; color:var(--text-2);background:var(--surface-alt) !important;} .proof-icons{display:flex;gap:10px;margin-bottom:18px;} .proof-icon{width:40px;height:40px;border-radius:11px;background:var(--surface-alt); border:1px solid var(--divider);display:flex;align-items:center;justify-content:center; color:var(--ink);flex-shrink:0;} /* ---- Barra de progresso (partilhada entre homepage e detalhe de projeto) */ .progress-bar{height:3px;background:var(--divider);border-radius:99px;overflow:hidden;margin-bottom:10px;} .progress-fill{display:block;height:100%;background:var(--accent);border-radius:99px;} .progress-label{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2);} .progress-label b,.project-funded{color:var(--ink);font-weight:600;} /* ---- Página de detalhe de projeto --------------------------------------- */ .project-hero-photo{position:relative;height:min(50vh,420px);overflow:hidden;background:var(--surface-alt);} .project-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;} .project-hero-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 82%);} .project-hero-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:30px;color:#fff;} .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500; color:inherit;text-decoration:none;opacity:.85;margin-bottom:16px;} .back-link:hover{opacity:1;} .project-hero-overlay .eyebrow{color:rgba(255,255,255,.82);margin-bottom:8px;} .project-hero-overlay h1{color:#fff;margin-bottom:8px;max-width:none;} .project-hero-overlay .project-loc{color:rgba(255,255,255,.85);font-size:15px;} .project-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; margin:34px 0 40px;padding:24px 0;border-top:1px solid var(--divider-soft); border-bottom:1px solid var(--divider-soft);} .project-stats-row .stat{min-width:0;} .project-stats-row b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;} .project-stats-row span{display:block;margin-top:3px;font-size:12.5px;color:var(--text-2);} .project-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;} .project-sidebar{position:sticky;top:84px;} .project-body-content h2{margin:38px 0 14px;font-size:22px;letter-spacing:-.025em;} .project-body-content h2:first-child{margin-top:0;} .project-body-content p{color:var(--text-body);font-size:16px;line-height:1.65;margin-bottom:16px;} .project-body-content ul{padding-left:1.15em;margin-bottom:16px;} .project-body-content li{color:var(--text-body);font-size:15.5px;line-height:1.6;margin-bottom:9px;} @media (max-width:900px){ .project-detail-grid{grid-template-columns:1fr;} .project-sidebar{position:static;} .project-stats-row{grid-template-columns:repeat(2,minmax(0,1fr));} } .section-head{max-width:min(38ch,100%);margin-bottom:44px;} .section-head h2{margin-bottom:12px;} .section-head p{font-size:18px;color:var(--text-2);margin:0;} .cta-section{background:var(--ink-strong);color:#fff;padding:92px 0;text-align:center; --text-body-dim:rgba(255,255,255,.72);--text-body:rgba(255,255,255,.82);--ink:#fff;} .cta-section h2{color:#fff;margin-bottom:14px;} /* Já não precisa de override: .btn-primary é dourado por defeito, com contraste bom sobre este fundo escuro — a mesma cor em qualquer secção, clara ou escura, é o que faz o acento ler como sistema e não como remendo por página. */ /* Grelhas genéricas de cartões */ .values-grid,.risk-grid,.contact-cards,.team-grid,.story-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;} .story-grid,.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;} .value-card,.risk-card,.contact-card,.team-card,.status-card{ background:var(--surface);border:1px solid var(--divider-soft); border-radius:var(--radius-card);padding:26px;min-width:0;} .alt .value-card,.alt .risk-card,.alt .contact-card,.alt .team-card,.alt .status-card{ background:var(--surface);} .value-icon,.gov-icon{width:38px;height:38px;border-radius:11px;background:var(--surface-alt); border:1px solid var(--divider);display:flex;align-items:center;justify-content:center; font-size:16px;margin-bottom:16px;} .value-card h3,.risk-card h3,.contact-card h3{margin-bottom:8px;} .value-card p,.risk-card p,.contact-card p{color:var(--text-2);font-size:15.5px;margin:0;} /* Equipa */ .team-card{text-align:center;padding:30px 24px;} .team-avatar{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden; margin:0 auto 18px;background:var(--surface-alt);} .team-avatar img{width:100%;height:100%;object-fit:cover;display:block;} /* As iniciais só aparecem quando o falha (onerror adiciona .fallback). */ .avatar-fallback{display:none;} .team-avatar.fallback .avatar-fallback{ display:flex;position:absolute;inset:0;align-items:center;justify-content:center; font-size:30px;font-weight:600;letter-spacing:-.02em; background:var(--surface-alt) !important;color:var(--text-2);} .team-name{font-size:19px;font-weight:600;letter-spacing:-.022em;margin-bottom:4px;} .team-role-badge{display:inline-block;font-size:12.5px;font-weight:500;color:var(--text-2); margin-bottom:12px;} .team-title{font-size:13px;color:var(--text-2);} .team-bio{font-size:14.5px;line-height:1.55;color:var(--text-body);margin:0;} /* Contacto */ .contact-form{display:flex;flex-direction:column;gap:16px;} .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} .field{display:flex;flex-direction:column;gap:6px;min-width:0;} .field label{font-size:13px;font-weight:500;color:var(--ink);} .field input,.field textarea,.field select{ font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface); border:1px solid var(--divider);border-radius:12px;padding:11px 15px;width:100%;} .field textarea{resize:vertical;min-height:120px;} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);} .field input::placeholder,.field textarea::placeholder{color:var(--text-2);} .contact-note{font-size:13px;color:var(--text-2);} .mail{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} /* Diversos */ .risk-banner{background:var(--surface-alt);border-left:3px solid var(--ink-strong); border-radius:12px;padding:20px 24px;margin-bottom:32px;font-size:15.5px;line-height:1.6;} .story-visual{border-radius:var(--radius-card);overflow:hidden;} .story-visual img{width:100%;display:block;} .quote{font-size:17px;line-height:1.55;color:var(--ink);margin:0 0 18px;} .quote-by{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--text-2);} .partner{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);} .icon{width:18px;height:18px;flex-shrink:0;} .dot{display:inline-flex;align-items:center;min-width:6px;min-height:6px;font-size:13px;line-height:1;} .pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface); border:1px solid var(--divider);border-radius:var(--radius-pill);padding:7px 15px; font-size:13px;color:var(--ink);} @media (max-width:960px){ .values-grid,.risk-grid,.contact-cards,.team-grid{grid-template-columns:1fr;} .story-grid,.contact-grid{grid-template-columns:1fr;gap:32px;} } @media (max-width:560px){ .form-row{grid-template-columns:1fr;} }