/* =========================================================================
   Motor Carta · Ficha
   Celular: hoja inferior. Escritorio: ventana centrada a dos columnas.
   ========================================================================= */

.ficha {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-texto);
  overflow: hidden;
}
.ficha::backdrop {
  background: rgb(var(--c-texto-rgb) / 0.42);
  animation: velo 240ms var(--ease) both;
}
.ficha[open] { display: flex; align-items: flex-end; justify-content: center; }

.ficha__hoja {
  position: relative;
  width: 100%;
  max-height: calc(100% - var(--seguro-arriba) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 26px 26px 0 0;
  background: var(--c-fondo);
  box-shadow: 0 -20px 40px -20px rgb(var(--c-texto-rgb) / 0.35);
  animation: subir 320ms var(--ease) both;
  transition: transform 260ms var(--ease);
}
.ficha__hoja.is-arrastrando { transition: none; }
.ficha__hoja:focus { outline: none; }
.ficha.is-cerrando .ficha__hoja { animation: bajar 200ms ease-in both; }
.ficha.is-cerrando::backdrop { animation: velo 200ms ease-in reverse both; }

@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bajar { to { transform: translateY(100%); } }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }

.ficha__tirador {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  height: 28px;
  touch-action: none;
}
.ficha__tirador::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: rgb(var(--c-superficie-rgb) / 0.85);
  box-shadow: 0 1px 4px rgb(var(--c-texto-rgb) / 0.3);
}

.ficha__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--c-superficie-rgb) / 0.92);
  box-shadow: 0 2px 10px -4px rgb(var(--c-texto-rgb) / 0.45);
}
.ficha__cerrar .ico { width: 18px; height: 18px; }

.ficha__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 58svh;
  touch-action: pan-x;
}

.ficha__info {
  display: grid;
  gap: 8px;
  padding: 20px var(--gutter) calc(24px + var(--seguro-abajo));
}
.ficha__nombre {
  font-family: var(--f-titulos);
  font-size: 2.1rem;
  font-weight: 450;
  font-variation-settings: "opsz" 144;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.ficha__desc { font-size: 1.02rem; color: var(--c-texto-2); }
.ficha__incluye { font-weight: 600; }
.ficha__horario { font-size: 0.86rem; color: var(--c-texto-2); }
.ficha__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.ficha__precio {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
  .ficha[open] { align-items: center; padding: 32px; }
  .ficha__hoja {
    display: block;
    max-width: 880px;
    max-height: min(620px, calc(100% - 64px));
    overflow: hidden;
    border-radius: 26px;
    animation: aparecer 260ms var(--ease) both;
  }
  .ficha.is-cerrando .ficha__hoja { animation: aparecer 180ms ease-in reverse both; }
  .ficha__tirador { display: none; }
  .ficha__contenido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
  }
  .ficha__media { max-height: min(620px, calc(100vh - 64px)); aspect-ratio: 4 / 5; }
  .ficha__info { align-content: center; padding: 48px 44px; }
  .ficha__nombre { font-size: 2.6rem; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }