/* ==========================================================================
   WS Pinturas e Reformas — folha de estilo
   Breakpoints: small ≥480px | medium ≥768px | large ≥960px
   ========================================================================== */

:root {
    --azul: #2e3192;
    --verde: #4caf50;
    --verde-hover: #59c45c;
    --cinza-claro: #e7e7e7;
    --escuro: #2b2b2b;
    --texto: #777777;
    --rosa: #dd0055;
    --fonte: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --altura-header: 80px;
}

/* Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    font: 300 16px/26px var(--fonte);
    color: var(--texto);
    background: #fff;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    background: #f8f8f8;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: #30a233; text-decoration: none; }
a:hover { color: #247b27; text-decoration: underline; }

p, ul, ol { margin: 0 0 25px 0; }
ul, ol { padding-left: 30px; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 25px 0;
    font-family: var(--fonte);
    font-weight: 100;
    color: var(--texto);
}
h3, .uk-h3 { font-size: 30px; line-height: 36px; }

em { color: var(--rosa); }
strong { font-weight: 700; }

.icone { width: 1em; height: 1em; vertical-align: -0.125em; }

/* Layout
   ========================================================================== */
.uk-container {
    max-width: 980px;
    padding: 0 25px;
}
.uk-container-center { margin-left: auto; margin-right: auto; }

.tm-block { position: relative; padding: 60px; }
.tm-block.tm-block-full-width { padding: 0 !important; }
.tm-block-default { background: #fff; }
.tm-block-primary { background: var(--cinza-claro); color: #000; }
.tm-block-dark { background: var(--escuro); color: #fff; }
.tm-block-dark a { color: rgba(255, 255, 255, 0.6); }
.tm-block-dark a:hover { color: #fff; }

/* Corpo do tema: hero e atendimento ocupam a largura total */
.tm-fullscreen > .tm-block-full-width > .uk-container {
    max-width: none;
    padding: 0;
}

.uk-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -25px;
    padding: 0;
    list-style: none;
    row-gap: 25px;
}
.uk-grid > * { flex: none; padding-left: 25px; width: 100%; }
.uk-grid > * > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .uk-width-medium-1-2 { width: 50%; }
    .uk-width-medium-1-3 { width: 33.3333%; }
}

.uk-panel { display: block; position: relative; }
.uk-panel-title {
    margin: 0 0 25px 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: var(--texto);
}
.uk-panel-teaser { margin-bottom: 25px; }
.uk-margin { margin-bottom: 25px; }
.uk-margin-bottom-remove { margin-bottom: 0 !important; }
.uk-margin-bottom-large { margin-bottom: 50px; }
.uk-text-center { text-align: center; }

/* Botões
   ========================================================================== */
.uk-button {
    display: inline-block;
    margin: 0;
    padding: 0 20px;
    min-height: 40px;
    line-height: 40px;
    font-family: var(--fonte);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 25px;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.uk-button:hover,
.uk-button:focus {
    background: var(--azul);
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
.uk-button:active { border-color: transparent; }

.uk-button-secondary {
    display: block;
    padding: 6px;
    background: var(--verde);
    color: rgba(255, 255, 255, 0.6);
}
.uk-button-secondary:hover,
.uk-button-secondary:focus { color: #fff; background: var(--azul); }

.uk-icon-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 25px;
    text-align: center;
    transition: all 0.2s ease-in-out;
}
.uk-icon-button .icone { vertical-align: middle; }
.uk-icon-button:hover,
.uk-icon-button:focus { background: var(--verde-hover); color: #fff; outline: none; }

/* Cabeçalho
   ========================================================================== */
.tm-header { position: relative; z-index: 100; }
@media (min-width: 640px) {
    .tm-header { position: sticky; top: 0; }
}

.uk-navbar {
    background: var(--azul);
    height: var(--altura-header);
    color: #fff;
}
.uk-navbar > .uk-container { position: relative; height: var(--altura-header); }

.tm-logo {
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    text-decoration: none;
}
.tm-logo:hover { text-decoration: none; }
.tm-logo h1 {
    margin: 0;
    height: var(--altura-header);
    line-height: var(--altura-header);
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.uk-navbar-flip { float: right; }
.uk-navbar-nav { display: flex; margin: 0; padding: 0; list-style: none; }
.uk-navbar-nav > li { position: relative; }
.uk-navbar-nav > li > a {
    position: relative;
    display: block;
    height: var(--altura-header);
    line-height: var(--altura-header);
    padding: 0 15px;
    font-family: var(--fonte);
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
}
.uk-navbar-nav > li > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #fff;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}
.uk-navbar-nav > li > a:hover::before,
.uk-navbar-nav > li > a:focus::before,
.uk-navbar-nav > li.uk-active > a::before { opacity: 1; }

@media (max-width: 767px) {
    .uk-navbar-nav { display: none; }
}

/* Destaque (hero)
   ========================================================================== */
.uk-slideshow {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    touch-action: pan-y;
}
.uk-slideshow-fullscreen,
.uk-slideshow-fullscreen > li { height: 100vh; min-height: 300px; }
.uk-slideshow > li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}
.uk-slideshow > li.uk-active { z-index: 10; opacity: 1; }
.uk-slideshow > li > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uk-overlay-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    color: #fff;
}
.uk-overlay-panel > div { width: 100%; }
.uk-overlay-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}
.uk-active > .uk-overlay-fade,
.js-loaded .uk-overlay-fade { opacity: 1; }

.tm-top-teaser .uk-h3 {
    max-width: 678px;
    margin: 0 0 25px 0;
    font-family: var(--fonte);
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em;
}

/* Serviços
   ========================================================================== */
.tm-block-primary .uk-panel-title { color: var(--azul); }
.tm-top-a .uk-panel-box .uk-panel-title { color: #000; font-family: var(--fonte); }
.tm-top-a .uk-panel { border-radius: 20px; }
.tm-top-a .uk-panel-box .uk-panel-teaser { padding: 0; }
.tm-top-a .uk-width-1-1:nth-child(2) .uk-panel { margin-left: 15px; margin-top: 15px; }

.servicos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: left;
    margin-bottom: 25px;
}
@media (min-width: 480px) {
    .servicos-grid { grid-template-columns: 1fr 1fr; }
}
.servicos-grid .servico { margin-bottom: 0; }
.servicos-grid .uk-margin:last-child,
.servicos-grid ul { margin-bottom: 0; }
.servicos-grid .uk-panel-title .icone { margin-right: 4px; }

.tm-block-primary a.uk-button-secondary { color: rgba(255, 255, 255, 0.6); }
.tm-block-primary a.uk-button-secondary:hover { color: #fff; }

/* Compartilhar */
.bt-social-share {
    display: table;
    width: auto;
    margin: 50px auto 0 auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 0;
}
.share-btn {
    display: inline-block;
    margin: 4px;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.share-btn:hover { opacity: 0.85; }
.share-btn .icone { margin-right: 4px; }
.share-facebook { background: #1877f2; }
.share-x        { background: #000; }
.share-linkedin { background: #0a66c2; }
.share-whatsapp { background: #25d366; }

/* Atendimento
   ========================================================================== */
.tm-top-c {
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: var(--azul) url("../img/imagem-atendimento.jpg") center center / cover no-repeat;
}
.tm-top-c a { color: #fff; }
.tm-top-c a:hover { color: #fff; }
.titulo-atendimento {
    font-family: var(--fonte);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.endereco, .telefone, .email {
    font-family: var(--fonte);
    font-size: 20px;
    color: #fff;
}
.telefone .icone { vertical-align: -0.15em; }
.telefone a:hover { text-decoration: none; opacity: 0.8; }
.email a { color: #fff; }
.uk-button.atendimento { font-size: 12px; }

/* Galeria (carrossel)
   ========================================================================== */
.tm-block-dark .uk-panel-title { color: #fff; }
.tm-bottom-b { padding-top: 60px; }
.tm-bottom-b .uk-panel-teaser { padding: 10px; }
.tm-bottom-b img { width: 100%; }

.uk-slidenav-position { position: relative; }
.uk-slideset {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 0 -25px;
    padding: 0;
    list-style: none;
}
.uk-slideset > li { flex: none; width: 100%; padding-left: 25px; }
@media (min-width: 480px) { .uk-slideset > li { width: 50%; } }
@media (min-width: 960px) { .uk-slideset > li { width: 33.3333%; } }
.uk-slideset > li[hidden] { display: none; }
.uk-slideset > li.uk-slideset-in { animation: uk-fade 0.5s linear; }

@keyframes uk-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Rodapé
   ========================================================================== */
.tm-footer-top .uk-nav { margin: 0; padding: 0; list-style: none; }
.tm-footer-top .uk-nav > li > a {
    display: block;
    padding: 5px 20px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.tm-footer-top .uk-nav > li > a:hover,
.tm-footer-top .uk-nav > li > a:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.mod-footer-contato .uk-icon-button { margin-top: 10px; }

.tm-footer { text-align: center; }
.tm-totop-scroller {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 20px;
    text-decoration: none !important;
    transition: all 0.05s linear 0s;
}
.tm-totop-scroller .icone { width: 20px; height: 20px; vertical-align: top; }

/* Ajustes para telas pequenas
   ========================================================================== */
@media (max-width: 767px) {
    .tm-block { padding: 60px 25px; }
}

@media (max-width: 678px) {
    .tm-top-teaser .uk-h3 { font-size: 40px; line-height: 45px; }
    .tm-top-teaser .uk-button { line-height: 22px; padding: 10px 15px; font-size: 20px; }
    #top-a.tm-block > .uk-container { padding: 0; }
    .tm-top-a .uk-width-1-1:nth-child(2) .uk-panel { margin-left: 0; }
}

@media (max-width: 479px) {
    .tm-block { padding: 40px 15px; }
    .tm-top-c { padding: 60px 0; }
    .titulo-atendimento { font-size: 26px; }
    .endereco, .telefone, .email { font-size: 17px; }
}

/* Acessibilidade: respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .uk-overlay-fade, .uk-button, .uk-icon-button, .uk-navbar-nav > li > a::before { transition: none; }
    .uk-slideset > li.uk-slideset-in { animation: none; }
}