/* Estilos de la landing y las páginas de la tarjeta. Medidas tomadas del diseño "Landing KOFF v2". */
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-canvas);color:var(--text-body)}
a{color:var(--text-strong)}
a:hover{opacity:.66}

.site-header{position:sticky;top:0;z-index:20;background:var(--surface-canvas);border-bottom:1px solid var(--line-hairline)}
.site-header__row{max-width:var(--container-max);margin:0 auto;padding:12px var(--gutter-mobile);min-height:52px;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.site-nav{flex:1;display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap}
.site-nav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--text-muted)}
.site-header .k-tabs-pill button{height:32px;padding:0 14px}
.site-header .k-btn{color:var(--action-primary-fg)}

.combo-grid{margin-top:var(--space-6);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-5)}
.combo{background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.combo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.combo__body{padding:var(--space-5);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.combo__name{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;color:var(--text-strong)}
.combo__desc{margin-top:6px;font-size:15px;color:var(--text-muted)}
.combo__price{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--text-strong)}

.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--space-5)}
.menu-item{display:flex;flex-direction:column;gap:var(--space-3)}
.menu-item img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);display:block}
.menu-item__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-weight:600;font-size:17px;color:var(--text-strong)}
.menu-item__desc{font-size:14px;color:var(--text-muted);margin-top:-8px}

.extra-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:12px 0;border-bottom:1px solid var(--line-hairline);font-size:15px}
.extra-row span:first-child{color:var(--text-body)}
.extra-row span:last-child{color:var(--text-strong);font-weight:600;white-space:nowrap}

/* Escalera de sellos: los círculos del diseño, ahora con las dos metas (8 y 12). */
.ladder{margin-top:var(--space-6);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;max-width:460px}
.ladder__dot{aspect-ratio:1;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(253,252,248,.35)}
/* Las metas no se rellenan: anillo sólido con el número, para no leerse como sello ganado. */
.ladder__dot.is-goal{box-shadow:inset 0 0 0 2px var(--koff-cream);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:clamp(10px,1.6vw,13px);color:var(--koff-cream);line-height:1}
.ladder-legend{margin-top:var(--space-3);display:flex;gap:var(--space-5);flex-wrap:wrap;color:var(--koff-cream);font-size:14px}
.ladder-legend strong{font-family:var(--font-display);font-weight:800;color:var(--koff-paper);font-size:16px}

.order-card{background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.order-card__title{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-strong)}
.order-card__body{font-size:15px;line-height:1.5;color:var(--text-muted)}
.hours-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:9px 0;border-bottom:1px solid var(--line-hairline);font-size:14px}
.hours-row span:first-child{color:var(--text-body);font-weight:600}
.hours-row span:last-child{color:var(--text-muted);text-align:right}

.footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{font-size:15px;text-decoration:none;color:var(--text-body);display:flex;align-items:center;gap:8px;--s:16px}

/* ─── Páginas de la tarjeta (/tarjeta, /s/..., /privacidad) ─── */
.page{max-width:560px;margin:0 auto;padding:var(--space-8) var(--gutter-mobile) var(--space-9);display:flex;flex-direction:column;gap:var(--space-5)}
.page--wide{max-width:760px}
.page h1{font-size:clamp(34px,6vw,48px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.page .lead{font-size:17px;line-height:1.6;color:var(--text-muted)}
.stamp-panel{background:var(--koff-ink);color:var(--koff-paper);border-radius:var(--radius-xl);padding:clamp(24px,5vw,40px);display:flex;flex-direction:column;gap:var(--space-5)}
.stamp-panel__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.stamp-panel__count{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,9vw,56px);line-height:1;letter-spacing:-.02em;color:var(--koff-paper)}
.stamp-panel__count small{font-size:18px;font-weight:700;letter-spacing:0;margin-left:8px;color:var(--koff-cream)}
.stamp-panel__meta{font-size:13px;color:var(--koff-cream)}
.reward-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:14px 0;border-bottom:1px solid var(--line-hairline)}
.reward-row:last-child{border-bottom:none}
.reward-row__name{font-weight:600;color:var(--text-strong)}
.reward-row__cost{font-size:14px;color:var(--text-muted)}
.form-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.form-error{color:var(--feedback-danger);font-size:14px;font-weight:600}
.legal{font-size:15px;line-height:1.7;color:var(--text-body)}
.legal h2{font-size:22px;margin:var(--space-6) 0 var(--space-2)}
.legal ul{padding-left:20px;margin:var(--space-2) 0}