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

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

html,
body {
  height: 100%;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: #334155;
  background: #ffffff;
}


/* =====================================================
   VARIÁVEIS
===================================================== */

:root {

  --asa-brand: #1e293b;
  --asa-accent: #4f46e5;

  --asa-text: #334155;
  --asa-text-light: #64748b;

  --asa-bg-alt: #f8fafc;

  --asa-border: #e2e8f0;

  --asa-radius: 14px;

}


/* =====================================================
   CONTAINER
===================================================== */

.asa-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}


/* =====================================================
   HEADER / TOPBAR
===================================================== */

.asa-marketing-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--asa-border);

}

.asa-nav {

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}

.asa-menu-btn {

  width: 46px;
  height: 46px;

  border: 1px solid var(--asa-border);

  border-radius: 12px;

  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  color: var(--asa-brand);

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;

}

.asa-menu-btn:hover {

  background: #f8fafc;

  border-color: var(--asa-accent);

  box-shadow:
    0 6px 14px rgba(15,23,42,0.08);

}

.asa-menu-btn:active {

  transform: scale(0.96);

}

.asa-menu-btn i {

  font-size: 22px;

  line-height: 1;

}

.asa-brand {

  font-size: 26px;

  font-weight: 800;

  letter-spacing: -0.04em;

  color: var(--asa-brand);

  text-decoration: none;

}

.asa-nav-right {

  display: flex;

  align-items: center;

  gap: 12px;

}

.asa-menu-panel {

  display: none;

  padding-bottom: 18px;

}

.asa-menu-panel.open {

  display: block;

}

.asa-menu-stack {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.asa-menu-link {

  display: block;

  padding: 14px 16px;

  border: 1px solid var(--asa-border);

  border-radius: var(--asa-radius);

  text-decoration: none;

  font-weight: 600;

  color: var(--asa-text);

}

.asa-menu-link:hover {

  border-color: var(--asa-accent);

  color: var(--asa-accent);

}


.asa-section-soft {

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

}


.asa-hero {

  padding: 84px 0 56px;

}

.asa-hero-inner {

  max-width: 940px;

  margin: 0 auto;

  text-align: center;

}

.asa-hero-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 30px;

}

.asa-hero-badges {

  display: flex;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 18px;

}


.asa-title {

  font-size: clamp(2rem,4vw,4rem);

  font-weight: 800;

  color: var(--asa-brand);

}

.asa-subtitle {

  margin-top: 18px;

  margin-bottom: 24px;

  max-width: 760px;

  color: var(--asa-text-light);

  line-height: 1.7;

}

.asa-eyebrow {

  display: inline-flex;

  padding: 9px 18px;

  border-radius: 999px;

  background: #eef2ff;

  color: var(--asa-accent);

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.04em;

}

.asa-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 0 20px;

  border-radius: 12px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition: 0.2s;

}

.asa-btn.primary {

  background: var(--asa-accent);

  color: #ffffff;

}

.asa-btn.outline {

  background: #ffffff;

  border: 1px solid var(--asa-border);

  color: var(--asa-text);

}

.asa-split {

  display: grid;

  grid-template-columns:

    minmax(0,0.95fr)
    minmax(0,1.05fr);

  gap: 34px;

  align-items: center;

}

.asa-split.reverse {

  grid-template-columns:

    minmax(0,1.05fr)
    minmax(0,0.95fr);

}

.asa-card,
.asa-shot-card,
.asa-mobile-card,
.asa-final-card,
.asa-stat-card {

  background: #ffffff;

  border: 1px solid var(--asa-border);

  border-radius: 18px;

  box-shadow:
    0 14px 40px rgba(15,23,42,0.05);

}

.asa-card {

  padding: 28px;

}

.asa-shot-card {

  padding: 18px;

}

.asa-shot-frame {

  min-height: 340px;

  border: 1px dashed #cbd5e1;

  border-radius: 18px;

  background:

    linear-gradient(
      180deg,
      rgba(79,70,229,0.05),
      #ffffff
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 28px;

}

.asa-shot-caption {

  margin-top: 12px;

  font-size: 13px;

  color: var(--asa-text-light);

}

.asa-process-grid {

  display: grid;

  grid-template-columns:

    repeat(4,1fr);

  gap: 16px;

}

.asa-process-card {

  padding: 22px 20px;

  border: 1px solid var(--asa-border);

  border-radius: 18px;

  background: #ffffff;

  min-height: 220px;

}

.asa-process-index {

  width: 38px;

  height: 38px;

  border-radius: 12px;

  background: #eef2ff;

  color: var(--asa-accent);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  margin-bottom: 14px;

}


.asa-mobile-grid {

  display: grid;

  grid-template-columns:

    repeat(3,1fr);

  gap: 22px;

}

.asa-phone-shell {

  width: 100%;

  max-width: 240px;

  min-height: 430px;

  margin: 0 auto;

  padding: 18px;

  border-radius: 32px;

  border: 4px solid var(--asa-brand);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.asa-final-card {

  max-width: 920px;

  margin: 0 auto;

  padding: 34px 28px;

  text-align: center;

}

.asa-final-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 24px;

}


.asa-modal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.5);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: 16px;

}

.asa-modal.active {

  display: flex;

}

.asa-modal-box {

  width: 420px;

  max-width: 100%;

  background: #ffffff;

  border-radius: 12px;

  padding: 10px;

  overflow: hidden;

}


/* VARIANTE AUTH */

.asa-modal-auth {

  max-width: 560px;

}

.asa-auth-frame {

  width: 100%;

  min-height: 420px;

  border: none;

  background: #ffffff;

}


@media (max-width: 1024px) {

  .asa-split,
  .asa-split.reverse,
  .asa-process-grid,
  .asa-mobile-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 760px) {

  .asa-section {

    padding: 32px 0;

  }

  .asa-title {

    font-size: 2rem;

  }

}

.asa-modal-demo {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 32px;
  border-radius: 20px;
  overflow: visible;
}

.asa-modal-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--asa-brand);
  letter-spacing: -0.03em;
}

.asa-modal-subtitle {
  margin-top: 14px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--asa-text-light);
}

.asa-form-inline-demo {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.asa-form-inline-demo .asa-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.asa-form-inline-demo .asa-btn {
  flex: 0 0 auto;
  min-height: 52px;
  white-space: nowrap;
}

.asa-modal-demo .asa-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--asa-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--asa-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px) {
  .asa-modal-demo {
    padding: 24px;
  }

  .asa-modal-title {
    font-size: 30px;
  }

  .asa-form-inline-demo {
    flex-direction: column;
  }

  .asa-form-inline-demo .asa-btn {
    width: 100%;
  }
}

.asa-marketing-header .asa-btn {

  min-height: 40px;

  padding: 0 14px;

  font-size: 14px;

  border-radius: 10px;

  line-height: 1;

}


.asa-shot-frame {
  position: relative;
  overflow: hidden;
}

.asa-shot-img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;        /* preenche toda a área */
  object-position: center;  /* centraliza o corte */
}

.asa-container {

  max-width: 100%;

  margin: 0 auto;

  padding: 0 48px;

}

.asa-phone-shell {

  width: 100%;

  max-width: 320px;

  margin: 0 auto;

  padding: 0;

  border: none;

  border-radius: 0;

  background: transparent;

  display: block;

}

.asa-copy p {

  font-size: 18px;

  font-weight: 300;

  line-height: 1.7;

  text-align: left;

}

.asa-copy .asa-list-item {

  text-align: justify;

}

.asa-shot-img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 7px;

  border: 1px solid var(--asa-accent);

  box-shadow:
    0 18px 42px rgba(15,23,42,0.14);

}

.asa-mobile-card {

  width: 100%;

  max-width: 260px;

  margin: 0 auto;

  aspect-ratio: 9 / 16;

  background: #ffffff;

  border-radius: 7px;

  overflow: hidden;

  box-shadow:
    0 16px 36px rgba(15,23,42,0.12);

}

.asa-mobile-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.asa-mobile-card {

  width: 100%;

  max-width: 260px;

  margin: 0 auto;

  aspect-ratio: 9 / 16;

  background: #ffffff;

  border-radius: 7px;

  border: 1px solid var(--asa-accent);

  overflow: hidden;

  box-shadow:
    0 16px 36px rgba(15,23,42,0.12);

}

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

html,
body {
  height: 100%;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: #334155;
  background: #ffffff;
}



:root {

  --asa-brand: #1e293b;
  --asa-accent: #4f46e5;

  --asa-text: #334155;
  --asa-text-light: #64748b;

  --asa-bg-alt: #f8fafc;

  --asa-border: #e2e8f0;

  --asa-radius: 14px;

}


.asa-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}


.asa-marketing-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--asa-border);

}

.asa-nav {

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}


.asa-menu-btn {

  width: 46px;
  height: 46px;

  border: 1px solid var(--asa-border);

  border-radius: 12px;

  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  color: var(--asa-brand);

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;

}

.asa-menu-btn:hover {

  background: #f8fafc;

  border-color: var(--asa-accent);

  box-shadow:
    0 6px 14px rgba(15,23,42,0.08);

}

.asa-menu-btn:active {

  transform: scale(0.96);

}

.asa-menu-btn i {

  font-size: 22px;

  line-height: 1;

}

.asa-brand {

  font-size: 26px;

  font-weight: 800;

  letter-spacing: -0.04em;

  color: var(--asa-brand);

  text-decoration: none;

}

.asa-nav-right {

  display: flex;

  align-items: center;

  gap: 12px;

}

.asa-menu-panel {

  display: none;

  padding-bottom: 18px;

}

.asa-menu-panel.open {

  display: block;

}

.asa-menu-stack {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.asa-menu-link {

  display: block;

  padding: 14px 16px;

  border: 1px solid var(--asa-border);

  border-radius: var(--asa-radius);

  text-decoration: none;

  font-weight: 600;

  color: var(--asa-text);

}

.asa-menu-link:hover {

  border-color: var(--asa-accent);

  color: var(--asa-accent);

}



.asa-section {

  padding: 32px 0;

}

.asa-section-soft {

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

}



.asa-hero {

  padding: 84px 0 56px;

}

.asa-hero-inner {

  max-width: 940px;

  margin: 0 auto;

  text-align: center;

}

.asa-hero-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 30px;

}

.asa-hero-badges {

  display: flex;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 18px;

}



.asa-title {

  font-size: clamp(2rem,4vw,4rem);

  font-weight: 800;

  color: var(--asa-brand);

}

.asa-subtitle {

  margin-top: 18px;

  margin-bottom: 24px;

  max-width: 760px;

  color: var(--asa-text-light);

  line-height: 1.7;

}

.asa-eyebrow {

  display: inline-flex;

  padding: 9px 18px;

  border-radius: 999px;

  background: #eef2ff;

  color: var(--asa-accent);

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.04em;

}


.asa-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 0 20px;

  border-radius: 12px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition: 0.2s;

}

.asa-btn.primary {

  background: var(--asa-accent);

  color: #ffffff;

}

.asa-btn.outline {

  background: #ffffff;

  border: 1px solid var(--asa-border);

  color: var(--asa-text);

}


.asa-split {

  display: grid;

  grid-template-columns:

    minmax(0,0.95fr)
    minmax(0,1.05fr);

  gap: 34px;

  align-items: center;

}

.asa-split.reverse {

  grid-template-columns:

    minmax(0,1.05fr)
    minmax(0,0.95fr);

}


.asa-card,
.asa-shot-card,
.asa-mobile-card,
.asa-final-card,
.asa-stat-card {

  background: #ffffff;

  border: 1px solid var(--asa-border);

  border-radius: 7px;

  box-shadow:
    0 14px 40px rgba(15,23,42,0.05);

}

.asa-card {

  padding: 28px;

}

.asa-shot-card {

  padding: 18px;

}



.asa-shot-frame {

  min-height: 340px;

  border: 1px dashed #cbd5e1;

  border-radius: 18px;

  background:

    linear-gradient(
      180deg,
      rgba(79,70,229,0.05),
      #ffffff
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 28px;

}

.asa-shot-caption {

  margin-top: 12px;

  font-size: 13px;

  color: var(--asa-text-light);

}


.asa-process-grid {

  display: grid;

  grid-template-columns:

    repeat(4,1fr);

  gap: 16px;

}

.asa-process-card {

  padding: 22px 20px;

  border: 1px solid var(--asa-border);

  border-radius: 18px;

  background: #ffffff;

  min-height: 220px;

}

.asa-process-index {

  width: 38px;

  height: 38px;

  border-radius: 12px;

  background: #eef2ff;

  color: var(--asa-accent);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  margin-bottom: 14px;

}


.asa-mobile-grid {

  display: grid;

  grid-template-columns:

    repeat(3,1fr);

  gap: 22px;

}

.asa-phone-shell {

  width: 100%;

  max-width: 240px;

  min-height: 430px;

  margin: 0 auto;

  padding: 18px;

  border-radius: 32px;

  border: 4px solid var(--asa-brand);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.asa-final-card {

  max-width: 920px;

  margin: 0 auto;

  padding: 34px 28px;

  text-align: center;

}

.asa-final-actions {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 24px;

}


.asa-modal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.5);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: 16px;

}

.asa-modal.active {

  display: flex;

}

.asa-modal-box {

  width: 420px;

  max-width: 100%;

  background: #ffffff;

  border-radius: 12px;

  padding: 10px;

  overflow: hidden;

}


/* VARIANTE AUTH */

.asa-modal-auth {

  max-width: 560px;

}

.asa-auth-frame {

  width: 100%;

  min-height: 420px;

  border: none;

  background: #ffffff;

}


@media (max-width: 1024px) {

  .asa-split,
  .asa-split.reverse,
  .asa-process-grid,
  .asa-mobile-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 760px) {

  .asa-section {

    padding: 32px 0;

  }

  .asa-title {

    font-size: 2rem;

  }

}

.asa-modal-demo {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 32px;
  border-radius: 20px;
  overflow: visible;
}

.asa-modal-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--asa-brand);
  letter-spacing: -0.03em;
}

.asa-modal-subtitle {
  margin-top: 14px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--asa-text-light);
}

.asa-form-inline-demo {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.asa-form-inline-demo .asa-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.asa-form-inline-demo .asa-btn {
  flex: 0 0 auto;
  min-height: 52px;
  white-space: nowrap;
}

.asa-modal-demo .asa-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--asa-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--asa-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px) {
  .asa-modal-demo {
    padding: 24px;
  }

  .asa-modal-title {
    font-size: 30px;
  }

  .asa-form-inline-demo {
    flex-direction: column;
  }

  .asa-form-inline-demo .asa-btn {
    width: 100%;
  }
}


.asa-marketing-header .asa-btn {

  min-height: 40px;

  padding: 0 14px;

  font-size: 14px;

  border-radius: 10px;

  line-height: 1;

}

.asa-shot-frame {
  position: relative;
  overflow: hidden;
}

.asa-shot-img {
  width: 100%;
  height: 100%;
  display: block;

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

.asa-container {

  max-width: 100%;

  margin: 0 auto;

  padding: 0 48px;

}

.asa-phone-shell {

  width: 100%;

  max-width: 320px;

  margin: 0 auto;

  padding: 0;

  border: none;

  border-radius: 0;

  background: transparent;

  display: block;

}

.asa-copy p {

  font-size: 18px;

  font-weight: 300;

  line-height: 1.7;

  text-align: left;

}

.asa-copy .asa-list-item {

  text-align: justify;

}

.asa-shot-img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 7px;

  border: 1px solid var(--asa-accent);

  box-shadow:
    0 18px 42px rgba(15,23,42,0.14);

}

.asa-mobile-card {

  width: 100%;

  max-width: 260px;

  margin: 0 auto;

  aspect-ratio: 9 / 16;

  background: #ffffff;

  border-radius: 7px;

  overflow: hidden;

  box-shadow:
    0 16px 36px rgba(15,23,42,0.12);

}

.asa-mobile-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.asa-mobile-card {

  width: 100%;

  max-width: 260px;

  margin: 0 auto;

  aspect-ratio: 9 / 16;

  background: #ffffff;

  border-radius: 7px;

  border: 1px solid var(--asa-accent);

  overflow: hidden;

  box-shadow:
    0 16px 36px rgba(15,23,42,0.12);

}

@media (max-width: 760px) {

  .asa-container {
    padding: 0 18px;
  }

  .asa-hero {
    padding: 48px 0 36px;
  }

  .asa-title {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .asa-subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 14px;
  }

  .asa-eyebrow {
    font-size: 13px;
    padding: 7px 14px;
  }

  .asa-copy p {
    font-size: 16px;
    line-height: 1.65;
  }

}


@media (max-width: 760px) {

  .asa-hero-inner {
    max-width: 100%;
    text-align: left;
  }

  .asa-title {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .asa-subtitle,
  .asa-copy p {
    text-align: left;
  }

  .asa-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
  }

}

@media (max-width: 768px) {

  .asa-split.reverse {
    flex-direction: column;
  }

  .asa-split.reverse .asa-shot-img {
    order: 2;
  }

  .asa-split.reverse .asa-copy {
    order: 1;
  }

}

#motor {
    padding-top: 32px;
}


@media (max-width: 768px) {

  #motor {
    padding-top: 24px;
    padding-bottom: 16px;
  }

}

@media (max-width: 768px) {

    .asa-mobile-card {
        max-width: 100%;
    }

    .asa-mobile-img {
        width: 100%;
    }

}

.asa-title-mobile {
    text-align: center;
}