/* ===== IMPORTAÇÃO DE FONTE ===== */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

  /* ===== RESET GLOBAL ===== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ===== BODY ===== */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
  }

  /* Controle de quebras de linha por dispositivo */
  .mobile-br {
    display: none;
  }

  .desktop-br {
    display: inline;
  }

  @media (max-width: 768px) {
    .mobile-br {
      display: inline !important;
    }

    .desktop-br {
      display: none !important;
    }
  }

  a {
    text-decoration: none;
  }

  /* ===== SEÇÃO HERO ===== */
  .hero {
    min-height: 100vh;
    /* Reduz a altura da seção hero */
    /* Alonga a seção hero */
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),
      url('img/FundoAdorne.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    image-rendering: -webkit-optimize-contrast;
  }

  .content {
    z-index: 2;
    max-width: 100%;
    text-align: center;
    transform: translateY(40vh);

  }

  .titulo {
    text-align: center;
    margin-top: 0;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  /* ===== TEXTOS DESTACADOS ===== */
  .highlight {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
    display: block;
    margin-top: 5px;
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ===== BOTÃO PRINCIPAL ===== */
  .btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 4vw;
    font-size: 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    margin-bottom: 70px;
  }

  .btn:hover {
    background: linear-gradient(90deg, #F59E4C, #EB5E57) padding-box;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  /* ===== SEÇÃO FOGUETE ===== */
  .foguete {
    min-height: 80vh;
    /* Reduz a altura da seção foguete */
    width: 100%;
    background: url('img/FundoB.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10% 10%;
    text-align: left;
  }

  .highlight2 {
    font-weight: bold;
    font-size: 2rem;
    margin-top: 80px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .subtitulo {
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #ffffff;
    line-height: 1.5;
    max-width: 600px;
  }

  /* ===== TÍTULO CENTRAL DESTACADO ===== */
  .highlight3 {
    text-align: center;
    font-weight: bold;
    margin: 60px 0;
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
  }

  /* ===== CARDS ===== */
  .cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .card {
    background-color: #3a2a1e;
    border-radius: 10px;
    width: 260px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
  }

  .icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
  }

  .icon img:first-child {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.8);
  }

  .icon img:last-child {
    opacity: 1;
    transform: scale(0.7);
  }

  .card h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
  }

  .line {
    width: 60%;
    height: 2px;
    background: linear-gradient(45deg, #ff5f6d, #ffc371);
    margin: 10px auto 15px;
    border-radius: 2px;
  }

  .card p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }

  .card:hover {
    background-color: #fff;
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  .card:hover .line {
    background: linear-gradient(45deg, #ff5f6d, #ffc371);
  }

  /* ===== BOTÃO SECUNDÁRIO ===== */
  .btn2 {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 8vw;
    font-size: 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 60px auto;
    display: block;
    outline: none;
  }

  .btn2:hover {
    background: linear-gradient(90deg, #F59E4C, #EB5E57) padding-box;
    border: 2px solid transparent;
    background-clip: padding-box;

  }

  /* ===== BOX CINZA ===== */
  .boxc {
    background-color: #272727;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    margin: 30px auto;
    text-align: center;
    max-width: 90%;
  }

  /* ===== TÍTULOS SECUNDÁRIOS ===== */
  .highlight4 {
    text-align: center;
    font-weight: bold;
    margin: 60px 0 40px;
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.1rem;
  }

  .subtitulo2 {
    text-align: center;
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #ffffff;
    line-height: 1.5;
    width: 100%;
  }

  /* ===== PERFIL BASE ===== */
  .perfil {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3vh;
    padding: 60px 10%;
    background-color: #272727;
    border-radius: 15px;
    flex-wrap: wrap;
    margin: 20px auto;
    max-width: 1200px;
  }

  .perfil-texto {
    flex: 1 1 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  .perfil-foto {
    margin-top: 10vh;
    flex: 0 0 330px;
    height: 320px;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    position: relative;
    transition: all 0.5s ease;
    cursor: pointer;
  }

  /* Imagem normal (visível) */
  .foto-normal {
    width: 180%;
    height: 130%;
    object-fit: contain;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
  }

  /* Imagem hover (invisível inicialmente) */
  .foto-hover {
    width: 180%;
    height: 130%;
    object-fit: contain;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
    opacity: 0;
  }

  /* Efeitos no hover */
  .perfil-foto:hover {
    background: linear-gradient(135deg, #F59E4C, #EB5E57);
    transform: translateY(0px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .perfil-foto:hover .foto-normal {
    opacity: 0;
  }

  .perfil-foto:hover .foto-hover {
    opacity: 1;
  }

  /* Título com retângulo à esquerda */
  .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .icon1 {
    width: 8px;
    height: 30px;
  }

  .nomes {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
  }

  .descricao1 {
    font-weight: 400;
    font-size: 1rem;
    color: #bbb;
    margin-bottom: 10px;
  }

  .descricao {
    font-weight: 400;
    font-size: 1rem;
    color: #fff;
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 0px;
  }

  /* Botão */
  .btn3 {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 40px;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: 6vh;
    margin-bottom: 20px;
  }

  .btn3:hover {
    background: linear-gradient(90deg, #F59E4C, #EB5E57) padding-box;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .perfil-bia .perfil-texto {
    position: relative;
    left: 90px;
    /* 🔥 FORÇA o deslocamento */
    margin-left: 80px;
    /* 🔥 Dupla garantia */
    flex: 1;
  }

  .perfil-bia {
    position: relative;
  }



  .linha-divisoria {
    height: 1px;
    background-color: white;
    margin: 20px 0;
    width: 100%;
  }

  @media (max-width: 900px) {
    .perfil {
      flex-direction: column;
      /* Ordem natural, vamos controlar com 'order' */
      text-align: center;
      gap: 30px;
      padding: 40px 5%;
      margin: 0 20px;
      /* Espaço nas bordas (caixa cinza desgrudada) */
    }

    .perfil-foto {
      width: 80%;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      order: -1;
      /* Força a foto a ser sempre o PRIMEIRO item */
    }

    .perfil-texto {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Garante que tudo dentro fique centralizado */
    }

    /* Centralizar o nome (que antes estava à esquerda por causa do flex) */
    .logo {
      justify-content: center;
      width: 100%;
    }

    .btn3 {
      margin: 10px auto 20px;
    }

    /* Ajustes para mobile no hover */
    .perfil-foto:hover {
      transform: none;
    }

    .nomes {
      font-size: 1.6rem;
    }
  }

  @media (max-width: 768px) {
    .perfil {
      padding: 30px 5%;
      gap: 20px;
    }

    .perfil-foto {
      width: 90%;
      height: auto;
    }

    .perfil-texto {
      flex: 1 1 100%;
    }

    /* Ajuste Hero Mobile: subir conteudo e ajustar fontes */
    .content {
      transform: translateY(5vh) !important;
    }

    .titulo {
      font-size: 1.2rem !important;
      /* Igual ao .subtitulo */
    }

    .highlight {
      font-size: 2rem !important;
      /* Igual ao .highlight2 */
    }

    /* Ajuste Foguete Mobile */
    .foguete {
      background: url('img/FundoMobile.png') top center/100% auto no-repeat;
      background-color: #000;
      align-items: center;
      text-align: center;
      /* Padding forçado com !important */
      padding: 40vh 5% 10vh 5% !important;
    }

    /* Aumentar fonte do "Por que a Adorne" no Mobile */
    .highlight3 {
      font-size: 2rem !important;
      /* Aumentado de 2rem */
    }



    .foguete .highlight2 {
      text-align: center;
      margin-top: 20px;
    }

    .foguete .subtitulo {
      text-align: center;
      margin: 0 auto 30px;
    }

    .foguete .btn {
      margin: 20px auto;
    }

    /* Cards "ativados" no mobile (estado de hover permanente) */
    .card {
      background-color: #fff !important;
      color: #000 !important;
      transform: translateY(-5px) !important;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;

      /* Esticar e centralizar verticamente */
      min-height: 350px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
    }

    .card .line {
      background: linear-gradient(45deg, #ff5f6d, #ffc371) !important;
    }

    /* === AJUSTES EQUIPE MOBILE (FORÇADO & RESET) === */
    .perfil {
      display: flex !important;
      flex-direction: column !important;
      text-align: center !important;
      align-items: center !important;
      margin: 20px 20px !important;
      /* Reduzido de 120px para 40px */
      /* Espaço vertical aumentado */
      gap: 30px !important;
      padding: 0 !important;
      /* Reset de padding para evitar deslocamento */
      width: auto !important;
    }

    /* Espaço extra APENAS no primeiro perfil (Igor) para separar do texto introdutório */
    .perfil:first-of-type {
      margin-top: 100px !important;
    }

    .perfil-foto {
      order: 1 !important;
      /* Foto Primeiro */
      margin: 0 auto !important;
      /* Correção do tamanho fixo que quebrava o layout */
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: 300px !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
    }

    .perfil-texto {
      order: 2 !important;
      /* Texto Depois */
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      width: 100% !important;
    }

    /* Linha divisória no final */
    .linha-divisoria {
      order: 3 !important;
      width: 100% !important;
      margin: 15px 0 !important;
      /* Reduzido de 30px para 15px */
    }

    /* Forçar alinhamento de texto em todos os parágrafos */
    .perfil-texto p,
    .descricao,
    .descricao1 {
      text-align: center !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Reduzir espaço acima do botão no mobile */
    .perfil-texto .btn3 {
      margin-top: 20px !important;
    }

    .logo {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
      margin-bottom: 10px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .logo .nomes {
      text-align: center !important;
    }

    /* Margem extra botão Ryan (Mobile) */
    .perfil-ryan .btn3 {
      margin-bottom: 20px !important;
    }

    .perfil-foto {
      order: 1 !important;
      /* Foto Primeiro */
      margin: 0 auto !important;
    }

    .perfil-texto {
      order: 2 !important;
      /* Texto Depois */
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
    }

    /* Forçar o nome a centralizar e ficar acima da descrição */
    .logo {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
      margin-bottom: 10px !important;
    }

    /* Diminuir fonte "Não acreditamos em promessas" (Mobile) */
    .acredita {
      font-size: 2rem !important;
    }

    /* Forçar alinhamento de texto em todos os parágrafos */
    .perfil-texto p,
    .descricao,
    .descricao1 {
      text-align: center !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .logo .nomes {
      text-align: center !important;
    }

    .logo {
      margin-left: auto !important;
      margin-right: auto !important;
    }

  }

  .clientes {
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    margin-top: -35px;

  }

  .acredita {
    padding-top: 30px;
    text-align: center;
    padding-bottom: 10px;
  }

  .cliente {
    text-align: center;
    padding-bottom: 30px;
  }

  .carrossel-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 60px auto;
    text-align: center;
    background-color: #000;
  }

  /* Ocultar controles manuais (agora é infinito) */
  .controls {
    display: none !important;
  }

  .carrossel {
    display: flex;
    overflow: hidden;
    gap: 55px;
    justify-content: flex-start;
    /* Alinhamento inicial */
    padding: 40px 0;
    width: max-content;
    /* Permite que os itens fiquem em linha */
    animation: scroll 20s linear infinite;
    /* Animação contínua */
    padding-right: 55px;
    /* Compensação para o cálculo do loop perfeito */
  }

  /* Pausa ao passar o mouse (para "rolar" visualmente) */
  .carrossel:hover {
    animation-play-state: paused;
  }

  /* Keyframes para o efeito infinito */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
      /* Move exatamente metade (o conjunto original) */
    }
  }

  .logo-item {
    flex: 0 0 auto;
    width: 170px;
    /* AUMENTA O TAMANHO */
    height: 90px;
    position: relative;
    opacity: 0.8;
    transition: 0.3s ease;
  }

  .logo-item:hover {
    opacity: 1;
  }

  .logo-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    transition: 0.3s ease;
  }

  /* PB padrão */
  .logo-pb {
    opacity: 1;
    filter: brightness(0) invert(1);
  }

  /* Cor oculta */
  .logo-cor {
    opacity: 0;
  }

  /* Hover troca */
  .logo-item:hover .logo-pb {
    opacity: 0;
  }

  .logo-item:hover .logo-cor {
    opacity: 1;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
  }

  /* track central: slider + bolinhas */
  .track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SLIDER — cobre totalmente a bolinha ativa */
  .indicador-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    /* tamanho do slider = um pouco maior que a bolinha */
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    z-index: 1;
    transition: left .28s cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 6px 14px rgba(235, 94, 87, 0.25);
  }

  /* bolinhas */
  .indicadores {
    display: flex;
    gap: 18px;
    /* ajuste do espaçamento */
    z-index: 2;
    position: relative;
  }

  .indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: opacity .2s ease;
    cursor: pointer;
  }

  /* bolinha ativa some completamente (o slider cobre ela) */
  .indicador.ativo {
    opacity: 0;
    pointer-events: none;
  }

  /* Seta */
  .seta-direita {
    background: linear-gradient(90deg, #F59E4C, #EB5E57);
    width: 60px;
    height: 36px;
    border-radius: 12px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(235, 94, 87, 0.25);
  }

  .seta-direita::after {
    content: "→";
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }



  .Planos {
    background: url("img/FundoPlanos.png") center/cover no-repeat;
    padding: 80px 20px;
  }

  .planos-titulo {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    background: linear-gradient(90deg, #f59e4c, #eb5e57);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .planos-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7vh;
    justify-content: center;
  }

  /* CARD BASE (primeira “fila”) */
  .plano-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    text-align: center;

    /* CardPlan como fundo do card */
    background: url("img/CardPlan.png") center/cover no-repeat;
    border-radius: 18px;

    padding: 24px 24px 120px;
    /* espaço embaixo pro footer entrar */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }


  .plano-card h3 {
    font-size: 1.2rem;
    margin-bottom: 6px;

  }

  .plano-linha {
    width: 85%;
    height: 3px;
    border-radius: 10px;
    margin: 6px 0 16px;
    background: linear-gradient(90deg, #f59e4c, #eb5e57);
    margin-left: 2vh;

  }

  .plano-lista {
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
  }

  .plano-lista li {
    position: relative;
    padding-left: 28px;
    /* espaço para o ícone */
    margin-bottom: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
  }


  /* bolinha verde tipo check */
  .plano-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    /* ajusta a altura do ícone */
    width: 16px;
    /* tamanho do ícone */
    height: 16px;
    background: url("img/Vector.png") no-repeat center;
    background-size: contain;
  }


  /* ===== SEGUNDA “FILA” (hover) ===== */
  .plano-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 18px 20px 22px;
    background: linear-gradient(90deg, #f59e4c, #eb5e57);
    /* 🔥 aqui o laranja/rosa */
    text-align: center;

    transform: translateY(100%);
    transition: transform 0.3s ease;
    color: #fff;
  }


  .plano-obs {
    font-size: 0.75rem;
    opacity: 0.9;
  }

  .plano-preco {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 4px 0 10px;
  }

  /* botão com link do WhatsApp */
  .plano-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 220px;

    padding: 10px 16px;
    border-radius: 999px;
    border: none;

    background-color: #fff;
    color: #000;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .plano-botao:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  }

  /* efeito geral no card */
  .plano-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  }



  /* mostra o footer no hover */
  .plano-card:hover .plano-footer {
    transform: translateY(0%);
  }


  /* ===== RESPONSIVO ===== */
  @media (max-width: 768px) {
    .planos-grid {
      flex-direction: column;
      align-items: center;
    }

    .plano-card {
      max-width: 100%;
      border: 1px solid #ffffff;
      /* Borda branca fina */
      min-height: 550px;
      /* Estica o card ainda mais */
      text-align: center;
      /* Centraliza todo o texto */
    }

    /* Aumentar fontes no mobile */
    .plano-card h3 {
      font-size: 1.4rem !important;
      margin-bottom: 15px !important;
    }

    .plano-card .plano-lista li {
      font-size: 1.05rem !important;
      margin-bottom: 12px !important;
      /* Espaçamento entre itens */
      line-height: 1.6 !important;
    }

    .plano-card .plano-preco {
      font-size: 1.8rem !important;
      margin-top: 10px !important;
    }
  }

  .planos-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* espaço entre logo e texto */
    margin-bottom: 40px;
    text-align: center;
  }

  .planos-heading h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    /* texto branco */
    background: none;
    /* tira o degradê */
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #ffffff;
  }


  .planos-heading img {
    width: 28px;
    /* ajuste o tamanho como preferir */
    height: auto;
  }

  /* opcional: diminuir um pouco no mobile */
  @media (max-width: 600px) {
    .planos-heading h2 {
      font-size: 1.4rem;
    }

    .planos-heading img {
      width: 22px;
    }
  }

  /* CARD BRANCO */
  .Planos-sites {
    padding: 80px 20px;

  }

  .sites-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7vh;
    justify-content: center;
  }

  /* CARD BRANCO – mesmo tamanho dos planos de cima */
  .site-card {
    position: relative;
    width: 100%;
    max-width: 320px;

    background: url("img/CardBranco.png") center/cover no-repeat;
    border-radius: 18px;

    padding: 24px 24px 140px;
    /* espaço embaixo pro footer deslizar */
    overflow: hidden;
    color: #000;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .site-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;

  }

  /* linha laranja igual ao de cima */
  .site-card .plano-linha {
    width: 85%;
    height: 3px;
    border-radius: 10px;
    margin: 6px 0 16px;
    background: linear-gradient(90deg, #f59e4c, #eb5e57);
    margin-left: 2vh;
  }

  /* lista reaproveitando o ícone Vector.png */
  .site-card .plano-lista {
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Override checkmark for site cards to be green circle */
  .site-card .plano-lista li::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CD964"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') no-repeat center;
    background-size: contain;
  }

  /* HOVER IGUAL AO DE CIMA (sobe + sombra) */
  .site-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  }

  /* ===== FOOTER LARANJA (aparece no hover) ===== */
  .site-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 18px 20px 24px;
    background: linear-gradient(180deg, #f59e4c, #eb5e57);
    text-align: center;
    color: #fff;

    border-radius: 0 0 18px 18px;

    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  /* mostra o footer no hover – igual aos planos de cima */
  .site-card:hover .site-footer {
    transform: translateY(0%);
  }

  .site-obs {
    font-size: 0.75rem;
    opacity: 0.95;
  }

  .site-preco {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 4px 0 10px;
  }

  .site-parcela {
    font-size: 0.7rem;
    margin-top: 10px;
  }

  /* reutiliza o mesmo botão dos planos anteriores */
  .plano-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 220px;

    padding: 10px 16px;
    border-radius: 999px;
    border: none;

    background-color: #fff;
    color: #000;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .plano-botao:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  }

  /* RESPONSIVO */
  @media (max-width: 768px) {
    .sites-grid {
      flex-direction: column;
      align-items: center;
    }

    .site-card {
      max-width: 100%;
    }
  }

  .footer-adorne {
    padding: 60px 20px 40px;
    text-align: center;
    background: #000;
    /* fundo base escuro */
    color: #ffffff;
  }

  .footer-logo {
    width: 260px;
    /* ajuste se quiser maior/menor */
    max-width: 80%;
    height: auto;
    margin-bottom: 18px;
  }

  .footer-text {
    max-width: 720px;
    margin: 0 auto;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .footer-social {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }

  .footer-social img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
  }

  .footer-social img:hover {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.1);
  }

  /* Responsivo */
  @media (max-width: 600px) {
    .footer-adorne {
      padding: 40px 16px 30px;
    }

    .footer-text {
      font-size: 0.85rem;
    }

    .footer-social img {
      width: 30px;
      height: 30px;
    }
  }

  .rodape-final {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* linha superior */
    padding: 10px 16px;
    background-color: #ffffff;
    /* combina com o restante do site */
    color: #000000;
    font-size: 0.8rem;
  }

  .rodape-final-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    /* quebra certinho no mobile */
  }

  .rodape-heart {
    width: 14px;
    height: auto;
  }

  .rodape-logo-final {
    width: 80px;
    /* ajusta se quiser maior/menor */
    height: auto;
  }

  /* opcional: reduzir um pouco em telas muito pequenas */
  @media (max-width: 480px) {
    .rodape-final {
      font-size: 0.75rem;
    }

    .rodape-logo-final {
      width: 70px;
    }
  }

  /* ===== AJUSTES GERAIS PARA CELULAR ===== */
  @media (max-width: 768px) {

    /* HERO */
    .hero {
      min-height: 70vh;
      background-position: center top;
      padding: 0 16px;
    }

    .content {
      max-width: 100%;
    }

    .titulo {
      margin-top: 30vh;
      font-size: 1.6rem;
    }

    .highlight {
      font-size: 1.4rem;
      display: block;
    }

    .btn {
      width: 100%;
      max-width: 260px;
      padding: 12px 24px;
    }

    /* FOGUETE */
    .foguete {
      min-height: auto;
      padding: 60px 16px;
      align-items: center;
      text-align: center;
      background-position: center top;
    }

    .highlight2 {
      font-size: 1.6rem;
      margin-top: 20px;
    }

    .subtitulo {
      font-size: 1rem;
      max-width: 100%;
    }

    /* CARDS DA SEÇÃO "POR QUE A ADORNE..." */
    .cards-container {
      padding: 40px 16px;
      gap: 16px;
    }

    .card {
      width: 100%;
      max-width: 320px;
    }

    /* BOX CINZA */
    .boxc {
      padding: 24px 16px;
    }

    .highlight4 {
      font-size: 1.6rem;
    }

    .subtitulo2 {
      font-size: 1rem;
    }

    /* PERFIS */
    .perfil {
      flex-direction: column-reverse;
      text-align: center;
      gap: 30px;
      padding: 40px 5%;
    }

    .perfil-bia .perfil-texto {
      left: 0;
      margin-left: 0;
    }

    /* CARROSSEL */
    .carrossel-container {
      margin: 40px auto;
      padding: 0 8px;
    }

    .carrossel {
      gap: 32px;
      padding: 20px 0;
    }

    .logo-item {
      width: 130px;
      height: 70px;
    }

    /* TÍTULO "CONHEÇA OS PLANOS" */
    .planos-heading {
      flex-direction: column;
      gap: 4px;
      padding: 0 16px;
    }

    .planos-heading h2 {
      font-size: 1.4rem;
      text-align: center;
    }

    .planos-heading img {
      width: 24px;
    }

    /* CARDS DOS PLANOS */
    .planos-grid,
    .sites-grid {
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    /* Container adjustment for wider cards */
    .Planos-sites {
      padding: 40px 10px !important;
    }

    .plano-card {
      max-width: 360px;
      width: 100%;
    }

    .site-card {
      max-width: 100%;
      width: 100%;
      min-height: 550px;
      border: 1px solid #ffffff;
      text-align: center;
      padding: 24px 15px 120px;
    }

    .plano-linha,
    .site-card .plano-linha {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    .plano-lista {
      font-size: 0.9rem;
    }

    /* FOOTER ADORNE */
    .footer-adorne {
      padding: 40px 16px 30px;
    }

    .footer-text {
      font-size: 0.85rem;
    }

    .footer-social img {
      width: 28px;
      height: 28px;
    }
  }

  /* AJUSTES EXTRA PARA TELAS MUITO PEQUENAS */
  @media (max-width: 480px) {
    .titulo {
      margin-top: 24vh;
      font-size: 1.4rem;
    }

    .btn3 {
      margin: 90px auto 70px;
      /* mais espaço embaixo do botão */
    }

    .highlight {
      font-size: 1.2rem;
    }

    .highlight2,
    .highlight3,
    .highlight4 {
      font-size: 1.4rem;
    }

    .btn,
    .btn2 {
      max-width: 260px;
      width: 100%;
    }

    .perfil-foto {
      width: 100%;
    }

    .rodape-final {
      font-size: 0.7rem;
    }

    .rodape-logo-final {
      width: 60px;
    }
  }

  /* ===== MOBILE: SEM HOVER, FICA ATIVO DIRETO ===== */
  @media (max-width: 900px) {

    /* FOTO DO PERFIL SEM HOVER (fica sempre ativada) */
    .perfil-foto {
      background: linear-gradient(135deg, #F59E4C, #EB5E57);
      transform: translateY(0px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .perfil-foto .foto-normal {
      opacity: 0;
    }

    .perfil-foto .foto-hover {
      opacity: 1;
    }

    /* BOTÕES SEM HOVER (ativo direto) */
    .btn,
    .btn2,
    .btn3 {
      background: linear-gradient(90deg, #F59E4C, #EB5E57) padding-box;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    /* LOGOS DOS CLIENTES SEM HOVER (ativo direto) */
    .logo-pb {
      opacity: 0;
    }

    .logo-cor {
      opacity: 1;
    }

    /* CARDS SEM HOVER (já ativado) */
    .plano-card,
    .site-card {
      transform: translateY(-8px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
    }

    .plano-card .plano-footer,
    .site-card .site-footer {
      transform: translateY(0%);
    }
  }


  .carrossel-container {
    overflow: hidden;
  }

  .carrossel {
    display: flex;
    gap: 30px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
  }

  .carrossel::-webkit-scrollbar {
    display: none;
    /* Chrome */
  }

  /* ===== OCULTAR CONTROLES DO CARROSSEL NO MOBILE ===== */
  @media (max-width: 768px) {
    .controls {
      display: none !important;
    }
  }

  @media (max-width: 768px) {
    .hero {
      background-position: center top;
      background-size: 180%;
      /* diminui o zoom */
    }
  }

  .carrossel-container,
  .carrossel {
    overflow: hidden;
  }

  /* Impede que qualquer elemento maior crie rolagem lateral */
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  /* ===== GARANTIR QUE O CARROSSEL NÃO CAUSE OVERFLOW ===== */
  @media (max-width: 768px) {

    /* Container principal que envolve tudo */
    /* Container principal */
    body>* {
      max-width: 100vw;
      /* overflow-x: hidden; REMOVED to prevent scroll locking */
    }

    /* Seções específicas que podem estar causando problemas */
    section,
    .hero,
    .foguete,
    .boxc,
    .clientes,
    .Planos {
      width: 100vw;
      max-width: 100%;
      position: relative;
      left: 0;
      right: 0;
    }

    /* Ajuste fino para o carrossel */
    .carrossel {
      width: auto;
      padding-left: 10px;
      padding-right: 10px;
    }

    /* Remove qualquer transform ou translate que possa causar overflow */
    .perfil-foto,
    .card,
    .plano-card {
      transform: none !important;
    }
  }

  /* ===== FORÇAR 100% DE ZOOM SEMPRE ===== */
  @media (max-width: 768px) {
    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-size: 16px;
      line-height: 1.4;
    }
  }

  /* ===== CORREÇÕES PARA O CARROSSEL FUNCIONAR NO MOBILE ===== */
  @media (max-width: 768px) {
    .carrossel-container {
      width: 100%;
      max-width: 100vw;
      overflow: visible !important;
      /* IMPORTANTE: permite scroll horizontal */
      margin: 40px auto;
      padding: 0 5px;
    }

    .carrossel {
      width: auto;
      min-width: 100%;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-behavior: smooth;
    }

    .carrossel::-webkit-scrollbar {
      display: none;
    }

    .logo-item {
      flex-shrink: 0;
      width: 140px;
      height: 70px;
    }

    /* Remove qualquer restrição de overflow no container do carrossel */
    .carrossel,
    .carrossel * {
      overflow-x: visible !important;
    }
  }

  /* ===== GARANTIR QUE OUTRAS PARTES DO SITE NÃO ROLAM HORIZONTALMENTE ===== */
  @media (max-width: 768px) {

    html,
    body {
      width: 100%;
      overflow-x: hidden;
      position: relative;
    }

    /* Todos os elementos exceto o carrossel */
    /* overflow-x: hidden !important; REMOVED to fix mobile scroll */
    /* max-width: 100vw; REMOVED */

    /* Container do carrossel tem overflow permitido */
    .carrossel-container {
      overflow-x: auto !important;
      overflow-y: hidden !important;
    }
  }

  /* ===== MELHORIAS PARA O CARROSSEL NO MOBILE ===== */
  @media (max-width: 768px) {
    .carrossel-container {
      width: 100%;
      max-width: 100vw;
      overflow: hidden;
      margin: 40px auto;
      padding: 0;
      position: relative;
    }

    .carrossel {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding: 20px 10px;
      gap: 25px;
      width: 100%;
      cursor: grab;
      user-select: none;
    }

    .carrossel::-webkit-scrollbar {
      display: none;
    }

    .carrossel:active {
      cursor: grabbing;
    }

    .logo-item {
      flex: 0 0 auto;
      width: 140px;
      height: 70px;
      scroll-snap-align: center;
      position: relative;
    }

    /* Remove qualquer interferência de outros estilos */
    .carrossel * {
      user-select: none;
      -webkit-user-drag: none;
    }

    /* Garante que o container não corte o conteúdo */
    .carrossel-container {
      overflow: visible !important;
    }

    .carrossel {
      overflow-x: auto !important;
      overflow-y: hidden !important;
    }
  }

  /* ===== ANIMAÇÃO SMOOTH PARA SCROLL ===== */
  .carrossel {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* ===== PREVENIR ROLAGEM HORIZONTAL NO RESTO DO SITE ===== */
  @media (max-width: 768px) {

    html,
    body {
      width: 100%;
      overflow-x: hidden;
      position: relative;
      /* touch-action: pan-y; REMOVED */
    }

    /* Aplica touch-action apenas vertical para tudo, exceto carrossel */
    /* Removed restrictive touch-action on body > * */

    /* Permite rolagem horizontal apenas no carrossel */
    .carrossel,
    .carrossel-container {
      touch-action: pan-x pan-y;
    }
  }

  /* ===== REMOVER QUALQUER TRANSFORMAÇÃO QUE INTERFERE ===== */
  @media (max-width: 768px) {

    .carrossel,
    .carrossel-container,
    .logo-item {
      transform: none !important;
      transform-style: flat !important;
      backface-visibility: visible !important;
      perspective: none !important;
    }
  }