/*
 * Candidata opt-in de Como funciona + FAQ.
 * Sem ?como-funciona-responsive=1, estas regras nao atuam.
 * Telefone, tablet retrato e desktop aprovado permanecem geometricamente iguais.
 */

html.hero-responsive-lab.prova-responsive-lab.artista-responsive-lab.marcas-responsive-lab.como-funciona-responsive-lab.coherence-lab body::before {
  content: "TESTE \00b7  COMO FUNCIONA RESPONSIVA";
}

html.como-funciona-responsive-lab .process-faq__accordion summary:focus-visible {
  outline: 3px solid #d3a25c;
  outline-offset: -5px;
}

/*
 * A regra anterior empilhava 1024x768 e 1100x800 como retrato. Esta faixa usa
 * a composicao horizontal ja aprovada, recalibrada apenas para tablet paisagem.
 */
@media (min-width: 900px) and (max-width: 1100px) and (min-height: 700px) and (orientation: landscape) {
  html.como-funciona-responsive-lab .process-faq {
    background:
      linear-gradient(90deg, var(--process-faq-paper) 0 78%, #100a09 78% 100%);
  }

  html.como-funciona-responsive-lab .process-faq__canvas {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    background: #100a09;
  }

  html.como-funciona-responsive-lab .process-faq__paper {
    inset: 0 22% 0 0;
  }

  html.como-funciona-responsive-lab .process-faq__media {
    inset: 0 0 0 auto;
    width: 22%;
    opacity: 1;
  }

  html.como-funciona-responsive-lab .process-faq__media img {
    object-position: 61% 50%;
  }

  html.como-funciona-responsive-lab .process-faq__media::before {
    background:
      linear-gradient(90deg, rgba(10, 6, 6, .48), transparent 30%),
      linear-gradient(180deg, rgba(8, 5, 5, .08), transparent 44%, rgba(8, 5, 5, .18));
  }

  html.como-funciona-responsive-lab .process-faq__media::after {
    inset: 0 min(4.1cqw, 7.2dvh) min(3.4cqw, 5.97dvh) auto;
    width: min(4.1cqw, 7.2dvh);
    border-bottom-right-radius: min(4.4cqw, 7.73dvh);
  }

  html.como-funciona-responsive-lab .process-faq__media-orbit {
    right: min(4.1cqw, 7.2dvh);
    height: 48%;
  }

  html.como-funciona-responsive-lab .process-faq__media-star {
    right: calc(min(4.1cqw, 7.2dvh) - min(.87cqw, 1.53dvh));
    width: min(2.06cqw, 3.61dvh);
  }

  html.como-funciona-responsive-lab .process-faq__process,
  html.como-funciona-responsive-lab .process-faq__faq-column {
    position: absolute;
    margin: 0;
  }

  html.como-funciona-responsive-lab .process-faq__process {
    top: 6.6%;
    bottom: 5.35%;
    left: 4.2%;
    display: flex;
    width: 41.5%;
    flex-direction: column;
  }

  html.como-funciona-responsive-lab .process-faq__faq-column {
    top: 10.5%;
    bottom: 1.45%;
    left: 47%;
    display: flex;
    width: 38.5%;
    flex-direction: column;
  }

  html.como-funciona-responsive-lab .process-faq__eyebrow {
    width: 88%;
    font-size: max(10px, min(.96cqw, 1.69dvh));
  }

  html.como-funciona-responsive-lab .process-faq__eyebrow > i {
    margin-inline: min(1.55cqw, 2.72dvh);
  }

  html.como-funciona-responsive-lab .process-faq__eyebrow .process-faq__star {
    width: min(1.45cqw, 2.55dvh);
  }

  html.como-funciona-responsive-lab .process-faq__intro h2 {
    max-width: none;
    margin-top: 5.36dvh;
    font-size: min(4.35cqw, 7.64dvh);
  }

  html.como-funciona-responsive-lab .process-faq__intro > p:last-child {
    margin-top: 2.9dvh;
    font-size: min(1.48cqw, 2.6dvh);
  }

  html.como-funciona-responsive-lab .process-faq__steps {
    --process-step-size: min(4.586cqw, 8.056dvh);
    --process-step-bridge: min(2.25cqw, 3.95dvh);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    min-height: 0;
    flex: 1 1 auto;
    gap: 0;
    margin-top: 4.04dvh;
  }

  html.como-funciona-responsive-lab .process-faq__steps li {
    min-height: 0;
  }

  html.como-funciona-responsive-lab .process-faq__step-number {
    font-size: min(1.898cqw, 3.334dvh);
  }

  html.como-funciona-responsive-lab .process-faq__step-copy {
    padding-left: min(1.265cqw, 2.223dvh);
  }

  html.como-funciona-responsive-lab .process-faq__step-copy h3 {
    font-size: min(1.66cqw, 2.917dvh);
  }

  html.como-funciona-responsive-lab .process-faq__step-copy p {
    margin-top: 1.125dvh;
    font-size: min(1.107cqw, 1.945dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  html.como-funciona-responsive-lab .process-faq__accordion-header {
    min-height: 0;
    flex: 0 0 13.611dvh;
    gap: min(1.9cqw, 3.334dvh);
    padding: 4.303dvh min(3.05cqw, 5.357dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion-header h3 {
    font-size: min(2.3cqw, 4.04dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion-header > span {
    width: min(1.45cqw, 2.55dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion details {
    --process-faq-summary-height: 10.556dvh;
    min-height: 0;
    flex: 0 0 auto;
  }

  html.como-funciona-responsive-lab .process-faq__accordion details[open] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  html.como-funciona-responsive-lab .process-faq__accordion summary {
    min-height: 0;
    flex: 0 0 auto;
    gap: min(2cqw, 3.52dvh);
    padding: 0 min(3.05cqw, 5.357dvh);
    font-size: min(1.423cqw, 2.5dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(1) summary,
  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(4) summary {
    height: var(--process-faq-summary-height);
  }

  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(2),
  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(3) {
    --process-faq-summary-height: 12.796dvh;
  }

  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(2) summary,
  html.como-funciona-responsive-lab .process-faq__accordion details:nth-of-type(3) summary {
    height: var(--process-faq-summary-height);
  }

  html.como-funciona-responsive-lab .process-faq__accordion summary > i {
    width: min(1.423cqw, 2.5dvh);
    height: min(1.423cqw, 2.5dvh);
  }

  html.como-funciona-responsive-lab .process-faq__answer {
    min-height: 0;
    flex: 0 0 auto;
    padding: 0 min(3.05cqw, 5.357dvh);
  }

  html.como-funciona-responsive-lab .process-faq__accordion details[open] .process-faq__answer {
    height: 11.126dvh;
  }

  html.como-funciona-responsive-lab .process-faq__answer p {
    font-size: min(1.186cqw, 2.084dvh);
  }

  html.como-funciona-responsive-lab .process-faq__cta-row {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    width: 108%;
    min-height: 12.278dvh;
    flex: 0 0 12.278dvh;
    margin-top: 3.776dvh;
  }

  html.como-funciona-responsive-lab .process-faq__cta {
    min-height: 0;
    gap: min(2.1cqw, 3.69dvh);
    padding: 2.778dvh min(2.3cqw, 4.04dvh);
    font-size: min(1.05cqw, 1.845dvh);
  }

  html.como-funciona-responsive-lab .process-faq__cta svg {
    width: min(1.582cqw, 2.778dvh);
  }

  html.como-funciona-responsive-lab .process-faq__reassurance {
    min-height: 0;
    gap: min(1.35cqw, 2.373dvh);
    padding: 2.5dvh min(2.25cqw, 3.955dvh);
    font-size: min(.949cqw, 1.667dvh);
  }

  html.como-funciona-responsive-lab .process-faq__reassurance .process-faq__star {
    width: min(1.582cqw, 2.778dvh);
  }
}

@media (max-width: 360px) {
  html.como-funciona-responsive-lab body::before {
    top: 4px;
    right: 6px;
    padding: 4px 8px;
    font-size: 7px;
    letter-spacing: .08em;
  }
}