/* HUD Minimal Interface — premiuminspectmx.club
   Волосяные линии, прозрачные панели и бенто-раскладка. Ни одной тени:
   глубина набирается светом рамки и прозрачностью.                        */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#1D062D;color:#F5F3F6;font-family:"Inclusive Sans","Segoe UI",Arial,
 sans-serif;font-weight:400;font-size:16px;line-height:1.72;
 -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
/* сетка поля: на псевдоэлементе, а не фоном предка — под текстом остаётся
   ровный тон и контраст считается по нему */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(rgba(52,31,66,.55) 1px,transparent 1px),
  linear-gradient(90deg,rgba(52,31,66,.55) 1px,transparent 1px);
 background-size:64px 64px;opacity:.5}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:#2FB137}
.marco{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:600;
 line-height:1.08;letter-spacing:.005em;text-transform:uppercase}
h1{font-size:clamp(32px,5.4vw,62px)}
h2{font-size:clamp(25px,3.4vw,40px)}
h3{font-size:19px;font-weight:600;letter-spacing:.02em}
p{overflow-wrap:break-word}
.clave{display:block;font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-weight:500;font-size:11.6px;letter-spacing:.3em;text-transform:uppercase;
 color:#2FB137}
.clave-v{color:#AC89C6}
.tenue{color:#9C93A3}
.cap{color:#9C92A3}
.serif{font-family:"Manuale",Georgia,serif;font-weight:400;
 text-transform:none;letter-spacing:0}

/* ── панель ───────────────────────────────────────────────────────────── */
.panel{position:relative;background:rgba(245,243,246,.05);border:1px solid #483555;
 padding:22px 22px 24px;transition:border-color .3s,box-shadow .3s,
 background .3s}
.panel::before,.panel::after{content:"";position:absolute;width:11px;
 height:11px;border:1px solid #2FB137;opacity:.7;transition:opacity .3s}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel:hover{border-color:rgba(47,177,55,.34);box-shadow:0 0 0 1px rgba(47,177,55,.13),
 0 0 26px rgba(47,177,55,.13)}
.panel:hover::before,.panel:hover::after{opacity:1}
.panel-plano::before,.panel-plano::after{display:none}

/* ── шапка ────────────────────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:40;background:rgba(29,6,45,.78);
 border-bottom:1px solid #483555;backdrop-filter:blur(8px)}
.barra .marco{display:flex;align-items:center;gap:18px;
 justify-content:space-between;min-height:64px}
.sello{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
 color:#F5F3F6;min-width:0}
.sello img{width:36px;height:36px;flex:0 0 auto}
/* min-width:0 нужен и потомку: без него флексовый элемент не сжимается
   ниже содержимого, и длинное имя фирмы вылезает на кнопку */
.sello{flex:1 1 auto}
.sello b{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:700;
 font-size:18px;letter-spacing:.06em;text-transform:uppercase;min-width:0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .bo{flex:0 0 auto}
@media(max-width:559px){.sello b{font-size:15px;letter-spacing:.01em}
 .sello img{width:30px;height:30px}
 .barra .bo-chica{padding:9px 13px;font-size:12.2px;letter-spacing:.12em}}
.nav{display:none;gap:24px}
.nav a{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:500;
 font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#9C93A3;
 text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
 transition:color .25s,border-color .25s}
.nav a:hover{color:#F5F3F6;border-color:#2FB137}
@media(min-width:960px){.nav{display:flex}}
.estado{display:none;align-items:center;gap:8px;font-family:"Saira Condensed",
 "Arial Narrow",sans-serif;font-size:12.4px;letter-spacing:.2em;
 text-transform:uppercase;color:#9C92A3;white-space:nowrap}
.pulso{width:7px;height:7px;background:#2FB137;border-radius:50%;
 animation:pulso 2.6s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.35}50%{opacity:1}}
@media(min-width:1100px){.estado{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.pulso{animation:none;opacity:.8}
 html{scroll-behavior:auto}}

/* ── кнопки: прозрачная заливка, светящаяся рамка ─────────────────────── */
.bo{display:inline-flex;align-items:center;justify-content:center;gap:10px;
 cursor:pointer;text-decoration:none;white-space:nowrap;background:transparent;
 font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:600;
 font-size:14.6px;letter-spacing:.2em;text-transform:uppercase;
 padding:14px 26px;border:1px solid #2FB137;color:#2FB137;border-radius:0;
 transition:box-shadow .28s,background .28s,color .28s,letter-spacing .28s}
.bo:hover{background:rgba(47,177,55,.13);box-shadow:0 0 0 1px rgba(47,177,55,.34),0 0 22px rgba(47,177,55,.13);
 letter-spacing:.24em}
.bo:active{background:rgba(47,177,55,.34);color:#F4F1F7}
.bo-tenue{border-color:#483555;color:#F5F3F6}
.bo-tenue:hover{border-color:#F5F3F6;box-shadow:none;background:rgba(245,243,246,.05)}
.bo-chica{padding:10px 16px;font-size:12.8px;letter-spacing:.16em}

/* ── бенто первого экрана ─────────────────────────────────────────────── */
.bento{display:grid;gap:14px;padding:34px 0 0}
@media(min-width:900px){
 .bento{grid-template-columns:repeat(6,1fr);gap:16px}
 .b-titulo{grid-column:span 4}
 .b-foto{grid-column:span 2;grid-row:span 2}
 .b-lectura{grid-column:span 2}
 .b-nota{grid-column:span 2}
}
.b-titulo{padding:30px 28px 32px}
.b-titulo h1{margin:16px 0 0}
.b-titulo h1 span{display:block;color:#2FB137}
.b-titulo .guia{margin-top:20px;font-size:17px;color:#9C93A3;max-width:33em}
.b-titulo .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.b-foto{padding:12px;display:flex;flex-direction:column}
.b-foto .visor{position:relative;flex:1 1 auto;min-height:240px;
 overflow:hidden;border:1px solid #483555}
.b-foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)
 contrast(1.04)}
.b-foto .visor::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 52%,rgba(29,6,45,.78) 100%);
 pointer-events:none}
.b-foto .pie-visor{display:flex;justify-content:space-between;gap:10px;
 padding:12px 4px 2px;font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-size:11.8px;letter-spacing:.18em;text-transform:uppercase;color:#9C92A3}
.b-foto .reserva{flex:1 1 auto;min-height:240px;border:1px dashed #483555;
 display:flex;align-items:center;justify-content:center;padding:20px;
 text-align:center;font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-size:12.4px;letter-spacing:.2em;text-transform:uppercase;color:#9C92A3}
.b-nota p{font-size:14.6px;color:#9C93A3;margin-top:12px}

/* ── строки прибора ───────────────────────────────────────────────────── */
.lecturas{display:grid;gap:14px;margin-top:16px}
.lectura{display:grid;grid-template-columns:1fr auto;gap:5px 14px;
 align-items:baseline}
.lectura span{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-size:12.4px;
 letter-spacing:.16em;text-transform:uppercase;color:#9C92A3}
.lectura b{font-family:"Manuale",Georgia,serif;font-weight:600;font-size:22px;
 color:#2FB137;line-height:1;text-align:right}
/* полоса в 4 точки высотой читается меряльщиком как схлопнутая коробка с
   восемью детьми — сегменты подняты до шести, и шкала стала видимее */
.escala{grid-column:1/-1;display:flex;gap:3px;margin-top:3px}
.escala i{flex:1 1 0;height:6px;background:#483555}
.escala i.on{background:#2FB137}

/* ── секции ───────────────────────────────────────────────────────────── */
.zona{padding:72px 0}
.zona-linea{border-top:1px solid #483555}
.cab{display:grid;gap:16px}
@media(min-width:900px){.cab{grid-template-columns:.9fr 1.1fr;gap:40px;
 align-items:end}}
.cab h2{margin-top:12px}
.cab p{color:#9C93A3;font-size:16.4px}

/* кто мы */
.quienes{display:grid;gap:16px;margin-top:34px}
@media(min-width:900px){.quienes{grid-template-columns:1.25fr .75fr}}
.quienes p{color:#9C93A3;font-size:16.2px;line-height:1.78}
.quienes p+p{margin-top:15px}
.ficha{margin-top:16px}
.ficha>div{display:grid;gap:3px;padding:12px 0;border-top:1px solid #483555}
.ficha dt{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:600;
 font-size:11.6px;letter-spacing:.2em;text-transform:uppercase;color:#9C92A3}
.ficha dd{font-size:15px;color:#9C93A3;line-height:1.55;
 overflow-wrap:anywhere}

/* протокол: строки, а не карточки */
.protocolo{margin-top:36px;border-top:1px solid #483555}
.punto{display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;
 padding:20px 6px;border-bottom:1px solid #483555;align-items:baseline;
 transition:background .25s,padding-left .25s}
.punto:hover{background:rgba(245,243,246,.05);padding-left:14px}
.punto>.id{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:700;
 font-size:13px;letter-spacing:.2em;color:#AC89C6;grid-column:1}
.punto h3{grid-column:2}
.punto p{grid-column:2;color:#9C93A3;font-size:15.2px;margin-top:6px;
 max-width:56em}
.punto .marca{grid-column:3;font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-size:11.8px;letter-spacing:.18em;text-transform:uppercase;color:#9C92A3;
 white-space:nowrap}
@media(max-width:699px){
 .punto{grid-template-columns:auto 1fr}
 .punto h3,.punto p{grid-column:2}
 .punto .marca{grid-column:2;margin-top:8px;white-space:normal}
}

/* модули: бенто разной ширины */
.modulos{display:grid;gap:14px;margin-top:36px}
@media(min-width:760px){.modulos{grid-template-columns:repeat(6,1fr)}
 .m-1{grid-column:span 3}.m-2{grid-column:span 3}
 .m-3{grid-column:span 2}.m-4{grid-column:span 2}.m-5{grid-column:span 2}
 .m-6{grid-column:span 6}}
.modulo h3{margin:14px 0 10px;color:#F5F3F6}
.modulo p{color:#9C93A3;font-size:15.2px}
.m-6{display:grid;gap:18px}
@media(min-width:900px){.m-6{grid-template-columns:1fr 1.25fr;
 align-items:center}}
/* line-height:1 у крупного значения прижимает его к подписи сверху вплотную,
   и строки заходят друг на друга на несколько точек: поле и просвет */
.m-6 .cifra{font-family:"Manuale",Georgia,serif;font-weight:600;
 font-size:clamp(38px,5vw,58px);line-height:1.12;margin-top:14px;
 color:#2FB137}

/* заявка */
.solicitud{display:grid;gap:16px;margin-top:34px}
@media(min-width:960px){.solicitud{grid-template-columns:.78fr 1.22fr}}
.pasos{list-style:none;counter-reset:p;display:grid;gap:16px;margin-top:18px}
.pasos li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;
 gap:14px;font-size:14.9px;color:#9C93A3;line-height:1.6}
.pasos li::before{content:counter(p,decimal-leading-zero);
 font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:700;
 font-size:12.4px;letter-spacing:.14em;color:#AC89C6;padding-top:3px}
.datos{list-style:none;display:grid;gap:10px;margin-top:22px;
 padding-top:18px;border-top:1px solid #483555;font-size:14.6px;color:#9C93A3}
.datos a{color:#2FB137;overflow-wrap:anywhere}
.campos{display:grid;gap:15px;margin-top:22px}
@media(min-width:620px){.campos{grid-template-columns:1fr 1fr}
 .ancho{grid-column:1/-1}}
.campo label{display:block;margin-bottom:7px;font-family:"Saira Condensed",
 "Arial Narrow",sans-serif;font-weight:600;font-size:11.8px;
 letter-spacing:.2em;text-transform:uppercase;color:#9C92A3}
.campo input,.campo select{width:100%;padding:13px 14px;background:#341F42;
 border:1px solid #483555;border-radius:0;color:#F5F3F6;font-family:inherit;
 font-size:15.4px;transition:border-color .25s,box-shadow .25s}
.campo select{appearance:none;background-image:none}
.campo input:focus,.campo select:focus{outline:0;border-color:#2FB137;
 box-shadow:0 0 0 1px rgba(47,177,55,.34),0 0 18px rgba(47,177,55,.13)}
.campo input.mal,.campo select.mal{border-color:#AC89C6;
 box-shadow:0 0 0 1px #AC89C6}
.err{display:none;margin-top:6px;font-family:"Saira Condensed","Arial Narrow",
 sans-serif;font-size:12.6px;letter-spacing:.1em;text-transform:uppercase;
 color:#AC89C6}
.err.ver{display:block}
/* правило «.campo label» весомее одиночного класса, и без этого согласие
   набиралось капителью прибора в 11.8 пункта */
.campo label.acuerdo{display:flex;gap:11px;align-items:flex-start;
 font-family:inherit;font-size:14.2px;font-weight:400;line-height:1.58;
 color:#9C93A3;text-transform:none;letter-spacing:0;margin-bottom:0}
.acuerdo input{margin-top:4px;flex:0 0 auto;width:17px;height:17px;
 accent-color:#2FB137}
.nota{margin-top:16px;font-size:13.2px;color:#9C92A3;line-height:1.6}

/* зона работ */
.mapa{display:grid;gap:16px;margin-top:34px}
@media(min-width:900px){.mapa{grid-template-columns:1.05fr .95fr}}
.mapa .visor{position:relative;overflow:hidden;border:1px solid #483555;
 min-height:280px}
.mapa .visor img{width:100%;height:100%;object-fit:cover;
 filter:saturate(.82)}
.mapa .reserva{min-height:280px;border:1px dashed #483555;display:flex;
 align-items:center;justify-content:center;padding:24px;text-align:center;
 font-family:"Saira Condensed","Arial Narrow",sans-serif;font-size:12.4px;
 letter-spacing:.2em;text-transform:uppercase;color:#9C92A3}
.plazas{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.plaza{border:1px solid #483555;padding:8px 13px;font-family:"Saira Condensed",
 "Arial Narrow",sans-serif;font-size:12.6px;letter-spacing:.14em;
 text-transform:uppercase;color:#9C93A3;transition:border-color .25s,
 color .25s}
.plaza:hover{border-color:#2FB137;color:#F5F3F6}

/* вопросы: не раскрывашки, а открытые ячейки бенто — на приборной панели
   показания не прячут под щелчок, и заодно блок собран не так, как у
   соседей по теме */
.qa{display:grid;gap:14px;margin-top:32px}
@media(min-width:880px){.qa{grid-template-columns:1fr 1fr}}
.qa-caja{padding:22px 22px 24px}
.qa dt{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:600;
 font-size:16.8px;letter-spacing:.03em;text-transform:uppercase;
 line-height:1.26;color:#F5F3F6;padding-bottom:12px;
 border-bottom:1px solid #483555}
.qa dd{margin-top:14px;font-size:15.2px;line-height:1.76;color:#9C93A3}

/* подвал */
.suelo{border-top:1px solid #483555;padding:52px 0 44px;font-size:14.6px;
 color:#9C93A3}
.suelo-red{display:grid;gap:28px}
@media(min-width:800px){.suelo-red{grid-template-columns:1.7fr 1fr 1fr}}
.suelo h4{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:600;
 font-size:11.6px;letter-spacing:.26em;text-transform:uppercase;color:#2FB137;
 margin-bottom:14px}
.suelo ul{list-style:none;display:grid;gap:9px}
.suelo a{color:#9C93A3;text-decoration:none;transition:color .25s;
 overflow-wrap:anywhere}
.suelo a:hover{color:#F5F3F6}
.suelo .nombre{font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-weight:700;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
 color:#F5F3F6;display:block;margin-bottom:12px}
.suelo-linea{margin-top:32px;padding-top:18px;border-top:1px solid #483555;
 font-size:13px;color:#9C92A3;line-height:1.7}
.suelo-linea p+p{margin-top:8px}

/* печенья */
.galleta{position:fixed;z-index:60;left:14px;right:14px;bottom:14px;
 background:#341F42;border:1px solid #483555;padding:18px;display:none}
.galleta.ver{display:block}
.galleta p{font-size:14px;color:#9C93A3;line-height:1.6}
.galleta .fila{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media(min-width:900px){.galleta{left:auto;width:400px}}

/* правовые страницы */
.tapa{padding:46px 0 6px}
.tapa h1{font-size:clamp(27px,3.8vw,44px);margin-top:14px}
.tapa .fecha{margin-top:14px;font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-size:12.4px;letter-spacing:.16em;text-transform:uppercase;color:#9C92A3}
.prosa{padding:26px 0 76px}
.prosa .panel{max-width:56em;padding:30px 26px 34px}
.prosa h2{font-size:clamp(19px,2.2vw,25px);margin:30px 0 12px;color:#F5F3F6}
.prosa h2:first-child{margin-top:0}
.prosa p,.prosa li{font-size:15.6px;line-height:1.8;color:#9C93A3;
 margin-bottom:13px}
.prosa ul{list-style:none;padding-left:0;margin-bottom:16px}
.prosa li{padding-left:20px;position:relative;margin-bottom:8px}
.prosa li::before{content:"";position:absolute;left:0;top:11px;width:8px;
 height:1px;background:#2FB137}
.prosa strong{color:#F5F3F6;font-weight:600}

/* страница подтверждения */
.recibo{max-width:46em;margin-top:28px}
.recibo .fila{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
 padding:13px 2px;border-bottom:1px solid #483555;font-size:15px}
.recibo .fila b{font-family:"Saira Condensed","Arial Narrow",sans-serif;
 font-weight:600;font-size:11.8px;letter-spacing:.18em;text-transform:uppercase;
 color:#9C92A3;padding-top:3px}
@media(max-width:559px){.recibo .fila{grid-template-columns:1fr}}