/* Reset mínimo para consistência */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{overflow-x:hidden}
/* Fontes locais: coloque os arquivos em /fonts */
@font-face{
  font-family:'Montserrat Alternates';
  src:
    local('Montserrat Alternates Regular'),
    local('MontserratAlternates-Regular'),
    url('fonts/MontserratAlternates-Regular.woff2') format('woff2'),
    url('fonts/MontserratAlternates-Regular.woff') format('woff'),
    url('fonts/MontserratAlternates-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Fonte script Arsilon (para "Seu interesse:") */
@font-face{
  font-family:'Arsilon';
  src:
    local('Arsilon'),
    url('fonts/Arsilon.woff2') format('woff2'),
    url('fonts/Arsilon.woff') format('woff'),
    url('fonts/Dhan Studio - Arsilon.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat Alternates';
  src:
    local('Montserrat Alternates Bold'),
    local('MontserratAlternates-Bold'),
    url('fonts/MontserratAlternates-Bold.woff2') format('woff2'),
    url('fonts/MontserratAlternates-Bold.woff') format('woff'),
    url('fonts/MontserratAlternates-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:
    local('Montserrat Regular'),
    local('Montserrat-Regular'),
    url('fonts/Montserrat-Regular.woff2') format('woff2'),
    url('fonts/Montserrat-Regular.woff') format('woff'),
    url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:
    local('Montserrat Bold'),
    local('Montserrat-Bold'),
    url('fonts/Montserrat-Bold.woff2') format('woff2'),
    url('fonts/Montserrat-Bold.woff') format('woff'),
    url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/*
  Hero com tamanho intrínseco da imagem de fundo.
  Regras:
  - A seção deve ter exatamente largura e altura da imagem.
  - Sem media queries.
  - Background usando images/herobanner.png.
*/
.hero{
  position:relative;
  display:inline-block; /* mede pelo conteúdo intrínseco */
  background-image:url("images/herobanner.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain; /* garante que a imagem apareça inteira, sem corte */
}

.hero-intrinsic{
  display:block; /* remove espaçamento de linha */
  visibility:hidden; /* não aparece, mas mantém dimensões */
  max-width:100%;
  height:auto; /* escala proporcionalmente e evita overflow horizontal */
  pointer-events:none;
  user-select:none;
}

/* Container flutuante que agrega bloco + data abaixo com a mesma largura */
.hero-float{position:absolute; top:100px; left:100px; width:clamp(300px, 28vw, 560px)}

@media (max-width: 1285px) and (min-width: 800px) {
.hero-float{position:absolute; top:16px; left:40px; width:clamp(300px, 28vw, 560px)}
}

/* Painel à esquerda do hero */
.hero-panel{
  position:relative;
  background:rgba(252,120,6,0.76); /* #fc7806 com 76% de opacidade */
  border-radius:24px;
  padding:clamp(16px, 2vw, 28px);
  width:100%;
  color:#fff;
  text-align:center; /* centraliza conteúdo interno */
}
.hero-logo{display:block; width:clamp(120px, 10vw, 180px); height:auto; margin:0 auto 12px}
.hero-title{
  font-family:'Montserrat', 'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  line-height:1.25;
  margin:8px 0 12px 0;
  font-size:clamp(18px, 2.4vw, 28px);
}
.hero-script{font-family:'Arsilon', cursive; font-size:clamp(20px, 2vw, 26px); margin:4px 0 12px 0}
.hero-options{display:grid; gap:clamp(12px, 1.5vw, 18px)}
.hero-option{
  display:block;
  background:#fff;
  color:#fc7806;
  text-decoration:none;
  text-align:center;
  padding:clamp(8px, 1.2vw, 12px) 16px;
  border-radius:24px; /* mesmo espírito da CTA */
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(12px, 1.6vw, 16px);
}
.hero-option .regular{font-weight:400}

/* Imagem de data abaixo, mesma largura do bloco */
.hero-date{display:block; width:100%; height:auto; margin-top:clamp(8px, 1vw, 16px)}

@media (max-width: 799px){
  .hero-date{display:none}
  .hero-float{top:16px; left:16px}
}

@media (max-width: 700px){
  .hero-float{top:7%; left:16px; width:55%}
  .hero{display:block; width:100%; background-image:url("images/herobannermobile.png"); background-size:cover; background-position:center; min-height:100vh}
  .hero-intrinsic{display:none}
  .matricula{padding:0px 0px}
  /* Aumentos específicos para destaque do bloco no mobile */
  .hero-float{width:65%}
  .hero-logo{width:180px}
  .hero-title{font-size:28px}
  .hero-script{font-size:26px}
  .hero-options{gap:16px}
  .hero-option{padding:12px 18px; font-size:16px}
}

/* Seção de inscrição */
.inscricao{background:#fff; padding:56px 96px; position:relative; overflow:hidden; display:flex; justify-content:center}
.inscricao-side{position:absolute; top:0; bottom:0; object-fit:cover; width:auto; height:100%;}
.inscricao-side.left{left:0}
.inscricao-side.right{right:0}
.inscricao-form{
  background:#fc7806;
  border-radius:24px; /* mesmo raio do hero-panel */
  padding:24px 24px; /* mais espaço lateral */
  color:#fff;
  position:relative; /* fica acima das laterais */
  z-index:1;
  margin:0 auto; /* centraliza na seção */
  max-width:800px;
}
.inscricao-header{display:flex; align-items:center; gap:16px}
.inscricao-logo{width:170px; height:auto; display:block}
.inscricao-titles{display:flex; flex-direction:column}
.inscricao-title{font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:400; font-size:clamp(22px, 3vw, 36px); line-height:1.2}
.inscricao-subtitle{font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:700; font-size:clamp(16px, 2vw, 24px)}
.inscricao-section-title{
  margin-top:32px; /* mais espaço entre tópicos 1, 2 e 3 */
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
}
.inscricao-info{margin-top:24px}
.inscricao-info p{
  margin:8px 0;
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:clamp(14px, 1.6vw, 18px);
  line-height:1.5;
}
.inscrever-btn{
  display:flex; align-items:center; justify-content:center;
  margin-top:32px; /* espaço maior antes do botão */ width:100%;
  background:#fff; color:#fc7806;
  border:0; border-radius:24px;
  padding:14px 20px;
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; font-size:clamp(18px, 2.4vw, 28px);
}
.inscrever-icon{width:22px; height:auto; margin-right:10px}
.inscricao-fields{display:grid; gap:12px; margin-top:20px}
.field{position:relative; display:block}
.field input{
  position:relative; z-index:0;
  width:100%;
  background:#fff;
  color:#fc7806; /* texto na cor do fundo do bloco */
  border:0;
  border-radius:24px;
  padding:12px 16px 12px 48px; /* espaço para o ícone à esquerda */
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.field input::placeholder{color:#fc7806}
.field select{
  position:relative; z-index:0;
  width:100%;
  background:#fff;
  color:#fc7806;
  border:0;
  border-radius:24px;
  padding:12px 44px 12px 48px; /* ícone à esquerda e caret à direita */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-image:none; /* usaremos caret em CSS */
}
.field-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; background-repeat:no-repeat; background-size:contain; background-position:center; z-index:1;
}
.field-caret{
  position:absolute; right:14px; top:50%;
  width:12px; height:12px; pointer-events:none;
  border-right:3px solid #fc7806;
  border-bottom:3px solid #fc7806;
  transform:translateY(-50%) rotate(45deg); /* centraliza verticalmente e rotaciona */
}

/* Seção de matrícula */
.matricula{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fc7806;
  background:#f97500;
  padding-left:50px;
  padding-right:50px; /* apenas padding lateral */
  display:grid; /* cabeçalho em duas colunas; embeds abaixo */
  grid-template-columns:1fr 1fr;
  align-items:center;
  margin-top:-10px; /* espaço entre hero e seção */
  position:relative; /* para ancorar a barra final */
  padding-bottom:48px; /* reserva altura da barra final */

}
.matricula-left{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  text-align:left;
  font-size:clamp(18px, 2vw, 24px);
}
.matricula-right{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:right;
  font-size:clamp(18px, 2vw, 24px);
}
.matricula-right .regular{font-weight:400}
.matricula-right strong{font-weight:700}

/* Embeds lado a lado, alinhados aos limites laterais do texto */
.matricula-embeds{
  width:100%;
  grid-column:1 / -1; /* ocupa toda a largura da seção */
  margin-top:16px;
}
.embed-youtube{position:relative; width:100%}

/* Proporção 16:9 responsiva para o YouTube sem media queries */
.ratio-16x9{position:relative;width:100%;padding-top:56.25%}
.ratio-16x9 iframe{position:absolute;inset:0;border:0;width:100%;height:100%}

/* Ajustes do bloco do Instagram para ocupar o espaço disponível */
.embed-instagram{overflow:hidden; position:relative; background:#000}
.embed-instagram-video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0; background:#000}

/* Footer da seção de matrícula */
.matricula-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  grid-column:1 / -1;
  margin-top:24px;
  padding:0 0 24px 0;
  color:#fff;
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-title{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:clamp(18px, 2vw, 24px);
  margin:0;
}
.footer-phone{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(20px, 2.5vw, 32px);
  margin:0;
}
.footer-link{
  font-family:'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:clamp(16px, 1.8vw, 20px);
  color:#fff;
  text-decoration:underline;
  margin-top:4px;
  display:inline-block;
}
.footer-logo{
  height:clamp(60px, 8vw, 100px);
  width:auto;
}

@media (max-width: 700px){
  .matricula-footer{
    flex-direction:column;
    gap:20px;
    text-align:center;
  }
}

/* Barra de CTA abaixo dos vídeos */
.matricula-cta{
  margin-top:16px;
  background:#ce0000;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center; /* centraliza o conteúdo */
  padding:16px 20px; /* respeita os limites laterais já definidos */
  margin: 24px 0px;
  font-family:'Montserrat', 'Montserrat Alternates', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  grid-column:1 / -1; /* ocupa toda a largura da seção */
  width:auto;
}
.matricula-cta a{
  color:#fff;
  text-decoration:underline;
}
.matricula-cta .cta-left{font-weight:700}
.matricula-cta .cta-right{margin-left:auto; font-weight:700}
.matricula-cta .cta-center{
  font-weight:400; 
  text-align:center; 
  display:block;
  width:100%;
  text-decoration:none;
  font-size:clamp(16px, 2.5vw, 32px);
  line-height:1.3;
}

@media (max-width: 510px){
  .matricula-cta{font-size:14px; padding:12px 16px}
  .matricula-cta .cta-center{
    font-size:clamp(14px, 4vw, 18px);
    white-space:normal;
    word-wrap:break-word;
  }
}


/* Barra final da seção, colada ao bottom e sem respeitar padding lateral */
.matricula::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:32px; /* altura da barra final */
  background-image:url("images/barrafinal.png");
  background-repeat:no-repeat;
  background-size:100% 100%; /* cobre 100% da largura da seção */
  background-position:bottom center;
  pointer-events:none;
}

/* Layout mobile: substitui os embeds por uma ordem vertical */
.matricula-mobile{display:none}
@media (max-width:700px){
  .matricula-embeds{display:none}
  /* Esconde os textos originais deste breakpoint */
  .matricula > .matricula-left,
  .matricula > .matricula-right{display:none}

  .matricula-mobile{display:block; grid-column:1 / -1}
  /* Espaçamentos entre textos e embeds */
  .matricula-mobile .matricula-left{margin-bottom:12px; text-align:left}
  .mobile-youtube{position:relative; width:100%; margin-bottom:12px}
  .matricula-mobile .matricula-right{margin:12px 0 8px; text-align:left}
  .mobile-youtube iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .mobile-instagram{background:#000}
  .mobile-instagram-video{display:block; width:100%; height:auto; background:#000}
}