.cp-exp{max-width:1170px;margin:0 auto;position:relative;--cp-exp-dur:.75s;--cp-exp-ease:cubic-bezier(.65,0,.35,1)}
.cp-exp-slide{position:relative;line-height:0}
.cp-exp-slide img{display:block;width:100%;height:auto;max-width:none}

/* Estado 1: três círculos */
.cp-exp-slide[data-slide="1"]{transition:opacity calc(var(--cp-exp-dur) * .45) ease, transform var(--cp-exp-dur) var(--cp-exp-ease)}

/* Estado 2: Legal aberto, sobreposto ao estado 1 */
.cp-exp-slide[data-slide="2"]{position:absolute;inset:0;
	clip-path:inset(0 100% 0 0);opacity:0;visibility:hidden;
	transition:clip-path var(--cp-exp-dur) var(--cp-exp-ease), opacity calc(var(--cp-exp-dur) * .2) ease, visibility 0s linear var(--cp-exp-dur)}

.cp-exp.is-open .cp-exp-slide[data-slide="1"]{opacity:0;transform:scale(.97);pointer-events:none}
.cp-exp.is-open .cp-exp-slide[data-slide="2"]{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;transition-delay:0s}

/* Só o estado visível recebe cliques */
.cp-exp-slide[data-slide="2"] .cp-exp-hit{pointer-events:none}
.cp-exp.is-open .cp-exp-slide[data-slide="2"] .cp-exp-hit{pointer-events:auto}

.cp-exp-hit{position:absolute;top:0;height:100%;display:block;padding:0;margin:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cp-exp-hit:focus-visible{outline:1px dashed #b06528;outline-offset:-4px}
.cp-exp-toggle{border-radius:50%;transition:backdrop-filter .25s ease}
.cp-exp-toggle:hover{backdrop-filter:brightness(1.2);-webkit-backdrop-filter:brightness(1.2)}

@media (prefers-reduced-motion: reduce){
	.cp-exp{--cp-exp-dur:.01s}
}