/* Blueprint Draft Grid — roofmaintenancemx.club (клон уника roofingmxsolutions.pro)
   Чертёжный лист: поле выверочных РОМБОВ с шагом 72, отметка вшита в шапку
   секции, карточек-листов нет — полосы во всю ширину. Теней нет вовсе. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:#F3F4F6;color:#191A24;
 font-family:'Varta',system-ui,-apple-system,'Segoe UI',sans-serif;
 font-weight:400;font-size:16.5px;line-height:1.63;
 /* Поле меток, не клетка: ромб в узле, засечки сверху и снизу. Шаг 72 —
    вдвое чаще, чем у уника, и рисунок другой. */
 background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><g fill='none' stroke='%23DCDEE5' stroke-width='1'><path d='M36 29l7 7-7 7-7-7z'/></g><g fill='none' stroke='%23C1C4D2' stroke-width='1'><path d='M36 0v5M36 67v5'/></g></svg>");
 background-size:72px 72px}
img{max-width:100%;display:block}
a{color:#212B5E}
h1,h2,h3{font-family:'Roboto Serif',Georgia,'Times New Roman',serif;
 font-weight:700;line-height:1.15;letter-spacing:-.012em;margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.ancho{max-width:1160px;margin:0 auto;padding:0 26px;width:100%}
.salta{position:absolute;left:-9999px}
.salta:focus{left:12px;top:12px;z-index:60;background:#FEFEFE;padding:10px 16px;
 border:1px solid #86878D}
:focus-visible{outline:2px solid #212B5E;outline-offset:2px}

/* моноширинные подписи чертежа */
.rotulo,.cota,.franja-sello,.paso-num,.nota-letra,.mun-num,.duda-num,
.forma-cab,.dato span,.celda span,.ciclo thead th{
 font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-size:11.4px;letter-spacing:.15em;
 text-transform:uppercase}
.rotulo{color:#494A50;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:12px;
 align-items:baseline;border-bottom:1px solid #BABBBF;padding-bottom:11px}
.cota{color:#564A17;border:1px solid #86878D;padding:3px 8px;
 line-height:1.5}

/* ── шапка ───────────────────────────────────────────────────────────── */
.cabezal{position:sticky;top:0;z-index:40;background:#FEFEFE;
 border-bottom:1px solid #86878D}
.cabezal-fila{display:flex;align-items:center;gap:18px;min-height:68px}
.firma{display:flex;align-items:center;gap:11px;text-decoration:none;
 color:#191A24;min-width:0}
.firma img{flex:0 0 auto;width:40px;height:40px;object-fit:contain}
.firma-txt{display:flex;flex-direction:column;min-width:0}
.firma-txt b{font-family:'Roboto Serif',Georgia,serif;font-weight:700;
 font-size:19.5px;line-height:1.1;white-space:nowrap}
.firma-txt i{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-style:normal;font-size:10.4px;
 letter-spacing:.11em;text-transform:uppercase;color:#494A50;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex;gap:20px;margin-left:auto}
.menu a{font-family:'Montserrat',system-ui,sans-serif;font-weight:500;
 font-size:13.4px;letter-spacing:.05em;text-transform:uppercase;
 text-decoration:none;color:#191A24;padding:6px 0;
 border-bottom:1px solid transparent;white-space:nowrap}
.menu a:hover,.menu a.aqui{border-bottom-color:#212B5E;color:#212B5E}
.abre{display:none;flex:0 0 auto;width:44px;height:38px;background:none;
 border:1px solid #86878D;cursor:pointer;padding:9px 10px}
.abre span{display:block;height:1px;background:#191A24;margin:5px 0}

/* ── кнопки ──────────────────────────────────────────────────────────── */
.tecla{display:inline-block;font-family:'Montserrat',system-ui,sans-serif;
 font-weight:700;font-size:12.8px;letter-spacing:.09em;text-transform:uppercase;
 padding:13px 22px;border:1px solid #86878D;background:transparent;
 color:#212B5E;text-decoration:none;cursor:pointer;white-space:nowrap;
 position:relative}
.tecla::after{content:"";position:absolute;left:22px;right:22px;bottom:9px;
 height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
 transition:transform .18s linear}
.tecla:hover::after{transform:scaleX(1)}
.tecla-llena{background:#1F264D;border-color:#1F264D;color:#F3F3F6}
.tecla-chica{padding:9px 14px;font-size:11.4px}
.tecla-chica::after{left:14px;right:14px;bottom:6px}
.tecla-ancha{width:100%;text-align:center}
.tecla-cabezal{flex:0 0 auto}
.rot-corto{display:none}

/* ── листы ───────────────────────────────────────────────────────────── */
.pliego{padding:52px 0 0}
.pliego-uno{padding-top:34px}
.pliego h2{font-size:33px;margin-bottom:14px}
.apoyo{color:#494A50;font-size:16.2px;line-height:1.6}
.apoyo-ancho{max-width:74ch;margin-bottom:26px}
.menudo{font-size:13.5px;color:#494A50;margin-top:16px}

/* лист 01 */
.uno-red{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
 gap:46px;align-items:start}
.pliego-uno h1{font-size:47px;font-weight:400;letter-spacing:-.02em;
 margin-bottom:20px}
.entrada{font-size:17.6px;line-height:1.62;max-width:60ch}
.uno-lista{margin-top:24px;border-top:1px solid #BABBBF}
.uno-lista li{border-bottom:1px solid #BABBBF;padding:10px 0 10px 24px;
 font-size:15.2px;position:relative;color:#494A50}
.uno-lista li::before{content:"";position:absolute;left:4px;top:19px;width:9px;
 height:9px;border:1px solid #564A17;transform:rotate(45deg)}
.uno-teclas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.uno-lado{border-left:1px solid #86878D;padding-left:26px}
.dibujo{display:block;color:#212B5E}
.traza{width:86px;height:64px;display:block}
.dibujo-uno .traza{width:112px;height:82px}
.ficha-datos{margin-top:22px;border-top:1px solid #BABBBF}
.dato{border-bottom:1px solid #BABBBF;padding:11px 0}
.dato span{display:block;color:#494A50;margin-bottom:3px}
.dato b{display:block;font-size:14.6px;font-weight:600;line-height:1.4}
.cuadro{margin:34px 0 0;border:1px solid #86878D;padding:10px;
 background:#FEFEFE}
.cuadro img{width:100%;height:330px;object-fit:cover}
.cuadro figcaption{font-size:13.4px;color:#494A50;line-height:1.5;
 margin-top:10px;padding-left:12px;border-left:1px solid #564A17}
.cuadro-vacio{display:flex;justify-content:center;padding:52px 10px}
.cuadro-vacio .traza{width:180px;height:132px}

/* лист 02 — заявка */
.dos-red{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
 gap:42px;align-items:start}
.dos-txt h2{margin-bottom:12px}
.riel{margin-top:24px;padding-bottom:6px;scroll-padding-left:0}
.riel-fila{display:flex;gap:14px;min-width:min-content}
.paso-r{flex:0 0 200px;border:1px solid #BABBBF;background:#FEFEFE;
 padding:14px 16px}
.paso-num{display:block;color:#564A17;margin-bottom:7px}
.paso-r b{display:block;font-family:'Roboto Serif',Georgia,serif;font-weight:500;
 font-size:17px;line-height:1.25;margin-bottom:5px}
.paso-r i{font-style:normal;font-size:13.4px;line-height:1.45;color:#494A50}
.hoja-forma{border:1px solid #86878D;background:#FEFEFE}
.forma-cab{display:flex;justify-content:space-between;align-items:center;
 padding:12px 20px;border-bottom:1px solid #86878D;color:#494A50}
.forma-cab b{color:#564A17}
.forma-cuerpo{padding:22px 20px 24px}
.casilla{margin-bottom:15px}
.casilla label{display:block;font-family:'Montserrat',sans-serif;font-weight:500;
 font-size:12.4px;letter-spacing:.06em;text-transform:uppercase;color:#494A50;
 margin-bottom:6px}
.casilla input,.casilla select{width:100%;font-family:inherit;font-size:15.5px;
 color:#191A24;background:#FFFFFF;border:1px solid #86878D;
 border-radius:0;padding:11px 12px}
.casilla input:focus,.casilla select:focus{outline:none;border-color:#212B5E;
 box-shadow:inset 0 -2px 0 #212B5E}
/* подпись рядом с галкой набирается как обычный текст: общее правило
   «.casilla label» её не касается, класс у неё свой */
.acepto{display:flex;gap:10px;align-items:flex-start;margin:20px 0 18px}
.acepto input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;
 accent-color:#212B5E}
.acepto label{font-size:13.8px;line-height:1.5;color:#191A24;
 font-family:inherit;text-transform:none;letter-spacing:0}
.mal-txt{display:block;font-size:12.6px;color:#564A17;margin-top:5px}
.casilla input.mal,.casilla select.mal{border-color:#564A17}
.menudo-forma{margin-top:14px}

/* лист 03 — кто мы */
.tres-red{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.26fr);
 gap:38px;align-items:start}
.tres-txt p{font-size:15.6px;line-height:1.66;color:#494A50;margin-top:13px}
.tres-txt b{color:#191A24;font-weight:700}
.dibujo-tres{border-left:1px solid #86878D;padding-left:22px}
.sello-red{display:grid;gap:1px;margin-top:32px;
 background:#86878D;border:1px solid #86878D}
.sello-doc{display:flex;flex-wrap:wrap}
.celda{flex:1 1 172px;background:#FEFEFE;padding:11px 13px;min-width:0}
.celda span{display:block;color:#494A50;margin-bottom:4px}
.celda b{display:block;font-size:13.4px;letter-spacing:.03em;color:#191A24;
 font-weight:600;line-height:1.4;word-break:break-word}

/* лист 04 — годовой цикл */
.nota-p{font-size:14.4px;line-height:1.56;color:#494A50;max-width:80ch;
 border-left:2px solid #86878D;padding-left:16px;margin-bottom:24px}
.nota-p-fin{margin:22px 0 0}
.ciclo{width:100%;border-collapse:collapse;font-size:14.4px;min-width:720px}
.ciclo caption{caption-side:bottom;text-align:left;font-size:12.8px;
 line-height:1.55;color:#494A50;padding-top:13px}
.ciclo th,.ciclo td{text-align:left;padding:13px 14px;vertical-align:top;
 border-bottom:1px solid #BABBBF}
.ciclo thead th{color:#494A50;border-bottom:2px solid #86878D;
 font-weight:700}
.ciclo tbody th{font-weight:700;color:#191A24;white-space:nowrap}
.ciclo tbody tr:nth-child(even) th,.ciclo tbody tr:nth-child(even) td{
 background:#F3F3F6}

/* лист 05 — полосы работ */
.franja{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;
 align-items:start;border-top:1px solid #BABBBF;padding:24px 0}
.franja:first-of-type{border-top:1px solid #86878D}
.franja h3{font-size:21px;margin-bottom:9px}
.franja p{font-size:15.2px;line-height:1.6;color:#494A50;max-width:70ch}
.franja-sello{color:#564A17;border:1px solid #BABBBF;padding:4px 9px;
 white-space:nowrap;line-height:1.5}
.puntos{margin-top:11px;display:grid;gap:6px 10px}
.punto{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-size:11px;letter-spacing:.07em;
 text-transform:uppercase;color:#212B5E;border:1px solid #BABBBF;
 padding:5px 9px;line-height:1.45}
.cuenta{margin-top:22px;border-top:1px solid #86878D;padding-top:14px;
 font-size:14.2px;color:#494A50;max-width:80ch}

/* лист 06 — семь шагов в две колонки; на узком экране сетка снимается
   переключением display, а не борьбой с встроенным стилем */
.pasos-col{display:grid;gap:0 44px;margin-top:6px}
.paso-v{border-top:1px solid #BABBBF;padding:18px 0 6px;margin-bottom:2px}
.paso-v h2,.paso-v h3{font-size:19.5px;margin:6px 0 8px}
.paso-v p{font-size:14.8px;line-height:1.58;color:#494A50}

/* лист 07 — деталь */
.notas-red{display:grid;gap:1px;margin-top:28px;background:#BABBBF;
 border:1px solid #BABBBF}
.dibujo-det{margin:18px 0 0}
.dibujo-det .traza{width:132px;height:97px}
.nota-b{background:#F3F4F6;padding:18px 16px}
.nota-letra{display:block;color:#564A17;margin-bottom:8px}
.nota-b h3{font-size:17.5px;margin-bottom:7px}
.nota-b p{font-size:14px;line-height:1.55;color:#494A50}

/* лист 08 — зона */
.zona-red{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
 gap:40px;align-items:start}
.zona-txt .apoyo{margin-top:12px}
.dibujo-plano{margin-top:22px}
.dibujo-plano .traza{width:150px;height:110px}
.zona-celdas{display:grid;gap:1px;background:#BABBBF;
 border:1px solid #BABBBF}
.mun{background:#F3F4F6;padding:16px 15px}
.mun-num{display:block;color:#564A17;margin-bottom:7px}
.mun b{display:block;font-family:'Roboto Serif',Georgia,serif;font-weight:700;
 font-size:18px;line-height:1.2;margin-bottom:5px}
.mun i{font-style:normal;font-size:13.4px;line-height:1.48;color:#494A50}

/* лист 09 — вопросы в двух настоящих колонках */
.dudas-red{display:grid;gap:0 40px;margin-top:6px}
.mas-red{display:flex;flex-wrap:wrap;gap:1px;margin-top:26px;
 background:#BABBBF;border:1px solid #BABBBF}
.mas{flex:1 1 220px;background:#FEFEFE;padding:13px 15px;font-size:13.8px;
 line-height:1.5;color:#494A50}
.mas b{display:block;font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-size:11px;letter-spacing:.14em;
 text-transform:uppercase;color:#564A17;margin-bottom:5px}
.duda{border-top:1px solid #BABBBF}
.duda:first-of-type{border-top:1px solid #86878D}
.duda summary{display:flex;gap:12px;align-items:baseline;cursor:pointer;
 padding:15px 0;font-family:'Roboto Serif',Georgia,serif;font-weight:700;
 font-size:18px;line-height:1.3;list-style:none}
.duda summary::-webkit-details-marker{display:none}
.duda-num{flex:0 0 auto;color:#564A17}
.duda[open] summary{color:#212B5E}
.duda p{padding:0 0 16px 34px;font-size:14.8px;line-height:1.6;color:#494A50}

/* ── правовые страницы ───────────────────────────────────────────────── */
.doc{padding:44px 26px 60px;max-width:900px}
.doc h1{font-size:38px;font-weight:400;margin-bottom:14px}
.sello-doc{margin-bottom:34px}
.prosa h2{font-size:21.5px;margin:30px 0 11px}
.prosa p{font-size:15.6px;line-height:1.72;margin-bottom:13px;max-width:72ch}
.volver{margin-top:34px;font-family:'Montserrat',sans-serif;font-weight:500;
 font-size:12.8px;letter-spacing:.07em;text-transform:uppercase}
.pasos-acuse{margin-top:28px}

/* ── подвал ──────────────────────────────────────────────────────────── */
.zocalo{background:#141931;color:#F3F3F6;padding:50px 0 28px;
 margin-top:56px}
.zocalo-red{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.zocalo-firma{font-family:'Roboto Serif',Georgia,serif;font-weight:700;
 font-size:23px;margin-bottom:12px}
.zocalo-lead{font-size:14.4px;line-height:1.6;color:#8D8F9B;
 max-width:46ch}
.zocalo-dato{font-size:13.2px;color:#8D8F9B;margin-top:10px}
.zocalo-tit{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-size:10.8px;letter-spacing:.15em;
 text-transform:uppercase;color:#B19B2F;margin-bottom:13px}
.zocalo-lista li{margin-bottom:9px;font-size:14px}
.zocalo-lista a{color:#F3F3F6;text-decoration:none;
 border-bottom:1px solid transparent}
.zocalo-lista a:hover{border-bottom-color:#B19B2F}
.zocalo-pie{border-top:1px solid #4C5062;margin-top:34px;padding-top:19px}
.zocalo-pie p{font-size:12.6px;line-height:1.62;color:#8D8F9B;
 max-width:98ch}
.zocalo-pie p+p{margin-top:8px}

/* ── печенья ─────────────────────────────────────────────────────────── */
.galleta{position:fixed;left:16px;bottom:16px;z-index:50;
 width:min(392px,calc(100vw - 32px));background:#FEFEFE;
 border:1px solid #86878D;padding:17px}
.galleta[hidden]{display:none}
.galleta-tit{font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;font-size:10.8px;letter-spacing:.15em;
 text-transform:uppercase;color:#564A17;margin-bottom:8px}
.galleta-txt{font-size:13.6px;line-height:1.55;color:#494A50}
.galleta-bot{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
 margin-top:14px}
.galleta-mas{font-size:12.5px;color:#212B5E}

/* ── узкие экраны ────────────────────────────────────────────────────── */
@media (max-width:1080px){
 /* встроенную сетку снимаем сменой display, иначе правило проигрывает */
 .notas-red{display:flex;flex-wrap:wrap}
 .nota-b{flex:1 1 210px}
 .zocalo-red{grid-template-columns:1fr 1fr}
 .uno-red{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px}
}
@media (max-width:900px){
 .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
  background:#FEFEFE;border-bottom:1px solid #86878D;
  padding:6px 26px 14px;display:none}
 .menu.abierto{display:flex}
 .menu a{padding:11px 0;border-bottom:1px solid #BABBBF}
 .abre{display:block;order:3}
 .cabezal-fila{position:relative;flex-wrap:nowrap}
 .tecla-cabezal{margin-left:auto;font-size:11.4px;padding:10px 14px}
 .tecla-cabezal::after{left:14px;right:14px;bottom:7px}
 .uno-red,.dos-red,.tres-red,.zona-red{grid-template-columns:minmax(0,1fr);
  gap:26px}
 .dudas-red,.sello-red{display:block}
 .uno-lado,.dibujo-tres{border-left:0;padding-left:0;
  border-top:1px solid #86878D;padding-top:20px}
 .pasos-col{display:block}
 .dudas-red{grid-template-columns:minmax(0,1fr)}
 .franja{grid-template-columns:auto minmax(0,1fr);gap:20px}
 .franja-sello{grid-column:2;justify-self:start}
 .pliego-uno h1{font-size:37px}
 .doc h1{font-size:31px}
}
@media (max-width:640px){
 body{font-size:16px}
 .ancho{padding-left:16px;padding-right:16px}
 .pliego{padding-top:38px}
 .zona-celdas{display:block}
 .nota-b{flex:1 1 100%}
 .puntos{display:flex;flex-wrap:wrap}
 .zocalo-red{grid-template-columns:minmax(0,1fr);gap:26px}
 .celda{flex:1 1 132px}
 .mun{border-bottom:1px solid #BABBBF}
 .rot-largo{display:none}
 .rot-corto{display:inline}
 .firma-txt b{font-size:17px}
 .firma-txt i{display:none}
 .pliego-uno h1{font-size:30px}
 .pliego h2{font-size:26px}
 .cuadro img{height:220px}
 .franja{grid-template-columns:minmax(0,1fr);gap:14px}
 .duda p{padding-left:0}
 .galleta{left:10px;right:10px;bottom:10px;width:auto}
 /* грабли: ячейка в два слова и десять строк — таблица идёт блоками */
 .ciclo{min-width:0}
 .ciclo,.ciclo caption,.ciclo thead,.ciclo tbody,.ciclo tr,.ciclo th,
 .ciclo td{display:block;width:auto}
 .ciclo thead{position:absolute;left:-9999px}
 .ciclo tbody tr{border:1px solid #86878D;margin-bottom:14px;
  padding:5px 0}
 .ciclo tbody th,.ciclo tbody td{border-bottom:0;padding:7px 14px;
  white-space:normal}
 .ciclo tbody th{font-size:17px;padding-bottom:2px}
 .ciclo tbody td::before{content:attr(data-r) " · ";font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,'DejaVu Sans Mono','Courier New',monospace;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#494A50}
 .ciclo tbody tr:nth-child(even) th,.ciclo tbody tr:nth-child(even) td{
  background:transparent}
}

/* На телефоне кнопка призыва в шапке наезжала на имя фирмы:
   имя — это домен целиком, места ему рядом с гамбургером нет.
   Кнопку убираем, призыв остаётся в первом экране и в конце. */
@media(max-width:700px){.tecla-cabezal{display:none}}
