/* --- Media Query para Mobile --- */
/* Estilos que só serão aplicados em telas com no máximo 768px de largura */
@media (max-width: 768px) {




 
      .menu input[type="checkbox"] {
        display: none;
      }
    
    .menu {
        position: relative;
        width: 100%;
        height: 60px;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }

    /* Estilos do ícone de hambúrguer */
    .menu .hamburger-icon {
        background: none transparent;
        border: 4px solid #BF5E78;
        border-left: 0 solid transparent;
        border-right: 0 solid transparent;
        cursor: pointer;
        height: 24px;
        position: absolute;
        top: 18px;
        left: 20px;
        width: 24px;
        transition: all .2s;
    }

    .menu .hamburger-icon::before {
        background: #BF5E78;
        content: '';
        height: 4px;
        left: 0;
        position: absolute;
        top: 10px;
        width: 24px;
        transition: all .2s;
    }

    .menu .hamburger-icon::after {
        background: #BF5E78;
        content: '';
        height: 4px;
        left: 0;
        position: absolute;
        top: 6px;
        opacity: 0;
        visibility: hidden;
        width: 100%;
        transform: rotate(90deg);
        transition: all .2s;
    }

    /* Estilos da lista de links (oculta por padrão em mobile) */
    .menu ul {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all .3s ease-in-out;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        background: #f2f2ef;
    }
    
    .menu ul li {
        border-bottom: 1px solid #ddd;
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
    
    .menu ul li a {
        display: block;
        padding: 15px 20px;
        font-weight: normal;
        color: #333;
        transition: color 0.3s;
    }
    
    .menu ul li a:hover {
        background: #e5e5e5;
        color: #BF5E78;
    }

    /* Estilos do menu aberto (quando o checkbox está marcado) */
    .menu input[type="checkbox"]:checked ~ ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .menu input[type="checkbox"]:checked + label {
        border: 4px solid silver;
        border-radius: 50%;
        height: 28px;
        top: 10px;
        left: 8px;
        width: 28px;
        transform: rotate(-135deg);
    }

    .menu input[type="checkbox"]:checked + label::before {
        background:silver;
        top: 12px;
        left: 7px;
        width: 12px;
    }

    .menu input[type="checkbox"]:checked + label::after {
        background: silver;
        opacity: 1;
        top: 12px;
        left: 7px;
        visibility: visible;
        width: 12px;
    }
}