/* Hallmark · macrostructure: Marquee Hero → Long Document · nav: N3 side-rail ("el eje") · footer: Ft5 statement
 * theme: Axis Vertex brand (Noir / Ivory, locked tokens) · genre: editorial · enrichment: none (type + axis geometry + Lucide icons)
 * scroll-craft grammar: chaptered editorial · signature: el eje (un eje que sella un vértice por capítulo y por servicio)
 * devices: parallax (portada) · sticky + sellado (presencia digital) · in escalonado (trámites) · reveal (títulos y banda)
 * source of truth for copy: "Axis Vertex Flyer.pdf" (bilingüe, sin precio)
 * pre-emit critique: P4 H4 E4 S4 R4 V4 · contrast: pass (40-41) · nav: N3 · footer: Ft5 · slop: pass (42-45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57) */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap");
@import url("tokens.css");

*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: light;
  background-color: var(--color-ivory);
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-line) var(--color-onyx);
}

html[data-ground="ivory"] { background-color: var(--color-ivory); }
html[data-ground="noir"],
html[data-ground="noir"] body { background-color: var(--color-onyx); }

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-gold); color: var(--color-onyx); }

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 4px;
}
[data-theme="ivory"] :focus-visible { outline-color: var(--color-bronze-deep); }

/* ───────── Bordes de pantalla completa (iOS) ───────── */

.edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 15;
  pointer-events: none;
  background-color: var(--color-ivory);
}
.edge--top { top: 0; height: calc(env(safe-area-inset-top, 0px) + 12px); }
.edge--bottom { bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.edge[data-ground="ivory"] { background-color: var(--color-ivory); }
.edge[data-ground="noir"] { background-color: var(--color-onyx); }

/* ───────── Tipografía compartida ───────── */

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.display-lg {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--color-accent);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Segunda lengua: cursiva, apagada, siempre debajo de la primera */
.en {
  margin: 0;
  font-style: italic;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

/* ───────── Iconos (Lucide, ISC) ───────── */

.sprite { position: absolute; }

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ───────── Botón: recto, una sola etiqueta en todo el sitio ───────── */

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  align-self: start;
  padding: var(--space-3) var(--space-4);
  border: var(--rule) solid var(--color-accent-strong);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cta:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--color-accent-strong); color: var(--color-on-accent); }
  [data-theme="ivory"] .cta:hover { background: var(--color-bronze-deep); color: var(--color-ivory); }
}

/* Enlace tipográfico */
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--color-line);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; color: var(--color-accent-strong); }
}

/* ───────── El eje (nav lateral) ───────── */

.eje {
  --rail-line: var(--color-bronze);
  --rail-seal: var(--color-gold);
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  z-index: 20;
  width: var(--rail-w);
  pointer-events: none;
}
html[data-ground="ivory"] .eje {
  --rail-line: var(--color-gold-antique);
  --rail-seal: var(--color-bronze);
}

.eje__track {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: calc(var(--rail-w) / 2);
  width: var(--rule);
  background: var(--rail-line);
  opacity: 0.55;
}
.eje__fill {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: calc(var(--rail-w) / 2);
  width: var(--rule);
  background: var(--rail-seal);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.eje__list { list-style: none; margin: 0; padding: 0; }

.eje__stop {
  position: absolute;
  left: 0;
  top: calc(24px + (100% - 48px) * var(--f, 0));
  width: var(--rail-w);
  height: 0;
  pointer-events: auto;
}
.eje__link {
  position: absolute;
  left: calc((var(--rail-w) - 44px) / 2);
  top: -22px;
  width: 44px;
  height: 44px;
  display: block;
  color: var(--rail-seal);
}
.eje__gem {
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: var(--rule) solid var(--rail-line);
  background: transparent;
  transform: rotate(45deg);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.eje__stop.is-sealed .eje__gem {
  background: var(--rail-seal);
  border-color: var(--rail-seal);
  animation: seal var(--dur-seal) var(--ease-out);
}
.eje__stop.is-current .eje__gem { scale: 1.5; }
.eje__link:active .eje__gem { scale: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .eje__link:hover .eje__gem { background: var(--rail-seal); border-color: var(--rail-seal); }
  .eje__link:hover .eje__label { opacity: 1; }
}

@keyframes seal {
  from { transform: rotate(45deg) scale(1.7); }
  to   { transform: rotate(45deg) scale(1); }
}

.eje__label {
  position: absolute;
  left: calc(50% + 14px);
  top: 14px;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rail-seal);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.eje__stop:last-child .eje__label { top: auto; bottom: 14px; }
.eje__stop.is-current .eje__label { opacity: 1; }
@media (max-width: 700px) { .eje__label { display: none; } }

/* ───────── Estructura de capítulos ───────── */

.chapter {
  position: relative;
  background: var(--color-surface);
  color: var(--color-ink);
  padding-top: var(--space-section);
  padding-bottom: calc(var(--space-section) + env(safe-area-inset-bottom, 0px));
  padding-inline: calc(var(--rail-w) + clamp(16px, 4vw, 64px)) clamp(16px, 5vw, 80px);
}

.chapter__inner {
  max-width: 1160px;
  margin-inline: auto;
}

/* ───────── Portada ───────── */

/* En el teléfono la página abre ya desplazada 48 px (ver script.js): en scrollY = 0 Safari 26 muestra
   un color de reserva en las barras; con un poco de scroll ya toma el color real de la página. */
@media (pointer: coarse) {
  :root { --runway: 48px; }
}

.portada {
  --sy: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  padding-top: calc(var(--space-6) + var(--runway, 0px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-6) * 1.5 + env(safe-area-inset-bottom, 0px));
}

.portada__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .portada__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-6); }
}

.portada__copy {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  position: relative;
  z-index: 2;
  transform: translate3d(0, calc(var(--sy) * -0.06px), 0);
}

.portada__title { margin: var(--space-2) 0 0; display: grid; gap: 0; overflow-wrap: anywhere; min-width: 0; }
.portada__title-a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display-xl);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-wrap: balance;
}
.portada__title-b {
  font-family: var(--font-serif);
  font-style: italic;            /* la frase del flyer: se conserva tal cual */
  font-weight: 600;
  font-size: calc(var(--text-display-xl) * 1.15);
  line-height: 1.02;
  color: var(--color-accent);
  text-wrap: balance;
}
.portada__sub { font-size: var(--text-lead); line-height: 1.3; }
.portada__intro { margin: var(--space-2) 0 0; max-width: 44ch; text-wrap: pretty; }
.portada__intro .en { display: block; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.4; }
.portada__copy .cta { margin-top: var(--space-3); }

/* La pirámide: 13 hiladas, el ojo sobre el vértice y el medallón por delante */
.portada__stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 600 / 640;
  justify-self: center;
  order: -1;
}
@media (min-width: 900px) { .portada__stage { order: 0; } }
@media (max-width: 899px) { .portada__stage { width: min(62vw, 300px); justify-self: start; } }
@media (max-width: 599px) {
  .portada__stage { width: min(58vw, 224px); }
  .piramide__axes { display: none; }          /* ninguna línea cruza el texto en el teléfono */
}

.piramide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(0, calc(var(--sy) * 0.08px), 0);
  will-change: transform;
}
.piramide * { transform-box: view-box; }

.piramide__axes line { stroke: var(--color-line); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }

.piramide .course {
  fill: var(--color-accent);
  fill-opacity: 0.07;
  stroke: var(--color-line);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: course-in 700ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms + 200ms);
}
.piramide .course--top { stroke: var(--color-accent); fill-opacity: 0.16; }
.piramide .joints line { stroke: var(--color-line); stroke-width: 1; opacity: 0.4; vector-effect: non-scaling-stroke; }
@keyframes course-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.piramide .eye { transform-origin: 300px 96px; opacity: 0; animation: eye-in 1000ms var(--ease-out) forwards 1400ms; }
@keyframes eye-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.piramide .eye polygon,
.piramide .eye path,
.piramide .eye circle { fill: none; stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.piramide .eye__pupil { fill: var(--color-accent); stroke: none; }
.piramide .rays line { stroke: var(--color-accent); stroke-width: 1.4; opacity: 0.75; vector-effect: non-scaling-stroke; }
.piramide .rays { transform-origin: 300px 88px; animation: rays 140s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.piramide .eye__pulse { transform-origin: 300px 102px; opacity: 0; animation: pulse 4s ease-out infinite 2400ms; }
@keyframes pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

/* Medallón con su anillo, por delante de la pirámide */
.portada__seal {
  position: absolute;
  left: 22%;
  top: 35.7%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  transform: translate3d(0, calc(var(--sy) * -0.035px), 0);
}
.portada__seal picture,
.portada__seal img { display: block; width: 100%; height: 100%; border-radius: var(--radius-round); }
.portada__seal::after {
  content: "";
  position: absolute;
  inset: -5%;
  border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-round);
  pointer-events: none;
}

/* ───────── Pilares y servicios: un landing largo ───────── */

.head {
  min-height: 78svh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-section);
  padding-inline: calc(var(--rail-w) + clamp(16px, 4vw, 64px)) clamp(16px, 5vw, 80px);
}
.head__glyph { width: 56px; height: 56px; color: var(--color-accent); }
.head__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 4.6vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.head__en { font-size: var(--text-lead); }

.svc {
  position: relative;
  height: 170svh;                  /* ~70 vh de recorrido para la escena y el resto para leerla */
  background-color: var(--color-surface);
  color: var(--color-ink);
  padding-inline: calc(var(--rail-w) + clamp(12px, 3vw, 48px)) clamp(12px, 3vw, 48px);
}
.svc__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-surface);   /* Safari 26 tiñe las barras con este fondo mientras está fijo */
}
.svc__stage {
  width: min(100%, 1120px, calc((100svh - 140px) * 16 / 9));
  min-width: 0;
}
.svc__stage .avs { border: var(--rule) solid var(--color-line); }
/* En las secciones negras la placa se eleva un paso (surface-raised) para que se vea llegar */
.svc[data-theme="noir"] .sc { --onyx: var(--color-surface-raised); }
/* Cada sección llega a su manera. --e va de 0 a 1 mientras la sección sube a la pantalla (script.js);
   por defecto vale 1, así que sin JS o con movimiento reducido todo se ve ya terminado. */
.svc { --e: 1; --ee: 1; }
.svc__stage { will-change: transform, clip-path; }

/* sello: cae desde grande y se asienta */
.svc[data-device="stamp"] .svc__stage { transform: scale(calc(1.55 - 0.55 * var(--e))); opacity: calc(0.1 + 0.9 * var(--e)); }
/* abanico: se abre en 3D desde el borde izquierdo */
.svc[data-device="tilt"] .svc__pin { perspective: 1500px; }
.svc[data-device="tilt"] .svc__stage { transform-origin: 0 50%; transform: rotateY(calc((1 - var(--e)) * -72deg)); opacity: calc(0.15 + 0.85 * var(--e)); }
/* iris: un círculo que se abre desde el centro */
.svc[data-device="iris"] .svc__stage { clip-path: circle(calc(var(--e) * 78%) at 50% 50%); }
/* cortina: se corre de izquierda a derecha */
.svc[data-device="wipe"] .svc__stage { clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0); }
/* persianas: siete listones que se abren */
.svc[data-device="blinds"] .svc__stage {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(var(--e) * 14.2857%), transparent calc(var(--e) * 14.2857%), transparent 14.2857%);
          mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(var(--e) * 14.2857%), transparent calc(var(--e) * 14.2857%), transparent 14.2857%);
}
/* balanceo: entra girando desde abajo y rebasa un poco antes de asentarse */
.svc[data-device="swing"] .svc__stage { transform-origin: 12% 100%; transform: translateY(calc((1 - var(--ee)) * 26vh)) rotate(calc((1 - var(--ee)) * 16deg)); opacity: calc(0.1 + 0.9 * min(1, var(--e) * 1.6)); }
/* barra que sube: se llena de abajo hacia arriba */
.svc[data-device="rise"] .svc__stage { clip-path: inset(calc((1 - var(--e)) * 100%) 0 0 0); }
/* solapa de sobre: se abre hacia abajo desde el borde de arriba */
.svc[data-device="flap"] .svc__pin { perspective: 1600px; }
.svc[data-device="flap"] .svc__stage { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--e)) * -96deg)); opacity: calc(0.1 + 0.9 * var(--e)); }
/* hoja: sube torcida desde abajo y se endereza */
.svc[data-device="sheet"] .svc__stage { transform: translateY(calc((1 - var(--e)) * 72vh)) rotate(calc((1 - var(--e)) * -8deg)); }

/* Encabezados de pilar: cada uno entra distinto */
.head { position: relative; overflow: clip; }
.head > :not(.head__band) { position: relative; z-index: 1; }
.head__band {
  position: absolute;
  inset: auto 0 8% 0;
  z-index: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 3rem + 12vw, 13rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
  opacity: 0.55;
  transform: translate3d(calc(var(--hx, 0) * 1px), 0, 0);
  pointer-events: none;
}
/* 1. líneas que suben desde una máscara */
.js .head[data-device="rise-lines"] .head__title.reveal { clip-path: inset(0 0 100% 0); transform: translateY(46%); }
.js .head[data-device="rise-lines"] .head__title.reveal.is-in { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
/* 3. máquina de escribir: se descubre en pasos */
.js .head[data-device="type"] .head__title.reveal { clip-path: inset(0 100% 0 0); }
.js .head[data-device="type"] .head__title.reveal.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1500ms steps(22, end); }
.head[data-device="type"] .head__title::after { content: ""; display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.08em; background: var(--color-accent); vertical-align: -0.08em; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Teléfono y tableta en vertical: escena 4:5 */
@media (max-width: 899px) {
  .svc__stage { width: min(100%, calc((100svh - 230px) * 0.8)); }
}

/* El título es texto real para lectores y buscadores; la escena ya lo muestra grande */
.svc__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.live) .svc__title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.svc__title h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-display-lg); color: var(--color-accent); }

/* ───────── Entradas ───────── */

.js .reveal { clip-path: inset(0 100% 0 0); }
.js .reveal.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--ease-out);
}
.js .in { opacity: 0; transform: translate3d(0, 8px, 0); }
.js .in.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

/* ───────── Cierre: banda, contacto y colofón ───────── */

.banda {
  border: var(--rule) solid var(--color-gold);
  padding: var(--space-2);
  background: var(--color-onyx);
}
.banda__inner {
  border: var(--rule) solid var(--color-gold);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) var(--space-4);
  text-align: center;
  display: grid;
  gap: var(--space-2);
}
.banda__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.8rem + 2.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--color-champagne);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.banda__en { font-size: var(--text-lead); color: var(--color-ivory); }

.contacto {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.contacto__lead { margin: 0; font-size: var(--text-lead); line-height: 1.3; }
.contacto__lead .en { display: block; margin-top: var(--space-1); font-size: var(--text-body); }

.contacto__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-2);
}
.contacto__item {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: var(--space-3);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  min-width: 0;
}
.contacto__item .icon { color: var(--color-accent); width: 24px; height: 24px; }
.contacto__phone {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-strong);
}
.contacto__mail {
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  a.contacto__item:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
}

.contacto__glyph { margin-bottom: var(--space-4); }

.colofon {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--rule) solid var(--color-line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.colofon__seal { width: 120px; height: 120px; border-radius: var(--radius-round); }
.colofon__text { display: grid; gap: var(--space-2); }
.colofon__text p { margin: 0; }
.small { font-size: var(--text-small); line-height: 1.45; color: var(--color-ink-muted); }
@media (max-width: 480px) {
  .colofon { grid-template-columns: minmax(0, 1fr); }
}

/* ───────── Movimiento reducido ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .piramide,
  .portada__seal,
  .portada__copy { transform: none; }
  .piramide .course,
  .piramide .eye { animation: none; opacity: 1; transform: none; }
  .piramide .rays,
  .piramide .eye__pulse { animation: none; }
  .head__band { transform: none; }
  .head[data-device="type"] .head__title::after { animation: none; }
  .js .head .head__title.reveal { clip-path: none; transform: none; transition: none; }
  .piramide .eye__pulse { opacity: 0; }
  .eje__stop.is-sealed .eje__gem { animation: none; }
  .js .reveal,
  .js .in { clip-path: none; opacity: 1; transform: none; transition: none; }
}