/* ==========================================================================
   KOINE CO — waitlist

   POR QUE ESTA PAGINA SE REHIZO (3 sep 2026)
   ------------------------------------------
   La version anterior era el aspecto por defecto del diseno generado por IA:
   fondo crema plano, serif de alto contraste a 6rem, una columna centrada
   flotando en el vacio, microetiquetas en versales espaciadas y campos con
   solo filete. Competente y anonima.

   Pero el fallo de fondo no era estetico, era de argumento. Es una pagina que
   vende un OBJETO FISICO y no ensenaba ninguno, y que DESCRIBIA con palabras
   un editor de cubiertas interactivo en vez de dejar tocarlo.

   Las tres decisiones que la sacan de ahi:

   1. HAY UN OBJETO. La cubierta es el heroe, no el titular. El titular baja
      de tamano para dejarla mandar.
   2. EL FONDO ES UNA SUPERFICIE, no un lienzo. El cuerpo va en `--board`, un
      tono mas profundo, y el libro y la pagina impresa son los objetos claros
      que se apoyan encima. Eso crea figura y fondo, que es justo lo que le
      faltaba al crema plano.
   3. EL CAMPO DEL NOMBRE ESCRIBE EN LA CUBIERTA. El formulario deja de ser un
      peaje y pasa a ser la demostracion. Es el unico elemento con el que se
      juega; todo lo demas se calla.

   La paleta y las dos familias tipograficas NO se tocan: estan fijadas en
   CLAUDE.md (tonos tierra + crema, serif moderna + sans humanista, Kinfolk).
   Lo que cambia es el tratamiento, no el vocabulario.

   LOS TOKENS SIGUEN SIENDO UNA COPIA A MANO de shopify/assets/koine-theme.css.
   Este proyecto vive fuera del tema y no puede cargar ese archivo. Si la
   paleta cambia alli, hay que traer el cambio aqui.
   ========================================================================== */

@font-face {
  font-family: 'Koine Serif';
  src: url('/fonts/koine-cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Koine Serif';
  src: url('/fonts/koine-cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Koine Sans';
  src: url('/fonts/koine-inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Koine Sans';
  src: url('/fonts/koine-inter-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Koine Sans';
  src: url('/fonts/koine-inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Koine Sans';
  src: url('/fonts/koine-inter-latin-ext-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* --board es el unico color nuevo, y es el que mas cambia la pagina: es la
     superficie sobre la que se apoya el libro. Sin el, un objeto claro sobre
     un fondo igual de claro no es un objeto, es un rectangulo. */
  --board: #E6DDCD;
  --paper: #F7F3EC;   /* Parchment, el papel del propio libro */
  --ink: #1C1C1A;
  --graphite: #57534C;
  --rule: #CFC4AF;
  --accent: #4A1F26;  /* Oxblood, el acento ya decidido */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --display: clamp(2.25rem, 4.4vw, 3.5rem);
  --body: clamp(1rem, 1.05vw, 1.125rem);
  --meta: 0.75rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --serif: 'Koine Serif', Georgia, serif;
  --sans: 'Koine Sans', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--board);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:is(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   ENCABEZADO — el "running head"

   El libro impreso lleva un encabezado en Inter versales en cada pagina. Esta
   franja es ese mismo encabezado aplicado a la web: no es decoracion, es el
   sistema tipografico del producto. Lo que NO se copia es el folio: un numero
   de pagina inventado al pie de una web si seria decoracion.
   -------------------------------------------------------------------------- */
.runhead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-md) var(--gutter);
  border-block-end: 1px solid var(--rule);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  color: var(--ink);
  text-decoration: none;
}
.mark svg {
  display: block;
  inline-size: 20px;
  block-size: 20px;
}
.mark span {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(0.0823em);
}


/* --------------------------------------------------------------------------
   EL PLIEGO

   Cuatro piezas: el argumento, el objeto, el diseño (libro, nombre, colores)
   y el alta (el email). Se colocan por AREAS porque el orden que hace falta
   no es el mismo en los dos tamanos:

     movil        argumento -> alta -> OBJETO -> diseño
     escritorio   argumento | OBJETO
                  diseño    | OBJETO
                  alta      | OBJETO

   En movil el ALTA va delante de todo lo demas (23 sep 2026, research/56
   3.3): antes el email empezaba en y=1149 a 390x664, a 1,7 pantallas, y el
   trafico de pago entra por Instagram en movil. Criterio: email y boton
   enteros por encima de y=664 sin scroll.

   Y el objeto sigue yendo ENTRE el texto y los controles de DISEÑO. Cuando
   estaba detras, "escribe tu nombre para verlo en la cubierta" apuntaba a algo
   que quedaba fuera de pantalla: la demostracion existia y no se veia
   justo en el momento de usarla.
   -------------------------------------------------------------------------- */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "argumento"
    "alta"
    "objeto"
    "diseno";
  gap: var(--space-lg);
  padding: clamp(2rem, 4.5vw, 3.75rem) var(--gutter);
}

.argument  { grid-area: argumento; }
.object    { grid-area: objeto; }
.design    { grid-area: diseno; }
.join      { grid-area: alta; }

@media (min-width: 60rem) {
  .spread {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "argumento objeto"
      "diseno objeto"
      "alta objeto";
    align-items: start;
    gap: var(--space-lg) clamp(3rem, 6vw, 6rem);
  }
  /* El objeto ocupa las tres filas, asi que se centra el solo contra ellas. */
  .object { align-self: center; }
  /* Diseño y alta eran un solo bloque: se juntan como estaban, sin el hueco
     entero de la rejilla entre los colores y el email. */
  .join { margin-block-start: calc(var(--space-sm) - var(--space-lg)); }
}

.argument {
  max-inline-size: 34rem;
}

h1 {
  font-family: var(--serif);
  font-size: var(--display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.lede {
  margin: 0;
  max-inline-size: 32rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   EL FORMULARIO

   Funciona con y sin JavaScript: es un POST normal a /subscribe. Los campos
   llevan caja, no solo filete: un filete suelto sobre una superficie de color
   no lee como campo, y el filete solo era parte del aspecto generico que se
   ha quitado. La caja es de papel, del mismo tono que el libro.
   -------------------------------------------------------------------------- */
.design,
.join {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  inline-size: 100%;
  max-inline-size: 28rem;
}

/* Lo que se gana al apuntarse, pegado al email (research/56, 3.2). Un punto
   por encima de las notas de los controles: es la unica frase que habla del
   alta, no del diseño. */
.join-note {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.field-note {
  margin: 0 0 var(--space-3xs);
  font-size: var(--meta);
  color: var(--graphite);
}

input[type="text"]:not(.hp),
input[type="email"] {
  inline-size: 100%;
  min-inline-size: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  transition: border-color 160ms var(--ease);
}
input[type="text"]:not(.hp):hover,
input[type="email"]:hover { border-color: var(--graphite); }
input:focus { outline: none; }
input:focus-visible { border-color: var(--accent); }

::placeholder {
  color: var(--graphite);
  opacity: 1;
}

.field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
}
.field input[type="email"] { flex: 1 1 13rem; }

/* honeypot: invisible para una persona, visible para un bot que rellena todos
   los campos sin mirar. */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

button[type="submit"] {
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
}
button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: default;
}

.error {
  margin: var(--space-2xs) 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   LA CUBIERTA — el elemento con el que se juega

   La geometria NO es inventada: sale de editor/src/data/geometry.ts y de
   editor/src/render/drawCover.ts, que son los que generan el PDF que se manda
   a imprenta.
   OJO CON QUE RATIO SE USA. El area segura es 5.125 x 8.25 in (ratio 0.621),
   pero eso NO es lo que ve el cliente: es la caja de composicion, ya descontado
   el doblez. El libro fisico es 6 x 9 (ratio 0.6667). Usar el 0.621 dibuja una
   cubierta notablemente mas estrecha de lo que sale de imprenta -- se probo, y
   parecia otro producto.

   Asi que el rectangulo es 6 x 9 y las posiciones del area segura se mapean
   dentro. El area segura esta metida un (6 - 5.125) / 2 / 6 = 7.29% por los
   lados y un (9 - 8.25) / 2 / 9 = 4.17% por arriba y abajo.

     · nombre    1/3 del alto seguro  ->  4.17 + 33.33 x 0.9167 = 34.72% del alto
     · titulo    95.76% del alto seg. ->  4.17 + 95.76 x 0.9167 = 91.95%  (bottom 8.05%)
     · titulo    Inter 500, 16 pt, versales, tracking 0.15em
     · nombre    Cormorant Garamond, 24 pt

   Los cuerpos van sobre --cover-w para que la proporcion aguante a cualquier
   tamano: 16 pt sobre 9 in es el 2.469% del alto, y el alto es el ancho /
   0.6667, o sea el 3.704% del ancho. El nombre, 24 pt, sale 5.556%.
   -------------------------------------------------------------------------- */
.object {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.stage {
  margin: 0;
  display: flex;
  justify-content: center;
}

.book {
  --cover-w: clamp(13rem, 26vw, 16.5rem);
  position: relative;
  inline-size: var(--cover-w);
  block-size: calc(var(--cover-w) / 0.66667);
}

/* El bloque de paginas asomando por el canto. Es lo que separa "un libro" de
   "un rectangulo de color", y es un solo elemento: la unica licencia
   volumetrica que se permite la pagina. */
.book::after {
  content: '';
  position: absolute;
  inset-block: 1.4%;
  inset-inline-end: -5px;
  inline-size: 5px;
  border-radius: 0 2px 2px 0;
  /* Un bloque de papel con una sola veta, no una raya por hoja: a este tamano
     el rayado fino leia como encuadernacion de espiral. */
  background:
    linear-gradient(to right, rgb(28 28 26 / 0.16), rgb(28 28 26 / 0) 60%),
    var(--paper);
}

.book__cover {
  position: absolute;
  inset: 0;
  border-radius: 1px 3px 3px 1px;
  /* Sin JS: Olive, el color con el que abre Proverbios en el editor
     (defaultCoverId de books.ts), no el acento Oxblood. */
  background-color: var(--cover-hex, #4A503B);
  color: var(--cover-ink, #F7F3EC);
  /* El filete interior no es decoracion: 8 de los 16 colores del catalogo son
     claros, y Bone (#EDE6D8) sobre el board (#E6DDCD) se quedaba sin borde --
     el libro dejaba de ser un objeto y pasaba a ser una mancha. */
  box-shadow:
    inset 0 0 0 1px rgb(28 28 26 / 0.09),
    0 1px 1px rgb(28 28 26 / 0.10),
    0 12px 24px -8px rgb(28 28 26 / 0.28),
    0 30px 60px -30px rgb(28 28 26 / 0.45);
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
  overflow: hidden;
}

/* El filete del lomo: el pliegue por donde la cubierta dobla. */
.book__cover::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 3.2%;
  inline-size: 1px;
  background-color: rgb(0 0 0 / 0.13);
}

.book__name,
.book__title {
  position: absolute;
  text-align: center;
  line-height: 1;
  display: block;
}

.book__name {
  /* 7.29% de sangrado del area segura + 8% de NAME_SIDE_MARGIN sobre ella */
  inset-inline: 14.12%;
  top: 34.72%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: calc(var(--cover-w) * 0.05556);
  overflow-wrap: break-word;
}
/* Antes de escribir nada, el hueco no se deja vacio: se ensena en que consiste
   con una pista tenue, que desaparece en cuanto hay un nombre. */
.book__name[data-empty="true"] { opacity: 0.5; }

.book__title {
  inset-inline: 7.29%;        /* solo el sangrado del area segura */
  bottom: 8.05%;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--cover-w) * 0.03704);
  letter-spacing: 0.15em;
  text-indent: 0.15em;        /* compensa el tracking del ultimo caracter */
  text-transform: uppercase;
}

/* --- los libros a la venta ----------------------------------------------- */
.books {
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-block-end: var(--space-sm);
}
.books .field-note { margin-block-end: var(--space-2xs); }

.book-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.book-pick {
  border: 1px solid var(--rule);
  border-radius: 2px;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.book-pick:hover { border-color: var(--graphite); }
.book-pick:focus { outline: none; }
.book-pick:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.book-pick[aria-checked="true"] {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--paper);
}

/* --- los 16 colores del catalogo real ------------------------------------ */
.swatches {
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-block-start: var(--space-md);
}
.swatches .field-note { margin-block-end: var(--space-2xs); }


.swatch-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-2xs);
}

.swatch {
  aspect-ratio: 1;
  inline-size: 100%;
  border: 1px solid rgb(28 28 26 / 0.18);
  border-radius: 50%;
  background-color: var(--hex);
  padding: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.swatch:hover { transform: scale(1.14); }
.swatch[aria-checked="true"] {
  box-shadow: 0 0 0 1px var(--board), 0 0 0 2px var(--ink);
}

/* --- el colofon: donde van las especificaciones -------------------------- */
.colophon {
  margin: 0;
  max-inline-size: 24rem;
  text-align: center;
  font-size: var(--meta);
  line-height: 1.75;
  color: var(--graphite);
}
.colophon b {
  font-weight: 400;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   LA PRUEBA — la pagina 9 de verdad

   No es una foto de banco ni un render: es el PDF de imprenta de Proverbios,
   la misma pagina que sale de Scribus. El margen de dos pulgadas es una
   afirmacion que se puede ensenar, asi que se ensena en vez de repetirla.
   -------------------------------------------------------------------------- */
.evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  /* Alineado arriba, no centrado: la pagina impresa es mucho mas alta que su
     texto, y centrarla dejaba un vacio muerto debajo del parrafo. Arriba, el
     aire que queda cae al lado de la pagina y lee como lo que la seccion
     defiende: margen. */
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
  border-block-start: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .evidence {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.evidence img {
  display: block;
  inline-size: 100%;
  max-inline-size: 17rem;
  margin-inline: auto;
  block-size: auto;
  border-radius: 1px;
  box-shadow:
    0 1px 2px rgb(28 28 26 / 0.10),
    0 18px 40px -18px rgb(28 28 26 / 0.35);
}

/* Alinea opticamente la mayuscula del titular con el borde alto de la pagina. */
.evidence > div { padding-block-start: 0.4rem; }

.evidence h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
}

.evidence p {
  margin: 0 0 var(--space-sm);
  max-inline-size: 32rem;
}

.next {
  margin: var(--space-md) 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
}

.caption {
  font-size: var(--meta);
  line-height: 1.7;
  color: var(--graphite);
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: var(--space-sm);
}

/* --------------------------------------------------------------------------
   PIE

   Existe tambien por una razon tecnica: /privacy/ y /terms/ estan en el
   sitemap pero ninguna pagina enlazaba a ellas. Eran huerfanas.
   -------------------------------------------------------------------------- */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-md) var(--gutter) var(--space-lg);
  border-block-start: 1px solid var(--rule);
  font-size: var(--meta);
  color: var(--graphite);
}
footer p { margin: 0; }
footer nav {
  display: flex;
  gap: var(--space-md);
}
footer a {
  color: var(--graphite);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
footer a:hover,
footer a:focus-visible {
  color: var(--ink);
  border-block-end-color: var(--ink);
}

/* --------------------------------------------------------------------------
   CONFIRMACION + ENLACE DE REFERIDO
   -------------------------------------------------------------------------- */
.confirmed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: 28rem;
}
.confirmed p { margin: 0; }

.share-label {
  font-size: var(--meta);
  color: var(--graphite);
}

.share-link-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.share-input {
  flex: 1 1 13rem;
  min-inline-size: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0.7rem 0.85rem;
  cursor: text;
}
.share-copy {
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background-color: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.share-copy:hover,
.share-copy:focus-visible {
  background-color: var(--ink);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .swatch:hover { transform: none; }
}

/* ==========================================================================
   BANNER DE CONSENTIMIENTO (16 sep 2026)

   Se pinta desde `consent.js`, y solo donde la ley lo exige. No es un modal:
   no bloquea la pagina ni atrapa el foco, porque no hay nada que decidir para
   poder leer o apuntarse — el pixel no condiciona nada de lo que la pagina
   hace. Se apoya abajo, se lee, y se contesta cuando se quiera.

   Las dos respuestas tienen el mismo peso visual a proposito. Un "Accept" en
   color y un "Decline" en gris pequeño es la forma habitual de fingir que se
   pregunta.
   ========================================================================== */
.consent {
  position: fixed;
  inset-inline: var(--gutter);
  inset-block-end: var(--gutter);
  z-index: 50;
  margin-inline: auto;
  max-width: 34rem;
  padding: var(--space-sm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background-color: var(--paper);
  color: var(--ink);
  font-size: var(--meta);
  line-height: 1.5;
  box-shadow: 0 8px 28px rgba(28, 28, 26, 0.16);
}
.consent p { margin: 0 0 0.5rem; }
.consent > a {
  color: var(--graphite);
  text-decoration: none;
  border-block-end: 1px solid var(--rule);
}
.consent > a:hover,
.consent > a:focus-visible { color: var(--ink); border-color: var(--ink); }

.consent-actions {
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
}
.consent-actions button {
  flex: 1 1 auto;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
    color 160ms var(--ease);
}
.consent-yes {
  border: 1px solid var(--ink);
  background-color: var(--ink);
  color: var(--paper);
}
.consent-yes:hover,
.consent-yes:focus-visible { background-color: var(--accent); border-color: var(--accent); }
.consent-no {
  border: 1px solid var(--ink);
  background-color: transparent;
  color: var(--ink);
}
.consent-no:hover,
.consent-no:focus-visible { background-color: var(--board); }

/* En pantallas estrechas el banner tapa poco: ocupa el ancho y ya. */
@media (max-width: 30rem) {
  .consent { inset-inline: 0; inset-block-end: 0; border-radius: 0; border-inline: 0; }
}