/* ==========================================================================
   Memorias de impacto (landings 2025 y 2024)
   - 2025: mosaico de colores de la memoria sobre la base de la web.
   - 2024: rojo, negro e ilustraciones de línea de la memoria.
   Accesibilidad: el texto va siempre sobre fondos lisos con contraste AA;
   los colores vivos solo como fondo de bloques con texto oscuro o como decoración.
   Las animaciones solo se activan con JS (.mem-js) y respetan «reducir movimiento».
   ========================================================================== */

.mem {
	--m-tinta: #1a0a0b;
	--m-rosa: #ff9eff;
	--m-menta: #78ffd9;
	--m-amarillo: #ffe94d;
	--m-cian: #18f3e9;
	--m-lila: #c7b3ff;
	--m-coral: #ff9e87;
	--m-naranja: #ff962e;
	--m-azul: #8fb0ff;
	--m-magenta: #ff00f2;
	--m-r24: #b21a17;
	overflow-x: clip;
}

/* ---------- Estructura común ---------- */
.mem-section { padding-block: clamp(64px, calc(64px + (100vw - 424px) * 0.05512), 120px); }
.mem-title { max-width: 920px; margin: 16px 0 24px; color: var(--granate); }
.mem .pill { margin: 0; }
.mem-intro { max-width: 760px; margin: 0 0 40px; font-size: calc(clamp(18px, calc(18px + (100vw - 424px) * 0.00394), 22px) * var(--a11y-fs, 1)); line-height: 1.45; }
.mem-ico { flex: none; width: 28px; height: 28px; }

/* Cabecera */
.mem-hero { position: relative; padding-block: clamp(32px, calc(32px + (100vw - 424px) * 0.03937), 72px) clamp(56px, calc(56px + (100vw - 424px) * 0.04724), 104px); }
.mem-hero__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 64rem) { .mem-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } }
.mem-hero__text { display: grid; justify-items: start; gap: 20px; }
.mem-hero__text > * { margin: 0; }
.mem-hero .breadcrumbs ol { justify-content: flex-start; }
.mem-hero__title { font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(44px, calc(44px + (100vw - 424px) * 0.02953), 74px) * var(--a11y-fs, 1)); line-height: 1.02; letter-spacing: -0.01em; color: var(--m-tinta); }
.mem-hero__year { position: relative; display: block; width: fit-content; margin-top: 6px; font-size: 1.45em; line-height: 1; }
.mem-hero__year::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 0.16em; border-radius: 4px; background: var(--m-menta); transform-origin: left; }
.mem-hero__lead { max-width: 560px; font-size: calc(clamp(18px, calc(18px + (100vw - 424px) * 0.00394), 22px) * var(--a11y-fs, 1)); line-height: 1.45; }
.mem-hero__art { position: relative; }
.mem-hero__img { display: block; width: 100%; height: auto; border-radius: 24px; }

/* Botones */
.mem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.mem-actions .cta .mem-ico { width: 20px; height: 20px; }
.mem-actions .cta { flex-wrap: wrap; }
.mem-actions__meta { font-weight: 400; }
.mem-actions__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--rojo); text-underline-offset: 4px; }
.mem-actions__link .mem-ico { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.mem-actions__link:hover .mem-ico, .mem-actions__link:focus-visible .mem-ico { transform: translateX(4px); }

/* Cifras animadas: el número visible es decorativo; el lector lee el texto oculto. */
.mem-num { display: inline; }
.mem-num__pre { font-size: 0.42em; font-weight: 600; vertical-align: 0.5em; }
.mem-num__val { font-variant-numeric: tabular-nums; }

/* ---------- Cifras ---------- */
.mem-stats__grid { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mem-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mem-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .mem-stat { min-height: 220px; padding: 28px; } }
.mem-stat { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 24px; border-radius: 20px; background: var(--blanco); color: var(--m-tinta); transition: transform 300ms var(--ease); }
.mem-stat > p { margin: 0; }
.mem-stat__num { font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(44px, calc(44px + (100vw - 424px) * 0.01772), 62px) * var(--a11y-fs, 1)); line-height: 1; }
.mem-stat__label { font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.35; }

/* ---------- Carta ---------- */
.mem-letter__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 64rem) { .mem-letter__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }
.mem-letter__photo { width: 100%; height: auto; border-radius: 24px; }
.mem-letter__ill { width: min(100%, 460px); height: auto; justify-self: center; }
.mem-letter__text > p:not(.pill) { max-width: 640px; margin: 0 0 16px; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.55; }
.mem-quote { position: relative; margin: 8px 0 28px; padding: 0; } /* Comillas tipográficas en el texto, como en Conoce XUL. */
.mem-quote > .mem-ico { position: absolute; left: 0; top: 2px; width: 40px; height: 40px; color: var(--rojo); }
.mem-quote blockquote { margin: 0; }
.mem-quote blockquote p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(clamp(21px, calc(21px + (100vw - 424px) * 0.00591), 27px) * var(--a11y-fs, 1)); line-height: 1.3; color: var(--m-tinta); }
.mem-quote figcaption { margin-top: 12px; font-size: calc(15px * var(--a11y-fs, 1)); }
.mem-quote--big { max-width: 880px; margin-inline: auto; }

/* ---------- Áreas de impacto ---------- */
.mem-areas__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mem-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mem-areas__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mem-area { grid-column: span 2; } .mem-area:nth-child(4) { grid-column: 2 / span 2; } }
.mem-area { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: 20px; background: var(--blanco); }
.mem-area > * { margin: 0; }
.mem-area:nth-child(1) { --c: var(--m-cian); } .mem-area:nth-child(2) { --c: var(--m-rosa); } .mem-area:nth-child(3) { --c: var(--m-amarillo); } .mem-area:nth-child(4) { --c: var(--m-menta); } .mem-area:nth-child(5) { --c: var(--m-naranja); }
.mem-area__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c); color: var(--m-tinta); }
.mem-area__num { color: var(--naranja-texto); }
.mem-area h3 { color: var(--granate); }
.mem-area__shift { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border-radius: 12px; background: var(--papel); font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.3; }
.mem-area__shift .mem-ico { width: 18px; height: 18px; color: var(--rojo); }
.mem-area__shift span:last-child { font-weight: 700; color: var(--granate); }

/* ---------- Escalera del impacto ---------- */
.mem-ladder { background: var(--blanco); }
.mem-ladder__inner { display: grid; gap: 40px; }
@media (min-width: 64rem) { .mem-ladder__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } }
.mem-ladder__head > p:not(.pill) { max-width: 520px; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.55; }
.mem-ladder__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mem-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.mem-step__n { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--m-tinta); color: var(--blanco); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.mem-step__text { font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.3; }
.mem-step__text strong { display: block; font-size: calc(17px * var(--a11y-fs, 1)); color: var(--granate); }
.mem-step__bar { grid-column: 2; grid-row: 2; height: 10px; width: calc(28% + var(--i) * 12%); border-radius: 6px; background: linear-gradient(90deg, var(--m-cian), var(--m-menta), var(--m-amarillo), var(--m-naranja), var(--m-rosa)); background-size: 700% 100%; background-position: calc(var(--i) * 16.6%) 0; transform-origin: left; }

/* ---------- Proyectos ---------- */
.mem-projects__photo { display: block; width: 100%; height: auto; max-height: 520px; margin: 8px 0 40px; border-radius: 24px; object-fit: cover; }
.mem-projects__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .mem-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .mem-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.mem-project { display: grid; align-content: start; gap: 10px; padding: 26px 26px 28px; border-radius: 20px; background: var(--blanco); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.mem-project > * { margin: 0; }
.mem-project__org { font-weight: 700; font-size: calc(13px * var(--a11y-fs, 1)); line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--malva-grafito); }
.mem-project__title { color: var(--granate); }
.mem-project__text { font-size: calc(16px * var(--a11y-fs, 1)); line-height: 1.45; }
.mem-project__figs { display: grid; gap: 10px; margin-top: 6px !important; padding: 14px 0 0; border-top: 1px dashed var(--malva-medio); list-style: none; font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.3; }
.mem-project__fig { display: block; font-family: var(--font-display); font-weight: 800; font-size: calc(28px * var(--a11y-fs, 1)); line-height: 1.05; color: var(--m-tinta); }
.mem-project--cian { --c: var(--m-cian); } .mem-project--rosa { --c: var(--m-rosa); } .mem-project--amarillo { --c: var(--m-amarillo); } .mem-project--menta { --c: var(--m-menta); }
.mem-project--lila { --c: var(--m-lila); } .mem-project--coral { --c: var(--m-coral); } .mem-project--naranja { --c: var(--m-naranja); } .mem-project--azul { --c: var(--m-azul); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mem-project:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgb(65 15 17 / 0.1); }
	.mem-stat:hover { transform: translateY(-4px) rotate(-0.6deg); }
}

/* ---------- Planeta ---------- */
.mem-planet { background: var(--granate); color: var(--blanco); }
.mem-planet .mem-title { color: var(--blanco); }
.mem-hl { color: var(--m-menta); }
.mem-planet__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .mem-planet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .mem-planet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mem-planet__grid li { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 20px; font-size: calc(16px * var(--a11y-fs, 1)); line-height: 1.4; }
.mem-planet__grid .mem-ico { color: var(--m-menta); }
.mem-planet__num { font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(34px, calc(34px + (100vw - 424px) * 0.00984), 44px) * var(--a11y-fs, 1)); line-height: 1; color: var(--blanco); }
.mem-planet__goal { display: flex; gap: 14px; align-items: flex-start; max-width: 900px; margin: 32px 0 0; padding: 20px 24px; border-radius: 16px; background: rgb(255 255 255 / 0.08); font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.45; }
.mem-planet__goal .mem-ico { color: var(--m-menta); }

/* ---------- Aprendizajes ---------- */
.mem-learn__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: l; }
@media (min-width: 64rem) { .mem-learn__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.mem-learn__list li { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: 20px; background: var(--blanco); }
.mem-learn__list li > * { margin: 0; }
.mem-learn__list .mem-ico { width: 40px; height: 40px; color: var(--rojo); }
.mem-learn__list h3 { color: var(--granate); }

/* ---------- Cierre ---------- */
.mem-close__inner { display: grid; justify-items: center; gap: 28px; text-align: center; }
.mem-close__inner > * { margin: 0; }
.mem-close .mem-title { margin-inline: auto; }
.mem-close .mem-quote { text-align: left; }
.mem-close .mem-actions { justify-content: center; }
.mem-credits { max-width: 640px; font-size: calc(14px * var(--a11y-fs, 1)); color: var(--malva-grafito); }

/* ==========================================================================
   2025: mosaico de colores
   ========================================================================== */
.mem--2025 .mem-stat--rosa { background: var(--m-rosa); } .mem--2025 .mem-stat--menta { background: var(--m-menta); }
.mem--2025 .mem-stat--amarillo { background: var(--m-amarillo); } .mem--2025 .mem-stat--cian { background: var(--m-cian); }
.mem--2025 .mem-stat--lila { background: var(--m-lila); } .mem--2025 .mem-stat--coral { background: var(--m-coral); }
.mem--2025 .mem-stat .mem-ico { width: 36px; height: 36px; }
/* Formas decorativas de la portada */
.mem-shape { position: absolute; display: block; pointer-events: none; }
.mem-shape--circle { right: -18px; bottom: -22px; width: clamp(64px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--m-amarillo); }
.mem-shape--diamond { left: -16px; top: 18%; width: clamp(36px, 4.5vw, 56px); aspect-ratio: 1; background: var(--m-magenta); transform: rotate(45deg); }
.mem-shape--arc { left: 22%; bottom: -28px; width: clamp(48px, 6vw, 80px); aspect-ratio: 1; border: 10px solid var(--m-cian); border-color: var(--m-cian) transparent transparent var(--m-cian); border-radius: 50%; transform: rotate(-45deg); }

/* ==========================================================================
   2024: rojo, negro e ilustración de línea
   ========================================================================== */
.mem--2024 .mem-hero { background: var(--m-r24); color: var(--blanco); }
.mem--2024 .mem-hero__title { color: var(--blanco); }
.mem--2024 .mem-hero__year::after { background: var(--blanco); }
.mem--2024 .mem-hero .breadcrumbs, .mem--2024 .mem-hero .breadcrumbs a { color: var(--blanco); }
.mem--2024 .mem-hero__img { border-radius: 0; max-width: 520px; margin-inline: auto; }
.mem--2024 .mem-actions__link { color: var(--rojo); }
.mem--2024 .on-dark .mem-actions__link { color: var(--blanco); }
.mem--2024 .mem-title .t-accent { color: var(--m-r24); }
.mem--2024 .mem-stat { border: 2px solid var(--m-tinta); }
.mem--2024 .mem-stat__num { color: var(--m-r24); }
.mem--2024 .mem-stat .mem-ico { width: 34px; height: 34px; }
.mem--2024 .mem-quote > .mem-ico { color: var(--m-r24); }
.mem-subtitle { margin: 40px 0 20px; color: var(--granate); }
.mem-cards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mem-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mem-card { display: grid; align-content: start; gap: 10px; padding: 24px; border: 2px solid var(--m-tinta); border-radius: 18px; background: var(--blanco); }
.mem-card > * { margin: 0; }
.mem-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--m-r24); color: var(--blanco); }
.mem-card__title { font-family: var(--font-display); font-weight: 700; font-size: calc(20px * var(--a11y-fs, 1)); line-height: 1.2; color: var(--granate); }
.mem-cards--outline .mem-card { border-color: var(--m-r24); }
.mem-model { background: var(--m-tinta); color: var(--blanco); }
.mem-model .mem-title { color: var(--blanco); }
.mem--2024 .mem-hl { color: #ff8f80; }
.mem-model__inner { display: grid; gap: 48px; align-items: center; }
@media (min-width: 64rem) { .mem-model__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 72px; } }
.mem-checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mem-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.45; }
.mem-checks .mem-ico { margin-top: 1px; color: #ff8f80; }
.mem-dial { position: relative; width: min(100%, 320px); margin-inline: auto; }
.mem-dial svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.mem-dial circle { fill: none; stroke-width: 10; }
.mem-dial__track { stroke: rgb(255 255 255 / 0.15); }
.mem-dial__bar { stroke: #ff5a4a; stroke-linecap: round; stroke-dasharray: calc(var(--v) * 100) 100; }
.mem-dial__text { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(52px, 7vw, 76px) * var(--a11y-fs, 1)); line-height: 1; }
.mem-dial__text > span:last-child { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--a11y-fs, 1)); letter-spacing: 0.1em; text-transform: uppercase; }
.mem-pillar { display: grid; gap: 24px; align-items: center; padding-block: 40px; border-top: 2px solid var(--m-tinta); }
.mem-pillar:first-of-type { margin-top: 24px; }
@media (min-width: 64rem) {
	.mem-pillar { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; }
	.mem-pillar--rev > img { order: 2; }
}
.mem-pillar__ill { width: min(100%, 360px); height: auto; justify-self: center; }
.mem-pillar h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; color: var(--granate); }
.mem-pillar__n { font-size: 0.6em; color: var(--m-r24); }
.mem-pillar p { max-width: 680px; margin: 0 0 16px; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.55; }
.mem-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mem-list li { position: relative; padding-left: 28px; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.5; }
.mem-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 2px; background: var(--m-r24); box-shadow: 0 -4px 0 var(--m-r24), 0 4px 0 var(--m-r24); transform: skewX(-25deg); }
.mem-figs { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mem-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mem-figs li { padding: 14px 16px; border-radius: 14px; background: var(--blanco); font-size: calc(15px * var(--a11y-fs, 1)); line-height: 1.35; }
.mem-figs .mem-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: calc(30px * var(--a11y-fs, 1)); line-height: 1.1; color: var(--m-r24); }
.mem--2024 .mem-close { background: var(--m-r24); color: var(--blanco); }
.mem--2024 .mem-close .mem-title { color: var(--blanco); }
.mem--2024 .mem-close .mem-hl { color: var(--blanco); text-decoration: none; }
.mem-close__ill { width: min(70%, 300px); height: auto; }

/* ==========================================================================
   Movimiento (solo con JS y sin «reducir movimiento»)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Solo movimiento, nunca transparencia: el texto mantiene su contraste en todo momento
	   (también si alguien pasa un validador antes de hacer scroll). */
	html:not(.a11y-motion) .mem-js .mem-reveal { transform: translateY(32px) scale(0.98); transition: transform 800ms var(--ease); }
	html:not(.a11y-motion) .mem-js .mem-reveal.is-in { transform: none; }
	html:not(.a11y-motion) .mem-js .mem-stats__grid .mem-reveal:nth-child(3n+2), html:not(.a11y-motion) .mem-js .mem-projects__grid .mem-reveal:nth-child(3n+2) { transition-delay: 90ms; }
	html:not(.a11y-motion) .mem-js .mem-stats__grid .mem-reveal:nth-child(3n), html:not(.a11y-motion) .mem-js .mem-projects__grid .mem-reveal:nth-child(3n) { transition-delay: 180ms; }

	/* Escalera: las barras crecen de una en una. */
	html:not(.a11y-motion) .mem-js .mem-step__bar { transform: scaleX(0); transition: transform 900ms var(--ease) calc(var(--i) * 120ms); }
	html:not(.a11y-motion) .mem-js .mem-ladder__steps.is-in .mem-step__bar { transform: none; }

	/* Dial B Corp: el anillo se rellena. */
	html:not(.a11y-motion) .mem-js .mem-dial__bar { stroke-dasharray: 0 100; transition: stroke-dasharray 1600ms var(--ease); }
	html:not(.a11y-motion) .mem-js .mem-dial.is-in .mem-dial__bar { stroke-dasharray: calc(var(--v) * 100) 100; }

	/* Portada: entrada de las formas y del subrayado del año (una sola vez). */
	html:not(.a11y-motion) .mem-js .mem-hero__year::after { animation: mem-grow 900ms var(--ease) 300ms both; }
	html:not(.a11y-motion) .mem-js .mem-shape { animation: mem-pop 800ms var(--ease) both; }
	html:not(.a11y-motion) .mem-js .mem-shape--diamond { animation-delay: 150ms; }
	html:not(.a11y-motion) .mem-js .mem-shape--arc { animation-delay: 300ms; }
	/* Ilustraciones: un balanceo suave que se detiene solo (menos de 5 s). */
	html:not(.a11y-motion) .mem-js .mem-float { animation: mem-float 2200ms ease-in-out 2 alternate; }
}
@keyframes mem-grow { from { transform: scaleX(0); } }
@keyframes mem-pop { from { scale: 0; } }
@keyframes mem-float { to { transform: translateY(-10px) rotate(-1.5deg); } }