/**
 * core/heading — plain-section title/lead width overrides.
 *
 * PLANS' plain (non-`hero`-block) hero and lead paragraph centre
 * their text inside the full 1470px contentSize, which reads as an
 * unbroken single line instead of a two/three-line wrap.
 *
 * `--hero--title-max-width` is sized for HOME/FEATURES' own (longer) hero
 * title at the same 64px display size, so it never constrains this shorter
 * "Un plan que crece con tu negocio". Fluid typography also makes any fixed
 * px cap unreliable across breakpoints:
 * `ch` scales with the font's own metrics instead, so `20ch` reliably
 * breaks after "crece" regardless of viewport. `--width--measure` (800px,
 * already a generic prose-measure token, not hero-specific) still works
 * for the leads, which wrap correctly at that width.
 *
 * Registered on core/heading (inc/assets.php) because a heading is always
 * present wherever these classes are used, guaranteeing the file loads;
 * the lead-paragraph rule rides along in the same file rather than adding
 * a second registration under core/paragraph for one selector.
 *
 * A plain single class ties in specificity with core's own
 * `.is-layout-constrained > :where(...)` layout rule (`:where()` always
 * contributes zero) and loses the tie, since global-styles-inline-css loads
 * after this file. Qualifying with the element type (h1/p) raises this to
 * two selector parts against their one, so it wins regardless of load order,
 * without `!important`.
 */
h1.plans-hero__title {
	max-width: 20ch;
	margin-inline: auto;
}

p.plans-hero__lead,
p.plans-accelerators__lead,
p.form-hero__lead {
	max-width: var(--wp--custom--width--measure);
	margin-inline: auto;
}

/*
 * The circle around "tu negocio" is the same hand-drawn decoration
 * blocks/hero/style.css ships for the brand-panel hero's "directo" — the
 * same asset, just on a plain heading instead of `.hero__title`.
 * Global mark.css still supplies the straight-underline default for every
 * other <mark> in the theme; this overrides it for this one heading only.
 */

/*
 * ABOUT US' hero joins them (a 294x103 loop around "para ti"). It is not
 * rotated, because rotating the pseudo-element rotates the box that bounds
 * the words with it.
 *
 * It is in MIRAIGO_DRAWN_MARK_HEADINGS like PLANS, so the front end draws
 * the looping stroke (assets/js/mark-loop.js). The mask below only serves
 * the block editor.
 */
.plans-hero__title mark,
.about-hero__title mark,
.blog-hero__title mark,
.form-hero__title mark {
	position: relative;
	display: inline-block;
	padding-inline: 0.2em;
	margin-inline: -0.2em;
	padding-block-end: 0;
	isolation: isolate;
}

.plans-hero__title mark::after,
.about-hero__title mark::after,
.blog-hero__title mark::after,
.form-hero__title mark::after {
	content: "";
	position: absolute;
	inset: -0.4em -0.45em;
	block-size: auto;
	background-color: var(--miraigo-mark-ink);
	-webkit-mask: url(../../icons/underline-circle.svg) no-repeat center / 100% 100%;
	mask: url(../../icons/underline-circle.svg) no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: -1;
}

/*
 * Front end only: miraigo_draw_heading_marks() (inc/render-filters.php) has inlined
 * the real stroke, so the mask above would paint a second, static circle
 * underneath it. It lives here rather than with the shared rules in
 * assets/css/elements/mark.css because it has to out-specify that mask —
 * `.is-mark-drawn mark::after` alone is (0,1,2), which only ties the rule
 * above and would be settled by whichever stylesheet loads last. Qualifying
 * with the title class makes it (0,2,2) and removes that dependency.
 */
.plans-hero__title.is-mark-drawn mark::after,
.about-hero__title.is-mark-drawn mark::after,
.blog-hero__title.is-mark-drawn mark::after,
.form-hero__title.is-mark-drawn mark::after {
	content: none;
}

/*
 * about-why__logo — the wordmark inlined mid-sentence in "Por qué existe
 * mirai go" (patterns/about-why.php). Sized against the
 * heading's own cap-height rather than a fixed px value so it scales with
 * the fluid heading-1 size around it; 0.85em keeps the wordmark's slightly
 * taller glyph box from visually outweighing the surrounding text.
 *
 * HOME's mobile "Así funciona" heading (patterns/home-how-it-works.php)
 * shares the rule: same inline wordmark, same sizing intent.
 */
.about-why__heading,
.home-how-it-works__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
}

.about-why__logo,
.home-how-it-works__logo {
	block-size: 0.85em;
	width: auto;
	vertical-align: middle;
}

/* This padded asset is drawn 78px tall beside 65px text. */
.about-why__heading .about-why__logo {
	block-size: 1.2em;
}

/* Tightly cropped asset (the desktop scroll's own), drawn at the heading's line height in home-mobile. */
.home-how-it-works__heading .home-how-it-works__logo {
	block-size: 1em;
}

/*
 * ABOUT US page-specific rules below. Scoped by class, so — like
 * core-group.css's plans-summary-bar / integrations-missing-tool rules —
 * they only ever reach their own page even though this file loads
 * globally with core/heading.
 */

/* about-hero: title capped at 948px, lead reuses the
   808px token the article hero's own lead already measures at. */
h1.about-hero__title {
	max-inline-size: 948px;
	margin-inline: auto;
}

p.about-hero__lead {
	max-inline-size: var(--wp--custom--width--article-lead);
	margin-inline: auto;
}

/* blog-hero: title at the About Us 948px measure, lead
   held to 602px. Also the archive and search titles (core/query-title). */
h1.blog-hero__title {
	max-inline-size: var(--wp--custom--width--blog-title);
	margin-inline: auto;
}

.blog-hero__lead {
	max-inline-size: var(--wp--custom--width--blog-lead);
	margin-inline: auto;
}

/* Same "hilo desenredándose" illustration parts/faq.html already hides on
   mobile (assets/css/parts/faq.css), so this stays desktop-only too. */
.about-hero__decoration {
	display: none;
}

@media (min-width: 768px) {

	.about-hero__decoration {
		display: block;
		margin: var(--wp--preset--spacing--50) 0 0;
	}

	.about-hero__decoration svg {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* about-simple: the same accommodation-types drawing PLANS' hero ships,
   reusing that file so both render at one size. No align and no width cap, exactly like `.plans-hero__illustration`:
   the constrained layout's contentSize is what bounds it on both pages. */
.about-simple__illustration {
	margin-block-start: var(--wp--preset--spacing--50);
}