/* ceo.css — estilos exclusivos de frontend/ceo.html. Carregado depois de base.css/home.css/marcas.css (ver comentário no de ceo.html). Só o que nenhum dos três já cobria: o layout de duas colunas do topo (as páginas de marca usam .marca-selo, círculo pequeno — aqui a foto é grande, de um lado) e o placeholder da bio. */ .ceo-topo-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media(max-width:760px){ .ceo-topo-grid{grid-template-columns:1fr;text-align:center;gap:1.8rem} /* Sem o limite de largura da coluna desktop (minmax acima), a foto esticava pra 90vw de largura (padrão "stretch" de item de grid) e, em 4:5, isso já dava ~440px de altura antes de qualquer limite — abaixo de um max-height de 60vh, que por isso nunca chegava a agir (confirmado medindo: max-height computado 506px, altura real 443px — o teto nunca era o fator limitante). height (não max-height) força o oposto: a altura manda, a largura acompanha pelo aspect-ratio (mantido, sem esticar) — min() com um teto fixo evita estourar em telas bem baixas. */ .ceo-foto{height:min(60vh,420px);width:auto} } /* aspect-ratio no próprio .ceo-foto (não só na img): a caixa fica com altura previsível a partir da largura, sem depender da proporção natural do arquivo — a imagem (já recortada em 4:5, ver _originais/ ceo_michelle-recorte.jpg) preenche via object-fit:cover, sem esticar. */ .ceo-foto{border-radius:var(--raio);overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.55); margin-inline:auto;aspect-ratio:4/5} .ceo-foto img{width:100%;height:100%;display:block;object-fit:cover} /* .marca-tipo (marcas.css) já cabe aqui sem ajuste — cor/tamanho pensados pro mesmo fundo escuro do .mtopo. .assinatura-frase (home.css) foi calibrada pro fundo claro de #quem (cor var(--marinho-700)); aqui o fundo é escuro, então só a cor muda — mesmo padrão de override já usado em parcerias.css pra .mtopo .olho. */ .ceo-topo-texto .marca-titulo{margin-bottom:1rem} .ceo-topo-texto .assinatura-frase{color:var(--ouro-claro)} @media(max-width:760px){.ceo-topo-texto{margin-inline:auto}} /* Placeholder da bio — mesma linguagem visual já usada em marcas.css (.linha-item, "em curadoria — espaço reservado"): borda tracejada + fundo quase imperceptível, sinaliza "provisório" sem precisar de texto extra explicando o óbvio. */ .ceo-bio-placeholder{border:1px dashed rgba(17,24,35,.22);border-radius:var(--raio); background:rgba(17,24,35,.025);padding:clamp(1.6rem,4vw,2.4rem);max-width:60ch} .ceo-bio-placeholder p{color:var(--suave);font-size:clamp(1rem,3vw,1.1rem);line-height:1.7} .ceo-bio-placeholder p+p{margin-top:.9rem} .ceo-bio-placeholder p.ceo-bio-nota{font-style:italic;font-size:.85rem;color:var(--ouro-escuro)}