/*
 * site.css — el sistema de diseño, portado del export de
 * `.agents/design/design_system/` (F4).
 *
 * Todo valor de aquí es un var() de tokens.css. No es pulcritud: es lo que hace
 * que un fallo de contraste se cace una vez, en la capa de tokens, y no cuarenta
 * veces, una por página.
 *
 * **Lo que este fichero dejó de ser.** Hasta el 2026-09-03 esto era la hoja
 * reglada heredada del scaffold: rejilla con filetes de 2px, rails a los lados,
 * cero esquinas redondeadas, cero sombras. Se portó la paleta y la tipografía y
 * se dejó la maquetación, y el resultado era el sitio de otra marca pintado de
 * violeta. El export dibuja otra cosa y es la que manda (ADAPTACION §0.11):
 * tarjetas blancas con borde fino y esquina de 18, botones en píldora, un hero
 * con degradado lavanda y esquinas de 48 abajo, bandas lavanda de esquina 32, y
 * un pie de tinta violeta con las esquinas de arriba redondeadas.
 *
 * Lo que se fue con la hoja reglada y conviene que conste: la barra de miga con
 * el pager ← →, que el export no dibuja en ninguna de sus cuatro plantillas
 * (Q8), y la tabla reglada del blog, que era el dibujo del otro sitio.
 */

@import url("/css/fonts.css");

/* ── Page transitions ──────────────────────────────────────────────────────
 * FUNDAMENTALS §D: "View Transitions API for page-to-page, as progressive
 * enhancement. It must degrade to an instant, correct navigation in a browser
 * without it." This is that, and it is the F4 line that was never built.
 *
 * Declared in CSS rather than driven from site.js. That matters for the same
 * reason everything else here is build-time: a navigation must not depend on a
 * script having loaded. A browser that does not implement this rule ignores it
 * and navigates instantly, which is the correct fallback and needs no feature
 * detection anywhere.
 *
 * These rules are the motion design for BOTH navigation paths, and that is
 * deliberate (ADR 0015). With scripting on, the site navigates without
 * rebuilding the document and the swap happens inside
 * `document.startViewTransition()`, so these same rules run same-document.
 * With scripting off, the `@view-transition` rule below runs them
 * cross-document. One set of curves, two ways of arriving at them, and nothing
 * here restated in JavaScript.
 *
 * The motion is the export's `viewIn`, unchanged: a soft fade with a 14px rise,
 * on a curve that leaves quickly and settles. The old page only fades — the two
 * pages moving in opposite directions reads as a slideshow, and §D's bar is iOS,
 * where the outgoing view gets out of the way rather than performing.
 *
 * The masthead is deliberately NOT part of it. In the export the animation is on
 * the content column and the header sits outside it, so a bar that is identical
 * on every page stays put and only its breadcrumb changes. Naming it takes it
 * out of the root snapshot and gives it its own, quicker cross-fade.
 *
 * The first load of a session animates nothing: there is no old page to
 * transition from. That is what keeps this clear of §D's "nothing animates the
 * LCP element".
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: viewOut var(--motion-base) var(--ease-view) both;
}

::view-transition-new(root) {
  animation: viewIn var(--motion-slow) var(--ease-view) both;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(var(--view-shift));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes viewOut {
  to {
    opacity: 0;
  }
}

/* The name itself is declared on .masthead further down, next to the sticky
   positioning it belongs with, rather than duplicated up here. */
::view-transition-old(masthead),
::view-transition-new(masthead) {
  animation-duration: var(--motion-fast);
  animation-timing-function: var(--ease-view);
}

/* Reduced motion is honoured at the token layer — the media query in tokens.css
   zeroes the three durations, so these animations resolve to 0s. The rule below
   is the belt to that braces: a view transition is a full-screen event, and a
   0s animation is still an animation. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
}

/* The shell is a flex column that is never shorter than the viewport, so a
   short page still pins its colophon to the bottom edge
   instead of leaving the canvas showing under them. svh, not vh, because on
   mobile vh is the *largest* viewport height — with the URL bar retracted —
   which would leave the page one toolbar taller than the screen on load. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  transition: background-color var(--motion-base) var(--ease-enter);
}

/* Absorbs the slack. 1 0 auto rather than 1 1 auto: main grows to fill a short
   page but is never squeezed below its content on a long one. The last block
   inside it grows too, so the column rules of a ruled section run all the way
   down to the colophon instead of stopping mid-page over blank canvas. */
.main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.main > :last-child {
  flex: 1 0 auto;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--motion-fast) var(--ease-enter),
    background-color var(--motion-fast) var(--ease-enter),
    box-shadow var(--motion-fast) var(--ease-enter);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Focus is never removed, only made unmissable. */
:focus-visible {
  outline: var(--rule-weight) solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--color-invert-bg);
  color: var(--color-invert-fg);
  padding: var(--space-3) var(--space-4);
}

.skip-link:focus {
  left: 0;
}

/* ── Composición de la página ────────────────────────────────────────────
   El export dibuja tres anchuras y nada más: la hoja (1160px), la columna de
   lectura (680px) y el hero centrado (820px). Están en tokens.css y aquí solo
   se aplican. */

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--lectura {
  max-width: calc(var(--measure) + var(--gutter) * 2);
}

.section {
  margin-top: var(--space-11);
}

/* Lo primero que viene tras el hero no necesita el hueco entero: el hero ya
   trae su propio relleno abajo, y sumados dejaban una pantalla en blanco entre
   el titular y la primera frase. */
.hero + .section {
  margin-top: var(--space-9);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  max-width: var(--measure-hero);
  margin: 0 auto var(--space-8);
}

.section__note {
  margin: 0;
  color: var(--color-muted);
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-head);
  line-height: var(--leading-tight);
  /* Una palabra más larga que la pantalla se parte en vez de empujar la página.
     "Psiconutrición" y "obsesivos" son palabras normales de este sitio y a 320px
     no caben enteras. */
  overflow-wrap: break-word;
}

h3,
h4 {
  font-weight: var(--weight-strong);
}

/* La etiqueta en píldora que abre casi todos los bloques del export: mayúsculas
   pequeñas en morado, sobre blanco y con borde. Es el único "eyebrow" que hay. */
.eyebrow {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* La variante sin cápsula, para cuando va dentro de un bloque que ya tiene
   fondo propio y una píldora encima de otra caja se lee como dos. */
.eyebrow--plain {
  padding: 0;
  border: 0;
  background: none;
}

.lede {
  margin: 0;
  font-size: var(--size-lead);
  line-height: var(--leading-snug);
  color: var(--color-body);
  text-wrap: pretty;
}

/* ── Botones ─────────────────────────────────────────────────────────────
   Píldoras. El relleno lleva sombra de color porque en el export es el único
   elemento que la tiene: es el botón que se quiere pulsar. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: var(--size-small);
  text-align: center;
  transition:
    background-color var(--motion-fast) var(--ease-enter),
    box-shadow var(--motion-fast) var(--ease-enter),
    transform var(--motion-fast) var(--ease-enter);
}

.btn:hover {
  text-decoration: none;
}

.btn--solid {
  background: var(--color-brand);
  color: var(--color-invert-fg);
  box-shadow: var(--shadow-action);
}

.btn--solid:hover {
  background: var(--color-brand-strong);
  color: var(--color-invert-fg);
}

.btn--outline {
  border: var(--rule-weight) solid var(--color-brand);
  color: var(--color-accent-text);
  background: transparent;
}

.btn--outline:hover {
  background: var(--color-lavender);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* ── La barra de arriba ──────────────────────────────────────────────────
   Tinta violeta, un aviso y dos formas de pedir cita. Es lo primero que se ve y
   lo único que se repite en todas las páginas. */

.topbar {
  background: var(--color-invert-bg);
  color: var(--color-invert-fg);
  font-size: var(--size-meta);
}

.topbar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter);
}

.topbar a {
  color: var(--color-invert-link);
  font-weight: var(--weight-bold);
}

.topbar a:hover {
  color: var(--color-invert-fg);
}

/* ── La cabecera ─────────────────────────────────────────────────────────
   Logo a la izquierda, navegación y botón de cita a la derecha. Sin barra de
   miga y sin pager: el export no los dibuja, y una web clínica no se lee en
   orden (ADR 0003, Q8). */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-canvas);
  view-transition-name: masthead;
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
}

.wordmark:hover {
  text-decoration: none;
}

/* La marca real, que es una imagen y no un SVG en línea: se dimensiona por
   altura y el ancho lo pone la proporción del fichero. El <picture> es un
   contenedor en línea; sin `display: block` en la imagen queda un hueco debajo
   por la línea base del texto. */
.marca,
.marca img {
  display: block;
}

.marca img {
  height: var(--marca-height);
  width: auto;
}

.wordmark__logotype {
  height: var(--wordmark-height);
  width: auto;
  display: block;
}

.wordmark__logotype--text {
  height: auto;
  font-family: var(--font-wordmark);
  font-size: var(--size-wordmark);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
}

.logo circle {
  stroke: var(--logo-rest);
  transition: stroke var(--motion-base) var(--ease-enter);
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-weight: var(--weight-bold);
  font-size: var(--size-small);
}

/* `:not(.btn)` no es defensivo: `.nav a` gana por especificidad a `.btn--solid`
   — dos clases contra una clase y un elemento — así que sin esto el botón de
   cita salía con el texto en tinta violeta sobre el morado de acción, a 1,6:1.
   El build no lo vio porque `check:contrast` comprueba los pares de tokens, no
   qué regla gana en la cascada; lo cazó `check:a11y`, que mira la página
   pintada. Las dos comprobaciones hacen falta y esta es la prueba. */
.nav a:not(.btn) {
  color: var(--color-ink);
}

.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current] {
  color: var(--color-accent-text);
  text-decoration: none;
}

/* El botón de cita dentro del menú: es un enlace más para el teclado y una
   píldora para el ojo. */
.nav .btn {
  padding: var(--space-3) var(--space-6);
}

.nav .searchbtn {
  color: var(--color-muted);
  font-weight: var(--weight-body);
}

.nav .searchbtn:hover {
  color: var(--color-accent-text);
  text-decoration: none;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  padding: 0 var(--space-1);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-field);
  font-family: var(--font-meta);
  font-size: var(--size-eyebrow);
}

/* ── El hero ─────────────────────────────────────────────────────────────
   Degradado lavanda con las dos esquinas de abajo redondeadas a 48. Dos
   variantes, las dos del export: centrado (portada y artículo) y partido en dos
   columnas (páginas de servicio y de contenido). */

.hero {
  background: var(--hero-gradient);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
}

.hero__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter);
}

.hero--centrado .hero__inner {
  max-width: calc(var(--measure-lead) + var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.hero--partido .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-9);
  align-items: center;
}

.hero__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.hero--centrado .hero__lead {
  align-items: center;
}

.hero__title {
  margin: 0;
  font-size: var(--size-hero);
  line-height: var(--leading-hero);
  text-wrap: pretty;
}

.hero__hook {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: var(--size-h2);
  color: var(--color-accent-text);
}

.hero__lede {
  max-width: var(--measure-hero);
}

/* La columna derecha del hero partido: la ilustración de la página y, debajo,
   los hechos. Cuando no hay ilustración — hay servicios sin ella a propósito,
   ver .agents/decisions/0006 — queda solo la ficha, que es lo que había aquí
   antes de que llegaran las imágenes. */
.hero__figura {
  display: block;
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-2);
}

.hero__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-media) var(--radius-media) 0 0;
}

/* El retrato sí se recorta: una foto vertical entera empuja la ficha de datos
   fuera de la pantalla y el hero deja de caber. La ilustración no, porque
   recortarla le corta la cabeza a alguien. */
.hero__figura--retrato img {
  aspect-ratio: var(--ratio-retrato);
  object-fit: cover;
  object-position: top center;
}

/* "Quién te atiende" de las landings de zona: retrato redondo a la izquierda y
   los datos al lado. Se apila en pantallas estrechas, donde dos columnas de
   nueve rem no caben. */
.quien {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-canvas);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-card);
}

.quien__retrato {
  display: block;
  flex: 0 0 auto;
  width: var(--retrato-width);
}

/* La fuente ya viene cuadrada y encuadrada (`melani-retrato`), así que aquí no
   hay recorte: recortar en CSS un retrato vertical solo puede quitar por arriba
   y por abajo, y a quien está en la mitad derecha del encuadre lo deja fuera del
   círculo. El encuadre es del fichero, no de la hoja de estilos. */
.quien__retrato img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-pill);
}

.quien__texto {
  flex: 1 1 var(--measure-corto);
}

.quien__nombre {
  margin: 0;
  font-size: var(--size-h3);
}

.quien__cargo {
  margin: 0;
  color: var(--color-body);
}

/* Una imagen a todo el ancho de la banda de contenido: el camino del proceso.
   Recortada, porque el original es panorámico y a 1200px de ancho ocuparía media
   pantalla de alto sin decir nada más. */
.banda {
  display: block;
  margin-bottom: var(--space-7);
}

.banda img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-banda);
  object-fit: cover;
  border-radius: var(--radius-media);
}

/* Sin ficha debajo, la imagen es toda la columna: el relleno de la tarjeta
   dejaría un borde de aire bajo la ilustración sin nada que lo justifique. */
.hero__aside--solo-imagen {
  padding: 0;
}

.hero__aside--solo-imagen .hero__figura {
  margin: 0;
}

.hero__aside--solo-imagen .hero__figura img {
  border-radius: var(--radius-media);
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  background: var(--color-canvas);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-card);
}

.hero__fact {
  margin: 0;
  color: var(--color-body);
}

/* ── Tarjetas ────────────────────────────────────────────────────────────
   El componente que más se repite en el export: blanco, borde fino, esquina de
   18, sombra suave, y al pasar por encima sube tres píxeles. */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.cards--dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7);
  background: var(--color-canvas);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  transition:
    transform var(--motion-fast) var(--ease-enter),
    box-shadow var(--motion-fast) var(--ease-enter);
}

/* La tarjeta con ilustración: la imagen sangra hasta el borde de la tarjeta y
   se recorta a una proporción fija. Sin el recorte, las tres ilustraciones de
   "Cómo nos vemos" imponen cada una su propia altura — vienen de sitios
   distintos y una es el doble de alta que otra — y las tres tarjetas dejan de
   parecer tres tarjetas. */
.card--modalidad {
  padding-top: 0;
}

.card__figura {
  display: block;
  margin: 0 calc(var(--space-7) * -1) var(--space-4);
}

.card__figura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-tarjeta);
  object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  color: var(--color-ink);
  text-decoration: none;
}

.card__title {
  margin: 0;
  font-size: var(--size-h3);
}

.card__hook {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: var(--size-small);
  color: var(--color-accent-text);
}

.card__text {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.card__more {
  margin-top: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--size-small);
  color: var(--color-accent-text);
}

/* El número o la inicial en círculo lavanda: los pasos del proceso y el avatar
   de una reseña son el mismo átomo. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-lavender);
  color: var(--color-accent-text);
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  flex: none;
}

/* ── La banda lavanda ────────────────────────────────────────────────────
   El bloque de llamada a la acción intermedia. Esquina de 32 y todo centrado. */

.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background: var(--color-lavender);
  border-radius: var(--radius-block);
  text-align: center;
}

.band__title {
  margin: 0;
  max-width: var(--measure-lead);
  font-size: var(--size-h1);
  text-wrap: pretty;
}

.band__text {
  margin: 0;
  max-width: var(--measure-lead);
  color: var(--color-body);
  text-wrap: pretty;
}

/* Un enlace dentro de la banda tiene que verse como un enlace: sobre lavanda,
   el color de texto y el de acción son casi el mismo tono y "Cómo llegar" se
   leía como una palabra más de la dirección. */
.band__text a {
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

/* ── Reseñas ─────────────────────────────────────────────────────────── */

/* Inicial, luego nombre y fecha apilados, y las estrellas al final de la línea.
   Con los tres como columnas iguales de un flex, el nombre y la fecha se partían
   en cuatro líneas dentro de una tarjeta de veintidós rem. */
.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* El nombre manda y las estrellas ceden: si no caben en la línea, bajan enteras
   en vez de estrujar el nombre. Con los tres como columnas iguales, "Amaya R."
   se partía en dos dentro de una tarjeta de veintidós rem. */
.review__head > span:not(.stars):not(.avatar) {
  flex: 1 1 8rem;
  min-width: 0;
}

.review__head .stars {
  flex: 0 0 auto;
  margin-left: auto;
}

.review__name {
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
}

.review__when {
  font-size: var(--size-meta);
  color: var(--color-muted);
}

.stars {
  margin-left: auto;
  color: var(--color-star);
  font-size: var(--size-meta);
  letter-spacing: 1px;
}

.review__text {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-body);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
}

.rating__count {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-small);
  color: var(--color-muted);
}

/* ── Prosa ───────────────────────────────────────────────────────────────
   Una sola columna de 680px. El export no pone la prosa en rejilla. */

.prose {
  max-width: var(--measure);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}

.prose > * + * {
  margin-top: var(--space-5);
}

.prose h2 {
  margin-top: var(--space-9);
  font-size: var(--size-h1);
}

.prose h3 {
  margin-top: var(--space-7);
  font-size: var(--size-h2);
}

.prose a {
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prose li::marker {
  color: var(--color-brand);
}

.prose img {
  border-radius: var(--radius-media);
}

.prose hr {
  margin-block: var(--space-8);
  border: 0;
  border-top: var(--rule-hairline) solid var(--rule-soft);
}

/* La cita: bloque lavanda, esquina de 18 y compuesta en la cara de titulares.
   En el export es el recurso que más peso visual tiene dentro de un texto. */
.prose blockquote,
.quote {
  margin: 0;
  padding: var(--space-6) var(--space-7);
  background: var(--color-lavender);
  border-radius: var(--radius-card);
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: var(--size-h3);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.quote p {
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--weight-body);
  font-size: var(--size-small);
  color: var(--color-muted);
}

/* ── Los pasos de un proceso ─────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7);
  background: var(--color-canvas);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.steps__title {
  margin: var(--space-2) 0 0;
  font-size: var(--size-h3);
}

.steps__detail {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────
   <details>, no un acordeón de JavaScript: se abre sin scripting y se puede
   buscar con Ctrl+F. */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure-lead);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.faq__item {
  padding: var(--space-5) var(--space-6);
  background: var(--color-canvas);
  border: var(--rule-hairline) solid var(--rule-soft);
  border-radius: var(--radius-card);
}

.faq__q {
  font-family: var(--font-head);
  font-weight: var(--weight-strong);
  font-size: var(--size-h3);
  cursor: pointer;
}

.faq__q::marker {
  color: var(--color-brand);
}

.faq__item[open] .faq__q {
  color: var(--color-accent-text);
}

.faq__item .prose {
  margin-top: var(--space-4);
}

/* ── El listado de artículos ─────────────────────────────────────────────
   Tarjetas, como todo lo demás del export. La tabla reglada se fue con la hoja
   reglada: era el dibujo de otro sitio. */

.postcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.postcard__meta {
  font-family: var(--font-meta);
  font-size: var(--size-meta);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}

.postcard__title {
  margin: 0;
  font-size: var(--size-h3);
}

.postcard__lede {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* ── La ficha del artículo ───────────────────────────────────────────── */

.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}

.byline__name {
  display: block;
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
}

.byline__meta {
  font-size: var(--size-meta);
  color: var(--color-muted);
}

.volver {
  margin-top: var(--space-9);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
}

/* ── El pie ──────────────────────────────────────────────────────────────
   Tinta violeta, esquinas de arriba a 48, cuatro columnas y una barra legal
   separada por una línea a un doceavo de blanco. */

.colophon {
  margin-top: var(--space-11);
  background: var(--color-invert-bg);
  color: var(--color-invert-dim);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}

.colophon__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-9);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-8);
}

.colophon__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--size-small);
}

.colophon h2 {
  margin: 0 0 var(--space-1);
  color: var(--color-invert-fg);
  font-size: var(--size-small);
}

.colophon a {
  color: var(--color-invert-dim);
}

.colophon a:hover {
  color: var(--color-invert-fg);
}

/* En el pie, la marca va sobre una caja blanca redondeada, como en el export.
   No es decoración: la mitad del logotipo es gris claro y sobre el violeta del
   pie no se distingue. La alternativa sería una versión en blanco del fichero,
   que hoy no existe. */
.colophon__marca {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-canvas);
  border-radius: var(--radius-card);
}

.colophon__marca img {
  height: var(--marca-height-pie);
}

/* El distintivo del COP. Trae su propio fondo — es un PNG con el verde del
   Colegio y las esquinas transparentes — así que no lleva radio: redondearlo le
   comía el círculo del sello. Ancho contenido: no compite con la marca, la
   respalda. */
.colegiada {
  display: block;
  max-width: var(--sello-width);
  margin-top: var(--space-4);
}

.colegiada__sello img {
  display: block;
  width: 100%;
  height: auto;
}

/* El aviso de crisis. Lavanda y no rojo: el rojo es alarma y aquí la persona ya
   está alarmada. Tiene que leerse como alguien que baja la voz, no como un
   cartel de peligro. Borde grueso a la izquierda para que se distinga del
   cuerpo sin gritar. */
.crisis {
  margin-block: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-lavender);
  border-left: var(--rule-weight) solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.crisis p {
  margin: 0 0 var(--space-3);
}

.crisis p:last-child {
  margin-bottom: 0;
}

.crisis__titulo {
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
}

.crisis a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Carril ──────────────────────────────────────────────────────────────
   Una fila que se desliza, con `scroll-snap` y sin una línea de JavaScript.
   Cada tarjeta se ancla al empezar, así que el gesto para en una tarjeta y no
   a mitad de una frase.

   El ancho fijo es lo que hace que asome el borde de la siguiente: sin ese
   trozo visible, nadie sabe que hay más que arrastrar. Es el único motivo por
   el que no se usa `1fr`.

   El relleno lateral va en el propio carril y no en el contenedor: si lo
   pusiera fuera, la última tarjeta se pegaría al borde de la pantalla al llegar
   al final. `scroll-padding` hace lo propio con el anclaje. */
.rail {
  display: flex;
  /* Cada tarjeta de su alto. Estiradas, una reseña de tres líneas heredaba el
     alto de una de quince y quedaba media tarjeta en blanco. */
  align-items: flex-start;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: var(--space-2);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.rail > * {
  flex: 0 0 var(--rail-card);
  scroll-snap-align: start;
}

/* Enfocable por teclado, que es lo que exige una región que se desplaza. El
   foco se ve, porque es la única señal de que las flechas van a mover esto. */
.rail:focus-visible {
  outline: var(--rule-weight) solid var(--color-accent);
  outline-offset: 4px;
}

/* La fecha de una reseña: pequeña y debajo del nombre. No es adorno — es lo que
   la hace comprobable, porque con nombre y fecha se encuentra en el perfil. */
.review__fecha {
  display: block;
  color: var(--color-body);
  font-size: var(--size-small);
}

.colophon__legal {
  border-top: var(--rule-hairline) solid var(--rule-invert);
}

.colophon__legal-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  font-size: var(--size-meta);
}

.colophon__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* ── El botón flotante de WhatsApp ───────────────────────────────────────
   58px, abajo a la derecha, en todas las páginas. Es la conversión del sitio y
   el export lo pone como componente propio, no como un enlace más. */

.wa {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-invert-fg);
  box-shadow: var(--shadow-whatsapp);
}

.wa:hover {
  background: var(--color-whatsapp-strong);
  text-decoration: none;
}

.wa svg {
  width: 1.875rem;
  height: 1.875rem;
  fill: currentColor;
}

/* ── Estrecho ────────────────────────────────────────────────────────────
   Un solo salto, donde tres columnas dejan de caber. Nada se oculta: se
   apila. */

@media (max-width: 60rem) {
  .cards,
  .cards--dos,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--partido .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .colophon__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .masthead {
    position: static;
  }

  .masthead__bar {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2) var(--space-5);
  }

  /* En estrecho, el botón de cita de la cabecera sale. No porque estorbe: porque
     ya hay tres en pantalla — la barra de arriba con WhatsApp y teléfono, y el
     botón flotante, que está a un pulgar de distancia. Tres llamadas a la misma
     acción en doscientos píxeles no convierten más, solo tapan el menú. */
  .masthead .nav .btn {
    display: none;
  }

  .hero__inner {
    padding-block: var(--space-8) var(--space-9);
  }

  .section {
    margin-top: var(--space-9);
  }

  .band {
    padding: var(--space-8) var(--space-6);
  }
}

@media (max-width: 40rem) {
  .colophon__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Search dialog ─────────────────────────────────────────────────────── */

.search {
  width: min(38rem, 92vw);
  margin-top: 12vh;
  padding: 0;
  border: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 var(--rule-weight) var(--rule-strong);
}

.search::backdrop {
  background: var(--color-invert-bg);
  opacity: 0.32;
}

.search__form {
  margin: 0;
}

.search__input {
  width: 100%;
  border: 0;
  border-bottom: var(--rule-weight) solid var(--rule-strong);
  outline: none;
  padding: var(--space-4) var(--space-5);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-lead);
}

.search__results {
  display: flex;
  flex-direction: column;
  max-height: 52vh;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search__hit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--rule-hairline) solid var(--rule-hair);
  font-size: var(--size-list);
}

.search__hit:hover,
.search__hit[data-active] {
  text-decoration: none;
  background: var(--page-bg);
}

.search__kind {
  font-family: var(--font-meta);
  font-size: var(--size-eyebrow);
  color: var(--color-muted);
  white-space: nowrap;
}

/* A full-text hit is a title over the sentence it matched in, so it stacks
   where a jump-list row sits on one line. Same row, two shapes: the empty
   field lists places, a query lists passages. */
.search__hit--rich {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.search__excerpt {
  font-size: var(--size-eyebrow);
  line-height: var(--leading-snug);
  color: var(--color-muted);
  /* Two lines. An excerpt long enough to need scrolling is a page, not a hint
     about which page. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The matched words. A background swap would have to clear contrast against
   cualquier tinte de página; el peso y el color lo sostienen en todos. */
.search__excerpt mark {
  background: none;
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}

.search__empty {
  padding: var(--space-3) var(--space-5);
  font-size: var(--size-list);
  color: var(--color-muted);
}

.search__hints {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-meta);
  font-size: var(--size-eyebrow);
  color: var(--color-muted);
}