/* =========================================================
   FICHA DE EXPERIENCIA
   Escritorio: panel lateral derecho · Móvil (≤767px): bottom sheet
   ========================================================= */

.ficha-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(37, 35, 30, .16);            /* muy suave: el mapa sigue presente */
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.ficha-overlay.abierta { opacity: 1; }

.ficha {
  position: fixed; z-index: 100;
  top: 0; right: 0;
  width: clamp(400px, 36vw, 520px);
  height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white-soft);
  border-left: 1px solid var(--color-line);
  box-shadow: -18px 0 36px -30px rgba(51, 41, 31, .35);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  outline: none;
}
.ficha.abierta { transform: none; }

/* Cerrar: círculo de tinta irregular, 44×44 */
.ficha-cerrar {
  position: sticky; top: var(--space-sm); z-index: 2;
  float: right; margin: var(--space-sm) var(--space-sm) 0 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--white-soft);
  border: 2px solid var(--color-ink);
  border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.ficha-cerrar svg { width: 18px; height: 18px; fill: none; stroke: var(--color-ink); stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .ficha-cerrar:hover { transform: rotate(-8deg); } }

.ficha-cuerpo {
  clear: both;
  padding: 0 clamp(1.25rem, 3vw, 2.25rem) calc(var(--space-lg) + env(safe-area-inset-bottom));
}

/* 1. Ilustración */
.ficha-ilus { position: relative; margin: 0 auto var(--space-md); width: min(78%, 340px); }
.ficha-ilus img {
  width: 100%; height: auto;
  filter: var(--sombra-objeto);
}

/* Firma de Pergamino: una línea discreta entre el nombre y la categoría */
.ficha-cuerpo > .firma { margin-top: .6rem; animation: firma-aparece 400ms var(--ease) 1 both; }

/* 3–4. Nombre y categoría */
.ficha-nombre {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.02; text-transform: uppercase;
  outline: none;
}
/* La categoría pasa a letra UI: la escritura a mano queda para la voz de Pergamino */
.ficha-cat { margin-top: .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-soft); }

/* 5. POR QUÉ NOS GUSTA — anotación editorial, protagonista */
.ficha-why {
  position: relative;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-soft);
}
.ficha-why-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-ink);
}
.ficha-why-text {
  margin-top: .35rem;
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.18;
  color: var(--color-ink);
  max-width: 24ch;
  text-wrap: balance;
}
.ficha-why-trazo {
  display: block; width: min(70%, 220px); height: 10px; margin-top: .3rem;
  fill: none; stroke: var(--color-yellow); stroke-width: 4; stroke-linecap: round;
}

/* 6. Descripción */
.ficha-desc { margin-top: var(--space-md); font-size: 1rem; line-height: 1.6; max-width: 44ch; color: var(--color-ink-soft); }

/* 7. Toque local — secundario */
.ficha-local {
  margin-top: var(--space-md);
  padding-left: .85rem;
  border-left: 2px solid var(--color-yellow);
}
.ficha-local-label { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-soft); }
.ficha-local-text { margin-top: .2rem; font-size: .96rem; line-height: 1.5; }

/* 8. Información práctica: no compite con la recomendación */
.ficha-info {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.25rem;
  margin: var(--space-lg) 0 0; padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-soft);
}
.ficha-info dt { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-soft); padding-top: .2rem; }
.ficha-info dd { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--color-ink-soft); }

/* 9. Beneficio */
.ficha-beneficio {
  margin-top: var(--space-md); padding: .9rem 1.1rem;
  background: rgba(233, 201, 90, .32);
  border: 1px solid var(--color-line); border-radius: var(--radius-hand-sm);
  transform: rotate(-.6deg);
}
.ficha-beneficio-titulo { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ficha-beneficio-texto { margin-top: .25rem; font-family: var(--font-hand); font-weight: 700; font-size: 1.4rem; line-height: 1.15; }

/* 10. Acciones */
.ficha-acciones { display: grid; gap: .6rem; margin-top: var(--space-lg); }
.ficha-accion {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .7rem 1.2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--color-ink); background: var(--color-cream);
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-hand);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
/* Un solo botón amarillo por ficha (la acción principal); el resto, tinta sobre papel */
.ficha-accion--primaria { background: var(--color-yellow); }
@media (hover: hover) {
  .ficha-accion:hover { transform: translateY(-1px); }
  .ficha-accion:not(.ficha-accion--primaria):hover { background: rgba(233, 201, 90, .25); }
}

/* ---------- Móvil: bottom sheet ---------- */
@media (max-width: 767px) {
  .ficha {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; max-height: 90svh;
    border-left: 0; border-top: 1px solid var(--color-line);
    border-radius: 18px 22px 0 0;
    box-shadow: 0 -16px 32px -26px rgba(51, 41, 31, .4);
    transform: translateY(100%);
  }
  @supports not (height: 1svh) { .ficha { max-height: 90vh; } }
  .ficha::before {                                /* handle */
    content: ""; display: block;
    width: 46px; height: 4px; margin: 10px auto 0;
    background: rgba(37, 35, 30, .3); border-radius: 4px;
  }
  .ficha-cerrar { margin-top: .25rem; }
  /* ilustración contenida: "Por qué nos gusta" debe verse sin mucho scroll */
  .ficha-ilus { width: min(60%, 240px); margin: .25rem auto var(--space-sm); }
  .ficha-ilus img { max-height: 170px; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
  .ficha-nombre { font-size: clamp(1.6rem, 7vw, 2rem); }
  .ficha-why { margin-top: var(--space-sm); padding-top: var(--space-sm); }
  .ficha-why-text { font-size: clamp(1.45rem, 6.4vw, 1.75rem); }
}