/**

 * Portal Óticas Indaiá — layout shell (carregar após style.css)

 */



body.body-portal {

    position: relative;

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    font-family: 'Titillium Web', sans-serif;

    color: var(--brand-texto);

    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 195, 0, 0.12) 55%, rgba(255, 195, 0, 0.22) 100%);

    background-attachment: fixed;

}



.w3-hide { display: none !important; }

.w3-show-block, .w3-show { display: block !important; }

.w3-show-inline-block { display: inline-block !important; }

/* Responsivo W3: home/nav têm markup desktop (w3-hide-small) e mobile (w3-hide-large w3-hide-medium) */
@media (max-width: 600px) {
    .w3-hide-small {
        display: none !important;
    }
}

@media (min-width: 1301px) {
    .w3-hide-large {
        display: none !important;
    }
}

@media (max-width: 1300px) and (min-width: 601px) {
    .w3-hide-medium {
        display: none !important;
    }
}

#loading {

    display: none;

    background-color: rgba(0, 0, 0, 0.7);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 100000;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.loaderMenu {

    border: 5px solid rgba(0, 0, 0, 0);

    border-radius: 50%;

    border-top: 5px solid var(--brand-primary);

    width: 100px;

    height: 100px;

    animation: spin-portal 1s linear infinite;

    margin: auto;

}



@keyframes spin-portal {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.divTransitionHome { animation: fadeEffect 2s; }



@keyframes fadeEffect {

    from { opacity: 0; }

    to { opacity: 1; }

}



.box-select {

    cursor: pointer;

    width: 120px;

    height: 120px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    border-radius: 10px;

    transition: 0.25s ease;

    background-color: var(--brand-branco);

    border: 1px solid var(--brand-cinza);

    padding-top: 25px;

    text-align: center;

}



.box-select-inativo {

    cursor: default;

    width: 120px;

    height: 120px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    border-radius: 10px;

    background-color: rgba(209, 211, 212, 0.4);

    border: 1px solid var(--brand-cinza);

    padding-top: 25px;

    text-align: center;

}



.box-select .img2,

.box-select-inativo .img2 { display: none; }



.box-select:hover {

    background: linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);

    color: var(--brand-texto);

    box-shadow: 0 6px 20px rgba(255, 195, 0, 0.45);

    border-color: var(--brand-primary);

}



.box-select:hover .img1 { display: none; }

.box-select:hover .img2 { display: block; }



.box-select p,

.box-select-inativo p {

    position: relative;

    z-index: 3;

    font-size: 14px;

    margin: 8px 0 0 0;

    padding: 0 4px;

}



.inativo { opacity: 0.5; }



body.body-portal .navbar {

    background: var(--brand-branco);

    border-bottom: 4px solid var(--brand-primary);

    padding: 0.5rem 0 10px 0;

    margin-bottom: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



body.body-portal .prad-header-shell {

    position: relative;

    width: 100%;

    min-height: 5rem;

    padding: 0.9rem 0.75rem;

}



body.body-portal .prad-header-logo {

    position: absolute;

    left: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

}



body.body-portal .prad-header-logo img {

    width: 120px;

    max-width: 28vw;

    height: auto;

    cursor: pointer;

}



body.body-portal .prad-header-titles {

    width: 100%;

    text-align: center;

    padding: 0.4rem 6rem;

}



.titulo-portal-home {

    color: var(--brand-texto-suave);

    font-size: 28px;

    font-weight: bold;

    text-align: center;

}



.subtitulo-portal-home {

    color: var(--brand-texto-suave);

    font-size: 23px;

    text-align: center;

}



body.body-portal footer#footer {

    color: var(--brand-texto-suave);

    background: var(--brand-branco);

    margin-top: auto;

    width: 100%;

    padding: 20px 0;

    border-top: 1px solid var(--brand-cinza);

}



body.body-portal ::-webkit-scrollbar { display: none; }



body.body-portal .prad-header-shell--interno {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 5rem;

    padding: 0.9rem 6rem 0.9rem 0.75rem;

}



body.body-portal .prad-header-sair {

    position: absolute;

    right: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

}



body.body-portal .prad-header-sair p {

    margin: 0;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 0.35rem;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--brand-texto-suave);

}



body.body-portal .prad-header-sair p:hover { color: var(--brand-secondary); }



body.body-portal .tituloModal {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 0.75rem;

    color: var(--brand-texto-suave);

}