/*RESPONSIVO incial */

@media (max-width: 768px) {

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.9rem;
        padding: 0 10px;
    }

    .logo {
        width: 85px;
        top: 15px;
        left: 15px;
    }
   

   
    .form-section {
        padding: 70px 15px 40px 15px !important; 
        overflow-y: auto !important;
        display: flex;
        align-items: flex-start; 
        justify-content: center; 
        min-height: calc(100vh - 78px); 
    }

    /* 2. Aumenta a margem do card para ele descer ainda mais */
    .form-card {
        width: 100%;
        max-width: 320px; 
        padding: 10px 12px !important;
        border-radius: 12px;
        margin: 55px auto 0 auto; /* Aumentamos de 15px para 25px */
    }
    .form-card h2 {
        font-size: 1.05rem !important; 
        margin-bottom: 5px !important;
    }

    .input-group {
        margin-bottom: 6px !important; 
    }

    .input-group label {
        font-size: 10px; 
        margin-bottom: 1px; 
    }

    .input-wrapper input,
    .input-group > input {
        padding: 5px 8px !important;
        font-size: 13px;   
        width: 100%;
    }

    button {
        padding: 6px !important;    
        font-size: 13px;
        margin-top: 2px;
        border-radius: 6px;
    }

    /* CABEÇALHO */
    .site-header {
        height: 48px; 
    }

    .header-container {
        justify-content: flex-start;
        padding: 0 15px; 
    }

    .logo-header {
        height: 26px;
    }

    .main-menu {
        display: none; 
    }

    /* --- Fundo  --- */
    .bg-festa {
        background-size: cover;
        background-position: center 22%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    .hero {
        padding: 45px 10px 30px 10px; 
    }

    /* --- Card  --- */
    .hero-content-box {
        padding: 6px 10px; 
        border-radius: 12px;
        margin-bottom: 10%;
        max-height: calc(100vh - 80px); 
        overflow-y: auto; 
    }

    .card-top-brand {
        font-size: 0.55rem;
        margin-bottom: 2px;
        padding: 5px;
        gap: 5px;
    }

    .mini-logo-preq {
        height: 28px;
    }

    .hero-content-box h1 {
        font-size: 0.9rem; 
        margin-bottom: 3px;
        line-height: 1.1;
    }

    .hero-desc {
        font-size: 0.65rem;
        margin-bottom: 5px;
        line-height: 1.1;
    }

    .detalhes-lista {
        margin-bottom: 4px;
        gap: 2px;
    }

    .detalhes-lista li {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    .action-wrapper {
        display: flex;
        justify-content: flex-end; 
        margin-top: 2px;
    }

    .btn-primary {
        width: auto; 
        padding: 4px 12px; 
        margin-top: 3px;
        font-size: 0.68rem;
    }

    /* --- Rodapé --- */
    .site-footer {
        height: 28px;
        padding: 4px 10px; 
        font-size: 0.3rem;
        
    }
    .site-footer, p{
          text-shadow:  2px 2px 3px black;
        
    }

    /*  */
    .input-group select.select-customizado,
    .form-card select {
        padding: 6px 10px;
        font-size: 0.8rem;
        background-position: right 8px center;
        background-size: 12px;
    }

    /*BOTÃO DO WHATSAPP (BEM MENOR E NO RODAPÉ) */
    .whatsapp-float {
        bottom: 32px; 
        right: 10px;
        width: 36px;  /* Reduzido para ficar bem discreto */
        height: 36px;
    }

    .whatsapp-icon {
        width: 18px;  /* Ícone menor proporcionalmente */
        height: 18px;
    }

    .whatsapp-tooltip {
        font-size: 0.55rem; 
        padding: 3px 6px;
        right: 44px; 
        border-radius: 5px;
    }

    .whatsapp-tooltip::after {
        border-width: 3px 0 3px 3px;
    }

}