/* Plugable — site institucional (paleta: branco + azul #004084) */

:root {
  --bg: #FFFFFF;
  --text: #0B2545;          /* azul quase preto para textos longos */
  --muted: #4A5F7A;
  --blue: #004084;
  --heading: #061d4c;       /* cor sólida dos títulos grandes */
  --btn: #111111;           /* botões principais: quase preto, combina com o logo */
  --btn-hover: #2B2B2B;
  --blue-deep: #002B5C;
  --blue-bright: #1F66B8;
  --blue-soft: #E6EEF8;
  --tint: #F2F6FB;          /* fundo da seção de serviços */
  --line: rgb(0 64 132 / 14%);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --pad-x: 1.5rem;
  color-scheme: light;
}

@media (min-width: 768px) { :root { --pad-x: 2.5rem; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  color: var(--text);
  font-family: 'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 500;
  transform: translateY(-200%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.site { overflow-x: clip; background: var(--bg); }

.hero-heading {
  color: var(--heading);
}

.section-heading {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.025em;
  text-align: center;
  font-size: 50px;
}

/* ───────── Estado inicial das animações (só com JS e movimento permitido) ───────── */
.motion [data-fade] { opacity: 0; }

/* ───────── Logo ───────── */
.logo { display: inline-block; flex: 0 0 auto; }
.logo img { width: 100%; height: auto; }

/* ───────── Botões ───────── */
/* Botão principal ("Fale conosco"): pílula em cor sólida com círculo e seta */
.btn-contact {
  --arrow: 2.2rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem .4rem .4rem 1.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--btn);   /* cor sólida, sem degradê */
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 18%);
  color: #fff;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.btn-label { position: relative; }
.btn-arrow {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--arrow);
  height: var(--arrow);
  border-radius: 50%;
  background: #fff;
  color: var(--btn);
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
  transition: scale .35s var(--ease), rotate .35s var(--ease);
}
.btn-arrow svg { width: 48%; height: 48%; transition: translate .35s var(--ease); }
.btn-contact:hover {
  translate: 0 -2px;
  background-color: var(--btn-hover);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 60%), 0 0 0 6px rgb(0 0 0 / 8%);
}
.btn-contact:hover .btn-arrow { scale: 1.08; rotate: 45deg; }
.btn-contact:active { translate: 0 0; }
.btn-contact:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (min-width: 640px) { .btn-contact { --arrow: 2.45rem; padding-left: 1.8rem; font-size: .85rem; } }
@media (min-width: 768px) { .btn-contact { --arrow: 2.7rem; gap: 1.1rem; padding: .45rem .45rem .45rem 2.1rem; font-size: .95rem; } }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 2rem;
  border: 2px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-weight: 500;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn-ghost:hover { background: rgb(0 64 132 / 8%); }
@media (min-width: 640px) { .btn-ghost { padding: .875rem 2.5rem; font-size: 1rem; } }

/* ───────── 1. Hero ───────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

.nav {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem var(--pad-x) 0;
}
@media (min-width: 768px) { .nav { padding-top: 2rem; } }

.nav .logo { width: 150px; }
@media (min-width: 768px) { .nav .logo { width: 190px; } }
@media (min-width: 1024px) { .nav .logo { width: 220px; } }

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
@media (max-width: 639px) { .nav-links { width: 100%; } }
@media (min-width: 640px) { .nav-links { gap: 2rem; } }
@media (min-width: 1024px) { .nav-links { gap: 3rem; } }

.nav-links a {
  color: var(--blue);
  font-weight: 500;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: opacity .2s var(--ease);
}
.nav-links a:hover { opacity: .7; }
@media (min-width: 768px) { .nav-links a { font-size: 1.125rem; } }
@media (min-width: 1024px) { .nav-links a { font-size: 1.25rem; } }

.hero-bottom {
  position: relative;
  z-index: 20;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 var(--pad-x) 1.75rem;
}
@media (min-width: 640px) { .hero-bottom { padding-bottom: 2rem; } }
@media (min-width: 768px) { .hero-bottom { padding-bottom: 2.5rem; } }

.hero-tagline {
  max-width: 160px;
  color: var(--blue);
  font-weight: 300;
  font-size: clamp(.75rem, 1.4vw, 1.5rem);
  line-height: 1.375;
  letter-spacing: .025em;
  text-transform: uppercase;
}
@media (min-width: 640px) { .hero-tagline { max-width: 220px; } }
@media (min-width: 768px) { .hero-tagline { max-width: 260px; } }

/* Dois cards flutuantes: painel do Plugable Shop + celular do Plugable Flex */
.hero-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  /* limitado pela altura para não invadir o menu nem a barra de baixo */
  width: min(90vw, 940px, calc((100svh - 300px) * 1.45));
  transform: translate(-50%, -50%);
}
@media (min-width: 640px) { .hero-visual { top: 51%; } }

.hero-card { position: relative; }
.hero-imac {
  position: relative;
  width: 100%;
  aspect-ratio: 1.28;
  filter: drop-shadow(0 24px 30px rgb(11 37 69 / 20%));
}
.hero-imac::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.imac-body {
  position: absolute;
  inset: 0 0 16%;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #a4a7ab;
  border-radius: 2.2% / 3.3%;
  background: #c9cbce;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%);
}
.imac-bezel {
  position: relative;
  height: 83%;
  padding: 3.6% 3.3% 3.3%;
  background: linear-gradient(135deg, #242527, #08090b 65%);
}
.imac-bezel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f7f9fc;
}
.imac-camera {
  position: absolute;
  top: 2.5%;
  left: 50%;
  width: .8%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #385269, #080c11 65%);
  box-shadow: 0 0 0 1px #292b2e;
}
.imac-chin {
  height: 17%;
  display: grid;
  place-items: center;
  color: #27282a;
  background: linear-gradient(110deg, #e2e3e5, #c9cbce 50%, #e0e1e3);
  border-top: 1px solid #b7b9bc;
}
.imac-chin img { display: block; width: 4.8%; height: auto; }
.imac-stand {
  position: absolute;
  z-index: 1;
  left: 38%;
  bottom: 2%;
  width: 24%;
  height: 21%;
  clip-path: polygon(18% 0, 82% 0, 87% 77%, 100% 100%, 0 100%, 13% 77%);
  background: linear-gradient(#92969b, #d8dadd 48%, #b5b8bc 79%, #eff0f2);
}
.imac-foot {
  position: absolute;
  left: 35%;
  bottom: 0;
  width: 30%;
  height: 3.5%;
  border-radius: 45% 45% 16% 16% / 65% 65% 25% 25%;
  background: linear-gradient(#eceef0, #b7babf 65%, #8e9298);
  box-shadow: 0 3px 3px rgb(11 37 69 / 14%);
}
.hero-card-main { width: 84%; }
.hero-card-phone {
  position: absolute;
  right: 0;
  bottom: 5%;
  width: 24%;
  z-index: 2;
}
@media (max-width: 639px) {
  .hero-card-main { width: 88%; }
  .hero-card-phone { width: 30%; bottom: 1%; }
}

.hero-tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .4em .95em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgb(11 37 69 / 14%);
  color: var(--blue);
  font-weight: 500;
  font-size: clamp(10px, .9vw, 13px);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--blue-bright); }
.hero-tag-main { left: 5%; top: -4%; }
.hero-tag-phone { left: 50%; top: -7%; transform: translateX(-50%); }

.magnet { will-change: transform; }

.device {
  position: relative;
  aspect-ratio: 16 / 8.6;
  padding: 10px;
  border: 1px solid rgb(0 64 132 / 16%);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 40px 120px rgb(0 64 132 / 22%), 0 20px 40px rgb(11 37 69 / 14%);
}
@media (max-width: 639px) { .device { padding: 6px; border-radius: 18px; } .device img { border-radius: 13px !important; } }

.hero-phone {
  position: relative;
  aspect-ratio: 720 / 1226;
  padding: 6px;
  border-radius: 26px;
  background: #0B1220;
  box-shadow: 0 30px 70px rgb(0 20 45 / 38%), inset 0 0 0 1px rgb(255 255 255 / 12%);
}
.hero-phone img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 20px; }
@media (max-width: 639px) { .hero-phone { padding: 4px; border-radius: 16px; } .hero-phone img { border-radius: 12px; } }

.device[data-protect]::after, .hero-phone[data-protect]::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.device::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(31 102 184 / 30%), transparent 65%);
  filter: blur(40px);
}
.device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border-radius: 20px;
}

/* ───────── 2. Marquee ───────── */
.marquee {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 6rem 0 2.5rem;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 640px) { .marquee { padding-top: 8rem; } }
@media (min-width: 768px) { .marquee { padding-top: 10rem; } }

.marquee-row {
  display: flex;
  gap: .75rem;
  width: max-content;
  will-change: transform;
}

.tile {
  position: relative;
  flex: 0 0 auto;
  width: 420px;
  height: 270px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--tint);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.9);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.tile::before {
  /* duotone azul: unifica fotos de fontes diferentes */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgb(0 64 132 / 60%), rgb(31 102 184 / 35%));
  mix-blend-mode: color;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgb(0 27 58 / 80%) 0%, rgb(0 27 58 / 0%) 55%);
  pointer-events: none;
}
.tile.is-screen img { filter: none; object-position: left top; }
.tile.is-screen::before { opacity: 0; }

.tile-label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  color: #fff;
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.04); }
  .tile:hover::before { opacity: 0; }
}

/* ───────── 3. Sobre ───────── */
.about {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 5rem 1.25rem;
  overflow: hidden;
}
@media (max-width: 639px) { .about { padding-block: 10.5rem; } } /* esferas decorativas sem encostar no título */
@media (min-width: 640px) { .about { gap: 5rem; padding-inline: 2rem; } }
@media (min-width: 768px) { .about { gap: 6rem; padding-inline: 2.5rem; } }

.about-block {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 640px) { .about-block { gap: 3.5rem; } }
@media (min-width: 768px) { .about-block { gap: 4rem; } }

.animated-text {
  max-width: 560px;
  color: var(--text);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.625;
  text-align: center;
}
.animated-text .w { display: inline-block; white-space: nowrap; }
.animated-text .c { opacity: .2; }
.no-motion .animated-text .c, .animated-text.is-static .c { opacity: 1; }

.values {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: 860px;
}
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.value { padding-top: 1rem; border-top: 1px solid var(--line); text-align: center; }
.value h3 { color: var(--blue); font-weight: 500; font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; }
.value p { margin-top: .4rem; color: var(--muted); font-weight: 300; font-size: .875rem; line-height: 1.5; }

.orb {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  pointer-events: none;
}
.orb-body {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* esfera de vidro claro: branco com reflexo azul-claro */
  background: radial-gradient(circle at 32% 26%, #FFFFFF 0%, #F2F7FD 28%, #D3E3F6 62%, #A9C7EC 100%);
  border: 1px solid rgb(255 255 255 / 80%);
  box-shadow:
    inset -8px -10px 22px rgb(0 64 132 / 14%),
    inset 6px 8px 16px rgb(255 255 255 / 90%),
    0 18px 40px rgb(0 64 132 / 16%);
}
.orb-body::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 20%;
  width: 32%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 255 255 / 95%), transparent 70%);
  transform: rotate(-24deg);
}
.orb-body svg { width: 40%; height: 40%; color: var(--blue); }

.orb-1 { top: 4%; left: 1%; width: 72px; }
.orb-2 { bottom: 8%; left: 3%; width: 60px; }
.orb-3 { top: 4%; right: 1%; width: 72px; }
.orb-4 { bottom: 8%; right: 3%; width: 78px; }
@media (min-width: 640px) {
  .orb-1 { left: 2%; width: 96px; } .orb-2 { left: 6%; width: 84px; }
  .orb-3 { right: 2%; width: 96px; } .orb-4 { right: 6%; width: 102px; }
}
@media (min-width: 768px) {
  .orb-1 { left: 4%; width: 126px; } .orb-2 { left: 10%; width: 108px; }
  .orb-3 { right: 4%; width: 126px; } .orb-4 { right: 10%; width: 132px; }
}

/* ───────── 4. Serviços ───────── */
.services {
  position: relative;
  background: var(--tint);
  color: var(--text);
  border-radius: 40px 40px 0 0;
  padding: 5rem 1.25rem 7.5rem;
}
@media (min-width: 640px) { .services { border-radius: 50px 50px 0 0; padding: 6rem 2rem 8.5rem; } }
@media (min-width: 768px) { .services { border-radius: 60px 60px 0 0; padding: 8rem 2.5rem 10.5rem; } }

.services .section-heading { color: var(--heading); margin-bottom: 4rem; }
@media (min-width: 640px) { .services .section-heading { margin-bottom: 5rem; } }
@media (min-width: 768px) { .services .section-heading { margin-bottom: 7rem; } }

.service-list { max-width: 64rem; margin: 0 auto; }

.service {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.service:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .service { gap: 2rem; padding: 2.25rem 0; } }
@media (min-width: 768px) { .service { gap: 2.5rem; padding: 2.5rem 0; } }

/* números e nomes em escala menor que os títulos de seção */
.big-number {
  flex: 0 0 auto;
  min-width: 1.4em;
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 88px);
  line-height: .9;
  letter-spacing: -.03em;
  transition: color .3s var(--ease);
}
.service .big-number { color: var(--heading); }   /* números mais escuros, na cor dos títulos */

.service-text { padding-top: .2em; transition: transform .3s var(--ease); }
.service-name { color: var(--text); font-weight: 500; font-size: clamp(.95rem, 1.6vw, 1.5rem); text-transform: uppercase; line-height: 1.2; }
.service-desc {
  max-width: 42rem;
  margin-top: .5rem;
  color: var(--muted);
  font-weight: 300;
  font-size: clamp(.85rem, 1.4vw, 1.1rem);
  line-height: 1.625;
}

@media (hover: hover) and (pointer: fine) {
  .service:hover .big-number { color: var(--blue); }
  .service:hover .service-text { transform: translateX(8px); }
}

/* ───────── 5. Produtos (cards empilhados) ───────── */
.products {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
  padding: 5rem 1rem 4rem;
  background: var(--bg);
  border-radius: 40px 40px 0 0;
  box-shadow: 0 -20px 40px rgb(0 64 132 / 6%);
}
@media (min-width: 640px) { .products { margin-top: -3rem; padding-inline: 2rem; border-radius: 50px 50px 0 0; } }
@media (min-width: 768px) { .products { margin-top: -3.5rem; padding: 7rem 2.5rem 5rem; border-radius: 60px 60px 0 0; } }
.products:first-child { margin-top: 0; }

.products .section-heading { margin-bottom: 3rem; }
@media (min-width: 768px) { .products .section-heading { margin-bottom: 4rem; } }

.stack { max-width: 1280px; margin: 0 auto; }

.stack-item {
  display: flex;
  justify-content: center;
}
.stack-item + .stack-item { margin-top: 3rem; }

/* Cada próximo card sobe por cima do anterior com a rolagem nativa. */
@media (prefers-reduced-motion: no-preference) {
  .stack { padding-bottom: 15vh; }
  .stack-item { position: sticky; top: var(--stack-top, 6rem); }
  .stack-item:nth-child(2) { top: var(--stack-top, calc(6rem + 28px)); }
  .stack-item .product-card { transform-origin: top center; }
}

.product-card {
  position: relative;
  width: 100%;
  height: fit-content;
  padding: 1rem;
  border: 2px solid rgb(0 64 132 / 22%);
  border-radius: 40px;
  background: var(--bg);
  box-shadow: 0 24px 60px rgb(11 37 69 / 10%);
  transform-origin: center;
}
@media (min-width: 640px) { .product-card { padding: 1.5rem; border-radius: 50px; } }
@media (min-width: 768px) { .product-card { padding: 2rem; border-radius: 60px; } }

.product-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  padding: .5rem .75rem 1.25rem;
}
@media (min-width: 768px) { .product-top { padding: .5rem 1rem 1.5rem; } }
.product-top .big-number { color: var(--blue); }
.product-info { flex: 1 1 16rem; min-width: 0; }
.product-cat { color: var(--muted); font-weight: 400; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.product-name { margin-top: .15rem; color: var(--text); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.75rem); text-transform: uppercase; line-height: 1.1; }
.product-pitch { margin-top: .4rem; max-width: 40rem; color: var(--muted); font-weight: 300; font-size: clamp(.85rem, 1.3vw, 1.05rem); line-height: 1.5; }

.product-grid { display: flex; gap: .75rem; }
@media (min-width: 768px) { .product-grid { gap: 1rem; } }
.product-col-a { flex: 0 0 40%; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.product-col-b { flex: 1 1 60%; min-width: 0; }
@media (min-width: 768px) { .product-col-a { gap: 1rem; } }

.shot {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background: var(--tint);
}
@media (min-width: 640px) { .shot { border-radius: 50px; } }
@media (min-width: 768px) { .shot { border-radius: 60px; } }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.photo img { filter: grayscale(.3) contrast(1.04); }
.shot.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgb(0 64 132 / 30%), transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.shot.screen { border: 1px solid var(--line); }
.shot.screen img { object-position: left top; }
.shot-a { height: clamp(130px, 16vw, 230px); }
.shot-b { height: clamp(160px, 22vw, 340px); }
.shot-c { height: calc(clamp(130px, 16vw, 230px) + clamp(160px, 22vw, 340px) + .75rem); }
@media (min-width: 768px) { .shot-c { height: calc(clamp(130px, 16vw, 230px) + clamp(160px, 22vw, 340px) + 1rem); } }

/* ───────── 6. Contato + rodapé ───────── */
.contact {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 1.25rem 2rem;
  text-align: center;
}
@media (min-width: 640px) { .contact { padding-inline: 2rem; } }
@media (min-width: 768px) { .contact { padding-inline: 2.5rem; } }

.contact-sub { max-width: 560px; color: var(--muted); font-weight: 300; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.6; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.contact-actions .btn-ghost { text-transform: none; letter-spacing: .04em; }
.contact-actions .btn-ghost.is-upper { text-transform: uppercase; letter-spacing: .1em; }

.footer {
  width: 100%;
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: .75rem;
  text-align: left;
}
@media (min-width: 640px) { .footer { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 2rem; font-size: .875rem; } }
.footer, .footer a { color: var(--muted); }
.footer a { transition: color .2s var(--ease); }
.footer a:hover { color: var(--blue); }
.footer .logo { width: 130px; }
.footer-brand { display: flex; flex-direction: column; gap: .75rem; }
.footer-links { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: .5rem 1.5rem; }

/* Linhas legais: direitos reservados em cima, razão social e CNPJ embaixo (no celular, razão social e CNPJ ganham uma linha cada) */
.footer-legal { display: flex; flex-direction: column; gap: .3rem; line-height: 1.5; }
.footer-keep { white-space: nowrap; }
@media (min-width: 640px) { .footer-company { font-size: .9em; } }
@media (max-width: 639px) { .footer-sep { display: none; } .footer-keep { display: block; } }


/* ───────── Movimento contínuo ───────── */
@media (prefers-reduced-motion: no-preference) {
  .float { animation: float 6s ease-in-out infinite; }
  .float-alt { animation: float 7.5s ease-in-out -2.4s infinite; }
  .orb-1 .orb-body { animation: orb-float 5.2s ease-in-out infinite; }
  .orb-2 .orb-body { animation: orb-float 6.4s ease-in-out -1.8s infinite; }
  .orb-3 .orb-body { animation: orb-float 5.8s ease-in-out -3.1s infinite; }
  .orb-4 .orb-body { animation: orb-float 7s ease-in-out -.9s infinite; }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes orb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ───────── Card 01 — Plugable Flex (telas reais do produto) ───────── */
.flex-panels { background: #fff; border: 1px solid var(--line); }
.flex-panels img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.flex-panels img.is-active { opacity: 1; }

.flex-reward { background: #F7F9FC; border: 1px solid var(--line); }
.flex-reward img { width: 100%; height: 100%; object-fit: contain; padding: 6% 10% 16%; }

.flex-chip {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em 1em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(11 37 69 / 16%);
  color: var(--blue);
  font-weight: 500;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.flex-chip i { width: .55em; height: .55em; border-radius: 50%; background: #1F9D55; }

.flex-stage {
  container-type: size;
  background:
    radial-gradient(circle at 70% 30%, rgb(111 163 224 / 45%), transparent 55%),
    linear-gradient(160deg, #004084 0%, #0B5AA8 60%, #1F66B8 100%);
}
.stage-glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 90cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 22%), transparent 62%);
  transform: translate(-50%, -50%);
}
.phone {
  position: absolute;
  top: 17cqh;
  height: 74cqh;
  aspect-ratio: 720 / 1226;
  padding: 1.1cqh;
  border-radius: 5.5cqh;
  background: #0B1220;
  box-shadow: 0 3cqh 7cqh rgb(0 20 45 / 45%), inset 0 0 0 1px rgb(255 255 255 / 12%);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 4.4cqh; }
.phone-front { left: 50%; z-index: 2; translate: -84% 0; }
.phone-back { left: 50%; z-index: 1; translate: -10% -4cqh; rotate: 7deg; scale: .9; }

.scan-beam {
  position: absolute;
  left: 50%;
  top: 44cqh;
  z-index: 3;
  width: 14cqw;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #9CD3FF, #fff);
  box-shadow: 0 0 12px 2px rgb(156 211 255 / 70%);
  opacity: 0;
  translate: -20% 0;
}
.flex-toast {
  position: absolute;
  left: 50%;
  bottom: 7cqh;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .7em 1.1em .7em .7em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(0 20 45 / 30%);
  color: var(--text);
  font-size: clamp(10px, 1.1vw, 14px);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px) scale(.96);
}
.flex-toast i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #1F9D55; color: #fff; }
.flex-toast i svg { width: 55%; height: 55%; }
.flex-toast b { display: block; font-weight: 600; }
.flex-toast small { display: block; color: var(--muted); font-size: .85em; }
.stage-caption {
  position: absolute;
  left: 50%;
  top: 6cqh;
  z-index: 4;
  width: 80%;
  color: #fff;
  font-weight: 500;
  font-size: clamp(11px, 4.6cqw, 18px);
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}
@container (max-width: 260px) {
  .phone { top: 22cqh; height: 62cqh; }
  .phone-front { translate: -80% 0; }
  .phone-back { translate: -24% -4cqh; }
  .stage-caption { font-size: 11px; top: 7cqh; }
  .flex-toast { font-size: 9px; bottom: 5cqh; }
  .flex-toast small { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .phone-front { animation: phone-float 6s ease-in-out infinite; }
  .phone-back { animation: phone-float 7s ease-in-out -2.5s infinite; }
  .scan-beam { animation: scan-beam 5s var(--ease) infinite; }
  .flex-toast { animation: toast-cycle 5s var(--ease) infinite; }
  .flex-stage *, .flex-stage { animation-play-state: paused; }
  [data-flex-card].is-visible .flex-stage * { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .flex-toast { opacity: 1; transform: translate(-50%, 0); }
}
.no-motion .flex-toast { opacity: 1; transform: translate(-50%, 0); }
@keyframes phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2cqh); } }
@keyframes scan-beam {
  0%, 18% { opacity: 0; translate: 30% 0; }
  24% { opacity: 1; }
  40% { opacity: 1; translate: -120% 0; }
  46%, 100% { opacity: 0; translate: -140% 0; }
}
@keyframes toast-cycle {
  0%, 42% { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  50%, 84% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, 6px) scale(.98); }
}
@media (max-width: 639px) { .flex-chip { display: none; } } /* quadros pequenos demais para a etiqueta */

/* ───────── Card 02 — Plugable Shop (telas reais com proteção) ───────── */
[data-protect] img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
[data-protect] .shot::after {
  /* camada transparente sobre as telas: o clique direito e o arrastar pegam a camada, não a imagem */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.shop-detail { background: #fff; border: 1px solid var(--line); }
.shop-detail img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.shop-stage {
  container-type: size;
  background:
    radial-gradient(circle at 30% 70%, rgb(111 163 224 / 40%), transparent 55%),
    linear-gradient(200deg, #004084 0%, #0B5AA8 60%, #1F66B8 100%);
  perspective: 1400px;
}
.browser {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 2;
  width: 86cqw;
  border-radius: 2.2cqw;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4cqh 9cqh rgb(0 20 45 / 45%), 0 0 0 1px rgb(255 255 255 / 30%);
  transform: translate(-50%, -50%) rotateY(-9deg) rotateX(4deg);
  transform-style: preserve-3d;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: .9cqw;
  height: max(18px, 5.5cqh);
  padding: 0 2.4cqw;
  background: #EEF3F9;
  border-bottom: 1px solid var(--line);
}
.browser-bar i { width: max(6px, 1.4cqw); height: max(6px, 1.4cqw); border-radius: 50%; background: #C9D6E6; }
.browser-bar i:first-child { background: #E86A6A; } .browser-bar i:nth-child(2) { background: #F0B84D; } .browser-bar i:nth-child(3) { background: #5CC27E; }
.browser-bar span {
  margin-left: auto;
  margin-right: auto;
  padding: .2em .9em;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-weight: 500;
  font-size: max(9px, 2.2cqh);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
.browser-screen { position: relative; aspect-ratio: 1100 / 432; overflow: hidden; }
.browser-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .9s var(--ease), transform 3.6s var(--ease);
}
.browser-screen img.is-active { opacity: 1; transform: scale(1); }
.browser-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 35%) 50%, transparent 65%) -160% 0 / 60% 100% no-repeat;
}
.shop-stage .stage-caption { top: 7cqh; }
@container (max-width: 260px) {
  .browser { width: 94cqw; top: 58%; transform: translate(-50%, -50%) rotateY(-6deg); }
  .browser-bar span { font-size: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .browser { animation: browser-float 7s ease-in-out infinite; }
  .browser-shine { animation: browser-shine 5.5s var(--ease) infinite; }
  .shop-stage *, .shop-stage { animation-play-state: paused; }
  [data-shop-card].is-visible .shop-stage * { animation-play-state: running; }
}
@keyframes browser-float {
  0%, 100% { transform: translate(-50%, -50%) rotateY(-9deg) rotateX(4deg); }
  50% { transform: translate(-50%, calc(-50% - 1.6cqh)) rotateY(-5deg) rotateX(2deg); }
}
@keyframes browser-shine { 0%, 55% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
.credits { width: 100%; margin-top: 1.5rem; text-align: left; font-size: .75rem; color: var(--muted); }
.credits summary { cursor: pointer; width: fit-content; color: var(--bg); }
.credits summary:hover { color: var(--bg); }
.credits ul { margin-top: .75rem; display: grid; gap: .35rem; }
@media (min-width: 768px) { .credits ul { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.credits a { text-decoration: underline; text-underline-offset: 2px; }
/* Card 02: tela de login inteira (logo à esquerda + formulário à direita), sem corte */
.shop-login-shot { background: #fff; }
.shop-login-shot img { object-fit: contain; object-position: center; padding: 2.5% 2.5%; }   /* tela inteira, com borda fina */
@media (max-width: 639px) { .shop-login-shot img { object-fit: cover; object-position: 80% 50%; padding: 0; } }   /* quadro pequeno: foca no formulário de acesso */

/* Card 02: relatórios mostram os cartões de cima e o começo do gráfico */
.shop-reports-shot { background: #fff; }
.shop-reports-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 3% 3% 12%;   /* mostra cada tela inteira */
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.shop-reports-shot img.is-active { opacity: 1; }
@media (max-width: 639px) { .shop-reports-shot img { padding: 4%; } }

/* Logotipos dos produtos no lugar do nome em texto */
.hero-tag-logo { padding: .5em .95em; }
.hero-tag-logo::before { display: none; }
.hero-tag-logo { width: max-content; }   /* a etiqueta acompanha o logotipo, mesmo em card estreito */
.hero-tag-logo img { display: block; width: auto; max-width: none; height: clamp(14px, 1.25vw, 20px); }
.product-logo { margin-top: .35rem; line-height: 0; }
.product-logo img { display: block; width: auto; max-width: 100%; height: clamp(30px, 3.2vw, 46px); }