/* ==========================================================================
   Bolsão Americano 2027 — Landing page de inscrição
   Todas as medidas vêm do design original. "--u" = 1px do arquivo de design:
   - computador: LANDING.png (3124px de largura)
   - celular:    smart.png   (1688px de largura)
   Assim a página escala proporcionalmente e mantém as mesmas proporções.
   ========================================================================== */

:root {
  --roxo: #6800B3;
  --roxo-hero: #6E00BE;
  --roxo-escuro: #2E0047;
  --amarelo: #FFCC29;
  --branco: #FFFFFF;
  --erro: #C4002B;
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-info: "Catamaran", "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--roxo); color: var(--roxo-escuro); font-family: var(--fonte); font-weight: 500; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; box-shadow: 0 0 0 6px var(--roxo-escuro); border-radius: 4px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--branco); color: var(--roxo); font-weight: 800; border-radius: 8px; }
.skip-link:focus { top: 8px; }

/* -------- Escala ---------------------------------------------------------- */
.page { container-type: inline-size; overflow: hidden; }
/* celular (padrão) */
.page { --u: calc(min(100cqw, 600px) / 1688); }
@media (min-width: 900px) {
  .page { --u: calc(min(100cqw, 1920px) / 3124); }
}
.stage { position: relative; width: calc(1688 * var(--u)); margin-inline: auto; }
@media (min-width: 900px) { .stage { width: calc(3124 * var(--u)); } }

/* -------- Componentes reutilizados ---------------------------------------- */
.btn-cta {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--amarelo); color: var(--roxo);
  border: calc(10 * var(--u)) solid var(--roxo-escuro); border-radius: calc(26 * var(--u));
  font-weight: 800; text-decoration: none; line-height: 1.1;
  transition: transform .15s ease, filter .15s ease;
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.04); }

.tag-escura {
  display: flex; align-items: center; justify-content: center;
  background: var(--roxo-escuro); color: var(--branco);
  border: calc(7 * var(--u)) solid var(--roxo); border-radius: calc(18 * var(--u));
  font-weight: 800; letter-spacing: .01em; line-height: 1;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1688 1966' preserveAspectRatio='none'%3E%3Crect width='1688' height='1966' fill='%23FFCC29'/%3E%3Cpath d='M0 551 Q844 1010 1688 675 V1966 H0Z' fill='%232E0047'/%3E%3Cpath d='M0 784 Q760 1130 1688 675 V1966 H0Z' fill='%236E00BE'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.hero__stage { height: calc(1966 * var(--u)); }
.hero__alunos { position: absolute; left: calc(348 * var(--u)); top: calc(64 * var(--u)); width: calc(990 * var(--u)); }
.hero__titulo { position: absolute; left: calc(242 * var(--u)); top: calc(736 * var(--u)); width: calc(1204 * var(--u)); }
.hero__cta {
  position: absolute; z-index: 2; left: calc(272 * var(--u)); top: calc(1888 * var(--u));
  width: calc(1148 * var(--u)); height: calc(162 * var(--u)); min-height: 40px;
  font-size: max(calc(62.8 * var(--u)), 14px);
}

@media (min-width: 900px) {
  .hero { background: var(--roxo-hero) url("../assets/img/hero-bg-1920.webp") left center / cover no-repeat; }
  .hero__stage { height: calc(1497 * var(--u)); }
  .hero__alunos { left: calc(412 * var(--u)); top: calc(128 * var(--u)); width: calc(1026 * var(--u)); }
  .hero__titulo { left: calc(1532 * var(--u)); top: calc(200 * var(--u)); width: calc(1249 * var(--u)); }
  .hero__cta { left: calc(336 * var(--u)); top: calc(1164 * var(--u)); width: calc(1148 * var(--u)); height: calc(160 * var(--u)); min-height: 0; font-size: calc(62.5 * var(--u)); }
}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.inscricao {
  background: var(--amarelo) url("../assets/img/ondas-amarelas-1024.webp") center top / cover no-repeat;
  scroll-margin-top: 0;
}
.inscricao__stage { padding: calc(154 * var(--u)) 0 calc(90 * var(--u)); min-height: calc(1027 * var(--u)); }
.inscricao__titulo { width: calc(979 * var(--u)); margin: 0 auto calc(4 * var(--u)); }

.form, .sucesso { width: calc(1367 * var(--u)); margin-inline: auto; }
.campo { position: relative; display: flex; flex-direction: column; padding-bottom: max(calc(29 * var(--u)), 18px); }
.campo label { font-size: max(calc(29.3 * var(--u)), 12px); font-weight: 600; line-height: 1.25; margin: 0 0 max(calc(11 * var(--u)), 4px) calc(6 * var(--u)); color: var(--roxo-escuro); }
.campo input, .campo select {
  width: 100%; height: max(calc(78 * var(--u)), 40px);
  border: 2px solid transparent; border-radius: max(calc(16 * var(--u)), 6px);
  background: var(--branco); color: var(--roxo-escuro);
  font: 500 16px/1.2 var(--fonte); padding: 0 max(calc(24 * var(--u)), 10px);
  appearance: none; -webkit-appearance: none;
}
.campo input::placeholder { color: #9b8aa8; opacity: 1; }
.campo select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236800B3' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right max(calc(28 * var(--u)), 12px) center; background-size: max(calc(30 * var(--u)), 12px) auto; padding-right: 36px; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(104, 0, 179, .25); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--erro); }

.erro {
  margin: 5px 0 0 calc(6 * var(--u));
  font-size: max(calc(26 * var(--u)), 12px); font-weight: 700; line-height: 1.15; color: var(--erro);
}
.erro:empty { display: none; }
.erro::before { content: "⚠ "; }

.linha { display: grid; }
.linha--dupla { grid-template-columns: 1fr 1fr; column-gap: calc(103 * var(--u)); }
.linha--serie { grid-template-columns: calc(960 * var(--u)) 1fr; column-gap: calc(106 * var(--u)); align-items: start; }

.btn-enviar {
  position: relative; align-self: start; justify-self: end;
  margin-top: calc(max(calc(29.3 * var(--u)), 12px) * 1.25 + max(calc(11 * var(--u)), 4px));
  width: calc(299 * var(--u)); min-width: 96px; height: max(calc(78 * var(--u)), 40px);
  border: 0; border-radius: max(calc(16 * var(--u)), 6px);
  background: var(--roxo); color: var(--branco);
  font: 800 max(calc(45.8 * var(--u)), 15px)/1 var(--fonte); letter-spacing: .02em; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.btn-enviar:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.btn-enviar:focus-visible { outline: 3px solid var(--roxo-escuro); outline-offset: 3px; box-shadow: none; }
.btn-enviar:disabled { cursor: progress; filter: saturate(.7) brightness(1.1); }
.btn-enviar__carregando { display: none; align-items: center; justify-content: center; gap: 8px; font-size: .72em; }
.btn-enviar.is-loading .btn-enviar__texto { display: none; }
.btn-enviar.is-loading .btn-enviar__carregando { display: inline-flex; }
.spinner { width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.consentimento { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; padding-bottom: 14px; margin-top: 4px; }
.consentimento input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--roxo); cursor: pointer; }
.consentimento label { font-size: max(calc(26 * var(--u)), 13px); font-weight: 500; line-height: 1.4; color: var(--roxo-escuro); cursor: pointer; }
.consentimento label a { color: var(--roxo); font-weight: 700; }
.consentimento .erro { grid-column: 2; margin-left: 0; }

/* .link-pendente marca no código os links que ainda precisam ser trocados (ver README) */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: 10px; margin-top: 4px;
  background: var(--branco); border-left: 6px solid var(--erro);
  font-size: max(calc(28 * var(--u)), 14px); line-height: 1.4; font-weight: 600; color: var(--roxo-escuro);
}
.status[hidden] { display: none; }

.sucesso {
  background: var(--branco); border-radius: calc(60 * var(--u)); text-align: center;
  border: max(calc(10 * var(--u)), 4px) solid var(--roxo);
  padding: max(calc(70 * var(--u)), 24px) max(calc(60 * var(--u)), 18px);
}
.sucesso:focus { outline: none; }
.sucesso__titulo {
  display: inline-block; background: var(--amarelo); color: var(--roxo-escuro);
  border: max(calc(6 * var(--u)), 2px) solid var(--roxo); border-radius: max(calc(12 * var(--u)), 6px);
  padding: .35em .9em; margin-bottom: 1em;
  font-size: max(calc(50 * var(--u)), 17px); font-weight: 800; letter-spacing: .02em;
}
.sucesso__texto { font-size: max(calc(40 * var(--u)), 15px); line-height: 1.45; }
.sucesso__texto + .sucesso__texto { margin-top: .8em; }

@media (min-width: 900px) {
  .inscricao { background-image: url("../assets/img/ondas-amarelas-1920.webp"); }
  .inscricao__stage { padding: calc(146 * var(--u)) 0 calc(40 * var(--u)); min-height: calc(1497 * var(--u)); }
  .inscricao__titulo { width: calc(1480 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .form, .sucesso { width: calc(2004 * var(--u)); }
  .campo { padding-bottom: calc(39 * var(--u)); }
  .form > .campo:first-child { padding-bottom: calc(45 * var(--u)); }
  .campo label { font-size: calc(43 * var(--u)); line-height: calc(55 * var(--u)); margin: 0 0 calc(14 * var(--u)) calc(9 * var(--u)); }
  .campo input, .campo select { height: calc(114 * var(--u)); border-radius: calc(22 * var(--u)); font-size: max(calc(40 * var(--u)), 15px); padding: 0 calc(34 * var(--u)); }
  .erro { font-size: max(calc(30 * var(--u)), 12px); }
  .linha--dupla { column-gap: calc(152 * var(--u)); }
  .linha--serie { grid-template-columns: calc(1404 * var(--u)) 1fr; column-gap: 0; }
  .btn-enviar { margin-top: calc(67 * var(--u)); width: calc(440 * var(--u)); height: calc(116 * var(--u)); border-radius: calc(22 * var(--u)); font-size: calc(67 * var(--u)); min-width: 0; }
  .consentimento label { font-size: max(calc(34 * var(--u)), 13px); }
  .consentimento input { width: max(calc(40 * var(--u)), 18px); height: max(calc(40 * var(--u)), 18px); }
  .status { font-size: max(calc(34 * var(--u)), 14px); }
}

/* ==========================================================================
   PROVAS + CARDS + POR QUE
   ========================================================================== */
.info { display: flow-root; background: var(--roxo) url("../assets/img/textura-roxa-1024.webp") center top / 100% auto repeat-y; }
.info__stage { padding-bottom: 1px; }

.provas { display: grid; grid-template-columns: repeat(2, calc(769 * var(--u))); justify-content: center; margin-top: calc(-47 * var(--u)); position: relative; z-index: 1; }
.prova { display: flex; flex-direction: column; align-items: center; }
.prova__tag { width: calc(624 * var(--u)); height: calc(95 * var(--u)); font-size: max(calc(45.3 * var(--u)), 11px); border-width: calc(6 * var(--u)); border-radius: calc(14 * var(--u)); }
.prova__data { width: calc(622 * var(--u)); margin-top: calc(31 * var(--u)); }

.cards { display: grid; justify-content: center; grid-template-columns: calc(901 * var(--u)); row-gap: calc(126 * var(--u)); margin-top: calc(174 * var(--u)); }
.card { position: relative; padding-top: calc(85 * var(--u)); display: flex; flex-direction: column; }
.card__tag {
  position: absolute; z-index: 1; top: calc(8.6 * var(--u)); left: 50%; transform: translateX(-50%);
  width: calc(690 * var(--u)); height: calc(103 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: var(--amarelo); color: var(--roxo-escuro);
  border: calc(7 * var(--u)) solid var(--roxo); border-radius: calc(12 * var(--u));
  font-size: max(calc(54.4 * var(--u)), 12px); font-weight: 800; line-height: 1;
}
.card__corpo {
  background: var(--branco); border-radius: calc(92 * var(--u));
  padding: calc(154 * var(--u)) calc(20 * var(--u)) calc(110 * var(--u));
  text-align: center; font-size: max(calc(45.5 * var(--u)), 11px); line-height: 1.36; font-weight: 500; color: var(--roxo-escuro);
  flex: none; min-height: calc(1271 * var(--u));
}
.card__corpo p + p { margin-top: 1.36em; }
.card__corpo strong { font-weight: 800; }
.card--datas .card__corpo { padding-bottom: calc(330 * var(--u)); }
.card__cta {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(71 * var(--u));
  width: calc(719 * var(--u)); height: calc(197 * var(--u));
  font-size: max(calc(57.7 * var(--u)), 13px); line-height: 1.2;
}
.card__cta:hover { transform: translateX(-50%) translateY(-2px); }

.porque { margin-top: calc(170 * var(--u)); text-align: center; color: var(--branco); }
.porque__tag { display: flex; justify-content: center; }
.porque__tag span {
  display: flex; align-items: center; justify-content: center;
  width: calc(1304 * var(--u)); height: calc(98 * var(--u));
  background: var(--amarelo); color: var(--roxo-escuro); border-radius: calc(12 * var(--u));
  font-size: max(calc(59 * var(--u)), 12px); font-weight: 800; line-height: 1;
}
.porque__destaque { width: calc(1450 * var(--u)); margin: calc(27 * var(--u)) auto 0; font-size: max(calc(51.2 * var(--u)), 12px); font-weight: 800; line-height: 1.35; }
.porque__texto { width: calc(1450 * var(--u)); margin: calc(4 * var(--u)) auto 0; font-size: max(calc(42.6 * var(--u)), 11px); font-weight: 500; line-height: 1.36; }

.fotos { position: relative; display: grid; justify-content: center; grid-template-columns: calc(1253 * var(--u)); row-gap: calc(129 * var(--u)); margin-top: calc(74 * var(--u)); }
/* no celular o fundo amarelo começa no meio da 1ª foto, como no design */
.fotos::before { content: ""; position: absolute; z-index: -1; top: calc(443 * var(--u)); bottom: calc(-3000 * var(--u)); left: 50%; width: 100vw; transform: translateX(-50%); background: var(--amarelo) url("../assets/img/ondas-amarelas-1024.webp") center top / 100% auto; }
.info__stage { isolation: isolate; }
.info { clip-path: inset(-1000px 0 0 0); }
.foto { background: var(--roxo-escuro); border-radius: calc(66 * var(--u)); padding: calc(34 * var(--u)) calc(42 * var(--u)) calc(73 * var(--u)); }
.foto img { width: 100%; border-radius: calc(44 * var(--u)); aspect-ratio: 1096 / 732; object-fit: cover; }
.foto figcaption { margin: calc(64 * var(--u)) calc(10 * var(--u)) 0; text-align: center; color: var(--branco); font-size: max(calc(45.6 * var(--u)), 11px); line-height: 1.34; font-weight: 500; }
.foto figcaption strong { color: var(--amarelo); font-weight: 800; }

.unidades__tag {
  position: relative; z-index: 2; margin: calc(110 * var(--u)) auto 0;
  width: calc(886 * var(--u)); height: calc(137 * var(--u)); font-size: max(calc(64.7 * var(--u)), 14px);
}

@media (min-width: 900px) {
  .info { background-image: url("../assets/img/textura-roxa-1920.webp"); background-size: 100% auto; }
  .provas { grid-template-columns: repeat(2, calc(1200 * var(--u))); margin-top: calc(-75 * var(--u)); }
  .prova__tag { width: calc(960 * var(--u)); height: calc(144 * var(--u)); font-size: calc(71 * var(--u)); border-width: calc(7 * var(--u)); border-radius: calc(18 * var(--u)); }
  .prova__data { width: calc(962 * var(--u)); margin-top: calc(47 * var(--u)); }

  .cards { grid-template-columns: repeat(3, calc(836 * var(--u))); column-gap: calc(56 * var(--u)); margin-top: calc(126 * var(--u)); }
  .card { padding-top: calc(79 * var(--u)); }
  .card__tag { top: calc(8 * var(--u)); width: calc(640 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(50.6 * var(--u)); border-width: calc(6 * var(--u)); }
  .card__corpo { flex: none; border-radius: calc(85 * var(--u)); min-height: 0; height: calc(1179 * var(--u)); padding: calc(143 * var(--u)) calc(30 * var(--u)) 0; font-size: calc(42.2 * var(--u)); line-height: 1.36; }
  .card__corpo p + p { margin-top: 1.36em; }
  .card--datas .card__corpo { padding-bottom: 0; }
  .card__cta { bottom: calc(66 * var(--u)); width: calc(667 * var(--u)); height: calc(183 * var(--u)); font-size: calc(53.5 * var(--u)); line-height: 1.2; }

  .porque { margin-top: calc(162 * var(--u)); }
  .porque__tag { position: relative; }
  .porque__tag::before { content: ""; position: absolute; left: calc(258 * var(--u)); right: calc(258 * var(--u)); top: 50%; height: calc(6 * var(--u)); transform: translateY(-50%); background: var(--amarelo); }
  .porque__tag span { position: relative; width: calc(1112 * var(--u)); height: calc(81 * var(--u)); font-size: calc(50.5 * var(--u)); border-radius: calc(10 * var(--u)); }
  .porque__destaque { width: calc(2300 * var(--u)); margin-top: calc(35 * var(--u)); font-size: calc(51 * var(--u)); line-height: 1.35; }
  .porque__texto { width: calc(2300 * var(--u)); margin-top: 0; font-size: calc(42.4 * var(--u)); line-height: 1.34; }

  .fotos::before { content: none; }
  .info { clip-path: none; }
  .fotos { grid-template-columns: repeat(2, calc(1172 * var(--u))); column-gap: calc(144 * var(--u)); margin-top: calc(49 * var(--u)); }
  .foto { border-radius: calc(62 * var(--u)); padding: calc(33 * var(--u)) calc(37 * var(--u)) 0; height: calc(1064 * var(--u)); }
  .foto img { border-radius: calc(40 * var(--u)); }
  .foto figcaption { margin: calc(58 * var(--u)) calc(60 * var(--u)) 0; font-size: calc(42.7 * var(--u)); line-height: 1.35; }

  .unidades__tag { margin: calc(220 * var(--u)) auto calc(-78 * var(--u)); width: calc(972 * var(--u)); height: calc(152 * var(--u)); font-size: calc(71 * var(--u)); }
}

/* ==========================================================================
   UNIDADES
   ========================================================================== */
.unidades { background: var(--amarelo); }
.unidades__stage { padding: calc(91 * var(--u)) 0 calc(218 * var(--u)); display: grid; row-gap: calc(78 * var(--u)); justify-content: center; }
.unidade { font-style: normal; text-align: center; color: var(--roxo-escuro); }
.unidade h3 { font-size: max(calc(55 * var(--u)), 13px); font-weight: 800; line-height: 1.25; }
.unidade p { font-family: var(--fonte-info); font-weight: 500; font-size: max(calc(56 * var(--u)), 13px); line-height: 1.18; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: .9em; }
.unidade p svg { display: inline-block; width: .82em; height: .82em; margin-right: .12em; flex: none; }
.unidade a { text-decoration: none; display: inline-flex; align-items: center; }
.unidade a:hover { text-decoration: underline; }
.unidade p:last-child { column-gap: .1em; }

@media (min-width: 900px) {
  .unidades { background: var(--amarelo) url("../assets/img/ondas-unidades-1920.webp") center top / 100% auto no-repeat; }
  .unidades__stage { grid-template-columns: repeat(2, calc(1334 * var(--u))); padding: calc(180 * var(--u)) 0 0; height: calc(508 * var(--u)); row-gap: 0; align-content: start; }
  .unidade h3 { font-size: calc(49 * var(--u)); line-height: calc(63 * var(--u)); }
  .unidade p { font-size: calc(50 * var(--u)); line-height: calc(58 * var(--u)); }
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { background: var(--roxo-escuro); }
.rodape__links { display: flex; justify-content: center; gap: calc(60 * var(--u)); padding: calc(115 * var(--u)) 0 calc(111 * var(--u)); }
.btn-branco {
  display: flex; align-items: center; justify-content: center;
  width: calc(456 * var(--u)); height: max(calc(100 * var(--u)), 32px);
  background: var(--branco); color: var(--roxo);
  border: max(calc(8 * var(--u)), 2px) solid var(--roxo); border-radius: calc(16 * var(--u));
  font-size: max(calc(41.3 * var(--u)), 11px); font-weight: 900; text-decoration: none; letter-spacing: .01em;
  transition: transform .15s ease;
}
.btn-branco:hover { transform: translateY(-2px); }
.rodape__nota { background: var(--roxo); color: var(--branco); text-align: center; font-size: max(calc(17.8 * var(--u)), 10px); font-weight: 600; line-height: 1.3; padding: calc(22 * var(--u)) 12px; }

@media (min-width: 900px) {
  .rodape__links { gap: calc(76 * var(--u)); padding: calc(118 * var(--u)) 0 calc(116 * var(--u)); }
  .btn-branco { width: calc(652 * var(--u)); height: calc(144 * var(--u)); border-width: calc(9 * var(--u)); border-radius: calc(22 * var(--u)); font-size: calc(59 * var(--u)); }
  .rodape__nota { font-size: max(calc(33 * var(--u)), 12px); padding: calc(44 * var(--u)) 0; }
}