/* ==========================================================================
   DEIVID WISLEY 30123 — Deputado Estadual PR 2026
   Azul-marinho + laranja NOVO, tipografia condensada pesada. Mobile-first.
   ========================================================================== */

:root{
  /* Paleta — briefing, seção 5 */
  --azul:        #12295C;   /* navy dos posts oficiais */
  --azul-medio:  #1B4899;   /* realce / degrade */
  --azul-escuro: #0A1E46;   /* secoes de apoio */
  --tinta:       #071634;   /* header, rodape, blocos escuros */
  --azul-mapa:   #0B2050;   /* silhueta do Parana no hero */
  --laranja:     #EE7529;   /* laranja da marca, extraido das artes oficiais */
  --laranja-esc: #D3611B;   /* hover */

  /* cores da campanha do Neto Santos — usadas so na secao "Lado a lado" */
  --neto-azul:      #105495;
  --neto-azul-esc:  #0D477E;
  --neto-amarelo:   #FAC51A;
  --branco:      #FFFFFF;

  --branco-70: rgba(255,255,255,.72);
  --branco-55: rgba(255,255,255,.62);
  --linha:     rgba(255,255,255,.14);
  --wa:        #25D366;

  --display: "Archivo", "Archivo Black", "Anton", Impact, sans-serif;
  --cond:    "Barlow Condensed", "Anton", sans-serif;
  --texto:   "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 68px;
  --raio: 4px;
  --wrap: 1180px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; }
}

/* granulado sutil, como nos posts oficiais */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

body{
  margin:0;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: 20px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--laranja); color:#fff; padding:12px 18px; font-weight:700;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline: 3px solid var(--laranja); outline-offset: 3px; }

/* ---------------- TIPOGRAFIA ---------------- */
h1,h2,h3{
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;          /* peso e inclinacao do banner oficial */
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
  margin: 0;
}

/* todos os numeros grandes acompanham a inclinacao da marca */
.numblock__num, .dupla__num, .numero__n, .footer__num,
.hero__cargo, .agenda__data, .card--oficial{ border-color: rgba(255,106,0,.55); background: rgba(255,106,0,.06); }
.card__ico{ font-style: italic; }

.kicker{
  font-family: var(--cond);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 13px;
  color: var(--laranja);
  margin: 0 0 12px;
}

.section__title{ font-size: clamp(2.4rem, 11vw, 4.6rem); margin-bottom: 18px; }
.section__title .hl{ color: var(--laranja); }

.section__intro{
  font-size: 1.08rem; color: var(--branco-70);
  max-width: 56ch; margin: 0 0 34px;
}

/* ---------------- SEÇÕES ---------------- */
.section{ padding: 68px 0; position: relative; }
.section--alt{ background: var(--azul-escuro); }

@media (min-width: 900px){ .section{ padding: 108px 0; } }

/* ---------------- BOTÕES ---------------- */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--cond); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 1rem; line-height: 1;
  padding: 14px 22px;
  border: 2px solid transparent; border-radius: var(--raio);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease,
              color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--primary{ background: var(--laranja); color: var(--tinta); }
.btn--primary:hover{ background: var(--laranja-esc); }
.btn--ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn--outline{ background: transparent; color: var(--laranja); border-color: var(--laranja); }
.btn--outline:hover{ background: var(--laranja); color:#fff; }
.btn--lg{ padding: 17px 28px; font-size: 1.12rem; }
.btn--block{ display:flex; width:100%; }

/* ---------------- ÍCONES (mask CSS, sem dependência externa) ---------------- */
[class^="ico-"], [class*=" ico-"]{
  display:inline-block; width:1.15em; height:1.15em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  flex: none;
}
.ico-wa{ --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91A9.85 9.85 0 0 0 12.04 2zm5.8 14.06c-.25.69-1.43 1.32-1.97 1.4-.5.08-1.14.11-1.84-.12-.42-.13-.97-.31-1.67-.61-2.94-1.27-4.86-4.23-5-4.43-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.59-.37.79-.37h.56c.18 0 .43-.07.67.51.25.6.84 2.06.91 2.21.08.15.13.32.03.52-.1.2-.15.32-.3.5l-.44.51c-.15.15-.3.31-.13.61.17.3.76 1.26 1.64 2.04 1.13 1.01 2.08 1.32 2.38 1.47.3.15.47.13.64-.08.17-.2.73-.86.93-1.16.2-.3.4-.25.67-.15.27.1 1.72.81 2.02.96.3.15.5.22.57.35.07.12.07.71-.18 1.4z'/></svg>"); }
.ico-ig{ --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5.4-2.9a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/></svg>"); }
.ico-fb{ --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/></svg>"); }
.ico-tt{ --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.1v12.4a2.6 2.6 0 1 1-1.9-2.5v-3.1a5.7 5.7 0 1 0 5 5.6V9a7.3 7.3 0 0 0 4.3 1.4V7.3a4.3 4.3 0 0 1-3.2-1.5z'/></svg>"); }
.ico-share{ --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 16.1a2.9 2.9 0 0 0-2 .8l-7.1-4.2a3.3 3.3 0 0 0 0-1.4L16 7.2A3 3 0 1 0 15 5c0 .2 0 .5.1.7L8 9.8a3 3 0 1 0 0 4.4l7.1 4.2c-.1.2-.1.4-.1.6a2.9 2.9 0 1 0 2.9-2.9z'/></svg>"); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: rgba(10,21,48,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.header.is-scrolled{ background: var(--tinta); box-shadow: 0 8px 30px rgba(0,0,0,.35); }

.header__inner{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__logo{ height: 46px; width:auto; }

/* --- Navegação --- */
.nav{
  position: fixed; inset: var(--header-h) 0 auto 0;
  background: var(--tinta);
  border-bottom: 3px solid var(--laranja);
  padding: 8px 20px 24px;
  display: none;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.nav.is-open{ display:block; }

.nav__list{ list-style:none; margin:0 0 16px; padding:0; }
.nav__list a{
  display:block; padding: 14px 0;
  font-family: var(--cond); font-weight:800; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing:.05em;
  text-decoration:none;
  border-bottom: 1px solid var(--linha);
}
.nav__list a:hover, .nav__list a.is-active{ color: var(--laranja); }
.nav__cta{ width:100%; }

.burger{
  width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  display:block; width:26px; height:3px; background:#fff; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (min-width: 980px){
  :root{ --header-h: 84px; }
  .burger{ display:none; }
  .nav{
    position:static; display:flex; align-items:center; gap:26px;
    background:none; border:0; padding:0; max-height:none; overflow:visible;
  }
  .nav__list{ display:flex; gap:22px; margin:0; }
  .nav__list a{
    padding:6px 0; font-size: 1rem; letter-spacing:.08em; border:0;
    border-bottom: 2px solid transparent;
  }
  .nav__list a.is-active{ border-bottom-color: var(--laranja); }
  .nav__cta{ width:auto; padding: 12px 18px; font-size:.95rem; }
  .brand__logo{ height: 62px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 56px;
  overflow: hidden;
  background: var(--azul);
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(85% 65% at 62% 32%, rgba(27,62,123,.85) 0%, rgba(18,41,92,0) 68%),
    linear-gradient(115deg, var(--tinta) 0%, var(--azul) 42%, var(--azul-escuro) 100%);
}
/* silhueta do Parana — marca d agua, como no banner */
.hero__mapa{
  position:absolute; z-index:0;
  right: -22%; top: 44%; transform: translateY(-50%);
  width: 145%; height:auto;
  fill: var(--azul-mapa);
  opacity: .85;
  pointer-events:none;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 42%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 42%);
}
.hero__inner{ position:relative; z-index:1; display:grid; gap:36px; }

.hero__name{
  font-size: clamp(3.2rem, 17vw, 7rem);
  letter-spacing: -.005em;
  margin: 4px 0 6px;
}
.hero__sobrenome{ color: var(--laranja); }
.hero__cargo{
  font-family: var(--cond); font-weight:900;
  text-transform: uppercase; letter-spacing:.16em;
  font-size: clamp(1.05rem, 5.2vw, 1.9rem);
  margin: 0 0 22px; color: #fff;
}

/* Bloco do número gigante */
.numblock{
  display:block;
  border-top: 3px solid var(--laranja);
  border-bottom: 3px solid var(--laranja);
  padding: 10px 0 6px; margin-bottom: 24px;
}
.numblock__num{
  font-family: var(--display);
  font-size: clamp(3.6rem, 23vw, 8.5rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: .01em;
  color: var(--branco);
  display:block;
}
.hero__lead{
  font-size: 1.1rem; color: var(--branco-70);
  max-width: 44ch; margin: 0 0 28px;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__figure{
  position: relative; margin: 0; z-index:1;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.45));
}
.hero__figure img{ width:100%; height:auto; }

@media (min-width: 900px){
  .hero__mapa{ right: -8%; top: 50%; width: 82%; opacity: .8; }
  .hero{ padding: calc(var(--header-h) + 70px) 0 80px; }
  .hero__inner{ grid-template-columns: 1.15fr .85fr; align-items:center; gap: 48px; }
  .hero__figure{ margin-bottom: -80px; }
}

/* ==========================================================================
   FAIXA CORRIDA
   ========================================================================== */
.ticker{
  background: var(--laranja); color:#fff;
  overflow: hidden; white-space: nowrap;
  border-block: 2px solid rgba(0,0,0,.12);
}
.ticker__track{
  display:flex; width:max-content; will-change:transform;
  animation: ticker 32s linear infinite;
}
.ticker__group{
  display:flex; flex:none; min-width:100vw;
  justify-content:space-around;
}
.ticker__track span{
  flex:none;
  font-family: var(--cond); font-weight:900;
  text-transform: uppercase; letter-spacing:.1em;
  font-size: 1rem; padding: 10px 12px;
}
.ticker__track b{ opacity:.55; padding-inline: 6px; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   BIOGRAFIA
   ========================================================================== */
.bio{ display:grid; gap: 36px; }
.bio__text p{ margin: 0 0 18px; color: var(--branco-70); }
.bio__text strong{ color:#fff; font-weight:600; }

.quote{
  margin: 26px 0; padding: 4px 0 4px 20px;
  border-left: 5px solid var(--laranja);
  font-family: var(--cond); font-weight:800;
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  line-height: 1.15; text-transform: uppercase;
  color: #fff;
}

/* lista de credenciais (material oficial da campanha) */
.credenciais{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linha);
  border-left: 5px solid var(--laranja);
  border-radius: var(--raio);
  padding: 22px 24px;
}
.credenciais__titulo{
  font-size: 1.5rem; color: var(--laranja); margin-bottom: 14px;
}
.credenciais ul{ list-style:none; margin:0; padding:0; }
.credenciais li{
  position:relative; padding-left: 20px; margin-bottom: 12px;
  color: var(--branco-70); font-size: .96rem; line-height:1.45;
}
.credenciais li:last-child{ margin-bottom:0; }
.credenciais li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; background: var(--laranja); border-radius:1px;
}

/* faixa de numeros do mandato */
.numeros{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 40px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio); overflow:hidden;
}
.numero{ background: var(--azul); padding: 22px 18px; text-align:center; }
.section--alt .numero{ background: var(--azul-escuro); }
.numero__n{
  display:block; font-family: var(--display); font-weight:900; font-style:italic;
  font-size: clamp(2.1rem, 9vw, 3.4rem); line-height:1; color: var(--laranja);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.numero__l{
  display:block; font-family: var(--cond); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  font-size: .82rem; color: var(--branco-70); line-height:1.3;
}

@media (min-width: 760px){
  .numeros{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px){
  .bio{ grid-template-columns: 1.2fr .8fr; gap: 56px; align-items:start; }
  .numeros{ margin-top: 56px; }
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{
  content:""; position:absolute; left:9px; top:8px; bottom:8px;
  width:2px; background: linear-gradient(var(--laranja), rgba(255,106,0,.15));
}
.tl{ position:relative; padding: 0 0 34px 40px; }
.tl:last-child{ padding-bottom:0; }
.tl__marker{
  position:absolute; left:0; top:6px;
  width:20px; height:20px; border-radius:50%;
  background: var(--azul-escuro);
  border: 4px solid var(--laranja);
}
.tl__year{
  display:inline-block; font-family: var(--cond); font-weight:900;
  text-transform:uppercase; letter-spacing:.12em; font-size:.85rem;
  color: var(--laranja); margin-bottom: 6px;
}
.tl__title{ font-size: clamp(1.35rem, 6vw, 1.9rem); margin-bottom: 10px; }
.tl p{ margin:0; color: var(--branco-70); }
.tl strong{ color:#fff; font-weight:600; }

@media (min-width: 900px){
  .tl{ padding-left: 52px; padding-bottom: 46px; }
}

/* ==========================================================================
   PROPOSTAS
   ========================================================================== */
.grid{ display:grid; gap: 16px; }
.card{
  position:relative;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 22px 24px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--laranja);
  background: rgba(255,255,255,.07);
}
.card__ico{
  display:block; font-family: var(--display);
  font-size: 2.4rem; line-height:1; color: var(--laranja);
  font-weight: 900;
  margin-bottom: 12px;
}
.card h3{ font-size: 1.4rem; margin-bottom: 10px; }
.card p{ margin:0; color: var(--branco-70); font-size: .98rem; }

@media (min-width: 700px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px){
  .grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card--wide{ grid-column: span 3; }
  .card--wide h3{ font-size: 1.7rem; }
}

/* ==========================================================================
   LADO A LADO — usa as cores da campanha do Neto Santos (azul + amarelo)
   ========================================================================== */
.section--juntos{
  background: linear-gradient(155deg, #1461AB 0%, var(--neto-azul) 48%, var(--neto-azul-esc) 100%);
}
.section--juntos .kicker,
.section--juntos .section__title .hl{ color: var(--neto-amarelo); }

.juntos__slogan{
  font-family: var(--cond); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:.04em;
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  color:#fff; max-width:none; margin-bottom: 30px;
}

.juntos{ display:grid; gap: 26px; margin-bottom: 38px; }

.juntos__arte{
  margin: 0 auto; max-width: 460px; width:100%;
  border-radius: var(--raio); overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
.juntos__arte img{ width:100%; height:auto; }

.juntos__texto p{ margin: 0 0 16px; color: rgba(255,255,255,.82); }
.juntos__texto strong{ color:#fff; font-weight:600; }
.juntos__fecho{
  margin: 0 !important;
  padding-left: 16px; border-left: 4px solid var(--neto-amarelo);
  font-family: var(--cond); font-weight:800;
  font-size: 1.2rem; line-height:1.25; color:#fff !important;
  text-transform: uppercase;
}

/* Os dois numeros: cada card na cor do seu candidato */
.dupla{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 10px; margin-bottom: 22px;
}
.dupla__card{
  border-radius: var(--raio); padding: 18px 12px 16px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.dupla__card--deivid{ background: var(--azul-escuro); border-top: 5px solid var(--laranja); }
.dupla__card--deivid .dupla__num{ color: var(--laranja); }
.dupla__card--neto{ background: var(--neto-azul-esc); border-top: 5px solid var(--neto-amarelo); }
.dupla__card--neto .dupla__num{ color: var(--neto-amarelo); }

.dupla__cargo{
  font-family: var(--cond); font-weight:800; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.14em; color: rgba(255,255,255,.7);
}
.dupla__nome{
  font-family: var(--display); font-weight:900; font-style:italic;
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  text-transform:uppercase; line-height:1.05; margin: 6px 0 8px;
}
.dupla__nome em{ display:block; font-size:.6em; font-style:italic; opacity:.75; letter-spacing:.02em; }
.dupla__num{
  font-family: var(--display); font-weight:900; font-style:italic;
  font-size: clamp(2.6rem, 13vw, 4.6rem); line-height:.9; letter-spacing:.01em;
}
.dupla__x{
  align-self:center; font-family: var(--display); font-weight:900; font-style:italic;
  font-size: clamp(1.6rem, 7vw, 2.6rem); color: rgba(255,255,255,.6);
}

.dupla__cta{
  font-family: var(--cond); font-weight:900; text-transform:uppercase;
  font-size: clamp(1.25rem, 5.2vw, 1.9rem); line-height:1.1;
  text-align:center; margin: 0 0 24px; color:#fff;
}
.dupla__cta span{ display:block; color: var(--neto-amarelo); }

.juntos__links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.section--juntos .btn--ghost:hover{ background: rgba(255,255,255,.12); }

@media (min-width: 900px){
  .juntos{ grid-template-columns: .8fr 1.2fr; gap: 44px; align-items:center; }
  .juntos__arte{ max-width: none; }
  .dupla{ max-width: 820px; margin-inline:auto; gap: 20px; }
  .dupla__card{ padding: 26px 20px 22px; }
}

/* ==========================================================================
   COMO AJUDAR
   ========================================================================== */
.ajuda{ display:grid; gap: 20px; }
.ajuda__box{
  background: rgba(255,255,255,.045);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 28px 24px;
  display:flex; flex-direction:column;
}
.ajuda__box--wa{ border-color: rgba(255,106,0,.5); background: rgba(255,106,0,.07); }
.ajuda__tag{
  font-family: var(--cond); font-weight:900; text-transform:uppercase;
  letter-spacing:.16em; font-size:.78rem; color: var(--laranja); margin-bottom: 10px;
}
.ajuda__box h3{ font-size: 1.9rem; margin-bottom: 12px; }
.ajuda__box p{ color: var(--branco-70); margin: 0 0 18px; }
.ajuda__box strong{ color:#fff; font-weight:600; }
.ajuda__box .btn{ margin-top:auto; }
.ajuda__pix{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; background: rgba(0,0,0,.28);
  border: 1px dashed var(--linha); border-radius: var(--raio);
  padding: 12px 14px; word-break: break-all;
}
.ajuda__nota{ font-size:.8rem !important; color: var(--branco-55) !important; margin: 14px 0 0 !important; }

@media (min-width: 860px){ .ajuda{ grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ==========================================================================
   REDES + AGENDA
   ========================================================================== */
.redes{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 46px; }
.rede{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding: 20px 18px; text-decoration:none;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.rede:hover{ border-color: var(--laranja); transform: translateY(-3px); background: rgba(255,255,255,.07); }
.rede__ico{ font-size: 1.6rem; color: var(--laranja); margin-bottom: 6px; }
.rede__nome{
  font-family: var(--cond); font-weight:900; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.05rem;
}
.rede__handle{ font-size:.86rem; color: var(--branco-55); word-break: break-word; }

@media (min-width: 760px){ .redes{ grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.agenda{ border-top: 1px solid var(--linha); padding-top: 28px; }
.agenda__title{ font-size: 1.6rem; margin-bottom: 16px; }
.agenda__list{ display:grid; gap: 10px; }
.agenda__item{
  display:flex; align-items:baseline; gap: 16px;
  border-left: 4px solid var(--laranja);
  background: rgba(255,255,255,.04);
  padding: 14px 16px; border-radius: var(--raio);
}
.agenda__data{
  font-family: var(--display); font-size:1.3rem; color: var(--laranja); flex:none;
  font-weight: 900;
}
.agenda__info strong{ display:block; font-weight:600; }
.agenda__info span{ font-size:.88rem; color: var(--branco-55); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.footer{
  position: relative; overflow: hidden;
  background: var(--tinta);
  border-top: 4px solid var(--laranja);
  padding: 46px 0 130px;
}
.footer::before{
  content:""; position:absolute; left:0; bottom:0; z-index:0;
  width:150px; height:110px;
  background: var(--laranja);
  clip-path: polygon(0 100%, 0 18%, 100% 100%);
  pointer-events:none;
}
.footer .wrap{ position:relative; z-index:1; }
.footer__top{ display:grid; gap: 28px; margin-bottom: 32px; }
.footer__brand img{ height: 74px; width:auto; margin-bottom: 14px; }
.footer__num{
  font-family: var(--display); font-size: 3.4rem; line-height:.9;
  font-weight: 900;
  color: var(--laranja); margin: 0;
}
.footer__cargo{
  font-family: var(--cond); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; font-size:.9rem; margin: 6px 0 0; color: var(--branco-70);
}
.footer__novo{ height: 58px; width:auto; }
.footer__nav{ display:flex; flex-wrap:wrap; gap: 10px 22px; align-content:start; }
.footer__nav a{
  font-family: var(--cond); font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.95rem; text-decoration:none; color: var(--branco-70);
}
.footer__nav a:hover{ color: var(--laranja); }

.legal{
  border-top: 1px solid var(--linha); padding-top: 24px;
  font-size: .88rem; color: var(--branco-55); line-height:1.6;
}
.legal p{ margin: 0 0 8px; }
.legal strong{ color: var(--branco-70); }
.legal__aviso strong{
  color: var(--laranja); text-transform: uppercase;
  font-family: var(--cond); font-weight:900; letter-spacing:.1em; font-size:1rem;
}
.legal__cnpj{ text-transform: uppercase; font-size:.82rem; letter-spacing:.02em; }
.legal__mini{ font-size:.78rem; }
.legal__contas a{ color: var(--branco-70); }

@media (min-width: 860px){
  .footer{ padding-bottom: 96px; }
  .footer__top{ grid-template-columns: 1fr auto 1fr; align-items:start; }
  .footer__nav{ justify-content:flex-end; }
}

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.wa-float{
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display:inline-flex; align-items:center; gap:10px;
  background: var(--wa); color:#fff; text-decoration:none;
  padding: 14px; border-radius: 50px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  font-family: var(--cond); font-weight:900;
  text-transform:uppercase; letter-spacing:.06em;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float .ico-wa{ font-size: 1.7rem; }
.wa-float__txt{ display:none; }
.wa-float:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.5); }

@media (min-width: 980px){
  .wa-float{ right: 24px; bottom: 24px; padding: 14px 22px 14px 18px; }
  .wa-float__txt{ display:inline; font-size: 1rem; }
}

/* ==========================================================================
   PENDÊNCIAS (some quando o config.js estiver preenchido)
   ========================================================================== */
.is-pendente{
  outline: 2px dashed var(--laranja) !important;
  outline-offset: 2px;
  position: relative;
  cursor: help;
}
.is-pendente::after{
  content: "PENDENTE";
  position:absolute; top:-9px; right:-6px;
  background: var(--laranja); color:#fff;
  font-family: var(--cond); font-weight:900; font-size:10px;
  letter-spacing:.12em; padding: 1px 6px; border-radius: 2px;
  pointer-events:none;
}
.is-oculto{ display:none !important; }
/* recolhe blocos que ficaram sem nenhum item visivel */
.legal__contas:has(> a.is-oculto){ display:none; }
.juntos__links:has(> .btn.is-oculto):not(:has(> .btn:not(.is-oculto))){ display:none; }

.pend{
  position: fixed; left: 12px; bottom: 12px; z-index: 95;
  max-width: min(360px, calc(100vw - 24px));
  background: var(--tinta); color:#fff;
  border: 2px solid var(--laranja); border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  font-size: .84rem;
}
.pend__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--laranja); padding: 8px 10px 7px;
  font-family: var(--cond); font-weight:900; text-transform:uppercase; letter-spacing:.1em;
}
.pend__head button{
  background:none; border:0; color:#fff; font-size:1.2rem; line-height:1;
  cursor:pointer; padding: 0 4px;
}
.pend__body{ padding: 10px 12px 12px; max-height: 45vh; overflow:auto; }
.pend__body ul{ margin: 0 0 8px; padding-left: 18px; }
.pend__body li{ margin-bottom: 4px; color: var(--branco-70); }
.pend__body code{
  background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 3px;
  font-size: .82em; color:#fff;
}
.pend__foot{ font-size:.76rem; color: var(--branco-55); }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px);
  z-index: 120; max-width: min(420px, calc(100vw - 32px));
  background: var(--tinta); color:#fff;
  border: 2px solid var(--laranja); border-radius: 6px;
  padding: 12px 16px; font-size:.9rem; line-height:1.4;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on{ opacity:1; transform: translate(-50%, 0); }

/* ==========================================================================
   REVELAÇÃO AO ROLAR
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

@media print{
  .header,.wa-float,.pend,.toast,.ticker{ display:none !important; }
  body{ background:#fff; color:#000; }
}