/* ==========================================================================
   #usos — «¿Qué puedes hacer en Vegas?»

   Cinco tarjetas <details>/<summary> nativas: sin JavaScript y sin la
   patrón de ventana emergente que este proyecto prohíbe. `<summary>` es la
   tarjeta cerrada —foto a sangre, nombre, frase, aviso—; el contenido de
   `<details>` son los usos recomendados, y se abre y cierra con teclado y
   con lector de pantalla de fábrica.

   EN MÓVIL cada tarjeta ocupa el alto completo de la ventana: se pasa de
   una a otra scrolleando, como una portada por espacio. EN ESCRITORIO pasan
   a una rejilla de tres columnas —hay sitio para verlas casi todas a la
   vez— y el aviso cambia de «tocar» a «ver usos», que es lo que de verdad
   hace un cursor.
   ========================================================================== */

.usos {
  /* Iba en crema plana; ahora el papel botánico del sitio vive en <body>
     (base.css) y esta sección se hace transparente para que corra continuo
     por debajo en vez de taparlo con una plancha lisa. */
  background-color: transparent;
  padding-block: var(--esp-seccion) 0;
}

.usos__encabezado {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: var(--padding-contenedor);
}

.usos__titulo {
  margin-top: 0;
}

.usos-lista {
  list-style: none;
  margin: var(--esp-xl) 0 0;
  padding: 0;
}

.usos-item + .usos-item {
  margin-top: var(--esp-sm);
}

/* ---- La tarjeta cerrada (<summary>) --------------------------------------
   `display: block` porque Safari/Firefox le ponen a <summary> `display:
   list-item` con su propio marcador triangular; se quita también con
   `::marker` y con el selector -webkit- para Chrome/Safari viejos. */
.usos-tarjeta {
  /* v20 · DOS FILAS: FOTO A SANGRE + PLACA. El cliente vio la maqueta de la
     v19 y pidió, sobre una captura, «pon el diseño que estaba antes y quita
     este»: echaba de menos la PRESENCIA de la tarjeta de antes de la v18
     —fotografía llenando la tarjeta entera, cifra de aforo grande, nombre
     enorme— y lo que veía era una foto recortada arriba y, debajo, una lista
     de texto plano sobre una plancha blanca sin dibujo.

     LO QUE NO SE PUEDE HACER PARA COMPLACERLO, Y POR QUÉ. El diseño de antes
     ponía todo ese texto ENCIMA de la fotografía con un velo detrás; ése es
     exactamente el patrón que el mismo cliente mandó retirar del sitio entero
     («no, imágenes sin filtro ni nada te dije» / «el texto NO debe tapar la
     foto»), que base.css §4b convirtió en componente y que el validador
     (regla h) rechaza. Restaurar el CSS viejo tal cual sería devolverle en la
     siguiente ronda el defecto que ya corrigió.

     LA SÍNTESIS. Se recupera la PRESENCIA sin recuperar el SOLAPAMIENTO:
       · La fotografía deja de ser una fila más y vuelve a ser la tarjeta: se
         queda con TODO el alto sobrante (`1fr`), a sangre de borde a borde,
         que es la presencia que el cliente reconoce de la versión que le
         gustaba. (Hasta la v24 llevaba además una silueta de arco que crecía
         con el scroll; el propio cliente la mandó retirar —«cuadradas no
         curvas»— y hoy el borde es recto: §RECORTE. La PRESENCIA, que es lo
         que pidió recuperar aquí, no dependía del arco y no se toca.)
       · El texto baja a UNA sola pieza —la placa del sistema, `.placa` en el
         HTML— con su superficie opaca, su silueta de hoja y su sombra.
         Ya no es una plancha a todo ancho pegada al borde: va con margen, así
         que se lee como un objeto apoyado, no como el resto de la página.
       · Dentro de esa placa el aforo recupera el tratamiento gráfico que
         tenía cuando era una pastilla sobre la foto —cifra en display al
         tamaño de estadística y en el acento— y el nombre sube a --fs-h1.
     Ninguna de las dos filas pisa a la otra: son filas de una rejilla, no
     capas. La regla dura se cumple por construcción, no por vigilancia.

     LA PÍLDORA DE AFORO DEJA DE SER SU PROPIA FILA (la fila del medio de la
     v19, que dejaba una franja muerta entre foto y texto): entra dentro de la
     placa como un bloque más, y las dos filas que quedan son las únicas dos
     cosas que hay — la foto y su ficha. */
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  cursor: pointer;
  list-style: none;
  /* En móvil, la portada de su propio espacio: 100dvh y no 100vh, para que
     la barra de direcciones móvil no deje una franja del fondo al descubierto. */
  height: 100dvh;
  /* Sube de 26rem a 32rem: la placa de la v20 es más alta que la lista de
     texto de la v19 (cifra de aforo en --fs-cifra, nombre en --fs-h1), y con
     26rem la fila `1fr` de la fotografía se quedaba sin nada en una ventana
     apaisada de teléfono. */
  min-height: 32rem;
}

/* ---- §RECORTE · LA FOTO, RECTANGULAR Y DE ESQUINAS RECTAS ----------------
   v25 · SE RETIRA EL ARCO QUE CRECÍA CON EL SCROLL. Pedido del cliente sobre
   una captura de la tarjeta «Cancha» —la foto de la malla, con el borde de
   arriba en forma de medio punto—: «que todas las fotos sean cuadradas no
   curvas como estaban antes».

   QUÉ PIDIÓ EXACTAMENTE, Y QUÉ NO. Hay dos maneras de leer «cuadrada» y las
   dos se probaron en el navegador antes de escribir una línea:

   (a) CUADRADA COMO PROPORCIÓN 1:1. Medido en el preview real, con la
       tarjeta tal como está: en 375 px la fila de la fotografía mide
       375 × 452 y en 892 px de ventana mide 877 × 365. Un `aspect-ratio:
       1 / 1` a sangre daría 877 × 877 en escritorio: la foto sola pasaría a
       ser MÁS ALTA que la ventana (694 px), y con la placa debajo cada
       tarjeta mediría del orden de 1.200 px — cinco pantallas y media de
       fotos gigantes en lugar de cinco portadas. Para que 1:1 cupiera habría
       que toparle el ancho y centrarla, o sea convertir la fotografía a
       sangre —«se queda con TODO el alto sobrante, a sangre de borde a
       borde», §TARJETA— en una estampa chica flotando en crema. Eso no es lo
       que el cliente señaló: no se quejó del TAMAÑO de la foto, que es el
       gesto que él mismo pidió recuperar en la v20, sino de su SILUETA.
       Se descarta.

   (b) CUADRADA COMO OPUESTO DE CURVA — la que se aplica. «Cuadrada» aquí es
       «de esquinas rectas»: fuera el medio punto de arriba y fuera la
       animación que lo hacía crecer. La fotografía sigue siendo la tarjeta,
       a sangre y a pantalla completa, exactamente como está aprobada; lo
       único que cambia es que su borde superior deja de ser un arco y pasa a
       ser una línea recta. Es también lo que ya se hizo, con la misma frase
       del cliente, en la rejilla del home (`styles/sections/home.css` §1b,
       v25: «que las fotos sean siempre cuadradas, no con este efecto»), así
       que las dos páginas quedan diciendo lo mismo.

   EL RADIO QUE QUEDA: `--radio-md` en las CUATRO esquinas, el mismo que ya
   llevaban las dos de abajo y el mismo que el home le puso a su portada
   cuadrada. No es «curva»: son 14 px de suavizado del sistema, el radio de
   casa, no un medio punto de la mitad del ancho. Poner 0 dejaría esta única
   pieza con canto vivo en un sitio donde ninguna superficie lo tiene.

   QUÉ SE BORRA CON ESTO: el `@supports (clip-path: inset(…round…))` que le
   daba la silueta, el `@supports (animation-timeline: view())` que la hacía
   crecer, y el `@keyframes usos-arco-crece`. No queda ningún `clip-path`
   sobre esta pieza: la silueta tiene un solo dueño otra vez, el
   `border-radius` de `.usos-tarjeta > picture` con su `overflow: hidden`.
   Tampoco hace falta ya el guardia de `prefers-reduced-motion` que tenía
   §ARCO —existía sólo porque una animación con línea de tiempo de scroll no
   se apaga acortando duraciones—: sin animación no hay nada que guardar. La
   entrada de la placa (§PLACA) no se toca; ésa es otra pieza y sigue con el
   suyo.

   EL ÍCONO DE «VER FOTO COMPLETA» (§AMPLIAR) MEJORA SOLO, y por eso no se
   mueve: con el arco, a 16 px del canto superior derecho el círculo caía
   justo en la zona que el medio punto recortaba, o sea medio sobre el papel
   crema; sobre un rectángulo de esquina recta cae entero sobre la
   fotografía, que es donde un control de «ampliar» se espera. Los 16 px de
   `--esp-sm` despejan de sobra el radio de 14 px.

   ── LO QUE SIGUE ES LA MEMORIA DEL ARCO RETIRADO, que se conserva porque
   documenta un bug real de rendimiento en celular y la razón por la que la
   solución NO era optimizar JavaScript. Si alguien vuelve a pedir un gesto
   de silueta cronometrado por scroll, esto es lo que hay que volver a leer.

   v17 · SE RETIRÓ js/usos-arco.js ENTERO. Pedido del cliente sobre la
   tarjeta de la foto nocturna bajo la carpa: «ESTA IMAGEN EN CELULAR SE
   LAGUE APEGA BRINCOS MINIS» — en celular el scroll sobre la tarjeta se
   traba y da micro-saltos.

   QUÉ SE MIDIÓ, ANTES DE TOCAR NADA. La sospecha razonable era que el
   `path()` de siete comandos que el script reescribía por cuadro saturase
   el hilo principal. Medido en el navegador con la emulación de 375×812,
   construyendo la cadena, escribiéndola y forzando el recálculo de estilo y
   maqueta: 0,021 ms por tarjeta y por cuadro. Aun multiplicado por seis
   —un teléfono de gama media frente a este equipo— son 0,13 ms de un
   presupuesto de 16,7. Y al neutralizar sólo el efecto visual
   (`clip-path: none`) dejando correr el mismo JavaScript, las estadísticas
   de cuadro salieron idénticas hasta la décima. EL CÁLCULO NO ERA EL
   PROBLEMA: la cabecera del script viejo culpaba a `clip-path` de no ser
   compositor puro, y en eso el coste medible resultó ser cero.

   LO QUE SÍ ERA. El efecto se gobernaba desde un listener de `scroll`, o
   sea desde el HILO PRINCIPAL. En un teléfono el scroll no lo mueve el hilo
   principal: lo mueve el compositor, que desplaza la fotografía en cada
   cuadro sin preguntarle a JavaScript. La silueta, en cambio, sólo se movía
   en los cuadros en que el hilo principal alcanzaba a correr, y con un
   cuadro de retraso como mínimo (evento de scroll → rAF → estilo →
   composición). Cada cuadro que el hilo principal perdía —decodificando la
   foto de 100dvh de la tarjeta siguiente, atendiendo las otras líneas de
   tiempo, el pulso de WhatsApp— era un cuadro en el que la FOTO se movía y
   el BORDE DEL ARCO se quedaba quieto. Ese desfase, sobre una frontera de
   alto contraste entre crema y fotografía puesta justo en el centro de la
   mirada, es exactamente lo que el cliente describe como «brincos minis».
   Por eso no se ve en escritorio: allí el hilo principal no pierde cuadros.

   EL ARREGLO ES QUITAR EL INTERMEDIARIO, no hacerlo más rápido: la silueta
   pasa a `animation-timeline: view()`, la misma línea de tiempo de scroll
   que ya cronometra `.usos-tarjeta__marco` aquí al lado y el paralaje de
   #inicio y la deriva de #momentos. Sin listener, sin rAF, sin medición:
   el motor lee el desplazamiento del propio cuadro que va a componer, así
   que la silueta y la fotografía no pueden desincronizarse — es la misma
   fuente de verdad para las dos.

   POR QUÉ `inset()` Y NO `path()`. La opción evidente era animar el mismo
   `path()` entre dos fotogramas. No se puede: `path()` sólo admite números
   en unidades de usuario, y las tarjetas miden 100dvh —una medida que sólo
   se conoce en tiempo de ejecución—, así que un `path()` en @keyframes
   obligaría a volver a medir con JS y estaríamos donde empezamos. Se
   comprobó en el navegador: `CSS.supports('clip-path', 'path("M 0% 0% ...")')`
   devuelve `false`; el `<length-percentage>` dentro de `path()` todavía no
   está.

   Pero resulta que este arco no necesitaba un `path()` NUNCA. La geometría
   del script viejo era «escalar el arco por `s` alrededor del centro de su
   borde inferior», y ese arco es un rectángulo con medio punto arriba: un
   rectángulo redondeado. Escalarlo así da otro rectángulo redondeado, y
   ése sí se escribe con `inset()`, que admite porcentajes, admite valores
   negativos (el recorte se sale de la caja, que es justo lo que se quiere)
   e interpola de fábrica. Comprobado esquina por esquina contra la
   aritmética del script retirado, con s = 1,35 sobre la caja real de
   375×812: mismo borde superior (−284,20 px), mismos costados (−65,63 y
   440,63), mismo suelo (812), mismos radios (253,13 × 548,10). Idénticos,
   no parecidos.

   Y sale gratis una segunda mejora: un `path()` arbitrario obliga a Skia a
   fabricar una máscara; un rectángulo redondeado es su camino rápido
   analítico. En este equipo los dos miden lo mismo —la GPU de escritorio no
   se entera— pero en la GPU de un teléfono no son el mismo trabajo.

   LAS CUENTAS, para que nadie tenga que rehacerlas:
   · La escala máxima sigue siendo 1,7, el mismo `S_MAX` del script retirado
     (el arco cubre la esquina de la ventana a partir de 1,25; 1,7 la llena
     con holgura y la mantiene llena mientras la tarjeta cruza el centro).
   · Borde superior: −alto × (s − 1) = −70 % del alto de la caja.
   · Costados: −(ancho / 2) × (s − 1) = −35 % del ancho, a cada lado.
   · Suelo: 0. El borde recto se queda clavado y el arco no «flota», que es
     lo que hacía la fórmula vieja al escalar alrededor de (ancho/2, alto).
   · Radios de arriba: siguen siendo `50% 50%`. No es una casualidad
     afortunada: los porcentajes de `round` se resuelven contra el
     rectángulo YA desplazado, que mide ancho × s por alto × s, así que el
     medio punto se escala solo. Por eso este fotograma no lleva ni un
     número medido.
   · Radios de abajo: `--radio-md` × 1,7, el único que sí hay que escalar a
     mano porque está en una longitud absoluta.

   EL RELEVO DEL `border-radius`, QUE ANTES HACÍA EL SCRIPT EN LÍNEA, ahora
   lo hace la hoja: con `overflow: hidden` activo, un `border-radius` de
   medio punto seguiría recortando la caja al arco pequeño y el crecimiento
   no se vería. Se pone a 0 y la silueta pasa a tener un solo dueño, el
   `clip-path`. Va dentro del @supports para que el navegador que no tenga
   `inset()` con `round` conserve el arco de `border-radius` de arriba en
   vez de quedarse con una tarjeta rectangular.

   TRES ESTADOS, TODOS LEGIBLES Y TODOS QUIETOS:
   1. Sin `clip-path` con `round` → manda el `border-radius` de arriba.
   2. Con `clip-path` pero sin `view()`, o con `prefers-reduced-motion:
      reduce` → manda este `clip-path` estático, que dibuja el MISMO arco de
      reposo, píxel a píxel. No hay parpadeo posible porque el fotograma de
      partida de la animación es literalmente esta misma declaración.
   3. Con todo → el arco crece y vuelve.

   El @media de movimiento reducido es obligatorio y va aquí, no en el
   bloque global de base.css: ese bloque sólo acorta duraciones, y una
   animación con línea de tiempo de scroll no tiene duración en tiempo.
   Sin este guardia seguiría creciendo. */
/* v20 · EL ARCO CAMBIA DE DUEÑO: DE LA TARJETA AL <picture>.
   Hasta la v19 la silueta la llevaba `.usos-tarjeta` entera con
   `overflow: hidden`, herencia de cuando la tarjeta ERA la fotografía. Con
   la placa dentro de la misma caja eso tenía dos efectos indeseados: el arco
   le recortaba las esquinas de abajo a la placa (que ya tiene su propia
   silueta de hoja, la del sistema) y el `overflow: hidden` le comía la
   sombra. Ahora el arco recorta SÓLO la fila de la fotografía, que es lo que
   siempre quiso decir. La geometría no cambia ni un valor: son las mismas
   declaraciones, aplicadas al elemento correcto.

   El fotograma de reposo y el que crece siguen siendo los de la v17, con las
   cuentas de arriba intactas; lo único que cambia es que el 100 % del alto
   contra el que se resuelven los porcentajes ya no es la ventana entera sino
   la fila de la foto. El máximo sigue cayendo con la fotografía centrada en
   la ventana, que es el momento que la curva quería marcar.
   ── FIN DE LA MEMORIA DEL ARCO. Todo lo de arriba describe una pieza que
   ya NO existe: el bloque `@supports (clip-path: inset(… round …))` que
   dibujaba el fotograma de reposo se retira en la v25, y con él el único
   `clip-path` que había sobre la fotografía. */

/* Se escribían las longhands y NO el atajo `animation:`, por lo mismo que
   explica #momentos: el atajo reinicia `animation-duration`, y una animación
   con línea de tiempo de scroll necesita `auto` para repartirse a lo largo
   del recorrido.

   EL RANGO REPRODUCE LA CURVA DEL SCRIPT RETIRADO, no una nueva. Aquel
   calculaba un progreso que nacía con el borde superior de la tarjeta a
   media ventana, culminaba con la tarjeta centrada y volvía al reposo con
   ese borde media ventana por encima. En el rango `cover` de una tarjeta
   que mide lo mismo que la ventana, el borde superior recorre linealmente
   de +100 % a −100 % del alto de la ventana; media ventana por debajo es
   el 25 % y media ventana por encima el 75 %. De ahí `cover 25%` a
   `cover 75%`, con el máximo en el 50 %: el centro exacto, igual que antes.

   Fuera del rango, `animation-fill-mode: both` deja la tarjeta clavada en
   un fotograma declarado —y los dos extremos son el arco de reposo—, nunca
   en un estado sin definir.

   `--ease` (cubic-bezier(0.4, 0, 0.2, 1)) hace de suavizado simétrico en
   cada mitad del triángulo, que es el papel que cumplía el `smoothstep`
   aritmético del script. Es la curva de la casa más cercana a esa forma;
   no se escribía un cubic-bezier suelto para clavar el decimal.
   ── v25 · Este `@supports (animation-timeline: view())` y su
   `@keyframes usos-arco-crece` se retiran enteros junto con el arco. La
   fotografía de esta sección ya no anima nada: se queda quieta, rectangular
   y con el radio del sistema en las cuatro esquinas. La única animación que
   sobrevive sobre la tarjeta es la entrada de la placa (§PLACA), que es
   texto que asienta, no una silueta que crece. */

.usos-tarjeta::-webkit-details-marker {
  display: none;
}

.usos-tarjeta::marker {
  content: '';
}

.usos-tarjeta__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  /* Sin recorte propio, ni estático ni animado: la foto llena su caja y
     quien la recorta es el `<picture>` que la contiene, con su
     `border-radius` de las cuatro esquinas y su `overflow: hidden`
     (§RECORTE más arriba). Una sola silueta y un solo dueño. */
}

/* Alameda: en una caja de 100dvh el recorte por defecto se va a la copa de
   los árboles y pierde el prado, que es el sujeto real de la foto — baja el
   foco a la mitad inferior.
   (El comentario nombraba boda-arbol.jpg, una foto reescalada con IA que ya
   no se usa en el sitio; la tarjeta lleva img/espacios/alameda-2.jpg.) */
.usos-item:first-child .usos-tarjeta__foto {
  object-position: 50% 62%;
}

/* Teatrino (boda-4.jpg): el 38% por defecto deja la foto centrada en el
   cielo nublado de arriba —más de la mitad del encuadre— y recorta la carpa
   con las luces y la gente/mesas, que es el sujeto real. Pedido del cliente
   sobre esta misma captura: «que enfoque más abajo de la foto». La carpa
   arranca cerca del 57% del alto y la gente/mesas llegan casi al borde
   inferior, así que el foco baja a 80%. */
.usos-item:nth-child(3) .usos-tarjeta__foto {
  object-position: 50% 80%;
}

/* Taller (taller-1.jpg): el 38% por defecto se queda en la cubierta de caña
   y los bombillos colgados —el techo, no el espacio—. Mismo pedido del
   cliente sobre esta captura: la pared con los cuadros y el escritorio,
   el sujeto real, vive en la banda media de la foto (entre 40% y 65% del
   alto), así que el foco baja a 55%. */
.usos-item:nth-child(4) .usos-tarjeta__foto {
  object-position: 50% 55%;
}

/* Velo de legibilidad: más denso abajo, donde vive el texto, casi limpio
   arriba, para que la fotografía se lea entera y no sólo su mitad inferior.

   v16 · EL TRAMO MEDIO SUBE DE 0,40 A 0,52. La medición sobre las cinco
   fotos reales encontró que el índice («01», «02»...) cae justo en esa
   banda del degradado y sobre las fotos claras —la grama al sol de Alameda,
   la cubierta del Taller— el fondo compuesto quedaba en torno a rgb(72 84
   41): con el índice a 0,6 de crema eso daba 3,5:1, por debajo del 4,5:1
   que pide AA para texto pequeño. Con 0,52 el fondo bajo esa línea se
   oscurece lo suficiente sin apagar el tercio superior de la foto, que
   sigue con su 0,05 de siempre. */
/* v17 · EL VELO GIRA A CLARO — pedido directo del cliente: «no quiere tonos
   oscuros en la página ni fotos oscuras, las originales y punto». El mismo
   perfil graduado (denso abajo, casi limpio arriba) pero hacia --luz, el
   pico de luces del sistema: la foto no se hunde, se apoya en papel. El
   texto del marco pasa a tinta, y la cuenta de contraste se hace contra el
   peor píxel posible —NEGRO PURO—: a 0,88 el compuesto tiene luminancia
   0,82 → tinta 12,4:1; en la banda del índice (0,58) → 7,7:1. AA holgado. */
/* v18 · EL VELO SE RETIRÓ DEL TODO — corrección del cliente («no no
   imágenes sin filtro ni nada te dije»): ni degradado oscuro ni claro sobre
   la foto. La legibilidad la resuelve la placa sólida (§PLACA, abajo).
   v20 · La regla vacía `.usos-tarjeta__velo { display: none }` se borra: el
   <span> del velo ya no existe en el HTML desde la v18 y una regla que apaga
   un elemento inexistente sólo sirve para que alguien lo resucite. */

/* v19 · EL <picture> ES LA PRIMERA FILA DE LA REJILLA, y —desde la v20— el
   que recorta. La <img> sigue siendo `position: absolute; inset: 0` (ver más
   abajo): lo que cambia es quién es su contenedor posicionado. Antes lo era
   la tarjeta entera —de ahí que la foto llegara hasta abajo, bajo la placa—;
   ahora lo es este <picture>, que ocupa la fila `1fr`. `min-height: 0` es
   obligatorio: sin él, un ítem de rejilla no baja de su tamaño de contenido
   y la fila `1fr` se desbordaría con la altura natural de la fotografía.

   `border-radius` aquí es AHORA LA ÚNICA SILUETA de la fotografía, y por eso
   es el único valor que cambia en la v25 (§RECORTE): de
   `50% 50% var(--radio-md) var(--radio-md)` —el medio punto de arriba, el
   arco de reposo que el `clip-path` retirado hacía crecer— a `--radio-md` en
   las cuatro, que es la petición del cliente («cuadradas no curvas») escrita
   en el radio del sistema y el mismo valor que el home le dio a su portada.
   `overflow: hidden` es lo que la hace efectiva. */
/* ---- §AMPLIAR · TODA LA FOTO ABRE EL VISOR -------------------------------
   v26 · CAMBIA EL DUEÑO DEL CLIC EN LA FOTO. Pedido del cliente sobre
   Teatrino y Taller: «que al darle click en cualquier parte de la foto se
   amplíe» — hasta la v25 la foto entera abría/cerraba el acordeón de usos
   recomendados (comportamiento nativo del `<summary>` que la envolvía) y
   sólo un ícono chico, superpuesto en la esquina, abría el visor.

   SE INVIERTEN LOS PAPELES, NO SE AÑADE UN SEGUNDO CONTROL. La fotografía
   entera —antes un `<picture>` suelto, hermano del botón— pasa a vivir
   DENTRO de un único `<button>` que ocupa toda su caja: ese botón es ahora
   el disparador del lightbox en cualquier punto de la foto, y el ícono de
   lupa que antes era el único gatillo se queda dentro del mismo botón como
   refuerzo visual —no hay dos controles haciendo lo mismo—. La PLACA de
   abajo (`.usos-tarjeta__marco`) queda fuera de ese botón, como `<span>`
   plano de siempre: un clic ahí sigue burbujeando hasta el `<summary>` y
   abriendo/cerrando el acordeón exactamente igual que antes. Es la misma
   tarjeta con la superficie clicable de cada acción invertida: antes
   foto=acordeón/ícono=visor, ahora foto=visor/placa=acordeón, que es donde
   semánticamente vive «ver los usos de este espacio».

   `<button>` DENTRO DE `<summary>` SIGUE SIENDO HTML VÁLIDO exactamente por
   la misma razón que en la v25: `<summary>` no es «contenido interactivo»
   del estándar, así que anidar un botón real no rompe el árbol. Lo que sigue
   pidiendo es el mismo corte de `js/app.js` §Lightbox —comprobar si el
   disparador vive dentro de un `<summary>` y cortar ahí `stopPropagation`—,
   que no cambió una línea: seguía siendo genérico (cualquier
   `[data-lightbox]` dentro de un `<summary>`), sin importar cuánta área
   cubra el botón.

   `.usos-tarjeta__foto-disparador` HEREDA lo que antes llevaba
   `.usos-tarjeta > picture`: es el ítem de la fila `1fr` de la rejilla de
   `.usos-tarjeta`, `min-height: 0` para poder encogerse dentro de esa fila,
   `overflow: hidden` + `border-radius` para el recorte de esquinas rectas
   (§RECORTE). El reset de apariencia de botón (`border: 0`, `background:
   none`, `padding: 0`, `font: inherit`, `text-align: inherit`) es para que
   no se note que por debajo es un `<button>` y no un `<picture>`: la foto
   debe verse igual que en la v25, no como un botón. `cursor: zoom-in` es la
   convención que introduce este cambio para «esto amplía»; el resto de la
   tarjeta (la placa) conserva el `cursor: pointer` que ya tenía `.usos-
   tarjeta`, la misma pareja lupa/mano que usa el visor de #naturaleza. */
.usos-tarjeta__foto-disparador {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radio-md);
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.usos-tarjeta__foto-disparador picture {
  position: absolute;
  inset: 0;
  display: block;
}

.usos-tarjeta__foto-disparador:focus-visible {
  outline: none;
  box-shadow: inset var(--anillo-foco);
}

/* El ícono de lupa: mismo lenguaje visual que en la v25 (vidrio —fondo
   `--tinta` translúcido + borde inverso—, el mismo que `.lightbox__cerrar`/
   `.lightbox__nav` en lightbox.css), pero ahora es un `<span>` decorativo
   dentro del botón, no un segundo control: `pointer-events: none` para que
   nunca compita por el clic con el botón que lo envuelve. 2.75rem = 44px,
   el mínimo táctil del sistema, se conserva aunque ya no sea su propia
   zona interactiva —sigue marcando dónde «amplía» a simple vista—. */
.usos-tarjeta__ampliar {
  position: absolute;
  top: var(--esp-sm);
  right: var(--esp-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-full);
  border: 1px solid var(--color-borde-inverso);
  background: rgb(var(--tinta-rgb) / 0.55);
  color: var(--color-texto-inverso);
  pointer-events: none;
  transition: var(--transicion-rapida);
}

.usos-tarjeta__ampliar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.usos-tarjeta__foto-disparador:hover .usos-tarjeta__ampliar,
.usos-tarjeta__foto-disparador:focus-visible .usos-tarjeta__ampliar {
  background: rgb(var(--tinta-rgb) / 0.75);
}

/* ---- §PLACA · LA FICHA DEL ESPACIO --------------------------------------
   v20 · DEJA DE SER UNA PLANCHA A MEDIDA Y PASA A SER EL COMPONENTE.
   En el HTML este <span> lleva ahora `class="usos-tarjeta__marco placa
   placa--lg"`: la superficie, la silueta de hoja, la sombra y el relleno los
   pone base.css §4b, no esta hoja. Lo que queda aquí es SÓLO la maqueta
   interna —qué va dónde— y el tratamiento tipográfico. Con eso desaparecen
   de esta hoja el `background-color`, el `border-top` y el `padding` hechos a
   mano, que eran tres de las «nueve superficies sólidas distintas» que §4b se
   escribió para replegar.

   POR QUÉ CON MARGEN Y NO PEGADA AL BORDE. La v19 la dejaba a todo ancho,
   tocando los cuatro cantos de su fila: sin sombra visible, sin silueta y del
   mismo color que el papel de la página, o sea invisible como objeto — el
   «texto plano» de la queja. Con margen la placa se lee como una ficha
   apoyada bajo la fotografía, que es el registro que el cliente reconoce.

   POR QUÉ NO SE SUBE NI UN PÍXEL SOBRE LA FOTO. Porque es la regla dura del
   proyecto y porque el margen negativo sería justo la vía por la que
   volvería el problema. Las dos piezas son filas hermanas de una rejilla:
   solaparse no es que esté prohibido, es que no se puede.

   LA CONTABILIDAD DE CONTRASTE, toda contra --color-superficie-solida y
   ninguna contra una fotografía (§4b):
     nombre y frase  --color-texto        14,2:1
     frase larga     --color-texto-suave   6,2:1
     cifra, índice   --color-acento-texto  5,4:1                            */
.usos-tarjeta__marco {
  /* v19 · Sale del apilado: ya no flota sobre la foto, es una fila de la
     rejilla de .usos-tarjeta. `static` es obligatorio y el validador (regla
     h) lo comprueba: un `.placa` posicionado es un `.placa` encima de algo. */
  position: static;
  z-index: 1;
  display: grid;
  /* Móvil: una columna. El aforo abre la ficha —es el dato que se busca— y
     debajo van índice, nombre, frase y botón. */
  grid-template-areas:
    'aforo'
    'orden'
    'nombre'
    'frase'
    'aviso';
  align-content: end;
  margin: var(--esp-sm) var(--esp-md) var(--esp-md);
  color: var(--color-texto);
  /* v16 · EL TEXTO YA NO SE APAGA CON EL SCROLL, Y ESTE ES EL ARREGLO DE
     RAÍZ DE LA QUEJA DEL CLIENTE («el efecto no deja leer el texto»).

     Hasta la v15 js/usos-arco.js escribía aquí una `opacity` en línea igual
     a `1 − e`, donde `e` es el mismo progreso que hace crecer el arco y vale
     1 con la tarjeta centrada en la ventana. Pero cada tarjeta mide 100dvh:
     «centrada» y «en posición de lectura» son EXACTAMENTE el mismo momento.
     El texto llegaba a opacidad 0 justo cuando el visitante lo estaba
     mirando, y en todo el tramo previo iba a mitad de camino —eso es lo que
     se ve en la captura: el título y la frase medio borrados—. Medido en el
     navegador: con la tarjeta a rectTop ≈ 0 la opacidad computada era 0 y
     0,005. El texto no era débil por contraste: se estaba apagando por
     diseño en el peor momento posible.

     Ahora el script sólo gobierna la silueta (`clip-path` sobre
     `.usos-tarjeta`) y no toca nunca este elemento. La foto sigue creciendo
     a sangre —el gesto que el cliente ya aprobó— pero el texto se queda
     encima, legible de principio a fin.

     UN SOLO MOTOR SOBRE ESTA PIEZA: la animación de entrada de aquí abajo
     es lo único que anima este elemento. Sin ella —navegador sin timelines
     de scroll, o `prefers-reduced-motion: reduce`— manda este estado
     estático, que ya es el de llegada: opacidad plena y sin desplazar. */
}

/* LA ENTRADA. Cronometrada por el propio scroll (`animation-timeline:
   view()`), no por un observador en JavaScript: el texto sube un pelo y
   asienta mientras la tarjeta termina de entrar en cuadro, y queda quieto
   mucho antes de que la tarjeta se centre. La regla dura de este proyecto
   —«el estado estático nunca depende de que una animación llegue»— se
   cumple por partida doble: el reposo de CSS es ya el fotograma final, y el
   fotograma de PARTIDA también es legible (0,85 de opacidad sobre un texto
   que en el peor de los casos medía 5,45:1 sigue por encima de 4,5:1). La
   animación es sólo el tránsito, nunca la condición para leer.

   `animation-fill-mode: both` importa: fuera del rango, antes y después, el
   elemento se queda en un extremo declarado y nunca en un estado sin
   definir. Sólo transform y opacity — compositor puro. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .usos-tarjeta__marco {
      animation: usos-marco-asienta both linear;
      animation-timeline: view();
      animation-range: entry 20% entry 70%;
    }
  }
}

@keyframes usos-marco-asienta {
  from {
    opacity: 0.85;
    transform: translate3d(0, var(--esp-md), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* v16 · El índice sube de 0,6 a 0,92 de crema. A 0,6 medía 3,5:1 sobre la
   grama al sol de Alameda y 3,8:1 sobre La Vega: por debajo del 4,5:1 de
   AA para texto pequeño. Sigue siendo el elemento más callado de la
   tarjeta —lo dice el tamaño y el interletrado, no un color apagado. */
/* v20 · El índice deja de ser una etiqueta gris de 12 px y pasa a ser una
   marca de serie: cifra en display, en el acento, con un filete que corre
   hasta el borde de la placa. Es el gesto que hacía que la tarjeta vieja se
   leyera como «01 de 05» y no como el encabezado de un párrafo. El filete es
   `::after` sin texto ni puntero, así que no entra en ninguna cuenta de
   contraste; la cifra sí, y --color-acento-texto sobre la placa mide 5,4:1. */
/* v26 · SE RETIRA EL FILETE. El cliente, sobre una captura de «03 Teatrino»:
   «quita las líneas». El `::after` que corría desde la cifra hasta el borde
   de la placa se va, y con él el `display: flex` y el `gap` que sólo
   existían para tenderlo. La cifra queda sola, como el índice de las fichas
   de #planes (`.planes-carril__indice`), que nunca llevó línea: la serie
   «01 de 05» la sigue diciendo la cifra en display y en el acento. El hueco
   que deja se rellena con aire, no con otro adorno: el margen inferior sube
   un paso (2xs → xs) para que el nombre no se pegue al índice. */
.usos-tarjeta__orden {
  grid-area: orden;
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-acento-texto);
  margin-bottom: var(--esp-xs);
}

/* v20 · De un clamp escrito a mano (2 → 3 rem) al paso 5 de la escala,
   --fs-h1: hasta 3,75 rem. El nombre del espacio es el titular de la ficha,
   no un subtítulo, y a 3 rem competía de tú a tú con la frase que va debajo.
   Sobre la placa opaca, 14,2:1. */
.usos-tarjeta__nombre {
  grid-area: nombre;
  display: block;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--fs-h1);
  line-height: 1.05;
  color: var(--color-texto);
}

.usos-tarjeta__frase {
  grid-area: frase;
  display: block;
  margin-top: var(--esp-2xs);
  /* De 30ch al token de medida corta: la misma longitud de línea que el resto
     del sitio, en vez de un número suelto en esta hoja. */
  max-width: var(--medida-corta);
  font-size: var(--fs-cuerpo);
  /* v20 · de tinta plena a tinta suave (6,2:1 sobre la placa): con el nombre
     a --fs-h1 la frase necesita ceder jerarquía por color, no por tamaño. */
  color: var(--color-texto-suave);
}

/* v20 · El aviso pasa de filete de tinta a filete de acento y crece hasta
   altura de botón real. Es lo que abre el <details>, así que tiene que
   parecer pulsable y tiene que cumplir los 44 px de blanco táctil: `min-height:
   var(--esp-xl)` son 48 px, medidos en el navegador (ver la verificación).
   --color-accion-borde es --coral-hondo: 5,4:1 sobre la placa, muy por encima
   del 3:1 que pide WCAG 1.4.11 para el contorno de un control. */
.usos-tarjeta__aviso {
  grid-area: aviso;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  margin-top: var(--esp-sm);
  padding: var(--esp-xs) var(--esp-lg);
  min-height: var(--esp-xl);
  width: fit-content;
  justify-self: start;
  border: 1px solid var(--color-accion-borde);
  border-radius: var(--radio-full);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-acento-texto);
}

.usos-tarjeta__aviso-escritorio {
  display: none;
}

/* ---- Pastilla de aforo sobre la foto ---------------------------------
   Pedido explícito del cliente sobre una captura de la extinta #espacios:
   cifra grande + «PERSONAS COMO MÁXIMO» superpuestas a la foto principal,
   no sólo dentro del panel. Mismo lenguaje visual que `.usos-panel__aforo`
   —píldora, --radio-full, --fuente-titulo en versalitas— pero resuelta
   como su propia capa (no dentro de `.usos-tarjeta__marco`) porque:

   1. VIVE EN LA ESQUINA SUPERIOR, no en la inferior. `.usos-tarjeta__marco`
      ya ocupa todo el borde inferior (nombre, frase, aviso) con
      `justify-content: flex-end`; una pastilla ahí competiría por el mismo
      espacio y en pantallas bajas se encimaría con la frase. (Cuando esto
      se escribió, el arco de la silueta además dejaba más foto «respirando»
      arriba; desde la v25 no hay arco —§RECORTE— y la razón de fondo, que la
      esquina superior está libre, sigue valiendo igual sobre un rectángulo.)
   2. NO SE APAGA CON EL SCROLL. `.usos-tarjeta__marco` lleva su propia
      animación de entrada; el dato de aforo es información, no un gesto
      decorativo, así que queda fuera de ese elemento y de su animación — el
      aforo se mantiene legible en todo el recorrido de scroll, también
      cuando el arco ya llenó la pantalla. (Desde la v16 el marco tampoco se
      apaga; este punto se mantiene porque la razón de fondo —la información
      no se anima— sigue valiendo.)
   3. EL PANEL DEJA DE REPETIR LA CIFRA (ver el HTML: `.usos-panel__aforo`
      se retiró de las 5 tarjetas): con la pastilla ya visible en la
      portada de la tarjeta, repetirla dentro del panel que se abre debajo
      era el mismo dato dos veces en la misma tarjeta — la regla que la
      propia sección declara no romper (ver comentario de cabecera de
      usos.html: «ninguna cifra de aforo se repite aquí»). El panel se
      queda con lo que sólo él aporta: los usos recomendados. */
/* v20 · EL AFORO DEJA DE SER UNA PÍLDORA Y VUELVE A SER UNA CIFRA.
   La píldora tenía sentido cuando flotaba sobre la fotografía: la cápsula
   opaca era lo que la hacía legible. Dentro de la placa esa cápsula sobra
   —ya está sobre superficie sólida— y lo único que hacía era encoger el
   número hasta la altura de la línea de texto. Sin ella, la cifra puede ir
   a --fs-cifra, el mismo tamaño de estadística que usa el resto del sitio
   para «101 aves» o «4 ha», y en el acento: es la pieza que primero se ve de
   la ficha, que es lo que el cliente echaba de menos.

   ES UN BLOQUE MÁS DE LA PLACA, no una capa: sin `position`, sin fondo
   propio, sin sombra. La superficie y el contraste se los da la placa. */
.usos-tarjeta__aforo {
  grid-area: aforo;
  position: static;
  display: flex;
  align-items: baseline;
  gap: var(--esp-xs);
  justify-self: start;
  margin-bottom: var(--esp-sm);
}

.usos-tarjeta__aforo-cifra {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--fs-cifra);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-acento-texto);
}

.usos-tarjeta__aforo-texto {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  /* Dos renglones cortos junto a la cifra grande leen mejor que una línea
     larga que empuje el bloque a lo ancho de la placa. 22ch y no menos: con
     16ch la Cancha —la única con dos topes, «Jugadores y 20 espectadores
     como máximo»— partía en cuatro renglones y dejaba el «20» solo en uno. */
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   A PARTIR DE 48em LA PLACA SE ABRE EN DOS COLUMNAS: la ficha a la izquierda
   y el aforo a la derecha, separados sólo por aire (v26: el filete vertical
   que los dividía se retiró junto con el del índice —«quita las líneas»—;
   el `column-gap` de la rejilla y un relleno mediano bastan para que la
   cifra se lea como columna propia). En móvil eso no cabe —el
   nombre a --fs-h1 en media columna de 375 px se partiría en cuatro
   renglones— y por eso allí el aforo va arriba, en su propia línea.
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .usos-tarjeta__marco {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'orden  aforo'
      'nombre aforo'
      'frase  aforo'
      'aviso  aforo';
    column-gap: var(--esp-xl);
    padding: var(--esp-lg);
    /* La fotografía sigue a sangre de borde a borde; la placa NO. En un
       monitor de 1440 una ficha de 1400 px de ancho deja un metro de vacío
       entre el nombre y la cifra y deja de leerse como un objeto. Se topa en
       --ancho-md y se centra: foto a sangre arriba, ficha centrada debajo.
       `justify-self: center` y no `margin-inline: auto`: así el margen
       lateral de la regla base sigue en pie y la placa no toca los cantos
       de la ventana justo en el umbral de 768 px, donde el tope todavía no
       muerde. */
    max-width: var(--ancho-md);
    justify-self: center;
    width: 100%;
  }

  /* Con la placa en dos columnas y el alto de una ventana de escritorio, la
     frase recupera el cuerpo grande que en 375 px costaba un renglón entero
     de la fotografía. */
  .usos-tarjeta__frase {
    font-size: var(--fs-grande);
  }

  .usos-tarjeta__aforo {
    flex-direction: column;
    align-items: flex-end;
    align-self: center;
    justify-self: end;
    text-align: right;
    gap: var(--esp-2xs);
    margin-bottom: 0;
    padding-inline-start: var(--esp-md);
  }
}

/* EL LLAMADO A TOCAR — v16, y el segundo arreglo de legibilidad.

   Antes esto era un parpadeo de la píldora entera: `opacity` de 1 a 0,45 y
   vuelta, cada 2,4 s. Medido, ese valle deja la etiqueta —12,8 px en
   versalitas— en torno a 3:1 sobre su foto: la mitad de cada ciclo el botón
   incumplía AA, y es literalmente el «TOCA PARA VER EL ESPACIO» que en la
   captura del cliente se ve desvanecido. Apagar el texto no puede ser la
   forma de llamar la atención sobre el texto.

   Ahora la píldora y su etiqueta se quedan quietas en opacidad plena, y
   quien pulsa es un aro decorativo que sale de ella y se disuelve hacia
   afuera —el gesto de una gota en el agua, que es lo que de verdad dice
   «tócame»—. `::after` no lleva texto ni recibe puntero, así que su
   opacidad no le quita contraste a nada. Sólo transform y opacity. */
.usos-tarjeta__aviso::after {
  content: '';
  position: absolute;
  inset: 0;
  /* v20 · el aro sigue al filete del botón, que giró a acento. */
  border: 1px solid rgb(var(--coral-hondo-rgb) / 0.55);
  border-radius: var(--radio-full);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .usos-tarjeta__aviso::after {
    animation: usos-aviso-onda calc(var(--dur-lenta) * 4) var(--ease-salida) infinite;
  }
}

@keyframes usos-aviso-onda {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%, 100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* Al enfocar o pasar el cursor el aro se detiene: quien ya está a punto de
   tocar no necesita que lo sigan invitando. La píldora no cambia —nunca
   estuvo animada—, así que aquí no hay nada que devolver a su sitio. */
.usos-tarjeta:hover .usos-tarjeta__aviso::after,
.usos-tarjeta:focus-visible .usos-tarjeta__aviso::after {
  animation-play-state: paused;
  opacity: 0;
}

/* ---- El panel abierto (<details>) ----------------------------------------
   Nace fuera del flujo de altura —max-height: 0— y crece con `interpolate-
   size` si el navegador lo soporta; donde no, `[open]` simplemente muestra
   el bloque entero sin transición, que sigue siendo un resultado correcto. */
.usos-panel {
  background-color: var(--color-fondo-alt);
  padding: var(--esp-lg) var(--padding-contenedor);
}

/* La cifra de aforo YA NO vive aquí (v15): se subió a `.usos-tarjeta__aforo`,
   superpuesta a la foto principal desde antes de abrir la tarjeta. Repetirla
   dentro del panel era el mismo dato dos veces en la misma tarjeta abierta;
   el panel se queda con lo único que sólo él aporta — los usos
   recomendados. Regla vigente: la cifra de aforo tiene un solo dueño visual
   por tarjeta. */
.usos-panel__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.usos-panel__uso {
  background-color: var(--color-fondo);
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.usos-panel__uso img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.usos-panel__tipo {
  margin: var(--esp-sm) var(--esp-sm) 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-hondo);
}

.usos-panel__razon {
  margin: var(--esp-3xs) var(--esp-sm) var(--esp-sm);
  color: var(--color-texto-suave);
}

/* LA SALIDA DEL PANEL. Hasta aquí la página de espacios no tenía un solo
   enlace a WhatsApp: se leían los usos y el recorrido se acababa. Cada panel
   cierra ahora con su propio botón de cotización, con el nombre del espacio
   dentro del mensaje prellenado, para que la conversación empiece sabiendo
   de cuál se habla. Va suelto bajo la rejilla de usos —no dentro de una
   tarjeta— y sólo necesita separarse de ella por arriba. */
.usos-panel__accion {
  margin: var(--esp-md) 0 0;
}

/* v14 · LA REJILLA DE ESCRITORIO SE RETIRA, por pedido directo: pantalla
   completa en cualquier ancho, sin excepción para monitores anchos. Sólo
   cambia el AVISO —«tocar» no describe lo que hace un cursor— y eso sí
   sigue diferenciando por tamaño de pantalla, no por ancho de ventana:
   `(hover: hover)` detecta un dispositivo con puntero de precisión en vez
   de leer un breakpoint, así que una tableta en modo ancho sigue viendo
   «tocar» y un portátil angosto ya ve «ver usos». */
@media (hover: hover) and (pointer: fine) {
  .usos-tarjeta__aviso-movil {
    display: none;
  }

  .usos-tarjeta__aviso-escritorio {
    display: inline;
  }
}