/* Módulo «carta»: Ricitos Café en un panel claro que flota sobre el negro (no todo es negro).
   Texto a la izquierda (horario y la carta completa), dos fotos reales con radio y dos platos recortados
   que asoman. Sin precios. Solo tokens de tokens.css. */

.sec--papel { padding: clamp(1.5rem, 3vw, 3rem) clamp(8px, 1.4vw, 20px); }
.sec--papel.sec--tight-top::before, .sec--papel::before { display: none; }

.cafe {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  border-radius: var(--r-panel);
  background: var(--papel); color: var(--papel-tinta);
  color-scheme: light;
}
/* Un poco de luz cálida en una esquina: el papel no es plano. */
.cafe::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(232, 214, 186, 0.38), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 0, 0, 0.035), transparent 70%);
}
.cafe :focus-visible { outline-color: var(--papel-tinta); }

.cafe__in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(3rem, 7vw, 6.5rem) var(--gutter);
}
@media (min-width: 900px) {
  .cafe__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: clamp(3rem, 6vw, 6.5rem); }
}

/* ---------- texto ---------- */
.cafe__txt { display: grid; justify-items: start; align-content: center; }
.cafe__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-head);
}
.cafe__lead { margin-top: var(--s-5); max-width: 26rem; font-size: var(--t-lg); line-height: 1.4; color: var(--papel-gris); text-wrap: balance; }

/* Horario en dos cápsulas */
.cafe__horario { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-7); }
.cafe__horario div {
  display: grid; gap: 2px; padding: 12px 20px;
  border-radius: 18px; background: #F2F2F0; border: 1px solid var(--papel-linea);
}
.cafe__horario dt { font-size: var(--t-xs); color: var(--papel-gris); }
.cafe__horario dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cafe__nota { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--papel-gris); }

/* «Ver la carta completa»: píldora negra con el icono en un círculo blanco que gira un poco al pasar. */
.cafe__btn {
  display: inline-flex; align-items: center; gap: 14px; margin-top: var(--s-7);
  min-height: 60px; padding: 7px 28px 7px 7px; border-radius: var(--r-pill);
  background: var(--papel-tinta); color: var(--papel);
  font-size: var(--t-md); font-weight: 500; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55);
  transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med) var(--ease-out), background-color var(--d-fast);
}
.cafe__btn-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--papel); color: var(--papel-tinta);
  transition: transform var(--d-med) var(--ease-out);
}
.cafe__btn-ico .ico { width: 22px; height: 22px; stroke-width: 1.5; }
@media (hover: hover) {
  .cafe__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); }
  .cafe__btn:hover .cafe__btn-ico { transform: rotate(-12deg) scale(1.06); }
}
.cafe__btn:active { transform: translateY(1px); }
.cafe__btn:focus-visible { outline: 2px solid var(--papel-tinta); outline-offset: 4px; }

/* ---------- fotos ---------- */
.cafe__fotos { position: relative; min-height: 0; padding-bottom: 14%; }
.cafe__foto { margin: 0; overflow: hidden; border-radius: var(--r-foto); background: #EDEDEB; }
.cafe__foto img { width: 100%; height: 100%; object-fit: cover; }
.cafe__foto--a { aspect-ratio: 4 / 3.2; width: 88%; }
.cafe__foto--a img { object-position: 60% 50%; }
.cafe__foto--b {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1;
  border: 6px solid var(--papel); border-radius: calc(var(--r-foto) + 6px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.5);
}
.cafe__foto--b img { object-position: 40% 50%; }
/* Platos recortados que asoman por fuera de las fotos */
.cafe__flota { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28)); }
.cafe__flota--1 { width: clamp(120px, 15%, 190px); left: -5%; bottom: 4%; transform: rotate(-8deg); }
.cafe__flota--2 { width: clamp(64px, 8%, 96px); right: 4%; top: -6%; transform: rotate(7deg); }

html.notas .cafe .nota--sec { top: 16px; right: 16px; }

/* ---------- móvil ---------- */
@media (max-width: 899px) {
  .cafe__fotos { margin-top: var(--s-2); padding-bottom: 22%; }
  .cafe__foto--a { width: 100%; }
  .cafe__foto--b { width: 52%; right: -2%; bottom: 0; }
  .cafe__flota--1 { width: 34%; left: -4%; bottom: 0; }
  .cafe__flota--2 { width: 17%; right: 6%; top: -9%; }
}
@media (max-width: 760px) {
  .sec--papel { padding: 1rem 8px; }
  .cafe { border-radius: 28px; }
  .cafe__in { padding: 3rem 20px 1.5rem; }
  .cafe__title { font-size: clamp(2.6rem, 12vw, 3.2rem); }
  .cafe__horario { margin-top: var(--s-6); }
  .cafe__horario div { padding: 10px 16px; }
  .cafe__btn { margin-top: var(--s-6); width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cafe__btn, .cafe__btn-ico { transition: none; }
}