.elementor-73 .elementor-element.elementor-element-9c7b99d{width:var( --container-widget-width, 99.901% );max-width:99.901%;--container-widget-width:99.901%;--container-widget-flex-grow:0;}.elementor-73 .elementor-element.elementor-element-9c7b99d.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-9c7b99d *//* =========================================
   FORMA P01 — HERO
   CSS AJUSTADO — V3
========================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");


/* RESET INTERNO
========================================== */

.fp01h,
.fp01h * {
  box-sizing: border-box;
}


/* ESTRUTURA PRINCIPAL
========================================== */

.fp01h {
  --fp-ink: #151719;
  --fp-paper: #f4f4f2;
  --fp-white: #ffffff;
  --fp-progress: 0;
  --fp-scroll-distance: 760vh;

  position: relative;

  width: 100%;
  height: var(--fp-scroll-distance);

  margin: 0;

  color: var(--fp-ink);
  background: var(--fp-paper);

  font-family: "Manrope", Arial, sans-serif;

  isolation: isolate;
}

.fp01h__stage {
  position: sticky;

  top: 0;

  width: 100%;
  height: 100vh;
  height: 100svh;

  overflow: hidden;

  background: var(--fp-paper);

  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}


/* VÍDEO
========================================== */

.fp01h__media,
.fp01h__video,
.fp01h__wash,
.fp01h__flash {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}

.fp01h__media {
  z-index: 0;

  overflow: hidden;

  background: var(--fp-paper);

  transform: translateZ(0);
  backface-visibility: hidden;
}

.fp01h__video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  background: var(--fp-paper);

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  pointer-events: none;

  will-change: opacity;
}


/* CAMADA DE LEITURA
========================================== */

.fp01h__wash {
  z-index: 1;

  pointer-events: none;

  opacity: 1;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.54) 0%,
      rgba(255, 255, 255, 0) 50%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 62%,
      rgba(244, 244, 242, 0.60) 100%
    );

  will-change: opacity;
}


/* TRANSIÇÃO CINEMATOGRÁFICA
========================================== */

.fp01h__flash {
  z-index: 2;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.74) 24%,
      rgba(255, 255, 255, 0.18) 56%,
      rgba(255, 255, 255, 0) 78%
    );

  mix-blend-mode: screen;

  will-change: opacity;
}


/* INTERFACE
========================================== */

.fp01h__ui {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;
}


/* HERO
========================================== */

.fp01h__hero {
  position: absolute;

  top: 50%;
  left: clamp(28px, 6.5vw, 112px);

  width: min(610px, 43vw);

  transform: translateY(-49%);

  will-change:
    opacity,
    transform,
    filter;
}


/* TIPOGRAFIA MONO
========================================== */

.fp01h__eyebrow,
.fp01h__card-code,
.fp01h__scene-kicker,
.fp01h__index-number,
.fp01h__scroll-label,
.fp01h__note {
  font-family: "IBM Plex Mono", monospace;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* EYEBROW
========================================== */

.fp01h__eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  min-height: 29px;

  margin: 0 0 26px;
  padding: 7px 12px;

  border: 1px solid rgba(21, 23, 25, 0.09);
  border-radius: 999px;

  color: #697077;
  background: rgba(255, 255, 255, 0.76);

  box-shadow:
    0 8px 24px rgba(21, 23, 25, 0.05);

  font-size: 10px;
  line-height: 1;

  backdrop-filter: blur(12px);
}

.fp01h__eyebrow::before {
  content: "";

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--fp-ink);
}


/* TÍTULO
========================================== */

.fp01h__title {
  max-width: 650px;

  margin: 0;

  font-size: clamp(54px, 5.7vw, 102px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.fp01h__title-line {
  display: block;
}

.fp01h__title-outline {
  --fp-title-fill: 0%;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      var(--fp-ink),
      var(--fp-ink)
    )
    left center / var(--fp-title-fill) 100%
    no-repeat;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-stroke: 1.2px var(--fp-ink);
  text-stroke: 1.2px var(--fp-ink);

  will-change: background-size;
}


/* DESCRIÇÃO
========================================== */

.fp01h__description {
  width: min(505px, 92%);

  margin: 28px 0 0;

  color: #5c6268;

  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.68;
}


/* BOTÕES
========================================== */

.fp01h__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;

  pointer-events: auto;
}

.fp01h__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  min-height: 54px;

  padding: 0 27px;

  border: 1px solid rgba(21, 23, 25, 0.12);
  border-radius: 999px;

  color: var(--fp-ink);
  background: rgba(255, 255, 255, 0.82);

  box-shadow:
    0 12px 30px rgba(21, 23, 25, 0.06);

  font-size: 13px;
  font-weight: 600;

  text-decoration: none;

  backdrop-filter: blur(14px);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.fp01h__button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 36px rgba(21, 23, 25, 0.11);
}

.fp01h__button--dark {
  border-color: var(--fp-ink);

  color: var(--fp-white);
  background: var(--fp-ink);
}


/* CARDS
========================================== */

.fp01h__cards {
  position: absolute;

  top: 50%;
  right: clamp(62px, 7vw, 126px);

  display: grid;

  gap: 12px;

  width: min(350px, 25vw);

  transform: translateY(-47%);

  perspective: 900px;

  will-change:
    opacity,
    transform,
    filter;
}

.fp01h__card {
  position: relative;

  min-height: 116px;

  padding: 20px 22px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.73) 0%,
      rgba(255, 255, 255, 0.43) 56%,
      rgba(239, 235, 244, 0.28) 100%
    );

  box-shadow:
    0 24px 54px rgba(21, 23, 25, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(83, 67, 98, 0.05);

  backdrop-filter:
    blur(24px)
    saturate(138%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(138%);

  isolation: isolate;

  will-change:
    opacity,
    transform,
    filter;
}

.fp01h__card::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  right: 18px;
  left: 18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.96),
      rgba(117, 88, 139, 0.28),
      transparent
    );
}

.fp01h__card::after {
  content: "";

  position: absolute;
  z-index: -1;

  width: 120px;
  height: 120px;

  right: -66px;
  bottom: -74px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(109, 78, 134, 0.14) 0%,
      rgba(109, 78, 134, 0) 72%
    );

  pointer-events: none;
}

.fp01h__card:nth-child(1) {
  margin-right: clamp(16px, 2vw, 34px);
}

.fp01h__card:nth-child(2) {
  margin-left: clamp(24px, 2.7vw, 46px);
}

.fp01h__card:nth-child(3) {
  margin-right: clamp(8px, 1.2vw, 20px);
  margin-left: clamp(8px, 1.1vw, 18px);
}

.fp01h__card-code {
  display: block;

  margin-bottom: 13px;

  color: #776b80;

  font-size: 8px;
}

.fp01h__card-title {
  display: block;

  margin-bottom: 6px;

  font-size: 17px;
  font-weight: 600;
}

.fp01h__card-copy {
  color: #71777c;

  font-size: 12px;
  line-height: 1.45;
}


/* SEGUNDA CENA
========================================== */

.fp01h__touch {
  position: absolute;

  left: clamp(28px, 6.5vw, 112px);
  bottom: clamp(72px, 10vh, 120px);

  width: min(470px, 40vw);

  opacity: 0;
  visibility: hidden;

  will-change:
    opacity,
    transform,
    filter;
}

.fp01h__scene-kicker {
  display: block;

  margin-bottom: 16px;

  color: #71777c;

  font-size: 9px;
}

.fp01h__scene-title {
  margin: 0 0 14px;

  font-size: clamp(44px, 4.8vw, 78px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.fp01h__scene-text {
  max-width: 420px;

  margin: 0;

  color: #62686d;

  font-size: 15px;
  line-height: 1.6;
}


/* INDICADOR LATERAL
========================================== */

.fp01h__index {
  position: absolute;

  z-index: 4;

  top: 50%;
  right: clamp(16px, 2vw, 34px);

  display: grid;

  justify-items: center;

  gap: 13px;

  transform: translateY(-50%);
}

.fp01h__index-number {
  color: var(--fp-ink);

  font-size: 9px;
}

.fp01h__track {
  width: 1px;
  height: 82px;

  overflow: hidden;

  background: rgba(21, 23, 25, 0.18);
}

.fp01h__fill {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--fp-ink);

  transform: scaleY(var(--fp-progress));
  transform-origin: top;
}


/* INDICAÇÃO DE SCROLL
========================================== */

.fp01h__scroll {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 18px;

  display: grid;

  justify-items: center;

  gap: 9px;

  transform: translateX(-50%);

  will-change:
    opacity,
    transform;
}

.fp01h__scroll-label {
  color: #747a7f;

  font-size: 7px;
}

.fp01h__scroll-line {
  display: block;

  width: 1px;
  height: 30px;

  background: var(--fp-ink);

  animation:
    fp01hPulse 1.8s ease-in-out infinite;
}


/* ASSINATURA
========================================== */

.fp01h__note {
  position: absolute;

  z-index: 4;

  left: 22px;
  bottom: 18px;

  color: #858b91;

  font-size: 7px;
}


/* LOADER
========================================== */

.fp01h__loader {
  position: absolute;

  z-index: 20;

  inset: 0;

  display: grid;

  place-items: center;

  color: #6f757a;
  background: var(--fp-paper);

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;

  /*
   * Segurança:
   * mesmo que o JavaScript apresente falha,
   * o loader desaparece após alguns segundos.
   */
  animation:
    fp01hLoaderFailsafe 0.01s linear 9s forwards;
}

.fp01h.is-ready .fp01h__loader {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

.fp01h__loader-inner {
  display: grid;

  gap: 12px;

  width: min(260px, 70vw);

  text-align: center;

  font:
    500 9px/1 "IBM Plex Mono",
    monospace;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fp01h__loader-track {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #17191b,
      transparent
    );

  animation:
    fp01hLoad 1.2s linear infinite;
}


/* ANIMAÇÕES
========================================== */

@keyframes fp01hPulse {
  0%,
  100% {
    transform: scaleY(0.3);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

@keyframes fp01hLoad {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: left;
  }

  51% {
    transform-origin: right;
  }

  to {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes fp01hLoaderFailsafe {
  to {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
  }
}


/* TABLET
========================================== */

@media (max-width: 1024px) {

  .fp01h {
    --fp-scroll-distance: 700vh;
  }

  .fp01h__hero {
    left: 5vw;

    width: 53vw;
  }

  .fp01h__cards {
    right: 5vw;

    width: 29vw;
  }

  .fp01h__card {
    min-height: 104px;

    padding: 17px;
  }
}


/* CELULAR
========================================== */

@media (max-width: 767px) {

  .fp01h {
    --fp-scroll-distance: 620vh;
  }

  /*
   * Área disponível para o vídeo entre
   * o conteúdo superior e os cards inferiores.
   */
  .fp01h__media {
    top: 18vh;
    bottom: 10vh;

    height: auto;
  }

  /*
   * Preserva o enquadramento integral
   * da caneta no celular.
   */
  .fp01h__video {
    object-fit: contain;
    object-position: center center;
  }

  .fp01h__wash {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.66) 0%,
        rgba(255, 255, 255, 0.05) 46%,
        rgba(244, 244, 242, 0.86) 100%
      );
  }

  .fp01h__flash {
    background:
      radial-gradient(
        circle at 50% 52%,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.68) 27%,
        rgba(255, 255, 255, 0.14) 58%,
        rgba(255, 255, 255, 0) 80%
      );
  }

  .fp01h__hero {
    top: 8vh;
    left: 20px;
    right: 38px;

    width: auto;

    transform: none;
  }

  .fp01h__eyebrow {
    margin-bottom: 14px;

    padding: 6px 10px;

    font-size: 8px;
  }

  .fp01h__title {
    max-width: 360px;

    font-size: clamp(41px, 12.6vw, 61px);
    line-height: 0.96;
  }

  .fp01h__description {
    width: min(350px, 88vw);

    margin-top: 15px;

    font-size: 12px;
    line-height: 1.52;
  }

  .fp01h__actions {
    gap: 8px;

    margin-top: 17px;
  }

  .fp01h__button {
    min-height: 43px;

    padding: 0 17px;

    font-size: 11px;
  }

  .fp01h__cards {
    top: auto;
    right: 38px;
    bottom: 62px;
    left: 14px;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 6px;

    width: auto;

    transform: none;
  }

  .fp01h__card {
    min-height: 82px;

    padding: 11px 9px;

    border-radius: 13px;
  }

  .fp01h__card:nth-child(1),
  .fp01h__card:nth-child(2),
  .fp01h__card:nth-child(3) {
    margin-right: 0;
    margin-left: 0;
  }

  .fp01h__card-code {
    margin-bottom: 7px;

    font-size: 6px;
    letter-spacing: 0.09em;
  }

  .fp01h__card-title {
    font-size: 11px;
    line-height: 1.25;
  }

  .fp01h__card-copy {
    display: none;
  }

  .fp01h__touch {
    right: 42px;
    bottom: 76px;
    left: 20px;

    width: auto;
  }

  .fp01h__scene-kicker {
    margin-bottom: 12px;

    font-size: 8px;
  }

  .fp01h__scene-title {
    max-width: 330px;

    font-size: clamp(38px, 11vw, 47px);
  }

  .fp01h__scene-text {
    max-width: 320px;

    font-size: 13px;
    line-height: 1.52;
  }

  .fp01h__index {
    right: 12px;
  }

  .fp01h__note {
    display: none;
  }
}


/* CELULAR HORIZONTAL
========================================== */

@media
  (max-width: 767px)
  and (orientation: landscape) {

  .fp01h__media {
    inset: 0;

    height: 100%;
  }

  .fp01h__video {
    object-fit: cover;
  }

  .fp01h__hero {
    top: 50%;

    width: 47vw;

    transform: translateY(-50%);
  }

  .fp01h__cards {
    top: 50%;
    right: 44px;
    bottom: auto;
    left: auto;

    grid-template-columns: 1fr;

    width: 27vw;

    transform: translateY(-50%);
  }
}


/* MOVIMENTO REDUZIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

  .fp01h {
    height: 100vh;
    height: 100svh;
  }

  .fp01h__cards,
  .fp01h__touch,
  .fp01h__scroll,
  .fp01h__loader,
  .fp01h__flash {
    display: none !important;
  }

  .fp01h__hero,
  .fp01h__hero * {
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    filter: none !important;
  }
}/* End custom CSS */