* { box-sizing: border-box; }

:root {
  --sel-max: 1280px;
  --sel-gut: clamp(16px, 3vw, 40px);
  --sel-pad: max(var(--sel-gut), calc((100% - var(--sel-max)) / 2));
  --sel-graphite: #333333;
  --sel-black: #000000;
  --sel-white: #ffffff;
  --sel-yellow: #EAC715;
  --sel-paper: #EFEFEA;
  --sel-line: #E0E0DC;
  --sel-copy: #55554F;
  --sel-muted: #8A8A85;
  --sel-dark-muted: rgba(255,255,255,.66);
  --sel-radius: 12px;
  --sel-display: Archivo, system-ui, sans-serif;
  --sel-body: Barlow, system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sel-graphite); color: var(--sel-white); font-family: var(--sel-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sel-yellow); }
button, input, select, textarea { font-family: inherit; }
/* Todo select do site usa a mesma seta desenhada em CSS, no lugar do controle
   nativo — que muda de cara em cada sistema operacional. A seta e feita de dois
   gradientes em currentColor, entao acompanha a cor do texto sem precisar de
   imagem nem de uma variante por fundo. Para trocar o desenho depois, e aqui. */
select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 12px center, right 7px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
select::-ms-expand { display: none; }
/* O menu aberto e desenhado pelo sistema: so da para controlar cor. */
select option { background-color: var(--sel-white); color: var(--sel-graphite); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sel-yellow); outline-offset: 4px; }
img { display: block; max-width: 100%; }
.site-shell { min-height: 100vh; overflow-x: hidden; }
.site-container { width: 100%; max-width: var(--sel-max); margin: 0 auto; padding-left: var(--sel-gut); padding-right: var(--sel-gut); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(51,51,51,.92); border-bottom: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); }
.site-header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; }
.site-brand-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
.site-header .site-brand-icon { width: 36px; height: 36px; margin: -6px -4px -6px -7px; }
.site-brand-copy { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.site-brand-name { color: var(--sel-white); font-family: var(--sel-display); font-size: 19px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.site-brand-subtitle { color: var(--sel-yellow); font-size: 9px; font-weight: 500; letter-spacing: .34em; line-height: 1; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px,1.6vw,26px); flex-wrap: wrap; }
.site-nav > .site-nav-link-contact { display: none !important; }
.site-menu-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; background: transparent; color: var(--sel-white); }
.site-menu-toggle:hover { border-color: var(--sel-yellow); color: var(--sel-yellow); }
.site-menu-icon { width: 20px; height: 20px; stroke-width: 1.5; }
.site-menu-icon-close { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-menu-icon-open { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-menu-icon-close { display: block; }
.site-nav-link { display: inline-block; padding: 8px 0; color: var(--sel-white); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transform-origin: center center; transition: color .18s ease, transform .22s cubic-bezier(.34,1.2,.64,1); }
.site-nav-link:hover, .site-nav-link:focus-visible { color: var(--sel-yellow); transform: scale(1.09); }
/* A pagina atual so muda de cor: mante-la crescida deixaria o menu torto. */
.site-nav-link.is-active { color: var(--sel-yellow); }
.site-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--sel-yellow); color: var(--sel-graphite); font-family: var(--sel-display); font-size: 12px; font-weight: 700; letter-spacing: .2em; line-height: 1.2; text-align: center; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease; }
.site-button:hover { background: var(--sel-white); color: var(--sel-graphite); transform: scale(1.04); }
.site-button-small { padding: 11px 20px; font-family: var(--sel-body); font-size: 11px; }
.mobile-whatsapp { display: none; }

main > section { padding-left: var(--sel-pad); padding-right: var(--sel-pad); }
.home-hero { position: relative; min-height: min(88vh, 900px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--sel-white); color: var(--sel-graphite); padding-top: clamp(56px,7vw,120px); padding-bottom: clamp(56px,6vw,100px); }
.home-hero-media { position: absolute; top: 0; right: var(--sel-pad); bottom: 0; width: min(46%,620px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: hidden; }
.hero-column { overflow: hidden; }
.hero-column-track { display: flex; flex-direction: column; gap: 14px; }
.hero-column-track-up { animation: selScrollUp 26s linear infinite; }
.hero-column-track-down { animation: selScrollDown 30s linear infinite; }
.hero-slot { flex: none; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sel-radius); background: #E6E4DF; }
.hero-slot img { width: 100%; height: 100%; object-fit: cover; }
.home-hero-copy { position: relative; z-index: 1; max-width: min(52%,720px); min-width: min(100%,340px); }
.hero-eyebrow { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 clamp(22px,3vw,38px); color: rgba(51,51,51,.62); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero-eyebrow-mark { color: var(--sel-yellow); }
.home-hero-title, .landing-title, .promotor-title, .contact-title { margin: 0 0 clamp(24px,3vw,40px); color: var(--sel-black); font-family: var(--sel-display); font-size: clamp(31.5px,4.95vw,84px); font-weight: 700; letter-spacing: .005em; line-height: .92; text-transform: uppercase; }
.home-hero-title span, .landing-title span, .contact-title span { color: var(--sel-yellow); }
.hero-description { max-width: 46ch; margin: 0 0 clamp(24px,3vw,36px); color: rgba(51,51,51,.74); font-size: clamp(16px,1.3vw,19px); line-height: 1.55; text-wrap: pretty; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-button { padding: 18px 30px; }
.home-hero .hero-button:not(.hero-button-secondary):hover { background: var(--sel-graphite); color: var(--sel-white); }
.hero-button-secondary { border: 1px solid rgba(51,51,51,.35); background: transparent; }
.hero-button-secondary:hover { background: var(--sel-graphite); color: var(--sel-white); }
.home-hero-cue { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding-top: clamp(28px,3vw,48px); color: rgba(51,51,51,.62); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.home-hero-cue-mark { display: block; width: 10px; height: 10px; background: var(--sel-yellow); animation: selCue 2.4s ease-in-out infinite; }

.section-light { background: var(--sel-white); color: var(--sel-graphite); }
.section-dark { background: var(--sel-graphite); color: var(--sel-white); }
.home-about { padding-top: clamp(56px,8vw,140px); padding-bottom: clamp(56px,8vw,140px); }
.about-grid, .difference-grid, .map-grid, .testimonials-grid, .form-layout, .landing-split { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(28px,4vw,72px); align-items: start; }
.about-grid { align-items: start; }
.about-image { height: clamp(300px,32vw,460px); overflow: hidden; border-radius: var(--sel-radius); background: var(--sel-paper); }
.about-image img, .difference-image img, .landing-image img { width: 100%; height: 100%; object-fit: cover; }
.about-copy h2, .home-difference h2, .landing-section h2, .section-heading { margin: 0; font-family: var(--sel-display); font-weight: 700; letter-spacing: .01em; line-height: 1.02; text-transform: uppercase; }
.about-copy h2 { margin-bottom: 32px; color: var(--sel-black); font-size: clamp(23.8px,3.06vw,49.3px); }
.about-copy h2 span, .home-difference h2 span, .landing-section h2 span, .section-heading span { color: var(--sel-yellow); }
.about-copy-text { display: flex; flex-direction: column; gap: 22px; max-width: 48ch; color: var(--sel-copy); font-size: 17px; line-height: 1.6; }
.about-copy-text p { margin: 0; text-wrap: pretty; }
.services-list { margin-top: clamp(48px,6vw,96px); border-top: 1px solid var(--sel-line); }
.faq-list { max-width: 900px; margin-top: 40px; }
.faq-list article { padding: 24px 0; border-top: 1px solid var(--sel-line); }
.faq-list h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.faq-list p { margin: 0; color: var(--sel-copy); font-size: 17px; line-height: 1.65; }
.service-row { display: flex; align-items: center; gap: clamp(16px,3vw,48px); padding: clamp(20px,2.4vw,34px) 0; border-bottom: 1px solid var(--sel-line); transition: padding-left .3s ease, background .3s ease; }
.service-row:hover { padding-left: 20px; background: var(--sel-yellow); }
.service-index { flex: none; color: var(--sel-muted); font-family: var(--sel-display); font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.service-row h3 { flex: 1; min-width: 0; margin: 0; color: var(--sel-black); font-family: var(--sel-display); font-size: clamp(20.4px,3.06vw,49.3px); font-weight: 700; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.service-row p { max-width: 34ch; margin: 0; color: var(--sel-copy); font-size: 15px; line-height: 1.5; }

.home-difference { padding-top: clamp(56px,8vw,130px); padding-bottom: clamp(56px,8vw,130px); }
.home-difference .difference-grid { align-items: center; margin-bottom: clamp(32px,4vw,64px); }
.home-difference h2 { color: var(--sel-white); font-size: clamp(23.8px,3.4vw,54.4px); line-height: .98; }
.difference-copy p { max-width: 52ch; margin: clamp(20px,2vw,28px) 0 0; color: var(--sel-dark-muted); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.difference-copy .site-button { margin-top: clamp(18px,2vw,26px); padding: 14px 24px; font-size: 11px; letter-spacing: .2em; }
.difference-image { height: clamp(280px,32vw,460px); overflow: hidden; border-radius: var(--sel-radius); background: #2B2B2B; }
.difference-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.difference-card { display: flex; flex-direction: column; padding: 32px 26px 40px; background: var(--sel-graphite); transition: background .3s ease, color .3s ease; }
.difference-card:hover { background: var(--sel-yellow); color: var(--sel-graphite); }
.difference-card-number { font-family: var(--sel-display); font-size: 12px; font-weight: 600; letter-spacing: .2em; }
.difference-card h3 { margin: 26px 0 10px; font-family: var(--sel-display); font-size: 18.7px; font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; }
.difference-card p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .72; }
.coverage-section { padding-top: clamp(56px,8vw,120px); padding-bottom: clamp(56px,8vw,120px); }
.coverage-grid { display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1fr); gap: clamp(28px,5vw,84px); align-items: start; }
.coverage-copy h2 { max-width: 24ch; margin: 0 0 18px; color: var(--sel-white); font-family: var(--sel-display); font-size: clamp(23.8px,3.06vw,47.6px); font-weight: 700; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.coverage-copy > p:not(.section-eyebrow) { max-width: 44ch; margin: 0; color: var(--sel-dark-muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
/* Mapa: geometria pre-calculada. O estado final e o padrao do CSS; a animacao
   de entrada so roda quando o IntersectionObserver marca a secao com
   .is-revealed. Sem JavaScript, o mapa aparece pronto em vez de sumir. */
.coverage-map { display: flex; align-items: center; justify-content: center; }
.coverage-map svg { display: block; width: min(100%, 520px); height: auto; overflow: visible; }
.coverage-map-shape { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2200; }
.is-revealed .coverage-map-shape { animation: selMapDraw 1.6s ease-in-out both; }
.coverage-pin { transform-box: fill-box; transform-origin: center; }
.is-revealed .coverage-pin { animation: selMapPin 0.45s cubic-bezier(.34,1.4,.64,1) both; animation-delay: 1.6s; }
.is-revealed .coverage-cities span { animation: selCityChip 0.45s ease both; animation-delay: 1.6s; }
.coverage-pin-halo { fill: none; stroke: var(--sel-yellow); stroke-width: 1.5; opacity: 0; transition: opacity .25s ease; vector-effect: non-scaling-stroke; }
.coverage-pin-dot { fill: var(--sel-yellow); }
.coverage-pin-label-group { opacity: 0; transition: opacity .2s ease; }
.coverage-pin-label-bg { fill: var(--sel-yellow); }
.coverage-pin-label { fill: var(--sel-graphite); font-family: var(--sel-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.coverage-pin-anchor:hover .coverage-pin-halo, .coverage-pin-anchor:hover .coverage-pin-label-group { opacity: 1; }
.coverage-cities span { cursor: default; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.coverage-cities span:hover { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); transform: translateY(-2px); }
/* Liga a lista de cidades ao mapa nos dois sentidos, sem JavaScript: :has() no
   avo permite que o hover de um lado destaque o par do outro. Onde :has() nao
   existir, cada lado continua funcionando sozinho. */
.coverage-grid:has(.coverage-cities span:nth-child(1):hover) .coverage-pin-anchor:nth-of-type(1) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(1):hover) .coverage-pin-anchor:nth-of-type(1) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(1):hover) .coverage-cities span:nth-child(1) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(2):hover) .coverage-pin-anchor:nth-of-type(2) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(2):hover) .coverage-pin-anchor:nth-of-type(2) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(2):hover) .coverage-cities span:nth-child(2) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(3):hover) .coverage-pin-anchor:nth-of-type(3) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(3):hover) .coverage-pin-anchor:nth-of-type(3) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(3):hover) .coverage-cities span:nth-child(3) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(4):hover) .coverage-pin-anchor:nth-of-type(4) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(4):hover) .coverage-pin-anchor:nth-of-type(4) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(4):hover) .coverage-cities span:nth-child(4) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(5):hover) .coverage-pin-anchor:nth-of-type(5) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(5):hover) .coverage-pin-anchor:nth-of-type(5) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(5):hover) .coverage-cities span:nth-child(5) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(6):hover) .coverage-pin-anchor:nth-of-type(6) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(6):hover) .coverage-pin-anchor:nth-of-type(6) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(6):hover) .coverage-cities span:nth-child(6) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(7):hover) .coverage-pin-anchor:nth-of-type(7) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(7):hover) .coverage-pin-anchor:nth-of-type(7) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(7):hover) .coverage-cities span:nth-child(7) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(8):hover) .coverage-pin-anchor:nth-of-type(8) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(8):hover) .coverage-pin-anchor:nth-of-type(8) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(8):hover) .coverage-cities span:nth-child(8) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
.coverage-grid:has(.coverage-cities span:nth-child(9):hover) .coverage-pin-anchor:nth-of-type(9) .coverage-pin-halo,
.coverage-grid:has(.coverage-cities span:nth-child(9):hover) .coverage-pin-anchor:nth-of-type(9) .coverage-pin-label-group { opacity: 1; }
.coverage-grid:has(.coverage-pin-anchor:nth-of-type(9):hover) .coverage-cities span:nth-child(9) { border-color: var(--sel-yellow); background: var(--sel-yellow); color: var(--sel-graphite); }
@keyframes selMapDraw { from { stroke-dashoffset: 2200; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
.is-revealed .coverage-pin-anchor:nth-of-type(2) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(2) { animation-delay: 1.72s; }
.is-revealed .coverage-pin-anchor:nth-of-type(3) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(3) { animation-delay: 1.84s; }
.is-revealed .coverage-pin-anchor:nth-of-type(4) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(4) { animation-delay: 1.96s; }
.is-revealed .coverage-pin-anchor:nth-of-type(5) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(5) { animation-delay: 2.08s; }
.is-revealed .coverage-pin-anchor:nth-of-type(6) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(6) { animation-delay: 2.20s; }
.is-revealed .coverage-pin-anchor:nth-of-type(7) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(7) { animation-delay: 2.32s; }
.is-revealed .coverage-pin-anchor:nth-of-type(8) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(8) { animation-delay: 2.44s; }
.is-revealed .coverage-pin-anchor:nth-of-type(9) .coverage-pin,
.is-revealed .coverage-cities span:nth-child(9) { animation-delay: 2.56s; }
@keyframes selCityChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes selMapPin { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.coverage-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.coverage-cities span { padding: 9px 15px; border: 1px solid rgba(255,255,255,.3); color: var(--sel-white); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.coverage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.coverage-actions .site-button { padding: 16px 28px; }
.coverage-actions > span { color: rgba(255,255,255,.5); font-size: 14px; }
.social-proof-section { padding-top: clamp(56px,8vw,120px); padding-bottom: clamp(56px,8vw,120px); }
.social-proof-inner { max-width: var(--sel-max); margin: 0 auto; text-align: center; }
.social-proof-inner h2 { max-width: 34ch; margin: 0 auto; color: var(--sel-black); font-family: var(--sel-display); font-size: clamp(23.8px,3.57vw,57.8px); font-weight: 700; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
/* Grade de clientes: um card por marca. O gap de 1px sobre o fundo da linha
   desenha a malha sem somar bordas adjacentes. Sem arquivo de logo, o card
   mostra o nome da marca como marca-texto. */
.client-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; max-width: var(--sel-max); margin: clamp(36px,5vw,64px) auto 0; padding: 0; list-style: none; border: 1px solid var(--sel-line); background: var(--sel-line); }
.client-card { display: flex; align-items: center; justify-content: center; min-height: clamp(130px,13vw,168px); padding: 24px 20px; background: var(--sel-white); transition: background .25s ease, color .25s ease; }
.client-card:hover { background: var(--sel-paper); }
/* Logos vem em proporcoes diferentes: os quadrados ganham altura maior que os
   deitados para nao ficarem visualmente menores dentro do mesmo card. */
.client-logo { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
.client-card--bacio .client-logo { max-height: 135px; }
.client-card--italia .client-logo { max-height: 85px; }
.client-card:hover { background: var(--sel-white); }
.client-card:hover .client-logo { filter: grayscale(0); opacity: 1; }
.client-name { color: var(--sel-graphite); font-family: var(--sel-display); font-size: clamp(15px,1.5vw,19px); font-weight: 700; letter-spacing: .04em; line-height: 1.15; text-align: center; text-transform: uppercase; }
/* Faixa de clientes em marquee: oculta a pedido. Para trazer de volta, troque
   display:none por display:block e devolva o bloco correspondente no index.php
   (esta no historico, commit 5f3a054). */
.social-proof-marquee-section { display: none; padding-right: 0 !important; padding-left: 0 !important; }
.social-proof-marquee { padding: 24px 0; border-top: 1px solid var(--sel-line); border-bottom: 1px solid var(--sel-line); overflow: hidden; }
.social-proof-track { display: flex; align-items: center; width: max-content; animation: selMarquee 40s linear infinite; }
.social-proof-track span { padding-right: 44px; color: var(--sel-graphite); font-family: var(--sel-display); font-size: clamp(20px,2.6vw,38px); font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.social-proof-track b { padding-right: 44px; color: var(--sel-yellow); font-size: clamp(12px,1.6vw,23px); line-height: 1; }
@media (max-width: 1000px) { .client-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .client-grid { grid-template-columns: repeat(2,1fr); } }
/* Fechamento da home: unica secao com fundo de destaque no site inteiro. O
   botao inverte para grafite, porque amarelo sobre amarelo nao existe. */
.closing-section { padding-top: clamp(60px,9vw,150px); padding-bottom: clamp(60px,9vw,150px); background: var(--sel-yellow); color: var(--sel-graphite); text-align: center; }
.closing-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.closing-inner h2 { margin: 0; color: var(--sel-graphite); font-family: var(--sel-display); font-size: clamp(27.2px,4.59vw,81.6px); font-weight: 700; letter-spacing: .005em; line-height: .95; text-transform: uppercase; }
.closing-inner p { max-width: 46ch; margin: 0; color: rgba(51,51,51,.82); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.closing-cta { max-width: 48ch; margin: 0; color: rgba(51,51,51,.72); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.closing-inner .site-button { margin-top: 6px; padding: 20px 36px; background: var(--sel-graphite); color: var(--sel-white); }
.closing-inner .site-button:hover { background: var(--sel-black); color: var(--sel-white); }

.landing-hero { padding-top: clamp(48px,7vw,110px); padding-bottom: clamp(40px,5vw,80px); }
.landing-title { margin-top: 26px; margin-bottom: 32px; color: var(--sel-white); font-size: clamp(31.5px,4.95vw,84px); line-height: .92; }
.landing-split { align-items: end; }
.landing-description { max-width: 52ch; margin: 0; color: var(--sel-dark-muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.landing-cta { display: inline-flex; justify-self: start; align-self: flex-start; margin-top: clamp(28px,4vw,48px); padding: 18px 30px; }
.alimentos-hero, .landing-hero--with-image { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(320px,.78fr); gap: clamp(32px,6vw,96px); align-items: center; }
.alimentos-hero-copy, .landing-hero-copy { max-width: 720px; }
.alimentos-hero .landing-title { color: var(--sel-black); }
.alimentos-hero .landing-description { color: rgba(51,51,51,.74); }
.alimentos-hero .landing-cta { margin-top: clamp(28px,4vw,48px); }
.agencias-hero .landing-title { color: var(--sel-black); }

/* Uma frase por bloco, cada uma quebrando por conta própria.
   text-wrap: balance distribui as palavras entre as linhas em vez de encher a
   primeira e largar o resto — é o que evita "campo." sozinho numa linha. Onde
   o navegador não suporta, a quebra é a normal: pior, mas não quebrado.
   A cor precisa ser reafirmada porque .landing-title span pinta de amarelo, e
   sem isto a frase inteira herdaria o destaque de uma palavra. */
.landing-title .landing-title-line { display: block; color: inherit; text-wrap: balance; }
.agencias-hero .landing-title .landing-title-line { color: var(--sel-black); }
.agencias-hero .landing-title .landing-title-line > span { color: var(--sel-yellow); }
.agencias-hero .landing-description { color: var(--sel-copy); }
.alimentos-hero-image, .landing-hero-image { min-height: clamp(320px,42vw,560px); overflow: hidden; border-radius: var(--sel-radius); background: var(--sel-paper); }
.alimentos-hero-image img, .landing-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.image-section { padding-left: var(--sel-pad); padding-right: var(--sel-pad); }
.landing-image { height: clamp(280px,44vw,560px); overflow: hidden; border-radius: var(--sel-radius); background: #2B2B2B; }
.landing-section { padding-top: clamp(56px,8vw,130px); padding-bottom: clamp(56px,8vw,130px); }
.landing-section h2 { color: var(--sel-white); font-size: clamp(22.1px,3.06vw,47.6px); }
.landing-section-light { background: var(--sel-white); color: var(--sel-graphite); }
.landing-section-light h2 { color: var(--sel-black); }
.challenge-grid { align-items: start; }
.agencias-challenge-grid { grid-template-columns: minmax(280px, .78fr) minmax(320px, 1.22fr); align-items: center; }
.agencias-challenge-image { height: clamp(300px, 36vw, 500px); overflow: hidden; border-radius: var(--sel-radius); background: #222; }
.agencias-challenge-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.agencias-challenge-copy h2 { margin: 0 0 28px; }
.challenge-description { color: var(--sel-dark-muted); font-size: 17px; line-height: 1.6; }
.challenge-description p { margin: 0 0 28px; text-wrap: pretty; }
.number-list, .dark-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.number-list li, .dark-list li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 16px; }
.number-list li span { color: var(--sel-yellow); font-family: var(--sel-display); font-size: 11px; letter-spacing: .14em; }
.section-eyebrow { display: block; margin: 0 0 24px; color: var(--sel-yellow); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.section-eyebrow-dark { color: var(--sel-muted); }
.solution-section .section-eyebrow { margin: 20px 0; }
.solution-section h2, .challenge-copy h2 { margin: 20px 0; }
.agencias-casting-section h2 { margin-bottom: 20px; }
.solution-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 0; border: 1px solid var(--sel-line); background: var(--sel-line); }
.solution-card { min-height: 230px; padding: 32px 26px 40px; background: var(--sel-white); transition: background .3s ease; }
.solution-card:hover { background: var(--sel-yellow); }
.solution-icon { display: block; width: 48px; height: 48px; margin-bottom: 28px; fill: none; stroke: var(--sel-yellow); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1; }
.solution-card:hover .solution-icon { stroke: var(--sel-graphite); }
.solution-card h3 { margin: 0 0 12px; color: var(--sel-black); font-family: var(--sel-display); font-size: 16.15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.solution-card p { margin: 0; color: var(--sel-copy); font-size: 15px; line-height: 1.55; }
.process-list { border-top: 1px solid rgba(255,255,255,.14); }
.process-row { display: flex; align-items: baseline; gap: clamp(16px,3vw,48px); padding: clamp(18px,2vw,30px) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.process-number { flex: none; color: var(--sel-yellow); font-family: var(--sel-display); font-size: 12px; font-weight: 600; letter-spacing: .2em; }
.process-row h3 { flex: 1; min-width: 0; margin: 0; color: var(--sel-white); font-family: var(--sel-display); font-size: clamp(17px,2.21vw,32.3px); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.process-row p { max-width: 32ch; margin: 0; color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.5; }

.form-section { padding-top: clamp(56px,8vw,130px); padding-bottom: clamp(56px,8vw,130px); }
.form-layout { align-items: start; }
.form-layout h2 { margin: 0 0 20px; color: var(--sel-white); font-family: var(--sel-display); font-size: clamp(23.8px,3.23vw,51px); line-height: 1; text-transform: uppercase; }
.form-intro p { max-width: 40ch; margin: 0; color: rgba(255,255,255,.6); font-size: 16px; line-height: 1.6; }
.visual-form { display: grid; gap: 22px; }
.visual-form label { display: grid; gap: 8px; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.visual-form input, .visual-form select, .visual-form textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); outline: 0; background-color: transparent; color: var(--sel-white); font-size: 17px; font-weight: 400; }
/* O padding do grupo zera a direita; o select precisa de espaco para a seta. */
.visual-form select { padding-right: 28px; }
.visual-form input:focus, .visual-form select:focus, .visual-form textarea:focus { border-bottom-color: var(--sel-yellow); }
.visual-form textarea { resize: vertical; }
.visual-form select option { color: var(--sel-graphite); }
.visual-form input::placeholder, .visual-form textarea::placeholder { color: rgba(255,255,255,.34); }
.visual-form .site-button { justify-self: start; padding: 18px 32px; }
.visual-form .site-button:disabled { cursor: wait; opacity: .6; transform: none; }
.visual-form-note { margin: 0; color: rgba(255,255,255,.44); font-size: 13px; line-height: 1.5; }
/* Aviso de canal no cadastro de promotor: precisa ser lido antes do envio,
   entao fica junto do formulario e nao no rodape da pagina. */
/* Etapas: sem JS todas ficam visiveis; o script marca o formulario como
   .is-stepped e ai so a etapa ativa aparece. */
.form-step { margin: 0; padding: 0; border: 0; }
.is-stepped .form-step { display: none; }
.is-stepped .form-step.is-active { display: block; }
.field-wide { grid-column: 1 / -1; }
.field-file input[type="file"] { width: 100%; padding: 14px 0; color: var(--sel-copy); font-size: 14px; }
.field-file input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 1px solid var(--sel-line); border-radius: 6px; background-color: var(--sel-white); color: var(--sel-graphite); font-family: var(--sel-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.field-file input[type="file"]::file-selector-button:hover { border-color: var(--sel-yellow); background-color: var(--sel-yellow); }
.field-file small { color: var(--sel-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.file-chosen { display: block; margin-top: 6px; color: var(--sel-copy); font-size: 13px; letter-spacing: 0; text-transform: none; }
.file-chosen.is-too-big { color: #B00020; font-weight: 600; }
/* Seletor e calendario no formulario claro do cadastro: o estilo original foi
   feito para o formulario de agencias, que fica em fundo branco tambem, entao
   so falta o que e especifico daqui. */
.field-picker-field, .field-date-field { position: relative; }
.field-date-input { position: relative; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #C9C9C2; }
.field-date-input input { flex: 1; border-bottom: 0 !important; }
.field-date-input > button { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #7A6B00; }
.field-date-input > button:hover { color: var(--sel-graphite); }
.field-date-input > button svg { width: 18px; height: 18px; stroke-width: 1.5; }
.field-calendar { position: absolute; z-index: 45; top: calc(100% + 8px); right: 0; width: min(300px, 90vw); padding: 14px; border: 1px solid var(--sel-line); border-radius: 10px; background: var(--sel-white); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.field-calendar-head { display: flex; gap: 8px; margin-bottom: 12px; }
.promotor-form .field-calendar-head select, .field-calendar-head select { flex: 1; padding: 8px 26px 8px 10px; background-position: right 9px center, right 4px center; border: 1px solid var(--sel-line); border-radius: 6px; background-color: var(--sel-white); color: var(--sel-graphite); font-family: var(--sel-body); font-size: 13px; letter-spacing: 0; text-transform: none; }
.field-calendar-head select:focus { border-color: var(--sel-yellow); outline: 0; }
.field-calendar-weekdays, .field-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.field-calendar-weekdays span { padding: 4px 0; color: var(--sel-muted); font-size: 11px; font-weight: 600; text-align: center; }
.field-calendar-grid button { height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--sel-graphite); font-family: var(--sel-body); font-size: 13px; }
.field-calendar-grid button:hover { background: var(--sel-yellow); }
.consent-box { display: flex; gap: 12px; align-items: flex-start; margin-top: clamp(24px,3vw,32px); color: var(--sel-copy); font-size: 14px; line-height: 1.6; letter-spacing: 0; text-transform: none; text-wrap: pretty; }
.consent-box input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sel-yellow); }
.consent-box a { color: #7A6B00; text-decoration: underline; }
.channel-notice { display: flex; gap: 12px; align-items: flex-start; margin: clamp(28px,3vw,40px) 0 clamp(8px,1vw,16px); padding: 18px 20px; border-left: 3px solid var(--sel-yellow); background: rgba(234,199,21,.14); color: var(--sel-copy); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.channel-notice strong { color: var(--sel-graphite); }
/* O icone e decorativo: o amarelo puro aqui nao precisa passar em contraste de
   texto, mas escurecemos um pouco para nao sumir sobre o fundo claro. */
.channel-notice svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: #7A6B00; }
.agencias-form-section { background: var(--sel-white); color: var(--sel-graphite); }
.agencias-form-section .form-layout { max-width: 960px; margin: 0 auto; grid-template-columns: 1fr; justify-items: center; text-align: center; }
.agencias-form-section .form-intro p { margin-right: auto; margin-left: auto; color: var(--sel-copy); }
.agencias-form-section .form-layout h2 { color: var(--sel-black); }
.agencias-form-section .visual-form { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; text-align: left; }
.agencias-form-section .visual-form label { color: var(--sel-copy); }
.agencias-form-section .visual-form input, .agencias-form-section .visual-form select, .agencias-form-section .visual-form textarea { border-bottom-color: #C9C9C2; color: var(--sel-graphite); }
.agencias-form-section .visual-form input::placeholder, .agencias-form-section .visual-form textarea::placeholder { color: #A0A09A; }
.agencias-form-section .agencias-form-briefing, .agencias-form-section .form-status, .agencias-form-section .site-button { grid-column: 1 / -1; }
.agencias-form-section .visual-form .site-button { justify-self: center; }
.alimentos-form-section .visual-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.alimentos-form-section .form-layout { grid-template-columns: 1fr; }
.alimentos-form-section .visual-form .field-wide, .alimentos-form-section .visual-form .form-status, .alimentos-form-section .visual-form .site-button { grid-column: 1 / -1; }
.field-date-range { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-date-range legend { padding: 0; color: var(--sel-muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.field-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.field-date-fields label { gap: 8px; }
.field-date-fields label span { color: var(--sel-muted); font-size: 10px; letter-spacing: .14em; }
.field-date-input { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid #C9C9C2; }
.field-date-input input { min-width: 0; flex: 1; border-bottom: 0 !important; }
.field-calendar-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--sel-yellow); cursor: pointer; }
.field-calendar-toggle:hover { color: var(--sel-graphite); }
.field-calendar-toggle svg { width: 17px; height: 17px; stroke-width: 1.5; }
.agencias-form-section .field-date-range { grid-column: span 1; }
.field-calendar { position: absolute; z-index: 40; top: calc(100% + 12px); left: 0; width: min(350px, calc(100vw - 48px)); padding: 16px; border: 1px solid var(--sel-line); border-radius: 8px; background: var(--sel-white); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.field-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.field-calendar-head strong { color: var(--sel-black); font-family: var(--sel-display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.field-calendar-head button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--sel-line); border-radius: 50%; background: var(--sel-white); color: var(--sel-graphite); cursor: pointer; }
.field-calendar-head button:hover { border-color: var(--sel-yellow); background: var(--sel-yellow); }
.field-calendar-head svg { width: 15px; height: 15px; stroke-width: 1.5; }
.field-calendar-weekdays, .field-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.field-calendar-weekdays { margin-bottom: 6px; color: var(--sel-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.field-calendar-day { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--sel-graphite); font-family: var(--sel-body); font-size: 13px; cursor: pointer; }
.field-calendar-day:hover { border-color: var(--sel-yellow); background: rgba(234,199,21,.18); }
.field-calendar-day.is-range { border-radius: 0; background: rgba(234,199,21,.2); }
.field-calendar-day.is-start, .field-calendar-day.is-end { border-color: var(--sel-yellow); border-radius: 4px; background: var(--sel-yellow); color: var(--sel-black); font-weight: 700; }
.field-calendar-empty { aspect-ratio: 1; }
.field-calendar-hint { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--sel-line); color: var(--sel-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.field-picker-field { min-width: 0; }
.field-picker { position: relative; }
.field-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #C9C9C2; background: transparent; color: var(--sel-graphite); font-family: var(--sel-body); font-size: 17px; text-align: left; cursor: pointer; }
.field-picker-trigger:hover, .field-picker-trigger[aria-expanded="true"] { border-bottom-color: var(--sel-yellow); }
.field-picker-trigger .is-placeholder { color: var(--sel-muted); }
.section-dark .field-picker-trigger { border-bottom-color: rgba(255,255,255,.3); color: var(--sel-white); }
.section-dark .field-picker-trigger .is-placeholder { color: rgba(255,255,255,.34); }
.field-picker-trigger:disabled { cursor: not-allowed; opacity: .45; }
.field-picker-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--sel-yellow); stroke-width: 1.5; transition: transform .2s ease; }
.field-picker-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.field-picker-menu { position: absolute; z-index: 45; top: calc(100% + 8px); left: 0; right: 0; max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid var(--sel-line); border-radius: 8px; background: var(--sel-white); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.field-picker-option { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--sel-graphite); font-family: var(--sel-body); font-size: 15px; text-align: left; cursor: pointer; }
.field-picker-option:disabled { cursor: not-allowed; opacity: .45; }
.field-picker-option:not(:disabled):hover, .field-picker-option:not(:disabled):focus-visible { outline: 0; background: var(--sel-yellow); color: var(--sel-black); }
.field-picker-menu[hidden], .field-calendar[hidden] { display: none; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.form-status { margin: 0; color: var(--sel-yellow); font-size: 14px; line-height: 1.5; }

/* O atributo hidden vale menos que qualquer display declarado numa classe —
   sem isto, esconder o formulário enviado não teria efeito nenhum. */
[hidden] { display: none !important; }

/* Confirmação de envio, no lugar do formulário. A faixa amarela à esquerda é o
   que faz o aviso ser notado sem precisar de cor de fundo — ele aparece tanto
   sobre fundo claro quanto escuro. */
.form-sent { border-left: 3px solid var(--sel-yellow); padding: 20px 0 20px 20px; }
.form-sent p { margin: 0; font-size: 15px; line-height: 1.6; }
.form-sent-title { margin-bottom: 8px !important; color: var(--sel-yellow); font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.field-error { display: block; margin-top: 6px; color: var(--sel-yellow); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
[aria-invalid="true"] { border-color: var(--sel-yellow) !important; }

.promotor-hero { background: var(--sel-white); color: var(--sel-graphite); }
.promotor-hero .section-eyebrow { margin-bottom: 24px; color: var(--sel-yellow); }
.promotor-title { max-width: 20ch; margin: 0; color: var(--sel-black); font-size: clamp(31.5px,4.95vw,84px); line-height: .92; }
.promotor-title-line { display: block; }
.promotor-title-highlight { color: var(--sel-yellow); }
.promotor-description { max-width: 50ch; margin: clamp(28px,4vw,44px) 0 0; color: var(--sel-copy); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.promotor-cta { justify-self: start; margin-top: clamp(28px,4vw,48px); padding: 18px 30px; background: var(--sel-yellow); color: var(--sel-graphite); }
.promotor-cta:hover { background: var(--sel-graphite); color: var(--sel-white); }
.promotor-lists { padding-top: clamp(56px,8vw,120px); padding-bottom: clamp(56px,8vw,120px); }
.promotor-lists-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(28px,4vw,72px); }
.promotor-lists h2 { margin: 0 0 24px; color: var(--sel-white); font-family: var(--sel-display); font-size: clamp(20.4px,2.55vw,37.4px); line-height: 1.02; text-transform: uppercase; }
.dark-list li { padding: 15px 0; color: rgba(255,255,255,.8); }
.promotor-form-section { background: var(--sel-white); color: var(--sel-graphite); padding-top: clamp(56px,8vw,120px); padding-bottom: clamp(56px,8vw,120px); }
.promotor-form { max-width: 820px; }
.step-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.step-heading h2 { margin: 0; color: var(--sel-black); font-family: var(--sel-display); font-size: clamp(18.7px,2.38vw,34px); letter-spacing: .02em; text-transform: uppercase; }
.step-heading span { color: var(--sel-muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.step-progress { height: 2px; margin-bottom: 36px; background: var(--sel-line); }
.step-progress span { display: block; width: 33.333%; height: 2px; background: var(--sel-yellow); }
.promotor-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 22px; }
.promotor-form label { display: grid; gap: 8px; color: var(--sel-muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.promotor-form input, .promotor-form select, .promotor-form textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #C9C9C2; outline: 0; background-color: transparent; color: var(--sel-graphite); font-size: 17px; }
/* Precisa vir depois do shorthand acima, senao o padding volta a zero. */
.promotor-form select { padding-right: 28px; }
.promotor-form input:focus, .promotor-form select:focus, .promotor-form textarea:focus { border-bottom-color: var(--sel-yellow); }
.promotor-form input::placeholder, .promotor-form textarea::placeholder { color: #A0A09A; }
.form-actions { display: flex; gap: 12px; margin-top: 32px; }
.form-actions .site-button { padding: 16px 30px; }
.form-actions .site-button-secondary { border: 1px solid var(--sel-graphite); background: transparent; color: var(--sel-graphite); }
.form-actions .site-button-secondary:hover { background: var(--sel-graphite); color: var(--sel-white); }
.file-summary { display: grid; gap: 16px; }
.file-box { padding: 24px; border: 1px dashed #C9C9C2; }
.file-box strong { display: block; color: var(--sel-black); font-family: var(--sel-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.file-box span { color: var(--sel-muted); font-size: 14px; }
.consent-note { display: flex !important; grid-template-columns: auto 1fr; gap: 12px !important; align-items: flex-start; color: var(--sel-copy) !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.55; text-transform: none !important; }
.consent-note input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--sel-yellow); }
.consent-note a { color: var(--sel-graphite); text-decoration: underline; }
.visual-only-note { margin: 20px 0 0; color: var(--sel-muted); font-size: 13px; line-height: 1.5; }

.contact-section { padding-top: clamp(48px,7vw,110px); padding-bottom: clamp(48px,7vw,110px); }
/* Pagina de contato em fundo branco: o formulario herda estilos pensados para
   fundo escuro (rotulo e borda em branco translucido), entao todo o contraste
   precisa ser refeito aqui. */
.contact-section .contact-title { color: var(--sel-black); }
.contact-section .contact-title span { color: var(--sel-yellow); }
.contact-copy > p { max-width: 40ch; margin: 0 0 32px; color: var(--sel-copy); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.contact-details { border-top: 1px solid var(--sel-line); }
.contact-details a { display: block; padding: 22px 0; border-bottom: 1px solid var(--sel-line); }
.contact-details a:hover strong { color: #7A6B00; }
.contact-details span { display: block; color: var(--sel-copy); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.contact-details strong { display: block; margin-top: 8px; color: var(--sel-graphite); font-family: var(--sel-display); font-size: clamp(17px,1.8vw,26px); letter-spacing: .02em; overflow-wrap: anywhere; transition: color .25s ease; }
.contact-details a:first-child strong { font-size: clamp(20px,2.2vw,30px); }
.contact-note { margin: clamp(32px,4vw,56px) 0 0; color: var(--sel-copy); font-size: 15px; }
.contact-note a { color: #7A6B00; text-decoration: underline; }
.contact-section .visual-form label { color: var(--sel-copy); }
.contact-section .visual-form input, .contact-section .visual-form select, .contact-section .visual-form textarea { border-bottom-color: #C9C9C2; color: var(--sel-graphite); }
.contact-section .visual-form input:focus, .contact-section .visual-form select:focus, .contact-section .visual-form textarea:focus { border-bottom-color: var(--sel-graphite); }
.contact-section .visual-form input::placeholder, .contact-section .visual-form textarea::placeholder { color: #A0A09A; }
.contact-section .visual-form .site-button { background: var(--sel-yellow); color: var(--sel-graphite); }
.contact-section .visual-form .site-button:hover { background: var(--sel-graphite); color: var(--sel-white); }
.contact-section .field-error, .contact-section .form-status { color: #7A6B00; }

.site-footer { background: var(--sel-white); color: var(--sel-graphite); padding-top: clamp(40px,5vw,80px); padding-bottom: 28px; font-size: 14px; line-height: 1.6; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 36px; }
.footer-brand { margin-bottom: 16px; }
.footer-brand .site-brand-icon { width: 36px; height: 36px; margin: -6px -4px -6px -7px; }
.footer-brand .site-brand-name { color: var(--sel-black); }
/* Escala do rodape: rotulo 11px caixa alta, texto 14px, e so isso. */
.footer-label { margin: 0 0 4px; color: var(--sel-muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.footer-summary { max-width: 32ch; margin: 0; color: var(--sel-muted); font-size: 14px; line-height: 1.6; }
.footer-legal { max-width: 34ch; margin: 16px 0 0; color: var(--sel-muted); font-size: 14px; line-height: 1.6; }
.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links a, .footer-contact-line a { display: inline-block; color: var(--sel-graphite); font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.6; text-transform: none; transform-origin: left center; transition: color .18s ease, transform .22s cubic-bezier(.34,1.2,.64,1); }
.footer-links a:hover, .footer-contact-line a:hover, .footer-links a:focus-visible, .footer-contact-line a:focus-visible { color: #7A6B00; transform: scale(1.09); }
/* Rotulo em cima, valor embaixo: cada contato ocupa duas linhas. */
.footer-contact-line { display: flex; flex-direction: column; gap: 2px; margin: 0; align-items: flex-start; }
.footer-contact-line > span { color: var(--sel-muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.footer-contact .footer-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: 4px; margin-left: -7px; color: var(--sel-graphite); }
.footer-contact .footer-social-link:hover { color: #7A6B00; }
.footer-social-icon { width: 20px; height: 20px; }
.footer-bottom { display: flex; justify-content: center; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--sel-line); color: var(--sel-muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

@keyframes selMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes selScrollUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes selScrollDown { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
@keyframes selCue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: 1; } }

@media (max-width: 820px) {
  .site-header-inner { position: relative; align-items: center; padding-top: 14px; padding-bottom: 14px; }
  .site-menu-toggle { display: inline-flex; flex: 0 0 42px; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--sel-gut) 18px; border-top: 1px solid var(--sel-line); background: var(--sel-white); box-shadow: 0 16px 30px rgba(0,0,0,.2); }
  .site-nav.is-open { display: flex; }
  .site-nav-link { display: block; width: 100%; padding: 15px 0; border-bottom: 1px solid var(--sel-line); color: var(--sel-graphite); font-size: 11px; }
  .site-nav-link.is-active { color: var(--sel-yellow); }
  .site-nav > .site-nav-link-contact { display: block !important; }
  .site-nav-link:hover, .site-nav-link:focus-visible { transform: none; }
  .site-nav .site-button-small { display: none; }
  .home-hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; min-height: 40vw; margin-top: 40px; order: 2; }
  .home-hero-copy { max-width: 100%; }
  .home-hero { display: flex; }
  .hero-column-track { animation: none; }
  .home-hero-cue { order: 3; }
  .about-grid, .difference-grid, .coverage-grid, .landing-split, .form-layout, .alimentos-hero, .landing-hero--with-image { grid-template-columns: 1fr; }
  .alimentos-hero-image, .landing-hero-image { min-height: 60vw; }
  .coverage-map { order: 2; margin-top: 8px; }
  .coverage-map svg { width: min(100%, 400px); }
  .service-row { align-items: flex-start; flex-wrap: wrap; }
  .service-row h3 { flex-basis: calc(100% - 60px); }
  .service-row p { width: 100%; margin-left: 60px; }
  .process-row { flex-wrap: wrap; }
  .process-row h3 { flex-basis: calc(100% - 60px); }
  .process-row p { width: 100%; margin-left: 60px; }
  .mobile-whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 24px; background: var(--sel-yellow); color: var(--sel-graphite); font-family: var(--sel-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
}

@media (max-width: 520px) {
  .site-header-inner { display: block; }
  .site-brand { margin-bottom: 14px; }
  .site-nav { justify-content: flex-start; }
  .site-button-small { margin-top: 4px; }
  .home-hero-media { min-height: 70vw; gap: 8px; }
  .hero-column-track { gap: 8px; }
  .hero-slot { border-radius: 8px; }
  .button-row .site-button { width: 100%; }
  .solution-grid { grid-template-columns: 1fr; }
  .service-row p, .process-row p { margin-left: 0; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 8px; }
}

@media (max-width: 700px) {
  .agencias-challenge-grid { grid-template-columns: 1fr; }
  .agencias-form-section .visual-form { grid-template-columns: 1fr; }
  .agencias-form-section .agencias-form-briefing, .agencias-form-section .form-status, .agencias-form-section .site-button { grid-column: auto; }
  .agencias-form-section .field-date-range { grid-column: auto; }
  .alimentos-form-section .visual-form { grid-template-columns: 1fr; }
  .alimentos-form-section .visual-form .field-wide, .alimentos-form-section .visual-form .form-status, .alimentos-form-section .visual-form .site-button { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}