/*
 * ALMC Registro — the sale.
 *
 * The tokens, the grid, the buttons, the fields, the cards and the two-column
 * composition all come from the shared stylesheet, wp-content/mu-plugins/
 * almc-design/tokens.css (source: apps/programas-wp/design/tokens.css), which
 * render.php enqueues with its own ?ver= before get_header(). This file is the
 * delta: only what is this route's and nowhere else.
 *
 * Everything is scoped under .almc-reg so nothing here can leak into the theme
 * header, the Elementor footer or any other page. No CDN, no web font of its
 * own: the families are the kit's own Poppins and Open Sans with a real system
 * fallback stack.
 *
 * Two compositions, drawn separately: a stacked phone (price above the fold,
 * the form one thumb-scroll below it) and a desktop two-column sale (the sticky
 * programa summary on the left, the two steps on the right).
 */

.almc-reg {
	/* The two aliases tokens.css does not carry under these names. */
	--danger: var(--danger-ink);
	--warn-bg: var(--warm-100);

	/* No floating tab bar on this route: it does not need /cuenta/'s floor. */
	padding-bottom: var(--sp-7);
	background: transparent;
}

/* ------------------------------------------------------- page furniture. */

.almc-reg-wrap { min-width: 0; }

/* The thank-you page is the one screen that should be calm. */
.almc-reg--gracias {
	max-width: 720px;
	margin-inline: auto;
}

.almc-reg-head { margin-bottom: var(--sp-5); }
.almc-reg-head h1 { text-wrap: balance; }
.almc-reg-head > p { margin-top: var(--sp-2); color: var(--soft-text); }

.almc-reg-head__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--sp-4);
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
	box-shadow: var(--e2);
}

/* The one state signal on /registro/gracias/: paid is forest, waiting is warm. */
.almc-reg-head--ok .almc-reg-head__icon {
	background: var(--grad-forest);
	color: var(--on-dark);
	box-shadow: var(--e4);
}

.almc-reg-head--wait .almc-reg-head__icon {
	background: var(--grad-warm);
	color: var(--warm-700);
	box-shadow: 0 0 0 1px rgba(138, 74, 18, .16), var(--e2);
}

/*
 * The confirmation lands once: the mark scales in over 220 ms and the tick
 * draws itself in the same window. Nothing loops, nothing bounces — this is a
 * receipt, not a celebration, and prefers-reduced-motion turns it off entirely
 * through the block at the end of this file.
 */
@keyframes almc-reg-pop {
	from { transform: scale(.82); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

@keyframes almc-reg-draw {
	from { stroke-dashoffset: 40; }
	to   { stroke-dashoffset: 0; }
}

.almc-reg-head--ok .almc-reg-head__icon {
	animation: almc-reg-pop 220ms var(--ease-out) both;
}

.almc-reg-head--ok .almc-reg-head__icon path {
	stroke-dasharray: 40;
	animation: almc-reg-draw 240ms var(--ease-out) 60ms both;
}

.almc-reg-meta {
	margin-top: var(--sp-3);
	color: var(--soft-text);
	font-size: var(--fs-small);
}

/*
 * The confirmation band.
 *
 * The peak of the route was its flattest surface: a badge, a heading and a grey
 * caption on the page's own paper, while the catalogue that leads here opens on
 * a forest band and every panel of /mi-agenda/ opens on one too. The state now
 * paints the whole header rather than only the mark — forest when the order is
 * paid, the warm ground while it is waiting — on the same principle as
 * .almc-reg-hero. Only the two state modifiers get the band, so step 1, step 2
 * and the "no encontramos ese registro" header are untouched.
 */
.almc-reg-head--ok,
.almc-reg-head--wait {
	position: relative;
	overflow: hidden;
	padding: var(--sp-6) var(--sp-4);
	border-radius: var(--r-md);
	text-align: center;
}

.almc-reg-head--ok {
	background: var(--grad-forest);
	box-shadow: var(--e3);
}

.almc-reg-head--wait {
	background: var(--grad-warm);
	box-shadow: 0 0 0 1px var(--line-warm), var(--e2);
}

/* The watermark is the set's own molecule, never a photograph under a sentence. */
.almc-reg-head--ok::before,
.almc-reg-head--wait::before {
	content: "";
	position: absolute;
	top: -22px;
	right: -30px;
	width: 230px;
	height: 180px;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: .14;
	pointer-events: none;
}

.almc-reg-head--ok::before { background-image: var(--molecules-dark); }
.almc-reg-head--wait::before { background-image: var(--molecules-light); }

.almc-reg-head--ok > *,
.almc-reg-head--wait > * { position: relative; z-index: 1; }

/*
 * Ink on the band. `.almc-reg-head > p { color: var(--soft-text) }` above weighs
 * (0,1,1) and these weigh the same, so they win by coming later in this file —
 * the cascade problem ART-LOOP.md names, fixed where the component lives.
 */
.almc-reg-head--ok h1 { color: var(--on-dark); }
.almc-reg-head--ok > p { color: var(--on-dark); }
.almc-reg-head--wait h1 { color: var(--ink); }
.almc-reg-head--wait > p { color: var(--warm-700); }

/*
 * The mark used to be the band's own gradient laid on the band: forest on
 * forest, warm on warm, invisible either way. It gets a real ground of its own.
 */
.almc-reg-head--ok .almc-reg-head__icon {
	background: var(--card);
	color: var(--g-800);
	box-shadow: var(--e3);
}

.almc-reg-head--wait .almc-reg-head__icon {
	background: var(--card);
	color: var(--warm-700);
	box-shadow: 0 0 0 1px var(--line-warm), var(--e2);
}

/* The two facts of the receipt, each beside its mark, figures in tabular width. */
.almc-reg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	font-variant-numeric: tabular-nums;
}

/* The dot stays in the markup; the two marks are the separation now. */
.almc-reg-meta__sep { display: none; }

.almc-reg-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
}

.almc-reg-meta__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r-pill);
}

.almc-reg-head--ok .almc-reg-meta { color: var(--on-dark); }
.almc-reg-head--ok .almc-reg-meta__mark { background: var(--g-900); color: var(--on-dark); }
.almc-reg-head--wait .almc-reg-meta { color: var(--warm-700); }
.almc-reg-head--wait .almc-reg-meta__mark { background: var(--card); color: var(--warm-700); }

/* The retry action gets a panel of its own instead of a bare paragraph. */
.almc-reg-retry {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--warm-50);
	box-shadow: 0 0 0 1px var(--line-warm);
}

.almc-reg-section {
	margin: var(--sp-6) 0 var(--sp-4);
	font-family: var(--font-title);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--soft-text);
}

.almc-reg-icon { display: block; }

/* ------------------------------------------------------- the offer band. */

/*
 * The band that opens /registro/: the promise on the forest gradient, the
 * portrait sitting on its bottom edge, and the two counted figures. The
 * portrait column only exists when almc_registro_portrait() returned an image;
 * .almc-reg-hero--flat is the same band without it, correct at every width.
 */
.almc-reg-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--sp-4);
	margin-bottom: var(--gutter);
	padding: var(--sp-6) var(--sp-4) 0;
	border-radius: var(--r-md);
	background: var(--grad-forest);
	color: var(--on-dark);
	box-shadow: var(--e3);
}

.almc-reg-hero--flat { padding-bottom: var(--sp-6); }

.almc-reg-hero::before {
	content: "";
	position: absolute;
	top: -24px;
	right: -32px;
	width: 260px;
	height: 200px;
	background: var(--molecules-dark) no-repeat;
	background-size: contain;
	opacity: .16;
	pointer-events: none;
}

.almc-reg-hero__body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--sp-2);
	min-width: 0;
	padding-bottom: var(--sp-5);
}

.almc-reg-hero__eyebrow {
	font-family: var(--font-title);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--g-300);
}

.almc-reg-hero h1 { color: var(--on-dark); text-wrap: balance; }
.almc-reg-hero__promise { color: var(--on-dark); font-size: var(--fs-lead); }
.almc-reg-hero__note { color: var(--on-dark-soft); font-size: var(--fs-small); }

/*
 * The counted figures. Each tile is printed only when the query returned it, so
 * a tile is never a zero and the whole row is absent when nothing was counted.
 */
.almc-reg-figures {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: var(--sp-3) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
	list-style: none;
}

.almc-reg-figures li { min-width: 0; }

.almc-reg-figures strong {
	display: block;
	font-family: var(--font-title);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--on-dark);
}

.almc-reg-figures span {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-small);
	color: var(--on-dark-soft);
}

.almc-reg-hero__aside {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
}

.almc-reg-hero__portrait {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 220px;
	object-fit: contain;
	object-position: bottom center;
}

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

.almc-reg-card { align-content: start; }
.almc-reg-cards .almc-reg-card { margin-bottom: 0; }

.almc-reg-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-600);
}

/*
 * On a card that opens with a cover band the badge straddles the band's edge —
 * the one place a round mark sits on the gradient, so the card reads as an
 * object rather than a rectangle. Written as an adjacent sibling, not :has(),
 * so it needs nothing newer than CSS2.
 */
.almc-reg-card__cover + .almc-reg-card__icon {
	margin-top: calc(var(--sp-6) * -1);
	background: var(--card);
	box-shadow: var(--e2);
}

.almc-reg-card h2 { overflow-wrap: anywhere; }

/*
 * An offer card is a column with the CTA pinned to its floor, so three cards
 * whose titles wrap differently still line their buttons up.
 *
 * The title steps down to --fs-lead here: these programa names are five and six
 * words long, and at the h2 size they took four lines and pushed the price —
 * the one thing the card exists to show — below the fold. The price stays the
 * loudest thing on the card at every width.
 */
.almc-reg-card--offer { grid-template-rows: auto auto auto auto 1fr auto; }
.almc-reg-card--offer .almc-reg-btn { align-self: end; margin-top: var(--sp-2); }

.almc-reg-card--offer h2 {
	font-size: var(--fs-lead);
	line-height: 1.25;
	text-wrap: balance;
}

/*
 * The one card the numbers really put first. The mark is the measured
 * "El más elegido"; the ring and the darker cover are the only difference,
 * because a recommended card that shrinks the others reads as a trick.
 */
.almc-reg-card--top {
	box-shadow: 0 0 0 2px var(--g-600), var(--e3);
}

.almc-reg-card--top .almc-reg-card__cover { background: var(--grad-moss, var(--grad-forest)); }

.almc-reg-badge {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--g-800);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 700;
	box-shadow: var(--e2);
}

.almc-reg-badge .almc-reg-icon { flex: none; color: var(--warm-700); }

/* The total, on step 2: the figure is the loudest thing on the card. */
.almc-reg-card--total .almc-reg-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.almc-reg-card__label {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--soft-text);
}

/* "qué incluye" and the two trust rows: the same row, two jobs. */
.almc-reg-includes li,
.almc-reg-trust li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 32px;
	font-size: var(--fs-small);
	color: var(--text);
}

.almc-reg-includes .almc-reg-icon { flex: none; color: var(--g-600); }

.almc-reg-trust {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: var(--sp-3) 0 0;
	border-top: 1px solid var(--line-warm);
	list-style: none;
}

.almc-reg-trust .almc-reg-icon { flex: none; color: var(--soft-text); }

.almc-reg-trust a {
	color: var(--g-600);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.almc-reg-link {
	display: inline-block;
	min-height: var(--tap);
	padding: var(--sp-3) 0;
	color: var(--g-600);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.almc-reg-codes {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A cupo is a person, so each code wears the mark the cupos card already wears. */
.almc-reg-codes li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
}

.almc-reg-codes__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
}

.almc-reg-codes code {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	padding: var(--sp-3);
	border-radius: var(--r-sm);
	background: var(--g-100);
	color: var(--g-900);
	font-size: var(--fs-lead);
	letter-spacing: .04em;
	word-break: break-all;
}

/* "Lo que sigue": next-step cards, not a tower. */
.almc-reg-next {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
}

.almc-reg-next .almc-reg-card { margin-bottom: 0; }

/* What the route really does next, in the order it does it. */
.almc-reg-next-up {
	padding: var(--sp-4) 0 0;
	border-top: 1px solid var(--line-warm);
}

.almc-reg-next-up__title {
	margin-bottom: var(--sp-3);
	font-family: var(--font-title);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--soft-text);
}

.almc-reg-next-up__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: almc-reg-next;
}

.almc-reg-next-up__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--text);
	counter-increment: almc-reg-next;
}

.almc-reg-next-up__list li::before {
	content: counter(almc-reg-next);
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
	font-family: var(--font-title);
	font-size: 14px;
	font-weight: 700;
}

/* ------------------------------------------------------- the two steps. */

/*
 * "Paso 1 de 2". Two bars, the current one filled: an older reader should be
 * able to see how much is left without reading anything.
 */
.almc-reg-progress { margin-bottom: var(--sp-4); }

.almc-reg-progress__say {
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--g-800);
}

.almc-reg-progress__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.almc-reg-progress__item { min-width: 0; }

.almc-reg-progress__bar {
	display: block;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--line);
}

.almc-reg-progress__item.is-now .almc-reg-progress__bar,
.almc-reg-progress__item.is-done .almc-reg-progress__bar { background: var(--g-600); }

.almc-reg-progress__name {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-small);
	color: var(--soft-text);
}

.almc-reg-progress__item.is-now .almc-reg-progress__name {
	color: var(--ink);
	font-weight: 600;
}

/* ------------------------------------------------- what the theme forces. */

/*
 * The active theme sets `label { text-transform: uppercase }`, and every span
 * inside a label inherits it — measured live at 1440px: "ACEPTO LOS TÉRMINOS Y
 * CONDICIONES", and three payment methods whose whole description was shouting
 * in capitals. Sentence case is the readable form, and this is the one place
 * that can undo it without touching the theme.
 */
.almc-reg label,
.almc-reg label span,
.almc-reg legend,
.almc-reg .almc-reg-choice,
.almc-reg .almc-reg-choice__title,
.almc-reg .almc-reg-choice__note {
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}

/*
 * The same rule turns the terms checkbox back into a row: `.almc-reg-field >
 * label` in tokens.css is a `display: block` and wins over `.almc-reg-check`
 * on specificity, which stacked the box above its sentence and centred it.
 */
/*
 * tokens.css sizes every input inside .almc-reg-field as a full-width, 56px
 * text box. The terms checkbox is inside one, so it was drawn 536px wide with
 * its sentence pushed clean out of the card — measured live at 1440px. A
 * checkbox is a 26px square here and nowhere else.
 */
.almc-reg .almc-reg-field--check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 6px;
	box-shadow: none;
	accent-color: var(--g-600);
}

.almc-reg .almc-reg-field--check > label.almc-reg-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-bottom: 0;
	font-size: var(--fs-body);
	font-weight: 400;
}

/*
 * Step 2's heading takes focus when the step opens, so the reader is moved
 * there. It is a heading, not a control: it must not wear a focus ring for a
 * move nobody asked for. Keyboard focus rings on real controls are untouched.
 */
.almc-reg .almc-reg-step h1[tabindex]:focus,
.almc-reg .almc-reg-step h1[tabindex]:focus-visible { outline: none; box-shadow: none; }

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

.almc-reg-steps > .almc-reg-step + .almc-reg-step { margin-top: var(--gutter); }
.almc-reg-step[hidden] { display: none; }

.almc-reg-form {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
}

.almc-reg-field { min-width: 0; }

/*
 * TWO FIELDS ON ONE LINE — his verdict 2026-09-18: the names, and the
 * document type beside its number, are one row each and never a tower. The
 * row is a grid item of the form and a grid of its own, so label size, gap
 * and input height stay the form's; under 480px it stacks to one column.
 */
.almc-reg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); min-width: 0; }
.almc-reg-row--doc { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.almc-reg-row > .almc-reg-field { min-width: 0; }
@media (max-width: 480px) {
	.almc-reg-row,
	.almc-reg-row--doc { grid-template-columns: minmax(0, 1fr); }
}

.almc-reg-error { margin: var(--sp-2) 0 0; font-weight: 600; }
.almc-reg-error:empty { display: none; }
.almc-reg-help { margin: var(--sp-2) 0 0; }

/*
 * "No tengo correo": the only way past the address the buyer step now asks for.
 *
 * MEASURED 2026-09-16 in a real browser: the plain rules drew a 300 x 56 box
 * with the words underneath, because the sale form's own `label { display:block }`
 * and its `input { min-height: 56px; width: 100% }` both out-specify a single
 * class. Every selector below therefore carries the form's own scope — the v2
 * lane's too, which adds one more class again — so the box is a box.
 */
.almc-reg .almc-reg-form label.almc-reg-check,
.almc-reg .almc-reg-v2 .almc-reg-v2__form label.almc-reg-check {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	width: auto;
	margin: var(--sp-2, 8px) 0 0;
	padding: 0;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
}
.almc-reg .almc-reg-form .almc-reg-check input[type="checkbox"],
.almc-reg .almc-reg-v2 .almc-reg-v2__form .almc-reg-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	min-width: 0;
	max-width: 1.15rem;
	height: 1.15rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	box-shadow: none;
	appearance: auto;
	-webkit-appearance: checkbox;
}
.almc-reg .almc-reg-form .almc-reg-check span,
.almc-reg .almc-reg-v2 .almc-reg-v2__form .almc-reg-check span { flex: 1 1 auto; }
.almc-reg-help--sin-correo[hidden] { display: none; }

.almc-reg-fieldset {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.almc-reg-fieldset legend {
	padding: 0;
	margin-bottom: var(--sp-2);
	font-family: var(--font-title);
	font-size: var(--fs-lead);
	font-weight: 600;
	color: var(--ink);
}

/* A payment method is a card, and the chosen one wears the ring. */
.almc-reg-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-height: var(--tap);
	margin: 0;
	padding: var(--sp-4);
	border: 0;
	border-radius: var(--r-sm);
	background: var(--card);
	box-shadow: 0 0 0 1.5px var(--line), var(--e1);
	cursor: pointer;
	transition: box-shadow var(--t-base) var(--ease-out);
}

.almc-reg-choice:has(input:checked) {
	box-shadow: 0 0 0 2px var(--g-600), var(--e2);
	background: var(--g-50);
}

.almc-reg-choice input {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--g-600);
}

.almc-reg-choice__title {
	display: block;
	font-family: var(--font-title);
	font-weight: 600;
	color: var(--ink);
}

.almc-reg-choice__note {
	display: block;
	margin-top: var(--sp-1);
	color: var(--soft-text);
	font-size: var(--fs-small);
}

.almc-reg-choice[hidden] { display: none; }

.almc-reg-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-height: var(--tap);
	font-weight: 400;
}

.almc-reg-check input {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--g-600);
}

.almc-reg-coupon summary {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--g-600);
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
}

/*
 * "Ya tienes una cuenta con nosotros" is good news, so it is a card with a
 * mark, not a warning strip. The mark is drawn in CSS because registro.js
 * writes this node with textContent and would erase any markup inside it.
 */
.almc-reg-found {
	position: relative;
	margin-bottom: var(--sp-4);
	padding: var(--sp-4) var(--sp-4) var(--sp-4) 60px;
	border-radius: var(--r-sm);
	background: var(--g-50, var(--g-100));
	box-shadow: 0 0 0 1.5px var(--g-300), var(--e1);
	color: var(--g-800);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.5;
}

.almc-reg-found::before {
	content: "✓";
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--r-pill);
	background: var(--g-600);
	color: var(--on-dark);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.almc-reg-found[hidden] { display: none; }

/*
 * Under the pay button: what "pago seguro" actually means here, in one
 * sentence, beside a lock. No badge of a brand this route does not own.
 */
.almc-reg-secure {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--soft-text);
}

.almc-reg-secure .almc-reg-icon { flex: none; margin-top: 2px; color: var(--g-600); }
.almc-reg-secure strong { display: block; color: var(--ink); }

/*
 * The primary action never fades. A checkout whose button looks disabled is a
 * checkout nobody presses, and the Elementor kit's own button rules reach into
 * this page — hence the explicit ground, ink and full opacity here, including
 * the moment the script disables the button while the order is being created.
 */
.almc-reg .almc-reg-btn,
.almc-reg a.almc-reg-btn {
	opacity: 1;
	filter: none;
}

.almc-reg .almc-reg-btn:disabled,
.almc-reg .almc-reg-btn[disabled] {
	opacity: 1;
	cursor: progress;
	transform: none;
}
.almc-reg .almc-reg-btn.is-gated { opacity: .45; cursor: not-allowed; filter: grayscale(.35); box-shadow: none; }

.almc-reg .almc-reg-btn--ghost:disabled,
.almc-reg .almc-reg-btn--ghost[disabled] { cursor: progress; }

/* ------------------------------------------------------- preview and sim. */

/*
 * A calm amber strip, not an alarm: warm ground, elevation instead of a
 * coloured edge, no ring around the whole page. The state is the chip's word;
 * the sentence beside it is the consequence, and the sale under it must still
 * look like the real thing.
 */
.almc-reg-preview,
.almc-reg-sim-banner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--warm-100);
	color: var(--warm-700);
	font-size: var(--fs-small);
	box-shadow: var(--e1);
}

.almc-reg-sim-banner { font-weight: 600; }

/*
 * The two chip tones the kit does not carry. The word is the state; the ground
 * only repeats it, and it has to read on the banner's own tint.
 */
.almc-reg .almc-chip--warn {
	background: var(--warm-700);
	color: #FFFFFF;
}

.almc-reg .almc-chip--danger {
	background: var(--danger-ink);
	color: #FFFFFF;
}

/*
 * A stale ?programa= slug: same banner shape as preview/sim above, on the
 * danger tint instead of amber, sitting above the card grid rather than the
 * whole page. Its state is a chip too.
 */
.almc-reg-card-error {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--danger-bg);
	color: var(--danger);
	font-size: var(--fs-small);
	font-weight: 600;
	box-shadow: var(--e1);
}

/*
 * The chip is the whole difference simulation makes to an action. The button it
 * sits beside keeps its words, its ground and its contrast.
 */
.almc-reg-sim-chip {
	display: inline-block;
	margin-top: var(--sp-2);
	padding: 4px 12px;
	border-radius: var(--r-pill);
	background: var(--warm-700);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
}

.almc-reg-sim-chip--inline { margin: 0 0 0 auto; align-self: center; }

/*
 * The last line of the screen. A lone underlined link floating under the cards
 * read as a leftover; the hairline says the confirmation ended and this is the
 * door out.
 */
.almc-reg-foot {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line-warm);
	text-align: center;
}

/* The band is centred, so the section that follows it is too. */
.almc-reg--gracias .almc-reg-section { text-align: center; }

/* ==================================================== phone (<= 600px). */

@media (max-width: 600px) {
	/*
	 * A long form always shows its way forward, on both steps: the identify
	 * button and the pay button are the same thumb target at the same place.
	 */
	.almc-reg-submit,
	.almc-reg-pay {
		position: sticky;
		bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
		z-index: 5;
		min-height: var(--tap-lg);
		box-shadow: var(--e3);
	}

	/* Stacked band: the promise, then the portrait sitting on its floor. */
	.almc-reg-hero { padding: var(--sp-5) var(--sp-4) 0; }
	.almc-reg-hero--flat { padding-bottom: var(--sp-5); }
	.almc-reg-hero__portrait { max-height: 168px; }
	.almc-reg-figures { gap: var(--sp-4); }
	.almc-reg-figures strong { font-size: var(--fs-lead); }

	/* Price above the fold: the badge must not push the title down. */
	.almc-reg-badge { top: var(--sp-2); left: var(--sp-3); }

	.almc-reg-secure { gap: var(--sp-2); }
	.almc-reg-sim-chip--inline { margin-left: 0; }

	/*
	 * The band on a 358px line: less padding, and the two receipt facts stack
	 * instead of squeezing an order number and a total onto one row.
	 */
	.almc-reg-head--ok,
	.almc-reg-head--wait { padding: var(--sp-5) var(--sp-4); }
	.almc-reg-head--ok::before,
	.almc-reg-head--wait::before { width: 170px; height: 132px; }
	.almc-reg-meta { flex-direction: column; align-items: center; gap: var(--sp-2); }
}

/* =================================================== tablet (>= 601px). */

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

	/* The band becomes a row: the words on the left, the portrait on the right. */
	.almc-reg-hero {
		grid-template-columns: minmax(0, 1fr) 220px;
		align-items: end;
		gap: var(--sp-5);
		padding: var(--sp-6) var(--sp-6) 0;
	}
	.almc-reg-hero--flat { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-6); }
	.almc-reg-hero__portrait { max-height: 240px; }

	.almc-reg-progress__list { max-width: 420px; }
	.almc-reg-card,
	.almc-reg-form { padding: var(--sp-5); }

	/*
	 * The programa summary is a horizontal banner here, so it does not eat the
	 * whole first screen. The badge is back inside the text column.
	 */
	.almc-reg-card--program .almc-reg-card__cover + .almc-reg-card__icon { margin-top: 0; }
}

/* ================================================== desktop (>= 1025px). */

@media (min-width: 1025px) {
	/* The band at full width: three cards fit under it without scrolling. */
	.almc-reg-hero {
		grid-template-columns: minmax(0, 1fr) 300px;
		padding: var(--sp-7) var(--sp-7) 0;
	}
	.almc-reg-hero--flat { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-7); }
	.almc-reg-hero__portrait { max-height: 300px; }
	.almc-reg-figures strong { font-size: var(--fs-h1); }

	/* Three offer cards across; the recommended one is not made bigger. */
	.almc-reg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Back to a vertical card in the sticky rail. */
	.almc-reg-card--program .almc-reg-card__cover + .almc-reg-card__icon { margin-top: calc(var(--sp-6) * -1); }

	.almc-reg-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* A 900px-wide text input is not premium; it is unfinished. */
	.almc-reg-form { padding: var(--sp-6); }

	.almc-reg-fieldset { grid-column: 1 / -1; }
	.almc-reg-coupon,
	.almc-reg-secure,
	.almc-reg-field--check { grid-column: 1 / -1; }
}

@media (hover: hover) and (pointer: fine) {
	.almc-reg-cards .almc-reg-card {
		transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
	}
	.almc-reg-cards .almc-reg-card:hover {
		box-shadow: var(--e3);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.almc-reg * {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

/* ==================================================== identity: three doors. */

/*
 * Stacked, always — on a phone and on a 1440px screen alike. Three provider
 * buttons in a row make each one narrower than the thumb of the person this
 * page is written for, and the row reads as a toolbar rather than as a choice.
 * Full width, one under the other, in the order the audience actually uses.
 */
.almc-reg-ident {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

/*
 * An author `display` rule outranks the user agent's `[hidden] { display: none }`,
 * so a flex or grid block with the attribute set stays on screen. Measured live:
 * the chooser was still drawn under the phone form it had just revealed.
 */
.almc-reg [hidden] { display: none !important; }

.almc-reg-ident__title {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-h2);
	line-height: 1.2;
	color: var(--ink);
}

.almc-reg-ident__intro {
	margin: 0;
	color: var(--soft-text);
	font-size: var(--fs-body);
}

/*
 * One shape for all three doors: a white card with the site's own border and
 * radius, the brand mark on the left, the words centred in what is left. The
 * provider's colour lives in the mark alone — a button painted Google blue and
 * a button painted WhatsApp green side by side look like two different sites.
 */
.almc-reg .almc-reg-ident__btn {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	min-height: var(--tap-lg);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e1);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.almc-reg .almc-reg-ident__btn:hover,
.almc-reg .almc-reg-ident__btn:focus-visible {
	border-color: var(--g-600);
	box-shadow: var(--e2);
}

.almc-reg-ident__mark { flex: none; }

.almc-reg .almc-reg-ident__btn--session {
	border-color: var(--g-600);
	color: var(--g-800);
}

.almc-reg-ident__sim {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: var(--r-pill);
	background: var(--warm-700);
	color: #FFFFFF;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
}

.almc-reg-ident__note {
	margin: 0;
	color: var(--soft-text);
	font-size: var(--fs-small);
}

/* Who the provider said you are. Stated once, quietly, above what is missing. */
.almc-reg-ident__who {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--g-50);
	color: var(--g-800);
	font-size: var(--fs-body);
	font-weight: 600;
}

/* ------------------------------------------------------ the open test route. */

/*
 * The chip is the one thing that has to survive a screenshot: anybody landing
 * on /unirme/ must see, without reading, that this is a provisional link. Same
 * amber the simulation banner uses, so the two temporary states of this route
 * are one colour and not two.
 */
.almc-reg-chip--prueba {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: 6px var(--sp-3);
	border-radius: var(--r-pill);
	background: var(--warm-100);
	color: var(--warm-700);
	font-size: var(--fs-small);
	font-weight: 700;
}

.almc-reg-chip__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--r-pill);
	background: var(--warm-700);
}

.almc-reg-chip__note { font-weight: 400; }

/*
 * The chooser is a narrow column; the programa cards that replace it after the
 * identification are not. So the width is put on the block, never on the
 * wrapper — a 640px cap on the wrapper would squeeze the three cards into one
 * unreadable file.
 */
.almc-reg--unirme .almc-reg-ident,
.almc-reg--unirme .almc-reg-head,
.almc-reg--unirme .almc-reg-ident__who {
	max-width: 640px;
	margin-inline: auto;
}

.almc-reg--unirme .almc-reg-head { text-align: center; }

/* ==================================================== Pass 8 — /unirme/. */

/*
 * The open door was the least finished screen of the set: a ragged 640px
 * column on the theme's flat white, no ground, no card, no band, no mark, and
 * the same composition at 375px and at 1440px. Measured on the rendered page
 * before this block: the trailing "Después de identificarte…" note sits
 * outside .almc-reg-ident, so the 640px cap above never reached it and at
 * 1440px it started 132px to the left of the chooser it belongs to; and the
 * Prueba chip wrapped onto two lines inside its own pill at 375px, which reads
 * as a banner rather than as a chip.
 *
 * Nothing below removes a rule, a class or a string. It is added at the end of
 * the file, so where it repeats a property it is the one that lands.
 *
 * Two branches share this markup and only one of them may be painted as a
 * card: the identify screen is a chooser and nothing else, while the signed-in
 * screen hands over to `cards`, which brings the offer band and three programa
 * cards of its own. :has(.almc-reg-ident) is the test — the chooser is on the
 * page or it is not — so a card can never be drawn around a card, and two
 * bands can never stack (ART-LOOP.md rule 1).
 */

/* The cream ground the design system asks for, for this route only. */
.almc-reg:has(.almc-reg--unirme) {
	background: var(--grad-paper);
	border-radius: var(--r-lg);
}

/* ------------------------------------------------------- the door as a card. */

.almc-reg--unirme:has(.almc-reg-ident) {
	max-width: 560px;
	margin-inline: auto;
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--e3);
	overflow: hidden;
}

/* The head. Transparent on the programa screen — there the band is `cards`'. */
.almc-reg-unirme__band {
	position: relative;
	text-align: center;
}

.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-unirme__band {
	padding: var(--sp-5) var(--sp-4) var(--sp-6);
	background: var(--grad-moss);
}

/*
 * The watermark of DESIGN-SYSTEM.md 2.6, behind nothing but the ground: it is
 * clipped to the band's own top-right corner and never reaches the title.
 */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-unirme__band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--molecules-dark) no-repeat right -26px top -18px / 190px auto;
	opacity: .13;
	pointer-events: none;
}

.almc-reg--unirme .almc-reg-unirme__band > * { position: relative; z-index: 1; }

/*
 * tokens.css sets `.almc-reg h1 { color: var(--ink) }` at (0,1,1) and
 * registro.css sets `.almc-reg-head > p { color: var(--soft-text) }` at the
 * same weight. Both would print dark green on dark green here, which is the
 * exact cascade failure ART-LOOP.md rule 2 names, so these two beat them at
 * (0,3,1) and (0,3,2).
 */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-unirme__band h1 {
	color: var(--on-dark);            /* 16.84:1 at the dark end of --grad-moss */
	font-size: clamp(24px, 6.2vw, 30px);
}

.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-unirme__band .almc-reg-head > p {
	color: var(--on-dark-soft);       /* 6.16:1 at the light end of --grad-moss */
}

.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-head {
	margin-bottom: 0;
	text-align: center;
}

/*
 * The mark: one white disc, the same 24-grid hand as every other module.
 * `flex`, not `inline-flex` — the chip above it is an inline-level pill, and an
 * inline badge simply sat down beside it. Measured at 1440px: chip and badge
 * shared one line and the disc ran into the card's right edge.
 */
.almc-reg-unirme__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--sp-4);
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--g-800);              /* 8.53:1 on white */
	box-shadow: var(--e2);
}

/*
 * The chip keeps its amber — the one colour this route uses for "temporary" —
 * and stops wrapping: 15px over one line at 375px, centred with the head
 * instead of hanging off its left edge.
 */
.almc-reg--unirme .almc-reg-chip--prueba {
	margin: 0 auto var(--sp-4);
	max-width: 100%;
	padding: 5px var(--sp-3);
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
}

.almc-reg--unirme .almc-reg-chip__note {
	padding-left: var(--sp-2);
	border-left: 1px solid rgba(138, 74, 18, .30);
}

/* ------------------------------------------------- the chooser, on its tint. */

/*
 * Three white buttons on a white card have no edge left. The chooser gets the
 * kit's own tint as a ground and a hairline above it, so the doors read as
 * pressable and the head reads as the head.
 */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident {
	max-width: none;
	margin: 0;
	padding: var(--sp-5) var(--sp-4);
	border-top: 1px solid var(--line);
	background: var(--g-50);
}

/*
 * The kit beats the module here. Measured on the rendered page before this
 * block: `.almc-reg-ident__title { color: var(--ink) }` at (0,1,0) and
 * `.almc-reg h2` at (0,1,1) both lose to the Elementor kit's own h2 rule, so
 * the chooser's heading printed #5F5F5F — the same grey as the intro line
 * under it, which is a hierarchy failure and not a contrast one (5.92:1 on
 * --g-50, so it always cleared AA). (0,4,0) is what actually wins.
 */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident .almc-reg-ident__title {
	color: var(--ink);                /* 13.11:1 on --g-50 */
	font-size: var(--fs-lead);
}

.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident__intro {
	margin-bottom: var(--sp-2);       /* 5.92:1 on --g-50 */
}

/* The kit's own radius on the doors, now that they sit on a tint and not on
   the page — 20px pills inside a 28px card read as three loose lozenges. */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident__btn {
	min-height: var(--tap-lg);
	border-radius: var(--r-sm);
}

/* The privacy note is the chooser's own footnote: quiet, and inside its tint. */
.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident .almc-reg-ident__note {
	margin-top: var(--sp-2);
}

/* --------------------------------------------- what happens after the door. */

/*
 * The line that was loose on the page becomes the card's own footer: a sand
 * strip with a hairline and the programa mark, so "identify" and "then choose
 * and pay" are two steps a reader can see rather than two grey paragraphs.
 */
.almc-reg--unirme .almc-reg-unirme__after {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-4);
	border-top: 1px solid var(--line-warm);
	background: var(--page);
	color: var(--text);               /* 8.45:1 on --page */
	font-size: var(--fs-small);
	text-align: left;
}

.almc-reg--unirme .almc-reg-unirme__after .almc-reg-icon {
	flex: none;
	color: var(--g-600);              /* 5.63:1 on --page; a mark, not a word */
}

/* ---------------------------------------------------- the programa screen. */

/*
 * Signed in, the band is not a band: `cards` draws the offer hero right under
 * it, so the head stays plain type on the cream ground and only the greeting
 * gains its centred column back.
 */
.almc-reg--unirme:not(:has(.almc-reg-ident)) .almc-reg-unirme__band {
	max-width: 640px;
	margin-inline: auto;
}

.almc-reg--unirme:not(:has(.almc-reg-ident)) .almc-reg-ident__who {
	justify-content: center;
}

@media (min-width: 1025px) {
	.almc-reg--unirme:has(.almc-reg-ident) {
		max-width: 620px;
		margin-block: var(--sp-5) var(--sp-6);
	}

	.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-unirme__band,
	.almc-reg--unirme:has(.almc-reg-ident) .almc-reg-ident,
	.almc-reg--unirme .almc-reg-unirme__after {
		padding-inline: var(--sp-6);
	}
}

/*
 * :has() is a hard requirement of the composition above, not a progressive
 * nicety, so a browser without it must not be handed half of it. Everything
 * scoped by :has() is already inside a :has() selector and simply never
 * matches there; what is left below is the part that is an improvement on its
 * own — the chip that fits on one line and the note that stops running loose.
 */
@supports not selector(:has(*)) {
	.almc-reg--unirme .almc-reg-unirme__after {
		max-width: 640px;
		margin-inline: auto;
		border-radius: var(--r-sm);
		border-top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * The fourth door, and the waiting screen.
 *
 * The door is a <details>: its <summary> is styled as the same big button
 * the other three doors are, so the row of four reads as one set, and the
 * form drops out underneath without a round trip and without JavaScript.
 * The native marker is removed because a disclosure triangle beside a brand
 * mark reads as decoration nobody knows to press.
 * ------------------------------------------------------------------ */

.almc-reg .almc-reg-ident__door { width: 100%; }

.almc-reg .almc-reg-ident__door > summary {
	list-style: none;
	margin: 0;
}

.almc-reg .almc-reg-ident__door > summary::-webkit-details-marker { display: none; }

.almc-reg .almc-reg-ident__door[open] > summary {
	border-color: var(--g-600);
	color: var(--g-800);
}

.almc-reg .almc-reg-form--door {
	margin-top: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--card);
}

.almc-reg .almc-reg-form--door h3 { margin-top: 0; }

/*
 * The waiting screen. It is deliberately plain: one mark, one sentence about
 * what was sent and where, and — only when something really left over
 * WhatsApp — the field for the six digits. Nothing here names a person, so
 * there is nothing to style around a name.
 */
.almc-reg-wait,
.almc-reg-ident--waiting {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-lg, var(--r-md));
	background: var(--card);
	box-shadow: var(--e1);
	text-align: center;
}

.almc-reg-wait__mark,
.almc-reg-ident__waitmark {
	display: inline-flex;
	color: var(--g-600);
}

.almc-reg-wait__title { margin: var(--sp-3) 0 var(--sp-2); }

.almc-reg-wait__body,
.almc-reg-ident--waiting .almc-reg-ident__intro {
	margin: 0 auto;
	max-width: 46ch;
}

.almc-reg-wait__note,
.almc-reg-ident--waiting .almc-reg-ident__note {
	margin-top: var(--sp-4);
	color: var(--ink-2, inherit);
	font-size: var(--fs-small, 15px);
}

.almc-reg .almc-reg-form--code {
	margin: var(--sp-4) auto 0;
	max-width: 22rem;
	text-align: left;
}

.almc-reg .almc-reg-form--code input {
	font-size: 24px;
	letter-spacing: 0.4em;
	text-align: center;
}

/* ================================================= Pass 9 — /opciones/.

   The one place a person chooses a programa.

   The direction is the radial12 portal's /planes: a calm page, one decision
   high on it, the proof behind rather than in front, and exactly one gesture
   of colour on the card the numbers really put first. Translated here into
   this brand's own ramp — the forest greens of tokens.css §1 — and into its
   own signature button radius, which never changes.

   Nothing on this page is warm except the "El más elegido" mark, which is the
   one place tokens.css already spends the warm ramp. Warm is reserved for
   urgency in this system and urgency is exactly what this route may not show,
   so the recommended card is told apart by a ring and a lift and never by a
   louder button: a recommended card that shouts is a recommended card nobody
   believes.

   Contrast, computed on the exact pairs shipped here, not estimated. The card
   ground is a gradient from --card to --g-50, so every figure on it is given
   against #F1F8F3, the darker end and the worse case. Lowest pair: 5.63:1.

     --ink      #1E2F22 on --card  #FFFFFF   14.14:1
     --text     #474747 on --card  #FFFFFF    9.29:1
     --soft-text#5F5F5F on --card  #FFFFFF    6.39:1
     --ink      #1E2F22 on --g-50  #F1F8F3   13.11:1
     --text     #474747 on --g-50  #F1F8F3    8.61:1
     --soft-text#5F5F5F on --g-50  #F1F8F3    5.92:1
     --ink      #1E2F22 on --page  #F7F4EC   12.87:1
     --soft-text#5F5F5F on --page  #F7F4EC    5.81:1
     --g-800    #2C5537 on --g-100 #E4F1E7    7.33:1
     --g-800    #2C5537 on --card  #FFFFFF    8.53:1
     --warm-700 #8A4A12 on --card  #FFFFFF    6.84:1
     --on-dark  #FFFFFF on --g-600 #40724D    5.63:1
   ------------------------------------------------------------------------ */

.almc-reg-opt {
	display: grid;
	gap: var(--sp-6);
	max-width: var(--wrap);
	margin-inline: auto;
	min-width: 0;
}

/* ---------------------------------------------------- the identity chip.

   One line, its own row, and small. It used to be a full-width block between
   the h1 and the offer band, which put "who you are" at the same hierarchy as
   "what you are choosing". Same words; a tenth of the weight. */

.almc-reg-opt-chip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	justify-self: start;
	margin: 0;
	padding: 6px var(--sp-4);
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
	font-size: var(--fs-small);
	line-height: 1.3;
}

.almc-reg-opt-chip .almc-reg-icon { flex: none; color: var(--g-600); }
.almc-reg-opt-chip__who { font-weight: 600; }

.almc-reg-opt-chip__link {
	color: var(--g-800);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------- the band. */

.almc-reg-opt-hero { margin-bottom: 0; }

/* ------------------------------------------------- the comparison row.

   What the three programas share, said once, above them. This is the whole of
   what turns three figures into one decision with an obvious axis, and it is
   the row every one of those figures used to carry a copy of. */

.almc-reg-opt-compare {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	text-align: center;
	color: var(--soft-text);
	font-size: var(--fs-small);
	text-wrap: balance;
}

.almc-reg-opt-compare span:first-child {
	color: var(--ink);
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 600;
}

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

   Four things and no more: what it is, who it is for, one value, one action.
   The button is pinned to the floor of the column so three cards whose names
   wrap to different depths still line their actions up. */

.almc-reg-opt-cards { align-items: stretch; }

.almc-reg .almc-reg-opt-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-5) var(--sp-5);
	border: 1px solid var(--line-warm);
	background:
		linear-gradient(180deg, var(--card) 0%, var(--g-50) 100%);
	box-shadow: var(--e2);
}

/* The cover is a rule, not a band. A 96px gradient header on a card that
   carries four lines is more cover than card. */
.almc-reg-opt-card__cover {
	position: absolute;
	inset: 0 0 auto;
	min-height: 0;
	height: 5px;
	margin: 0;
	border-radius: var(--r-md) var(--r-md) 0 0;
	background: var(--grad-forest);
}

.almc-reg-opt-card__cover::before { content: none; }

.almc-reg .almc-reg-opt-card__name {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.almc-reg-opt-card__who {
	margin: 0;
	color: var(--soft-text);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* The one number. The hairline above it is the card's only ornament and it is
   what separates the programa's identity from its figure. */
.almc-reg-opt-card__value {
	margin-top: var(--sp-2);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line-warm);
}

.almc-oferta__one {
	display: grid;
	gap: 2px;
	margin: 0;
}

.almc-oferta__one-label {
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--soft-text);
}

.almc-oferta__one-amount {
	font-family: var(--font-title);
	font-size: var(--fs-huge);
	font-weight: 700;
	line-height: 1.05;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.almc-reg .almc-reg-opt-card__action {
	margin-top: auto;
	width: 100%;
}

/* The card the numbers put first. A ring and, on a desktop, a small lift —
   never a bigger card and never a louder button. */
.almc-reg .almc-reg-opt-card--top {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--g-600), var(--e3);
}

.almc-reg-opt-card--top .almc-reg-opt-card__cover { background: var(--grad-moss, var(--grad-forest)); }

/* The waitlist variant: no value and no button, because choosing is not what
   this card offers today. */
.almc-reg .almc-reg-opt-card--espera {
	border-color: var(--line);
	background: var(--card);
}

.almc-reg-opt-card--espera .almc-reg-opt-card__value {
	border-top: 0;
	padding-top: 0;
}

/* ------------------------------------------- the one line for the page.

   The currency, the way to change it, and the date the values above are
   confirmed to. Every card used to carry all three, word for word. */

.almc-reg .almc-oferta__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--card);
	border: 1px solid var(--line-warm);
	color: var(--soft-text);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-align: center;
}

.almc-reg .almc-oferta__note-until { color: var(--g-800); font-weight: 600; }
.almc-reg .almc-oferta__note .almc-oferta__country { margin: 0; font-size: inherit; color: inherit; }
.almc-reg .almc-oferta__note .almc-oferta__link { color: var(--g-800); }

/* ------------------------------------------------ the signed-out banner.

   Everything a stranger is shown where the programas would be. No value, no
   availability, no waitlist, no currency control: almc-oferta is never asked
   for a block at all on this lane, so none of them can arrive by accident. */

.almc-reg-opt-gate {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	padding: var(--sp-5);
	border-radius: var(--r-md);
	border: 1px solid var(--fam-line, #C9DFCF);
	background: var(--g-50);
	box-shadow: var(--e1);
}

.almc-reg-opt-gate__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--g-800);
	box-shadow: var(--e1);
}

.almc-reg-opt-gate__body { min-width: 0; }

.almc-reg-opt-gate__title {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}

.almc-reg-opt-gate__note {
	margin: var(--sp-1) 0 0;
	color: var(--text);
	font-size: var(--fs-small);
	line-height: 1.4;
}

.almc-reg .almc-reg-opt-gate__action { grid-column: 1 / -1; }

/* ------------------------------------------------------ the explanation.

   Behind the decision at every width. On a phone source order is what the
   reader meets, and this is what used to stand between them and the answer
   they arrived asking for. */

.almc-reg-opt-explain {
	display: grid;
	gap: var(--gutter);
}

.almc-reg-opt-block {
	min-width: 0;
	padding: var(--sp-5);
	border-radius: var(--r-md);
	background: var(--card);
	border: 1px solid var(--line-warm);
}

.almc-reg .almc-reg-opt-block h2 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-title);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.almc-reg-opt-steps {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.almc-reg-opt-steps li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-width: 0;
	color: var(--text);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.almc-reg-opt-steps__n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 700;
}

.almc-reg-opt-includes {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.almc-reg-opt-includes li { align-items: flex-start; line-height: 1.45; }
.almc-reg-opt-includes .almc-reg-icon { margin-top: 2px; }

.almc-reg-opt-ask {
	margin: 0;
}

/*
 * A question and its answer are one thing, so they sit closer to each other
 * than to the next question. This used to be a grid with one gap, which put
 * the same 16px between the question and its answer as between the answer and
 * the next question — four questions that read as eight loose lines.
 */
.almc-reg .almc-reg-opt-ask dt {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	break-after: avoid;
}

.almc-reg .almc-reg-opt-ask dd {
	margin: var(--sp-1) 0 var(--sp-5);
	color: var(--text);
	font-size: var(--fs-small);
	line-height: 1.45;
	break-before: avoid;
}

.almc-reg .almc-reg-opt-ask dd:last-child { margin-bottom: 0; }

/* The doors, when they are drawn: the page's one control, at its foot. */
.almc-reg-opt .almc-reg-ident { margin-inline: auto; }

.almc-reg-opt-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2) var(--sp-3);
	margin: 0;
	color: var(--soft-text);
	font-size: var(--fs-small);
	text-align: center;
}

.almc-reg-opt-help__link {
	color: var(--g-800);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------ phone (<= 600px). */
@media (max-width: 600px) {
	.almc-reg-opt { gap: var(--sp-5); }

	.almc-reg-opt-chip {
		justify-self: stretch;
		justify-content: center;
	}

	/* The banner stacks: the mark and the title read as one line, the note
	   under them, and the action takes the whole thumb-width of the column. */
	.almc-reg-opt-gate { grid-template-columns: auto minmax(0, 1fr); }
	.almc-reg .almc-reg-opt-gate__action { min-height: var(--tap-lg); }

	.almc-oferta__one-amount { font-size: var(--fs-h1); }
}

/* ----------------------------------------------------- tablet (>= 601px). */
@media (min-width: 601px) {
	.almc-reg-opt-gate { grid-template-columns: auto minmax(0, 1fr) auto; }
	.almc-reg .almc-reg-opt-gate__action { grid-column: auto; }

	.almc-reg-opt-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.almc-reg-opt-block--wide { grid-column: 1 / -1; }
	/* Two columns of pairs, and a pair is never split across them. */
	.almc-reg-opt-ask { columns: 2; column-gap: var(--sp-7); }
}

/* ---------------------------------------------------- desktop (>= 1025px). */
@media (min-width: 1025px) {
	.almc-reg-opt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/*
	 * The two clauses share a line only where the first one fits on one. At
	 * 768px it wrapped to two lines and the second clause floated off to the
	 * right of them, reading as a stray caption rather than as the second half
	 * of the same sentence.
	 */
	.almc-reg-opt-compare { flex-direction: row; justify-content: center; gap: var(--sp-3); }

	.almc-reg-opt-compare span + span::before {
		content: "·";
		margin-right: var(--sp-3);
		color: var(--line);
	}

	/* The lift, and only here: at a width where the three cards really do sit
	   side by side and the raised one reads as chosen rather than as broken. */
	.almc-reg .almc-reg-opt-card--top { transform: translateY(-8px); }

	.almc-reg-opt-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------
   Two corrections, both measured on the live page at 1440px.

   1. The "El más elegido" mark. `.almc-reg-badge` is absolutely positioned
      for the cards screen, where it straddles a 96px cover band. This card's
      cover is a 5px rule, so the mark landed on top of the programa's name
      and the two were unreadable over each other. Here it is an ordinary
      first line of the column: same mark, in flow, above the name.

   2. The names came out italic. The Elementor kit styles h3, and this card's
      name is an h3 by document outline — it is the third level under the
      page h1 and the section h2, and it stays one. So the style is stated
      rather than inherited, which is what every other rule in this section
      already does for family, size and weight.
   ------------------------------------------------------------------------ */

.almc-reg .almc-reg-opt-card .almc-reg-badge {
	position: static;
	align-self: flex-start;
	margin-bottom: var(--sp-1);
}

.almc-reg .almc-reg-opt-card__name,
.almc-reg .almc-reg-opt-card__who,
.almc-reg .almc-oferta__one-label,
.almc-reg .almc-oferta__one-amount,
.almc-reg .almc-reg-opt-block h2,
.almc-reg .almc-reg-opt-ask dt {
	font-style: normal;
}

/* ------------------------------------------------------------------------
   "Cambiar país" is a <button>, and the theme paints every button on this
   site with `background-image: linear-gradient(#5B9069 85%, #507D5C 100%)`.
   almc-oferta's own `background: none` is a shorthand at 0,1,0 and loses to
   it, so the control arrived as dark green ink on a mid-green slab —
   measured live at 375px, #2C5537 on #5B9069 is 2.29:1, which is not a
   readable pair at any size.

   Stated here rather than in almc-oferta because this is the surface that
   moved the control out of the cards and onto its own line, and because the
   theme rule is the site's, not that module's. #2C5537 on #FFFFFF is 8.53:1.
   ------------------------------------------------------------------------ */

.almc-reg .almc-oferta__note button.almc-oferta__link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: var(--g-800);
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}