/* Installation page. One grid for the whole page: each section opens with the same heading block on the container's left
   edge and its content spans the container. */

/* The units, as a photo bento */
.ic-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, minmax(220px, auto)); gap: 16px; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ic-bento li { position: relative; overflow: hidden; border-radius: 16px; min-height: 220px; }
.ic-bento li:first-child { grid-row: span 2; }
.ic-bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-bento div { position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(180deg, transparent, rgb(0 20 45 / .85)); color: #fff; }
.ic-bento h3 { font-family: "Open Sans", Arial, sans-serif; font-size: 1.35rem; font-weight: 800; }
.ic-bento p { margin-top: 2px; color: #d8e8fa; font-size: .95rem; }
@media (max-width: 1024px) {
  .ic-bento { grid-template-columns: 1fr 1fr; }
  .ic-bento li:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 280px; }
}
@media (max-width: 720px) {
  .ic-bento { grid-template-columns: minmax(0, 1fr); }
}

/* The figure and its numbered list */
.ax { display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 32rem); justify-content: center; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ax__hint { display: none; margin-top: 12px !important; font-size: .88rem; text-align: center; color: #5d6f84; }
.ax.is-ready .ax__hint { display: block; }
.ax__list { display: grid; align-content: start; }
@media (min-width: 901px) { .ax.is-ready .ax__list { min-height: 27rem; } }
.ax__item { border-bottom: 1px solid #d3e1ef; }
.ax__item:first-child { border-top: 1px solid #d3e1ef; }
.ax__btn { display: grid; grid-template-columns: 12px minmax(0, 1fr) 20px; align-items: center; gap: 14px; width: 100%; padding: 17px 4px; border: 0; background: none; font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; text-align: left; color: var(--navy); cursor: default; }
.ax.is-ready .ax__btn { cursor: pointer; }
.ax__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.ax__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--navy); transition: background .2s ease; }
.ax__btn svg { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ax.is-ready .ax__btn svg { display: block; }
.ax__item.is-on .ax__dot { background: var(--navy); }
.ax__item.is-on .ax__btn svg { transform: rotate(180deg); }
@media (hover: hover) { .ax.is-ready .ax__btn:hover .ax__name { color: var(--blue); } }
.ax__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1); }
.ax__more > div { min-height: 0; overflow: hidden; }
.ax__more p { padding: 0 4px 18px 30px; font-size: .95rem; line-height: 1.6; color: #5d6f84; }
.ax.is-ready .ax__item:not(.is-on) .ax__more { grid-template-rows: 0fr; }
@media (max-width: 900px) {
  .ax { grid-template-columns: minmax(0, 1fr); }
  .ax__media { width: 100%; max-width: 34rem; margin-inline: auto; }
}

/* What is included: an isometric overview and two close-up renders joined by a camera move (assets/js/installation.js) */
.xc { grid-template-columns: minmax(0, 52rem) minmax(0, 25rem); }
.xc__fig { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgb(0 36 80 / .3); }
.xc__fig.is-pointer { cursor: pointer; }
.xc__fig { scroll-margin-top: 16px; }
.xc__view { position: absolute; inset: 0; visibility: hidden; isolation: isolate; will-change: transform, opacity; }
.xc__view.is-current, .xc__view.is-moving { visibility: visible; }
.xc__view.is-incoming { z-index: 1; }
.xc__view.is-top { z-index: 2; }
.xc__view > img, .xc__view > span, .xc__fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Close-up highlight: veil over the rest, the part lifted back, a blue tint that keeps its shading and a halo */
.xc__veil { background: #fff; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.xc__view.has-active .xc__veil { opacity: .5; }
.xc__lift, .xc__tint, .xc__glow > span { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.xc__lift, .xc__tint, .xc__glow { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.xc__tint { background: var(--blue); mix-blend-mode: color; }
.xc__glow { filter: drop-shadow(0 0 2px rgb(31 116 211)) drop-shadow(0 0 9px rgb(31 116 211 / .7)); }
.xc__glow > span { position: absolute; inset: 0; background: var(--blue); }
.xc__view.has-active .xc__lift, .xc__view.has-active .xc__glow { opacity: 1; }
.xc__view.has-active .xc__tint { opacity: .6; }
.xc__view.is-hover .xc__tint { opacity: .45; }

.xc__fx { pointer-events: none; }
.xc__fx path { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s ease; }
.xc-core { stroke: #c27a42; stroke-width: 7; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.xc__view[data-show="1"].has-active .xc-core { opacity: 1; animation: xc-draw 1s cubic-bezier(.45, 0, .2, 1) both; }
.xc-water { stroke: #2f8cf5; stroke-width: 7; stroke-dasharray: 14 120; opacity: 0; }
.xc__view[data-show="3"].has-active .xc-water { opacity: 1; animation: xc-flow 1.8s linear infinite; }
.xc-air path { stroke: #6aaaf0; stroke-width: 6; stroke-dasharray: 26 20; opacity: 0; }
.xc__view[data-show="6"].has-active .xc-air path { opacity: .9; animation: xc-air 1.1s linear infinite; }

/* Part hotspots: smaller on the overview, full size in the close-ups, hidden while the camera moves */
.xc-hot { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .4s ease; }
/* Numbered like a drawing legend: the same number marks the part on the image and its row in the list */
.xc-hot::before { content: attr(data-part); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); font: 600 12px/1 "Poppins", sans-serif; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgb(0 36 80 / .35); transition: transform .2s cubic-bezier(.16, 1, .3, 1), width .2s ease, height .2s ease; }
.xc-hot::after { content: ""; position: absolute; inset: 11px; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; pointer-events: none; }
.xc__view.is-current:not(.has-active) .xc-hot::after { animation: xc-ring 2.2s cubic-bezier(.16, 1, .3, 1) .3s 2; }
.xc__view.has-active .xc-hot[aria-pressed="false"]::before { transform: scale(.8); }
.xc-hot[aria-pressed="true"]::before { width: 30px; height: 30px; background: #fff; font-size: 13px; color: var(--navy); box-shadow: 0 0 0 2.5px var(--navy), 0 0 0 5px rgb(255 255 255 / .85); }
.xc-hot:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.xc__view[data-view="geral"] .xc-hot { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.xc__view[data-view="geral"] .xc-hot::before { width: 22px; height: 22px; font-size: 11px; }
.xc .ax__btn { grid-template-columns: 24px minmax(0, 1fr) 20px; }
.xc .ax__dot { display: grid; place-items: center; width: 24px; height: 24px; box-shadow: inset 0 0 0 1.5px var(--navy); font: 600 12px/1 "Poppins", sans-serif; color: var(--navy); transition: background .2s ease, color .2s ease; }
.xc .ax__item.is-on .ax__dot { color: #fff; }
.xc .ax__more p { padding-left: 42px; }
/* Wide screens: the list is the legend, every description showing; the chosen part is the highlighted row. Below
   1301px the six descriptions would run far past the figure, so the rows open one at a time instead. */
@media (min-width: 1301px) {
  .xc.is-ready .ax__btn { grid-template-columns: 24px minmax(0, 1fr); padding: 14px 4px 6px; }
  .xc.is-ready .ax__btn svg { display: none; }
  .xc.ax.is-ready .ax__item .ax__more { grid-template-rows: 1fr; }
  .xc .ax__more p { padding-bottom: 14px; font-size: .93rem; line-height: 1.55; }
  .xc .ax__item.is-on .ax__name { color: var(--blue); }
  .xc .ax__item.is-on .ax__more p { color: var(--ink); }
}
.xc__view.is-moving .xc-hot { opacity: 0; transition-duration: .15s; }
@media (hover: hover) { .xc-hot:hover::before { transform: scale(1.15); } }

/* Under the figure: back to the overview, hint, and on phones the chosen item's text */
.xc__back { display: none; }
.xc:not([data-view="geral"]) .xc__back { display: flex; align-items: center; min-height: 44px; margin: 10px auto 0; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgb(0 36 80 / .4); font-family: "Poppins", sans-serif; font-size: .85rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.xc__back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xc:not([data-view="geral"]) .ax__hint { display: none; }
.xc__caption { display: none; }

@keyframes xc-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes xc-draw { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes xc-flow { to { stroke-dashoffset: -134; } }
@keyframes xc-air { to { stroke-dashoffset: -46; } }
@media (prefers-reduced-motion: reduce) {
  .xc-hot::after { animation: none; }
  .xc__view[data-show="3"].has-active .xc-water, .xc__view[data-show="6"].has-active .xc-air path { animation-iteration-count: 4; }
}
@media (max-width: 900px) {
  .xc { grid-template-columns: minmax(0, 1fr); }
  .xc .ax__media { width: 100%; max-width: 40rem; margin-inline: auto; }
  .xc.has-active .ax__hint { display: none; }
  .xc.has-active .xc__caption { display: block; margin-top: 12px !important; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgb(0 36 80 / .35); }
  .xc__caption strong { display: block; font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
  .xc__caption span { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.55; color: #5d6f84; }
  .xc.is-ready .ax__item .ax__more { grid-template-rows: 0fr; }
  /* The rows pick a part and the caption under the figure explains it, so they carry no accordion chevron */
  .xc.is-ready .ax__btn { grid-template-columns: 24px minmax(0, 1fr); }
  .xc.is-ready .ax__btn svg { display: none; }
}
/* Phones: a square frame; the overview is shown larger round the building and the close-ups are centre-cropped */
@media (max-width: 600px) {
  .xc__fig { aspect-ratio: 1; }
  .xc__view[data-view="geral"] { inset: auto; left: -12%; top: -6%; width: 170%; height: auto; aspect-ratio: 3 / 2; }
  .xc__view:not([data-view="geral"]) { inset: auto; left: -25%; top: 0; width: 150%; height: 100%; }
  .xc__view[data-view="geral"] .xc-hot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .xc__view[data-view="geral"] .xc-hot::before { width: 20px; height: 20px; font-size: 10px; }
}

/* Generated from the render data (render3d/compose.py, gen_xcam.py): hotspots and masks */
.xc__view[data-view="geral"] .xc-hot--1 { left: 36.17%; top: 58.38%; }
.xc__view[data-view="geral"] .xc-hot--2 { left: 35.67%; top: 41.5%; }
.xc__view[data-view="geral"] .xc-hot--3 { left: 37.58%; top: 49.12%; }
.xc__view[data-view="geral"] .xc-hot--4 { left: 30.58%; top: 58.38%; }
.xc__view[data-view="geral"] .xc-hot--5 { left: 32.25%; top: 50.62%; }
.xc__view[data-view="geral"] .xc-hot--6 { left: 42.0%; top: 38.25%; }
.xc__view[data-view="externa"] .xc-hot--1 { left: 61.0%; top: 70.0%; }
.xc__view[data-view="externa"] .xc-hot--2 { left: 62.67%; top: 34.0%; }
.xc__view[data-view="externa"] .xc-hot--3 { left: 65.5%; top: 61.75%; }
.xc__view[data-view="externa"] .xc-hot--4 { left: 45.67%; top: 69.25%; }
.xc__view[data-view="externa"] .xc-hot--5 { left: 52.08%; top: 50.75%; }
.xc__view[data-view="interna"] .xc-hot--6 { left: 51.92%; top: 54.37%; }
.xc__view[data-view="externa"][data-show="1"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-1.png); mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-1.png); }
.xc__view[data-view="externa"][data-show="2"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-2.png); mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-2.png); }
.xc__view[data-view="externa"][data-show="3"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-3.png); mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-3.png); }
.xc__view[data-view="externa"][data-show="4"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-4.png); mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-4.png); }
.xc__view[data-view="externa"][data-show="5"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-5.png); mask-image: url(/assets/img/instalacao-k2/k2-externa-mask-5.png); }
.xc__view[data-view="interna"][data-show="6"] :is(.xc__lift, .xc__tint, .xc__glow > span) { -webkit-mask-image: url(/assets/img/instalacao-k2/k2-interna-mask-6.png); mask-image: url(/assets/img/instalacao-k2/k2-interna-mask-6.png); }

.ig-head { max-width: 44rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ig-head p { margin-top: 12px !important; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.ig .ax, .ig .ic-bento, .ig .sv-faq { margin-top: 0; }
.ig .sv-faq { max-width: 56rem; }
/* A head can also sit centred over its content: a page's tool or its sequence */
.ig-head--center { margin-inline: auto; text-align: center; }
.ig-head--center p, .ig-faq .ig-head p { text-wrap: balance; }
/* End: the questions in a centred column under a centred heading; each question stays left-aligned so the list scans,
   and the section leaves less room above the contact band */
.ig-faq { padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.ig-faq .ig-head { margin-inline: auto; text-align: center; }
.ig .ig-faq .sv-faq { max-width: 46rem; margin-inline: auto; }

/* Nothing overlaps the banner on this page, so it keeps no room for a floating card */
body:has(.ig) .page-banner { padding-bottom: 0; }

/* Start: the service, in a few lines beside the photo */
.ig-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ig-text { display: grid; gap: 16px; max-width: 38rem; margin-top: 24px; }
.ig-text p { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.ig-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ig-intro__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }

/* Middle: the 3D figure starts on the heading's edge and the list ends on the container's, both from the same top */
@media (min-width: 901px) {
  .ig .xc { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); justify-content: stretch; align-items: start; }
  .ig .ax.is-ready .ax__list { min-height: 0; }
}

/* Middle: the units. A deeper scrim keeps the captions readable over the bright photos (white units, ceilings) */
.ig .ig-bento div { background: linear-gradient(180deg, transparent, rgb(0 20 45 / .72) 38%, rgb(0 20 45 / .92)); }
.ig .ig-bento p { color: #e8f1fb; text-wrap: balance; }
/* The Piso-Teto photo is CC BY-SA: its credit stays on the image */
.ig-credit { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 4px 8px; border-radius: 6px; background: rgb(0 20 45 / .6); font-size: .75rem; line-height: 1.3; color: #fff; }
.ig-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Middle: how the service runs, as a timeline */
.ig-steps { --gap: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ig-steps li { position: relative; }
.ig-steps li:not(:last-child)::before { content: ""; position: absolute; top: 20px; left: 52px; right: calc(12px - var(--gap)); height: 1px; background: #c9d8e8; }
.ig-steps__n { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--navy); border-radius: 50%; background: #fff; font-family: "Poppins", sans-serif; font-weight: 600; color: var(--navy); }
.ig-steps h3 { margin-top: 20px !important; font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--navy); }
.ig-steps p { margin-top: 8px !important; line-height: 1.65; color: var(--muted); }

@media (max-width: 900px) {
  .ig .xc .ax__media { max-width: none; }
  .ig-intro { grid-template-columns: minmax(0, 1fr); }
  .ig-intro__photo { aspect-ratio: 16 / 10; }
  .ig-steps { grid-template-columns: minmax(0, 1fr); }
  .ig-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; }
  .ig-steps__n { grid-row: span 2; }
  .ig-steps h3 { margin-top: 8px !important; }
  .ig-steps li:not(:last-child)::before { top: 48px; bottom: calc(8px - var(--gap)); left: 20px; right: auto; width: 1px; height: auto; }
}
@media (max-width: 720px) {
  .ig .ig-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .ig .ig-bento li { min-height: 170px; }
  .ig .ig-bento li:first-child { grid-column: 1 / -1; min-height: 230px; }
  .ig .ig-bento div { padding: 44px 14px 14px; }
  .ig .ig-bento h3 { font-size: 1.1rem; }
  .ig .ig-bento p { font-size: .85rem; line-height: 1.35; }
}