/* ==========================================================================
   DOBRA 04 — O QUE SERÁ DESENVOLVIDO
   Referência: página 4 do PDF original
   ========================================================================== */

.entrega {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Título e régua
   -------------------------------------------------------------------------- */

.entrega__titulo {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--cream);
}

/* linha mint com bolinhas nas pontas */
.entrega__regua {
  position: relative;
  width: min(780px, 100%);
  height: 1px;
  margin: clamp(1.5rem, 3vw, 2.4rem) auto;
  background: var(--mint);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.25s;
}
.entrega__regua.is-in { transform: scaleX(1); }

.entrega__regua::before,
.entrega__regua::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mint);
  translate: -50% -50%;
}
.entrega__regua::before { left: 0; }
.entrega__regua::after  { left: 100%; }

.entrega__sub {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Cartão do resumo
   -------------------------------------------------------------------------- */

.entrega__cartao {
  width: min(620px, 100%);
  margin: clamp(1.2rem, 2.5vw, 2rem) auto 0;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--mint);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream) 4.5%, transparent);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--cream);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Entregáveis — duas colunas espelhadas com trilho vertical
   -------------------------------------------------------------------------- */

.entregaveis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 7vw, 7rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* o data-reveal aqui serve só de gatilho para os trilhos:
   quem anima são os filhos, não o bloco inteiro */
.entregaveis[data-reveal] {
  opacity: 1;
  transform: none;
}

.entregaveis__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  padding-block: 0.4rem;
}

/* trilho vertical na borda externa, com bolinhas nas pontas */
.entregaveis__trilho {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mint);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.9s var(--ease);
}
.entregaveis__col--esq .entregaveis__trilho { left: 0; }
.entregaveis__col--dir .entregaveis__trilho { right: 0; }

.entregaveis.is-in .entregaveis__trilho { transform: scaleY(1); }

.entregaveis__trilho::before,
.entregaveis__trilho::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mint);
  translate: -50% -50%;
}
.entregaveis__trilho::before { top: 0; }
.entregaveis__trilho::after  { top: 100%; }

/* --- cada item --- */
.entregavel {
  /* curva seca: arranca rápido e trava de uma vez */
  --seco: cubic-bezier(0.16, 0.9, 0.12, 1);
  --haste: clamp(1.6rem, 4vw, 4.2rem);

  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--cream);
  transition: color 0.35s var(--ease);
}

/* o efeito fica nas partes, não no <li> inteiro */
.entregavel[data-reveal] {
  opacity: 1;
  transform: none;
}

/* --- 1. a haste dispara do trilho até o ponto --- */
.entregavel::before {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--haste);
  height: 1px;
  background: var(--mint);
  transform: scaleX(0);
  transition: transform 0.3s var(--seco), width 0.4s var(--ease);
  transition-delay: var(--reveal-delay, 0ms), 0ms;
}
.entregavel.is-in::before { transform: scaleX(1); }

/* --- 2. o ponto aterrissa com um estalo e solta um halo --- */
.entregavel__ponto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--mint);
  background: transparent;
  transform: scale(0);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.entregavel.is-in .entregavel__ponto {
  animation: ponto-bate 0.46s var(--seco) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

@keyframes ponto-bate {
  0% {
    transform: scale(0);
    background: var(--mint);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 65%, transparent);
  }
  55% {
    transform: scale(1.55);
    background: var(--mint);
  }
  100% {
    transform: scale(1);
    background: transparent;
    box-shadow: 0 0 0 13px color-mix(in srgb, var(--mint) 0%, transparent);
  }
}

/* --- 3. o texto é revelado por uma cortina, no sentido da haste --- */
.entregavel__txt {
  display: inline-block;
  opacity: 0;
  transition:
    clip-path 0.42s var(--seco),
    transform 0.42s var(--seco),
    opacity 0.01s linear;
  transition-delay: calc(var(--reveal-delay, 0ms) + 150ms);
}
.entregavel.is-in .entregavel__txt {
  opacity: 1;
  transform: none;
  clip-path: inset(-0.25em 0 -0.25em 0);
}

/* lado esquerdo: tudo corre do trilho para a direita */
.entregaveis__col--esq .entregavel {
  padding-left: calc(var(--haste) + 0.1rem);
  text-align: left;
}
.entregaveis__col--esq .entregavel::before {
  left: 0;
  transform-origin: left center;
}
.entregaveis__col--esq .entregavel__txt {
  clip-path: inset(-0.25em 100% -0.25em 0);
  transform: translateX(-14px);
}

/* lado direito: espelhado, corre para a esquerda */
.entregaveis__col--dir .entregavel {
  flex-direction: row-reverse;
  padding-right: calc(var(--haste) + 0.1rem);
  text-align: right;
}
.entregaveis__col--dir .entregavel::before {
  right: 0;
  transform-origin: right center;
}
.entregaveis__col--dir .entregavel__txt {
  clip-path: inset(-0.25em 0 -0.25em 100%);
  transform: translateX(14px);
}

/* hover: o item acende */
@media (hover: hover) {
  .entregavel:hover { color: var(--mint); }
  .entregavel:hover .entregavel__ponto {
    background: var(--mint);
    transform: scale(1.35);
  }
  .entregavel:hover::before { width: calc(var(--haste, 4.2rem) + 0.5rem); }
}

/* --------------------------------------------------------------------------
   Fecho
   -------------------------------------------------------------------------- */

.entrega__fecho {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--gray-on-dark);
}
.entrega__fecho strong {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* uma coluna só: todos os itens alinhados à esquerda */
  .entregaveis {
    grid-template-columns: 1fr;
    gap: clamp(1.4rem, 4vw, 2.2rem);
  }
  .entregaveis__col--dir .entregavel {
    flex-direction: row;
    padding-right: 0;
    padding-left: calc(var(--haste) + 0.1rem);
    text-align: left;
  }
  .entregaveis__col--dir .entregaveis__trilho { right: auto; left: 0; }
  .entregaveis__col--dir .entregavel::before {
    right: auto;
    left: 0;
    transform-origin: left center;
  }
  /* no celular os dois lados revelam para a mesma direção */
  .entregaveis__col--dir .entregavel__txt {
    clip-path: inset(-0.25em 100% -0.25em 0);
    transform: translateX(-14px);
  }
  .entregavel { --haste: 1.5rem; font-size: var(--fs-lead); }
}