/* =====================================================================
   ABEPRO, página de contato — prefixo ct-
   ---------------------------------------------------------------------
   A ideia que organiza a página: antes de escrever, a pessoa precisa
   escolher o canal. Por isso os canais vêm primeiro, com o tempo de
   resposta declarado em cada um, e o formulário aparece depois — já
   sabendo para qual área a mensagem vai.
   ===================================================================== */

/* =====================================================================
   1. Cabeçalho
   ===================================================================== */
.ct-head { position: relative; overflow: hidden; background: linear-gradient(130deg, var(--brand-950) 0%, var(--brand-800) 55%, var(--brand-600) 100%); padding: var(--space-8) 0 var(--space-10); }
.ct-head__deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ct-head__in { position: relative; z-index: 1; max-width: 720px; }
.ct-head__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, var(--text-4xl)); line-height: 1.12; color: #fff; margin: 14px 0 0; }
.ct-head__lead { font-size: var(--text-md); line-height: 1.62; color: rgba(255,255,255,.82); margin-top: 16px; }

/* =====================================================================
   2. Canais de atendimento (sobrepostos ao cabeçalho)
   ===================================================================== */
.ct-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: calc(var(--space-8) * -1); position: relative; z-index: 2; }
.ct-channel { display: flex; flex-direction: column; gap: 9px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-md); text-decoration: none; color: inherit; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base); }
.ct-channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.ct-channel__ic { width: 44px; height: 44px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; background: var(--brand-600); }
.ct-channel--wa .ct-channel__ic { background: #25d366; }
.ct-channel--mail .ct-channel__ic { background: var(--brand-700); }
.ct-channel--local .ct-channel__ic { background: var(--accent-600); }
.ct-channel--assoc .ct-channel__ic { background: var(--deco-teal, var(--brand-500)); }
.ct-channel__k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-500); margin-top: 3px; }
.ct-channel__v { font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; color: var(--neutral-900); line-height: 1.35; word-break: break-word; }
.ct-channel__note { font-size: 12.5px; line-height: 1.5; color: var(--neutral-500); margin-top: auto; padding-top: 8px; }
.ct-channel__note i { color: var(--brand-400); margin-right: 5px; }

/* =====================================================================
   3. Grade: formulário + coluna de apoio
   ===================================================================== */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr; gap: var(--space-6); align-items: start; }
.ct-aside { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: 90px; }

/* =====================================================================
   4. Formulário
   ===================================================================== */
.ct-form { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-2xl); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.ct-form__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.2; color: var(--brand-900); margin: 10px 0 0; }
.ct-form__sub { font-size: 14.5px; line-height: 1.6; color: var(--neutral-600); margin: 10px 0 0; }
.ct-step { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-500); display: flex; align-items: center; gap: 9px; margin: var(--space-5) 0 14px; }
.ct-step::after { content: ""; flex: 1; height: 1px; background: var(--neutral-100); }
.ct-step:first-of-type { margin-top: var(--space-4); }

/* Escolha do assunto: cartões de rádio, não um <select> escondido no meio
   do formulário. É a decisão que define para onde a mensagem vai. */
.ct-subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ct-subject { position: relative; }
.ct-subject input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-subject__box { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 14px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-lg); cursor: pointer; background: var(--white); transition: border-color var(--duration-base), background var(--duration-base), box-shadow var(--duration-base); }
.ct-subject__box i { font-size: 15px; color: var(--brand-500); transition: color var(--duration-base); }
.ct-subject__box span { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--neutral-800); }
.ct-subject__box:hover { border-color: var(--brand-300); background: var(--brand-50); }
.ct-subject input:checked + .ct-subject__box { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(24,90,157,.12); }
.ct-subject input:checked + .ct-subject__box i { color: var(--brand-700); }
.ct-subject input:focus-visible + .ct-subject__box { outline: 3px solid var(--brand-300); outline-offset: 2px; }

/* Para onde a mensagem vai: aparece assim que o assunto é escolhido. */
.ct-routing { display: none; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 13px 16px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.55; color: var(--neutral-700); }
.ct-routing.is-on { display: flex; }
.ct-routing i { color: var(--brand-600); margin-top: 2px; }
.ct-routing strong { color: var(--brand-800); font-weight: 600; }
.ct-routing a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

.ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ct-fields > .field--full { grid-column: 1 / -1; }
.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--neutral-100); }
.ct-form__note { font-size: 12.5px; line-height: 1.5; color: var(--neutral-500); flex: 1 1 220px; }
.ct-form__note i { color: var(--brand-400); margin-right: 5px; }

/* =====================================================================
   5. Coluna de apoio
   ===================================================================== */
.ct-panel { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: 22px; }
.ct-panel--brand { background: var(--brand-950); border-color: var(--brand-900); }
.ct-panel__title { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 16px; }
.ct-panel--brand .ct-panel__title { color: var(--accent-400); }

/* Horário de atendimento */
.ct-hours { display: flex; flex-direction: column; gap: 0; }
.ct-hours div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100); font-size: 13.5px; }
.ct-hours div:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-hours dt { color: var(--neutral-600); }
.ct-hours dd { margin: 0; color: var(--neutral-900); font-weight: 600; white-space: nowrap; }
.ct-hours dd.is-closed { color: var(--neutral-400); font-weight: 400; }
.ct-now { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 5px 12px; margin-top: 14px; }
.ct-now--open { background: var(--success-100); color: var(--success-700); }
.ct-now--closed { background: var(--neutral-100); color: var(--neutral-600); }
.ct-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Diretório de e-mails */
.ct-dept { display: flex; flex-direction: column; gap: 2px; }
.ct-dept a { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radius-md); text-decoration: none; transition: background var(--duration-fast); }
.ct-dept a:hover { background: var(--brand-50); }
.ct-dept__k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-500); }
.ct-dept__v { font-family: var(--font-mono); font-size: 12.5px; color: var(--neutral-700); word-break: break-all; }
.ct-dept a:hover .ct-dept__v { color: var(--brand-700); }

/* Endereço em destaque */
.ct-addr { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.65; }
.ct-addr strong { display: block; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.ct-addr .btn { margin-top: 16px; }

/* Redes sociais */
.ct-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-social a { width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--neutral-200); background: var(--white); color: var(--neutral-600); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base), transform var(--duration-base); }
.ct-social a:hover { transform: translateY(-2px); color: #fff; background: var(--brand-600); border-color: var(--brand-600); }

/* =====================================================================
   6. Mapa e localização
   ===================================================================== */
.ct-map { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-2xl); overflow: hidden; }
.ct-map__body { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ct-map__frame { position: relative; min-height: 320px; background: var(--brand-950); }
.ct-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Enquanto não há incorporação de mapa, um padrão de quadras faz as vezes. */
.ct-map__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.65); font-size: 13px; text-align: center; padding: var(--space-4);
  background-image: linear-gradient(rgba(122,177,238,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(122,177,238,.09) 1px, transparent 1px);
  background-size: 46px 46px; }
.ct-map__pin { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-500); color: var(--brand-950); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; box-shadow: 0 0 0 10px rgba(235,176,80,.16); }

/* =====================================================================
   7. Perguntas frequentes
   ===================================================================== */
.ct-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ct-faq details { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-base); }
.ct-faq details[open] { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.ct-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--neutral-900); line-height: 1.45; list-style: none; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--brand-500); flex-shrink: 0; transition: transform var(--duration-base); }
.ct-faq details[open] summary::after { transform: rotate(180deg); }
.ct-faq summary:hover { color: var(--brand-700); }
.ct-faq__a { padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: var(--neutral-600); }
.ct-faq__a a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1023px) {
  .ct-channels { grid-template-columns: repeat(2, 1fr); margin-top: calc(var(--space-6) * -1); }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-aside { position: static; }
  .ct-map { grid-template-columns: 1fr; }
  .ct-map__frame { min-height: 260px; order: -1; }
  .ct-faq { grid-template-columns: 1fr; }
  .ct-subjects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ct-head { padding-bottom: var(--space-8); }
  .ct-channels { grid-template-columns: 1fr; }
  .ct-fields { grid-template-columns: 1fr; }
  .ct-form { padding: var(--space-4); }
  .ct-form__foot .btn { width: 100%; justify-content: center; }
}