/*
 * "Ilustración → tarjeta": el bloque "Podemos acompañarte" de Inicio.
 * Las 5 ilustraciones conviven en una misma "arena" física
 * (.hoja-mesa-arena, Matter.js vía hoja-a-mesa.js): caen, chocan entre
 * sí y contra los bordes, y se dejan atraer con suavidad por el cursor
 * al acercarse (magnético, no huyen — así se puede hacer clic en ellas)
 * — nunca se arrastran, el ratón solo las orienta por proximidad. Al hacer clic
 * en una, "se convierte" en una tarjeta rectangular de esquinas
 * redondeadas berenjena con el título y el párrafo completo dentro
 * (<dialog> nativo, ver .hoja-mesa-panel), creciendo desde un punto
 * pequeño centrado, con fondo oscurecido detrás.
 *
 * Origen: assets/animations/hoja-a-mesa.html, un demo con un morph
 * literal punto a punto de un único SVG "hoja" a un rectángulo (el "d"
 * de los dos path tenía que compartir el mismo número/tipo exacto de
 * comandos, 85 puntos, fabricados a mano). Eso solo funciona para ESA
 * pareja de formas — reproducirlo a mano para las 5 ilustraciones
 * reales del sitio (formas orgánicas bien distintas entre sí) no es
 * viable sin el mismo trabajo manual de ajuste punto a punto por forma.
 * En su lugar, hoja-a-mesa.js anima con GSAP el tamaño/posición real
 * (top/left/width/height, ver más abajo por qué no "transform") de la
 * tarjeta desde un rectángulo pequeño centrado hasta su tamaño final —
 * mismo resultado percibido ("crece y se convierte en una tarjeta"),
 * sin necesitar un morph geométrico exacto entre formas arbitrarias.
 */

/* Arena física: caja compartida por las 5 ilustraciones. Alto fijo (no
   el que ocupe el contenido) para dar recorrido real a la caída;
   overflow:hidden para que ninguna quede empujada fuera de la vista si
   se amontonan contra un borde. Sin "has-gravity" (JS deshabilitado o
   prefers-reduced-motion) es solo una fila que envuelve con su alto
   natural — mejora progresiva, nunca una base que dependa de JS para
   verse bien. */
.hoja-mesa-arena {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 2.5rem;
  width: 100%;
  /* Sin max-width ni margin propios a propósito (a diferencia del
     resto de bloques de la web, que sí respetan --content-max-width):
     .section--about, la única sección donde vive esta arena, ya quitó
     su padding y el tope de ancho de .section__inner (ver style.css)
     para que esto pueda usar el 100% de la pantalla de lado a lado, no
     solo el ancho de lectura cómodo. */
  margin: 0;
}

.hoja-mesa-arena.has-gravity {
  /* Alto fijo (no el que ocupe el contenido) para dar recorrido real a
     la caída — a pantalla completa: .section--about (ver style.css) ya
     no tiene padding propio, así que esto puede ocupar sin más los
     100vh enteros de la sección, sin tener que restarle nada. max()
     con un mínimo en rem evita que se colapse en pantallas bajas
     (móvil en horizontal). */
  display: block;
  height: max(22rem, 100vh);
  /* clip-path, NO overflow:hidden (versión anterior) — a petición
     expresa: cada ilustración nace por encima de su propia arena (ver
     startY en hoja-a-mesa.js), casi a la altura del propio hero, y
     ahora el motor físico puede arrancar mientras el usuario todavía
     está saliendo del hero (ver el "arranque anticipado" en
     initArena(), hoja-a-mesa.js) — con overflow:hidden esa caída
     temprana quedaba invisible del todo hasta cruzar el borde exacto
     de la arena, justo lo contrario de "que se vea llover desde arriba
     de la ventana". inset(-200vh 0 0 0): recorta por los lados y por
     abajo exactamente igual que antes (0 en esos tres lados), pero deja
     sin recortar una franja de 200vh POR ENCIMA del propio borde
     superior de la arena. 200vh, no 140vh (primera versión) — a
     petición expresa, tras reportarse que la caída "empezaba a mitad
     del hero": el punto de partida más alto real (índice 4, el radio
     mayor de las 5 — ver startY en hoja-a-mesa.js) puede superar el
     alto de la propia arena en 400-500px de sobra, así que 140vh se
     quedaba corto en viewports normales/bajos y recortaba ese arranque
     antes de tiempo. 200vh deja margen de sobra en cualquier tamaño de
     pantalla razonable. overflow:visible explícito (no el "visible" por
     defecto, para que quede claro que el corte real ahora lo hace
     clip-path, no overflow). */
  overflow: visible;
  clip-path: inset(-200vh 0 0 0);
}

/* Modo puzzle (táctil): recorte NORMAL por los cuatro lados, sin la
   franja libre de arriba — a petición expresa, "no quiero que se
   asome en el hero": esa franja de 200vh existía para dejar ver la
   caída larga de escritorio (ver el porqué justo arriba), que ya no
   aplica aquí — desde que cada pieza nace cerca de su propio hueco
   (SOCKET_DROP_HEIGHT, hoja-a-mesa.js), nada necesita renderizarse por
   encima del propio borde superior de la arena, así que dejarlo sin
   recortar solo servía para que ese sobrante asomara en la sección de
   arriba (el hero). Gana por especificidad a la regla de arriba, sea
   cual sea el ancho real de la ventana (el interruptor sigue siendo
   is-puzzle, no un breakpoint). */
.hoja-mesa-arena.has-gravity.is-puzzle {
  clip-path: inset(0 0 0 0);
}

.hoja-mesa-wrap {
  position: relative;
  /* Bastante más grandes que antes, a petición expresa: entre las 5
     deben ocupar una buena parte del ancho de la sección, no quedarse
     como iconos pequeños.

     clamp(11rem, 22vw, 15rem) → clamp(9rem, 18vw, 12.5rem) — a
     petición expresa, "un poco más pequeños para que puedan caer mejor
     más abajo y moverse más con el ratón": el radio de colisión de
     cada una (ver "radii" en hoja-a-mesa.js, calculado a partir del
     tamaño real en pantalla) se reduce en la misma proporción, así que
     las 5 se estorban menos entre sí — caen más abajo antes de
     encontrar un hueco libre donde asentarse, y les queda más margen
     de arena vacía alrededor para desplazarse al acercar el cursor
     (ver el "magnetismo" en hoja-a-mesa.js). */
  width: clamp(9rem, 18vw, 12.5rem);
}

/* Móvil — bug real, reportado como "se quedan atascados vibrando como
   si colisionaran": medido con un script de prueba (Playwright, iPhone
   13, 390px de ancho) — el mínimo de 11rem (176px) de arriba, con
   EDGE_MARGIN=20px a cada lado (hoja-a-mesa.js), deja una arena
   utilizable de ~350px. El radio de colisión de cada ilustración es
   la MITAD de este ancho + un margen (ver "radii" en hoja-a-mesa.js) —
   con 176px de ancho, dos ilustraciones ya no caben una al lado de la
   otra sin tocarse (176px de diámetro de colisión cada una, sin
   contar el margen). calcularInicioX() (hoja-a-mesa.js) ya sabe
   separarlas al máximo posible, pero con las 5 físicamente más anchas
   que el hueco disponible, "al máximo posible" sigue siendo
   "tocándose" — el resolver de Matter.js las está empujando de vuelta
   a distancia cada fotograma, para siempre, nunca llega a asentarse
   de verdad (confirmado: la velocidad de cada cuerpo nunca cae a 0,
   oscila sin parar incluso varios segundos después de posarse). Bajado
   a un ancho bastante menor aquí: con 5 iconos de ~8rem de media en
   vez de ~13rem, caben sueltos (la propia arena mide 100vh en móvil,
   así que sobra alto de sobra para repartirlos en varias filas al
   caer) y el resolver por fin encuentra una posición de reposo real.

   Más grandes en varios pasos después — a petición expresa ("un
   poquitito más grandes", luego "¡más grandes!"): 6.5/34vw/8.5rem →
   7/37vw/9.25rem → 9/44vw/10.5rem (probado y DESCARTADO: con el mismo
   script de prueba, tres de las cinco no llegaban nunca a 0 de verdad —
   pequeño movimiento residual que encima subía en vez de bajar en
   intervalos sucesivos, el mismo patrón del bug de arriba solo que más
   sutil) → 8/40vw/9.75rem, el tope final: confirmado con el mismo
   script (esperando 20s+ tras la caída) que las 5 llegan a exactamente
   0 movimiento. Si se pide aún más grande, OJO: 10.5rem ya reintroduce
   el bug (aunque más leve/lento que con el 11rem original), así que
   9.75rem parece ser el límite real de seguridad, no solo un valor
   redondo — volver a medir con Playwright antes de subirlo más. */
@media (max-width: 40rem) {
  .hoja-mesa-wrap {
    width: clamp(8rem, 40vw, 9.75rem);
  }
}

/* Minijuego de encajar (solo táctil — móvil Y tablet/iPad, ratón sin
   cambios): .is-puzzle lo añade hoja-a-mesa.js SOLO dentro de
   initArena(), es decir SOLO cuando Matter.js está realmente corriendo
   y sin prefers-reduced-motion — nunca depende de una media query de
   "pointer" a secas, que no sabría distinguir esos casos y dejaría
   huecos vacíos sin física real que los llene en la fila de mejora
   progresiva. */
.hoja-mesa-sockets {
  display: none;
}

.hoja-mesa-arena.is-puzzle .hoja-mesa-sockets {
  display: block;
}

/* Marcador invisible para IntersectionObserver (ver el porqué largo en
   hoja-a-mesa.js, junto al observer del modo puzzle) — nunca se ve
   (1px, sin fondo/contenido, fuera del flujo), solo existe para que JS
   sepa CUÁNDO ha entrado en pantalla el punto exacto en el que arranca
   el motor físico en táctil — y, con él (ver
   .hoja-mesa-arena.is-puzzle:not(.is-interactive), más abajo), el
   fundido de opacidad que revela la roseta. ESTE marcador sigue siendo
   el único responsable de que nada asome antes de tiempo — se
   intentó una vez quitarle esa responsabilidad pensando que la
   opacidad ya bastaba por su cuenta, pero la opacidad solo se
   activa CUANDO este marcador dispara: si el marcador dispara
   demasiado pronto (con solo un 25% fijo, en una tablet alta ya hay
   más de un 25% de la arena visible nada más cargar, sin haber hecho
   scroll — mismo problema de fondo que .hoja-mesa-arena entera, ver el
   comentario grande de .hero en style.css), la opacidad se revela
   igual de pronto — bug real, confirmado nada más quitar esta fórmula.
   max(25%, calc(100vh - 44rem)): en una tablet baja, 25% ya cae bien
   entrado bajo el pliegue, así que ese valor manda tal cual; en una
   tablet ALTA, calc(100vh - 44rem) empuja el marcador justo bajo el
   pliegue (mismo cálculo, mismo porqué, que .hoja-mesa-puzzle-hint
   tenía en una versión anterior), así el motor — y la opacidad que
   depende de él — nunca arrancan antes de que el usuario haya
   scrolleado de verdad más allá del hero. La diferencia con el intento
   anterior (que SÍ fallaba) es que esta vez esa garantía vive SOLO
   aquí, en un punto invisible de 1px que nadie ve — no en la posición
   real de la roseta (ver los nth-child de más abajo, sin tocar), que
   así puede quedarse siempre en su sitio de siempre, sin ningún hueco
   artificial una vez revelada. */
.hoja-mesa-rosette-marker {
  position: absolute;
  top: max(25%, calc(100vh - 44rem));
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* "Encaja las piezas": instrucción breve del minijuego, centrada en la
   franja vacía que deja la roseta de huecos más abajo (0%-44%, ver el
   porqué de esa franja junto a nth-child(1)) — a petición expresa,
   "más abajo, como centrada en el hueco blanco": 20% cae a medio
   camino de esa franja, ni pegada al borde superior de la arena ni
   invadiendo el primer hueco. Para dejar claro qué hay que hacer con
   las 5 ilustraciones en táctil, donde no existe el título flotante
   por hover de escritorio (ver initHeadline, desactivado en táctil,
   hoja-a-mesa.js). Mismo font-family/color que .hoja-mesa-headline__title
   (var(--font-texto), berenjena) para no introducir una tipografía
   nueva en esta misma arena. */
.hoja-mesa-puzzle-hint {
  display: none;
}

.hoja-mesa-arena.is-puzzle .hoja-mesa-puzzle-hint {
  display: block;
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 6;
  width: min(80vw, 20rem);
  margin: 0;
  font-family: var(--font-texto);
  font-weight: 300;
  /* Subido dos veces a petición expresa ("un poquito más grande" y
     luego "no se nota, auméntalo más"): la primera versión
     (clamp(1rem, 4vw, 1.35rem) → clamp(1.2rem, 4.5vw, 1.6rem)) era un
     "vw" puro, que en la mayoría de móviles (~375-430px) se queda por
     debajo del propio mínimo y renderiza siempre en el suelo del
     clamp — apenas 0.2rem más grande que antes, poco perceptible. Esta
     fórmula usa una base fija + vw (mismo patrón que el resto de este
     archivo), así que en cualquier móvil normal ya se acerca o llega
     al techo (1.9rem) en vez de quedarse pegada al suelo. */
  font-size: clamp(1.4rem, 1.1rem + 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--color-berenjena);
  text-align: center;
  transform: translateX(-50%);
}

/* Tablet táctil (pointer:coarse + más ancha que un móvil) — a petición
   expresa: el texto se queda en el CENTRO de la propia roseta de
   huecos, vacío a propósito en su diseño (los 5 huecos están
   ALREDEDOR del centro, no sobre él), así que cae en ese "agujero"
   libre sin pisar ninguno — en vez del 20% de móvil (ahí la roseta cae
   mucho más comprimida, así que ese 20% ya caía bien).
   35% + var(--illustration-clear, 0px), no 58%: mismo centro nuevo y
   mismo desplazamiento extra que la roseta entera (ver el comentario
   grande junto a los nth-child de más abajo, del porqué de subirla a
   35% y de --illustration-clear) — así el texto se sigue cayendo justo
   en el centro real de la roseta, la haya empujado o no la propia
   ilustración de arriba (bailando.svg) para no solaparse con ella. */
@media (pointer: coarse) and (min-width: 40.0625rem) {
  .hoja-mesa-arena.is-puzzle .hoja-mesa-puzzle-hint {
    top: calc(35% + var(--illustration-clear, 0px));
  }
}

/* Tablet táctil — historial de CUATRO rondas empujando la roseta hacia
   abajo con más y más fórmulas (top fijo → resta de vh → desplazar
   todo el grupo → encima "crecerlo"), todas con el mismo defecto de
   raíz: --rosette-shift/--rosette-extra son valores CSS ESTÁTICOS,
   calculados para el peor caso ("la ventana acaba de cargar, más alta
   que .hero, así que ya se ve un trozo de la arena sin haber hecho
   scroll") — pero ese desplazamiento se queda aplicado SIEMPRE, para
   SIEMPRE, sea cual sea el scroll real en cada momento. Resultado
   reportado con capturas: en cuanto el usuario SÍ ha hecho scroll de
   verdad hasta la arena, la roseta seguía empujada hacia el borde de
   abajo con un hueco enorme encima — un hueco que ya no hacía falta
   (el usuario ya había pasado el hero hace rato), pero el CSS no tiene
   forma de saberlo, solo sabe "por si acaso la ventana es muy alta".
   Arreglo de raíz, no otro ajuste más de la misma fórmula: la roseta
   vuelve a su posición ORIGINAL de siempre (41%/53%/72%/72%/53%, sin
   desplazar ni crecer nada — ver cada nth-child más abajo, sin
   --rosette-shift/extra) y en su lugar se queda invisible
   (opacity:0 + pointer-events:none, ver más abajo) hasta que el propio
   JS confirma que el usuario YA ha scrolleado lo bastante (mismo
   momento en el que arranca el motor físico y las piezas se vuelven
   clicables, ver el observer del marcador en hoja-a-mesa.js) — en vez
   de invisible por estar "recortada" en algún sitio, es invisible sin
   más, así su posición real nunca tiene que cambiar ni un pelín según
   el alto de la ventana. */
.hoja-mesa-arena.is-puzzle:not(.is-interactive) .hoja-mesa-sockets,
.hoja-mesa-arena.is-puzzle:not(.is-interactive) .hoja-mesa-puzzle-hint,
.hoja-mesa-arena.is-puzzle:not(.is-interactive) .hoja-mesa-wrap {
  opacity: 0;
  pointer-events: none;
}

.hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-sockets,
.hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-puzzle-hint,
.hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-wrap {
  /* Fundido, no un simple "aparece de golpe" — un pelín más agradable
     al llegar. Sin transition-delay ni nada más: el motor físico YA
     arranca con las piezas cerca de su hueco (SOCKET_DROP_HEIGHT, ver
     hoja-a-mesa.js), así que ese fundido y la propia caída corta pasan
     prácticamente a la vez, no uno detrás del otro. */
  opacity: 1;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-sockets,
  .hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-puzzle-hint,
  .hoja-mesa-arena.is-puzzle.is-interactive .hoja-mesa-wrap {
    transition: none;
  }
}

.hoja-mesa-socket {
  position: absolute;
  transform: translate(-50%, -50%);
  /* Puramente decorativo — nunca debe captar el dedo, el arrastre real
     sigue viviendo en su .hoja-mesa-wrap correspondiente. */
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* MISMO padding que .hoja-mesa-trigger (0.5rem, ver más abajo) —
     bug real, reportado como "las piezas caen alineadas en horizontal
     con su hueco pero no en vertical": .hoja-mesa-wrap mide su alto
     según su .hoja-mesa-trigger (el botón, CON este padding), pero
     este div no tenía ninguno — mismo ancho, alto distinto, así que el
     centro real de una pieza y el centro real de su hueco no
     coincidían aunque ambos compartieran la misma X. Con el mismo
     padding aquí, los dos parten exactamente de la misma caja
     (ancho + padding iguales, mismo SVG dentro), así que sus centros
     coinciden en vertical también. */
  padding: 0.5rem;
}

.hoja-mesa-socket svg {
  display: block;
  width: 100%;
  height: auto;
  /* Silueta "en sombra": la misma pieza, en su propio color de marca,
     bastante atenuada — el color (no solo la forma) ayuda a distinguir
     los huecos entre sí, ya que varias de las 5 son formas de hoja
     bastante parecidas. */
  opacity: 0.3;
}

.hoja-mesa-socket.is-filled {
  /* Al encajar bien una pieza (ver placeInSocket en hoja-a-mesa.js), su
     hueco se desvanece del todo — la propia pieza ya lo cubre encima,
     esto solo evita cualquier resto visible del "fantasma" alrededor. */
  opacity: 0;
}

/* Fórmula ÚNICA y proporcional, teléfono→tablet, para el tamaño de la
   pieza Y de su hueco a la vez (mismo selector: nunca se desincronizan
   entre sí) — a petición expresa, "todo proporcional", sin un
   breakpoint aparte para tablet: el propio "vw" ya escala solo, y
   is-puzzle (no el ancho de ventana) sigue siendo el único interruptor
   real. Gana por especificidad a las dos reglas de tamaño de arriba
   (base y móvil) sea cual sea el ancho real de la ventana.
   Historial de tamaño accidentado: 5rem/4rem+6vw/8.5rem → subido dos
   veces hasta 6rem/5rem+7.5vw/10rem ("más grandes") → bajado de golpe
   a 2.75rem/2.2rem+3.5vw/4.75rem al intentar que las 5 cupieran en
   fila sin solaparse ni un pelín (geométricamente imposible en móvil
   estrecho con piezas tan grandes, confirmado con una simulación) →
   subido aquí otra vez a petición expresa, "me da igual que se
   solapen al caer mientras caigan desde su posición": el requisito de
   "cero solape entre piezas" queda descartado a propósito, así que ya
   no hace falta encoger el tamaño para cumplirlo — la X de partida de
   cada pieza es directamente la de su propio hueco (ver el porqué
   largo en hoja-a-mesa.js), sin ningún reparto/separación de por medio.
   Sin la limitación histórica de 9.75rem (ver el porqué largo junto al
   breakpoint móvil, unas líneas arriba): esa cota existía por la
   colisión FÍSICA entre las 5 piezas, que el modo puzzle elimina de
   raíz (collisionFilter.group:-1 en hoja-a-mesa.js). */
.hoja-mesa-arena.is-puzzle .hoja-mesa-wrap,
.hoja-mesa-socket {
  /* Base/suelo bajados un poco (5.5rem+8vw/6.5rem → 4.5rem+7vw/5.5rem)
     a petición expresa, "en pantallas de móvil un poquitito más
     pequeño todo" — el techo (11rem, para tablet) se deja igual. */
  width: clamp(5.5rem, 4.5rem + 7vw, 11rem);
}

/* Dispersión de los 5 huecos en forma de pentágono/roseta alrededor del
   centro del tablero (a petición expresa, tras ver la primera versión
   repartida en las 4 esquinas + abajo — "más hacia el centro, todo más
   como en círculo, pero bien separados") — 5 puntos a 72° entre sí
   alrededor de (50%, 56%), con un radio vertical algo menor que el
   horizontal (20% vs. 28%) para compensar que la arena es bastante más
   alta que ancha (100vh) y el resultado se lea más redondo que una
   elipse muy estirada.
   Centro en 58% (46% → 56% → 64% → 58%), radio 26%/17% (antes 28.5%/
   20%) — a petición expresa, "más arriba, como más en el centro y más
   juntos entre sí": el radio más corto acerca las 5 entre ellas Y
   hacia el centro a la vez (mismo centro horizontal, cy más alto). El
   par más próximo de toda la roseta (los dos de abajo, nth-child(3)/
   (4)) sigue sin solaparse en el viewport más estrecho razonable
   (~375px, iPhone SE) con el tamaño de pieza actual (ver el clamp() de
   arriba) — el margen ahí ronda ya el límite real de seguridad, así
   que no juntarlas más sin volver a comprobarlo contra ese mismo
   ancho mínimo. A ajustar visualmente contra dispositivos/emuladores
   reales, no son definitivos. */
/* Posiciones ORIGINALES, sin desplazar ni crecer — ver el comentario
   grande junto a .hoja-mesa-arena.is-puzzle:not(.is-interactive), más
   arriba, del porqué: "nunca asomar antes de scrollear" ya no depende
   de mover estos números, depende de la opacidad. */
.hoja-mesa-socket:nth-child(1) {
  top: 41%;
  left: 50%;
}

.hoja-mesa-socket:nth-child(2) {
  top: 53%;
  left: 75%;
}

.hoja-mesa-socket:nth-child(3) {
  top: 72%;
  left: 65%;
}

.hoja-mesa-socket:nth-child(4) {
  top: 72%;
  left: 35%;
}

.hoja-mesa-socket:nth-child(5) {
  top: 53%;
  left: 25%;
}

/* Tablet táctil — a petición expresa, "la roseta debe ir más arriba
   (pero que no se asome en el principio del hero)": las dos cosas a la
   vez son posibles ahora precisamente PORQUE la garantía de "nunca
   asoma" vive en la opacidad (ver
   .hoja-mesa-arena.is-puzzle:not(.is-interactive), más arriba), no en
   la posición — mover estos números más arriba no tiene ningún riesgo
   de que algo asome antes de tiempo, la opacidad ya lo impide pase lo
   que pase.
   Centro movido de 58% a 35% SOLO en tablet (en móvil se deja el 58%
   de siempre — ahí la arena ya es más baja de por sí, así que el hueco
   por encima nunca se sintió excesivo). Mismos desplazamientos
   relativos que la roseta de siempre respecto a su centro (-17/-5/+14,
   ver el comentario grande junto a nth-child(1) más arriba) para
   mantener la MISMA forma exacta, solo más arriba del todo: con el
   centro en 35%, nth-child(1) (el más alto) queda en 18%, nth-child(2)/
   (5) en 30%, nth-child(3)/(4) (los de abajo) en 49%.
   + var(--illustration-clear, 0px) en las cuatro — a petición expresa,
   "la roseta debería aparecer a partir de donde acaba el svg de
   bailando.svg": con el centro ya subido a 35%, nth-child(1) (18%) caía
   por encima de donde termina esa ilustración (bailando.svg, ver
   style.css — 70rem/1120px de alto FIJO, con .hero a su tope de 704px,
   así que sangra 416px/26rem por debajo de .hero en cualquier tablet),
   solapándose con su cola — bug real, visto en captura (la flor y la
   hoja de arriba pisaban el brazo/la pierna de la ilustración).
   --illustration-clear (definida junto a nth-child(1), justo abajo)
   empuja el grupo ENTERO hacia abajo lo justo para que nth-child(1)
   empiece exactamente donde acaba bailando.svg — ni un pelín antes. */
@media (pointer: coarse) and (min-width: 40.0625rem) {
  /* --illustration-clear vive en .hoja-mesa-arena (el ANCESTRO común
     de los 5 huecos Y del texto, ver más abajo), no en nth-child(1)
     directamente — una custom property definida en un elemento solo
     baja a sus propios descendientes, nunca "de lado" a sus hermanos;
     definirla ahí arriba habría dejado a nth-child(2)-(5) y al texto
     sin verla en absoluto. max(0px, 31rem - 18%), expresado para
     SUMARSE (no como max() directo) al top de cada uno — así el MISMO
     desplazamiento empuja el grupo entero por igual, manteniendo su
     forma exacta.
     31rem, no los 26rem exactos del final de bailando.svg (ver el
     porqué largo del "416px/26rem" arriba) — subido una vez, medido:
     "top" en .hoja-mesa-socket marca el CENTRO del hueco (por el
     transform:translate(-50%,-50%) que lo centra, ver
     .hoja-mesa-socket más abajo), no su borde superior, así que
     apuntar solo a "justo donde acaba la ilustración" seguía dejando
     la MITAD del hueco/pieza por encima de ese punto, solapada con la
     ilustración igual — bug real, confirmado midiendo en captura tras
     el primer intento (27rem). Los 5rem de más (31 - 26) cubren esa
     mitad (hasta 5.5rem, la mitad del tamaño máximo de una pieza, 11rem
     — ver el clamp() de más arriba) con solo un pelín de margen visual
     de sobra encima. */
  .hoja-mesa-arena.is-puzzle {
    --illustration-clear: max(0px, calc(31rem - 18%));
  }

  .hoja-mesa-socket:nth-child(1) {
    top: calc(18% + var(--illustration-clear, 0px));
  }

  .hoja-mesa-socket:nth-child(2),
  .hoja-mesa-socket:nth-child(5) {
    top: calc(30% + var(--illustration-clear, 0px));
  }

  .hoja-mesa-socket:nth-child(3),
  .hoja-mesa-socket:nth-child(4) {
    top: calc(49% + var(--illustration-clear, 0px));
  }
}

.hoja-mesa-arena.has-gravity .hoja-mesa-wrap {
  /* JS pone left/top en cada fotograma a partir del cuerpo físico (ver
     hoja-a-mesa.js) — top/left:0 de partida para que, antes del primer
     fotograma, no salte desde ningún otro sitio. */
  position: absolute;
  top: 0;
  left: 0;
  /* Sin clics/arrastre hasta que la arena asoma un 35% de verdad (JS
     añade "is-interactive" en ese momento — mismo umbral que arranca
     el motor en el caso normal, ver hoja-a-mesa.js), NO en cuanto
     empiezan a caer: con el arranque anticipado de más arriba, estas
     mismas ilustraciones pueden llevar ya un buen rato cayendo,
     cruzando el hero/la cabecera, mucho antes de llegar a su propia
     sección — a petición expresa, "que sean interactivas a partir de
     la segunda sección", no antes. */
  pointer-events: none;
}

.hoja-mesa-arena.has-gravity.is-interactive .hoja-mesa-wrap {
  pointer-events: auto;
}

.hoja-mesa-wrap.is-open {
  /* Por encima de las demás mientras está abierta — tiene su propio
     botón de cerrar, no pasa nada si solapa a las de al lado. */
  z-index: 5;
}

/* Botón "reseteado": el clic que abre cae sobre todo el grupo
   título+ilustración, con foco y estado por teclado nativos de
   <button>. */
.hoja-mesa-trigger {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 1.25rem;
  padding: 0.5rem;
  transition: opacity 0.35s ease;
  /* Con el dedo, el navegador interpreta por su cuenta cualquier
     arrastre como "hacer scroll de la página" salvo que se le diga lo
     contrario ANTES de que el gesto empiece — un preventDefault() en
     "pointermove" (ver hoja-a-mesa.js) puede llegar demasiado tarde,
     ya con el scroll nativo enganchado, si el navegador ya decidió que
     el gesto "es scroll" en los primeros píxeles. touch-action:none
     saca el scroll nativo de la ecuación desde el primer instante en
     este botón (nunca en el resto de la arena, donde el scroll normal
     debe seguir funcionando): a petición expresa, tras reportarse que
     al arrastrar un SVG a su hueco "también se arrastra la pantalla y
     se hace scroll". */
  touch-action: none;
}

.hoja-mesa-wrap.is-open .hoja-mesa-trigger {
  /* Se desvanece mientras crece la tarjeta (ver .hoja-mesa-panel) —
     pointer-events:none para que no se lleve clics pensados para la
     tarjeta/el botón de cerrar, que quedan por encima en el mismo
     hueco. */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

/* Título flotante compartido por las 5 ilustraciones — no vive dentro
   de ningún botón, sino como hijo directo de la arena (ver
   front-page.php), así su posicionamiento no depende de qué
   transform/posición tenga un ancestro suyo por el medio (ya pasó una
   vez: el propio hover del botón lo desplazaba). Centrado y quieto a
   propósito (no en el "hueco más vacío" recalculado al vuelo de una
   versión anterior — se sentía caótico, saltaba de un lado a otro
   mientras las ilustraciones se movían), siempre a la misma altura —
   a petición expresa, sin fondo propio ni sombreado (ningún sombreado
   en toda la web). Las ilustraciones pueden pasar por debajo sin
   ninguna restricción (initArena en hoja-a-mesa.js ya no aparta nada
   del centro): z-index alto, por encima de las 5 siempre, así el
   título se queda legible aunque una pase justo detrás.

   white-space:nowrap + width:max-content: el título SIEMPRE en una
   sola línea, nunca se parte — font-size en vw (no un tamaño fijo) es
   lo que hace que el título más largo ("Trabajo en equipo,
   coordinación y formación continua", el que manda aquí) quepa sin
   partirse en cualquier ancho de pantalla: medido a mano contra ese
   texto exacto para que ronde el 88% del ancho de la arena en
   cualquier tamaño de viewport, con un tope de seguridad (max-width)
   por si acaso. */
.hoja-mesa-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: max-content;
  max-width: 92vw;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hoja-mesa-headline.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hoja-mesa-headline__title {
  margin: 0;
  font-family: var(--font-texto);
  font-weight: 300;
  font-size: clamp(0.7rem, 3.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--color-berenjena);
  text-align: center;
  white-space: nowrap;
}

/* Por debajo de 56rem — a petición expresa, tras reportarse que en
   ventanas de ese ancho el título se veía "un poco pequeño": el
   nowrap + vw de la regla de arriba está calibrado para que el título
   MÁS LARGO ("Trabajo en equipo, coordinación y formación continua")
   quepa siempre en una sola línea sin partirse — eso obliga a un
   font-size relativamente conservador en todo el rango, incluso para
   los títulos más cortos (que podrían leerse más grandes sin problema).
   Aquí, en vez de seguir encogiendo esa misma línea única, se permite
   partir en 2 líneas (white-space:normal + un ancho de caja más
   estrecho que max-content) y se sube el font-size — más grande que
   antes pero sin llegar a "enorme": el título más largo pasará a 2
   líneas cómodamente en vez de una sola diminuta, y los más cortos
   pueden quedarse en 1 o 2 según toque, ambos casos ya contemplados
   por text-align:center + width centrado. */
@media (max-width: 56rem) {
  .hoja-mesa-headline {
    width: min(85vw, 26rem);
    /* top:50% → 46% — a petición expresa, "un poquitín más arriba":
       con 2 líneas (ver .hoja-mesa-headline__title aquí abajo) el
       bloque es más alto que antes, y al seguir centrado en
       translate(-50%,-50%) sobre el mismo punto medio de la arena
       quedaba más abajo de lo que se pedía ahora. */
    top: 46%;
  }

  .hoja-mesa-headline__title {
    white-space: normal;
    font-size: clamp(1.15rem, 5vw, 1.75rem);
  }
}

/* "Leer más +" — a petición expresa, ya NO fijo junto al título: sigue
   al cursor mientras se pasa por encima de una ilustración (JS solo le
   escribe left/top en cada "pointermove" dentro de la arena, ver
   initHeadline() en hoja-a-mesa.js), como si "acompañara" al puntero.
   Texto normal, sin mayúsculas ni tracking de aviso — a petición
   expresa, tenía que leerse como una indicación discreta, no como una
   etiqueta de sistema. Desplazado con transform, no con el propio
   left/top (que marcan el punto exacto del cursor): un poco arriba y a
   la derecha, para no quedar tapado por el propio puntero (ni por el
   cursor personalizado del sitio, ver .cursor-dot/.cursor-ring en
   style.css). Berenjena, no pistacho/melocotón/lavanda — mismo motivo
   que el título: sobre el fondo niebla (claro) de esta sección, esos
   tres fallan el contraste mínimo como texto (ver brandbook-vinculare).
   Sin fondo ni sombreado, igual que el título — ningún sombreado en
   toda la web. */
.hoja-mesa-cursor-hint {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  margin: 0;
  font-family: var(--font-texto);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-berenjena);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(0.9rem, -1.6rem);
  transition: opacity 0.2s ease;
}

.hoja-mesa-cursor-hint.is-visible {
  opacity: 1;
}

.hoja-mesa-art {
  display: block;
  width: 100%;
}

.hoja-mesa-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* La tarjeta en sí: <dialog> nativo (ver template-parts/hoja-a-mesa.php).
   Centrado con inset:0 + margin:auto. Se abre exactamente igual que
   .team-bio-dialog en Conócenos (ver style.css/animations.js), a
   petición expresa: sin transform (ni "scale" ni "grow desde un punto")
   en NINGÚN elemento de dentro. Se probó dos veces en Conócenos —
   directamente sobre el <dialog> y luego sobre .team-bio-dialog__morph—
   y las dos veces algo quedaba mal compuesto/recortado en Chrome tras
   la animación (un fallo que solo se ve en uso real, nunca en una
   captura de pantalla); una tercera vez aquí mismo, con "scale" sobre
   .hoja-mesa-morph, tampoco convenció (rebote feo, a petición expresa
   nada de eso). El propio <dialog> ni siquiera anima opacidad: aparece
   de golpe al abrir con showModal() (igual que .team-bio-dialog, que
   tampoco tiene transición de opacidad propia) — solo el fondo oscuro
   (::backdrop, más abajo) y el contenido de dentro (.hoja-mesa-morph)
   hacen un fundido de opacidad puro, sin más, ver hoja-a-mesa.js. Este
   <dialog> se queda transparente y sin aspecto visual propio a
   propósito (fondo/padding/borde redondeado viven en .hoja-mesa-morph,
   el div de dentro, ver más abajo): solo pone posición/tamaño/scroll de
   seguridad. */
.hoja-mesa-panel {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  z-index: 500;
  /* Dos tercios del ancho de la versión "el doble" (38-44rem), a
     petición expresa — quedaban ya demasiado anchas para lo poco que
     ocupa el texto real (2 párrafos breves): width:fit-content (con
     min/max como tope de seguridad) para que la tarjeta se ciña al
     tamaño real del texto que contiene en vez de forzar siempre el
     mismo ancho, tenga el párrafo el largo que tenga. */
  width: fit-content;
  min-width: min(80vw, 25.5rem);
  max-width: min(88vw, 29.5rem);
  /* Alto/scroll de seguridad: ya NO viven aquí, sino en
     .hoja-mesa-morph y .hoja-mesa-scroll (mismo tope en las dos, ver
     ahí el porqué) — este <dialog> simplemente se ciñe a lo que mida
     esa tarjeta interior, sea cual sea. Antes el tope y el scroll SÍ
     vivían en este <dialog> (transparente, sin esquinas): con
     .hoja-mesa-morph creciendo sin límite propio, el recorte al llegar
     al tope pasaba por en medio de la tarjeta en vez de por su borde
     real, así que la esquina inferior redondeada quedaba siempre fuera
     de la parte visible — nunca se veía, ni con "dvh" (bug real,
     reportado con capturas: "las esquinas de abajo de la tablita
     deberían estar siempre redondeadas"). */
  height: fit-content;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  /* overflow:visible EXPLÍCITO — el navegador da a todo <dialog> un
     overflow:auto por defecto (de su propia hoja de estilos, no algo
     puesto aquí). Con .hoja-mesa-scroll asomando 0.75rem a la derecha
     de .hoja-mesa-morph a propósito (ver el porqué largo ahí y en
     .hoja-mesa-scroll, más abajo) ese "auto" por defecto SÍ detectaba
     ese sobrante como contenido "que se sale" del propio <dialog> —
     mismo bug, ya solucionado así una vez, que .team-bio-dialog/
     .service-bio-dialog documentan en style.css: sin este
     overflow:visible aparecía una barra de scroll HORIZONTAL de más,
     pegada al borde inferior de la tarjeta (bug real, reportado con
     capturas: "otra vez pusiste la barra de debajo, la que mueve
     horizontalmente"). overflow:visible anula ese valor por defecto. */
  overflow: visible;
}

.hoja-mesa-morph {
  /* position:relative: .hoja-mesa-close (position:absolute) se coloca
     contra ESTE borde, no contra el del <dialog> — igual que
     .team-bio-dialog__close en Conócenos contra .team-bio-dialog__morph
     (ver style.css). */
  position: relative;
  height: fit-content;
  /* Mismo tope, EN ESTA CAJA (la que de verdad pinta el fondo y el
     borde redondeado) — antes vivía solo en el <dialog>, ver el porqué
     largo ahí arriba. Repetido con el MISMO valor exacto en
     .hoja-mesa-scroll (la caja de scroll de dentro, ver más abajo): así
     las dos capan a la vez en el mismo punto, y el borde de esta caja
     (con sus esquinas redondeadas) siempre coincide con el borde de esa
     caja de scroll — nunca queda una más alta que la otra por
     casualidad. Mismo truco "dvh" con "vh" de respaldo (ver el porqué
     largo del <dialog> de arriba, mismo motivo aquí). */
  max-height: 90vh;
  max-height: 90dvh;
  border-radius: 1.75rem;
  /* Mismo fondo/color de texto que .team-bio-dialog__morph en
     Conócenos (ver style.css) — a petición expresa, "las mismas
     tarjetitas" en las dos páginas. */
  background-color: var(--color-melocoton-tint);
  color: var(--color-berenjena);
  /* overflow:visible (no hidden) — a propósito, mismo patrón que
     .team-bio-dialog__morph/.service-bio-dialog__morph (ver ahí el
     porqué largo): .hoja-mesa-scroll (justo abajo) se sale 0.75rem por
     la derecha de ESTA caja para que su barra de scroll quede flotando
     fuera del borde redondeado — igual que en Conócenos/Servicios, a
     petición expresa ("queda raro que unas [tarjetas] la tengan y
     otras no"). Intentado una vez antes con "width: calc(100% +
     0.75rem)" en vez de margin (ver el porqué exacto en
     .hoja-mesa-scroll, abajo): reventaba el ancho de TODA la tarjeta
     porque .hoja-mesa-panel mide "fit-content" — a diferencia de
     .team-bio-dialog/.service-bio-dialog, que miden un ancho fijo
     (min(calc(100vw - 12vmin), 54rem)) y por eso a ELLOS el mismo truco
     con "width" nunca les rompió nada. */
  overflow: visible;
}

/* Caja de scroll real (título + párrafos) — antes el scroll vivía en
   el propio <dialog> y el padding en .hoja-mesa-morph; separados ahora
   en dos cajas distintas: la tarjeta visible (.hoja-mesa-morph, arriba)
   se queda con un tope de alto fijo y nunca lo supera, así sus esquinas
   redondeadas están SIEMPRE donde deben — es esta caja de dentro la
   que hace scroll cuando el contenido no cabe, sin arrastrar consigo
   el borde redondeado de la tarjeta. El botón de cerrar
   (position:absolute) vive fuera de esta caja, contra .hoja-mesa-morph
   directamente — no se mueve con el scroll. */
.hoja-mesa-scroll {
  /* Mismo tope que .hoja-mesa-morph (ver el porqué ahí arriba) — nunca
     un porcentaje/100% de esta caja: con .hoja-mesa-morph midiendo
     "fit-content", un 100% aquí dependería de un alto que todavía no
     existe (dependencia circular). Repitiendo el mismo valor absoluto
     en las dos, cada caja lo resuelve por su cuenta sin depender de la
     otra, y las dos coinciden igualmente. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  /* overflow-x:hidden EXPLÍCITO — regla real de la especificación CSS,
     no estética: "si overflow-y NO es 'visible' y overflow-x SÍ lo es,
     el navegador convierte ese 'visible' en 'auto' él solo". Sin esto,
     el margin-right negativo de abajo (que ensancha esta caja un pelín
     más que su hueco disponible) dispara ese "auto" silencioso y
     aparece una barra de scroll HORIZONTAL de más — bug real, ya visto
     una vez. overflow-x:hidden lo evita sin tocar el ancho real de la
     caja (overflow-x solo decide si ESTA caja deja ver lo que se sale
     de ELLA, no cambia lo que mide). */
  overflow-x: hidden;
  /* margin-right NEGATIVO, no "width: calc(100% + 0.75rem)" — ver el
     porqué largo en .hoja-mesa-morph, arriba: con .hoja-mesa-panel
     midiendo "fit-content" (a diferencia del ancho fijo de
     Conócenos/Servicios), un ANCHO en % de esta caja es circular y
     acababa desbordando la PÁGINA entera. Un margin-right negativo no
     tiene ese problema: no es un porcentaje que haya que resolver, es
     un valor fijo que el navegador simplemente resta del hueco que ya
     ocupaba esta caja (ancho normal, 100%, sin depender de nada más) —
     mismo resultado visual que el "width" de Conócenos/Servicios (la
     caja asoma 0.75rem más a la derecha que .hoja-mesa-morph, que con
     overflow:visible la deja asomar sin recortarla) sin la
     dependencia circular que rompía el ancho de la tarjeta. */
  margin-right: -0.75rem;
  padding: 3rem calc(3rem + 0.75rem) 3rem 3rem;
}

/* Fondo oscurecido del <dialog> nativo, mismo patrón que
   .team-bio-dialog::backdrop en Conócenos (ver style.css). */
.hoja-mesa-panel::backdrop {
  background-color: var(--color-berenjena);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(.16, 1, .3, 1);
}

.hoja-mesa-wrap.is-open .hoja-mesa-panel::backdrop {
  opacity: 0.55;
}

/* Mismo botón de cerrar que .team-bio-dialog__close en Conócenos (ver
   style.css), a petición expresa — círculo niebla con icono berenjena,
   pistacho + giro 90° al pasar el ratón/dar foco. */
.hoja-mesa-close {
  all: unset;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-niebla);
  color: var(--color-berenjena);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hoja-mesa-close:hover,
.hoja-mesa-close:focus-visible {
  background-color: var(--color-pistacho);
  transform: rotate(90deg);
}

/* Móvil Y tablet (64rem — mismo tope que usa el resto de la web para
   "por debajo de escritorio", ver .nav-toggle en style.css), no solo
   móvil estrecho (40rem antes): a petición expresa, "en móviles y
   tablets". Tres cambios respecto al escritorio:
   1) Sin hover real (dedo, no ratón) — el círculo pistacho (antes solo
      visible al pasar el ratón/dar foco) pasa a ser el estado de
      siempre, para que se note de entrada que es un botón. El giro 90°
      se deja fuera: es un micro-feedback de hover que no tiene sentido
      como estado fijo.
   2) El círculo VISIBLE se hace aún más pequeño — a petición expresa,
      "para que no tape el texto cuando se va leyendo y scrolleando"
      (el botón vive fuera de .hoja-mesa-scroll, así que no se mueve
      con el scroll — el texto sí, y pasa por debajo). Ya no es
      background-color en el propio botón: ahora vive en ::before (ver
      abajo), un círculo más pequeño y centrado DENTRO del botón.
   3) El ÁREA PULSABLE (el <button> en sí, con su padding invisible) se
      queda más grande que ese círculo — a petición expresa, "que el
      área de pulsado sea un poquito más grande que el botón" — para
      que siga siendo fácil de acertar con el dedo aunque el círculo
      que se VE sea pequeño. */
@media (max-width: 64rem) {
  .hoja-mesa-close {
    /* Área pulsable — sin cambios de tamaño respecto a la versión
       anterior (2rem): lo que se reduce es solo el círculo VISIBLE
       (::before, abajo), no el hueco donde responde el dedo.
       Sin "position" aquí: el botón YA es position:absolute (regla
       base, arriba) para colocarse contra .hoja-mesa-morph — sirve
       igual de bien como referencia de posición para su propio
       ::before, no hace falta (ni conviene) tocarlo aquí, o se
       perdería esa posición. */
    width: 2rem;
    height: 2rem;
    background-color: transparent;
  }

  /* Anula el ":hover"/":focus-visible" de escritorio (arriba) — SIN
     esto, el botón vuelve a rellenarse pistacho a los 2rem/32px
     ENTEROS en foco/hover (esa regla puntúa más por especificidad, un
     ":focus-visible" siempre gana a una clase sola, no importa el
     orden), deshaciendo el círculo pequeño de ::before de golpe. Bug
     real, reportado con capturas: "al principio, al salir la tarjeta,
     el botón sale grande y luego de repente se vuelve pequeño" — el
     propio showModal() pone el foco en el primer elemento con el que
     se puede interactuar dentro del <dialog>, que da la casualidad de
     que es justo este botón (el primer hijo real del formulario), así
     que CADA tarjeta abre con él momentáneamente en :focus-visible.
     Sin transform tampoco: el giro 90° de escritorio no pinta nada
     como estado de foco fijo en táctil (mismo criterio que el resto de
     esta media query). */
  .hoja-mesa-close:hover,
  .hoja-mesa-close:focus-visible {
    background-color: transparent;
    transform: none;
  }

  .hoja-mesa-close::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-pistacho);
  }

  .hoja-mesa-close svg {
    /* Reescalado al mismo ritmo que el círculo (18×18 originales →
       1.5rem/24px de círculo, antes 2rem/32px) para que el icono
       siga viéndose proporcionado dentro del círculo más pequeño.
       position:relative + z-index: por encima del ::before (que es
       position:absolute, pintado antes en el orden normal, pero mejor
       dejarlo explícito que depender del orden de pintado por
       defecto). */
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
  }
}

.hoja-mesa-title-inside {
  /* --font-titulos (EB Garamond), no --font-texto (Work Sans) — a
     petición expresa, "la otra fuente que usamos, en medium". Mismo
     peso (500) que ya usan h1-h6 y el resto de títulos en toda la web:
     Google Fonts carga EB Garamond como variable con el rango 400..700
     (ver functions.php), así que 500 es un peso real de la propia
     fuente, no una negrita sintética. */
  font-family: var(--font-titulos);
  font-weight: 500;
  /* Subido a petición expresa, "un poco más grandes" (antes
     clamp(1.2rem, 2.4vw, 1.5rem)). */
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.3;
  margin: 0 2.5rem 1rem 0;
  color: var(--color-berenjena);
  /* outline:none — este título recibe foco por script al abrir la
     tarjeta (tabindex="-1" en el HTML + .focus() en hoja-a-mesa.js,
     ver el porqué largo ahí: mover el foco aquí en vez de dejarlo caer
     en el botón de cerrar por defecto). Sin este outline:none, el
     navegador pinta SU PROPIO anillo de foco nativo por defecto (no el
     berenjena de la web, que solo cubre a/button/input/etc. — ver
     button:focus-visible en style.css — un h3 no es de eso) alrededor
     de este texto, cambiando un anillo raro por otro en vez de
     quitarlo. Con tabindex="-1" este título NUNCA se alcanza con Tab
     (solo por script), así que no hace falta que sea visualmente
     "enfocable" para un usuario de teclado — la propia tarjeta
     apareciendo entera ya es la señal visual de que el foco se movió
     ahí dentro. */
  outline: none;
}

.mesa-texto {
  color: var(--color-berenjena);
  text-align: left;
}

.mesa-texto p {
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.6;
}

.mesa-texto p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hoja-mesa-trigger,
  .hoja-mesa-panel::backdrop {
    transition: none;
  }
}