/* Estilos base e componentes. Toda cor e medida vem de tokens.css. */

/* ===== Fontes =====
   Arquivos .otf trial em assets/fonts/ (ver DESIGN.md §2 e §10 sobre o risco
   de licença), usados em --font-display/--font-body/--font-ui. Os pesos
   medium/heavy/bold usam Montserrat (Google Fonts, ver index.html). */

@font-face {
  font-family: 'DrukWideTrial-Bold';
  src: url('../assets/fonts/DrukWide-Bold-Trial.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DrukTextTrial-Medium';
  src: url('../assets/fonts/DrukText-Medium-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DrukTrial-Medium';
  src: url('../assets/fonts/Druk-Medium-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DrukTextWideTrial-Bold';
  src: url('../assets/fonts/DrukTextWide-Bold-Trial.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Reset ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: url('../assets/img/noise.webp') center top;
  font-size: var(--fs-body);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* ===== Tipografia base ===== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  font-weight: 700;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  max-width: 70ch;
}

/* ===== Foco de teclado ===== */
/* Nunca remova o outline sem substituir — piso de qualidade do CLAUDE.md.
   Anel duplo (escuro + claro) para ficar visível sobre qualquer cor de fundo
   do site (preto, amarelo, verde, vermelho). */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-text);
  border-radius: var(--radius-sm);
}

/* ===== Container ===== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-padding-desktop);
  }
}

/* ===== Utilitários mínimos ===== */

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-sm);
  transition: top var(--duration) var(--ease);
}

.skip-link:focus {
  top: var(--space-2);
}

/* ===== Movimento ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Texto utilitário ===== */

.text-yellow {
  color: var(--color-yellow-text);
}

.highlight {
  background-color: var(--color-red-highlight);
  color: var(--color-text);
  padding-inline: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ===== Botões ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-bold);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-text);
  transition: filter var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.btn:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}

.btn:active {
  filter: brightness(0.8);
  box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px var(--color-text);
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn--green {
  background-color: var(--color-green-cta);
  color: var(--color-text);
}

.btn--yellow {
  background-color: var(--color-yellow);
  color: var(--color-red-text-1);
}

.btn--red-imprensa {
  background-color: var(--color-red-imprensa);
  color: var(--color-text);
}

.btn--icon {
  text-align: left;
  line-height: 1.2;
}

.btn__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ===== Hero ===== */

.hero {
  position: relative;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 65%, #000 100%),
    url('../assets/img/lula-topo-bg.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding-block: var(--space-16) var(--space-8);
}

.hero__inner {
  position: relative;
  text-align: center;
}

/* Título do Hero: o <h1> real fica sr-only (SEO/leitor de tela); o que
   aparece na tela são as 2 imagens (arte do título + recorte da foto),
   ver DESIGN.md §10. */

.hero__title-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-4);
  margin: 0 auto var(--space-6);
  max-width: 60ch;
}

@media (min-width: 768px) {
  .hero__title-grid {
    grid-template-columns: 2fr 2fr;
    gap: var(--space-6);
  }
}

.hero__title-col {
  display: flex;
  justify-content: center;
}

.hero__title-col img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
}

@media (min-width: 768px) {
  .hero__title-col img {
    max-height: 420px;
  }
}

.hero__subtitle {
  font-family: var(--font-heavy);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.2em;
}

.hero__subtitle .text-yellow {
  text-transform: uppercase;
  font-family: var(--font-heavy);
  font-weight: 900;
}

.hero__when {
  display: inline-block;
  background-color: var(--color-red-highlight);
  color: var(--color-text);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--fs-h3);
  padding: 4px var(--space-3);
  margin-bottom: var(--space-3);
}

.hero__place {
  font-family: var(--font-heavy);
  text-transform: uppercase;
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin: auto;
}

.hero__city {
  font-family: var(--font-heavy);
  text-transform: uppercase;
  font-size: var(--fs-small);
  color: var(--color-text);
  margin: 0 auto var(--space-4);
  font-weight: 900;
}

/* ===== Download ===== */

.download {
  background-color: var(--color-red-highlight);
  padding-block: var(--space-8);
}

.download__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.download__text {
  max-width: 70ch;
  font-family: var(--font-bold);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ===== Voluntário ===== */

.volunteer {
  background-image: url('../assets/img/noise.webp');
  background-color: var(--color-bg);
  padding-block: var(--space-8);
}

.volunteer__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.volunteer__heading {
  max-width: 18ch;
  text-transform: uppercase;
}

.volunteer__text {
  max-width: 65ch;
  color: var(--color-text);
}

/* ===== Imprensa ===== */

.press {
  border-block: 3px solid var(--color-yellow);
  padding-block: var(--space-4);
  margin-bottom: var(--space-2);
  background-image: url('../assets/img/noise.webp');
}

.press__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.press__heading {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  line-height: 1.15;
  text-align: right;
}

/* ===== Vídeos ===== */

.video-band {
  position: relative;
  background-image: url('../assets/img/lula-povo.webp');
  background-size: contain;
  background-position: top center;
  padding: 300px 0 var(--space-8);
  background-repeat: no-repeat;
}

.video-band--solid {
  padding: var(--space-8) var(--space-8) var(--space-4);
}

@media (max-width: 640px) {
  .video-band {
    padding: 96px 0 var(--space-8);
  }

  .video-band--solid {
    padding: var(--space-8) 0 var(--space-4);
  }
}

.video-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border: 6px solid var(--color-red-highlight);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.star-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: -79px auto var(--space-8);;
  position: relative;
  z-index: 1;
}

/* ===== Group 4: legado da Vila Euclides ===== */

.legacy {
  background-color: var(--color-yellow);
  padding-block: var(--space-8);
}

.legacy__inner {
  text-align: center;
}

.legacy__heading {
  text-transform: uppercase;
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  font-family: var(--font-heavy);
  font-weight: 900;
  font-size: var(--fs-h2);
}

.legacy__heading-white {
  display: block;
  color: var(--color-text);
}

.legacy__heading-red {
  display: block;
  color: var(--color-red-text-2);
}

.legacy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 70ch;
  margin-inline: auto;
  color: var(--color-text-inverse);
}

/* ===== Não vai conseguir / ao vivo ===== */

.live {
  padding: var(--space-4) 0 var(--space-8);
}

.live__inner {
  text-align: center;
}

.live__heading {
  text-transform: uppercase;
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-family: var(--font-heavy);
  font-weight: 900;
}

.live__heading-white {
  display: block;
  color: var(--color-text);
}

.live__heading-yellow {
  display: block;
  color: var(--color-yellow-text);
}

.live__text {
  max-width: 55ch;
  margin-inline: auto;
  color: var(--color-text);
}

/* ===== Rodapé ===== */

.site-footer {
  background-color: var(--color-red-highlight);
  padding-block: var(--space-3);
  text-align: center;
}

.site-footer p {
  color: var(--color-text);
  font-size: var(--fs-small);
}

/* ===== Animação de entrada por scroll =====
   Estado oculto só existe com JS confirmado rodando (classe .js no <html>,
   ver index.html) — sem JS, tudo fica visível por padrão. */

.js .hero,
.js .download,
.js .volunteer,
.js .press,
.js .video-band,
.js .legacy,
.js .live {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.js .hero.is-visible,
.js .download.is-visible,
.js .volunteer.is-visible,
.js .press.is-visible,
.js .video-band.is-visible,
.js .legacy.is-visible,
.js .live.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Lightbox / modal ===== */

dialog.modal {
  border: 0;
  padding: var(--space-4);
  width: 100%;
  max-width: min(560px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  background-color: #FFFFFF;
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  margin: auto;
}

dialog.modal.is-open {
  opacity: 1;
  transform: scale(1);
}

dialog.modal::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--duration) var(--ease);
}

dialog.modal.is-open::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.modal__form,
.modal__body {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
}

.modal__close svg {
  width: 24px;
  height: 24px;
}

.modal__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-modal-title);
  line-height: var(--lh-heading);
  text-align: center;
  padding-inline: var(--space-6);
  margin-bottom: var(--space-2);
}

.modal__context {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.modal__context:empty {
  display: none;
}

.modal__status {
  min-height: 1.5em;
  font-weight: 700;
}

.modal__status:not(:empty) {
  margin-bottom: var(--space-2);
}

.modal__close-footer {
  margin-top: var(--space-2);
  align-self: center;
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
}

/* ===== Materiais do kit (dentro do #modal-materials) =====
   Pedido do cliente: nada de "card" (caixa/borda/sombra) — só ícone + texto,
   como uma lista de botões simples. */

.materials-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

@media (min-width: 480px) {
  .materials-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.materials-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
  border: var(--border-width) solid var(--color-red-highlight);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--fs-materials-link);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}

.materials-list__link:hover {
  background-color: var(--color-border);
}

.materials-list__link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.materials-list__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-red-highlight);
  flex-shrink: 0;
}

.modal__submit {
  margin-top: var(--space-2);
  position: relative;
}

.btn__spinner {
  display: none;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

.modal__submit.is-loading .btn__spinner {
  display: block;
}

.modal__submit.is-loading .btn__label {
  opacity: 0.7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== Campos de formulário ===== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.field label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-form-label);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.field input,
.field textarea {
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text-inverse);
  background-color: #FFFFFF;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: left;
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(130, 197, 0, 0.4);
  border-color: var(--color-green-cta);
}

.field__error {
  display: none;
  color: var(--color-danger);
  font-size: var(--fs-small);
}

.field--invalid input,
.field--invalid textarea {
  border-color: var(--color-danger);
}

.field--invalid .field__error {
  display: block;
}

/* Orientações de credenciamento (modal de imprensa) — texto informativo
   fornecido pelo responsável do projeto, sem campo de formulário. */
.press-guidelines {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
  font-size: 0.65em;
}

.press-guidelines__heading {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 1.15em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.press-guidelines__heading:first-child {
  margin-top: 0;
}

.press-guidelines__subheading {
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: 1em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.press-guidelines__list {
  list-style: disc;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
  color: var(--color-text-inverse);
}

.press-guidelines__list li {
  margin-bottom: var(--space-1);
}

.press-guidelines__list li::marker {
  color: var(--color-red-highlight);
}

.press-guidelines__list ul {
  list-style: circle;
  margin: var(--space-1) 0 0;
  padding-left: var(--space-3);
}

.press-guidelines__list ul ul {
  list-style: square;
}