/* service-d_1.html — bloki, kotoryh net v service-d.css:
   kross-ssylki na sosednie uslugi, materialy i tolshchiny.
   ns_styles.css ne tragaetsya, fayl podklyuchen tolko iz service-d_1.html.
   Vse metriki na tokenah dizayn-sistemy. */

/* ---------------------------------------------------------------
   Yakorya: navigaciya fiksirovannaya, perehod po #materiales i #faq
   dolzhen ostanavlivatsya nizhe shapki. Te zhe 140px, chto v precios.css.
   --------------------------------------------------------------- */

.materials-section,
.faq-section,
.expandable-section {
  scroll-margin-top: 140px;
}

/* ---------------------------------------------------------------
   Navigaciya po stranice v shapke: yakorya na kartochki uslug,
   materialy i FAQ. Vizualno — te zhe "tabletki", chto .material-note
   pod tablicey materialov, chtoby ne plodit novyy komponent.
   --------------------------------------------------------------- */

/* Liniya mezhdu tekstom shapki i yakoryami. Obertka szhimaetsya po
   shirine ryada knopok, poetomu liniya vsegda na 32px shire ego —
   po 16px s kazhdoy storony, i eto ne nado pravit rukami, kogda na
   stranice drugoy nabor yakorey. Gradient gasit koncy, chtoby liniya
   ne obryvalas rezko i ne chitalas kak ramka. */

.hero-nav-block {
  grid-row-gap: var(--spacing--16);
  flex-flow: column;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.hero-nav-divider {
  width: calc(100% + var(--spacing--32));
  height: 1px;
  background-image: linear-gradient(to right, transparent, var(--_🎨-color--tokens---border--subtle) 20%, var(--_🎨-color--tokens---border--subtle) 80%, transparent);
}

.hero-page-nav {
  grid-column-gap: var(--spacing--8);
  grid-row-gap: var(--spacing--8);
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.hero-page-nav-link {
  padding: var(--spacing--8) var(--spacing--16);
  grid-column-gap: var(--spacing--8);
  grid-row-gap: var(--spacing--8);
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
  border-radius: var(--_🔘-radius---general--full);
  box-shadow: 0 -1px 0 0 var(--_🎨-color--base---neutral--light-16), 0 1px 0 0 var(--_🎨-color--base---neutral--light-8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--_🎨-color--tokens---text-label--strong);
  background-color: #0a0a0b52;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: color .3s, background-color .3s, border-color .3s;
}

.hero-page-nav-link .circle-label {
  flex: none;
}

.hero-page-nav-link:hover {
  border-color: var(--_🎨-color--base---neutral--light-32);
  color: var(--_🎨-color--tokens---text-heading--strong);
  background-color: #0a0a0b8f;
}

@media (prefers-reduced-motion: reduce) {
  .hero-page-nav-link {
    transition-duration: .01ms;
  }
}

/* ---------------------------------------------------------------
   Shapka stranicy uslugi. V ns_styles zagolovok prizhat vlevo, a vse
   zagolovki sekciy nizhe (.headline-pricing) — po centru. Na stranicah
   uslug ostavlyaem odnu os: zagolovok i tagline tozhe po centru.
   Fayl podklyuchen tolko iz servicios-cnc / produccion-de-muebles /
   publicidad, ostalnye shablony ne zatragivayutsya.

   Ritm shapki. Bylo: menyu -> zagolovok 116px, zagolovok -> tagline
   32px, tagline -> kartochki 216px (64 margin + 32 padding sekcii +
   120 padding sledushchey). Tri raznyh rasstoyaniya, shapka "plavala".
   Stavim odin shag: 16px vnutri bloka teksta i ~120px do sosedey —
   stolko zhe, skolko ot menyu do zagolovka.
   Selektory s .section — v ns_styles otstupy zadany kak
   .section.hero-service-a-section, bez etogo my ih ne perebivaem.
   --------------------------------------------------------------- */

.hero-service-a-section .headline-service-a {
  text-align: center;
  align-items: center;
  grid-row-gap: var(--spacing--16);
  margin-bottom: var(--spacing--0);
  margin-left: auto;
  margin-right: auto;
}

.section.hero-service-a-section {
  padding-bottom: var(--spacing--0);
}

/* Na mobilnom tokeny masshtabiruyutsya, i shapka podnimalas k menyu:
   32px do menyu protiv 80px do kartochek. Dobavlyaem k otstupu vysotu
   fiksirovannoy shapki (56px + 16px sverhu), chtoby shag sovpal. */

@media screen and (max-width: 767px) {
  .section.hero-service-a-section {
    padding-top: calc(var(--section-padding--medium) + 72px);
  }
}

/* Svechenie za zagolovkom — tot zhe priyom, chto v sekcii materialov:
   razmytyy akcentnyy krug pod kontentom. Kontent podnimaem nad nim. */

.hero-service-a-section .ns-layout-blockcontainer {
  z-index: 3;
  position: relative;
}

/* Sekciya nizhe idyot pozzhe v DOM s tem zhe z-index i neprozrachnym
   fonom — ona obrezala blur po granice. Podnimaem shapku, chtoby
   svechenie ugasalo plavno (ta zhe pravka, chto u .materials-section). */

.section.hero-service-a-section {
  z-index: 3;
}

/* Na uzkom ekrane krug 287px zanimaet pochti vsyu shapku: vmesto
   akcenta za zagolovkom poluchaetsya sploshnaya krasnaya zalivka.
   Ubiraem svechenie tolko v shapke — v sekcii materialov ono ostayotsya. */

@media screen and (max-width: 767px) {
  .hero-service-a-section .circle-bg-center {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Kross-ssylki na sosednie uslugi.
   Plitka povtoryaet .card-service-expandable, no eto <a>: bez klika-
   raskrytiya i bez razdvizhki po hover — ryad iz dvuh ravnyh kartochek
   ne dolzhen prygat pri navedenii, inache ssylka uezzhaet iz-pod kursora.
   --------------------------------------------------------------- */

.card-service-cross {
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
  border-radius: var(--_🔘-radius---general--default);
  width: 100%;
  height: 420px;
  color: var(--_🎨-color--tokens---text-heading--strong);
  text-decoration: none;
  position: relative;
  overflow: clip;
}

/* Vmesto razdvizhki — myagkiy zoom podlozhki. */

.card-service-cross .image-wrap-service-expandable {
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}

.card-service-cross:hover .image-wrap-service-expandable {
  transform: scale(1.04);
}

.card-service-cross .service-expandable-bottom {
  grid-column-gap: var(--spacing--8);
  grid-row-gap: var(--spacing--8);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 420px;
  display: flex;
}

/* Strelka: v ishodnoy plitke ee dvigaet skript raskrytiya,
   zdes eyo vedet prosto hover po vsey kartochke. */

.card-service-cross .button-slider {
  flex: none;
  transition: transform .35s cubic-bezier(.2, .8, .25, 1);
}

.card-service-cross:hover .button-slider {
  transform: translateX(var(--spacing--4));
}

@media screen and (max-width: 991px) {
  .card-service-cross {
    height: 360px;
  }
}

/* ---------------------------------------------------------------
   Materialy i tolshchiny. Tri kartochki + stroka utochneniy pod nimi.
   Kartochka postroena na teh zhe tokenah, chto .card-client-story:
   podlozhka lift-80, volosyanye razdeliteli mezhdu strokami.
   --------------------------------------------------------------- */

.materials-thirds {
  grid-column-gap: var(--grid--column-gap);
  grid-row-gap: var(--grid--column-gap);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.card-material {
  height: 100%;
  padding: var(--spacing--24);
  grid-column-gap: var(--spacing--24);
  grid-row-gap: var(--spacing--24);
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
  border-radius: var(--_🔘-radius---general--default);
  background-color: var(--_🎨-color--tokens---background--lift);
  box-shadow: 0 1px 0 0 var(--_🎨-color--base---neutral--light-8), 0 -1px 0 0 var(--_🎨-color--base---neutral--light-16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.material-list {
  width: 100%;
  grid-column-gap: var(--spacing--12);
  grid-row-gap: var(--spacing--12);
  flex-flow: column;
  display: flex;
}

.material-row {
  grid-column-gap: var(--spacing--16);
  grid-row-gap: var(--spacing--4);
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.material-row + .material-row {
  border-top: 1px solid var(--_🎨-color--base---neutral--light-16);
  padding-top: var(--spacing--12);
}

/* Tolshchina — vtorostepennaya informaciya: ton labela i zapret perenosa,
   chtoby cifry v stolbce chitalis odna pod drugoy. */

.material-spec {
  color: var(--_🎨-color--tokens---text-label--medium);
  white-space: nowrap;
  flex: none;
}

/* Stroka utochneniy: te zhe chipy, chto .price-factor na stranice cen. */

.material-notes {
  margin-top: var(--spacing--32);
  grid-column-gap: var(--spacing--8);
  grid-row-gap: var(--spacing--8);
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.material-note {
  padding: var(--spacing--8) var(--spacing--16);
  border: 1px solid var(--_🎨-color--tokens---border--subtle);
  border-radius: var(--_🔘-radius---general--full);
  box-shadow: 0 -1px 0 0 var(--_🎨-color--base---neutral--light-16), 0 1px 0 0 var(--_🎨-color--base---neutral--light-8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--_🎨-color--tokens---text-label--strong);
  background-color: #0a0a0b52;
  justify-content: center;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 991px) {
  .materials-thirds {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .materials-thirds {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-service-cross .image-wrap-service-expandable,
  .card-service-cross .button-slider {
    transition-duration: .01ms;
  }

  .card-service-cross:hover .image-wrap-service-expandable,
  .card-service-cross:hover .button-slider {
    transform: none;
  }
}