/* ==========================================================================
   ASEVI — Versão 2 "Cartaz"
   Estética: neobrutalismo / cartaz serigráfico. Contornos pretos, sombras
   sólidas deslocadas, cores chapadas e tipografia enorme.
   --------------------------------------------------------------------------
   TODAS AS CORES ESTÃO NO BLOCO :root ABAIXO.
   ========================================================================== */

:root {
  /* ---------- 1. CORES DA MARCA (logotipo) ---------- */
  --marca-1: #FF6B2C;   /* laranja  — "a" */
  --marca-2: #FFD400;   /* amarelo  — "s" */
  --marca-3: #9BE015;   /* lima     — "e" */
  --marca-4: #FF3D6E;   /* rosa     — "v" */
  --marca-5: #2BD9E3;   /* ciano    — "i" */

  /* ---------- 2. CORES PRINCIPAIS ---------- */
  --cor-primaria:        #FFD400;  /* amarelo cartaz    */
  --cor-secundaria:      #7A5CFF;  /* roxo              */
  --cor-destaque:        #FF3D6E;  /* rosa choque       */
  --cor-apoio:           #2BD9E3;  /* ciano             */
  --cor-apoio-2:         #9BE015;  /* lima              */

  /* ---------- 3. NEUTROS / SUPERFÍCIES ---------- */
  --cor-tinta:         #111111;   /* preto do contorno e do texto */
  --cor-fundo:         #FFFDF2;   /* papel                        */
  --cor-fundo-alt:     #F3EFE0;
  --cor-superficie:    #FFFFFF;
  --cor-texto:         #111111;
  --cor-texto-suave:   #4A4A44;
  --cor-texto-inverso: #FFFDF2;

  /* ---------- 4. TIPOGRAFIA ---------- */
  --fonte-titulo: "Archivo Black", "Impact", system-ui, sans-serif;
  --fonte-texto:  "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  /* ---------- 5. FORMA E PROFUNDIDADE ---------- */
  --contorno: 3px solid var(--cor-tinta);
  --contorno-fino: 2px solid var(--cor-tinta);
  --raio: 0px;
  --sombra:    6px 6px 0 var(--cor-tinta);
  --sombra-sm: 4px 4px 0 var(--cor-tinta);
  --sombra-lg: 10px 10px 0 var(--cor-tinta);

  /* ---------- 6. LAYOUT ---------- */
  --secao-y: clamp(3.5rem, 7vw, 6rem);
}

/* ============================ BASE ============================ */
* { box-sizing: border-box; }

body {
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.01em;
  color: var(--cor-tinta);
}

a { color: var(--cor-tinta); text-decoration: none; }
a:hover { color: var(--cor-secundaria); }

.secao { padding-block: var(--secao-y); }
.secao-alt { background: var(--cor-fundo-alt); }
.texto-suave { color: var(--cor-texto-suave); }
.medida { max-width: 58ch; }
.titulo-secao { font-size: clamp(2rem, 5.5vw, 3.6rem); }

/* Selo adesivo */
.selo {
  display: inline-block; background: var(--cor-tinta); color: var(--cor-fundo);
  font-family: var(--fonte-titulo); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .4rem .9rem; border: var(--contorno-fino);
  transform: rotate(-1.5deg); margin-bottom: 1.2rem;
}
.selo.claro { background: var(--cor-primaria); color: var(--cor-tinta); }

/* Botões */
.btn {
  font-family: var(--fonte-titulo); text-transform: uppercase; font-size: .82rem;
  letter-spacing: .05em; border: var(--contorno); border-radius: var(--raio);
  padding: .8rem 1.6rem; box-shadow: var(--sombra-sm); transition: transform .12s, box-shadow .12s;
}
.btn:active, .btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cor-tinta); }
.btn-marca { background: var(--cor-primaria); color: var(--cor-tinta); }
.btn-marca:hover { background: var(--cor-primaria); color: var(--cor-tinta); }
.btn-doar { background: var(--cor-destaque); color: #fff; }
.btn-doar:hover { background: var(--cor-destaque); color: #fff; }
.btn-contorno { background: var(--cor-fundo); color: var(--cor-tinta); }
.btn-contorno:hover { background: var(--cor-apoio); color: var(--cor-tinta); }
.btn-roxo { background: var(--cor-secundaria); color: #fff; }
.btn-roxo:hover { background: var(--cor-secundaria); color: #fff; }

/* ============================ LOGO ============================ */
.logo { display: flex; align-items: center; gap: .7rem; }
.logo-mark { width: 52px; height: 52px; flex: none; }
.logo-mark circle { stroke: var(--cor-tinta); stroke-width: 4; }
.logo-mark text { font-family: var(--fonte-titulo); font-size: 19px; fill: var(--cor-tinta); text-anchor: middle; }
.logo-nome { line-height: 1; }
.logo-nome strong { display: block; font-family: var(--fonte-titulo); font-size: 1.55rem; color: var(--cor-tinta); letter-spacing: -.02em; }
.logo-nome span { display: block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-texto-suave); margin-top: 4px; font-weight: 600; }

/* ============================ TOPO / NAV ============================ */
.barra-topo {
  background: var(--cor-tinta); color: var(--cor-fundo);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding-block: .5rem;
}
.barra-topo a { color: var(--cor-fundo); }
.barra-topo a:hover { color: var(--cor-primaria); }

.navbar-asevi { background: var(--cor-fundo); border-bottom: var(--contorno); padding-block: .8rem; }
.navbar-asevi .nav-link {
  font-family: var(--fonte-titulo); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-tinta); padding: .45rem .8rem !important; border: 2px solid transparent; transition: .15s;
}
.navbar-asevi .nav-link:hover,
.navbar-asevi .nav-item.show > .nav-link { background: var(--cor-apoio); border-color: var(--cor-tinta); }
.navbar-asevi .nav-link.ativo { background: var(--cor-primaria); border-color: var(--cor-tinta); }
.navbar-asevi .dropdown-menu {
  border: var(--contorno); border-radius: 0; box-shadow: var(--sombra);
  padding: .4rem; min-width: 17rem; margin-top: .5rem; background: var(--cor-superficie);
}
.navbar-asevi .dropdown-item { font-size: .86rem; font-weight: 600; padding: .5rem .7rem; white-space: normal; }
.navbar-asevi .dropdown-item:hover { background: var(--cor-primaria); }
.navbar-asevi .dropdown-header { font-family: var(--fonte-titulo); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-secundaria); }
.navbar-toggler { border: var(--contorno-fino); border-radius: 0; box-shadow: none !important; color: var(--cor-tinta); font-size: 1.2rem; padding: .2rem .5rem; }

/* Faixa rolante */
.esteira {
  background: var(--cor-secundaria); color: #fff; border-bottom: var(--contorno);
  overflow: hidden; white-space: nowrap; padding-block: .55rem;
  font-family: var(--fonte-titulo); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}
.esteira-trilha { display: inline-block; animation: correr 26s linear infinite; }
.esteira-trilha span { padding-inline: 1.6rem; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .esteira-trilha { animation: none; } }

/* ============================ HERO ============================ */
.hero { background: var(--cor-primaria); border-bottom: var(--contorno); position: relative; overflow: hidden; }
.hero .carousel-item { min-height: clamp(460px, 66vh, 620px); }
.hero-slide { min-height: inherit; display: flex; align-items: center; padding-block: 3rem; position: relative; }
.hero-kicker {
  display: inline-block; background: var(--cor-tinta); color: var(--cor-fundo);
  font-family: var(--fonte-titulo); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem 1rem; margin-bottom: 1.3rem;
}
.hero-slide h2 { font-size: clamp(1.75rem, 5.4vw, 4.2rem); margin-bottom: 1.2rem; }
.hero-slide h2 mark { background: var(--cor-fundo); color: var(--cor-tinta); box-shadow: 0 0 0 3px var(--cor-tinta); padding: 0 .12em; }
.hero-slide p { font-size: 1.05rem; font-weight: 500; max-width: 46ch; }
.hero-arte { border: var(--contorno); box-shadow: var(--sombra-lg); background: var(--cor-superficie); aspect-ratio: 1/1; }
.hero-arte svg { width: 100%; height: 100%; display: block; }

.hero .carousel-indicators { margin-bottom: 1.2rem; gap: 8px; }
.hero .carousel-indicators [data-bs-target] {
  width: 18px; height: 18px; border-radius: 50%; background: var(--cor-fundo);
  border: var(--contorno-fino); opacity: 1; margin: 0;
}
.hero .carousel-indicators .active { background: var(--cor-destaque); }

/* ============================ MISSÃO ============================ */
.bloco {
  border: var(--contorno); box-shadow: var(--sombra); padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--cor-superficie);
}
.missao-texto { font-size: clamp(1.05rem, 2.1vw, 1.35rem); font-weight: 500; }
.pilar { border: var(--contorno-fino); padding: 1rem 1.1rem; display: flex; gap: .8rem; align-items: flex-start; }
.pilar i { font-size: 1.4rem; }
.pilar strong { display: block; font-family: var(--fonte-titulo); font-size: .95rem; text-transform: uppercase; }
.pilar span { font-size: .84rem; }

/* ============================ EIXOS ============================ */
.card-eixo {
  border: var(--contorno); box-shadow: var(--sombra); padding: 1.6rem 1.4rem; height: 100%;
  transition: transform .15s, box-shadow .15s; display: block; color: var(--cor-tinta);
}
.card-eixo:hover { transform: translate(-3px, -3px); box-shadow: var(--sombra-lg); color: var(--cor-tinta); }
.card-eixo .num { font-family: var(--fonte-titulo); font-size: 2.6rem; line-height: 1; display: block; margin-bottom: .5rem; }
.card-eixo h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.card-eixo p { font-size: .88rem; margin: 0; font-weight: 500; }

/* ============================ IMPACTO ============================ */
.impacto { background: var(--cor-tinta); color: var(--cor-texto-inverso); border-block: var(--contorno); }
.impacto h2, .impacto h3 { color: var(--cor-texto-inverso); }
.numero { font-family: var(--fonte-titulo); font-size: clamp(3rem, 9vw, 6rem); line-height: .9; }
.impacto-item { border: 3px solid var(--cor-texto-inverso); padding: 1.6rem 1.4rem; height: 100%; }
.impacto-item p { margin: .7rem 0 0; font-weight: 600; font-size: .92rem; }

/* ============================ ATIVIDADES ============================ */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.filtro {
  font-family: var(--fonte-titulo); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  border: var(--contorno-fino); border-radius: 0; background: var(--cor-superficie); color: var(--cor-tinta);
  padding: .5rem 1rem; box-shadow: var(--sombra-sm); transition: transform .12s, box-shadow .12s;
}
.filtro:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cor-tinta); }
.filtro.ativo { background: var(--cor-primaria); }

.card-atividade {
  border: var(--contorno); box-shadow: var(--sombra-sm); background: var(--cor-superficie);
  height: 100%; transition: transform .15s, box-shadow .15s;
}
.card-atividade:hover { transform: translate(-3px, -3px); box-shadow: var(--sombra); }
.card-atividade .foto {
  aspect-ratio: 4/3; position: relative; display: grid; place-items: center;
  border-bottom: var(--contorno); background: var(--f1, var(--cor-primaria));
}
.card-atividade .foto > i { font-size: 2.8rem; color: var(--cor-tinta); }
.card-atividade .foto img { width: 100%; height: 100%; object-fit: cover; }
.card-atividade .etiqueta {
  position: absolute; top: .7rem; left: .7rem; background: var(--cor-tinta); color: var(--cor-fundo);
  font-family: var(--fonte-titulo); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .6rem;
}
.card-atividade .corpo { padding: 1rem 1.1rem 1.2rem; }
.card-atividade h3 { font-size: 1rem; margin-bottom: .3rem; }
.card-atividade p { font-size: .85rem; margin: 0; font-weight: 500; }

/* ============================ DEPOIMENTOS ============================ */
.card-depoimento {
  border: var(--contorno); box-shadow: var(--sombra); padding: 1.6rem; height: 100%;
  display: flex; flex-direction: column; gap: 1rem; background: var(--cor-superficie);
}
.card-depoimento.gira-esq { transform: rotate(-1.2deg); }
.card-depoimento.gira-dir { transform: rotate(1.2deg); }
.card-depoimento blockquote { font-size: .96rem; font-weight: 500; margin: 0; flex: 1; }
.autor { display: flex; align-items: center; gap: .8rem; }
.avatar {
  width: 46px; height: 46px; border: var(--contorno-fino); flex: none;
  display: grid; place-items: center; font-family: var(--fonte-titulo); font-size: .9rem;
}
.autor strong { display: block; font-family: var(--fonte-titulo); font-size: .88rem; text-transform: uppercase; }
.autor span { font-size: .8rem; font-weight: 500; }

/* ============================ FINANCIADORES ============================ */
.logo-parceiro {
  height: 96px; display: grid; place-items: center; padding: 1rem;
  border: var(--contorno-fino); background: var(--cor-superficie);
  font-family: var(--fonte-titulo); font-size: .84rem; text-transform: uppercase;
  text-align: center; transition: .15s;
}
.logo-parceiro:hover { background: var(--cor-primaria); box-shadow: var(--sombra-sm); }

/* ============================ COMO DOAR ============================ */
.doar { background: var(--cor-destaque); border-block: var(--contorno); color: #fff; }
.doar h2, .doar .titulo-secao { color: #fff; }
.card-doar { border: var(--contorno); box-shadow: var(--sombra-sm); background: var(--cor-superficie); color: var(--cor-tinta); padding: 1.2rem 1.3rem; height: 100%; }
.card-doar h3 { font-size: .95rem; margin-bottom: .4rem; }
.card-doar p { font-size: .87rem; margin: 0; font-weight: 500; }
.card-doar code { background: var(--cor-primaria); color: var(--cor-tinta); padding: .12rem .4rem; font-weight: 700; }

/* ============================ CONTATO / RODAPÉ ============================ */
.form-control, .form-select {
  border: var(--contorno-fino); border-radius: 0; background: var(--cor-superficie);
  padding: .75rem .9rem; font-size: .93rem; font-weight: 500;
}
.form-control:focus, .form-select:focus { border-color: var(--cor-secundaria); box-shadow: var(--sombra-sm); }
.form-label { font-family: var(--fonte-titulo); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.contato-item { display: flex; gap: .9rem; align-items: flex-start; border-bottom: var(--contorno-fino); padding-block: .9rem; }
.contato-item .ico { width: 38px; height: 38px; flex: none; border: var(--contorno-fino); display: grid; place-items: center; }
.contato-item strong { display: block; font-family: var(--fonte-titulo); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.contato-item span.dado { font-size: .92rem; font-weight: 500; }

.mapa-fake { border: var(--contorno); box-shadow: var(--sombra); aspect-ratio: 16/10; overflow: hidden; }
.mapa-fake svg { width: 100%; height: 100%; display: block; }

.rodape { background: var(--cor-tinta); color: var(--cor-texto-inverso); padding-block: 3.5rem 0; border-top: var(--contorno); }
.rodape h4 { color: var(--cor-primaria); font-size: .78rem; letter-spacing: .12em; margin-bottom: 1.1rem; }
.rodape a { color: rgba(255,253,242,.78); font-size: .9rem; font-weight: 500; }
.rodape a:hover { color: var(--cor-primaria); }
.rodape .logo-mark circle { stroke: var(--cor-texto-inverso); }
.rodape .logo-mark text { fill: var(--cor-tinta); }
.rodape .logo-nome strong { color: var(--cor-texto-inverso); }
.rodape .logo-nome span { color: rgba(255,253,242,.6); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rodape-base { border-top: 2px solid rgba(255,253,242,.25); margin-top: 3rem; padding-block: 1.3rem; font-size: .82rem; font-weight: 600; }
.social { display: flex; gap: .5rem; }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid var(--cor-texto-inverso); color: var(--cor-texto-inverso); transition: .15s;
}
.social a:hover { background: var(--cor-primaria); color: var(--cor-tinta); border-color: var(--cor-primaria); }

/* Faixa de cores da marca */
.faixa-marca { height: 14px; display: flex; border-bottom: var(--contorno); }
.faixa-marca span { flex: 1; }

/* Voltar ao topo */
.ao-topo {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 48px; height: 48px; border: var(--contorno); border-radius: 0;
  background: var(--cor-primaria); color: var(--cor-tinta); box-shadow: var(--sombra-sm);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ao-topo.visivel { opacity: 1; pointer-events: auto; }
.ao-topo:hover { background: var(--cor-apoio); }

/* Animação de entrada */
.revelar { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1199.98px) {
  .navbar-asevi .nav-link { margin-block: 2px; }
}

/* Ajuste fino da barra de navegação em telas entre 1200px e 1500px */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .navbar-asevi .nav-link { font-size: .8rem; padding: .45rem .6rem !important; }
  .logo-mark { width: 44px; height: 44px; }
  .logo-nome strong { font-size: 1.25rem; }
  .logo-nome span { font-size: .55rem; letter-spacing: .1em; }
}