/* Clima Nord — услуги: спецификация-указатель, каталог строками, сравнительная таблица систем
   (на телефоне — карточками), фигуры со сдвигом, таймлайн монтажного дня. */

.sv-intro{padding-block:clamp(32px,5vw,64px);border-bottom:1px solid var(--linea)}
.sv-intro__env{display:grid;gap:36px;align-items:end}
.sv-intro h1{max-width:16ch;margin-bottom:18px}
.piezas{border:1px solid var(--tinta);background:var(--blanco)}
.piezas__titulo{padding:12px 14px;border-bottom:1px solid var(--tinta);background:var(--papel);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.piezas__lista li+li{border-top:1px solid var(--linea)}
.piezas__lista a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px 14px;
  color:var(--tinta);text-decoration:none;font-size:15px;transition:background-color .2s}
.piezas__lista a:hover{background:var(--acento-tenue)}
.piezas__lista span{font-size:12px;color:var(--acento-texto)}
.piezas__lista b{font-weight:500;line-height:1.3}
.piezas__lista i{font-style:normal;font-size:13.5px;white-space:nowrap;color:var(--tinta-2)}
.piezas__lista li:first-child a{background:var(--acento-tenue)}
@media(min-width:1000px){.sv-intro__env{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px}}

/* ── каталог ──────────────────────────────────────────────────── */
.catalogo{padding-block:clamp(32px,4vw,56px) clamp(48px,6vw,80px)}
.catalogo__lista{border-top:1px solid var(--tinta)}
.serv{display:grid;gap:18px;padding:28px 0 32px;border-bottom:1px solid var(--linea)}
.serv:target{background:var(--acento-tenue);box-shadow:0 0 0 12px var(--acento-tenue)}
.serv__cod{font-size:12px;letter-spacing:.08em;color:var(--acento-texto)}
.serv__titulo{margin:6px 0 10px;font-size:clamp(22px,2.5vw,28px)}
.serv__texto{font-size:16px;line-height:1.55;color:var(--tinta-2);max-width:48ch}
.serv__incluye{display:grid;gap:8px;align-content:start}
.serv__incluye li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.serv__incluye li::before{content:"";position:absolute;left:2px;top:.35em;width:12px;height:7px;border-left:1.5px solid var(--acento);
  border-bottom:1.5px solid var(--acento);transform:rotate(-45deg)}
.serv__precio{display:flex;flex-wrap:wrap;align-items:baseline;align-content:start;gap:4px 8px}
.serv__pref{font-size:13px;color:var(--tinta-2)}
.serv__precio b{font-size:clamp(30px,3.4vw,40px);font-weight:500;line-height:1;letter-spacing:-.03em}
.serv__precio small{font-size:14px;color:var(--tinta-2)}
.serv__nota{flex-basis:100%;font-size:14px;line-height:1.4;color:var(--tinta-2)}
.serv__precio .flecha-enlace{flex-basis:100%;margin-top:6px}
.serv__foto{margin:0}
.serv__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linea)}
.serv__foto figcaption{margin-top:8px;font-size:12px;letter-spacing:.04em;color:var(--tinta-2)}
@media(min-width:900px){
  .serv{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.75fr);column-gap:40px;padding:36px 0 40px}
  .serv--destacado{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.75fr);grid-template-areas:"foto cab precio" "foto incluye precio";row-gap:22px}
  .serv--destacado .serv__foto{grid-area:foto}
  .serv--destacado .serv__cab{grid-area:cab}
  .serv--destacado .serv__incluye{grid-area:incluye}
  .serv--destacado .serv__precio{grid-area:precio}
  .serv--destacado .serv__titulo{font-size:clamp(26px,3vw,34px)}
  .serv__precio{justify-content:flex-end;text-align:right}
  .serv__nota,.serv__precio .flecha-enlace{text-align:right;justify-content:flex-end}
}

/* ── общины и заведения: коллаж из двух кадров и список ────────── */
.locales__env{display:grid;gap:36px}
.locales__fotos{display:grid;gap:22px}
.locales__fig--grande img{aspect-ratio:3/2;object-fit:cover}
.locales__fig--peque img{aspect-ratio:3/2;object-fit:cover;object-position:50% 45%}
@media(min-width:600px){
  .locales__fotos{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:end}
  .locales__fig--peque img{aspect-ratio:2/3}
}
.locales__txt .entradilla{margin:16px 0 22px}
.locales__lista{display:grid;border-top:1px solid var(--tinta);counter-reset:loc}
.locales__lista li{counter-increment:loc;position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--linea);font-size:15.5px;line-height:1.5;color:var(--tinta-2)}
.locales__lista li::before{content:"0" counter(loc);position:absolute;left:0;top:15px;font-family:var(--mono);font-size:13px;color:var(--acento-texto)}
.locales__lista b{color:var(--tinta)}
.locales__enlaces{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:18px}
@media(min-width:1000px){
  .locales__env{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
  .locales__fotos{grid-column:1;grid-row:1;display:block}
  .locales__txt{grid-column:2;grid-row:1}
  .locales__fig--grande .pie-fig{max-width:54%}
  /* малый кадр наезжает на большой снизу справа, как вклеенная фотография */
  .locales__fig--peque{position:relative;z-index:1;width:40%;margin:-150px 0 0 auto}
  .locales__fig--peque img{border:6px solid var(--papel);outline:1px solid var(--linea)}
}

/* ── сравнение систем ─────────────────────────────────────────── */
.sistemas{border-top:1px solid var(--linea);background:var(--blanco)}
.sistemas__cab{max-width:760px;margin-bottom:32px}
.sistemas__cab .entradilla{margin-top:16px}
.comparativa{width:100%;border-collapse:collapse}
.comparativa thead{display:none}
.comparativa tbody{display:grid;gap:16px}
.comparativa tr{display:grid;border:1px solid var(--tinta);background:var(--blanco);scroll-margin-top:calc(var(--cab) + 14px)}
.comparativa tr:target{box-shadow:0 0 0 3px var(--acento)}
.comparativa th{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--tinta);background:var(--papel);text-align:left}
.comparativa th span{font-size:19px;font-weight:600}
.comparativa__dib{width:84px;height:50px;flex:none}
.comparativa td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 14px;border-bottom:1px solid var(--linea);font-size:15px;line-height:1.45}
.comparativa td:last-child{border-bottom:0}
.comparativa td::before{content:attr(data-et);font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.comparativa td .mono{white-space:nowrap}
.comparativa td .mono b{font-weight:500}
.comparativa__val{display:grid;gap:4px;justify-items:start}
.comparativa__txt{display:block;font-size:13.5px;color:var(--tinta-2)}
.sistemas__pie{margin-top:18px}
@media(min-width:1000px){
  .comparativa{display:table;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta)}
  .comparativa thead{display:table-header-group}
  .comparativa tbody{display:table-row-group}
  .comparativa tr{display:table-row;border:0}
  .comparativa th,.comparativa td{display:table-cell;padding:18px 16px;vertical-align:top;border-bottom:1px solid var(--linea)}
  .comparativa thead th{padding:12px 16px;border-bottom:1px solid var(--tinta);background:transparent;font-family:var(--mono);font-size:12px;
    font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
  .comparativa tbody th{background:transparent;border-right:1px solid var(--linea);width:210px}
  .comparativa tbody th span{display:block;margin-top:10px;font-size:18px}
  .comparativa__dib{width:120px;height:72px}
  .comparativa td::before{display:none}
  .comparativa td:last-child{border-bottom:1px solid var(--linea)}
  .comparativa tbody tr:last-child th,.comparativa tbody tr:last-child td{border-bottom:0}
  .comparativa tr:target th,.comparativa tr:target td{background:var(--acento-tenue)}
  .comparativa tr:target{box-shadow:none}
}

/* ── фигуры ───────────────────────────────────────────────────── */
.figuras__titulo{max-width:20ch;margin-bottom:36px}
.figuras__rejilla{display:grid;gap:28px}
.fig{margin:0}
.fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--linea);background:var(--blanco)}
.fig--b img{object-position:36% 50%}
.fig--c img{object-position:0 50%}
.fig figcaption{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--tinta-2)}
.fig figcaption .mono{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento-texto);padding-top:2px}
@media(min-width:760px){
  .figuras__rejilla{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .fig--b{margin-top:72px}
  .fig--c{margin-top:24px}
}

/* ── день монтажа ─────────────────────────────────────────────── */
.jornada__env{display:grid;gap:36px}
.jornada__cab{max-width:760px}
.jornada__cab .entradilla{margin-top:16px}
.jornada__linea{position:relative;display:grid;gap:0;padding-left:30px}
.jornada__linea::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;border-left:1.5px solid var(--tinta)}
.jornada__linea li{position:relative;display:grid;gap:4px;align-content:start;padding:0 0 24px}
.jornada__linea li::before{content:"";position:absolute;left:-29px;top:4px;width:13px;height:13px;border:1.5px solid var(--tinta);border-radius:50%;background:var(--blanco)}
.jornada__linea li:last-child::before{background:var(--acento);border-color:var(--acento)}
.jornada__linea time{font-size:14px;font-weight:500;color:var(--acento-texto)}
.jornada__linea b{font-size:17px}
.jornada__linea span{font-size:15px;line-height:1.45;color:var(--tinta-2)}
@media(min-width:1000px){
  .jornada__linea{grid-template-columns:repeat(7,minmax(0,1fr));gap:0 18px;padding:0}
  .jornada__linea::before{left:0;right:0;top:34px;bottom:auto;border-left:0;border-top:1.5px solid var(--tinta)}
  .jornada__linea li{padding:0}
  .jornada__linea li::before{left:0;top:28px}
  .jornada__linea time{margin-bottom:34px}
  .jornada__linea b{font-size:16px;line-height:1.25}
  .jornada__linea span{font-size:14px}
}