:root {
    /* Paleta (sinta-se à vontade para ajustar) */
    --bg: #bfc6ff;
    /* lilás do fundo principal */
    --bg-aux: #dfe3ff;
    /* faixas diagonais mais claras */
    --ink: #2a2370;
    /* texto principal */
    --heading: #5e2fe3;
    /* roxo dos headings */
    --accent: #7a4dff;
    /* linha/realce do título */
    --method-gap-x: 64px;
    /* distância entre colunas */
    --method-gap-y: 60px;
    /* distância entre linhas */
    --icon-size: 122px;
    /* placeholder de ícone */
    --radius: 12px;
    --maxw: 1200px;
  }

  /* ===== Secção ===== */
  .metodo42 {
    position: relative;
    background: var(--bg);
    padding: clamp(28px, 5vw, 56px) 0;
  }

  .metodo42 .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    /* acima das faixas diagonais */
  }

  /* ===== Título ===== */
  .topline {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: clamp(18px, 3.2vw, 28px);
  }

  .topline .underscore {
    width: 54px;
    height: 4px;
    background: var(--accent);
    border-radius: 999px;
    margin-bottom: 12px;
  }

  .metodo42 .title {
    margin: 0;
    font-size: clamp(28px, 4.8vw, 56px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .5px;
    color: var(--heading);
    text-transform: uppercase;
  }

  .metodo42 .title .n {
    margin-left: .35em;
  }

  /* ===== Lista de features ===== */
  .features {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    column-gap: var(--method-gap-x);
    row-gap: var(--method-gap-y);
    text-align: justify;
  }

  /* Cada item */
  .feature {
    display: grid;
    grid-template-columns: var(--icon-size) 1fr;
    gap: 14px 16px;
    align-items: start;
  }

  /* Placeholder do ícone (apenas o espaço, sem ícone real) */
  .features-ico {
    width: var(--icon-size);
    height: var(--icon-size);
    place-items: center;
  }

  .feature h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--heading);
  }

  .feature p {
    margin: 0;
    line-height: 1.6;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(20, 20, 60, .08);
  }

  /* Responsivo */
  @media (max-width: 980px) {
    :root {
      --method-gap-x: 36px;
    }

    .features {
      grid-template-columns: 1fr;
    }

    /* Esconder linhas verticais e texto "Emprego" em mobile */
    .time-row .col-md-2:nth-child(5)::before,
    .time-row .col-md-2:nth-child(6)::before,
    .time-row .col-md-2:nth-child(5)::after,
    .time-row .col-md-2:nth-child(6)::after {
      display: none;
    }

    /* Esconder traços horizontais dos square-separator em mobile */
    .square-separator::before,
    .square-separator::after {
      display: none;
    }
  }

  .method-shape-1 {
    position: absolute;
    opacity: 0.27;
    background: #96A3EB;
    top: -38px;
    left: 0;
    width: 50%;
    aspect-ratio: 1162 / 376;
    clip-path: polygon(100% 0%,
        /* (1162.7114, 0)          -> (100%, 0%)   */
        0% 89.74425%,
        /* (0, 337.3179)           -> 337.3179/375.8658 */
        0% 100%,
        /* (0, 375.8658)           -> (0%, 100%)   */
        100% 100%
        /* (1162.7114, 375.8658)   -> (100%, 100%) */
      );
    transform: rotate(180deg);
  }
  

  .mehtod-symbol-white {
    position: absolute;
    top: -51px;
    left: -132px;
    z-index: 1;
    width: 22vw;
  }

  .method-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
  }

   .banner-symbol-outline-cyan {
    position: absolute;
    bottom: -220px;
    right: 0;
    z-index: 1;
    width: 22vw;
}

.time-square {
  color: white;
  background-color: #96A3EB;
  border: solid 1px #31EFDB;
  text-align: center;
  box-shadow: 3px 3px #96A3EB;
  font-weight: bold;
  height: 166px;
  width: 100%;
}

.time-square.active {
  color: white;
  background-color: #31EFDB !important;
  border: solid 1px #31EFDB !important;
  text-align: center;
  box-shadow: 3px 3px #31EFDB !important;
  height: 260px;
}

.time-row div{
  padding: 4px;
}

.time-row .col-md-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-content-center {
  display: flex;
  align-items: center; 
  justify-content: center
}

.underline::after {
    --cor: #16f0e9;
    --espessura: 4px;
    --passo: 20px;
    --ang: -63deg;
    content: "";
    height: 20px;
    background: repeating-linear-gradient(var(--ang), var(--cor) 0 calc(var(--espessura)), /* traço */ transparent calc(var(--espessura)) var(--passo) /* espaço */);
    pointer-events: none;
    bottom: -10px;
    transition: all ease 0.5s;
    display: block;
}

.square-separator {
  height: 10px;
  width: 10px;
  background-color: #16f0e9;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Linha antes do square-separator */
.square-separator::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  background: #16f0e9;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 15px;
}

/* Linha depois do square-separator */
.square-separator::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  background: #16f0e9;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 15px;
}

/* Remover linha antes do primeiro ponto */
.col-md-2:first-child .square-separator::before {
  display: none;
}

/* Remover linha depois do último ponto */
.col-md-2:last-child .square-separator::after {
  display: none;
}

.time-row .col-md-2:nth-child(5),
.time-row .col-md-2:nth-child(6) {
  position: relative;
}

.time-row .col-md-2:nth-child(5)::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  background: #16f0e9;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.time-row .col-md-2:nth-child(6)::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  background: #16f0e9;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.time-row .col-md-2:nth-child(5)::after {
  content: attr(data-label);
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  color: #16f0e9;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.time-row .col-md-2:nth-child(6)::after {
  content: attr(data-label);
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  color: #16f0e9;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.step-description {
  color: #16f0e9;
  font-size: 19px;
  text-align: center;
  margin-top: 20px;
}

@media (min-width: 768px) {
    .time-step .square-separator,
    .time-step .step-description {
        display: none;
    }
}

/* Desktop: esconde as descrições duplicadas dentro do time-row */
@media (min-width: 768px) {
    .time-step .square-separator,
    .time-step .step-description {
        display: none;
    }
}

/* Mobile: esconde a segunda row e mostra as descrições dentro de cada step */
@media (max-width: 767px) {
    .descriptions-row {
        display: none !important;
    }

    .time-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .time-step .square-separator,
    .time-step .step-description {
        display: block !important;
        text-align: center;
    }
}