/* KORA · la ventana para pedir una tarjeta, unas de mesa o una lotería (js/kora-pedido.js) — 20 oct 2026 */
.kpd{ position:fixed; inset:0; margin:auto; height:fit-content; width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; overflow:auto;
  border:0; border-radius:0; padding:30px 30px 24px; background:#FBFAF7; color:#1F1D1B;   /* 22 oct · esquinas rectas: la ventana tiene scroll */
  font-family:'Jost',sans-serif; box-shadow:0 30px 60px -20px rgba(31,29,27,.45) }
.kpd::backdrop{ background:rgba(31,29,27,.45) }
.kpd-x{ position:absolute; top:12px; right:14px; background:none; border:0; font-size:17px; color:#79746D; cursor:pointer; padding:6px }
.kpd-k{ margin:0 0 6px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#79746D }
.kpd-h{ margin:0 0 16px; font-family:var(--font-display); font-weight:400; font-size:clamp(24px, 4.6vw, 30px); line-height:1.1 }
.kpd-h3{ margin:22px 0 10px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase }
.kpd-p{ margin:0 0 12px; font-family:var(--font-display); font-size:16.5px; line-height:1.45; color:#46423D }
.kpd-resumen{ border-top:1px solid #E4E0D9; border-bottom:1px solid #E4E0D9; padding:6px 0 }
.kpd-linea{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; color:#46423D }
.kpd-linea b{ font-weight:500; color:#1F1D1B; white-space:nowrap }
.kpd-linea s{ color:#A39D94; font-weight:400; margin-right:4px }
.kpd-total{ border-top:1px solid #E4E0D9; margin-top:4px; padding-top:10px; font-size:15.5px; color:#1F1D1B }
.kpd-total b{ font-weight:600 }
.kpd-club{ margin:4px 0 6px; font-size:12.5px; color:#4C6657 }
.kpd-nota{ margin:12px 0 0; font-family:var(--font-display); font-style:italic; font-size:15px; color:#5F5A53 }
.kpd-dir{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px }
.kpd-campo{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:#5F5A53 }
.kpd-c-calle, .kpd-c-notas, .kpd-c-nombre{ grid-column:1 / -1 }
.kpd-campo input, .kpd-campo select{ font:inherit; font-size:15px; color:#1F1D1B; background:#fff; border:1px solid #D9D4CC; border-radius:6px; padding:9px 10px; width:100%; box-sizing:border-box }
.kpd-campo.falta input, .kpd-campo.falta select{ border-color:#B3261E; box-shadow:0 0 0 1px #B3261E }
.kpd-envios{ display:flex; flex-direction:column; gap:8px }
.kpd-envio{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #D9D4CC; border-radius:8px; background:#fff; cursor:pointer }
.kpd-envio.on{ border-color:#1F1D1B; box-shadow:0 0 0 1px #1F1D1B }
.kpd-envio input{ margin:0; accent-color:#1F1D1B }
.kpd-envio span{ flex:1; display:flex; flex-direction:column; gap:2px }
.kpd-envio b{ font-weight:500; font-size:14px }
.kpd-envio small{ font-size:12px; color:#79746D }
.kpd-envio em{ font-style:normal; font-size:14px }
.kpd-promo{ margin-top:16px; font-size:13px; color:#5F5A53 }
.kpd-promo summary{ cursor:pointer }
.kpd-promo input{ margin-top:8px; width:100%; box-sizing:border-box; font:inherit; font-size:15px; border:1px solid #D9D4CC; border-radius:6px; padding:9px 10px; text-transform:uppercase }
.kpd-error{ margin:14px 0 0; padding:10px 12px; border-radius:6px; background:#F8E9E7; color:#8B1E1E; font-size:13.5px }
.kpd-acc{ display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap }
.kpd-btn{ background:#1F1D1B; color:#FBFAF7; border:0; border-radius:4px; padding:13px 22px; cursor:pointer; font:inherit; font-weight:600; font-size:14px; letter-spacing:.04em }
.kpd-btn:hover{ background:#000 }
.kpd-btn[disabled]{ opacity:.6; cursor:default }
.kpd-suave{ background:none; border:0; padding:0 0 2px; border-bottom:1px solid currentColor; cursor:pointer; font:inherit; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#46423D }
.kpd-pie{ margin:14px 0 0; text-align:right; font-size:11.5px; color:#A39D94 }
.kpd-carga{ display:block; height:2px; margin-top:18px; background:linear-gradient(90deg, transparent, #7E8B5B, transparent) 0 0 / 40% 100% no-repeat; animation:kpdCarga 1.2s linear infinite }
@keyframes kpdCarga{ from{ background-position:-40% 0 } to{ background-position:140% 0 } }
@media (max-width:560px){
  .kpd{ padding:26px 18px 20px }
  .kpd-dir{ grid-template-columns:1fr }
  .kpd-acc{ justify-content:space-between }
}
@media (prefers-reduced-motion:reduce){ .kpd-carga{ animation:none } }

/* ── 22 oct · Vivi: la ventana «más cuadrada u horizontal en compu y iPad para
   aprovechar la pantalla y evitar scroll; en el celular, vertical». Dos columnas
   desde 760 px; abajo, una sola. Y el resumen visual de las tarjetas. ── */
.kpd.kpd-ancho{ width:min(1040px, calc(100vw - 32px)) }
.kpd-dos{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px 34px }
@media (min-width:760px){
  .kpd-dos{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start }
  .kpd-dos-res{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) }
  .kpd-h3-1{ margin-top:0 }
}
.kpd-volver{ background:none; border:0; padding:0; margin:0 0 10px; cursor:pointer; font:inherit; font-size:12.5px; color:#5F5A53; text-decoration:underline; text-underline-offset:3px }
.kpd-tjs{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:6px }
.kpd-tj{ margin:0; width:clamp(110px, 16vw, 150px) }
.kpd-tj-c .tj-card{ width:100%; box-shadow:0 10px 20px -12px rgba(31,29,27,.55) }
.kpd-tj figcaption{ margin-top:7px; font-size:12.5px; color:#46423D; line-height:1.3 }
.kpd-tj figcaption b{ font-weight:600; color:#1F1D1B }
.kpd-h3 small{ font-weight:400; letter-spacing:.04em; text-transform:none; color:#79746D }
.kpd-pls{ display:flex; flex-wrap:wrap; gap:14px }
.kpd-pl{ margin:0 }
.kpd-pl-h{ background:#E9E5DE; padding:6px; line-height:0 }
.kpd-pl-h .plg-hoja{ zoom:.2; box-shadow:0 8px 20px -8px rgba(0,0,0,.35) }
.kpd-pl-h .plg-pie{ display:none }
.kpd-pl figcaption{ margin-top:6px; font-size:12px; color:#79746D }
.kpd-pills{ display:flex; gap:8px }
.kpd-pill{ min-width:54px; padding:9px 14px; border:1px solid #D9D4CC; border-radius:8px; background:#fff; font:inherit; font-size:14px; cursor:pointer; color:#1F1D1B }
.kpd-pill.on{ border-color:#1F1D1B; box-shadow:inset 0 0 0 1px #1F1D1B }
.kpd-modos{ display:flex; flex-direction:column; gap:8px }
.kpd-modo{ display:flex; flex-direction:column; gap:2px; text-align:left; padding:11px 13px; border:1px solid #D9D4CC; border-radius:8px; background:#fff; cursor:pointer; font:inherit; color:#1F1D1B }
.kpd-modo b{ font-weight:500; font-size:14px }
.kpd-modo small{ font-size:12px; color:#79746D; line-height:1.35 }
.kpd-modo.on{ border-color:#1F1D1B; box-shadow:inset 0 0 0 1px #1F1D1B }
.kpd-vers{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px }
.kpd-ver{ position:relative; width:74px; padding:5px; border:1.5px solid transparent; border-radius:6px; background:#EFEDE9; cursor:pointer }
.kpd-ver .tj-card{ width:100%; box-shadow:none }
.kpd-ver i{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid #CFC8BD; font-style:normal; font-size:11px; line-height:19px; color:transparent }
.kpd-ver.on{ border-color:#1F1D1B }
.kpd-ver.on i{ background:#1F1D1B; border-color:#1F1D1B; color:#fff }
.kpd-mini{ margin:6px 0 0; font-size:12.5px; color:#79746D; line-height:1.4 }
.kpd-ojo{ color:#8B5A1E }
.kpd-der .kpd-resumen{ margin-top:18px }
.kpd-pills-2 .kpd-pill{ font-size:13px }
/* 22 oct · el resumen de la lotería: tres tablas y unas cartas, en chico */
.klot-res{ background:transparent }
.kpd-lt{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.kpd-lt > *{ pointer-events:none }
.kpd-lc{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px }
@media (max-width:759px){ .kpd-lc{ grid-template-columns:repeat(4,minmax(0,1fr)) } }