/* Paleta: verde-escuro, marrom e branco */
:root{
  --green:#0f3b2e;
  --green-700:#124636;
  --brown:#7a5333;
  --cream:#f3efe6;
  --white:#ffffff;
  --ink:#1b1b1b;
}

*{box-sizing:border-box}

/* Tipografia base e suavidade de scroll */
html { scroll-behavior: smooth; }
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* ===========================
   HEADER + TÍTULO + LOGO
   =========================== */
.header{background:#0b1a16;color:var(--white);padding:28px 0;}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  flex-wrap:wrap;        /* no mobile, deixa quebrar */
  text-align:center;     /* centraliza título quando quebrar */
}

/* Logo responsivo: controla pela ALTURA */
.logo{
  height: clamp(56px, 12vw, 96px); /* ~56-96px conforme a tela */
  width:auto;                      /* preserva proporção */
  border-radius:8px;
  box-shadow:none;
  background:transparent;
  object-fit:contain;
  display:block;
  margin:0 auto;                   /* central no mobile */
}

/* Bloco do título */
.titleblock{ flex:1 1 220px; }

.titleblock h1{
  font-family:Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(28px, 6.2vw, 48px); /* responsivo */
  letter-spacing:.5px;
  margin:0;
  line-height:1.1;
}
.titleblock h1 span{color:var(--brown);}
.subtitle{opacity:.9;margin:.25rem 0 0}

/* Desktop/tablet: volta a ficar lado a lado */
@media (min-width:768px){
  .header__inner{ flex-wrap:nowrap; text-align:left; gap:20px; }
  .logo{ height:110px; margin:0; }
}
@media (min-width:1200px){
  .logo{ height:128px; }
}

/* ===========================
   NOTAS (rodapé da seção)
   =========================== */
.notes{
  margin-top:2rem;
  padding:1rem 1.5rem;
  border-left:4px solid #4b6043; /* verde-escuro */
  background-color:#f7f5f0;
  font-size:.95rem;
  color:#333;
  line-height:1.6;
}
.notes em{ font-style:italic; }
.notes strong{ color:#3a3a3a; }

/* Destaques das novas seções */
#cores{
  background:#ffffff;
  border-top:4px solid var(--green);
  border-bottom:4px solid var(--brown);
}
#escudo{ background:var(--cream); }
#escudo h2, #cores h2{
  font-family:Anton, Impact, sans-serif;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ===========================
   NAV
   =========================== */
.nav{background:#111;}
.nav__inner{display:flex;gap:18px;padding:10px 0;flex-wrap:wrap}
.nav a{
  color:var(--white);
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:8px;
  transition: background .15s ease, transform .05s ease;
}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav a[aria-current="page"]{
  background:rgba(255,255,255,.18);
  box-shadow: inset 0 -2px 0 0 rgba(255,255,255,.4);
}

/* ===========================
   LAYOUT DAS SEÇÕES
   =========================== */
.section{padding:56px 0}
.section.alt{background:#ffffff}
.two-cols{display:grid;grid-template-columns:1.4fr .8fr;gap:24px}
@media (max-width:900px){.two-cols{grid-template-columns:1fr}}

/* Leitura confortável para textos longos */
.section p { margin: 0 0 1rem; }
.two-cols > div:first-child { max-width: 68ch; }

h2{
  font-family:Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:36px;margin:0 0 18px
}
h3{margin-top:0}
.bullets{padding-left:18px}
.bullets li{margin:.5rem 0}

/* ===========================
   CARDS / GRIDS
   =========================== */
.card{background:#fff;border:2px solid var(--green-700);border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;border:2px solid #0001;vertical-align:middle}
.dot--green{background:var(--green)}
.dot--brown{background:var(--brown)}
.dot--white{background:#fff;}

.note{margin-top:14px;font-size:.95rem;opacity:.9}

/* ===========================
   EVENTOS
   =========================== */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.event-skeleton{padding:24px;border:2px dashed var(--brown);border-radius:12px;color:#664b34;background:#fff}
@media (max-width:800px){.event-grid{grid-template-columns:1fr}}

/* ===========================
   FORMULÁRIO
   =========================== */
.form label{display:block;margin-bottom:10px;font-weight:600}
.form input,.form textarea{
  width:100%;
  padding:10px;
  border:1.5px solid var(--green-700);
  border-radius:10px;
  background:#fff;
}
.form button{
  margin-top:8px;
  background:var(--brown);
  color:#fff;
  border:0;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition: filter .15s ease, transform .05s ease;
}
.form button:hover{filter:brightness(1.05)}
.form button:active{transform: translateY(1px);}

/* Acessibilidade de foco visível (teclado) */
a, button, input, textarea { outline: none; }
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(122, 83, 51, 0.6); /* marrom translúcido */
  outline-offset: 2px;
  border-radius: 6px;
}

/* Inputs com feedback no foco */
.form input:focus-visible,
.form textarea:focus-visible{
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(122,83,51,.15);
}

/* ===========================
   FOOTER
   =========================== */
.footer{background:var(--green);color:#fff;text-align:center;padding:20px 0;margin-top:20px}

/* ===========================
   REDUZIR ANIMAÇÕES
   =========================== */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Refinos responsivos (títulos) */
@media (max-width: 900px){
  .titleblock h1 { font-size: clamp(28px, 6vw, 40px); }
  h2 { font-size: 32px; }
}
@media (max-width: 600px){
  h2 { font-size: 28px; }
}

/* ===========================
   CARD DE IDENTIDADE / VÍDEO
   =========================== */
.card--identity{
  display:grid;
  grid-auto-flow:row;
  row-gap:12px;
  align-content:start;
  justify-items:stretch;
  padding:12px;
}
.identity{ margin:0; width:100%; text-align:center; }

.identity-media{
  width:100%;
  aspect-ratio:3 / 2;      /* força 3:2 */
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  margin-bottom:12px;
}
.identity-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;        /* preenche sem distorcer */
}

/* Barrinha de cores */
.palette-strip{
  display:block;
  width:100%;
  border:1px solid var(--green-700);
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  background:linear-gradient(90deg,
    var(--green) 0%, var(--green) 33.333%,
    var(--brown) 33.333%, var(--brown) 66.666%,
    var(--white) 66.666%, var(--white) 100%);
}
.palette-strip--sm{ height:12px; }