/* cu · Cuidados — cinco cuidados indexados pelas cinco vértebras lombares do traço do hero.
   A vértebra do cuidado que passa pelo meio da tela acende (ouro + pulso do L4–L5).
   É um índice gráfico: não há relação anatômica entre o cuidado e a vértebra. */

.cu {
  --cu-sh: min(70vh, 640px);                 /* altura do desenho */
  --cu-sw: calc(var(--cu-sh) * 136 / 352);   /* largura do desenho (viewBox 136 × 352) */
  --cu-lado: calc(var(--cu-sw) + 210px);
  --cu-gap: clamp(56px, 7vw, 130px);
  --cu-foco: .28;                            /* fração da altura do desenho que fica no meio da tela */
  background: var(--branco);
}
.cu-luz { /* luz morna atrás da coluna */
  position: absolute;
  z-index: -1;
  left: calc(var(--marg) - 12vw);
  top: 18%;
  width: 70vw; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side in oklab, color-mix(in oklab, #F6EBD3 80%, transparent), color-mix(in oklab, #FBF6EA 50%, transparent) 50%, transparent);
  pointer-events: none;
}

.cu-grade { position: relative; }

/* ---------- cabeça ---------- */
.cu-cabeca { padding-bottom: clamp(36px, 7vh, 80px); }
.cu-titulo { max-width: 14ch; }
.cu-apoio {
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  max-width: 34em;
  font-size: var(--t-apoio);
  line-height: 1.58;
  color: var(--tinta-suave);
}

/* ---------- cada cuidado ---------- */
.cu-item {
  position: relative;
  padding: clamp(40px, 8vh, 88px) 0;
  border-top: 1px solid color-mix(in oklab, var(--ouro) 38%, transparent);
}
.cu-item::before { /* o pontinho da linha de rótulo do hero, na ponta do fio */
  content: "";
  position: absolute;
  left: 0; top: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ouro);
}
.cu-indice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--f-titulo);
}
.cu-l {
  display: inline-block;
  padding: .42em .55em .38em;
  border-radius: 5px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--latao-escuro);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ouro) 70%, transparent);
  transition: background .6s ease, color .6s ease, box-shadow .6s ease;
}
.cu-item.cu-agora .cu-l {
  background: var(--marcador);
  color: var(--tinta);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--latao) 35%, transparent), 0 10px 20px -14px rgba(110, 83, 31, .7);
}
.cu-de { font-weight: 500; font-size: .875rem; color: var(--tinta-suave); letter-spacing: .02em; }
.cu-nome {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 2.9vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--tinta);
}
.cu-texto {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  max-width: 36em;
  font-size: clamp(1.125rem, 1rem + .3vw, 1.3rem);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.cu-forma {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: 1rem;
  color: var(--latao-escuro);
}
.cu-forma::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--ouro);
  flex: none;
}

/* o índice grande: "L1" em traço dourado, que se preenche quando o cuidado é o da vez */
.cu-num {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(5rem, 2rem + 9vw, 12.5rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ouro);
  background: var(--marcador);
  -webkit-background-clip: text;
          background-clip: text;
  background-size: 100% 0%;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .9s var(--ease), -webkit-text-stroke-color .6s ease;
  pointer-events: none;
  user-select: none;
}
.cu-item.cu-agora .cu-num { background-size: 100% 100%; -webkit-text-stroke-color: var(--latao); }

/* régua (celular): cinco vértebras deitadas, a deste cuidado acesa */
.cu-regua { display: none; }

/* ---------- fecho ---------- */
.cu-fecho {
  position: relative;
  padding: clamp(48px, 9vh, 96px) 0 0;
  border-top: 1px solid color-mix(in oklab, var(--ouro) 38%, transparent);
}
.cu-fecho-frase {
  margin: 0 0 30px;
  font-family: var(--f-titulo);
  letter-spacing: -.02em;
}
.cu-fecho-frase span { display: block; font-weight: 500; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); color: var(--tinta-suave); margin-bottom: 8px; }
.cu-fecho-frase strong { display: block; font-weight: 700; font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); line-height: 1.04; color: var(--tinta); }
.cu-fecho-nota { margin: 20px 0 0; font-size: 1.0625rem; color: var(--tinta-suave); }

/* ---------- a coluna dourada ---------- */
.cu-lado { display: none; }
.cu-desenho { overflow: visible; }
.cu-traco {
  fill: rgba(255, 253, 248, .92);
  stroke: var(--ouro-traco);
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill .7s ease, stroke .7s ease;
}
.cu-fino { fill: none; stroke: var(--ouro); stroke-width: .55; opacity: .75; }
.cu-disco { fill: #F4E9CC; stroke: var(--ouro); stroke-width: .8; }
.cu-vert.cu-acesa .cu-corpo { fill: url(#cu-ouro); stroke: var(--latao); }
.cu-vert.cu-acesa .cu-post { fill: #FBF3DD; }
.cu-halo-luz { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .9s ease; }
.cu-halo-onda { fill: none; stroke: var(--ouro); stroke-width: .9; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cu-halo.cu-acesa .cu-halo-luz { opacity: 1; animation: cu-pulso 3.8s ease-in-out infinite; }
.cu-halo.cu-acesa .cu-halo-onda { animation: cu-onda 3.8s ease-out infinite; }
@keyframes cu-pulso { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes cu-onda { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.cu-fora .cu-halo-luz, .cu-fora .cu-halo-onda { animation-play-state: paused; }

/* rótulos (são links para cada cuidado) */
.cu-rotulos { list-style: none; margin: 0; padding: 0; }
.cu-rot {
  position: absolute;
  top: calc(var(--y) * var(--cu-sh));
  right: calc(var(--cu-sw) * (1 - (var(--bx) - 104) / 136) + 2px);
  transform: translateY(-50%);
}
.cu-rot a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--f-titulo);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.cu-rot-nome { font-weight: 500; font-size: 1.0625rem; transition: color .5s ease; }
.cu-rot-l {
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--latao-escuro);
  padding: .36em .45em .32em;
  border-radius: 4px;
  transition: background .5s ease, color .5s ease;
}
.cu-rot-fio {
  position: relative;
  width: 22px; height: 1px;
  background: var(--latao);
  transform-origin: right center;
  transition: width .6s var(--ease);
}
.cu-rot-fio::after {
  content: "";
  position: absolute;
  right: -2.5px; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--latao);
}
.cu-rot a:hover .cu-rot-nome { color: var(--tinta); }
.cu-rot.cu-acesa .cu-rot-nome { color: var(--tinta); font-weight: 600; }
.cu-rot.cu-acesa .cu-rot-l { background: var(--marcador); color: var(--tinta); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--latao) 35%, transparent); }
.cu-rot.cu-acesa .cu-rot-fio { width: 40px; }

/* ---------- computador: coluna presa à esquerda ---------- */
@media (min-width: 900px) {
  .cu-grade {
    display: grid;
    grid-template-columns: var(--cu-lado) minmax(0, 1fr);
    column-gap: var(--cu-gap);
  }
  .cu-lado { display: block; position: relative; }
  .cu-coluna {
    position: sticky;
    top: 0;
    width: var(--cu-lado);
    height: 100vh;
  }
  /* a coluna desliza para que a vértebra da vez fique no meio da tela, na altura do cuidado */
  .cu-trilho {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: var(--cu-sh);
    transform: translateY(calc(var(--cu-foco) * var(--cu-sh) * -1));
    transition: transform 1.1s var(--ease);
  }
  /* o fio que liga a vértebra acesa ao cuidado */
  .cu-ponte {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(100% - var(--cu-sw) * .1);
    width: calc(var(--cu-gap) + var(--cu-sw) * .1 - 14px);
    height: 1.5px;
    background: linear-gradient(90deg in oklab, var(--latao), var(--ouro));
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .5s var(--ease);
  }
  .cu-ponte::before, .cu-ponte::after {
    content: "";
    position: absolute;
    top: -3.25px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ouro);
  }
  .cu-ponte::before { left: -4px; background: var(--latao); }
  .cu-ponte::after { right: -4px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ouro) 25%, transparent); }
  .cu[data-guia] .cu-ponte { transform: scaleX(1); transition: transform .8s var(--ease) .5s; }
  .cu-desenho { position: absolute; right: 0; top: 0; width: var(--cu-sw); height: var(--cu-sh); }
  .cu-item { min-height: 42vh; padding-top: clamp(48px, 9vh, 96px); padding-right: clamp(150px, 16vw, 300px); }
  .cu-num { top: clamp(48px, 9vh, 96px); transform: none; }
  .js .cu-item { transition: opacity .7s ease; }
  .js .cu[data-guia] .cu-item:not(.cu-agora) { opacity: .38; }
  .cu-fecho { min-height: 52vh; }
}

/* notebook menor: desenho e índice menores, o título não passa por baixo do "L" grande */
@media (min-width: 900px) and (max-width: 1199px) {
  .cu { --cu-sh: min(62vh, 560px); --cu-lado: calc(var(--cu-sw) + 186px); }
  .cu-rot-nome { font-size: 1rem; }
  .cu-item { padding-right: 0; }
  .cu-nome { font-size: clamp(2.2rem, 1rem + 2.2vw, 2.7rem); max-width: calc(100% - 130px); }
  .cu-num { font-size: 5.6rem; top: calc(clamp(48px, 9vh, 96px) + 18px); }
}

/* ---------- celular e tablet: régua de vértebras no topo de cada cuidado ---------- */
@media (max-width: 899px) {
  .cu-luz { display: none; }
  .cu-titulo { max-width: 12ch; }
  .cu-item { padding: 44px 0 46px; }
  .cu-indice { gap: 12px; margin-bottom: 16px; }
  .cu-regua { display: inline-flex; align-items: center; gap: 5px; }
  .cu-regua { gap: 0; }
  .cu-vt {
    position: relative;
    margin-right: 7px;
    width: 19px; height: 12px;
    border-radius: 4px 4px 5px 5px;
    background: #FFFDF8;
    box-shadow: inset 0 0 0 1.2px var(--ouro-traco);
  }
  .cu-vt:not(:last-child)::after { /* o disco entre duas vértebras */
    content: "";
    position: absolute;
    right: -5.5px; top: 2px;
    width: 4px; height: 8px;
    border-radius: 2px;
    background: #F4E9CC;
    box-shadow: inset 0 0 0 .8px var(--ouro);
  }
  .cu-vt-sua { background: var(--marcador); box-shadow: inset 0 0 0 1.2px var(--latao), 0 0 0 4px color-mix(in oklab, var(--ouro-claro) 45%, transparent); }
  .cu-item.cu-agora .cu-vt-sua { animation: cu-pisca 3.8s ease-in-out infinite; }
  @keyframes cu-pisca { 50% { box-shadow: inset 0 0 0 1.2px var(--latao), 0 0 0 7px color-mix(in oklab, var(--ouro-claro) 25%, transparent); } }
  .cu-l { font-size: .9rem; }
  .cu-de { display: none; }
  .cu-fecho { padding-top: 48px; }
  .cu-num { top: 26px; transform: none; font-size: clamp(3.4rem, 14vw, 5.5rem); -webkit-text-stroke-width: 1.2px; }
  .cu-forma { align-items: flex-start; }
  .cu-forma::before { width: 7px; height: 7px; border-radius: 50%; margin-top: .45em; }
  .cu-botao { width: 100%; justify-content: center; padding: 0 16px; font-size: clamp(.92rem, 4.1vw, 1.02rem); white-space: nowrap; }
}
@media (max-width: 899px) and (min-width: 600px) {
  .cu-botao { width: auto; }
}