/**
 * Maria Fornet — designed content pages (mf-page template).
 * The page design lives in block attributes + theme.json variations.
 * This file only holds what theme.json cannot express per-instance.
 * (El ritmo vertical de las páginas vive en los tokens page-space de
 * theme.json — 80px — y el .dc definitivo no lo reduce en móvil: solo
 * estrecha los gutters; no lleva pasos verticales aquí.)
 */

/* Breakpoint step — solo el ancho (el .dc: 24px de gutter a ≤820). */

/* Capital Femenino wordmark: enlace burdeos + punto dorado final.
   Los enlaces de enlace a texto solo son alcanzables con CSS. */
.cf-wordmark a {
	color: var(--wp--preset--color--burgundy);
	text-decoration: none;
}

.cf-wordmark__dot {
	color: var(--wp--preset--color--gold);
}

/* Palabras de acento burdeos dentro de titulares CF. */
.cf-title-accent {
	color: var(--wp--preset--color--burgundy);
}

/* Pie mínimo de páginas privadas CF: enlaces tinta sin subrayado. */
.cf-footer-min a {
	color: inherit;
	text-decoration: none;
}

/* Retrato del hero de la Aplicación: alturas por breakpoint
   (la portada de la foto no admite estados responsive en atributos). */
.cf-hero-photo {
	min-height: 520px;
}

@media (max-width: 860px) {
	.cf-hero-photo {
		min-height: 300px;
	}
}

/* Gold bar under "Capital Femenino" inside the cierre headline.
   Inline span styling is not expressible in block attributes. */
.mf-clases__u {
	border-bottom: 5px solid var(--wp--preset--color--gold);
}

/* Same underline treatment for the designed pages (shared classes,
   reused by Convierte/El Audiario/Substack). */
.mf-u {
	border-bottom: 5px solid var(--wp--preset--color--gold);
}

.mf-u--4 {
	border-bottom: 4px solid var(--wp--preset--color--gold);
}

.mf-u--3 {
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

/* Acento dorado en cursiva dentro de titulares y bandas (Sobre mí). */
.mf-title-gold {
	color: var(--wp--preset--color--gold);
	font-style: italic;
}

.mf-title-strong {
	font-weight: 700;
}

/* Etiqueta en línea dentro de un párrafo (los spans de etiqueta del .dc:
   "al mes", fechas, letras menores del press kit). */
.mf-label-inline {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	font-weight: 400;
}

/* Punto dorado tras la marca (Capital Femenino.). */
.mf-dot {
	color: var(--wp--preset--color--gold);
}

/* Cursiva en línea (decoración dentro de párrafos). */
.mf-em {
	font-style: italic;
}

/* Enlaces de texto con subrayado fino y flotado (color base heredado del
   párrafo: la variante —burg flota en burdeos, la base en dorado oscuro). */
.mf-link-under a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: color 0.25s ease;
}

.mf-link-under a:hover,
.mf-link-under a:focus {
	color: var(--wp--preset--color--gold-dark);
}

.mf-link-under--burg a:hover,
.mf-link-under--burg a:focus {
	color: var(--wp--preset--color--burgundy);
}

/* Enlaces tinta sin subrayado (contacto de prensa). */
.mf-link-ink a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Enlaces reales para teclado dentro de imágenes con overlay
   (Enable Linked Blocks queda oculto a tabindex); saltan a la vista
   al recibir el foco, patrón skip-link. */
.mf-sr-only:not(:focus) {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* Sobre mí: retrato del hero a altura fija (640 de diseño; 460 a 860).
   El atributo de alturas de cover no lleva estados responsive. */
.pk-hero-photo {
	min-height: 640px;
}

@media (max-width: 860px) {
	.pk-hero-photo {
		min-height: 460px;
	}
}

/* Sobre mí: franja de logos de prensa. Alturas fijas una por marca —
   geometría irreducible en atributos (cf. las alturas fijas de mf-home
   en global.css). El orden dentro de la franja es intencional. La banda
   del .dc se cierra a 1040px (la Home la comparte). */
.pk-press__logos {
	max-width: 1040px;
}

.pk-press__logos .wp-block-image img {
	height: 30px;
	width: auto;
}

.pk-press__logos > .wp-block-image:nth-child(2) img { height: 32px; }
.pk-press__logos > .wp-block-image:nth-child(3) img { height: 28px; }
.pk-press__logos > .wp-block-image:nth-child(4) img { height: 50px; }
.pk-press__logos > .wp-block-image:nth-child(5) img { height: 24px; }
.pk-press__logos > .wp-block-image:nth-child(6) img { height: 26px; }
.pk-press__logos > .wp-block-image:nth-child(7) img { height: 26px; }
.pk-press__logos > .wp-block-image:nth-child(8) img { height: 44px; }
.pk-press__logos > .wp-block-image:nth-child(9) img { height: 50px; }
.pk-press__logos > .wp-block-image:nth-child(10) img { height: 24px; }
.pk-press__logos > .wp-block-image:nth-child(11) img { height: 40px; }
.pk-press__logos > .wp-block-image:nth-child(12) img { height: 40px; }
.pk-press__logos > .wp-block-image:nth-child(13) img { height: 48px; }

/* FAQ accordion (design system shared by the masterclass pages):
   the toggle icon is a core-rendered span, not a block — color, size
   and hover behavior can only be reached here. */
.wp-block-accordion .wp-block-accordion-heading__toggle {
	align-items: baseline;
	gap: 24px;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--gold-dark);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 22px;
	font-weight: 400;
	flex: none;
}

.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Inversión CTA: designed min-width; not expressible per-instance. */
.mf-btn-cta .wp-block-button__link {
	min-width: 280px;
}

/* Ink-colored mail link inside the gold cierre band. */
.mf-ink-link {
	color: var(--wp--preset--color--ink);
}

/* The mf-card variations set their hover/focus transition in theme.json css,
   which cannot carry a media query (@media inside css breaks the parser). */
@media (prefers-reduced-motion: reduce) {
	[class*="is-style-mf-card-"] {
		transition: none;
	}
}
/* Punto de Inflexión: retrato del hero a altura fija (520 de diseño;
   380 a 860). La altura no lleva estados responsive en atributos. */
.pi-photo {
	min-height: 520px;
}

@media (max-width: 860px) {
	.pi-photo {
		min-height: 380px;
	}
}

/* Punto de Inflexión: laterales con position sticky del .dc (260px | auto
   del .dc: sticky encima; estáticos a 860). */
.pi-sidewrap {
	position: sticky;
	top: 24px;
}

@media (max-width: 860px) {
	.pi-sidewrap {
		position: static;
	}
}

/* Punto de Inflexión: fila del precio alineada por la línea base, como en el
   .dc (align-items: baseline). El core descarta en silencio el
   `verticalAlignment` de un flex horizontal (layout.php solo lo emite con
   overrides de viewport), así que la fila queda centrada en vertical y el
   descenso del «95 €» cae sobre el párrafo de debajo. */
.pi-price-row {
	align-items: baseline;
}

/* Punto de Inflexión: tamaños de la marca (48px junto a la etiqueta,
   60px en el cierre); el redondeo lo lleva el atributo del bloque. */
.pi-logo {
	width: auto;
	margin: 0;
}

.pi-logo--48 img {
	width: 48px;
	height: 48px;
}

.pi-logo--60 img {
	width: 60px;
	height: 60px;
}

/* Punto de Inflexión: letra de las capturas de los pasos al pie de cada
   figura (10px, tracking del formulario .22em). */
.pi-imgs figcaption {
	letter-spacing: var(--wp--custom--form--label--tracking);
	color: var(--wp--custom--tint--ink-65);
}

/* Punto de Inflexión: FAQ con icono más pequeño (20px frente al 22px
   del sistema compartido; irreducible, el icono es core-rendered). */
.pi-faq .wp-block-accordion .wp-block-accordion-heading__toggle-icon {
	font-size: 20px;
}

/* CTA de suscripción en Substack: el icono de marca es Custom HTML y el
   chrome del botón consume tokens. */
.mk-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tracking);
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease;
}

.mk-cta:hover,
.mk-cta:focus {
	background: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--cream);
}

.mk-cta svg {
	flex: none;
	width: 14px;
	height: 14px;
	display: block;
}

/* Etiqueta con la marca de Substack (apertura de Punto de Inflexión). */
.mk-substack {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.mk-substack svg {
	flex: none;
	width: 14px;
	height: 14px;
	display: block;
}

.mk-substack--label {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wp--custom--tint--ink-70);
}

.mk-substack--link {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	padding-bottom: 6px;
	transition: color 0.25s ease;
}

.mk-substack--link:hover,
.mk-substack--link:focus {
	color: var(--wp--preset--color--gold-dark);
}

/* Letra de fecha + autor (10px, .24em) y guion de las piezas. */
.mk-substack--date {
	color: var(--wp--custom--tint--ink-60);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tight);
	text-transform: uppercase;
}

.mk-dash {
	color: var(--wp--preset--color--gold-dark);
	font-size: var(--wp--preset--font-size--body-15);
}

/* Transiciones de las piezas nuevas, mismo guard de la página anterior. */
@media (prefers-reduced-motion: reduce) {
	.mk-cta,
	[class*="is-style-mf-pk-row"],
	[class*="is-style-mf-quote-"] {
		transition: none;
	}
}

/* Punto de Inflexión: reinicio de cursiva dentro de citas (los nombres de
   producto en romana en medio de la cita en cursiva del .dc). */
.mf-normal {
	font-style: normal;
}

/* Afiliadas: altura del cover del hero a 560px de diseño; 380px a ≤820
   (el paso propio del .dc de esta página; pk/pi photos escalan a 860).
   Misma justificación que .pk-hero-photo: la altura por breakpoint no
   lleva estados responsive en atributos. */
.af-photo {
	min-height: 560px;
}

@media (max-width: 820px) {
	.af-photo {
		min-height: 380px;
	}
}

/* Afiliadas: la nota de protección de datos hereda el color del párrafo
   (tinta-65), literal del .dc; los enlaces del theme van dorados. */
.af-privacy a {
	color: inherit;
}


/* El fix del filete del .dc: el core sirve `html :where(.has-border-color)
   { border-style: solid }` (0,0,1) para TODO bloque con color de borde, y los
   lados sin ancho declarado caen al inicial del navegador (medium = 3px): el
   recuadro fantasma de la ronda visual 4 de Capital Femenino. Un `:where`
   plano del tema (0,0,0) no gana; por eso el guard encadena la clase del
   bloque (0,2,0). Los lados que el patrón declara inline siguen ganando
   (inline > cualquier stylesheet), así que los filetes de 1px se conservan
   y el resto de lados se apaga.
   Cobertura: group (nav, píldora, marcos), columns/column (celdas con filete
   lateral), paragraph (franjas e ítems con filete), heading, accordion-item
   (filete inferior del ítem) y details.
   EXCLUIDOS a propósito: button/wp-block-button__link (el borde del botón
   ghost viene de la variación mf-button-ghost, no de un color de borde) e
   image/cover (el .dc no les pone filete). */
.wp-block-group.has-border-color,
.wp-block-columns.has-border-color,
.wp-block-column.has-border-color,
.wp-block-paragraph.has-border-color,
.wp-block-heading.has-border-color,
.wp-block-accordion-item.has-border-color,
.wp-block-details.has-border-color {
	border-style: none;
	border-width: 0;
}

/* Enlaces reales dentro de tarjetas enlazadas: el color del link del tema
   (oro oscuro) es lo que tiñe de marrón el titular sobre el hover dorado. */
.cf-mcard h3 a,
.cf-mc h3 a {
	color: inherit;
}

/* Capital Femenino — home (/capitalfemenino, 14/10): interruptor cf-hidden,
   banda marquee, hero (altura 88vh + inclinación del logotipo), marco del
   manifiesto y caja del pódcast (anclas para sus decoraciones absolutas del
   .dc), pill «Hablemos» (hover móvil), tarjetas de masterclass (hover oro /
   inversión ink), banda del Reto (hover mostaza claro) y nav móvil (el .dc
   esconde enlaces tras un burger con JS: aquí envuelven en dos filas). */
.cf-hidden { display: none !important; }

.cf-band { overflow: hidden; }
@keyframes cf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cf-band .cf-track { animation: cf-marquee 44s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.cf-band .cf-track { animation: none !important; }
}

.cf-hero { min-height: 88vh; }
.cf-hero-tilt { transform: rotate(-1.1deg); }
.cf-marco { position: relative; }
.cf-pod { position: relative; }

/* Pill «Hablemos» del hero: hover del .dc + reajuste móvil.
   El resto del cromo viaja inline en el core/html del patrón. */
/* Pill «Hablemos» del hero: cromo del .dc en clases (los estilos inline
   nunca pierden en :hover) + hover dorado y reajuste móvil. */
.cf-hablemos {
	position: absolute;
	right: 0;
	top: 30%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 30px 44px 30px 52px;
	border-radius: 999px 0 0 999px;
	background: rgba(12,11,8,.62);
	border: 1px solid rgba(251,243,228,.35);
	border-right: none;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .35s cubic-bezier(.22,.7,.28,1), background .3s ease, color .3s ease, border-color .3s ease;
}
.cf-hablemos:hover,
.cf-hablemos:focus {
	transform: translateX(-12px);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}
.cf-hablemos-line { display: block; width: 68px; height: 1px; background: currentColor; position: relative; }
.cf-hablemos-line > span { position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); display: block; }
@media (max-width: 820px) {
	.cf-hablemos { top: 92px !important; padding: 15px 18px 15px 24px !important; gap: 12px !important; font-size: 11px !important; }
	.cf-hablemos-line { width: 28px !important; }
}

/* Tarjetas de masterclass: hover del .dc (borde y fondo oro / inversión ink). */
.cf-mcard { transition: border-color .28s ease, background .28s ease, color .3s ease; }
.cf-mcard:hover, .cf-mcard:focus-within { border-color: var(--wp--preset--color--gold) !important; background: var(--wp--preset--color--gold) !important; color: var(--wp--preset--color--ink); }
.cf-mc { transition: background .3s ease, color .3s ease; }
.cf-mc:hover, .cf-mc:focus-within { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--cream); }
.cf-mc:hover :where(p, h3, h3 a) { color: var(--wp--preset--color--cream) !important; }
.cf-mc:hover h3 a { text-decoration: none; }

/* Banda del Reto: aclara mostaza al pasar (el .dc pisa el mismo token). */
.cf-reto { transition: background .28s ease; }
.cf-reto:hover, .cf-reto:focus-within { background: var(--wp--preset--color--gold-pale) !important; }

/* Nav móvil: el .dc esconde links tras burger con JS; aquí envuelven en dos filas. */
@media (max-width: 820px) {
	.cf-nav { flex-wrap: wrap; row-gap: 12px; }
}
/* El pill «Hablemos» del hero debe anclar al cover (el .dc lo cuelga del
   héroe): el inner-container es position:relative en WP y metía 72px de
   gutter en right:0. */
.wp-block-cover.cf-hero .wp-block-cover__inner-container {
	position: static;
}

/* Las cintas del manifiesto son hijos de un constrained: el root del tema les
   mete margin-block 24px y las pega a la imagen (css -34px computaba -10px). */
.cf-marco > * {
	margin-block: 0px;
}

/* FAQ de Convierte MÁS (fase 3): el .dc usa <details>/<summary> con el «+»
   dorado que rota al abrir. Tres reglas irreducibles del artefacto: reset del
   marcador nativo, cursor y la rotación del icono (no hay bloque que lo
   produzca). Bloqueado a .cm-faq para no afectar a otros <details> del sitio. */
.cm-faq details {
	margin: 0;
}
.cm-faq details > summary {
	list-style: none;
	cursor: pointer;
}
.cm-faq details > summary::-webkit-details-marker {
	display: none;
}
.cm-faq details[open] .faq-plus {
	transform: rotate(45deg);
}

/* Banda del Reto: la columna de texto se limita a 720px (el .dc) para que el
   botón «Empezar gratis» quepa a su derecha en la misma fila. */
.cf-reto > .wp-block-group {
	flex: 1 1 auto;
	min-width: 260px;
	max-width: 720px;
}

/* Los grupos flex verticales de WP dejan align-items:flex-start: sus hijos
   se encogen al contenido. El .dc los estira a todo el ancho (columnas del
   pie, fila legal y contenido de las tarjetas de masterclass). */
.cf-footer__cols,
.cf-footer__legal {
	width: 100%;
}
.cf-mcard > * {
	width: 100%;
}

/* ------------------------------------------------------------------
   Reto del Dinero (tripwire) — cromo irreducible del .dc.
   ------------------------------------------------------------------
   Todo lo que sí cabe en atributos de bloque (colores, tipografías,
   bordes, rellenos, retículas) vive en theme.json o en los atributos
   de los patrones; aquí queda solo lo que el bloque no puede
   expresar: la cinta en movimiento (texto duplicado + animación), los
   tres elementos con posición absoluta (el adhesivo inclinado, el
   sello ✓ del precio y el filete de las firmas) y el recuadro de la
   flecha. */

/* Banda en movimiento (aviso de oferta): la cinta del .dc duplica el
   texto para poder rotar sin costura; el duplicado y su animación no
   son expresables en bloques (la cinta va en core/html). */
.mf-marquee {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.mf-marquee-track {
	display: flex;
	flex-shrink: 0;
	width: max-content;
	animation: mf-marquee 28s linear infinite;
}
.mf-marquee-half {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 18px;
}
.mf-marquee-dot {
	color: var(--wp--preset--color--gold);
}
.mf-marquee-deal {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}
@keyframes mf-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mf-marquee-track {
		animation: none;
	}
}

/* La caja de la oferta y la fila del precio: el adhesivo y el sello ✓
   se cuelgan de su esquina, así que necesitan un ancestro posicionado
   (el bloque sólo admite position:sticky). */
.rd-rel {
	position: relative;
}

/* Adhesivo inclinado de la oferta («★ Substack Bestseller ★»): el .dc
   lo cuelga del borde superior derecho de la caja, girado 6°. */
.rd-sticker {
	position: absolute;
	top: -20px;
	right: -16px;
	transform: rotate(6deg);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--gold);
	outline: 4px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 3;
	pointer-events: none;
}
@media (max-width: 820px) {
	.rd-sticker {
		top: -18px;
		right: 8px;
		padding: 10px 16px;
		font-size: 10px;
	}
}

/* Sello ✓ del precio (95 €/año → 19 €): círculo ink sobre la esquina
   del precio. */
.rd-check {
	position: absolute;
	top: -30px;
	left: -6px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

/* Firma de las opiniones: el .dc antepone un filete (28px en las
   fichas, 40px en la cita ancha) que el bloque no puede pintar. */
.rd-sign {
	display: flex;
	align-items: center;
	gap: 14px;
}
.rd-sign::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	flex: none;
}
.rd-sign--long::before {
	width: 40px;
}

/* Flecha del aviso «no cierres todavía»: recuadro de 44px con el borde
   del color del texto (el .dc lo pinta con currentColor). */
.rd-arrow .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
}
.rd-scroll:hover p,
.rd-scroll:focus-within p,
.rd-scroll:hover .wp-block-button__link,
.rd-scroll:focus-within .wp-block-button__link {
	color: var(--wp--preset--color--gold-dark);
}

/* CTA de la oferta: el .dc lo estira a todo el ancho de la columna
   dorada (display:block) — el ancla del botón no admite medidas. */
.rd-cta .wp-block-button__link {
	display: flex;
	width: 100%;
	text-align: left;
}

/* Capturas de los pasos: la letra del .dc va en versalitas con el
   tracking de la etiqueta y el tinte ink-60. */
.rd-imgs figcaption {
	letter-spacing: var(--wp--custom--label--tight);
	text-transform: uppercase;
	color: var(--wp--custom--tint--ink-60);
}

/* Enlaces de texto que heredan el color de su párrafo (la fila legal
   del pie): el color global del tema los pinta de dorado. */
.mf-link-plain a,
a.mf-link-plain {
	color: inherit;
	text-decoration: none;
}
.mf-link-plain a:hover,
a.mf-link-plain:hover {
	color: var(--wp--preset--color--gold-dark);
}

/* ---------------------------------------------------------------------------
   Reto del Dinero (/reto-del-dinero) — lo irreducible del .dc.
   Todo lo demás vive en theme.json (variaciones y tokens del tema), en los
   atributos de bloque o en la piel compartida .sa-precuela. Aquí solo lo que
   el motor de estilos no sabe expresar: el paso de 3 columnas de la
   retícula, el baseline de una fila flex horizontal, la decoración de un span
   y el hover de las cajas.
   --------------------------------------------------------------------------- */

/* La retícula de los 7 días: el .dc la hace con auto-fill minmax(220px, 1fr)
   → 4 columnas a 1096px de contenido, 3 entre 821 y 1119px de viewport y 2
   por debajo de 820px. El motor de WP solo emite un número de columnas fijo
   (y el paso de 2 columnas de tablet va con !important), así que el paso
   intermedio de 3 columnas se resuelve aquí. */
@media (min-width: 861px) and (max-width: 1119px) {
	.mf-reto-days {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* La fila del encabezado «Qué vas a trabajar» del .dc: la nota se alinea con
   la línea base del titular (align-items: baseline; el core descarta en
   silencio `verticalAlignment: baseline` en un flex horizontal). */
.mf-reto-row {
	align-items: baseline;
}

/* La segunda línea del titular del cierre: versalitas de bloque que no bajan
   de línea (el .dc: display block + uppercase + nowrap + .82em). */
.mf-reto-cierre__u {
	display: block;
	text-transform: uppercase;
	white-space: nowrap;
	font-size: .82em;
	letter-spacing: .02em;
}

/* Las 4 cajas de «Qué recibes»: el hover dorado del .dc (fondo oro, texto
   tinta, filete oro). El número, que va en crema-72, pasa a tinta-70. */
.mf-reto-box {
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* El !important es necesario: el filete y el color del número viven en el
   estilo inline del bloque (para que el cliente los edite en el editor) y el
   estilo inline gana a cualquier regla de author sin !important. */
.mf-reto-box:hover,
.mf-reto-box:focus-within {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold) !important;
}

.mf-reto-box:hover p:first-child,
.mf-reto-box:focus-within p:first-child {
	color: var(--wp--custom--tint--ink-70) !important;
}

/* El formulario del Reto reutiliza la piel compartida .sa-precuela
   (sa-forms.css) — el mismo formulario en el .dc. Sólo cambian cuatro valores
   del artefacto: el aire entre campos (16px), la entrada (17px), el
   consentimiento (12px) y el botón (18/26 con el hover dorado). El id
   #apuntate es el del propio formulario del .dc. */
#apuntate .sa-precuela_wrapper .gform_fields {
	--gf-field-gap-y: 16px;
}

#apuntate .sa-precuela .ginput_container input[type="email"] {
	font-size: var(--wp--preset--font-size--body-17);
}

#apuntate .sa-precuela .gfield_consent_label {
	font-size: var(--wp--preset--font-size--body-12);
	color: var(--wp--custom--tint--ink-85);
}

/* El botón de GF 3.1 con tema «framework» se construye con VARIABLES, no con
   propiedades (CONVENCIONES §19): la piel .sa-precuela las declara en su
   lugar, así que aquí se fijan — es el botón del .dc (tinta/oro, Jost 10px
   .28em, 18/26 y el hover dorado). */
#apuntate .sa-precuela .gform_button {
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-border-width-primary: 0px;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--jost);
	--gf-ctrl-btn-font-size: var(--wp--custom--label--font-size);
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: var(--wp--custom--label--tracking);
	--gf-ctrl-btn-text-transform: uppercase;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--label--font-size);
	font-weight: 600;
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	text-align: left;
	border: none;
	border-radius: 0;
	padding: 18px 26px;
}

#apuntate .sa-precuela .gform_button:hover,
#apuntate .sa-precuela .gform_button:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

#apuntate .sa-precuela .gform_confirmation_wrapper p {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--custom--label--font-size);
	letter-spacing: var(--wp--custom--sublabel--tracking);
	text-transform: uppercase;
	color: var(--wp--custom--tint--ink-70);
}

/* --- Masterclass Seis Cifras (plantilla F2 · Funnel del LEEME §1) --- */

/* El punto dorado que late del hero: es una animación, no la expresa ningún
   bloque (irreducible → aquí, con su guard de reduced-motion). */
@keyframes ms-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--gold) 60%, transparent); }
	50% { box-shadow: 0 0 0 7px transparent; }
}
.ms-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	animation: ms-pulse 2.2s ease-in-out infinite;
	flex: none;
}
@media (prefers-reduced-motion: reduce) {
	.ms-dot { animation: none; }
}

/* La cifra grande de la Masterclass: el .dc la lleva con white-space: nowrap
   para que «100.000 €» nunca se parta (el token de tamaño es fluido). */
.ms-cifra {
	white-space: nowrap;
}

/* La cinta de la banda en fondo oro: los puntos y el «80 % dto.» van en tinta
   (el .dc los invierte respecto a la cinta tinta del principio de la página). */
.mf-marquee--ink .mf-marquee-dot,
.mf-marquee--ink .mf-marquee-deal {
	color: var(--wp--preset--color--ink);
}
.mf-marquee--ink:hover,
.mf-marquee--ink:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
}
.mf-marquee--ink:hover .mf-marquee-dot,
.mf-marquee--ink:hover .mf-marquee-deal,
.mf-marquee--ink:focus-visible .mf-marquee-dot,
.mf-marquee--ink:focus-visible .mf-marquee-deal {
	color: var(--wp--preset--color--cream);
}

/* Las cuatro cajas de «Guárdalo en tu calendario»: el enlace en tinta (el
   .dc lo pinta así) y el hover a tinta con el texto crema. */
.ms-cal a {
	color: var(--wp--preset--color--ink);
}
.ms-cal:hover,
.ms-cal:focus-within {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
}
.ms-cal:hover a,
.ms-cal:focus-within a {
	color: var(--wp--preset--color--cream);
}

/* La llamada de la Masterclass: tinta con el texto crema y el hover en oro
   (el .dc lo pinta así; la variación mf-button-ink pone el texto oro y el
   hover crema). */
.is-style-mf-button-ink.ms-cta .wp-block-button__link {
	color: var(--wp--preset--color--cream);
}
.is-style-mf-button-ink.ms-cta .wp-block-button__link:hover,
.is-style-mf-button-ink.ms-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* La banda a sangre dentro de una section flex (la cinta del aviso de
   oferta): WordPress deriva `align-items` de `justifyContent` y pone
   «center», así que el bloque se ajusta al contenido y la cinta se sale de
   la pantalla (2611px de scroll horizontal). Con `stretch` y el ancho del
   contenedor más los dos gutters, la banda vuelve a medir lo que mide en el
   .dc (1240px). Geometría en tokens, sin hex. */
.mf-banda-sangre {
	align-self: stretch;
	width: calc(100% + var(--wp--custom--gutter--default) * 2);
}

/* ============================================================
   PORTADA (Home María Fornet) — cromo irreducible del .dc.
   El diseño de la portada vive en theme.json (tokens y
   variaciones mf-scroller / mf-dot / mf-cta / mf-pcd-btn) y en
   atributos de bloque; aquí solo queda lo que los atributos no
   alcanzan: la pestaña flotante «Hablemos», el span sin corte
   del subrayado y la insignia del micrófono. Los selectores
   .mf-hero / .mf-badgewrap vienen del className de su grupo.
   ============================================================ */

/* El section del hero es el ancla de la pestaña (position relative). */
.mf-hero {
	position: relative;
}

/* Pestaña «Hablemos»: fondo tinta, línea con chevron y deslizamiento
   al pasar el ratón (el .dc la define absoluta a top 24 / right 0). */
.mf-hablemos {
	position: absolute;
	right: 0;
	top: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px 30px 22px 38px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .35s cubic-bezier(.22, .7, .28, 1), background .3s ease, color .3s ease;
}

.mf-hablemos:hover,
.mf-hablemos:focus {
	transform: translateX(-12px);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.mf-hablemos-line {
	display: block;
	width: 54px;
	height: 1px;
	background: currentColor;
	position: relative;
}

.mf-hablemos-line > span {
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	display: block;
}

/* A ≤860 la pestaña vuelve al flujo, pegada a la derecha. */
@media (max-width: 860px) {
	.mf-hablemos {
		position: static;
		justify-content: flex-end;
		padding: 12px 16px;
		gap: 12px;
	}

	.mf-hablemos-line {
		width: 28px;
	}
}

/* El subrayado de la conclusión no puede partirse (el .dc lo declara
   nowrap). La raya dorada ya existe arriba (.mf-u / .mf-u--4). */
.mf-nowrap {
	white-space: nowrap;
}

/* Insignia del micrófono: círculo tinta colgado del borde inferior
   derecho de la portada del pódcast (el envoltorio lleva .mf-badgewrap). */
.mf-badgewrap {
	position: relative;
}

.mf-pcd-badge {
	position: absolute;
	bottom: -18px;
	right: -18px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	border: 3px solid var(--wp--preset--color--gold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Reduced-motion: el pasador de la portada no desliza suavemente al
   pinchar en los puntos y el cromo nuevo pierde sus transiciones. */
@media (prefers-reduced-motion: reduce) {
	.is-style-mf-scroller {
		scroll-behavior: auto;
	}

	.mf-hablemos {
		transition: none;
	}
}