/* ==========================================================================
   Invierte desde Fuera — sistema de diseño "libro mayor"
   --------------------------------------------------------------------------
   Dirección: editorial y contable. Papel cálido, tinta azul marino tomada del
   traje de la fotografía de Samuel, oro del logotipo como único acento, y
   reglas finas que estructuran el contenido como un libro de cuentas bien
   llevado. Nada de rejillas de tarjetas uniformes ni degradados de plantilla.

   Índice
   01. Tokens (color, tipo, espacio, formas)
   02. Reset y base
   03. Estructura y utilidades
   04. Reglas y retículas editoriales
   05. Cabecera y navegación
   06. Botones, enlaces y etiquetas
   07. Portada
   08. Secciones y bloques
   09. Servicios como libro mayor
   10. Cifras y datos
   11. Fotografía
   12. Artículos y contenido largo
   13. Listados (blog, casos)
   14. Formularios
   15. Pie
   16. Movimiento y accesibilidad
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Tipografía --- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;

  /* Escala fluida. Límites en rem para no romper el zoom al 200 % (WCAG 1.4.4) */
  --t-display: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem);
  --t-h1: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  --t-h2: clamp(1.65rem, 1.15rem + 1.9vw, 2.6rem);
  --t-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-h4: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --t-lead: clamp(1.08rem, 0.98rem + 0.45vw, 1.32rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-mono: 0.75rem;

  /* Espacio */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Medidas */
  --wrap: 1200px;
  --wrap-text: 68ch;
  --header-h: 74px;

  /* Formas: casi rectas, de impreso, no de aplicación móvil */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-pill: 999px;

  /* Movimiento */
  --dur: 160ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /*
   * Curva de salida: arranca rápido y frena largo. Es la que hace que una
   * entrada se sienta "premium" en lugar de mecánica, y la que usa la página
   * de referencia del sector. Se reserva para lo que ENTRA en pantalla; para
   * los cambios pequeños de color sigue valiendo --ease.
   */
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);

  /* Lo que tarda un bloque en entrar. */
  --reveal-dur: 1000ms;
}

/* ---------- Paleta clara: papel ---------- */
:root,
[data-palette="papel"] {
  --paper: oklch(97.4% 0.006 92);
  --paper-2: oklch(94.9% 0.009 92);
  --paper-3: oklch(91.8% 0.012 92);
  --card: #ffffff;

  --ink: oklch(21.5% 0.042 258);
  --ink-2: oklch(40% 0.032 258);
  --ink-3: oklch(47% 0.028 258);

  --navy: oklch(24.5% 0.055 258);
  --navy-deep: oklch(18% 0.048 258);
  --navy-soft: oklch(93% 0.014 258);

  --gold: oklch(70% 0.125 79);
  --gold-deep: oklch(47% 0.105 68);
  --gold-soft: oklch(94% 0.032 85);

  /*
   * El ámbar de los botones. Tiene ficha propia porque --gold, que es el de
   * los filetes y los puntos, se queda corto de luminosidad para sostener un
   * texto encima: en el tema claro salía un ocre apagado y el botón parecía
   * marrón. Este es un oro de verdad.
   */
  --gold-boton: oklch(80% 0.145 84);

  /*
   * El oro del relleno del botón. Es un token propio y no --gold-deep por dos
   * motivos: en modo oscuro --gold-deep es MÁS CLARO que --gold y como relleno
   * apenas se distinguiría; y en claro --gold-deep es mucho más oscuro, lo que
   * bajaba el contraste del texto de 5,8:1 a 2,6:1. El relleno va hacia
   * arriba en luminosidad, que se ve igual de bien y no toca el contraste.
   */
  --gold-relleno: oklch(89% 0.115 86);

  --rule: oklch(21.5% 0.042 258 / 0.16);
  --rule-strong: oklch(21.5% 0.042 258 / 0.32);

  /*
   * Filetes y bordes sobre fondo azul marino.
   *
   * --rule-strong no sirve ahí: en tema claro es azul oscuro, y sobre azul
   * marino desaparece. El marino es el mismo en los dos temas, así que este
   * token también lo es: claro y oscuro se ven igual.
   */
  --rule-on-navy: oklch(97% 0.008 92 / 0.42);

  --on-navy: oklch(97% 0.008 92);
  --on-navy-2: oklch(85% 0.014 258);

  /*
   * El texto que va ENCIMA del ámbar. Es azul marino, no marrón: con un marrón
   * del mismo tono que el oro (que es lo que había) el botón se leía sucio,
   * como marrón sobre marrón. El marino contrasta por tono además de por
   * luminosidad, y es la pareja de la marca: oro sobre marino en el logotipo.
   */
  --on-gold: oklch(20% 0.045 258);

  --glow: oklch(70% 0.125 79 / 0.14);
}

/* ---------- Paleta oscura: tinta ----------
   La profundidad se construye con capas de fondo, nunca con sombras: en
   oscuro las sombras del modo claro desaparecen y todo se aplana. */
[data-theme="oscuro"] {
  color-scheme: dark;

  --paper: oklch(16.5% 0.018 258);
  --paper-2: oklch(19.5% 0.019 258);
  --paper-3: oklch(23% 0.02 258);
  --card: oklch(19.5% 0.019 258);

  --ink: oklch(94% 0.008 92);
  --ink-2: oklch(78% 0.014 258);
  --ink-3: oklch(64% 0.018 258);

  --navy: oklch(24.5% 0.055 258);
  --navy-deep: oklch(13% 0.03 258);
  --navy-soft: oklch(26% 0.03 258);

  --gold: oklch(78% 0.115 82);
  --gold-deep: oklch(84% 0.1 84);
  --gold-soft: oklch(28% 0.04 80);

  /* Ver el tema claro: el ámbar del botón tiene ficha propia. */
  --gold-boton: oklch(79% 0.125 84);

  /*
   * En oscuro el oro base ya es claro, así que el relleno sube todavía más.
   * También hacia arriba: es la dirección que no resta contraste al texto.
   */
  --gold-relleno: oklch(92% 0.085 88);

  --rule: oklch(94% 0.008 92 / 0.16);
  --rule-strong: oklch(94% 0.008 92 / 0.3);

  /* Igual que en el tema claro: el marino no cambia de un tema a otro. */
  --rule-on-navy: oklch(97% 0.008 92 / 0.42);

  --on-navy: oklch(96% 0.008 92);
  --on-navy-2: oklch(82% 0.016 258);

  /* Ver el tema claro: azul marino en vez de marrón. */
  --on-gold: oklch(22% 0.05 258);

  --glow: oklch(78% 0.115 82 / 0.12);
}

/* --------------------------------------------------------------------------
   Ajustes de modo oscuro para elementos que en claro se apoyan en la tinta.
   La tinta marina es oscura por definición, así que sobre un fondo oscuro
   desaparece: enlaces, botones de tinta y avatares necesitan su propia
   versión clara. Se declaran después de las reglas base para que la cascada
   no las anule.
   -------------------------------------------------------------------------- */
[data-theme="oscuro"] a:not(.btn) {
  color: var(--gold);
}

[data-theme="oscuro"] a:not(.btn):hover {
  color: oklch(92% 0.05 85);
}

[data-theme="oscuro"] .btn--ink {
  background: var(--gold-boton);
  border-color: var(--gold-boton);
  color: var(--on-gold);
}

[data-theme="oscuro"] .btn--ink:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--on-gold);
}

[data-theme="oscuro"] .btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink);
}

[data-theme="oscuro"] .btn--ghost:hover {
  border-color: var(--ink);
  background: oklch(94% 0.008 92 / 0.08);
  color: var(--ink);
}

[data-theme="oscuro"] .avatar,
[data-theme="oscuro"] .portrait__frame {
  background: var(--paper-3);
}

/* El marco dorado desplazado necesita más presencia sobre fondo oscuro */
[data-theme="oscuro"] .portrait__frame::after {
  opacity: 0.85;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* --- Titulares: serif de alto contraste, con intención estructural --- */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
  color: var(--ink);
}

a {
  color: var(--navy);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease),
    text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--gold-deep);
  text-decoration-color: currentColor;
}

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

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ==========================================================================
   03. ESTRUCTURA Y UTILIDADES
   ========================================================================== */

main {
  flex: 1 0 auto;
}

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

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

.wrap--wide {
  max-width: 1560px;
}

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

.section--tight {
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.section--paper2 {
  background: var(--paper-2);
}

.section--navy {
  background: var(--navy);
  color: var(--on-navy-2);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4,
.section--navy strong {
  color: var(--on-navy);
}

/* Etiqueta monoespaciada: el gesto tipográfico que da carácter técnico */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}

.label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.label--bare::before {
  display: none;
}

.section--navy .label {
  color: var(--on-navy-2);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}

.section--navy .lead {
  color: var(--on-navy-2);
}

.muted {
  color: var(--ink-3);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stack > * + * {
  margin-top: var(--s4);
}

.stack-lg > * + * {
  margin-top: var(--s6);
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -6rem;
  z-index: 200;
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--s4);
  color: var(--on-navy);
}

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

.text-center {
  text-align: center;
}

/* ==========================================================================
   04. REGLAS Y RETÍCULAS EDITORIALES
   --------------------------------------------------------------------------
   La línea fina horizontal es el elemento gráfico principal del sitio: separa
   secciones, ordena listas y sustituye a las tarjetas con sombra.
   ========================================================================== */

.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}

.section--navy .rule {
  background: var(--rule-on-navy);
}

.rule--strong {
  background: var(--rule-strong);
}

/* Encabezado de sección: etiqueta a la izquierda, título grande a la derecha.
   Retícula asimétrica que rompe la monotonía de las rejillas de tarjetas. */
.sec-head {
  display: grid;
  gap: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-strong);
  margin-bottom: var(--s7);
}

@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(200px, 22%) 1fr;
    gap: var(--s6);
    align-items: start;
  }
}

.sec-head__body {
  max-width: 62ch;
}

.sec-head h2 {
  margin-bottom: var(--s4);
}

/* Retícula de "libro mayor": filas separadas por reglas, sin tarjetas */
.ledger {
  border-top: 1px solid var(--rule-strong);
}

.ledger__row {
  display: grid;
  gap: var(--s4) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background var(--dur) var(--ease);
}

@media (min-width: 860px) {
  .ledger__row {
    grid-template-columns: 4rem 1fr 1.15fr auto;
    align-items: baseline;
  }
}

.ledger__row--link:hover {
  background: var(--paper-2);
}

.ledger__idx {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  padding-top: 0.4em;
}

.ledger__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--ink);
}

.ledger__title a {
  color: inherit;
  text-decoration: none;
}

.ledger__title a:hover {
  color: var(--gold-deep);
}

.ledger__desc {
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
}

.ledger__meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  padding-top: 0.5em;
}

/* Rejilla con bordes interiores: bloques que comparten líneas, no tarjetas */
.grid-bordered {
  display: grid;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .grid-bordered--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .grid-bordered--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-bordered--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-bordered > * {
  padding: var(--s6);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 699px) {
  .grid-bordered {
    border-left: 0;
  }
  .grid-bordered > * {
    padding-inline: 0;
    border-right: 0;
  }
}

/* Retícula de definición: término y descripción, como un glosario */
.deflist {
  border-top: 1px solid var(--rule-strong);
}

.deflist__item {
  display: grid;
  gap: var(--s2) var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .deflist__item {
    grid-template-columns: minmax(180px, 28%) 1fr;
  }
}

.deflist__term {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.35em;
}

.deflist__desc {
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* ==========================================================================
   05. CABECERA Y NAVEGACIÓN
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

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

.brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--navy);
}

[data-theme="oscuro"] .brand__mark {
  color: var(--gold);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s1);
  list-style: none;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--gold);
}

.nav__item {
  position: relative;
}

.nav__item--has-menu > .nav__link::after {
  content: "";
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg);
  opacity: 0.55;
  position: static;
  background: none;
}

/*
 * Desplegable de «Servicios». Se abre con un desplazamiento corto y un
 * escalado mínimo desde la esquina de arriba, que es de donde sale, y los
 * enlaces entran uno detrás de otro. Cerrar es inmediato: al revés se hace
 * eterno cuando ya has apartado el ratón.
 */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--s2);
  list-style: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform-origin: top left;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 200ms var(--ease-salida), transform 260ms var(--ease-salida),
    visibility 0s linear 260ms;
  box-shadow: 0 1px 0 var(--rule);
}

/* Un filete dorado que se dibuja al abrir, para que se vea de dónde sale. */
.nav__menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-salida);
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 260ms var(--ease-salida), transform 420ms var(--ease-salida),
    visibility 0s;
}

.nav__item--has-menu:hover .nav__menu::before,
.nav__item--has-menu:focus-within .nav__menu::before {
  transform: scaleX(1);
}

.nav__menu a {
  display: block;
  padding: var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
}

.nav__menu a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .nav__menu li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms var(--ease-salida), transform 200ms var(--ease-salida);
  }

  .nav__item--has-menu:hover .nav__menu li,
  .nav__item--has-menu:focus-within .nav__menu li {
    opacity: 1;
    transform: none;
    transition: opacity 380ms var(--ease-salida), transform 460ms var(--ease-salida);
  }

  .nav__item--has-menu:hover .nav__menu li:nth-child(2),
  .nav__item--has-menu:focus-within .nav__menu li:nth-child(2) {
    transition-delay: 60ms;
  }

  .nav__item--has-menu:hover .nav__menu li:nth-child(3),
  .nav__item--has-menu:focus-within .nav__menu li:nth-child(3) {
    transition-delay: 120ms;
  }

  .nav__item--has-menu:hover .nav__menu li:nth-child(n + 4),
  .nav__item--has-menu:focus-within .nav__menu li:nth-child(n + 4) {
    transition-delay: 180ms;
  }
}

.nav__menu small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

/* --- Conmutador de idioma ---
   Discreto a propósito: es una utilidad, no un reclamo. Es un <details>, así
   que se despliega y se pliega sin JavaScript y con el teclado. La lista copia
   el desplegable de «Servicios» para que los dos se lean igual. */
.idiomas {
  position: relative;
}

.idiomas__actual {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--ink-3);
  list-style: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.idiomas__actual::-webkit-details-marker {
  display: none;
}

.idiomas__actual:hover,
.idiomas[open] .idiomas__actual {
  color: var(--ink);
  border-color: var(--rule-strong);
}

.idiomas__bandera svg {
  display: block;
  width: 16px;
  height: 11px;
  border-radius: 1px;
}

.idiomas__sigla {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

/*
 * Conmutador de idioma. Es un <details>, así que el navegador lo abre y lo
 * cierra de golpe y no hay forma de animar la salida: el panel aparece y
 * desaparece. Lo que sí se anima es la ENTRADA, con una animación al quedar
 * abierto, y la flecha, que gira.
 */
.idiomas__flecha {
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg);
  opacity: 0.55;
  transition: transform 380ms var(--ease-salida);
}

.idiomas[open] .idiomas__flecha {
  transform: translateY(1px) rotate(-135deg);
}

.idiomas__lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 176px;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px oklch(21.5% 0.042 258 / 0.1);
  transform-origin: top right;
  z-index: 20;
}

@media (prefers-reduced-motion: no-preference) {
  .idiomas[open] .idiomas__lista {
    animation: desplegar-menu 420ms var(--ease-salida) both;
  }

  /* Las opciones entran una detrás de otra, como en el menú de Servicios. */
  .idiomas[open] .idiomas__opcion {
    animation: entrar-opcion 420ms var(--ease-salida) both;
  }

  .idiomas[open] .idiomas__opcion:nth-child(2) {
    animation-delay: 70ms;
  }

  .idiomas[open] .idiomas__opcion:nth-child(3) {
    animation-delay: 140ms;
  }
}

@keyframes desplegar-menu {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrar-opcion {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.idiomas__opcion {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
}

.idiomas__opcion:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.idiomas__opcion.is-actual {
  color: var(--ink);
  font-weight: 500;
}

.idiomas__opcion.is-actual::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 700px) {
  /* En pantalla estrecha basta con la bandera. */
  .idiomas__sigla {
    display: none;
  }
}

/* ==========================================================================
   06. MODO EDICIÓN
   --------------------------------------------------------------------------
   Todo va colgado de `.idf-editando`, la clase que pone el editor en el <html>
   solo después de comprobar que hay sesión. Para un visitante normal no existe
   ninguna de estas reglas: ni el panel, ni los recuadros al pasar el ratón.
   ========================================================================== */

.editor-panel {
  position: fixed;
  /* Arriba a la izquierda, pero por debajo de la cabecera: si no, tapa el
     logotipo, que es lo primero que se mira al comprobar un cambio. */
  top: calc(var(--header-h) + var(--s4));
  left: var(--s4);
  z-index: 600;
  width: 232px;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px oklch(21.5% 0.042 258 / 0.18);
  font-size: 0.82rem;
  line-height: 1.45;
}

.editor-panel__cabecera {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.editor-panel__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.editor-panel__idioma {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
}

.editor-panel__pista {
  margin-top: var(--s3);
  color: var(--ink-3);
  font-size: 0.76rem;
}

.editor-panel__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.editor-panel__guardar,
.editor-panel__cancelar {
  appearance: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/*
 * El botón de guardar del panel es un botón ámbar más, así que usa las mismas
 * fichas que el principal. Antes oscurecía a --gold-deep al pasar por encima,
 * que en el tema claro dejaba el texto casi ilegible.
 */
.editor-panel__guardar {
  border: 1px solid var(--gold-boton);
  background: var(--gold-boton);
  color: var(--on-gold);
}

.editor-panel__guardar:hover:not(:disabled) {
  background: var(--gold-relleno);
  border-color: var(--gold-relleno);
  color: var(--on-gold);
}

.editor-panel__cancelar {
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
}

.editor-panel__cancelar:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}

.editor-panel__guardar:disabled,
.editor-panel__cancelar:disabled {
  opacity: 0.42;
  cursor: default;
}

.editor-panel__cuenta {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}

.editor-panel__estado:not(:empty) {
  margin-top: var(--s2);
  font-size: 0.76rem;
  color: var(--ink-2);
}

.editor-panel__estado.is-ok {
  color: var(--ink);
}

.editor-panel__salir {
  display: inline-block;
  margin-top: var(--s4);
  font-size: 0.72rem;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editor-panel__salir:hover {
  color: var(--ink);
}

@media (max-width: 700px) {
  /* En el móvil el panel ocuparía media pantalla: se queda solo lo esencial. */
  .editor-panel {
    width: auto;
    right: var(--s4);
    padding: var(--s3);
  }
  .editor-panel__pista,
  .editor-panel__salir {
    display: none;
  }
  .editor-panel__acciones {
    flex-direction: row;
  }
}

/* --- Los textos, solo en modo edición --- */
.idf-editando [data-ed] {
  transition: outline-color 120ms ease, background-color 120ms ease;
}

.idf-editando [data-ed]:hover {
  outline: 1px dashed var(--gold);
  outline-offset: 2px;
  cursor: text;
}

.idf-editando [data-ed].is-editando {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  background: color-mix(in oklab, var(--gold) 14%, transparent);
}

/* Cambios sin guardar: se ven, pero no se confunden con el campo abierto. */
.idf-editando [data-ed].is-cambiado {
  background: color-mix(in oklab, var(--gold) 18%, transparent);
  box-shadow: 0 1px 0 var(--gold);
}

/* --- Interruptor de tema ---
   Un interruptor de verdad: la bolita se desliza de claro a oscuro y lleva
   dentro el icono del modo en el que estás. El estado no lo marca una clase,
   lo marca aria-checked, que es lo que anuncia el lector de pantalla; así lo
   que se ve y lo que se oye no pueden separarse. */
.tema {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: var(--r-pill);
}

.tema__pista {
  position: relative;
  display: block;
  width: 52px;
  height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tema:hover .tema__pista {
  border-color: var(--ink-3);
}

.tema__bola {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease);
}

.tema[aria-checked="true"] .tema__bola {
  transform: translateX(24px);
}

.tema__cara {
  display: none;
  line-height: 0;
}

/* En claro se enseña el sol; en oscuro, la luna. */
.tema[aria-checked="false"] .tema__cara--sol {
  display: block;
}

.tema[aria-checked="true"] .tema__cara--luna {
  display: block;
}

.tema__icono {
  width: 13px;
  height: 13px;
  display: block;
}

.tema:focus-visible .tema__pista {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Botón hamburguesa --- */
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--rule-strong);
  background: transparent;
  width: 42px;
  height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  place-items: center;
  color: var(--ink);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background var(--dur) var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1040px) {
  .nav-toggle {
    display: grid;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto auto;
    width: min(380px, 90vw);
    height: calc(100dvh - var(--header-h));
    background: var(--paper);
    border-left: 1px solid var(--rule-strong);
    padding: var(--s5) var(--s5) var(--s8);
    overflow-y: auto;
    margin-left: 0;
    transform: translateX(105%);
    transition: transform var(--dur-slow) var(--ease);
    visibility: hidden;
  }

  .nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__item {
    border-bottom: 1px solid var(--rule);
  }

  .nav__link {
    padding: var(--s4) 0;
    font-size: 1.05rem;
    justify-content: space-between;
    border-radius: 0;
  }

  .nav__link:hover {
    background: transparent;
    color: var(--gold-deep);
  }

  .nav__link[aria-current="page"]::after {
    display: none;
  }

  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--s4) var(--s4);
    border-left: 1px solid var(--rule);
    border-radius: 0;
    margin-left: var(--s3);
    min-width: 0;
  }

  .header__actions .btn {
    display: none;
  }
}

@media (max-width: 560px) {
  .brand__tag {
    display: none;
  }
}

/* ==========================================================================
   06. BOTONES, ENLACES Y ETIQUETAS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.78rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Primario: oro con tinta oscura. Contraste alto y coherente con el logotipo */
.btn--primary {
  background-color: var(--gold-boton);
  color: var(--on-gold);
  border-color: var(--gold-boton);
}

/*
 * El relleno que sube al pasar el ratón.
 *
 * En la página de referencia el botón lleva un <span> con el texto por encima
 * de una capa que se desliza. Aquí no se puede: envolver el texto en un <span>
 * cambiaría el contexto del que sale la clave del texto editable y se
 * perderían las traducciones de todos los botones. Se consigue lo mismo con un
 * degradado del color de destino que crece desde abajo, sin tocar el marcado.
 */
@media (hover: hover) and (pointer: fine) {
  .btn--primary {
    background-image: linear-gradient(var(--gold-relleno), var(--gold-relleno));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 0%;
    transition: background-size 420ms var(--ease-salida),
      background-color var(--dur) var(--ease), color var(--dur) var(--ease),
      border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .btn--primary:hover {
    background-size: 100% 100%;
    border-color: var(--gold-relleno);
    color: var(--on-gold);
  }
}

.btn--ink {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.btn--ink:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--on-navy);
}

.btn--ghost {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--lg {
  padding: 1rem 1.7rem;
  font-size: 1rem;
}

.btn--sm {
  padding: 0.5rem 0.85rem;
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* Enlace con flecha: navegación secundaria sin peso de botón */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.arrow-link::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
  color: var(--gold-deep);
}

.arrow-link:hover {
  color: var(--gold-deep);
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* Etiquetas de estado */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}

.tag--gold {
  color: var(--gold-deep);
}

.tag--boxed {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  color: var(--ink-2);
}

a.tag--boxed:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  background: transparent;
}

/* Aviso: nota al margen con filete dorado */
.note {
  border-left: 2px solid var(--gold);
  padding: var(--s2) 0 var(--s2) var(--s5);
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: 60ch;
}

.note strong {
  color: var(--ink);
}

.section--navy .note {
  color: var(--on-navy-2);
}

.section--navy .note strong {
  color: var(--on-navy);
}

/* ==========================================================================
   07. PORTADA
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  /*
   * Las dos columnas empiezan arriba. Con align-items:end el retrato se pegaba
   * al fondo de la fila, y como la altura de la fila la marca la columna de
   * texto, cuanto más largo era el texto más abajo caía la foto: en alemán
   * bajaba 141 px respecto al castellano. La fotografía tiene que estar
   * siempre en el mismo sitio.
   */
  align-items: start;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }
}

.hero__eyebrow {
  margin-bottom: var(--s5);
}

.hero__title {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.02;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 90;
}

.hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90;
  color: var(--gold-deep);
}

.hero__lead {
  margin-top: var(--s5);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}

.hero__actions {
  margin-top: var(--s6);
}

/* Franja de datos: cifras separadas por reglas verticales */
.figures {
  display: grid;
  border-top: 1px solid var(--rule-strong);
  margin-top: var(--s8);
}

@media (min-width: 700px) {
  .figures {
    /*
     * auto-fit y no repeat(3, 1fr): la franja se reparte sola según cuántas
     * cifras haya. Con las tres de serie el resultado es idéntico, pero si
     * alguien deja una vacía las otras dos ocupan el ancho completo.
     */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.figures > * {
  padding: var(--s5) 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .figures > * {
    padding: var(--s6) var(--s6) var(--s5) 0;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .figures > *:last-child {
    border-right: 0;
  }
  .figures > * + * {
    padding-left: var(--s6);
  }
}

.figure__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.figure__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s3);
  line-height: 1.5;
}

/* ==========================================================================
   08. SECCIONES Y BLOQUES
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--uneven {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* Bloque numerado: proceso en pasos, con numeral grande al margen */
.steps {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  counter-reset: paso;
}

.steps > li {
  display: grid;
  gap: var(--s3) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
  counter-increment: paso;
}

@media (min-width: 820px) {
  .steps > li {
    grid-template-columns: 5rem 1fr 1.2fr;
    align-items: baseline;
  }
}

.steps > li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  padding-top: 0.45em;
}

.steps h3 {
  font-size: var(--t-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.steps p {
  color: var(--ink-2);
  font-size: var(--t-small);
  margin: 0;
}

/* Comparativa a dos columnas: lo que sí y lo que no */
.compare {
  display: grid;
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 780px) {
  .compare {
    grid-template-columns: repeat(2, 1fr);
  }
}

.compare__col {
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 780px) {
  .compare__col + .compare__col {
    padding-left: var(--s7);
    border-left: 1px solid var(--rule);
  }
}

.compare__title {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s5);
}

.compare__col--gold .compare__title {
  color: var(--gold-deep);
}

.compare ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s4);
}

.compare li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.55;
}

.compare li::before {
  content: "—";
  color: var(--ink-3);
  line-height: 1.55;
}

.compare__col--gold li::before {
  content: "＋";
  color: var(--gold-deep);
}

/* Cita destacada */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 48;
  border-left: 2px solid var(--gold);
  padding-left: var(--s6);
  max-width: 34ch;
}

.section--navy .pullquote {
  color: var(--on-navy);
}

/* Rejilla de tarjetas sobria: solo para contenido realmente heterogéneo */
.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--card);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.card__icon {
  color: var(--gold-deep);
  margin-bottom: var(--s2);
}

.card h3 {
  font-size: var(--t-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.card p {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin: 0;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--s4);
}

/* ==========================================================================
   09. ACORDEÓN (preguntas frecuentes)
   ========================================================================== */

.faq {
  border-top: 1px solid var(--rule-strong);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  gap: var(--s5);
  align-items: start;
  padding-block: var(--s5);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--gold-deep);
}

.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  margin-top: 0.55em;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.75em;
}

.faq__a {
  padding-bottom: var(--s6);
  max-width: 68ch;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.68;
}

.faq__a > * + * {
  margin-top: var(--s4);
}

.section--navy .faq,
.section--navy .faq details {
  border-color: var(--rule-on-navy);
}

.section--navy .faq summary {
  color: var(--on-navy);
}

.section--navy .faq summary::after {
  border-color: var(--on-navy-2);
}

.section--navy .faq__a {
  color: var(--on-navy-2);
}

/* ==========================================================================
   10. FOTOGRAFÍA
   ========================================================================== */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border-radius: var(--r-md);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Retrato del hero: proporción contenida, con pie de foto tipo archivo */
.portrait {
  position: relative;
}

.portrait__frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 4 / 5;
}

/* Marco dorado desplazado: gesto gráfico, no sombra */
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  transform: translate(10px, 10px);
  pointer-events: none;
  opacity: 0.55;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.portrait__caption {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* Banda fotográfica a sangre: ancla visual de la portada */
.band {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}

.band img {
  width: 100%;
  height: clamp(320px, 46vw, 640px);
  object-fit: cover;
  object-position: 50% 16%;
  opacity: 0.92;
}

.band__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s7) 0 var(--s6);
  background: linear-gradient(
    to top,
    oklch(18% 0.048 258 / 0.94) 0%,
    oklch(18% 0.048 258 / 0.6) 45%,
    transparent 100%
  );
  color: var(--on-navy);
}

.band__overlay h2 {
  color: var(--on-navy);
  max-width: 24ch;
}

.band__overlay p {
  color: var(--on-navy-2);
  max-width: 52ch;
  margin-top: var(--s4);
}

/* Cita con retrato pequeño para testimonios */
.quote {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 820px) {
  .quote {
    grid-template-columns: 1fr 15rem;
    gap: var(--s7);
    align-items: start;
  }
}

.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 40;
}

.quote blockquote::before {
  content: "«";
  color: var(--gold-deep);
}

.quote blockquote::after {
  content: "»";
  color: var(--gold-deep);
}

.quote__who {
  font-size: var(--t-small);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

.quote__who strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.quote__who span {
  display: block;
  color: var(--ink-3);
  font-size: var(--t-mono);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: var(--s2);
  line-height: 1.5;
}

/* ==========================================================================
   11. ARTÍCULOS Y CONTENIDO LARGO
   ========================================================================== */

.prose {
  max-width: var(--wrap-text);
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--ink-2);
}

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

.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.prose h3 {
  margin-top: var(--s7);
  font-size: var(--t-h3);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--s4);
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
  display: grid;
  gap: var(--s3);
}

.prose li::marker {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.prose blockquote {
  margin: 0;
  padding: var(--s2) 0 var(--s2) var(--s6);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

.prose hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin-block: var(--s7);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.prose thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
}

/* Cabecera de artículo */
.article-head {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--s7);
  border-bottom: 1px solid var(--rule);
}

.article-head h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  max-width: 22ch;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.article-body {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
  padding-block: var(--s8);
}

@media (min-width: 1000px) {
  .article-body {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}

/* Índice lateral pegajoso, como el sumario de un informe */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s4);
  font-size: var(--t-small);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}

.toc ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s1);
  counter-reset: toc;
}

.toc a {
  display: block;
  padding: var(--s2) 0;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--gold-deep);
  letter-spacing: 0.06em;
}

.toc a:hover {
  color: var(--gold-deep);
}

@media (max-width: 999px) {
  .toc {
    position: static;
  }
}

/* ==========================================================================
   12. LISTADOS (blog, casos, artículos relacionados)
   ========================================================================== */

.postlist {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.postlist__item {
  display: grid;
  gap: var(--s3) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 800px) {
  .postlist__item {
    grid-template-columns: 9rem 1fr auto;
    align-items: baseline;
  }
}

.postlist__date {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.4em;
}

.postlist__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.postlist__title a {
  color: var(--ink);
  text-decoration: none;
}

.postlist__title a:hover {
  color: var(--gold-deep);
}

.postlist__excerpt {
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: var(--s3);
  max-width: 62ch;
}

.postlist__tag {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

/* ==========================================================================
   13. FORMULARIOS
   ========================================================================== */

.form {
  display: grid;
  gap: var(--s5);
  max-width: 42rem;
}

.field {
  display: grid;
  gap: var(--s2);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field .hint {
  font-size: var(--t-mono);
  font-family: var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.72rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  font-size: var(--t-body);
  font-family: var(--font-sans);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.75;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--gold-deep);
  box-shadow: inset 0 -1px 0 var(--gold-deep);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.25rem, calc(100% - 7px) 1.25rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.field--check {
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
  gap: var(--s3);
}

.field--check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  accent-color: var(--gold-deep);
  border: 1px solid var(--rule-strong);
}

.field--check label {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  line-height: 1.55;
}

/* --- Trampa para robots ---
   Fuera de la pantalla pero dentro del formulario: los robots que rellenan
   todos los campos caen, las personas no lo ven. Con display:none muchos lo
   saltarían, así que se saca de la vista sin llegar a ocultarlo. */
.field--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* Datos de contacto en formato ficha */
.ficha {
  border-top: 1px solid var(--rule-strong);
}

.ficha__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
}

.ficha__key {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.2em;
}

/* ==========================================================================
   14. LLAMADA FINAL
   ========================================================================== */

.closing {
  background: var(--navy);
  color: var(--on-navy-2);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.closing h2 {
  color: var(--on-navy);
  max-width: 26ch;
}

.closing__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
}

@media (min-width: 880px) {
  .closing__grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

.closing p {
  color: var(--on-navy-2);
  margin-top: var(--s5);
  max-width: 48ch;
}

.closing .btn-row {
  margin-top: var(--s6);
}

/* Sobre fondo oscuro los botones necesitan su propio ajuste: declararlo aquí
   (después de las reglas base) evita que la cascada lo anule. */
.closing .btn--ghost,
.section--navy .btn--ghost {
  border-color: var(--rule-on-navy);
  color: var(--on-navy);
}

.closing .btn--ghost:hover,
.section--navy .btn--ghost:hover {
  border-color: var(--on-navy);
  color: var(--on-navy);
  background: oklch(97% 0.008 92 / 0.08);
}

.section--navy a:not(.btn),
.closing a:not(.btn) {
  color: var(--gold);
}

.section--navy a:not(.btn):hover,
.closing a:not(.btn):hover {
  color: var(--on-navy);
}

/* ==========================================================================
   15. PIE
   ========================================================================== */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule-strong);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) var(--s5);
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: auto;
}

.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

@media (min-width: 560px) and (max-width: 899px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer__about {
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--t-small);
}

.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}

.footer__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.footer__col a {
  color: var(--ink-2);
  text-decoration: none;
}

.footer__col a:hover {
  color: var(--gold-deep);
}

.footer__bottom {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer__bottom ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.footer__bottom a {
  color: var(--ink-3);
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--gold-deep);
}

/* ==========================================================================
   16. MOVIMIENTO Y ACCESIBILIDAD
   --------------------------------------------------------------------------
   Los bloques entran a medida que se baja. Lo decide `main.js` con un
   IntersectionObserver: cuando un bloque asoma por abajo se le pone la clase
   `idf-in` y el CSS reproduce la entrada.

   Se hace así, y no con `animation-timeline: view()`, por una razón de peso:
   las líneas de tiempo de scroll no las entienden todos los navegadores
   (Edge y Chrome desde la 115, Safari desde la 26, Firefox desde la 160), y
   donde no las entienden la web se queda completamente quieta sin avisar. El
   observador funciona en todas partes.

   Cuatro reglas que no se deben romper al tocar esto:

   1. Solo se animan transform y opacity. Son las dos únicas propiedades que
      la GPU interpola sin recalcular el layout.
   2. **Aquí no se añaden clases al HTML.** Los textos editables llevan una
      clave que se calcula, entre otras cosas, a partir de las clases que
      envuelven al texto (ver _build/editable.js). Añadir una clase a un
      contenedor cambia la clave de todo su contenido y las traducciones ya
      hechas se pierden en silencio. Por eso los bloques se enganchan por las
      clases que ya tienen, y `idf-in` se pone desde JavaScript, no en el
      marcado.
   3. Nada se queda oculto si el JavaScript no llega. Los bloques solo se
      esconden bajo `.idf-revela`, una clase que pone el script del <head> y
      que exige IntersectionObserver. Sin JavaScript, sin observador o con
      menos movimiento pedido, no se esconde nada.
   4. Al imprimir se apaga. El navegador no siempre resuelve las animaciones
      al imprimir y la página saldría con secciones en blanco.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Qué entra. Son bloques, no líneas de texto sueltas: la lista es la misma
   * que la de assets/js/main.js y la que comprueba
   * _build/comprobar-animaciones.js. Si se añade un selector aquí hay que
   * añadirlo también allí, o ese bloque se queda escondido para siempre.
   */
  .idf-revela
    :is(
      .reveal,
      .sec-head,
      .figures > *,
      .ledger__row,
      .deflist__item,
      .steps > li,
      .compare__col,
      .faq details,
      .closing__grid > div,
      .prose > *,
      .split > *
    ) {
    --reveal-y: 56px;
    opacity: 0;
    transform: translateY(var(--reveal-y));
  }

  /*
   * Los bloques de texto de un artículo se mueven menos: un párrafo ya es alto
   * de por sí y 56 px le haría dar un salto desproporcionado.
   */
  .idf-revela :is(.prose > *, .split > *) {
    --reveal-y: 40px;
  }

  .idf-revela
    :is(
      .reveal,
      .sec-head,
      .figures > *,
      .ledger__row,
      .deflist__item,
      .steps > li,
      .compare__col,
      .faq details,
      .closing__grid > div,
      .prose > *,
      .split > *
    ).idf-in {
    animation: entrar var(--reveal-dur, 1000ms) var(--ease-salida) both;
  }

  /*
   * Escalonado. Los hermanos de una fila entran a la vez porque están a la
   * misma altura; retrasar un poco la salida de los siguientes los deja por
   * detrás y la fila se lee como una sucesión en vez de como un bloque.
   *
   * Solo a partir de 980 px, que es cuando la retícula se pone en tres
   * columnas: por debajo van apiladas y ya entran cada una a su tiempo.
   */
  @media (min-width: 980px) {
    .idf-revela .grid-bordered--3 > :nth-child(2) {
      animation-delay: 90ms;
    }

    .idf-revela .grid-bordered--3 > :nth-child(n + 3) {
      animation-delay: 180ms;
    }
  }

  @media (min-width: 700px) {
    .idf-revela .grid-bordered--2 > :nth-child(2) {
      animation-delay: 90ms;
    }
  }
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-y, 56px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * El acordeón de preguntas. El navegador abre y cierra el <details> de golpe
 * (animar su alto no es fiable todavía), así que lo que se anima es la
 * respuesta al aparecer.
 */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__a {
    animation: desplegar 420ms var(--ease-salida) both;
  }
}

@keyframes desplegar {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   17. EL CAMBIO DE TEMA
   --------------------------------------------------------------------------
   Pasar de claro a oscuro repinta la página entera de golpe. Mientras dura el
   cambio se le pone al documento la clase `idf-tema` y durante ese rato todo
   transiciona sus colores, así que se ve como un fundido de un segundo.

   La clase se pone y se quita desde main.js. Solo mientras dura: con las
   transiciones de color puestas siempre, cada hover de la página tardaría un
   segundo. Y lleva `!important` para ganar a las transiciones de los hover,
   que son mucho más cortas.

   Si no hay JavaScript, no hay fundido y el tema cambia de golpe, como antes.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .idf-tema,
  .idf-tema *,
  .idf-tema *::before,
  .idf-tema *::after {
    transition: background-color 1s var(--ease-salida),
      color 1s var(--ease-salida), border-color 1s var(--ease-salida),
      outline-color 1s var(--ease-salida), fill 1s var(--ease-salida),
      stroke 1s var(--ease-salida), box-shadow 1s var(--ease-salida) !important;
  }
}

/* ==========================================================================
   18. LA CABECERA AL BAJAR
   --------------------------------------------------------------------------
   Cuando la página se ha desplazado, la cabecera se asienta: el fondo se
   vuelve opaco y aparece un filete dorado. Es una sola animación ligada al
   scroll de la página, no a la posición de un bloque.

   Se anima la OPACIDAD de una capa, que va en el compositor, en lugar del
   color de fondo, que obligaría a repintar la cabecera en cada fotograma por
   encima del `backdrop-filter`, que ya cuesta lo suyo.
   ========================================================================== */

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--paper);
  border-bottom: 1px solid var(--gold);
  opacity: 0;
}

/* El contenido tiene que quedar por encima de esa capa. */
.site-header__inner {
  position: relative;
  z-index: 1;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      animation: asentarse linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
  }
}

/*
 * Plan B para quien no entiende `scroll()`. `main.js` pone `idf-cabecera` en
 * el documento en cuanto la página pasa de 40 px. La clase se pone siempre
 * —cuesta una comparación— pero solo se usa donde la línea de tiempo no
 * llega, para no tener dos mecanismos moviendo lo mismo a la vez.
 */
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .idf-cabecera .site-header::after {
      opacity: 0.88;
      transition: opacity var(--dur-slow) var(--ease);
    }
  }
}

@keyframes asentarse {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.88;
  }
}

/* ==========================================================================
   18 bis. EL CORREO DE CONTACTO
   --------------------------------------------------------------------------
   Al pasar por encima de una dirección de correo aparece, a su derecha, el
   icono de las dos hojas: al pulsarla se copia al portapapeles en vez de
   abrirse el programa de correo.

   El cajón del icono arranca a cero y crece con la transición, así que el
   texto que va detrás se aparta de forma continua en vez de dar un salto.
   El marcado lo pone `main.js`: aquí solo hay que darle forma, porque el
   correo vive en un único sitio (el panel) y las 54 páginas no guardan copias.

   En una pantalla táctil no hay puntero, así que el icono no asoma; al tocar
   la dirección se copia igual y el icono se queda a la vista hecho un visto
   bueno, que es la confirmación de que ha funcionado.
   ========================================================================== */

.correo__icono {
  display: inline-block;
  width: 0;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.16em;
  opacity: 0;
  color: var(--gold-deep);
  transition: width var(--dur) var(--ease), margin-left var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.correo__icono svg {
  display: block;
  width: 0.95em;
  height: 0.95em;
}

/* Los dos iconos viven en el mismo cajón: el de copiar y el del visto bueno.
   Se apilan en bloque para que el cajón mida lo que mide el dibujo. */
.correo__copia,
.correo__hecho {
  display: block;
}

.correo__hecho {
  display: none;
}

.correo[data-copiado] .correo__copia {
  display: none;
}

.correo[data-copiado] .correo__hecho {
  display: block;
}

.correo[data-copiado] .correo__icono {
  width: 0.95em;
  margin-left: 0.3em;
  opacity: 1;
}

/* En papel la dirección tiene que leerse igual: sin iconos de por medio. */
@media print {
  .correo__icono {
    display: none;
  }
}

/* ==========================================================================
   19. MICROINTERACCIONES
   --------------------------------------------------------------------------
   Todo el movimiento de hover del sitio vive aquí, y todo él detrás de
   `hover: hover`. En una pantalla táctil no hay puntero que pasar por encima:
   sin el guardia, el navegador aplica el estado al tocar y se queda pegado.

   El gesto es siempre el mismo, para que el sitio se lea como una sola cosa:
   un filete dorado que se dibuja de izquierda a derecha y el contenido que
   acompaña con un desplazamiento corto. Se mueven `transform`, `opacity` y
   `background-color`; nada que obligue a recolocar la página.

   Lo que ya había repartido por el archivo —cambios de color al pasar por
   encima— se queda donde está: un color no mueve nada y no compensa el
   trasiego de moverlo.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  /* --- Botones: se despegan dos píxeles -------------------------------- */
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:active {
    transform: translateY(0);
  }

  /* --- Logotipo: una inclinación mínima -------------------------------- */
  .brand__mark {
    transition: transform var(--dur) var(--ease);
  }

  .brand:hover .brand__mark {
    transform: rotate(-5deg) scale(1.06);
  }

  /* --- Navegación: el filete se dibuja bajo el enlace ------------------ */
  .nav__link {
    position: relative;
  }

  .nav__link::before {
    content: "";
    position: absolute;
    left: var(--s3);
    right: var(--s3);
    bottom: 0.2rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
  }

  .nav__link:hover::before {
    transform: scaleX(1);
  }

  /* --- Filas del libro mayor: se dibuja la regla y el título se aparta -- */
  .ledger__row {
    position: relative;
  }

  /* Un lomo dorado en el borde izquierdo. Es lo que más se ve de lejos y lo
     que hace que la fila se sienta pulsada, sin mover nada de sitio. */
  .ledger__row--link::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform var(--dur-slow) var(--ease);
  }

  .ledger__row--link:hover::before {
    transform: scaleY(1);
  }

  .ledger__row--link::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
  }

  .ledger__row--link:hover::after {
    transform: scaleX(1);
  }

  .ledger__title {
    transition: transform var(--dur) var(--ease);
  }

  .ledger__row--link:hover .ledger__title {
    transform: translateX(10px);
  }

  /* --- Tarjetas de la retícula: fondo y filete, sin despegar la celda ---
     Nada de levantar la tarjeta: las celdas comparten las líneas de la
     retícula y separarlas rompería justo lo que las hace bonitas. */
  .grid-bordered > * {
    position: relative;
    transition: background-color var(--dur) var(--ease);
  }

  .grid-bordered > *::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
  }

  .grid-bordered > *:hover::before {
    transform: scaleX(1);
  }

  .grid-bordered > *:hover {
    background: var(--paper-3);
  }

  .grid-bordered > * .card__icon {
    transition: transform var(--dur) var(--ease);
  }

  .grid-bordered > *:hover .card__icon {
    transform: translateY(-3px) scale(1.08);
  }

  /* --- Preguntas: el filete y el signo que crece ------------------------ */
  .faq details {
    position: relative;
  }

  .faq details::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
  }

  .faq details:hover::after {
    transform: scaleX(1);
  }

  .faq summary:hover::after {
    border-color: var(--gold-deep);
    transform: rotate(45deg) scale(1.3);
  }

  .faq details[open] summary:hover::after {
    transform: rotate(-135deg) scale(1.3);
  }

  /* --- Entradas del blog: la regla y el título -------------------------- */
  .postlist__item {
    position: relative;
  }

  .postlist__item::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
  }

  .postlist__item:hover::after {
    transform: scaleX(1);
  }

  .postlist__title {
    transition: transform var(--dur) var(--ease);
  }

  .postlist__item:hover .postlist__title {
    transform: translateX(10px);
  }

  .postlist__date {
    transition: color var(--dur) var(--ease);
  }

  .postlist__item:hover .postlist__date {
    color: var(--gold-deep);
  }

  /* --- Fotografía: un acercamiento contenido ---------------------------- */
  .portrait__frame img,
  .photo img {
    transition: transform var(--dur-slow) var(--ease);
  }

  .portrait__frame:hover img,
  .photo:hover img {
    transform: scale(1.035);
  }

  /* --- El correo: las dos hojas asoman al pasar por encima --------------- */
  .correo:hover .correo__icono,
  .correo:focus-visible .correo__icono {
    width: 0.95em;
    margin-left: 0.3em;
    opacity: 1;
  }

  /* --- Pie: la regla que se dibuja bajo el enlace ----------------------- */
  .footer__col a,
  .footer__bottom a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .footer__col a:hover,
  .footer__bottom a:hover {
    background-size: 100% 1px;
  }
}

/*
 * Menos movimiento, y papel. En los dos casos el contenido tiene que estar
 * entero: al imprimir, el navegador no siempre resuelve las animaciones, y una
 * página con secciones en blanco sería el peor fallo posible.
 *
 * Con menos movimiento ya no se esconde nada (las reglas de `.idf-revela` van
 * detrás de `no-preference`), pero se deja aquí igualmente: es la red que
 * recoge cualquier animación de entrada que se añada en el futuro.
 */
@media (prefers-reduced-motion: reduce) {
  :is(
    .reveal,
    .sec-head,
    .figures > *,
    .ledger__row,
    .deflist__item,
    .steps > li,
    .compare__col,
    .faq details,
    .closing__grid > div
  ) {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/*
 * Al imprimir, todo visible y quieto. El `!important` gana a `.idf-revela`,
 * que es más específico: hace falta, porque si el bloque no llegó a entrar en
 * pantalla nunca recibió `idf-in` y saldría en blanco.
 */
@media print {
  :is(
    .reveal,
    .sec-head,
    .figures > *,
    .ledger__row,
    .deflist__item,
    .steps > li,
    .compare__col,
    .faq details,
    .closing__grid > div
  ) {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  .site-header,
  .site-footer,
  .closing,
  .nav-toggle {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
}