/* =========================================================
   Gustavo Petta — Coragem para construir o futuro
   Identidade visual: navy + amarelo + vermelho + bordô
   ========================================================= */

/* ----- Fontes ----- */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Poppins-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Poppins-BlackItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Yellowtail';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Yellowtail-Regular.ttf') format('truetype');
}

/* ----- Variáveis ----- */
:root {
  --c-navy: #0E1B4F;
  --c-navy-deep: #060E2E;
  --c-blue: #1E3FBF;
  --c-blue-light: #7C8FE8;
  --c-yellow: #F7BB04;
  --c-yellow-bright: #FFD428;
  --c-red: #D90B34;
  --c-burgundy: #5D1126;
  --c-burgundy-deep: #3D0A19;
  --c-white: #FFFFFF;
  --c-cream: #FFF6E0;

  --f-display: 'Poppins', system-ui, sans-serif;
  --f-body: 'Poppins', system-ui, sans-serif;
  --f-script: 'Yellowtail', cursive;

  --maxw: 1080px;
  --maxw-narrow: 640px;
  --gutter: 1.25rem;

  --shadow-block: 0 24px 48px rgba(0,0,0,.18);
  --skew: -7deg;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg { display: block; max-width: 100%; }

body {
  font-family: var(--f-body);
  font-weight: 700;
  background: var(--c-navy);
  color: var(--c-white);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Skip link para acessibilidade */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-yellow);
  color: var(--c-navy);
  padding: 0.6rem 1rem;
  z-index: 999;
  font-weight: 900;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ----- Container ----- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

/* ----- Hero ----- */
.hero {
  background: var(--c-navy-deep);
  position: relative;
  padding: 0;
}
.hero picture {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
.hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 1280px) {
  .hero { padding: 1.5rem 2rem 0; }
}

/* ----- Blocks ----- */
.block { padding: 3.5rem 0; position: relative; overflow: hidden; }
.block--navy { background: var(--c-navy); color: var(--c-white); }
.block--yellow { background: var(--c-yellow); color: var(--c-burgundy); }
.block--burgundy { background: var(--c-burgundy); color: var(--c-white); }

/* Quando o form vem logo após a bio (ambos navy), encurta o gap */
.block--navy + .block--navy { padding-top: 0.5rem; }

/* Listras decorativas no estilo do panfleto */
.block--yellow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--c-red) 0 50%, var(--c-burgundy) 50% 100%);
}
.block--burgundy::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--c-yellow) 0 50%, var(--c-red) 50% 100%);
}

/* ----- Tipografia ----- */
.lead {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1.5rem;
}
.lead strong { color: var(--c-yellow); }
.lead .hl-yellow { color: var(--c-yellow-bright); }

.body {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.body strong { color: var(--c-yellow); }
.body--dark { color: var(--c-burgundy-deep); }
.body--dark strong { color: var(--c-red); }
.block--burgundy .body strong { color: var(--c-yellow); }

/* Grandes títulos chunky no estilo Petta */
.display {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
  font-size: clamp(2rem, 6vw, 3.75rem);
}
.display--center { text-align: center; }

.line { display: block; }
.line.italic { font-style: italic; }
.line--yellow { color: var(--c-yellow); }
.line--red { color: var(--c-red); }
.line--white { color: var(--c-white); }
.line--burgundy { color: var(--c-burgundy); }

/* Colunas (mobile-first: 1 col; desktop: 2 cols) */
.cols { display: grid; gap: 1.5rem; }

/* ----- Formulário ----- */
.block--form { padding: 4rem 0; }

.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  background: var(--c-burgundy);
  color: var(--c-yellow);
  padding: 1.1rem 2.4rem;
  margin: 0 auto 2.5rem;
  font-family: var(--f-display);
  font-style: italic;
  text-transform: uppercase;
  transform: skew(var(--skew));
  border: 4px solid var(--c-yellow);
  box-shadow: 6px 6px 0 var(--c-red);
  text-align: center;
}
.counter > * { transform: skew(calc(var(--skew) * -1)); }
.counter__number {
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.counter__label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  letter-spacing: 0.04em;
}

.block--form .display { margin-bottom: 1.5rem; }

.form {
  display: grid;
  gap: 1.1rem;
  background: var(--c-navy-deep);
  padding: 2rem;
  border: 3px solid var(--c-yellow);
  box-shadow: 8px 8px 0 var(--c-red);
}

.row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 480px) {
  .row { grid-template-columns: 1fr 100px; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--grow { flex: 1; }

.field label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-yellow);
}
.field input,
.field select {
  padding: 0.85rem 1rem;
  border: 2px solid var(--c-blue-light);
  border-radius: 2px;
  font: inherit;
  font-weight: 600;
  background: var(--c-white);
  color: var(--c-navy);
  width: 100%;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(217, 11, 52, 0.4);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: var(--c-red);
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
}
.field--check input { width: auto; margin-top: 0.2rem; flex-shrink: 0; }
.field--check span {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
}
.field--check a {
  color: var(--c-yellow);
  text-decoration: underline;
}

/* Honeypot anti-spam (escondido) */
.hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Feedback do CEP (mostra bairro/cidade após validar) */
.cep-feedback {
  display: block;
  min-height: 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.2rem;
}
.cep-feedback.loading { color: var(--c-blue-light); }
.cep-feedback.ok      { color: var(--c-yellow); }
.cep-feedback.error   { color: var(--c-red); }

/* ----- Botão ----- */
.btn {
  display: inline-block;
  padding: 1.1rem 2rem;
  font-family: var(--f-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  border: 3px solid var(--c-yellow);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
  letter-spacing: 0.02em;
  width: 100%;
}
.btn--primary {
  background: var(--c-red);
  color: var(--c-white);
  box-shadow: 5px 5px 0 var(--c-yellow);
}
.btn--primary:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--c-yellow);
}
.btn--primary:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--c-yellow);
}
.btn:disabled { opacity: 0.6; cursor: wait; }

/* ----- Mensagem do form ----- */
.form-msg {
  padding: 0;
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 1px;
}
.form-msg.success {
  padding: 1rem;
  background: var(--c-yellow);
  color: var(--c-burgundy);
  border-left: 6px solid var(--c-red);
}
.form-msg.error {
  padding: 1rem;
  background: var(--c-red);
  color: var(--c-white);
  border-left: 6px solid var(--c-yellow);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--c-burgundy-deep);
  color: var(--c-white);
  padding: 3rem 0 2rem;
  border-top: 8px solid var(--c-red);
}
.footer-cta {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.footer-cta em {
  color: var(--c-yellow);
  font-style: italic;
  background: var(--c-red);
  padding: 0 0.4em;
  margin: 0 0.1em;
  display: inline-block;
  transform: skew(var(--skew));
}
.footer-cta__alt { color: var(--c-yellow); font-style: italic; }

.social {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--c-burgundy-deep);
  transition: transform 0.15s, background 0.15s, color 0.15s;
  text-decoration: none;
}
.social a svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.social a:hover,
.social a:focus {
  background: var(--c-red);
  color: var(--c-white);
  transform: translateY(-3px);
  outline: none;
}
.social-handles {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 2.5rem;
  color: var(--c-yellow);
}
.social-handles__divider { margin: 0 0.6rem; opacity: 0.6; }

.lgpd {
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0.95;
  border-top: 2px solid var(--c-burgundy);
  padding-top: 1.5rem;
}
.lgpd h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--c-yellow);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}
.lgpd p { margin-bottom: 0.6rem; }
.lgpd a { color: var(--c-yellow); }
.lgpd .copyright {
  margin-top: 1rem;
  opacity: 0.7;
  font-size: 0.75rem;
}

/* ----- Responsivo ----- */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .container { padding: 0 2rem; }
  .block { padding: 5rem 0; }
  .cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .form { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  .display { font-size: clamp(2.5rem, 5vw, 4.25rem); }
  .lead { font-size: 1.5rem; }
}

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

/* ----- Cookie banner (LGPD, discreto, fixo bottom-right) ----- */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  max-width: 340px;
  background: var(--c-white);
  color: var(--c-navy);
  padding: 14px 18px 14px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
  z-index: 9999;
  font-size: 13px;
  line-height: 1.45;
  animation: cookieBannerIn 0.32s ease-out;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: #b8bcc7;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  font-family: inherit;
}
.cookie-banner__close:hover,
.cookie-banner__close:focus-visible {
  color: var(--c-navy);
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}
.cookie-banner__text {
  margin: 4px 18px 12px 0;
  color: #2b3247;
}
.cookie-banner__text a {
  color: var(--c-blue);
  text-decoration: underline;
}
.cookie-banner__accept {
  background: #1A6060;
  color: var(--c-white);
  border: 0;
  padding: 9px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: block;
  margin: 0 auto;
  transition: background 0.15s, transform 0.05s;
}
.cookie-banner__accept:hover { background: #144848; }
.cookie-banner__accept:active { transform: translateY(1px); }
.cookie-banner__accept:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .cookie-banner {
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
  }
}