.simulador-wizard {
  max-width: 100%;
  width: 1400px;
  margin: 48px auto;
}

.wizard-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 80px 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  counter-reset: wizard;
 }
 
.wizard-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  font-size: 14px;
 }

.step-line-track {
  position: absolute;
  top: 13px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 4px;
  background: #d7e3f4;
  border-radius: 999px;
  z-index: -1;
}

.step-line-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #1a468b;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
 
 .wizard-circle {
  font-size: 27px;
  width: 50px;
  height: 50px;
  margin: -10px auto 15px;
  font-family: Open Sans;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #cdd8eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: #ffffff;
  transition: background 0.4s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
 }

 .wizard-step.active .wizard-circle {
  background: #1a468b;
  border-color: #1a468b;
  font-weight: 700;
  transform: scale(1.15);
 }

 .wizard-step.completed .wizard-circle {
  background: #1a468b;
  border-color: #1a468b;
  font-weight: 700;
  transform: scale(1);
  box-shadow: none;
 }
 
 .wizard-step span {
  display: block;
  white-space: nowrap;
 }

.wizard-step.active span {
  font-weight: 600;
}

.wizard-pane {
  display: none;
  opacity: 0;
 }

.wizard-pane.active {
  display: block;
  animation: wiz-fade-in 0.4s ease forwards;
 }

.wizard-question {
  display: none;
  opacity: 0;
}

.wizard-question.active {
  display: block;
  animation: wiz-fade-in 0.35s ease forwards;
}

.wizard-question.fade-out {
  animation: wiz-fade-out 0.25s ease forwards;
}

@keyframes wiz-fade-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wiz-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
 
 .wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wizard-grid--hidden {
  display: none;
}
 
 .wizard-grid--mt {
  margin-top: 32px;
 }
 
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
 }
 
.campo label {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
 }
 
.campo input,
.campo select {
  border-radius: 12px;
  border: 1px solid #d4d4d8;
  padding: 9px 13px;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
 .campo input:focus,
 .campo select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb33;
 }
 
.campo-file input[type="file"] {
  padding: 6px 3px;
 }
 
.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 80px;
 }
 
.wizard-prev,
.wizard-next,
.wizard-submit {
  padding: 10px 60px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
 }

.wizard-prev[disabled],
.wizard-next[disabled] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
 
 .wizard-prev {
  background: #fff;
  border-color: #1e3a8a;
  color: #1e3a8a;
 }
 
 .wizard-next,
 .wizard-submit {
  color: #ffffff;
  background: #1A468B;
 }
 
 .wizard-next:hover,
 .wizard-submit:hover {
  filter: brightness(1.05);
 }
 
.simulador-resultado {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 15px;
  color: #111827;
 }
 
.simulador-resultado .nota {
  margin-top: 8px;
  font-size: 13px;
  color: #6b7280;
 }
 
.resumo-dados {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
  font-size: 14px;
 }
 
 .resumo-dados h3 {
  margin-top: 0;
 }
 
.wizard-intro {
 text-align: center;
 margin-bottom: 80px;
 }
 
.wizard-intro h2 {
 font-size: 22px;
 color: #1e3a8a;
 margin-bottom: 8px;
 }
 
.wizard-intro p {
 max-width: 520px;
 margin: 0 auto;
 font-size: 14px;
 }
 
 .hab-tipos {
 display: flex;
  justify-content: space-between;
  gap: 50px;
 flex-wrap: wrap;
 }
 
.hab-card {
  flex: 1 1 0;
  max-width: none;
 border: none;
 background: transparent;
 padding: 0;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
  gap: 10px;
 color: #1e3a8a;
 }
 
 .hab-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  max-width: 310px;
  border: 2px solid #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .hab-icon {
 object-fit: contain;
 }
 
 .hab-icon-white {
 display: none;
 }
 
 .hab-card-circle-outro {
 background: #ffffff;
 }
 
 .hab-card-dots {
 font-size: 32px;
 color: #1e3a8a;
 }
 
.hab-card-label {
  font-size: 14px;
 font-weight: 600;
 color: #1e3a8a;
 }
 
 .hab-card:hover .hab-card-circle,
 .hab-card.active .hab-card-circle {
 background: #1e3a8a;
 box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
 }
 
 .hab-card:hover .hab-icon-blue,
 .hab-card.active .hab-icon-blue {
 display: none;
 }
 
 .hab-card:hover .hab-icon-white,
 .hab-card.active .hab-icon-white {
 display: block;
 }
 
 .hab-card:hover .hab-card-dots,
 .hab-card.active .hab-card-dots {
 color: #ffffff;
 }
 
 .hab-card.active .hab-card-label {
 color: #1e3a8a;
 }

/* animação de entrada dos cartões de habitação */
.hab-tipos .hab-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.hab-tipos .hab-card:nth-child(2) { animation-delay: 0.05s; }
.hab-tipos .hab-card:nth-child(3) { animation-delay: 0.10s; }
.hab-tipos .hab-card:nth-child(4) { animation-delay: 0.15s; }


@keyframes hab-pop-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

 @media (max-width: 1920px) {
  .simulador-wizard {
    max-width: 100%;
    width: 1000px;
    margin: 48px auto;
  }
}

@media (max-width: 1280px) {
  .simulador-wizard {
    max-width: 100%;
    width: 768px;
    margin: 48px auto;
  }
}

 @media (max-width: 640px) {
  .wizard-steps {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 8px 40px;
    padding: 0 4px;
    font-size: 10px;
  }

  .wizard-step {
    flex: 1;
    min-width: 0;
  }

  .wizard-circle {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin: -8px auto 8px;
  }

  .wizard-step.active .wizard-circle {
    transform: scale(1.1);
  }

  .wizard-step > span:not(.step-line-track) {
    white-space: normal;
    line-height: 1.2;
    font-size: 12px;
    max-width: 100%;
    padding: 0 2px;
  }

  .step-line-track {
    top: 10px;
    left: calc(50% + 15px);
    right: calc(-50% + 15px);
    height: 3px;
  }
 
  .wizard-steps::before {
    left: 12%;
    right: 12%;
  }
 
  .wizard-grid {
    grid-template-columns: 1fr;
  }
 
  .hab-tipos {
    justify-content: center;
    row-gap: 24px;
    column-gap: 20px;
  }

  .hab-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
 
  .wizard-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
 }

/* Esconder as bolas quando a pergunta 2 do passo 1 está ativa */
.wizard-pane[data-step="1"] .wizard-question[data-question="2"].active ~ .hab-tipos {
  display: none;
}

/* ── Histórico inline ───────────────────────────────────────── */
.wizard-history {
  max-width: 780px;
  margin: 60px auto 0;
  display: none;
}

.wizard-history.is-visible {
  display: block;
}

.wizard-history-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 28px;
  color: #1e3a8a;
}

.wh-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 50px;
}

.wh-item {
  position: relative;
  padding-left: 28px;
}

/* linha vertical apenas ENTRE cartões, não por trás deles */
.wh-item::before {
  content: '';
  position: absolute;
  left: 60px;
  top: -40px;
  height: 40px;
  border-left: 3px dashed #c5d4ea;
  display: none;
}

/* aplica a linha só a partir do segundo cartão em diante */
.wh-item + .wh-item::before {
  display: block;
}

.wh-card {
  border-radius: 16px;
  border: 1px solid #1A468B;
  background: #ffffff;
  padding: 20px 30px;
  padding-right: 72px;
}

.wh-q {
  font-size: 16px;
  font-weight: 600;
  color: #1A468B;
}

.wh-a {
  font-size: 14px;
}

.wizard-history {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wizard-history.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wh-item {
  opacity: 0;
  transform: translateY(10px);
}

.wizard-history.is-visible .wh-item {
  animation: wh-item-in 0.35s ease forwards;
}

.wizard-history.is-visible .wh-item:nth-child(2) {
  animation-delay: 0.05s;
}

.wizard-history.is-visible .wh-item:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes wh-item-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .wizard-history {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .wizard-history-title {
    text-align: center;
  }

  .wh-list {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .wh-item {
    padding-left: 0;
  }
}

/* ── Year Timeline ───────────────────────────────────────────── */

/*
  .yt-wrap padding leaves room for the line to bleed 20px past
  the first and last markers. .yt-track and .yt-markers are both
  width = wrap_width - 40px and stay in sync.
*/
.yt-wrap {
  margin: 48px 0 0;
  padding: 0 70px;
  user-select: none;
}

/* clickable area – the visible line overflows via ::before */
.yt-track {
  position: relative;
  height: 30px;
  cursor: pointer;
}

/* main horizontal line: bleeds 20px on each side */
.yt-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #d7e3f4;
  border-radius: 999px;
  transform: translateY(-50%);
}

/* blue progress fill (stays within the draggable range) */
.yt-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0%;
  height: 2px;
  background: #1A468B;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: width 0.25s ease;
}

/* na barra de área queremos que o fill siga a bola em tempo real, sem easing */
#timeline-area .yt-fill {
  transition: none;
}

/* draggable circle */
.yt-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1A468B;
  box-shadow: 0 0 0 4px rgba(26, 70, 139, 0.18);
  cursor: grab;
  z-index: 2;
}

.yt-handle:active {
  cursor: grabbing;
}

/* estado sem seleção: esconder handle e fill */
.yt-sem-selecao .yt-handle {
  opacity: 0;
  pointer-events: none;
}

.yt-sem-selecao .yt-fill {
  width: 0 !important;
}

/*
  Barra de área: alinhar a track com os marcadores.
  O .yt-markers tem margin: 0 50px dentro do content-area do .yt-wrap.
  O .yt-track para a área deve ter a mesma margem lateral para que
  left:0% coincida com o primeiro marcador e left:100% com o último.
  O ::before estende a linha 50px para cada lado, ficando "por trás" dos marcadores.
*/
#timeline-area .yt-track {
  margin: 0 50px;
}

#timeline-area .yt-track::before {
  left: -50px;
  right: -50px;
}

/* o bloco manual fica alinhado com o início dos marcadores */
.area-manual {
  margin: 30px 120px 0;
}

.area-manual-label {
  font-size: 14px;
  margin-bottom: 10px;
  color: #1e3a8a;
}

.area-manual-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
}

.area-manual-input-wrap input {
  border: none;
  outline: none;
  width: 80px;
  font-size: 14px;
  text-align: right;
}

.area-manual-unit {
  font-size: 14px;
  color: #64748b;
}

/*
  Row of markers (tick + label).
  Each marker is width:0 with overflow:visible so the bar and label
  are centered on their exact position. space-between spreads the
  7 markers to 0%, 1/6 … 100% of the track width.
*/
.yt-markers {
  display: flex;
  justify-content: space-between;
  margin: -15px 50px;
}

.yt-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 0;
  overflow: visible;
  cursor: pointer;
}

/* vertical tick bar below the line */
.yt-bar {
  display: block;
  width: 1px;
  height: 25px;
  background: #93A8CB;
  flex-shrink: 0;
}

.yt-mlabel {
  margin-top: 5px;
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  transition: color 0.2s, font-weight 0.2s;
}

.yt-marker.is-active .yt-bar {
  background: #1A468B;
  width: 2px;
}

.yt-marker.is-active .yt-mlabel {
  color: #1A468B;
  font-weight: 700;
}

@media (max-width: 640px) {
  .yt-wrap {
    margin-top: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .yt-track {
    height: 28px;
  }

  .yt-handle {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 3px rgba(26, 70, 139, 0.18);
  }

  .yt-markers {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: -12px;
  }

  .yt-bar {
    height: 20px;
  }

  .yt-mlabel {
    font-size: 11px;
    margin-top: 4px;
  }

  #timeline-area .yt-track {
    margin-left: 16px;
    margin-right: 16px;
  }

  #timeline-area .yt-track::before {
    left: -16px;
    right: -16px;
  }

  .area-manual {
    margin-left: 16px;
    margin-top: 50px;
    display: flex;
    margin-right: 16px;
    flex-direction: column;
    align-items: center;
  }
}

/* fill covers the selected interval (between the two active markers) */



/* ícone de editar no histórico */
.wh-card {
  position: relative;
}

.wh-edit {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 50px;
  height: 52px;
  border: none;
  background: transparent url('../editar-icon.svg') center center / 25px 25px no-repeat;
  cursor: pointer;
  padding: 0;
  transform: translateY(-50%);
}

.wh-edit:hover {
  transform: translateY(-50%) scale(1.05);
}


/* Andar cards (passo 2) */
.andar-tipos {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
}

.andar-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.andar-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid #1e3a8a;
  display: flex;
  max-width: 310px;
  align-items: center;
  gap: 50px;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.andar-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

.andar-card:hover .andar-card-circle,
.andar-card.active .andar-card-circle {
  background: #1e3a8a;
  box-shadow: 0 12px 30px rgba(30, 64, 175, 0.45);
}

.andar-card:hover .andar-card-label,
.andar-card.active .andar-card-label {
  color: #1e3a8a;
}

@media (max-width: 640px) {
  .andar-tipos {
    flex-wrap: wrap;
    row-gap: 24px;
  }
}


.andar-icon {
  object-fit: contain;
}

.andar-icon-white {
  display: none;
}

.andar-card:hover .andar-icon-blue,
.andar-card.active .andar-icon-blue {
  display: none;
}

.andar-card:hover .andar-icon-white,
.andar-card.active .andar-icon-white {
  display: block;
}


/* animação de entrada dos cartões de andar */
.andar-tipos .andar-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.andar-tipos .andar-card:nth-child(2) { animation-delay: 0.05s; }
.andar-tipos .andar-card:nth-child(3) { animation-delay: 0.10s; }


/* Divisão cards (passo 2, pergunta 2) - igual às hab-tipos */
.divisao-tipos {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
}

.divisao-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e3a8a;
}

.divisao-card-circle {width: 99%;aspect-ratio: 1 / 1;border-radius: 999px;border: 2px solid #1e3a8a;display: flex;max-width: 310px;align-items: center;gap: 50px;justify-content: center;background: #ffffff;box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;}

.divisao-icon {
  object-fit: contain;
}

.divisao-icon-white {
  display: none;
}

.divisao-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

.divisao-card:hover .divisao-card-circle,
.divisao-card.active .divisao-card-circle {
  background: #1e3a8a;
  box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
}

.divisao-card:hover .divisao-icon-blue,
.divisao-card.active .divisao-icon-blue {
  display: none;
}

.divisao-card:hover .divisao-icon-white,
.divisao-card.active .divisao-icon-white {
  display: block;
}

@media (max-width: 640px) {
  .divisao-tipos {
    justify-content: center;
    row-gap: 30px;
    column-gap: 30px;
  }

  .divisao-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
}

/* animação de entrada dos cartões de divisão */
.divisao-tipos .divisao-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.divisao-tipos .divisao-card:nth-child(2) { animation-delay: 0.05s; }
.divisao-tipos .divisao-card:nth-child(3) { animation-delay: 0.10s; }

/* Divisões (quantidade) cards – 4 bolas numéricas */
.divisoes-tipos {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.divisoes-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e3a8a;
}

.divisoes-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid #1e3a8a;
  display: flex;
  max-width: 310px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.divisoes-num {
  font-size: 62px;
  font-family: Open Sans;
  font-weight: 600;
  color: #1e3a8a;
}

.divisoes-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

.divisoes-card:hover .divisoes-card-circle,
.divisoes-card.active .divisoes-card-circle {
  background: #1e3a8a;
  box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
}

.divisoes-card:hover .divisoes-num,
.divisoes-card.active .divisoes-num {
  color: #ffffff;
}

@media (max-width: 640px) {
  .divisoes-tipos {
    justify-content: center;
    row-gap: 24px;
    column-gap: 20px;
  }

  .divisoes-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
}

/* animação de entrada dos cartões de quantidade de divisões */
.divisoes-tipos .divisoes-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.divisoes-tipos .divisoes-card:nth-child(2) { animation-delay: 0.05s; }
.divisoes-tipos .divisoes-card:nth-child(3) { animation-delay: 0.10s; }
.divisoes-tipos .divisoes-card:nth-child(4) { animation-delay: 0.15s; }


/* Exposição solar (passo 3, pergunta 2) – 3 bolas com ícones de sol */
.sol-tipos {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.sol-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e3a8a;
}

.sol-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid #1e3a8a;
  display: flex;
  max-width: 260px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sol-icon {
  object-fit: contain;
}

.sol-icon-white {
  display: none;
}

.sol-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}

.sol-card:hover .sol-card-circle,
.sol-card.active .sol-card-circle {
  background: #1e3a8a;
  box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
}

.sol-card:hover .sol-icon-blue,
.sol-card.active .sol-icon-blue {
  display: none;
}

.sol-card:hover .sol-icon-white,
.sol-card.active .sol-icon-white {
  display: block;
}

@media (max-width: 640px) {
  .sol-tipos {
    justify-content: center;
    row-gap: 24px;
    column-gap: 20px;
  }

  .sol-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
}

/* animação de entrada dos cartões de exposição solar */
.sol-tipos .sol-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.sol-tipos .sol-card:nth-child(2) { animation-delay: 0.05s; }
.sol-tipos .sol-card:nth-child(3) { animation-delay: 0.10s; }


/* Instalação anterior (passo 4, pergunta 1) – 3 bolas com ícones certo/errado */
.inst-tipos {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.inst-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e3a8a;
}

.inst-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid #1e3a8a;
  display: flex;
  max-width: 260px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.inst-icon {
  object-fit: contain;
}

.inst-icon-white {
  display: none;
}

.inst-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  text-align: center;
}

.inst-card:hover .inst-card-circle,
.inst-card.active .inst-card-circle {
  background: #1e3a8a;
  box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
}

.inst-card:hover .inst-icon-blue,
.inst-card.active .inst-icon-blue {
  display: none;
}

.inst-card:hover .inst-icon-white,
.inst-card.active .inst-icon-white {
  display: block;
}

@media (max-width: 640px) {
  .inst-tipos {
    justify-content: center;
    row-gap: 24px;
    column-gap: 20px;
  }

  .inst-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
}

/* animação de entrada dos cartões de instalação anterior */
.inst-tipos .inst-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.inst-tipos .inst-card:nth-child(2) { animation-delay: 0.05s; }
.inst-tipos .inst-card:nth-child(3) { animation-delay: 0.10s; }


/* Local de instalação (passo 4, pergunta 2) – 4 bolas */
.loc-tipos {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.loc-card {
  flex: 1 1 0;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e3a8a;
}

.loc-card-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid #1e3a8a;
  display: flex;
  max-width: 260px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.loc-icon {
  object-fit: contain;
}

.loc-icon-white {
  display: none;
}

.loc-card-question {
  font-size: 120px;
  font-weight: 400;
  color: #1e3a8a;
}

.loc-card-label {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  text-align: center;
}

.loc-card:hover .loc-card-circle,
.loc-card.active .loc-card-circle {
  background: #1e3a8a;
  box-shadow: 0 14px 35px rgba(30, 64, 175, 0.45);
}

.loc-card:hover .loc-icon-blue,
.loc-card.active .loc-icon-blue {
  display: none;
}

.loc-card:hover .loc-icon-white,
.loc-card.active .loc-icon-white {
  display: block;
}

.loc-card:hover .loc-card-question,
.loc-card.active .loc-card-question {
  color: #ffffff;
}

@media (max-width: 640px) {
  .loc-tipos {
    justify-content: center;
    row-gap: 24px;
    column-gap: 20px;
  }
  .divisoes-num {
      font-size: 62px;
  }
  .loc-card-question {
    font-size: 62px;
    font-weight: 400;
    color: #1e3a8a;
  }
  .loc-card {
    flex: 0 0 45%;
    max-width: 48%;
  }
}

/* animação de entrada dos cartões de local de instalação */
.loc-tipos .loc-card {
  animation: hab-pop-in 0.35s ease backwards;
}

.loc-tipos .loc-card:nth-child(2) { animation-delay: 0.05s; }
.loc-tipos .loc-card:nth-child(3) { animation-delay: 0.10s; }
.loc-tipos .loc-card:nth-child(4) { animation-delay: 0.15s; }