/* =========================================================================
   AMAZON INFORMÁTICA — DESIGN SYSTEM v2 · FOUNDATIONS / TOKENS
   Carbon-inspired, original to Amazon Informática. Sharp, engineered, calm.
   ========================================================================= */

.amz-ds {
  /* ---- Brand color ---- */
  --ai-teal:        #185663;
  --ai-teal-700:    #0e4749;
  --ai-teal-900:    #082f31;
  --ai-lime:        #95c623;
  --ai-lime-700:    #6f9417;
  --ai-lime-800:    #557312;  /* texto sobre branco — AA 4.5:1 (lime-700 falha a 3.54) */

  /* ---- Neutrals (Carbon-style scale) ---- */
  --ai-black:       #161616;
  --ai-white:       #ffffff;
  --ai-gray-10:     #f4f4f4;
  --ai-gray-20:     #e0e0e0;
  --ai-gray-30:     #c6c6c6;
  --ai-gray-50:     #8d8d8d;
  --ai-gray-60:     #6f6f6f;
  --ai-gray-70:     #525252;
  --ai-gray-80:     #393939;
  --ai-gray-100:    #161616;

  /* ---- Semantic roles ---- */
  --surface:            var(--ai-white);
  --surface-alt:        var(--ai-gray-10);
  --surface-inverse:    var(--ai-teal-700);
  --surface-black:      var(--ai-black);

  --text-strong:        var(--ai-black);
  --text-body:          var(--ai-gray-80);
  --text-muted:         var(--ai-gray-60);
  --text-on-dark:       rgba(255,255,255,0.92);
  --text-on-dark-muted: rgba(255,255,255,0.62);

  --line:               var(--ai-gray-20);
  --line-strong:        var(--ai-gray-30);
  --line-on-dark:       rgba(255,255,255,0.16);

  --accent:             var(--ai-teal);
  --accent-ink:         #0c3c46;

  /* ---- Type ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid expressive scale */
  --fs-display: clamp(2.5rem, 1.55rem + 3.8vw, 4rem);
  --fs-h1:      clamp(2.125rem, 1.5rem + 2.5vw, 3.375rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.7vw, 2.625rem);
  --fs-h3:      1.375rem;
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-body:    1.55;

  --tracking-tight:   -0.02em;
  --tracking-eyebrow:  0.08em;

  /* ---- Space (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;
  --sp-9: 128px; --sp-10: 160px;
  --section-y: clamp(72px, 7vw, 120px);

  /* ---- Layout ---- */
  --container: 1312px;
  --gutter: 32px;
  --margin: clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur: 0.55s;

  /* Sharp by design */
  --radius: 0px;

  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   BASE RESETS (scoped)
   ========================================================================= */
.amz-ds *, .amz-ds *::before, .amz-ds *::after { box-sizing: border-box; }
.amz-ds img, .amz-ds svg { display: block; max-width: 100%; }
.amz-ds a { color: inherit; text-decoration: none; }
.amz-ds button { font: inherit; cursor: pointer; }
.amz-ds ul { list-style: none; padding: 0; margin: 0; }
.amz-ds p { text-wrap: pretty; margin: 0; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.amz-ds h1, .amz-ds h2, .amz-ds h3, .amz-ds h4 {
  color: var(--text-strong);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.amz-ds .h-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 300; }
.amz-ds .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 300; }
.amz-ds .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 300; }
.amz-ds .h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.amz-ds .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--text-body); font-weight: 400; }
.amz-ds .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.amz-ds .small { font-size: var(--fs-small); }
.amz-ds .muted { color: var(--text-muted); }
.amz-ds .measure { max-width: 62ch; }
.amz-ds .measure-tight { max-width: 46ch; }

/* =========================================================================
   FOCUS (accessibility)
   ========================================================================= */
.amz-ds :focus-visible {
  outline: 2px solid var(--ai-teal);
  outline-offset: 2px;
}
.amz-ds .on-dark :focus-visible { outline-color: var(--ai-lime); }

/* =========================================================================
   LAYOUT — container + 16-col grid
   ========================================================================= */
.amz-ds .ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.amz-ds .ds-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: var(--gutter);
  row-gap: 0;
}
@media (max-width: 820px) {
  .amz-ds .ds-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 821px) {
  /* Base spans */
  .amz-ds .c-4  { grid-column: span 4; }
  .amz-ds .c-5  { grid-column: span 5; }
  .amz-ds .c-6  { grid-column: span 6; }
  .amz-ds .c-7  { grid-column: span 7; }
  .amz-ds .c-8  { grid-column: span 8; }
  .amz-ds .c-9  { grid-column: span 9; }
  .amz-ds .c-10 { grid-column: span 10; }
  .amz-ds .c-12 { grid-column: span 12; }
  .amz-ds .c-16 { grid-column: span 16; }

  /* start-N alone (no span override) */
  .amz-ds .start-2  { grid-column-start: 2; }
  .amz-ds .start-7  { grid-column-start: 7; }
  .amz-ds .start-9  { grid-column-start: 9; }
  .amz-ds .start-10 { grid-column-start: 10; }
  .amz-ds .start-11 { grid-column-start: 11; }

  /* Combined explicit rules — start-N alone breaks span N when cascaded */
  .amz-ds .c-4.start-2  { grid-column: 2  / span 4; }
  .amz-ds .c-5.start-2  { grid-column: 2  / span 5; }
  .amz-ds .c-6.start-2  { grid-column: 2  / span 6; }
  .amz-ds .c-5.start-7  { grid-column: 7  / span 5; }
  .amz-ds .c-6.start-7  { grid-column: 7  / span 6; }
  .amz-ds .c-7.start-7  { grid-column: 7  / span 7; }
  .amz-ds .c-8.start-7  { grid-column: 7  / span 8; }
  .amz-ds .c-9.start-7  { grid-column: 7  / span 9; }
  .amz-ds .c-10.start-7 { grid-column: 7  / span 10; }
  .amz-ds .c-5.start-9  { grid-column: 9  / span 5; }
  .amz-ds .c-6.start-9  { grid-column: 9  / span 6; }
  .amz-ds .c-7.start-9  { grid-column: 9  / span 7; }
  .amz-ds .c-5.start-10 { grid-column: 10 / span 5; }
  .amz-ds .c-6.start-10 { grid-column: 10 / span 6; }
  .amz-ds .c-7.start-10 { grid-column: 10 / span 7; }
  .amz-ds .c-6.start-11 { grid-column: 11 / span 6; }
  .amz-ds .c-7.start-11 { grid-column: 11 / span 6; }
}
@media (max-width: 820px) {
  .amz-ds [class*="c-"] { grid-column: 1 / -1; }
}

/* =========================================================================
   EYEBROW
   ========================================================================= */
.amz-ds .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.amz-ds .eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--ai-lime);
  flex: none;
}
.amz-ds .on-dark .eyebrow { color: var(--text-on-dark-muted); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.amz-ds .btn {
  --bg: var(--ai-teal);
  --fg: #fff;
  --bd: var(--ai-teal);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-height: 52px;
  padding: 13px 18px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
}
.amz-ds .btn .ico { flex: none; transition: transform var(--dur) var(--ease); }
.amz-ds .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.amz-ds .btn:hover .ico { transform: translateX(4px); }
.amz-ds .btn-outline {
  --bg: transparent; --fg: var(--ai-teal); --bd: var(--ai-teal);
}
.amz-ds .btn-outline:hover { --bg: var(--ai-teal); --fg: #fff; }
.amz-ds .on-dark .btn { --bg: #fff; --fg: var(--ai-black); --bd: #fff; }
.amz-ds .on-dark .btn:hover { --bg: var(--ai-lime); --fg: var(--ai-black); --bd: var(--ai-lime); }
.amz-ds .on-dark .btn-outline { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,0.4); }
.amz-ds .on-dark .btn-outline:hover { --bd: #fff; --bg: rgba(255,255,255,0.06); --fg: #fff; }

/* text link */
.amz-ds .link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-body);
  color: var(--ai-teal);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.amz-ds .link .ico { transition: transform var(--dur) var(--ease); }
.amz-ds .link:hover { border-color: var(--ai-teal); }
.amz-ds .link:hover .ico { transform: translateX(3px); }
.amz-ds .on-dark .link { color: #fff; }
.amz-ds .on-dark .link:hover { border-color: var(--ai-lime); }

/* =========================================================================
   TAGS
   ========================================================================= */
.amz-ds .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-teal);
  background: rgba(24,86,99,0.08);
  padding: 6px 10px;
}

/* =========================================================================
   CARDS
   ========================================================================= */
.amz-ds .card {
  display: flex;
  flex-direction: column;
  background: var(--ai-white);
  border: 1px solid var(--line);
  padding: 32px 28px 28px;
  min-height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.amz-ds .card:hover { border-color: var(--ai-teal); }
.amz-ds .card .card-title { font-size: var(--fs-h3); font-weight: 500; color: var(--text-strong); letter-spacing: 0; margin-bottom: 12px; }
.amz-ds .card .card-body { font-size: var(--fs-body); color: var(--text-body); line-height: 1.5; }
.amz-ds .card .card-foot { margin-top: auto; padding-top: 24px; }
.amz-ds .surface-alt .card { background: #fff; }
.amz-ds .card-accent { position: relative; }
.amz-ds .card-accent::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: var(--ai-lime); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.amz-ds .card-accent:hover::before { transform: scaleX(1); }

/* =========================================================================
   SECTIONS & SURFACES
   ========================================================================= */
.amz-ds .section { padding-block: var(--section-y); }
.amz-ds .surface       { background: var(--ai-white); color: var(--text-body); }
.amz-ds .surface-alt   { background: var(--ai-gray-10); color: var(--text-body); }
.amz-ds .surface-dark  { background: var(--ai-teal-700); color: var(--text-on-dark); }
.amz-ds .surface-dark h1,
.amz-ds .surface-dark h2,
.amz-ds .surface-dark h3 { color: #fff; }
.amz-ds .rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.amz-ds .on-dark .rule { border-color: var(--line-on-dark); }

/* =========================================================================
   IMAGE PLACEHOLDER
   ========================================================================= */
.amz-ds .ph {
  position: relative;
  background: repeating-linear-gradient(135deg, rgba(24,86,99,0.05) 0 2px, transparent 2px 11px), var(--ai-gray-10);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
}
.amz-ds .ph span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-muted); text-transform: uppercase;
}

/* =========================================================================
   HERO
   ========================================================================= */
.amz-ds .hero { padding-block: clamp(80px, 9vw, 150px); }
.amz-ds .hero .eyebrow { margin-bottom: 32px; }
.amz-ds .hero .h-display { max-width: 16ch; margin-bottom: 28px; }
.amz-ds .hero .lead { color: var(--text-on-dark-muted); max-width: 44ch; }
.amz-ds .checklist { display: flex; flex-direction: column; gap: 14px; margin: 36px 0 40px; }
.amz-ds .checklist li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-on-dark); font-size: var(--fs-lead); }
.amz-ds .checklist .tick { flex: none; width: 22px; height: 22px; color: var(--ai-lime); margin-top: 2px; }
.amz-ds .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* =========================================================================
   PARTNERS STRIP
   ========================================================================= */
.amz-ds .partners { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding-top: 40px; }
.amz-ds .partners .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.amz-ds .partners .logos { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; }
.amz-ds .partners .logos span { color: rgba(255,255,255,0.72); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; }
.amz-ds .partners .logos img { max-height: 32px; width: auto; filter: brightness(0) invert(1) opacity(0.55); }

/* =========================================================================
   SERVICES GRID
   ========================================================================= */
.amz-ds .cards-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.amz-ds .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.amz-ds .cards-grid .card { border: 0; }
@media (max-width: 900px) { .amz-ds .cards-grid.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .amz-ds .cards-grid.cols-3 { grid-template-columns: 1fr; } }
.amz-ds .cards-loose { display: grid; gap: var(--gutter); }
.amz-ds .cards-loose.cols-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .amz-ds .cards-loose.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .amz-ds .cards-loose.cols-3 { grid-template-columns: 1fr; } }

/* =========================================================================
   STAT / CERTIFICATIONS
   ========================================================================= */
.amz-ds .stat { padding: 8px 0; }
.amz-ds .stat .n { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 3.75rem); font-weight: 300; color: var(--ai-teal); line-height: 1; letter-spacing: -0.02em; }
.amz-ds .stat .k { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }
.amz-ds .cert-badge {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 2px solid var(--ai-lime); padding: 4px 0 4px 18px;
}
.amz-ds .cert-badge .b { font-family: var(--font-mono); font-weight: 500; color: var(--ai-black); font-size: 1.25rem; letter-spacing: 0.02em; }
.amz-ds .cert-badge .s { font-size: var(--fs-small); color: var(--text-muted); }
.amz-ds .cert-badge-img {
  display: inline-flex; align-items: flex-start; flex-shrink: 0;
  transition: opacity 0.2s;
}
.amz-ds .cert-badge-img:hover { opacity: 0.7; }
.amz-ds .cert-badge-img img { width: 52px; height: auto; display: block; }

/* =========================================================================
   ACCORDION (FAQ)
   ========================================================================= */
.amz-ds .acc { border-top: 1px solid var(--line); }
.amz-ds .acc-item { border-bottom: 1px solid var(--line); }
.amz-ds .acc-trigger {
  width: 100%; background: none; border: 0; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 4px; font-size: var(--fs-lead); color: var(--text-strong); font-weight: 400;
  transition: color .2s;
}
.amz-ds .acc-trigger:hover { color: var(--ai-teal); }
.amz-ds .acc-trigger .pm { flex: none; width: 22px; height: 22px; position: relative; color: var(--ai-teal); transition: transform var(--dur) var(--ease); }
.amz-ds .acc-trigger .pm::before,
.amz-ds .acc-trigger .pm::after { content: ""; position: absolute; background: currentColor; }
.amz-ds .acc-trigger .pm::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.amz-ds .acc-trigger .pm::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.amz-ds .acc-trigger[aria-expanded="true"] .pm { transform: rotate(45deg); }
.amz-ds .acc-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.amz-ds .acc-panel-inner { padding: 0 4px 30px; max-width: 70ch; color: var(--text-body); }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.amz-ds .cta .h2 { max-width: 20ch; margin-bottom: 28px; }
.amz-ds .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.amz-ds .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.amz-ds .reveal.in { opacity: 1; transform: none; }
.amz-ds .reveal[data-d="1"] { transition-delay: .06s; }
.amz-ds .reveal[data-d="2"] { transition-delay: .12s; }
.amz-ds .reveal[data-d="3"] { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .amz-ds .reveal { opacity: 1; transform: none; transition: none; } }

/* Capability card index number (DS v2 — server-rendered cards) */
.amz-ds .card-num { font-family: var(--font-mono); font-size: 13px; color: var(--ai-lime-800); letter-spacing: .06em; margin-bottom: 22px; display: block; }

/* =========================================================================
   PROCESS FLOW (numbered steps) — reusable across vertical pages
   ========================================================================= */
.amz-ds .flow-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.amz-ds .flow-step { background: var(--ai-white); padding: 26px 18px 24px; display: flex; flex-direction: column; }
.amz-ds .surface-alt .flow-step { background: #fff; }
.amz-ds .flow-step .s-num { font-family: var(--font-mono); font-size: 12px; color: var(--ai-teal); letter-spacing: .08em; margin-bottom: 16px; }
.amz-ds .flow-step .s-title { font-size: 15px; font-weight: 500; color: var(--text-strong); margin-bottom: 8px; line-height: 1.25; }
.amz-ds .flow-step .s-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 1000px) { .amz-ds .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .amz-ds .flow-steps { grid-template-columns: 1fr; } }

/* Two-column governance/compliance lists on dark or light surfaces */
.amz-ds .feature-list { list-style: none; margin: 0; padding: 0; }
.amz-ds .feature-list li { position: relative; padding-left: 28px; margin-bottom: 14px; font-size: var(--fs-body); color: var(--text-body); line-height: 1.5; }
.amz-ds .on-dark .feature-list li { color: var(--text-on-dark-muted); }
.amz-ds .feature-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 2px; background: var(--ai-lime); }

/* Client logo wall (home) */
.amz-ds .client-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 40px; align-items: center; }
.amz-ds .client-wall img { max-height: 38px; max-width: 130px; object-fit: contain; filter: grayscale(100%); opacity: .6; transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); justify-self: center; }
.amz-ds .client-wall img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 900px) { .amz-ds .client-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .amz-ds .client-wall { grid-template-columns: repeat(2, 1fr); } }

/* 4-column card grid (e.g. valores) */
.amz-ds .cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .amz-ds .cards-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .amz-ds .cards-grid.cols-4 { grid-template-columns: 1fr; } }

/* Hero sem checklist: garante respiro entre o lead e os botões */
.amz-ds .hero .lead + .hero-actions { margin-top: 40px; }