body { overflow-x: hidden; background-color: #F0EFED; position: relative; font-family: "Urbanist", sans-serif;}

@media only screen and (min-width: 320px) and (max-width: 359px) {  


   /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

   section#beinriobanner { position: relative; width: 100%; height: 100vh; padding: 20px 50px; background: url(../../asset/img/beinrioMobile.jpeg) center/ cover no-repeat; }
   section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
   section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 10px 20px;  }
   section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 170px; height: 70px; margin-left:  -10px; }
   section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links  ul li { display: none; }
   section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: flex; } 
   section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu button { color: #fff; font-size: 30px;}
   section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
   section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }
 
   /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */
 
   section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 20px 20px;;}
   section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; ;}
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: column; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%;  }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 20px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 20px 0px 0px 0px; font-size: 25px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; } 
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 420px; border-radius: 20px;  padding: 20px; margin: 40px 0px; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
   section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
   section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 100%; height: 100%; position: relative; }
   section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
   section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
   section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }
 
 
   /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */
 
   section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 20px; background-color: #454643; padding: 30px 0px; }
   section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 30px;  color: #fff; font-weight: 400; padding-bottom: 30px; }
   section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
   section#galeria-beinrio div.container-galerias img { width: 90%; height: 100%; object-fit: cover; border-radius: 20px; }
   section#galeria-beinrio div.container-btn-pages { padding: 20px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex;  gap: 10px; }
   section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 100%; height: 100%; border-radius: 20px; font-size: 30px; }
 
   /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */
 
   section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 20px; background-color: #F0EFED; padding: 30px 0px; }
   section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 30px;  color: #454643; font-weight: 400; padding-bottom: 30px; }
   section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
   section#galeria-plantas-beinrio div.container-plantas img { width: 90%; height: 100%; object-fit: cover; border-radius: 20px; }
   section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex;  gap: 10px; }
   section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 100%; height: 100%; border-radius: 20px; font-size: 30px; }
 
   /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */
 
   section#outros-studios { width: 100%; height: 100%; position: relative; margin-top: -20px;  }
   section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
   section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
   section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
   section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 10px 0px 0px 0px; font-size: 20px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
   section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px; } 
   section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
   section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
   section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; margin-top: 30px; padding: 0px 25px;}
   section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
   section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: cover; border-radius: 20px; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
   section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }
 
   /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */
 
   section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 20px; }
   section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
   section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
   section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 20px 0px 30px 0px; font-size: 20px; font-weight: 600; font-family: "Dancing Script", cursive;  text-align: center; }
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem; } 
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px;}
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 100px; height: 100px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 30px; }
   section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 20px; font-weight: 600; color: #454643; padding-bottom: 10px; text-align: center;}
   section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
   section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }
 
   /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */
 
   section#localizacao-beinrio { width: 100%; height: 100%; padding: 20px; margin-top: -10px; }
   section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
   section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 0px; text-align: center; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; }
   section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: cover;  border-radius: 20px; margin-top: 30px; }
 
   /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */
 
   footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
   footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
   footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 40px; font-weight: 300; text-align: center;  }
   footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 1rem; font-size: 16px; text-align: center; width: 100%;; }
   footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 80%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
   footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 16px; font-weight: 600; }
 
       /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
 #formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
 #formContatoFooter input,
 #formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
 #formContatoFooter input:focus,
 #formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
 .btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
 .btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
 .btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
 #mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
 #mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}
 
   /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */
 
   div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }
 
   /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */
 
   div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; display: flex; justify-content: flex-start; top: 0; left: 0; display: none; z-index: 10000;}
   div.modal-botao-menu div.modal-content { background-color: #454643; width: 70%; max-width: 320px; height: 100vh; padding: 60px 20px 40px 20px; z-index: 20000; overflow-y: auto; }
   div.modal-botao-menu div.modal-content h2.modal-nome { text-align: center; font-size: 24px; color: #fff; margin-bottom: 5px; }
   div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; font-size: 14px; }
   div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 15px; margin-top: 20px; position: relative;}
   div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
   div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; display: flex; align-items: center; gap: 15px;}
   div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; border-radius: 15px; color: #fff; padding: 12px 0px; font-size: 24px; cursor: pointer; transition: all 0.3s ease; border: none;}
   div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643; }
   div.modal-botao-menu div.modal-content div.modal-info { margin-top: 40px; width: 100%; }
   div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; list-style: none; padding: 0; }
   div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; transition: color 0.3s ease; padding: 8px; text-decoration: none;}
   div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a:hover { color: #BDBFC1; }
 
 
   /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */
 
   div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
    div.modal-form div.modal-form-content {  background-color: #454643; width: 90%; height: 80%; display: flex; border-radius: 20px; padding: 20px ;}
    div.modal-form div.modal-form-content div.modal-form-dados { width: 100%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
    div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 1rem;gap: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 30px; color: #fff; text-align: center; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
    div.modal-form div.modal-form-content figure { width: 50%; height: 100%; display: none; }
    div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
    div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
    div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
    div.modal-form span.close-modal:hover { background-color: red; border: none; }
 
   /* Botão Flutuante WhatsApp */
  .btn-whatsapp-flutuante {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 65px;
   height: 65px;
   background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
   transition: all 0.3s ease;
   z-index: 9999;
   animation: pulse-whatsapp 2s infinite;
 }
 
 .btn-whatsapp-flutuante:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
 }
 
 .btn-whatsapp-flutuante i {
   font-size: 32px;
   color: white;
 }
 
 .tooltip-whatsapp {
   position: absolute;
   right: 75px;
   background: #1e293b;
   color: white;
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s ease;
 }
 
 .btn-whatsapp-flutuante:hover .tooltip-whatsapp {
   opacity: 1;
   right: 85px;
 }
 
 .tooltip-whatsapp::after {
   content: '';
   position: absolute;
   right: -8px;
   top: 50%;
   transform: translateY(-50%);
   border: 8px solid transparent;
   border-left-color: #1e293b;
 }
 
 @keyframes pulse-whatsapp {
   0% {
       box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
   }
   50% {
       box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
   }
   100% {
       box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
   }
 }
 
 /* Modal Melhorias */
 .modal-form {
   display: none;
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 .modal-form.active {
   display: flex;
   opacity: 1;
 }
 
 .modal-form-content {
   transform: scale(0.9);
   transition: transform 0.3s ease;
 }
 
 .modal-form.active .modal-form-content {
   transform: scale(1);
 }
 
 /* Botão Submit Estados */
 #btnEnviarModalWhatsapp {
   width: 100%;
   padding: 14px 24px;
   background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
 }
 
 #btnEnviarModalWhatsapp:disabled {
   background: #e5e7eb;
   color: #9ca3af;
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 #btnEnviarModalWhatsapp:not(:disabled):hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
 }
 
 /* Validação Visual */
 .container-input-form input:focus {
   outline: none;
   border-color: #10b981;
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
 }
 
 .container-input-form input.valid {
   border-color: #10b981 !important;
 }
 
 .container-input-form input.invalid {
   border-color: #ef4444 !important;
 }
 
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 /* Responsivo */
 @media (max-width: 768px) {
   .btn-whatsapp-flutuante {
       bottom: 20px;
       right: 20px;
       width: 55px;
       height: 55px;
   }
   .btn-whatsapp-flutuante i {
       font-size: 28px;
   }
   .tooltip-whatsapp {
       display: none;
   }
 
    }


}
  
  @media only screen and (min-width: 360px) and (max-width: 729px) { 

  /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

  section#beinriobanner { position: relative; width: 100%; height: 100vh; padding: 20px 50px; background: url(../../asset/img/portaria.webp)right / cover no-repeat; ; position: relative;}
  section#beinriobanner h1.titulo-banner-mobile {padding: 0px 60px 0px 0px; font-size: 40px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center;  position: absolute; bottom: 220px; left: 10px; color: #000; font-weight: 600;}
  section#beinriobanner div.descricao-banner-mobile { padding: 0px 60px 0px 0px; font-size: 20px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center;  position: absolute; bottom: 150px; left: 10px; color: #000; font-weight: 600; }
  section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
  section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 10px 20px;  }
  section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 170px; height: 70px; margin-left:  -10px; }
  section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links  ul li { display: none; }
  section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: flex; } 
  section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu button { color: #fff; font-size: 30px;}
  section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
  section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }

  /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */

  section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 20px 20px;;}
  section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; ;}
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: column; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%;  }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 20px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 20px 0px 0px 0px; font-size: 25px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; } 
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 420px; border-radius: 20px;  padding: 20px; margin: 40px 0px; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
  section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
  section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 100%; height: 100%; position: relative; }
  section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
  section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
  section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }


  /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

  section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 20px; background-color: #454643; padding: 30px 0px; }
  section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 30px;  color: #fff; font-weight: 400; padding-bottom: 30px; }
  section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
  section#galeria-beinrio div.container-galerias img { width: 90%; height: 100%; object-fit: cover; border-radius: 20px; }
  section#galeria-beinrio div.container-btn-pages { padding: 20px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex;  gap: 10px; }
  section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 100%; height: 100%; border-radius: 20px; font-size: 30px; }

  /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

  section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 20px; background-color: #F0EFED; padding: 30px 0px; }
  section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 30px;  color: #454643; font-weight: 400; padding-bottom: 30px; }
  section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
  section#galeria-plantas-beinrio div.container-plantas img { width: 90%; height: 100%; object-fit: cover; border-radius: 20px; }
  section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex;  gap: 10px; }
  section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 100%; height: 100%; border-radius: 20px; font-size: 30px; }

  /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */

  section#outros-studios { width: 100%; height: 100%; position: relative; margin-top: -20px;  }
  section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
  section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
  section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
  section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 10px 0px 0px 0px; font-size: 20px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
  section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px; } 
  section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
  section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
  section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; margin-top: 30px; padding: 0px 25px;}
  section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
  section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: cover; border-radius: 20px; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
  section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }

  /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */

  section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 20px; }
  section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
  section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 0px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; text-align: center; }
  section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 20px 0px 30px 0px; font-size: 20px; font-weight: 600; font-family: "Dancing Script", cursive;  text-align: center; }
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem; } 
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px;}
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 100px; height: 100px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 30px; }
  section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 20px; font-weight: 600; color: #454643; padding-bottom: 10px; text-align: center;}
  section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
  section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }

  /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */

  section#localizacao-beinrio { width: 100%; height: 100%; padding: 20px; margin-top: -10px; }
  section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
  section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 0px; text-align: center; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; }
  section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: cover;  border-radius: 20px; margin-top: 30px; }

  /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */

  footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
  footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
  footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 40px; font-weight: 300; text-align: center;  }
  footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 1rem; font-size: 16px; text-align: center; width: 100%;; }
  footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 80%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
  footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 16px; font-weight: 600; }

      /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}

  /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */

  div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }

  /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */

  div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; display: flex; justify-content: flex-start; top: 0; left: 0; display: none; z-index: 10000;}
  div.modal-botao-menu div.modal-content { background-color: #454643; width: 70%; max-width: 320px; height: 100vh; padding: 60px 20px 40px 20px; z-index: 20000; overflow-y: auto; }
  div.modal-botao-menu div.modal-content h2.modal-nome { text-align: center; font-size: 24px; color: #fff; margin-bottom: 5px; }
  div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; font-size: 14px; }
  div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 15px; margin-top: 20px; position: relative;}
  div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
  div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; display: flex; align-items: center; gap: 15px;}
  div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; border-radius: 15px; color: #fff; padding: 12px 0px; font-size: 24px; cursor: pointer; transition: all 0.3s ease; border: none;}
  div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643; }
  div.modal-botao-menu div.modal-content div.modal-info { margin-top: 40px; width: 100%; }
  div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; list-style: none; padding: 0; }
  div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; transition: color 0.3s ease; padding: 8px; text-decoration: none;}
  div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a:hover { color: #BDBFC1; }


  /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */

  div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
   div.modal-form div.modal-form-content {  background-color: #454643; width: 100%; height: 80%; display: flex; border-radius: 20px; padding: 20px ;}
   div.modal-form div.modal-form-content div.modal-form-dados { width: 100%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
   div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0rem;gap: 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 30px; color: #fff; text-align: center; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; margin-left: -10px;}
   div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
   div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
   div.modal-form div.modal-form-content figure { width: 50%; height: 100%; display: none; }
   div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
   div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
   div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
   div.modal-form span.close-modal:hover { background-color: red; border: none; }

  /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }


  }
  
  @media only screen and (min-width: 730px) and (max-width: 767px) { 

    /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

    section#beinriobanner { position: relative; width: 100%; height: 60vh; padding: 20px 50px; background: url(../../asset/img/praiaDeCopacabana/img/banner.webp) center/ cover no-repeat; }
    section#beinriobanner h1.titulo-banner-mobile {display: none;}
      section#beinriobanner div.descricao-banner-mobile { display: none; }
    section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 20px 20px;  }
    section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 150px; height: 100px; margin-left:  -10px;}
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links { gap: 20px; display: flex; align-items: center; gap: 20px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: none; } /* display none no botao do menu */
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }

    /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */

    section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 20px 20px;;}
    section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; ;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: column; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%;  }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 45px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 25px; font-weight: 600; font-family: "Dancing Script", cursive; } 
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 420px; border-radius: 20px;  padding: 20px; margin: 40px 0px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 100%; height: 100%; position: relative; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }


    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #454643; padding: 80px 0px; }
    section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 60px;  color: #fff; font-weight: 400; padding-bottom: 30px;}
    section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-beinrio div.container-galerias img { width: 80%; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-beinrio div.container-btn-pages { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #F0EFED; padding: 50px 0px; }
    section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 60px;  color: #454643; font-weight: 400; padding-bottom: 30px;}
    section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-plantas-beinrio div.container-plantas img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */

    section#outros-studios { width: 100%; height: 100%; position: relative; padding: 30px;  }
    section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px 0px; } 
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 300px; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
    section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 60px;}
    section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
    section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: fill; border-radius: 20px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }


    /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */

    section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 30px; }
    section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
    section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 0px 0px 30px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem 1rem; } 
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; align-items: center; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 250px; height: 100px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 30px; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 20px; font-weight: 600; color: #454643; padding-bottom: 10px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }



    /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */

    section#localizacao-beinrio { width: 100%; height: 100%; padding: 30px; margin-top: -10px; }
    section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
    section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 50px; font-size: 40px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: contain;  border-radius: 20px; margin-top: -60px; }

    /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */

    footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
    footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
    footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 60px; font-weight: 300; text-align: center;  }
    footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 2rem; font-size: 18px; text-align: center; width: 100%;; }
    footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 25px; font-weight: 600; }

        /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}

    /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */

    div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }


    /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */

    div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8);  position: relative; width: 100%; height: 100%; display: flex; justify-content: left; position: absolute; top: 0; left: 0; display: none;}
    div.modal-botao-menu div.modal-content {  background-color: #454643;width: 20%; height: 100vh; padding: 90px 20px;  z-index: 20000; }
    div.modal-botao-menu div.modal-content  h2.modal-nome { text-align: center; font-size: 30px; color: #fff; }
    div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; }
    div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; margin-top: 30px; position: relative;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 200px; height:200px; border-radius: 50%; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; height: 100%; display: flex; align-items: center; gap: 20px;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; border-radius: 20px; color: #fff;  padding: 10px 0px; font-size: 30px; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643;  }
    div.modal-botao-menu div.modal-content div.modal-info { margin-top: 80px;  width: 100%; height: 100%; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px ; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a {  display: flex;  gap: 10px; color: #fff; font-size: 18px;}

   /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */

   div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
   div.modal-form div.modal-form-content {  background-color: #454643; width: 90%; height: 90%; display: flex; border-radius: 20px; padding: 20px ;}
   div.modal-form div.modal-form-content div.modal-form-dados { width: 100%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
   div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 1rem;gap: 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 50px; color: #fff; text-align: center; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
   div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
   div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
   div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
   div.modal-form div.modal-form-content figure { width: 50%; height: 100%; display: none; }
   div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
   div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
   div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
   div.modal-form span.close-modal:hover { background-color: red; border: none; }

    /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }


  }
  
  @media only screen and (min-width: 768px) and (max-width: 1023px) { 

    /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

    section#beinriobanner { position: relative; width: 100%; height: 60vh; padding: 20px 50px; background: url(../../asset/img/praiaDeCopacabana/img/banner.webp) center/ cover no-repeat; }
    section#beinriobanner h1.titulo-banner-mobile {display: none;}
      section#beinriobanner div.descricao-banner-mobile { display: none; }
    section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 20px 20px;  }
    section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 150px; height: 100px; margin-left:  -10px;}
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links { gap: 20px; display: flex; align-items: center; gap: 20px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: none; } /* display none no botao do menu */
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }

    /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */

    section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 20px 20px;;}
    section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; ;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative; flex-direction: column; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%;  }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 45px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 25px; font-weight: 600; font-family: "Dancing Script", cursive; } 
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 420px; border-radius: 20px;  padding: 20px; margin: 40px 0px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 100%; height: 100%; position: relative; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }


    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #454643; padding: 80px 0px; }
    section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 60px;  color: #fff; font-weight: 400; padding-bottom: 30px;}
    section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-beinrio div.container-galerias img { width: 80%; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-beinrio div.container-btn-pages { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #F0EFED; padding: 50px 0px; }
    section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 60px;  color: #454643; font-weight: 400; padding-bottom: 30px;}
    section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-plantas-beinrio div.container-plantas img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */

    section#outros-studios { width: 100%; height: 100%; position: relative; padding: 30px;  }
    section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px 0px; } 
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 300px; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
    section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 60px;}
    section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
    section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: fill; border-radius: 20px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }


    /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */

    section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 30px; }
    section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
    section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 0px 0px 30px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem 1rem; } 
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; align-items: center; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 250px; height: 100px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 30px; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 20px; font-weight: 600; color: #454643; padding-bottom: 10px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }



    /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */

    section#localizacao-beinrio { width: 100%; height: 100%; padding: 30px; margin-top: -10px; }
    section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
    section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 50px; font-size: 40px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: contain;  border-radius: 20px; margin-top: -60px; }

    /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */

    footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
    footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
    footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 60px; font-weight: 300; text-align: center;  }
    footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 2rem; font-size: 18px; text-align: center; width: 100%;; }
    footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 25px; font-weight: 600; }


        /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}
    /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */

    div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }


    /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */

    div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8);  position: relative; width: 100%; height: 100%; display: flex; justify-content: left; position: absolute; top: 0; left: 0; display: none;}
    div.modal-botao-menu div.modal-content {  background-color: #454643;width: 20%; height: 100vh; padding: 90px 20px;  z-index: 20000; }
    div.modal-botao-menu div.modal-content  h2.modal-nome { text-align: center; font-size: 30px; color: #fff; }
    div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; }
    div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; margin-top: 30px; position: relative;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 200px; height:200px; border-radius: 50%; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; height: 100%; display: flex; align-items: center; gap: 20px;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; border-radius: 20px; color: #fff;  padding: 10px 0px; font-size: 30px; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643;  }
    div.modal-botao-menu div.modal-content div.modal-info { margin-top: 80px;  width: 100%; height: 100%; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px ; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a {  display: flex;  gap: 10px; color: #fff; font-size: 18px;}

    /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */

    div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
    div.modal-form div.modal-form-content {  background-color: #454643; width: 90%; height: 90%; display: flex; border-radius: 20px; padding: 20px ;}
    div.modal-form div.modal-form-content div.modal-form-dados { width: 100%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
    div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 1rem;gap: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 50px; color: #fff; text-align: center; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
    div.modal-form div.modal-form-content figure { width: 50%; height: 100%; display: none; }
    div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
    div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
    div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
    div.modal-form span.close-modal:hover { background-color: red; border: none; }

    /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }
   }
  
  @media only screen and (min-width: 1024px) and (max-width: 1365px) { 

        /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

        section#beinriobanner { position: relative; width: 100%; height: 50vh; padding: 20px 50px; background: url(../../asset/img/praiaDeCopacabana/img/banner.webp) center/ cover no-repeat; }
        section#beinriobanner h1.titulo-banner-mobile {display: none;}
      section#beinriobanner div.descricao-banner-mobile { display: none; }
        section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
        section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 20px 20px;  }
        section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 250px; height: 100px; margin-left:  -25px;}
        section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links { gap: 20px; display: flex; align-items: center; gap: 20px; }
        section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: none; } /* display none no botao do menu */
        section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
        section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }
    
        /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */
    
        section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 50px 20px;;}
        section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative}
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 45px; font-weight: 600; font-family: "Dancing Script", cursive; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 25px; font-weight: 600; font-family: "Dancing Script", cursive; } 
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 30%; height: 420px; border-radius: 20px; position: absolute; top: 30px; right: 20px; cursor: pointer;  padding: 20px; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
        section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
        section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 68%; height: 100%; position: relative; }
        section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
        section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
        section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }
    
    
        /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */
    
        section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #454643; padding: 80px 0px; }
        section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 60px;  color: #fff; font-weight: 400; padding-bottom: 30px;}
        section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
        section#galeria-beinrio div.container-galerias img { width: 80%; height: 100%; object-fit: cover; border-radius: 20px; }
        section#galeria-beinrio div.container-btn-pages { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
        section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }
    
        /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */
    
        section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #F0EFED; padding: 50px 0px; }
        section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 60px;  color: #454643; font-weight: 400; padding-bottom: 30px;}
        section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
        section#galeria-plantas-beinrio div.container-plantas img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
        section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
        section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }
    
        /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */
    
        section#outros-studios { width: 100%; height: 100%; position: relative; padding: 30px;  }
        section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
        section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
        section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
        section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
        section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px 0px; } 
        section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 300px; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
        section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
        section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 60px;}
        section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
        section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: fill; border-radius: 20px; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
        section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }
    
    
        /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */
    
        section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 30px; }
        section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
        section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
        section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 0px 0px 30px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem 1rem; } 
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; align-items: center; gap: 40px;}
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 250px; height: 100px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 30px; }
        section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 20px; font-weight: 600; color: #454643; padding-bottom: 10px; }
        section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
        section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }
    
    
    
        /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */
    
        section#localizacao-beinrio { width: 100%; height: 100%; padding: 30px; margin-top: -10px; }
        section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
        section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 50px; font-size: 40px; font-weight: 600; font-family: "Dancing Script", cursive; }
        section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: contain;  border-radius: 20px; margin-top: -60px; }
    
        /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */
    
        footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
        footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
        footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 60px; font-weight: 300; text-align: center;  }
        footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 2rem; font-size: 18px; text-align: center; width: 100%;; }
        footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
        footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 25px; font-weight: 600; }

            /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}
    
        /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */
    
        div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }
    
    
        /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */
    
        div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8);  position: relative; width: 100%; height: 100%; display: flex; justify-content: left; position: absolute; top: 0; left: 0; display: none;}
        div.modal-botao-menu div.modal-content {  background-color: #454643;width: 20%; height: 100vh; padding: 90px 20px;  z-index: 20000; }
        div.modal-botao-menu div.modal-content  h2.modal-nome { text-align: center; font-size: 30px; color: #fff; }
        div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; }
        div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; margin-top: 30px; position: relative;}
        div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 200px; height:200px; border-radius: 50%; }
        div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; height: 100%; display: flex; align-items: center; gap: 20px;}
        div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; border-radius: 20px; color: #fff;  padding: 10px 0px; font-size: 30px; }
        div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643;  }
        div.modal-botao-menu div.modal-content div.modal-info { margin-top: 80px;  width: 100%; height: 100%; }
        div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px ; }
        div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a {  display: flex;  gap: 10px; color: #fff; font-size: 18px;}
    
        /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */
    
        div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
        div.modal-form div.modal-form-content {  background-color: #454643; width: 90%; height: 90%; display: flex; border-radius: 20px; padding: 20px ;}
        div.modal-form div.modal-form-content div.modal-form-dados { width: 50%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
        div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 1rem;gap: 20px; }
        div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 30px; color: #fff; text-align: center; }
        div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
        div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
        div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
        div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
        div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
        div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
        div.modal-form div.modal-form-content figure { width: 50%; height: 100%; }
        div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; object-fit: fill;}
        div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
        div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
        div.modal-form span.close-modal:hover { background-color: red; border: none; }

        /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }
   }
  
  @media only screen and (min-width: 1366px) and (max-width: 1599px) {  

    /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

    section#beinriobanner { position: relative; width: 100%; height: 50vh; padding: 20px 50px; background: url(../../asset/img/praiaDeCopacabana/img/banner.webp) center/ cover no-repeat; }
    section#beinriobanner h1.titulo-banner-mobile {display: none;}
      section#beinriobanner div.descricao-banner-mobile { display: none; }
    section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 20px 20px;  }
    section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 300px; height: 70px; margin-left:  -25px;}
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links { gap: 20px; display: flex; align-items: center; gap: 20px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: none; } /* display none no botao do menu */
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
    section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }

    /* ========================================  DADOS - Be in Rio - Copacabana  ========================================  */

    section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 50px 25px; }
    section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive; } 
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 30%; height: 420px; border-radius: 20px; position: absolute; top: 30px; right: 30px; cursor: pointer;  padding: 20px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 28px; padding: 0px 0px 10px 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 30px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
    section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 68%; height: 100%; position: relative; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px 0px; margin-top: 50px; }
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px; ;}
    section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 20px; }


    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #454643; padding: 80px 0px; }
    section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 60px;  color: #fff; font-weight: 400; padding-bottom: 30px;}
    section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-beinrio div.container-galerias img { width: 80%; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-beinrio div.container-btn-pages { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

    section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #F0EFED; padding: 50px 0px; }
    section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 60px;  color: #454643; font-weight: 400; padding-bottom: 30px;}
    section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
    section#galeria-plantas-beinrio div.container-plantas img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
    section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px 50px; width: 100%; height: 11%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
    section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */

    section#outros-studios { width: 100%; height: 100%; position: relative; padding: 30px;  }
    section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
    section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px 0px; } 
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 300px; height: 50px; color: #fff; border-radius: 20px; margin-top: 40px; }
    section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
    section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin-top: 60px;}
    section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
    section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: fill; border-radius: 20px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
    section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }


    /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */

    section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 30px; }
    section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
    section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 0px 0px 30px 120px; font-size: 30px; font-weight: 600; font-family: "Dancing Script", cursive;  }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem 5rem;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; align-items: center; gap: 40px;}
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 270px; height: 150px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 40px; }
    section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 24px; font-weight: 600; color: #454643; padding-bottom: 20px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
    section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }



    /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */

    section#localizacao-beinrio { width: 100%; height: 100%; padding: 30px; }
    section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
    section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 50px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive; }
    section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: 100%;  border-radius: 20px; margin-top: 20px; }

    /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */

    footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
    footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
    footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 60px; font-weight: 300; text-align: center; }
    footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 32rem; font-size: 24px; text-align: center;}
    footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 25px; font-weight: 600; }

        /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}

    /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */

    div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }


    /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */

    div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8);  position: relative; width: 100%; height: 100%; display: flex; justify-content: left; position: absolute; top: 0; left: 0; display: none;}
    div.modal-botao-menu div.modal-content {  background-color: #454643;width: 20%; height: 100vh; padding: 90px 20px;  z-index: 20000; }
    div.modal-botao-menu div.modal-content  h2.modal-nome { text-align: center; font-size: 30px; color: #fff; }
    div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; }
    div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; margin-top: 30px; position: relative;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 200px; height:200px; border-radius: 50%; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; height: 100%; display: flex; align-items: center; gap: 20px;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; border-radius: 20px; color: #fff;  padding: 10px 0px; font-size: 30px; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643;  }
    div.modal-botao-menu div.modal-content div.modal-info { margin-top: 80px;  width: 100%; height: 100%; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px ; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a {  display: flex;  gap: 10px; color: #fff; font-size: 18px;}

    /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */

    div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
    div.modal-form div.modal-form-content {  background-color: #454643; width: 80%; height: 80%; display: flex; border-radius: 20px; padding: 20px ;}
    div.modal-form div.modal-form-content div.modal-form-dados { width: 60%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
    div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 5rem;gap: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 50px; color: #fff; text-align: center; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
    div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
    div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
    div.modal-form div.modal-form-content figure { width: 40%; height: 100%; }
    div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
    div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
    div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
    div.modal-form span.close-modal:hover { background-color: red; border: none; }

    /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }


   }
  
  @media only screen and (min-width: 1600px) { 

    /* ========================================  HEADER  ID = HEADER-EMPREENDIMENTO  ========================================  */

      section#beinriobanner { position: relative; width: 100%; height: 50vh; padding: 20px 50px; background: url(../../asset/img/praiaDeCopacabana/img/banner.webp) center/ cover no-repeat; }
      section#beinriobanner h1.titulo-banner-mobile {display: none;}
      section#beinriobanner div.descricao-banner-mobile { display: none; }
      section#beinriobanner div.beinrio-banner-container { width: 100%; height: 100%; }
      section#beinriobanner div.beinrio-banner-container  header.banner-header { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 50px); max-width: 100%; z-index: 6999; display: flex; justify-content: space-between; align-items: center;background-color: rgba(0, 0, 0, 0.8); border-radius: 20px; padding: 20px 20px;  }
      section#beinriobanner div.beinrio-banner-container  header.banner-header figure img { width: 300px; height: 70px; margin-left:  -25px;}
      section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links { gap: 20px; display: flex; align-items: center; gap: 20px; }
      section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links div.beinrio-menu { display: none; } /* display none no botao do menu */
      section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul { display: flex; align-items: center; justify-content: center; gap: 30px; }
      section#beinriobanner div.beinrio-banner-container  header.banner-header nav.beinrio-links ul li a { color: #BDBFC1; font-size: 18px; font-weight: 600;  }

    /* ========================================  DADO - Be in Rio - Copacabana  ========================================  */

      section#beinrio-dados {   width: 100%; height: 100%; position: relative; padding: 50px 25px; }
      section#beinrio-dados div.beinrio-dados-container {  width: 100%;  height: 100%; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio { display: flex; align-items: center; justify-content: space-between; position: relative}
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio { width: 100%; height: 100%; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h1.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 60px; font-weight: 600; font-family: "Dancing Script", cursive; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio div.titulo-beinrio h2.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 40px; font-weight: 600; font-family: "Dancing Script", cursive; } 
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario { background-color: rgba(0, 0, 0, 0.8); width: 30%; height: 380px; border-radius: 20px; position: absolute; top: 30px; right: 30px; cursor: pointer;  padding: 20px; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario h2.banner-form-titulo { color: #fff; font-size: 18px; padding: 0px 0px 10px 0px;}
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form {  width: 100%; height: 100%;  display: flex; flex-direction: column; gap: 20px; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input { width: 100%; height: 60px; border-bottom: 1px solid #fff; padding: 0px 0px; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input { width: 100%; height: 100%; background-color: transparent; color: #fff; ;}
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.container-input input::placeholder { color: #fff; }
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form { border: 1px solid #fff; border-radius: 20px; margin-top: 0px;}
      section#beinrio-dados div.beinrio-dados-container  div.bloco-titulo-beinrio form.banner-formulario div.container-form div.btn-container-form input { border-radius: 20px; color: #fff; font-weight: 600; font-size: 20px; }
      section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio {  width: 68%; height: 100%; position: relative; }
      section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; margin-top: 50px; }
      section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li { display: flex; flex-direction: column; gap: 10px; align-items: center;text-align: center; font-size: 14px;}
      section#beinrio-dados div.beinrio-dados-container nav.dados-tipologia-beinrio ul li i { font-size: 30px; }
    

     /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

      section#galeria-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #454643; padding: 50px 0px; }
      section#galeria-beinrio h2.galeria-titulo { text-align: center;  font-size: 60px;  color: #fff; font-weight: 400; padding-bottom: 30px;}
      section#galeria-beinrio div.container-galerias {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
      section#galeria-beinrio div.container-galerias img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
      section#galeria-beinrio div.container-btn-pages { padding: 20px 50px; width: 100%; height: 100%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
      section#galeria-beinrio div.container-btn-pages button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

     /* ========================================  Galeria de Fotos - Be in Rio - Copacabana  ========================================  */

      section#galeria-plantas-beinrio { width: 100%; height: 100%; position: relative;  margin-top: 50px; background-color: #F0EFED; padding: 50px 0px; }
      section#galeria-plantas-beinrio h2.galeria-plantas-titulo { text-align: center;  font-size: 60px;  color: #454643; font-weight: 400; padding-bottom: 30px;}
      section#galeria-plantas-beinrio div.container-plantas {  width: 100%; height: 600px;  display: flex; justify-content: center; align-items: center; }
      section#galeria-plantas-beinrio div.container-plantas img { width: auto; height: 100%; object-fit: cover; border-radius: 20px; }
      section#galeria-plantas-beinrio div.container-btn-plantas { padding: 20px 50px; width: 100%; height: 100%; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
      section#galeria-plantas-beinrio div.container-btn-plantas button { background-color: rgba(0, 0, 0, 0.8);  color: #fff; width: 90px; height: 90px; border-radius: 50%; font-size: 30px; }

    /* ========================================  Outros Studios - Be in Rio - Copacabana  ========================================  */

      section#outros-studios { width: 100%; height: 100%; position: relative; padding: 30px;  }
      section#outros-studios div.outros-studios-container { width: 100%; height: 100%;  }
      section#outros-studios div.outros-studios-container div.titulo-bein { width: 100%; height: 100%;  }
      section#outros-studios div.outros-studios-container div.titulo-bein h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 80px; font-weight: 600; font-family: "Dancing Script", cursive; }
      section#outros-studios div.outros-studios-container div.titulo-bein h3.titulo-beinrio-sub { padding: 0px 0px 0px 120px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive;  }
      section#outros-studios div.outros-studios-container div.descricao-outros-studios { width: 100%; height: 100%; padding: 20px 0px; } 
      section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios {  background-color: rgba(0, 0, 0, 0.8); width: 300px; height: 50px; color: #fff; border-radius: 20px; margin-top: 20px; }
      section#outros-studios div.outros-studios-container div.descricao-outros-studios button.outros-studios:hover { background-color: transparent; color: #454643;  border: 2px solid #454643; font-weight: 600; }
      section#outros-studios div.grid-studios {  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; margin-top: 60px; }
      section#outros-studios div.grid-studios div.grid-card-studios { width: 100%; height: 100%; border-radius: 20px; box-shadow: inset; position: relative; }
      section#outros-studios div.grid-studios div.grid-card-studios figure img { width: 100%; height: 500px; object-fit: 100%; border-radius: 20px; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios { background-color: rgba(0, 0, 0, 0.8);  border-radius: 20px; padding: 20px 30px; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); height: auto; ; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios h2.nome-studio { font-size: 18px; color: #fff; font-weight: 600; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia { width: 100%; height: 100%; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul {  display: flex; align-items: center; justify-content: space-between; padding: 10px 0px ; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios nav.card-tipologia ul li { font-size:  16px; color: #fff; font-weight: 600; display: flex; gap: 10px; align-items: center; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book { display: flex; align-items: center; justify-content: space-between; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor { width: 50%; height: 100%; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor p.valor-studios { font-size: 12px; color: #fff; font-weight: 600; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book div.container-card-valor span.valor-empreendimento {  color: #fff; font-weight: 600; font-size: 18px; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid { border: 1px solid #fff; width: 50%; height: 100%; padding: 5px 0px;  border-radius: 20px; color: #fff; }
      section#outros-studios div.grid-studios div.grid-card-studios div.card-info-studios div.valor-botao-book  button.book-studios-grid:hover { background-color: #fff; color: #454643; font-weight: 600; }

      
    /* ========================================  Investimentos Studios - Be in Rio - Copacabana  ========================================  */

      section#investimento-studios { width: 100%; height: 100%; position: relative; padding: 30px; }
      section#investimento-studios div.investimentos-studios-container { width: 100%; height: 100%; }
      section#investimento-studios div.investimentos-studios-container h2.titulo-beinrio { padding: 30px 0px 0px 50px; font-size: 80px; font-weight: 600; font-family: "Dancing Script", cursive; }
      section#investimento-studios div.investimentos-studios-container h3.titulo-beinrio-sub { padding: 0px 0px 30px 120px; font-size: 50px; font-weight: 600; font-family: "Dancing Script", cursive;  }
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav {  width: 100%; height: 100%; margin: 80px 0px;  padding: 0rem 12rem;}
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul { display: flex; flex-direction: column; gap: 40px;}
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li { width: 100%; height: 100%; display: flex; align-items: center; gap: 40px;}
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest  { width: 250px; height: 150px; background-color: rgba(0, 0, 0, 0.8);  border-radius: 50%; display: flex; align-items: center; justify-content: center; }
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.icone-invest i { color: #fff; font-size: 40px; }
      section#investimento-studios div.investimentos-studios-container div.investimentos-cards nav ul li div.descricao-investimentos-cards h3.titulo-card-invest { font-size: 24px; font-weight: 600; color: #454643; padding-bottom: 20px; }
      section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria { display: flex; justify-content: center; text-align: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); font-size: 20px; font-weight: 600; color: #fff; padding: 10px 0px; border-radius: 20px; }
      section#investimento-studios div.investimentos-studios-container button.calculadora-imobiliaria:hover { background-color: transparent; border: 1px solid #454643; color: #454643; }



      /* ========================================  Localização- Be in Rio - Copacabana  ========================================  */

       section#localizacao-beinrio { width: 100%; height: 100%; padding: 30px; }
       section#localizacao-beinrio div.container-localizacao-beinrio { width: 100%; height: 100%; }
       section#localizacao-beinrio div.container-localizacao-beinrio h2.titulo-localizacao { padding: 30px 0px 20px 50px; font-size: 80px; font-weight: 600; font-family: "Dancing Script", cursive; }
       section#localizacao-beinrio div.container-localizacao-beinrio div.banner-localizacao img { width: 100%; height: 700px; object-fit: 100%;  border-radius: 20px; margin-top: 20px; }

    /* ========================================  Footer - Be in Rio - Copacabana  ========================================  */

    footer#beinrio-footer { width: 100%; height: 100%; background-color: #454643; display: flex; justify-content: center; align-items: center; margin: 40px 0px 0px 0px; padding: 50px 0px; ;}
    footer#beinrio-footer div.container-footer {width: 100%; height: 100%; }
    footer#beinrio-footer div.container-footer div.container-form-footer  h3.titulo-footer { color: #fff;  font-size: 60px; font-weight: 300; text-align: center; }
    footer#beinrio-footer div.container-footer div.container-form-footer p.descricao-footer { color: #fff; padding: 1rem 2rem; font-size: 24px; text-align: center; }
    footer#beinrio-footer div.container-footer div.container-form-footer form { margin-top: 25px; width: 100%; height: 100%;  display: flex; align-items: center; flex-direction: column; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input { background-color: transparent; border-bottom: 1px solid #fff;}
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input { width: 100%; height: 100%; padding: 25px; background-color: transparent; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.container-input input::placeholder { color: #fff; font-size: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer {  background-color: #fff; margin-top: 30px; border-radius: 20px; }
    footer#beinrio-footer div.container-footer div.container-form-footer form div.container-form-footer div.btn-form-footer input { font-size: 25px; font-weight: 600; }

    /* FORMULÁRIO FOOTER - ESTILOS ADICIONAIS */
#formContatoFooter .error-footer {display: none; color: #ef4444;font-size: 12px;margin-top: 5px;  font-weight: 500; }
#formContatoFooter input,
#formContatoFooter textarea {  transition: all 0.3s; background-color: transparent; color: #fff; border: none;  }
#formContatoFooter input:focus,
#formContatoFooter textarea:focus {  outline: none;  border-color: #10b981 !important;  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);}
.btn-form-footer button {  width: 100%;  padding: 16px 24px;  background: linear-gradient(135deg, #10b981 0%, #059669 100%);  color: white;  border: none;  border-radius: 8px;  font-size: 16px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  display: flex;  align-items: center;  justify-content: center;  gap: 10px;}
.btn-form-footer button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.btn-form-footer button:disabled { opacity: 0.6; cursor: not-allowed; transform: none;}
#mensagemSucessoFooter button:hover { transform: translateY(-2px);  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);}
#mensagemSucessoFooter button:last-child:hover { background: #e5e7eb;  box-shadow: none;}

    /* ========================================  Desenvolvimento  - Be in Rio - Copacabana  ========================================  */

    div.desenvolvimento {  width: 100%; height: 100%; display: flex; justify-content: center; padding: 5px 0px; }


    /* ========================================  Modal  Botão  Menu - Be in Rio - Copacabana  ========================================  */

    div.modal-botao-menu { background-color: rgba(0, 0, 0, 0.8);  position: relative; width: 100%; height: 100%; display: flex; justify-content: left; position: absolute; top: 0; left: 0; display: none;}
    div.modal-botao-menu div.modal-content {  background-color: #454643;width: 100%; height: 100vh; padding: 90px 20px;  z-index: 20000; }
    div.modal-botao-menu div.modal-content  h2.modal-nome { text-align: center; font-size: 30px; color: #fff; }
    div.modal-botao-menu div.modal-content p.modal-funcao { text-align: center; color: #fff; }
    div.modal-botao-menu div.modal-content div.container-bottonImg { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; margin-top: 30px; position: relative;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.card-modal img { width: 200px; height:200px; border-radius: 50%; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu { width: 100%; height: 100%; display: flex; align-items: center; gap: 20px;}
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button { background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; border-radius: 20px; color: #fff;  padding: 10px 0px; font-size: 30px; }
    div.modal-botao-menu div.modal-content div.container-bottonImg div.container-btn-menu button:hover { background-color: #BDBFC1; color: #454643;  }
    div.modal-botao-menu div.modal-content div.modal-info { margin-top: 80px;  width: 100%; height: 100%; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px ; }
    div.modal-botao-menu div.modal-content div.modal-info nav.modal-links ul li a {  display: flex;  gap: 10px; color: #fff; font-size: 18px;}

 /* ========================================  Modal  Botão  WhatsApp - Be in Rio - Copacabana  ========================================  */

 div.modal-form { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100vh; z-index: 6999; display: flex; justify-content: center; align-items: center;background-color: rgba(0, 0, 0, 0.8); padding: 20px 20px; display: none;}
 div.modal-form div.modal-form-content {  background-color: #454643; width: 80%; height: 80%; display: flex; border-radius: 20px; padding: 20px ;}
 div.modal-form div.modal-form-content div.modal-form-dados { width: 60%; height: 100%;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
 div.modal-form div.modal-form-content div.modal-form-dados form { width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 5rem;gap: 20px; }
 div.modal-form div.modal-form-content div.modal-form-dados p.descricao-modal-form {  font-size: 50px; color: #fff; text-align: center; }
 div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form { background-color: #fff; width: 100%; height: auto; border-radius: 20px; }
 div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input { width: 90%; height: 100%; padding: 20px 0px 20px 25px;  border-radius: 20px 0px 0px 20px; }
 div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form input::placeholder { color: #454643; }
 div.modal-form div.modal-form-content div.modal-form-dados div.container-input-form i { font-size: 20px; }
 div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi { background-color: transparent; border: 1px solid #fff; padding: 0px 0px; }
 div.modal-form div.modal-form-content div.modal-form-dados form div.input-btn-modal-formi input { background-color: transparent; color: #fff; font-size: 20px; font-weight: 600; cursor: pointer; width: 100%;}
 div.modal-form div.modal-form-content figure { width: 40%; height: 100%; }
 div.modal-form div.modal-form-content figure img { width: 100%; height: 100%; border-radius: 20px; }
 div.modal-form span.close-modal { background-color: transparent; position: absolute; top: 40px; right: 40px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; }
 div.modal-form span.close-modal i { font-size: 20px; color: #fff; }
 div.modal-form span.close-modal:hover { background-color: red; border: none; }

 /* Botão Flutuante WhatsApp */
 .btn-whatsapp-flutuante {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.btn-whatsapp-flutuante i {
  font-size: 32px;
  color: white;
}

.tooltip-whatsapp {
  position: absolute;
  right: 75px;
  background: #1e293b;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-whatsapp-flutuante:hover .tooltip-whatsapp {
  opacity: 1;
  right: 85px;
}

.tooltip-whatsapp::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

@keyframes pulse-whatsapp {
  0% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
      box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
}

/* Modal Melhorias */
.modal-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-form.active {
  display: flex;
  opacity: 1;
}

.modal-form-content {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-form.active .modal-form-content {
  transform: scale(1);
}

/* Botão Submit Estados */
#btnEnviarModalWhatsapp {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btnEnviarModalWhatsapp:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

#btnEnviarModalWhatsapp:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Validação Visual */
.container-input-form input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.container-input-form input.valid {
  border-color: #10b981 !important;
}

.container-input-form input.invalid {
  border-color: #ef4444 !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .btn-whatsapp-flutuante {
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
  }
  .btn-whatsapp-flutuante i {
      font-size: 28px;
  }
  .tooltip-whatsapp {
      display: none;
  }

   }
  }