/* =========================================================================
   Generador de OKRs · estilos propios de template-parts/pages/okr-generator.php
   ========================================================================= */

.sk-generator-hero .sk-display { max-width: 900px; }
.sk-generator { padding-top: 16px; }

/* Marco del iframe (la herramienta corre en la app). */
.sk-generator__frame {
	max-width: 1000px; margin: 0 auto; padding: 10px; border-radius: 24px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)) padding-box,
		conic-gradient(from 200deg, hsl(0 0% 100%), hsl(257 100% 58% / 0.3), hsl(54 100% 62% / 0.5), hsl(0 0% 100%), hsl(200 100% 47% / 0.25), hsl(0 0% 100%)) border-box;
	border: 1px solid transparent;
	box-shadow: 0 40px 80px -40px rgba(18, 24, 86, 0.35);
}
.sk-generator__app { display: block; width: 100%; height: 780px; border: 0; border-radius: 15px; background: #fff; }
@media (max-width: 640px) {
	.sk-generator__app { height: 1000px; }
}

/* Siguiente paso */
.sk-generator__next {
	max-width: 1000px; margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--sk-line);
	display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.sk-generator__next > div:first-child { flex: 1 1 420px; }
.sk-generator__next .sk-text { margin-top: 12px; }
.sk-generator__ctas { display: flex; gap: 12px; flex-wrap: wrap; }