/**
 * Wadson Ribeiro 6510 - Estilos Principais
 */

/* ========================================
   VARIÁVEIS
   ======================================== */


@font-face {
  font-family: 'Aminute';
  src: url('../fonts/Aminute/Aminute.woff2') format('woff2'),
       url('../fonts/Aminute/Aminute.woff') format('woff'),
       url('../fonts/Aminute/Aminute.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .about-title, .video-title,
.section-title, .form-title, .title, .titulo {
  font-family: 'Aminute', var(--font-primary, Arial, sans-serif);
  font-weight: 400;
}


:root {
    --color-primary: #E63946;
    --color-primary-dark: #C62828;
    --color-secondary: #F4A261;
    --color-accent: #E9C46A;
    --color-dark: #1D3557;
    --color-darker: #0D1B2A;
    --color-light: #F8F9FA;
    --color-white: #FFFFFF;
    --color-text: #333333;
    --color-text-light: #666666;
    
    --font-primary: 'Montserrat', sans-serif;

    /* escala única dos títulos de seção (h2) — usada por
       .about-title, .wr-abas-title e .Title-Palestrantes.
       O clamp já cobre o responsivo, então não há override por breakpoint. */
    --wr-title-size: clamp(28px, 2.9vw, 42px);

    --transition: all 0.3s ease;
    --border-radius: 8px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ========================================
   RESET E BASE
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   UTILITÁRIOS
   ======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.highlight {
    color: var(--color-secondary);
}

/* =========================
   ÁREA NOSSO TIME
========================= */

.Area-Time{
  background: #ffffff;
  padding: 72px 20px;
}

.Container-Palestrantes{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.Header-Palestrantes{
  text-align: center;
  margin-bottom: 46px;
}

.Eyebrow-Time{
  display: inline-block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2f4bb2;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* mesmo tratamento tipográfico do .about-title (fonte Aminute),
   em corpo menor e no vermelho da página */
.Title-Palestrantes{
  margin: 0;
  font-size: var(--wr-title-size);
  line-height: 1.15;
  font-weight: 500;
  color: #d51b22;
  font-family: 'Aminute', var(--font-primary, Arial, sans-serif);
}

.Subtitle-Palestrantes{
  margin: 14px 0 0;
  font-size: 16px;
  color: #4b5563;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================
   GRID
========================= */

.Grid-Time{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px 18px;
  align-items: start;
}

.Card-Time{
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}

/* =========================
   FOTO
========================= */

.Avatar-Time-Wrap{
  position: relative;
  width: 158px;
  margin: 0 auto 16px;
}

.Avatar-Time{
  width: 158px;
  height: 158px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  background: #ddd;
  transition: transform .35s ease, box-shadow .35s ease;
}

.Avatar-Time img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .35s ease;
}

.Card-Time:hover .Avatar-Time{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

.Card-Time:hover .Avatar-Time img{
  transform: scale(1.08);
  filter: brightness(1.03);
}

/* =========================
   SOCIAL
========================= */

.SocialBadge-Time{
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3346b0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0 6px 18px rgba(51, 70, 176, .24);
  transition: transform .25s ease, opacity .25s ease;
}

.Card-Time:hover .SocialBadge-Time{
  transform: scale(1.08);
}

.SocialBadge-Time:hover{
  opacity: .95;
}

/* =========================
   TEXTO
========================= */

.Name-Time{
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
  color: #111a44;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.Role-Time{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #2f4bb2;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.Bio-Time{
  max-width: 200px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 1399px){
  .Container-Palestrantes{
    max-width: 1280px;
  }

  .Grid-Time{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 34px 18px;
  }
}

@media (max-width: 1199px){
  .Area-Time{
    padding: 64px 18px;
  }

  .Grid-Time{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 18px;
  }

  .Card-Time{
    max-width: 190px;
  }

  .Avatar-Time-Wrap{
    width: 148px;
  }

  .Avatar-Time{
    width: 148px;
    height: 148px;
  }
}

@media (max-width: 991px){
  .Grid-Time{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 16px;
  }
}

@media (max-width: 767px){
  .Area-Time{
    padding: 56px 16px;
  }

  .Header-Palestrantes{
    margin-bottom: 38px;
  }

  .Grid-Time{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }

  .Card-Time{
    max-width: 100%;
  }

  .Avatar-Time-Wrap{
    width: 142px;
  }

  .Avatar-Time{
    width: 142px;
    height: 142px;
  }

  .Bio-Time{
    max-width: 190px;
    font-size: 13px;
  }
}

@media (max-width: 575px){
  .Area-Time{
    padding: 50px 14px;
  }

  .Grid-Time{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .Card-Time{
    max-width: 260px;
  }

  .Avatar-Time-Wrap{
    width: 160px;
  }

  .Avatar-Time{
    width: 160px;
    height: 160px;
  }

  .Name-Time{
    font-size: 18px;
  }

  .Role-Time{
    font-size: 14px;
  }

  .Bio-Time{
    max-width: 230px;
    font-size: 14px;
  }
}


/* ========================================
   HEADER
   ======================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    transition: var(--transition);
}

.site-header.scrolled {
    background-color: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 1.5rem;
}

.logo-pra {
    color: var(--color-white);
}

.logo-cima {
    color: var(--color-secondary);
}

.logo-minas {
    color: var(--color-white);
}

/* Redes Sociais (igual a foto: círculo amarelo, borda azul, ícone vermelho, com “sombra/base” azul) */
.social-links{
  display:flex;
  gap:10px;
}

.social-link{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:#ffab01;        /* amarelo */
  border:3px solid #0b0040;  /* azul */
  color:#d51b22;             /* vermelho do ícone */
  font-size:23px;

  box-shadow:6px 5px 0px #0b0040; /* “base” azul */
  transition:.15s ease;
}
/* remove cores antigas por rede */
.social-link.instagram,
.social-link.twitter,
.social-link.youtube{
  background:#f5f5f5;
}

.social-link:hover{
  transform:translateY(-2px);
}

/* opcional: mobile um pouco menor */
@media (max-width: 991.98px){
  .social-link{ width:40px; height:40px; font-size:1rem; }
}


.form-title {
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.2;
}


/* =========================================================
   BOTÃO ENVIAR (MANTIDO EXATAMENTE COMO VOCÊ PEDIU)
   ========================================================= */
.btn-enviar {
  padding: 10px 80px 10px 80px;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  color: #d51b22;
  background: #ffab01;
  border-radius: 40px;
  border: 2px solid #0b0040;
  cursor: pointer;
  box-shadow: 17px 10px 0px #0b0040;
}

.btn-enviar:hover {
  transition: 1s;
  color: #0b0040;
  background: white;
  border: 1px solid var(--primaria);
}

/* =========================================================
   BOTÃO FLUTUANDO PARA FORA DO CARD (IGUAL REFERÊNCIA)
   - NÃO altera o estilo do botão
   - apenas posiciona
   ========================================================= */
.pcm-form-card {
  position: relative;
  overflow: visible;     /* permite o botão sair */
  padding-bottom: 85px;  /* reserva espaço interno pra não sobrepor o textarea */
}

.pcm-form-card .btn-enviar {
  position: absolute;     /* fixa no card, não depende do conteúdo */
  left: 50%;
  bottom: -22px;          /* vaza para fora */
  transform: translateX(-50%);
  z-index: 10;
  margin: 0;
}


/* =========================================================
   FORM CARD (IGUAL FOTO) - WADSON RIBEIRO 6510
   ========================================================= */
.pcm-form-card {
  width: 100%;
  max-width: 620px;
  background: #e10c0c;
  border-radius: 28px;
  padding: 34px 28px 26px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.pcm-form-title {
  text-align: center;
  font-weight: 900;
  font-size: 2.05rem;
  line-height: 1.05;
  margin: 0 0 10px;
}

.pcm-form-subtitle {
  text-align: center;
  margin: 0 0 18px;
  font-weight: 700;
  opacity: .95;
  font-size: 1rem;
  line-height: 1.3;
}

.pcm-form-body {
  margin-top: 10px;
}

.pcm-input {
  width: 100%;
  border: 0;
  outline: 0;
  height: 54px;
  padding: 0 20px;
  background: #fff;
  color: #111;
  font-size: 1rem;
  border-radius: 999px;
  margin: 10px 0;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

.pcm-input::placeholder,
.pcm-textarea::placeholder {
  color: #6a6a6a;
  font-weight: 600;
}

.pcm-textarea {
  width: 100%;
  border: 0;
  outline: 0;
  min-height: 190px;
  padding: 16px 20px;
  background: #fff;
  color: #111;
  font-size: 1rem;
  border-radius: 22px;
  margin-top: 10px;
  resize: none;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

.pcm-form-msg {
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  color: #fff;
}


/* garante que o form respeite o padding do card */
.pcm-form-body{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* dá um respiro maior nos campos */
.pcm-input,
.pcm-textarea{
  width: 100%;
  box-sizing: border-box; /* ✅ importante */
}

/* =========================================================
   RESPONSIVO "2 COLUNAS" (tablets / telas médias)
   - mantém igual ao desktop (Wadson colado no chão)
   - form NÃO invade e fica com respiro (flutuando)
   ========================================================= */


/* =========================================================
   FIX: impedir o form de invadir a próxima seção
   (mantém topo perfeito + Wadson colado)
   ========================================================= */

.video-section{
  position: relative;
  overflow: hidden;
}

/* palco */
.video-stage{
  position: relative;
  min-height: 760px;
}

/* =========================
   CAPA INICIAL
========================= */
.video-cover{
  position: relative;
  min-height: 760px;
  background: url("../Images/Video1.png") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
}

.video-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.video-cover-button{
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, 40%);
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.video-cover-play{
  width: 130px;
  height: 130px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.video-cover-play svg{
  width: 78px;
  height: 88px;
  fill: #2f2be8;
  margin-left: 6px;
}

.video-cover-button:hover .video-cover-play{
  transform: scale(1.06);
  background: rgba(255,255,255,.18);
  box-shadow: 0 24px 55px rgba(0,0,0,.28);
}

/* =========================
   VÍDEO ESCONDIDO INICIALMENTE
========================= */
.video-showcase{
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 20px;
  background: url("../Images/Video1.png") center center / cover no-repeat;
  transition: opacity .35s ease, visibility .35s ease;
}

.video-showcase::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(96, 61, 49, 0.32);
  pointer-events: none;
}

.video-frame{
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
  padding: 14px;
  border-radius: 30px;
  border: 3px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
}

.video-reel-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.18);
}

.video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transform-origin: center;
  filter: blur(18px) brightness(0.35);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.video-reel-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at left center, rgba(255,255,255,.03), transparent 28%),
    radial-gradient(circle at right center, rgba(255,255,255,.03), transparent 28%);
  pointer-events: none;
}

.video-reel{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}

/* =========================
   ESTADO ABERTO
========================= */
.video-stage.is-open .video-cover{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-stage.is-open .video-showcase{
  opacity: 1;
  visibility: visible;
}

/* responsivo */
@media (max-width: 991.98px){
  .video-stage,
  .video-cover{
    min-height: 620px;
  }

  .video-showcase{
    padding: 55px 16px;
  }

  .video-frame{
    width: min(100%, 860px);
  }

  .video-reel-wrap{
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575.98px){
  .video-stage,
  .video-cover{
    min-height: 480px;
  }

  .video-showcase{
    padding: 40px 12px;
  }

  .video-cover-play{
    width: 92px;
    height: 92px;
  }

  .video-cover-play svg{
    width: 42px;
    height: 42px;
  }

  .video-frame{
    width: 100%;
    padding: 10px;
    border-radius: 20px;
  }

  .video-reel-wrap{
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .video-reel{
    border-radius: 12px;
  }
}
/* ========================================
   ABOUT (IGUAL FOTO)
   ======================================== */

.about-section{
  position: relative;
  padding: 90px 0 110px;
  background: #ffffff;
  overflow: hidden;
}

/* fundo amarelo gigante (img32.png) */
.about-bg-art{
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 62%;
  background: url("../Images/Img32.png") center bottom / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

.about-content{
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* Título azul igual foto */
.about-title {
    font-size: var(--wr-title-size);
    font-weight: 500;
    color: #2b2fd6;
    line-height: 1.15;
    margin-bottom: 28px;
}

/* texto */
.about-text{
  max-width: 720px;
  margin: 0 auto 34px;
}

.about-text p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2d2d2d;
  margin-bottom: 18px;
}

.about-text strong{
  font-weight: 800;
  color: #1f1f1f;
}

/* =========================
   BOTÃO igual da foto
   (pílula + “rastro” azul)
   ========================= */

.cta-button-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* botão principal */
.btn-cta-foto{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 16px 46px;
  border-radius: 999px;

  background: #f4b01b; /* amarelo */
  border: 3px solid #2b2fd6; /* borda azul */
  color: #d81b1b; /* texto vermelho como foto */
  font-weight: 800;
  font-size: 2rem;
  text-decoration: none;

  z-index: 2;
}

/* “rastro” azul por baixo */
.btn-cta-foto::after{
  content:"";
  position:absolute;
  left: 14px;
  right: -18px;
  bottom: -10px;
  height: 58px;
  border-radius: 999px;
  background: #2b2fd6;
  z-index: -1;
  opacity: 1;
}

/* ícone dentro do botão */
.btn-cta-icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(43,47,214,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  color: #d81b1b;
  background: rgba(255,255,255,.12);
}

.btn-cta-icon i{
  font-size: 1.6rem;
}

.btn-cta-foto:hover{
  transform: translateY(-2px);
  transition: .2s ease;
}

/* responsivo */
@media (max-width: 991.98px){
  .about-section{ padding: 70px 0 90px; }
  .btn-cta-foto{
    font-size: 1.6rem;
    padding: 14px 34px;
  }
  .btn-cta-foto::after{
    height: 52px;
    bottom: -9px;
  }
}


.btn-prima {
    padding: 10px clamp(20px, 8vw, 80px);
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(18px, 5vw, 35px);
    color: #d51b22;
    background: #ffab01;
    border-radius: 40px;
    border: 2px solid #0b0040;
    cursor: pointer;
    box-shadow: 15px 10px 0px #0b0040;
    display: inline-block;
    text-align: center;
}

.btn-prima:hover {
    transition: 1s;
    color: var(--secundaria);
    background: white;
    border: 1px solid var(--primaria);

}


/* ========================================
   FOOTER
   ======================================== */
.site-footer {
    background-color: var(--color-darker);
    padding: 50px 0 30px;
    color: var(--color-white);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 1.8rem;
}

.footer-logo img {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
}

.footer-social {
    display: flex;
    gap: 20px;
}

.footer-social a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    font-size: 1.2rem;
    transition: var(--transition);
}

.footer-social a:hover {
    background-color: #ffab01;
    transform: translateY(-3px);
}

.footer-copy {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-copy p {
    margin: 0;
}

/* dado legal (CNPJ / federação) — acima do copyright */
.footer-copy .footer-legal {
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, 0.75);
}


/* ========================================
   RESPONSIVO
   ======================================== */
@media (max-width: 1024px) {
    
    .logo-container {
        align-items: center;
    }
    
    .logo-container .logo-pra {
        font-size: 4rem;
    }
    
    .logo-container .logo-cima {
        font-size: 5.5rem;
    }
    
    .logo-container .logo-minas {
        font-size: 4.5rem;
    }
    
    .video-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
    }
    
    .site-logo a {
        font-size: 1.2rem;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .social-link {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .logo-container .logo-pra {
        font-size: 3rem;
    }
    
    .logo-container .logo-cima {
        font-size: 4rem;
    }
    
    .logo-container .logo-minas {
        font-size: 3.5rem;
    }
    
    .form-title {
        font-size: 1.5rem;
    }
    
    .video-section {
        padding: 40px 0;
    }
    
    .video-title {
        font-size: 2rem;
    }
    
    .play-btn {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .about-section {
        padding: 60px 0;
    }
    
    .about-title {
        margin-bottom: 30px;
    }
    
    .about-text p {
        font-size: 1rem;
    }
    
    .btn-whatsapp {
        padding: 15px 30px;
        font-size: 1.1rem;
    }
    
    .deco-circle-1,
    .deco-circle-2,
    .deco-arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .logo-container .logo-pra {
        font-size: 2.5rem;
    }
    
    .logo-container .logo-cima {
        font-size: 3.2rem;
    }
    
    .logo-container .logo-minas {
        font-size: 2.8rem;
    }
    
    .video-title {
        font-size: 1.6rem;
    }
    
    .footer-logo {
        font-size: 1.4rem;
    }
}

/* ========================================
   ANIMAÇÕES
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Scroll animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   VIDEO MODAL
   ======================================== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    z-index: 1;
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.video-modal-close:hover {
    color: var(--color-secondary);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .video-modal-close {
        top: -40px;
        font-size: 2rem;
    }
}


/* ========================================
   MENU PADRONIZADO (Dourado / Hover Prata)
   ======================================== */
:root{
  --menu-dourado: #C9A766;
  --menu-prata: #9CA3AF;
}

.nav-desktop{ display:flex; align-items:center; }

/* WP menu */
.nav-desktop .nav-menu{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-desktop .nav-menu > li{ position:relative; }

.nav-desktop .nav-menu > li + li::before{
  content:"•";
  position:absolute;
  left:-16px;
  top:50%;
  transform:translateY(-50%);
  color: var(--menu-prata);
  opacity:.85;
  font-size:.9rem;
}

.nav-desktop .nav-menu > li > a{
  font-size:.95rem;
  font-weight:500;
  color: var(--menu-dourado);
  text-decoration:none;
  position:relative;
  padding:10px 0;
  transition:color .2s ease;
}

.nav-desktop .nav-menu > li > a:hover{ color: var(--menu-prata); }

.nav-desktop .nav-menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:0;
  height:2px;
  background: var(--menu-dourado);
  transition:width .2s ease;
  opacity:.9;
}

.nav-desktop .nav-menu > li > a:hover::after,
.nav-desktop .nav-menu > li.current-menu-item > a::after,
.nav-desktop .nav-menu > li.current_page_item > a::after{
  width:100%;
}

/* Mobile */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.5rem;
  background:none;
  border:0;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background-color: var(--color-white);
  transition: .2s ease;
}

.mobile-menu{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#0D1B2A;
  z-index:9999;
  padding:24px;
  flex-direction:column;
}
.mobile-menu.active{ display:flex; }

.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.mobile-menu-header .logo-img{
  display:block;
  width:130px;
  height:auto;
}

.mobile-nav-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mobile-nav-list a{
  color: var(--color-white);
  text-decoration:none;
  font-weight:600;
}
.mobile-nav-list a:hover{ color: var(--menu-dourado); }

@media (max-width: 991.98px){
  .nav-desktop{ display:none; }
}


.parallax-section{
  position: relative;
  overflow: hidden;
}

.parallax-layer{
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform .08s linear;
}

@media (prefers-reduced-motion: reduce){
  .parallax-layer{
    transition: none !important;
    transform: none !important;
  }
}
.parallax-layer{
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform .08s linear, opacity .2s ease;
}

#home .container,
#home .container-fluid,
#home .row,
#home [class*="col-"]{
  margin: 0 !important;
  padding: 0 !important;
}


/* coluna do formulário: padding reserva espaço só na coluna direita          */
/* A coluna esquerda (Wadson) NÃO é afetada e permanece colada na base        */


@media (max-width: 1182px){
  .video-cover{
    background-image: url("../Images/img-video.png") !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

@media (min-width: 1183px){
  .video-cover{
    background-image: url("../Images/Video1.png") !important;
  }
}


/* =========================================================
   APOIADORES - SLIDER MOBILE COM SETAS
   ========================================================= */

#sobre,
#sobre *{
  transform: none !important;
  transition: none !important;
}

#palestrantes.Section-Palestrantes,
#palestrantes.Area-Time{
  position: relative !important;
  z-index: 20 !important;
  clear: both !important;
  margin-top: 0 !important;
  padding-top: 72px !important;
  background: #f3f3f3 !important;
}

#palestrantes .Container-Palestrantes,
#palestrantes .Header-Palestrantes{
  position: relative !important;
  z-index: 21 !important;
}

#palestrantes .Time-Slider-Wrapper{
  position: relative !important;
  width: 100% !important;
}

#palestrantes .Time-Nav{
  display: none !important;
}

/* =========================
   DESKTOP / TABLET
========================= */
@media (min-width: 769px){
  /* flex em vez de grid: com 5 apoiadores num grid de 6 colunas a
     última coluna ficava vazia e a fileira parecia deslocada.
     Assim qualquer quantidade fica centralizada. */
  #palestrantes .Grid-Time{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 34px 26px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }

  #palestrantes .Grid-Time .swiper-wrapper{
    display: contents !important;
  }

  #palestrantes .Grid-Time .swiper-slide{
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
  }

  #palestrantes .Card-Time{
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  #palestrantes .Time-Slider-Wrapper{
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #palestrantes .Grid-Time{
    display: block !important;
  }

  #palestrantes .Grid-Time.swiper{
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 60px !important;
    box-sizing: border-box !important;
  }

  #palestrantes .Grid-Time.swiper .swiper-wrapper{
    display: flex !important;
    align-items: stretch !important;
  }

  #palestrantes .Grid-Time.swiper .swiper-slide{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #palestrantes .Grid-Time.swiper .Card-Time{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #palestrantes .Grid-Time.swiper .Avatar-Time-Wrap{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  #palestrantes .Time-Nav{
    display: inline-flex !important;
    position: absolute !important;
    top: 38% !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: #2f4bb2 !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
    cursor: pointer !important;
  }

  #palestrantes .Time-Nav--prev{
    left: 8px !important;
  }

  #palestrantes .Time-Nav--next{
    right: 8px !important;
  }

  #palestrantes .Time-Nav i{
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

/* --- 2. REDES SOCIAIS: garantir visibilidade no header em todos os
          breakpoints (corrige ícone do Instagram sumindo no mobile) --- */
.site-header .social-links {
  display: flex !important;
}

/* Ajuste de tamanho e layout no header mobile */
@media (max-width: 991.98px) {
  .site-header .social-links {
    gap: 8px;
  }
  .site-header .social-link {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.88rem !important;
    box-shadow: 4px 4px 0 #0b0040 !important;
  }
  /* Agrupa toggle + social links à direita no header mobile */
  .header-inner {
    justify-content: flex-end;
    gap: 10px;
  }
}


/* --- 5. BOTÃO CTA SEÇÃO SOBRE: proporcional em mobile --------------- */
@media (max-width: 575.98px) {
  .btn-cta-foto {
    font-size: 1.35rem !important;
    padding: 13px 26px !important;
  }
  .btn-cta-foto::after {
    height: 48px !important;
    bottom: -8px !important;
    right: -12px !important;
  }
}

/* --- 6. PREVENIR SCROLL HORIZONTAL em todas as resoluções ----------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* --- 9. SEÇÃO VÍDEO: garantir sem overflow em mobile ---------------- */
@media (max-width: 575.98px) {
  .video-cover-button {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* --- B. LARGURA DA COMPOSIÇÃO TRAVADA EM 1920px (≥1920px) -----
   · O fundo (hero-background) continua 100% da tela.
   · Conteúdo interno (Wadson + formulário) limitado a 1920px
     e centralizado, evitando espalhamento em monitores ultrawide. */
@media (min-width: 1920px) {
  #home .container-fluid {
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   SEÇÃO ABAS — QUEM EU SOU / O QUE EU FAÇO / MINHA PROPOSTA
   ========================================================= */

.wr-abas-section{
  position: relative;
  padding: 56px 0 90px;
  background: #ffffff;
}

/* leve degradê no topo, para o hero "descer" na seção */
.wr-abas-section::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(180deg, #f3f5ff 0%, #ffffff 100%);
  z-index: 0;
}

.wr-abas-section .container{
  position: relative;
  z-index: 2;
}

/* =========================
   BARRA DE ABAS
========================= */
.wr-abas-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;

  width: fit-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 8px;

  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(11, 0, 64, .12);
}

.wr-aba-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 26px;
  border-radius: 999px;

  font-family: var(--font-primary);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0b0040;

  background: transparent;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.wr-aba-btn i{
  font-size: 1.05rem;
  line-height: 1;
  color: #2b2fd6;
  transition: color .25s ease;
}

.wr-aba-btn:hover{
  background: #f1f2ff;
}

.wr-aba-btn.is-active{
  color: #ffffff;
  background: #d51b22;
  box-shadow: 0 8px 18px rgba(213, 27, 34, .32);
}

.wr-aba-btn.is-active i{
  color: #ffab01;
}

/* =========================
   PAINÉIS
========================= */
.wr-painel[hidden]{ display: none; }

.wr-painel.is-active{
  animation: wrFadeIn .35s ease both;
}

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

/* =========================
   CARD DA FOTO
========================= */
.wr-foto-wrap{
  position: relative;
}

.wr-foto-card{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-height: 430px;
  padding: 0;
  overflow: hidden;

  background: linear-gradient(160deg, #2b2fd6 0%, #1b1fae 100%);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(11, 0, 64, .18);
}

.wr-foto-img{
  position: relative;
  z-index: 2;
  display: block;
  width: 118%;
  max-width: none;
  height: auto;
  margin-bottom: -4px;
  filter: drop-shadow(0 18px 26px rgba(11, 0, 64, .28));
}

.wr-foto-badge{
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);

  display: inline-block;
  max-width: 90%;
  padding: 12px 30px;

  background: #ffffff;
  border: 2px solid #0b0040;
  border-radius: 999px;
  box-shadow: 6px 6px 0 #d51b22;

  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0b0040;
}

/* =========================
   TEXTO
========================= */
.wr-abas-title{
  font-size: var(--wr-title-size);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: #0b0040;
  margin-bottom: 26px;
}

.wr-abas-text p{
  font-size: 1.02rem;
  line-height: 1.75;
  color: #4a4a55;
  margin-bottom: 16px;
}

.wr-abas-text strong{
  font-weight: 800;
  color: #1f1f1f;
}

/* =========================
   MINI CARDS
========================= */
.wr-mini-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 52px;
}

.wr-mini-card{
  padding: 26px 26px 28px;
  background: #ffffff;
  border-radius: 16px;
  border-right: 4px solid #2b2fd6;
  border-bottom: 4px solid #2b2fd6;
  box-shadow: 0 8px 24px rgba(11, 0, 64, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.wr-mini-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 0, 64, .16);
}

.wr-mini-card i{
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  color: #d51b22;
  margin-bottom: 14px;
}

.wr-mini-card h3{
  font-family: var(--font-primary);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0b0040;
  margin-bottom: 8px;
}

.wr-mini-card p{
  font-size: .9rem;
  line-height: 1.6;
  color: #6a6a76;
  margin: 0;
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 1199.98px){
  .wr-foto-card{ min-height: 390px; }
}

@media (max-width: 991.98px){
  .wr-abas-section{ padding: 44px 0 70px; }

  .wr-abas-nav{ margin-bottom: 40px; }

  .wr-foto-wrap{
    max-width: 520px;
    margin: 0 auto 46px;
  }

  .wr-foto-card{ min-height: 420px; }

  .wr-abas-title{ text-align: center; }
  .wr-abas-text{ max-width: 720px; margin: 0 auto; }
}

@media (max-width: 767.98px){
  .wr-mini-cards{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wr-aba-btn{
    padding: 12px 18px;
    font-size: .78rem;
    letter-spacing: .04em;
  }

  .wr-foto-badge{
    font-size: .74rem;
    padding: 10px 20px;
    letter-spacing: .05em;
  }
}

@media (max-width: 575.98px){
  .wr-abas-nav{
    width: 100%;
    border-radius: 22px;
    gap: 4px;
  }

  .wr-aba-btn{
    flex: 1 1 100%;
    justify-content: center;
    border-radius: 999px;
  }

  .wr-foto-card{
    min-height: 300px;
    border-radius: 22px;
  }

  .wr-foto-badge{ white-space: normal; text-align: center; }
}


/* =========================================================
   AJUSTE MOBILE: espaço entre o vídeo e os APOIADORES
   (o vídeo tinha 80px de padding e o #palestrantes 72px de
   padding-top !important, somando ~152px de vazio)
   ========================================================= */
@media (max-width: 768px){
  #palestrantes.Section-Palestrantes,
  #palestrantes.Area-Time{
    padding-top: 40px !important;
  }
}

/* =========================
   ABAS — PAINÉIS EM GRADE
   (O que eu já fiz / Minhas propostas)
========================= */
.wr-painel-head{
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}

.wr-painel-head .wr-abas-title{
  margin-bottom: 12px;
}

.wr-painel-intro{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2b2fd6;
}

.wr-cards-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.wr-card{
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: calc((100% - 44px) / 3);

  padding: 26px 24px 28px;

  background: #ffffff;
  border-radius: 18px;
  border-right: 4px solid #2b2fd6;
  border-bottom: 4px solid #2b2fd6;
  box-shadow: 0 8px 24px rgba(11, 0, 64, .10);

  transition: transform .25s ease, box-shadow .25s ease;
}

.wr-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 0, 64, .16);
}

.wr-card-icone{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;

  background: #ffab01;
  border: 2px solid #0b0040;
  border-radius: 999px;

  color: #d51b22;
  font-size: 1.4rem;
  line-height: 1;
}

.wr-card-titulo{
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .03em;
  color: #0b0040;
  margin-bottom: 10px;
}

/* a copy traz os feitos em caixa alta */
.wr-cards-grid--feitos .wr-card-titulo{
  text-transform: uppercase;
}

.wr-card-texto{
  margin: 0;
  font-size: .94rem;
  line-height: 1.65;
  color: #6a6a76;
}

@media (max-width: 991.98px){
  .wr-card{ max-width: calc((100% - 22px) / 2); }
}

@media (max-width: 575.98px){
  .wr-card{
    flex: 1 1 100%;
    max-width: 100%;
    padding: 22px 20px 24px;
  }
  .wr-painel-intro{ font-size: 1rem; }
}



/* =========================================================
   HERO — montagem aprovada (HOME HERO HOTSITE.ai)

   Todas as medidas abaixo saíram das 3 pranchas do arquivo:
     ALTA   1916 x 864   painel azul recuado da direita
     MÉDIA  1327 x 864   painel azul colado na direita
     BAIXA   477 x 864   fundo todo azul, composição empilhada

   Empilhamento: panorama (0) · faixa vermelha (1) · painel (3).
   O retrato mora dentro do painel só para herdar a ordem do
   mobile; em telas maiores vira absolute ancorado no .wr-hero.
   ========================================================= */

:root{
  --wr-navy: #202547;
  --wr-red:  #e10c0c;
}

.wr-hero{
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--wr-navy);

  /* preenche a tela, mas sem esticar a montagem em viewports muito
     altos (a prancha é 2,2:1). Se o conteúdo pedir mais, cresce. */
  min-height: clamp(680px, 100vh, 1100px);
}

/* --- camada 0: panorama --------------------------------- */
.wr-hero-panorama{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../Images/hero-panorama.jpg") center top / cover no-repeat;
}

/* --- camada 1: faixa vermelha (30,33% inferiores) -------- */
.wr-hero-faixa{
  position: absolute;
  left: 0;
  right: 0;
  top: 69.67%;
  bottom: 0;
  z-index: 1;
  background: var(--wr-red);
}

/* --- camada 3: painel azul ------------------------------ */
.wr-hero-painel{
  /* de propósito SEM position: assim o retrato (filho) se ancora
     no .wr-hero. z-index funciona porque ele é um flex item. */
  z-index: 3;

  display: flex;
  flex-direction: column;

  /* recuo da prancha ALTA: 56,88% -> 82,60% da largura */
  margin-left: 56.88%;
  width: 25.72%;

  background: var(--wr-navy);

  /* sem padding lateral: a folga vem da largura dos filhos (83%,
     como na prancha), já que padding em % resolveria contra o
     .wr-hero e não contra o painel */
  padding: clamp(46px, 7vh, 82px) 0 clamp(24px, 2.6vh, 40px);
}

/* largura útil do painel — 83% em todas as pranchas */
.wr-hero-marca,
.wr-hero-painel .pcm-form-card,
.wr-hero-consentimento{
  width: 83%;
  margin-inline: auto;
}

/* --- logotipo + slogan ---------------------------------- */
.wr-hero-marca{
  flex: 0 0 auto;
  text-align: center;
}

.wr-hero-logo{
  display: block;
  width: 100%;
  height: auto;
}

.wr-hero-slogan{
  margin: 4.4% 0 0;
  font-family: var(--font-primary);
  font-size: clamp(10px, .78vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #ffffff;
}

/* --- retrato do Wadson ---------------------------------- */
/* em desktop/tablet o wrap não gera caixa: o retrato se ancora
   direto no .wr-hero */
.wr-hero-retrato-wrap{
  display: contents;
}

.wr-hero-retrato{
  position: absolute;
  left: 5.91%;
  bottom: 0;
  z-index: 2;

  /* 60,14% da altura mantém a cabeça acima da faixa vermelha;
     o max-width impede que ele alcance o painel azul */
  height: 60.14%;
  width: auto;
  max-width: 48%;
  object-fit: contain;
  object-position: bottom left;
}

/* --- formulário dentro do painel ------------------------ */
.wr-hero-painel .pcm-form-card{
  max-width: none;
  margin-top: auto;          /* empurra o card para a base do painel */
  margin-bottom: 0;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .32);
}

/* vence o `#home .pcm-form-card{margin-bottom:20px}` legado */
#home .wr-hero-painel .pcm-form-card{
  margin-bottom: 0 !important;
}

/* =========================================================
   MÉDIA — 992px a 1599px (prancha 1327 x 864)
   painel azul encosta na borda direita
   ========================================================= */
@media (min-width: 992px) and (max-width: 1599.98px){
  .wr-hero-painel{
    margin-left: 63.02%;
    width: 36.98%;
  }

  .wr-hero-retrato{
    left: 2.56%;
    max-width: 58%;
  }

  .wr-hero-slogan{
    font-size: clamp(10px, 1.13vw, 17px);
  }
}

/* =========================================================
   BAIXA — até 991px (prancha 477 x 864)
   fundo inteiro azul, composição empilhada:
   marca -> retrato -> formulário
   ========================================================= */
@media (max-width: 991.98px){
  .wr-hero{
    display: block;
    min-height: 0;
  }

  /* o panorama e a faixa cheia não existem nesta prancha */
  .wr-hero-panorama,
  .wr-hero-faixa{
    display: none;
  }

  .wr-hero-painel{
    position: relative;        /* .wr-hero deixa de ser flex aqui */
    z-index: 3;
    margin-left: 0;
    width: 100%;
    background: transparent;   /* o azul já está no .wr-hero */

    /* sem padding lateral: o retrato precisa sangrar de ponta a ponta.
       O respiro passa a ser dos filhos de texto. */
    padding: clamp(92px, 15vw, 140px) 0 clamp(28px, 6vw, 48px);
  }

  .wr-hero-marca{
    width: 88%;
    max-width: 460px;
    margin: 0 auto;
  }

  .wr-hero-consentimento{
    width: 88%;
    max-width: 520px;
  }

  .wr-hero-slogan{
    font-size: clamp(11px, 3.1vw, 16px);
  }

  /* ---- retrato sangrado, como na prancha -------------------
     Medido no artboard 477x864: a imagem entra com 154,6% da
     largura, deslocada -13,89%, e a base encosta no fim do bloco.
     O wrap corta a sobra dos dois lados.                        */
  .wr-hero-retrato-wrap{
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    margin: clamp(30px, 11vw, 70px) 0 0;
    overflow: hidden;
    line-height: 0;
  }

  .wr-hero-retrato{
    position: relative;
    z-index: 1;                /* acima do calço vermelho */
    display: block;

    left: auto;
    bottom: auto;
    height: auto;
    width: 154.6%;
    max-width: none;
    margin: 0 0 0 -13.89%;
  }

  /* calço vermelho, na base à esquerda e atrás do braço */
  .wr-hero-retrato-wrap::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;

    width: 36.2%;
    height: 18.3%;
    background: var(--wr-red);

    /* aresta superior descendo para a direita, como na arte */
    clip-path: polygon(0 0, 100% 48%, 100% 100%, 0 100%);
  }

  .wr-hero-painel .pcm-form-card{
    width: 88%;
    max-width: 520px;
    margin: clamp(28px, 7vw, 52px) auto 0;
  }
}

/* 576–991px: a prancha "baixa" foi desenhada em 477px, então aqui
   o sangramento é suavizado para o rosto não ficar gigante */
@media (min-width: 576px) and (max-width: 991.98px){
  /* o wrap vira o "canvas" da prancha: o retrato continua sangrando
     dentro dele, mas sem ampliar o rosto na tela inteira */
  .wr-hero-retrato-wrap{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .wr-hero-retrato{
    width: 118%;
    margin-left: -9%;
  }
}

@media (max-width: 575.98px){
  /* o painel não pode ter padding lateral: o retrato sangra de ponta
     a ponta. O respiro fica só nos blocos de texto. */
  .wr-hero-marca,
  .wr-hero-painel .pcm-form-card,
  .wr-hero-consentimento{
    width: 90%;
  }
}


/* =========================================================
   HERO — FORMULÁRIO PROPORCIONAL AO PAINEL

   Na prancha o card ocupa 42,13%–97,65% da altura (≈480px em
   864px). O card "cheio" do tema passa dos 750px, então aqui
   ele é reconstruído em `em`, com a base presa à largura do
   painel — assim encolhe/cresce junto com a composição.
   ========================================================= */

.wr-hero-painel .pcm-form-card{
  font-size: clamp(10px, .68vw, 15px);
  padding: 1.7em 2.2em 4.3em !important;
  border-radius: 1.9em;
}

.wr-hero-painel .pcm-form-title{
  font-size: 2em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 .5em;
}

.wr-hero-painel .pcm-form-subtitle{
  font-size: .88em;
  line-height: 1.32;
  margin: 0 0 .9em;
}

.wr-hero-painel .pcm-form-body{
  margin-top: 0;
}

.wr-hero-painel .pcm-input{
  height: 2.7em;
  margin: .5em 0;
  padding: 0 1.3em;
  font-size: 1em;
  border-radius: 999px;
}

.wr-hero-painel .pcm-textarea{
  min-height: 7.2em;
  margin-top: .5em;
  padding: .9em 1.3em;
  font-size: 1em;
  border-radius: 1.4em;
}

.wr-hero-painel .pcm-form-msg{
  margin-top: .5em;
  font-size: .85em;
}

.wr-hero-painel .btn-enviar{
  font-size: 1.28em;
  padding: .46em 1.75em;
  border-radius: 999px;
  border-width: 2px;
  box-shadow: .45em .3em 0 #0b0040;
  bottom: -.85em;

  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.15;
  white-space: nowrap;
}

/* o header fixo do site fica por cima do hero; sem esta folga
   os ícones sociais encostam no logotipo */
.wr-hero-painel{
  padding-top: clamp(84px, 11vh, 132px);
}

@media (max-width: 991.98px){
  .wr-hero-painel .pcm-form-card{
    font-size: clamp(12px, 3.2vw, 16px);
    padding: 1.6em 1.7em 4em !important;
  }

  .wr-hero-painel .btn-enviar{
    font-size: 1.18em;
    box-shadow: .4em .26em 0 #0b0040;
  }
}


/* =========================================================
   HERO — RÓTULOS, CONSENTIMENTO E ASSINATURA DO FORMULÁRIO
   ========================================================= */

/* os campos são identificados pelo placeholder, como na prancha;
   os rótulos existem para leitor de tela */
.pcm-label{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* fica abaixo do card, no azul do painel, livre do botão que vaza */
.wr-hero-consentimento{
  margin-top: 2.6em;
  font-size: clamp(9px, .6vw, 12px);
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, .62);
}


@media (max-width: 991.98px){
  .wr-hero-consentimento{
    margin-top: 2.2em;
    font-size: clamp(10px, 2.7vw, 12px);
  }

}

/* apoiadores: entre 769 e 1199px os cards encolhem um pouco para os
   cinco continuarem numa fileira só antes de quebrar */
@media (min-width: 769px) and (max-width: 1199.98px){
  #palestrantes .Grid-Time{
    gap: 30px 20px !important;
  }

  #palestrantes .Grid-Time .swiper-slide{
    flex: 0 0 168px !important;
    width: 168px !important;
    max-width: 168px !important;
  }

  #palestrantes .Card-Time{
    max-width: 168px !important;
  }
}