:root{
  --noche:#120A14;
  --tablilla:#151810;
  --claro:#21241C;
  --tinta:#F2F3EC;
  --sub:#949591;
  --cap:#939590;
  --frio:#CC7A9D;
  --olivo:#AC88A2;
  --malo:#D3745A;
  --frio-12:rgba(204,122,157,.12);
  --frio-27:rgba(204,122,157,.27);
  --frio-53:rgba(204,122,157,.53);
  --frio-0:rgba(204,122,157,0);
  --olivo-17:rgba(172,136,162,.17);
  --olivo-35:rgba(172,136,162,.35);
  --olivo-0:rgba(172,136,162,0);
  --veta:rgba(242,243,236,.10);
  --veta-2:rgba(242,243,236,.19);
  --cuenco:0 32px 78px -46px rgba(0,0,0,.95);
  --letra:"Cantarell",system-ui,sans-serif;
  --marco:"Afacad Flux",system-ui,sans-serif;
  --peso-rotulo:500;
  --peso-firme:700;
  --peso-titulo:700;
}

/* Ambient Light Design · upgradeguidemx.click -----------------------------
   Клон уника u7: тот же приём (тёмная страница, радиальные пятна света,
   светящаяся кромка панелей, значки в ореолах), свои приборы — первый экран
   без кадра, таблица оборудования, неравная сетка доводов, блок «что
   поднимают на крышу» и вопросы со списком документов.                  */

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--noche);color:var(--tinta);font-family:var(--letra);
     -webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.013em;line-height:1.17}
/* подпись таблицы оборудования читает только экранный диктор. Прятали её
   коробкой 1x1 с clip:rect(0 0 0 0) — спрятана она была честно, но обход
   на 375 меряет ЛЮБУЮ коробку с текстом и ругается на всё уже 110 точек,
   так что этот самый 1px и всплывал как «текст в узкой колонке».
   Уводим за левый край с натуральной шириной: влево страница в LTR не
   прокручивается (scrollWidth не растёт), диктор подпись по-прежнему
   читает, а коробка перестаёт быть столбиком в одно слово */
.oculto{position:absolute;left:-9999px;top:auto;width:auto;height:auto;
     overflow:hidden;white-space:nowrap}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,
     'GRAD' 0,'opsz' 40;line-height:1}

.rotulo{font-family:var(--marco);font-weight:var(--peso-rotulo);
     font-size:.74rem;letter-spacing:.21em;text-transform:uppercase}
.rubro{font-family:var(--marco);font-weight:var(--peso-firme);
     font-size:1.18rem;letter-spacing:.02em;color:var(--tinta)}
.chispazo{color:var(--olivo);text-shadow:0 0 34px var(--olivo-35)}
.lazo{color:var(--frio);text-decoration:underline;text-underline-offset:3px}
.lazo:hover{text-shadow:0 0 16px var(--frio-53)}

/* радиальный свет ------------------------------------------------------- */
.lecho{position:relative;isolation:isolate;overflow:hidden}
.aliento{position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.aliento-frio{background:radial-gradient(closest-side,var(--frio-27),
     var(--frio-0))}
.aliento-olivo{background:radial-gradient(closest-side,var(--olivo-17),
     var(--olivo-0))}

/* панели со светящейся кромкой ----------------------------------------- */
.tablilla{position:relative;border-radius:10px;
     background:linear-gradient(190deg,var(--claro),#0E100A);
     box-shadow:var(--cuenco)}
.tablilla::before{content:"";position:absolute;inset:0;border-radius:inherit;
     padding:1px;pointer-events:none;
     background:linear-gradient(190deg,var(--frio-53),var(--olivo-35) 52%,
       rgba(242,243,236,.05) 86%);
     -webkit-mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);mask-composite:exclude}
.tablilla-viva{box-shadow:var(--cuenco),0 0 70px -34px var(--frio-53)}

/* шапка ----------------------------------------------------------------- */
.cornisa{position:fixed;top:0;left:0;right:0;z-index:50;
     background:rgba(9,10,7,.76);backdrop-filter:blur(12px);
     border-bottom:1px solid var(--veta);transition:background .3s ease}
.cornisa.fija{background:rgba(9,10,7,.97)}
.cornisa::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;
     height:1px;background:linear-gradient(90deg,transparent,var(--olivo-35)
     40%,var(--frio-53) 60%,transparent)}
.enlace-cornisa{font-size:.95rem;color:var(--sub);transition:color .25s}
.enlace-cornisa:hover{color:var(--tinta);text-shadow:0 0 18px var(--frio-53)}

/* кнопки: у клона мягкий прямоугольник --------------------------------- */
.clave{display:inline-flex;align-items:center;gap:.5rem;border-radius:10px;
     padding:.92rem 1.65rem;font-weight:var(--peso-titulo);font-size:.96rem;
     cursor:pointer;transition:box-shadow .3s ease,transform .3s ease,
     border-color .3s ease}
.clave .material-symbols-outlined{font-size:20px}
.clave-corta{padding:.58rem 1.1rem;font-size:.87rem;white-space:nowrap}
.clave-luz{color:var(--noche);
     background:linear-gradient(110deg,var(--frio),#FFFFFF 240%);
     box-shadow:0 0 32px -12px var(--frio-53)}
.clave-luz:hover{box-shadow:0 0 46px -10px var(--frio-53);
     transform:translateY(-1px)}
.clave-linea{color:var(--tinta);border:1px solid var(--veta-2)}
.clave-linea:hover{border-color:var(--frio-53);
     box-shadow:0 0 30px -18px var(--frio-53)}
.clave-plana{color:var(--sub)}
.clave-plana:hover{color:var(--tinta)}

/* первый экран без кадра ----------------------------------------------- */
.frente{padding-bottom:1rem}
.lamela{padding:1.2rem 1.3rem;border-radius:10px;
     border:1px solid var(--veta-2);background:rgba(21,24,16,.72);
     box-shadow:inset 0 1px 0 0 var(--frio-27)}
.lamela>.material-symbols-outlined{color:var(--frio);font-size:26px}
.titulo-lamela{margin-top:.7rem;font-family:var(--marco);
     font-weight:var(--peso-firme);font-size:1.05rem;color:var(--tinta)}

/* значок в ореоле ------------------------------------------------------- */
.roseta{display:inline-grid;place-items:center;width:56px;height:56px;
     border-radius:10px;
     background:radial-gradient(circle at 50% 42%,var(--frio-27),
       var(--frio-0) 72%);
     box-shadow:inset 0 0 0 1px var(--veta),0 0 28px -8px var(--frio-53)}
.roseta .material-symbols-outlined{font-size:28px;color:var(--frio)}
.roseta-grande{width:84px;height:84px;border-radius:16px}
.roseta-grande .material-symbols-outlined{font-size:40px}

/* таблица оборудования -------------------------------------------------- */
.marco-retrato{overflow:hidden;border-radius:10px;
     box-shadow:var(--cuenco),0 0 70px -36px var(--frio-53);
     position:relative}
.marco-retrato img{width:100%;height:clamp(180px,26vw,300px);
     object-fit:cover;object-position:center 55%}
.marco-retrato::after{content:"";position:absolute;inset:0;
     pointer-events:none;box-shadow:inset 0 0 0 1px var(--frio-27),
     inset 0 -70px 60px -50px rgba(9,10,7,.95)}
.marco-equipo{border:1px solid var(--veta);border-radius:10px;
     background:rgba(21,24,16,.72);overflow-x:auto}
.tabla-equipo{width:100%;min-width:700px;border-collapse:collapse;
     font-size:.9rem}
.tabla-equipo th,.tabla-equipo td{text-align:left;vertical-align:top;
     padding:1.05rem 1.2rem;border-top:1px solid var(--veta)}
.tabla-equipo thead th{border-top:0;font-family:var(--marco);
     font-weight:var(--peso-rotulo);font-size:.7rem;letter-spacing:.17em;
     text-transform:uppercase;color:var(--cap)}
.tabla-equipo tbody th{color:var(--olivo);font-weight:var(--peso-titulo);
     width:22%}
.celda-pieza{display:flex;gap:.6rem;align-items:baseline}
.orden-pieza{display:inline-grid;place-items:center;width:22px;height:22px;
     flex:0 0 auto;border-radius:6px;font-family:var(--marco);
     font-size:.74rem;font-weight:var(--peso-firme);color:var(--noche);
     background:var(--olivo)}
.tabla-equipo td{color:var(--sub);line-height:1.62}
.tabla-equipo tbody tr:hover{background:var(--frio-12)}

/* доводы на неравной сетке --------------------------------------------- */
.ventaja{padding:1.5rem}

/* что поднимают на крышу ------------------------------------------------ */
.marco-caja{overflow:hidden;border-radius:10px;border:1px solid var(--veta-2)}
.marco-caja img{width:100%;height:clamp(170px,24vw,260px);object-fit:cover}
.nota-caja{margin-top:1.4rem;padding-left:1.1rem;
     border-left:3px solid var(--olivo-35)}
.titulo-nota{font-family:var(--marco);font-weight:var(--peso-firme);
     font-size:1.05rem;color:var(--tinta)}

/* плитки штатов --------------------------------------------------------- */
.mosaico{padding:1.3rem 1.4rem;border-radius:10px;
     border:1px solid var(--veta);background:rgba(21,24,16,.62);
     border-top:2px solid var(--frio-27)}
.mosaico-vacio{background:transparent;border-style:dashed;
     border-top-style:dashed;border-top-color:var(--veta-2)}
.nombre-estado{font-family:var(--marco);font-weight:var(--peso-firme);
     font-size:1.05rem;color:var(--tinta)}

/* лента отзывов --------------------------------------------------------- */
.carril{display:flex;gap:1rem;padding:.4rem .2rem 1.2rem;
     scroll-behavior:smooth;overscroll-behavior-x:contain}
.carril>.testimonio{flex:0 0 auto;width:min(84vw,330px);padding:1.6rem}
.carril::-webkit-scrollbar{height:6px}
.carril::-webkit-scrollbar-track{background:rgba(242,243,236,.06);
     border-radius:99px}
.carril::-webkit-scrollbar-thumb{background:var(--frio-27);border-radius:99px}
.autor{margin-top:1.1rem;font-family:var(--marco);
     font-weight:var(--peso-firme);color:var(--tinta)}
.tope{display:grid;place-items:center;width:44px;height:44px;
     border-radius:10px;border:1px solid var(--veta-2);color:var(--tinta);
     background:rgba(21,24,16,.65);transition:box-shadow .3s,
     border-color .3s}
.tope:hover{border-color:var(--frio-53);box-shadow:0 0 28px -12px
     var(--frio-53)}

/* вопросы и документы --------------------------------------------------- */
.renglon-duda{margin-top:.9rem}
.duda{border-radius:10px;border:1px solid var(--veta);
     background:rgba(21,24,16,.6);transition:border-color .3s ease,
     background .3s ease}
.duda summary{display:flex;gap:1rem;align-items:flex-start;
     justify-content:space-between;cursor:pointer;list-style:none;
     padding:1.15rem 1.35rem;font-weight:var(--peso-titulo)}
.duda summary::-webkit-details-marker{display:none}
.duda p{padding:0 1.35rem 1.35rem}
.duda .pico{color:var(--frio);transition:transform .3s ease}
.duda[open]{border-color:var(--frio-27);background:rgba(26,30,20,.85)}
.duda[open] .pico{transform:rotate(180deg)}
.papeles{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.papeles li{position:relative;padding-left:1.7rem;font-size:.93rem;
     color:var(--sub);line-height:1.6}
.papeles li::before{content:"";position:absolute;left:0;top:.45rem;
     width:9px;height:9px;background:var(--olivo);
     transform:rotate(45deg)}

/* форма ----------------------------------------------------------------- */
.lado-ancho{flex:1 1 62%;min-width:0}
.lado-angosto{flex:1 1 38%;min-width:0}
.campo-caja{display:block}
.rotulo-campo{display:block;font-family:var(--marco);
     font-weight:var(--peso-rotulo);font-size:.71rem;letter-spacing:.15em;
     text-transform:uppercase;color:var(--cap);margin-bottom:.5rem}
.celda-campo{width:100%;border-radius:8px;padding:.85rem 1rem;
     color:var(--tinta);background:rgba(9,10,7,.8);
     border:1px solid var(--veta-2);font-family:var(--letra);
     font-size:.97rem;transition:border-color .25s,box-shadow .25s}
.celda-campo::placeholder{color:var(--cap)}
.celda-campo:focus{outline:none;border-color:var(--frio-53);
     box-shadow:0 0 0 3px var(--frio-12)}
.celda-campo.mal{border-color:var(--malo);
     box-shadow:0 0 0 3px rgba(208,106,78,.14)}
select.celda-campo{appearance:none;background-image:linear-gradient(45deg,
     transparent 50%,var(--cap) 50%),linear-gradient(135deg,var(--cap) 50%,
     transparent 50%);background-position:calc(100% - 20px) 55%,
     calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;
     background-repeat:no-repeat;padding-right:2.6rem}
select.celda-campo option{background:#151810;color:#F2F3EC}
.error-campo{display:none;color:var(--malo);font-size:.82rem;
     margin-top:.45rem}
.error-campo.visible{display:block}
.permiso{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.permiso input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto}
.escalones{list-style:none;counter-reset:tramo;padding:0;margin:0}
.escalones li{counter-increment:tramo;position:relative;padding-left:2.5rem;
     margin-bottom:1.1rem;font-size:.93rem;color:var(--sub);line-height:1.6}
.escalones li::before{content:counter(tramo);position:absolute;left:0;top:0;
     display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
     font-family:var(--marco);font-size:.8rem;font-weight:var(--peso-firme);
     color:var(--noche);background:var(--olivo)}
.paso-final{padding:1.2rem 1.3rem;border-radius:10px;
     border:1px solid var(--veta);background:rgba(21,24,16,.6)}
.paso-final>.material-symbols-outlined{color:var(--frio);font-size:24px}
.titulo-paso{margin-top:.6rem;font-weight:var(--peso-titulo);
     color:var(--tinta)}

/* подвал ---------------------------------------------------------------- */
.basa{border-top:1px solid var(--veta);background:#070805}
.enlace-basa{color:var(--sub);transition:color .25s;
     display:inline-block;max-width:100%;overflow-wrap:anywhere}
.enlace-basa:hover{color:var(--tinta);text-shadow:0 0 16px var(--frio-53)}
.filo-basa{margin-top:2.5rem;padding-top:1.5rem;
     border-top:1px solid var(--veta);font-size:.8rem;color:var(--cap)}

/* печенья: плашка справа внизу, широкая -------------------------------- */
.mordida{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
     display:none}
.mordida.visible{display:block}
@media(min-width:960px){.mordida{left:auto;width:460px}}

/* правовые страницы ----------------------------------------------------- */
.texto-legal h2{font-size:1.3rem;margin:2rem 0 .7rem;color:var(--tinta);
     padding-bottom:.4rem;border-bottom:1px solid var(--veta)}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{color:var(--sub);line-height:1.76;
     margin-bottom:.95rem;font-size:.96rem}
.texto-legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.texto-legal li{margin-bottom:.5rem}
