﻿.svc-hero {
    background: linear-gradient(165deg, #0F2329 0%, #1E394B 60%, #2C6266 120%);
    color: var(--fg-1);
    padding: clamp(96px, 10vw, 140px) 0 clamp(96px, 10vw, 140px);
    position: relative; overflow: hidden;
  }
  .svc-hero::before {
    content:""; position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 60% at 80% 30%, rgba(56,168,164,0.22), transparent 60%);
  }
  .svc-hero .container { position: relative; }
  .svc-hero-grid {
    display:grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center;
  }
  .svc-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.4vw, 64px);
    font-weight: 700; line-height: 1.05;
    letter-spacing: -0.03em; color: var(--fg-1);
    margin: 22px 0 22px;
  }
  .svc-hero p {
    font-size: 18.5px; line-height: 1.6;
    color: rgba(255,255,255,0.78); max-width: 580px; margin-bottom: 32px;
  }
  .svc-hero ul { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:10px;}
  .svc-hero ul li {
    font-size: 14.5px; color: rgba(255,255,255,0.85);
    display:inline-flex; align-items:center; gap: 10px;
  }
  .svc-hero ul li::before {
    content:""; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(56,168,164,0.18); border: 1.5px solid var(--brand-aqua);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338A8A4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
    background-position: center; background-size: 12px; background-repeat: no-repeat;
    flex-shrink:0;
  }
  .svc-hero-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(56,168,164,0.18);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: 30px;
    color: var(--fg-1);
  }
  .svc-hero-card h4 {
    font-family: var(--font-display); font-size: 17px; font-weight:600;
    margin-bottom: 18px; color: var(--fg-1);
  }
  .svc-hero-card .row {
    display: flex; justify-content: space-between; align-items:center;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px; color: rgba(255,255,255,0.78);
  }
  .svc-hero-card .row:last-child { border:none; }
  .svc-hero-card .row b { color: var(--fg-1); font-weight: 600; }

  .svc-section { padding: clamp(64px, 8vw, 100px) 0; }

  .perfil-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .perfil {
    background: var(--bg-elevated); border:1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px;
  }
  .perfil-num {
    width: 38px; height:38px; border-radius:10px;
    background: linear-gradient(160deg, var(--brand-aqua), var(--brand-deep));
    color: var(--fg-1); font-family: var(--font-display); font-weight: 700; font-size: 14px;
    display:inline-flex; align-items:center; justify-content:center;
    letter-spacing: 0;
  }
  .perfil h4 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.015em;}
  .perfil p { font-size: 14.5px; color: var(--fg-3); line-height: 1.55; }

  .deliv-grid {
    display:grid; grid-template-columns: 1fr 1fr; gap: 0;
    border:1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated);
  }
  .deliv {
    padding: 22px 26px;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px; color: var(--fg-2); display:flex; align-items:flex-start; gap:14px;
  }
  .deliv:nth-child(2n) { border-right: none; }
  .deliv:nth-last-child(-n+2) { border-bottom: none; }
  .deliv .ck {
    width: 24px; height:24px; border-radius:50%;
    background: rgba(56,168,164,0.12); color: var(--brand-aqua);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .deliv .ck svg { width: 13px; height: 13px; }

  .met-list { display:grid; grid-template-columns: 1fr; gap: 12px; max-width: 880px; }
  .met {
    background: var(--bg-elevated); border:1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px 26px;
    display:grid; grid-template-columns: 60px 200px 1fr; gap: 22px; align-items:center;
  }
  .met-n {
    font-family: var(--font-display); font-weight: 700;
    font-size: 32px; color: var(--brand-aqua); letter-spacing: -0.02em;
  }
  .met-t { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--fg-1); }
  .met-d { font-size: 14.5px; color: var(--fg-3); line-height: 1.5; }

  .stack-strip {
    background: var(--neutral-100);
  }
  .stack-row {
    display:flex; gap: 12px; flex-wrap:wrap; margin-top: 24px;
  }
  .stack-tag {
    padding: 9px 16px; background: var(--bg-elevated);
    border:1px solid var(--border-subtle); border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600; color: var(--fg-2);
    font-family: var(--font-mono); letter-spacing: 0;
  }

  .faq { display: flex; flex-direction:column; gap: 10px; max-width: 880px; }
  .faq details {
    background: var(--bg-elevated); border:1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 4px 0;
    transition: all var(--dur-base);
  }
  .faq details[open] { border-color: var(--brand-aqua); box-shadow: var(--shadow-sm); }
  .faq summary {
    list-style:none; cursor:pointer;
    padding: 18px 24px; display:flex; justify-content:space-between; align-items:center; gap: 18px;
    font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--fg-1);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content:"+"; font-size: 26px; font-weight: 300; color: var(--brand-aqua);
    line-height: 1; transition: transform var(--dur-base);
  }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding: 0 24px 22px; font-size: 15px; color: var(--fg-3); line-height: 1.65; }

  .related-cases { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .related {
    border-radius: var(--radius-lg); overflow:hidden;
    background: var(--bg-elevated); border:1px solid var(--border-subtle);
    display:flex; flex-direction:column;
    transition: all var(--dur-base);
  }
  .related:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .related-img { height: 180px; padding: 22px; display:flex; align-items:flex-end; position:relative; overflow:hidden;}
  .related-img::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18), transparent 50%); }
  .related-i1 { background: linear-gradient(135deg, #1E394B, #2C6266 60%, #38A8A4); }
  .related-i2 { background: linear-gradient(140deg, #38A8A4, #5FBDB9); }
  .related-segment { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); position: relative; z-index: 1; font-weight:600;}
  .related-body { padding: 22px; }
  .related h5 { font-family: var(--font-display); font-size: 17px; font-weight:600; color: var(--fg-1); margin-bottom: 8px; line-height: 1.3; }
  .related p { font-size: 13.5px; color: var(--fg-3); line-height: 1.5;}

  .svc-cta {
    background: linear-gradient(135deg, #1E394B 0%, #274950 100%);
    color: var(--fg-1); padding: clamp(48px, 6vw, 80px);
    border-radius: var(--radius-2xl);
    position: relative; overflow:hidden;
    text-align:center;
  }
  .svc-cta::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(56,168,164,0.20), transparent 60%); }
  .svc-cta > * { position:relative; }
  .svc-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--fg-1); margin: 14px 0 16px; }
  .svc-cta p { font-size: 17px; color: rgba(255,255,255,0.78); max-width: 540px; margin: 0 auto 28px; line-height: 1.6;}

  @media (max-width: 1024px){
    .svc-hero-grid { grid-template-columns: 1fr; gap: 40px;}
    .perfil-grid { grid-template-columns: 1fr; }
    .deliv-grid { grid-template-columns: 1fr; }
    .deliv { border-right: none; }
    .deliv:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
    .met { grid-template-columns: 50px 1fr; }
    .met-n { grid-row: span 2; }
    .related-cases { grid-template-columns: 1fr; }
  }




  /* Ajuste de contraste: titulos claros nas secoes escuras (hero e CTA do servico) */
  .svc-hero, .svc-cta { --fg-1: #EFF5F6; }
