/* Партия 1 SEO-завода (27.10): пять страниц-инструментов — карта долины, гонка часки, ссылка WhatsApp, бот для ресторана, сайт для отеля.
   Те же краски, шрифты и нити кипу, что у herr.css; графика — свои «гравюры» (SVG прямо в HTML). */
@keyframes herr2-nudo { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes herr2-sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(.9deg); } }
@keyframes herr2-hilo { to { stroke-dashoffset: -24; } }
@keyframes herr2-luz { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Графика в шапке (калькулятор, бот отеля и новые страницы) */
.herr-graf { margin: 20px 0 0; max-width: 560px; }
.herr-graf svg { display: block; width: 100%; height: auto; }
.herr-graf figcaption { margin-top: 6px; color: var(--muted); font: italic 400 14px/1.4 var(--serif); }
.kp-sway { transform-origin: 50% 0; animation: herr2-sway 5s ease-in-out infinite; transform-box: fill-box; }
.kp-hilo { animation: herr2-hilo 1.6s linear infinite; }
.kp-luz { animation: herr2-luz 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kp-sway, .kp-hilo, .kp-luz { animation: none; } }

/* Общие кубики: поля-ползунки, чипы, результаты */
.h2-panel { display: grid; gap: 22px; align-items: start; margin: 4px 0 8px; }
@media (min-width: 900px) { .h2-panel { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 36px; } }
.h2-campos { display: grid; gap: 18px; }
.h2-campo { display: grid; gap: 6px; }
.h2-campo > span { display: flex; justify-content: space-between; gap: 12px; font: 700 15px/1.3 var(--ui); }
.h2-campo > span output { color: #ffd08a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2-campo input[type=range] { width: 100%; height: 36px; accent-color: var(--c); cursor: pointer; }
.h2-campo small { color: var(--muted); font: 400 13px/1.4 var(--ui); }
.h2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.h2-chips button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--text); font: 600 15px/1 var(--ui); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.h2-chips button:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.h2-chips button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.h2-res { padding: 16px 16px 14px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 18px; background: linear-gradient(160deg, #241810, #130d09); box-shadow: 0 0 30px rgba(224,161,90,.1); }
@media (min-width: 900px) { .h2-res { position: sticky; top: 16px; } }
.h2-res .calc-etq { margin-bottom: 6px; }
.h2-big { margin: 0; color: #ffd08a; font: 700 clamp(34px, 10vw, 46px)/1.05 var(--disp); font-variant-numeric: tabular-nums; }
.h2-big em { margin-left: 6px; color: var(--muted); font: 700 .38em/1 var(--ui); font-style: normal; letter-spacing: .06em; }
.h2-fila { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 400 15px/1.35 var(--ui); }
.h2-fila b { color: #ffd08a; font-variant-numeric: tabular-nums; text-align: right; }
.h2-frase { margin: 12px 0 0; color: var(--text); font: 600 15px/1.45 var(--ui); }
.h2-nota { margin: 10px 0 0; color: var(--muted); font: 400 12.5px/1.45 var(--ui); }
.h2-svg { display: block; width: 100%; height: auto; margin: 0 0 4px; }
.h2-demo-par { display: grid; gap: 22px; }
@media (min-width: 900px) { .h2-demo-par { grid-template-columns: 1fr 1fr; align-items: start; } }
.h2-demo-par [data-demo] { max-width: 640px; }

/* Cusco: карта-кипу */
.cu-mapa { margin: 0 0 16px; }
.cu-mapa svg { display: block; width: 100%; height: auto; max-height: 460px; }
.cu-pueblo { cursor: pointer; outline: none; }
.cu-pueblo .cu-aro { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transition: opacity .25s; }
.cu-pueblo:hover .cu-aro, .cu-pueblo:focus-visible .cu-aro, .cu-pueblo[aria-pressed="true"] .cu-aro { opacity: 1; }
.cu-pueblo[aria-pressed="true"] .cu-nudo { fill: #ffd08a; }
.cu-pueblo text { fill: var(--text); font: 700 22px var(--ui); paint-order: stroke; stroke: #0b0806; stroke-width: 5px; }
.cu-panel { padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; background: rgba(255,255,255,.035); }
.cu-panel[hidden] { display: none; }
.cu-panel h3 { margin: 0 0 4px; font: 700 20px/1.2 var(--disp); }
.cu-panel > p { margin: 0 0 12px; color: var(--muted); font: 400 15px/1.5 var(--ui); }
.cu-obras { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .cu-obras { grid-template-columns: 1fr 1fr; } }
.cu-obras a { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .2s, background .2s; }
.cu-obras a:hover { border-color: var(--gold); background: rgba(224,161,90,.07); }
.cu-obras b { display: block; font: 700 16px/1.3 var(--ui); }
.cu-obras span { display: block; margin-top: 2px; color: var(--muted); font: 400 14px/1.45 var(--ui); }
.cu-obras em { display: block; margin-top: 6px; color: var(--c2); font: 700 13px/1.2 var(--ui); font-style: normal; }

/* Velocidad: нить-дорожка */
.pe-pista { margin: 0 0 20px; }
.pe-pista svg { display: block; width: 100%; height: auto; }
.pe-red { margin: 0 0 4px; }
[data-herr="velocidad"] .rv-aviso { display: none; }
[data-peso][data-nivel="ok"] .pe-ver { color: #8dffbe; }
[data-peso][data-nivel="med"] .pe-ver { color: #ffd08a; }
[data-peso][data-nivel="mal"] .pe-ver { color: #ff6b57; }
.pe-ver { margin: 0 0 4px; font: 700 18px/1.3 var(--disp); }

/* Hotel / ресторан: графики из узелков */
.h2-nudos { display: block; width: 100%; height: auto; max-height: 190px; margin: 4px 0 6px; }
.h2-leyenda { display: flex; justify-content: space-around; gap: 8px; margin: 0 0 6px; color: var(--muted); font: 600 12.5px/1.3 var(--ui); text-align: center; }
.h2-pasos-wa { margin-top: 14px; }