@charset "utf-8";
/* CSS Document */
 :root {
      --vinho: #4b000f;
      --dourado: #fae053;
      --vinho-claro: #6a0f2b;
      --max-width: 1320px; /* largura máxima como no Elementor */
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f8f8f8;
      margin: 0;
      padding: 0;
      color: #333;
    }

    /* =============================
       CONTAINER GLOBAL (como Elementor)
    ============================= */
    .wrapper {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 20px; /* margens laterais em telas menores */
      box-sizing: border-box;
    }

    /* =============================
   HERO DESKTOP - COMPORTAMENTO ELEMENTOR
============================= */
.hero-desktop {
  background-color: var(--vinho);
  background-image: url('images/inicial-hero.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 95% center; /* garante imagem mais à direita */
  height: 650px;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
}

/* o wrapper atua como o container fixo do Elementor */
.hero-desktop .wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 80px;  /* espaço interno à esquerda */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* coluna interna de texto, alinhada totalmente à esquerda do wrapper */
.hero-content {
  max-width: 500px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 3;
}

.hero-content img {
  width: 220px;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--dourado);
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #fff;
}
/* =============================
   BOTÃO HERO (desktop + mobile)
============================= */
.btn-hero {
    width: 80%;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #d4af37, #ffd700);
  color: var(--vinho);
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: transform 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* espaço entre texto e ícone */
  cursor: pointer;
  text-decoration: none;
}

/* brilho correndo animado */
.btn-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60px;
  width: 40px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 30px 20px #ffffffaa;
  transform: skewX(-30deg);
  mix-blend-mode: plus-lighter;
  animation: brilho 3s linear infinite;
  opacity: 0;
  z-index: 1;
  pointer-events: none; /* ← permite clique no botão no mobile */
}

@keyframes brilho {
  0% {
    opacity: 0;
    left: -60px;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 110%;
  }
}

/* efeito de hover (desktop) */
.btn-hero:hover {
  transform: scale(1.05);
}

/* ícone animado */
.btn-hero i {
  transition: transform 0.3s ease;
}

.btn-hero:hover i {
  transform: scale(1.2) rotate(10deg);
}



/* --- Ajustes para telas médias (1366–1600px) --- */
@media (max-width: 1600px) and (min-width: 1200px) {
  .hero-desktop {
    background-position: 88% center; /* desloca imagem um pouco mais */
  }
  .hero-desktop .wrapper {
    padding-left: 60px;
  }
}

/* --- Telas grandes (1920px ou mais) --- */
@media (min-width: 1920px) {
  .hero-desktop {
    background-position: 97% center;
  }
  .hero-desktop .wrapper {
    padding-left: 100px;
  }
}

/* --- Telas menores (notebooks finos) --- */
@media (max-width: 1200px) {
    
    .hero-desktop {
    background-position: 65% center;
  }
  .hero-desktop .wrapper {
    padding-left: 40px;
  }
  .hero-content h1 {
    font-size: 2.4rem;
  }
}




  




/* ===========================================================
   HERO MOBILE - Versão moderna e 100% compatível (2025)
   =========================================================== */

/* 🔹 Estilo base (iPhones pequenos, Androids compactos, até 359px) */
.hero-mobile {
  display: none;
  position: relative;
  background-color: var(--vinho);
  background-image: url('images/inicial-mobile.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  color: #fff;
  text-align: center;
  width: 100%;
  height: auto;
  padding-top: 0;
  padding-bottom: 60px;
  overflow: hidden;
}

/* ================= IMAGEM FLUTUANTE PRINCIPAL ================= */
.hero-mobile .img-flutuante {
  position: absolute;
  top: 120px;
  left: 80%;
  width: 100px;
  animation: flutuar 6s ease-in-out infinite;
  z-index: 3;
}

/* ================= IMAGEM FLUTUANTE SUAVE ================= */
.hero-mobile .img-flutuante-suave {
  position: absolute;
  top: 70px;
  left: 25%;
  width: 70px;
  animation: flutuarSuave 5s ease-in-out infinite;
  z-index: 3;
}

/* ================= ANIMAÇÕES ================= */
@keyframes flutuar {
  0%   { transform: translate(-50%, 0) rotate(0deg); }
  25%  { transform: translate(-50%, -10px) rotate(2deg); }
  50%  { transform: translate(-50%, -15px) rotate(-3deg); }
  75%  { transform: translate(-50%, -8px) rotate(1deg); }
  100% { transform: translate(-50%, 0) rotate(0deg); }
}

@keyframes flutuarSuave {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(-3deg); }
  75%  { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}

/* ===========================================================
   📱 RESPONSIVIDADE REAL - Breakpoints otimizados (mobile → desktop)
   =========================================================== */

/* 🔸 360–399px → iPhone SE, Galaxy J2, Moto E antigo */
@media (min-width: 360px) {
  .hero-mobile .img-flutuante {
    top: 125px;
    left: 78%;
    width: 100px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 70px;
    left: 34%;
    width: 75px;
  }
}

/* 🔸 400–479px → iPhone 8, XR, 11, Galaxy S8–S10 */
@media (min-width: 400px) {
  .hero-mobile .img-flutuante {
    top: 140px;
    left: 78%;
    width: 115px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 80px;
    left: 35%;
    width: 80px;
  }
}

/* 🔸 480–575px → iPhone 12 Mini, Androids médios */
@media (min-width: 480px) {
  .hero-mobile .img-flutuante {
    top: 155px;
    left: 78%;
    width: 120px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 90px;
    left: 35%;
    width: 90px;
  }
}

/* 🔸 576–767px → iPhone 14 Pro Max, Galaxy S23 Ultra, tablets verticais */
@media (min-width: 576px) {
  .hero-mobile .img-flutuante {
    top: 160px;
    left: 77%;
    width: 140px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 95px;
    left: 35%;
    width: 95px;
  }
}

/* 🔸 768–991px → iPads, tablets horizontais, Galaxy Fold */
@media (min-width: 768px) {
  .hero-mobile .img-flutuante {
    top: 240px;
    left: 77%;
    width: 180px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 140px;
    left: 38%;
    width: 100px;
  }
}

/* 🔸 992–1199px → Notebooks pequenos / tablets grandes */
@media (min-width: 992px) {
  .hero-mobile .img-flutuante {
    top: 180px;
    left: 62%;
    width: 160px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 110px;
    left: 45%;
    width: 110px;
  }
}

/* 🔸 1200–1399px → Notebooks médios / desktops padrão */
@media (min-width: 1200px) {
  .hero-mobile .img-flutuante {
    top: 200px;
    left: 60%;
    width: 180px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 120px;
    left: 46%;
    width: 120px;
  }
}

/* 🔸 1400px+ → Monitores grandes, iMac, Full HD */
@media (min-width: 1400px) {
  .hero-mobile .img-flutuante {
    top: 220px;
    left: 55%;
    width: 200px;
  }
  .hero-mobile .img-flutuante-suave {
    top: 130px;
    left: 48%;
    width: 130px;
  }
}












/* cria uma área interna abaixo da imagem para os textos e botão */
.hero-mobile .wrapper {
  padding: 410px 20px 20px 20px;
  position: relative;
  z-index: 2;
}
      
      
      @media (min-width: 768px) {
  .hero-mobile .wrapper {
  padding: 700px 20px 20px 20px;
  position: relative;
  z-index: 2;
}
}

.hero-mobile img {
  width: 200px;
  margin-bottom: 10px;
}

.hero-mobile h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dourado);
  margin-top: 15px;
}

.hero-mobile p {
  font-size: 1.1rem;
  margin: 15px 0;
  color: #fff;
}

.hero-mobile .btn-hero {
  background: linear-gradient(90deg, #d4af37, #ffd700);
  color: var(--vinho);
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 1.3rem;
  text-transform: uppercase;
  transition: 0.3s;
}

.hero-mobile .btn-hero:hover {
  transform: scale(1.05);
}

/* Responsividade */
@media (max-width: 991px) {
  .hero-desktop { display: none; }
  .hero-mobile { display: block; }
}
      
      


    /* =============================
       FORMULÁRIO
    ============================= */
    #formulario {
      background-color: var(--vinho);      
      color: #fff;
    }

    .form-card {
      background-color: #fff;
      padding: 40px 20px;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      width: 100%;
    }

    .form-card h2 {
      color: var(--vinho);
      font-weight: 700;
      text-align: center;
      margin-bottom: 30px;
      text-transform: uppercase;
    }

    .input-group-text {
      background-color: var(--vinho-claro);
      color: #fff;
      border: none;
    }

    .btn-enviar {
      background: linear-gradient(90deg, #d4af37, #ffd700);
      color: var(--vinho);
      font-weight: 700;
      border: none;
      border-radius: 10px;
      padding: 14px 20px;
      width: 100%;
      font-size: 1.1rem;
      transition: 0.3s;
    }

    .btn-enviar:hover {
      transform: scale(1.03);
    }

    /* =============================
       REGULAMENTO
    ============================= */
    #regulamento {
      background-color: var(--vinho);
      padding-top: 50px;
      color: #fff;
    }

    #regulamento h2 {
      color: var(--dourado);
      font-weight: 700;
      text-align: center;
      border-bottom: 1px solid var(--vinho);
      text-transform: uppercase;
    }

    /* Ajuste visual do acordeão */
.accordion-item {
  border: 1px solid #b88a00; /* dourado mais escuro para borda */
  border-bottom: none; /* remove borda duplicada entre itens */
  margin: 0; /* elimina espaços brancos verticais */
}

.accordion-item:last-child {
  border-bottom: 1px solid #b88a00; /* mantém borda inferior no último */
}

.accordion-button {
  background-color: var(--dourado) !important;
  color: var(--vinho) !important;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0 !important; /* remove cantos arredondados entre itens */
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

.accordion-body {
  border-top: 1px solid rgba(0,0,0,0.1);
  background-color: #fff;
  color: #000;
  margin: 0;
  padding: 20px 25px;
}

/* Opcional: efeito hover para melhorar a interação */
.accordion-button:hover {
  background-color: #f7d94c !important;
}


    footer {
      background-color: var(--vinho);
      color: #fff;
      text-align: center;
      padding: 20px;
      font-size: 0.9rem;
    }
      
/* ===== Validação visual aprimorada (não mostra erro ao carregar) ===== */
input[required]:focus:invalid {
  border-color: #dc3545 !important;
}

input[required]:focus:valid {
  border-color: #198754 !important;
}

/* Só mostra borda vermelha DEPOIS que o usuário tocou no campo */
input[required].tocado:invalid {
  border-color: #dc3545 !important;
}

input:focus {
  box-shadow: 0 0 0 2px rgba(250, 224, 83, 0.4);
  outline: none;
}



/* =============================
   INPUTS VISÍVEIS E RESPONSIVOS
============================= */
/* =============================
   INPUTS MODERNOS E ADAPTÁVEIS
============================= */

input.form-control,
select.form-select,
textarea.form-control {
  font-size: clamp(1rem, 2.5vw, 1.4rem) !important;
  padding: clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 18px) !important;
  line-height: 1.5 !important;
  color: #333 !important;
  border: 2px solid #ccc !important;              /* borda mais grossa e neutra */
  
  transition: all 0.25s ease-in-out !important;   /* transição suave */
  background-color: #fff !important;
}

/* Ícones à esquerda */
.input-group-text {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
  padding: clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 18px) !important;
  background-color: var(--vinho-claro) !important;
  color: #fff !important;
  border: none !important;
  
}

/* Placeholders */
::placeholder {
  font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
  color: #999 !important;
  opacity: 1; /* garante visibilidade */
}

/* Foco suave */
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
  border-color: var(--dourado) !important;
  box-shadow: 0 0 0 4px rgba(250, 224, 83, 0.35) !important;
  outline: none !important;
}

/* Estado válido (borda verde + leve brilho) */
input.form-control.is-valid,
select.form-select.is-valid,
textarea.form-control.is-valid {
  border-color: #198754 !important;
  box-shadow: 0 0 6px rgba(25, 135, 84, 0.4) !important;
}

/* Estado inválido (borda vermelha + leve brilho) */
input.form-control.is-invalid,
select.form-select.is-invalid,
textarea.form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 6px rgba(220, 53, 69, 0.4) !important;
}

/* ===== Acessibilidade Mobile ===== */
@media (max-width: 768px) {
  input.form-control,
  select.form-select,
  textarea.form-control {
    border-width: 2.5px !important;
  }

  .input-group-text {
    border-width: 2.5px !important;
  }
}



 

/* =======================
       BARRA FLUTUANTE
    ======================= */
    .share-bar {
      position: fixed;
      bottom: 25px;
      left: 25px;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .share-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.6rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.25);
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      border: none;
    }

    .share-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    }

    /* Cores */
    .share-btn.whatsapp { background-color: #25D366; }
    .share-btn.facebook { background-color: #1877f2; }
    .share-btn.instagram { 
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }
    .share-btn.link { background-color: #ffb400; }
.share-btn.native {
  background-color: #6f42c1; /* Roxo elegante */
}

    /* Mobile */
    @media (max-width: 768px) {
      .share-bar {
        flex-direction: row;
        justify-content: center;
              left: 0; /* 👈 pode deixar left, combina melhor */

        bottom: 0;
        right: 0;
        width: 100%;
        background-color: rgba(255,255,255,0.95);
        padding: 12px 0;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
      }

      .share-btn {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
      }
    }

    /* Animação suave na entrada */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .container-main {
      animation: fadeInUp 0.7s ease-out;
    }