/* SAGO - seletor de interfaces | Mobile first */
:root {
  --navy: #073b82;
  --blue: #0878ed;
  --ink: #102b5c;
  --surface: #ffffff;
  --page: #eaf3ff;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    linear-gradient(
      105deg,
      rgba(232, 243, 255, .92) 0%,
      rgba(220, 236, 255, .78) 28%,
      rgba(210, 230, 255, .35) 55%,
      rgba(200, 225, 255, .05) 78%,
      rgba(200, 225, 255, .05) 100%
    ),
    url("../assets/build-bck.jpg") center/cover fixed;
}
.page-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 28px 18px 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.topbar {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 28px;
  text-align: center;
}
.brand img {
  display: block;
  width: 190px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .85)) drop-shadow(0 0 10px rgba(255, 255, 255, .45));
}
.heading h1 {
  margin: 0;
  color: #09285e;
  font-size: clamp(1.45rem, 5vw, 2.35rem);
  line-height: 1.15;
  font-weight: 800;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .55);
}
.heading p {
  margin: 8px 0 0;
  color: #2f4a78;
  font-size: clamp(.92rem, 2.5vw, 1.12rem);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .5);
}
.interfaces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin: 0 auto 28px;
}
.interface-card {
  --accent: #0878ed;
  --tint: #eaf3ff;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 190px;
  /* reserva a faixa da foto: texto/ícone ficam só à esquerda do recorte */
  padding: 22px 44% 22px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), white 48%);
  border-radius: 20px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(16, 43, 92, .12),
    0 12px 28px rgba(16, 43, 92, .22),
    0 28px 56px rgba(7, 59, 130, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.interface-card:hover, .interface-card:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 4px 10px rgba(16, 43, 92, .14),
    0 18px 36px rgba(16, 43, 92, .28),
    0 36px 64px rgba(7, 59, 130, .22);
  outline: 3px solid color-mix(in srgb, var(--accent), transparent 68%);
  outline-offset: 2px;
}
.construtora { --accent: #0878ed; --tint: #dcecff; }
.cliente { --accent: #079765; --tint: #def5eb; }
.vendas { --accent: #5420c8; --tint: #eee6ff; }
.projetos { --accent: #ef650b; --tint: #fff0e3; }
.icon {
  z-index: 2;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  margin-right: 13px;
  color: var(--accent);
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-copy {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding-left: 13px;
  border-left: 2px solid var(--accent);
}
.card-copy strong {
  margin-bottom: 6px;
  font-size: clamp(1.08rem, 3.6vw, 1.45rem);
  line-height: 1.1;
  font-weight: 800;
}
.card-copy small {
  color: #43516b;
  font-size: .86rem;
  line-height: 1.35;
}
.access {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  margin-top: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  color: white;
  background: var(--accent);
  font-size: .88rem;
  font-weight: 650;
}
.access b { font-size: 1.2rem; line-height: .8; }
.card-photo {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* só a faixa direita: o assunto da foto fica centrado na área visível */
  width: 50%;
  pointer-events: none;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.card-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tint), transparent 25%) 0%,
    color-mix(in srgb, var(--tint), transparent 70%) 22%,
    transparent 48%
  );
}
.card-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.cliente .card-photo img,
.vendas .card-photo img {
  object-position: center 45%;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px 12px;
  width: 100%;
  margin: 0;
  padding: 18px;
  color: #fff;
  background: linear-gradient(100deg, #063579, #0756ad);
  text-align: center;
  font-size: .7rem;
  letter-spacing: .025em;
}
.skyline {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 22px;
  object-fit: contain;
  background: transparent;
}
.version { opacity: .82; }

/* Tablets */
@media (min-width: 640px) {
  .page-shell { padding: 34px 28px 0; }
  .topbar {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 26px;
    margin-bottom: 34px;
  }
  .brand { padding-right: 24px; border-right: 2px solid rgba(7,59,130,.45); }
  .brand img { width: 210px; }
  .interfaces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .interface-card { min-height: 230px; padding: 24px 46% 24px 20px; }
  .icon { flex-basis: 64px; width: 64px; height: 64px; margin-right: 15px; }
  .card-photo {
    width: 52%;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .footer { padding: 20px 28px; font-size: .78rem; }
  .skyline { height: 26px; }
}

/* Desktop e notebooks — página inteira na viewport, sem rolagem */
@media (min-width: 1024px) {
  html, body { height: 100%; }
  body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .page-shell {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    gap: clamp(28px, 4vh, 48px);
    padding: clamp(20px, 3vh, 40px) 54px;
  }
  .topbar {
    flex: 0 0 auto;
    gap: 22px;
    margin: 0 auto clamp(8px, 1.2vh, 16px);
  }
  .brand { padding-right: 26px; }
  .brand img { width: clamp(250px, 25vh, 320px); }
  .heading h1 { font-size: clamp(2.05rem, 3.8vh, 2.85rem); }
  .heading p { margin-top: 10px; font-size: clamp(1.12rem, 2.2vh, 1.38rem); }
  .interfaces {
    flex: 0 0 auto;
    width: min(1080px, 100%);
    margin: 0 auto;
    gap: clamp(14px, 1.8vh, 20px);
    grid-template-rows: auto auto;
  }
  .interface-card {
    min-height: 0;
    height: clamp(168px, 21vh, 215px);
    padding: 18px 40% 18px 22px;
    border-radius: 20px;
  }
  .icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    margin-right: 14px;
  }
  .card-copy { padding-left: 14px; }
  .card-copy strong { font-size: clamp(1.15rem, 2vh, 1.4rem); margin-bottom: 4px; }
  .card-copy small { font-size: .9rem; }
  .access {
    margin-top: 10px;
    padding: 8px 15px;
    font-size: .9rem;
  }
  .card-photo {
    width: 48%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  }
  .footer {
    flex: 0 0 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0 14px;
    padding: 14px 54px;
    font-size: .78rem;
    text-align: left;
  }
  .skyline {
    height: 26px;
    margin-right: 4px;
    padding-right: 18px;
    border-right: 1px solid rgba(255, 255, 255, .5);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}