@font-face {
  font-family: "Manrope GuTam";
  src: url("./assets/manrope-extrabold-gutam.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.vitrine-hero {
  background: #091831;
  color: white;
}
.vitrine-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(18px, 4vw, 65px);
  align-items: center;
  padding-block: clamp(34px, 5.2vw, 76px) 10px;
}
.vitrine-intro h1 {
  max-width: none;
  margin: 0 0 14px;
  font-family: "Manrope GuTam", system-ui, sans-serif;
  font-size: clamp(3.25rem, 8.9vw, 8.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
}
.vitrine-title {
  margin: 0 0 24px;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  font-weight: 650;
  line-height: 1.25;
  text-wrap: balance;
}
.vitrine-highlight { display: block; color: #a7eaff; }
.vitrine-intro .actions { gap: 8px 13px; }
.vitrine-intro .actions a {
  min-height: 46px;
  padding-inline: 15px;
  border: 1px solid #769bcf;
  border-radius: 8px;
}
.vitrine-intro .actions .primary { background: white; color: #17368a; }
.vitrine-intro .actions .primary:hover { background: #e5eeff; }
.vitrine-intro .actions .secondary:hover { background: #113691; }
.vitrine-hero :focus-visible { outline-color: white; }
.vitrine:focus-visible { outline-offset: -5px; }

.vitrine-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 480 / 340;
  background: radial-gradient(ellipse at center, #204a9c 0%, #132e61 39%, transparent 73%);
}
.vitrine-visual::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(#83aff526 1px, transparent 1px), linear-gradient(90deg, #83aff526 1px, transparent 1px);
  background-position: center;
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse, #000, transparent 71%);
  content: "";
}
.vitrine-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.vitrine-character {
  position: relative;
  display: block;
  width: 47%;
  height: auto;
  filter: drop-shadow(0 12px 28px #030a247d);
}

@media (max-width: 760px) {
  .vitrine-opening { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; }
  .vitrine-intro { text-align: center; }
  .vitrine-intro h1 { font-size: clamp(3.8rem, 16.5vw, 5rem); }
  .vitrine-intro .actions { justify-content: center; }
  .vitrine-visual { width: min(100%, 300px); margin-inline: auto; }
}

.vitrine-heading { text-wrap: balance; }
#solutions-title { max-width: 19ch; }
.vitrine-heading span { color: #194fc4; }
#mobile-title span, .mobile-feature .section-label { color: #17605b; }
#contact-title span { color: #c2f6ff; }

@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .vitrine-intro > :not(.actions) {
    animation: vitrine-intro-in 440ms cubic-bezier(.2,.75,.25,1) backwards;
  }
  [data-motion="on"] .vitrine-title { animation-delay: 70ms; }
  [data-motion="on"] .vitrine-character { animation: vitrine-logo-float 7s ease-in-out infinite; }
  [data-motion="on"] .vitrine-character[data-outside-viewport] { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    [data-motion="on"] .vitrine-heading {
      animation: vitrine-heading-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
  }
}

@keyframes vitrine-intro-in {
  from { transform: translateY(10px); }
  to { transform: none; }
}

@keyframes vitrine-logo-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-13px) rotate(-3deg); }
  70% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes vitrine-heading-in {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.vitrine-stage {
  position: relative;
  isolation: isolate;
}
.vitrine-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(transparent 74%, #08185280), url("./assets/vitrine-fundo.jpg") center bottom / cover no-repeat;
  mask-image: linear-gradient(transparent, #000 24%);
  opacity: .8;
  content: "";
  pointer-events: none;
}

.vitrine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.12fr) repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 2.1vw, 30px);
  width: min(1190px, calc(100% - 80px));
  margin-inline: auto;
  padding-block: 42px 25px;
}
.vitrine-item { --drop: clamp(34px, 4.7vw, 62px); padding-top: var(--drop); min-width: 0; }
.vitrine-item:nth-child(2), .vitrine-item:nth-child(4) { --drop: clamp(18px, 2.3vw, 32px); }
.vitrine-featured { --drop: 0px; position: relative; }
.vitrine-item figcaption {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin-top: 12px;
  color: #e7efff;
  text-align: center;
  font-size: .79rem;
}
.vitrine-item figcaption strong { font-size: .96rem; }
.vitrine-featured:hover { text-decoration: none; }
.vitrine-featured figcaption strong { text-decoration: underline; text-underline-offset: .2em; }
.vitrine-phone {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 10 / 19;
  padding: clamp(5px, .7vw, 9px);
  border: 1px solid #9ca7bb;
  border-radius: 17% / 9%;
  background: linear-gradient(140deg, #555d6d, #141923 28%, #05070c 76%, #525c70);
  box-shadow: 0 13px 22px #0819405e, 0 1px 2px #020a20a6;
}
.vitrine-phone::before {
  position: absolute;
  z-index: 1;
  inset: 3.5% auto auto 50%;
  width: 27%;
  height: 3.1%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #090c14;
  content: "";
  pointer-events: none;
}
.vitrine-screen {
  --screen-paper: #f8f8f5;
  --screen-ink: #222b25;
  --screen-accent: #245341;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-top: 14cqi;
  border-radius: 15% / 8%;
  background: var(--screen-paper);
  color: var(--screen-ink);
}
.phone-copy { display: grid; justify-items: start; gap: 4cqi; padding: 6cqi 7cqi; }
.phone-label { font-size: 5.4cqi; font-weight: 750; line-height: 1.15; }
.phone-copy strong { font-size: 13cqi; font-weight: 750; line-height: 1.01; letter-spacing: -.045em; }
.phone-action {
  padding: 3cqi 5cqi;
  border-radius: 3cqi;
  background: var(--screen-accent);
  color: white;
  font-size: 5.4cqi;
  font-weight: 650;
}
.phone-photo {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 50%);
}
.phone-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4cqi 7cqi;
  border-bottom: 1px solid currentColor;
  font-size: 5.8cqi;
  font-weight: 650;
}
.phone-clinic { --screen-paper: #eaf0e6; --photo-x: 51%; }
.phone-wood { --screen-paper: #f3e5d2; --screen-ink: #3e291c; --photo-y: 58%; }
.phone-wood .phone-copy strong, .phone-food .phone-copy strong { font-family: Georgia, serif; font-weight: 500; }
.phone-food { --screen-paper: #31201c; --screen-ink: #fff5e9; --screen-accent: #99422b; --photo-x: 53%; }
.phone-auto { --screen-paper: #e7edf7; --screen-ink: #172542; --photo-y: 76%; }
.phone-auto .phone-copy strong { font-size: 11cqi; }
.phone-parfix { padding-top: 0; border-top: 9cqi solid #fff; }
.phone-parfix img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vitrine-swipe { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .vitrine-phone { transition: transform 260ms cubic-bezier(.2,.75,.25,1), box-shadow 260ms ease; }
  [data-motion="on"] .vitrine-item:hover .vitrine-phone {
    transform: translateY(-16px) rotate(-1.5deg);
    box-shadow: 0 23px 34px #07163d85, 0 1px 2px #020a20a6;
  }
}
@media (max-width: 760px) {
  .vitrine-stage::before { background-position: center, 60% bottom; }
  .vitrine { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 18px; }
  .vitrine-grid {
    grid-template-columns: repeat(2, clamp(144px, 40vw, 190px)) clamp(160px, 44vw, 208px) repeat(2, clamp(144px, 40vw, 190px));
    gap: 12px;
    width: max-content;
    padding: 26px 18px 14px;
  }
  .vitrine-item { --drop: 0px; scroll-snap-align: start; }
  .vitrine-item:nth-child(2), .vitrine-item:nth-child(4) { --drop: 0px; }
  .vitrine-swipe {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 7px 18px 16px;
    color: #e7efff;
    font-size: .83rem;
  }
}