/*
 * El encabezado de «Invierta en oro».
 *
 * Habla el idioma de la landing de relojes —el dorado, Playfair, la vitrina con
 * su luz de arriba y el reflejo bajo la pieza— pero no copia su encabezado.
 * Aquél es un carrusel de piezas únicas; éste es un sello y tres precios, que es
 * lo que la casa ya usa en su gráfica.
 *
 * Lo único que grita es el porcentaje. Todo lo demás está puesto para que ese
 * número se lea desde lejos: el nombre es chico, el precio es discreto, y el
 * botón ni siquiera está hasta que alguien se acerca.
 */

.hi-hero {
  --hi-oro: var(--landing-primary, #b59c67);
  --hi-oro-texto: #7a6318;
  --hi-ink: var(--color-base, #212121);
  --hi-muted: #5f5f5f;
  --hi-papel: #fbf9f4;
  --hi-linea: rgb(181 156 103 / .38);

  --hi-gap: clamp(1.6rem, 1.6vw + 1.1rem, 3.2rem);
  --hi-cifra: clamp(4.6rem, 4.4vw + 2.8rem, 8.4rem);
  --hi-nombre: clamp(1.5rem, .4vw + 1.4rem, 1.8rem);

  display: grid;
  gap: clamp(2.4rem, 3vw + 1.6rem, 4.8rem);

  /*
   * La caja del sitio: el mismo número que `--rl-ancho` en relojes.css.
   *
   * Escrito y no heredado, aunque sea repetir un valor. Aquel token se declara
   * en `.rl-section, .rl-footer` y no en `:root`, y `relojes.css` ni siquiera
   * se encola en esta página: un `var(--rl-ancho)` acá caería siempre en la
   * reserva, con la apariencia de estar leyendo algo. Duplicar un número y
   * decir dónde está el otro es más honesto que fingir una herencia que no
   * ocurre.
   */
  --hi-ancho: 128rem;

  padding-block: clamp(3rem, 3vw + 2rem, 5rem);
  background: linear-gradient(#fffdf8 0%, var(--hi-papel) 100%);

  /* El marco del que cuelga la cinta. Sin esto se colgaría del documento y
     terminaría en la esquina de la ventana. */
  position: relative;
}

/*
 * El crema cruza la pantalla; lo que se lee para en la caja.
 *
 * Acotar el bloque entero dejaba la banda flotando con dos franjas oscuras a
 * los costados, y eso la convierte en una tarjeta apoyada sobre la página en
 * vez de una sección de la página. El fondo pertenece al documento y el texto
 * a la columna de lectura.
 *
 * Sobre los hijos y no con un envoltorio: son dos, la caja no necesita
 * existir en el marcado para existir en la pantalla, y un `div` menos es un
 * lugar menos donde algo se puede desalinear.
 */
.hi-hero > * {
  inline-size: 100%;
  max-inline-size: var(--hi-ancho);
  /*
   * `justify-self` y no `margin-inline: auto`, y la diferencia se ve.
   *
   * Con `auto` la lista quedaba pegada a la izquierda mientras el sello sí se
   * centraba: 0–1280 contra 320–1600, corrida 320px. En una grilla, un hijo con
   * ancho propio deja de estirarse y se alinea al principio, y el margen
   * automático no lo alcanza porque el ancho ya está resuelto. `justify-self`
   * alinea el item dentro de su celda, que es la pregunta que había que
   * contestar.
   */
  justify-self: center;
}

/*
 * La marca, arriba de todo.
 *
 * El logo en su tamaño de firma, la promesa en dorado debajo y el filete que
 * cierra el bloque. Es la apertura de la pieza gráfica de la casa, sin el
 * diamante: el logo ya trae su bajada y un tercer elemento encima lo volvería
 * un escudo.
 */
.hi-marca {
  display: grid;
  justify-items: center;
  /*
   * Casi nada, porque el hueco real es mayor que el declarado.
   *
   * Entre las dos líneas se apilan tres cosas: este número, el descendente que
   * Playfair reserva bajo «HOMERO» y que ninguna de sus letras usa, y el medio
   * interlineado del renglón de abajo. Medido con 1,4rem acá, el aire óptico era
   * más del doble.
   */
  gap: .2rem;
  /* Poco aire arriba: el bloque ya arranca después del propio respiro de la
     sección, y sumarle otro tanto empujaba el nombre lejos del borde en el que
     tiene que apoyarse. */
  padding-block: clamp(.8rem, 1.2vw + .4rem, 1.8rem) 0;
}

/*
 * El nombre, en letras.
 *
 * Compuesto como en la gráfica: versalitas amplias, trazo normal y bien
 * separado. Playfair a este cuerpo tiene el contraste de asta que hace que un
 * nombre se lea como una marca y no como un título de sección; el espaciado es
 * lo que le da el aire de sello grabado.
 */
.hi-marca__nombre {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3.4rem, 4vw + 2rem, 6.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hi-ink);
  /* El espaciado corre la palabra a la derecha; el margen la recentra. */
  margin-left: .12em;
}

/*
 * La promesa, en oro.
 *
 * Espaciada y en versalitas como en la gráfica, y en el oro oscuro del sitio:
 * el tono de marca a este cuerpo daría 2,57:1 sobre el papel, y acá no hay
 * degradado que lo salve como en las cifras grandes.
 */
.hi-marca__claim {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  /*
   * Un 87% del ancho del nombre, que es la proporción de la pieza gráfica de la
   * casa. Estaba en 21px y las dos líneas medían lo mismo —325 y 326— así que la
   * bajada no acompañaba al nombre, lo igualaba.
   *
   * El ancho sale del cuerpo y no del espaciado: la holgura está en `em`, así
   * que escala con la letra y la proporción entre las dos líneas se conserva
   * sola en cualquier pantalla.
   */
  font-size: clamp(1.3rem, .6vw + 1.13rem, 1.8rem);
  font-weight: 400;
  /* Sin el medio interlineado que el valor normal reparte arriba y abajo: es la
     otra mitad del aire que separaba las dos líneas. */
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hi-oro-texto);
  /* El espaciado empuja la línea a la derecha; el margen la recentra bajo el
     logo. */
  margin-left: .3em;
}

/*
 * El rótulo: qué vende la página.
 *
 * Es el `h1` y el único titular del hero. Tipografía de texto y no Playfair: la
 * serif es de la marca y de la cinta, y traerla acá haría del rótulo la tercera
 * línea del logo en vez del encabezado de la página.
 *
 * Un cuerpo de rótulo y no de titular, a propósito. El peso semántico y el
 * visual no tienen por qué coincidir: lo que abre la pantalla es «HOMERO», y una
 * frase de cincuenta caracteres puesta al tamaño de un título le ganaría por
 * volumen sin ganarle en jerarquía.
 *
 * El oro profundo y no el de marca: a este tamaño el #b59c67 queda en 2,39:1
 * sobre el papel del hero. Ese contraste sirve para un bloque de 50px, no para
 * catorce.
 */
.hi-rotulo {
  margin: 0;
  /* Que no se meta debajo de la cinta en el rango donde las dos conviven: la
     cinta mide 6rem de ancho y se le deja el doble antes de que el texto la
     alcance. */
  padding-inline: clamp(2rem, 8vw, 12rem);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.5rem, .7vw + 1.33rem, 2.2rem);
  /* 400 y no 500, que es lo que venía escrito: el sitio carga cuatro faces de
     Montserrat —100, 400, 700 y 900— así que el 500 ya se dibujaba con el 400.
     Declarar un peso que no existe no cambia nada en pantalla y miente al que
     lea esto después. */
  font-weight: 400;
  line-height: 1.5;
  /* La holgura baja al subir el cuerpo: la que servía a 14px, a 22 abre la
     frase hasta el ancho de la caja y la parte en dos líneas sin necesidad. */
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  /* Sin compensar el hueco que la letra espaciada deja después de la última:
     medido contra el centro de la marca, el rótulo ya cae donde tiene que caer,
     y la sangría que lo corregía en teoría lo desviaba 2px en la práctica. */
  color: var(--hi-oro-texto);
  text-wrap: balance;
}

/*
 * La cinta del costado: «ORO 24K CERTIFICADO».
 *
 * Colgada del borde superior derecho del hero, en absoluto. En el flujo era un
 * bloque centrado debajo de la marca, y ahí competía con el rótulo: la frase
 * chica arriba y la grande abajo se leían como un título partido en dos. Corrida
 * al costado el conflicto desaparece — el rótulo se queda con el centro y la
 * cinta acredita desde el margen, que es lo que un sello hace.
 *
 * Contra el borde de la pantalla y no de la caja de lectura: una cinta que
 * termina en el aire es una tarjeta girada; una que se va del cuadro cuelga.
 */
/*
 * El carril por el que la cinta baja.
 *
 * Cubre el alto del encabezado pegado al borde derecho, y no dibuja nada: existe
 * para darle al `sticky` un recorrido. Un elemento pegajoso se mueve dentro de
 * su padre y se detiene contra sus bordes, así que sin un padre alto la cinta se
 * quedaría clavada donde está.
 *
 * `pointer-events: none` porque es una franja invisible sobre la columna derecha
 * del encabezado: sin eso se comería el cursor encima de la tercera pieza, que
 * tiene un botón que aparece al acercarse.
 */
.hi-carril {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  /*
   * El mínimo sube de 4,4 a 5,2rem, y lo pide el texto.
   *
   * En vertical el ancho de la cinta es lo que tienen para repartirse, uno al
   * lado del otro, el renglón grande y la aclaración. Con 44 la aclaración
   * quedaba en siete pixeles para poder entrar, que es un tamaño en el que la
   * palabra está pero no se lee.
   */
  inline-size: clamp(5.2rem, 1.5vw + 3.8rem, 6rem);
  pointer-events: none;
}

/*
 * Y la cinta, pegajosa dentro de él.
 *
 * `sticky` y no `fixed`: la diferencia es que ésta pertenece al encabezado. Baja
 * mientras la apertura está en pantalla y se va con ella cuando termina, en vez
 * de quedarse colgada sobre las secciones de abajo —donde, además de tapar, diría
 * «oro 24K» encima de una grilla de monedas que son ley 900—.
 *
 * Se detiene abajo de donde para la barra, que es fija y mide unos 8rem armada:
 * sin ese despeje la cinta se le mete debajo y queda la mitad de una palabra
 * asomando.
 */
.hi-cinta {
  position: sticky;
  /*
   * Cero, y de ahí sale que cuelgue del borde.
   *
   * `sticky` empuja el elemento hasta el offset apenas su posición natural queda
   * por encima, así que el reposo y el pegado son la misma altura: cualquier
   * número mayor que cero deja la cinta flotando desde que carga la página, sin
   * un borde del cual colgar. Con 8,6rem —lo justo para despejar la barra— eran
   * 54px de aire arriba y se leía como una cinta suelta.
   *
   * Lo que ese despeje evitaba lo resuelve el `z-index` de acá abajo.
   */
  inset-block-start: 0;

  /*
   * Por debajo de la barra, que está en 20.
   *
   * Colgada del borde, la cinta y la barra ocupan la misma franja en cuanto ésta
   * se arma —medido: entre los 620 y los 700 de scroll las dos están en pantalla
   * al mismo tiempo—. Ahí la cinta pasa por detrás y la barra le tapa la cabeza,
   * que es lo que hace cualquier contenido bajo un encabezado fijo.
   *
   * Escrito y no dejado en `auto`: sin el número la regla funciona igual por
   * orden de pintado, y funciona por casualidad. El día que algo de acá adentro
   * levante un contexto de apilamiento, el 1 sigue diciendo lo que se quiso.
   */
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  /* Poco, y a propósito: la medalla y el texto son una sola marca, no dos cosas
     apiladas. Con el aire que tenían antes la cinta se leía como un ícono con
     una leyenda lejos. */
  gap: clamp(.6rem, .4vw + .45rem, 1rem);
  /* El ancho es el del carril: declararlo dos veces es la forma de que un día
     dejen de coincidir. */
  inline-size: 100%;
  /* Abajo más que arriba, porque la muesca se come esa franja: sin la
     diferencia el texto termina dentro del pico. Lo justo para despejarlo —de
     sobra, la cinta parece colgar de un texto que ya terminó. */
  padding: clamp(1.6rem, 1vw + 1.2rem, 2.4rem) .6rem clamp(2.6rem, 1.2vw + 2.2rem, 3.4rem);

  /*
   * Oro en degradado y no plano, la misma decisión que el «ORO 24K» tomaba
   * cuando era tipografía: en la gráfica de la casa esto es metal. Tres paradas
   * en diagonal —el brillo arriba a la izquierda, la sombra abajo— es lo que
   * hace que una banda dorada se lea como una cinta y no como un rectángulo
   * amarillo.
   *
   * El pie levantado a #b09a6c, y ése es el arreglo que queda de haber probado
   * la cinta al revés. El degradado terminaba en #8a7240, así que el mismo texto
   * pasaba de 10,9:1 en la cabeza a 4,0:1 abajo: cumplía la norma en todo el
   * recorrido y se leía irregular igual, porque lo que cansa no es el número más
   * bajo sino que cambie. Ahora va de 11,9 a 6,8 —cinco puntos de rango en vez
   * de siete— y a ojo sigue siendo la misma cinta.
   *
   * Lo que no funciona es cambiarle el color al texto: blanco y dorado suave
   * sobre este fondo dan 1,70:1 y 1,32:1 contra la parada de arriba. Medido, por
   * si a alguien lo tienta de nuevo.
   */
  background-image: linear-gradient(158deg, #e2cd9e 0%, #c9b17e 45%, #b09a6c 100%);

  /* La muesca en V del pie. Un polígono y no un pseudo-elemento girado: el
     recorte se lleva también la sombra, que es lo que delata a los picos
     hechos con un cuadrado rotado. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 1.4rem), 0 100%);

  /* La tinta de la casa sobre el oro: 11,9:1 contra la parada más clara y 6,8:1
     contra la más oscura, con el degradado de arriba. */
  color: #16130e;
}

.hi-cinta__medalla {
  inline-size: clamp(2.6rem, 1vw + 2.2rem, 3.4rem);
  block-size: auto;
  flex: none;
}

/*
 * El texto, corriendo hacia abajo.
 *
 * `vertical-rl` sin más, que es como se lee el lomo de un libro en castellano:
 * la cabeza se inclina a la derecha y la línea baja. Un `rotate: 180deg` encima
 * daría la lectura al revés y —esto es lo que no se ve venir— también invierte
 * el eje del flex: «CERTIFICADO» terminaba arriba de «ORO 24K».
 */
.hi-cinta__texto {
  margin: 0;
  writing-mode: vertical-rl;

  display: flex;
  align-items: baseline;
  gap: clamp(.8rem, .5vw + .6rem, 1.2rem);

  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, .6vw + 1.4rem, 2.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La aclaración, como cuando el sello estaba en el centro: más chica y en la
   tipografía de texto, para que no sea la mitad del nombre. */
.hi-cinta__bajada {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: .5em;
  font-weight: 500;
  letter-spacing: .26em;
}

/*
 * En pantalla angosta la cinta sigue colgada, sólo que más angosta.
 *
 * Llegó a acostarse y volver al flujo, con el argumento de que sesenta pixeles
 * son mucho ancho en un teléfono. El argumento era falso: la cinta está en
 * absoluto dentro de un carril con `pointer-events: none`, así que no corre ni
 * un pixel de contenido ni se queda con un solo toque. Lo único que hace es
 * pasar por encima de una franja del margen derecho, igual que en escritorio.
 *
 * Lo que sí hay que apretar es la letra. La cinta mide 44px acá —el mínimo de su
 * `clamp`— y adentro van, uno al lado del otro, el renglón grande y la
 * aclaración: con los cuerpos de escritorio piden 46 y el texto se sale.
 */
@media (max-width: 47.9375em) {
  /*
   * El botón afina los costados para que la letra pueda crecer.
   *
   * A 360 una pieza tiene 227px y el botón con el margen de escritorio pide 224:
   * entra, pero sin aire y sin lugar para el cuerpo que un llamado a la acción
   * necesita. Sacándole cinco pixeles por lado el mismo texto queda con veinte
   * de holgura. Lo que no se toca es el alto: el área que un pulgar tiene que
   * acertar no se negocia por espacio.
   */
  .hi-pieza__cta {
    padding-inline: 1.7rem;
  }

  .hi-cinta {
    padding-inline: .4rem;
  }

  .hi-cinta__texto {
    font-size: 1.6rem;
    gap: .5rem;
  }

  /*
   * «CERTIFICADO» sube de 7 a 10 pixeles.
   *
   * Estaba en `.46em` de un renglón de 15, o sea 6,9: la palabra estaba dibujada
   * y no se leía, que para una aclaración es lo mismo que no estar. Con `.62em`
   * de 16 son 9,9, y la holgura entre letras baja porque en vertical se paga en
   * alto y una palabra de once letras ya es larga.
   *
   * La cuenta que tiene que cerrar es el ancho de la cinta: 16 del renglón
   * grande, 5 de separación, 10 de la aclaración y 8 de márgenes son 39 en los
   * 52 que la cinta mide acá.
   */
  .hi-cinta__bajada {
    font-size: .62em;
    letter-spacing: .16em;
  }

  .hi-cinta__medalla {
    inline-size: 2.4rem;
  }
}

/*
 * Las tres piezas.
 *
 * En pantalla angosta es un carrusel y la segunda asoma a propósito: una
 * tarjeta sola ocupando todo el ancho no avisa que hay más, y ver el borde de
 * la siguiente sí. El desplazamiento lo hace el navegador con `scroll-snap`,
 * sin una línea de JavaScript.
 */
.hi-piezas {
  display: grid;
  grid-auto-flow: column;
  /* 78% deja a la vista casi un cuarto de la siguiente: lo suficiente para que
     se entienda que hay más, poco para que compita con la que se está mirando. */
  /*
   * Una columna del ancho de lo que queda, y de ahí sale el 78% de siempre.
   *
   * El `100%` de `grid-auto-columns` se mide contra la caja de contenido, que es
   * la que el margen de abajo acaba de achicar: con 11% de margen a cada lado,
   * ese ciento por ciento es el 78 del ancho total. Los dos números salen del
   * mismo lugar y no hay forma de que dejen de coincidir.
   *
   * Sin `vw`, que era el intento anterior: aquella unidad incluye la barra de
   * desplazamiento del documento y el contenedor no, así que el margen se
   * calculaba sobre unos pixeles más de los que hay y la pieza quedaba corrida
   * —medido, nueve— en cualquier navegador que dibuje la barra.
   */
  grid-auto-columns: 100%;
  gap: var(--hi-gap);
  margin: 0;
  /*
   * La pieza que se está mirando queda en el medio de la pantalla.
   *
   * Antes el margen era fijo, así que la primera arrancaba pegada al borde
   * izquierdo con toda la segunda asomando a la derecha: el conjunto se leía
   * corrido, no centrado. Con la mitad de lo que sobra a cada lado, la primera y
   * la última caen en el centro igual que las del medio, y `scroll-snap-align`
   * las deja ahí.
   */
  padding-inline: 11%;
  list-style: none;
  overflow-x: auto;
  /*
   * Y nada de desplazamiento vertical acá adentro.
   *
   * Esto no es cosmético: en CSS no se puede tener un eje en `auto` y el otro en
   * `visible`, así que al declarar sólo `overflow-x` el navegador resuelve el
   * vertical en `auto` también. Medido, el resultado era un cajón con 8px de
   * recorrido vertical propio —602 de contenido en 594 de alto— y esos ocho
   * pixeles alcanzan para que la rueda del mouse se quede acá y la página no
   * baje. Es el salto que se sentía al pasar por encima de las piezas.
   *
   * `touch-action` no lo cubría: aquello gobierna el dedo y esto pasa también con
   * la rueda y con el trackpad.
   */
  overflow-y: hidden;
  /*
   * `mandatory`: el carrusel siempre termina parado en una pieza.
   *
   * Estuvo en `proximity` un tiempo y hay que saber por qué volvió, o alguien lo
   * cambia de nuevo. Con `mandatory` el navegador secuestraba el gesto y un
   * pulgar que bajaba en diagonal frenaba la página, así que se aflojó a
   * `proximity` para soltarlo.
   *
   * Esa no era la causa. Lo que atrapaba el gesto era el recorrido vertical
   * propio que el cajón tenía por resolver `overflow-y` en `auto`, y eso ya está
   * atendido unas líneas más arriba. Sin eje vertical que ofrecer, el enganche
   * obligatorio sólo actúa sobre el horizontal, que es donde tiene que actuar.
   *
   * Y hace falta: con `proximity` el navegador engancha sólo si el gesto terminó
   * cerca, así que un envión se pasaba de largo la segunda pieza y dejaba dos
   * medias piezas en pantalla. Un carrusel de tres no tiene posiciones
   * intermedias válidas.
   */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /*
   * **Sin `touch-action`, y eso es la corrección de un error.**
   *
   * Llegó a decir `pan-x pinch-zoom`, escrito creyendo que así el eje vertical
   * quedaba delegado al documento. Hace lo contrario: `pan-x` declara que con un
   * dedo sobre este elemento sólo se panea en horizontal, y el navegador
   * entonces no arranca un desplazamiento vertical con ese toque **en ninguna
   * parte** —no lo propaga, lo descarta—. El resultado fue justo el síntoma que
   * venía a arreglar: sobre las piezas, el dedo que baja no bajaba nada.
   *
   * No hace falta reemplazarlo por nada. Lo que capturaba el gesto era el
   * recorrido vertical propio que el cajón tenía por resolver `overflow-y` en
   * `auto`, y eso ya lo atiende el `hidden` de arriba: sin nada que desplazar en
   * ese eje, el navegador le pasa el gesto al documento por su cuenta.
   */
  /* La barra molesta en un bloque de tres tarjetas y el gesto ya es evidente
     por la pieza que asoma. */
  scrollbar-width: none;
}

.hi-piezas::-webkit-scrollbar { display: none; }

.hi-pieza { scroll-snap-align: center; }

/*
 * El indicador del carrusel.
 *
 * Tres marcas y no puntos redondos: son piezas de una fila, y una raya corta
 * dice «hay tres, estás en la primera» sin pedir prestado el vocabulario de un
 * carrusel de fotos. La activa se alarga en vez de cambiar de color sola, así
 * que el estado se ve incluso donde el oro y el gris se confunden.
 *
 * El área que recibe el dedo es la del botón —44px de alto— y la raya vive
 * adentro: lo que hay que acertar y lo que hay que ver son dos medidas
 * distintas, y acá se diferencian por diez veces.
 */
.hi-puntos {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-block-start: -1.6rem;
}

.hi-punto {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.2rem;
  block-size: 4.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hi-punto::before {
  content: '';
  display: block;
  inline-size: 1.6rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--hi-linea);
  transition: inline-size .25s ease, background-color .25s ease;
}

.hi-punto[aria-current='true']::before {
  inline-size: 2.8rem;
  background: var(--hi-oro-texto);
}

.hi-punto:focus-visible {
  outline: 2px solid var(--hi-oro-texto);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hi-punto::before { transition: none; }
}

/*
 * Con lugar para las tres, deja de ser carrusel.
 *
 * **En `em` y no en `rem`, y no es un capricho de estilo.** Bricks pone el
 * `html` en 62,5%, así que en este archivo 1rem son 10px — pero *dentro de un
 * media query no*: ahí la unidad se resuelve contra el tamaño inicial del
 * documento, 16px, y ninguna declaración en `html` la alcanza. Esta regla decía
 * `70rem` con la intención de cortar en 700px y el navegador la leía como 1120,
 * que es por qué un monitor de 1024 seguía viendo el carrusel. Comprobado en el
 * navegador: con el viewport en 1920, `(min-width: 150rem)` no matchea —igual
 * que `2400px` y a diferencia de `1500px`—.
 *
 * `64em` son 1024 exactos: la resolución donde la casa quiere ver las tres, y
 * la de una tableta apaisada.
 */
@media (min-width: 64em) {
  .hi-piezas {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    /*
     * Los dos que el carrusel necesitaba y acá estorban.
     *
     * El margen lateral era la mitad de lo que sobra al lado de una pieza del
     * 78% de la pantalla: con tres columnas eso es un cuarto del ancho tirado a
     * cada costado. Vuelve al respiro de siempre.
     *
     * Y `overflow` completo y no sólo el horizontal: la misma regla que obligó a
     * declarar el vertical allá arriba obliga acá a soltar los dos juntos, o el
     * navegador resuelve el horizontal en `auto` para acompañar al `hidden` que
     * quedó puesto, y las tres columnas aparecen dentro de un cajón que scrollea.
     */
    padding-inline: var(--hi-gap);
    overflow: visible;
  }

  /*
   * La línea que separa, como en la gráfica: entre las piezas y no alrededor,
   * así el bloque se lee como una sola tabla de tres columnas.
   *
   * Sólo acá, que es donde hay tres columnas que separar. En el carrusel era una
   * raya vertical suelta contra el borde de la pantalla, dividiendo la pieza que
   * se está mirando de otra que no se ve: no separaba nada, era un renglón de
   * más.
   */
  .hi-pieza + .hi-pieza::before {
    content: '';
    position: absolute;
    inset-block: 10%;
    left: calc(var(--hi-gap) / -2);
    width: 1px;
    background: linear-gradient(transparent, var(--hi-linea) 18%, var(--hi-linea) 82%, transparent);
  }

  /* Con las tres piezas a la vista, un indicador de posición señala la posición
     de algo que no se mueve. */
  .hi-puntos {
    display: none;
  }
}

.hi-pieza {
  position: relative;
  display: grid;
  /* Porcentaje, filete, pieza, nombre, peso y precio. El `1fr` es la pieza:
     absorbe la diferencia cuando un nombre ocupa dos renglones y otro uno, así
     los precios de la fila quedan a la misma altura. */
  grid-template-rows: auto auto 1fr auto auto auto;
  justify-items: center;
  gap: 1.2rem;
  /*
   * El hueco de abajo es el del botón, más el aire que lo separa del precio.
   *
   * El botón sale del flujo para que acercarse a una pieza no corra las otras
   * dos, así que este espacio es el que le reserva su lugar: el botón se apoya
   * contra el pie de la tarjeta y lo que sobra queda arriba de él.
   *
   * De ahí sale la cuenta: 44 de botón y 24 de respiro. Estaba en 56, o sea doce
   * de aire, y a esa distancia el botón se leía como el cuarto renglón del
   * precio en vez de como algo aparte que se toca.
   */
  padding: 0 var(--hi-gap) 6.8rem;
  text-align: center;
}

/* El número, que es todo el mensaje. */

.hi-pieza__off {
  display: grid;
  justify-items: center;
  gap: .2rem;
  margin: 0;
}

/*
 * El número no es de un dorado: es de dos.
 *
 * Un oro plano en un cuerpo de ochenta píxeles se ve impreso; el degradado
 * —claro arriba, saturado abajo— es lo que lo hace leer como metal, y es lo que
 * hace la pieza gráfica de la casa. Va de arriba hacia abajo porque así cae la
 * luz en el resto de la sección: la vitrina también se ilumina desde arriba.
 *
 * El `color` de la línea de abajo no es decorativo, es la red: si el navegador
 * no recorta el fondo contra el texto, el número igual sale en oro oscuro en
 * vez de desaparecer en transparente. Ése es el tono que se mide para
 * contraste, y el que ve quien navega con colores forzados.
 */
.hi-pieza__cifra {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--hi-cifra);
  font-weight: 400;
  /*
   * Uno, y con aire arriba y abajo. No es una decisión tipográfica: es lo que
   * hace falta para que el degradado no corte el número.
   *
   * `background-clip: text` recorta el fondo contra la caja de la línea, no
   * contra el glifo. Con `line-height: .9` esa caja quedaba más baja que las
   * letras y lo que sobresalía se quedaba sin pintar — y como el color es
   * transparente, sin pintar quiere decir invisible. Se veía en el «5», que
   * baja más que el 8 y el 7, con la panza cortada.
   *
   * Más abajo que arriba, porque Playfair trae cifras de estilo antiguo: el 5 y
   * el 7 bajan de la línea base como una «g», y son justo los que aparecían
   * cortados. Ese descuelgue es parte del carácter de la tipografía y de la
   * gráfica de la casa, así que se le hace lugar en vez de aplanarlo con
   * `lining-nums`.
   *
   * El `padding` en `em` acompaña al tamaño: la cifra es fluida y un valor fijo
   * dejaría de alcanzar en la punta grande de la escala.
   */
  line-height: 1;
  padding-block: .06em .24em;
  color: var(--hi-oro-texto);
  font-variant-numeric: tabular-nums;
  /*
   * Tres oros, y ninguno es el de marca.
   *
   * El primer intento iba de #c9ad74 a #7c6320 y era el degradado de la pieza
   * gráfica, pero sobre papel esos tonos dan 2,09:1 y 2,57:1 — un número de
   * 84px pide 3:1, así que los dos tercios de arriba no pasaban. Medido, no
   * estimado, y axe no lo habría avisado nunca: con `color: transparent` no
   * evalúa el contraste y devuelve cero violaciones.
   *
   * Éstos son los mismos oros bajados hasta que el más claro cumple. El del
   * medio es `--color-gold`, el que el sitio ya usa para tamaños grandes por
   * esta misma razón.
   *
   *   #a8873f  3,27:1      #9e8121  3,62:1      #6d5518  6,85:1
   */
  background-image: linear-gradient(#a8873f 0%, #9e8121 45%, #6d5518 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Separado del bloque de arriba a propósito: si el navegador no entiende
   `background-clip: text`, esta regla no se aplica y el número conserva su
   color sólido. Junto con la anterior, un `color: transparent` lo borraría. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hi-pieza__cifra { color: transparent; }
}

/*
 * «OFF»: grande, fino y pegado al número.
 *
 * En la gráfica de la casa esta palabra no es una etiqueta pequeña colgando de
 * la cifra: es la segunda línea del mismo bloque, casi del mismo cuerpo y con
 * trazo delgado. El peso 600 la ponía a competir con el número, que tiene que
 * ganar solo; en 300 acompaña.
 *
 * El margen negativo la sube contra la cifra. Hace falta porque el número lleva
 * un `padding` inferior para que el degradado no le corte la panza al 5 y al 7
 * —ver ahí arriba— y ese aire, que es necesario para pintar, acá sobra para
 * componer.
 */
.hi-pieza__off__etiqueta {
  /* Exactamente el tratamiento de «CERTIFICADO» en el sello: misma serif, mismo
     peso, mismo espaciado. Las dos son la palabra chica que acompaña a una
     grande, y darles el mismo alfabeto es lo que hace que el encabezado se lea
     como una sola pieza y no como dos bloques que coincidieron en la página. */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, .8vw + 1.5rem, 2.6rem);
  font-weight: 400;
  letter-spacing: .3em;
  /* El espaciado empuja la palabra a la derecha y la deja descentrada bajo la
     cifra; el margen se lo devuelve. */
  margin-left: .34em;
  margin-top: -.5em;
  color: var(--hi-ink);
}

/*
 * El filete con el rombo.
 *
 * Un ornamento de joyería: la línea se apaga hacia los extremos en vez de
 * terminar en seco, que es lo que la separa de un `border-bottom`. El rombo en
 * el centro es un cuadrado girado — no hace falta una figura para dibujar un
 * rombo — y lleva un anillo del color del fondo que le abre el hueco a la línea
 * en vez de taparla a medias.
 */
.hi-filete {
  position: relative;
  display: block;
  width: min(72%, 22rem);
  height: 1px;
  /* Recupera arriba lo que el `gap` del bloque dejó de dar: la bajada se pega al
     nombre, pero el filete cierra el conjunto y necesita su respiro. */
  margin-block: 1.6rem 1rem;
  /* El hueco del centro es del propio degradado y no un parche del color del
     fondo: el hero tiene un gradiente, así que un anillo de un color fijo se
     vería como una mancha en cuanto el fondo cambia de tono. Así no depende de
     lo que haya detrás. */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hi-linea) 18%,
    var(--hi-linea) 44%,
    transparent 44%,
    transparent 56%,
    var(--hi-linea) 56%,
    var(--hi-linea) 82%,
    transparent 100%);
}

.hi-filete::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: .5rem;
  height: .5rem;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--hi-oro);
}

/* Sin descuento, el bloque se rellena para no perder sus filas en el grid
   (ver el `else` en hero-inversion.php) pero no debe verse ni ocupar lugar
   en el árbol de accesibilidad. */
.hi-pieza__off--vacio,
.hi-filete--vacio {
  visibility: hidden;
}

/* La pieza, en su vitrina. */

/*
 * Sin recorte, para que el reflejo termine donde se apaga.
 *
 * La vitrina de relojes sí recorta, porque ahí el cuadro tiene fondo y borde
 * propios y la pieza vive adentro de una caja. Acá el fondo es el de la
 * sección: el recorte no contenía nada, sólo le cortaba la cola al reflejo, y
 * un reflejo cortado en seco se lee como un error de imagen.
 */
.hi-pieza__media {
  position: relative;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1;
}

.hi-pieza__img {
  position: absolute;
  inset: 0;
  margin: auto;
  /*
   * La pieza llena su caja, y de ahí sale casi todo el aire que sobraba.
   *
   * Estaba en 74×78 dentro de un cuadrado de 220, así que se comía 24px arriba
   * y 24 abajo sin dibujar nada. Medido: del filete a la pieza había 46px de los
   * cuales sólo 12 eran el `gap`, y de la pieza al nombre 36 por lo mismo. El
   * espacio no venía de la grilla —tocarle el `gap` habría apretado también el
   * nombre contra el peso y el precio, que están bien— sino de adentro de esta
   * caja.
   */
  width: 84%;
  height: 90%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /*
   * Más tenue y más corto que el de la grilla de compra.
   *
   * Allá la tarjeta encierra la foto y el reflejo muere contra su propio borde;
   * acá la pieza flota sobre el papel y la cola llegaba hasta el nombre, que va
   * en Playfair a 24px justo debajo. Un reflejo que roza un título compite con
   * él en vez de apoyarlo.
   *
   * Se corrigen las dos cosas: la máscara acorta lo que se ve —corre después del
   * espejado, así que subir ese número deja visible sólo la parte pegada a la
   * pieza— y el .22 lo apaga.
   *
   * Sube de 72 a 88 junto con la pieza. El porcentaje es de la altura de la
   * imagen, así que al agrandarla la misma máscara daba una cola más larga
   * justo cuando el hueco hasta el nombre se achicaba: las dos cosas empujaban
   * en contra. Con 88 la cola vuelve a morir antes del título.
   */
  -webkit-box-reflect: below .2rem linear-gradient(transparent 88%, rgb(255 255 255 / .22));
}

.hi-pieza__img--entera {
  mix-blend-mode: normal;
  -webkit-box-reflect: none;
}

/*
 * Una luz que cruza la pieza al pasar el cursor.
 *
 * El mismo gesto que la cinta de «vendido» en la landing de relojes: pasada
 * corta y nada más. Un brillo que camina solo deja de ser un reflejo y pasa a
 * ser un cartel de oferta; éste ocurre porque alguien se acercó, que es cuando
 * un reflejo tiene sentido.
 *
 * La franja va inclinada y no derecha. Perpendicular entra y sale de golpe; en
 * diagonal barre la pieza de a poco, como pasa la luz sobre el metal cuando uno
 * lo gira en la mano.
 *
 * Se mueve con `translate` y no con `background-position`: aquello repinta en
 * cada cuadro, y acá puede haber tres piezas encendiéndose a la vez. Un
 * `translate` lo compone la placa sin repintar nada.
 *
 * El recorrido está acotado a propósito. El cuadro no recorta —recortar le
 * cortaría la cola al reflejo, que ya arreglamos— así que la franja frena antes
 * de asomarse a la pieza vecina, y sus dos extremos son transparentes.
 *
 * `mix-blend-mode: overlay` es lo que hace que esto se vea como un reflejo y no
 * como un rectángulo cruzando la pantalla.
 *
 * En relojes el mismo gesto va sobre la cinta de «vendido», que es un
 * rectángulo con `overflow: hidden`: la luz queda contenida en una forma que ya
 * era rectangular y no hay nada que resolver. Acá la pieza es un lingote
 * recortado flotando sobre papel, así que una franja opaca cruza tanto el metal
 * como el aire de al lado, y eso se lee como una cinta pegada encima.
 *
 * Con `overlay`, una luz clara sobre un fondo casi blanco no produce cambio
 * —el papel ya está en el tope de la escala— y sobre el dorado sí aclara. La
 * forma de la pieza enmascara el destello sola, sin necesidad de una máscara:
 * las fotos recortadas tienen fondo blanco opaco, así que un `mask-image` por
 * transparencia no tendría de dónde agarrarse.
 */
.hi-pieza__media::after {
  content: '';
  position: absolute;
  /* Acotado a la caja de la foto y no al cuadro entero: fuera de la pieza no
     hay metal que iluminar, y cuanto menos superficie recorre, menos ocasiones
     tiene de delatarse. */
  top: 8%;
  bottom: 8%;
  left: 13%;
  width: 30%;
  background: linear-gradient(90deg,
    transparent,
    rgb(255 252 240 / .5) 42%,
    rgb(255 255 255 / .85) 50%,
    rgb(255 252 240 / .5) 58%,
    transparent);
  rotate: 20deg;
  translate: -60% 0;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hi-pieza:hover .hi-pieza__media::after {
  animation: hi-destello .85s ease-out;
}

/*
 * Empieza y termina sobre el metal, no en el aire.
 *
 * El recorte le saca a la foto el margen del lienzo, pero adentro le queda un
 * sobrante propio: la pieza no llega a los bordes del archivo. Con la franja
 * saliendo de −150% y llegando a 260%, buena parte de la pasada ocurría sobre
 * ese blanco, donde no hay nada que iluminar y `overlay` no produce nada — se
 * veía como un tiempo muerto al principio y al final.
 *
 * De −60% a 200% la luz entra ya tocando la pieza y se va cuando termina de
 * cruzarla. Misma duración, todo el recorrido sobre el oro.
 */
@keyframes hi-destello {
  0%   { translate: -60% 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { translate: 200% 0; opacity: 0; }
}

/* Quien pidió menos movimiento no quiere una luz cruzándole la pantalla. La
   pieza se queda quieta y no pierde nada: el brillo es un adorno, no un dato. */
@media (prefers-reduced-motion: reduce) {
  .hi-pieza:hover .hi-pieza__media::after { animation: none; }
}

/*
 * El nombre, el peso y el precio: el mismo formato que la tarjeta de compra.
 *
 * Es la misma pieza en las dos páginas. Antes acá el nombre iba en versalitas
 * espaciadas y el precio chico y apagado, mientras que en la grilla el nombre
 * va en Playfair y la cifra grande en tinta — dos presentaciones del mismo
 * objeto, y quien pasa de una página a la otra tiene que reconocerlo.
 *
 * Se conserva el centrado, que sí es de acá: la grilla alinea a la izquierda
 * porque es una lista, y esto son tres columnas simétricas bajo un sello.
 */
/*
 * Toda la pieza abre el chat, desde el porcentaje hasta el botón.
 *
 * El enlace es uno solo y vive en el nombre; el área se estira con `inset: 0`
 * sobre la tarjeta, así que cubre también el número de arriba y el filete —que
 * es lo primero que alguien mira y lo último que se le ocurriría que no es
 * clickeable—.
 *
 * `border: 0` además de `text-decoration`: el tema subraya los enlaces con un
 * borde de 1px, no con decoración, y sin esta línea aparece una raya bajo el
 * nombre.
 */
.hi-pieza__link:is(:link, :visited, :hover, :focus, :active) {
  color: inherit;
  text-decoration: none;
  border: 0;
}

.hi-pieza__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hi-pieza__nombre {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  /*
   * El mínimo sube de 19 a 21,5px, y el techo no se mueve.
   *
   * En escritorio el nombre convive con las otras dos piezas y con el
   * porcentaje, así que 24 es lo que puede pesar sin discutirle a la cifra. En
   * el teléfono no compite con nada: la pieza ocupa la pantalla sola y ese mismo
   * nombre quedaba chico al lado de su propia foto.
   *
   * La pendiente baja de .7 a .45vw para que los dos extremos sigan siendo los
   * de antes: lo que cambia es de dónde arranca, no adónde llega.
   */
  font-size: clamp(2.3rem, .3vw + 2.19rem, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hi-ink);
  text-wrap: balance;
}

.hi-pieza__peso {
  margin: 0;
  font-size: clamp(1.4rem, .3vw + 1.3rem, 1.6rem);
  color: var(--hi-muted);
  font-variant-numeric: tabular-nums;
}

.hi-pieza__precio {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  /*
   * El mínimo sube de 22 a 25px, con el techo donde estaba.
   *
   * Lo mismo que se hizo con el nombre justo arriba, y por lo mismo: en
   * escritorio la cifra convive con las otras dos piezas y con el porcentaje, y
   * en el teléfono tiene la pantalla para ella sola.
   *
   * Tres pixeles más que el nombre y no los mismos: en una tarjeta de venta el
   * precio es el dato que se busca, y con los dos al mismo cuerpo la fila de
   * abajo se leía como dos renglones del mismo peso.
   */
  font-size: clamp(2.8rem, .4vw + 2.66rem, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hi-ink);
  font-variant-numeric: tabular-nums;
}

/*
 * El botón, siempre a la vista y de contorno.
 *
 * Aparecía con el cursor. Escondido hasta que alguien se acerca, un llamado a la
 * acción no llama: en un teléfono no hay cursor que lo revele, y en escritorio
 * hay que descubrir que está antes de poder usarlo. Ahora está desde que la
 * página carga, que es lo único que un botón de contacto tiene que hacer.
 *
 * De contorno y no macizo, y por eso se puede tener siempre. Tres píldoras
 * doradas llenas debajo de tres piezas le ganarían al porcentaje, que es lo que
 * esta fila vino a decir; tres contornos acompañan sin levantar la voz. El
 * relleno queda para cuando el cursor se acerca: ahí sí, esa pieza es la que se
 * está mirando.
 *
 * Sigue fuera del flujo, en el hueco que la tarjeta ya le reservaba abajo. No
 * hace falta que vuelva: el lugar estaba guardado desde que el botón aparecía y
 * desaparecía, y ocupándolo de verdad la fila no cambia de alto.
 */
.hi-pieza__cta {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  /* Más chico que el porcentaje, que es lo que tiene que leerse primero, pero
     con el tamaño de un botón que alguien va a tocar con el pulgar. */
  gap: .7rem;
  padding: 1.2rem 2.2rem;
  border-radius: 999px;

  background: transparent;
  /*
   * El contorno, en un oro que se ve.
   *
   * Estaba en el tono de marca al 60% y eso sobre el papel del encabezado da
   * 1,69:1 —medido—, o sea un borde que técnicamente está y que el ojo no
   * encuentra: un botón de contorno con el contorno invisible es un renglón de
   * texto suelto. La norma pide 3:1 para el borde de un control y este da 3,55.
   *
   * No es el mismo oro que la etiqueta, que necesita más porque es texto chico.
   * Una línea y una palabra no piden lo mismo.
   */
  border: 1px solid #9e8121;
  /*
   * La etiqueta en el oro profundo y no en el de marca.
   *
   * Sobre el papel del encabezado el #b59c67 da 2,6:1 —medido contra las dos
   * puntas del degradado— y este texto mide 15px. El #7a6318 da 5,7 y sigue
   * siendo oro. El borde sí puede quedarse con el tono de marca: una línea no se
   * lee, se ve.
   */
  color: var(--hi-oro-texto);
  /*
   * De 15px fijo a una escala de 17 a 18.
   *
   * Era el único texto de la tarjeta que no escalaba, y se notó al crecer los
   * dos de arriba: quince pixeles debajo de un precio de veinticinco no se leen
   * como el paso siguiente, se leen como una nota al pie.
   *
   * El recorrido sigue siendo corto —20 a 21— pero el arranque sube: es el
   * llamado a la acción de la página y no puede ser el texto más chico de la
   * tarjeta que lo contiene.
   *
   * Veinte es el techo real en un teléfono, no una preferencia. Medido a 360: el
   * botón pide 224px de los 227 que tiene una pieza, y a 21 pediría 232 y se
   * sale. Los tres pixeles que sobran los pone el margen lateral recortado en el
   * bloque del teléfono, más abajo.
   */
  font-size: clamp(2rem, .25vw + 1.91rem, 2.1rem);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /*
   * El clic lo atraviesa, y sin esto el botón no hace nada.
   *
   * Es la cara visible del enlace que cubre la tarjeta, no un enlace: el de
   * verdad está en el nombre y se estira con un `::after`. Pero este bloque está
   * en absoluto y viene después en el marcado, así que se apoyaba encima de ese
   * pseudo-elemento y se quedaba con el clic — comprobado preguntando qué hay en
   * el centro del botón: este `span`, que no lleva a ninguna parte.
   *
   * Ya pasaba cuando aparecía sólo al pasar el cursor, y ahí se notaba menos
   * porque había que descubrirlo antes de poder no usarlo. Ahora es lo primero
   * que alguien va a tocar.
   *
   * El relleno al acercarse no se pierde: lo dispara `.hi-pieza:hover`, que es la
   * tarjeta y no este `span`.
   */
  pointer-events: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/*
 * Con el cursor encima se llena.
 *
 * Es el único momento en que una de las tres tiene que pesar más que las otras
 * dos, y para entonces el visitante ya eligió cuál mira.
 *
 * La etiqueta pasa a tinta porque el fondo pasa a oro: el dorado de marca con
 * texto blanco da 2,65:1 y con texto oscuro 6,07. Misma salida que `.rl-btn--wa`
 * usa para el verde de WhatsApp.
 */
.hi-pieza:hover .hi-pieza__cta,
.hi-pieza:focus-within .hi-pieza__cta {
  background: var(--hi-oro);
  border-color: var(--hi-oro);
  color: var(--hi-ink);
}

/*
 * El contorno del teclado rodea la pieza entera, que es lo que se activa.
 *
 * Puesto sobre la tarjeta y no sobre el enlace: el enlace es el nombre, y un
 * recuadro alrededor de dos palabras mentiría sobre el alcance del click, que
 * llega desde el porcentaje hasta el botón.
 */
.hi-pieza:has(.hi-pieza__link:focus-visible) {
  outline: 2px solid var(--hi-ink);
  outline-offset: 4px;
}

/* Reserva sin `:has()`: el contorno vuelve al enlace. Rodea menos de lo que se
   activa, pero un foco invisible deja el bloque sin teclado. */
@supports not selector(:has(*)) {
  .hi-pieza__link:focus-visible {
    outline: 2px solid var(--hi-ink);
    outline-offset: 3px;
  }
}

.hi-pieza__icono {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
}

/*
 * Texto sólo para lectores de pantalla.
 *
 * Declarado acá y no reusado del CSS de la grilla de compra, y esto costó dos
 * síntomas que parecían tres problemas: el marcado traía `pz-sr`, esa hoja no
 * se encola en esta página, y el agregado —«— Oro 24 kilates 10 gramos, se abre
 * en WhatsApp»— salía impreso. El botón pasaba de 130px a 476, no entraba en
 * una columna de 384, y de paso desbordaba la lista y recortaba el tercer
 * porcentaje.
 *
 * Cada hoja se lleva las clases que su marcado nombra. Una utilidad prestada de
 * otro módulo funciona hasta que alguien encola uno sin el otro.
 */
.hi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El botón ya no aparece ni desaparece; lo único que le queda por apagar es el
   cambio de color. */
@media (prefers-reduced-motion: reduce) {
  .hi-pieza__cta {
    transition: none;
  }
}