/* Страница /precios/: цены как нити кипу — у каждой группы своя цветная нить слева и узелок у заголовка
   (цвета — от нитей-миров сайта). Сначала телефон: карточки в колонку; на компьютере — сетка. Краски и шрифты — kit.css. */
.precios-pagina { background: radial-gradient(ellipse at 50% 0%, #1c130c, var(--bg) 70%) fixed; }
.barra a.marca { border: 0; background: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pr-main { max-width: 1120px; margin: 0 auto; padding: calc(max(14px, env(safe-area-inset-top)) + 72px) var(--gut) 0; }

.pr-cabeza { max-width: 720px; }
.pr-cabeza h1 { margin: 0 0 12px; font: 700 clamp(28px, 7.6vw, 48px)/1.08 var(--disp); text-wrap: balance; }
.pr-cabeza .lead { max-width: 44ch; }
.pr-indice { display: flex; gap: 8px; margin: 18px calc(-1 * var(--gut)) 0; padding: 0 var(--gut) 4px; overflow-x: auto; scrollbar-width: none; }
.pr-indice::-webkit-scrollbar { display: none; }
.pr-indice a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid rgba(243,234,217,.28); border-radius: 999px;
               color: var(--text); font: 700 14px/1 var(--ui); text-decoration: none; white-space: nowrap; }
.pr-indice a::before { content: ""; width: 11px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }

/* Группа = нить: полоса слева, узелок у заголовка */
.pr-grupo { position: relative; padding: 52px 0 8px 26px; scroll-margin-top: 16px; }
.pr-grupo::before { content: ""; position: absolute; top: 60px; 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); }
.pr-grupo h2 { position: relative; margin: 0 0 10px; font: 700 clamp(22px, 6vw, 32px)/1.15 var(--disp); text-wrap: balance; }
.pr-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); }

.pr-tarjetas { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .pr-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pr-tarjetas--experiencias { grid-template-columns: repeat(3, 1fr); } }
.pr-tarjeta { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 16px;
              background: rgba(255,255,255,.035); scroll-margin-top: 16px; }
.pr-tarjeta--marcada { border-color: color-mix(in srgb, var(--c) 55%, transparent); border-top-color: var(--c); background: color-mix(in srgb, var(--c) 9%, rgba(255,255,255,.03)); }
.pr-tarjeta:target { box-shadow: 0 0 0 2px var(--c), 0 0 28px color-mix(in srgb, var(--c) 45%, transparent); }

/* Превью демо у «Experiencias»: два кадра рядом, тап — само демо */
.pr-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #000; }
.pr-vista { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; color: #fff; text-decoration: none; }
.pr-vista img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pr-vista:hover img, .pr-vista:focus-visible img { transform: scale(1.06); }
.pr-vista > span { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(5,3,3,.72); font: 700 12px/1.2 var(--ui); }

.pr-cuerpo { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 18px; }
.pr-etiqueta { align-self: flex-start; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px; background: var(--c); color: #1a120c;
               font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.pr-cuerpo h3 { margin: 0 0 10px; font: 700 19px/1.25 var(--disp); text-wrap: balance; }
/* .pr-precio, .pr-resto, .pr-quiero — в kit.css: они же в блоке «Plazo y precio» нитей */
.pr-texto { flex: 1; margin: 12px 0 0; font: 400 16px/1.5 var(--ui); }
.pr-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pr-demo { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid rgba(243,234,217,.3); border-radius: 999px;
           color: var(--text); font: 600 14px/1.2 var(--ui); text-decoration: none; }
.pr-demo:hover { border-color: var(--c); }

.pr-puente { margin: 48px 0 0; }
.pr-puente a { display: block; padding: 18px 20px; border: 1px dashed rgba(243,234,217,.4); border-radius: 16px; color: var(--text); font: italic 400 19px/1.4 var(--serif); text-decoration: none; }
.pr-puente a:hover { border-color: #efe6d2; background: rgba(255,255,255,.04); }
.pr-como .pasos { max-width: 640px; margin-top: 8px; }
.pr-pago, .pr-cambio { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.pr-faq details { max-width: 720px; border-bottom: 1px solid var(--line); }
.pr-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; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; flex: none; color: var(--gold); font: 400 24px/1 var(--ui); transition: rotate .2s; }
.pr-faq details[open] summary::after { rotate: 45deg; }
.pr-faq details p { margin: 0 0 16px; color: var(--muted); font: 400 16px/1.55 var(--ui); }

@media (prefers-reduced-motion: reduce) {
  .pr-vista img, .pr-faq summary::after { transition: none; }
}