/*
DOCUMENTAÇÃO DO ARQUIVO: css/components/header-mobile.css
Cabeçalho compacto e menu lateral até 1200px, atendendo celulares e tablets. As classes .open são alternadas por iniciarMenuMobile() em app.js; devem prevalecer sobre header.css.
*/
/* ==========================================================
   HEADER MOBILE 2.0
   Projeto Cor & Papel
   Navegação compacta para celulares e tablets
========================================================== */

/* Aplica as declarações abaixo a .mobile-drawer, .drawer-overlay. */
.mobile-drawer,
.drawer-overlay{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:none;

}


/* Condição de aplicação: (max-width:1200px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (max-width:1200px){

    /* ===============================
       Barra superior
    =============================== */

    /* Aplica as declarações abaixo a .header-top. */
.header-top{

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:none;

    }

    /* ===============================
       Container principal
    =============================== */

    /* Aplica as declarações abaixo a #header .container. */
#header .container{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:relative;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:space-between;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Altura mínima; vh usa a altura da janela e dvh acompanha a área visível dinâmica. */
    min-height:78px;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:12px 16px;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:0;

}



    /* ===============================
       Logo
    =============================== */

    /* Aplica as declarações abaixo a .logo-ilustracao. */
.logo-ilustracao{

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:none;

    }

/* Aplica as declarações abaixo a .logo-area. */
.logo-area{

    /* Atalho para crescimento, encolhimento e tamanho-base do item flexível. */
    flex:1;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:center;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

}

    /* Aplica as declarações abaixo a .logo img. */
.logo img{

        /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
        width:170px;

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:block;

    }

    /* ===============================
       Menu Desktop
    =============================== */

    /* Aplica as declarações abaixo a .main-menu. */
.main-menu{

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:none;

    }

    /* ===============================
       Botão Hambúrguer
    =============================== */

   /* Aplica as declarações abaixo a .menu-toggle. */
.menu-toggle{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;
    /* Distância da borda esquerda na referência de posicionamento. */
    left:12px;
    /* Distância da borda superior na referência de posicionamento. */
    top:50%;
    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateY(-50%);
    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:44px;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:44px;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;
    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;
    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:center;
    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:transparent;
    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;

    /* Ordem de sobreposição dentro do contexto de empilhamento. */
    z-index:9996;

}

/* Aplica as declarações abaixo a .menu-toggle span. */
.menu-toggle span{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:26px;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:3px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#7A3D53;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:3px;

    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin:3px 0;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

}

/* ===============================
   WhatsApp Mobile
=============================== */
/* Aplica as declarações abaixo a .btn-whatsapp. */
.btn-whatsapp{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;
    /* Distância da borda direita na referência de posicionamento. */
    right:12px;
    /* Distância da borda superior na referência de posicionamento. */
    top:50%;
    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateY(-50%);

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:auto;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:auto;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:0;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:transparent;
    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;
    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:0;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#222;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;
    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;
    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:center;

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:none;

}

/* Aplica as declarações abaixo a .btn-whatsapp:hover. :hover corresponde ao ponteiro sobre o elemento. */
.btn-whatsapp:hover{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:transparent;
    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#000;
    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateY(-50%) scale(1.08);

}

/* Aplica as declarações abaixo a .btn-whatsapp span. */
.btn-whatsapp span{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:none;

}

/* Aplica as declarações abaixo a .icon-whatsapp. */
.icon-whatsapp{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:28px;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:28px;

}
    /* ===============================
   Drawer
================================ */
/* ==========================================================
   MOBILE DRAWER PREMIUM
========================================================== */

/* Aplica as declarações abaixo a .mobile-drawer. */
.mobile-drawer{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:fixed;

    /* Distância da borda superior na referência de posicionamento. */
    top:0;
    /* Distância da borda esquerda na referência de posicionamento. */
    left:0;

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:88%;
    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width:360px;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:100vh;
    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:100dvh;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFF;

    /* Arredondamento específico do canto indicado no nome da propriedade. */
    border-top-right-radius:28px;
    /* Arredondamento específico do canto indicado no nome da propriedade. */
    border-bottom-right-radius:28px;

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:
        0 20px 60px rgba(0,0,0,.20);

    /* Tratamento do excesso vertical; auto permite rolar quando o conteúdo é mais alto que a área. */
    overflow-y:auto;

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateX(-105%);
    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

    /* Ordem de sobreposição dentro do contexto de empilhamento. */
    z-index:9998;

}

/* Aplica as declarações abaixo a .mobile-drawer.open. A classe open é controlada pelo JavaScript do menu. */
.mobile-drawer.open{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateX(0);

}
/* ==========================================================
   MENU DRAWER
========================================================== */

/* Aplica as declarações abaixo a .mobile-drawer nav. */
.mobile-drawer nav{

    /* Atalho para crescimento, encolhimento e tamanho-base do item flexível. */
    flex:1;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;
    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:22px 16px;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:8px;

}

/* Aplica as declarações abaixo a .mobile-drawer nav a. */
.mobile-drawer nav a{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;
    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;
    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:space-between;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:16px 18px;

    /* Controla enfeites do texto, como o sublinhado dos links. */
    text-decoration:none;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#5F4A56;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:17px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:18px;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:
        background .25s,
        transform .25s;

        /* Transparência: 0 é invisível e 1 é totalmente opaco; o elemento continua ocupando espaço. */
        opacity:0;

/* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
transform:translateX(-25px);

/* Propriedades e duração da mudança animada; s representa segundos. */
transition:
    opacity .35s ease,
    transform .35s ease;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:18px;

/* Propriedades e duração da mudança animada; s representa segundos. */
transition:
    background .25s,
    transform .18s,
    opacity .35s,
    color .25s;

}



/* Aplica as declarações abaixo a .mobile-drawer nav a:hover. :hover corresponde ao ponteiro sobre o elemento. */
.mobile-drawer nav a:hover{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FDECEF;

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateX(6px);

}

/* Aplica as declarações abaixo a .mobile-drawer nav a:hover .menu-arrow. :hover corresponde ao ponteiro sobre o elemento. */
.mobile-drawer nav a:hover .menu-arrow{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateX(4px);

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

}

/* Aplica as declarações abaixo a .mobile-drawer nav a:active. :active corresponde ao período em que o controle está sendo pressionado. */
.mobile-drawer nav a:active{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:scale(.97);

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#F9E3EC;

}
/* Aplica as declarações abaixo a .drawer-overlay. */
.drawer-overlay{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:fixed;

    /* Atalho para top, right, bottom e left; 0 encosta nas quatro bordas. */
    inset:0;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:rgba(0,0,0,.18);

    /* Efeito aplicado ao que aparece atrás de um fundo parcialmente transparente. */
    backdrop-filter:blur(8px);
    /* Versão prefixada do efeito de fundo para navegadores que a exigem. */
    -webkit-backdrop-filter:blur(8px);

    /* Transparência: 0 é invisível e 1 é totalmente opaco; o elemento continua ocupando espaço. */
    opacity:0;
    /* Visibilidade sem remover o espaço ocupado pelo elemento no layout. */
    visibility:hidden;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.35s;

    /* Ordem de sobreposição dentro do contexto de empilhamento. */
    z-index:9997;

}

/* Aplica as declarações abaixo a .drawer-overlay.open. A classe open é controlada pelo JavaScript do menu. */
.drawer-overlay.open{

    /* Transparência: 0 é invisível e 1 é totalmente opaco; o elemento continua ocupando espaço. */
    opacity:1;
    /* Visibilidade sem remover o espaço ocupado pelo elemento no layout. */
    visibility:visible;

}
/* Aplica as declarações abaixo a .mobile-drawer, .drawer-overlay. */
.mobile-drawer,
.drawer-overlay{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

}

/* ==========================================================
   CABEÇALHO DO DRAWER
========================================================== */

/* Aplica as declarações abaixo a .drawer-header. */
.drawer-header{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:center;

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:relative;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:28px 22px 24px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FDECEF;

    /* Borda apenas no lado indicado no nome da propriedade. */
    border-bottom:1px solid #F4D8E2;

}
/* Aplica as declarações abaixo a .drawer-brand. */
.drawer-brand{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:100%;

}

/* Aplica as declarações abaixo a .drawer-brand img. */
.drawer-brand img{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:180px;

    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width:90%;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

    /* Espaço externo na direção inferior. */
    margin-bottom:16px;

}

/* Aplica as declarações abaixo a .drawer-brand p. */
.drawer-brand p{

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:18px;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#A86C84;

    /* Alinhamento horizontal do texto dentro de sua área. */
    text-align:center;

    /* Altura das linhas; valores sem unidade multiplicam o tamanho da fonte. */
    line-height:1.4;

}

/* Aplica as declarações abaixo a .drawer-close. */
.drawer-close{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;

    /* Distância da borda superior na referência de posicionamento. */
    top:22px;

    /* Distância da borda direita na referência de posicionamento. */
    right:22px;

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width: 40px;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:40px;

    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:50%;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFFFFF;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:20px;

    /* Formato do ponteiro; pointer indica ação e zoom-in indica possibilidade de ampliar. */
    cursor:pointer;

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:0 8px 20px rgba(0,0,0,.12);

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .drawer-close:hover. :hover corresponde ao ponteiro sobre o elemento. */
.drawer-close:hover{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FDECEF;

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:rotate(90deg);

}

/* Aplica as declarações abaixo a .menu-icon. */
.menu-icon{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:30px;

    /* Alinhamento horizontal do texto dentro de sua área. */
    text-align:center;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:22px;

}

/* Aplica as declarações abaixo a .menu-text. */
.menu-text{

    /* Atalho para crescimento, encolhimento e tamanho-base do item flexível. */
    flex:1;

    /* Espaço externo na direção esquerda. */
    margin-left:14px;

}

/* Aplica as declarações abaixo a .menu-arrow. */
.menu-arrow{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#C28EA1;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:24px;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .drawer-footer. */
.drawer-footer{

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:22px;

    /* Alinhamento horizontal do texto dentro de sua área. */
    text-align:center;

    /* Borda apenas no lado indicado no nome da propriedade. */
    border-top:1px solid #F3D5DE;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:6px;

}

/* Aplica as declarações abaixo a .drawer-footer strong. */
.drawer-footer strong{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

}

/* Aplica as declarações abaixo a .drawer-footer small. */
.drawer-footer small{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#8A6D77;

}

/* Aplica as declarações abaixo a .mobile-drawer.open nav a. A classe open é controlada pelo JavaScript do menu. */
.mobile-drawer.open nav a{

    /* Transparência: 0 é invisível e 1 é totalmente opaco; o elemento continua ocupando espaço. */
    opacity:1;

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateX(0);

}


}


/* Tablets: área confortável de toque para o contato. */
/* Condição de aplicação: (min-width: 601px) and (max-width: 1200px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (min-width: 601px) and (max-width: 1200px) {
    /* Aplica as declarações abaixo a #header .btn-whatsapp. */
#header .btn-whatsapp {
        /* Largura mínima; 0 permite que o item encolha mesmo com texto ou imagem grandes. */
        min-width: 44px;
        /* Altura mínima; vh usa a altura da janela e dvh acompanha a área visível dinâmica. */
        min-height: 44px;
    }
}