/* PAINEL DE CONTROLE — Troque as cores aqui e a página inteira muda. */
:root{
--cor-fundo:#4C231D; /* vinho do fundo */
--cor-superficie:#F4EFE8; /* creme das áreas claras */
--cor-texto:#F4EFE8; /* letras sobre vinho */
--cor-texto-suave:#D9CAC0; /* letras secundárias */
--cor-destaque:#D8A857; /* dourado dos botões */
--cor-borda:#A78B7F; /* linhas finas */
--cor-escura:#2B211D;--cor-apoio:#85492A;--cor-legenda:#655750;
--txt-xs:clamp(1.0625rem,1rem + .1vw,1.1rem);--txt-sm:clamp(1.0625rem,1rem + .18vw,1.15rem);--txt-base:clamp(1.06rem,1rem + .3vw,1.2rem);--txt-lg:clamp(1.33rem,1.22rem + .55vw,1.6rem);--txt-xl:clamp(1.66rem,1.45rem + 1.05vw,2.4rem);--txt-2xl:clamp(2.1rem,1.7rem + 2vw,3.6rem);--txt-3xl:clamp(2.6rem,1.9rem + 3.5vw,5.2rem);
--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--s9:6rem;--s10:8rem;--s11:12rem;
--largura:1240px;--respiro:clamp(1.25rem,5vw,3rem);--ritmo:clamp(4rem,10vw,8rem);--coluna:320px;--proporcao-obra:4 / 5;--canto-obra:1rem;--alvo:44px;--linha:1px;--foco:2px;--afastamento:3px;--zero:0;--inteiro:100%;--medida:65ch;--altura:1.65;--altura-titulo:1.1;--aperto:-.02em;--aberto:.08em;--tempo:200ms;--revelar:700ms;--entrada:320ms;--curva:cubic-bezier(.16,1,.3,1);--deslocar:20px;--escala:1.025;--escala-entrada:.96;--pouco:.01ms;--tela:100vh;--blur:0px;--transparencia:1;--sombra:linear-gradient(90deg,rgba(76,35,29,.95),rgba(76,35,29,.77) 45%,rgba(76,35,29,.63));
}
/* Base e leitura */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:var(--zero);background:var(--cor-fundo);color:var(--cor-texto);font:400 var(--txt-base)/var(--altura) Inter,Arial,sans-serif}body.ampliando{overflow:hidden}p{max-width:var(--medida);margin:var(--zero) var(--zero) var(--s5)}h1,h2,h3,.marca{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:var(--altura-titulo);letter-spacing:var(--aperto);margin:var(--zero) var(--zero) var(--s5)}h1{font-size:var(--txt-3xl)}h2{font-size:var(--txt-2xl)}h3{font-size:var(--txt-lg)}a{color:inherit;text-decoration:none}a,button{transition:color var(--tempo) ease,border-color var(--tempo) ease}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:var(--foco) solid var(--cor-destaque);outline-offset:var(--afastamento)}img{display:block;max-width:var(--inteiro);height:auto}.faixa{padding:var(--ritmo) var(--respiro)}.rotulo{text-transform:uppercase;letter-spacing:var(--aberto);font-size:var(--txt-xs)}
/* Abertura e convite para a loja */
.abertura{position:relative;isolation:isolate;min-height:var(--tela);display:flex;align-items:center;padding:var(--s8) var(--respiro);overflow:hidden}.fundo,.veu{position:absolute;inset:var(--zero);width:var(--inteiro);height:var(--inteiro);z-index:-1}.fundo{object-fit:cover;object-position:center center;opacity:var(--transparencia);filter:blur(var(--blur))}.veu{background:var(--sombra)}.entrada{width:var(--inteiro);max-width:var(--largura);margin:auto}.frase{font-family:'Playfair Display',Georgia,serif;font-size:var(--txt-xl);line-height:var(--altura-titulo);margin-bottom:var(--s7)}.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--s5);min-height:var(--alvo);padding:var(--s4) var(--s5);background:var(--cor-destaque);color:var(--cor-escura);font-weight:600;border:var(--linha) solid var(--cor-destaque)}.botao:hover{border-color:var(--cor-superficie)}.ver-obras{display:block;width:fit-content;min-height:var(--alvo);margin-top:var(--s5);padding-block:var(--s2)}.assinatura{display:none}.pendente{cursor:default}
/* Obras sem cortes */
.obras{background:var(--cor-superficie);color:var(--cor-escura)}.titulo,.galeria,.apos-obras{max-width:var(--largura);margin-inline:auto}.titulo{margin-bottom:var(--s8)}.titulo>p:last-child{color:var(--cor-legenda)}.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--coluna)),1fr));gap:clamp(1rem,3vw,2rem)}figure{margin:var(--zero) var(--zero) var(--s6)}.ampliar{display:block;width:var(--inteiro);padding:var(--zero);border:var(--linha) solid var(--cor-borda);background:var(--cor-superficie);overflow:hidden;aspect-ratio:var(--proporcao-obra);border-radius:var(--canto-obra)}.ampliar img{border-radius:var(--canto-obra);width:var(--inteiro);height:var(--inteiro);object-fit:contain;transition:transform 400ms cubic-bezier(.22,1,.36,1)}.ampliar:hover img{transform:scale(var(--escala))}figcaption{padding-top:var(--s5)}figcaption h3{margin-bottom:var(--s2)}figcaption p,figcaption span{font-size:var(--txt-sm);color:var(--cor-legenda)}figcaption p{margin-bottom:var(--s2)}.apos-obras{padding-top:var(--s7);text-align:center}
/* História e retrato */
.sobre{display:grid;gap:var(--s8);max-width:var(--largura);margin:auto;align-items:center}.retrato img{width:var(--inteiro)}.historia .rotulo,.local{color:var(--cor-destaque)}.historia>p:not(.rotulo):not(.local){color:var(--cor-texto-suave)}
/* Loja em preparação */
.convite{text-align:center;background:var(--cor-escura);border-block:var(--linha) solid var(--cor-borda)}.convite p{margin-inline:auto}.convite .rotulo{color:var(--cor-destaque)}.convite h2{margin-block:var(--s6)}.convite .botao{margin-top:var(--s6)}
/* Contatos */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s7)}.marca{font-size:var(--txt-xl)}footer p{font-size:var(--txt-sm);margin-bottom:var(--s2)}.contatos{display:flex;flex-direction:column;overflow-wrap:anywhere}.contatos a{min-height:var(--alvo);padding-block:var(--s2)}
/* Ampliação acessível */
dialog{max-width:var(--inteiro);width:var(--inteiro);height:var(--tela);max-height:var(--tela);padding:var(--s8) var(--s7);border:var(--zero);background:var(--cor-escura);color:var(--cor-texto)}dialog[open]{display:flex;align-items:center;justify-content:center;gap:var(--s2);animation:abrir var(--entrada) ease}dialog::backdrop{background:var(--cor-escura)}dialog button{background:transparent;border:var(--linha) solid var(--cor-borda);min-width:var(--alvo);min-height:var(--alvo)}.fechar{position:absolute;right:var(--s5);top:var(--s5);padding-inline:var(--s4)}.obra-ampliada{min-width:var(--zero);max-width:var(--largura);text-align:center}.obra-ampliada img{max-height:70vh;width:auto;max-width:var(--inteiro);margin:auto;object-fit:contain}.obra-ampliada p{margin:var(--s4) auto var(--zero)}@keyframes abrir{from{opacity:var(--zero);transform:scale(var(--escala-entrada))}to{opacity:1;transform:scale(1)}}
/* Movimento discreto */
.com-movimento .revelar{opacity:var(--zero);transform:translateY(var(--deslocar));transition:opacity var(--revelar) var(--curva),transform var(--revelar) var(--curva)}.com-movimento .revelar.visivel{opacity:1;transform:translateY(var(--zero))}
/* Telas maiores */
@media(min-width:48rem){.sobre{grid-template-columns:2fr 3fr}.abertura{min-height:90vh}.assinatura{display:block;position:absolute;bottom:var(--s5);right:var(--respiro)}.entrada h1{font-size:clamp(4rem,8vw,8rem)}}
@media(min-width:64rem){.historia{padding-left:var(--s7)}}
@media(min-width:90rem){.abertura{padding-inline:max(var(--respiro),calc((100vw - var(--largura))/2))}}
/* Respeito à preferência por menos movimento */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:var(--pouco)!important;transition-duration:var(--pouco)!important;scroll-behavior:auto!important}}

/* Murais ocupam toda a largura, sem margens laterais. */
.ampliar.mural img{object-fit:cover}

/* No celular, manter a pessoa e a pintura no centro da abertura. */
@media(max-width:47.99rem){.fundo{object-position:center center}.veu{background:linear-gradient(90deg,rgba(76,35,29,.94),rgba(76,35,29,.79))}}

/* Separação entre telas e murais. */
.titulo-grupo{max-width:var(--largura);margin:var(--zero) auto var(--s6);font-size:var(--txt-xl)}
.grupo-murais{margin-top:var(--s8);padding-top:var(--s8);border-top:var(--linha) solid var(--cor-borda)}

/* Informações para quem deseja encomendar uma obra. */
.encomendas{background:var(--cor-superficie);color:var(--cor-escura)}
.conteudo-encomendas{max-width:var(--largura);margin-inline:auto}
.conteudo-encomendas h3{margin-top:var(--s7)}
.conteudo-encomendas a{text-decoration:underline;text-underline-offset:var(--afastamento);display:inline-block;min-height:var(--alvo)}

/* Assinatura da artista na abertura. */
.nome-assinado{max-width:600px;width:100%;margin-bottom:var(--s5)}
.nome-assinado img{width:100%;height:auto;filter:brightness(0) invert(1)}

/* Fila circular de telas e prévia inteira ao passar o mouse. */
.cabecalho-telas{max-width:var(--largura);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.cabecalho-telas .titulo-grupo{margin-inline:var(--zero)}
.setas-telas{display:flex;gap:var(--s2);margin-bottom:var(--s6)}
.setas-telas button{min-width:var(--alvo);min-height:var(--alvo);background:var(--cor-fundo);color:var(--cor-texto);border:var(--linha) solid var(--cor-fundo)}
.fila-telas{grid-template-columns:repeat(2,minmax(0,1fr));position:relative;overflow:visible}
.fila-telas figure{min-width:0;position:relative}
.fila-telas figure[hidden]{display:none}
.fila-telas .ampliar{aspect-ratio:1;position:relative}
.fila-telas .ampliar img{object-fit:cover;transform:scale(1.5)}
.fila-telas figcaption h3{font-size:var(--txt-base)}
@media(hover:hover){
.fila-telas figure:hover{z-index:2}
.fila-telas .ampliar:hover,.fila-telas .ampliar:focus-visible{overflow:visible}
.fila-telas .ampliar:hover img,.fila-telas .ampliar:focus-visible img{object-fit:contain;transform:scale(1.2);background:var(--cor-superficie)}
}
@media(min-width:48rem){.fila-telas{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Obra inteira sobre fundo vinho transparente. */
dialog{background:transparent;padding:var(--s8) var(--s4);overflow:auto}
dialog::backdrop{background:rgba(76,35,29,.94)}
.obra-ampliada{max-width:min(80vw,1000px)}
.obra-ampliada h2{font-size:var(--txt-xl);margin-bottom:var(--s5)}
.obra-ampliada img{max-height:60vh}
.descricao-ampliada{margin-top:var(--s5)}
.descricao-ampliada p,.descricao-ampliada span{display:block;color:var(--cor-texto);margin:var(--s2) auto;font-size:var(--txt-sm)}

/* Na fila de telas, mostrar apenas o nome; detalhes ficam na ampliação. */
.fila-telas figcaption p,.fila-telas figcaption span{display:none}
.cabecalho-telas .titulo-grupo{margin-bottom:var(--s2)}
.orientacao-telas{font-size:var(--txt-sm);color:var(--cor-legenda);margin-bottom:var(--s6)}

/* Nomes centralizados abaixo das telas. */
.fila-telas figcaption{text-align:center}


/* Aproximar pão e bolo dentro dos quadrados, sem alterar seus tamanhos. */
.fila-telas .ampliar img[src$="obra-01.jpg"],
.fila-telas .ampliar img[src$="obra-02.jpg"]{transform:scale(1.95)}
@media(hover:hover){
.fila-telas .ampliar:hover img[src$="obra-01.jpg"],
.fila-telas .ampliar:hover img[src$="obra-02.jpg"],
.fila-telas .ampliar:focus-visible img[src$="obra-01.jpg"],
.fila-telas .ampliar:focus-visible img[src$="obra-02.jpg"]{transform:scale(1.2)}
}

/* Aproximar a paisagem marinha para esconder a margem inferior. */
.fila-telas .ampliar img[src$="obra-04.jpg"]{transform:scale(1.8)}
@media(hover:hover){
.fila-telas .ampliar:hover img[src$="obra-04.jpg"],
.fila-telas .ampliar:focus-visible img[src$="obra-04.jpg"]{transform:scale(1.2)}
}

/* Barra de abertura com assinatura e caminhos da página. */
.barra-inicial{background:rgba(76,35,29,.88);color:var(--cor-texto);padding:var(--s2) var(--respiro) var(--s3);border-bottom:var(--linha) solid rgba(216,168,87,.3);text-align:center}
.logo-barra{display:block;width:12rem;margin-inline:auto}
.logo-barra img{width:var(--inteiro);height:auto;filter:brightness(0) invert(1)}
.barra-inicial nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5)}
.barra-inicial nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--alvo);padding-inline:var(--s2);font-size:var(--txt-sm)}
.barra-inicial nav a:hover{color:var(--cor-destaque)}

/* Barra fina com assinatura e navegação na mesma linha. */
.barra-inicial{display:flex;align-items:center;justify-content:flex-start;gap:var(--s6);padding:var(--s1) var(--respiro);overflow-x:auto}
.logo-barra{flex:0 0 auto;width:8rem;margin:var(--zero)}
.barra-inicial nav{flex-wrap:nowrap;justify-content:flex-start;gap:var(--s5);white-space:nowrap}
.barra-inicial nav a{flex-shrink:0}

/* Assinatura à esquerda e links alinhados à direita. */
.barra-inicial{justify-content:space-between;padding-inline:var(--s4)}
.barra-inicial nav{margin-left:auto}

/* Barra mais fina, sempre visível durante a rolagem. */
.barra-inicial{position:sticky;top:var(--zero);z-index:20;padding-block:var(--zero)}
.barra-inicial .logo-barra{width:6rem}
section[id],header[id],footer[id]{scroll-margin-top:var(--s8)}

/* Nova assinatura clara sobre o vinho, sem retângulo branco. */
.logo-barra img,.nome-assinado img{filter:invert(1);mix-blend-mode:screen}

/* Murais quadrados com destaque para a parede pintada. */
.grupo-murais .ampliar{aspect-ratio:1;position:relative}
.grupo-murais .ampliar img{object-fit:cover;object-position:center top;transform:scale(1.7);transform-origin:65% 5%}
.grupo-murais .ampliar img[src$="obra-06.jpg"]{transform:scale(1.8);transform-origin:70% 10%}
.grupo-murais figure{position:relative}
@media(hover:hover){
.grupo-murais figure:hover{z-index:2}
.grupo-murais .ampliar:hover,.grupo-murais .ampliar:focus-visible{overflow:visible}
.grupo-murais .ampliar:hover img,.grupo-murais .ampliar:focus-visible img{object-fit:contain;object-position:center;transform:scale(1.15);transform-origin:center;background:var(--cor-superficie)}
}

/* Primeiro mural: enquadramento mais baixo, com menos teto. */
.grupo-murais .ampliar img[src$="obra-05.jpg"]{object-position:center 30%;transform-origin:74% 30%}
@media(hover:hover){
.grupo-murais .ampliar:hover img[src$="obra-05.jpg"],
.grupo-murais .ampliar:focus-visible img[src$="obra-05.jpg"]{object-position:center;transform-origin:center}
}

/* Segunda linha das descrições em itálico, na página e na ampliação. */
figcaption > p ~ p,figcaption > p ~ span,
.descricao-ampliada > :nth-child(2){font-style:italic}

/* Murais com título e orientação; descrições apenas ao ampliar. */
.grupo-murais > .titulo-grupo{margin-bottom:var(--s2)}
.orientacao-murais{max-width:var(--largura);margin:var(--zero) auto var(--s6);font-size:var(--txt-sm);color:var(--cor-legenda)}
.grupo-murais figcaption p,.grupo-murais figcaption span{display:none}

/* Medidas e tipo de tela em letras normais. */
figcaption > p.medidas-obra,.descricao-ampliada > p.medidas-obra{font-style:normal}

/* Títulos dos murais centralizados com suas imagens. */
.grupo-murais figcaption{text-align:center}


/* Integrar o fundo da assinatura à barra vinho transparente. */
.barra-inicial .logo-barra{mix-blend-mode:screen}
.barra-inicial .logo-barra img{filter:invert(1);mix-blend-mode:screen}

/* Apresentação centralizada sobre a imagem inicial. */
.entrada{text-align:center}
.entrada .nome-assinado,.entrada p,.entrada .ver-obras{margin-inline:auto}
.abertura .assinatura{left:var(--respiro);right:var(--respiro);text-align:center;max-width:none}

/* Aproximar os elementos da apresentação inicial. */
.entrada .rotulo{margin-bottom:var(--s2)}
.entrada .nome-assinado{margin-bottom:var(--s2)}
.entrada .frase{margin-bottom:var(--s5)}
.entrada .ver-obras{margin-top:var(--s2)}

/* Assinatura com transparência real, sem mistura de fundos. */
.barra-inicial .logo-barra,.barra-inicial .logo-barra img{mix-blend-mode:normal;filter:none;background:transparent}


/* Subir apenas a assinatura da abertura, sem mover os demais elementos. */
.entrada .nome-assinado{position:relative;top:calc(-1 * var(--s4))}

/* Rodapé organizado em caminhos e contatos. */
.rodape-organizado{align-items:flex-start}
.coluna-rodape{display:flex;flex-direction:column;min-width:10rem}
.coluna-rodape h2{font-family:Inter,Arial,sans-serif;font-size:var(--txt-base);font-weight:600;color:var(--cor-destaque);margin-bottom:var(--s4)}
.coluna-rodape a,.contato-pendente{display:flex;align-items:center;gap:var(--s2);min-height:var(--alvo)}
.coluna-rodape a:hover{color:var(--cor-destaque)}
.contato-pendente small{font-size:var(--txt-xs);color:var(--cor-texto-suave)}

/* Aviso de contato futuro em dourado suave. */
.contato-pendente small{color:var(--cor-destaque);opacity:.65}

/* Camada vinho uniforme sobre toda a imagem inicial. */
.abertura .veu{background:rgba(76,35,29,.76)}

/* Aproximar as nuvens no catálogo, preservando a obra inteira ao ampliar. */
.fila-telas .ampliar img[src$="obra-07.jpg"]{transform:scale(1.6)}
@media(hover:hover){
.fila-telas .ampliar:hover img[src$="obra-07.jpg"],
.fila-telas .ampliar:focus-visible img[src$="obra-07.jpg"]{transform:scale(1.2)}
}

/* Quadrados dourados de contato ao final das encomendas. */
.convites-contato{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s5)}
.conteudo-encomendas .quadrado-contato{display:flex;align-items:center;justify-content:center;width:var(--s8);height:var(--s8);padding:var(--s4);background:var(--cor-destaque);color:var(--cor-escura);border:var(--linha) solid var(--cor-destaque);text-decoration:none}
.quadrado-contato svg{width:var(--s6);height:var(--s6);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.whatsapp-futuro{text-align:center}
.whatsapp-futuro small{display:block;font-size:var(--txt-xs);color:var(--cor-legenda);margin-top:var(--s2)}
.quadrado-contato:disabled{cursor:default;opacity:.65}

/* E-mail para copiar dentro da própria página. */
.coluna-rodape [data-abrir-email]{background:transparent;border:0;padding:0;min-height:var(--alvo);text-align:left;width:fit-content}
.janela-email{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;border:0;background:transparent;padding:var(--s5)}
.janela-email[open]{display:flex;align-items:center;justify-content:center}
.janela-email::backdrop{background:rgba(76,35,29,.85)}
.conteudo-email{background:var(--cor-fundo);border:var(--linha) solid var(--cor-destaque);padding:var(--s7) var(--s5);text-align:center;border-radius:var(--s4);max-width:100%}
.conteudo-email h2{font-size:var(--txt-xl)}
.copiar-email{display:flex;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s4);background:var(--cor-destaque);color:var(--cor-escura);border:0;max-width:100%;overflow-wrap:anywhere}
.copiar-email svg{width:var(--s6);height:var(--s6);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.fechar-email{position:absolute;right:var(--s5);top:var(--s5);padding:var(--s2) var(--s4)}
.aviso-copia{margin:var(--s4) auto 0;min-height:var(--s6)}

/* Página de privacidade com leitura confortável. */
.pagina-privacidade{background:var(--cor-superficie);color:var(--cor-escura)}
.pagina-privacidade article{max-width:var(--medida);margin-inline:auto}
.pagina-privacidade h1{font-size:var(--txt-2xl)}
.pagina-privacidade h2{font-size:var(--txt-xl);margin-top:var(--s7)}
.pagina-privacidade a,.email-privacidade{text-decoration:underline;text-underline-offset:var(--afastamento);overflow-wrap:anywhere}
.email-privacidade{background:transparent;border:0;padding:0;font:inherit;color:inherit;min-height:var(--alvo)}

/* Rodapé com identificação ao centro da altura e colunas centralizadas. */
.rodape-organizado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--s7);text-align:center}
.rodape-organizado>div:first-child{grid-column:1 / -1;align-self:center}
.rodape-organizado>div:first-child p{margin-inline:auto}
.rodape-organizado .coluna-rodape{min-width:0;align-items:center;text-align:center}
.rodape-organizado .coluna-rodape a,.rodape-organizado .contato-pendente{justify-content:center}
.rodape-organizado .coluna-rodape [data-abrir-email]{text-align:center}
@media(min-width:48rem){.rodape-organizado{grid-template-columns:repeat(3,minmax(0,1fr))}.rodape-organizado>div:first-child{grid-column:auto}}

/* Rodapé mais compacto, com os títulos das colunas na mesma altura. */
.rodape-organizado{padding-block:var(--s7)}
.rodape-organizado .coluna-rodape{align-self:start}
.rodape-organizado>div:first-child{align-self:center}

/* Coleção de aquarelas e ilustrações digitais. */
.colecao-aquarelas{max-width:var(--largura);margin:var(--s8) auto var(--zero);padding-block:var(--s8);border-top:var(--linha) solid var(--cor-borda)}
.colecao-aquarelas h3{font-size:var(--txt-xl)}
.colecao-aquarelas p{color:var(--cor-legenda)}
.colecao-aquarelas .botao{margin-top:var(--s4)}

/* Convite para a loja após a apresentação das obras. */
.titulo .apos-obras{text-align:left;padding-top:var(--s4)}

/* Imagens quadradas da coleção de aquarelas em fila circular. */
.setas-aquarelas{justify-content:flex-end}
.fila-aquarelas{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--s7)}
.fila-aquarelas figure{aspect-ratio:1;overflow:hidden;border-radius:var(--canto-obra);margin:0}
.fila-aquarelas figure[hidden]{display:none}
.fila-aquarelas img{width:100%;height:100%;object-fit:cover}
@media(min-width:48rem){.fila-aquarelas{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Convite para abrir cada anúncio da coleção em outra aba. */
.anuncio-aquarela{display:block;position:relative;width:100%;height:100%}
.anuncio-aquarela img{transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.aviso-anuncio{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s2);background:rgba(76,35,29,.82);color:var(--cor-texto);text-align:center;font-size:var(--txt-sm);opacity:0;transition:opacity var(--tempo) ease}
.anuncio-aquarela:hover img,.anuncio-aquarela:focus-visible img{transform:scale(1.06)}
.anuncio-aquarela:hover .aviso-anuncio,.anuncio-aquarela:focus-visible .aviso-anuncio{opacity:1}
.anuncio-aquarela:focus-visible{outline-offset:calc(-1 * var(--s1))}
@media(hover:none){.aviso-anuncio{opacity:1}}

/* Terceira linha das descrições das telas em itálico. */
figcaption .terceira-linha,.descricao-ampliada .terceira-linha{font-style:italic}

/* Movimento mais suave apenas nas telas. */
.fila-telas .ampliar img{transition:transform 650ms cubic-bezier(.16,1,.3,1)}

/* Cantos arredondados preservados na prévia inteira das telas. */
@media(hover:hover){
.fila-telas .ampliar:hover img,
.fila-telas .ampliar:focus-visible img{border-radius:var(--canto-obra);clip-path:inset(0 round var(--canto-obra))}
}

/* Os dois murais entram juntos, de baixo para cima. */
.com-movimento .murais-juntos{transition-delay:0ms!important}

/* Prévias arredondadas e obras ampliadas com cantos quadrados. */
@media(hover:hover){
.fila-telas .ampliar:hover img,.fila-telas .ampliar:focus-visible img,
.grupo-murais .ampliar:hover img,.grupo-murais .ampliar:focus-visible img{
border-radius:var(--canto-obra);clip-path:inset(0 round var(--canto-obra))}
}
.obra-ampliada img{border-radius:0;clip-path:none}

/* Arredondar a própria fotografia inteira, sem bordas vazias ao redor. */
@media(hover:hover){
.fila-telas .ampliar:hover,.fila-telas .ampliar:focus-visible,
.grupo-murais .ampliar:hover,.grupo-murais .ampliar:focus-visible{overflow:visible}
.fila-telas .ampliar:hover img,.fila-telas .ampliar:focus-visible img,
.grupo-murais .ampliar:hover img,.grupo-murais .ampliar:focus-visible img{
position:absolute;left:50%;top:50%;width:100%;height:auto!important;max-width:none;
object-fit:initial!important;border-radius:var(--canto-obra)!important;
clip-path:inset(0 round var(--canto-obra));
transform:translate(-50%,-50%) scale(1.12);transform-origin:center!important;
background:transparent}
}

/* Entrada delicada da fotografia inteira, preservando os recortes e a ordem. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.fila-telas .ampliar:hover img,.fila-telas .ampliar:focus-visible img,
.grupo-murais .ampliar:hover img,.grupo-murais .ampliar:focus-visible img{
animation:previa-delicada 750ms cubic-bezier(.16,1,.3,1) both;
transition:none}
}
@keyframes previa-delicada{
from{opacity:.75;transform:translate(-50%,-50%) scale(1.04)}
to{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
}

/* Mesmo movimento aprovado nas telas, aplicado explicitamente aos dois murais. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.grupo-murais .ampliar.mural:hover img,
.grupo-murais .ampliar.mural:focus-visible img{
animation:previa-delicada 750ms cubic-bezier(.16,1,.3,1) both;
transition:none;border-radius:var(--canto-obra)!important}
}

/* Prévia dos murais um pouco menor, sem alterar o recorte inicial. */
@media(hover:hover){
.grupo-murais .ampliar.mural:hover img,
.grupo-murais .ampliar.mural:focus-visible img{width:85%;height:auto!important;transform:translate(-50%,-50%) scale(1)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.grupo-murais .ampliar.mural:hover img,
.grupo-murais .ampliar.mural:focus-visible img{animation:previa-mural-menor 750ms cubic-bezier(.16,1,.3,1) both}
}
@keyframes previa-mural-menor{
from{opacity:.75;transform:translate(-50%,-50%) scale(.96)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Rodapé no mesmo tom escuro da área de convite. */
.rodape-organizado{background:var(--cor-escura)}