/**
 * [B] Baqueiro Store · Content components.
 *
 * The sections of the store pages edited with [B] Visual Editor: the same components
 * as the [B] Baqueiro theme of the main site (light version), so the section library
 * of the editor looks the same here.
 */

/* Icons: Phosphor Bold as CSS masks (MIT, see icons/LICENSE-phosphor.txt).
   Markup: <span class="bq-icon" data-icon="code" aria-hidden="true"></span> */

.bq-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--bq-icon) center / contain no-repeat;
  mask: var(--bq-icon) center / contain no-repeat;
  vertical-align: middle;
}

.icon-chip .bq-icon {
  width: 30px;
  height: 30px;
}

/* Page body. */

.store-page > .section:first-child:not(.alt) {
  padding-top: 72px;
}

.section.compact {
  padding: 32px 0;
}

.section-end {
  margin-top: 40px;
}

.eyebrow + h1,
.eyebrow + h2 {
  margin-top: 0;
}

.section .section-head + h3,
.section .cards h3,
.section div.steps h3,
.section .faq-grid h3 {
  margin-top: 0;
}

h2.h3 {
  font-size: var(--bq-text-h3);
}

/* Two columns. */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.split h2 {
  max-width: 570px;
}

/* Cards. */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cards.cols-1 {
  grid-template-columns: 1fr;
  max-width: 820px;
}

.cards.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plain-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--bq-shadow);
}

.plain-card .icon-chip {
  margin-bottom: 20px;
}

.plain-card h3 {
  margin-bottom: 12px;
}

.plain-card h4 {
  margin: 20px 0 8px;
  font-size: 1rem;
  color: var(--bq-navy-700);
}

.plain-card p {
  font-size: 1rem;
}

.plain-card .check-list {
  margin: 16px 0 0;
}

.plain-card .check-list li {
  margin-bottom: 10px;
  font-size: .9375rem;
}

.plain-card .tags {
  margin-top: 12px;
}

.plain-card .card-link,
.plain-card .actions {
  margin-top: 16px;
}

.plain-card .actions .card-link {
  margin-top: 0;
}

.plain-card.featured {
  border: 2px solid var(--bq-gold-400);
}

.plain-card.testimonial p:first-of-type {
  font-size: 1.0625rem;
  font-style: italic;
}

.plain-card.testimonial .small,
.plain-card.testimonial p:last-child {
  color: var(--bq-neutral-600);
  font-style: normal;
}

.card-link {
  margin-top: auto;
  color: var(--bq-link);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags > span,
.tags > a {
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--bq-navy-50);
  color: var(--bq-navy-700);
  font-size: .875rem;
}

/* Steps with numbers (the store home uses the ordered-list variant, ol.steps). */

div.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

div.steps.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

div.steps h3 {
  padding-top: 24px;
  border-top: 1px solid var(--bq-border);
}

div.steps p {
  font-size: 1rem;
  color: var(--bq-neutral-600);
}

.step-number {
  display: block;
  margin-bottom: 24px;
  font: 600 1rem var(--bq-font-mono);
  color: var(--bq-gold-700);
}

div.steps .check-list {
  margin: 16px 0 0;
}

div.steps .check-list li {
  margin-bottom: 8px;
  font-size: .9375rem;
}

/* Lists. */

.check-list {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 24px;
}

.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--bq-navy-700);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 48px;
  max-width: 980px;
}

.link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 24px;
}

.link-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--bq-border);
  border-radius: var(--bq-radius-pill);
  background: #fff;
  color: var(--bq-navy-700);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.link-grid a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bq-gold-400);
}

.link-grid a:hover {
  border-color: var(--bq-navy-400);
  background: var(--bq-navy-50);
}

/* Questions next to a heading (the store home uses .faq-list). */

.faq-grid > div:not(.section-head) > details {
  padding: 24px 0;
  border-bottom: 1px solid var(--bq-border);
}

.faq-grid > div:not(.section-head) > details:first-child {
  border-top: 1px solid var(--bq-border);
}

/* Case study, table, callout and closing call. */

.case-study {
  max-width: 860px;
  padding: 40px;
  border-left: 4px solid var(--bq-gold-400);
  border-radius: var(--bq-radius-md);
  background: #fff;
  box-shadow: var(--bq-shadow);
}

.case-study h3 + h3 {
  margin-top: 24px;
  font-size: 1.1875rem;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--bq-border);
  border-radius: var(--bq-radius-md);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.table-wrap th,
.table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bq-border);
  text-align: left;
  vertical-align: top;
}

/* Header: the thead, or the first row of a table written without one. */
.table-wrap thead th,
.table-wrap tbody:first-child tr:first-child th,
.table-wrap tbody:first-child tr:first-child td {
  background: var(--bq-navy-50);
  color: var(--bq-navy-700);
  font-weight: 600;
}

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  border-radius: var(--bq-radius-md);
  background: var(--bq-navy-700);
  color: #fff;
}

.callout h2 {
  margin-bottom: 8px;
  font-size: var(--bq-text-h3);
  color: #fff;
}

.callout p {
  margin-bottom: 0;
  color: var(--bq-navy-100);
}

.callout .actions {
  flex-shrink: 0;
  margin-top: 0;
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  border-top: 1px solid var(--bq-navy-100);
  background: var(--bq-navy-50);
  color: var(--bq-text);
}

.final-cta::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 3%;
  width: 48px;
  height: 210px;
  background: var(--bq-navy-200);
  -webkit-mask: url('../icons/bracket-direito.svg') center / contain no-repeat;
  mask: url('../icons/bracket-direito.svg') center / contain no-repeat;
  pointer-events: none;
}

.final-cta .container > div {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.final-cta h2 {
  font-size: var(--bq-text-h1);
  color: var(--bq-navy-700);
  text-wrap: balance;
}

.final-cta p {
  max-width: 620px;
  color: var(--bq-neutral-600);
}

.final-cta .eyebrow {
  color: var(--bq-gold-700);
}

/* Live blocks of the store (catalog data inside a page). */

.store-block + .section-end {
  margin-top: 32px;
}

@media (max-width: 1100px) {
  .split {
    gap: 48px;
  }

  .cards,
  .cards.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  div.steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

@media (max-width: 767px) {
  .store-page > .section:first-child:not(.alt) {
    padding-top: 48px;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cards,
  .cards.cols-2,
  .cards.cols-4,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .plain-card {
    padding: 24px;
  }

  div.steps,
  div.steps.three {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  div.steps > div {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 16px;
  }

  div.steps .step-number {
    grid-row: 1 / 3;
  }

  div.steps h3 {
    margin-bottom: 12px;
    padding: 0;
    border: 0;
  }

  div.steps p {
    grid-column: 2;
  }

  .callout {
    flex-direction: column;
    align-items: start;
    padding: 24px;
  }

  .case-study {
    padding: 24px;
  }

  .final-cta {
    padding: 64px 0;
  }

  .final-cta::after {
    top: 24%;
    right: -20px;
    height: 160px;
    opacity: .6;
  }

  .final-cta h2 {
    max-width: 80%;
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .table-wrap table {
    font-size: .8125rem;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 10px 8px;
  }
}

@media print {
  .final-cta,
  .callout .actions {
    display: none;
  }

  .plain-card {
    border: 1px solid var(--bq-border);
    box-shadow: none;
    break-inside: avoid;
  }
}

/* Icons inside the store blocks written as content. */

.proof-item .bq-icon {
  width: 28px;
  height: 28px;
  color: var(--bq-navy-700);
}

.btn .bq-icon {
  width: 1.125em;
  height: 1.125em;
}

/* Icon set (one rule per icon of assets/icons). */

.bq-icon[data-icon="archive-box"] {
  --bq-icon: url('../icons/archive-box-bold.svg');
}

.bq-icon[data-icon="arrow-circle-right"] {
  --bq-icon: url('../icons/arrow-circle-right-bold.svg');
}

.bq-icon[data-icon="arrow-right"] {
  --bq-icon: url('../icons/arrow-right-bold.svg');
}

.bq-icon[data-icon="arrow-square-out"] {
  --bq-icon: url('../icons/arrow-square-out-bold.svg');
}

.bq-icon[data-icon="article"] {
  --bq-icon: url('../icons/article-bold.svg');
}

.bq-icon[data-icon="book-open"] {
  --bq-icon: url('../icons/book-open-bold.svg');
}

.bq-icon[data-icon="books"] {
  --bq-icon: url('../icons/books-bold.svg');
}

.bq-icon[data-icon="browser"] {
  --bq-icon: url('../icons/browser-bold.svg');
}

.bq-icon[data-icon="calendar-check"] {
  --bq-icon: url('../icons/calendar-check-bold.svg');
}

.bq-icon[data-icon="castle-turret"] {
  --bq-icon: url('../icons/castle-turret-bold.svg');
}

.bq-icon[data-icon="chalkboard-teacher"] {
  --bq-icon: url('../icons/chalkboard-teacher-bold.svg');
}

.bq-icon[data-icon="chart-bar"] {
  --bq-icon: url('../icons/chart-bar-bold.svg');
}

.bq-icon[data-icon="chart-line-up"] {
  --bq-icon: url('../icons/chart-line-up-bold.svg');
}

.bq-icon[data-icon="chat-circle-dots"] {
  --bq-icon: url('../icons/chat-circle-dots-bold.svg');
}

.bq-icon[data-icon="chat-teardrop-dots"] {
  --bq-icon: url('../icons/chat-teardrop-dots-bold.svg');
}

.bq-icon[data-icon="check"] {
  --bq-icon: url('../icons/check-bold.svg');
}

.bq-icon[data-icon="check-circle"] {
  --bq-icon: url('../icons/check-circle-bold.svg');
}

.bq-icon[data-icon="code"] {
  --bq-icon: url('../icons/code-bold.svg');
}

.bq-icon[data-icon="compass"] {
  --bq-icon: url('../icons/compass-bold.svg');
}

.bq-icon[data-icon="cpu"] {
  --bq-icon: url('../icons/cpu-bold.svg');
}

.bq-icon[data-icon="credit-card"] {
  --bq-icon: url('../icons/credit-card-bold.svg');
}

.bq-icon[data-icon="cursor-click"] {
  --bq-icon: url('../icons/cursor-click-bold.svg');
}

.bq-icon[data-icon="database"] {
  --bq-icon: url('../icons/database-bold.svg');
}

.bq-icon[data-icon="device-mobile"] {
  --bq-icon: url('../icons/device-mobile-bold.svg');
}

.bq-icon[data-icon="download-simple"] {
  --bq-icon: url('../icons/download-simple-bold.svg');
}

.bq-icon[data-icon="envelope-simple"] {
  --bq-icon: url('../icons/envelope-simple-bold.svg');
}

.bq-icon[data-icon="file-text"] {
  --bq-icon: url('../icons/file-text-bold.svg');
}

.bq-icon[data-icon="fire-extinguisher"] {
  --bq-icon: url('../icons/fire-extinguisher-bold.svg');
}

.bq-icon[data-icon="funnel"] {
  --bq-icon: url('../icons/funnel-bold.svg');
}

.bq-icon[data-icon="gauge"] {
  --bq-icon: url('../icons/gauge-bold.svg');
}

.bq-icon[data-icon="git-diff"] {
  --bq-icon: url('../icons/git-diff-bold.svg');
}

.bq-icon[data-icon="globe-hemisphere-east"] {
  --bq-icon: url('../icons/globe-hemisphere-east-bold.svg');
}

.bq-icon[data-icon="handshake"] {
  --bq-icon: url('../icons/handshake-bold.svg');
}

.bq-icon[data-icon="headphones"] {
  --bq-icon: url('../icons/headphones-bold.svg');
}

.bq-icon[data-icon="heart"] {
  --bq-icon: url('../icons/heart-bold.svg');
}

.bq-icon[data-icon="image"] {
  --bq-icon: url('../icons/image-bold.svg');
}

.bq-icon[data-icon="info"] {
  --bq-icon: url('../icons/info-bold.svg');
}

.bq-icon[data-icon="leaf"] {
  --bq-icon: url('../icons/leaf-bold.svg');
}

.bq-icon[data-icon="lightbulb"] {
  --bq-icon: url('../icons/lightbulb-bold.svg');
}

.bq-icon[data-icon="link"] {
  --bq-icon: url('../icons/link-bold.svg');
}

.bq-icon[data-icon="list"] {
  --bq-icon: url('../icons/list-bold.svg');
}

.bq-icon[data-icon="lock-key"] {
  --bq-icon: url('../icons/lock-key-bold.svg');
}

.bq-icon[data-icon="magic-wand"] {
  --bq-icon: url('../icons/magic-wand-bold.svg');
}

.bq-icon[data-icon="magnet"] {
  --bq-icon: url('../icons/magnet-bold.svg');
}

.bq-icon[data-icon="magnifying-glass"] {
  --bq-icon: url('../icons/magnifying-glass-bold.svg');
}

.bq-icon[data-icon="map-pin"] {
  --bq-icon: url('../icons/map-pin-bold.svg');
}

.bq-icon[data-icon="map-trifold"] {
  --bq-icon: url('../icons/map-trifold-bold.svg');
}

.bq-icon[data-icon="paint-brush-broad"] {
  --bq-icon: url('../icons/paint-brush-broad-bold.svg');
}

.bq-icon[data-icon="pen-nib"] {
  --bq-icon: url('../icons/pen-nib-bold.svg');
}

.bq-icon[data-icon="phone"] {
  --bq-icon: url('../icons/phone-bold.svg');
}

.bq-icon[data-icon="plant"] {
  --bq-icon: url('../icons/plant-bold.svg');
}

.bq-icon[data-icon="play-circle"] {
  --bq-icon: url('../icons/play-circle-bold.svg');
}

.bq-icon[data-icon="plugs"] {
  --bq-icon: url('../icons/plugs-bold.svg');
}

.bq-icon[data-icon="plugs-connected"] {
  --bq-icon: url('../icons/plugs-connected-bold.svg');
}

.bq-icon[data-icon="presentation-chart"] {
  --bq-icon: url('../icons/presentation-chart-bold.svg');
}

.bq-icon[data-icon="puzzle-piece"] {
  --bq-icon: url('../icons/puzzle-piece-bold.svg');
}

.bq-icon[data-icon="question"] {
  --bq-icon: url('../icons/question-bold.svg');
}

.bq-icon[data-icon="robot"] {
  --bq-icon: url('../icons/robot-bold.svg');
}

.bq-icon[data-icon="rocket-launch"] {
  --bq-icon: url('../icons/rocket-launch-bold.svg');
}

.bq-icon[data-icon="scan"] {
  --bq-icon: url('../icons/scan-bold.svg');
}

.bq-icon[data-icon="seal-check"] {
  --bq-icon: url('../icons/seal-check-bold.svg');
}

.bq-icon[data-icon="selection-all"] {
  --bq-icon: url('../icons/selection-all-bold.svg');
}

.bq-icon[data-icon="shield"] {
  --bq-icon: url('../icons/shield-bold.svg');
}

.bq-icon[data-icon="shield-check"] {
  --bq-icon: url('../icons/shield-check-bold.svg');
}

.bq-icon[data-icon="shield-warning"] {
  --bq-icon: url('../icons/shield-warning-bold.svg');
}

.bq-icon[data-icon="shopping-bag"] {
  --bq-icon: url('../icons/shopping-bag-bold.svg');
}

.bq-icon[data-icon="shopping-cart"] {
  --bq-icon: url('../icons/shopping-cart-bold.svg');
}

.bq-icon[data-icon="sparkle"] {
  --bq-icon: url('../icons/sparkle-bold.svg');
}

.bq-icon[data-icon="squares-four"] {
  --bq-icon: url('../icons/squares-four-bold.svg');
}

.bq-icon[data-icon="stack"] {
  --bq-icon: url('../icons/stack-bold.svg');
}

.bq-icon[data-icon="star"] {
  --bq-icon: url('../icons/star-bold.svg');
}

.bq-icon[data-icon="storefront"] {
  --bq-icon: url('../icons/storefront-bold.svg');
}

.bq-icon[data-icon="syringe"] {
  --bq-icon: url('../icons/syringe-bold.svg');
}

.bq-icon[data-icon="timer"] {
  --bq-icon: url('../icons/timer-bold.svg');
}

.bq-icon[data-icon="translate"] {
  --bq-icon: url('../icons/translate-bold.svg');
}

.bq-icon[data-icon="trophy"] {
  --bq-icon: url('../icons/trophy-bold.svg');
}

.bq-icon[data-icon="users"] {
  --bq-icon: url('../icons/users-bold.svg');
}

.bq-icon[data-icon="users-four"] {
  --bq-icon: url('../icons/users-four-bold.svg');
}

.bq-icon[data-icon="users-three"] {
  --bq-icon: url('../icons/users-three-bold.svg');
}

.bq-icon[data-icon="video-camera"] {
  --bq-icon: url('../icons/video-camera-bold.svg');
}

.bq-icon[data-icon="warning"] {
  --bq-icon: url('../icons/warning-bold.svg');
}

.bq-icon[data-icon="whatsapp-logo"] {
  --bq-icon: url('../icons/whatsapp-logo-bold.svg');
}

.bq-icon[data-icon="wrench"] {
  --bq-icon: url('../icons/wrench-bold.svg');
}

.bq-icon[data-icon="x"] {
  --bq-icon: url('../icons/x-bold.svg');
}