/*
 * ALMC — the v2 blocks, wearing the /planes scene.
 *
 * WHERE THE LOOK COMES FROM. Not from this file's imagination: every token in
 * the block below is a literal read out of the Radial12 portal's own selling
 * page, which is the surface Nicolás named as the one this page must feel like
 * — apps/radial12-portal/styles/sales.css and the palette it imports from
 * packages/design/css/tokens.css. The scene it builds there is a dark
 * green-black hero with the video as the protagonist, an uppercase
 * letter-spaced gold eyebrow over a white headline whose second thought lands
 * in gold, one gold pill action, a row of proof chips, the house figures as
 * large numerals, and then cream rooms. Every one of those rooms used to open
 * on a gold eyebrow over a green-into-gold rule; on 2026-09-05 Nicolás rejected
 * that decoration — a room opens on its heading and the rule is gone. The rest
 * of the scene is what is rebuilt here, for
 * WordPress, on this site's own Elementor kit.
 *
 * WHAT THIS FILE STILL MAY NOT DO, and the guards in tests/test-elegir-v2.php
 * that hold it to that — none of them was weakened to write this:
 *
 *   no `box-shadow`      the kit's `box_almo` family already carries the card
 *                        shadow of this whole site, and re-declaring it here is
 *                        how a page stops moving when the kit moves. Where the
 *                        reference lights an object rather than seating a card
 *                        — the gold action's bloom — the light is a
 *                        `filter: drop-shadow`, which is a lit object and not a
 *                        card seat, and it is named here so it is never
 *                        mistaken for a way around that rule.
 *   no `font-family`     the kit already sets Poppins on h1/h2/h3 and Open Sans
 *                        on the body, which is the reference's own pairing.
 *                        Nothing here names a typeface.
 *   #5B9069 never        the kit's own link green is 3.72:1 on white and is
 *                        banned behind text; it appears in this file exactly
 *                        once, in this sentence.
 *   every `color:` judged  each one is preceded by its own
 *                        `almc-registro:contrast <ink> on <ground>` line naming
 *                        every ground it really paints on, and the suite fails
 *                        the file if any pair is under WCAG 4.5:1.
 *
 * SPECIFICITY. The kit paints `.elementor-kit-100015515 a { color: … }` at
 * (0,1,1), so every rule here that paints an <a> carries two classes.
 *
 * THE GROUNDS, named once so the annotations below can be read against them:
 *
 *   #17291F   the hero, the reading rail and the closing scene: the opaque base
 *             this file paints over the kit's `b_hard_green` band. It falls to
 *             #101E18 in the middle of the sweep, which is darker still, so no
 *             ink on it is ever judged against a lighter ground than it has.
 *   #17482F   the same scene under its brightest green highlight (0.22 alpha
 *             of #18B56A over that base). Every ink on a dark scene is judged
 *             against both.
 *   #FFFCEF   the cream room: the brand's gold-50 thinned into white, the
 *             reference's own `--brand-page`.
 *   #FFF9E4   the deeper cream, for the room that has to separate from it.
 *   #FFFFFF   the white room and every `b_white` card.
 */

/* ---------------------------------------------------------------- the wrap. */

.almc-v2 {
	/* The reference's palette, literal. packages/design/css/tokens.css:3-17. */
	--almc-p-verde-900: #14231C;
	--almc-p-verde-700: #006B3C;
	--almc-p-verde-500: #008F4C;
	--almc-p-verde-400: #18B56A;
	--almc-p-verde-50: #DCF6E8;
	--almc-p-oro-300: #FFD968;
	--almc-p-oro-400: #E7B327;
	--almc-p-oro-700: #8A5A00;

	/* The scene's own grounds and the inks the reference puts on them.
	   sales.css:74-84 (`--pv-manual-*`). */
	--almc-p-noche: #17291F;
	--almc-p-noche-luz: #17482F;
	--almc-p-hero-tinta: #FFFFFF;
	--almc-p-hero-titulo: #EEF4EF;
	--almc-p-hero-lead: #CDD8D0;
	--almc-p-hero-mudo: #B9C6BD;

	/* The cream rhythm. sales.css:129-143. */
	--almc-p-crema: #FFFCEF;
	--almc-p-crema-honda: #FFF9E4;

	/*
	 * THE BRAND'S BLUE, and it is the only blue on this page. #084FC7 was a
	 * generic "radial12 blue" nobody minted: the manual
	 * (apps/panel-almc/backend/brand_assets/radial12/manual) fixes Azul Radial
	 * #4B629B, the navy #2A3A63 under it and the niebla #BCC7D7 over it, and
	 * those are the three written here. Blue on these surfaces is an
	 * information colour and never an identity: no logo, no name, no wordmark.
	 */
	--almc-p-azul: #4B629B;
	--almc-p-azul-noche: #2A3A63;
	--almc-p-azul-niebla: #BCC7D7;

	/* This site's own ink, from the kit. */
	--almc-p-tinta: #363636;
	--almc-p-texto: #474747;
	--almc-p-mudo: #5F5F5F;

	/* Geometry: the kit's 20px card radius, the reference's pill, and a fluid
	   rhythm that leaves nothing narrow between 1440 and 2560. */
	--almc-p-radio: 20px;
	--almc-p-radio-md: 14px;
	--almc-p-pastilla: 999px;
	--almc-p-aire: clamp(16px, 4vw, 64px);

	/*
	 * THE PAGE IS AS WIDE AS THE SCREEN IS, up to a limit that is a limit and
	 * not a habit. A fixed 1600 left 38% of a 2560 display empty on either
	 * side of every room; 92vw keeps the air proportional to the glass and
	 * 1760 stops a line of text from ever running past what an eye tracks.
	 * The Elementor containers carry the same figure in `boxed_width`.
	 */
	--almc-p-ancho: min(1760px, 92vw);

	max-width: min(100% - 2 * var(--almc-p-aire), var(--almc-p-ancho));
	margin-inline: auto;
}

/*
 * A scene, not a card: the two dark rooms run the full width of the container
 * Elementor gives them and hold their own inner wrap. Everything else keeps the
 * measured column above.
 */
.almc-v2-hero,
.almc-v2-cierre {
	max-width: none;
	width: 100%;
}

.almc-v2-wrap {
	width: min(100% - 2 * var(--almc-p-aire), var(--almc-p-ancho));
	margin-inline: auto;
}

/* ---------------------------------------------------------------- the hero. */

/*
 * The reference's opening scene (sales.css:191-224): four corner lights over a
 * deep green-black base, over the kit's own `b_hard_green` band the page stands
 * on. The base layer is opaque on purpose: an alpha ground cannot be judged
 * against a number, and every ink in this scene has to be. So the ground here
 * is exactly #17291F falling to #101E18, and #17482F where the brightest green
 * light crosses it — the two grounds every annotation below names.
 */
.almc-v2-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px);
	background-image:
		radial-gradient(circle farthest-side at 0% 0%, rgba(0, 107, 60, 0.34), transparent 70%),
		radial-gradient(circle farthest-side at 100% 0%, rgba(24, 181, 106, 0.22), transparent 62%),
		radial-gradient(circle farthest-side at 100% 100%, rgba(231, 179, 39, 0.14), transparent 58%),
		linear-gradient(160deg, #17291F 0%, #101E18 55%, #17291F 100%);
}

.almc-v2-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 52px);
	align-items: center;
}

@media (min-width: 1024px) {
	/* The video is the protagonist, so it takes the wider track. */
	.almc-v2-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}

}

.almc-v2-hero__say {
	display: grid;
	gap: 20px;
	align-content: start;
	min-width: 0;
}

/* The action stands on its own line, at its own width — never stretched to the
   column, which is what turns a pill into a slab. */
.almc-v2-hero__act {
	display: flex;
	margin: 4px 0 0;
}

/*
 * almc-registro:contrast #FFD968 on #17291F, #17482F
 * The eyebrow, the reference's `.hero .claim` (sales.css:369-379): uppercase,
 * wide tracking, the brand's 300 gold on the dark scene — 12.85:1 and 6.63:1.
 */
.almc-v2-hero .almc-v2-eyebrow {
	margin: 0;
	color: var(--almc-p-oro-300);
	font-size: clamp(13px, 1.1vw, 17px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * almc-registro:contrast #EEF4EF on #17291F, #101E18, #17482F
 * The two-tone display headline, the reference's signature (sales.css:381-392):
 * the whole first thought in the /planes ink, heavy, leading just under one.
 *
 * THE SELECTOR IS THE FIX, AND THE COLOUR NEVER WAS. The kit paints
 * `.elementor-kit-100015515 h1 { color: … }` at (0,1,1); `.almc-v2-hero__title`
 * is (0,1,0), so on the dark scene the kit's dark heading ink won and the first
 * line of the headline was all but invisible — seen in Chrome on
 * /unirme-v2/?ver=comprador. Naming the element beside the class is (0,2,1),
 * which beats the kit outright and needs no `!important`.
 */
.almc-v2-hero h1.almc-v2-hero__title {
	margin: 0;
	color: var(--almc-p-hero-titulo);
	font-size: clamp(30px, 4.4vw, 60px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/*
 * almc-registro:contrast #FFD968 on #17291F, #101E18, #17482F
 * and the phrase that matters dropped onto its own line in gold
 * (sales.css:393-397). Same two classes, for the same reason as the line above.
 */
.almc-v2-hero h1.almc-v2-hero__title em {
	display: block;
	font-style: normal;
	color: var(--almc-p-oro-300);
}

/*
 * almc-registro:contrast #CDD8D0 on #17291F, #17482F
 * One plain sentence under the headline (sales.css:399-405): 9.72:1 and 7.13:1.
 */
.almc-v2-hero__sub {
	margin: 0;
	max-width: 46ch;
	color: var(--almc-p-hero-lead);
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.6;
}

/* The proof chips: the reference's `.pv-checks` row (sales.css:442-467). */
.almc-v2-hero__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * almc-registro:contrast #CDD8D0 on #17291F, #17482F
 * Each chip's own words on the scene: 9.72:1 and 7.13:1.
 */
.almc-v2-hero__benefits li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--almc-p-hero-lead);
	font-size: 15px;
	font-weight: 600;
}

/*
 * almc-registro:contrast #14231C on #FFD968
 * The chip's mark: the brand's 300 gold disc with the scene's own darkest green
 * inside it — 12.85:1, where a gold ink on gold would have been 3.44:1.
 */
.almc-v2-hero__benefits .almc-v2-ico {
	width: 22px;
	height: 22px;
	background: var(--almc-p-oro-300);
	color: var(--almc-p-verde-900);
}

.almc-v2-hero__benefits .almc-v2-ico svg {
	width: 13px;
	height: 13px;
}

/* The house figures, as the reference sets them: a numeral over a small
   uppercase label (sales.css:509-546) — as TILES beside the claim, never as
   two full-width bands with one figure each and a hand's width of nothing
   under it. They close the copy column; they are not a room of their own. */
.almc-v2-hero__figures {
	margin-block-start: 4px;
}

.almc-v2-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.almc-v2-figures li {
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 1px solid rgba(255, 217, 104, 0.55);
	border-radius: var(--almc-p-radio-md);
	background-image: linear-gradient(180deg, #17291F, #101E18);
}

/*
 * almc-registro:contrast #FFFFFF on #17291F, #17482F
 * The numeral itself, read from across the room: 15.22:1 and 10.45:1.
 */
.almc-v2-figures strong {
	color: var(--almc-p-hero-tinta);
	font-size: clamp(20px, 1.7vw, 28px);
	font-weight: 800;
	line-height: 1;
}

/*
 * almc-registro:contrast #B9C6BD on #17291F, #17482F
 * Its label, uppercase and small, under it: 7.99:1 and 5.85:1.
 */
.almc-v2-figures span {
	color: var(--almc-p-hero-mudo);
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The invitation, square to the reader — never tilted, never a decorative
   floating cover (sales.css:266-292). The card itself is the kit's own
   `box_almo b_white`; only the frame it holds is stated here, and the kit's
   30px of padding is thinned so the video, not its mount, is the object. */
.almc-v2-hero__watch {
	position: relative;
	margin: 0;
	padding: 12px;
}

.almc-v2-hero__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
}

.almc-v2-hero__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * almc-registro:contrast #8A5A00 on #FFFFFF
 * "Míralo primero", at the head of the white invitation card: the brand's 700
 * gold, 5.93:1. The 300 gold of the dark scene would be 1.55:1 here.
 */
.almc-v2-hero__cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--almc-p-oro-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * almc-registro:contrast #5F5F5F on #FFFFFF
 * The caption and the running time Vimeo itself reports, inside the white
 * card: 6.39:1.
 */
.almc-v2-hero__watch figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 12px;
	color: var(--almc-p-mudo);
	font-size: 14px;
}

/* ------------------------------------------------------------- the actions. */

/*
 * almc-registro:contrast #FFFFFF on #40724D
 * One button shape for every block: white on the kit's dark green, 5.63:1.
 * (0,2,0) so it beats the kit's own `a` colour rule.
 */
.almc-v2 .almc-v2-btn,
.almc-v2.almc-v2-barra .almc-v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: 10px 0 10px 0;
	background: var(--e-global-color-331a10e);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/*
 * almc-registro:contrast #1E2F22 on #FFD968, #E7B327
 * The one gold action of the scene, the reference's struck metal
 * (sales.css:1051-1062): a lit top stop, a deeper bottom one, and the kit's own
 * dark green as its ink — 10.36:1 on the light stop and 7.32:1 on the dark one,
 * the same pair the "El más elegido" mark already carries. The reference puts
 * its 700 gold on this face; measured here that is 4.34:1 and 3.07:1, under the
 * floor, and gold behind small words is exactly what Nicolás's rule forbids —
 * so the metal is the reference's and the ink is this site's.
 */
.almc-v2 .almc-v2-btn--oro {
	min-height: 60px;
	padding-inline: 34px;
	background-color: #E7B327;
	background-image: linear-gradient(180deg, #FFD968 0%, #EFC13F 55%, #E7B327 100%);
	color: #1E2F22;
	font-size: 17px;
	font-weight: 700;
	/* The reference lights this button rather than seating it: a bloom under a
	   lit object, never the card shadow the kit already owns. */
	filter: drop-shadow(0 10px 22px rgba(231, 179, 39, 0.34));
	transition: filter 160ms ease, transform 160ms ease;
}

.almc-v2 .almc-v2-btn--oro:hover,
.almc-v2 .almc-v2-btn--oro:focus-visible {
	transform: translateY(-2px);
	filter: drop-shadow(0 14px 30px rgba(231, 179, 39, 0.46));
}

@media (prefers-reduced-motion: reduce) {
	.almc-v2 .almc-v2-btn--oro {
		transition: none;
	}

	.almc-v2 .almc-v2-btn--oro:hover,
	.almc-v2 .almc-v2-btn--oro:focus-visible {
		transform: none;
	}
}

/*
 * almc-registro:contrast #FFFFFF on #40724D
 * The label stays lit through every interaction state. This Elementor kit
 * repaints `a:focus`/`a:active` in its own link colour, which on this dark
 * green face reads as no label at all -- measured live on
 * /unirme-v2/?ver=comprador: "Elegir este programa" vanished the instant the
 * card action was clicked, and stayed gone while the click's own navigation
 * was pending. Naming the two classes plus the state keeps (0,3,0), which
 * already beats the kit's `a:focus` rule outright, so the fix needs no
 * `!important`.
 */
.almc-v2 .almc-v2-btn:focus,
.almc-v2 .almc-v2-btn:active,
.almc-v2 .almc-v2-btn:focus-visible {
	color: #FFFFFF;
}

.almc-v2 .almc-v2-btn:focus-visible {
	outline: 2px solid var(--almc-p-oro-400);
	outline-offset: 2px;
}

/*
 * almc-registro:contrast #1E2F22 on #FFD968, #E7B327
 * The gold action's own ink, restated after the shared rule above (same
 * specificity, later in source) so the hero and bar buttons keep their dark
 * ink on click/focus instead of inheriting the plain button's white.
 */
.almc-v2 .almc-v2-btn--oro:focus,
.almc-v2 .almc-v2-btn--oro:active,
.almc-v2 .almc-v2-btn--oro:focus-visible {
	color: #1E2F22;
}

/* -------------------------------------------------------- the cream rooms. */

/*
 * Every room is opened the way the reference opens one (sales.css:851-878): an
 * uppercase gold eyebrow with the brand's green-into-gold rule under it, then
 * the heading. It is what makes a section read as this brand's rather than as a
 * heading.
 */

/*
 * almc-registro:contrast #8A5A00 on #FFFCEF, #FFF9E4, #FFFFFF
 * The eyebrow on a cream or a white room: the brand's 700 gold, 5.77:1, 5.63:1
 * and 5.93:1. The 400 and the 500 paint rules and marks, never words.
 */
.almc-v2-eyebrow {
	margin: 0 0 10px;
	color: var(--almc-p-oro-700);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.almc-v2-head {
	margin: 0 0 28px;
	max-width: 62ch;
}

.almc-v2-head--centro {
	margin-inline: auto;
	text-align: center;
}

.almc-v2-programas__title,
.almc-v2-pasos__title,
.almc-v2-faq__title,
.almc-v2-incluye__title,
.almc-v2-mapa__title,
.almc-v2-etapas__title {
	text-wrap: balance;
	margin: 0;
	font-size: clamp(24px, 2.4vw, 38px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

/*
 * almc-registro:contrast #474747 on #FFFCEF, #FFF9E4, #FFFFFF
 * The one plain line a room is allowed under its heading: 8.40:1, 8.19:1 and
 * 8.59:1.
 */
.almc-v2-head p {
	margin: 10px 0 0;
	color: var(--almc-p-texto);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.55;
}

/*
 * almc-registro:contrast #1E2F22 on #FFFCEF
 * The name the three programas share, printed once for the room instead of
 * three times across the cards: the kit's own heading ink on the cream page,
 * 13.75:1. It is a line and not a heading — the room already has one.
 */
.almc-v2-programas__name {
	margin: 12px 0 0;
	color: var(--e-global-color-accent);
	font-size: clamp(17px, 1.4vw, 22px);
	font-weight: 700;
	line-height: 1.2;
}

/*
 * almc-registro:contrast #474747 on #FFFCEF
 * The two facts the three programas share, folded into one line: 8.40:1. They
 * were two grey lines under the heading saying one thing between them.
 */
.almc-v2-programas__lead {
	margin: 8px 0 0;
	color: var(--almc-p-texto);
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.5;
}

/* --------------------------------------------------------------- the cards. */

.almc-v2-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media (min-width: 700px) {
	.almc-v2-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The three across only where three really fit. */
@media (min-width: 1180px) {
	.almc-v2-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The kit's `box_almo` is 30px on every side, which around four short lines is
 * a card with an empty half. The padding is proportional to what is really
 * inside — the same thinning `.almc-v2-etapa` already does.
 */
.almc-v2-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px;
}

/* NO MARK ON A CARD AT ALL. "El más elegido" was a gold pill, then one small
   uppercase word; Nicolás rejected the claim itself on 2026-09-05, so the rule
   that painted it is gone with the markup rather than left here unused. */

/* One word now: what this card is, and never the name the room already said. */
.almc-v2-card__name {
	text-wrap: balance;
	margin: 0;
	font-size: clamp(22px, 1.8vw, 28px);
	line-height: 1.15;
}

.almc-v2-card__who {
	margin: 0;
}

.almc-v2-card__value {
	padding-top: 2px;
}

/*
 * The value on one visual line: the struck list figure beside "Tu valor" and
 * the figure really charged, baseline to baseline. It was three stacked rows,
 * which put a band of air between the name and the action; and the
 * strikethrough is the hook, which only works next to what is charged.
 */
.almc-v2-card__value .almc-oferta__one {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
}

.almc-v2-card__value .almc-oferta__one-list {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.almc-v2-card__value .almc-oferta__one-list-label {
	font-size: 12px;
}

/* The charged figure is the one thing on the card read from across the room:
   the reference's own KPI numeral, tight and tabular (sales.css:1749-1760). */
.almc-v2-card__value .almc-oferta__one-amount {
	display: inline-block;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.almc-v2-card__value .almc-oferta__one-label {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The list value is struck where it is shown, and it is only shown when there
 * really is one above the charge — that decision is almc-oferta's. */
.almc-v2-card__value .almc-oferta__one-list s,
.almc-v2-card__value .almc-oferta__struck {
	font-size: 15px;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/*
 * almc-registro:contrast #5F5F5F on #FFFFFF
 * The muted line inside a `b_white` card: 6.39:1.
 */
.almc-v2-card__who,
.almc-v2-card__value .almc-oferta__one-list {
	color: var(--e-global-color-891b0f5);
}

/* The action stands on the card's floor, so the three of them line up whatever
   the mark adds to the one card that carries it. */
.almc-v2-card__action {
	width: 100%;
	margin-top: auto;
}

/* ------------------------------------------------------ the numbered steps. */

.almc-v2-pasos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	counter-reset: none;
}

/* One compact row of three from the first width where three fit, one column
   under it. `auto-fit` used to leave a fourth empty track's worth of air on a
   wide screen. */
@media (min-width: 900px) {
	.almc-v2-pasos__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The kit's `box_almo` is 30px of padding on every side, which around one short
 * line is a card with an empty bottom half. The padding is proportional to what
 * is really inside — the same thinning `.almc-v2-hero__watch` already does.
 */
.almc-v2-pasos__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
}

.almc-v2-pasos__say {
	font-weight: 600;
	line-height: 1.35;
}

/*
 * almc-registro:contrast #FFFFFF on #4B629B
 * The step number, in the brand's Azul Radial: the mark is a circle, the number
 * inside it stays exactly as legible — 5.97:1.
 */
.almc-v2-pasos__n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--almc-p-pastilla);
	background: var(--almc-p-azul);
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
}

/* ---------------------------------------------------- what you are buying. */

/*
 * The instrument, laid out the way the reference lays it out
 * (sales.css:1320-1345): a dark reading rail on the left, the twelve axes on
 * the plate beside it, so the middle of the page is not one more run of white
 * panels.
 */
.almc-v2-mapa {
	display: grid;
	gap: 24px;
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.almc-v2-mapa {
		grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
	}
}

.almc-v2-mapa__rail {
	display: grid;
	gap: 12px;
	align-content: start;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--almc-p-radio);
	background-image:
		radial-gradient(circle farthest-side at 100% 0%, rgba(24, 181, 106, 0.22), transparent 70%),
		linear-gradient(160deg, #17291F 0%, #101E18 60%, #17291F 100%);
}

/*
 * almc-registro:contrast #FFFFFF on #17291F, #17482F
 * Its heading: 15.22:1 and 10.45:1.
 */
.almc-v2-mapa__rail .almc-v2-mapa__title {
	color: var(--almc-p-hero-tinta);
}

/*
 * almc-registro:contrast #CDD8D0 on #17291F, #17482F
 * The one line under it: 9.72:1 and 7.13:1.
 */
.almc-v2-mapa__note {
	margin: 8px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--almc-p-hero-lead);
	font-size: 14px;
	line-height: 1.45;
}

/*
 * THE INSTRUMENT, DRAWN. This was a grid of twelve words with an icon each —
 * "lo que compras" as a bullet list — and Nicolás rejected it on 2026-09-05:
 * what a person buys is a reading of their whole body on one instrument, and a
 * list is not an instrument. The plate below is what /planes puts in the same
 * place (apps/radial12-portal/components/sales/Radial12InventoryMap.tsx): the
 * twelve axes as spokes, the measured state closed in green, the projected one
 * in gold. mapa.php draws the SVG; not one of its values is written here.
 */
.almc-v2-mapa__figura {
	display: grid;
	gap: 16px;
	margin: 0;
	justify-items: center;
}

/* The stage the instrument scales inside. It is wider than the plate on
   purpose: mapa.php computes the viewBox from the twelve names themselves, and
   that box is wider than it is tall, so at 560 the wheel would have shrunk to
   pay for the label band. The wheel never outruns the column it sits in. */
.almc-v2-mapa__stage {
	width: 100%;
	max-width: 720px;
}

.almc-v2-mapa__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* The plate: rings and spokes are the dial, drawn in the brand's niebla so the
   two data figures are the only things on it with weight. */
.almc-v2-mapa__ring {
	fill: none;
	stroke: var(--almc-p-azul-niebla);
	stroke-width: 1;
}

.almc-v2-mapa__ring--rim {
	stroke: var(--almc-p-azul);
	stroke-width: 1.5;
}

.almc-v2-mapa__spoke {
	stroke: var(--almc-p-azul-niebla);
	stroke-width: 1;
}

.almc-v2-mapa__layer {
	stroke-width: 2.5;
	stroke-linejoin: round;
}

/* Where a person can get to: the scene's own gold, held behind. */
.almc-v2-mapa__layer--proyectado {
	fill: rgba(231, 179, 39, 0.18);
	stroke: var(--almc-p-oro-400);
}

/* Where a person is today: the brand's 700 green, the line that reads first. */
.almc-v2-mapa__layer--medido {
	fill: rgba(0, 107, 60, 0.16);
	stroke: var(--almc-p-verde-700);
}

.almc-v2-mapa__node {
	fill: var(--almc-p-verde-700);
	stroke: #FFFFFF;
	stroke-width: 1.5;
}

/*
 * almc-registro:contrast #363636 on #FFFFFF
 * The twelve names, and they are real text inside the SVG rather than a picture
 * of text: they grow with the reader's own type size and a screen reader
 * reaches them. The kit's own ink on the white card — 12.06:1.
 */
.almc-v2-mapa__label {
	fill: var(--almc-p-tinta);
	font-size: 17px;
	font-weight: 600;
}

/*
 * almc-registro:contrast #474747 on #FFFFFF
 * The key, saying which of the two figures is which — 8.59:1. Two words, in the
 * page's own reading size, because the drawing is unreadable without them.
 */
.almc-v2-mapa__clave {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	color: var(--almc-p-texto);
	font-size: 16px;
	font-weight: 600;
}

.almc-v2-mapa__clave li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.almc-v2-mapa__swatch {
	flex: none;
	width: 18px;
	height: 6px;
	border-radius: var(--almc-p-pastilla);
}

.almc-v2-mapa__swatch--medido {
	background: var(--almc-p-verde-700);
}

.almc-v2-mapa__swatch--proyectado {
	background: var(--almc-p-oro-400);
}

/*
 * almc-registro:contrast #474747 on #FFFFFF
 * The sentence that keeps the drawing from reading as somebody's result —
 * 8.59:1. It is the same line /planes carries under the same instrument, and it
 * is never trimmed.
 */
.almc-v2-mapa__pie {
	margin: 0;
	max-width: 56ch;
	color: var(--almc-p-texto);
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}

/* ------------------------------------------------------------- the etapas. */

/* One gradient thread over the sequence, the reference's `.case-rail-line`
   (sales.css:1453-1466). */
.almc-v2-etapas__rail {
	display: block;
	width: 100%;
	height: 3px;
	margin: 0 0 20px;
	border-radius: var(--almc-p-pastilla);
	opacity: 0.7;
	background-image: linear-gradient(90deg, var(--almc-p-verde-700), var(--almc-p-verde-400), var(--almc-p-oro-400), var(--almc-p-verde-700));
}

.almc-v2-etapas__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.almc-v2-etapas__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The position and the name on one line, with the padding cut to them. WHAT IS
 * NOT HERE: a line under each name saying what that etapa delivers. The etapas
 * are LearnDash courses and this install's three carry an empty excerpt and an
 * empty body — measured, not assumed — so there is nothing true to put there
 * and nothing is put there (rule 3).
 */
.almc-v2-etapa {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
}

/*
 * almc-registro:contrast #8A5A00 on #FFF1B8
 * The etapa's own position, on the brand's lightest gold — 4.86:1. It is a
 * position, never a count of anything already done.
 */
.almc-v2-etapa__n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--almc-p-pastilla);
	background: #FFF1B8;
	color: var(--almc-p-oro-700);
	font-size: 16px;
	font-weight: 800;
}

.almc-v2-etapa__name {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	text-wrap: balance;
}

/*
 * almc-registro:contrast #474747 on #FFFFFF
 * The etapa's own two facts, read off the catalogue: 8.59:1. A quiet line and
 * not a badge — it used to wear the card's gold pill, which is a decoration
 * built around two small numbers.
 */
.almc-v2-etapa__facts {
	display: block;
	color: var(--almc-p-texto);
	font-size: 13px;
	line-height: 1.35;
}

/*
 * almc-registro:contrast #474747 on #FFFCEF, #FFF9E4, #FFFFFF
 * The measured line that closes the band — the consultorías this programa's own
 * meta carries, never a figure typed here: 8.40:1, 8.19:1 and 8.59:1.
 */
.almc-v2-etapas__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
	color: var(--almc-p-texto);
	font-size: 15px;
	line-height: 1.45;
}

.almc-v2-etapas__meta .almc-v2-ico {
	width: 26px;
	height: 26px;
}

.almc-v2-etapas__meta .almc-v2-ico svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------- what it includes. */

.almc-v2-hero__benefits,
.almc-v2-incluye__list,
.almc-v2-figures {
	list-style: none;
	margin: 0;
	padding: 0;
}

.almc-v2-incluye__list {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.almc-v2-incluye__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

.almc-v2-incluye__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.almc-v2-incluye__list svg {
	flex: none;
}

/*
 * almc-registro:contrast #FFFFFF on #4B629B
 * The bullet mark for every checklist on this page — the hero's proof chips
 * override it with the scene's own gold — one Azul Radial circle, one white
 * stroke: 5.97:1.
 */
.almc-v2-ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--almc-p-azul);
	color: #FFFFFF;
}

.almc-v2-ico svg {
	width: 18px;
	height: 18px;
	margin-top: 0;
}

/* --------------------------------------------------------------- the FAQ. */

.almc-v2-faq__list {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin: 0;
}

@media (min-width: 900px) {
	.almc-v2-faq__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Two lines in a box: the padding is cut to them, and the answer is indented
   to the width of the mark so question and answer read as one block. */
.almc-v2-faq__row {
	padding: 14px 16px;
}

.almc-v2-faq__row dt {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	margin: 0 0 4px;
}

.almc-v2-faq__row dd {
	margin: 0;
	padding-inline-start: 42px;
	line-height: 1.45;
}

.almc-v2-gate,
.almc-v2-own {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/*
 * The room's last line, folded into the room: small, no box, no mark. It was a
 * full-width kit box with a calendar icon, which is a plate built around one
 * sentence.
 *
 * almc_registro_opciones_note() hands back one <div class="almc-oferta__note">
 * holding an inline <span> followed by almc-oferta's own block <p>, which
 * breaks the line in two with nothing here to stop it. Both inner wrappers are
 * put on one flex row here; almc-oferta's own markup is never touched.
 */
.almc-v2-note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	width: 100%;
	margin-top: 18px;
	font-size: 13px;
}

.almc-v2-note .almc-oferta__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.almc-v2-note .almc-oferta__country {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/*
 * almc-registro:contrast #40724D on #FFFCEF
 * "Cambiar país" on the room's own cream ground, now that the availability line
 * carries no white box under it: the kit's own dark green, 5.47:1. The kit's
 * global `button` rule paints a solid gradient pill on any bare <button>, which
 * almc-oferta's own control is — every sub-property that rule sets is reset
 * here rather than only backgrounded over.
 */
.almc-v2-note .almc-oferta__link {
	background: none;
	background-image: none;
	border: 0;
	border-radius: 0;
	min-height: 0;
	padding: 0;
	line-height: inherit;
	color: var(--e-global-color-331a10e);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* --------------------------------------------------------------- the close. */

/*
 * The bookend, not a second hero (sales.css:1961-1984): the same scene, one
 * heading, one action and the legal line.
 */
.almc-v2-cierre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(32px, 4vw, 56px);
	text-align: center;
	background-image:
		radial-gradient(circle farthest-side at 100% 0%, rgba(0, 107, 60, 0.30), transparent 68%),
		radial-gradient(circle farthest-side at 0% 100%, rgba(231, 179, 39, 0.12), transparent 60%),
		linear-gradient(200deg, #17291F 0%, #101E18 55%, #17291F 100%);
}

.almc-v2-cierre__box {
	display: grid;
	gap: 18px;
	justify-items: center;
}

/*
 * almc-registro:contrast #EEF4EF on #17291F, #101E18, #17482F
 * The closing title, in the same ink and by the same rule as the hero's: the
 * kit's `h2` is (0,1,1) and this was (0,1,0), so this heading went the same
 * dark green-grey on the same dark scene.
 */
.almc-v2-cierre h2.almc-v2-cierre__title {
	margin: 0;
	max-width: 24ch;
	color: var(--almc-p-hero-titulo);
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/*
 * almc-registro:contrast #B9C6BD on #17291F, #17482F
 * The fine print, at the foot of the page and at the legal minimum: 7.99:1 and
 * 5.85:1.
 */
.almc-v2-cierre__legal {
	margin: 6px auto 0;
	max-width: 72ch;
	color: var(--almc-p-hero-mudo);
	font-size: 13px;
	line-height: 1.5;
}

/*
 * almc-registro:contrast #FFD968 on #17291F, #17482F
 * The one link inside it: 12.85:1 and 6.63:1. Two classes, so the kit's own
 * link colour never reaches it.
 */
.almc-v2-cierre .almc-v2-cierre__legal a {
	color: var(--almc-p-oro-300);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- the fixed bar. */

/*
 * Three states and only one of them is a bar. The markup ships "pending", the
 * script moves it to "shown" only once the hero has scrolled past and the cards
 * are off screen, so with the script blocked there is never a bar — and never
 * one sitting over the cards it advertises.
 */
.almc-v2-barra[data-almc-bar="pending"],
.almc-v2-barra[data-almc-bar="hidden"] {
	display: none;
}

.almc-v2-barra[data-almc-bar="shown"] {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;
	z-index: 90;
	width: min(100% - 24px, 960px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--almc-p-pastilla);
	background-image: linear-gradient(180deg, #17291F, #101E18);
}

/*
 * THE ROOM THE BAR OCCUPIES, RESERVED ONCE AND NEVER TAKEN BACK.
 *
 * THE DEFECT THIS IS THE PERMANENT GUARD FOR. This padding used to ride a class
 * the script added and removed with the bar's own state. Adding 96px to the body
 * changes the document height; removing it clamps the scroll position by up to
 * that same 96px; a clamped scroll moves the cards back across the viewport
 * edge, which is the very question the observers and the scroll handler answer
 * — so the state flipped again, one full relayout of a fixed element per
 * animation frame, for as long as the reader stayed near the foot of the page.
 * That is the tab that stopped answering.
 *
 * The room is now reserved the moment a bar exists at all and is never released,
 * so no state change can alter the document's height again.
 */
body.almc-v2-bar-room {
	padding-bottom: 96px;
}

@media print {
	.almc-v2-barra {
		display: none;
	}
}

/* ----------------------------------------------- the column this stands in.

   MEASURED, NOT GUESSED. In his Chrome at a 1719px viewport on
   /unirme/?ver=comprador&diseno=2 the composition was 1180px wide at x=262 -
   centred, and using two thirds of the glass. The route's own root is
   `<main class="almc-reg">` (render.php), printed inside whatever column the
   page it is composed on hands it; there is no `.site-main` in this document
   at all, so hello-elementor's own 1140px content cap is not what holds it.
   Reading the emitted document was what settled that: the wrapper is not the
   theme's, and naming any single ancestor would be guessing at markup this
   module does not own.

   So the root does not trust its column. It states a width against the
   VIEWPORT and carries both halves of the centring on the same base -
   `margin-inline: calc(50% - 46vw)` against `width: 92vw` - which resolves to
   dead centre for any centred column, and to no shift at all once the column
   is already that wide. It is the same escape assets/registro-v2.css has
   carried since 7050fc1 for the sale stage, where a `left: 50%` breakout
   drifted because its two percentages resolved against two different bases.

   1760px is the ceiling: a line of text may not run past what an eye tracks.
   92vw keeps the air proportional to the glass instead of leaving 38% of a
   2560px display empty. registro-v2.php prints `almc-reg-v2-ancho` on the body
   of the one request a v2 composition draws, so nothing outside v2 moves.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	body.almc-reg-v2-ancho main.almc-reg {
		width: min(1760px, 92vw);
		max-width: 100vw;
		margin-inline: calc(50% - min(880px, 46vw));
	}
}

/* A theme wrapper that does cap its content - hello-elementor states 1140px on
   `body:not([class*=elementor-page-]) .site-main`, and these are virtual routes
   with no queried Elementor post, so the class that releases it is never
   printed - is released too, for the same one request. It is absent from this
   install's own document; the rule costs nothing and is the guard for the day
   a template puts it back. */

body.almc-reg-v2-ancho main.site-main,
body.almc-reg-v2-ancho .site-main {
	max-width: none;
	width: auto;
}