/* ══════════════════════════════════════════════════════════════════════════
   KORA · NUESTRA LOTERÍA — 18 oct 2026 (js/kora-loteria.js)
   El <style> de sitio_plantilla.html, todo bajo .klot. Sin modo oscuro (el
   sitio es claro) ni encabezado/pie propios; la serif es la del sitio.
   Las piezas de lotería (cartas y tablas) son idénticas a las de imprenta.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Kora · tokens del sitio (Mini brief de marca) + acentos del libro de Navidad ── */
.klot{
  --pagina:#FFFFFF; --hueso:#F7F2E9; --crema:#F6F3EE; --lino:#E4DFD6; --elefante:#D8D2CB; --gris-editor:#E6DED0;
  --tinta:#2C2520; --clay:#7A6652; --taupe:#9E8E78; --eucalipto:#4C6657; --sage:#8A9E8C;
  --salvia:#BFCAB3; --rojo:#8B1E1E; --verde-lot:#3E6B48; --frijol:#6B4A33; --papel:#FBF8F2;
  --filo:0 0 0 1px rgba(44,37,32,.08); --sombra:0 1px 0 rgba(44,37,32,.06), 0 10px 26px -14px rgba(44,37,32,.35);
  --serif:var(--font-display, "EB Garamond"), Georgia, serif;   /* la del sitio */
  --sans:"Jost", "Helvetica Neue", Arial, system-ui, sans-serif;
  --juego:"Grandstander", "Trebuchet MS", system-ui, sans-serif;
}
.klot *,.klot *::before,.klot *::after{box-sizing:border-box}
.klot{background:var(--pagina);color:var(--tinta);font-family:var(--serif);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
.klot img{max-width:100%;display:block}
.klot button,.klot input{font:inherit;color:inherit}
.klot a{color:inherit}
.klot :focus-visible{outline:2px solid var(--eucalipto);outline-offset:2px}
.klot .kl-k{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.klot .envoltura{max-width:1240px;margin:0 auto;padding:0 28px}

.klot .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;
  background:var(--eucalipto);color:#fff;text-decoration:none}
.klot .btn.nav{background:var(--rojo)}
.klot .btn.kl-chico{padding:10px 16px;font-size:11.5px}
.klot .btn.claro{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px rgba(44,37,32,.28)}
.klot .btn:disabled{opacity:.45;cursor:default}
.klot .suave{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--eucalipto);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(76,102,87,.35)}

/* ── ficha del producto (patrón AU) ── */
.klot .producto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;padding:18px 0 72px;align-items:start}
.klot .escaparate{position:relative;background:var(--salvia);aspect-ratio:1/1.02;display:flex;align-items:center;justify-content:center;overflow:hidden}
.klot .escaparate .hoja-tabla{width:54%;transform:rotate(-2.5deg) translateX(-12%);box-shadow:0 18px 40px -18px rgba(30,40,30,.55)}
.klot .escaparate .hoja-carta{position:absolute;width:22%;right:14%;bottom:16%;transform:rotate(6deg);box-shadow:0 16px 30px -14px rgba(30,40,30,.6)}
.klot .escaparate .pie{position:absolute;left:18px;bottom:14px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(44,37,32,.55)}
.klot .ficha h1{font-weight:400;font-size:clamp(40px,4.6vw,58px);line-height:1.02;margin:10px 0 14px;letter-spacing:-.005em}
.klot .ficha .kl-sub{font-style:italic;color:var(--clay);font-size:22px;line-height:1.35;margin:0 0 22px}
.klot .ficha p{margin:0 0 18px;max-width:46ch}
.klot .tamanos{display:grid;gap:10px;margin:26px 0 14px}
.klot .tamano{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid rgba(44,37,32,.16);cursor:pointer;background:var(--pagina)}
.klot .tamano:has(input:checked){border-color:var(--eucalipto);box-shadow:inset 0 0 0 1px var(--eucalipto)}
.klot .tamano input{accent-color:var(--eucalipto);width:17px;height:17px;margin:0}
.klot .tamano b{display:block;font-weight:500;font-size:20px;line-height:1.1}
.klot .tamano small{font-family:var(--sans);font-size:12.5px;color:var(--clay);letter-spacing:.01em}
.klot .tamano .precio{font-family:var(--sans);font-size:15px;font-weight:500}
.klot .conlibro{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--clay);margin:4px 0 24px;cursor:pointer}
.klot .conlibro input{accent-color:var(--eucalipto);margin-top:3px}
.klot .ficha .acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.klot .pliegues{margin-top:34px;border-top:1px solid rgba(44,37,32,.12)}
.klot .pliegues details{border-bottom:1px solid rgba(44,37,32,.12)}
.klot .pliegues summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:15px 0;font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.klot .pliegues summary::-webkit-details-marker{display:none}
.klot .pliegues summary::after{content:"+";color:var(--sage);font-size:18px;line-height:1;letter-spacing:0}
.klot .pliegues details[open] summary::after{content:"–"}
.klot .pliegues details p{margin:0 0 18px;font-size:17px;color:var(--clay)}

/* ── cómo funciona ── */
.klot .pasos{background:var(--elefante);padding:64px 0}
.klot .pasos h2,.klot .taller h2{font-weight:400;font-size:clamp(32px,3.4vw,44px);line-height:1.1;margin:10px 0 36px}
.klot .pasos ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.klot .pasos li{border-top:1px solid rgba(44,37,32,.25);padding-top:18px}
.klot .pasos li .kl-num{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--eucalipto)}
.klot .pasos li h3{font-weight:500;font-size:24px;margin:6px 0 6px}
.klot .pasos li p{margin:0;color:var(--clay);font-size:17px;max-width:34ch}

/* ── el taller (editor) ── */
.klot .taller{padding:72px 0 40px}
.klot .taller .cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.klot .taller .cabeza h2{margin:10px 0 0}
.klot .taller .cabeza .acciones{display:flex;gap:18px;align-items:center}
.klot .mesa{display:grid;grid-template-columns:360px minmax(0,1fr);gap:0;background:var(--gris-editor);min-height:640px}
.klot .kl-panel{background:var(--pagina);padding:22px 20px 26px;border-right:1px solid rgba(44,37,32,.08);max-height:880px;overflow:auto}
/* 19 oct: en escritorio el panel se queda a la vista mientras bajan por las tablas */
@media (min-width:981px){ .klot .kl-panel{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 150px)} }
.klot .nombre-lot{width:100%;border:0;border-bottom:1px solid rgba(44,37,32,.2);background:transparent;font-family:var(--serif);font-size:24px;padding:4px 0 6px;margin:6px 0 4px}
.klot .nombre-lot:focus{outline:none;border-color:var(--eucalipto)}
.klot .contador{font-family:var(--sans);font-size:12.5px;color:var(--clay);margin:6px 0 18px}
.klot .contador b{font-weight:500;color:var(--tinta)}
.klot .familia{border-top:1px solid rgba(44,37,32,.12);padding:16px 0 10px}
.klot .familia .fila-fam{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.klot .familia .fila-fam .kl-k{white-space:nowrap}
.klot .familia input.apellido{flex:1;min-width:0;border:0;border-bottom:1px solid transparent;background:transparent;font-family:var(--serif);font-size:21px;font-weight:500;padding:2px 0}
.klot .familia input.apellido:hover,.klot .familia input.apellido:focus{border-color:rgba(44,37,32,.2);outline:none}
.klot .quitar{background:none;border:0;cursor:pointer;color:var(--taupe);font-size:18px;line-height:1;padding:4px 6px;border-radius:2px}
.klot .quitar:hover{color:var(--rojo)}
.klot .persona{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:6px 0}
.klot .cara{position:relative;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--crema);border:0;padding:0;cursor:pointer;box-shadow:var(--filo)}
.klot .cara img{width:100%;height:100%;object-fit:cover}
.klot .cara .mas{position:absolute;inset:auto 0 0 0;height:40%;background:rgba(44,37,32,.55);color:#fff;font-family:var(--sans);font-size:9px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.klot .cara:hover .mas,.klot .cara:focus-visible .mas{opacity:1}
.klot .cara.cargando::after{content:"";position:absolute;inset:0;background:conic-gradient(var(--eucalipto) 0 25%,transparent 0) ;mask:radial-gradient(circle,transparent 58%,#000 60%);animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(1turn)}}
.klot .persona .datos{min-width:0}
.klot .persona input.nom{width:100%;border:0;border-bottom:1px solid transparent;background:transparent;font-family:var(--serif);font-size:18px;padding:1px 0}
.klot .persona input.nom:hover,.klot .persona input.nom:focus{border-color:rgba(44,37,32,.2);outline:none}
.klot .persona .estado{font-family:var(--sans);font-size:11.5px;color:var(--taupe);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.klot .persona .estado.kl-ok{color:var(--eucalipto)}
.klot .persona .estado.ojo{color:var(--rojo)}
.klot .persona label.masc{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.klot .persona label.masc input{accent-color:var(--eucalipto);margin:0}
.klot .agregar{display:flex;gap:18px;margin:8px 0 2px}
.klot .kl-panel .pie-panel{border-top:1px solid rgba(44,37,32,.12);padding-top:18px;margin-top:8px}
.klot .kl-panel .pie-panel p{font-family:var(--sans);font-size:12.5px;color:var(--clay);line-height:1.55;margin:0 0 10px}

.klot .vista{padding:18px 24px 30px;min-width:0}
.klot .pestanas{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.klot .pestanas button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);border-radius:2px}
.klot .pestanas button[aria-selected="true"]{background:var(--pagina);color:var(--tinta);box-shadow:var(--filo)}
.klot .pestanas .dato{margin-left:auto;font-family:var(--sans);font-size:12.5px;color:var(--clay)}
.klot .hoja[hidden]{display:none}
.klot .nota{font-family:var(--sans);font-size:13px;color:var(--clay);margin:0 0 16px;max-width:72ch;line-height:1.55}

/* ── piezas de lotería (idénticas a la vista de imprenta) ── */
.klot .tablas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.klot .tabla{background:var(--papel);border-radius:2px;box-shadow:var(--sombra);padding:11px 11px 9px;color:#2F3A2E;border:0;text-align:left;width:100%;font-family:var(--sans)}
.klot button.tabla{cursor:pointer}
.klot .tabla .t-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:6px}
.klot .tabla .t-top b{font-family:var(--juego);font-weight:700;color:var(--verde-lot);font-size:1rem}
.klot .tabla .t-top span{font-size:.68rem;color:#7A6652;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klot .rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.klot .casilla{position:relative;aspect-ratio:1/1.4;border:1px solid rgba(62,107,72,.38);border-radius:4px;background:#FBF8F2;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3px 2px;overflow:hidden}
.klot .casilla .kl-n{align-self:flex-start;font-family:var(--juego);font-weight:700;color:var(--rojo);font-size:.55rem;line-height:1;padding-left:2px}
.klot .casilla img{width:84%;aspect-ratio:1;object-fit:contain}
.klot .casilla .nom{font-family:var(--juego);font-weight:500;color:var(--verde-lot);font-size:.5rem;line-height:1.1;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.klot .cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.klot .carta{background:var(--papel);border-radius:5px;box-shadow:var(--sombra);padding:6px;color:#2F3A2E}
.klot .carta-in{aspect-ratio:2/3;border:1.5px solid var(--verde-lot);border-radius:6px;display:flex;flex-direction:column;align-items:center;padding:8px 6px}
.klot .carta .kl-n{align-self:flex-start;font-family:var(--juego);font-weight:700;color:var(--rojo);font-size:.95rem;line-height:1}
.klot .carta img{width:88%;aspect-ratio:1;object-fit:contain;margin:6px 0 auto}
.klot .carta .nom{font-family:var(--juego);font-weight:500;color:var(--verde-lot);font-size:.9rem;text-align:center;line-height:1.15}
.klot .carta .fam{font-family:var(--sans);font-size:.66rem;color:#7A6652;min-height:1em}


/* ── resumen / compra ── */
.klot .resumen{position:sticky;bottom:0;z-index:15;background:var(--pagina);border-top:1px solid rgba(44,37,32,.12);padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -10px 24px -18px rgba(44,37,32,.35);transform:translateY(110%);transition:transform .28s ease;visibility:hidden}
.klot .resumen.ve{transform:none;visibility:visible}
.klot .resumen .envoltura{display:flex;align-items:center;gap:22px;min-height:70px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.klot .resumen .que{font-family:var(--sans);font-size:13px;color:var(--clay);flex:1;min-width:200px}
.klot .resumen .que b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;color:var(--tinta)}
.klot .resumen .total{font-family:var(--sans);font-size:17px;font-weight:500}
.klot .resumen .total s{color:var(--taupe);font-weight:400;font-size:14px;margin-right:6px}

/* ── diálogos ── */
.klot dialog{margin:auto;border:0;padding:0;background:transparent;max-width:min(620px,94vw);width:100%;color:var(--tinta)}
.klot dialog::backdrop{background:rgba(30,26,23,.55)}
.klot .caja{background:var(--pagina);padding:26px 26px 22px;box-shadow:var(--sombra)}
.klot .caja h3{font-weight:400;font-size:28px;margin:6px 0 8px;line-height:1.1}
.klot .caja p{margin:0 0 14px;font-size:17px;color:var(--clay)}
.klot .caja .acciones{display:flex;gap:14px;justify-content:flex-end;align-items:center;margin-top:18px;flex-wrap:wrap}
.klot #detalle{max-width:min(560px,94vw)}
.klot #detalle .tabla{padding:20px 20px 16px}
.klot #detalle .tabla .t-top b{font-size:1.9rem}
.klot #detalle .tabla .t-top span{font-size:.85rem}
.klot #detalle .casilla .kl-n{font-size:.8rem}
.klot #detalle .casilla .nom{font-size:.78rem}
.klot .cerrar-d{display:block;margin:12px auto 0}


/* ── celular ── */
@media (max-width:980px){
  .klot .producto{grid-template-columns:1fr;gap:30px;padding-bottom:50px}
  .klot .pasos ol{grid-template-columns:1fr;gap:26px}
  .klot .mesa{grid-template-columns:1fr}
  .klot .kl-panel{max-height:none;border-right:0;border-bottom:1px solid rgba(44,37,32,.08)}
  .klot .tablas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .klot .pestanas .dato{display:none}
  .klot .tabla .t-top{flex-direction:column;gap:0}
}
@media (max-width:560px){
  .klot .escaparate .pie{display:none}
  .klot .envoltura{padding:0 18px}
  .klot .vista{padding:14px 12px 24px}
  .klot .pestanas{flex-wrap:nowrap;gap:0}
  .klot .pestanas button{padding:7px 8px;letter-spacing:.08em;font-size:10.5px;white-space:nowrap}
  .klot .resumen .envoltura{flex-wrap:nowrap;gap:12px;min-height:62px}
  .klot .resumen .que{flex:1 1 0;min-width:0}
  .klot .resumen .que b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .klot .resumen .que span{display:none}
  .klot .resumen .total{font-size:14px;white-space:nowrap}
  .klot .resumen .total s{display:none}
  .klot .resumen .btn{padding:12px 14px;letter-spacing:.12em;font-size:11px}
  .klot .taller .cabeza .acciones{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.klot .cara.cargando::after{animation:none}.klot .resumen{transition:none}}

/* La carta sola, en la guía de regalos de Navidad */
.klot.klot-mini{ background:none; display:flex; align-items:center; justify-content:center; width:100%; height:100% }
.klot.klot-mini .carta{ width:52%; box-shadow:0 14px 24px -12px rgba(0,0,0,.55) }
.klot.klot-mini .carta .kl-n{ font-size:1.1rem }
.klot.klot-mini .carta .nom{ font-size:1.05rem }
.klot.klot-mini .carta .fam{ font-size:.72rem }

/* ══ 19 oct · mejoras de diseño ══════════════════════════════════════════ */
/* El escaparate: más aire y una segunda carta en abanico */
.klot .escaparate{background:radial-gradient(120% 90% at 30% 20%,#CCD6C1 0,var(--salvia) 55%,#AEBBA2 100%)}
.klot .escaparate .hoja-tabla{width:58%}
.klot .escaparate .hoja-carta{width:24%}
.klot .producto{padding-top:28px}
.klot .ficha{padding-top:6px}

/* Tablas: las primeras 6, y el resto al pedirlo */
.klot .tablas.recogida > .tabla:nth-child(n+7){display:none}
.klot .ver-todas{display:flex;margin:22px auto 0}
.klot .ver-todas[hidden]{display:none}
.klot button.tabla{transition:transform .15s ease,box-shadow .15s ease}
.klot button.tabla:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(44,37,32,.06),0 16px 30px -16px rgba(44,37,32,.45)}

/* Cómo funciona: cada paso con su imagen (foto → carta pintada → la tabla) */
.klot .pasos{background:var(--hueso)}
.klot .pasos li{border-top:0;padding-top:0}
.klot .paso-img{margin:0 0 18px;aspect-ratio:4/3;background:var(--pagina);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--filo)}
.klot .paso-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.klot .paso-carta{background:var(--salvia)}
.klot .paso-carta .carta{width:34%;transform:rotate(-3deg);box-shadow:0 14px 26px -14px rgba(30,40,30,.6)}
.klot .paso-carta .carta .kl-n{font-size:.8rem}
.klot .paso-carta .carta .nom{font-size:.72rem}
.klot .paso-carta .carta .fam{font-size:.55rem}
.klot .paso-juego img{width:62%;height:auto}
@media (max-width:980px){ .klot .paso-img{aspect-ratio:16/10} .klot .paso-carta .carta{width:26%} .klot .paso-juego img{width:44%} }
/* En el teléfono las tablas van en carrusel: se leen los nombres y no es una pared */
@media (max-width:560px){
  .klot #listaTablas{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin:0 -12px;padding:4px 12px 14px;scrollbar-width:none}
  .klot #listaTablas::-webkit-scrollbar{display:none}
  .klot #listaTablas > .tabla{scroll-snap-align:center}
  .klot #listaTablas.recogida > .tabla:nth-child(n+7){display:block}
  .klot .ver-todas{display:none !important}
  .klot #listaTablas .tabla .t-top{flex-direction:row}
  .klot #listaTablas .casilla .nom{font-size:.6rem}
  .klot #listaTablas .casilla .kl-n{font-size:.62rem}
}
@media (max-width:560px){ .klot #notaTablas::after{content:" Desliza para ver las demás."} }

/* ══ 19 oct · la carta menos vertical, sin número, con el retrato rectangular ══
   Vivi: «la tarjeta menos vertical y sin número, para que lo que más luzca
   sea el retrato… sin que tenga que ser en forma de círculo». Carta de
   7 × 9 cm; el retrato 4:5 casi de lado a lado; el nombre abajo. */
.klot .carta-in{aspect-ratio:7/9;padding:6px 6px 7px;border-radius:5px;justify-content:flex-start;gap:0;overflow:hidden}
/* El retrato llena lo que deja el nombre (en la carta de 7 × 9 queda casi
   5:6); se pinta en 4:5 y aquí se ve completo de lado a lado. */
.klot .retrato{display:block;width:100%;flex:1 1 0;min-height:0;border-radius:3px;overflow:hidden;background:#F1ECE2}
.klot .retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;margin:0}
.klot .es-icono .retrato{background:transparent}
.klot .es-icono .retrato img{object-fit:contain;padding:8%}
.klot .carta .nom{flex:none;padding-top:4px;font-size:.95rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.klot .carta .fam{flex:none;line-height:1.2}
.klot .casilla{aspect-ratio:7/9;justify-content:flex-start;padding:3px 3px 2px;gap:0;overflow:hidden}
.klot .casilla .retrato{border-radius:2px}
.klot .casilla .nom{flex:none;padding-top:2px}
/* El panel: el retrato también rectangular */
.klot .persona{grid-template-columns:48px 1fr auto}
.klot .cara{width:48px;height:60px;border-radius:4px}
.klot .kl-pintar{border:0;background:none;padding:0;cursor:pointer;font-family:var(--sans);font-size:11.5px;color:var(--rojo);text-decoration:underline;text-underline-offset:2px}
.klot .kl-panel .pie-panel #klGratis:empty{display:none}
.klot .kl-panel .pie-panel #klGratis{background:var(--crema);padding:7px 10px;border-radius:6px;color:var(--tinta)}

/* ══ 19 oct · atrás de la carta: el nombre y unas líneas sobre la persona ══ */
.klot .reverso .carta-in{background:var(--papel);border-style:double;border-width:4px;align-items:center;justify-content:flex-start;text-align:center;padding:10px 9px 8px;gap:5px}
.klot .reverso .r-orla{color:#C9A24A;font-size:.85rem;line-height:1}
.klot .reverso .r-nom{font-family:var(--juego);font-weight:700;color:var(--verde-lot);font-size:.92rem;line-height:1.1;flex:none}
.klot .reverso .r-desc{margin:auto 0;font-family:var(--serif);font-style:italic;font-size:.66rem;line-height:1.3;color:#3B3530;overflow:hidden}
.klot .reverso.sin-desc .r-desc{color:var(--taupe);font-size:.75rem}
.klot .reverso .r-pie{margin-top:auto;flex:none;max-width:100%;font-family:var(--sans);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klot .reverso.es-icono .r-orla{font-size:2.2rem;margin-top:auto}
.klot .reverso.es-icono .r-nom{margin-bottom:auto}
/* en las de personas, todo el espacio es para lo que dicen de ellas */
.klot .reverso:not(.es-icono) .r-pie{display:none}
.klot .reverso .r-orla{flex:none}
.klot .lados{display:inline-flex;border:1px solid rgba(44,37,32,.2);border-radius:2px;padding:3px;background:var(--pagina);margin:0 0 12px}
.klot .lados button{border:0;background:transparent;padding:6px 14px;cursor:pointer;font-family:var(--sans);font-size:12.5px;border-radius:2px}
.klot .lados button[aria-pressed="true"]{background:var(--crema);color:var(--eucalipto);box-shadow:var(--filo)}
/* El escaparate: el reverso asoma detrás de la carta */
.klot .escaparate .hoja-reverso{position:absolute;width:22%;right:6%;bottom:30%;transform:rotate(12deg);box-shadow:0 14px 26px -14px rgba(30,40,30,.5)}
.klot .escaparate .hoja-reverso .r-desc{font-size:.55rem}
.klot .escaparate .hoja-reverso .r-nom{font-size:.8rem}
@media (max-width:560px){ .klot .escaparate .hoja-reverso{display:none} }

/* El panel: «Atrás · …» por persona */
.klot .persona{align-items:start}
.klot .persona .quitar{margin-top:8px}
.klot .kl-como{margin-top:4px;font-family:var(--sans);font-size:12px;color:var(--clay)}
.klot .kl-como summary{cursor:pointer;list-style:none;color:var(--eucalipto)}
.klot .kl-como summary::-webkit-details-marker{display:none}
.klot .kl-como summary::before{content:"▸ ";font-size:10px}
.klot .kl-como[open] summary::before{content:"▾ "}
.klot .kl-como summary i{color:var(--clay)}
.klot .kl-quien{display:flex;gap:4px;margin:8px 0 6px;flex-wrap:wrap}
.klot .kl-quien button,.klot .kl-rasgos button{border:1px solid rgba(44,37,32,.18);background:var(--pagina);border-radius:8px;padding:3px 10px;font-family:var(--sans);font-size:11.5px;cursor:pointer;color:var(--tinta)}
.klot .kl-quien button[aria-pressed="true"]{background:var(--eucalipto);border-color:var(--eucalipto);color:#fff}
.klot .kl-rasgos{display:flex;flex-wrap:wrap;gap:4px}
.klot .kl-rasgos button.on{background:var(--salvia);border-color:var(--eucalipto);color:#22301F}
.klot .kl-rasgos button:disabled{opacity:.4;cursor:default}
.klot .kl-ayuda{margin:6px 0 4px;font-size:11px;color:var(--taupe)}
.klot .kl-desc{margin:6px 0 4px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;color:var(--tinta);background:var(--crema);padding:8px 10px;border-radius:4px}
.klot .kl-desc-propia{width:100%;margin:6px 0 4px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.4;border:1px solid rgba(44,37,32,.2);border-radius:4px;padding:6px 8px;resize:vertical}

/* ══ 19 oct · EL DISEÑO DE LA REFERENCIA ═════════════════════════════════════
   Vivi mandó cómo va la lotería: caja y tablas con cuadros verde olivo y
   crema, la cartela ondulada con filete rojo («LOTERÍA · NAVIDEÑA · KORA»),
   estrellitas rojas en las esquinas, cartas crema con el nombre en
   versalitas espaciadas, y atrás un doble filete con el nombre en cursiva.
   Va al final: pisa lo de arriba sin tocarlo. */
.klot{
  --ol:#97A383; --ol-osc:#6F7C59; --ol-claro:#C9D0B8; --cr:#F6F1E6; --cr-2:#FBF8F1; --rj:#A3302E;
  --estrella-roja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23F6F1E6'/%3E%3Cpath d='M10 3l1.6 4.4L16 6l-2.2 4L16 14l-4.4-1.4L10 17l-1.6-4.4L4 14l2.2-4L4 6l4.4 1.4z' fill='%23A3302E'/%3E%3C/svg%3E");
  --cuadros:conic-gradient(var(--ol) 25%, var(--cr) 0 50%, var(--ol) 0 75%, var(--cr) 0);
  --destellos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%23F6F1E6'/%3E%3Crect width='28' height='28' fill='%2397A383'/%3E%3Crect x='28' y='28' width='28' height='28' fill='%2397A383'/%3E%3Cpath d='M42 4.5C43 10.5 45.5 13 51.5 14 45.5 15 43 17.5 42 23.5 41 17.5 38.5 15 32.5 14 38.5 13 41 10.5 42 4.5Z' fill='%2397A383'/%3E%3Cpath d='M14 32.5C15 38.5 17.5 41 23.5 42 17.5 43 15 45.5 14 51.5 13 45.5 10.5 43 4.5 42 10.5 41 13 38.5 14 32.5Z' fill='%2397A383'/%3E%3C/svg%3E");
}

/* La cartela */
.klot .kl-cartela{ position:relative; display:block; width:100%; container-type:inline-size }
.klot .kl-cartela svg{ display:block; width:100%; height:auto; overflow:visible }
.klot .kl-cartela .c-fondo{ fill:var(--cr-2); stroke:var(--rj); stroke-width:2.6 }
.klot .kl-cartela .c-filete{ fill:none; stroke:var(--rj); stroke-width:1.1 }
.klot .kl-cartela .c-t{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1 }
.klot .kl-cartela b{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--rj); font-size:15cqw }
.klot .kl-cartela i{ font-style:normal; font-family:var(--serif); text-transform:uppercase; letter-spacing:.38em; color:var(--ol-osc); font-size:5.2cqw; margin-top:3.5cqw; padding-left:.38em }
.klot .kl-cartela em{ font-style:normal; font-family:var(--serif); text-transform:uppercase; letter-spacing:.3em; color:var(--rj); font-size:4.4cqw; margin-top:3.5cqw; padding-left:.3em }
.klot .kl-cartela em.c-estrella{ letter-spacing:0; padding:0; color:var(--ol-osc) }
.klot .kl-cartela.c-tabla b{ font-size:16cqw }
.klot .kl-cartela.c-tabla i{ letter-spacing:.16em; font-size:6cqw; white-space:nowrap; max-width:86%; overflow:hidden; text-overflow:ellipsis }

/* Las tablas: cuadros alrededor, estrellas en las esquinas, papel crema y
   la rejilla de líneas finas (no casillas sueltas). */
.klot .tabla{ background:var(--estrella-roja) top left/11px 11px no-repeat, var(--estrella-roja) top right/11px 11px no-repeat,
    var(--estrella-roja) bottom left/11px 11px no-repeat, var(--estrella-roja) bottom right/11px 11px no-repeat,
    var(--cuadros) 0 0/11px 11px;
  padding:11px; border-radius:2px; color:#3E3A33 }
.klot .t-papel{ background:var(--cr-2); padding:8px 8px 9px; box-shadow:0 0 0 1px rgba(111,124,89,.35) }
.klot .tabla .t-top{ display:block; width:72%; margin:0 auto 7px }
.klot .rejilla{ gap:0; border-top:1px solid rgba(111,124,89,.55); border-left:1px solid rgba(111,124,89,.55) }
.klot .casilla{ border:0; border-right:1px solid rgba(111,124,89,.55); border-bottom:1px solid rgba(111,124,89,.55); border-radius:0; background:transparent; padding:3px 3px 2px }
.klot .casilla .retrato{ border-radius:1px }
.klot .casilla .nom{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:.42rem; color:#3E3A33 }
.klot #detalle .tabla{ padding:18px; background-size:18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px }
.klot #detalle .t-papel{ padding:14px 14px 16px }
.klot #detalle .casilla .nom{ font-size:.66rem }

/* Las cartas: crema, esquinas suaves, un filete olivo y el nombre en versalitas */
.klot .carta{ background:var(--cr-2); border-radius:10px; padding:7px; box-shadow:0 1px 0 rgba(44,37,32,.06), 0 12px 24px -14px rgba(44,37,32,.45) }
.klot .carta-in{ border:1px solid rgba(111,124,89,.45); border-radius:6px; padding:7px 7px 6px }
.klot .carta .nom{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:#3E3A33; padding-top:6px }
/* Atrás: doble filete, el nombre en cursiva, unas líneas y la estrellita roja */
.klot .reverso .carta-in{ background:transparent; border:3px double rgba(111,124,89,.65); border-radius:6px; padding:12px 10px 9px; gap:6px }
.klot .reverso .r-nom{ font-family:var(--serif); font-style:italic; font-weight:400; color:#3E3A33; font-size:1.05rem; letter-spacing:.01em }
.klot .reverso .r-desc{ font-style:normal; font-size:.64rem; line-height:1.4; color:#4A453D }
.klot .reverso .r-orla{ color:var(--rj); font-size:.7rem; margin-top:auto }
.klot .reverso.es-icono .r-orla{ font-size:1.6rem; margin:auto 0 }
.klot .reverso.es-icono .r-nom{ margin:0 }
/* el reverso de las de Navidad: rayas olivo con la cartela, como el lomo de la baraja */
.klot .reverso.es-icono{ background:repeating-linear-gradient(90deg, var(--ol) 0 9px, var(--cr) 9px 18px) }
.klot .reverso.es-icono .carta-in{ background:var(--cr-2); border:3px double rgba(111,124,89,.65); margin:22% 12%; aspect-ratio:auto; padding:10px 6px; justify-content:center }
.klot .reverso.es-icono .r-pie{ margin:0 }

/* El escaparate: la mesa, la tapa de la caja detrás, la tabla y dos cartas */
.klot .escaparate{ background:radial-gradient(120% 90% at 30% 15%, #EFE8DD 0, #E5DCCF 60%, #D9CFC0 100%) }
.klot .escaparate .hoja-caja{ position:absolute; left:7%; top:6%; width:60%; aspect-ratio:1.32; transform:rotate(-3deg);
  background:var(--estrella-roja) top left/7% auto no-repeat, var(--estrella-roja) top right/7% auto no-repeat,
    var(--estrella-roja) bottom left/7% auto no-repeat, var(--estrella-roja) bottom right/7% auto no-repeat,
    var(--cuadros) 0 0/7% calc(7% * 1.32);
  padding:7%; box-shadow:0 2px 0 rgba(44,37,32,.08), 0 26px 40px -22px rgba(44,37,32,.6) }
.klot .escaparate .caja-tapa{ position:relative; width:100%; height:100%; background:var(--destellos) 0 0/22% auto; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(111,124,89,.4) }
.klot .escaparate .caja-tapa .kl-cartela{ width:66% }
.klot .escaparate .hoja-tabla{ position:absolute; left:20%; bottom:5%; width:44%; transform:rotate(2deg); box-shadow:0 22px 40px -20px rgba(44,37,32,.6) }
.klot .escaparate .hoja-carta{ width:21%; right:9%; bottom:8%; transform:rotate(5deg) }
.klot .escaparate .hoja-reverso{ width:21%; right:16%; bottom:34%; transform:rotate(-7deg) }
@media (max-width:560px){ .klot .escaparate .hoja-tabla{ left:8%; width:58% } .klot .escaparate .hoja-carta{ width:30%; right:5% } }
/* la cartela de la tabla no hereda lo de antes (Grandstander verde, recorte) */
.klot .tabla .t-top .kl-cartela b{ font-family:var(--serif); font-weight:500; color:var(--rj); font-size:16cqw }
.klot .tabla .t-top .kl-cartela span, .klot .tabla .t-top span.c-t{ font-size:inherit; color:inherit; white-space:normal; overflow:visible }
.klot .tabla .t-top .kl-cartela i{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* el escaparate, acomodado como la foto: la caja arriba, la tabla abajo, las cartas a la derecha */
.klot .escaparate .hoja-caja{ left:5%; top:5%; width:58% }
.klot .escaparate .hoja-tabla{ left:9%; bottom:4%; top:auto; width:40%; transform:rotate(-1.5deg) }
.klot .escaparate .hoja-reverso{ width:22%; right:7%; top:24%; bottom:auto; transform:rotate(6deg) }
.klot .escaparate .hoja-carta{ width:24%; right:20%; bottom:7%; transform:rotate(-4deg) }
/* el lomo de las de Navidad: del mismo tamaño que las demás, con «KORA» al centro */
.klot .reverso.es-icono{ aspect-ratio:7/8.9; display:flex; align-items:center; justify-content:center }
.klot .reverso.es-icono .carta-in{ width:66%; margin:0; aspect-ratio:auto; padding:12px 6px 10px; gap:4px; justify-content:center }
.klot .reverso .r-marca{ font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.3em; padding-left:.3em; font-size:.8rem; color:#3E3A33 }
.klot .reverso.es-icono .r-orla{ font-size:.8rem; margin:0 }
/* los nombres largos bajan a una segunda línea en vez de cortarse */
.klot .carta .nom{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:clip; letter-spacing:.1em; font-size:.68rem; line-height:1.2 }

/* ══ 19 oct · LA TABLA COMO LA DE LA REFERENCIA (4:5) ═════════════════════
   El perímetro es un solo cuadro de grueso (16 × 20 cuadros, cuadrados de
   verdad en una tabla 4:5), con estrellas rojas en las cuatro esquinas; un
   filete olivo lo separa del papel; y la rejilla llega hasta ese filete. */
.klot .tabla{ aspect-ratio:4/5; container-type:inline-size; display:flex; padding:6.25%;
  background:var(--estrella-roja) top left/6.25% 5% no-repeat, var(--estrella-roja) top right/6.25% 5% no-repeat,
    var(--estrella-roja) bottom left/6.25% 5% no-repeat, var(--estrella-roja) bottom right/6.25% 5% no-repeat,
    var(--cuadros) 0 0/12.5% 10%; border-radius:1px }
.klot .t-papel{ flex:1; min-width:0; display:flex; flex-direction:column; padding:0; background:var(--cr-2); box-shadow:0 0 0 1.5px var(--ol-osc) }
.klot .tabla .t-top{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:auto; margin:0; padding:4.5cqw 4cqw 3cqw; text-align:center; line-height:1; flex:none }
.klot .tabla .t-top b{ font-family:var(--serif); font-weight:500; text-transform:uppercase; color:var(--rj); font-size:10.5cqw; letter-spacing:.2em; padding-left:.2em; line-height:1 }
.klot .tabla .t-top i{ font-style:normal; font-family:var(--serif); text-transform:uppercase; color:var(--ol-osc); font-size:3.3cqw; letter-spacing:.32em; padding-left:.32em; margin-top:2cqw; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2 }
.klot .tabla .t-top em{ font-style:normal; font-family:var(--serif); color:var(--ol-osc); font-size:2.6cqw; letter-spacing:.12em; margin-top:1.6cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.klot .rejilla{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:0;
  border:0; border-top:1px solid rgba(111,124,89,.7) }
.klot .casilla{ aspect-ratio:auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border:0; border-right:1px solid rgba(111,124,89,.7); border-bottom:1px solid rgba(111,124,89,.7); padding:1.4cqw 1.4cqw 1cqw; overflow:hidden }
.klot .casilla:nth-child(4n){ border-right:0 }
.klot .casilla:nth-child(n+13){ border-bottom:0 }
.klot .casilla .retrato{ flex:1 1 0; min-height:0; width:100%; border-radius:1px }
.klot .casilla.es-icono .retrato img{ padding:4% }
.klot .casilla .nom{ font-size:2.3cqw; letter-spacing:.12em; padding-top:1cqw; max-width:100% }
.klot #detalle .tabla{ padding:6.25%; background-size:6.25% 5%, 6.25% 5%, 6.25% 5%, 6.25% 5%, 12.5% 10% }
.klot #detalle .t-papel{ padding:0 }
.klot #detalle .casilla .nom{ font-size:2.3cqw }
.klot #detalle .tabla .t-top b{ font-size:10.5cqw }

/* ══ LA CAJA ABIERTA, CON SU FRASE ═════════════════════════════════════════ */
.klot .incluye{ padding:72px 0 8px }
.klot .incluye .envoltura{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center }
.klot .incluye h2{ font-weight:400; font-size:clamp(30px,3.2vw,42px); line-height:1.1; margin:10px 0 18px }
.klot .incluye ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.klot .incluye li{ font-size:17px; color:var(--clay); padding-left:22px; position:relative }
.klot .incluye li::before{ content:"✶"; position:absolute; left:0; top:1px; color:var(--rj); font-size:13px }
.klot .incluye li b{ color:var(--tinta); font-weight:500 }
.klot .caja-abierta{ position:relative; aspect-ratio:1.18; background:radial-gradient(120% 90% at 30% 15%, #EFE8DD 0, #E5DCCF 60%, #D9CFC0 100%); padding:5% 8% 7%; display:flex; flex-direction:column; gap:0; container-type:inline-size }
.klot .ca-tapa{ flex:0 0 44%; padding:3.2%;
  background:var(--estrella-roja) top left/4.6% auto no-repeat, var(--estrella-roja) top right/4.6% auto no-repeat, var(--cuadros) 0 0/4.6% 9.2%;
  box-shadow:0 2px 0 rgba(44,37,32,.06); border-radius:2px 2px 0 0 }
.klot .ca-panel{ height:100%; background:var(--cr-2); box-shadow:0 0 0 1px var(--ol-osc), inset 0 0 0 5px var(--cr-2), inset 0 0 0 6px rgba(111,124,89,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.4cqw }
.klot .ca-mono{ width:9cqw; height:auto; fill:none; stroke:var(--ol-osc); stroke-width:1.8; stroke-linecap:round }
.klot .ca-mono circle{ fill:var(--ol-osc); stroke:none }
.klot .ca-panel p{ margin:0; font-family:var(--serif); text-transform:uppercase; letter-spacing:.3em; padding-left:.3em; font-size:2.3cqw; line-height:1.55; color:var(--ol-osc) }
.klot .ca-raya{ width:6cqw; height:1px; background:var(--ol-osc); opacity:.6 }
.klot .ca-base{ flex:1; display:grid; grid-template-columns:40% 1fr; gap:3%; padding:3.5%; background:#F1EBDF;
  box-shadow:inset 0 10px 18px -12px rgba(44,37,32,.45), 0 22px 36px -22px rgba(44,37,32,.6); border:1px solid rgba(44,37,32,.08) }
.klot .ca-mazo{ background:repeating-linear-gradient(90deg, var(--ol) 0 2.2cqw, var(--cr) 2.2cqw 4.4cqw); border-radius:6px; display:flex; align-items:center; justify-content:center; padding:10%;
  box-shadow:0 1px 0 rgba(44,37,32,.08), 0 10px 18px -10px rgba(44,37,32,.5), 2px 3px 0 -1px #E6DFD2, 4px 6px 0 -2px #DCD4C6 }
.klot .ca-mazo .kl-cartela{ width:96% }
.klot .ca-cartas{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6%; min-height:0 }
.klot .ca-cartas .carta{ min-height:0; padding:3%; border-radius:6px; overflow:hidden }
.klot .ca-cartas .carta-in{ aspect-ratio:auto; height:100%; padding:4% 4% 3% }
.klot .ca-cartas .carta .nom{ font-size:1.6cqw; padding-top:2% }
@media (max-width:980px){ .klot .incluye .envoltura{ grid-template-columns:1fr; gap:28px } }
/* la tapa de la caja abierta: cuadros del grueso de la banda (como la foto) */
.klot .ca-tapa{ padding:3.6cqw; background:var(--estrella-roja) top left/3.6cqw 3.6cqw no-repeat, var(--estrella-roja) top right/3.6cqw 3.6cqw no-repeat,
  var(--estrella-roja) bottom left/3.6cqw 3.6cqw no-repeat, var(--estrella-roja) bottom right/3.6cqw 3.6cqw no-repeat, var(--cuadros) 0 0/7.2cqw 7.2cqw }
/* el grueso del perímetro: un margen del papel (se mide sobre la tabla; el
   padding en % se medía sobre lo que contiene a la tabla y salía más grueso) */
.klot .tabla, .klot #detalle .tabla{ padding:0 }
.klot .t-papel, .klot #detalle .t-papel{ margin:6.25% }

/* 19 oct · Vivi: «menos espacio para el título, para que los espacios y las
   tarjetas sean verticales como las teníamos antes, no cuadradas». La tabla
   pasa a 2:3 (16 × 24 cuadros de perímetro, cuadrados de verdad) y el
   encabezado se compacta: las casillas quedan casi 7:9, como la carta. */
.klot .tabla{ aspect-ratio:2/3;
  background:var(--estrella-roja) top left/6.25% 4.1667% no-repeat, var(--estrella-roja) top right/6.25% 4.1667% no-repeat,
    var(--estrella-roja) bottom left/6.25% 4.1667% no-repeat, var(--estrella-roja) bottom right/6.25% 4.1667% no-repeat,
    var(--cuadros) 0 0/12.5% 8.3333% }
.klot #detalle .tabla{ background-size:6.25% 4.1667%, 6.25% 4.1667%, 6.25% 4.1667%, 6.25% 4.1667%, 12.5% 8.3333% }
.klot .tabla .t-top{ padding:2.6cqw 3cqw 1.8cqw }
.klot .tabla .t-top b, .klot #detalle .tabla .t-top b{ font-size:9.5cqw }
.klot .tabla .t-top i{ font-size:3cqw; margin-top:1.2cqw }
.klot .tabla .t-top em{ font-size:2.3cqw; margin-top:.8cqw }
/* que la tabla en grande quepa a lo alto de la pantalla */
.klot #detalle{ max-width:min(560px, 94vw, calc((100vh - 120px) / 1.5)) }

/* 19 oct · Vivi: «falta que tenga las líneas verdes en el perímetro exterior
   y una interior». Un filete olivo por fuera de los cuadros y otro por dentro,
   junto al papel (en las tablas y en la tapa de la caja, como la foto). */
.klot .tabla{ box-shadow:inset 0 0 0 1.6px var(--ol-osc) }
.klot .escaparate .hoja-tabla{ box-shadow:inset 0 0 0 1.6px var(--ol-osc), 0 22px 40px -20px rgba(44,37,32,.6) }
.klot .t-papel{ box-shadow:0 0 0 1.6px var(--ol-osc) }
.klot .escaparate .hoja-caja{ box-shadow:inset 0 0 0 1.6px var(--ol-osc), 0 2px 0 rgba(44,37,32,.08), 0 26px 40px -22px rgba(44,37,32,.6) }
.klot .escaparate .caja-tapa{ box-shadow:0 0 0 1.6px var(--ol-osc) }
.klot .ca-tapa{ box-shadow:inset 0 0 0 1.6px var(--ol-osc), 0 2px 0 rgba(44,37,32,.06) }

/* 19 oct · Vivi: «primero va línea / espacio blanco, después línea gruesa
   verde, luego línea blanca / espacio, luego cuadros (checar tamaño para que
   las esquinas siempre queden bien), después espacio blanco y otra vez línea
   verde». Todo se mide en cqw (sobre el ancho de la tabla):
     2 de espacio · 1.1 de filete · 1.4 de espacio  → la banda de cuadros
   mide 100 − 2 × 4.5 = 91 de ancho = 17 cuadros exactos (impar: las cuatro
   esquinas caen en el mismo color y ahí va la estrella); de alto, 25. Por
   dentro, 1.3 de espacio crema y el filete delgado. */
.klot .tabla{ --s:calc(91cqw / 17); aspect-ratio:auto; display:block; padding:0; background:var(--cr-2); box-shadow:none }
.klot .escaparate .hoja-tabla{ box-shadow:0 22px 40px -20px rgba(44,37,32,.6) }
.klot .t-marco{ margin:2cqw; border:1.1cqw solid var(--ol-osc); padding:1.4cqw }
.klot .t-cuadros{ box-sizing:border-box; height:calc(var(--s) * 25); padding:var(--s); display:flex;
  background:
    var(--estrella-roja) left top/var(--s) var(--s) no-repeat, var(--estrella-roja) right top/var(--s) var(--s) no-repeat,
    var(--estrella-roja) left bottom/var(--s) var(--s) no-repeat, var(--estrella-roja) right bottom/var(--s) var(--s) no-repeat,
    linear-gradient(var(--cr-2), var(--cr-2)) content-box,
    var(--cuadros) 0 0/calc(var(--s) * 2) calc(var(--s) * 2) }
.klot .t-papel, .klot #detalle .t-papel{ flex:1; margin:1.3cqw; box-shadow:0 0 0 1.4px var(--ol-osc) }
.klot #detalle .tabla{ padding:0; background:var(--cr-2) }
/* 27 de alto (impar, como el 17: las esquinas siguen del mismo color) para que las casillas vuelvan a ser verticales */
.klot .t-cuadros{ height:calc(var(--s) * 27) }
/* 19 oct · Vivi: «todo el perímetro un poco más chico / compacto, para que
   los cuadros interiores crezcan y luzcan más las ilustraciones». Las mismas
   capas, más delgadas, y cuadros más chicos: 100 − 2 × 3 = 94 de banda =
   21 cuadros (impar), y de alto 33 (impar): las esquinas siguen bien. */
.klot .tabla{ --s:calc(94cqw / 21) }
.klot .t-marco{ margin:1.3cqw; border-width:.8cqw; padding:.9cqw }
.klot .t-cuadros{ height:calc(var(--s) * 33) }
.klot .t-papel, .klot #detalle .t-papel{ margin:.9cqw }

/* ══ 19 oct · TABLA Y CAJA EN 3:4 ══════════════════════════════════════════
   Vivi: «hacer la lotería en proporción 3:4… y la caja también lo más
   similar a la imagen, y también en 3:4». El perímetro mide 3cqw por lado,
   así que la banda de cuadros es de 94 × 127.33 (cqw): 23 × 31 cuadros (los
   dos impares — las esquinas cierran igual — y casi cuadrados: 4.09 × 4.11). */
.klot .tabla, .klot .escaparate .hoja-caja, .klot .ca-tapa{ --sx:calc(94cqw / 23); --sy:calc(127.333cqw / 31); aspect-ratio:3/4; container-type:inline-size }
.klot .t-cuadros{ height:127.333cqw; padding:var(--sy) var(--sx);
  background:
    var(--estrella-roja) left top/var(--sx) var(--sy) no-repeat, var(--estrella-roja) right top/var(--sx) var(--sy) no-repeat,
    var(--estrella-roja) left bottom/var(--sx) var(--sy) no-repeat, var(--estrella-roja) right bottom/var(--sx) var(--sy) no-repeat,
    linear-gradient(var(--cr-2), var(--cr-2)) content-box,
    var(--cuadros) 0 0/calc(var(--sx) * 2) calc(var(--sy) * 2) }

/* La caja cerrada: mismo perímetro; adentro, filete, cuadros grandes con
   destellos (como la tapa de la foto) y la cartela al centro. */
.klot .escaparate .hoja-caja{ position:absolute; left:5%; top:5%; width:46%; padding:0; background:var(--cr-2); transform:rotate(-3deg);
  box-shadow:0 2px 0 rgba(44,37,32,.08), 0 26px 40px -22px rgba(44,37,32,.6) }
.klot .hoja-caja .t-marco, .klot .ca-tapa .t-marco{ margin:1.3cqw; border:.8cqw solid var(--ol-osc); padding:.9cqw }
.klot .escaparate .caja-tapa, .klot .ca-panel{ flex:1; margin:.9cqw; box-shadow:0 0 0 1.4px var(--ol-osc) }
.klot .escaparate .caja-tapa{ background:var(--destellos) center/26.4% auto; display:flex; align-items:center; justify-content:center }
.klot .hoja-caja .t-cuadros, .klot .ca-tapa .t-cuadros{ display:flex }
.klot .escaparate .caja-tapa .kl-cartela{ width:84% }
.klot .escaparate .hoja-tabla{ left:auto; right:6%; top:auto; bottom:5%; width:44%; transform:rotate(2deg) }
.klot .escaparate .hoja-carta{ width:20%; right:auto; left:30%; bottom:4%; transform:rotate(-6deg); z-index:2 }
.klot .escaparate .hoja-reverso{ width:19%; right:4%; top:6%; bottom:auto; transform:rotate(7deg) }

/* La caja abierta: la tapa (3:4) con su frase y, al lado, el fondo (3:4) con el mazo y las cartas */
.klot .caja-abierta{ aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:5%; align-items:end; padding:7% 6% 8% }
.klot .ca-tapa{ width:100%; padding:0; background:var(--cr-2); flex:none; border-radius:2px; transform:rotate(-2deg);
  box-shadow:0 2px 0 rgba(44,37,32,.06), 0 18px 30px -18px rgba(44,37,32,.55) }
.klot .ca-panel{ height:auto; background:var(--cr-2); gap:3cqw }
.klot .ca-mono{ width:20cqw }
.klot .ca-panel p{ font-size:4.6cqw }
.klot .ca-raya{ width:12cqw }
.klot .ca-base{ aspect-ratio:3/4; grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:5%; padding:7%; border-radius:2px; container-type:inline-size }
.klot .ca-mazo{ aspect-ratio:7/5; padding:9% 12%; background:repeating-linear-gradient(90deg, var(--ol) 0 4cqw, var(--cr) 4cqw 8cqw) }
.klot .ca-cartas .carta .nom{ font-size:3.4cqw }
@media (max-width:560px){ .klot .escaparate .hoja-caja{ width:52% } .klot .escaparate .hoja-tabla{ width:50% } }
/* en 3:4 hay menos alto: el encabezado se compacta para que las casillas no queden cuadradas */
.klot .tabla .t-top{ padding:1.8cqw 3cqw 1.2cqw }
.klot .tabla .t-top b, .klot #detalle .tabla .t-top b{ font-size:8.4cqw }
.klot .tabla .t-top i{ font-size:2.8cqw; margin-top:.8cqw }
.klot .tabla .t-top em{ font-size:2.2cqw; margin-top:.5cqw }
.klot .casilla .nom{ font-size:2.1cqw; padding-top:.6cqw }
.klot .casilla{ padding:1cqw 1cqw .7cqw }
/* la caja abierta: el mazo más bajo, las cartas más altas */
.klot .ca-mazo{ aspect-ratio:2/1; padding:5% 14% }
.klot .ca-cartas .carta-in{ padding:3% 3% 2% }

/* ── 22 oct · El taller, en su propia vista (Vivi: «que abra una página nueva en
   donde ahí empiezas ya con tu proyecto»). Sin la página del producto; la del
   producto sin el taller. ── */
.klot:not(.en-taller) .taller{display:none}
.klot.en-taller > .envoltura, .klot.en-taller .pasos, .klot.en-taller .incluye{display:none}
.klot.en-taller .taller{padding-top:28px}
.klot .kl-volver{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.klot .kl-volver:hover{color:var(--tinta)}
.klot .kl-tams{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:rgba(44,37,32,.07)}
.klot .kl-tams button{border:0;background:none;border-radius:8px;padding:7px 14px;cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--clay)}
.klot .kl-tams button.on{background:#fff;color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.klot .kl-aviso-ej{margin:-10px 0 18px;padding:10px 14px;background:rgba(143,169,138,.16);font-family:var(--sans);font-size:13.5px;color:var(--clay)}
.klot .kl-aviso-ej .suave{margin-left:6px}
.klot .nombre-lot::placeholder{color:rgba(44,37,32,.35)}
@media (max-width:640px){ .klot .kl-tams{width:100%} .klot .kl-tams button{flex:1} }

/* 22 oct · Vivi: «no se ve bien que los títulos sean más delgados que su explicación»: un poco más gruesos */
.klot .pliegues summary{font-weight:500;color:var(--tinta)}

/* 22 oct · la marca de agua «KORA · MUESTRA» sobre los retratos del taller y del
   resumen del pedido (no en los íconos de Navidad), como en las tarjetas */
.klot .taller .carta:not(.es-icono) .retrato, .klot .taller .casilla:not(.es-icono) .retrato, .klot-res .carta:not(.es-icono) .retrato, .klot-res .casilla:not(.es-icono) .retrato{ position:relative }
.klot .taller .carta:not(.es-icono) .retrato::after, .klot .taller .casilla:not(.es-icono) .retrato::after, .klot-res .carta:not(.es-icono) .retrato::after, .klot-res .casilla:not(.es-icono) .retrato::after{ content:''; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150' viewBox='0 0 220 150'%3E%3Cg transform='rotate(-24 110 75)' font-family='Jost,Helvetica,Arial,sans-serif' font-size='15' letter-spacing='4' text-anchor='middle'%3E%3Ctext x='110' y='80' fill='rgba(255,255,255,.42)' stroke='rgba(31,29,27,.16)' stroke-width='.6'%3EKORA %C2%B7 MUESTRA%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 110px auto repeat }
.klot .casilla:not(.es-icono) .retrato::after, .klot-res .casilla:not(.es-icono) .retrato::after{ background-size:56px auto }

/* ── 22 oct · Vivi: el panel del taller más grande y a la DERECHA, como los demás
   editores; la vista a la izquierda con dos tablas por renglón; el retrato para la
   foto más grande y el texto más legible. ── */
@media (min-width:981px){
  .klot .mesa{grid-template-columns:minmax(0,1fr) 400px}
  .klot .mesa .vista{order:1}
  .klot .mesa .kl-panel{order:2;border-right:0;border-left:1px solid rgba(44,37,32,.08)}
  .klot .tablas{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
.klot .kl-panel{padding:24px 24px 28px}
.klot .kl-panel .kl-k{font-size:12px}
.klot .contador{font-size:14px}
.klot .familia input.apellido{font-size:23px}
.klot .persona{grid-template-columns:72px 1fr auto;gap:14px;padding:10px 0}
.klot .cara{width:72px;height:90px;border-radius:4px}
.klot .cara .mas{font-size:10.5px;opacity:1;height:30%}
.klot .persona input.nom{font-size:20px}
.klot .persona .estado{font-size:13.5px;color:var(--clay);gap:12px}
.klot .kl-pintar{font-size:13.5px}
.klot .kl-panel .suave{font-size:14px}
.klot .kl-panel .pie-panel p{font-size:14px}
.klot .nota{font-size:14px}
/* 22 oct · «Un poquito sobre él/ella»: quién es (separado y más marcado) y cómo es */
.klot .kl-como{font-size:13.5px}
.klot .kl-como summary{padding:2px 0}
.klot .kl-sub{margin:12px 0 6px;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.klot .kl-sub small{letter-spacing:.04em;text-transform:none;color:var(--taupe);margin-left:4px}
.klot .kl-quien{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid rgba(44,37,32,.12)}
.klot .kl-quien button{padding:6px 14px;font-size:13px;border-radius:6px;border-color:rgba(44,37,32,.28)}
.klot .kl-quien button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.klot .kl-rasgos button{font-size:12.5px;padding:4px 11px}
.klot .kl-es-masc{font-size:12px;color:var(--eucalipto);border:1px solid rgba(76,102,87,.35);border-radius:8px;padding:0 8px}
.klot .agregar{flex-wrap:wrap}
/* 22 oct · «¿Quién es?» con los mismos botones que «¿Cómo es?» (sólo separados), y todo a lo ancho del renglón */
.klot .persona{position:relative}
.klot .persona .kl-como{margin-top:2px}
.klot .persona .kl-como > :not(summary){margin-left:-86px}   /* 72 de la foto + 14 de separación */
.klot .kl-quien button{padding:4px 11px;font-size:12.5px;border-radius:8px;border-color:rgba(44,37,32,.18)}
.klot .kl-quien button[aria-pressed="true"]{background:var(--salvia);border-color:var(--eucalipto);color:#22301F}
/* 22 oct · el reverso de las cartas de la familia: sin nombre y sin marco */
.klot .reverso:not(.es-icono) .carta-in{ border:0; justify-content:center; padding:14px 12px 10px }
.klot .reverso:not(.es-icono) .r-desc{ margin:auto 0; font-size:.7rem }
.klot .kl-rasgos .kl-mas{min-width:30px;font-size:15px;line-height:1;padding:3px 9px}
.klot .kl-propio{border:1px solid var(--eucalipto);border-radius:8px;padding:4px 11px;font-family:var(--sans);font-size:12.5px;width:130px;background:#fff;outline:none}
/* 22 oct · las cartas por familia, y abajo las de Navidad */
.klot .kl-cartas-bar{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.klot .kl-cartas-bar .lados{margin:0}
.klot .kl-cartas-t{grid-column:1 / -1;margin:14px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.klot .kl-cartas-t:first-child{margin-top:0}
/* 22 oct · el aviso del límite de personas */
.klot .kl-tope{border:0;border-radius:0;padding:26px 26px 22px;width:min(440px,calc(100vw - 32px));background:var(--pagina);box-shadow:0 30px 60px -20px rgba(31,29,27,.45)}
.klot .kl-tope::backdrop{background:rgba(31,29,27,.45)}
.klot .kl-tope h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:6px 0 10px}
.klot .kl-tope p{font-size:16px;color:var(--clay);margin:0 0 6px}
.klot .kl-tope .acciones{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap}
/* 21 oct · Vivi: «tenemos más espacio hacia la derecha… un adjetivo más por renglón»:
   lo de adentro de «Un poquito sobre…» llega también bajo la columna de la ×
   (≈23 px + 14 de separación); los botones, un pelito más compactos. */
.klot .persona .kl-como > :not(summary){margin-right:-37px}
.klot .kl-rasgos{gap:5px 4px}
.klot .kl-rasgos button{padding:4px 7px}
.klot .kl-desc-propia{display:block;box-sizing:border-box;width:calc(100% + 123px)}
.klot .kl-desc-acc{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.klot .reverso:not(.es-icono) .carta-in{container-type:inline-size}
.klot .reverso.r-media:not(.es-icono) .r-desc{font-size:min(.66rem, 9.6cqw);line-height:1.25}
.klot .reverso.r-larga:not(.es-icono) .r-desc{font-size:min(.66rem, 8.6cqw);line-height:1.22}
/* ── 22 oct · Vivi: «el panel lateral como está en el editor del libro, más
   integrado y sin que se vean dos scrolls (el del panel y el de la página)», y
   «un poquiiito más de grosor al texto delgadito». En escritorio el taller llena
   la ventana como el editor del libro: la página ya no se mueve; las tablas se
   recorren en su columna y el panel en la suya, pegado a la orilla derecha, del
   mismo color de la página y con la barrita de scroll del editor. ── */
.klot{font-weight:400}
@media (min-width:981px){
  html:has(.klot.active.en-taller){overflow:hidden}
  .klot.active.en-taller{height:calc(100dvh - var(--kl-arriba, 70px));display:flex;flex-direction:column;overflow:hidden}
  .klot.en-taller .taller{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:18px 0 0}
  .klot.en-taller .taller > .envoltura{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;margin:0;padding:0 0 0 28px}
  .klot.en-taller > footer{display:none}
  .klot.en-taller .taller .cabeza{margin-bottom:16px;padding-right:28px}
  .klot.en-taller .kl-aviso-ej{margin-right:28px}
  .klot.en-taller .mesa{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) 420px;background:none}
  .klot.en-taller .mesa .vista{min-height:0;overflow-y:auto;background:var(--gris-editor);scrollbar-width:thin;scrollbar-color:rgba(80,74,66,.42) transparent}
  .klot.en-taller .mesa .kl-panel{position:static;align-self:stretch;max-height:none;height:100%;min-height:0;overflow-y:auto;background:var(--pagina);
    border-left:1px solid rgba(90,75,57,.25);padding:22px 22px 32px 26px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(80,74,66,.42) transparent}
  .klot.en-taller .mesa .kl-panel::-webkit-scrollbar, .klot.en-taller .mesa .vista::-webkit-scrollbar{width:11px}
  .klot.en-taller .mesa .kl-panel::-webkit-scrollbar-track, .klot.en-taller .mesa .vista::-webkit-scrollbar-track{background:transparent}
  .klot.en-taller .mesa .kl-panel::-webkit-scrollbar-thumb, .klot.en-taller .mesa .vista::-webkit-scrollbar-thumb{background:rgba(80,74,66,.42);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
  .klot.en-taller .resumen{flex:none}
}
/* ══ 22 oct · LA TABLA EN 2:3 (15 × 22.5 cm) ══════════════════════════════
   Vivi: la hoja de 30 × 45 «literal cortada en 4». La tabla pasa de 3:4 a 2:3:
   de alto 150cqw, y la banda de cuadros, 94 × 144: 23 × 35 cuadros (impares,
   las esquinas cierran igual; 4.09 × 4.11, casi cuadrados). La caja sigue en 3:4.
   Con el alto de más, cada casilla queda casi de la forma de la carta (7:9). */
.klot .tabla{ aspect-ratio:2/3; --sy:calc(144cqw / 35) }
.klot .tabla .t-cuadros{ height:144cqw }
/* 22 oct · Vivi: «más grande el espacio donde está el título y subtítulo… aprovechando
   que quedó más vertical, y subtítulo más grande» */
.klot .tabla .t-top{ padding:5cqw 3cqw 4cqw }
.klot .tabla .t-top b, .klot #detalle .tabla .t-top b{ font-size:10cqw }
.klot .tabla .t-top i{ font-size:4.2cqw; letter-spacing:.28em; padding-left:.28em; margin-top:2.2cqw }
.klot .tabla .t-top.t-largo i{ font-size:3.2cqw; letter-spacing:.2em; padding-left:.2em }
/* 22 oct · Vivi: «el diseño de los cuadritos un poquiiito más chico… para crecer las
   ilustraciones»: 29 × 45 cuadros (impares; 3.24 × 3.2, casi cuadrados) en vez de 23 × 35. */
.klot .tabla{ --sx:calc(94cqw / 29); --sy:calc(144cqw / 45) }

/* ══ 22 oct · LA CABEZA DEL TALLER Y CADA QUIEN COMO SU CARTA ═════════════
   Vivi: sin «Ver el ejemplo»; «Tu lotería» pasa a «Lotería – Familia X», donde
   ahí mismo se escribe el nombre; los tamaños más largos y menos gordos, y
   «+ Nueva lotería» más arriba. En el panel, cada persona es su carta: frente
   (con «Agregar foto» o «Pintar» encima) y vuelta (con lo que dice de él/ella). */
.klot .taller .cabeza{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:10px }
.klot .kl-cab-top{ display:flex; justify-content:space-between; align-items:center; gap:12px }
.klot .kl-cab-der{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end }   /* 27 oct · el botón de imprenta del equipo */
.klot .taller .cabeza h2.kl-titulo{ display:flex; align-items:baseline; gap:.32em; margin:2px 0 0; font-size:clamp(28px, 4.2vw, 44px); min-width:0 }
.klot .kl-titulo > span{ flex:none }
.klot .kl-titulo .kl-guion{ color:var(--taupe) }
.klot .kl-titulo .nombre-lot{ flex:1; min-width:0; width:auto; margin:0; padding:0 0 2px; font:inherit; color:var(--tinta); border-bottom:1px dashed rgba(44,37,32,.22) }
.klot .kl-titulo .nombre-lot:focus{ border-bottom-style:solid }
.klot .kl-tams{ display:flex; width:100%; max-width:640px; padding:2px }
.klot .kl-tams button{ flex:1; padding:5px 12px; white-space:nowrap; font-size:13px }
.klot .kl-tams button b{ font-weight:500 }
.klot .kl-tam-p i{ font-style:normal }

.klot .persona.kl-p{ display:block; padding:14px 0 12px; border-top:1px solid rgba(44,37,32,.08) }
.klot .familia .persona.kl-p:first-of-type{ border-top:0 }
.klot .kl-p-cab{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.klot .kl-p-cab .nom{ flex:1; min-width:0 }
.klot .kl-p-cartas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:320px }
.klot .kl-p-lado{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0 }
.klot .kl-p-lado .carta{ width:100% }
.klot .kl-p-lbl{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe) }
.klot .kl-frente .retrato{ position:relative }
.klot .kl-sobre{ position:absolute; left:50%; bottom:10%; transform:translateX(-50%); z-index:2; white-space:nowrap;
  border:0; border-radius:8px; padding:6px 12px; background:rgba(31,29,27,.82); color:#fff; font-family:var(--sans); font-size:12px; letter-spacing:.04em; cursor:pointer }
.klot .kl-sobre:hover{ background:#1F1D1B }
.klot .kl-sobre-pintando{ cursor:default; background:rgba(31,29,27,.6) }
.klot .kl-atras{ cursor:pointer; transition:box-shadow .2s }
.klot .kl-atras:hover, .klot .kl-atras:focus-visible{ box-shadow:0 0 0 2px var(--eucalipto); outline:none }
.klot .persona.kl-p .estado{ margin-top:8px }
.klot .persona.kl-p .kl-como{ margin-top:10px }
.klot .persona.kl-p .kl-como > :not(summary){ margin-left:0; margin-right:0 }
.klot .persona.kl-p .kl-desc-propia{ width:100% }
.klot .kl-panel .pie-panel:empty{ display:none }
/* 22 oct · Vivi: «las tarjetas aún más grandes… nos pegamos un poco más a los lados, y el botón de
   nueva lotería más chico… que sí diga la cantidad de personas en su mismo botón, puede ser de 2 renglones» */
.klot .kl-p-cartas{ max-width:none; gap:10px }
.klot .kl-cab-top .btn.kl-chico{ padding:5px 10px; font-size:10px; letter-spacing:.1em; min-height:0; line-height:1.3 }
@media (min-width:981px){ .klot.en-taller .mesa .kl-panel{ padding:20px 14px 30px 18px } }
@media (max-width:980px){ .klot .kl-panel{ padding:18px 6px 24px } }
@media (max-width:640px){
  .klot .kl-tams button{ white-space:normal; line-height:1.25; padding:6px 8px }
  .klot .kl-tam-p{ display:block; font-size:11.5px; color:var(--taupe) }
  .klot .kl-tam-p i{ display:none }
  .klot .kl-tams button.on .kl-tam-p{ color:var(--clay) }
}
/* la vuelta de las cartas del panel: la letra crece con la carta */
.klot .kl-atras:not(.es-icono) .r-desc{ font-size:clamp(10px, 8.2cqw, 15px); line-height:1.3 }
.klot .kl-atras.r-media:not(.es-icono) .r-desc{ font-size:clamp(9.5px, 7.6cqw, 14px) }
.klot .kl-atras.r-larga:not(.es-icono) .r-desc{ font-size:clamp(9px, 7cqw, 13px) }
/* 22 oct · Vivi: «la imagen de las personas en la tabla más chica y los de default más
   grandes, ahorita se siente desproporcionado». En la casilla, el retrato deja aire
   alrededor (papel, sin la caja beige) y los íconos de Navidad llegan a la orilla. */
.klot .casilla:not(.es-icono) .retrato{ background:none; padding:7% 12% 2% }
.klot .casilla:not(.es-icono) .retrato img{ border-radius:1px; background:#F1ECE2 }
.klot .casilla:not(.es-icono) .retrato::after, .klot-res .casilla:not(.es-icono) .retrato::after{ inset:7% 12% 2% }
.klot .casilla.es-icono .retrato img{ padding:0 }

/* ══ 22 oct · Vivi: «sale como pixeleada o rara la foto… que en el panel salga sin
   marca de aguas y que le puedas picar a la tarjeta para verla en grande con buena
   resolución pero con la marca de aguas; quitarle el fondo a la ilustración para
   que se integre mejor al papel; el texto del reverso más grande; desplegar/cerrar
   la info de la persona; y el texto sobre la persona que se lea bien» ══ */
.klot .taller .kl-frente .retrato::after{ display:none }
.klot .kl-frente{ cursor:pointer }
.klot .kl-frente:focus-visible{ outline:2px solid var(--eucalipto); outline-offset:2px }
/* el papel de la ilustración se funde con el de la carta (y con el blanco al imprimir) */
.klot .pintado .retrato{ background:none }
.klot .pintado .retrato img, .klot .casilla.pintado .retrato img{ mix-blend-mode:multiply; background:none }
/* la carta en grande, con su marca de agua */
.klot #detalle .kl-grande{ width:min(380px, 78vw); box-shadow:none }
.klot #detalle .kl-grande .nom{ font-size:1.1rem }
.klot #detalle .carta:not(.es-icono) .retrato{ position:relative }
.klot #detalle .carta:not(.es-icono) .retrato::after{ content:''; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cg transform='rotate(-24 130 85)' font-family='Jost,Helvetica,Arial,sans-serif' font-size='21' font-weight='500' letter-spacing='5' text-anchor='middle'%3E%3Ctext x='130' y='92' fill='rgba(255,255,255,.62)' stroke='rgba(31,29,27,.30)' stroke-width='.9'%3EKORA %C2%B7 MUESTRA%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 170px auto repeat }
/* la vuelta, con la letra más grande */
.klot .kl-atras:not(.es-icono) .r-desc{ font-size:clamp(11px, 9.4cqw, 17px); line-height:1.32; color:#2B2621 }
.klot .kl-atras.r-media:not(.es-icono) .r-desc{ font-size:clamp(10.5px, 8.6cqw, 16px) }
.klot .kl-atras.r-larga:not(.es-icono) .r-desc{ font-size:clamp(10px, 7.9cqw, 15px) }
/* «Un poquito sobre…» se abre y se cierra como un renglón con su flecha */
.klot .persona.kl-p .kl-como > summary{ display:flex; align-items:baseline; gap:6px; padding:10px 2px; border-top:1px solid rgba(44,37,32,.1); border-bottom:1px solid rgba(44,37,32,.1); font-size:15px }
.klot .persona.kl-p .kl-como > summary::before{ content:none }
.klot .persona.kl-p .kl-como > summary::after{ content:""; margin-left:auto; flex:none; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); align-self:center }
.klot .persona.kl-p .kl-como[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.klot .persona.kl-p .kl-como[open] > summary{ border-bottom-color:transparent }
/* lo que dirá atrás: lo más importante de leer */
.klot .kl-desc{ font-style:normal; font-size:17px; line-height:1.5; color:#2B2621; background:#fff; border:1px solid rgba(44,37,32,.14); padding:12px 14px }
.klot .kl-desc-propia{ font-style:normal; font-size:17px; line-height:1.5; color:#2B2621 }
/* 22 oct · la carta en grande: un pop up verde olivo, arriba Frente / Atrás y la ×; la carta sin el filete que la enmarcaba */
.klot .kl-carta-pop{ border:0; padding:22px 26px 30px; width:min(460px, 94vw); max-height:94vh; overflow:auto; background:var(--ol-osc, #6F7C59); border-radius:0; box-shadow:0 30px 70px -20px rgba(0,0,0,.55) }
.klot .kl-carta-pop::backdrop{ background:rgba(31,29,27,.55) }
.klot .kl-pop-arriba{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.klot .kl-pop-lados{ margin:0; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3) }
.klot .kl-pop-lados button{ color:#fff }
.klot .kl-pop-lados button[aria-pressed="true"]{ background:#fff; color:var(--ol-osc, #6F7C59) }
.klot .kl-pop-x{ border:0; background:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; padding:0 4px }
.klot .kl-carta-pop .kl-grande{ width:100%; margin:0 auto; box-shadow:0 18px 40px -18px rgba(0,0,0,.5) }
.klot .kl-carta-pop .kl-grande .carta-in{ border:0 }
.klot .kl-carta-pop .kl-grande .nom{ font-size:1.15rem }
.klot .kl-carta-pop .kl-grande.reverso:not(.es-icono) .carta-in{ container-type:inline-size; justify-content:center }
.klot .kl-carta-pop .kl-grande.reverso:not(.es-icono) .r-desc{ font-size:clamp(14px, 6.4cqw, 22px); line-height:1.45; color:#2B2621 }
.klot .kl-carta-pop .carta:not(.es-icono) .retrato{ position:relative }
.klot .kl-carta-pop .carta:not(.es-icono) .retrato::after{ content:''; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cg transform='rotate(-24 130 85)' font-family='Jost,Helvetica,Arial,sans-serif' font-size='21' font-weight='500' letter-spacing='5' text-anchor='middle'%3E%3Ctext x='130' y='92' fill='rgba(255,255,255,.62)' stroke='rgba(31,29,27,.30)' stroke-width='.9'%3EKORA %C2%B7 MUESTRA%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 170px auto repeat }
/* 22 oct · Vivi: el pop up más oscuro, con esquinas redondeadas y un poco más grande; Frente / Atrás al centro, redondeados */
.klot .kl-carta-pop{ background:#4E5A3E; border-radius:18px; width:min(540px, 94vw); padding:22px 30px 34px }
.klot .kl-pop-arriba{ position:relative; justify-content:center }
.klot .kl-pop-x{ position:absolute; right:-6px; top:50%; transform:translateY(-50%) }
.klot .kl-pop-lados{ border-radius:8px; padding:3px }
.klot .kl-pop-lados button{ border-radius:8px; padding:7px 20px; font-size:13px }
/* 22 oct · Vivi: «el botón no es en semicírculo, es rectangular con esquinas redondeadas, como en
   toda la página». Los selectores de dos opciones: la caja con 10 px y cada opción con 7 px. */
.klot .kl-tams, .klot .kl-pop-lados{ border-radius:10px }
.klot .kl-tams button, .klot .kl-pop-lados button{ border-radius:7px }
.klot .kl-pop-lados button{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; padding:8px 20px }
/* 22 oct · Vivi: «el nombre del personaje debe ir bastante más grande… casi no se lee» (era en
   la carta en grande; en la tabla se queda como estaba) */
.klot .carta .nom{ font-size:.92rem; letter-spacing:.08em; font-weight:500; color:#2B2621 }
.klot .kl-carta-pop .kl-grande .nom{ font-size:1.9rem; letter-spacing:.1em; padding-top:12px }   /* 22 oct · Vivi: el nombre en el pop up, bastante más grande */
/* los nombres largos de la carta en dos renglones, sin cortarse */
.klot .carta .nom{ white-space:normal; text-overflow:clip; line-height:1.12; text-align:center; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2 }
/* 22 oct · Vivi: el nombre de la tabla un poquito más grande, y la marca de agua más grande */
.klot .casilla .nom, .klot #detalle .casilla .nom{ font-size:2.45cqw }
.klot .taller .carta:not(.es-icono) .retrato::after, .klot-res .carta:not(.es-icono) .retrato::after{ background-size:150px auto }
.klot .casilla:not(.es-icono) .retrato::after, .klot-res .casilla:not(.es-icono) .retrato::after{ background-size:80px auto }
.klot .kl-carta-pop .carta:not(.es-icono) .retrato::after{ background-size:240px auto }

/* ══ 27 oct · LOS CUADRITOS DE LA TABLA, DIBUJADOS UNO POR UNO ══════════════
   Vivi: «que revises bien los cuadritos del diseño porque ahorita se
   desconfiguraron». El damero era un conic-gradient repetido cada 2 × 2
   cuadros, y al agrandarlo para la hoja de imprenta cada repetición quedaba
   en una fracción de pixel: salían cuadros de distinto ancho con una franja
   más clara a un lado. Ahora la orilla es un dibujo de 29 × 45 cuadros —uno
   por cuadro olivo— estirado al tamaño exacto de la banda: queda parejo a
   cualquier tamaño y en el PDF es vector. Las esquinas (blancas, con su
   estrella) no cambian. */
.klot .tabla .t-cuadros{
  background:
    var(--estrella-roja) left top/var(--sx) var(--sy) no-repeat, var(--estrella-roja) right top/var(--sx) var(--sy) no-repeat,
    var(--estrella-roja) left bottom/var(--sx) var(--sy) no-repeat, var(--estrella-roja) right bottom/var(--sx) var(--sy) no-repeat,
    linear-gradient(var(--cr-2), var(--cr-2)) content-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 45' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg fill='%2397A383'%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='7' y='0' width='1' height='1'/%3E%3Crect x='9' y='0' width='1' height='1'/%3E%3Crect x='11' y='0' width='1' height='1'/%3E%3Crect x='13' y='0' width='1' height='1'/%3E%3Crect x='15' y='0' width='1' height='1'/%3E%3Crect x='17' y='0' width='1' height='1'/%3E%3Crect x='19' y='0' width='1' height='1'/%3E%3Crect x='21' y='0' width='1' height='1'/%3E%3Crect x='23' y='0' width='1' height='1'/%3E%3Crect x='25' y='0' width='1' height='1'/%3E%3Crect x='27' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='28' y='1' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='28' y='3' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='28' y='5' width='1' height='1'/%3E%3Crect x='0' y='7' width='1' height='1'/%3E%3Crect x='28' y='7' width='1' height='1'/%3E%3Crect x='0' y='9' width='1' height='1'/%3E%3Crect x='28' y='9' width='1' height='1'/%3E%3Crect x='0' y='11' width='1' height='1'/%3E%3Crect x='28' y='11' width='1' height='1'/%3E%3Crect x='0' y='13' width='1' height='1'/%3E%3Crect x='28' y='13' width='1' height='1'/%3E%3Crect x='0' y='15' width='1' height='1'/%3E%3Crect x='28' y='15' width='1' height='1'/%3E%3Crect x='0' y='17' width='1' height='1'/%3E%3Crect x='28' y='17' width='1' height='1'/%3E%3Crect x='0' y='19' width='1' height='1'/%3E%3Crect x='28' y='19' width='1' height='1'/%3E%3Crect x='0' y='21' width='1' height='1'/%3E%3Crect x='28' y='21' width='1' height='1'/%3E%3Crect x='0' y='23' width='1' height='1'/%3E%3Crect x='28' y='23' width='1' height='1'/%3E%3Crect x='0' y='25' width='1' height='1'/%3E%3Crect x='28' y='25' width='1' height='1'/%3E%3Crect x='0' y='27' width='1' height='1'/%3E%3Crect x='28' y='27' width='1' height='1'/%3E%3Crect x='0' y='29' width='1' height='1'/%3E%3Crect x='28' y='29' width='1' height='1'/%3E%3Crect x='0' y='31' width='1' height='1'/%3E%3Crect x='28' y='31' width='1' height='1'/%3E%3Crect x='0' y='33' width='1' height='1'/%3E%3Crect x='28' y='33' width='1' height='1'/%3E%3Crect x='0' y='35' width='1' height='1'/%3E%3Crect x='28' y='35' width='1' height='1'/%3E%3Crect x='0' y='37' width='1' height='1'/%3E%3Crect x='28' y='37' width='1' height='1'/%3E%3Crect x='0' y='39' width='1' height='1'/%3E%3Crect x='28' y='39' width='1' height='1'/%3E%3Crect x='0' y='41' width='1' height='1'/%3E%3Crect x='28' y='41' width='1' height='1'/%3E%3Crect x='0' y='43' width='1' height='1'/%3E%3Crect x='28' y='43' width='1' height='1'/%3E%3Crect x='1' y='44' width='1' height='1'/%3E%3Crect x='3' y='44' width='1' height='1'/%3E%3Crect x='5' y='44' width='1' height='1'/%3E%3Crect x='7' y='44' width='1' height='1'/%3E%3Crect x='9' y='44' width='1' height='1'/%3E%3Crect x='11' y='44' width='1' height='1'/%3E%3Crect x='13' y='44' width='1' height='1'/%3E%3Crect x='15' y='44' width='1' height='1'/%3E%3Crect x='17' y='44' width='1' height='1'/%3E%3Crect x='19' y='44' width='1' height='1'/%3E%3Crect x='21' y='44' width='1' height='1'/%3E%3Crect x='23' y='44' width='1' height='1'/%3E%3Crect x='25' y='44' width='1' height='1'/%3E%3Crect x='27' y='44' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat,
    var(--cr-2) }

/* ══ 27 oct · LA VUELTA DE LAS CARTAS DE NAVIDAD ═════════════════════════════
   Vivi: «dejamos al centro KORA, y solo le agregamos unas estrellitas en
   painterly… para que desde lejos no se vea tanta diferencia entre las que
   llevan descripción y las que solo dicen KORA». Sin las rayas: el mismo papel
   que la vuelta de la familia, «Kora» al centro y arriba y abajo tres
   estrellas pintadas (la de «La estrella»), la de en medio más grande. */
.klot .reverso.es-icono{ aspect-ratio:auto; display:block; background:var(--cr-2) }
.klot .reverso.es-icono .carta-in{ width:auto; margin:0; aspect-ratio:7/9; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7%; padding:10px 8px }
.klot .reverso .r-estrellas{ display:flex; align-items:center; justify-content:center; gap:6%; width:70%; flex:none }
.klot .reverso .r-estrellas img{ width:20%; aspect-ratio:1; object-fit:contain; margin:0; padding:0 }
.klot .reverso .r-estrellas img:nth-child(2){ width:30% }
.klot .reverso.es-icono .r-marca{ font-size:1rem; letter-spacing:.34em; padding-left:.34em }

/* 27 oct, después · las estrellas, chiquitas y sueltas por toda la carta */
.klot .reverso.es-icono .carta-in{ position:relative }
.klot .reverso .r-cielo{ position:absolute; inset:0; pointer-events:none }
.klot .reverso .r-cielo img{ position:absolute; aspect-ratio:1; object-fit:contain; margin:0; padding:0; height:auto }
.klot .reverso.es-icono .r-marca{ position:relative; z-index:1 }

/* 27 oct, al final · la vuelta de las de Navidad: su adivinanza al centro, con
   la misma letra que la descripción de las de la familia, y «Kora» abajo. */
.klot .reverso .r-cielo, .klot .reverso .r-estrellas{ display:none }
.klot .reverso.es-icono .carta-in{ justify-content:center; gap:0; padding:14px 12px 10px; container-type:inline-size }
.klot .reverso .r-adiv{ margin:auto 0; font-family:var(--serif); font-style:normal; font-size:min(.7rem, 9.6cqw); line-height:1.3; color:#4A453D; text-align:center }
.klot .reverso.es-icono .r-marca{ margin-top:auto; flex:none; font-size:min(.62rem, 7.4cqw); letter-spacing:.34em; padding-left:.34em; color:#3E3A33 }

/* 27 oct · Caro: «que el KORA MUESTRA encima de las fotos salga más grande y obscuro, así
   evitamos que alguien imprima su propia tabla directamente de su computadora». Un sello
   grande y oscuro cruzando cada retrato (con orilla clara para que se lea también en
   fotos oscuras): en las tablas y cartas del taller, la tabla y la carta en grande y el
   resumen del pedido. Las hojas de imprenta (#printRoot, .plg) no lo llevan. */
.klot .taller .casilla:not(.es-icono) .retrato, .klot #detalle .casilla:not(.es-icono) .retrato, .klot #detalle .carta:not(.es-icono) .retrato{ position:relative }
.klot .taller .carta:not(.es-icono) .retrato::after, .klot .taller .casilla:not(.es-icono) .retrato::after,
.klot-res .carta:not(.es-icono) .retrato::after, .klot-res .casilla:not(.es-icono) .retrato::after,
.klot #detalle .carta:not(.es-icono) .retrato::after, .klot #detalle .casilla:not(.es-icono) .retrato::after,
.klot .kl-carta-pop .carta:not(.es-icono) .retrato::after{
  content:''; position:absolute; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120'%3E%3Cg transform='rotate(-30 100 60)' font-family='Jost,Helvetica,Arial,sans-serif' font-size='25' font-weight='600' letter-spacing='3' text-anchor='middle'%3E%3Ctext x='100' y='54' fill='rgba(40,35,30,.58)' stroke='rgba(255,255,255,.7)' stroke-width='1.1' paint-order='stroke'%3EKORA%3C/text%3E%3Ctext x='100' y='84' fill='rgba(40,35,30,.58)' stroke='rgba(255,255,255,.7)' stroke-width='1.1' paint-order='stroke'%3EMUESTRA%3C/text%3E%3C/g%3E%3C/svg%3E") center / 118% auto no-repeat }
.klot .taller .kl-frente .retrato::after{ display:none }