/**
 * MAUP manifest.
 * @maup-path: template-parts/sections/home/services/style.css
 * @maup-version: 1.1.0
 * @maup-mode: replace
 * @maup-role: Section module
 */
/* Module: services: estilos específicos deste módulo. */
  .light-surface { position: relative; z-index: 4; margin-top: clamp(80px, 10vw, 170px); padding: clamp(110px, 12vw, 190px) 0 clamp(130px, 14vw, 220px); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--light); color: var(--ink); box-shadow: 0 -30px 90px rgba(0,0,0,.18); }
  .tools-heading { width: min(100%, 1120px); }
  .tools-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .18em; }
  .tool-stream { display: inline-flex; flex-wrap: wrap; gap: 9px; margin: .06em .08em; vertical-align: middle; }
  .services-intro { display: grid; grid-template-columns: minmax(0, 420px) auto; gap: 30px; align-items: end; justify-content: space-between; margin: clamp(50px, 7vw, 90px) 0 46px; }
  .services-intro p { margin: 0; color: var(--ink-muted); line-height: 1.65; }
  .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.3vw, 34px); align-items: start; margin-top: 34px; padding: 0 clamp(0px, 3vw, 46px); }
  .service-card { --service-surface:var(--light-2); min-height: 330px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 40px; text-align: left; padding: clamp(28px, 3.2vw, 46px); border: 1px solid transparent; border-radius: var(--radius-md); background: linear-gradient(var(--service-surface),var(--service-surface)) padding-box,linear-gradient(120deg,transparent,transparent) border-box; color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.06); cursor: pointer; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
  .service-card--raised { margin-top: -48px; }
  .service-card-number { position:relative;z-index:1;color: #8c8c90; }
  .service-card > span:nth-child(2) { position:relative;z-index:1;align-self: end; display: grid; gap: 14px; max-width: 540px; }
  .service-card strong { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; letter-spacing: -.05em; line-height: .98; padding-bottom: .09em; overflow: visible; }
  .service-card small { color: var(--ink-muted); font-size: .96rem; line-height: 1.55; }
  .service-card-arrow { position:relative;z-index:1;grid-column: 2; grid-row: 1 / 3; align-self: end; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #e5e5e1; transition: transform .3s var(--ease), background .3s ease; }
  .service-card:hover { transform: scale(1.012); box-shadow: 0 30px 74px rgba(0,0,0,.1); }
  .service-card:hover .service-card-arrow { transform: rotate(8deg); background: #dcdcd8; }
  @media (max-width: 860px) {
  .services-intro { grid-template-columns: 1fr; justify-items: start; }
  .service-grid { gap: 14px; padding: 0; }
  .service-card { min-height: 280px; }
  .service-card--raised { margin-top: -26px; }
  }
  @media (max-width: 700px) {
  .light-surface { margin-top: 70px; }
  .tool-stream { gap: 6px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card--raised { margin-top: 0; min-height: 255px; }
  .service-card strong { font-size: 2.3rem; }
  }
  .light-surface {
    background:
      radial-gradient(54% 26% at 50% 4%, rgba(255,255,255,.85), transparent 75%),
      var(--light);
  }
  .service-card { box-shadow: 0 28px 70px rgba(18,18,20,.075); }
  .tool-stream { gap:8px; }
  .tool-icon { width:clamp(44px,4.4vw,58px); height:clamp(44px,4.4vw,58px); display:inline-grid; place-items:center; border-radius:14px; font-family:var(--font-display); font-size:.72rem; letter-spacing:-.03em; box-shadow:0 10px 26px rgba(0,0,0,.08); }
  .tool-icon b { font-weight:600; }
  .tool-icon--figma{background:#F24E1E;color:#fff}
  .tool-icon--ps{background:#001E36;color:#31A8FF}
  .tool-icon--ai{background:#330000;color:#FF9A00}
  .tool-icon--html{background:#E34F26;color:#fff}
  .tool-icon--css{background:#1572B6;color:#fff}
  .tool-icon--js{background:#F7DF1E;color:#111}
  .tool-icon--php{background:#777BB4;color:#fff}
  .tool-icon--wp{background:#21759B;color:#fff}
  .tool-icon--git{background:#F05032;color:#fff}
  .tool-icon--aitools{background:#10A37F;color:#fff}
  .tool-icon { position:relative; isolation:isolate; transition:transform .28s var(--ease),filter .28s ease,box-shadow .28s ease; box-shadow:0 10px 25px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.16); }
  .tool-icon::before { content:""; position:absolute; inset:9%; border-radius:11px; background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.24),transparent 40%); mix-blend-mode:screen; pointer-events:none; }
  .tool-icon::after { content:attr(data-tooltip); position:absolute; z-index:20; left:50%; bottom:calc(100% + 12px); transform:translate(-50%,6px) scale(.96); padding:8px 10px; border-radius:10px; background:#111113; color:#f6f6f3; font:500 .68rem/1 var(--font-body); letter-spacing:0; white-space:nowrap; box-shadow:0 12px 34px rgba(0,0,0,.24); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .24s var(--ease); }
  .tool-icon:hover { transform:scale(1.035); filter:saturate(1.08) brightness(1.04); box-shadow:0 15px 34px rgba(0,0,0,.15),0 0 26px rgba(255,255,255,.07); }
  .tool-icon:hover::after,.tool-icon:focus-visible::after { opacity:1; transform:translate(-50%,0) scale(1); }
  .tool-icon-image:not([src]) { display:none; }
  .tool-icon-image[src] { display:block; width:64%; height:64%; object-fit:contain; position:relative; z-index:2; }
  .tool-icon:has(.tool-icon-image[src]) b { display:none; }
  .tool-icon b { position:relative; z-index:2; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-card { min-height:300px; }
  @media (max-width:760px) {
  .service-grid { grid-template-columns:1fr; padding:0; }
  .service-card--raised { margin-top:0; }
  }
  .section .eyebrow::after,.light-surface .eyebrow::after{content:"  —";white-space:pre;color:currentColor;opacity:.75}
  .services-intro{margin-bottom:clamp(76px,8vw,118px)}
  .service-card{position:relative;isolation:isolate;overflow:hidden;transition:transform .68s cubic-bezier(.22,.8,.24,1),box-shadow .68s cubic-bezier(.22,.8,.24,1),background .45s ease}
  .service-card::before{content:"";position:absolute;z-index:0;width:320px;height:320px;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%) scale(.58);border-radius:50%;background:radial-gradient(circle,rgba(101,213,255,.16),rgba(117,103,255,.10) 34%,transparent 70%);opacity:0;transition:opacity .36s ease,transform .72s var(--ease);pointer-events:none}
  .service-card:hover,.service-card:focus-visible{transform:scale(1.01);background:linear-gradient(var(--service-surface),var(--service-surface)) padding-box,linear-gradient(120deg,rgba(101,213,255,.78),rgba(117,103,255,.90) 54%,rgba(143,130,255,.62)) border-box;box-shadow:-18px 20px 54px rgba(101,213,255,.12),18px 22px 58px rgba(117,103,255,.16),0 32px 82px rgba(16,16,18,.12)}
  .service-card:hover::before,.service-card:focus-visible::before{opacity:.62;transform:translate(-50%,-50%) scale(1)}
  .service-card-arrow{transition:transform .5s cubic-bezier(.22,.8,.24,1),background .4s ease}
  .service-card:hover .service-card-arrow,.service-card:focus-visible .service-card-arrow{transform:translate(2px,-2px) rotate(8deg)}
  .service-card:hover .service-card-arrow,.service-card:focus-visible .service-card-arrow{transform:translate(2px,-2px) rotate(45deg)!important}
  .light-surface{isolation:isolate;overflow:hidden;border-radius:var(--radius-xl)!important;margin-bottom:clamp(86px,8vw,136px);box-shadow:0 -30px 90px rgba(0,0,0,.18),0 34px 100px rgba(0,0,0,.16)!important}
  .light-surface>.u-container{position:relative;z-index:3}
  .service-card:hover .service-card-arrow,.service-card:focus-visible .service-card-arrow{transform:translate3d(3px,0,0)!important}
  @media (max-width:1024px), (pointer:coarse), (hover:none) {
  .light-surface{background:var(--light)!important}
  }
  .service-modal-content>h2,.service-card strong{letter-spacing:-.025em!important}

  /* Hierarquia de posicionamento: UX/UI e desenvolvimento web são o núcleo da oferta. */
  .service-grid--primary{margin-top:34px;padding:0!important;gap:14px}
  .service-grid--primary .service-card{--service-surface:#f7f7f3;min-height:330px;background:linear-gradient(var(--service-surface),var(--service-surface)) padding-box,linear-gradient(120deg,transparent,transparent) border-box;box-shadow:0 28px 76px rgba(18,18,20,.085),inset 0 0 0 1px rgba(117,103,255,.06)}
  .service-grid--primary .service-card strong{font-size:clamp(2.2rem,3.25vw,3.45rem)}
  .service-secondary-block{margin-top:clamp(48px,6vw,78px);padding-top:clamp(30px,4vw,46px);border-top:1px solid rgba(17,17,19,.09)}
  .service-secondary-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:24px;align-items:end;margin-bottom:24px}
  .service-secondary-head .eyebrow{margin:0}
  .service-secondary-head>p:last-child{margin:0;color:#6d6d72;font-size:.88rem;line-height:1.55}
  .service-grid--secondary{margin-top:0;padding:0;gap:14px}
  .service-grid--secondary .service-card{--service-surface:#eeeeea;min-height:210px;padding:clamp(22px,2.5vw,32px);gap:24px;background:linear-gradient(var(--service-surface),var(--service-surface)) padding-box,linear-gradient(120deg,transparent,transparent) border-box;box-shadow:0 16px 42px rgba(18,18,20,.045)}
  .service-grid--secondary .service-card strong{font-size:clamp(1.55rem,2.15vw,2.2rem)}
  .service-grid--secondary .service-card small{font-size:.84rem;line-height:1.5}
  .service-grid--secondary .service-card-arrow{width:40px;height:40px;border-radius:12px}
  @media(max-width:760px){
    .service-grid--primary,.service-grid--secondary{grid-template-columns:1fr!important}
    .service-grid--primary .service-card{min-height:235px}
    .service-secondary-head{grid-template-columns:1fr;gap:10px}
    .service-grid--secondary .service-card{min-height:168px}
  }
  @media (hover:hover) and (pointer:fine){
    .service-grid .service-card:hover,.service-grid .service-card:focus-visible{
      transform:scale(1.01);
      background:linear-gradient(var(--service-surface),var(--service-surface)) padding-box,linear-gradient(120deg,rgba(101,213,255,.78),rgba(117,103,255,.90) 54%,rgba(143,130,255,.62)) border-box;
      box-shadow:-18px 20px 54px rgba(101,213,255,.12),18px 22px 58px rgba(117,103,255,.16),0 32px 82px rgba(16,16,18,.12);
    }
  }