/* ============================================================
   site.css — estilos del sitio
   Solo usa variables de loden-brand-tokens.css. Las @font-face
   viven en fonts.css, porque cambian con cada cliente.

   Contraste medido (WCAG), y lo que implica:
     · ink sobre paper 13.3:1 · ink-soft 5.05:1 · ember 5.11:1
     · paper sobre ember 5.11:1 → texto de botón en paper
     · ember e ink-soft sobre el degradado amanecer ≈ 4.1:1 → NO
       pasan AA: en .hero el texto y los enlaces van en ink
     · ember sobre ink 2.6:1 → en fondos oscuros, enlaces y
       botones en paper
     · glow 1.44:1 y ember-soft 1.91:1 sobre paper → nunca texto,
       y nunca texto encima de ellos

   Orden: escala de texto · base · tipografía · enlaces y foco ·
          estructura · cabecera · portada · contenido · componentes ·
          pie · movimiento
   ============================================================ */


/* ---------- Escala de texto ----------
   Solo del sitio: por eso vive aquí y no en los tokens de marca,
   que comparten el sitio, las imágenes de los posts y los reportes.
   Fluida: crece con la pantalla entre un mínimo (móvil) y un
   máximo (escritorio). */

:root {
  --text-sm:   0.875rem;                                    /* etiquetas, pie */
  --text-base: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);   /* cuerpo; nunca por debajo de 16 px */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* entradilla, citas */
  --text-h3:   clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --text-h2:   clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-h1:   clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
}


/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---------- Tipografía ---------- */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.12;
  color: inherit;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
}

p,
ul,
ol,
blockquote {
  margin: 0;
}

strong {
  font-weight: 600;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 52ch;
}

/* Etiquetas en monoespaciada: secciones, metadatos, pequeños rótulos. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ---------- Enlaces y foco ---------- */

a {
  color: var(--ember);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: var(--step-1);
  left: var(--step-2);
  z-index: 10;
  padding: var(--step-1) var(--step-2);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}


/* ---------- Estructura ---------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--step-2);
}

.section {
  padding-block: var(--step-4) var(--step-5);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--step-4);
  }

  .section {
    padding-block: var(--step-5);
  }
}

/* Fondos oscuros: todo el texto y los enlaces pasan a paper. */
.on-ink {
  background: var(--ink);
  color: var(--paper);
}

.on-ink a {
  color: var(--paper);
}

.on-ink :focus-visible {
  outline-color: var(--paper);
}

.on-ink .label {
  color: var(--paper);
}


/* ---------- Cabecera ---------- */

/* Pegada arriba y siempre visible: nunca se esconde al bajar. El fondo es
   opaco para que el contenido pase por debajo sin transparentarse. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: var(--paper);
}

/* En cuanto se hace scroll: menos alto, logo más pequeño y un filo fino. */
.site-header.is-scrolled {
  border-bottom-color: var(--mist);
}

.site-header.is-scrolled .site-header__inner {
  padding-block: var(--step-1);
}

.site-header.is-scrolled .site-logo img {
  width: 6rem;
  height: auto;
}

/* Columnas en móvil: logo · (hueco) · reserva · botón de menú.
   El menú ocupa su propia fila. */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--step-1) var(--step-2);
  padding-block: var(--step-2);
}

.site-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.site-header__cta {
  grid-column: 3;
  grid-row: 1;
}

/* El botón de menú solo existe cuando hay JavaScript: sin él, la navegación
   se queda desplegada y no habría nada que abrir. */
.nav-toggle {
  display: none;
  grid-column: 4;
  grid-row: 1;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--mist);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.js-nav .nav-toggle {
  display: inline-grid;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle__close,
.site-header.is-open .nav-toggle__open {
  display: none;
}

.site-header.is-open .nav-toggle__close {
  display: block;
}

/* Sin JavaScript, el menú se ve desplegado, como una fila más. */
.site-menu {
  display: grid;
  gap: var(--step-2);
  grid-column: 1 / -1;
}

.js-nav .site-menu {
  display: none;
}

.js-nav .site-header.is-open .site-menu {
  display: grid;
  padding-block: var(--step-2);
  border-top: 1px solid var(--mist);
}

.lang-switch {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.lang-switch a {
  display: inline-block;
  padding-block: var(--step-1);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--step-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dentro del panel, un enlace por línea: se aciertan mejor con el dedo. */
.js-nav .site-header.is-open .site-nav ul {
  display: grid;
  gap: var(--step-1);
}

.site-nav a {
  display: inline-block;
  padding-block: var(--step-1);
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  text-decoration-color: transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration-color: var(--ember);
  text-decoration-thickness: 2px;
}

/* A partir de ~1120 px cabe todo en una línea: el menú deja de ser un panel
   y sus dos partes vuelven a la rejilla de la cabecera. */
@media (min-width: 70rem) {
  .site-header__inner {
    gap: var(--step-3);
  }

  .site-menu,
  .js-nav .site-menu,
  .js-nav .site-header.is-open .site-menu {
    display: contents;
  }

  .js-nav .nav-toggle {
    display: none;
  }

  .site-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .lang-switch {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .site-header__cta {
    grid-column: 4;
  }
}

/* Con la cabecera pegada arriba, un destino de ancla necesita aire por
   encima para no quedar debajo de ella (los índices del cambio 29). */
[id] {
  scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__inner {
    transition: padding 150ms ease;
  }

  .site-logo img {
    transition: width 150ms ease;
  }

  .js-nav .site-header.is-open .site-menu {
    animation: menu-open 150ms ease;
  }
}

@keyframes menu-open {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}


/* ---------- Portada: el degradado amanecer ----------
   Solo en portadas (layout home y portadas de sección).
   Encima, solo texto en ink: ember e ink-soft no alcanzan AA. */

.hero {
  padding-block: var(--step-5);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 75% 65% at 100% 0%, var(--wash-mint), transparent 70%),
    radial-gradient(ellipse 65% 75% at 0% 70%, var(--wash-apricot), transparent 70%);
}

.hero .label,
.hero a:not(.button) {
  color: var(--ink);
}

.hero h1 {
  max-width: 18ch;
  margin-top: var(--step-2);
}

.hero .lede {
  margin-top: var(--step-3);
}

.hero .actions {
  margin-top: var(--step-4);
}

/* En escritorio el hero no necesita una banda alta arriba: la cabecera ya
   ocupa 82 px y el degradado da aire de sobra. Con 6 rem de relleno, el botón
   de reserva caía por debajo del pliegue en pantallas de portátil. El relleno
   de abajo no cambia: es el que separa el hero de la sección siguiente. */
@media (min-width: 48rem) {
  .hero {
    padding-block: var(--step-4) calc(var(--step-5) * 1.25);
  }
}

/* Portada de sección (servicios, cómo trabajamos): banda más corta que la
   de la portada, para que el contenido empiece antes. */
.hero--compact {
  padding-block: var(--step-4);
}

@media (min-width: 48rem) {
  .hero--compact {
    padding-block: var(--step-4);
  }
}

/* Cabecera de páginas de texto: sin degradado, compacta. */
.page-header {
  padding-block: var(--step-4) var(--step-3);
  border-bottom: 1px solid var(--mist);
}

/* Índice de la página, a la derecha del titular. Son enlaces de verdad en
   el HTML. En móvil se oculta: justo debajo viene la misma lista completa,
   así que ahí solo sería repetición. */
.index-card {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--step-3);
  border: 1px solid var(--mist);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--paper);
}

.index-card ol {
  margin: var(--step-2) 0 0;
  padding: 0;
  list-style: none;
}

.index-card li + li {
  margin-top: var(--step-1);
}

.index-card a {
  color: var(--ink);
  text-decoration-color: var(--mist);
}

.index-card a:hover {
  text-decoration-color: var(--ember);
}

@media (max-width: 59.99rem) {
  .index-card {
    display: none;
  }
}


/* ---------- Contenido (Markdown convertido) ---------- */

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

.prose > * + * {
  margin-top: var(--step-2);
}

.prose > h2 {
  margin-top: var(--step-5);
}

.prose > h3 {
  margin-top: var(--step-4);
}

.prose > :first-child {
  margin-top: 0;
}

.prose > h2 + h3 {
  margin-top: var(--step-3);
}

.prose ul,
.prose ol {
  padding-left: var(--step-3);
}

.prose li + li {
  margin-top: var(--step-1);
}

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

/* El filo terracota marca la cita. */
.prose blockquote {
  padding-left: var(--step-3);
  border-left: 3px solid var(--ember);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.45;
}


/* ---------- Componentes ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--step-1) var(--step-3);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--ember);
  color: var(--paper);
  font-weight: 600;
  line-height: 1.65;
  text-decoration: none;
}

.button:hover {
  background: var(--ink);
}

/* Sobre tinta, el botón terracota no se distingue del fondo (2.6:1):
   se invierte a paper con texto ink. */
.on-ink .button {
  background: var(--paper);
  color: var(--ink);
}

.on-ink .button:hover {
  background: var(--paper-2);
}

/* Panel oscuro de llamada a la acción. */
.panel-ink {
  padding-block: var(--step-5);
}

.panel-ink__inner > * + * {
  margin-top: var(--step-3);
}

.panel-ink h2 {
  max-width: 22ch;
}

.panel-ink p {
  max-width: 52ch;
}

/* Secciones con fondo de caja (paper-2). Contraste: ink 12.1:1,
   ember 4.64:1, ink-soft 4.58:1 — todo pasa AA. */
.section--tint {
  background: var(--paper-2);
}

/* Banda propia para el bloque destacado de propiedad. Va en el tono de
   documento, más claro que el crema del sitio: si usara el de caja se
   fundiría con la banda de los pasos, que está justo encima. Los filos la
   cierran por arriba y por abajo. */
.section--keep {
  border-block: 1px solid var(--mist);
  background: var(--paper-doc);
}

/* Bloque de texto centrado en la página, con ancho contenido. El titular y
   la cita van centrados; los párrafos siguen alineados a la izquierda,
   que es como se leen bien. */
.prose--centered {
  max-width: 46rem;
  margin-inline: auto;
}

.prose--centered h2,
.prose--centered h3 {
  text-align: center;
}

.prose--centered blockquote {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Párrafos justificados, con partición de palabras. Solo desde 48rem:
   en la columna estrecha del móvil, el texto justificado deja ríos
   blancos entre palabras. Igual que en las preguntas frecuentes. */
@media (min-width: 48rem) {
  .prose--centered p {
    text-align: justify;
    hyphens: auto;
  }

  .prose--centered blockquote p {
    text-align: left;
  }
}

.section-title {
  margin-bottom: var(--step-4);
}

/* Entradilla justo debajo de un titular. */
h1 + .lede,
h2 + .lede {
  margin-top: var(--step-2);
}

/* Cabecera de Sobre Loden: titular grande con su párrafo de apoyo debajo,
   los dos con el mismo ancho para que el bloque se lea como uno solo. */
/* Cabecera centrada, para páginas con un titular largo de una o dos frases:
   va al tamaño de titular de sección, no al de título de página, y con un
   ancho contenido para que las líneas centradas queden parejas. */
.page-header--centered {
  text-align: center;
}

.page-header--centered h1 {
  max-width: 40ch;
  margin-inline: auto;
  font-size: var(--text-h2);
}

.page-header--centered .lede {
  max-width: 60ch;
  margin-top: var(--step-3);
  margin-inline: auto;
}

.page-header--centered .actions {
  margin-top: var(--step-3);
}

/* "Qué pasa después": cuatro pasos numerados, con el mismo círculo que el
   camino del proceso. En escritorio, una fila compacta; en móvil, apilados
   con el círculo a la izquierda. */
.next-steps {
  display: grid;
  gap: var(--step-4);
  margin: var(--step-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.next-steps li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--step-2);
  align-items: start;
  counter-increment: next-step;
}

.next-steps li::before {
  content: counter(next-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--ember);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

@media (min-width: 60rem) {
  .next-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--step-3);
  }

  .next-steps li {
    grid-template-columns: 1fr;
    align-content: start;
  }
}

/* Portada de sección (servicios, cómo trabajamos): mismo degradado, sin etiqueta. */
.hero h1:first-child {
  margin-top: 0;
}

/* Servicios: una columna en móvil, dos en pantallas anchas. */
/* Una fila por servicio, a todo el ancho. Nunca dos servicios uno al lado
   del otro: sus listas tienen largos muy distintos y dejaban huecos. */
.service-list {
  display: grid;
  margin-top: var(--step-4);
}

/* Baldosa del icono: tinta sobre un tono claro. Ni terracota (que en este
   sitio significa "se pulsa") ni menta (solo señales vivas). El icono es
   decoración: va con aria-hidden y sin foco. */
.icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--wash-apricot);
  color: var(--ink);
}

.icon-tile svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Lista con icono por línea (p. ej. dónde te encuentra la gente). */
.icon-list {
  display: grid;
  gap: var(--step-2);
  margin: var(--step-3) 0;
  padding: 0;
  list-style: none;
}

.icon-list li {
  display: flex;
  align-items: center;
  gap: var(--step-2);
}

.icon-list .icon-tile {
  width: 2rem;
  height: 2rem;
}

.icon-list .icon-tile svg {
  width: 1rem;
  height: 1rem;
}

/* Sobre Loden: ficha a la izquierda, biografía a la derecha.
   En móvil, la ficha va arriba y la biografía debajo. */
.about__grid {
  display: grid;
  gap: var(--step-4);
}

.founder-card {
  padding: var(--step-3);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--paper-2);
}

/* Iniciales en lugar de foto: tinta con el texto en crema (13.3:1). */
.founder-card__initials {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
}

.founder-card__name {
  margin-top: var(--step-2);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.2;
}

.founder-card__facts {
  margin-top: var(--step-1);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

@media (min-width: 60rem) {
  .about__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--step-5);
    align-items: start;
  }

  /* La biografía es más larga que la ficha, así que la ficha acompaña. */
  .founder-card {
    position: sticky;
    top: var(--step-3);
  }
}

/* Cada fila va separada por un filo fino. En móvil se apila: primero el
   icono y el nombre, después lo que incluye. */
.service {
  display: grid;
  gap: var(--step-3);
  padding-block: var(--step-4);
  border-top: 1px solid var(--mist);
}

.service:last-child {
  border-bottom: 1px solid var(--mist);
}

/* Izquierda: icono, nombre y el resultado en una línea. */
.service__head {
  display: grid;
  gap: var(--step-2);
  align-content: start;
}

.service__outcome {
  max-width: 34ch;
  color: var(--ink-soft);
}

.service__link {
  margin-top: var(--step-2);
}

/* Lo que incluye: marca de verificación en verde petróleo (7.3:1 sobre
   crema). En terracota parecería que se puede pulsar. */
.checklist {
  display: grid;
  gap: var(--step-1);
  max-width: var(--measure);
  margin: var(--step-2) 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--step-2);
  align-items: start;
}

.checklist li::before {
  content: "";
  width: 0.5rem;
  height: 0.85rem;
  margin-top: 0.3em;
  border-right: 2px solid var(--petrol);
  border-bottom: 2px solid var(--petrol);
  transform: rotate(45deg);
}

@media (min-width: 60rem) {
  .service {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--step-5);
  }
}

/* Paquetes: tarjetas sobre paper, con filo terracota. Sin sombras. */
.packages {
  display: grid;
  gap: var(--step-3);
  margin-top: var(--step-4);
}

.package {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  padding: var(--step-4) var(--step-3);
  border: 1px solid var(--mist);
  border-top: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--paper);
}

.package__promise {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.3;
}

.package ul {
  margin: 0;
  padding-left: var(--step-3);
}

.package li + li {
  margin-top: var(--step-1);
}

.package li::marker {
  color: var(--ember);
}

/* El enlace se queda abajo aunque las listas tengan distinto largo. */
.package__cta {
  margin-top: auto;
  padding-top: var(--step-1);
  font-weight: 600;
}

@media (min-width: 60rem) {
  .packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- El camino del proceso ----------
   Sigue siendo una lista ordenada con texto real: los círculos y las líneas
   son decoración de CSS (bordes y pseudo-elementos), no imágenes ni SVG.
   Círculo terracota con el número en crema (5.11:1). Sin animación.

   Móvil: un solo camino vertical, círculos y línea a la izquierda.
   Escritorio: cuatro columnas y dos filas, las dos de izquierda a derecha;
   la línea baja del paso 4 al 5 por el filo derecho. */

.steps {
  display: grid;
  margin: var(--step-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--step-2);
  padding-bottom: var(--step-4);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--ember);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* La flecha hacia el paso siguiente. En móvil: línea vertical bajo el
   círculo con la punta hacia abajo. El último paso no lleva flecha: el
   camino termina ahí. */
.step__arrow {
  position: absolute;
  top: 2.25rem;
  bottom: 0.9rem;
  left: calc(1.125rem - 0.5px);
  width: 1px;
  background: var(--mist);
}

/* La punta: un ángulo de dos filos girado 45°. Va en un tono más oscuro
   que la línea, porque es lo que indica la dirección. */
.step__arrow::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(45deg);
}

.step:last-child .step__arrow {
  display: none;
}

/* Solo se usa en el salto de línea del escritorio. */
.step__wrap {
  display: none;
}

.step h3,
.step p {
  grid-column: 2;
}

.step p {
  margin-top: var(--step-1);
}

@media (min-width: 60rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .step {
    grid-template-columns: 1fr;
    /* Sin esto, la celda reparte el alto sobrante entre círculo, título y
       texto, y los pasos de una misma fila no arrancan a la misma altura. */
    align-content: start;
    padding: 0 var(--step-3) var(--step-5) 0;
  }

  /* El círculo abre la celda, en el flujo, y se pinta por encima de la línea. */
  .step::before {
    position: relative;
    z-index: 1;
    grid-row: auto;
    margin-bottom: var(--step-2);
  }

  /* Dentro de una fila: línea horizontal desde el círculo hasta el
     siguiente, con la punta hacia la derecha. La línea se detiene antes del
     borde de la columna: el círculo siguiente empieza justo ahí y, si la
     flecha llegara hasta él, la punta quedaría tapada por debajo. */
  .step__arrow {
    top: 1.125rem;
    right: 0.625rem;
    bottom: auto;
    left: 2.75rem;
    width: auto;
    height: 1px;
  }

  .step__arrow::after {
    top: -4px;
    right: -5px;
    bottom: auto;
    left: auto;
    border-top: 1px solid var(--ink-soft);
    border-right: 1px solid var(--ink-soft);
    border-bottom: 0;
  }

  /* Del paso 4 al 5, como un salto de línea: la línea sale del 04 hacia la
     derecha, baja por el filo de la columna (sin cruzar el texto), corre
     hacia la izquierda por el hueco entre las dos filas y entra en el 05
     desde arriba. Las columnas miden lo mismo, así que 300% son
     exactamente las tres que hay que recorrer hacia la izquierda. */
  .step:nth-child(4) .step__arrow {
    right: 0;
  }

  /* Sin punta al final del tramo: la flecha está abajo, al entrar en el 05. */
  .step:nth-child(4) .step__arrow::after {
    display: none;
  }

  .step:nth-child(4) .step__wrap {
    display: block;
    position: absolute;
    top: 1.125rem;
    right: 0;
    bottom: 2rem;
    left: calc(1.125rem - 300%);
    border-right: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
  }

  /* La bajada final hacia el círculo 05. */
  .step:nth-child(4) .step__wrap::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -0.5px;
    width: 1px;
    height: 1.25rem;
    background: var(--mist);
  }

  /* Y su punta, apuntando hacia abajo, justo encima del 05. */
  .step:nth-child(4) .step__wrap::after {
    content: "";
    position: absolute;
    top: calc(100% + 1.25rem - 4px);
    left: -4px;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--ink-soft);
    border-bottom: 1px solid var(--ink-soft);
    transform: rotate(45deg);
  }

  /* El último paso ocupa dos columnas: así la línea de la segunda fila
     llega hasta el borde y el camino no queda cortado. */
  .step:last-child {
    grid-column: span 2;
  }

  .step h3,
  .step p {
    grid-column: 1;
  }
}

/* Botón de reserva de la cabecera. Por debajo de 480 px se abrevia
   ("Book" / "Agenda"); el nombre accesible sigue siendo el completo.
   La columna la decide el bloque de la cabecera, que cambia según el ancho:
   aquí solo va el aspecto. */
.site-header__cta {
  /* 44 px de alto mínimo: es el tamaño con el que se acierta con el dedo. */
  min-height: 2.75rem;
  padding: var(--step-1) var(--step-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Si el ancho aprieta, lo que se estrecha es el botón, nunca el logo, y
   antes de que nada llegue a solaparse. */
@media (max-width: 22.5rem) {
  .site-header__cta {
    padding-inline: var(--step-1);
  }
}

.button__short {
  display: none;
}

@media (max-width: 29.99rem) {
  .button__long {
    display: none;
  }

  .button__short {
    display: inline;
  }
}

@media (min-width: 48rem) {
  .site-header__cta {
    padding-inline: var(--step-3);
  }
}

.button--large {
  padding: var(--step-2) var(--step-4);
  font-size: var(--text-lg);
}

/* Portada: texto a la izquierda, tarjeta de frases a la derecha. */
.hero__grid {
  display: grid;
  gap: var(--step-4);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--step-5);
  }
}

/* Tarjeta de frases. Sin JavaScript, o con movimiento reducido, se ven
   las siete en lista. Con JavaScript, pain-rotator.js añade .is-rotating
   y marca la visible con .is-active. Todas comparten la misma celda: la
   tarjeta toma el alto de la frase más larga y no salta al cambiar. */
/* Centrada en su columna, sin ocupar todo el ancho disponible. */
.pain-card {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding: var(--step-3);
  border: 1px solid var(--mist);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  background: var(--paper);
}

/* Control de pausa: el JavaScript lo muestra al empezar a rotar. Sin
   JavaScript no aparece (no hay nada que pausar) y con movimiento
   reducido tampoco, porque ahí la lista ya es estática. */
.pain-card__toggle {
  margin-top: var(--step-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.pain-card__toggle:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .pain-card__toggle {
    display: none;
  }
}

.pain-list {
  margin: var(--step-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.35;
}

.pain-list li + li {
  margin-top: var(--step-2);
  padding-top: var(--step-2);
  border-top: 1px solid var(--mist);
}

.pain-card.is-rotating .pain-list {
  display: grid;
}

.pain-card.is-rotating .pain-list li {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.pain-card.is-rotating .pain-list li.is-active {
  opacity: 1;
}

/* Textos de sección de la portada. */
.section-intro {
  max-width: var(--measure);
  margin-top: var(--step-2);
}

/* Titular e introducción de sección, centrados. El texto largo (tarjetas,
   respuestas) sigue alineado a la izquierda: centrado cuesta leerlo. */
.section-head {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

.section-head .section-intro {
  margin-inline: auto;
}

/* "Para quién es Loden": aquí todos los bloques son cortos y van centrados. */
.section--center {
  text-align: center;
}

.section--center .who__lead,
.section--center .section-intro {
  margin-inline: auto;
}

.section--center .tags {
  justify-content: center;
}

.who__lead {
  max-width: 34ch;
  margin-top: var(--step-3);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
}

/* Etiquetas (oficios): se escanean de un vistazo. Fondo albaricoque, que da
   color sin parecer un botón (el terracota sólido marca lo que se pulsa).
   Texto en tinta: 10.6:1. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-1);
  margin: var(--step-3) 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: calc(var(--step-1) / 2) var(--step-2);
  border-radius: var(--radius-pill);
  background: var(--wash-apricot);
  color: var(--ink);
  font-size: var(--text-sm);
}

/* Tarjetas de servicios de la portada: la tarjeta entera es el enlace.
   Descripción en ink-soft sobre paper-2 (4.58:1, pasa AA). */
.service-cards {
  display: grid;
  gap: var(--step-2);
  margin: var(--step-4) 0 0;
  padding: 0;
  list-style: none;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--step-1);
  height: 100%;
  padding: var(--step-3);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink-soft);
  text-decoration: none;
}

.service-card:hover {
  border-color: var(--ember);
}

/* Dentro de la tarjeta el fondo ya es el tono de caja: la baldosa pasa a
   crema para que se distinga. */
.service-card .icon-tile {
  margin-bottom: var(--step-1);
  background: var(--paper);
}

.service-card__title {
  color: var(--ink);
}

/* Indica que la tarjeta lleva a algún sitio. Es parte del mismo enlace,
   no un segundo enlace dentro de la tarjeta. */
.service-card__more {
  margin-top: auto;
  padding-top: var(--step-2);
  color: var(--ember);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .service-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Preguntas frecuentes: una por fila. La pregunta a la izquierda, la
   respuesta a la derecha, y cada fila mide lo que mide su respuesta.
   En móvil se apilan. Las respuestas siempre visibles, sin acordeón. */
.faq-grid {
  display: grid;
  margin-top: var(--step-4);
  text-align: left;
}

.faq {
  display: grid;
  gap: var(--step-1);
  padding-block: var(--step-3);
  border-top: 1px solid var(--mist);
}

.faq:last-child {
  border-bottom: 1px solid var(--mist);
}

.faq__answer > * + * {
  margin-top: var(--step-2);
}

/* Respuestas justificadas, con partición de palabras para que no se abran
   huecos entre palabras. Solo desde 48rem: en una columna estrecha, el
   texto justificado deja ríos blancos. */
@media (min-width: 48rem) {
  .faq__answer {
    text-align: justify;
    hyphens: auto;
  }
}

@media (min-width: 48rem) {
  .faq {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--step-4);
  }
}

/* Lista de lo que abarca un servicio. */
.service ul {
  margin-top: var(--step-2);
  padding-left: var(--step-3);
}

.service li + li {
  margin-top: var(--step-1);
}

.service li::marker {
  color: var(--ember);
}

@media (prefers-reduced-motion: no-preference) {
  .pain-card.is-rotating .pain-list li {
    transition: opacity 600ms ease;
  }

  .service-card {
    transition: border-color 150ms ease;
  }
}

/* Señal viva (menta). SOLO para algo que está pasando ahora:
   un estado del sistema, un dato en vivo. Nunca decoración.
   El anillo ink le da contraste sobre paper (el menta solo da 1.44:1). */
.signal {
  display: inline-flex;
  align-items: center;
  gap: var(--step-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.signal::before {
  content: "";
  width: 0.625em;
  height: 0.625em;
  border-radius: var(--radius-pill);
  background: var(--glow);
  box-shadow: 0 0 0 1px var(--ink);
}

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

.plain-list li + li {
  margin-top: var(--step-1);
}


/* ---------- Pie ---------- */

.site-footer {
  padding-block: var(--step-5) var(--step-3);
  border-top: 1px solid var(--petrol);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--step-4);
}

.site-footer__grid .label {
  margin-bottom: var(--step-2);
}

.site-footer__region {
  margin-top: var(--step-2);
}

/* El SVG del logo trae aire por dentro a la izquierda (~7 px a 120 px de
   ancho). Se compensa para que el logo, la ciudad y el aviso legal
   arranquen en la misma línea vertical. */
.site-footer__logo img {
  margin-left: -7px;
}

.site-footer__legal {
  margin-top: var(--step-4);
  padding-top: var(--step-3);
  border-top: 1px solid var(--petrol);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}


/* ---------- Movimiento ----------
   Las transiciones y animaciones solo existen si la persona no ha
   pedido reducir el movimiento. La regla final es una red de
   seguridad para cualquier animación que se añada más adelante. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  a,
  .button {
    transition:
      background-color 150ms ease,
      color 150ms ease,
      text-decoration-color 150ms ease,
      text-decoration-thickness 150ms ease;
  }

  .skip-link {
    transition: transform 150ms ease;
  }

  .signal::before {
    animation: signal-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes signal-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}