/*
 * La página usa variables con nombres propios para no cambiar estilos del tema
 * ni de otros plugins. Cada valor conserva contraste legible en fondo claro.
 */
.opi {
	--opi-ink: #152238;
	--opi-muted: #506078;
	--opi-blue: #094f9f;
	--opi-blue-dark: #07376e;
	--opi-gold: #d5a528;
	--opi-soft: #f2f6fb;
	--opi-line: #dbe4ef;
	color: var(--opi-ink);
	font-size: 1.05rem;
	line-height: 1.7;
}

.opi-hero,
.opi-section,
.opi-cta {
	margin: 0 auto 2rem;
	max-width: 1160px;
	padding: clamp(2rem, 5vw, 4.5rem);
}

.opi-hero {
	background: linear-gradient(135deg, #07376e 0%, #0b5eb5 70%, #1574ce 100%);
	border-radius: 1.25rem;
	box-shadow: 0 20px 50px rgba(7, 55, 110, 0.2);
	color: #fff;
}

.opi-eyebrow,
.opi-kicker {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.opi-eyebrow {
	color: #ffe19a;
}

.opi-kicker {
	color: var(--opi-blue);
}

.opi h1,
.opi h2,
.opi h3 {
	color: inherit;
	line-height: 1.15;
	margin-top: 0;
}

.opi h1 {
	font-size: clamp(2.25rem, 6vw, 4.7rem);
	max-width: 900px;
}

.opi h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
}

.opi-lead {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	max-width: 820px;
}

.opi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.75rem;
}

.opi-button {
	background: var(--opi-gold);
	border: 2px solid var(--opi-gold);
	border-radius: 999px;
	color: #172133;
	display: inline-block;
	font-weight: 800;
	padding: 0.8rem 1.35rem;
	text-decoration: none;
}

.opi-button:hover,
.opi-button:focus-visible {
	background: #f0c75c;
	border-color: #f0c75c;
	color: #111827;
}

.opi-button--secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.8);
	color: #fff;
}

.opi-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opi-card,
.opi-note {
	background: #fff;
	border: 1px solid var(--opi-line);
	border-radius: 1rem;
	padding: 1.4rem;
}

.opi-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.opi-card p,
.opi-note p {
	color: var(--opi-muted);
	margin: 0;
}

.opi-section--soft,
.opi-principles {
	align-items: start;
	background: var(--opi-soft);
	border-radius: 1.25rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1.4fr 1fr;
}

.opi-steps {
	counter-reset: opi-step;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.opi-steps li {
	border-top: 4px solid var(--opi-gold);
	padding-top: 1rem;
}

.opi-steps li::before {
	color: var(--opi-blue);
	content: counter(opi-step, decimal-leading-zero);
	counter-increment: opi-step;
	display: block;
	font-size: 1.5rem;
	font-weight: 900;
	margin-bottom: 0.75rem;
}

.opi-steps strong,
.opi-steps span {
	display: block;
}

.opi-steps span,
.opi-principles li {
	color: var(--opi-muted);
}

.opi-cta {
	background: #102a4d;
	border-radius: 1.25rem;
	color: #fff;
	text-align: center;
}

.opi-cta .opi-kicker {
	color: #ffe19a;
}

.opi-cta p {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

/* En pantallas estrechas cada bloque ocupa el ancho completo para evitar texto
 * comprimido y objetivos táctiles demasiado pequeños. */
@media (max-width: 760px) {
	.opi-grid,
	.opi-section--soft,
	.opi-principles,
	.opi-steps {
		grid-template-columns: 1fr;
	}

	.opi-hero,
	.opi-section,
	.opi-cta {
		border-radius: 0.8rem;
		padding: 1.5rem;
	}

	.opi-button {
		text-align: center;
		width: 100%;
	}
}

/* El contraste de foco facilita navegar con teclado sin depender del color. */
.opi a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}