/* Страницы-инструменты: калькулятор цены, бот для отелей, карта с QR. Те же краски, шрифты и «нитевая» раскладка, что у /precios/ (precios.css + kit.css). */
.herr-pagina { background: radial-gradient(ellipse at 50% 0%, #1c130c, var(--bg) 70%) fixed; }
.herr-pagina .barra { position: absolute; }.herr-pagina .barra a.marca { border: 0; background: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.herr-main { max-width: 1120px; margin: 0 auto; padding: calc(max(14px, env(safe-area-inset-top)) + 72px) var(--gut) 0; }
.herr-cab { max-width: 760px; }
.herr-cab .hilo-nombre { margin-bottom: 14px; }
.herr-cab h1 { margin: 0 0 14px; font: 700 clamp(28px, 7.6vw, 52px)/1.08 var(--disp); text-wrap: balance; }
.herr-cab .lead { max-width: 46ch; font-size: 18px; }
.herr-grupo { position: relative; padding: 48px 0 8px 26px; scroll-margin-top: 16px; }
.herr-grupo::before { content: ""; position: absolute; top: 56px; bottom: 0; left: 7px; width: 3px; border-radius: 2px; opacity: .85;
                      background: repeating-linear-gradient(180deg, var(--c) 0 9px, color-mix(in srgb, var(--c) 55%, #000) 9px 12px); }
.herr-grupo > h2 { position: relative; margin: 0 0 12px; font: 700 clamp(22px, 6vw, 32px)/1.15 var(--disp); text-wrap: balance; }
.herr-grupo > h2::before { content: ""; position: absolute; left: -26px; top: .3em; width: 17px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--bg), 0 0 14px var(--c); }
.herr-grupo--tool { padding-left: 0; }
.herr-grupo--tool::before, .herr-grupo--tool > h2::before { display: none; }
.herr-texto { max-width: 720px; margin: 0 0 14px; font: 400 16.5px/1.6 var(--ui); }
.herr-texto a { color: var(--c2); }
.herr-enlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; }
.herr-enlaces a { color: var(--c2); font: 700 15px/1.3 var(--ui); text-decoration: none; }
.herr-enlaces a:hover { text-decoration: underline; }
.herr-faq details { max-width: 720px; border-bottom: 1px solid var(--line); }
.herr-faq summary { display: flex; justify-content: space-between; gap: 12px; min-height: 52px; align-items: center; cursor: pointer; font: 700 16px/1.35 var(--ui); list-style: none; }
.herr-faq summary::-webkit-details-marker { display: none; }
.herr-faq summary::after { content: "+"; flex: none; color: var(--gold); font: 400 24px/1 var(--ui); transition: rotate .2s; }
.herr-faq details[open] summary::after { rotate: 45deg; }
.herr-faq details p { margin: 0 0 16px; color: var(--muted); font: 400 16px/1.55 var(--ui); }
.herr-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0; }
.herr-cta .pr-quiero { font-size: 16px; min-height: 52px; padding: 0 24px; }
.herr-cta a.herr-sec { color: var(--c2); font: 700 15px/1.3 var(--ui); text-decoration: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Таблица цен в HTML (для людей и для поисковика) */
.herr-tabla { width: 100%; max-width: 760px; border-collapse: collapse; font: 400 15px/1.4 var(--ui); }
.herr-tabla th, .herr-tabla td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.herr-tabla th { color: var(--muted); font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.herr-tabla td:nth-child(2) { color: #ffd08a; font-weight: 700; }
.herr-tabla td:nth-child(3) { color: var(--muted); }
@media (min-width: 640px) { .herr-tabla td:nth-child(2), .herr-tabla td:nth-child(3) { white-space: nowrap; } }
@media (max-width: 639px) { .herr-tabla { font-size: 14px; } .herr-tabla th, .herr-tabla td { padding: 9px 4px; } }

/* ── Калькулятор ── */
.calc { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 36px; } .calc-total { position: sticky; top: 16px; } }
.calc-paso { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.calc-paso legend { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font: 700 17px/1.3 var(--disp); }
.calc-paso legend b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--gold); color: #ffd08a; font: 700 14px/1 var(--disp); }
.calc-opciones { display: grid; gap: 10px; }
@media (min-width: 560px) and (max-width: 899px) { .calc-opciones { grid-template-columns: 1fr 1fr; } }
.calc-op { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 52px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; background: rgba(255,255,255,.035);
           cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s, border-color .25s, transform .25s; }
.calc-op:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.calc-op input { position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; margin: 0; accent-color: var(--c); cursor: pointer; }
.calc-op.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); transform: translateX(3px); }
.calc-op-t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.calc-op-t b { font: 700 16px/1.3 var(--ui); }
.calc-op-t em { color: #ffd08a; font: 700 14px/1.3 var(--ui); font-style: normal; }
.calc-op-d { color: var(--muted); font: 400 14px/1.45 var(--ui); }
.calc-op:focus-within { outline: 2px solid var(--c2); outline-offset: 2px; }

.calc-total { position: sticky; bottom: 0; z-index: 4; 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 -10px 30px rgba(0,0,0,.55), 0 0 30px rgba(224,161,90,.12); }
@media (min-width: 900px) { .calc-total { bottom: auto; } }
.calc-etq { margin: 0 0 4px; color: var(--muted); font: 700 11px/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.calc-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.calc-precio span { color: #ffd08a; font: 700 clamp(34px, 10vw, 46px)/1.05 var(--disp); font-variant-numeric: tabular-nums; }
.calc-precio span em { font: 700 .4em/1 var(--ui); font-style: normal; color: var(--muted); letter-spacing: .06em; }
.calc-precio small { color: var(--muted); font: 600 14px/1 var(--ui); }
.calc-mes { margin: 6px 0 0; color: color-mix(in srgb, var(--gold) 70%, #fff); font: 700 15px/1.35 var(--ui); }
.calc-plazo { margin: 2px 0 0; color: var(--text); font: 600 15px/1.35 var(--ui); }
/* Кипу-чек: на каждую вещь — узелок на нити */
.calc-hilo { position: relative; display: grid; gap: 8px; margin: 14px 0 6px; padding: 0 0 0 22px; list-style: none; }
.calc-hilo::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 5px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--gold) 0 7px, #5b4020 7px 10px); opacity: .8; }
.calc-hilo li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 400 14px/1.35 var(--ui); animation: sube .35s ease both; }
.calc-hilo li i { position: absolute; left: -22px; top: .3em; width: 14px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #130d09, 0 0 10px var(--c); }
.calc-hilo li span { flex: 1 1 140px; }
.calc-hilo li b { color: #ffd08a; font-weight: 700; white-space: nowrap; }
.calc-hilo li s { color: var(--muted); }
.calc-hilo li.mes b { color: color-mix(in srgb, #ea7a2c 50%, #fff); }
.calc-escala { margin: 12px 0 0; }
.calc-barra { position: relative; height: 12px; margin: 8px 0 22px; border-radius: 6px; background: rgba(255,255,255,.08); }
.calc-barra .banda { position: absolute; top: 0; height: 100%; border-radius: 6px; }
.calc-barra .banda--agencia { background: rgba(179,55,43,.55); }
.calc-barra .banda--free { top: 4px; height: 4px; background: rgba(184,171,149,.8); }
.calc-barra .pin { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: #ffd08a; box-shadow: 0 0 12px #ffd08a; transition: left .45s cubic-bezier(.2,.7,.2,1); }
.calc-barra .pin::after { content: attr(data-v); position: absolute; top: 24px; left: 50%; translate: -50% 0; color: #ffd08a; font: 700 11px/1 var(--ui); white-space: nowrap; }
.calc-leyenda { margin: 0; color: var(--muted); font: 400 12.5px/1.5 var(--ui); }
.calc-leyenda .k { display: inline-block; width: 10px; height: 10px; margin: 0 5px 0 0; border-radius: 3px; vertical-align: -1px; }
.calc-leyenda .k + .k, .calc-leyenda a { margin-left: 0; }
.calc-leyenda .k--free { background: rgba(184,171,149,.8); }
.calc-leyenda .k--agencia { background: rgba(179,55,43,.7); margin-left: 8px; }
.calc-leyenda a { color: var(--c2); }
.calc-wa { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-top: 14px; border-radius: 999px; background: #1f8f4e; color: #fff;
           font: 700 16px/1.1 var(--ui); text-decoration: none; box-shadow: 0 6px 18px rgba(31,143,78,.35); }
.calc-wa svg { width: 22px; height: 22px; }
.calc-wa:hover { background: #22a359; }
.calc-copiar { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid rgba(243,234,217,.28); border-radius: 999px; background: none; color: var(--muted); font: 600 14px/1 var(--ui); cursor: pointer; }
.calc-copiar:hover { color: var(--text); border-color: var(--gold); }
.calc-nota { margin: 10px 0 0; color: var(--muted); font: 400 12.5px/1.45 var(--ui); }
.calc-movil { display: none; }
@media (max-width: 899px) {
  /* На телефоне итог прилипает к низу строкой «цена · кнопка»: цена и WhatsApp всегда под пальцем; чек-кипу и шкала — в конце панели */
  .calc-total { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; margin: 0 calc(-1 * var(--gut)); border-radius: 18px 18px 0 0; border-bottom: 0;
                padding: 12px var(--gut) max(12px, env(safe-area-inset-bottom)); }
  .calc-total > * { grid-column: 1; }
  .calc-total .calc-wa { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0 18px; min-height: 52px; font-size: 15px; }
  .calc-total .calc-wa span { max-width: 9ch; text-align: left; }
  .calc-total .calc-etq, .calc-total .calc-hilo, .calc-total .calc-nota, .calc-total .calc-copiar { display: none; }
  .calc-precio span { font-size: 28px; white-space: nowrap; }
  .calc-precio span em { font: 700 14px/1 var(--ui); font-style: normal; color: var(--muted); letter-spacing: .06em; }
  [data-herr="calculadora"] .wa-flota { display: none; }
  .calc-movil { display: block; margin: 0 0 24px; }
  .calc-movil .calc-copiar { display: block; }
}

/* ── Страницы с живой демкой ── */
.herr-demo { margin: 4px 0 8px; }
[data-demo="recepcion"], [data-demo="carta"] { max-width: 640px; }
.herr-pasos { counter-reset: paso; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .herr-pasos { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.herr-pasos li { counter-increment: paso; position: relative; padding: 16px 16px 16px 16px; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; background: rgba(255,255,255,.035); }
.herr-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; border: 2px solid var(--c); color: var(--c2); font: 700 15px/1 var(--disp); }
.herr-pasos b { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--ui); }
.herr-pasos span { color: var(--muted); font: 400 15px/1.5 var(--ui); }
.herr-precios { display: grid; gap: 12px; }
@media (min-width: 760px) { .herr-precios { grid-template-columns: 1fr 1fr; } }
.herr-agotado { margin: 16px 0 0; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--c) 65%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.herr-agotado[hidden] { display: none; }
.herr-agotado b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--disp); }
.herr-agotado p { margin: 0 0 12px; color: var(--muted); }
.herr-nota { max-width: 720px; margin: 14px 0 0; color: var(--muted); font: italic 400 15px/1.5 var(--serif); }
.herr-pie { padding: 48px 0 max(36px, env(safe-area-inset-bottom)); text-align: center; }
.herr-pie h2 { margin: 0; font: 700 clamp(22px, 6.4vw, 34px)/1.15 var(--disp); }
.herr-pie h2 span { color: var(--gold); }
.herr-pie .pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 20px; }
@media (prefers-reduced-motion: reduce) { .calc-op, .calc-barra .pin, .herr-faq summary::after { transition: none; } .calc-hilo li { animation: none; } }

/* Круг 2: окно чата ниже; плавающую кнопку WhatsApp на телефоне не держим над демкой (кнопка WhatsApp — в конце страницы) */
.herr-pagina .chat { height: auto; }
/* Цикл 2: подсказки переносятся и больше не съедают ленту — приветствие бота видно всегда */
.herr-pagina .chat-msgs { flex: none; height: clamp(170px, 30svh, 260px); }
/* 27.10 слово Яна «кнопку везде»: на телефоне кнопка видна; прячем только пока гость печатает в демке */
@media (max-width: 899px) { body:has(input:focus, textarea:focus) .herr-pagina .wa-flota, .herr-pagina:has(input:focus, textarea:focus) .wa-flota { display: none; } }

/* Кнопка WhatsApp переливается цветами нитей кипу, по ней пробегает вспышка (слово Яна 27.10: «чтобы она всегда переливалась разными цветами… градиенты и вспышки») */
.wa-flota { overflow: hidden; background: linear-gradient(120deg, #1f8f4e, #e0a15a, #c8323c, #8b3fd1, #2b7bd6, #1f8f4e); background-size: 400% 400%;
            animation: waFlow 7s ease-in-out infinite, waGlow 3.2s ease-in-out infinite; }
.wa-flota:hover { background: linear-gradient(120deg, #1f8f4e, #e0a15a, #c8323c, #8b3fd1, #2b7bd6, #1f8f4e); background-size: 400% 400%; filter: brightness(1.12); }
.wa-flota svg { position: relative; z-index: 1; }
.wa-flota::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%);
                   transform: translateX(-130%); animation: waShine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes waFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes waGlow { 0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 16px rgba(224,161,90,.5); } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 28px rgba(139,63,209,.6); } }
@keyframes waShine { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .wa-flota, .wa-flota::after { animation: none; } }