/* ==========================================================================
   Pricing page (Figma "Pricing" 198:5348): Hero 443:3240, Integrations 460:4588, Plans 443:3312,
   Guarantee 460:7698, FAQ 460:7905. Every section sits in the 1600px framed column (.frame in styles.css)
   and starts with a dashed line across it (.frame--top) with a dot on each crossing.
   ========================================================================== */

/* Hero: the shared page hero (styles.css), with a 680px title box and a 430px subtitle */
.page-hero--pricing { --title-w: 12.1429em; --subtitle-w: 430px; }

/* --------------------------------------------------------------------------
   Integrations: "Funciona nas IA's..." on the left, the tool logos looping on the right (968px wide at 2560px)
   -------------------------------------------------------------------------- */
.integrations { padding-inline: var(--frame-gutter); }
.integrations__frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 31px var(--frame-pad) 30px; /* 30px + the 1px top line: 115px tall */
}
.integrations__title {
  flex-shrink: 0;
  width: 196px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--gray-50);
}
.integrations__marquee {
  flex: 0 1 968px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.integrations__track {
  display: flex;
  width: max-content;
  animation: integrations-loop 40s linear infinite;
}
.integrations__list {
  display: flex;
  align-items: center;
  gap: 62px;
  margin: 0;
  padding: 0 62px 0 0;
  list-style: none;
}
/* Placeholder wordmarks until the grey logos arrive (Figma logos: 27px tall, 59% opacity) */
.integrations__logo {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.02em;
  color: rgba(247, 247, 247, 0.59);
  white-space: nowrap;
}
@keyframes integrations-loop {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Plans: max 1300px, 3 columns 16px apart; each column = card + Black November note (12px below)
   -------------------------------------------------------------------------- */
.plans-section { padding-inline: var(--frame-gutter); }
.plans-section__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 25px var(--frame-pad) 24px;
}
.plans__status {
  width: 100%;
  max-width: 1300px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--glass-10);
  border-radius: 14px;
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
.plans__status[hidden] { display: none; }

.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1300px;
}
.plan-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Card (Figma Plan 5): #0a0a0a, 30px corners, 30px inside the 1px line */
.plan {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--glass-10);
  border-radius: 30px;
  background: var(--gray-950);
}
/* Figma Frame 72: 188px block with the 3D logo of the plan, 262px and centred, coming out slightly over the top of the card.
   The image has 20px of transparent margin at this size, so -62px leaves the logo itself 11px above the card. */
.plan__space {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  height: 188px;
}
.plan__logo {
  position: relative;
  z-index: 1; /* over the moving border of the Vitalício card */
  flex-shrink: 0;
  width: 262px;
  height: 262px;
  margin-top: -62px;
  pointer-events: none;
}

.plan__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* The dashed lines between name, price and list: 1px, then 32px */
.plan__price-block,
.plan__features {
  padding-top: 33px;
  background: var(--dash-x) left top / 4px 1px repeat-x;
}

.plan__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan__name {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--gray-50);
}
.plan__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}
/* Vitalício: name + "Mais vantajoso" box (Figma Frame 95, 608:4752) */
.plan__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.plan__tag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--glass-10);
  border-radius: 16px;
  background: var(--gray-900);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-50);
  white-space: nowrap;
}

.plan__price-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Original price struck through, with the real % off in a small orange box */
.plan__was {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--gray-500);
}
.plan__was s { text-decoration-thickness: 1px; }
.plan__off {
  padding: 2px 8px;
  border: 1px solid rgba(230, 90, 52, 0.3);
  border-radius: 12px;
  background: rgba(230, 90, 52, 0.16);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #e65a34;
}
.plan__price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
.plan__cur {
  align-self: flex-end;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.24px;
  color: var(--gray-500);
}
/* White fading towards the top right (Figma gradient on the number) */
.plan__amount {
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1.12px;
  background: linear-gradient(29deg, #f7f7f7 35%, rgba(247, 247, 247, 0.05) 136%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.plan__period {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-500);
}
.plan__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}

/* Feature list: check in a small blue-grey box */
.plan__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding-inline: 0;
  list-style: none;
}
.feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
.feature__check {
  display: grid;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(109, 140, 164, 0.56), rgba(109, 140, 164, 0.24));
  box-shadow: inset 0 0 0 1px rgba(109, 140, 164, 0.4);
}

/* Button at the bottom of the card. Pro and Prime: .btn-glass (styles.css). Vitalício: silver. */
.plan__cta { margin-top: auto; }
.btn-glass:disabled, .btn-upgrade:disabled { cursor: default; opacity: 0.7; }
.btn-upgrade {
  width: 100%;
  padding: 16px 22px;
  border: 1.5px solid var(--glass-10);
  border-radius: 14px;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-950);
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.btn-upgrade:hover { filter: brightness(1.06); }
.btn-upgrade:active { transform: scale(0.99); }

/* Black November note under each card: dashed box, gift icon, text */
.plan-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 21px;
  border-radius: 24px;
  background: url("../assets/img/dashed-box-24.svg") center / 100% 100% no-repeat;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-400);
}
.plan-note > span { max-width: 320px; }
.plan-note strong { font-weight: 400; color: var(--gray-50); }

/* Vitalício: coloured shell (orange, white, teal, navy), 42px showing above the card; the card inside has the hero
   gradient and the white beams running around it (the Figma's blue line is replaced by the beams, as everywhere) */
.plan-shell {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 42px 2px 2px;
  border-radius: 30px;
  background: url("../assets/img/plan-lifetime-shell.svg") center / 100% 100% no-repeat;
}
/* Figma: the logo goes 49px higher here (over the shell) and the name sits 4px under the block, not 32px */
.plan--featured .plan__space { margin-bottom: -28px; }
.plan--featured .plan__logo { margin-top: -111px; }
.plan--featured {
  border-color: transparent;
  border-radius: 28px;
  background: url("../assets/img/plan-lifetime-glow.svg") center / 100% 100% no-repeat, var(--gray-950);
}
.plan--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 40deg,
    rgba(229, 238, 244, 0.35) 70deg,
    #f4f9fc 95deg,
    rgba(229, 238, 244, 0.35) 120deg,
    transparent 150deg,
    transparent 220deg,
    rgba(229, 238, 244, 0.3) 250deg,
    #e5eef4 275deg,
    rgba(229, 238, 244, 0.3) 300deg,
    transparent 330deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: card-beam 3.2s linear infinite;
}

/* --------------------------------------------------------------------------
   Guarantee: left panel 759 / right 839 (of 1600), 454px tall
   -------------------------------------------------------------------------- */
.guarantee { padding-inline: var(--frame-gutter); }
.guarantee__frame {
  display: grid;
  grid-template-columns: 759fr 839fr;
  padding: 1px 1px 0; /* inside the lines */
}
/* Hero gradient + a fine dot texture (small dots like the footer, instead of the Figma's big pattern) + the seal */
.guarantee__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 454px;
  padding: 40px;
  overflow: hidden;
  background:
    var(--dot-texture) center / 12px 12px,
    url("../assets/img/guarantee-bg.svg") center / 100% 100% no-repeat;
}
.guarantee__seal { width: 289px; max-width: 100%; height: auto; }
.guarantee__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 40px;
  text-align: center;
}
.guarantee__title {
  margin: 0;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--gray-50);
}
.guarantee__desc {
  max-width: 270px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-400);
}
.guarantee__desc span { color: var(--gray-50); }

/* --------------------------------------------------------------------------
   FAQ: list max 1000px
   -------------------------------------------------------------------------- */
.faq { padding-inline: var(--frame-gutter); }
.faq__frame {
  display: flex;
  justify-content: center;
  padding: 61px var(--frame-pad) 60px;
}
.faq__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1000px;
}
.faq__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 552px;
  max-width: 100%;
  text-align: center;
}
.faq__badge {
  padding: 6px 10px;
  border: 1px solid var(--glass-10);
  border-radius: 17px;
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
.faq__title {
  margin: 0;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--gray-50);
}
.faq__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-400);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Closed card: solid #0a0a0a. Open card: no fill (Figma). */
.faq-item {
  overflow: hidden;
  border: 1px solid var(--glass-10);
  border-radius: 24px;
  background: var(--gray-950);
  transition: background-color 0.35s ease;
}
.faq-item.is-open { background: transparent; }

.faq-item__heading { margin: 0; }
.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: 0;
  background: none;
  text-align: left;
}
.faq-item__trigger:focus-visible { outline-offset: -2px; border-radius: 24px; }
.faq-item__question {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--gray-50);
}
.faq-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-10);
  border-radius: 10px;
  background: var(--glass-5);
  transition: background-color 0.2s ease;
}
.faq-item__trigger:hover .faq-item__icon { background: var(--glass-10); }
.faq-item__icon img {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.faq-item.is-open .faq-item__icon img { transform: rotate(-45deg); }

/* Height animation: 0fr -> 1fr */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-item__answer {
  max-width: 740px; /* 700px of text + 20px padding on each side */
  margin: -4px 0 0; /* 16px below the question, like Figma */
  padding: 0 20px 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-400);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.faq-item.is-open .faq-item__answer { opacity: 1; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* One column: 32px between plans, so each logo clears the Black November note of the plan above */
  .plans__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 560px; }
}

@media (max-width: 900px) {
  .guarantee__frame { grid-template-columns: minmax(0, 1fr); }
  .guarantee__art { min-height: 380px; }
  .guarantee__seal { width: 240px; }
}

@media (max-width: 768px) {
  .integrations__frame { flex-direction: column; align-items: stretch; gap: 20px; padding-block: 25px 24px; }
  .integrations__title { width: auto; text-align: center; }
  .integrations__marquee { flex: none; }
  .plan { padding: 24px; }
  .plan__space { height: 120px; }
  .plan__logo { width: 180px; height: 180px; margin-top: -48px; }
  .plan--featured .plan__logo { margin-top: -98px; }
  .plan__amount { font-size: 48px; letter-spacing: -0.96px; }
  .guarantee__title { font-size: 32px; letter-spacing: -0.64px; }
  .faq__frame { padding-top: 49px; padding-bottom: 48px; }
  .faq__title { font-size: 44px; letter-spacing: -0.88px; }
  .faq-item__question { font-size: 18px; }
}

@media (max-width: 480px) {
  .faq__title { font-size: 36px; letter-spacing: -0.72px; }
  .faq-item__trigger { padding: 16px; }
  .faq-item__answer { padding: 0 16px 16px; }
  .guarantee__art { min-height: 320px; padding: 32px; }
  .guarantee__seal { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .integrations__track { animation: none; }
  .faq-item__panel { transition: none; }
  .plan--featured::before { animation: none; display: none; }
  .plan--featured { border-color: rgba(229, 238, 244, 0.45); }
}

/* Pro and Prime buttons: same look as the "Copiar prompt" button of the card (css/card.css): dark glass fill and the
   orange / blue-white beam running around the edge, always (--beam-angle and card-beam come from styles.css) */
.btn-beam {
  position: relative;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 47%, rgba(247, 247, 247, 0.05) 196%);
  box-shadow: inset 0 0 0 1.5px rgba(247, 247, 247, 0.06);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 30deg,
    rgba(230, 90, 52, 0.25) 55deg,
    #e65a34 85deg,
    #e49782 105deg,
    rgba(228, 151, 130, 0.2) 130deg,
    transparent 155deg,
    transparent 210deg,
    rgba(41, 84, 107, 0.4) 235deg,
    #29546b 255deg,
    #e5eef4 280deg,
    rgba(229, 238, 244, 0.2) 305deg,
    transparent 330deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: card-beam 3.2s linear infinite;
}
.btn-beam:hover { background-color: rgba(247, 247, 247, 0.04); }
.btn-beam:active { transform: scale(0.995); }
@media (prefers-reduced-motion: reduce) {
  .btn-beam::before {
    animation: none;
    background: linear-gradient(97deg, #e65a34 5.65%, #e49782 17.5%, rgba(11, 11, 21, 0) 49.52%, #e5eef4 88.95%, #29546b 100%);
  }
}