/* ===========================================================================
   Camba Wallet — hoja de estilo
   ---------------------------------------------------------------------------
   Dirección: oro grabado sobre azul noche. La referencia no es una aplicación
   de criptomonedas sino la calcografía — el grabado de los billetes y los
   certificados: guilloché de líneas finas, filetes dobles, versalitas
   espaciadas y una tipografía de alto contraste.

   Bodoni Moda para los titulares porque su contraste extremo entre asta
   gruesa y fina es literalmente el de la rotulación de un billete. IBM Plex
   Sans para el texto e IBM Plex Mono para las cifras, que necesitan números
   de ancho fijo: en una tabla de importes, unos dígitos más anchos que otros
   desalinean las columnas y hacen ilegible lo que más importa.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Fichas de color
   -------------------------------------------------------------------------- */
:root {
  /* Azules: del casi negro del logo al azul de la cartera */
  --tinta:        #05090f;
  --tinta-2:      #080e1a;
  --noche:        #0b1526;
  --azul:         #101c38;
  --azul-claro:   #16264a;
  --filete:       #1d2f56;

  /* Oros: sombra, cuerpo y brillo. El degradado entre los tres es lo que
     da la sensación de lámina metálica; un oro plano se ve como amarillo. */
  --oro-sombra:   #8a6a12;
  --oro:          #c9a227;
  --oro-cuerpo:   #d8b44a;
  --oro-brillo:   #f6e3a6;

  --marfil:       #efe8da;
  --marfil-tenue: #c3bcae;
  --apagado:      #8d96ab;

  --verde:        #4c9f7a;
  --ambar:        #d3a03c;
  --gris-espera:  #6d7689;

  --lamina: linear-gradient(
    100deg,
    var(--oro-sombra) 0%,
    var(--oro) 18%,
    var(--oro-brillo) 38%,
    var(--oro-cuerpo) 56%,
    var(--oro) 74%,
    var(--oro-brillo) 92%,
    var(--oro-sombra) 100%
  );

  --ancho: 1180px;
  --medida: 62ch;

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Curva de salida: arranca rápido y se asienta. Un `ease` corriente hace
     que todo parezca del mismo material; esta da peso. */
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla: sin esto el título de
     la sección queda tapado por la barra. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--tinta);
  color: var(--marfil);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Trama de fondo: un punteado casi imperceptible que quita la planitud del
   color sólido sin llegar a leerse como textura. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(201, 162, 39, 0.11) 1px,
    transparent 0
  );
  background-size: 3.5rem 3.5rem;
}

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

a { color: var(--oro-cuerpo); text-decoration-color: rgba(201, 162, 39, 0.35); text-underline-offset: 0.22em; }
a:hover { color: var(--oro-brillo); }

:focus-visible {
  outline: 2px solid var(--oro-brillo);
  outline-offset: 3px;
  border-radius: 2px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--oro); color: var(--tinta);
  font-weight: 600; text-decoration: none; border-radius: 3px;
  transition: top 0.2s var(--salida);
}
.saltar:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.1rem 1.5rem;
  transition: background 0.35s var(--salida), border-color 0.35s var(--salida), padding 0.35s var(--salida);
  border-bottom: 1px solid transparent;
}
/* La clase la pone el JS al bajar: la barra se vuelve opaca solo cuando hay
   contenido debajo que podría atravesarla. */
.cabecera.posada {
  background: rgba(5, 9, 15, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--filete);
  padding-block: 0.75rem;
}

.marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.marca__emblema { width: 44px; height: 44px; filter: drop-shadow(0 2px 10px rgba(201, 162, 39, 0.32)); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: var(--serif);
  font-size: 1.32rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--lamina); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca__sub {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.44em;
  text-transform: uppercase; color: var(--marfil-tenue); margin-top: 0.22rem;
}

.nav { display: flex; gap: 1.85rem; }
.nav a {
  position: relative;
  font-size: 0.83rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--marfil-tenue);
  transition: color 0.25s var(--salida);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -0.45rem;
  width: 100%; height: 1px; background: var(--lamina);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--salida);
}
.nav a:hover { color: var(--oro-brillo); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-boton { display: none; }

.nav-movil { display: none; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.82rem 1.6rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.3s var(--salida), box-shadow 0.3s var(--salida),
              background 0.3s var(--salida), color 0.3s var(--salida);
}

.boton--oro {
  background: var(--lamina);
  background-size: 200% 100%;
  color: var(--tinta); font-weight: 600;
  box-shadow: 0 6px 22px -8px rgba(201, 162, 39, 0.6);
}
.boton--oro:hover {
  color: var(--tinta);
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(214, 180, 74, 0.75);
}

.boton--linea { border-color: var(--filete); color: var(--marfil); background: transparent; }
.boton--linea:hover {
  border-color: var(--oro); color: var(--oro-brillo);
  background: rgba(201, 162, 39, 0.07); transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  display: grid; place-items: center;
  min-height: min(92vh, 900px);
  padding: 4rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
}

.portada__grabado {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.grabado__roseta {
  position: absolute;
  width: min(148vmin, 1080px); aspect-ratio: 1;
  background: url("/assets/img/guilloche.svg") center / contain no-repeat;
  opacity: 0.2;
  animation: girar 150s linear infinite;
}
.grabado__roseta--inversa {
  width: min(96vmin, 700px);
  opacity: 0.13;
  animation-duration: 96s;
  animation-direction: reverse;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Vela los bordes del guilloché para que se funda con el fondo en vez de
   cortarse en seco contra el borde de la pantalla. */
.portada__velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 54% at 50% 42%, transparent 0%, rgba(5, 9, 15, 0.74) 62%, var(--tinta) 100%),
    linear-gradient(180deg, rgba(5, 9, 15, 0.55) 0%, transparent 22%, transparent 74%, var(--tinta) 100%);
}

.portada__cuerpo { position: relative; z-index: 2; max-width: 780px; }

.cintillo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 2.2rem;
  padding: 0.42rem 1rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--marfil-tenue);
  border: 1px solid var(--filete); border-radius: 100px;
  background: rgba(11, 21, 38, 0.5);
}
.cintillo__punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.6);
  animation: latir 2.6s ease-out infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

.portada__sello { margin: 0 0 2rem; display: grid; place-items: center; }
.portada__sello img {
  width: clamp(190px, 28vw, 290px); height: auto;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 40px rgba(201, 162, 39, 0.22));
  animation: flotar 7s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.titular {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-size: clamp(2.9rem, 1.6rem + 6vw, 6rem);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.015em;
}
.titular__linea { display: block; color: var(--marfil); }
.titular__enfasis {
  display: block; font-style: italic; font-weight: 600;
  background: var(--lamina); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lamina-pasa 9s ease-in-out infinite;
}
/* El brillo recorre la lámina en vez de quedarse fijo: es lo que hace que
   se lea como metal y no como un degradado amarillo. */
@keyframes lamina-pasa {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.entrada {
  max-width: 54ch; margin: 0 auto 2.6rem;
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  color: var(--marfil-tenue); line-height: 1.72;
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

.portada__aviso {
  max-width: 50ch; margin: 2.8rem auto 0;
  font-size: 0.86rem; line-height: 1.6; color: var(--apagado);
}

/* Filete doble de cierre, como el borde de un certificado. */
.portada__borde {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px;
  background:
    linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.5) 18%, rgba(246, 227, 166, 0.85) 50%, rgba(201, 162, 39, 0.5) 82%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.26) 30%, rgba(201, 162, 39, 0.26) 70%, transparent) 0 3px / 100% 1px no-repeat;
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.seccion {
  position: relative; z-index: 2;
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(4.5rem, 3rem + 6vw, 8rem) 1.5rem;
}
.seccion--oscura {
  max-width: none;
  background:
    linear-gradient(180deg, transparent, rgba(11, 21, 38, 0.55) 12%, rgba(11, 21, 38, 0.55) 88%, transparent);
  border-block: 1px solid var(--filete);
}
.seccion--oscura > * { max-width: var(--ancho); margin-inline: auto; }

.seccion__encabezado { max-width: var(--medida); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

.etiqueta {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--oro);
}

.titulo {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem);
  font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--marfil);
}

.bajada { margin: 0; color: var(--apagado); font-size: 1.03rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Rejilla de fichas
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  background: var(--filete);
  border: 1px solid var(--filete);
}
.rejilla--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); margin-top: 3rem; }
.rejilla--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* El separador es el propio fondo de la rejilla asomando por el hueco de 1px:
   da filetes perfectos de un pixel sin bordes dobles en los cruces. */
.ficha {
  position: relative; overflow: hidden;
  padding: 2.4rem 1.9rem;
  background: var(--tinta-2);
  transition: background 0.4s var(--salida);
}
.ficha::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.1), transparent 62%);
  opacity: 0; transition: opacity 0.45s var(--salida);
}
.ficha:hover { background: var(--noche); }
.ficha:hover::before { opacity: 1; }

.ficha__numero {
  margin: 0 0 1.4rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--oro-sombra);
}
.ficha__titulo {
  margin: 0 0 0.85rem;
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600;
  line-height: 1.2; color: var(--oro-brillo);
}
.ficha--sobria .ficha__titulo { font-size: 1.3rem; }
.ficha__texto { margin: 0; color: var(--marfil-tenue); font-size: 0.97rem; line-height: 1.68; }
.ficha__detalle {
  margin: 1.1rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--filete);
  color: var(--apagado); font-size: 0.89rem; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Libro de cuentas
   -------------------------------------------------------------------------- */
.libro {
  border: 1px solid var(--filete);
  background: linear-gradient(180deg, var(--tinta-2), rgba(8, 14, 26, 0.55));
}

.libro__cabecera {
  display: flex; justify-content: space-between;
  padding: 1.1rem 1.7rem;
  border-bottom: 1px solid var(--filete);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro);
}

.libro__filas { list-style: none; margin: 0; padding: 0; counter-reset: fila; }

.libro__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.05rem 1.7rem;
  border-bottom: 1px solid rgba(29, 47, 86, 0.5);
}
.libro__fila:last-child { border-bottom: none; }

.libro__concepto { color: var(--marfil-tenue); font-size: 0.97rem; }
.libro__concepto em { font-style: normal; color: var(--apagado); font-size: 0.88em; }

.libro__cifra {
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  /* Cifras tabulares: en una columna de importes, los dígitos deben ocupar
     todos lo mismo o las comas no se alinean y la columna deja de leerse. */
  font-variant-numeric: tabular-nums;
  color: var(--marfil); white-space: nowrap;
}

.libro__fila--resta .libro__cifra { color: #cf8f7f; }
.libro__fila--subtotal { background: rgba(16, 28, 56, 0.4); }
.libro__fila--subtotal .libro__concepto { color: var(--marfil); }

.libro__fila--total {
  background: rgba(201, 162, 39, 0.07);
  border-top: 1px solid var(--oro-sombra);
}
.libro__fila--total .libro__concepto {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--oro-brillo);
}
.libro__fila--total .libro__cifra {
  font-size: 1.32rem; font-weight: 500;
  background: var(--lamina); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.libro__pie {
  margin: 0; padding: 1.4rem 1.7rem;
  border-top: 1px solid var(--filete);
  color: var(--apagado); font-size: 0.87rem; line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Notas
   -------------------------------------------------------------------------- */
.nota {
  margin-top: 2.2rem; padding: 1.7rem 1.9rem;
  border-left: 2px solid var(--oro);
  background: rgba(16, 28, 56, 0.34);
}
.nota p { margin: 0; color: var(--marfil-tenue); font-size: 0.95rem; line-height: 1.7; max-width: var(--medida); }
.nota__titulo {
  margin: 0 0 0.6rem !important;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro) !important;
}
.nota--franca { border-left-color: var(--gris-espera); margin-top: 3rem; }
.nota--franca .nota__titulo { color: var(--apagado) !important; }

/* --------------------------------------------------------------------------
   Capas de seguridad
   -------------------------------------------------------------------------- */
.capas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  background: var(--filete); border: 1px solid var(--filete);
}
.capa { position: relative; padding: 2rem 1.7rem 1.9rem; background: var(--tinta-2); }
.capa__indice {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: 1.1rem;
  border: 1px solid var(--oro-sombra); border-radius: 50%;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--oro);
}
.capa__titulo {
  margin: 0 0 0.6rem;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--marfil);
}
.capa p { margin: 0; color: var(--apagado); font-size: 0.9rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
   Tabla de estado
   -------------------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--filete); background: var(--tinta-2); }

.tabla { width: 100%; border-collapse: collapse; min-width: 620px; }

.tabla thead th {
  padding: 1.1rem 1.4rem; text-align: left;
  border-bottom: 1px solid var(--filete);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro);
}
.tabla tbody th {
  padding: 1.05rem 1.4rem; text-align: left; font-weight: 400;
  color: var(--marfil); font-size: 0.95rem;
}
.tabla tbody td { padding: 1.05rem 1.4rem; color: var(--apagado); font-size: 0.9rem; }
.tabla tbody tr { border-bottom: 1px solid rgba(29, 47, 86, 0.42); transition: background 0.3s var(--salida); }
.tabla tbody tr:last-child { border-bottom: none; }
.tabla tbody tr:hover { background: rgba(16, 28, 56, 0.4); }

.pastilla {
  display: inline-block; padding: 0.28rem 0.72rem;
  border-radius: 100px; border: 1px solid;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; white-space: nowrap;
}
.pastilla--listo  { color: var(--verde);       border-color: rgba(76, 159, 122, 0.45); background: rgba(76, 159, 122, 0.1); }
.pastilla--curso  { color: var(--ambar);       border-color: rgba(211, 160, 60, 0.45);  background: rgba(211, 160, 60, 0.1); }
.pastilla--espera { color: var(--gris-espera); border-color: rgba(109, 118, 137, 0.45); background: rgba(109, 118, 137, 0.1); }

.estado__pie {
  margin: 1.8rem 0 0; max-width: var(--medida);
  color: var(--apagado); font-size: 0.9rem; line-height: 1.66;
}

/* --------------------------------------------------------------------------
   Consola
   -------------------------------------------------------------------------- */
.consola {
  margin-top: 2.6rem; padding: 1.8rem 1.9rem;
  border: 1px solid var(--filete);
  background: linear-gradient(135deg, rgba(16, 28, 56, 0.5), var(--tinta-2));
}
.consola__titulo {
  margin: 0 0 0.9rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro);
}
.consola__codigo {
  margin: 0 0 1rem; padding: 0.95rem 1.2rem; overflow-x: auto;
  border: 1px solid var(--filete); border-radius: 2px;
  background: rgba(5, 9, 15, 0.65);
  font-family: var(--mono); font-size: 0.95rem; color: var(--oro-brillo);
}
.consola__nota { margin: 0; color: var(--apagado); font-size: 0.87rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie {
  position: relative; z-index: 2;
  border-top: 1px solid var(--filete);
  background: linear-gradient(180deg, transparent, rgba(11, 21, 38, 0.45));
  padding: clamp(3rem, 2rem + 3vw, 5rem) 1.5rem 2rem;
}
.pie > * { max-width: var(--ancho); margin-inline: auto; }

.pie__marca { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.pie__lema {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.28rem;
  background: var(--lamina); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pie__columnas {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--filete);
}
.pie__columna { display: flex; flex-direction: column; gap: 0.62rem; }
.pie__titulo {
  margin: 0 0 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro);
}
.pie__columna a { color: var(--marfil-tenue); font-size: 0.92rem; text-decoration: none; width: fit-content; transition: color 0.25s var(--salida); }
.pie__columna a:hover { color: var(--oro-brillo); }
.pie__texto { margin: 0; color: var(--apagado); font-size: 0.85rem; line-height: 1.62; }

.pie__legal {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  padding-top: 1.8rem;
}
.pie__legal p { margin: 0; color: var(--apagado); font-size: 0.82rem; }
.pie__version { font-family: var(--mono); letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Revelado
   -------------------------------------------------------------------------- */
/* La portada entra escalonada al cargar; el resto, al entrar en pantalla.
   Un solo momento bien orquestado rinde más que veinte microanimaciones. */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  animation: emerger 1s var(--salida) forwards;
}
[data-revelar="1"] { animation-delay: 0.10s; }
[data-revelar="2"] { animation-delay: 0.22s; }
[data-revelar="3"] { animation-delay: 0.38s; }
[data-revelar="4"] { animation-delay: 0.54s; }
[data-revelar="5"] { animation-delay: 0.68s; }
[data-revelar="6"] { animation-delay: 0.82s; }

@keyframes emerger { to { opacity: 1; transform: none; } }

.aparece { opacity: 0; transform: translateY(30px); transition: opacity 0.85s var(--salida), transform 0.85s var(--salida); }
.aparece.visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav, .cabecera__cta { display: none; }

  .menu-boton {
    display: grid; place-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0;
    background: transparent; border: 1px solid var(--filete); border-radius: 2px;
    cursor: pointer;
  }
  .menu-boton span {
    display: block; width: 18px; height: 1px; background: var(--oro-cuerpo);
    transition: transform 0.3s var(--salida), opacity 0.3s var(--salida);
  }
  .menu-boton[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

  .nav-movil {
    display: flex; flex-direction: column;
    position: sticky; top: 72px; z-index: 99;
    padding: 0.5rem 1.5rem 1.2rem;
    background: rgba(5, 9, 15, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--filete);
  }
  .nav-movil[hidden] { display: none; }
  .nav-movil a {
    padding: 0.85rem 0; border-bottom: 1px solid rgba(29, 47, 86, 0.5);
    font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--marfil-tenue); text-decoration: none;
  }
  .nav-movil a:last-child { border-bottom: none; }

  .portada { min-height: auto; padding-block: 2.5rem 4.5rem; }
  .libro__fila { flex-direction: column; gap: 0.3rem; align-items: flex-start; }
  .libro__cabecera { display: none; }
  .pie__legal { flex-direction: column; }
}

@media (max-width: 420px) {
  .portada__acciones { flex-direction: column; align-items: stretch; }
  .boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Respeto por quien pide menos movimiento
   -------------------------------------------------------------------------- */
/* No es un detalle cosmético: para parte de la gente el movimiento en
   pantalla provoca mareo real. Se apaga todo, incluida la rotación continua
   del guilloché, que es lo más molesto de la página en ese caso. */
@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;
  }
  [data-revelar], .aparece { opacity: 1; transform: none; }
  .grabado__roseta { animation: none; }
}

/* Impresión: fondo blanco y tinta negra. Una página que se imprime en
   azul noche gasta un cartucho y no se lee. */
@media print {
  body { background: #fff; color: #000; }
  body::before, .portada__grabado, .portada__velo, .cabecera, .nav-movil { display: none; }
  .titular__enfasis, .marca__nombre, .pie__lema, .libro__fila--total .libro__cifra {
    background: none; color: #6b5310;
  }
  .seccion { padding-block: 1.5rem; }
}