/* ============================================================
   HERO 14 + GLOBO DO FEATURES-02 (Originkit) — estilos da ultima tela
   Porta em JS puro: assets/hero-14.js. Traducao das classes Tailwind
   dos dois componentes, com as cores adaptadas ao fundo creme do site.
   ============================================================ */

/* fonte do botao "Entre em contato" (a mesma de antes) */
@font-face {
  font-family: "Hero24 Helvetica Neue";
  src: url("/hero24/assets/helvetica-neue-medium.ttf") format("truetype");
  font-display: swap;
}

.h14 {
  position: relative;
  z-index: 1;
  /* largura total da tela, mesmo dentro do rodape */
  margin-inline: calc(50% - 50vw);
  text-align: left;
  line-height: normal;
  /* tamanho do globo: 331px no desktop, 312px no celular, menor em telas baixas */
  --g: clamp(200px, min(36svh, 80vw), 331px);
}

.h14__main {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #FAF9F5;
  -webkit-font-smoothing: antialiased;
}

.h14 h2,
.h14 p {
  margin: 0;
}

.h14 img {
  display: block;
  max-width: none;
  user-select: none;
}

.h14 a {
  text-decoration: none;
}

/* o tema forca a cor de todo texto do rodape */
.outro .h14,
.outro .h14 * {
  color: #7C7468 !important;
}

/* ---------- luzes e grids de fundo ---------- */
.h14-decor {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
}

.h14.is-in .h14-decor {
  opacity: 1;
  transform: translateY(1px);
  transition: opacity 4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.h14-decor__beam {
  position: absolute;
  top: -40px;
  width: 440px;
}

.h14-decor__beam--right {
  left: 200px;
  rotate: 5deg;
}

.h14-decor__beam--left {
  right: 200px;
  rotate: -5deg;
  scale: -1 1;
}

.h14-decor__light {
  position: absolute;
  top: -80px;
  z-index: 10;
  display: none;
  width: 320px;
}

.h14-decor__light--left {
  left: -100px;
  rotate: 25deg;
}

.h14-decor__light--right {
  right: -100px;
  rotate: -25deg;
  scale: -1 1;
}

.h14-grid {
  pointer-events: none;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  overflow: hidden;
}

.h14-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  rotate: 180deg;
}

.h14-grid--top {
  top: 0;
  width: 1920px;
  height: 300px;
}

.h14-grid--top img {
  opacity: 0.35;
}

.h14-grid--top-mobile {
  top: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 220px;
  rotate: 180deg;
}

.h14-grid--top-mobile img {
  opacity: 0.35;
}

.h14-grid--bottom {
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 220px;
}

.h14-grid--bottom img {
  opacity: 0.45;
}

@media (min-width: 768px) {
  .h14-decor__beam--right { left: 560px; }
  .h14-decor__beam--left { right: 560px; }
}

@media (min-width: 1024px) {
  .h14-decor__beam { top: -10px; width: 460px; }
  .h14-decor__beam--right { left: 800px; }
  .h14-decor__beam--left { right: 800px; }
}

@media (min-width: 1280px) {
  .h14-decor__beam { top: -50px; width: 660px; }
  .h14-decor__beam--right { left: 1000px; }
  .h14-decor__beam--left { right: 1000px; }
}

@media (max-width: 782px) {
  .h14-decor__beam,
  .h14-grid--top { display: none; }
  .h14-decor__light,
  .h14-grid--top-mobile { display: block; }
}

/* ---------- conteudo ---------- */
.h14-content {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 40px;
}

@media (min-width: 768px) {
  .h14-content { max-width: 890px; padding-inline: 24px; }
}

@media (min-width: 1440px) {
  .h14-content { max-width: 1280px; }
}

/* ---------- globo (features-02) ---------- */
/* palco com a mesma proporcao do features-02: o globo fica a 0.616g do topo
   e a parte de baixo se dissolve no fundo; o titulo sobe por cima dela */
.h14-stage {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: calc(var(--g) * 1.523);
  margin-top: calc(var(--g) * -0.46);
  margin-bottom: calc(var(--g) * -0.14);
  pointer-events: none;
}

.h14-stage__fade {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
}

.h14-stage__glow {
  position: absolute;
  left: 50%;
  top: calc(var(--g) * 1.116);
  width: var(--g);
  height: var(--g);
  translate: -50% -50%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(208, 149, 88, 0.16), transparent 70%);
}

.h14-globe {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: calc(var(--g) * 0.616);
  width: var(--g);
  height: var(--g);
  translate: -50% 0;
  cursor: grab;
  touch-action: pan-y;
}

.h14-globe:active {
  cursor: grabbing;
}

.h14-globe__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* particulas do hero-14 atras do globo */
.h14-particles {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(var(--g) * 1.116);
  width: min(380px, 90vw);
  height: 170px;
  translate: -50% -50%;
}

.h14-particles__dot {
  position: absolute;
  border-radius: 999px;
  opacity: 0;
}

/* aneis tracejados com as luzes orbitando */
.h14-rings {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(100%, calc(var(--g) * 3));
  height: 100%;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.h14-ring {
  position: absolute;
  left: 50%;
  top: calc(var(--g) * 1.116);
  width: calc(var(--g) * var(--ring));
  height: calc(var(--g) * var(--ring));
  translate: -50% -50%;
}

.h14-ring__dash {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px dashed #7C7468;
  border-radius: 999px;
}

.h14-ring__orbit {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 38%, #000 0%, #000 42%, rgba(0, 0, 0, 0.35) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 38%, #000 0%, #000 42%, rgba(0, 0, 0, 0.35) 68%, transparent 100%);
}

.h14-ring__light {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  will-change: transform;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(208, 149, 88, 0.02) 280deg, rgba(208, 149, 88, 0.08) 310deg, rgba(208, 149, 88, 0.22) 335deg, rgba(208, 149, 88, 0.55) 350deg, rgba(208, 149, 88, 0.9) 357deg, #D09558 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: h14-orbit 12s linear infinite;
}

@keyframes h14-orbit {
  to { transform: rotate(360deg); }
}

/* ---------- textos ---------- */
.h14-copy {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 900px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.h14-title {
  max-width: 760px;
  text-align: center;
  font-family: Arges, "Neue Montreal", "Helvetica Neue", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.h14-text {
  max-width: 620px;
  text-align: center;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.outro .h14 .h14-text {
  color: rgba(124, 116, 104, 0.8) !important;
}

@media (min-width: 768px) {
  .h14-title { font-size: 40px; }
}

@media (min-width: 1024px) {
  .h14-title { font-size: 48px; }
}

@media (min-width: 1280px) {
  .h14-title { font-size: 54px; }
  .h14-text { font-size: 18px; }
}

/* etiquetas com cursor (so a partir de 800px, como no hero-14) */
.h14-label {
  position: absolute;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  background: #1A1A1A;
}

.h14-label__text {
  white-space: nowrap;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.outro .h14 .h14-label__text {
  color: #FFFFFF !important;
}

.h14-label__arrow {
  position: absolute;
  top: -16px;
  width: 17px;
  height: 20px;
}

.h14-label--left .h14-label__arrow {
  left: 88px;
  scale: -1 1;
}

.h14-label--right .h14-label__arrow {
  right: 88px;
}

.h14-label--left.h14-label--a { left: 150px; top: -100px; }
.h14-label--left.h14-label--b { left: 18px; top: -8px; }
.h14-label--right.h14-label--a { right: 150px; top: -100px; }
.h14-label--right.h14-label--b { right: 8px; top: -8px; }

@media (min-width: 800px) {
  .h14-label { display: flex; }
}

@media (min-width: 1024px) {
  .h14-label--left.h14-label--b { left: 10px; top: 0; }
  .h14-label--right.h14-label--b { right: 10px; top: 0; }
}

@media (min-width: 1280px) {
  .h14-label__text { font-size: 16px; }
  .h14-label--left.h14-label--a { left: 100px; }
  .h14-label--left.h14-label--b { left: -50px; }
  .h14-label--right.h14-label--a { right: 100px; }
  .h14-label--right.h14-label--b { right: -50px; }
}

/* ---------- botao ---------- */
.h14-actions {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .h14-actions { margin-top: 50px; }
}

/* ---------- Orbit Border Button (Originkit) ---------- */
.h14-orbit {
  display: inline-flex;
  min-width: 80px;
  min-height: 40px;
  position: relative;
}

.h14-orbit__link {
  box-sizing: border-box;
  position: relative;
  display: block;
  flex: 1 1 auto;
  border: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform 0.6s cubic-bezier(0.44, 0, 0.56, 1);
}

.h14-orbit__band {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: border-box, content-box;
  mask-composite: exclude;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: border-box, content-box;
  -webkit-mask-composite: xor;
}

.h14-orbit__comet {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform-origin: center;
}

.h14-orbit__glow,
.h14-orbit__core {
  position: absolute;
  inset: 0;
}

.h14-orbit__face {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Hero24 Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0;
}

.outro .h14 .h14-orbit__face,
.outro .h14 .h14-orbit__face * {
  color: #FFFFFF !important;
}

/* ---------- animacoes de entrada (valores do hero-14) ---------- */
.h14-in {
  opacity: 0;
  transform: translateY(36px);
}

.h14-pop {
  opacity: 0;
  transform: scale(0.82);
}

.h14.is-in .h14-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.1s + var(--i, 0) * 0.2s);
}

.h14.is-in .h14-pop {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.1s + var(--i, 0) * 0.2s);
}

@media (prefers-reduced-motion: reduce) {
  .h14-decor,
  .h14-in,
  .h14-pop {
    opacity: 1;
    transform: none;
  }
  .h14-ring__light {
    animation: none;
  }
  .h14-orbit__link {
    transition: none;
  }
}

/* ---------- celular: menu do site fica fixo embaixo ---------- */
@media (max-width: 40rem) {
  .h14-content {
    padding-top: 48px;
    padding-bottom: 96px;
  }
  .h14-text {
    font-size: 15px;
  }
}

/* ---------- rodape ---------- */
.section.outro:has(.h14) {
  padding: 0 !important;
  background: #FAF9F5 !important;
}