:root { --navy:#00264a; --deep:#001d39; --cyan:#09bdd1; --ivory:#f8f2e4; --ink:#16324c; --muted:#607485; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); font-family:Arial, Helvetica, sans-serif; background:var(--ivory); } .clients-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:14px clamp(22px,5vw,84px); background:#fffaf0; } .brand img { display:block; width:146px; height:auto; } .back { color:var(--navy); text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .back span, .cta a span { color:var(--cyan); font-size:17px; margin-left:7px; } .hero { position:relative; overflow:hidden; padding:clamp(64px,9vw,130px) clamp(22px,11vw,190px); color:var(--ivory); background:linear-gradient(118deg, var(--deep), #003b67 84%); } .hero::after { content:""; position:absolute; width:440px; height:440px; top:-210px; right:-110px; border:1px solid rgba(9,189,209,.35); border-radius:50%; box-shadow:0 0 0 42px rgba(9,189,209,.06),0 0 0 84px rgba(9,189,209,.035); } .eyebrow,.kicker { margin:0 0 28px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.18em; } .kicker { font-size:11px; margin-bottom:18px; } h1,h2,h3 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:500; } h1 { max-width:730px; font-size:clamp(48px,6vw,86px); line-height:.98; letter-spacing:-.06em; } h1 em,h2 em { color:var(--cyan); font-style:italic; } .intro { max-width:520px; margin:36px 0 44px; font-size:17px; line-height:1.7; color:#d5e5ea; } .hero-contact { display:grid; gap:12px; max-width:310px; margin:0; padding:3px 0 3px 17px; border-left:1px solid rgba(255,255,255,.42); } .hero-contact p { margin:0; color:var(--ivory); font-family:Georgia,'Times New Roman',serif; font-size:clamp(23px,2vw,31px); line-height:.96; letter-spacing:-.035em; } .hero-contact em { color:var(--cyan); font-style:italic; } .hero-contact a { display:inline-flex; align-items:center; width:max-content; max-width:100%; gap:8px; color:#dce8e9; text-decoration:none; font-size:11px; font-weight:800; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; transition:color 160ms ease,transform 160ms ease; } .hero-contact a span { color:var(--cyan); font-size:16px; } .hero-contact a:hover { color:#fff; transform:translateX(3px); } .portfolio { padding:clamp(60px,8vw,118px) clamp(22px,11vw,190px); } .teal { margin-bottom:19px; } .portfolio h2,.cta h2 { max-width:660px; color:var(--navy); font-size:clamp(44px,5vw,72px); letter-spacing:-.06em; line-height:.99; } .portfolio-intro { color:var(--muted); font-size:15px; margin:28px 0 42px; } .clients-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .client-card { min-height:198px; display:flex; flex-direction:column; justify-content:space-between; padding:26px; border:1px solid #d4d9ce; background:#fffdf6; text-decoration:none; color:var(--navy); transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; } .client-card:hover { transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 14px 28px rgba(0,38,74,.12); } .client-card img { max-width:180px; max-height:82px; width:auto; height:auto; object-fit:contain; object-position:left top; } .client-card strong { font-family:Georgia,serif; font-size:23px; font-weight:500; line-height:1.05; } .client-card span { color:var(--cyan); font-size:19px; } .empty-state { max-width:540px; padding:50px 30px; border:1px dashed #99a89d; text-align:center; background:#fffaf1; } .empty-state span { color:var(--cyan); font-size:28px; } .empty-state h3 { margin:15px 0 10px; color:#4f6772; font-size:31px; } .empty-state p { max-width:350px; margin:0 auto; color:var(--muted); font-size:14px; line-height:1.55; } .cta { padding:clamp(60px,8vw,110px) clamp(22px,11vw,190px); color:var(--ivory); background:#0673a6; } .cta h2 { color:var(--ivory); max-width:560px; } .cta a { display:inline-flex; margin-top:34px; padding:18px 22px; color:#fff; background:var(--cyan); text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.08em; transition:transform 160ms ease; } .cta a:hover { transform:translateY(-2px); } @media (max-width:700px) { .clients-header { min-height:64px; } .brand img { width:120px; } .hero,.portfolio,.cta { padding-left:22px; padding-right:22px; } .clients-grid { grid-template-columns:1fr; } .client-card { min-height:165px; } }

/* Grade compacta para um portfólio amplo: a imagem segue dominante e a identificação fica discreta. */
.clients-grid { grid-template-columns:repeat(auto-fill,minmax(164px,1fr)); gap:14px; }
.client-card { min-height:218px; display:grid; grid-template-rows:minmax(158px,1fr) auto; overflow:hidden; padding:0; isolation:isolate; }
.client-card-visual { position:relative; min-height:158px; overflow:hidden; background:#edf3f0; }
.client-card img { width:100%; min-width:0; height:100%; min-height:158px; max-width:none; max-height:none; object-fit:cover; object-position:center; background:#edf3f0; transition:transform 300ms cubic-bezier(.23,1,.32,1),filter 300ms cubic-bezier(.23,1,.32,1); }
.client-card-hover-name { position:absolute; inset:auto 14px 14px; z-index:1; color:#fffdf6; font:500 clamp(20px,1.6vw,28px)/1.02 Georgia,serif; letter-spacing:-.035em; opacity:0; transform:translateY(9px); transition:opacity 220ms cubic-bezier(.23,1,.32,1),transform 220ms cubic-bezier(.23,1,.32,1); text-shadow:0 2px 14px rgba(0,29,57,.7); }
.client-card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,29,57,.02) 33%,rgba(0,29,57,.83) 100%); opacity:0; transition:opacity 220ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.client-card-footer { min-height:60px; padding:14px 16px; background:#fffdf6; }
.client-card strong { font-size:20px; }
.client-card span { font-size:16px; }
@media (hover:hover) and (pointer:fine) {
  .client-card:hover,.client-card:focus-visible { transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 16px 32px rgba(0,38,74,.16); }
  .client-card:hover img,.client-card:focus-visible img { transform:scale(1.055); filter:saturate(1.04); }
  .client-card:hover .client-card-visual::after,.client-card:focus-visible .client-card-visual::after { opacity:1; }
  .client-card:hover .client-card-hover-name,.client-card:focus-visible .client-card-hover-name { opacity:1; transform:translateY(0); }
  .client-card-name { opacity:.7; transition:opacity 180ms ease; }
  .client-card:hover .client-card-name,.client-card:focus-visible .client-card-name { opacity:1; }
}
@media (max-width:700px) { .clients-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .client-card { min-height:190px; grid-template-rows:minmax(134px,1fr) auto; } .client-card img { min-height:134px; } .client-card > div { min-height:56px; padding:12px; } .client-card strong { font-size:18px; } }

/* Clientes: mascote celebrando relações de confiança e cartões editoriais para as marcas. */
.hero { isolation:isolate; }
.hero::after { z-index:0; }
.hero > :not(.hero-mascot) { position:relative; z-index:1; }
.hero-mascot { position:absolute; z-index:0; right:clamp(34px,8vw,154px); bottom:-122px; width:clamp(250px,30vw,420px); margin:0; overflow:hidden; border:1px solid rgba(9,189,209,.78); border-radius:50%; background:#00264a; box-shadow:0 0 0 15px rgba(9,189,209,.06),0 0 0 31px rgba(9,189,209,.025),0 24px 55px rgba(0,16,36,.36); }
.hero-mascot img { display:block; width:100%; height:auto; }

.client-card { position:relative; min-height:248px; gap:0; overflow:hidden; padding:0; border:1px solid #d3ddd8; border-radius:0; background:#fffdf7; box-shadow:0 10px 24px rgba(0,38,74,.09); }
.client-card::before { content:""; position:absolute; z-index:3; top:0; left:0; width:42px; height:3px; border:0; background:var(--cyan); pointer-events:none; transition:width 180ms ease; }
.client-card-visual { min-height:148px; border:0; border-bottom:1px solid #d9e1dc; }
.client-card-visual::before { content:""; position:absolute; z-index:1; inset:0; border:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 42%); pointer-events:none; }
.client-card-footer { position:relative; z-index:1; display:grid; align-content:start; gap:6px; min-height:98px; margin:0; padding:14px 38px 15px 15px; border:0; background:#fffdf7; }
.client-card-name { color:var(--navy); font-size:19px; letter-spacing:-.03em; }
.client-card-description { display:-webkit-box; margin:0; overflow:hidden; color:#617581; font:12px/1.42 Arial,Helvetica,sans-serif; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.client-card-arrow { position:absolute; right:14px; top:16px; color:var(--cyan); font-size:16px; transition:transform 180ms ease; }
@media (hover:hover) and (pointer:fine) {
  .client-card:hover,.client-card:focus-visible { transform:translateY(-5px); border-color:#7bcbd0; box-shadow:0 18px 34px rgba(0,38,74,.17); }
  .client-card:hover::before,.client-card:focus-visible::before { width:100%; }
  .client-card:hover .client-card-arrow,.client-card:focus-visible .client-card-arrow { transform:translate(2px,-2px); }
}
@media (max-width:980px) { .hero-mascot { display:none; } }
@media (max-width:700px) { .client-card { min-height:220px; } .client-card-visual { min-height:128px; } .client-card img { min-height:128px; } .client-card-footer { min-height:86px; padding:12px 34px 13px 12px; gap:4px; } .client-card-name { font-size:18px; } .client-card-description { font-size:11px; } .client-card-arrow { right:12px; top:13px; } }

/* Cards sem site: são apenas informativos e não devem sugerir navegação. */
.client-card-disabled { cursor: default; }
@media (hover:hover) and (pointer:fine) {
  .client-card-disabled:hover,
  .client-card-disabled:focus-visible { transform:none; border-color:#d3ddd8; box-shadow:0 10px 24px rgba(0,38,74,.09); outline:none; }
  .client-card-disabled:hover::before,
  .client-card-disabled:focus-visible::before { width:42px; }
  .client-card-disabled:hover img,
  .client-card-disabled:focus-visible img { transform:none; filter:none; }
  .client-card-disabled:hover .client-card-hover-name,
  .client-card-disabled:focus-visible .client-card-hover-name { opacity:0; transform:translateY(9px); }
}

/* Cards com dois destinos abrem uma escolha; cards sem destino permanecem informativos. */
.client-card-choice { cursor: pointer; }
.client-card-disabled { cursor: default; }
@media (hover:hover) and (pointer:fine) {
  .client-card-disabled:hover,
  .client-card-disabled:focus-visible { transform:none; border-color:#d3ddd8; box-shadow:0 10px 24px rgba(0,38,74,.09); outline:none; }
  .client-card-disabled:hover::before,
  .client-card-disabled:focus-visible::before { width:42px; }
  .client-card-disabled:hover img,
  .client-card-disabled:focus-visible img { transform:none; filter:none; }
  .client-card-disabled:hover .client-card-hover-name,
  .client-card-disabled:focus-visible .client-card-hover-name { opacity:0; transform:translateY(9px); }
}
.client-links-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:22px; background:rgba(0,25,48,.76); }
.client-links-dialog { width:min(440px,100%); padding:28px; color:#00264a; background:#fbf5e7; border-top:5px solid #08bed2; box-shadow:0 22px 70px rgba(0,0,0,.4); }
.client-links-dialog h2 { margin:0 0 8px; font:500 30px/1.1 Georgia,serif; }
.client-links-dialog p { margin:0 0 20px; color:#607485; font:14px/1.45 Arial,Helvetica,sans-serif; }
.client-links-actions { display:grid; gap:10px; }
.client-links-option { display:block; padding:13px 16px; color:#fffdf6; background:#08bed2; text-align:center; text-decoration:none; font:800 12px Arial,Helvetica,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.client-links-option:hover, .client-links-option:focus-visible { background:#007e9d; }
.client-links-close { margin-top:14px; padding:10px 14px; color:#00264a; background:transparent; border:1px solid #91a8a4; cursor:pointer; font:800 11px Arial,Helvetica,sans-serif; }



.client-filters { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px; }
.client-filter { border:1px solid #b7c5c0; border-radius:999px; padding:9px 16px; background:transparent; color:#00264a; cursor:pointer; font:800 10px Arial,Helvetica,sans-serif; letter-spacing:.08em; text-transform:uppercase; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.client-filter:hover, .client-filter:focus-visible, .client-filter.active { border-color:#08bed2; background:#08bed2; color:#fffdf6; outline:none; }
.client-card-category { display:inline-block; margin-top:8px; color:#079cb5; font:800 9px Arial,Helvetica,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:640px) { .client-filters { margin-top:18px; margin-bottom:22px; } .client-filter { padding:8px 12px; } }

/* Selector de categorias: bloco compacto, editorial e integrado à identidade visual. */
.client-filters { display:block; margin:24px 0 34px; }
.client-filter-label { display:flex; align-items:center; gap:16px; color:#079cb5; font:800 10px Arial,Helvetica,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.client-filter-label::before { content:""; display:block; width:28px; height:1px; background:#08bed2; }
.client-filter-select { min-width:270px; max-width:100%; appearance:none; border:1px solid rgba(0,38,74,.22); border-radius:3px; padding:13px 44px 13px 16px; background-color:#fffdf7; background-image:linear-gradient(45deg,transparent 50%,#08bed2 50%),linear-gradient(135deg,#08bed2 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; color:#00264a; cursor:pointer; font:700 12px Arial,Helvetica,sans-serif; letter-spacing:.02em; box-shadow:0 8px 20px rgba(0,38,74,.07); transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.client-filter-select:hover { border-color:#08bed2; box-shadow:0 10px 24px rgba(0,38,74,.11); transform:translateY(-1px); }
.client-filter-select:focus-visible { border-color:#08bed2; outline:3px solid rgba(8,190,210,.18); box-shadow:0 10px 24px rgba(0,38,74,.12); }
@media (max-width:640px) { .client-filters { margin-top:20px; margin-bottom:28px; } .client-filter-label { align-items:flex-start; flex-direction:column; gap:10px; } .client-filter-label::before { width:22px; } .client-filter-select { width:100%; min-width:0; } }