/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
      display: block;
  }

  body {
      line-height: 1;
      font-family: "Montserrat", sans-serif;
      background-color: #F0F8F9;
  }

  #phone_hp{
    display: none; 
  }

  ol,
  ul {
      list-style: none;
  }

  blockquote,
  q {
      quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
      content: '';
      content: none;
  }

  table {
      border-collapse: collapse;
      border-spacing: 0;
  }

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

  html {
      font-size: 16px;
  }

  .container {
      width: 90%;
      max-width: 1180px;
      margin: 0 auto;

  }

  .container--largo {
      max-width: 1320px;
  }

  header {
      background: #00000066;
      display: flex;
      justify-content: space-between;
      padding: 15px 80px;
      backdrop-filter: blur(13.488179206848145px);
      border-bottom: 1px solid;
      border-image-source: linear-gradient(90deg, #E5007E 0%, #FF6A2C 96.85%);
      border-image-slice: 1;
      position: absolute;
      top: 0px;
      width: 100%;
      z-index: 2;
  }

  /* ---------- Banner ---------- */

  #banner {
      --painel: 38.4%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 133px 0 224px;
      background-color: #010C20;
      color: #FFFFFF;
  }

  /* arte no tamanho natural (1548px), ancorada na direita */
  .banner__bg {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 0;
      width: 1548px;
        max-width: 90%;
      height: 100%;
      background: url('../imagens/bg-banner.webp') no-repeat center center / cover;
  }

  /* painel da lateral esquerda */
  #banner::before {
      content: '';
      position: absolute; 
      top: 0;
      left: 0;
      z-index: 1;
      width: 65%;
      height: 100%;
      background: linear-gradient(90deg, #010C20 50%, rgba(0, 3, 11, 0) 102.66%);
  }

  /* coluna da esquerda: DUO + créditos, centrada no painel e no eixo vertical */
  .banner__lateral {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 8px;
      transform: translateY(-50%);
      width:38.4%;
      text-align: center;
  }

  .banner__logo {
      display: block;
      width: 25.9vw;
      margin: 0 auto;
  }

  /* centrada nos dois eixos pelo flex do #banner */
  .banner__chamada {
      position: relative;
      z-index: 2;
      width: 370px;
      margin-left: 40px;
      text-align: center;
  }

  .banner__studios {
      display: inline-block;
      font-size: 4.454rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.06em;
      background: linear-gradient(90deg, #E5007E 0%, #FF6A2C 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .banner__apartir {
      display: block;
      margin-top: 1vw;
      font-size: 1.44rem;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0.2em;
  }

  .banner__metragem {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-top: 0.5vw;
      font-size: 14.4rem;
      font-weight: 200;
      line-height: 1;
      letter-spacing: 0.02em;
      
  }
    .banner_num{
        filter: drop-shadow(0px 0px 20.14px #FFFFFF);
    }
  .banner__metro {
      margin-bottom: 1.5vw;
      font-size: 2.46rem;
      font-weight: 300;
       
  }

  .banner__metro sup {
      font-size: 1.6rem;
      vertical-align: super;
  }

  .banner__invista {
      display: block;
      margin-top: 1.8vw;
      font-size: 3.48rem;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0.1em;
  }

  .banner__local {
      display: block;
      margin-top: 0.8vw;
      font-size: 1.08rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.12em;
  }

  .banner__decorado {
      position: relative;
      margin-top: 1.2vw;
      padding-top: 1.4vw;
  }

  /* brilho nas cores do gradiente: drop-shadow acompanha o traço do SVG.
     box-shadow desenharia o retângulo do <img>, e um filter só aceita cor sólida,
     por isso os dois tons empilhados - #E5007E colado no traço e #FF6A2C no halo */
  .banner__decorado-linha {
      position: absolute;
      top: 0;
          left: 43px;
      width: 115%;
      pointer-events: none;
      filter:
          drop-shadow(0 0 4px #E5007E)
          drop-shadow(0 0 8px #FF6A2C);
  }

  .banner__decorado-texto {
      display: inline-block;
      font-size: 1.26rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.12em;
      text-decoration: none;
      background: linear-gradient(90deg, #E5007E 0%, #FF6A2C 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  /* % do painel: 86% de 38.4% = os 33% do banner que o layout pede */
  .banner__creditos {
      display: flex;
      align-items: flex-start;
      width: 86%;
      margin: 3.3vw 0 0 11%;
  }

  .banner__credito {
      width: 50%;
      text-align: center;
  }

  .banner__rotulo {
      display: block; 
      font-size: 18.1px;
      font-weight: 400;
      line-height: 1;
  }

  /* provisorio: rsf-realizacao.svg e a versao escura, invisivel sobre o painel.
   remover o filter quando subir a versao branca do lockup RSF / 18 ANOS */
  .banner__credito--realizacao img {
      width: 15.1vw;
      margin-top: 1.2vw;
      filter: brightness(0) invert(1);
  }

  .banner__credito--intermediacao img {
      width: 10vw;
      margin-top: 1.2vw;
  }

  /* ---------- Formulário ---------- */

  #form {
      padding: 90px 0;
      position: relative;
  }
   #form .detalhe-1{
    position: absolute;
top: -154px;
    left: -6px;
   }

  #form .container {
        width: 90%;
    max-width: 1310px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      column-gap: 95px;
  }

  .form__chamada {
      width: 792px;
      max-width: 55%;
      text-align: right;
      color: #1D2A34;
      letter-spacing: 0.18em;
  }

  .form__chamada-titulo {
      font-size: 2.216rem;
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 8%;
      text-transform: uppercase;
  }

  .form__chamada-titulo strong {
      font-weight: 700;
  }

  .form__chamada-texto {
      margin-top: 14px;
      font-size: 24px;
      font-weight: 300;
      line-height: 33px;
      letter-spacing: 24%;
  }

  .form__box {
      position: relative;
      width: 483px;
      border: 1px solid transparent;
      border-radius: 15px;
      background:
          linear-gradient(#FFFFFF, #FFFFFF) padding-box,
          linear-gradient(90deg, #E5007E 0%, #FF6A2C 100%) border-box;
      box-shadow: 7px 7px 10.9px 0px #00000040;
  }

  .form__detalhe {
      position: absolute;
      top: -19px;
      right: -27px;
      width: 150px;
      pointer-events: none;
  }

  .form__box-interno {
      padding: 32px 53px;
      text-align: center;
  }

  .form__titulo {
      display: block;
      font-size: 1.1875rem;
      font-weight: 400;
      color: #1D2A34;
  }

  .form__logo {
      display: block;
      width: 190px;
      margin: 18px auto 20px;
  }

  .form__texto {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.8;
      color: #1D2A34;
  }

  .form__formulario {
      margin-top: 24px;
  }

  .form__campo {
      position: relative;
      margin-bottom: 16px;
  }

  .form__campo input {
      width: 100%;
      height: 48px;
      padding: 0 18px;
      border: 1px solid #1D2A34;
      border-radius: 12px;
      background: transparent;
      font-family: inherit;
      font-size: 0.9375rem;
      color: #1D2A34;
      outline: none;
  }

  .form__campo label {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      padding: 0 4px;
      background: #FFFFFF;
      font-size: 0.9375rem;
      color: #1D2A34;
      pointer-events: none;
      transition: top 0.2s ease, font-size 0.2s ease;
  }

  .form__campo input:focus+label,
  .form__campo input:not(:placeholder-shown)+label {
      top: 0;
      font-size: 0.8125rem;
  }

  /* ----- estado de erro (script.js) ----- */

  .form__campo input.error {
      border-color: #E5007E;
  }

  .form__campo--erro label {
      color: #E5007E;
  }

  /* o setErro dá focus no campo; sem isso a mensagem subiria para o recorte
     da borda e ficaria minúscula em vez de aparecer dentro do campo */
  .form__campo--erro input:focus+label {
      top: 50%;
      font-size: 0.9375rem;
  }

  .form__campo input.shake {
      animation: shake 0.4s ease;
  }

  @keyframes shake {

      10%,
      90% {
          transform: translateX(-2px);
      }

      20%,
      80% {
          transform: translateX(3px);
      }

      30%,
      50%,
      70% {
          transform: translateX(-5px);
      }

      40%,
      60% {
          transform: translateX(5px);
      }
  }

  .form__aceite {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 20px 0 22px;
      text-align: left;
  }

  .form__aceite input {
      flex-shrink: 0;
      appearance: none;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #1D2A34;
      border-radius: 3px;
      background: transparent;
      cursor: pointer;
  }

  .form__aceite input:checked {
      background: #1D2A34;
  }

  .form__aceite input:checked::after {
      content: '';
      display: block;
      width: 4px;
      height: 8px;
      margin: 1px auto 0;
      border: solid #FFFFFF;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
  }

  .form__aceite label {
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.3;
      color: #1D2A34;
      cursor: pointer;
  }

  .form__botao {
      display: block;
      width: 100%;
      height: 50px;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(90deg, #E6007E 0%, #F58220 100%);
      font-family: inherit;
      font-size: 1.1875rem;
      font-weight: 700;
      color: #FFFFFF;
      cursor: pointer;
      transition: opacity 0.2s ease;
  }

  .form__botao:hover {
      opacity: 0.9;
  }

  /* ---------- Realização ---------- */

  #realizacao {
      padding: 50px 0 140px;
      text-align: center;
      position: relative;
      overflow: hidden;
  }
   #realizacao .detalhe-2{
    position: absolute;
    bottom: 0;
    right: -6px;
   }

  .realizacao__titulo {
      display: block;
      font-size:18px;
      font-weight: 400;
      color: #1D2A34;
  } 

  .realizacao__logo {
      display: block;
      width: 285px;
      margin: 45px auto 80px;
  }

  .realizacao__bloco {
      font-size: 12px;
      font-weight: 400; 
      line-height: 1.3;
      color: #333333;
  }

  .realizacao__bloco+.realizacao__bloco {
      margin-top: 40px;
  }

  .realizacao__bloco strong {
      font-weight: 700;
      display: block;
      margin-bottom: 5px;
  }
   @media (max-width: 1360px) {
    #form{
        overflow: hidden;
    }
    #form .detalhe-1 img{
        width: 150px;
        height: auto;
    }
    #realizacao .detalhe-2 img{
        width: 180px;
        height: auto;

    }
   }
  @media (max-width: 1180px) {
      .form__chamada {
          width: 40%;
          letter-spacing: 0.12em;
      }


  }

  @media (max-width: 1024px) {
      #form {
          padding: 50px 0;
      }

      #form .container {
          flex-direction: column;
          gap: 40px;
      }

      .form__chamada {
          width: 100%;
          max-width: 100%;
          text-align: center;
      }

      .form__box {
          width: 100%;
          max-width: 483px;
      }

      .form__box-interno {
          padding: 30px 20px;
      }

      #realizacao {
          padding: 40px 0 70px;
      }

      .realizacao__logo {
          width: 220px; 
          margin: 35px auto 50px;
      }
  }

  @media (max-width: 460px) {
      .form__detalhe {
          display: none;
      }
      #form .detalhe-1,
      #realizacao .detalhe-2{
        display: none;
      }
  }

  footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0px;
      background: radial-gradient(50% 50% at 50% 50%, #002E67 0%, #000C22 100%);
      border-top: 3px solid;
      border-image-source: linear-gradient(90deg, #E5007E 0%, #FF6A2C 100%);
      border-image-slice: 1;
  }


  @media screen and (max-width: 1600px) {
    html {
        font-size: 14px;
    }
}
@media (max-width: 1366px) {
    .banner__decorado-linha {
        width: 92%;
        top: 16px;
    }
    .banner__decorado {
        padding: 4vw;
    }
}
@media (max-width: 1024px) {
    html {
        font-size: 12px;
    }

    header {

    padding: 15px 24px;
}

    /* banner empilhado: a chamada em cima e a lateral (DUO + créditos) abaixo.
       a ordem do DOM é a inversa, por isso o order */
    #banner {
        flex-direction: column;
        padding-bottom: 95px;
        text-align: center;
    }

    .banner__bg {
        max-width: 100%;
                background-position: 57%
    }

    /* sem a coluna da esquerda o painel vira um véu sobre a imagem toda,
       senão o texto empilhado cai sobre as partes claras do render */
    #banner::before {
        width: 100%;
        background: #010C20B3;
    }

    /* dissolve a caixa da lateral: o DUO e os créditos passam a ser itens diretos
       do flex do #banner, o que permite ordená-los separadamente da chamada */
    .banner__lateral {
        display: contents;
    }

    /* o z-index vinha da .banner__lateral; sem a caixa dela o DUO e os créditos
       pintariam embaixo do véu do #banner::before (z-index 1) */
    .banner__logo {
        order: 1;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 260px;
        margin: 0 auto 40px;
    }
 
    .banner__chamada {
        order: 2;
        width: 100%;
        max-width: 370px;
        margin: 0 auto;
    }

    .banner__creditos {
        order: 3;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 420px;
        margin: 45px auto 0;
    }

    /* padding em % acompanha a largura da coluna, que é o que define a altura
       do SVG da linha - sem isso o traço cai sobre o "VISITE O DECORADO" */
    .banner__decorado {
        margin-top: 20px;
        padding: 8% 0 0;
    }

    .banner__decorado-linha {
        width: 100%;
    }

    /* o margin-top base é 1.2vw, o que dá ~5px nessas larguras */
    .banner__credito--realizacao img,
    .banner__credito--intermediacao img {
        max-width: 100%;
        margin-top: 18px;
    }

    .banner__credito--realizacao img {
        width: 160px;
    }

    .banner__credito--intermediacao img {
        width: 135px;
    }

    .form__chamada-titulo{
        font-size: 20px;
    }
    .form__chamada-texto{
        font-size: 18px;
    }
}

@media (max-width: 460px) {

    /* linha menor e centralizada: na largura cheia o degrau descia na altura
       do "VISITE O DECORADO" e passava por cima dele */
.banner__decorado-linha {
        left: 16.5%;
        width: 75%;
    }

    /* os dois créditos não caberiam lado a lado sem apertar os rótulos */
    .banner__creditos {
        flex-direction: column;
        align-items: center;
        margin-top: 35px;
    }

    .banner__credito {
        width: 100%;
    }

    .banner__credito + .banner__credito {
        margin-top: 25px;
    }
        .banner__decorado {
        padding: 12% 0 0;
    }
}