/* Garante que o widget ocupe toda a largura disponível no container flex do Elementor. */
.elementor-widget-stepout_animations {
	--container-widget-width: 100% !important;
	--container-widget-flex-grow: 1 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-grow: 1 !important;
	flex-basis: 100% !important;
	align-self: stretch !important;
	min-width: 0 !important;
}

.elementor-widget-stepout_animations > .elementor-widget-container {
	display: block;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
}

.stepout-animations {
	--stepout-orange: #f5a64a;
	--stepout-dark: #30302e;
	--stepout-white: #fffaf1;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.stepout-animations *,
.stepout-animations *::before,
.stepout-animations *::after {
	box-sizing: border-box;
}

.stepout-animations .stepout-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.stepout-animations .stepout-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.34 / 1;
	overflow: hidden;
	border: 0;
	border-radius: 34px;
	padding: 0;
	color: var(--stepout-white);
	background: linear-gradient(145deg, #3a3937, #292927);
	box-shadow: 0 15px 30px rgba(66, 48, 24, 0.14);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
	min-height: 120px;
	visibility: visible;
	opacity: 1;
}

/* Fallback para navegadores/temas que anulam aspect-ratio. */
.stepout-animations .stepout-card::before {
	content: "";
	display: block;
	padding-top: 74.6269%;
}

/* Destaque no hover apenas em aparelhos com ponteiro fino; evita hover "grudado" no toque. */
@media (hover: hover) and (pointer: fine) {
	.stepout-animations .stepout-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 21px 36px rgba(66, 48, 24, 0.2);
	}
}

.stepout-animations .stepout-icon {
	position: absolute;
	inset: 14px 10px 51px;
	display: grid;
	place-items: center;
}

.stepout-animations svg {
	display: block;
	width: 61%;
	height: 78%;
	overflow: visible;
}

.stepout-animations .stepout-label {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 19px;
	font-size: clamp(17px, 1.45vw, 25px);
	font-weight: 800;
	line-height: 1.04;
	text-align: center;
	letter-spacing: -0.4px;
	color: var(--stepout-white);
}

.stepout-animations .stepout-stroke {
	fill: none;
	stroke: var(--stepout-orange);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.stepout-animations .stepout-fill { fill: var(--stepout-orange); }
.stepout-animations .stepout-thin { stroke-width: 6; }
.stepout-animations .stepout-anim { transform-box: fill-box; transform-origin: center; }

/* Música — v3 */
.stepout-animations .music-note { transform-origin: 50% 70%; }
.stepout-animations .sound-wave { opacity: 0; }
.stepout-animations .is-playing .music-note { animation: stepoutMusicPulse 1.5s cubic-bezier(.2,.78,.25,1); }
.stepout-animations .is-playing .music-w1 { animation: stepoutWaveOut 1s ease-out .15s; }
.stepout-animations .is-playing .music-w2 { animation: stepoutWaveOut 1s ease-out .38s; }

/* Teatro — v3 */
.stepout-animations .is-playing .theater { animation: stepoutSway 1.2s ease-in-out; }

/* Games — v3 */
.stepout-animations .block-a,
.stepout-animations .block-b,
.stepout-animations .block-c,
.stepout-animations .block-d {
	transform-box: fill-box;
	transform-origin: center;
}
.stepout-animations .is-playing .block-a { animation: stepoutBlockA 1.45s ease-in-out; }
.stepout-animations .is-playing .block-b { animation: stepoutBlockB 1.45s ease-in-out; }
.stepout-animations .is-playing .block-c { animation: stepoutBlockC 1.45s ease-in-out; }
.stepout-animations .is-playing .block-d { animation: stepoutBlockD 1.45s ease-in-out; }

/* Histórias interativas — v3 */
.stepout-animations .bubble1,
.stepout-animations .story-dot {
	opacity: 1;
}
.stepout-animations .bubble2 {
	opacity: 0;
}
.stepout-animations .is-playing .bubble1,
.stepout-animations .is-playing .story-dot {
	animation: stepoutBubbleLead 1.5s ease-in-out;
}
.stepout-animations .is-playing .bubble2 {
	animation: stepoutBubbleReply 1.35s ease-out .28s;
}

/* Listening — v3 */
.stepout-animations .listen-wave { opacity: 0; }
.stepout-animations .is-playing .listening { animation: stepoutHeadphonePulse 1.45s ease-in-out; }
.stepout-animations .is-playing .listen-w1 { animation: stepoutListenWave 1s ease-out .2s; }
.stepout-animations .is-playing .listen-w2 { animation: stepoutListenWave 1s ease-out .42s; }

/* Drill — preservado exatamente da versão 1.0.4 */
.stepout-animations .drill-ring { stroke-dasharray: 31 12; transform-origin: center; }
.stepout-animations .drill-dot { transform-origin: center; }
.stepout-animations .drill-check { opacity: 0; stroke-dasharray: 50; stroke-dashoffset: 50; }
.stepout-animations .is-playing .drill-ring { animation: stepoutDrillRotate 1.35s cubic-bezier(.4,0,.2,1); }
.stepout-animations .is-playing .drill-dot { animation: stepoutDrillRepeat 1.35s ease-in-out; }
.stepout-animations .is-playing .drill-check { animation: stepoutCheckDraw 1.35s ease-out; }

/* Filmes — v3 */
.stepout-animations .clap-top { transform-origin: 0 100%; }
.stepout-animations .is-playing .clap-top { animation: stepoutClap 1.2s ease-in-out; }

/* Imagens — v3 */
.stepout-animations .images,
.stepout-animations .images * {
	opacity: 1;
}
.stepout-animations .is-playing .images { animation: stepoutSlide 1.2s ease-in-out; }

/* Vídeos — v3 */
.stepout-animations .is-playing .video { animation: stepoutSoftPop 1.2s ease-in-out; }

/* Grammar — v4: desenho progressivo da página e das linhas. */
.stepout-animations .grammar,
.stepout-animations .grammar * {
	opacity: 1;
}
.stepout-animations .page-outline {
	stroke-dasharray: 500;
	stroke-dashoffset: 0;
}
.stepout-animations .page-detail {
	stroke-dasharray: 120;
	stroke-dashoffset: 0;
}
.stepout-animations .grammar-line {
	stroke-dasharray: 70;
	stroke-dashoffset: 0;
}
.stepout-animations .is-playing .page-outline { animation: stepoutOutlineDraw 1.8s ease-out; }
.stepout-animations .is-playing .page-detail { animation: stepoutDetailDraw 1.8s ease-out; }
.stepout-animations .is-playing .gline1 { animation: stepoutGrammarLine 1.8s ease-out; }
.stepout-animations .is-playing .gline2 { animation: stepoutGrammarLine 1.8s ease-out .12s; }
.stepout-animations .is-playing .gline3 { animation: stepoutGrammarLine 1.8s ease-out .24s; }

@keyframes stepoutMusicPulse {
	0%,100% { transform: translateY(0) rotate(0) scale(1); }
	22% { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
	45% { transform: translateY(1px) rotate(2deg) scale(.98); }
	68% { transform: translateY(-3px) scale(1.02); }
}

@keyframes stepoutWaveOut {
	0% { opacity: 0; transform: scale(.72); }
	20% { opacity: .9; }
	100% { opacity: 0; transform: scale(1.2); }
}

@keyframes stepoutSway {
	0%,100% { transform: rotate(0); }
	35% { transform: rotate(-5deg); }
	70% { transform: rotate(4deg); }
}

@keyframes stepoutBlockA {
	0%,100% { transform: translate(0,0); }
	38%,65% { transform: translate(8px,5px); }
}

@keyframes stepoutBlockB {
	0%,100% { transform: translate(0,0); }
	38%,65% { transform: translate(-8px,5px); }
}

@keyframes stepoutBlockC {
	0%,100% { transform: translate(0,0); }
	38%,65% { transform: translate(8px,-5px); }
}

@keyframes stepoutBlockD {
	0%,100% { transform: translate(0,0); }
	38%,65% { transform: translate(-8px,-5px); }
}

@keyframes stepoutBubbleLead {
	0%,100% { opacity: 1; transform: translateX(0) scale(1); }
	30% { transform: translateX(-7px) scale(1.04); }
	62% { transform: translateX(0) scale(1); }
}

@keyframes stepoutBubbleReply {
	0% { opacity: 0; transform: translate(14px,8px) scale(.72); }
	28%,82% { opacity: 1; transform: translate(0,0) scale(1); }
	100% { opacity: 0; transform: translateY(-3px) scale(1.03); }
}

@keyframes stepoutHeadphonePulse {
	0%,100% { transform: scale(1); }
	25% { transform: scale(1.05); }
	48% { transform: scale(.99); }
	70% { transform: scale(1.03); }
}

@keyframes stepoutListenWave {
	0% { opacity: 0; transform: scaleX(.65); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: scaleX(1.25); }
}

/* Keyframes do Drill mantidos da versão 1.0.4. */
@keyframes stepoutDrillRotate {
	0% { transform: rotate(0); }
	42%,70% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}

@keyframes stepoutDrillRepeat {
	0%,100% { transform: scale(1); }
	22% { transform: scale(.72); }
	42% { transform: scale(1.12); }
	62% { transform: scale(.85); }
	80% { transform: scale(1); }
}

@keyframes stepoutCheckDraw {
	0%,55% { opacity: 0; stroke-dashoffset: 50; }
	70%,100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes stepoutClap {
	0%,100% { transform: rotate(0); }
	35% { transform: rotate(-22deg); }
	62% { transform: rotate(0); }
}

@keyframes stepoutSlide {
	0%,100% { transform: translateX(0); }
	35% { transform: translateX(-7px); }
	70% { transform: translateX(7px); }
}

@keyframes stepoutSoftPop {
	0%,100% { transform: scale(1); }
	35% { transform: scale(.96); }
	65% { transform: scale(1.06); }
}

@keyframes stepoutOutlineDraw {
	0% { stroke-dashoffset: 500; }
	52%,100% { stroke-dashoffset: 0; }
}

@keyframes stepoutDetailDraw {
	0%,34% { stroke-dashoffset: 120; }
	68%,100% { stroke-dashoffset: 0; }
}

@keyframes stepoutGrammarLine {
	0%,48% { stroke-dashoffset: 70; }
	78%,100% { stroke-dashoffset: 0; }
}

@media (max-width: 1050px) {
	.stepout-animations .stepout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.stepout-animations .stepout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.stepout-animations .stepout-card {
		border-radius: 24px;
		min-height: 100px;
	}

	.stepout-animations .stepout-label {
		bottom: 15px;
	}

	.stepout-animations .stepout-icon {
		bottom: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stepout-animations .stepout-card,
	.stepout-animations .stepout-card * {
		animation: none !important;
		transition: none !important;
	}
}