/* Serviços e composição da equipe. Escopo limitado aos dois blocos. */
.service-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.service-card {
  --card-line: #ffffff26;
  --card-text: #c3c8ba;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  grid-column: span 2;
  padding: 32px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: #242820;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.service-card:hover, .service-card:focus-within {
  transform: translateY(-5px);
  border-color: #a4a77d;
  box-shadow: 0 18px 32px #00000024;
}
.card-strategy, .card-design { grid-column: span 3; padding: 36px; }
.card-strategy { background: radial-gradient(ellipse at 100% 0, #414d32, #252d20 60%); }
.card-design {
  --card-line: #3e3b1d40;
  --card-text: #4b471d;
  color: var(--ink);
  background: linear-gradient(140deg, #ffed88, #f8df16 75%);
}
.card-media { background: linear-gradient(145deg, #343e2b, #272e23); }
.card-web {
  --card-line: #191b172e;
  --card-text: #595d51;
  color: var(--ink);
  background: #e8eadd;
}
.card-top { display: flex; align-items: center; gap: 15px; margin-bottom: 33px; position: relative; z-index: 1; }
.craft-icon { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.card-top > .craft-icon { color: var(--yellow); width: 43px; height: 43px; transition: transform .5s var(--ease); }
.card-design .craft-icon, .card-web .craft-icon { color: var(--ink); }
.service-card:hover .card-top > .craft-icon { transform: rotate(-7deg); }
.card-top h3 { font-size: 17px; letter-spacing: -.025em; }
.card-statement { font-weight: 800; font-size: clamp(21px, 1.95vw, 28px); letter-spacing: -.035em; line-height: 1.25; margin: 0 0 19px; position: relative; z-index: 1; }
.card-strategy .card-statement, .card-design .card-statement { font-size: clamp(26px, 2.65vw, 38px); }
.card-description { font-size: 13px; line-height: 1.8; color: var(--card-text); max-width: 53ch; margin-bottom: 24px; }
.card-deliverables { list-style: none; padding: 19px 0 24px; margin: auto 0 0; border-top: 1px solid var(--card-line); }
.card-deliverables li { display: flex; gap: 10px; align-items: baseline; font-size: 11px; color: var(--card-text); line-height: 1.65; }
.card-deliverables li + li { margin-top: 7px; }
.card-deliverables li::before { content: ''; width: 4px; height: 4px; flex-shrink: 0; background: currentColor; border-radius: 50%; transform: translateY(-2px); }
.card-link { display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 12px; font-weight: 800; padding-block: 10px; min-height: 44px; text-underline-offset: 5px; }
.card-link > .icon { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.card-link:hover { text-decoration: underline; }
.card-link:hover > .icon { transform: translate(3px, -3px); }
.strategy-route { position: absolute; width: 185px; top: 17px; right: 16px; color: #d7e88d; opacity: .5; pointer-events: none; }
.strategy-route svg { width: 100%; stroke: currentColor; stroke-width: 1.4; fill: none; }
.strategy-route svg > path:first-child { stroke-dasharray: 4 5; }
.strategy-route circle { fill: #303b25; }
.route-end { stroke-width: 2; }
.type-specimen { position: absolute; right: 36px; top: 20px; border: 1px solid #554b3560; transform: rotate(9deg); width: 85px; height: 75px; display: grid; place-items: center; opacity: .6; transition: transform .6s var(--ease); }
.type-specimen > span { font-size: 47px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.type-specimen i { position: absolute; width: 5px; height: 5px; background: var(--paper); border: 1px solid #554b35; }
.type-specimen i:nth-of-type(1) { top: -3px; left: -3px; }
.type-specimen i:nth-of-type(2) { top: -3px; right: -3px; }
.type-specimen i:nth-of-type(3) { bottom: -3px; left: -3px; }
.type-specimen i:nth-of-type(4) { bottom: -3px; right: -3px; }
.card-design:hover .type-specimen { transform: rotate(0); }

.team-board { margin: 0; min-width: 0; padding: 32px 28px 24px; position: relative; border: 1px solid #d1d4c5; border-radius: 16px; background: radial-gradient(ellipse at 10% 90%, #ece7a8aa, transparent 65%), #e8eadf; }
.team-board-title { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -.04em; color: #626855; }
.team-board-title strong { font-weight: 800; color: var(--ink); }
.team-collage { position: relative; height: 350px; margin: 4px -8px 10px; isolation: isolate; }
.team-connectors { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #8f9878; stroke-width: 1; stroke-dasharray: 4 5; }
.brief-sheet { position: absolute; width: 56%; left: 21%; top: 58px; background: #fffef8; border: 1px solid #d0d1c4; padding: 26px 24px; transform: rotate(-7deg); box-shadow: 5px 18px 26px #333c2020; z-index: 2; }
.brief-sheet > .craft-icon { width: 25px; height: 25px; margin-bottom: 15px; color: #676f4c; }
.brief-sheet > strong { display: block; font-size: clamp(23px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; margin-bottom: 20px; }
.brief-sheet > span { display: block; font-size: 10px; line-height: 1.5; padding: 7px 0; border-top: 1px solid #e1e2d7; color: #606653; }
.team-tag { display: flex; align-items: center; gap: 12px; position: absolute; border-radius: 7px; padding: 15px 18px; z-index: 3; box-shadow: 2px 10px 23px #333c2017; transition: transform .5s var(--ease); }
.team-tag .craft-icon { width: 28px; height: 28px; }
.team-tag span { font-size: 10px; line-height: 1.55; white-space: nowrap; }
.team-tag strong { font-size: 12px; }
.team-think { left: 0; top: 27px; background: var(--ink); color: var(--paper); transform: rotate(-4deg); }
.team-think .craft-icon { color: var(--yellow); }
.team-create { right: -3px; top: 95px; background: linear-gradient(125deg, #ffe969, #f4da22); color: var(--ink); transform: rotate(8deg); }
.team-deliver { right: 4px; bottom: 12px; background: #ffffffb8; border: 1px solid #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: rotate(-3deg); }
.team-note { position: absolute; bottom: 14px; left: 3px; font-size: 11px; font-weight: 800; line-height: 1.5; transform: rotate(-7deg); z-index: 3; color: #525c3b; }
.team-board:hover .team-think { transform: translateY(-4px) rotate(-7deg); }
.team-board:hover .team-create { transform: translateY(-5px) rotate(4deg); }
.team-board:hover .team-deliver { transform: translateY(3px) rotate(0); }
.team-board figcaption { border-top: 1px solid #bfc5b0; padding-top: 17px; font-size: 11px; line-height: 1.6; color: #5d6550; }
@media (max-width: 1100px) {
  .service-card, .card-strategy, .card-design { padding: 25px; }
  .card-top { gap: 11px; }
  .card-top h3 { font-size: 14px; }
  .card-top > .craft-icon { width: 34px; height: 34px; }
  .strategy-route { width: 125px; right: 10px; }
  .type-specimen { width: 66px; height: 58px; right: 25px; }
  .type-specimen > span { font-size: 36px; }
  .card-statement { font-size: 21px; }
  .card-description { font-size: 12px; }
  .card-link { font-size: 11px; }
  .team-board { padding: 26px 20px 20px; }
  .team-collage { height: 320px; margin-inline: -7px; }
  .brief-sheet { left: 18%; width: 65%; padding: 22px 18px; }
  .team-tag { gap: 8px; padding: 12px; }
  .team-tag .craft-icon { width: 24px; height: 24px; }
  .team-tag strong { font-size: 11px; }
  .team-tag span { font-size: 9px; }
  .team-think { top: 18px; }
  .team-create { top: 91px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { grid-column: span 1; }
  .card-web { grid-column: span 2; }
}
@media (max-width: 760px) {
  .service-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .service-card, .card-strategy, .card-design { grid-column: auto; padding: 28px; }
  .card-top { margin-bottom: 25px; gap: 14px; }
  .card-top h3 { font-size: 17px; }
  .card-top > .craft-icon { width: 37px; height: 37px; }
  .card-statement, .card-strategy .card-statement, .card-design .card-statement { font-size: 27px; }
  .card-description { font-size: 13px; }
  .card-link { font-size: 12px; }
  .card-deliverables { padding-block: 18px; }
  .strategy-route { width: 125px; top: 10px; }
  .team-board { max-width: 520px; width: 100%; justify-self: center; padding: 28px 23px 22px; }
  .team-board-title { font-size: 30px; }
  .team-collage { height: 340px; }
  .brief-sheet { left: 15%; width: 70%; padding: 20px 16px; top: 65px; }
  .brief-sheet > .craft-icon { margin-bottom: 12px; }
  .brief-sheet > strong { font-size: 22px; margin-bottom: 14px; }
  .brief-sheet > span { padding-block: 6px; }
  .team-create { top: 52px; }
}
@media (max-width: 380px) {
  .service-card, .card-strategy, .card-design { padding: 23px; }
  .card-statement, .card-strategy .card-statement, .card-design .card-statement { font-size: 23px; }
  .card-top h3 { font-size: 15px; }
  .strategy-route { width: 94px; opacity: .3; }
  .type-specimen { width: 49px; height: 46px; right: 20px; top: 19px; }
  .type-specimen > span { font-size: 28px; }
  .team-board { padding: 23px 16px 20px; }
  .team-board-title { font-size: 28px; }
  .team-collage { height: 330px; }
  .brief-sheet { left: 12%; width: 75%; padding: 20px 16px; top: 67px; }
  .brief-sheet > strong { font-size: 22px; }
  .team-create { right: -1px; top: 52px; }
  .team-tag { padding: 11px 10px; }
  .team-tag .craft-icon { width: 21px; height: 21px; }
  .team-tag strong { font-size: 10px; }
  .team-tag span { font-size: 8px; }
  .team-deliver { bottom: 0; }
  .team-note { font-size: 9px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .card-top > .craft-icon, .type-specimen, .card-link > .icon, .team-tag { transition: none; }
  .service-card:hover, .service-card:focus-within { transform: none; }
}