/*
 * Speerdent "Metodo" (4-step method) section — frontend styles.
 * Scoped under .sm-metodo so it can never leak into, or be affected by,
 * the rest of the theme's CSS.
 */

.sm-metodo,
.sm-metodo * { box-sizing: border-box; }

.sm-metodo {
	background: #F6F6F6;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 140px 24px 64px;
	font-family: 'Instrument Sans', sans-serif !important;
	overflow: hidden;
}

/* ---------- decorative background rings ---------- */
.sm-rings { position: absolute; top: 30%; left: 30%; width: 340px; height: 470px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.sm-rings-two { position: absolute; top: auto; left: 60%; width: 340px; height: 470px; transform: rotate(180deg); pointer-events: none; z-index: 0; bottom: 0; }
.sm-rings svg { width: 100%; height: 100%; }

/* ---------- 2x2 grid ---------- */
.sm-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 48px; row-gap: 200px; align-items: center; }
.sm-step { border-radius: 2px; position: relative; max-width: 450px; cursor: default; transition: 0.5s all ease; padding: 16px; z-index: 3; }
.sm-step:hover { background: #ffffffe0; }

.sm-step--tl { justify-self: start;  text-align: left;  }
.sm-step--tr { justify-self: end;    text-align: right; grid-column: 2; grid-row: 1; }
.sm-step--bl { justify-self: start;  text-align: left;  grid-column: 1; grid-row: 2; }
.sm-step--br { justify-self: end;    text-align: right; grid-column: 2; grid-row: 2; }
.sm-step-number { font-family: 'Instrument Sans', sans-serif; display: block; font-size: 16px; font-weight: 400; letter-spacing: .08em; color: #F0262B; margin-bottom: 24px; }
.sm-step-heading { font-family: 'Instrument Sans', sans-serif; margin: 0 0 24px; font-size: 34px; font-weight: 400; color: #1a1a1a; line-height: 1; transition: color .3s ease; }
.sm-step-text { font-family: 'Instrument Sans', sans-serif; margin: 0; font-size: 16px; line-height: 1.6; color: #4C4B4B; transition: color .3s ease; }
.sm-metodo.is-active .sm-step:not(.is-current) .sm-step-heading { color: #1a1a1a; }
.sm-metodo.is-active .sm-step:not(.is-current) .sm-step-text { color: #1a1a1a; }
.sm-metodo.is-active .sm-step.is-current .sm-step-heading { color: #1a1a1a; }

/* ---------- central plus icon (built from the 4 real photos) ---------- */
.sm-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 120px; height: 120px; pointer-events: none; }
.sm-plus { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

.sm-plus-tile { overflow: hidden; }
.sm-plus-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-plus-tile--top    { grid-area: 1 / 2 / 2 / 3; }
.sm-plus-tile--left   { grid-area: 2 / 1 / 3 / 2; }
.sm-plus-tile--right  { grid-area: 2 / 3 / 3 / 4; }
.sm-plus-tile--bottom { grid-area: 3 / 2 / 4 / 3; }

/* ---------- photo reveal ---------- */
.sm-photo { position: absolute; width: 300px; height: 300px; overflow: hidden; box-shadow: 0 20px 45px rgba(0, 0, 0, .22); opacity: 0; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .3, 1); pointer-events: none; transform: translate(-50%, -50%) scale(.28); }
.sm-photo[data-step="1"].is-visible { opacity: 1; }
.sm-photo[data-step="2"].is-visible { opacity: 1; }
.sm-photo[data-step="3"].is-visible { opacity: 1; }
.sm-photo[data-step="4"].is-visible { opacity: 1; }

.sm-photo[data-step="1"] { position: absolute; top: 6%;  left: 40%; }
.sm-photo[data-step="2"] { position: absolute; top: 40%; left: 94%; }
.sm-photo[data-step="3"] { position: absolute; top: 94%; left: 61%; }
.sm-photo[data-step="4"] { position: absolute; top: 61%; left: 6%;  }

.sm-photo[data-step="1"].is-visible { transform: translate(-50%, -50%) translate(-117px, -110px) scale(1); }
.sm-photo[data-step="2"].is-visible { transform: translate(-50%, -50%) translate(118px, -118px) scale(1); }
.sm-photo[data-step="3"].is-visible { transform: translate(-50%, -50%) translate(117px, 117px) scale(1); }
.sm-photo[data-step="4"].is-visible { transform: translate(-50%, -50%) translate(-116px, 116px) scale(1); }
.sm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }

.sm-photo img.sm-img--idle {
	opacity: 1;
	transition-delay: 0s;
}

.sm-photo.is-visible img.sm-img--hover {
	opacity: 1;
	transition-delay: .18s;
}

/* ---------- responsive ---------- */
@media (max-width: 780px) {
	.sm-metodo {
		padding: 40px 20px 260px;
	}

	.sm-rings {
		width: 420px;
		height: 420px;
	}

	.sm-grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.sm-step--tl,
	.sm-step--tr,
	.sm-step--bl,
	.sm-step--br {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		text-align: left;
		max-width: none;
	}

	.sm-center,
	.sm-photo {
		display: none;
	}
}