/* ======================================================================
   ROUND 6 — refinamento aprovado
   Objetivos: composição 2D, hero estático, divisores, grid uniforme,
   ícones sociais e texturas derivadas do V de Vitória.
   ====================================================================== */

:root {
  --r6-texture-light: url('/assets/brand-texture-v-light.svg');
  --r6-texture-blue: url('/assets/brand-texture-v-blue.svg');
  --r6-hairline: rgba(0, 91, 170, .11);
}

/* ----------------------------------------------------------------------
   CABEÇALHO — sem bordas coloridas nos links + textura institucional
   ---------------------------------------------------------------------- */
.site-header,
.site-header.is-scrolled {
  background-color: var(--green) !important;
  background-image: var(--r6-texture-light) !important;
  background-size: 190px auto !important;
  background-position: 18% 46% !important;
  border-bottom: 0 !important;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 5px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--yellow) 0 24%,
    var(--green) 24% 52%,
    var(--blue-2) 52% 78%,
    var(--r5-cyan) 78% 100%);
  box-shadow: 0 4px 14px rgba(0,91,170,.08);
}

.nav-links {
  gap: 2px;
  padding: 4px;
  border: 0 !important;
  background: rgba(0, 93, 56, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.nav-links a,
.nav-links a:nth-child(n) {
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nav-links a:hover,
.nav-links a:nth-child(n):hover {
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  transform: translateY(-1px);
}

.mobile-menu a,
.mobile-menu a:nth-child(n) {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.socials a {
  border: 0 !important;
  background: transparent !important;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.socials a:hover {
  background: rgba(255,255,255,.13) !important;
}
.socials svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.socials svg .social-fill {
  fill: currentColor;
  stroke: none;
}

/* ----------------------------------------------------------------------
   HERO — candidato totalmente estático e sem tratamento na fotografia
   ---------------------------------------------------------------------- */
.hero-portrait,
.hero-portrait .candidate-placeholder,
.hero-portrait .candidate-photo-wrap,
.hero-portrait .candidate-photo-wrap img {
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

.hero-portrait {
  filter: none !important;
  opacity: 1 !important;
}

.hero-portrait .candidate-photo-wrap img {
  filter: none !important;
  opacity: 1 !important;
}

/* Divisor entre hero e mensagem seguinte — linguagem plana do V */
.hero-exit-divider {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(20px, 2.2vw, 38px);
  overflow: hidden;
  pointer-events: none;
}
.hero-exit-divider span {
  position: absolute;
  bottom: 0;
  height: 100%;
  clip-path: polygon(0 72%, 100% 0, 100% 100%, 0 100%);
}
.hero-exit-divider span:nth-child(1) {
  left: -2%;
  width: 44%;
  background: var(--blue-2);
  opacity: .95;
}
.hero-exit-divider span:nth-child(2) {
  left: 34%;
  width: 36%;
  background: var(--green);
  clip-path: polygon(0 100%, 42% 18%, 100% 68%, 100% 100%);
}
.hero-exit-divider span:nth-child(3) {
  right: -1%;
  width: 35%;
  background: var(--yellow);
  clip-path: polygon(0 65%, 100% 24%, 100% 100%, 0 100%);
}

/* ----------------------------------------------------------------------
   PROPOSTAS — carrossel editorial 2D / sem perspectiva
   ---------------------------------------------------------------------- */
.proposals {
  isolation: isolate;
  background-image:
    radial-gradient(circle at 92% 18%, rgba(255,203,5,.10), transparent 16%),
    radial-gradient(circle at 8% 82%, rgba(0,180,157,.055), transparent 20%),
    var(--r6-texture-blue) !important;
  background-size: auto, auto, 280px auto !important;
  background-position: center, center, -40px 60px !important;
}

.proposals::after {
  width: clamp(52px, 5vw, 86px) !important;
  height: clamp(250px, 27vw, 440px) !important;
  border-radius: 999px !important;
  opacity: .22 !important;
  transform: rotate(28deg) !important;
  box-shadow: none !important;
}

.proposal-stage {
  padding-top: 6px;
}
.proposal-stage::before {
  left: 0 !important;
  right: 0 !important;
  top: 7px !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,
    var(--green) 0 20%,
    var(--blue-2) 20% 40%,
    var(--orange) 40% 60%,
    var(--blue) 60% 80%,
    var(--r5-cyan) 80%) !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: .95;
}
.proposal-stage::after {
  display: none !important;
}

.proposal-track {
  grid-auto-columns: minmax(760px, 72vw) !important;
  gap: clamp(18px, 1.6vw, 28px) !important;
  padding: 30px var(--r5-page-pad) 34px 0 !important;
  perspective: none !important;
  transform-style: flat !important;
  scroll-padding-left: 0;
}

.proposal-card,
.proposal-card:nth-child(n) {
  position: relative;
  min-height: clamp(460px, 31vw, 560px) !important;
  grid-template-columns: minmax(310px, .88fr) minmax(0, 1.12fr) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(0,91,170,.10) !important;
  overflow: hidden !important;
  transform: none !important;
  translate: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  filter: none !important;
  box-shadow: 0 18px 52px rgba(0,71,135,.10) !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
  background: #fff;
}

.proposal-card:hover,
.proposal-card:nth-child(n):hover {
  transform: none !important;
  box-shadow: 0 22px 60px rgba(0,71,135,.14) !important;
  border-color: rgba(0,91,170,.18) !important;
}

.proposal-card::before {
  content: counter(r6proposal, decimal-leading-zero);
  counter-increment: r6proposal;
  position: absolute;
  z-index: 5;
  top: 20px;
  right: 24px;
  color: rgba(255,255,255,.88);
  font: 900 clamp(1.1rem,1.5vw,1.45rem)/1 "Gotham";
  letter-spacing: .08em;
  pointer-events: none;
}
.proposal-track { counter-reset: r6proposal; }

.proposal-copy {
  min-width: 0;
  padding: clamp(34px, 3.2vw, 54px) !important;
  background-image: var(--r6-texture-light) !important;
  background-size: 220px auto !important;
  background-position: right -40px bottom -10px !important;
  background-repeat: no-repeat !important;
}
.proposal-card:nth-child(1) .proposal-copy { background-color: #10A946 !important; }
.proposal-card:nth-child(2) .proposal-copy { background-color: #086CAF !important; }
.proposal-card:nth-child(3) .proposal-copy { background-color: #EC9107 !important; }
.proposal-card:nth-child(4) .proposal-copy { background-color: #005BAA !important; }
.proposal-card:nth-child(5) .proposal-copy { background-color: #08A994 !important; }

.proposal-copy::after {
  display: none !important;
}
.proposal-copy .category {
  max-width: 9ch;
  font-size: clamp(2.55rem, 3.7vw, 4.55rem) !important;
  line-height: .9;
  text-wrap: balance;
}
.proposal-copy .topic {
  margin-top: 10px;
}
.proposal-copy p {
  max-width: 42ch;
  margin-top: 24px;
  font-size: clamp(.92rem,1vw,1.05rem);
  line-height: 1.62;
}
.proposal-copy .btn {
  margin-top: auto;
  align-self: flex-start;
}

.proposal-image {
  position: relative;
  min-height: 100% !important;
  overflow: hidden;
  background: #EAF2F7;
}
.proposal-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 18px 0 36px rgba(0,37,72,.06);
}
.proposal-image--photo img {
  min-height: 100% !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
  filter: saturate(.92) contrast(1.02);
  transition: filter .35s ease !important;
}
.proposal-card:hover .proposal-image--photo img {
  transform: none !important;
  filter: saturate(1) contrast(1.02);
}

/* ----------------------------------------------------------------------
   DEPOIMENTOS — blocos rigorosamente iguais
   ---------------------------------------------------------------------- */
.testimonials {
  background-image:
    radial-gradient(circle at 90% 18%, rgba(255,203,5,.11), transparent 18%),
    radial-gradient(circle at 8% 72%, rgba(0,180,157,.10), transparent 20%),
    var(--r6-texture-light),
    linear-gradient(135deg, #003F78 0%, #005BAA 58%, #006AB4 100%) !important;
  background-size: auto, auto, 290px auto, auto !important;
  background-position: center, center, 10% 30%, center !important;
}

.testimonial-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: initial !important;
  gap: clamp(14px,1.5vw,24px) !important;
  overflow: visible !important;
  padding: 0 !important;
  perspective: none !important;
}

.testimonial-card,
.testimonial-card:nth-child(n) {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: clamp(460px, 35vw, 570px) !important;
  border-radius: 28px !important;
  transform: none !important;
  translate: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  filter: none !important;
  box-shadow: 0 18px 46px rgba(0,31,61,.22) !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
.testimonial-card:hover,
.testimonial-card:nth-child(n):hover {
  transform: none !important;
  box-shadow: 0 22px 56px rgba(0,31,61,.28) !important;
}
.testimonial-card:nth-child(n) .testimonial-overlay {
  background: linear-gradient(to top, rgba(0,24,48,.94) 0%, rgba(0,31,61,.70) 40%, rgba(0,28,56,.05) 72%) !important;
}
.testimonial-card:nth-child(n) .testimonial-copy {
  inset: auto 24px 26px 24px !important;
  width: auto !important;
  max-width: none !important;
}
.testimonial-card:nth-child(n) .testimonial-photo--image img {
  object-position: center 22% !important;
}
.testimonial-copy blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.48em * 4);
}

/* ----------------------------------------------------------------------
   TEXTURAS DO MANUAL — apenas em superfícies que eram chapadas
   ---------------------------------------------------------------------- */
.numbers,
.fake-news {
  background-color: #fff !important;
  background-image: var(--r6-texture-blue) !important;
  background-size: 300px auto !important;
  background-position: 102% 38px !important;
  background-repeat: repeat !important;
}

.support-wipe__panel--first,
.support-box:first-child {
  background-image:
    radial-gradient(42vw 42vw at 20% 30%, rgba(255,255,255,.10), transparent 70%),
    var(--r6-texture-light) !important;
  background-color: var(--blue) !important;
  background-size: auto, 250px auto !important;
}
.support-wipe__panel--second,
.support-box + .support-box {
  background-image:
    radial-gradient(36vw 36vw at 75% 62%, rgba(255,203,5,.14), transparent 70%),
    var(--r6-texture-light) !important;
  background-color: var(--green) !important;
  background-size: auto, 250px auto !important;
}

/* O rodapé já tinha animação; a textura amarra o conceito à marca. */
.footer {
  background-image:
    var(--r6-texture-light),
    radial-gradient(circle at 18% 34%, rgba(0,180,157,.16), transparent 22%),
    radial-gradient(circle at 86% 68%, rgba(255,203,5,.11), transparent 18%),
    linear-gradient(135deg, #003F78 0%, #004F94 52%, #005BAA 100%) !important;
  background-size: 300px auto, auto, auto, auto !important;
}

/* Segurança extra: antiga bolha de cursor não volta mesmo se houver cache. */
.cursor-glow { display: none !important; }

/* ----------------------------------------------------------------------
   RESPONSIVIDADE
   ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .proposal-track { grid-auto-columns: minmax(700px, 82vw) !important; }
  .testimonial-track { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .testimonial-card:nth-child(n) { height: 500px !important; }
}

@media (max-width: 899px) {
  .proposal-track { grid-auto-columns: minmax(560px, 88vw) !important; }
  .proposal-card,
  .proposal-card:nth-child(n) {
    grid-template-columns: minmax(230px,.9fr) minmax(0,1.1fr) !important;
    min-height: 430px !important;
  }
  .proposal-copy { padding: 30px !important; }
  .proposal-copy .category { font-size: clamp(2.4rem,7vw,3.8rem) !important; }
}

@media (max-width: 639px) {
  .site-header::after { height: 4px; bottom: -4px; }
  .socials svg { width: 17px; height: 17px; }

  .hero-exit-divider { height: 20px; }

  .proposal-track {
    grid-auto-columns: 88vw !important;
    padding: 28px 12px 32px 0 !important;
  }
  .proposal-card,
  .proposal-card:nth-child(n) {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 240px;
    border-radius: 24px !important;
  }
  .proposal-copy { min-height: 390px; }
  .proposal-card::before { top: 18px; right: 18px; }

  .testimonial-track {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .testimonial-card,
  .testimonial-card:nth-child(n) {
    height: 470px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proposal-card,
  .testimonial-card,
  .hero-portrait,
  .hero-portrait img { transition: none !important; animation: none !important; }
}
