/* contato · "Onde e quando" + fecho — prefixo ct- */

.ct-secao { position: relative; isolation: isolate; padding: var(--wf-secao) var(--wf-margem); background: var(--hd-papel); overflow-x: clip; }
/* luz do sistema; some antes do começo e do fim da seção */
.ct-secao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 28% at 86% 20% in oklab, color-mix(in oklab, var(--hd-nevoa) 80%, transparent), transparent),
    radial-gradient(46% 24% at 22% 80% in oklab, color-mix(in oklab, var(--hd-pessego) 75%, transparent), transparent);
}
.ct-dentro {
  max-width: var(--wf-largura); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.ct-titulo { margin-top: 1.4rem; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); }

/* estado: a frase viva da seção */
.ct-estado { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; font-family: var(--hd-serifa); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); line-height: 1.15; }
.ct-estado[hidden] { display: none; }
.ct-estado b { font-weight: 400; }
.ct-estado-texto > span { font-style: italic; color: var(--wf-laranja-texto); }
.ct-estado-luz {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, transparent 32%), var(--hd-perola);
  box-shadow: 0 0 0 1px rgba(42, 33, 29, .14), 0 .6rem .8rem -.5rem rgba(90, 60, 40, .5);
  transition: background .8s, box-shadow .8s;
}
.ct-estado[data-ct-tipo="aberto"] .ct-estado-luz {
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, transparent 30%), radial-gradient(circle at 62% 70%, var(--hd-laranja), var(--hd-ambar) 42%, transparent 74%), var(--hd-perola);
  box-shadow: 0 0 0 1px rgba(232, 100, 27, .2), 0 0 1.6rem .2rem color-mix(in oklab, var(--hd-ambar) 60%, transparent);
}
.ct-estado[data-ct-tipo="pausa"] .ct-estado-luz {
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, transparent 30%), radial-gradient(circle at 62% 74%, color-mix(in oklab, var(--hd-ambar) 80%, transparent), transparent 56%), var(--hd-perola);
}

.ct-endereco { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--hd-fio); font-style: normal; color: var(--hd-tinta-suave); }
.ct-endereco b { display: block; margin-bottom: .3rem; font-family: var(--hd-serifa); font-weight: 400; font-size: var(--wf-h3); line-height: 1.15; color: var(--hd-tinta); }
.ct-canais { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; }

/* mapa: moldura do sistema, desenhada para ficar bem mesmo sem o mapa */
.ct-mapa { position: relative; padding-bottom: 1.7rem; }
.ct-moldura {
  position: relative; aspect-ratio: 1 / .86;
  border-radius: 15rem 2.5rem 2.5rem 2.5rem; overflow: hidden;
  background: var(--hd-nevoa);
  box-shadow: 0 2.8rem 4.4rem -2.8rem rgba(90, 60, 40, .6), 0 0 0 1px rgba(255, 255, 255, .7);
}
.ct-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.72) sepia(.12); transition: opacity .8s; }
.ct-moldura iframe.ct-espera { opacity: 0; }
.ct-vazio { position: absolute; inset: 0; background: radial-gradient(70% 70% at 52% 50% in oklab, var(--hd-pessego), var(--hd-nevoa)); }
.ct-vazio svg { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--hd-sem); font-weight: 500; }
.ct-pino {
  position: absolute; left: 52%; top: 50%; width: 2.6rem; height: 2.6rem; translate: -50% -100%; rotate: 45deg;
  border-radius: 50% 50% 8% 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 8%, transparent 30%), radial-gradient(circle at 64% 66%, var(--hd-laranja), var(--hd-ambar) 46%, var(--hd-perola) 82%);
  box-shadow: .5rem .5rem 1rem -.3rem rgba(120, 60, 20, .6);
}
.ct-rota { position: absolute; left: 1.6rem; bottom: 0; box-shadow: 0 1.2rem 2rem -1rem rgba(42, 33, 29, .7); }
.ct-numero { position: absolute; right: -1.4rem; bottom: -.6rem; width: clamp(8rem, 14vw, 12rem); text-align: center; }
.ct-numero img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 .4rem var(--hd-papel-claro), 0 1.6rem 2.2rem -1.2rem rgba(90, 60, 40, .7); }
.ct-numero figcaption { position: absolute; left: 50%; top: -1.1rem; translate: -50% 0; white-space: nowrap; padding: .45rem .95rem; border-radius: 999px; background: var(--hd-papel-claro); box-shadow: 0 .8rem 1.4rem -.8rem rgba(90, 60, 40, .6); font-size: var(--wf-mini); font-weight: 500; color: var(--hd-tinta); }

/* a semana: sete formas, uma por dia, com o horário embaixo */
.ct-semana { grid-column: 1 / -1; margin-top: clamp(1rem, 2vw, 2rem); }
.ct-dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.ct-dia { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 0 .3rem; }
.ct-dia + .ct-dia::before { content: ""; position: absolute; left: 0; top: 3.2rem; width: 100%; height: 1px; translate: -50% 0; z-index: -1; background: var(--hd-fio); }
.ct-dia i { position: relative; width: min(100%, 6.4rem); aspect-ratio: 1; margin-bottom: 1rem; border-radius: 50%; background: var(--hd-papel); }
.ct-dia span { font-family: var(--hd-serifa); font-size: 1.45rem; line-height: 1.1; }
.ct-dia u { text-decoration: none; }
.ct-dia small { font-size: var(--wf-mini); line-height: 1.5; color: var(--hd-tinta-suave); }
.ct-dia-aberto i, .ct-dia-manha i {
  background: radial-gradient(circle at 34% 26%, #fff 0 7%, transparent 28%), radial-gradient(circle at 62% 74%, var(--hd-laranja), var(--hd-ambar) 34%, transparent 70%), var(--hd-perola);
  box-shadow: 0 0 0 1px rgba(232, 100, 27, .12), 0 1.4rem 1.5rem -1rem rgba(200, 90, 20, .7);
}
/* sábado só de manhã: a luz fica mais baixa */
.ct-dia-manha i { background: radial-gradient(circle at 34% 26%, #fff 0 7%, transparent 28%), radial-gradient(circle at 62% 84%, color-mix(in oklab, var(--hd-ambar) 90%, transparent), transparent 44%), var(--hd-perola); box-shadow: 0 0 0 1px rgba(232, 100, 27, .12), 0 1.4rem 1.5rem -1rem rgba(200, 90, 20, .4); }
.ct-dia-consulte i { border: 1.5px dashed color-mix(in oklab, var(--hd-tinta-suave) 70%, transparent); }
.ct-dia-fechado i { border: 1px solid var(--hd-fio); }
.ct-dia.ct-hoje span { font-style: italic; color: var(--wf-laranja-texto); }
.ct-dia.ct-hoje i::after { content: ""; position: absolute; inset: -.55rem; border-radius: 50%; border: 1px solid var(--hd-laranja); }
.ct-dia.ct-hoje i::before { content: "hoje"; position: absolute; left: 50%; top: -2.3rem; translate: -50% 0; font-family: var(--hd-sem); font-style: normal; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wf-laranja-texto); }

.ct-horario { width: 100%; border-collapse: collapse; }
@media (min-width: 901px) { .ct-horario { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.ct-horario caption { text-align: left; padding-bottom: .8rem; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.ct-horario th, .ct-horario td { padding: .7rem 0; border-top: 1px solid var(--hd-fio); text-align: left; font-weight: 300; vertical-align: baseline; }
.ct-horario th { width: 9.5rem; font-family: var(--hd-serifa); font-style: italic; font-size: 1.3rem; font-weight: 400; }
.ct-horario td { color: var(--hd-tinta-suave); }
.ct-horario .ct-hoje th, .ct-horario .ct-hoje td { color: var(--wf-laranja-texto); }

/* fecho: a pergunta do hero volta, respondida */
.ct-fecho { max-width: var(--wf-largura); margin: var(--wf-secao) auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); }
.ct-palco { position: relative; text-align: center; }
.ct-palco::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 56%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--hd-pessego) 90%, transparent), transparent); }
.ct-gota { display: block; width: 124%; max-width: none; margin: -16% -12% -12%; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); animation: ct-respira 9s ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes ct-respira { to { transform: scale(1.025, .985); } }
.ct-legenda { position: relative; padding-top: 2.6rem; font-family: var(--hd-serifa); font-style: italic; font-size: 1.1rem; letter-spacing: .04em; color: var(--hd-tinta-suave); }
.ct-legenda::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 1.8rem; background: var(--hd-laranja); }
/* a pergunta do hero (esfera) e a resposta (gota) */
.ct-eco { display: flex; align-items: center; gap: .4rem; margin-left: -1rem; font-family: var(--hd-serifa); font-style: italic; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.25; color: var(--hd-tinta-suave); }
.ct-eco img { flex: none; width: 4.6rem; height: 4.6rem; object-fit: cover; object-position: 50% 62%; scale: 1.5; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.ct-frase { margin-top: .9rem; }
.ct-frase p { font-family: var(--hd-serifa); font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.4rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.ct-frase em { font-style: italic; color: var(--wf-laranja-texto); }
.ct-frase footer { margin-top: 1.4rem; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.ct-fecho-texto .wf-botao { margin-top: 2.2rem; }

@media (max-width: 900px) {
  .ct-dentro, .ct-fecho { grid-template-columns: minmax(0, 1fr); }
  .ct-moldura { aspect-ratio: 1 / 1.02; border-radius: 9rem 1.75rem 1.75rem 1.75rem; }
  .ct-mapa { padding-bottom: 4.6rem; }
  .ct-numero { right: -.2rem; bottom: 3.6rem; width: 7.4rem; }
  .ct-rota { left: 0; right: 0; bottom: 0; justify-content: space-between; }
  .ct-estado-texto > span { display: block; }
  .ct-canais .wf-botao { width: 100%; justify-content: space-between; }
  .ct-semana { margin-top: 1.6rem; }
  .ct-dia { padding: 0 .15rem; }
  .ct-dia i { margin-bottom: .5rem; }
  .ct-dia + .ct-dia::before { top: 1.4rem; }
  .ct-dia span { font-size: 1.05rem; }
  .ct-dia u, .ct-dia small { display: none; }
  .ct-dia.ct-hoje i::after { inset: -.3rem; }
  .ct-dia.ct-hoje i::before { top: -1.9rem; letter-spacing: .08em; }
  .ct-horario { margin-top: 1.8rem; }
  .ct-horario th { width: 7.6rem; font-size: 1.2rem; }
  .ct-horario td span { display: block; height: 0; overflow: hidden; }
  .ct-palco { max-width: 21rem; margin: -2rem auto 0; }
  .ct-gota { width: 100%; margin: -10% 0 -12%; }
  .ct-eco { margin-left: -.9rem; }
  .ct-eco img { width: 3.6rem; height: 3.6rem; }
}
