clicável) */ .botao-filtro-ano { display: flex; align-items: center; gap: 4px; /* Espaçamento entre número e capa */ cursor: pointer; padding: 5px; border: 1px solid transparent; border-radius: 4px; transition: all 0.3s ease; /* Transição suave */ width: fit-content; } /* Estilo do número do ano (INATIVO - Desktop) */ .botao-filtro-ano .titulo-ano { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 22px; /* Tamanho base no desktop */ line-height: 140%; letter-spacing: 0em; color: #7F7F7F; /* Cinza quando inativo */ transition: all 0.3s ease; /* Transição suave */ } /* Estilo da imagem da capa (INATIVA - Desktop) */ .botao-filtro-ano .capa-ano { width: 89px; /* Largura base */ height: auto; display: block; border-radius: 4px; transition: all 0.3s ease; /* Transição suave */ } /* ========================================================== */ /* ESTILO QUANDO O BOTÃO ESTÁ ATIVO (DESKTOP) */ /* ========================================================== */ /* Remove borda do botão ativo */ .botao-filtro-ano.ativo { border-color: transparent !important; } /* MUDANÇA 1: Aumenta o tamanho do TEXTO quando ativo (Desktop) */ .botao-filtro-ano.ativo .titulo-ano { font-weight: bold !important; color: #286577 !important; /* Rosa */ font-size: 28px !important; /* 22px → 28px (aumenta 6px) */ } /* MUDANÇA 2: Aumenta o tamanho da CAPA quando ativa (Desktop) */ .botao-filtro-ano.ativo .capa-ano { width: 110px !important; /* 89px → 110px (aumenta ~23%) */ } /* ========================================================== */ /* AJUSTES PARA MOBILE */ /* ========================================================== */ @media (max-width: 767px) { /* Layout do container no mobile */ .navegacao-ano { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .botao-filtro-ano { gap: 4px; } /* Estilo do número do ano (INATIVO - Mobile) */ .botao-filtro-ano .titulo-ano { font-size: 12px; } /* MUDANÇA 3: Aumenta o texto quando ATIVO no mobile */ .botao-filtro-ano.ativo .titulo-ano { font-size: 16px !important; /* 12px → 16px (já estava assim) */ } /* Estilo da imagem da capa (INATIVA - Mobile) */ .botao-filtro-ano .capa-ano { width: 35px; } /* MUDANÇA 4: Aumenta a capa quando ATIVA no mobile */ .botao-filtro-ano.ativo .capa-ano { width: 45px !important; /* 35px → 45px (aumenta ~28%) */ } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-2f594e01 *//* ===== Ajusta espaçamento do carrossel ===== */ .elementor-widget-image-carousel.elementor-pagination-position-outside .swiper { margin-bottom: 0 !important; /* remove espaço entre a imagem e os pontos */ padding-bottom: 10px; /* ajusta aproximação */ } /* ===== Tamanho fixo das imagens ===== */ .elementor-widget-image-carousel .swiper-slide-inner img { width: 402px !important; height: 566px !important; object-fit: cover; /* preenche mantendo proporção */ margin: 0 auto; /* centraliza */ display: block; } /* ===== Ajuste para o mobile ===== */ @media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-inner img { width: 213px !important; height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6068adb *//* ====== ESTILOS DAS MINIATURAS (DESKTOP) ====== */ @media (min-width: 768px) { /* O container das miniaturas */ .gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* Seu gap preferido */ margin-top: 16px; /* Sua margem preferida */ height: 60px; /* Altura suficiente para o efeito "translateY" */ align-items: center; /* Alinha verticalmente */ } /* O "slot" clicável da miniatura */ .thumb-item { width: 48px; /* Largura da imagem */ height: 56px; /* Altura da imagem */ cursor: pointer; /* Removemos 'opacity' e 'border' daqui, pois vão para a imagem */ transition: transform 0.2s ease; /* Adiciona transição ao item */ } /* A IMAGEM dentro da miniatura (recebe todos os estilos visuais) */ .thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; /* Borda arredondada */ opacity: .55; /* Opacidade de inativo */ /* Animação suave */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Hover (se não estiver ativa) */ .thumb-item:not(.is-active):hover img { opacity: 1; } /* Classe que o JavaScript adiciona ao .thumb-item */ .thumb-item.is-active img { opacity: 1; /* Opacidade total */ /* Destaque com anel colorido e sombra */ box-shadow: 0 0 0 2px #286577, 0 6px 16px rgba(0, 0, 0, .15); /* Efeito sutil de "levantar" */ transform: translateY(-2px); } } /* ====== MOBILE: Esconde as thumbs (como no seu CSS original) ====== */ @media (max-width: 767px) { .gallery-thumbs { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f128fac *//* ====== DESKTOP: thumbs fixas 48x56, centralizadas e com 16px de espaço ====== */ @media (min-width: 768px){ /* Espaço entre a foto grande e as miniaturas */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 16px !important; } /* Faixa das thumbs com altura exata e conteúdo centralizado */ .galeria-obra .gallery-thumbs .swiper{ height: 56px; /* mesma altura das thumbs */ overflow: hidden; /* evita “pular” vertical */ } .galeria-obra .gallery-thumbs .swiper-wrapper{ display: flex; align-items: center; gap: 10px; } /* Slot de cada thumb (Swiper dá width inline — forçamos) */ .galeria-obra .gallery-thumbs .swiper-slide{ display: flex; align-items: center; justify-content: center; width: 56px !important; flex: 0 0 56px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Zera interferências internas */ .galeria-obra .gallery-thumbs .swiper-slide-inner, .galeria-obra .gallery-thumbs figure{ width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* A IMAGEM da thumb: exatamente 48x56 (sem border que altere o box) */ .galeria-obra .gallery-thumbs .swiper-slide-inner img{ width: 48px !important; height: 56px !important; max-width: none !important; /* cancela max-width:100% do Elementor */ object-fit: cover; display: block; border-radius: 6px; opacity: .55; /* nada de border aqui para não “diminuir” visualmente a área útil */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Destaque da thumb ativa (sem alterar o tamanho da imagem) */ .galeria-obra .gallery-thumbs .swiper-slide.is-active img{ opacity: 1; box-shadow: 0 0 0 2px #E6007E, 0 6px 16px rgba(0,0,0,.15); /* anel + sombra */ transform: translateY(-2px); } /* Esconde os dots no desktop */ .galeria-obra .gallery-main .swiper-pagination{ display: none !important; } } /* ====== MOBILE: bullets fora da foto, thumbs escondidas ====== */ @media (max-width: 767px){ .galeria-obra .gallery-thumbs{ display: none !important; } /* A foto grande no tamanho que você pediu */ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 213px !important; height: 300px !important; object-fit: cover; border-radius: 12px; display: block; margin: 0 auto; } /* Tira os bullets de cima da imagem e coloca logo abaixo */ .galeria-obra .gallery-main .swiper-pagination{ position: static !important; transform: none !important; margin-top: 8px; text-align: center; display: block !important; } /* Remove qualquer padding/margem extra que empurre os dots pra dentro */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ====== FOTO GRANDE no desktop (402x566) ====== */ @media (min-width: 768px){ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 402px !important; height: 566px !important; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4261534b *//* ========================================================== */ /* BREADCRUMB CUSTOMIZADO */ /* ========================================================== */ /* Contêiner principal do breadcrumb */ .breadcrumb-custom { font-family: 'Raleway', sans-serif; line-height: 140%; letter-spacing: -0.05em; /* Equivalente a -5% */ font-size: 18px; /* Tamanho Desktop */ display: flex; /* Alinha itens na horizontal */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ align-items: center; /* Alinha verticalmente */ } /* Estilo base para todos os itens (links e atual) */ .breadcrumb-item { /* Herda a maioria dos estilos do .breadcrumb-custom */ } /* Estilo para os links inativos */ .breadcrumb-link a { color: #7F7F7F; font-weight: 400; /* Regular */ text-decoration: none; } .breadcrumb-link a:hover { text-decoration: none; /* Garante que não haja hover */ color: #7F7F7F; /* Mantém a cor no hover */ } /* Estilo para o separador "|" */ .breadcrumb-separator { color: #7F7F7F; font-weight: 400; /* Regular */ margin-left: 4px; /* Espaço ANTES do separador */ margin-right: 4px; /* Espaço DEPOIS do separador */ } /* Estilo para o item atual (não é um link) */ .breadcrumb-current { color: #333333; font-weight: 700; /* Bold */ } /* --- AJUSTES PARA MOBILE --- */ @media (max-width: 767px) { .breadcrumb-custom { font-size: 12px; /* Tamanho Mobile */ justify-content: start; /* <<< CENTRALIZA NO MOBILE */ } /* O espaçamento do separador e as outras regras se mantêm */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-45db71fb *//* ================================================= */ /* TÍTULO COMPOSTO COM SEPARADOR (VERSÃO AJUSTADA) */ /* ================================================= */ /* Contêiner principal que alinha tudo */ .titulo-composto { /* --- REMOÇÃO DO FLEXBOX --- */ /* display: flex; <-- REMOVIDO */ /* align-items: center; <-- REMOVIDO */ /* gap: 16px; <-- REMOVIDO */ /* Suas especificações de tipografia para Desktop */ font-family: 'Antonio', sans-serif; font-size: 48px; line-height: 140%; letter-spacing: -0.05em; color: #286577; /* Mantida a cor rosa do seu exemplo anterior */ font-weight: bold; text-transform: uppercase; } /* Estilos individuais */ .titulo-colecao, .titulo-materia, /* <-- Adicionada nova classe */ .titulo-ano { /* <-- Renomeada de .titulo-obra */ /* Herda a maioria dos estilos do pai */ } .titulo-separador { font-weight: normal; opacity: 1; /* Margem que cria o espaçamento (funciona para ambos os separadores) */ margin-left: 16px; margin-right: 16px; } /* ================================================= */ /* AJUSTES ESPECÍFICOS PARA MOBILE (COM A SUA SOLICITAÇÃO) */ /* ================================================= */ @media (max-width: 767px) { .titulo-composto { /* --- REMOÇÃO DO FLEXBOX NO MOBILE --- */ /* flex-direction: row; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; */ /* gap: 0.3em; */ text-align: left; font-size: 22px; } .titulo-separador { display: inline-block; /* Margem para mobile */ margin-left: 8px; margin-right: 8px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-1ae2b765 *//* ====== MOBILE: botão visível com estilo requerido ====== */ @media (max-width: 767px){ /* garante o estado colapsado por padrão (se já usa outro CSS, pode ignorar esta parte) */ .texto-colapsavel{ max-height: 120px; overflow: hidden; transition: max-height .3s ease; } .texto-colapsavel.expanded{ max-height: none; } /* botão "Leia mais" — visual e alinhamento */ .btn-leia-mais{ /* visual */ color: #7F7F7F; font-family: "Raleway", sans-serif; font-weight: 500; /* Medium */ font-size: 14px; line-height: 140%; letter-spacing: -0.05em; /* -5% */ text-decoration: none !important; /* comportamento */ display: inline-flex; align-items: center; gap: 4px; /* espaço entre texto e chevron */ background: none; border: 0; padding: 0; cursor: pointer; /* alinhado à direita, mesmo sem container flex */ float: right; /* funciona dentro do widget */ margin-top: 8px; } .btn-leia-mais:hover, .btn-leia-mais:focus{ text-decoration: none; /* sem underline */ outline: none; } /* chevron em SVG à direita do texto */ .btn-leia-mais::after{ content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 4px; /* usamos mask para aplicar a cor #7F7F7F ao SVG */ background-color: #7F7F7F; -webkit-mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; } /* garante que o botão fique do lado direito do bloco de texto específico */ .texto-colapsavel + .btn-leia-mais{ float: right; } } /* ====== DESKTOP: texto aberto e botão oculto ====== */ @media (min-width: 768px){ .texto-colapsavel{ max-height: none; overflow: visible; } .btn-leia-mais{ display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-33ac22ed *//* ========================================================== */ /* SEÇÃO "DETALHES DA OBRA" - HUG DESKTOP & SCROLL MOBILE */ /* (COM "ABRAÇO" APLICADO TAMBÉM NO MOBILE) */ /* ========================================================== */ /* Regra para "Abraçar" o conteúdo (Aplicada em todas as telas por padrão) */ .conteiner-hug { width: auto !important; /* Ajusta a largura ao conteúdo */ /* Ou tente 'fit-content' se 'auto' não funcionar bem em algum navegador */ /* width: fit-content !important; */ flex-grow: 0 !important; /* Impede que cresça para preencher espaço extra */ flex-shrink: 0 !important; /* Impede que encolha dentro do scroll (Importante!) */ /* Garante alinhamento interno padrão */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; } /* AJUSTES PARA MOBILE (Apenas o Container Pai para Rolagem) */ @media (max-width: 767px) { /* Contêiner Pai: Força a linha única e habilita rolagem */ .detalhes-obra-container { display: flex; flex-wrap: nowrap !important; /* IMPEDE que os itens quebrem a linha */ overflow-x: auto !important; /* HABILITA a rolagem horizontal */ padding-bottom: 15px; /* Espaço extra para a barra de rolagem */ /* Ajuste o espaçamento entre os itens no mobile, se necessário */ gap: 20px; /* Exemplo de espaçamento entre os itens abraçados */ /* Opcional: Esconde a barra de rolagem visualmente */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detalhes-obra-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* O '.conteiner-hug' no mobile agora herda 'width: auto' da regra principal */ /* Não precisa mais de min-width ou width fixa aqui */ } /* Reseta as regras de rolagem para DESKTOP (Garante comportamento padrão) */ @media (min-width: 768px) { .detalhes-obra-container { display: flex; /* Garante flex */ flex-wrap: wrap !important; /* Permite quebrar linha no desktop */ overflow-x: hidden !important; /* Desabilita rolagem */ padding-bottom: 0; /* Remove padding extra do mobile */ /* Restaure o gap do desktop se necessário */ /* gap: 30px; */ } /* No desktop, o '.conteiner-hug' usa 'width: auto' e 'flex-grow: 0' */ .conteiner-hug { flex-shrink: 1 !important; /* Permite encolher no desktop se necessário */ } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-5375509 *//* ===== Ajusta espaçamento do carrossel ===== */ .elementor-widget-image-carousel.elementor-pagination-position-outside .swiper { margin-bottom: 0 !important; /* remove espaço entre a imagem e os pontos */ padding-bottom: 10px; /* ajusta aproximação */ } /* ===== Tamanho fixo das imagens ===== */ .elementor-widget-image-carousel .swiper-slide-inner img { width: 402px !important; height: 566px !important; object-fit: cover; /* preenche mantendo proporção */ margin: 0 auto; /* centraliza */ display: block; } /* ===== Ajuste para o mobile ===== */ @media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-inner img { width: 213px !important; height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fb62a34 *//* ====== ESTILOS DAS MINIATURAS (DESKTOP) ====== */ @media (min-width: 768px) { /* O container das miniaturas */ .gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* Seu gap preferido */ margin-top: 16px; /* Sua margem preferida */ height: 60px; /* Altura suficiente para o efeito "translateY" */ align-items: center; /* Alinha verticalmente */ } /* O "slot" clicável da miniatura */ .thumb-item { width: 48px; /* Largura da imagem */ height: 56px; /* Altura da imagem */ cursor: pointer; /* Removemos 'opacity' e 'border' daqui, pois vão para a imagem */ transition: transform 0.2s ease; /* Adiciona transição ao item */ } /* A IMAGEM dentro da miniatura (recebe todos os estilos visuais) */ .thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; /* Borda arredondada */ opacity: .55; /* Opacidade de inativo */ /* Animação suave */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Hover (se não estiver ativa) */ .thumb-item:not(.is-active):hover img { opacity: 1; } /* Classe que o JavaScript adiciona ao .thumb-item */ .thumb-item.is-active img { opacity: 1; /* Opacidade total */ /* Destaque com anel colorido e sombra */ box-shadow: 0 0 0 2px #286577, 0 6px 16px rgba(0, 0, 0, .15); /* Efeito sutil de "levantar" */ transform: translateY(-2px); } } /* ====== MOBILE: Esconde as thumbs (como no seu CSS original) ====== */ @media (max-width: 767px) { .gallery-thumbs { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5ccc328 *//* ====== DESKTOP: thumbs fixas 48x56, centralizadas e com 16px de espaço ====== */ @media (min-width: 768px){ /* Espaço entre a foto grande e as miniaturas */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 16px !important; } /* Faixa das thumbs com altura exata e conteúdo centralizado */ .galeria-obra .gallery-thumbs .swiper{ height: 56px; /* mesma altura das thumbs */ overflow: hidden; /* evita “pular” vertical */ } .galeria-obra .gallery-thumbs .swiper-wrapper{ display: flex; align-items: center; gap: 10px; } /* Slot de cada thumb (Swiper dá width inline — forçamos) */ .galeria-obra .gallery-thumbs .swiper-slide{ display: flex; align-items: center; justify-content: center; width: 56px !important; flex: 0 0 56px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Zera interferências internas */ .galeria-obra .gallery-thumbs .swiper-slide-inner, .galeria-obra .gallery-thumbs figure{ width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* A IMAGEM da thumb: exatamente 48x56 (sem border que altere o box) */ .galeria-obra .gallery-thumbs .swiper-slide-inner img{ width: 48px !important; height: 56px !important; max-width: none !important; /* cancela max-width:100% do Elementor */ object-fit: cover; display: block; border-radius: 6px; opacity: .55; /* nada de border aqui para não “diminuir” visualmente a área útil */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Destaque da thumb ativa (sem alterar o tamanho da imagem) */ .galeria-obra .gallery-thumbs .swiper-slide.is-active img{ opacity: 1; box-shadow: 0 0 0 2px #E6007E, 0 6px 16px rgba(0,0,0,.15); /* anel + sombra */ transform: translateY(-2px); } /* Esconde os dots no desktop */ .galeria-obra .gallery-main .swiper-pagination{ display: none !important; } } /* ====== MOBILE: bullets fora da foto, thumbs escondidas ====== */ @media (max-width: 767px){ .galeria-obra .gallery-thumbs{ display: none !important; } /* A foto grande no tamanho que você pediu */ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 213px !important; height: 300px !important; object-fit: cover; border-radius: 12px; display: block; margin: 0 auto; } /* Tira os bullets de cima da imagem e coloca logo abaixo */ .galeria-obra .gallery-main .swiper-pagination{ position: static !important; transform: none !important; margin-top: 8px; text-align: center; display: block !important; } /* Remove qualquer padding/margem extra que empurre os dots pra dentro */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ====== FOTO GRANDE no desktop (402x566) ====== */ @media (min-width: 768px){ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 402px !important; height: 566px !important; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fea04d6 *//* ========================================================== */ /* BREADCRUMB CUSTOMIZADO */ /* ========================================================== */ /* Contêiner principal do breadcrumb */ .breadcrumb-custom { font-family: 'Raleway', sans-serif; line-height: 140%; letter-spacing: -0.05em; /* Equivalente a -5% */ font-size: 18px; /* Tamanho Desktop */ display: flex; /* Alinha itens na horizontal */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ align-items: center; /* Alinha verticalmente */ } /* Estilo base para todos os itens (links e atual) */ .breadcrumb-item { /* Herda a maioria dos estilos do .breadcrumb-custom */ } /* Estilo para os links inativos */ .breadcrumb-link a { color: #7F7F7F; font-weight: 400; /* Regular */ text-decoration: none; } .breadcrumb-link a:hover { text-decoration: none; /* Garante que não haja hover */ color: #7F7F7F; /* Mantém a cor no hover */ } /* Estilo para o separador "|" */ .breadcrumb-separator { color: #7F7F7F; font-weight: 400; /* Regular */ margin-left: 4px; /* Espaço ANTES do separador */ margin-right: 4px; /* Espaço DEPOIS do separador */ } /* Estilo para o item atual (não é um link) */ .breadcrumb-current { color: #333333; font-weight: 700; /* Bold */ } /* --- AJUSTES PARA MOBILE --- */ @media (max-width: 767px) { .breadcrumb-custom { font-size: 12px; /* Tamanho Mobile */ justify-content: start; /* <<< CENTRALIZA NO MOBILE */ } /* O espaçamento do separador e as outras regras se mantêm */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-86f3018 *//* ================================================= */ /* TÍTULO COMPOSTO COM SEPARADOR (VERSÃO AJUSTADA) */ /* ================================================= */ /* Contêiner principal que alinha tudo */ .titulo-composto { /* --- REMOÇÃO DO FLEXBOX --- */ /* display: flex; <-- REMOVIDO */ /* align-items: center; <-- REMOVIDO */ /* gap: 16px; <-- REMOVIDO */ /* Suas especificações de tipografia para Desktop */ font-family: 'Antonio', sans-serif; font-size: 48px; line-height: 140%; letter-spacing: -0.05em; color: #286577; /* Mantida a cor rosa do seu exemplo anterior */ font-weight: bold; text-transform: uppercase; } /* Estilos individuais */ .titulo-colecao, .titulo-materia, /* <-- Adicionada nova classe */ .titulo-ano { /* <-- Renomeada de .titulo-obra */ /* Herda a maioria dos estilos do pai */ } .titulo-separador { font-weight: normal; opacity: 1; /* Margem que cria o espaçamento (funciona para ambos os separadores) */ margin-left: 16px; margin-right: 16px; } /* ================================================= */ /* AJUSTES ESPECÍFICOS PARA MOBILE (COM A SUA SOLICITAÇÃO) */ /* ================================================= */ @media (max-width: 767px) { .titulo-composto { /* --- REMOÇÃO DO FLEXBOX NO MOBILE --- */ /* flex-direction: row; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; */ /* gap: 0.3em; */ text-align: left; font-size: 22px; } .titulo-separador { display: inline-block; /* Margem para mobile */ margin-left: 8px; margin-right: 8px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-d31183a *//* ====== MOBILE: botão visível com estilo requerido ====== */ @media (max-width: 767px){ /* garante o estado colapsado por padrão (se já usa outro CSS, pode ignorar esta parte) */ .texto-colapsavel{ max-height: 120px; overflow: hidden; transition: max-height .3s ease; } .texto-colapsavel.expanded{ max-height: none; } /* botão "Leia mais" — visual e alinhamento */ .btn-leia-mais{ /* visual */ color: #7F7F7F; font-family: "Raleway", sans-serif; font-weight: 500; /* Medium */ font-size: 14px; line-height: 140%; letter-spacing: -0.05em; /* -5% */ text-decoration: none !important; /* comportamento */ display: inline-flex; align-items: center; gap: 4px; /* espaço entre texto e chevron */ background: none; border: 0; padding: 0; cursor: pointer; /* alinhado à direita, mesmo sem container flex */ float: right; /* funciona dentro do widget */ margin-top: 8px; } .btn-leia-mais:hover, .btn-leia-mais:focus{ text-decoration: none; /* sem underline */ outline: none; } /* chevron em SVG à direita do texto */ .btn-leia-mais::after{ content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 4px; /* usamos mask para aplicar a cor #7F7F7F ao SVG */ background-color: #7F7F7F; -webkit-mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; } /* garante que o botão fique do lado direito do bloco de texto específico */ .texto-colapsavel + .btn-leia-mais{ float: right; } } /* ====== DESKTOP: texto aberto e botão oculto ====== */ @media (min-width: 768px){ .texto-colapsavel{ max-height: none; overflow: visible; } .btn-leia-mais{ display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e21c7a4 *//* ========================================================== */ /* SEÇÃO "DETALHES DA OBRA" - HUG DESKTOP & SCROLL MOBILE */ /* (COM "ABRAÇO" APLICADO TAMBÉM NO MOBILE) */ /* ========================================================== */ /* Regra para "Abraçar" o conteúdo (Aplicada em todas as telas por padrão) */ .conteiner-hug { width: auto !important; /* Ajusta a largura ao conteúdo */ /* Ou tente 'fit-content' se 'auto' não funcionar bem em algum navegador */ /* width: fit-content !important; */ flex-grow: 0 !important; /* Impede que cresça para preencher espaço extra */ flex-shrink: 0 !important; /* Impede que encolha dentro do scroll (Importante!) */ /* Garante alinhamento interno padrão */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; } /* AJUSTES PARA MOBILE (Apenas o Container Pai para Rolagem) */ @media (max-width: 767px) { /* Contêiner Pai: Força a linha única e habilita rolagem */ .detalhes-obra-container { display: flex; flex-wrap: nowrap !important; /* IMPEDE que os itens quebrem a linha */ overflow-x: auto !important; /* HABILITA a rolagem horizontal */ padding-bottom: 15px; /* Espaço extra para a barra de rolagem */ /* Ajuste o espaçamento entre os itens no mobile, se necessário */ gap: 20px; /* Exemplo de espaçamento entre os itens abraçados */ /* Opcional: Esconde a barra de rolagem visualmente */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detalhes-obra-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* O '.conteiner-hug' no mobile agora herda 'width: auto' da regra principal */ /* Não precisa mais de min-width ou width fixa aqui */ } /* Reseta as regras de rolagem para DESKTOP (Garante comportamento padrão) */ @media (min-width: 768px) { .detalhes-obra-container { display: flex; /* Garante flex */ flex-wrap: wrap !important; /* Permite quebrar linha no desktop */ overflow-x: hidden !important; /* Desabilita rolagem */ padding-bottom: 0; /* Remove padding extra do mobile */ /* Restaure o gap do desktop se necessário */ /* gap: 30px; */ } /* No desktop, o '.conteiner-hug' usa 'width: auto' e 'flex-grow: 0' */ .conteiner-hug { flex-shrink: 1 !important; /* Permite encolher no desktop se necessário */ } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-79710ed4 *//* ===== Ajusta espaçamento do carrossel ===== */ .elementor-widget-image-carousel.elementor-pagination-position-outside .swiper { margin-bottom: 0 !important; /* remove espaço entre a imagem e os pontos */ padding-bottom: 10px; /* ajusta aproximação */ } /* ===== Tamanho fixo das imagens ===== */ .elementor-widget-image-carousel .swiper-slide-inner img { width: 402px !important; height: 566px !important; object-fit: cover; /* preenche mantendo proporção */ margin: 0 auto; /* centraliza */ display: block; } /* ===== Ajuste para o mobile ===== */ @media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-inner img { width: 213px !important; height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4c53f01a *//* ====== ESTILOS DAS MINIATURAS (DESKTOP) ====== */ @media (min-width: 768px) { /* O container das miniaturas */ .gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* Seu gap preferido */ margin-top: 16px; /* Sua margem preferida */ height: 60px; /* Altura suficiente para o efeito "translateY" */ align-items: center; /* Alinha verticalmente */ } /* O "slot" clicável da miniatura */ .thumb-item { width: 48px; /* Largura da imagem */ height: 56px; /* Altura da imagem */ cursor: pointer; /* Removemos 'opacity' e 'border' daqui, pois vão para a imagem */ transition: transform 0.2s ease; /* Adiciona transição ao item */ } /* A IMAGEM dentro da miniatura (recebe todos os estilos visuais) */ .thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; /* Borda arredondada */ opacity: .55; /* Opacidade de inativo */ /* Animação suave */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Hover (se não estiver ativa) */ .thumb-item:not(.is-active):hover img { opacity: 1; } /* Classe que o JavaScript adiciona ao .thumb-item */ .thumb-item.is-active img { opacity: 1; /* Opacidade total */ /* Destaque com anel colorido e sombra */ box-shadow: 0 0 0 2px #286577, 0 6px 16px rgba(0, 0, 0, .15); /* Efeito sutil de "levantar" */ transform: translateY(-2px); } } /* ====== MOBILE: Esconde as thumbs (como no seu CSS original) ====== */ @media (max-width: 767px) { .gallery-thumbs { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-921759f *//* ====== DESKTOP: thumbs fixas 48x56, centralizadas e com 16px de espaço ====== */ @media (min-width: 768px){ /* Espaço entre a foto grande e as miniaturas */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 16px !important; } /* Faixa das thumbs com altura exata e conteúdo centralizado */ .galeria-obra .gallery-thumbs .swiper{ height: 56px; /* mesma altura das thumbs */ overflow: hidden; /* evita “pular” vertical */ } .galeria-obra .gallery-thumbs .swiper-wrapper{ display: flex; align-items: center; gap: 10px; } /* Slot de cada thumb (Swiper dá width inline — forçamos) */ .galeria-obra .gallery-thumbs .swiper-slide{ display: flex; align-items: center; justify-content: center; width: 56px !important; flex: 0 0 56px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Zera interferências internas */ .galeria-obra .gallery-thumbs .swiper-slide-inner, .galeria-obra .gallery-thumbs figure{ width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* A IMAGEM da thumb: exatamente 48x56 (sem border que altere o box) */ .galeria-obra .gallery-thumbs .swiper-slide-inner img{ width: 48px !important; height: 56px !important; max-width: none !important; /* cancela max-width:100% do Elementor */ object-fit: cover; display: block; border-radius: 6px; opacity: .55; /* nada de border aqui para não “diminuir” visualmente a área útil */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Destaque da thumb ativa (sem alterar o tamanho da imagem) */ .galeria-obra .gallery-thumbs .swiper-slide.is-active img{ opacity: 1; box-shadow: 0 0 0 2px #E6007E, 0 6px 16px rgba(0,0,0,.15); /* anel + sombra */ transform: translateY(-2px); } /* Esconde os dots no desktop */ .galeria-obra .gallery-main .swiper-pagination{ display: none !important; } } /* ====== MOBILE: bullets fora da foto, thumbs escondidas ====== */ @media (max-width: 767px){ .galeria-obra .gallery-thumbs{ display: none !important; } /* A foto grande no tamanho que você pediu */ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 213px !important; height: 300px !important; object-fit: cover; border-radius: 12px; display: block; margin: 0 auto; } /* Tira os bullets de cima da imagem e coloca logo abaixo */ .galeria-obra .gallery-main .swiper-pagination{ position: static !important; transform: none !important; margin-top: 8px; text-align: center; display: block !important; } /* Remove qualquer padding/margem extra que empurre os dots pra dentro */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ====== FOTO GRANDE no desktop (402x566) ====== */ @media (min-width: 768px){ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 402px !important; height: 566px !important; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-37003c7f *//* ========================================================== */ /* BREADCRUMB CUSTOMIZADO */ /* ========================================================== */ /* Contêiner principal do breadcrumb */ .breadcrumb-custom { font-family: 'Raleway', sans-serif; line-height: 140%; letter-spacing: -0.05em; /* Equivalente a -5% */ font-size: 18px; /* Tamanho Desktop */ display: flex; /* Alinha itens na horizontal */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ align-items: center; /* Alinha verticalmente */ } /* Estilo base para todos os itens (links e atual) */ .breadcrumb-item { /* Herda a maioria dos estilos do .breadcrumb-custom */ } /* Estilo para os links inativos */ .breadcrumb-link a { color: #7F7F7F; font-weight: 400; /* Regular */ text-decoration: none; } .breadcrumb-link a:hover { text-decoration: none; /* Garante que não haja hover */ color: #7F7F7F; /* Mantém a cor no hover */ } /* Estilo para o separador "|" */ .breadcrumb-separator { color: #7F7F7F; font-weight: 400; /* Regular */ margin-left: 4px; /* Espaço ANTES do separador */ margin-right: 4px; /* Espaço DEPOIS do separador */ } /* Estilo para o item atual (não é um link) */ .breadcrumb-current { color: #333333; font-weight: 700; /* Bold */ } /* --- AJUSTES PARA MOBILE --- */ @media (max-width: 767px) { .breadcrumb-custom { font-size: 12px; /* Tamanho Mobile */ justify-content: start; /* <<< CENTRALIZA NO MOBILE */ } /* O espaçamento do separador e as outras regras se mantêm */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-25f82b05 *//* ================================================= */ /* TÍTULO COMPOSTO COM SEPARADOR (VERSÃO AJUSTADA) */ /* ================================================= */ /* Contêiner principal que alinha tudo */ .titulo-composto { /* --- REMOÇÃO DO FLEXBOX --- */ /* display: flex; <-- REMOVIDO */ /* align-items: center; <-- REMOVIDO */ /* gap: 16px; <-- REMOVIDO */ /* Suas especificações de tipografia para Desktop */ font-family: 'Antonio', sans-serif; font-size: 48px; line-height: 140%; letter-spacing: -0.05em; color: #286577; /* Mantida a cor rosa do seu exemplo anterior */ font-weight: bold; text-transform: uppercase; } /* Estilos individuais */ .titulo-colecao, .titulo-materia, /* <-- Adicionada nova classe */ .titulo-ano { /* <-- Renomeada de .titulo-obra */ /* Herda a maioria dos estilos do pai */ } .titulo-separador { font-weight: normal; opacity: 1; /* Margem que cria o espaçamento (funciona para ambos os separadores) */ margin-left: 16px; margin-right: 16px; } /* ================================================= */ /* AJUSTES ESPECÍFICOS PARA MOBILE (COM A SUA SOLICITAÇÃO) */ /* ================================================= */ @media (max-width: 767px) { .titulo-composto { /* --- REMOÇÃO DO FLEXBOX NO MOBILE --- */ /* flex-direction: row; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; */ /* gap: 0.3em; */ text-align: left; font-size: 22px; } .titulo-separador { display: inline-block; /* Margem para mobile */ margin-left: 8px; margin-right: 8px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-77d0df5f *//* ====== MOBILE: botão visível com estilo requerido ====== */ @media (max-width: 767px){ /* garante o estado colapsado por padrão (se já usa outro CSS, pode ignorar esta parte) */ .texto-colapsavel{ max-height: 120px; overflow: hidden; transition: max-height .3s ease; } .texto-colapsavel.expanded{ max-height: none; } /* botão "Leia mais" — visual e alinhamento */ .btn-leia-mais{ /* visual */ color: #7F7F7F; font-family: "Raleway", sans-serif; font-weight: 500; /* Medium */ font-size: 14px; line-height: 140%; letter-spacing: -0.05em; /* -5% */ text-decoration: none !important; /* comportamento */ display: inline-flex; align-items: center; gap: 4px; /* espaço entre texto e chevron */ background: none; border: 0; padding: 0; cursor: pointer; /* alinhado à direita, mesmo sem container flex */ float: right; /* funciona dentro do widget */ margin-top: 8px; } .btn-leia-mais:hover, .btn-leia-mais:focus{ text-decoration: none; /* sem underline */ outline: none; } /* chevron em SVG à direita do texto */ .btn-leia-mais::after{ content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 4px; /* usamos mask para aplicar a cor #7F7F7F ao SVG */ background-color: #7F7F7F; -webkit-mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; } /* garante que o botão fique do lado direito do bloco de texto específico */ .texto-colapsavel + .btn-leia-mais{ float: right; } } /* ====== DESKTOP: texto aberto e botão oculto ====== */ @media (min-width: 768px){ .texto-colapsavel{ max-height: none; overflow: visible; } .btn-leia-mais{ display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3985d8f *//* ========================================================== */ /* SEÇÃO "DETALHES DA OBRA" - HUG DESKTOP & SCROLL MOBILE */ /* (COM "ABRAÇO" APLICADO TAMBÉM NO MOBILE) */ /* ========================================================== */ /* Regra para "Abraçar" o conteúdo (Aplicada em todas as telas por padrão) */ .conteiner-hug { width: auto !important; /* Ajusta a largura ao conteúdo */ /* Ou tente 'fit-content' se 'auto' não funcionar bem em algum navegador */ /* width: fit-content !important; */ flex-grow: 0 !important; /* Impede que cresça para preencher espaço extra */ flex-shrink: 0 !important; /* Impede que encolha dentro do scroll (Importante!) */ /* Garante alinhamento interno padrão */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; } /* AJUSTES PARA MOBILE (Apenas o Container Pai para Rolagem) */ @media (max-width: 767px) { /* Contêiner Pai: Força a linha única e habilita rolagem */ .detalhes-obra-container { display: flex; flex-wrap: nowrap !important; /* IMPEDE que os itens quebrem a linha */ overflow-x: auto !important; /* HABILITA a rolagem horizontal */ padding-bottom: 15px; /* Espaço extra para a barra de rolagem */ /* Ajuste o espaçamento entre os itens no mobile, se necessário */ gap: 20px; /* Exemplo de espaçamento entre os itens abraçados */ /* Opcional: Esconde a barra de rolagem visualmente */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detalhes-obra-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* O '.conteiner-hug' no mobile agora herda 'width: auto' da regra principal */ /* Não precisa mais de min-width ou width fixa aqui */ } /* Reseta as regras de rolagem para DESKTOP (Garante comportamento padrão) */ @media (min-width: 768px) { .detalhes-obra-container { display: flex; /* Garante flex */ flex-wrap: wrap !important; /* Permite quebrar linha no desktop */ overflow-x: hidden !important; /* Desabilita rolagem */ padding-bottom: 0; /* Remove padding extra do mobile */ /* Restaure o gap do desktop se necessário */ /* gap: 30px; */ } /* No desktop, o '.conteiner-hug' usa 'width: auto' e 'flex-grow: 0' */ .conteiner-hug { flex-shrink: 1 !important; /* Permite encolher no desktop se necessário */ } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-1a8f3af *//* ===== Ajusta espaçamento do carrossel ===== */ .elementor-widget-image-carousel.elementor-pagination-position-outside .swiper { margin-bottom: 0 !important; /* remove espaço entre a imagem e os pontos */ padding-bottom: 10px; /* ajusta aproximação */ } /* ===== Tamanho fixo das imagens ===== */ .elementor-widget-image-carousel .swiper-slide-inner img { width: 402px !important; height: 566px !important; object-fit: cover; /* preenche mantendo proporção */ margin: 0 auto; /* centraliza */ display: block; } /* ===== Ajuste para o mobile ===== */ @media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-inner img { width: 213px !important; height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-679bc70 *//* ====== ESTILOS DAS MINIATURAS (DESKTOP) ====== */ @media (min-width: 768px) { /* O container das miniaturas */ .gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* Seu gap preferido */ margin-top: 16px; /* Sua margem preferida */ height: 60px; /* Altura suficiente para o efeito "translateY" */ align-items: center; /* Alinha verticalmente */ } /* O "slot" clicável da miniatura */ .thumb-item { width: 48px; /* Largura da imagem */ height: 56px; /* Altura da imagem */ cursor: pointer; /* Removemos 'opacity' e 'border' daqui, pois vão para a imagem */ transition: transform 0.2s ease; /* Adiciona transição ao item */ } /* A IMAGEM dentro da miniatura (recebe todos os estilos visuais) */ .thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; /* Borda arredondada */ opacity: .55; /* Opacidade de inativo */ /* Animação suave */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Hover (se não estiver ativa) */ .thumb-item:not(.is-active):hover img { opacity: 1; } /* Classe que o JavaScript adiciona ao .thumb-item */ .thumb-item.is-active img { opacity: 1; /* Opacidade total */ /* Destaque com anel colorido e sombra */ box-shadow: 0 0 0 2px #286577, 0 6px 16px rgba(0, 0, 0, .15); /* Efeito sutil de "levantar" */ transform: translateY(-2px); } } /* ====== MOBILE: Esconde as thumbs (como no seu CSS original) ====== */ @media (max-width: 767px) { .gallery-thumbs { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7d79247 *//* ====== DESKTOP: thumbs fixas 48x56, centralizadas e com 16px de espaço ====== */ @media (min-width: 768px){ /* Espaço entre a foto grande e as miniaturas */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 16px !important; } /* Faixa das thumbs com altura exata e conteúdo centralizado */ .galeria-obra .gallery-thumbs .swiper{ height: 56px; /* mesma altura das thumbs */ overflow: hidden; /* evita “pular” vertical */ } .galeria-obra .gallery-thumbs .swiper-wrapper{ display: flex; align-items: center; gap: 10px; } /* Slot de cada thumb (Swiper dá width inline — forçamos) */ .galeria-obra .gallery-thumbs .swiper-slide{ display: flex; align-items: center; justify-content: center; width: 56px !important; flex: 0 0 56px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Zera interferências internas */ .galeria-obra .gallery-thumbs .swiper-slide-inner, .galeria-obra .gallery-thumbs figure{ width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* A IMAGEM da thumb: exatamente 48x56 (sem border que altere o box) */ .galeria-obra .gallery-thumbs .swiper-slide-inner img{ width: 48px !important; height: 56px !important; max-width: none !important; /* cancela max-width:100% do Elementor */ object-fit: cover; display: block; border-radius: 6px; opacity: .55; /* nada de border aqui para não “diminuir” visualmente a área útil */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Destaque da thumb ativa (sem alterar o tamanho da imagem) */ .galeria-obra .gallery-thumbs .swiper-slide.is-active img{ opacity: 1; box-shadow: 0 0 0 2px #E6007E, 0 6px 16px rgba(0,0,0,.15); /* anel + sombra */ transform: translateY(-2px); } /* Esconde os dots no desktop */ .galeria-obra .gallery-main .swiper-pagination{ display: none !important; } } /* ====== MOBILE: bullets fora da foto, thumbs escondidas ====== */ @media (max-width: 767px){ .galeria-obra .gallery-thumbs{ display: none !important; } /* A foto grande no tamanho que você pediu */ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 213px !important; height: 300px !important; object-fit: cover; border-radius: 12px; display: block; margin: 0 auto; } /* Tira os bullets de cima da imagem e coloca logo abaixo */ .galeria-obra .gallery-main .swiper-pagination{ position: static !important; transform: none !important; margin-top: 8px; text-align: center; display: block !important; } /* Remove qualquer padding/margem extra que empurre os dots pra dentro */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ====== FOTO GRANDE no desktop (402x566) ====== */ @media (min-width: 768px){ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 402px !important; height: 566px !important; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-678a7d0 *//* ========================================================== */ /* BREADCRUMB CUSTOMIZADO */ /* ========================================================== */ /* Contêiner principal do breadcrumb */ .breadcrumb-custom { font-family: 'Raleway', sans-serif; line-height: 140%; letter-spacing: -0.05em; /* Equivalente a -5% */ font-size: 18px; /* Tamanho Desktop */ display: flex; /* Alinha itens na horizontal */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ align-items: center; /* Alinha verticalmente */ } /* Estilo base para todos os itens (links e atual) */ .breadcrumb-item { /* Herda a maioria dos estilos do .breadcrumb-custom */ } /* Estilo para os links inativos */ .breadcrumb-link a { color: #7F7F7F; font-weight: 400; /* Regular */ text-decoration: none; } .breadcrumb-link a:hover { text-decoration: none; /* Garante que não haja hover */ color: #7F7F7F; /* Mantém a cor no hover */ } /* Estilo para o separador "|" */ .breadcrumb-separator { color: #7F7F7F; font-weight: 400; /* Regular */ margin-left: 4px; /* Espaço ANTES do separador */ margin-right: 4px; /* Espaço DEPOIS do separador */ } /* Estilo para o item atual (não é um link) */ .breadcrumb-current { color: #333333; font-weight: 700; /* Bold */ } /* --- AJUSTES PARA MOBILE --- */ @media (max-width: 767px) { .breadcrumb-custom { font-size: 12px; /* Tamanho Mobile */ justify-content: start; /* <<< CENTRALIZA NO MOBILE */ } /* O espaçamento do separador e as outras regras se mantêm */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-56f39f7 *//* ================================================= */ /* TÍTULO COMPOSTO COM SEPARADOR (VERSÃO AJUSTADA) */ /* ================================================= */ /* Contêiner principal que alinha tudo */ .titulo-composto { /* --- REMOÇÃO DO FLEXBOX --- */ /* display: flex; <-- REMOVIDO */ /* align-items: center; <-- REMOVIDO */ /* gap: 16px; <-- REMOVIDO */ /* Suas especificações de tipografia para Desktop */ font-family: 'Antonio', sans-serif; font-size: 48px; line-height: 140%; letter-spacing: -0.05em; color: #286577; /* Mantida a cor rosa do seu exemplo anterior */ font-weight: bold; text-transform: uppercase; } /* Estilos individuais */ .titulo-colecao, .titulo-materia, /* <-- Adicionada nova classe */ .titulo-ano { /* <-- Renomeada de .titulo-obra */ /* Herda a maioria dos estilos do pai */ } .titulo-separador { font-weight: normal; opacity: 1; /* Margem que cria o espaçamento (funciona para ambos os separadores) */ margin-left: 16px; margin-right: 16px; } /* ================================================= */ /* AJUSTES ESPECÍFICOS PARA MOBILE (COM A SUA SOLICITAÇÃO) */ /* ================================================= */ @media (max-width: 767px) { .titulo-composto { /* --- REMOÇÃO DO FLEXBOX NO MOBILE --- */ /* flex-direction: row; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; */ /* gap: 0.3em; */ text-align: left; font-size: 22px; } .titulo-separador { display: inline-block; /* Margem para mobile */ margin-left: 8px; margin-right: 8px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-58bad48 *//* ====== MOBILE: botão visível com estilo requerido ====== */ @media (max-width: 767px){ /* garante o estado colapsado por padrão (se já usa outro CSS, pode ignorar esta parte) */ .texto-colapsavel{ max-height: 120px; overflow: hidden; transition: max-height .3s ease; } .texto-colapsavel.expanded{ max-height: none; } /* botão "Leia mais" — visual e alinhamento */ .btn-leia-mais{ /* visual */ color: #7F7F7F; font-family: "Raleway", sans-serif; font-weight: 500; /* Medium */ font-size: 14px; line-height: 140%; letter-spacing: -0.05em; /* -5% */ text-decoration: none !important; /* comportamento */ display: inline-flex; align-items: center; gap: 4px; /* espaço entre texto e chevron */ background: none; border: 0; padding: 0; cursor: pointer; /* alinhado à direita, mesmo sem container flex */ float: right; /* funciona dentro do widget */ margin-top: 8px; } .btn-leia-mais:hover, .btn-leia-mais:focus{ text-decoration: none; /* sem underline */ outline: none; } /* chevron em SVG à direita do texto */ .btn-leia-mais::after{ content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 4px; /* usamos mask para aplicar a cor #7F7F7F ao SVG */ background-color: #7F7F7F; -webkit-mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; } /* garante que o botão fique do lado direito do bloco de texto específico */ .texto-colapsavel + .btn-leia-mais{ float: right; } } /* ====== DESKTOP: texto aberto e botão oculto ====== */ @media (min-width: 768px){ .texto-colapsavel{ max-height: none; overflow: visible; } .btn-leia-mais{ display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c94ad97 *//* ========================================================== */ /* SEÇÃO "DETALHES DA OBRA" - HUG DESKTOP & SCROLL MOBILE */ /* (COM "ABRAÇO" APLICADO TAMBÉM NO MOBILE) */ /* ========================================================== */ /* Regra para "Abraçar" o conteúdo (Aplicada em todas as telas por padrão) */ .conteiner-hug { width: auto !important; /* Ajusta a largura ao conteúdo */ /* Ou tente 'fit-content' se 'auto' não funcionar bem em algum navegador */ /* width: fit-content !important; */ flex-grow: 0 !important; /* Impede que cresça para preencher espaço extra */ flex-shrink: 0 !important; /* Impede que encolha dentro do scroll (Importante!) */ /* Garante alinhamento interno padrão */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; } /* AJUSTES PARA MOBILE (Apenas o Container Pai para Rolagem) */ @media (max-width: 767px) { /* Contêiner Pai: Força a linha única e habilita rolagem */ .detalhes-obra-container { display: flex; flex-wrap: nowrap !important; /* IMPEDE que os itens quebrem a linha */ overflow-x: auto !important; /* HABILITA a rolagem horizontal */ padding-bottom: 15px; /* Espaço extra para a barra de rolagem */ /* Ajuste o espaçamento entre os itens no mobile, se necessário */ gap: 20px; /* Exemplo de espaçamento entre os itens abraçados */ /* Opcional: Esconde a barra de rolagem visualmente */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detalhes-obra-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* O '.conteiner-hug' no mobile agora herda 'width: auto' da regra principal */ /* Não precisa mais de min-width ou width fixa aqui */ } /* Reseta as regras de rolagem para DESKTOP (Garante comportamento padrão) */ @media (min-width: 768px) { .detalhes-obra-container { display: flex; /* Garante flex */ flex-wrap: wrap !important; /* Permite quebrar linha no desktop */ overflow-x: hidden !important; /* Desabilita rolagem */ padding-bottom: 0; /* Remove padding extra do mobile */ /* Restaure o gap do desktop se necessário */ /* gap: 30px; */ } /* No desktop, o '.conteiner-hug' usa 'width: auto' e 'flex-grow: 0' */ .conteiner-hug { flex-shrink: 1 !important; /* Permite encolher no desktop se necessário */ } }/* End custom CSS */ /* Start custom CSS for image-carousel, class: .elementor-element-646ae00 *//* ===== Ajusta espaçamento do carrossel ===== */ .elementor-widget-image-carousel.elementor-pagination-position-outside .swiper { margin-bottom: 0 !important; /* remove espaço entre a imagem e os pontos */ padding-bottom: 10px; /* ajusta aproximação */ } /* ===== Tamanho fixo das imagens ===== */ .elementor-widget-image-carousel .swiper-slide-inner img { width: 402px !important; height: 566px !important; object-fit: cover; /* preenche mantendo proporção */ margin: 0 auto; /* centraliza */ display: block; } /* ===== Ajuste para o mobile ===== */ @media (max-width: 767px) { .elementor-widget-image-carousel .swiper-slide-inner img { width: 213px !important; height: 300px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3a260ff *//* ====== ESTILOS DAS MINIATURAS (DESKTOP) ====== */ @media (min-width: 768px) { /* O container das miniaturas */ .gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; /* Seu gap preferido */ margin-top: 16px; /* Sua margem preferida */ height: 60px; /* Altura suficiente para o efeito "translateY" */ align-items: center; /* Alinha verticalmente */ } /* O "slot" clicável da miniatura */ .thumb-item { width: 48px; /* Largura da imagem */ height: 56px; /* Altura da imagem */ cursor: pointer; /* Removemos 'opacity' e 'border' daqui, pois vão para a imagem */ transition: transform 0.2s ease; /* Adiciona transição ao item */ } /* A IMAGEM dentro da miniatura (recebe todos os estilos visuais) */ .thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; /* Borda arredondada */ opacity: .55; /* Opacidade de inativo */ /* Animação suave */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Hover (se não estiver ativa) */ .thumb-item:not(.is-active):hover img { opacity: 1; } /* Classe que o JavaScript adiciona ao .thumb-item */ .thumb-item.is-active img { opacity: 1; /* Opacidade total */ /* Destaque com anel colorido e sombra */ box-shadow: 0 0 0 2px #286577, 0 6px 16px rgba(0, 0, 0, .15); /* Efeito sutil de "levantar" */ transform: translateY(-2px); } } /* ====== MOBILE: Esconde as thumbs (como no seu CSS original) ====== */ @media (max-width: 767px) { .gallery-thumbs { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1f73102 *//* ====== DESKTOP: thumbs fixas 48x56, centralizadas e com 16px de espaço ====== */ @media (min-width: 768px){ /* Espaço entre a foto grande e as miniaturas */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 16px !important; } /* Faixa das thumbs com altura exata e conteúdo centralizado */ .galeria-obra .gallery-thumbs .swiper{ height: 56px; /* mesma altura das thumbs */ overflow: hidden; /* evita “pular” vertical */ } .galeria-obra .gallery-thumbs .swiper-wrapper{ display: flex; align-items: center; gap: 10px; } /* Slot de cada thumb (Swiper dá width inline — forçamos) */ .galeria-obra .gallery-thumbs .swiper-slide{ display: flex; align-items: center; justify-content: center; width: 56px !important; flex: 0 0 56px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Zera interferências internas */ .galeria-obra .gallery-thumbs .swiper-slide-inner, .galeria-obra .gallery-thumbs figure{ width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } /* A IMAGEM da thumb: exatamente 48x56 (sem border que altere o box) */ .galeria-obra .gallery-thumbs .swiper-slide-inner img{ width: 48px !important; height: 56px !important; max-width: none !important; /* cancela max-width:100% do Elementor */ object-fit: cover; display: block; border-radius: 6px; opacity: .55; /* nada de border aqui para não “diminuir” visualmente a área útil */ transition: opacity .2s, transform .2s, box-shadow .2s; } /* Destaque da thumb ativa (sem alterar o tamanho da imagem) */ .galeria-obra .gallery-thumbs .swiper-slide.is-active img{ opacity: 1; box-shadow: 0 0 0 2px #E6007E, 0 6px 16px rgba(0,0,0,.15); /* anel + sombra */ transform: translateY(-2px); } /* Esconde os dots no desktop */ .galeria-obra .gallery-main .swiper-pagination{ display: none !important; } } /* ====== MOBILE: bullets fora da foto, thumbs escondidas ====== */ @media (max-width: 767px){ .galeria-obra .gallery-thumbs{ display: none !important; } /* A foto grande no tamanho que você pediu */ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 213px !important; height: 300px !important; object-fit: cover; border-radius: 12px; display: block; margin: 0 auto; } /* Tira os bullets de cima da imagem e coloca logo abaixo */ .galeria-obra .gallery-main .swiper-pagination{ position: static !important; transform: none !important; margin-top: 8px; text-align: center; display: block !important; } /* Remove qualquer padding/margem extra que empurre os dots pra dentro */ .galeria-obra .gallery-main.elementor-pagination-position-outside .swiper{ margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ====== FOTO GRANDE no desktop (402x566) ====== */ @media (min-width: 768px){ .galeria-obra .gallery-main .swiper-slide-inner img{ width: 402px !important; height: 566px !important; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a8fa7d3 *//* ========================================================== */ /* BREADCRUMB CUSTOMIZADO */ /* ========================================================== */ /* Contêiner principal do breadcrumb */ .breadcrumb-custom { font-family: 'Raleway', sans-serif; line-height: 140%; letter-spacing: -0.05em; /* Equivalente a -5% */ font-size: 18px; /* Tamanho Desktop */ display: flex; /* Alinha itens na horizontal */ flex-wrap: wrap; /* Permite quebrar linha se necessário */ align-items: center; /* Alinha verticalmente */ } /* Estilo base para todos os itens (links e atual) */ .breadcrumb-item { /* Herda a maioria dos estilos do .breadcrumb-custom */ } /* Estilo para os links inativos */ .breadcrumb-link a { color: #7F7F7F; font-weight: 400; /* Regular */ text-decoration: none; } .breadcrumb-link a:hover { text-decoration: none; /* Garante que não haja hover */ color: #7F7F7F; /* Mantém a cor no hover */ } /* Estilo para o separador "|" */ .breadcrumb-separator { color: #7F7F7F; font-weight: 400; /* Regular */ margin-left: 4px; /* Espaço ANTES do separador */ margin-right: 4px; /* Espaço DEPOIS do separador */ } /* Estilo para o item atual (não é um link) */ .breadcrumb-current { color: #333333; font-weight: 700; /* Bold */ } /* --- AJUSTES PARA MOBILE --- */ @media (max-width: 767px) { .breadcrumb-custom { font-size: 12px; /* Tamanho Mobile */ justify-content: start; /* <<< CENTRALIZA NO MOBILE */ } /* O espaçamento do separador e as outras regras se mantêm */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3ceb22c *//* ================================================= */ /* TÍTULO COMPOSTO COM SEPARADOR (VERSÃO AJUSTADA) */ /* ================================================= */ /* Contêiner principal que alinha tudo */ .titulo-composto { /* --- REMOÇÃO DO FLEXBOX --- */ /* display: flex; <-- REMOVIDO */ /* align-items: center; <-- REMOVIDO */ /* gap: 16px; <-- REMOVIDO */ /* Suas especificações de tipografia para Desktop */ font-family: 'Antonio', sans-serif; font-size: 48px; line-height: 140%; letter-spacing: -0.05em; color: #286577; /* Mantida a cor rosa do seu exemplo anterior */ font-weight: bold; text-transform: uppercase; } /* Estilos individuais */ .titulo-colecao, .titulo-materia, /* <-- Adicionada nova classe */ .titulo-ano { /* <-- Renomeada de .titulo-obra */ /* Herda a maioria dos estilos do pai */ } .titulo-separador { font-weight: normal; opacity: 1; /* Margem que cria o espaçamento (funciona para ambos os separadores) */ margin-left: 16px; margin-right: 16px; } /* ================================================= */ /* AJUSTES ESPECÍFICOS PARA MOBILE (COM A SUA SOLICITAÇÃO) */ /* ================================================= */ @media (max-width: 767px) { .titulo-composto { /* --- REMOÇÃO DO FLEXBOX NO MOBILE --- */ /* flex-direction: row; */ /* flex-wrap: wrap; */ /* justify-content: flex-start; */ /* gap: 0.3em; */ text-align: left; font-size: 22px; } .titulo-separador { display: inline-block; /* Margem para mobile */ margin-left: 8px; margin-right: 8px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-7320f31 *//* ====== MOBILE: botão visível com estilo requerido ====== */ @media (max-width: 767px){ /* garante o estado colapsado por padrão (se já usa outro CSS, pode ignorar esta parte) */ .texto-colapsavel{ max-height: 120px; overflow: hidden; transition: max-height .3s ease; } .texto-colapsavel.expanded{ max-height: none; } /* botão "Leia mais" — visual e alinhamento */ .btn-leia-mais{ /* visual */ color: #7F7F7F; font-family: "Raleway", sans-serif; font-weight: 500; /* Medium */ font-size: 14px; line-height: 140%; letter-spacing: -0.05em; /* -5% */ text-decoration: none !important; /* comportamento */ display: inline-flex; align-items: center; gap: 4px; /* espaço entre texto e chevron */ background: none; border: 0; padding: 0; cursor: pointer; /* alinhado à direita, mesmo sem container flex */ float: right; /* funciona dentro do widget */ margin-top: 8px; } .btn-leia-mais:hover, .btn-leia-mais:focus{ text-decoration: none; /* sem underline */ outline: none; } /* chevron em SVG à direita do texto */ .btn-leia-mais::after{ content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 4px; /* usamos mask para aplicar a cor #7F7F7F ao SVG */ background-color: #7F7F7F; -webkit-mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; mask: url("https://sleditora.com.br/wp-content/uploads/2025/08/Chevron.svg") no-repeat center / contain; } /* garante que o botão fique do lado direito do bloco de texto específico */ .texto-colapsavel + .btn-leia-mais{ float: right; } } /* ====== DESKTOP: texto aberto e botão oculto ====== */ @media (min-width: 768px){ .texto-colapsavel{ max-height: none; overflow: visible; } .btn-leia-mais{ display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5f37937 *//* ========================================================== */ /* SEÇÃO "DETALHES DA OBRA" - HUG DESKTOP & SCROLL MOBILE */ /* (COM "ABRAÇO" APLICADO TAMBÉM NO MOBILE) */ /* ========================================================== */ /* Regra para "Abraçar" o conteúdo (Aplicada em todas as telas por padrão) */ .conteiner-hug { width: auto !important; /* Ajusta a largura ao conteúdo */ /* Ou tente 'fit-content' se 'auto' não funcionar bem em algum navegador */ /* width: fit-content !important; */ flex-grow: 0 !important; /* Impede que cresça para preencher espaço extra */ flex-shrink: 0 !important; /* Impede que encolha dentro do scroll (Importante!) */ /* Garante alinhamento interno padrão */ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; } /* AJUSTES PARA MOBILE (Apenas o Container Pai para Rolagem) */ @media (max-width: 767px) { /* Contêiner Pai: Força a linha única e habilita rolagem */ .detalhes-obra-container { display: flex; flex-wrap: nowrap !important; /* IMPEDE que os itens quebrem a linha */ overflow-x: auto !important; /* HABILITA a rolagem horizontal */ padding-bottom: 15px; /* Espaço extra para a barra de rolagem */ /* Ajuste o espaçamento entre os itens no mobile, se necessário */ gap: 20px; /* Exemplo de espaçamento entre os itens abraçados */ /* Opcional: Esconde a barra de rolagem visualmente */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detalhes-obra-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* O '.conteiner-hug' no mobile agora herda 'width: auto' da regra principal */ /* Não precisa mais de min-width ou width fixa aqui */ } /* Reseta as regras de rolagem para DESKTOP (Garante comportamento padrão) */ @media (min-width: 768px) { .detalhes-obra-container { display: flex; /* Garante flex */ flex-wrap: wrap !important; /* Permite quebrar linha no desktop */ overflow-x: hidden !important; /* Desabilita rolagem */ padding-bottom: 0; /* Remove padding extra do mobile */ /* Restaure o gap do desktop se necessário */ /* gap: 30px; */ } /* No desktop, o '.conteiner-hug' usa 'width: auto' e 'flex-grow: 0' */ .conteiner-hug { flex-shrink: 1 !important; /* Permite encolher no desktop se necessário */ } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-71314953 *//* ======================================================== */ /* LIMITA O TEXTO A UM NÚMERO DE LINHAS COM RETICÊNCIAS */ /* ======================================================== */ .limitar-linhas .elementor-widget-container { display: -webkit-box; -webkit-line-clamp: 9; /* <-- DEFINA O NÚMERO MÁXIMO DE LINHAS AQUI */ -webkit-box-orient: vertical; overflow: hidden; /* A propriedade text-overflow: ellipsis; é aplicada implicitamente pelo line-clamp */ } /* Opcional: Garante que funcione mesmo se o texto estiver dentro de um

*/ .limitar-linhas .elementor-widget-container p { margin-bottom: 0; /* Evita margem extra no parágrafo cortado */ }/* End custom CSS */