/* RESOLVA COMIGO — arte vertical 9:16, layout editável e sem bibliotecas.
   Troque as cores nas variáveis. 1cqw = 1% da largura do cartaz. */
:root {
  --paper: #F3F0EB;
  --blush: #EFCFCF;
  --mauve: #B5A6AB;
  --dust: #887683;
  --mist: #9FA5B5;
  --ink: #302B30;
  --accent: #A6777E;
  --button: #715761;
  --cream: #FCF8F2;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #E8E2E5; }
body { margin: 0; font-family: var(--sans); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; background: #E8E2E5; }
.poster {
  position: relative;
  container-type: inline-size;
  width: min(100%, 1080px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: radial-gradient(ellipse at 31% 22%, var(--cream), var(--paper) 72%);
  box-shadow: 0 12px 50px rgba(40,30,34,.14);
}
.deco { position: absolute; pointer-events: none; }
.deco-top {
  z-index: -1; width: 63%; height: 27%; top: -16%; left: 41%;
  background: #DDD3D6; transform: rotate(-18deg);
  border-radius: 0 0 67% 62%;
}
.deco-blush {
  z-index: -1; width: 36%; height: 13%; top: -6%; right: -7%;
  background: var(--blush); border-radius: 48% 0 57% 45%; transform: rotate(20deg);
}
.brand { position: absolute; z-index: 5; top: 3.0%; left: 6.4%; width: 48%; }
.brand-name {
  font-family: var(--sans); font-size: 5.55cqw; font-weight: 800;
  line-height: .88; letter-spacing: -.048em;
}
.brand-stroke { display: block; width: 8.8%; height: .45cqw; margin-top: 1.4cqw; background: var(--accent); border-radius: 2rem; }
.brand-subtitle { margin-top: 1.6cqw; font-size: 1.75cqw; letter-spacing: .33em; font-weight: 600; white-space: nowrap; }
.statement { position: absolute; z-index: 4; left: 6.4%; top: 12.35%; width: 65%; }
.headline { margin: 0; font-family: var(--serif); font-weight: normal; letter-spacing: -.065em; }
.headline-accent { display: block; color: var(--accent); font-size: 15.7cqw; line-height: .82; }
.headline-base { display: block; color: var(--ink); font-size: 12.1cqw; line-height: .96; margin-top: .5cqw; }
.support { max-width: 88%; margin: 1.5cqw 0 0 .2cqw; font-size: 2.9cqw; line-height: 1.20; letter-spacing: -.025em; }
.services { z-index: 6; position: absolute; right: 3.7%; top: 7.4%; width: 36.2%; display: flex; flex-direction: column; gap: 1.8cqw; }
.service { min-height: 14.5cqw; display: grid; grid-template-columns: 9.6cqw 1fr; gap: 1.1cqw; align-items: center; }
.service-icon { width: 8.4cqw; height: 8.4cqw; background: #EDD2D3; border-radius: 50%; display: grid; place-items: center; }
.service-technology .service-icon { background: #D3C9D0; }
.service-help .service-icon { background: #EDD2D3; }
.service-icon svg { width: 58%; height: 58%; stroke: var(--ink); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.service-content { border-left: .13cqw solid #C9ADB0; padding: .8cqw 0 .8cqw 1.65cqw; }
.service h2 { margin: 0 0 .8cqw; color: #9F747B; font: 700 1.89cqw/1.05 var(--sans); letter-spacing: .025em; }
.service p { margin: 0; font: 400 2.15cqw/1.21 var(--sans); letter-spacing: -.02em; }
.photo { position: absolute; z-index: 2; margin: 0; width: 100%; height: 34%; top: 49.2%; left: 0; overflow: hidden; }
.photo::before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 20%; pointer-events: none; background: linear-gradient(to bottom, var(--paper) 0%, rgba(243,240,235,0) 100%); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
.contact { position: absolute; z-index: 4; left: 0; width: 100%; height: 23%; bottom: 0; padding: 6.2cqw 8.0cqw 2cqw; background: var(--blush); border-radius: 66% 23% 0 0 / 21% 17% 0 0; }
.contact::before { content: ''; position: absolute; z-index: -1; right: -8%; top: -16%; width: 38%; height: 68%; background: #DCD1D7; transform: rotate(-17deg); border-radius: 52%; }
.contact-curve { position: absolute; top: -2.9cqw; left: -10%; width: 74%; height: 9cqw; background: var(--blush); border-radius: 60% 57% 0 0; transform: rotate(3deg); }
.contact-title { position: relative; z-index: 2; font-family: var(--serif); color: #54434A; font-weight: normal; letter-spacing: -.045em; font-size: 6.8cqw; line-height: .99; margin: 0 0 2.5cqw; }
.contact-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 2cqw; width: 70%; height: 9.4cqw; padding: 0 3.1cqw; border-radius: 10cqw; background: var(--button); color: #FFFDF9; font: 400 3.25cqw/1 var(--serif); white-space: nowrap; }
.contact-cta svg { width: 5.4cqw; height: 5.4cqw; flex: 0 0 auto; stroke: #FFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.contact-stroke { display: block; margin: 4cqw 0 0 29%; background: var(--accent); width: 12%; height: .4cqw; border-radius: 1rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media print { @page { size: 1080px 1920px; margin: 0; } html, body { background: none; } .poster { box-shadow: none; max-width: none; width: 1080px; } }