/**
 * miraigo section-panel — panel-light / panel-dark / panel-brand.
 *
 * section-panel is three core/group variations (inc/block-library.php),
 * not a custom block. theme.json owns the fixed background colour per
 * variation. The shared internal padding lives here, not in theme.json under
 * styles.blocks."core/group": block styles cannot be scoped to a variation,
 * so it would leak onto EVERY .wp-block-group in the theme. On the
 * .is-surface-*.wp-block-group selector it only reaches section-panel's own
 * box.
 *
 * Each variation's className IS the surface-class contract:
 * .is-surface-light / .is-surface-dark / .is-surface-brand, emitted here as
 * the panel's OWN root class, not an internal wrapper. Any button inside a
 * panel resolves its outline/solid treatment from this class with zero
 * extra work — that is the entire point of the contract, and section-panel
 * is its main emitter.
 */

/**
 * Breakpoints at 768px and 1720px.
 *
 * 768px matches every other break in the button/cta-pair stylesheets.
 * 1720px is theme.json's own `settings.layout.wideSize` — the only other
 * number already in the system that sits between "mobile" and the panel's
 * own 1616px cap, and the point past which the panel's width stops growing
 * relative to the viewport. Three radius tokens exist for three ranges;
 * this is the split that uses all three without inventing a new number.
 */

/**
 * Scoped to .wp-block-group, not to the bare .is-surface-* class: hero,
 * cta-footer, footer and the mobile drawer emit the same class for the
 * button contract, and none of them share section-panel's radius model.
 */

/**
 * The panel's own box is capped at width.panel (1616px) and centred; its
 * children narrow further to layout.contentSize (1470px) for free, because
 * the variation sets layout:{type:"constrained"} with no override — WP
 * falls back to the theme's global contentSize/wideSize automatically.
 * useRootPaddingAwareAlignments (theme.json) keeps `align:full` from ever
 * touching the literal viewport edge, so this is never edge-to-edge bleed.
 *
 * This stylesheet is inlined before global-styles-inline-css (inc/assets.php
 * enqueues it with `path`, which WP inlines when the file is small enough),
 * so on the margin property alone, core's own `.has-global-padding >
 * .alignfull` negative-margin rule — also two classes, (0,2,0) — wins
 * the specificity tie by loading later, undoing this rule's
 * centring. Every panel this reaches also carries `align:"full"`, so qualifying with `.alignfull` raises this to
 * (0,3,0) and wins regardless of load order, without needing `!important`.
 *
 * Merged with the radius rule below — same selector list, no reason to
 * declare it twice (stylelint no-duplicate-selectors).
 */
.alignfull.is-surface-light.wp-block-group,
.alignfull.is-surface-dark.wp-block-group,
.alignfull.is-surface-brand.wp-block-group {
	margin-inline: auto;
	max-inline-size: var(--wp--custom--width--panel);
	overflow: clip;
	border-radius: var(--wp--custom--radius--panel-mobile);
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {

	.alignfull.is-surface-light.wp-block-group,
	.alignfull.is-surface-dark.wp-block-group,
	.alignfull.is-surface-brand.wp-block-group {
		border-radius: var(--wp--custom--radius--panel-desktop);
	}
}

@media (min-width: 1720px) {

	.alignfull.is-surface-light.wp-block-group,
	.alignfull.is-surface-dark.wp-block-group,
	.alignfull.is-surface-brand.wp-block-group {
		border-radius: var(--wp--custom--radius--panel-wide);
	}
}

/* Light panels are white on white: the section gap alone spaces them. The 404 is alone in main and keeps its padding. */
.alignfull.is-surface-light.wp-block-group:not(.error-404) {
	padding-block: 0;
}

/*
 * The PLANS tiers panel gets its own padding: 72px inline (vs the shared
 * 20px) and 103px/60px top/bottom. Scoped to `.plans-tiers__panel` rather
 * than changed globally, so the other section-panel consumers keep the
 * shared default. Four classes beats the general rule's three, same
 * specificity technique as the `.alignfull` qualification above — no
 * `!important` needed.
 *
 * Fluid `clamp()`, not a `min-width: 768px` breakpoint: a hard jump from
 * the shared 20px/80px default straight to 72px/103px also applies at 390px
 * and squeezes the cards to a sliver; scoped to the breakpoint, viewport
 * widths just below 768px (a resized desktop window) would see the same
 * squeeze. `clamp()` scales continuously between the two endpoints, so
 * there is no boundary to be on the wrong side of. Each bound is still the
 * existing token — only the scaling coefficient (vw) is a bare number.
 */
.alignfull.is-surface-brand.wp-block-group.plans-tiers__panel {
	padding-block-start: clamp(var(--wp--preset--spacing--60), var(--wp--preset--spacing--60) + 1.5vw, var(--wp--custom--plans-tiers--panel-padding-block-start));
	padding-block-end: clamp(var(--wp--preset--spacing--55), var(--wp--preset--spacing--60) - 1.3vw, var(--wp--preset--spacing--60));
	padding-inline: clamp(var(--wp--preset--spacing--40), var(--wp--preset--spacing--40) + 4vw, var(--wp--custom--plans-tiers--panel-padding-inline));
}

/*
 * The INTEGRACIONES closing panel is short, so the shared 80px default
 * leaves its copy floating instead of sitting in a band: spacing--50 (40px)
 * above the copy and below the button.
 *
 * Scoped to the panel's own class, like `plans-tiers__panel` above, so the
 * other section-panel consumers keep the shared default. Four classes beats
 * the general rule's three, so no `!important`.
 *
 * No `clamp()` here, unlike plans-tiers: 40px is smaller than the default,
 * so applying it unconditionally cannot squeeze anything at 390px.
 */
.alignfull.is-surface-dark.wp-block-group.integrations-missing-tool {
	padding-block: var(--wp--preset--spacing--50);
}

/*
 * The copy is a centred paragraph, not a heading, so nothing else caps its
 * measure: it is 1074px inside a 1616px panel, and left to the
 * constrained layout's own 1470px contentSize it runs ~400px wider and
 * drops a line.
 *
 * Element-qualified (0,1,1), not the bare class. Core's
 * `.is-layout-constrained > :where(...)` caps children at contentSize and is
 * (0,1,0) — `:where()` contributes nothing — so a single class ties on
 * specificity and then loses on load order, the same shape as
 * `.plans-summary-bar` below. One element selector settles it without
 * `!important`.
 */
p.integrations-missing-tool__copy {
	max-inline-size: var(--wp--custom--width--missing-tool-copy);
	margin-inline: auto;
	line-height: 1.1;
	font-weight: 500;
}

/**
 * plans-summary-bar — the white plan-summary bar on PLANS.
 * Not a section-panel variation: a small bar on no surface of its own, so it
 * emits no surface context and :root's light-surface defaults
 * (core-button.css) already give its buttons the right treatment.
 *
 * It never sits in page flow: hidden until a plan card or an accelerator is
 * chosen, then fixed to the bottom of the viewport by assets/js/plan-select.js
 * (`is-floating`), staying visible for as long as something is chosen.
 * Without JS it stays hidden. The editor keeps it static so its copy stays
 * editable.
 */
body:not(.editor-styles-wrapper) .wp-block-group.plans-summary-bar:not(.is-floating) {
	display: none;
}

/*
 * `.wp-block-group` qualifies all three gap rules below: WP's own flex gap,
 * `:root :where(.is-layout-flex) { gap: spacing--50 }`, is (0,1,0) and loads
 * after this file, so a single class ties and loses.
 * Unqualified, the bar renders ~60px taller on 40px gaps.
 */
/* stylelint-disable-next-line no-descending-specificity -- The front-end hide above sets only `display`; this rule never sets it, so their order cannot change the result. */
.wp-block-group.plans-summary-bar {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--background-primary);
	border: var(--wp--custom--border--button) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--sticky);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-group.plans-summary-bar__info {
	align-items: center;
	gap: var(--wp--preset--spacing--25);

	/* Lets longer-than-designed copy wrap instead of overflowing the nowrap row. */
	min-inline-size: 0;
}

.wp-block-group.plans-summary-bar__text {
	gap: var(--wp--preset--spacing--20);
}

/* The plan's "×" (built by plan-select.js: loose markup inside core/group
   is flagged as invalid). The two
   strokes are gradients, same "×" as plan-card's own. */
.plans-summary-bar__clear {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: var(--wp--custom--border--button) solid currentcolor;
	inline-size: var(--wp--custom--control--min-target);
	block-size: var(--wp--custom--control--min-target);
	border-radius: 50%;
	background-color: var(--wp--preset--color--background-primary);
	background-image:
		linear-gradient(45deg, transparent calc(50% - 1px), currentcolor 0 calc(50% + 1px), transparent 0),
		linear-gradient(-45deg, transparent calc(50% - 1px), currentcolor 0 calc(50% + 1px), transparent 0);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40% 40%;
	color: var(--wp--preset--color--text-primary);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--hover),
		color var(--wp--custom--transition--hover);
}

.plans-summary-bar__clear:hover {
	background-color: var(--wp--preset--color--background-inverse);
	color: var(--wp--preset--color--text-inverse);
}

.plans-summary-bar__clear:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Both set `display`, which beats the UA `[hidden]` rule plan-select.js relies on. */
.plans-summary-bar__accelerators[hidden],
.plans-summary-bar .wp-block-button[hidden] {
	display: none;
}

/* Chosen accelerators: their icons overlapped, then "+ N aceleradores". */
.plans-summary-bar__accelerators {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.plans-summary-bar__accelerator-icons {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plans-summary-bar__accelerator-icons li + li {
	margin-inline-start: -10px;
}

.plans-summary-bar__accelerator-icons img {
	display: block;
	inline-size: 40px;
	block-size: 40px;
	padding: 6px;
	border: var(--wp--custom--border--button) solid var(--wp--preset--color--border-default);
	border-radius: 50%;
	background-color: var(--wp--preset--color--background-primary);
}

@media (prefers-reduced-motion: no-preference) {

	.plans-summary-bar__accelerator-icons img {
		animation: plans-summary-icon-in var(--wp--custom--transition--hover);
	}
}

@keyframes plans-summary-icon-in {

	from {
		opacity: 0;
		scale: 0.8;
	}
}

.plans-summary-bar__accelerator-count {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--text-primary);
}

/*
 * Both lines run tighter than the root 1.5: the bar is 83px tall, which
 * only works as a two-line label at ~1.3 over 16px padding. Element-qualified
 * so `margin: 0` clears the paragraph default regardless of load order.
 */
p.plans-summary-bar__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
}

p.plans-summary-bar__subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.3;
	color: var(--wp--preset--color--text-secondary);
}

/*
 * Floating state. Two classes plus the element qualifier: core's
 * `.is-layout-constrained > :where(…)` caps children at contentSize, and
 * this bar is wider on purpose (the same load-order tie as above).
 */
.wp-block-group.plans-summary-bar.is-floating {
	position: fixed;
	inset-inline: 0;
	inset-block: auto var(--wp--preset--spacing--30);
	z-index: var(--wp--custom--z-index--summary-bar);
	inline-size: min(
		var(--wp--custom--width--summary-bar),
		calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right))
	);
	max-inline-size: none;
	margin-block: 0;
	margin-inline: auto;
	box-shadow: var(--wp--preset--shadow--card-hover);
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-group.plans-summary-bar.is-floating {
		animation: plans-summary-bar-in var(--wp--custom--transition--reveal);
		transition: transform var(--wp--custom--transition--reveal);
	}
}

@keyframes plans-summary-bar-in {

	from {
		transform: translateY(calc(100% + var(--wp--preset--spacing--30)));
	}
}

@media (min-width: 768px) {

	.wp-block-group.plans-summary-bar.is-floating {
		flex-wrap: nowrap;
	}
}

/*
 * Compact floating layout below 768px: smaller accelerator icons and the
 * two buttons share one row, so the bar stays a strip instead of covering half
 * the screen.
 */
@media (max-width: 767.98px) {

	.wp-block-group.plans-summary-bar.is-floating {
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--25);
	}

	.plans-summary-bar__accelerator-icons img {
		inline-size: 32px;
		block-size: 32px;
		padding: 4px;
	}

	/* No room beside the plan's lines; the icons carry it on their own. */
	.plans-summary-bar__accelerator-count {
		display: none;
	}

	.plans-summary-bar.is-floating > .wp-block-buttons {
		flex-wrap: nowrap;
		inline-size: 100%;
		gap: var(--wp--preset--spacing--20);
	}

	.plans-summary-bar.is-floating > .wp-block-buttons > .wp-block-button {
		flex: 1 1 0;
	}

	.plans-summary-bar.is-floating .wp-block-button__link {
		inline-size: 100%;
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/*
 * Page openings without a banner.
 *
 * Every page's H1 sits on one grid line (ink at y≈323). A banner page
 * reaches that line through its own panel padding. ABOUT US and PLANS open
 * on plain type, so nothing produces it and the title lands 64px high.
 *
 * The offset is that measured difference end to end, not a restatement of the
 * chrome above it: the header parts, the site-block gap and the heading's own
 * line box each contribute, and a rule per contributor would be three more
 * things to keep in sync.
 *
 * ANY new page that opens on a heading instead of a hero panel takes this
 * class. Do not measure it again per page.
 */
.is-page-opening {
	padding-block-start: var(--wp--custom--page--opening-offset);
}

/* about-support (ABOUT US): a 16px body and an 867x622 crop, against
   text-image's own 18px and uncropped defaults;
   the 45px title comes from its existing is-title-lg modifier. Page-scoped so
   home-technology.php, the same composition on HOME, stays untouched. */
.about-support .text-image__description {
	font-size: var(--wp--preset--font-size--body-sm);
}

.about-support .text-image__media img {
	aspect-ratio: 867 / 622;
	object-fit: cover;
}

/*
 * INTEGRACIONES channel managers (patterns/integrations-channel-managers.php):
 * the design leaves ~132px between the hero's cta-pair and this section's
 * image, where the page template's spacing--65 section gap resolves to
 * ~200px at desktop. spacing--70 (120px) on this section's own top margin
 * replaces that gap; the class qualifier out-specifies core's `> * + *`
 * layout margin. Mobile keeps the fluid template gap.
 */
@media (min-width: 768px) {

	main > .wp-block-group.alignfull.integrations-channel-managers {
		margin-block-start: var(--wp--preset--spacing--70);
	}
}

/*
 * Master video, QUIÉNES SOMOS (patterns/master-video.php).
 * 16:9 at the content width on desktop (1474px, square corners);
 * edge to edge on mobile, so the full-width group drops its root padding.
 */
.master-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--background-inverse);
}

@media (max-width: 767.98px) {

	.wp-block-group.alignfull.master-video {
		padding-inline: 0;
	}
}

/*
 * "¿No sabes por dónde empezar?" (FEATURES, PLANS): the card
 * row (1720px = wideSize) overhangs the 1616px panel. The row grows to
 * min(wideSize, viewport - gutters), never narrower than the panel's own
 * content box; the 3-up grid starts at 900px (blocks/plan-card/style.css).
 */
@media (min-width: 900px) {

	.alignfull.is-surface-dark.wp-block-group.is-cards-bleed {
		overflow: visible;
	}

	.wp-block-group.is-cards-bleed > .wp-block-group.is-layout-grid {
		max-width: none;
		margin-inline: min(0px, 50% - min(var(--wp--style--global--wide-size) / 2, 50vw - var(--wp--style--root--padding-left)));
	}
}

/* PLANS: the EXTRA rows share the tallest row's height from 768px; stacked, each keeps its own. */
@media (min-width: 768px) {

	.wp-block-group.plans-accelerators__rows {
		grid-auto-rows: 1fr;
	}
}

.plans-accelerators__rows > .icon-row {
	width: 100%;
}

/*
 * ABOUT US statements: the sentence sits centred in the screen with white
 * above and below it, a full screen on desktop and 70% of it on mobile.
 */
.wp-block-group.is-statement {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--wp--custom--statement--min-height-mobile);
}

@media (min-width: 768px) {

	.wp-block-group.is-statement {
		min-height: var(--wp--custom--statement--min-height);
	}
}

/*
 * form-hero (BOOK A DEMO / QUICK ENQUIRY): the bordered white card holding
 * the HubSpot embed, over the line-art street. The card paints white so it
 * covers the street behind it.
 */
.form-hero {
	overflow-x: clip;
}

.wp-block-group.form-hero__stage {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-group.form-hero__card {
	position: relative;
	z-index: 1;
	max-inline-size: var(--wp--custom--width--form-card);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--35);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--panel-mobile);
	background-color: var(--wp--preset--color--background-primary);
}

/*
 * The street is one drawing placed five times, so it is two pseudo-elements,
 * not five images in the editor. Coordinates are boxes on a 1920px canvas,
 * measured from the top copy (y 681, 116px below the card's top edge) and
 * multiplied by `street-unit` so the street scales with the viewport.
 *
 * ::before holds the two mirrored copies (boxes at x 100 and x 617), so its
 * positions are mirrored too: 1920 - x - 1112. ::after holds the upright ones
 * (x 48, x 893 and x 645). Its clip hides the drawing left of x 196 and right
 * of x 1820.
 *
 * The stage is at least as tall as the street, so the gap below it is
 * measured from the drawing, not from the card. The card is at least as tall
 * as QUICK ENQUIRY's (692px), so it always covers the stretch where the
 * lower copies overlap.
 */
@media (min-width: 768px) {

	.wp-block-group.form-hero__card {
		padding-block: var(--wp--preset--spacing--50);
		padding-inline: var(--wp--preset--spacing--55);
		border-radius: var(--wp--custom--radius--form-card);
		min-block-size: calc(var(--wp--custom--form-hero--street-unit) * 692);
	}

	.wp-block-group.form-hero__stage {
		min-block-size: calc(var(--wp--custom--form-hero--street-unit) * 727);
	}

	.form-hero__stage::before,
	.form-hero__stage::after {
		--u: var(--wp--custom--form-hero--street-unit);

		content: "";
		position: absolute;
		inset-block-start: calc(var(--u) * 116);
		inset-inline-start: 50%;
		inline-size: 100vw;
		block-size: calc(var(--u) * 611);
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.form-hero__stage::before {
		background-image:
			url(../../img/form-hero-street-line.svg),
			url(../../img/form-hero-street-line.svg);
		background-size: calc(var(--u) * 1112) calc(var(--u) * 261);
		background-position:
			calc(var(--u) * 708) 0,
			calc(var(--u) * 190.5) calc(var(--u) * 4);
		transform: translateX(-50%) scaleX(-1);
	}

	.form-hero__stage::after {
		background-image:
			url(../../img/form-hero-street-line.svg),
			url(../../img/form-hero-street-line.svg),
			url(../../img/form-hero-street-line.svg);
		background-size:
			calc(var(--u) * 1112) calc(var(--u) * 261),
			calc(var(--u) * 1112) calc(var(--u) * 261),
			calc(var(--u) * 1112) calc(var(--u) * 258);
		background-position:
			calc(var(--u) * 48) calc(var(--u) * 318),
			calc(var(--u) * 893) calc(var(--u) * 187.5),
			calc(var(--u) * 645) calc(var(--u) * 353);
		transform: translateX(-50%);
		clip-path: inset(0 calc(var(--u) * 100) 0 calc(var(--u) * 196));
	}
}

/*
 * BOOK A DEMO: the HubSpot scheduler draws its own card inside its iframe, so
 * this one frames only the skeleton and the fallback, and fades out once the
 * scheduler is ready (hubspot-embed `is-ready`).
 */
.wp-block-group.form-hero__card.form-hero__card--bare {
	padding: 0;
	overflow: clip;
	transition:
		border-color var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base);
}

.wp-block-group.form-hero__card.form-hero__card--bare:has(.wp-block-miraigo-hubspot-embed.is-ready) {
	border-color: transparent;
	background-color: transparent;
}

/*
 * form-cta-panel (BOOK A DEMO / QUICK ENQUIRY): 270px tall, copy 59px below the top edge, button 41px above the bottom.
 */
.alignfull.is-surface-dark.wp-block-group.form-cta-panel {
	padding-block: var(--wp--preset--spacing--55) var(--wp--preset--spacing--50);
}

p.form-cta-panel__copy {
	max-inline-size: var(--wp--custom--width--form-cta-copy);
	margin-inline: auto;
	line-height: 1.1;
	font-weight: 500;
}