/* Variáveis */
:root {
    --cor-escura:#100b02;
    --cor-clara:#f9f9f9;
    --cor-sombra:rgba(0,0,0,0.1);
    --cor-overlay:rgba(0,0,0,0.5);
    --cor-primaria:#0866ff;
    --cor-whatsapp:#0dca54;
    --cor-cinza:#4f5257;
    --transicao:0.3s ease;
    --sombra-padrao:0 0 10px var(--cor-sombra);
    --borda-arredondada:12px;
    --altura-banner:90px;
    --altura-banner-mobile:80px;
    --blockquote-accent-color:#2563eb;
    --blockquote-text-color:#1e293b;
    --blockquote-cite-color:#64748b;
    --blockquote-quote-color:rgba(37,99,235,0.15);
    --banner-bg:#f9fafb;
    --banner-border:#f7f7f7;
    --button-bg:#f9fafb;
    --button-border:#f7f7f7;
    --button-text:#111827;
    --outline:2px solid #3b82f6
}

/* Banner */
.banner-container {
    display:flex;
    justify-content:center;
    align-items:center;
    background:repeating-linear-gradient(45deg,hsl(0 0% 100% / .1),hsl(0 0% 100% / .1)4px,rgb(0 0 0 / .15)6px);
    background-color:#fff;
    position:relative;
    z-index:1;
    width:100%;
    max-width:100%;
    margin-bottom:4rem;
    overflow:hidden
}

.banner-primeiro-paragrafo {
    float: right;
    margin: 24px -70px 20px 60px; 
    max-width: 300px;
}
@media (max-width: 768px) {
    .banner-primeiro-paragrafo {
        float: none;
        display: block;
		max-width: 100%;
        margin: 0 auto; 
    }
}

/* Banner Flutuante */
body.banner-active {
    padding-bottom: 100px;
    transition: padding-bottom 0.6s ease;
}

.banner-csites {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--banner-bg);
    border-top: 1px solid var(--banner-border);
    z-index: 9999;
    transition: transform 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 1rem;
    box-shadow: 0 0 10px rgb(0 0 0 / .2);
}

.banner-csites--hidden {
    transform: translateY(100%);
}

.banner-csites__button {
    position: absolute;
    top: -26px;
    left: 0;
    background: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 4px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 -4px 5px rgb(0 0 0 / .1);
    transition: background 0.2s ease;
    z-index: 1;
}

.banner-csites__button:focus-visible {
    outline: var(--outline);
    outline-offset: 2px;
}

.banner-csites__icon {
    width: 22px;
    height: 22px;
    transition: transform 0.6s ease;
}

.banner-csites--hidden .banner-csites__icon {
    transform: rotate(180deg);
}

.banner-csites__content {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.banner-csites__content img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}

@media (max-width: 767px) {
    body.banner-active {
        padding-bottom: 80px;
    }
    .banner-csites {
        padding: 0 1.4em;
        height: 80px;
    }
    .banner-csites__button {
        left: 0;
        padding: 2px 16px;
    }
}

/* Banner Header Fixo */
.banner-principal {
    overflow: hidden;
}

.banner-rolagem {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); 
    z-index: 100;
    transition: transform 1s ease-in-out; 
}        

.banner-rolagem.show {
    transform: translate(-50%, 0); 
	margin: 2px 0 0 0;
}  

@media (max-width: 768px) {
    .banner-rolagem {
        width: 100%;
		padding: 0 1.4em 0 1.4em;
        height: auto;
    }
}

/* Compartilhar */
#web-share-buttons {
    display:flex;
    gap:12px;
    margin:20px 0
}

#web-share-buttons button {
    flex:1;
    height:44px;
    line-height:6px;
    font-size:26px;
    cursor:pointer;
    background-color:#f5f6f7;
    border-radius:var(--borda-arredondada);
    transition:all var(--transicao);
    color:var(--cor-primaria)
}

#web-share-buttons button:hover,#web-share-buttons button:focus {
    background-color:var(--cor-primaria);
    color:#fff
}

#web-share-buttons button#web-share-whatsapp {
    color:var(--cor-whatsapp);
    font-size:25px
}

#web-share-buttons button#web-share-whatsapp:hover,#web-share-buttons button#web-share-whatsapp:focus {
    background-color:var(--cor-whatsapp);
    color:#fff
}

#web-share-buttons button#web-share-native {
    color:var(--cor-cinza)
}

#web-share-buttons button#web-share-native:hover,#web-share-buttons button#web-share-native:focus {
    background-color:var(--cor-cinza);
    color:#fff
}

#web-share-buttons button:last-child {
    margin-right:0
}

/* Previsão do Tempo */
.previsao-tempo {
    display:flex;
    align-items:center;
    gap:15px
}

.previsao-info {
    display:flex;
    flex-direction:column
}

.previsao-local {
    font-size:14px;
    color:#6c757d;
    margin-bottom:6px
}

.previsao-condicao {
    display:flex;
    align-items:center;
    gap:10px
}

.previsao-icone {
    width:48px;
    height:48px;
    border-radius:8px;
    box-shadow:0 4px 6px rgb(0 0 0 / .1);
    filter:contrast(1.2)brightness(1.1)
}

.previsao-temperatura-desc {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px
}

.previsao-temperatura {
    font-size:26px;
    font-weight:700;
    color:#212529;
    line-height:1
}

.previsao-descricao {
    font-size:12px;
    color:#495057;
    line-height:1.2
}

.previsao-erro {
    background:#fff5f5;
    color:#dc3545;
    padding:10px;
    border-radius:4px;
    font-size:13px;
    margin:0 auto
}

/* Popup */
#meu-popup,.fundo-preto {
    display:none;
    position:fixed
}

.fundo-preto {
    inset:0;
    width:100%;
    height:100%;
    background:var(--cor-overlay);
    z-index:9998
}

#meu-popup {
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    z-index:9999
}

/* Outros Elementos */
.csites-tags a {
    margin-right:10px;
    display:inline-block;
    border-radius:3px;
    letter-spacing:.4px;
    padding:0 12px;
    background:#e7e7ea
}

blockquote {
    position:relative;
    margin:2.5rem 0;
    padding:0 0 0 3rem;
    border-left:none;
    color:var(--blockquote-text-color);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:1.25rem;
    line-height:1.7;
    font-weight:400;
    font-style:italic
}

blockquote::before,blockquote::after {
    position:absolute;
    font-size:5rem;
    font-weight:700;
    color:var(--blockquote-quote-color);
    font-family:Georgia,serif;
    line-height:1
}

blockquote::before {
    content:'"';
    left:-.5rem;
    top:-1.5rem
}

blockquote::after {
    content:'"';
    right:0;
    bottom:-3.5rem;
    opacity:.5
}

blockquote cite {
    display:block;
    margin-top:1.5rem;
    font-size:.9rem;
    color:var(--blockquote-cite-color);
    font-style:normal;
    font-weight:500;
    text-align:right
}

blockquote cite::before {
    content:"— "
}

@media(max-width:768px) {
    blockquote {
        padding-left:2.5rem;
        font-size:1.1rem
    }
    blockquote::before {
        left:-.8rem;
        font-size:4rem
    }
    blockquote::after {
        font-size:4rem;
        bottom:-3rem
    }
}

.elementor-field-group.elementor-select-wrapper select {
    color:var(--e-global-color-secondary)!important
}

[class*="temp-"],#botaoFechar,#fechar-popup {
    cursor:pointer
}

@media(prefers-reduced-motion:reduce) {
    .banner-csites,.banner-csites__icon,body.banner-active {
        transition:none
    }
}

@media (min-width: 1024px) {
  .lado-esquerdo {
    padding-left: 20px!important;
  }

  .lado-direito {
    padding-right: 20px!important;
  }
}