/*
 * ALMC programas — design tokens and base components.
 * See DESIGN-SYSTEM.md. Plain CSS, no build step, no framework, no @import.
 *
 * Scoping: every token is declared on the four plugin roots, never on :root,
 * so nothing here can leak into the Elementor theme on the pages that still
 * render it (/registro/ calls get_header(); /cuenta/ prints its own document).
 *
 * Breakpoints: phone <= 600 | tablet 601-1024 | desktop >= 1025.
 * 768 is kept as the tab-bar / pill-rail swap because the current stylesheets
 * already break there.
 *
 * Contrast: every text/ground pair below is computed, not estimated. The values
 * are recorded in DESIGN-SYSTEM.md section 2.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.almc-cuenta,
.almc-cuenta-page,
.almc-reg,
.almc-agenda,
.almc-perfil {
	/* --- green ramp ------------------------------------------------------ */
	--g-950: #12201A;
	--g-900: #1E2F22;
	--g-800: #2C5537;
	--g-700: #2F5C3D;
	--g-600: #40724D;   /* the one action colour */
	--g-500: #5B9069;   /* decoration only - never behind text (3.72:1) */
	--g-300: #9CCBA8;
	--g-100: #E4F1E7;
	--g-50:  #F1F8F3;

	/* --- ink and surfaces ------------------------------------------------ */
	--ink: #1E2F22;
	--text: #474747;
	--soft-text: #5F5F5F;
	--page: #F7F4EC;
	--page-alt: #F3F3F3;
	--sand: #EFE9DA;
	--card: #FFFFFF;
	--line: #E4E4E4;
	--line-warm: #E3DCCB;
	--on-dark: #FFFFFF;
	--on-dark-soft: #DCE9DE;

	/* --- warm accent: urgency only --------------------------------------- */
	--warm-700: #8A4A12;
	--warm-600: #6B5215;
	--warm-500: #B08A0F;
	--warm-300: #DBC569;
	--warm-100: #FBF1DC;
	--warm-50:  #FDF8EC;

	/* --- danger ---------------------------------------------------------- */
	--danger-ink: #8A1616;
	--danger-bg: #FBE7E7;

	/* --- legacy aliases: existing rules keep working --------------------- */
	--accent: var(--g-600);
	--accent-strong: var(--g-900);
	--primary: var(--g-500);
	--tint: var(--g-100);

	/* --- tab families ---------------------------------------------------- */
	--fam-tint: var(--g-100);
	--fam-ink: var(--g-800);
	--fam-line: #C9DFCF;

	/* --- chips ----------------------------------------------------------- */
	--chip-ok-bg: #E4F1E7;
	--chip-ok-ink: #2C5537;
	--chip-ok-dot: #40724D;
	--chip-run-bg: #FBF3D8;
	--chip-run-ink: #6B5A12;
	--chip-run-dot: #B08A0F;
	--chip-wait-bg: #F1F1F1;
	--chip-wait-ink: #4A4A4A;
	--chip-wait-dot: #7A7A7A;

	/* --- gradients ------------------------------------------------------- */
	--grad-forest:
		radial-gradient(circle farthest-side at 82% 8%, rgba(156, 203, 168, .30), transparent 58%),
		radial-gradient(circle farthest-side at 4% 104%, rgba(219, 197, 105, .16), transparent 52%),
		linear-gradient(135deg, #1E2F22 0%, #2F5C3D 58%, #40724D 100%);
	--grad-moss:
		radial-gradient(circle farthest-side at 88% 12%, rgba(255, 255, 255, .18), transparent 50%),
		linear-gradient(140deg, #2F5C3D 0%, #1E2F22 100%);
	--grad-warm:
		radial-gradient(circle farthest-side at 92% 0%, rgba(255, 255, 255, .55), transparent 55%),
		linear-gradient(135deg, #FDF8EC 0%, #FBF1DC 62%, #F3E4C0 100%);
	--grad-paper:
		radial-gradient(1100px 520px at 50% -220px, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #F7F4EC 0%, #F3EFE4 100%);
	--grad-btn: linear-gradient(135deg, #40724D 0%, #2C5537 100%);
	--grad-btn-hover: linear-gradient(135deg, #2C5537 0%, #1E2F22 100%);

	/* --- molecular watermark (the one decorative mark) ------------------- */
	--molecules-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 150' fill='none' stroke='%235b9069' stroke-width='2'%3E%3Ccircle cx='150' cy='34' r='22'/%3E%3Ccircle cx='92' cy='84' r='12'/%3E%3Ccircle cx='158' cy='118' r='16'/%3E%3Ccircle cx='52' cy='30' r='8'/%3E%3Cpath d='M132 46 102 76M104 90l40 20M60 36l72-6'/%3E%3C/svg%3E");
	--molecules-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 150' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='150' cy='34' r='22'/%3E%3Ccircle cx='92' cy='84' r='12'/%3E%3Ccircle cx='158' cy='118' r='16'/%3E%3Ccircle cx='52' cy='30' r='8'/%3E%3Cpath d='M132 46 102 76M104 90l40 20M60 36l72-6'/%3E%3C/svg%3E");

	/* --- glass: only over a gradient ------------------------------------- */
	--glass-fill: rgba(255, 255, 255, .14);
	--glass-line: rgba(255, 255, 255, .28);
	--glass-blur: blur(10px) saturate(120%);
	--glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 62%);

	/* --- elevation ------------------------------------------------------- */
	--e0: none;
	--e1: 0 1px 2px rgba(30, 47, 34, .06), 0 2px 8px -4px rgba(30, 47, 34, .10);
	--e2: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(30, 47, 34, .06), 0 6px 16px -10px rgba(30, 47, 34, .22);
	--e3: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 2px 4px rgba(30, 47, 34, .08), 0 14px 28px -16px rgba(30, 47, 34, .30);
	--e4: 0 24px 60px -28px rgba(18, 32, 26, .55), 0 8px 20px -14px rgba(18, 32, 26, .35);
	/* legacy aliases */
	--shadow: var(--e2);
	--shadow-lift: var(--e3);

	/* --- radii ----------------------------------------------------------- */
	--r-xs: 8px;
	--r-sm: 14px;
	--r-md: 20px;
	--r-lg: 28px;
	--r-pill: 999px;
	--btn-radius: 10px 0 10px 0;   /* the site's signature - never changed */
	/* legacy aliases */
	--radius: var(--r-md);
	--radius-sm: var(--r-sm);
	--radius-pill: var(--r-pill);

	/* --- type ------------------------------------------------------------ */
	--font-title: 'Poppins', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Open Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-display: clamp(32px, 4.2vw, 40px);
	--fs-huge: 34px;
	--fs-h1: 30px;
	--fs-h2: 24px;
	--fs-lead: 20px;
	--fs-body: 18px;
	--fs-small: 16px;
	--fs-eyebrow: 16px;
	/* legacy aliases */
	--fs-hero: var(--fs-h1);
	--fs-title: var(--fs-h2);

	/* --- spacing --------------------------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--gutter: 16px;
	--wrap: 1180px;
	--tap: 48px;
	--tap-lg: 56px;

	/* --- motion ---------------------------------------------------------- */
	--t-fast: 150ms;
	--t-base: 200ms;
	--t-slow: 250ms;
	--ease-out: cubic-bezier(.2, .7, .3, 1);
}

/* --- tab families: a nested root inherits, never resets ------------------
   The block above declares `--fam-tint/--fam-ink/--fam-line` on the five
   plugin roots, and those roots nest: every shortcode wrapper prints
   `almc-cuenta almc-cuenta--sc`, and it lands inside the `[data-family]`
   panel that had already chosen ámbar, azul or gris. Without this rule the
   wrapper re-declared the green default on itself and the whole panel below
   it — group heads, count chips, type chips, lead-card edges, icon badges —
   was painted in the Inicio family's ink whatever tab the person was on.

   `inherit` takes the value the ancestor computed, so the family chosen by
   the panel keeps travelling down. Specificity is 0,1,0, the same as the
   defaults it must beat, and it is written after them, so it wins; an
   explicit family (`.almc-cuenta [data-family="citas"]`, 0,2,0, in
   `almc-cuenta/assets/cuenta.css`) still outranks it, which is what makes a
   nested panel able to choose its own. The ancestor half is `:where()` so it
   adds nothing to that count — and a browser that does not understand
   `:where()` drops the rule and keeps today's behaviour, never a page with
   no family at all. */
:where(.almc-cuenta, .almc-cuenta-page, .almc-reg, .almc-agenda, .almc-perfil) .almc-cuenta,
:where(.almc-cuenta, .almc-cuenta-page, .almc-reg, .almc-agenda, .almc-perfil) .almc-cuenta-page,
:where(.almc-cuenta, .almc-cuenta-page, .almc-reg, .almc-agenda, .almc-perfil) .almc-reg,
:where(.almc-cuenta, .almc-cuenta-page, .almc-reg, .almc-agenda, .almc-perfil) .almc-agenda,
:where(.almc-cuenta, .almc-cuenta-page, .almc-reg, .almc-agenda, .almc-perfil) .almc-perfil {
	--fam-tint: inherit;
	--fam-ink: inherit;
	--fam-line: inherit;
}

@media (min-width: 601px) {
	.almc-cuenta,
	.almc-cuenta-page,
	.almc-reg,
	.almc-agenda,
	.almc-perfil { --gutter: 24px; }
}

@media (min-width: 1025px) {
	.almc-cuenta,
	.almc-cuenta-page,
	.almc-reg,
	.almc-agenda,
	.almc-perfil { --gutter: 32px; }
}

/* Without backdrop-filter a 14% white panel is too thin to sit on. */
@supports not (backdrop-filter: blur(2px)) {
	.almc-cuenta,
	.almc-cuenta-page,
	.almc-reg { --glass-fill: rgba(255, 255, 255, .20); }
}

/* ==========================================================================
   2. Page ground
   ========================================================================== */

body.almc-cuenta-page {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

/* A fixed attachment repaints on every scroll frame; phones do not pay for it. */
@media (min-width: 1025px) {
	body.almc-cuenta-page {
		background: var(--grad-paper) fixed;
	}
}

.almc-cuenta,
.almc-reg {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--wrap);
	padding: var(--sp-4) var(--gutter) calc(96px + var(--sp-5) + env(safe-area-inset-bottom, 0px));
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--text);
}

.almc-cuenta *,
.almc-cuenta *::before,
.almc-cuenta *::after,
.almc-reg *,
.almc-reg *::before,
.almc-reg *::after { box-sizing: border-box; }

@media (min-width: 769px) {
	/* the floating tab bar is gone above 768: give the page its normal floor */
	.almc-cuenta { padding-bottom: var(--sp-7); }
}

@media (min-width: 1025px) {
	.almc-cuenta,
	.almc-reg { padding-top: var(--sp-5); }
}

/* The site's global heading rules italicise h3 and letter-space h2. */
.almc-cuenta h1, .almc-cuenta h2, .almc-cuenta h3,
.almc-reg h1, .almc-reg h2, .almc-reg h3 {
	margin: 0;
	font-family: var(--font-title);
	color: var(--ink);
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

.almc-cuenta h1, .almc-reg h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; }
.almc-cuenta h2, .almc-reg h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; }
.almc-cuenta h3, .almc-reg h3 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; }
.almc-cuenta p, .almc-reg p { margin: 0; }
.almc-cuenta a { color: var(--g-600); }

.almc-cuenta :focus-visible,
.almc-reg :focus-visible,
.almc-agenda :focus-visible {
	outline: 3px solid var(--g-600);
	outline-offset: 3px;
	border-radius: 6px;
}

.almc-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. Layout: the 12-column grid, main and rail
   ========================================================================== */

.almc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	align-items: start;
}

.almc-main,
.almc-rail {
	display: grid;
	gap: var(--gutter);
	align-content: start;
	min-width: 0;
}

@media (min-width: 601px) and (max-width: 1024px) {
	.almc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.almc-main,
	.almc-rail { grid-column: 1 / -1; }
	.almc-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.almc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.almc-main { grid-column: span 8; }
	.almc-rail {
		grid-column: span 4;
		position: sticky;
		top: 96px;
		align-self: start;
	}
	.almc-span-2,
	.almc-span-full { grid-column: 1 / -1; }
}

/* Existing panels: one column on phone, two on tablet, and the grid above. */
.almc-panel { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
.almc-panel[hidden] { display: none; }

@media (min-width: 769px) {
	.almc-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.almc-panel > .almc-span-2,
	.almc-panel > .almc-panel__title,
	.almc-panel > .almc-grid { grid-column: 1 / -1; }
}

.almc-panel__title {
	margin: var(--sp-2) 0 calc(var(--sp-2) * -1);
	font-family: var(--font-title);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--soft-text);
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.almc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--r-lg);
	background: var(--grad-forest);
	box-shadow: var(--e4);
	color: var(--on-dark);
}

.almc-hero::before {
	content: "";
	position: absolute;
	top: -18px; right: -14px;
	width: 190px; height: 150px;
	background: var(--molecules-dark) no-repeat;
	background-size: contain;
	opacity: .14;
	pointer-events: none;
	z-index: 0;
}

.almc-hero > * { position: relative; z-index: 1; }

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

.almc-hero__title {
	font-family: var(--font-title);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--on-dark);
	max-width: 18ch;
	text-wrap: balance;
}

.almc-hero__sub {
	max-width: 52ch;
	color: var(--on-dark-soft);
}

.almc-hero__body { display: grid; gap: var(--sp-2); min-width: 0; }
.almc-hero__aside { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.almc-hero__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.almc-hero__portrait { display: none; }

.almc-glass {
	background: var(--glass-fill);
	border: 1px solid var(--glass-line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	color: var(--on-dark);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
}

/* --- hero: phone --------------------------------------------------------- */
@media (max-width: 600px) {
	.almc-hero { padding: var(--sp-5) var(--sp-4); }
	.almc-hero__title { font-size: 32px; }
	.almc-hero__actions { grid-template-columns: 1fr; }   /* thumb zone, full width */
	.almc-hero__actions .almc-btn { width: 100%; }
	.almc-hero .almc-ring svg { width: 92px; height: 92px; }
}

/* --- hero: tablet -------------------------------------------------------- */
@media (min-width: 601px) {
	.almc-hero {
		grid-template-columns: minmax(0, 1fr) 260px;
		align-items: center;
		padding: var(--sp-6);
	}
	.almc-hero__actions {
		grid-auto-flow: column;
		justify-content: start;
		gap: var(--sp-3);
	}
}

/* --- hero: desktop ------------------------------------------------------- */
@media (min-width: 1025px) {
	.almc-hero {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--sp-6);
		padding: var(--sp-7) var(--sp-6);
		min-height: 320px;
		align-items: end;
	}
	.almc-hero__aside {
		position: relative;
		align-self: stretch;
		margin: calc(var(--sp-7) * -1) calc(var(--sp-6) * -1) calc(var(--sp-7) * -1) 0;
		border-radius: 0 var(--r-lg) var(--r-lg) 0;
		overflow: hidden;
	}
	/* The portrait is a real media-library asset or it is not rendered at all. */
	.almc-hero__portrait {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: top center;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	}
	.almc-hero__aside::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(30, 47, 34, .85), rgba(30, 47, 34, 0) 55%);
		pointer-events: none;
	}
	.almc-hero__aside .almc-ring {
		position: relative;
		z-index: 2;
		align-self: end;
		margin: var(--sp-4);
		background: var(--glass-fill);
		border: 1px solid var(--glass-line);
		border-radius: var(--r-md);
		padding: var(--sp-3);
		-webkit-backdrop-filter: var(--glass-blur);
		backdrop-filter: var(--glass-blur);
	}
	.almc-hero .almc-ring svg { width: 112px; height: 112px; }
}

/* ==========================================================================
   5. Progress ring and bar
   ========================================================================== */

.almc-ring { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.almc-ring svg { flex: none; width: 96px; height: 96px; transform: rotate(-90deg); }
.almc-ring__track { fill: none; stroke: var(--line); stroke-width: 10; }
.almc-ring__fill {
	fill: none;
	stroke: var(--g-500);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset var(--t-slow) var(--ease-out);
}
.almc-ring__value {
	font-family: var(--font-title);
	font-size: var(--fs-huge);
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
}
.almc-ring__say { margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 600; color: var(--soft-text); }

/* on a gradient */
.almc-hero .almc-ring__track { stroke: rgba(255, 255, 255, .22); }
.almc-hero .almc-ring__fill { stroke: var(--g-300); }
.almc-hero .almc-ring__value { color: var(--on-dark); }
.almc-hero .almc-ring__say { color: var(--on-dark-soft); }

.almc-bar { height: 12px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.almc-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--g-500); }

/* ==========================================================================
   6. Cards
   ========================================================================== */

.almc-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
	padding: var(--sp-5) var(--sp-4);
	border: 0;
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
	transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

@media (min-width: 1025px) {
	.almc-card { padding: var(--sp-5); }
}

/* the lead card of a tab wears its family edge as a ring, not a border */
.almc-card--lead { box-shadow: 0 0 0 1.5px var(--fam-line), var(--e2); }

/* a finished thing does not compete */
.almc-card--past { box-shadow: var(--e1); }

@media (hover: hover) and (pointer: fine) {
	a.almc-card:hover,
	.almc-card--stage:hover { box-shadow: var(--e3); transform: translateY(-2px); }
}

.almc-card__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.almc-card__head h2, .almc-card__head h3 { min-width: 0; overflow-wrap: anywhere; }

.almc-card__icon {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: var(--fam-tint);
	color: var(--fam-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.almc-card__number {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}
.almc-card__number--huge { font-size: var(--fs-huge); }
.almc-card__say { margin: 0; color: var(--text); }

.almc-card__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-2);
}
.almc-card__foot .almc-btn { width: 100%; }

@media (min-width: 601px) {
	.almc-card__foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.almc-card__foot .almc-btn { width: auto; }
	.almc-card__foot .almc-btn--wide { width: 100%; }
}

/* --- cover band: decoration generated from real data, never a photo ------ */
.almc-card__cover {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 80px;
	margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md) var(--r-md) 0 0;
	background: var(--grad-moss);
	color: var(--on-dark);
}
.almc-card__cover::before {
	content: "";
	position: absolute;
	top: -12px; right: -10px;
	width: 150px; height: 118px;
	background: var(--molecules-dark) no-repeat;
	background-size: contain;
	opacity: .12;
	pointer-events: none;
}
.almc-card__cover-num {
	position: absolute;
	right: var(--sp-4); bottom: -6px;
	font-family: var(--font-title);
	font-size: var(--fs-display);
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, .22);
	pointer-events: none;
}

@media (min-width: 1025px) {
	.almc-card__cover {
		min-height: 96px;
		margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
		padding: var(--sp-3) var(--sp-5);
	}
}

/* --- stage cards --------------------------------------------------------- */
.almc-stages { display: grid; gap: var(--gutter); }

@media (min-width: 601px) {
	.almc-stages { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ==========================================================================
   7. Stat cards
   ========================================================================== */

.almc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.almc-stat {
	display: grid;
	gap: var(--sp-1);
	padding: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
	min-width: 0;
}
.almc-stat__icon {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: var(--r-sm);
	background: var(--fam-tint);
	color: var(--fam-ink);
}
.almc-stat__value {
	font-family: var(--font-title);
	font-size: var(--fs-huge);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
}
.almc-stat__label { font-size: var(--fs-small); color: var(--soft-text); }

@media (min-width: 769px) {
	.almc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}

@media (min-width: 1025px) {
	/* row layout: 96px tall instead of 128px */
	.almc-stat {
		grid-template-columns: 36px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: var(--sp-3);
	}
	.almc-stat__icon { grid-row: 1 / span 2; }
}

/* ==========================================================================
   8. Appointment card
   ========================================================================== */

.almc-card--appt .almc-appt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	min-width: 0;
}

.almc-appt__date {
	flex: 0 0 92px;
	overflow: hidden;
	text-align: center;
	border-radius: var(--r-sm);
	background: var(--card);
	box-shadow: var(--e1);
}
.almc-appt__month {
	padding: 6px 0;
	background: var(--grad-forest);
	color: var(--on-dark);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}
.almc-appt__day {
	padding: 8px 0 2px;
	font-family: var(--font-title);
	font-size: var(--fs-huge);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
}
.almc-appt__time { padding-bottom: 8px; font-size: var(--fs-small); color: var(--soft-text); }
.almc-appt__body { flex: 1 1 200px; min-width: 0; display: grid; gap: var(--sp-2); }

@media (max-width: 600px) {
	.almc-card--appt .almc-card__foot .almc-btn { width: 100%; }
}

@media (min-width: 1025px) {
	.almc-appt__date { flex-basis: 140px; }
	.almc-card--appt .almc-appt { flex-wrap: nowrap; }
	.almc-card--appt .almc-card__foot { margin: 0 0 0 auto; padding: 0; flex: none; }
}

/* ==========================================================================
   9. Appointment banner - the only warm surface
   ========================================================================== */

.almc-banner {
	position: relative;
	display: grid;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	background: var(--grad-warm);
	box-shadow: 0 0 0 1px rgba(138, 74, 18, .16), var(--e2);
	color: var(--warm-700);
}
.almc-banner__icon {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .72);
	color: var(--warm-700);
}
.almc-banner__body { display: grid; gap: 2px; min-width: 0; }
.almc-banner strong {
	font-family: var(--font-title);
	font-size: var(--fs-lead);
	font-weight: 700;
	color: var(--warm-700);
}
.almc-banner .almc-btn {
	background: var(--warm-700);
	border-color: var(--warm-700);
	width: 100%;
}
.almc-banner .almc-btn:hover,
.almc-banner .almc-btn:focus { background: #6E3A0D; border-color: #6E3A0D; }

.almc-banner__close {
	position: absolute;
	top: var(--sp-2); right: var(--sp-2);
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: var(--r-pill);
	background: transparent;
	color: var(--warm-700);
	cursor: pointer;
}
.almc-banner__close:hover { background: rgba(255, 255, 255, .6); }
.almc-banner[hidden] { display: none; }

@media (max-width: 600px) {
	.almc-banner { padding-right: var(--sp-7); }   /* room for the close */
}

@media (min-width: 601px) {
	.almc-banner {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-items: center;
		gap: var(--sp-4);
	}
	.almc-banner .almc-btn { width: auto; }
	.almc-banner__close { position: static; }
}

/* ==========================================================================
   10. Chips
   ========================================================================== */

.almc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.almc-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: var(--chip-wait-bg);
	color: var(--chip-wait-ink);
	box-shadow: var(--e1);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 600;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}
.almc-chip__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.almc-chip--ok   { background: var(--chip-ok-bg);   color: var(--chip-ok-ink); }
.almc-chip--ok   .almc-chip__dot { background: var(--chip-ok-dot); }
.almc-chip--run  { background: var(--chip-run-bg);  color: var(--chip-run-ink); }
.almc-chip--run  .almc-chip__dot { background: var(--chip-run-dot); }
.almc-chip--wait .almc-chip__dot { background: var(--chip-wait-dot); }
.almc-chip--type { background: var(--fam-tint); color: var(--fam-ink); padding: 4px 12px; box-shadow: none; }
.almc-chip--on-dark {
	background: var(--glass-fill);
	border: 1px solid var(--glass-line);
	color: var(--on-dark);
	box-shadow: none;
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
}
.almc-chip--on-dark .almc-chip__dot { background: var(--warm-300); }

/* ==========================================================================
   11. Buttons
   ========================================================================== */

.almc-cuenta .almc-btn,
.almc-cuenta a.almc-btn,
.almc-reg .almc-reg-btn,
.almc-reg a.almc-reg-btn,
.almc-agenda .almc-agenda__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--tap);
	padding: var(--sp-3) var(--sp-5);
	border: 2px solid transparent;
	border-radius: var(--btn-radius);
	background: var(--grad-btn);
	color: #FFFFFF;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(30, 47, 34, .35);
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease-out),
	            box-shadow var(--t-base) var(--ease-out),
	            transform var(--t-base) var(--ease-out);
}

.almc-cuenta .almc-btn:hover, .almc-cuenta .almc-btn:focus,
.almc-cuenta a.almc-btn:hover, .almc-cuenta a.almc-btn:focus,
.almc-reg .almc-reg-btn:hover, .almc-reg .almc-reg-btn:focus,
.almc-agenda .almc-agenda__btn:hover, .almc-agenda .almc-agenda__btn:focus-visible {
	background: var(--grad-btn-hover);
	color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
	.almc-cuenta .almc-btn:hover,
	.almc-reg .almc-reg-btn:hover { transform: translateY(-1px); }
}

.almc-cuenta .almc-btn--ghost, .almc-cuenta a.almc-btn--ghost,
.almc-reg .almc-reg-btn--ghost, .almc-agenda .almc-agenda__btn--ghost {
	background: transparent;
	color: var(--g-600);
	border-color: var(--g-600);
	box-shadow: none;
}
.almc-cuenta .almc-btn--ghost:hover, .almc-cuenta .almc-btn--ghost:focus,
.almc-reg .almc-reg-btn--ghost:hover,
.almc-agenda .almc-agenda__btn--ghost:hover {
	background: var(--g-100);
	color: var(--g-800);
	border-color: var(--g-600);
}

.almc-cuenta .almc-btn--plain {
	background: none; border: 0; box-shadow: none;
	color: var(--g-600);
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: var(--sp-2) var(--sp-1);
}

.almc-btn--on-dark {
	background: #FFFFFF !important;
	color: var(--g-800) !important;
	border-color: #FFFFFF !important;
}
.almc-btn--ghost-dark {
	background: transparent !important;
	color: var(--g-300) !important;
	border-color: var(--g-300) !important;
	box-shadow: none !important;
}
.almc-btn--ghost-dark:hover { background: rgba(255, 255, 255, .10) !important; }

.almc-cuenta .almc-btn--wide, .almc-cuenta a.almc-btn--wide { width: 100%; }
.almc-cuenta .almc-btn--big { flex: 1 1 220px; min-height: 60px; font-size: var(--fs-lead); }
.almc-cuenta .almc-btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ==========================================================================
   12. Mini rows (documents, lists, steps)
   ========================================================================== */

.almc-stack { display: grid; gap: var(--sp-3); }

.almc-mini {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 56px;
	padding: var(--sp-3);
	border: 0;
	border-radius: var(--r-sm);
	background: var(--card);
	box-shadow: var(--e1);
	color: inherit;
	text-align: left;
	text-decoration: none;
	transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.almc-mini__icon {
	flex: 0 0 40px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: var(--r-xs);
	background: var(--fam-tint);
	color: var(--fam-ink);
}
.almc-mini__body { flex: 1; min-width: 0; }
.almc-mini__body strong {
	display: block;
	font-family: var(--font-title);
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
	text-transform: none;
	letter-spacing: normal;
}
.almc-mini__meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--soft-text); }
.almc-mini__go { flex: none; color: var(--g-600); }

@media (hover: hover) and (pointer: fine) {
	a.almc-mini:hover, button.almc-mini:hover { box-shadow: var(--e2); transform: translateY(-1px); }
}

@media (max-width: 600px) {
	.almc-mini { flex-wrap: wrap; }
	.almc-mini .almc-chip { order: 3; flex-basis: 100%; }
}

/* ==========================================================================
   13. Uploader dropzone
   ========================================================================== */

.almc-uploader { display: grid; gap: var(--sp-4); }

.almc-drop {
	display: grid;
	place-items: center;
	gap: var(--sp-2);
	min-height: 150px;
	padding: var(--sp-5);
	text-align: center;
	border: 2.5px dashed rgba(255, 255, 255, .42);
	border-radius: var(--r-md);
	background: var(--grad-moss);
	color: var(--on-dark);
	transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.almc-drop.is-over { border-color: #FFFFFF; background: var(--grad-forest); }
.almc-drop__icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .14);
	color: var(--on-dark);
}
.almc-drop__say { font-family: var(--font-title); font-weight: 600; color: var(--on-dark); }

.almc-uploader__actions { display: grid; gap: var(--sp-3); }

.almc-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.almc-thumbs > li {
	position: relative;
	width: 96px; height: 96px;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--fam-tint);
	box-shadow: var(--e1);
}
.almc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.almc-thumbs button {
	position: absolute;
	top: 4px; right: 4px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 0; border-radius: var(--r-pill);
	background: #FFFFFF;
	color: var(--warm-700);
	cursor: pointer;
}

@media (min-width: 1025px) {
	.almc-uploader { grid-template-columns: minmax(0, 1fr) 260px; align-items: stretch; }
	.almc-drop { min-height: 200px; }
	.almc-uploader__actions { align-content: center; }
	.almc-thumbs { grid-column: 1 / -1; }
}

/* ==========================================================================
   14. Tabs: the bottom row of the shell
   ========================================================================== */

/* There is ONE tab strip on this route, at every width, and it is a row of the
   header box — not a card under it. It has no ground of its own, no shadow of
   its own and no radius of its own; the box in section 17 carries all three.

   ONE ROW, six marks, no words. The words do not fit and never did: measured
   on the live page in Poppins 600 16px they are Inicio 44, Programa 82,
   Consultorias 104, Mensajes 78, Documentos 104, Cuenta 60 — 472px of text
   against 288px of box at 320px. Wrapping them cost a second row and 60px of
   sticky height; cutting them gave "Consul...". The mark carries the meaning
   and the word travels as the accessible name and as the pointer tooltip.

   The two fallbacks were measured before this was chosen, not assumed. A word
   under Programa and Documentos only needs 420px at 320. The word under the
   selected cell alone needs 230px plus that label: it fits Inicio (44) and
   Cuenta (60) and overflows the other four, so the row would change width with
   the tab and break on four of six. Marks alone need 292px of the 312 there
   are, so it is the only one of the three that holds. */

.almc-tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--sp-1);
	min-width: 0;
	/* the marks reach nearer the edges of the box than the brand row does */
	margin-inline: calc(var(--sp-1) - var(--gutter));
}

/* A strip of one cell is a control, not a navigation: during the onboarding
   there is exactly one tab and the row stands down. */
.almc-tabs[data-almc-tabs]:not(:has(> [role="tab"] ~ [role="tab"])) { display: none; }

.almc-tabs__item {
	/* six equal cells share the row: 48.7px each at 320, 57.8px at 375 */
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--sp-2) var(--sp-1);
	border: 0;
	border-radius: var(--r-xs);
	background: transparent;
	color: var(--soft-text);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.almc-tabs__item .almc-icon { flex: none; }

/* The word is the accessible name, not decoration: it stays in the DOM, it is
   what a screen reader and a voice command say, and `title` on the cell is the
   same word as a tooltip wherever there is a pointer. It is never removed, only
   taken off the glass — which is why it comes back whole at 1025 below. */
.almc-tabs__label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.almc-tabs__item:hover { color: var(--g-800); background: var(--g-50); }

/* The Elementor kit paints every `a` on the page in --g-500 at (0,2,0) — the
   one green its own tokens mark "decoration only, never behind text", 3.68:1
   on this glass. A mark needs 3:1 and --g-500 would have scraped it; --g-800
   reads 8.47:1 on the shell over the page ground and 6.84:1 with the dark hero
   scrolled under it. */
.almc-cuenta-page .almc-shell .almc-tabs__item { color: var(--g-800); }
.almc-cuenta-page .almc-shell .almc-tabs__item:hover { color: var(--g-900); background: var(--g-50); }

/* The tab you are on is a filled tile. White on --grad-btn, whose lightest
   stop is #40724D: 5.62:1, and the mark is currentColor so it is white with
   it. With no words on the row this fill is the whole answer to "where am I",
   so it is the one thing here that may not be quiet. */
.almc-cuenta-page .almc-shell .almc-tabs__item[aria-selected="true"],
.almc-tabs__item[aria-selected="true"] {
	background: var(--grad-btn);
	color: var(--on-dark);
}
.almc-tabs__item[aria-selected="true"]:focus-visible { outline-color: var(--warm-300); }

/* On a cell with no word the unread number belongs in the corner, clear of the
   mark's own strokes. */
.almc-tabs .almc-tabs__item[data-unread]::after { top: 2px; right: 2px; }

@media (min-width: 601px) {
	.almc-tabs { margin-inline: 0; }
	.almc-tabs__item { flex: 0 1 88px; }
}

/* Room for the whole word beside its mark: measured, six cells this way are
   911px against 1180px of band, so nothing is hidden at a desk. */
@media (min-width: 1025px) {
	.almc-tabs__item {
		flex: 0 0 auto;
		gap: var(--sp-2);
		min-height: var(--tap);
		padding: 0 var(--sp-4);
		font-size: var(--fs-body);
	}
	.almc-tabs__label {
		position: static;
		width: auto; height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.almc-tabs .almc-tabs__item[data-unread] { padding-right: calc(var(--sp-4) + 22px); }
	.almc-tabs .almc-tabs__item[data-unread]::after {
		top: 50%;
		right: var(--sp-2);
		transform: translateY(-50%);
	}
}

/* The floating bottom bar is gone from this route. The rule stays so a cached
   document, or a page that still prints the old markup, never paints a second
   navigation under the one in the header. */
.almc-tabbar { display: none !important; }

/* ==========================================================================
   15. Forms
   ========================================================================== */

.almc-form { display: grid; gap: var(--sp-4); }
.almc-form[hidden] { display: none; }
.almc-field { display: block; min-width: 0; }
.almc-field > span,
.almc-reg-field > label {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ink);
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
}
.almc-field__help,
.almc-reg-help {
	display: block;
	margin-bottom: var(--sp-1);
	font-size: var(--fs-small);
	font-style: normal;
	color: var(--soft-text);
}

.almc-cuenta .almc-field input,
.almc-cuenta .almc-field select,
.almc-cuenta .almc-field textarea,
.almc-reg .almc-reg-field input,
.almc-reg .almc-reg-field select,
.almc-reg .almc-reg-field textarea {
	width: 100%;
	min-height: var(--tap-lg);
	padding: var(--sp-3) var(--sp-4);
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--card);
	box-shadow: inset 0 1px 2px rgba(30, 47, 34, .05);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--text);
	transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.almc-cuenta .almc-field textarea,
.almc-reg .almc-reg-field textarea { min-height: 120px; resize: vertical; }

.almc-cuenta .almc-field input:focus,
.almc-cuenta .almc-field select:focus,
.almc-cuenta .almc-field textarea:focus,
.almc-reg .almc-reg-field input:focus,
.almc-reg .almc-reg-field select:focus,
.almc-reg .almc-reg-field textarea:focus {
	outline: none;
	border-color: var(--g-600);
	box-shadow: inset 0 1px 2px rgba(30, 47, 34, .05), 0 0 0 3px rgba(64, 114, 77, .20);
}

.almc-reg-field--invalid input,
.almc-reg-field--invalid select { border-color: var(--danger-ink); }
.almc-reg-error { color: var(--danger-ink); font-size: var(--fs-small); }
.almc-reg-error--block {
	padding: var(--sp-3);
	border-radius: var(--r-sm);
	background: var(--danger-bg);
	color: var(--danger-ink);
}

.almc-notice { display: none; padding: var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-small); }
.almc-notice.is-visible { display: block; }
.almc-notice--ok { background: var(--chip-ok-bg); color: var(--chip-ok-ink); }
.almc-notice--error { background: var(--danger-bg); color: var(--danger-ink); }

.almc-warn {
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	background: var(--warm-100);
	color: var(--warm-600);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* the food form goes two-up on desktop: a 1400px tower becomes 700px */
@media (min-width: 1025px) {
	.almc-form--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.almc-form--two > .almc-field--full { grid-column: 1 / -1; }
}

/* a long phone form always shows its way forward */
@media (max-width: 600px) {
	.almc-form__submit {
		position: sticky;
		bottom: calc(var(--sp-3) + 76px + env(safe-area-inset-bottom, 0px));
		z-index: 5;
	}
}

/* ==========================================================================
   16. Empty states
   ========================================================================== */

.almc-empty { margin: 0; color: var(--soft-text); }

.almc-empty--rich {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	border-radius: var(--r-md);
	background: var(--sand);
	color: var(--soft-text);
}
.almc-empty__mark {
	width: 96px; height: 76px;
	background: var(--molecules-light) no-repeat center / contain;
	opacity: .5;
}
.almc-empty__mark--icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-800);
	opacity: 1;
}

/* ==========================================================================
   17. Shell: one box at the top, one footer standing on the page
   ========================================================================== */

/* ONE surface. The brand row and the tab strip are two rows of the same white
   glass box: one ground, one 14px radius off the kit, one --e2 shadow, and
   nothing between them — no gap, no line, no second shadow. It sticks as a
   unit because it is one thing. The bottom corners are the only ones drawn:
   the box is cut off by the top of the screen, and a pill bottom on a band
   this wide is the "mucho radio" this replaces. */
.almc-shell {
	position: sticky;
	top: 0;
	z-index: 40;
	display: grid;
	gap: var(--sp-1);
	padding: var(--sp-2) var(--gutter);
	background: rgba(255, 255, 255, .88);
	border: 0;
	border-radius: 0 0 var(--r-sm) var(--r-sm);
	box-shadow: var(--e2);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
}

/* The brand row is a ROW of that box, never a box of its own: no ground, no
   radius, no shadow, no border. Everything on the right — avatar, name,
   Salir — is one group with no box of its own either. */
.almc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.almc-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--tap);
	color: var(--ink);
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 600;
	text-decoration: none;
}
.almc-topbar__brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
/* The word for the tab you are on, in the middle of the band. A title, not a
   control: no ground, no hover, nothing to press — the tile with the avatar to
   its right is the only control in this row and has to stay the only one that
   looks like one.

   It runs from 375px to 1024px, and the word is on screen exactly once at
   every width. Below 375 there are 288px of band, the mark and the account
   tile take 217 of them, and "Consultorias" needs 104 in the 71 that are left:
   showing it there would have to shorten the person's name to an ellipsis,
   which is the thing this whole pass exists to remove — so the marks stand
   alone and the word is still on every tab as its accessible name. From 1025
   the strip carries its own words again, and a title here would print the
   same word twice about 3cm apart, so it stands down and lets the lit tab
   say it. */
.almc-topbar__here { display: none; }
.almc-topbar__here > span { display: none; }

@media (min-width: 375px) and (max-width: 1024px) {
	.almc-topbar__here {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: var(--sp-1);
		font-family: var(--font-title);
		font-size: var(--fs-small);
		font-weight: 600;
		line-height: 1.2;
		color: var(--ink);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* The face and the name are ONE control and it is the door to the Cuenta tab.
   It is not a third thing in the band: the header carries the mark, the
   account, and nothing else — the way out of the account moved to the foot of
   that tab, which is the only place it now exists. */
.almc-topbar__me {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
	flex: 0 1 auto;
	min-height: var(--tap);
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--r-xs);
	color: var(--ink);
	text-decoration: none;
	transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.almc-topbar__me:hover { background: var(--g-50); }
/* Same cascade as the tab marks: the Elementor kit paints every `a` --g-500 at
   (0,2,0), and anything that inherits from this control would inherit 3.68:1.
   --ink on the shell glass is 13.85:1. */
.almc-cuenta-page .almc-shell .almc-topbar__me { color: var(--ink); }
.almc-topbar__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.almc-topbar__name {
	display: block;
	font-family: var(--font-title);
	font-weight: 600;
	color: var(--ink);
	max-width: 38vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* The identity control and the Cuenta cell are one destination, so they wear
   one state: when that tab is open, both are the filled tile. Without this the
   band and the strip read as two different doors to the same screen. */
.almc-shell:has(.almc-tabs__item[data-tab="cuenta"][aria-selected="true"]) .almc-topbar__me {
	background: var(--grad-btn);
	color: var(--on-dark);
}
.almc-shell:has(.almc-tabs__item[data-tab="cuenta"][aria-selected="true"]) .almc-topbar__name { color: var(--on-dark); }

/* The way out, at the foot of the Cuenta tab. Not full-bleed and not first:
   it is the one control on that screen nobody should press by accident. */
.almc-signout {
	/* Last, whatever mounts after it. almc-acceso hangs "Tus accesos" on this
	   panel at priority 99, which put the way out of the account in the middle
	   of the screen, above a list of devices — an easy thing to hit by mistake.
	   `order` is what keeps it at the foot however many modules extend the tab. */
	order: 999;
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: var(--sp-6);
}
.almc-signout .almc-btn { width: 100%; max-width: 320px; }

@media (min-width: 601px) {
	.almc-topbar__name { max-width: 32ch; }
}

@media (min-width: 1025px) {
	.almc-shell { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
}

/* The page fills the screen and the footer is the floor of it: on a short tab
   the document ends at the footer instead of ending in an empty band. */
body.almc-cuenta-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
/* `width: 100%` is load-bearing. The column carries `margin: 0 auto`, and an
   auto cross-axis margin turns OFF the stretch that would have given it the
   body's width; it then takes its fit-content width, whose floor is its own
   min-content — 367px at a 320px screen, because one block inside asks for 335.
   The whole document scrolled sideways for those 47px. Told its width outright,
   the shell can no longer be widened by what is inside it, and a block that
   still cannot shrink is clipped by the page's own `overflow-x: clip` and stays
   that block's defect rather than the page's. */
body.almc-cuenta-page > main.almc-cuenta { flex: 1 0 auto; width: 100%; min-width: 0; }
/* Nothing on this route needs a floor kept clear for a floating bar. */
.almc-cuenta { padding-bottom: var(--sp-6); }

/* The footer stands ON the page ground with real space above it: it is never
   flush against the last card of the tab, and it carries no floor reserved
   for a bar that no longer exists. */
.almc-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
	padding: var(--sp-6) var(--gutter);
	border-radius: var(--r-md) var(--r-md) 0 0;
	background: var(--grad-forest);
	color: var(--on-dark);
	text-align: center;
}
.almc-footer::before {
	content: "";
	position: absolute;
	right: -14px; bottom: -18px;
	width: 190px; height: 150px;
	background: var(--molecules-dark) no-repeat;
	background-size: contain;
	opacity: .10;
	pointer-events: none;
	z-index: 0;
}
.almc-footer > * { position: relative; z-index: 1; }
.almc-footer__brand { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.almc-footer__brand img { border-radius: 50%; flex: none; }
.almc-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); }

/* Every word in the footer is white on the forest gradient. Its lightest
   point, where the green radial sits over the light end of the linear, is
   #4F7D5D: white reads 4.72:1 there and 5.62:1 on the plain end, both AA.
   The --g-300 these used to wear read 3.40:1 and failed. */
/* The ancestor half of the selector is there to beat the Elementor kit's own
   `a` rule (0,2,0), which was painting both links in --g-500 — the one green
   the kit marks "decoration only, never behind text", 3.72:1 on this ground. */
.almc-footer .almc-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--on-dark);
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.almc-footer__note { margin: 0; font-size: var(--fs-small); color: var(--on-dark); }

/* The button family is scoped to `.almc-cuenta`, and the footer is outside it,
   so this control was an icon and a word with nothing around them. It is drawn
   here in full: one row, a 48px target, a white outline on the gradient. */
.almc-footer .almc-footer__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--tap);
	padding: 0 var(--sp-5);
	border: 2px solid rgba(255, 255, 255, .72) !important;
	border-radius: var(--btn-radius);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--on-dark) !important;
	font-family: var(--font-title);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.almc-footer .almc-footer__wa .almc-icon { flex: none; }
.almc-footer .almc-footer__wa:hover,
.almc-footer .almc-footer__wa:focus { background: rgba(255, 255, 255, .12) !important; }

@media (min-width: 769px) {
	.almc-footer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		gap: var(--sp-5);
	}
	.almc-footer__brand { justify-content: flex-start; }
}

@media (min-width: 1025px) {
	.almc-footer { padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
}

/* ==========================================================================
   18. Reader (LearnDash lesson)
   ========================================================================== */

.almc-reader {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e3);
}
.almc-reader[hidden] { display: none; }
.almc-reader__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.almc-reader__body { max-width: 68ch; font-size: var(--fs-body); line-height: 1.6; }
.almc-reader__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.almc-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-sm);
	background: #000;
	overflow: hidden;
}
.almc-video[hidden] { display: none; }
.almc-video iframe, .almc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 1025px) {
	.almc-reader { padding: var(--sp-6); }
	.almc-video { max-width: 900px; margin-inline: auto; }
}

/* ==========================================================================
   19. Agenda widget - three option cards in a row on desktop
   ========================================================================== */

.almc-agenda {
	box-sizing: border-box;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-5);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
}
.almc-agenda *, .almc-agenda *::before, .almc-agenda *::after { box-sizing: border-box; }

.almc-agenda__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.almc-agenda__badge {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-pill);
	background: var(--grad-warm);
	color: var(--warm-700);
}
.almc-agenda__title { margin: 0; font-family: var(--font-title); font-size: var(--fs-h2); font-weight: 600; color: var(--ink); }
.almc-agenda__count { margin: 2px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--soft-text); }
.almc-agenda__lead { margin: 0 0 var(--sp-1); }
.almc-agenda__service { margin: 0 0 var(--sp-4); font-size: var(--fs-small); font-weight: 600; color: var(--soft-text); }

.almc-agenda__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
}
.almc-agenda__option {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-4);
	border: 0;
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
	transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.almc-agenda__option[data-almc-gone] { opacity: .45; }
.almc-agenda__when { display: grid; gap: 2px; min-width: 0; }
.almc-agenda__day { font-family: var(--font-title); font-size: var(--fs-lead); font-weight: 600; color: var(--g-800); text-transform: capitalize; }
.almc-agenda__time { font-family: var(--font-title); font-size: var(--fs-huge); font-weight: 700; line-height: 1.1; color: var(--ink); }
.almc-agenda__zone { font-size: var(--fs-small); color: var(--soft-text); }
.almc-agenda__btn { width: 100%; }
.almc-agenda__btn[disabled] { opacity: .5; cursor: default; }
.almc-agenda__note, .almc-agenda__empty {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--g-100);
	color: var(--g-800);
}
.almc-agenda__note[hidden] { display: none; }
.almc-agenda__note--done { font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
	.almc-agenda__option:hover { box-shadow: var(--e3); transform: translateY(-2px); }
}

@media (min-width: 1025px) {
	.almc-agenda { padding: var(--sp-6); }
	/* three option cards in a row, each centred, one CTA per card */
	.almc-agenda__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.almc-agenda__option { justify-items: center; text-align: center; padding: var(--sp-5) var(--sp-4); }
	.almc-agenda__when { justify-items: center; }
	.almc-agenda__btn--ghost { width: auto; }
}

/* ==========================================================================
   20. Registro: the two-column sale
   ========================================================================== */

.almc-reg-layout { display: grid; gap: var(--gutter); align-items: start; }

.almc-reg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}
.almc-reg-card {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--sp-3);
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--e2);
}
.almc-reg-card__cover {
	position: relative;
	min-height: 96px;
	margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) 0;
	border-radius: var(--r-md) var(--r-md) 0 0;
	background: var(--grad-forest);
}
.almc-reg-card__cover::before {
	content: "";
	position: absolute;
	top: -12px; right: -10px;
	width: 150px; height: 118px;
	background: var(--molecules-dark) no-repeat;
	background-size: contain;
	opacity: .14;
	pointer-events: none;
}
.almc-reg-card__price {
	font-family: var(--font-title);
	font-size: var(--fs-huge);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
}
.almc-reg-card__meta { font-size: var(--fs-small); color: var(--soft-text); }
.almc-reg-includes { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.almc-reg-includes li { display: flex; align-items: center; gap: var(--sp-2); }
.almc-reg-includes .almc-reg-icon { color: var(--g-600); flex: none; }

@media (min-width: 601px) {
	.almc-reg-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
	/* the program card becomes a banner so it does not eat the first screen */
	.almc-reg-card--program { grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
	.almc-reg-card--program .almc-reg-card__cover {
		grid-row: 1 / -1;
		margin: calc(var(--sp-5) * -1) 0 calc(var(--sp-5) * -1) calc(var(--sp-4) * -1);
		border-radius: var(--r-md) 0 0 var(--r-md);
		min-height: 100%;
	}
}

@media (min-width: 1025px) {
	.almc-reg-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.almc-reg-aside {
		grid-column: span 5;
		position: sticky;
		top: var(--sp-6);
		align-self: start;
	}
	.almc-reg-steps { grid-column: span 7; display: grid; gap: var(--gutter); min-width: 0; }
	/* back to a vertical card in the sticky rail */
	.almc-reg-card--program { grid-template-columns: 1fr; }
	.almc-reg-card--program .almc-reg-card__cover {
		grid-row: auto;
		min-height: 140px;
		margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
		border-radius: var(--r-md) var(--r-md) 0 0;
	}
	.almc-reg-card { padding: var(--sp-5); }
	.almc-reg-card__price { font-size: var(--fs-display); }
	/* paired fields share a row */
	.almc-reg-form { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); max-width: 640px; }
	.almc-reg-form > .almc-reg-field--full,
	.almc-reg-form > .almc-reg-btn,
	.almc-reg-form > .almc-reg-error--block { grid-column: 1 / -1; }
	/* the thank-you page stays calm: one centred column */
	.almc-reg--gracias { max-width: 720px; }
}

/* ==========================================================================
   21. Perfil: the staff strip (dense, not premium)
   ========================================================================== */

.almc-perfil {
	display: grid;
	gap: var(--sp-3);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--text);
	background: var(--page-alt);
	padding: var(--sp-3);
	border-radius: var(--r-md);
}
.almc-perfil-card {
	display: grid;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--card);
	box-shadow: var(--e1);
}
.almc-perfil-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.almc-perfil-head h2 { margin: 0; font-family: var(--font-title); font-size: var(--fs-lead); color: var(--ink); }
.almc-perfil-sub { margin: 0; color: var(--soft-text); }

/* flags as toggle chips */
.almc-perfil-flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.almc-perfil-flag {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: 4px 12px;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	background: var(--page-alt);
	color: var(--soft-text);
	cursor: pointer;
	transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.almc-perfil-flag input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.almc-perfil-flag:has(input:checked),
.almc-perfil-flag.is-on {
	background: var(--warm-100);
	border-color: var(--warm-700);
	color: var(--warm-700);
}
.almc-perfil-flag:focus-within { outline: 3px solid var(--g-600); outline-offset: 2px; }
.almc-perfil-arg { width: 96px; min-height: 32px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); }
.almc-perfil-blocks { font-style: normal; font-size: 14px; color: var(--soft-text); }

/* scores as rings */
.almc-perfil-aspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.almc-perfil-aspect { display: grid; justify-items: center; gap: var(--sp-1); text-align: center; }
.almc-perfil-aspect svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.almc-perfil-aspect-value { font-family: var(--font-title); font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }
.almc-perfil-aspect-value.is-empty { font-size: var(--fs-small); font-weight: 600; color: var(--soft-text); }
.almc-perfil-aspect-label { font-size: 14px; color: var(--soft-text); }
.almc-perfil-save { min-height: var(--tap); }

@media (max-width: 600px) {
	.almc-perfil-actions {
		position: sticky;
		bottom: 0;
		padding: var(--sp-2) 0;
		background: var(--card);
	}
	.almc-perfil-save { width: 100%; }
}

@media (min-width: 1025px) {
	.almc-perfil { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.almc-perfil > * { grid-column: 1 / -1; }
	.almc-perfil-aspects { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.almc-perfil-note { grid-column: span 8; }
	.almc-perfil-audit { grid-column: span 4; }
}

/* ==========================================================================
   22. Entrance motion - the hero and the first row only
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.almc-rise { animation: almc-rise var(--t-slow) var(--ease-out) both; }
	.almc-rise--1 { animation-delay: 60ms; }
	.almc-rise--2 { animation-delay: 120ms; }
	.almc-rise--3 { animation-delay: 180ms; }
}

@keyframes almc-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   23. Reduced motion - the last word
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.almc-cuenta *, .almc-cuenta *::before, .almc-cuenta *::after,
	.almc-reg *, .almc-reg *::before, .almc-reg *::after,
	.almc-agenda *, .almc-perfil *,
	.almc-topbar, .almc-footer, .almc-tabbar {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   24. One thing at a time: widgets, the quiet next line, a stage still ahead,
       and the household reminder
   ========================================================================== */

/* A widget is a card with a title, one line and one action. It never grows a
   paragraph: the rule is in the CSS as well as in the copy, so a long text
   pasted into one is visibly wrong instead of quietly accepted. */
.almc-w { display: grid; gap: var(--sp-3); align-content: start; }
.almc-w__say {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.35;
	color: var(--text);
}
/* What has to be done now is a chip, printed by almc_ui_chip( 'Ahora', … ) — never a rail on the card. */

/* The step after this one. A line, never a button: it says where the road
   goes without asking anybody to walk two parts of it at once. */
.almc-hint {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--soft-text);
}

/* One quiet fact, standing on its own. */
.almc-quiet {
	margin: 0;
	padding: var(--sp-3) 0;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--soft-text);
}

/* ------------------------------------------------ a stage still ahead.
   Etapa 1 is not finished, so Etapa 2 and Etapa 3 are one line each. Grey, and
   still a door: the number and the name are --text (9:1 on this ground), the
   sentence --soft-text (7:1), and the button is a real ghost button nobody has
   disabled. A disabled control tells a person they did something wrong; this
   one tells them where they are. */
.almc-ahead {
	/* A line, so it takes the whole row of the stage grid and never a column
	   300px wide that turns its title into a ladder of single words. */
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #F7F7F7;
}
.almc-ahead__num {
	flex: none;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #E8E8E8;
	color: var(--text);
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 700;
}
.almc-ahead__body { min-width: 0; flex: 1 1 auto; }
.almc-ahead__title {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--text);
}
.almc-ahead__note {
	margin: 2px 0 0;
	font-size: var(--fs-small);
	color: var(--soft-text);
}
.almc-ahead__go { flex: none; }

@media (max-width: 600px) {
	.almc-ahead { flex-wrap: wrap; }
	.almc-ahead__go { width: 100%; }
}

/* ------------------------------------------------ the household reminder.
   A strip, never a dialog: it does not take the screen, it does not wait for an
   answer, and both of its answers are ordinary buttons. */
.almc-nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--warm-300);
	border-radius: var(--r-lg);
	background: var(--warm-50);
}
.almc-nudge__mark {
	flex: none;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--warm-100);
	color: var(--warm-700);
}
.almc-nudge__say {
	flex: 1 1 16ch;
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--ink);
}
.almc-nudge__count { font-weight: 400; color: var(--text); }
.almc-nudge__go, .almc-nudge__no { flex: none; }

@media (max-width: 600px) {
	.almc-nudge__go, .almc-nudge__no { flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------
   19. Icon tones — colour as the answer to one question
   -----------------------------------------------------------------------
   An icon says WHICH mark on a screen is the single next action, and nothing
   else. Green is that one; everything merely present is grey; a notice is
   amber; something being explained is blue. The word beside the icon always
   says the same thing, so colour is never the only signal.

   Measured against the surfaces these are painted on — --card #FFFFFF and
   --page #FAF7F0. A stroked icon is a graphic, so 3:1 is its floor and all
   four clear it with room:

     --g-600    #40724D  on #FFFFFF  6.14:1   on #FAF7F0  5.79:1
     --soft-text #5F5F5F on #FFFFFF  6.49:1   on #FAF7F0  6.12:1
     --warm-700 #8A4A12  on #FFFFFF  7.03:1   on #FAF7F0  6.63:1
     --info-700 #1F5673  on #FFFFFF  7.96:1   on #FAF7F0  7.51:1

   --info-700 is the one colour this block adds to the kit. The palette had no
   information tone at all, so every surface that meant "this is an explanation"
   reached for the green that means "press this" or invented a hex of its own.
   ------------------------------------------------------------------------ */

.almc-cuenta, .almc-reg, .almc-perfil, .almc-agenda, .almc-acc {
	--info-700: #1F5673;
	--info-100: #E3EEF4;
}

.almc-icon--go   { color: var(--g-600, #40724D); }
.almc-icon--soft { color: var(--soft-text, #5F5F5F); }
.almc-icon--warn { color: var(--warm-700, #8A4A12); }
.almc-icon--info { color: var(--info-700, #1F5673); }