/* Seção ho · A qualquer hora (24 h, claro) */
.ho-secao {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--nude);
  padding: calc(var(--secao-pad) * .8) 0 var(--secao-pad);
}
.ho-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.ho-luz i { position: absolute; border-radius: 50%; animation: ho-deriva 31s ease-in-out infinite alternate; }
.ho-l1 { width: 64vmax; height: 64vmax; right: -14vmax; top: 10%;
  background: radial-gradient(closest-side in oklch, color-mix(in oklch, var(--pessego) 80%, transparent), transparent); }
.ho-l2 { width: 50vmax; height: 50vmax; left: -18vmax; top: -10%; animation-duration: 36s; animation-delay: -12s;
  background: radial-gradient(closest-side in oklch, #fbf3ee, transparent); }
@keyframes ho-deriva { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-3vw, 3vh, 0) scale(1.06); } }

/* cabeça: o título inteiro numa largura, a chamada logo abaixo (quem está com dor acha o botão antes da semana) */
.ho-cabeca { display: block; }
.ho-titulo { color: var(--vinho-noite); font-size: clamp(42px, 6.4vw, 100px); }
.ho-t1 { display: block; font-weight: 640; font-variation-settings: "wdth" 108; }
.ho-t2 { display: block; padding-left: 1.1em; }
.ho-chamada {
  margin-top: clamp(28px, 3.4vw, 48px); padding-left: calc(clamp(42px, 6.4vw, 100px) * 1.1);
  display: grid; grid-template-columns: minmax(0, 26em) auto; gap: 22px clamp(32px, 5vw, 72px); align-items: center;
}
.ho-texto { font-size: 20px; line-height: 1.55; color: var(--tinta-suave); }
.ho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ho-numero { font-size: 15px; color: var(--tinta-suave); letter-spacing: .02em; }
.ho-numero strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 24px; color: var(--vinho-noite); letter-spacing: .01em; }

/* a semana: cinco dias úteis estreitos e o fim de semana largo, dentro da porta de luz */
.ho-semana-bloco {
  --ho-cols: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 2.7fr));
  --ho-linha: 92px; /* altura do nome até o fio */
  position: relative; margin-top: clamp(150px, 14vw, 200px);
}
.ho-semana, .ho-provas { display: grid; grid-template-columns: var(--ho-cols); column-gap: 0; }
.ho-semana { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.ho-dia { display: flex; flex-direction: column; justify-content: flex-end; height: var(--ho-linha); position: relative; }
.ho-nome {
  font-family: var(--f-texto); font-weight: 500; font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1; color: var(--tinta-suave); padding-bottom: 24px;
}
.ho-fim .ho-nome {
  font-family: var(--f-display); letter-spacing: -.005em; text-transform: none; line-height: 1;
  font-weight: 620; font-variation-settings: "wdth" 106; font-size: clamp(34px, 4vw, 62px); color: var(--vinho);
  padding-left: 22px;
}
.ho-marca {
  position: absolute; left: 0; bottom: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--nude); border: 1.5px solid var(--rose-ouro);
}
.ho-fim .ho-marca {
  left: 22px; bottom: -11px; width: 22px; height: 22px; border: 0;
  background: radial-gradient(circle at 35% 30%, #fff0e6, #e2a68c 45%, #9a5644);
  box-shadow: 0 0 0 6px rgb(233 185 163 / .35), 0 0 30px 8px rgb(241 201 181 / .9);
}

.ho-fio { position: absolute; left: 0; right: -2vw; width: calc(100% + 2vw); top: calc(var(--ho-linha) - 20px); height: 40px; overflow: visible; z-index: 0; }
.ho-fio path { fill: none; stroke: url(#ho-metal); stroke-width: 2.6; stroke-linecap: round; }

/* duas portas de luz em arco, uma atrás do sábado e outra atrás do domingo */
.ho-porta {
  position: absolute; z-index: 0; top: -110px; bottom: -70px;
  left: calc(5 / 10.4 * 100% - 4px); right: -4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  pointer-events: none;
}
.ho-porta i {
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(70% 40% at 50% 30% in oklab, rgb(255 251 248 / .95), transparent 75%),
    linear-gradient(180deg in oklab, #fff7f2, color-mix(in oklab, var(--pessego) 50%, #fff7f2) 55%, color-mix(in oklab, var(--nude) 100%, transparent));
  box-shadow: 0 -16px 70px 0 rgb(255 244 236 / .85), inset 0 1px 0 0 rgb(255 255 255 / .8);
  -webkit-mask-image: linear-gradient(#000 64%, transparent);
          mask-image: linear-gradient(#000 64%, transparent);
  position: relative;
}
.ho-porta i::after { /* a luz de dentro respira devagar */
  content: ""; position: absolute; inset: 8% 14% 30%; border-radius: inherit;
  background: radial-gradient(closest-side in oklab, rgb(255 253 251 / .9), transparent);
  animation: ho-respira 7s ease-in-out infinite alternate;
}
.ho-porta i + i::after { animation-delay: -3.5s; }
@keyframes ho-respira { from { opacity: .35; } to { opacity: 1; } }

.ho-provas { margin-top: 40px; position: relative; z-index: 1; }
.ho-prova { margin: 0; padding-right: 24px; }
.ho-p-util { grid-column: 1 / span 4; }
.ho-p-sab { grid-column: 6; padding-left: 22px; }
.ho-p-dom { grid-column: 7; padding-left: 22px; }
.ho-prova blockquote { margin: 0; font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.4; color: var(--tinta); text-wrap: pretty; }
.ho-prova em { font-weight: 400; color: var(--vinho); }
.ho-hora { position: absolute; left: -2px; top: calc(100% + 14px); font-family: var(--f-titulo); font-size: 15px; color: var(--cobre); letter-spacing: .04em; white-space: nowrap; }
.ho-provas { padding-top: 26px; }
.ho-prova figcaption { margin-top: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); }

/* entrada: o fio corre a semana e o fim de semana acende */
.js .ho-fio { clip-path: inset(-20px 100% -20px 0); transition: clip-path 2.2s cubic-bezier(.45,.05,.25,1); }
.js .ho-viva .ho-fio { clip-path: inset(-20px -2% -20px 0); }
.js .ho-marca { opacity: 0; transform: scale(.4); transition: opacity .5s, transform .6s var(--curva); }
.js .ho-viva .ho-dia:nth-child(1) .ho-marca { transition-delay: .15s; }
.js .ho-viva .ho-dia:nth-child(2) .ho-marca { transition-delay: .3s; }
.js .ho-viva .ho-dia:nth-child(3) .ho-marca { transition-delay: .45s; }
.js .ho-viva .ho-dia:nth-child(4) .ho-marca { transition-delay: .6s; }
.js .ho-viva .ho-dia:nth-child(5) .ho-marca { transition-delay: .75s; }
.js .ho-viva .ho-dia:nth-child(6) .ho-marca { transition-delay: 1.15s; }
.js .ho-viva .ho-dia:nth-child(7) .ho-marca { transition-delay: 1.7s; }
.js .ho-viva .ho-marca { opacity: 1; transform: none; }
.js .ho-porta { opacity: 0; transition: opacity 1.6s ease 1s; }
.js .ho-viva .ho-porta { opacity: 1; }
.js .ho-provas { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--curva) 1.4s, transform 1.2s var(--curva) 1.4s; }
.js .ho-viva .ho-provas { opacity: 1; transform: none; }
.js .ho-sem-atraso * { transition-delay: 0s !important; }

/* celular e tablet em pé: os dias úteis numa régua curta; sábado e domingo descem dentro da porta de luz */
@media (max-width: 860px) {
  .ho-chamada { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .ho-t2 { padding-left: .5em; }
  .ho-semana-bloco {
    --ho-linha: 58px;
    margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ho-semana, .ho-provas { display: contents; }
  .ho-dia { height: var(--ho-linha); grid-row: 1; }
  .ho-dia .ho-nome { font-family: var(--f-texto); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding-bottom: 18px; }
  .ho-p-util { grid-row: 2; grid-column: 1 / -1; margin-top: 52px; }
  .ho-fim { grid-column: 1 / -1; height: auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; padding: 0 22px; }
  .ho-hora { font-size: 13px; top: calc(100% + 10px); }
  .ho-fim:nth-child(6) { grid-row: 3; margin-top: 56px; padding-top: 64px; }
  .ho-fim:nth-child(7) { grid-row: 5; margin-top: 40px; }
  .ho-fim .ho-nome { font-family: var(--f-display); font-size: clamp(42px, 12.5vw, 60px); letter-spacing: 0; text-transform: none; padding: 0; order: 2; }
  .ho-fim .ho-marca { position: relative; left: auto; bottom: auto; flex: none; order: 1; }
  .ho-p-sab { grid-row: 4; grid-column: 1 / -1; padding: 14px 22px 0 62px; }
  .ho-p-dom { grid-row: 6; grid-column: 1 / -1; padding: 14px 22px 44px 62px; }
  .ho-porta { position: relative; grid-row: 3 / 7; grid-column: 1 / -1; inset: auto; margin-top: 56px; grid-template-columns: 1fr; gap: 0; }
  .ho-porta i + i { display: none; }
  .ho-porta { width: min(100%, 560px); }
  .ho-porta i { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  .ho-prova { position: relative; z-index: 1; }
  .ho-fio { top: calc(var(--ho-linha) - 20px); width: 100%; }
  .ho-semana-bloco { margin-top: 72px; }
  .js .ho-provas > * { transition: opacity 1s var(--curva) 1.2s, transform 1.2s var(--curva) 1.2s; }
}

@media (prefers-reduced-motion: reduce) {
  .ho-luz i, .ho-porta i::after { animation: none; }
  .js .ho-fio { clip-path: none; }
  .js .ho-marca, .js .ho-porta, .js .ho-provas, .js .ho-provas > * { opacity: 1; transform: none; }
}