/*Start - css/quadros.css*/
.quadros {
position: relative;
width: 100%;
background: transparent;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
height: 160vw;
}
.quadros-fundo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.quadros-fundo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: rotate(180deg);
}
.quadros-titulo {
font-family: var(--euphorigenic);
font-size: 9vw;
color: var(--fontColor);
text-align: left;
line-height: 10vw;
font-weight: normal;
letter-spacing: 0.05em;
margin-bottom: 14vw;
height: auto;
}
.quadros-titulo-linha01 {
padding: 0;
font-family: var(--euphorigenic);
font-size: 11vw;
color: var(--fontColor);
text-align: left;
line-height: var(--lineHeightTitulo);
font-weight: normal;
letter-spacing: 0.05em;
float: left;
width: auto;
margin-left: 12vw;
margin-top: 5vw;
}
.quadros-titulo-linha02 {
padding: 0;
font-family: var(--euphorigenic);
font-size: 11vw;
color: var(--fontColor);
text-align: left;
line-height: var(--lineHeightTitulo);
font-weight: normal;
letter-spacing: 0.05em;
float: left;
width: auto;
margin-left: 43vw;
margin-top: -5vw;
}
.quadros-texto{
width: 100%;
float: left;
}
.quadros-texto p.quadros-texto-linha01{
font-family: var(--linbiolinum);
font-size: var(--fontSizeTexto);
color: var(--fontColor);
text-align: center;
line-height: var(--lineHeightTexto);
margin-top: 0.5vw;
margin-bottom: 4vw;
padding-right: 10vw;
padding-left: 10vw;
}
.quadros-texto p.quadros-texto-linha02{
font-family: var(--linbiolinum);
font-size: var(--fontSizeTexto);
color: var(--fontColor);
text-align: center;
line-height: var(--lineHeightTexto);
margin-top: 0.5vw;
margin-bottom: 4vw;
padding-right: 10vw;
padding-left: 10vw;
}
.quadro {
position: absolute;
box-sizing: border-box;
z-index: 2;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-filter: drop-shadow(0vw 1vw 1.1vw rgba(0,0,0,0.7));
filter: drop-shadow(0vw 1vw 1.1vw rgba(0,0,0,0.7));
}
.quadro-grande {
width: 42vw;
}
.quadro-medio {
width: 24vw;
}
.quadro-pequeno {
width: 36vw;
}
.quadro-oval {
width: 44vw;
height: 62vw;
border-radius: 50%;
overflow: hidden;
}
.quadro-topo-centro {
top: 2vw;
left: 31vw;
transform: translateX(-50%);
z-index: 3;
}
.quadro-topo-direita {
top: 38vw;
right: 8vw;
z-index: 3;
}
.quadro-baixo-esquerda {
bottom: 21vw;
left: 8vw;
z-index: 3;
}
.quadro-baixo-direita {
bottom: 0;
right: 6vw;
z-index: 3;
}
.quadros-conteudo {
position: absolute;
top: 69vw;
right: 0vw;
transform: none;
z-index: 4;
width: 100%;
background-color: transparent;
}
.quadro-left-top {
position: absolute;
top: 6vw;
left: 4vw;
width: 36vw;
background-image: url('img/quadro-gato.webp');
z-index: 3;
}
.quadro-right-large {
position: absolute;
bottom: 6vw;
right: 4vw;
width: 38vw;
background-image: url('img/dona-livreta.webp');
z-index: 3;
}
.quadro-medio-center {
position: absolute;
bottom: 12vw;
left: 42vw;
width: 20vw;
background-image: url('img/sr-do-re-mi.webp');
z-index: 3;
}
.quadro-governanta-small {
position: absolute;
left: 54vw;
top: 44vw;
width: 12vw;
background-image: url('img/quadro-da-governanta.webp');
z-index: 3;
}
.quadros-actions {
margin-top: 3vw;
text-align: left;
}
.quadros-botao{
position: absolute;
left: 30vw;
cursor: pointer;
transition: transform 0.2s ease;
background-color: var(--karazan-amber);
border-radius: 3vw;
height: 12vw;
top: 145vw;
width: 45vw;
z-index: 6;
}
.quadros-botao img{
width:100%;
height:100%;
display:block;
}
.quadros-botao-texto{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--euphorigenic), sans-serif;
font-size: 6.5vw;
color: var(--karazan-cream);
background-color: var(--teste00);
white-space: nowrap;
cursor: pointer;
}
.quadros-carrossel {
position: absolute;
top: 5vw;
left: 0vw;
width: 100%;
height: 73vw;
z-index: 3;
background-color: var(--teste00);
overflow:hidden;
}
.quadros-carrossel-esteira {
transition: margin-left 0.6s ease-in-out;
margin-left: -25vw;
}
.quadros-carrossel-item {
width: 50vw;
height: 73vw;
float:left;
background-repeat:no-repeat;
background-position:center center;
background-size:50% auto;
transition:all 0.5s ease-in-out;
}
.quadros-carrossel-item.is-selected{
z-index: 4;
background-size:100% auto;
transition:all 0.5s ease-in-out;
}
.quadros-quadro-gato-img {
height: 73vw;
}
.quadros-quadro-da-dona-livreta-img {
position: absolute;
left: 0vw;
bottom: 38vw;
width: 40vw;
height: 26vw;
background-image: url(img/quadro-da-governanta.webp);
background-size: auto 21vw;
background-position: 4vw 0vw;
z-index: 3;
background-color: var(--teste00);
background-repeat: no-repeat;
display:none;
}
.quadros-sr-do-re-mi {
position: absolute;
left: -2vw;
bottom: 18vw;
width: 48vw;
height: 58vw;
background-image: url(img/sr-do-re-mi.webp);
background-size: auto 63vw;
background-position: -1vw 0vw;
z-index: 3;
background-color: var(--teste00);
background-repeat: no-repeat;
}
.quadros-dona-livreta-com-sombra {
position: absolute;
right: 0vw;
bottom: 0vw;
width: 61vw;
height: 79vw;
background-image: url(img/dona-livreta-com-sombra.webp);
background-size: auto 100%;
background-position: 3vw 0vw;
z-index: 0;
background-color: var(--teste00);
background-repeat: no-repeat;
}
@keyframes quadros-flare-blink {
0%{opacity:0;transform:scale(0.7);}
20%{opacity:1;transform:scale(1);}
80%{opacity:1;transform:scale(1);}
100%{opacity:0;transform:scale(0.7);}
}
.quadros-flare {
position: absolute;
width: 2.2vw;
height: 2.2vw;
border-radius: 50%;
/* núcleo brilhante com halo suave — camadas para mais controle */
background:
radial-gradient(circle at 50% 45%, rgba(255,255,240,1) 0%, rgba(255,240,200,0.98) 6%, rgba(255,210,140,0.85) 14%, rgba(255,170,80,0.45) 26%, rgba(255,120,30,0) 50%),
radial-gradient(circle at 50% 50%, rgba(255,200,100,0.14) 0%, rgba(255,150,60,0.06) 36%, rgba(255,100,30,0) 72%);
pointer-events: none;
mix-blend-mode: screen;
/* leve blur para suavizar bordas, mantendo núcleo nítido */
filter: blur(0.18vw);
z-index: 5;
opacity: 1;
box-shadow: 0 0 0.6vw rgba(255,220,140,0.82), 0 0 1.6vw rgba(255,150,60,0.22);
}
.quadros-flare--1 {
top: 16.2vw;
right: 11.6vw;
width: 3.4vw;
height: 3.4vw;
animation: quadros-flare-blink 3s ease-in-out infinite;
}
.quadros-flare--2 {
top: 7.4vw; 
right: 8.9vw; 
width: 1.2vw; 
height: 1.2vw; 
animation: quadros-flare-blink 3.2s ease-in-out infinite;
}
.quadros-flare--3 {
top: 14.6vw;
right: 5.2vw;
width: 1.0vw;
height: 1.0vw;
animation: quadros-flare-blink 3.4s ease-in-out infinite;
}
.quadros-flare--4 {
top: 22vw;
right: 17vw;
width: 1.6vw;
height: 1.6vw;
animation: quadros-flare-blink 3.6s ease-in-out infinite;
}
.quadros-flare--5 {
top: 21vw;
right: 23vw;
width: 1.8vw;
height: 1.8vw;
animation: quadros-flare-blink 3.8s ease-in-out infinite;
}
.quadros-flare--6 {
bottom: 48vw;
left: 2vw;
width: 3.5vw;
height: 3.5vw;
animation: quadros-flare-blink 4s ease-in-out infinite;
}
.quadros-flare--7 {
bottom: 37vw;
left: 5vw;
width: 1.8vw;
height: 1.8vw;
animation: quadros-flare-blink 4.2s ease-in-out infinite;
}
.quadros-flare--8 {
bottom: 15vw;
left: 8vw;
width: 1.8vw;
height: 1.8vw;
animation: quadros-flare-blink 4.4s ease-in-out infinite;
}
.quadros-flare--9 {
top: 56vw;
left: 4vw;
width: 4vw;
height: 4vw;
animation: quadros-flare-blink 3.8s ease-in-out infinite;
}
.quadros-flare--pulse {
animation: quadros-flare-blink 3.6s ease-in-out infinite;
}
/*End - css/quadros.css*/