/* Granja Óga · el tatakuá con la lupa de Ña Emy. Brand colours (shared/marcas/granja-oga.md): terracotta, ochre,
   forest green, beige; Varela Round. No inline styles: each spot's place and zoom are classes here. */
.tk { --tk-terracota: #BE5D38; --tk-terracota-texto: #9C4627; --tk-ocre: #DD923F; --tk-verde: #2F5243; --tk-beige: #E4E2DA;
  --tk-papel: #FBF6EC; --tk-tinta: #2B2620; position: relative; margin: 0; max-width: 100%; font-family: "Varela Round", system-ui, sans-serif; }
.tk-pintura { position: relative; border-radius: 14px; overflow: hidden; background: var(--tk-papel); }
.tk-pintura img { display: block; width: 100%; height: auto; }
.tk-spot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; padding: 0;
  background: var(--tk-papel); box-shadow: 0 0 0 3px var(--tk-terracota), 0 3px 8px rgba(43, 38, 32, .35); cursor: pointer;
  display: grid; place-items: center; color: var(--tk-terracota-texto); }
.tk-spot svg { width: 24px; height: 24px; }
.tk-spot:focus-visible { outline: 3px solid var(--tk-verde); outline-offset: 3px; }
.tk-spot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--tk-terracota);
  opacity: 0; animation: tk-latido 2.8s ease-out infinite; }
@keyframes tk-latido { 0% { transform: scale(.85); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.tk-pie { margin: .5rem 0 0; color: #5a5249; font-size: .95rem; }
/* The card: the part through the magnifying glass, its name, the words and the voice. */
/* Over the whole page, so it fits at 360 px too. */
.tk-tarjeta { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(43, 38, 32, .55); }
.tk-tarjeta[hidden] { display: none; }
.tk-caja { box-sizing: border-box; width: min(100%, 560px); max-height: 100%; overflow: auto; background: var(--tk-papel); color: var(--tk-tinta); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(43, 38, 32, .35); padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start; }
.tk-lupa { width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 0 0 6px var(--tk-ocre), 0 0 0 9px var(--tk-terracota);
  background-repeat: no-repeat; background-size: calc(var(--tk-zoom) * 100%) auto; }
.tk-caja h3 { margin: 0 0 .35rem; font-size: 1.35rem; color: var(--tk-verde); }
.tk-caja p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.tk-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tk-botones button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 1rem; cursor: pointer; }
.tk-oir { background: var(--tk-terracota-texto); color: #fff; border: 0; }
.tk-cerrar { background: transparent; color: var(--tk-verde); border: 2px solid var(--tk-verde); }
.tk-botones button:focus-visible { outline: 3px solid var(--tk-verde); outline-offset: 2px; }
@media (max-width: 480px) { .tk-caja { grid-template-columns: 1fr; justify-items: center; text-align: left; } .tk-lupa { width: 112px; height: 112px; } }
@media (prefers-reduced-motion: reduce) { .tk-spot::after { animation: none; opacity: 0; } }
@media (prefers-color-scheme: dark) { .tk-pintura img { filter: brightness(.88) saturate(.95); } }
.tk-spot[data-spot="tatakua"] { left: 62%; top: 29%; }
.tk-lupa[data-spot="tatakua"] { --tk-zoom: 2.6; background-position: 69.50% 15.88%; }
.tk-spot[data-spot="barro"] { left: 81%; top: 42%; }
.tk-lupa[data-spot="barro"] { --tk-zoom: 2.6; background-position: 100.37% 37.00%; }
.tk-spot[data-spot="boca"] { left: 43%; top: 46%; }
.tk-lupa[data-spot="boca"] { --tk-zoom: 2.6; background-position: 38.62% 43.50%; }
.tk-spot[data-spot="lena"] { left: 16%; top: 48%; }
.tk-lupa[data-spot="lena"] { --tk-zoom: 2.6; background-position: -5.25% 46.75%; }
.tk-spot[data-spot="chipa"] { left: 66%; top: 56%; }
.tk-lupa[data-spot="chipa"] { --tk-zoom: 2.6; background-position: 76.00% 59.75%; }
.tk-spot[data-spot="brasas"] { left: 35%; top: 71%; }
.tk-lupa[data-spot="brasas"] { --tk-zoom: 2.6; background-position: 25.62% 84.12%; }