/* «Кто мы» — León Verde. Заставка кипу (блок 0), табличка цены с узлом (образец блока 4), печать WhatsApp (образец блока 8).
   Цвета и шрифты — переменные в начале somos.css. Поведение — kipu.js. */

/* ---------- нить и узлы кипу (общие) ---------- */
.kipu-thread { fill: none; stroke: var(--kipu); stroke-width: var(--cw, 3px); stroke-linejoin: round; }
.kipu-thread--main { stroke-width: var(--mw, 3.6px); }
.kipu-thread--twist { stroke: var(--kipu-hi); stroke-width: var(--tw, 1.2px); stroke-dasharray: 2.4px 2.6px; }   /* светлый пунктир — нить «кручёная» */
.kipu-knot__line { fill: none; stroke: var(--ink); stroke-width: var(--kl, 4.6px); stroke-linecap: round; stroke-linejoin: round; }
.kipu-knot__fill { fill: none; stroke: var(--kipu); stroke-width: var(--kf, 2.8px); stroke-linecap: round; stroke-linejoin: round; }
.kipu-bead { fill: var(--kipu); stroke: var(--ink); stroke-width: 1.2px; }
.kipu-num__body { fill: var(--kipu); stroke: var(--ink); stroke-width: 1.3px; }
.kipu-num__wrap { fill: none; stroke: var(--kipu-hi); stroke-width: 1.3px; stroke-linecap: round; }

/* ---------- 0 · заставка: нить завязывает «LEÓN VERDE» ---------- */
.intro { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; overflow: hidden; background: var(--paper);
  cursor: pointer; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  animation: intro-failsafe .5s ease 4.5s forwards; }            /* без скрипта заставка уходит сама */
.intro[hidden] { display: none; }
.intro.is-live { animation: none; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro__stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.intro__kipu { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.intro__letter { position: absolute; left: 0; top: 0; margin: 0; font: 600 var(--f, 80px)/1 var(--f-brand); color: var(--ink); white-space: pre; }
.intro__sub { position: absolute; left: 0; right: 0; top: 74%; margin: 0; padding: 0 16px; text-align: center;
  font: italic 400 var(--fs, 18px)/1.35 var(--f-old); letter-spacing: .01em; color: var(--ink-soft); opacity: 0; }
.intro.is-still .intro__sub { opacity: 1; }

/* ---------- 4 · Precios con kipu ---------- */
.precios { position: relative; overflow: hidden; padding: clamp(72px, 11vw, 140px) 0 clamp(72px, 10vw, 128px); background: var(--paper); color: var(--ink); }
.precios__head { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.precios .kicker { color: var(--kipu-deep); }
.precios__title { margin: 12px 0 0; font: 900 clamp(36px, 6.4vw, 92px)/.9 var(--f-display); font-stretch: 72%; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.precios__title em { display: block; margin-top: .16em; font: italic 400 .6em/1.05 var(--f-old); letter-spacing: 0; text-transform: none; color: var(--kipu-deep); }

/* главная нить кипу — от края до края экрана; табличка висит на подвесной нити */
.tablas { position: relative; margin-top: clamp(26px, 5vw, 52px); padding-top: 24px; }
.tablas__cord { position: absolute; left: 0; top: 0; width: 100%; height: 48px; overflow: visible; pointer-events: none; --mw: 3.6px; --tw: 1.3px; }
.tablas__cord .kipu-thread, .kipu__line .kipu-thread { vector-effect: non-scaling-stroke; }
.tabla { --cord: clamp(72px, 14vw, 128px); position: relative; width: min(92vw, 600px); margin: 0 auto; }
.tabla__swing { transform-origin: 50% 0; animation: tabla-sway 3.4s ease-in-out infinite alternate; }
.tabla.is-away .tabla__swing { animation-play-state: paused; }
@keyframes tabla-sway { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
.tabla__hang { position: relative; padding-top: var(--cord); transform-origin: 50% 0; container-type: inline-size; }
.tabla__cord { position: absolute; left: 50%; top: -1px; width: 16px; height: calc(var(--cord) + 36px); margin-left: -8px; overflow: hidden; --cw: 3px; --tw: 1.1px; }
.tabla__knot { position: absolute; left: 50%; top: calc(var(--cord) * .5); z-index: 2; width: 32px; height: 40px; margin: -20px 0 0 -16px; overflow: visible; pointer-events: none; --kl: 4.8px; --kf: 2.9px; }
.tabla__knot-in { opacity: 0; }
.tabla__tie { position: absolute; left: 50%; top: 0; z-index: 3; width: 11px; height: 14px; margin: -7px 0 0 -5.5px;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--kipu); pointer-events: none; }

/* сама табличка: картинка + текст в кремовом поле; размеры текста — от ширины таблички (cqi) */
.tabla__plate { position: relative; z-index: 1; display: block; -webkit-appearance: none; appearance: none; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--ink); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tabla__plate:focus-visible { outline: 3px solid var(--kipu); outline-offset: 6px; }
.tabla__plate:active { transform: translateY(-2px) scale(.985); transition-duration: .12s; }
.tabla__img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 10px 12px rgba(27, 20, 14, .26)); transition: filter .45s ease; }
@media (hover: hover) {
  .tabla__plate:hover { transform: translateY(-7px); }
  .tabla__plate:hover .tabla__img { filter: drop-shadow(0 24px 22px rgba(27, 20, 14, .3)); }
}
.tabla__field { position: absolute; left: 10%; right: 10%; top: 19.5%; bottom: 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.tabla__tag { display: inline-block; padding: .45em 1.05em .4em; border-radius: 999px; background: var(--kipu); color: var(--paper-hi);
  font: 750 10px/1 var(--f-display); font-size: clamp(10px, 2.5vw, 14px); font-size: clamp(10px, 2.7cqi, 14px); letter-spacing: .16em; text-transform: uppercase; }
.tabla__name { display: block; margin-top: .28em; font: 900 30px/.95 var(--f-display); font-size: min(7.9vw, 51px); font-size: 8.6cqi; font-stretch: 76%; letter-spacing: .005em; text-transform: uppercase; }
.tabla__price { display: flex; align-items: flex-start; justify-content: center; gap: .05em; margin-top: .05em; color: var(--kipu-deep);
  font: 900 60px/.86 var(--f-display); font-size: min(19.3vw, 126px); font-size: 21cqi; font-stretch: 80%; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.tabla__cur { margin-top: .3em; font-size: .34em; line-height: 1; letter-spacing: 0; color: var(--ink-soft); }
.tabla__meta { display: block; margin-top: .4em; font: 650 13px/1.2 var(--f-display); font-size: clamp(13px, 3.6vw, 20px); font-size: clamp(13px, 3.9cqi, 20px); letter-spacing: .02em; color: var(--ink-soft); }
.tabla__desc { display: block; max-width: 80%; max-width: 64cqi; margin-top: .45em; font: 500 12.5px/1.28 var(--f-display); font-size: clamp(12.5px, 3.4vw, 19px); font-size: clamp(12.5px, 3.7cqi, 19px);
  font-stretch: 92%; color: var(--ink-soft); text-wrap: balance; }
@container (max-width: 330px) {
  .tabla__price { font-size: 19cqi; }
  .tabla__desc { font-size: 11.5px; }
}
.tabla__tap { margin: clamp(16px, 3vw, 26px) 0 0; padding: 0 var(--gutter); text-align: center; font: italic 400 16px/1.3 var(--f-old); color: var(--ink-soft); }
.tabla__tap::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--kipu); vertical-align: middle;
  animation: tap-pulse 1.6s ease-in-out infinite; }
.tabla.is-tied .tabla__tap::before { animation: none; background: var(--ink-soft); }
@keyframes tap-pulse { 50% { transform: scale(1.7); opacity: .45; } }

/* итог: длинная нить, на ней сумма узлами, как на кипу */
.kipu { max-width: 920px; margin: clamp(36px, 6vw, 64px) auto 0; padding: 0 var(--gutter); text-align: center; }
.kipu__line { display: block; width: 100%; height: 64px; overflow: visible; --mw: 3.2px; --tw: 1.2px; --cw: 2.4px; }
.kipu__sum { margin: 8px 0 18px; }
.kipu__label { display: block; font: 650 12px/1.2 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--kipu-deep); }
.kipu__value { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 4px;
  font: 900 clamp(28px, 6vw, 44px)/1.1 var(--f-display); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.kipu__value.is-empty { font: italic 400 clamp(21px, 4vw, 28px)/1.3 var(--f-old); color: var(--ink-soft); }
.btn--kipu { background: var(--kipu); color: var(--paper-hi); box-shadow: 0 12px 26px -10px rgba(142, 26, 20, .6); }
.btn--kipu:hover { background: var(--kipu-deep); }
.btn--kipu[aria-disabled="true"] { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 2px rgba(90, 76, 61, .32); cursor: default; pointer-events: none; }
.btn--kipu[aria-disabled="false"] { animation: kipu-ready .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kipu-ready { from { transform: scale(.88); } to { transform: scale(1); } }

/* ---------- 8 · Tu mensaje: печать WhatsApp ---------- */
.mensaje { position: relative; overflow: hidden; padding: clamp(84px, 13vw, 160px) var(--gutter) clamp(72px, 11vw, 136px); background: var(--ultra); color: var(--paper); text-align: center; }
.mensaje::before { content: ""; position: absolute; left: 50%; top: 62%; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 240, 225, .13), rgba(247, 240, 225, 0)); pointer-events: none; }
.mensaje > * { position: relative; }
.mensaje .kicker { color: var(--paper); opacity: .85; }
.mensaje__title { margin: 14px auto 0; font: 900 clamp(44px, 10vw, 136px)/.9 var(--f-display); font-stretch: 74%; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.mensaje__title em { display: block; margin-top: .02em; font: italic 400 1.04em/.98 var(--f-old); letter-spacing: -.01em; text-transform: none; color: var(--paper-hi); }
.mensaje :focus-visible { outline-color: var(--paper-hi); }

.sello { display: flex; flex-direction: column; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: clamp(40px, 7vw, 72px) auto 0; border-radius: 26px; color: var(--paper-hi);
  text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sello:focus-visible { outline: 3px solid var(--paper-hi); outline-offset: 8px; }
.sello__disc { position: relative; display: block; width: clamp(220px, 62vw, 300px); height: clamp(220px, 62vw, 300px); isolation: isolate;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sello__disc::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -10%; height: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 12, 42, .6), rgba(6, 12, 42, 0)); opacity: .75; transform: scale(.9);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.sello__press { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .38s cubic-bezier(.3, 1.6, .5, 1); }
.sello.is-pressed .sello__press { transform: scale(.9); transition-duration: .12s; transition-timing-function: ease-out; }
.sello__svg, .sello__ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.sello__svg { filter: drop-shadow(0 8px 10px rgba(6, 12, 42, .45)); }
.sello__wax { stroke: var(--kipu-deep); stroke-width: 2.5px; }
.sello__well { fill: rgba(92, 10, 6, .38); }
.sello__rim { fill: none; stroke: rgba(70, 8, 5, .55); stroke-width: 2.2px; }
.sello__rim--hi { stroke: rgba(255, 214, 196, .3); stroke-width: 1.4px; }
.sello__ring { animation: sello-spin 48s linear infinite; }
@keyframes sello-spin { to { transform: rotate(360deg); } }
.sello__text { fill: var(--paper-hi); font-family: var(--f-display); font-size: 18.5px; font-weight: 700; letter-spacing: 5.4px; }
.sello__coin { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; border-radius: 50%; filter: drop-shadow(0 3px 5px rgba(70, 8, 4, .55)); }
.sello__wave { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; border: 3px solid var(--kipu-hi); border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(242, 112, 94, .2); opacity: 0; pointer-events: none; }
.sello__label { margin-top: 24px; font: 800 18px/1.2 var(--f-display); letter-spacing: .03em; }
@media (hover: hover) {
  .sello:hover .sello__disc { transform: translateY(-8px) rotate(-4deg); }
  .sello:hover .sello__disc::before { transform: translateY(16px) scale(1.14); opacity: 1; }
}
.mensaje__audio { display: flex; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-height: 44px; margin: 16px auto 0; padding: 0 12px; color: var(--paper);
  font: italic 400 19px/1.2 var(--f-old); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mensaje__audio:hover { color: var(--paper-hi); text-decoration-thickness: 2px; }

/* ---------- телефон ---------- */
@media (max-width: 699px) {
  .tabla { --cord: clamp(64px, 18vw, 96px); }
  .kipu__line { height: 56px; }
  .tabla__tap { font-size: 15px; }
}

/* ---------- без лишнего движения: ни раскачки, ни вращения ---------- */
@media (prefers-reduced-motion: reduce) {
  .tabla__swing, .sello__ring, .tabla__tap::before, .btn--kipu[aria-disabled="false"] { animation: none; }
  .tabla__plate, .tabla__img, .sello__disc, .sello__disc::before, .sello__press { transition: none; }
  .sello:hover .sello__disc { transform: translateY(-6px); }
}