/* ===========================================================
   O QUE CONSTRÓI UMA BOA PÁGINA
   Lista de linhas com filete. Nome grande à esquerda; à direita,
   o detalhe do tópico aparece só no HOVER da própria linha
   (deslizando da direita). No touch, um toque abre/fecha.
   (Estrutura herdada da antiga seção "Serviços".)
   =========================================================== */
.services{
  position:relative;
  background:var(--bg);
  padding:120px 20px 140px;
}

.services__inner{
  max-width:1240px;
  margin-inline:auto;
}

.services__title{
  font-size:clamp(38px,7vw,72px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--cream);
  max-width:16ch;   /* medido na fonte grande do próprio título → quebra em ~2 linhas */
  margin-bottom:clamp(48px,7vh,88px);
}

/* ---------- linha ---------- */
.service{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(22px,3.4vh,38px) 0;
  border-bottom:1px solid var(--cream-10);
  cursor:pointer;
}

.service:first-of-type{border-top:1px solid var(--cream-10);}

.service__name{
  font-size:clamp(24px,3.4vw,42px);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--cream);
  transition:color .3s ease;
}

/* ---------- lado direito: dica + detalhe ---------- */
.service__right{
  position:relative;
}

/* dica discreta ("passe o mouse / toque") — some no hover/aberto */
.service__hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--cream-30);
  transition:opacity .3s ease;
}
.service__hint [data-touch]{display:none;}

.service__arrow{
  width:1em;
  height:1em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* detalhe: escondido, deslizando da direita */
.service__detail{
  font-size:clamp(15px,1.2vw,17px);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1.5;
  color:var(--cream-90);
  opacity:0;
  translate:24px 0;
  transition:opacity .4s ease, translate .4s cubic-bezier(.2,.8,.25,1);
}

/* ---------- ESTADO ATIVO (hover / foco / aberto no touch) ---------- */
.service:hover .service__name,
.service:focus-visible .service__name,
.service.is-open .service__name{color:var(--red);}

.service:hover .service__hint,
.service:focus-visible .service__hint,
.service.is-open .service__hint{opacity:0;}

.service:hover .service__detail,
.service:focus-visible .service__detail,
.service.is-open .service__detail{
  opacity:1;
  translate:0 0;
}

.service:focus-visible{outline:2px solid var(--red);outline-offset:8px;border-radius:6px;}

/* -----------------------------------------------------------
   DESKTOP — nome à esquerda, painel do detalhe à direita
   ----------------------------------------------------------- */
@media (min-width:860px){
  .services{padding:160px 5vw 180px;}

  .service{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:48px;
  }

  /* largura fixa do lado direito: a linha não "pula" quando o detalhe
     troca com a dica, porque os dois ocupam o mesmo bloco */
  .service__right{
    flex-shrink:0;
    width:min(46%,520px);
    min-height:1.5em;
  }

  /* dica e detalhe ocupam o MESMO espaço (empilhados), então a troca é
     um crossfade no lugar, sem deslocar nada */
  .service__hint{
    position:absolute;
    top:50%;right:0;
    transform:translateY(-50%);
  }
}

/* mobile: a dica troca o texto pra "toque" */
@media (hover:none){
  .service__hint [data-hover]{display:none;}
  .service__hint [data-touch]{display:inline;}
}

@media (max-width:859px){
  /* No mobile o movimento lateral do texto escondido criava 4px de
     rolagem horizontal. O mesmo efeito sobe de baixo e fica contido. */
  .service{overflow:clip;}
  .service__detail{translate:0 8px;}
}

@media (prefers-reduced-motion:reduce){
  .service__name,.service__hint,.service__detail{transition:none;}
  .service__detail{translate:0 0;}
}