/* ==========================================================================
   COMPONENTS & UTILITIES
   ========================================================================== */

/* Eyebrow / kicker — used above H1s (e.g. "COLORES CORPORATIVOS") */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--eln-teal);
}

/* Script flourish — the Pacifico lowercase-with-underline treatment */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--eln-pink);
  font-size: 1.15em;
  line-height: 1;
}

/* ==========================================================================
   COMPONENTS — section heads, cards, etc.
   ========================================================================== */

/* Section head (reusable across layouts) */
.section-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 64px;
	padding: 0 20px;
}

.section-head__eyebrow {
	display: block;
	margin-bottom: 12px;
}

.section-head__script {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--eln-magenta);
	font-size: clamp(1.6rem, 2.5vw, 1.875rem);
	margin: 0 0 8px;
	line-height: 1.2;
}

.section-head__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--eln-midnight);
	line-height: 1.2;
	margin: 0 0 16px;
	text-wrap: balance;
}

.section-head__title .script-accent {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--eln-magenta);
	font-size: 1.05em;
	display: inline-block;
}

.section-head__subtitle {
	color: var(--fg-2);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Base class + variants. Context overrides (sidebar, dark CTA, etc.) live
   in the stylesheet that uses them.
   ─────────────────────────────────────────────────────────────────────── */
.btn {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all var(--dur) var(--ease-out);
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
}

.btn:active { transform: scale(0.97); }

.btn-lg {
	padding: 16px 32px;
	font-size: 17px;
}

.btn-primary { background: var(--eln-magenta); color: #fff; }
.btn-primary:hover {
	background: color-mix(in oklab, var(--eln-magenta) 88%, #000);
	box-shadow: var(--shadow-pink);
	color: #fff;
}

.btn-outline { background: transparent; color: var(--eln-midnight); box-shadow: inset 0 0 0 2px var(--eln-midnight); }
.btn-outline:hover { background: var(--eln-midnight); color: #fff; }

.btn-outline-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px #fff; }

/* ── Gutenberg core/button → brand styles ─────────────────────────────────
   Maps wp-block-button variants to the same visual language as .btn.
   is-style-fill (default) → primary magenta
   is-style-outline        → outline midnight
   ─────────────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: var(--radius-pill) !important; /* overrides Gutenberg inline style */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all var(--dur) var(--ease-out);
	text-decoration: none !important; /* prose a:underline has lower specificity but wins via cascade order */
	white-space: nowrap;
	cursor: pointer;
	border: 0;
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: scale(0.97);
}

/* Default + is-style-fill → magenta primary */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--eln-magenta);
	color: #fff;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: color-mix(in oklab, var(--eln-magenta) 88%, #000);
	box-shadow: var(--shadow-pink);
	color: #fff;
}

/* is-style-outline → outline midnight */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--eln-midnight);
	box-shadow: inset 0 0 0 2px var(--eln-midnight);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--eln-midnight);
	color: #fff;
}

/* In-prose overrides: .prose a { color; text-decoration } would otherwise win via cascade */
.prose .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.prose .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { color: #fff; }
.prose .wp-block-button.is-style-outline .wp-block-button__link { color: var(--eln-midnight); }
.prose .wp-block-button { margin-bottom: 30px; }

/* Wrap container (reusable) */
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 768px) {
	.wrap { padding: 0 20px; }
}