/* ROMÉ · ficha del reloj (<dialog>). Al abrir, una cortina color papel sube y la ficha aparece encima (12);
   al cerrar, todo baja más rápido de lo que subió. En el computador la foto ocupa la mitad y se acerca lento al
   punto que mira el mouse (10); en el celular es una hoja que se lee de arriba abajo. */
.ficha { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--navy); overflow: hidden; }
.ficha::backdrop { background: transparent; }
.ficha__telon { position: absolute; inset: 0; background: var(--papel); transform: translate3d(0, 100%, 0); }
.ficha__hoja { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; opacity: 0; transform: translate3d(0, 18px, 0); }
.ficha[data-estado="abierta"] .ficha__telon { transform: none; transition: transform var(--t-ui) var(--e-io); }
/* la hoja aparece recién cuando la cortina terminó de tapar la página: sin doble exposición */
.ficha[data-estado="abierta"] .ficha__hoja { opacity: 1; transform: none; transition: opacity var(--t-ui) var(--e-out) var(--t-ui), transform var(--t-reveal) var(--e-out) var(--t-ui); }
.ficha[data-estado="cerrando"] .ficha__telon { transform: translate3d(0, 100%, 0); transition: transform var(--t-salida) var(--e-io) 60ms; }
.ficha[data-estado="cerrando"] .ficha__hoja { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--t-press) var(--e-out), transform var(--t-micro) var(--e-out); }

.ficha__cerrar { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(14px, env(safe-area-inset-right, 0px)); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); background: var(--papel); cursor: pointer; color: var(--navy);
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: scale var(--t-press) var(--e-out), border-color var(--t-micro) var(--e-soft); }
.ficha__cerrar:active { scale: .97; }
/* abierta con el dedo o el mouse, «Cerrar» recibe el foco (para el teclado y los lectores) sin el anillo: Safari lo
   marcaba como foco de teclado. Con la primera tecla, el anillo vuelve (ficha.js) */
.ficha[data-con-puntero] .ficha__cerrar:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .ficha__cerrar:hover { border-color: var(--navy); } }

/* el fondo es el crema propio de las fotos: en el computador la foto (4:5) no llena el cuadro y antes quedaban franjas */
.ficha__foto { position: relative; background: var(--fondo-foto); overflow: hidden; height: min(58svh, 128vw); }
.ficha__foto picture, .ficha__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* la foto nunca se muestra más grande que su archivo (--foto-max, de ficha.js), centrada en el crema */
.ficha__foto img { object-fit: contain; max-width: var(--foto-max, none); max-height: calc(var(--foto-max, 100vh) * 1.25); margin: auto;
  transform-origin: var(--ox, 50%) var(--oy, 46%); transition: transform var(--t-lento) var(--e-soft); }
/* el acercamiento parte con el primer movimiento del mouse sobre la foto (no al abrir) y solo hasta donde el archivo
   tiene detalle (--zoom, de ficha.js: tope 1,75; sin acercamiento si el archivo no da más) */
@media (hover: hover) and (pointer: fine) {
  .ficha__foto.acerca img { transform: scale(var(--zoom, 1.75)); }
  .ficha__foto[data-zoom] { cursor: zoom-in; }
}

.ficha__cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--gutr) calc(110px + env(safe-area-inset-bottom, 0px)) var(--gut); }
.ficha__marca { margin-top: 10px; color: var(--piedra-oscura); }
.ficha__nombre { margin-top: 0; font: 400 clamp(32px, 3.2vw, 46px)/1.06 var(--serif); letter-spacing: -.012em; font-variation-settings: "opsz" 60; }
.ficha__precio { margin-top: 14px; font: 600 22px/1 var(--sans); }
.ficha__precio small { margin-left: 12px; font: 500 13px/1 var(--sans); color: var(--tenue); letter-spacing: .02em; }
.ficha__frase { margin-top: 16px; font: italic 400 22px/1.3 var(--serif); color: var(--navy); max-width: 30ch; }
.ficha__linea { margin-top: 16px; font: italic 400 18px/1.45 var(--serif); color: var(--tinta); max-width: 48ch; }
.ficha__frase + .ficha__linea { margin-top: 10px; font-size: 16px; }
.ficha__acciones { margin-top: 24px; display: grid; gap: 10px; }
.ficha__acciones .boton { width: 100%; }
/* al recibir el foco, el botón se acomoda con el alto de la cápsula de aire abajo (en el celular la cápsula ocupa ~73 px) */
.ficha__wa { scroll-margin-bottom: 96px; }
.ficha__datos { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding-top: 22px; border-top: 1px solid var(--linea); }
.ficha__datos dt { font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--piedra-oscura); }
.ficha__datos dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; }
.ficha__nota { color: var(--tenue); }
.ficha__bloque { margin-top: 28px; }
.ficha__subt { font: 400 20px/1.25 var(--serif); }
.ficha__bloque p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--tinta); max-width: 52ch; }
.ficha__incluye { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15.5px; }
.ficha__incluye li { display: inline-flex; align-items: flex-start; gap: 8px; }
.ficha__incluye .icono { flex: none; width: 18px; height: 18px; margin-top: .2em; color: var(--piedra-oscura); }   /* en la primera línea (H1-12) */
/* «De la misma casa» (vuelta 4, anclaje): tres en fila, el que se mira al medio y marcado; cada uno, en el arco de la marca */
.ficha__trio { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trio__in { display: grid; gap: 6px; align-content: start; color: var(--navy); text-decoration: none; }
a.trio__in { transition: scale var(--t-press) var(--e-out); }
a.trio__in:active { scale: .97; }
.trio__foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--fondo-foto); }
.trio__foto picture, .trio__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.trio__item--este .trio__foto { box-shadow: 0 0 0 1px rgb(20 39 62 / .4); }
.trio__nombre { margin-top: 4px; font: 400 15px/1.25 var(--serif); }
.trio__precio { font: 600 14px/1 var(--sans); }
.trio__este { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--piedra-oscura); }
@media (hover: hover) and (pointer: fine) { a.trio__in:hover .trio__nombre { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.ficha__par { margin-top: 18px; }
.ficha__par a, .ficha__retracto a { color: var(--navy); }
.ficha__copiar { margin-top: 20px; text-transform: none; letter-spacing: .02em; font-weight: 600; font-size: 14px; }
.ficha__aviso { min-height: 1.4em; margin-top: 4px; font-size: 14px; color: var(--tenue); }

/* cápsula: el pedido siempre a un toque cuando el botón principal sale de la vista */
.ficha__capsula { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut); background: var(--papel); border-top: 1px solid var(--linea);
  transform: translate3d(0, 110%, 0); transition: transform var(--t-ui) var(--e-out); }
.ficha__capsula[data-visible] { transform: none; }
.ficha__capsula[data-seco] { transition: none; }
/* de una ficha a otra (H1-04, ficha.js): la foto y el texto se funden; la cortina, «Cerrar» y el crema de la foto quedan */
.ficha__foto picture, .ficha__cuerpo { transition: opacity var(--t-micro) var(--e-out); }
.ficha__hoja[data-cambio] .ficha__foto picture, .ficha__hoja[data-cambio] .ficha__cuerpo { opacity: 0; transition-duration: var(--t-press); }
.ficha__capsula div { min-width: 0; display: grid; gap: 4px; }
.ficha__capsula b { font: 400 17px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha__capsula span { font: 600 14px/1 var(--sans); }
.ficha__capsula .boton { flex: none; padding: 0 20px; }

/* H1-13 (pasada 5): bajo 1000 px se desplaza la hoja entera, la foto sube y se va con el texto (antes quedaba fija y en el
   iPhone 14 se leía en una franja de ~206 px). «Cerrar» queda pegado arriba y la cápsula abajo, dentro de la hoja; el
   cuerpo ya no necesita el aire de la cápsula (ella ocupa su lugar al final) */
@media (max-width: 999.98px) {
  .ficha__hoja { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .ficha__cuerpo { overflow: visible; padding-bottom: 36px; }
  .ficha__cerrar { position: sticky; display: flex; width: max-content; margin: 0 max(14px, env(safe-area-inset-right, 0px)) -44px auto; }
  .ficha__capsula { position: sticky; }
}
@media (min-width: 1000px) {
  .ficha__hoja { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: minmax(0, 1fr); }
  .ficha__foto { height: auto; }
  .ficha__cuerpo { padding: clamp(80px, 12svh, 140px) clamp(40px, 5vw, 88px) 112px; }
  .ficha__acciones { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* el pedido siempre a mano también aquí (vuelta 6): la cápsula, solo bajo la columna del texto (55 % = 11fr de 20) y
     sin tapar su barra de desplazamiento (--barra, de ficha.js), cuando «Pedir por WhatsApp» sale de la vista al bajar a
     leer. Antes estaba oculta en el computador y, con «De la misma casa», el botón se iba en 11 de 12 fichas */
  .ficha__capsula { left: 55%; right: var(--barra, 0px); padding: 14px clamp(40px, 5vw, 88px); }
}
/* solo el documento deja de desplazarse: con el body también, lo pegado (filtros, índice, arco, despiece) se despegaba;
   el espacio de la barra queda reservado para que la página no se corra 8 px con las barras clásicas de Windows */
html.ficha-abierta { overflow: hidden; background: var(--papel); }   /* el espacio reservado queda del color de la ficha */
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  .ficha__telon { transform: none; opacity: 0; }
  .ficha[data-estado="abierta"] .ficha__telon { opacity: 1; transition: opacity var(--t-press) linear; }
  .ficha__hoja, .ficha[data-estado="abierta"] .ficha__hoja { transform: none; }
  .ficha__foto.acerca img { transform: none; }
  .ficha__cerrar:active { scale: none; }
}