/* ══════════════════════════════════════════════════════════════
   Prohall Professional — LP Criadoras de Conteúdo · Beauty Fair 2026
   ══════════════════════════════════════════════════════════════ */

:root {
  --ph-ink: 22, 17, 15;          /* #16110F — texto e fundos escuros */
  --ph-ink-soft: 33, 25, 23;     /* #211917 — cards sobre o fundo escuro */
  --ph-red: 211, 18, 42;         /* #D3122A — vermelho da marca / CTA */
  --ph-red-light: 255, 90, 105;  /* #FF5A69 — rótulos sobre fundo escuro */
  --ph-white: 255, 255, 255;     /* #FFFFFF — base da página */
  --ph-cream: 253, 244, 242;     /* #FDF4F2 — faixas rosadas */
  --ph-sand: 248, 246, 245;      /* #F8F6F5 — faixas neutras */
  --ph-line: 239, 233, 231;      /* #EFE9E7 — divisórias */
  --ph-line-warm: 239, 220, 216; /* #EFDCD8 — divisórias sobre creme */
  --ph-muted: 107, 97, 93;       /* #6B615D — texto de apoio */
  --ph-soft: 160, 147, 142;      /* #A0938E — texto terciário */
  --ph-field: 226, 218, 216;     /* #E2DAD8 — borda de campo */
  --ph-error: 176, 0, 46;        /* #B0002E — mensagens de erro */
  --ph-radius: 10px;
  --ph-radius-sm: 8px;
  --font-base: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.6;
  color: rgb(var(--ph-ink));
  background: rgb(var(--ph-white));
  overflow-x: hidden;
}
img {
  max-width: 100%;
}
input, select, textarea, button {
  font: inherit;
}
::placeholder {
  color: rgb(169, 162, 158);
}
::selection {
  background: rgb(var(--ph-red));
  color: rgb(var(--ph-white));
}
:focus-visible {
  outline: 2px solid rgb(var(--ph-red));
  outline-offset: 3px;
  border-radius: var(--ph-radius);
}

/* ---------- reveal ao rolar a página ---------- */
/* O JS observa cada .ph-reveal e escalona o --delay dentro de .ph-stagger. */
.ph-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s cubic-bezier(.2, .7, .3, 1) var(--delay, 0s),
    transform .7s cubic-bezier(.2, .7, .3, 1) var(--delay, 0s);
  will-change: opacity, transform;
}
.ph-reveal--left {
  transform: translateX(-28px);
}
.ph-reveal--right {
  transform: translateX(28px);
}
.ph-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ph-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.is-hidden {
  display: none !important;
}

/* ---------- blocos de seção ---------- */
.ph-section {
  background: rgb(var(--ph-white));
}
.ph-section--alt {
  background: rgb(var(--ph-sand));
  border-top: 1px solid rgb(var(--ph-line));
  border-bottom: 1px solid rgb(var(--ph-line));
}
.ph-section--cream {
  background: rgb(var(--ph-cream));
}
.ph-section--dark {
  background: rgb(var(--ph-ink));
  color: rgb(var(--ph-white));
}
.ph-section__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(46px, 10vw, 92px) 20px;
}
.ph-section__inner--tight {
  padding-block: clamp(34px, 8vw, 60px);
}

/* ---------- kicker (rótulo de seção) ---------- */
.ph-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--ph-red));
}
.ph-kicker--light {
  color: rgb(var(--ph-red-light));
}

/* ---------- títulos e textos de apoio ---------- */
.ph-title {
  font-weight: 700;
  font-size: clamp(26px, 6.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 10px 0 clamp(22px, 5vw, 38px);
  text-wrap: pretty;
}
.ph-title--tight {
  margin-bottom: 10px;
}
.ph-title--lg {
  font-size: clamp(28px, 7.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.ph-title--center {
  text-align: center;
}
.ph-lead {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.6;
  color: rgb(var(--ph-muted));
  max-width: 46ch;
}
.ph-lead--light {
  color: rgb(167, 158, 154);
}

/* ---------- links de texto ---------- */
.ph-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--ph-red));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ph-red), .3);
  transition: color .2s, border-color .2s;
}
.ph-link:hover {
  color: rgb(var(--ph-ink));
  border-bottom-color: rgba(var(--ph-ink), .5);
}
/* versão destacada — sem sublinhado; o retorno de hover vem da cor */
.ph-link--lg {
  gap: 10px;
  font-size: clamp(17px, 4.4vw, 19px);
  font-weight: 700;
  border-bottom: none;
}
.ph-link--lg svg {
  flex: none;
}

/* ---------- botões ---------- */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 56px;
  padding: 0 24px;
  border: none;
  border-radius: var(--ph-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.ph-btn--red {
  background: rgb(var(--ph-red));
  color: rgb(var(--ph-white));
}
.ph-btn--red:hover {
  background: rgb(var(--ph-ink));
}
.ph-btn[disabled] {
  background: rgb(201, 191, 188);
  cursor: not-allowed;
}
.ph-btn svg {
  flex: none;
}

/* ---------- selo e etiqueta ---------- */
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-red));
  color: rgb(var(--ph-white));
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ph-badge__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--ph-white));
}
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-white));
  border: 1px solid rgb(var(--ph-line-warm));
  color: rgb(var(--ph-muted));
  font-size: 14px;
  white-space: nowrap;
}
.ph-chip svg {
  color: rgb(var(--ph-red));
  flex: none;
}
.ph-chip__sep {
  width: 1px;
  height: 22px;
  background: rgb(var(--ph-line-warm));
}

/* ══════════════ TOPO ══════════════ */
.ph-topbar {
  background: rgb(var(--ph-white));
  border-bottom: 1px solid rgb(var(--ph-line));
}
.ph-topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 28px);
}
/* o logo do topo é um link para a home da marca: o hover só suaviza,
   sem mexer no tamanho, para a faixa não "pular" */
.ph-topbar__home {
  display: block;
  line-height: 0;
  transition: opacity .2s ease;
}
.ph-topbar__home:hover,
.ph-topbar__home:focus-visible {
  opacity: .7;
}
.ph-topbar__logo {
  height: 24px;
  width: auto;
  display: block;
}
.ph-topbar__divider {
  width: 1px;
  height: 22px;
  flex: none;
  background: rgb(230, 222, 220);
}
/* o nome da feira entra como texto, no lugar do logo dela: alinhado à
   altura óptica do logo da Prohall que fica ao lado */
.ph-topbar__event {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: rgb(var(--ph-ink));
}

/* ══════════════ HERO ══════════════ */
/* a foto entra como fundo do bloco inteiro e o véu vermelho do ::before
   fica por cima dela, translúcido, para o texto branco ter contraste */
.ph-hero {
  position: relative;
  isolation: isolate;
  background: rgb(var(--ph-cream)) url('../img/bg-hero.jpeg') center / cover no-repeat;
}

/* ---------- variante vermelha (ligada por $heroVermelho) ---------- */
/* O véu vermelho translúcido do ::before cobre a foto e é o que dá
   contraste ao texto, que aqui inverte para branco. Com o flag desligado
   a foto aparece limpa e os textos voltam ao escuro. */
.ph-hero--red::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ph-red), .50), rgba(var(--ph-red), .42));
}
.ph-hero--red {
  color: rgb(var(--ph-white));
}
.ph-hero--red .ph-hero__text {
  color: rgba(var(--ph-white), .88);
}
.ph-hero--red .ph-badge {
  background: rgb(var(--ph-white));
  color: rgb(var(--ph-red));
}
.ph-hero--red .ph-badge__dot {
  background: rgb(var(--ph-red));
}
.ph-hero--red .ph-btn--red {
  background: rgb(var(--ph-ink));
  color: rgb(var(--ph-white));
}
.ph-hero--red .ph-btn--red:hover {
  background: rgb(var(--ph-white));
  color: rgb(var(--ph-red));
}
.ph-hero--red .ph-chip {
  background: transparent;
  border-color: rgba(var(--ph-white), .38);
  color: rgba(var(--ph-white), .9);
}
.ph-hero--red .ph-chip svg {
  color: rgb(var(--ph-white));
}
.ph-hero--red .ph-chip__sep {
  background: rgba(var(--ph-white), .38);
}
.ph-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(44px, 10vw, 96px) 20px clamp(40px, 9vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ph-hero__title {
  font-weight: 700;
  font-size: clamp(38px, 10vw, 74px);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 18ch;
  text-wrap: pretty;
}
/* a largura é calibrada para o texto fechar em duas linhas no desktop;
   o balance divide as duas de forma pareja em vez de deixar a segunda curta */
.ph-hero__text {
  font-size: clamp(16px, 4.3vw, 20px);
  line-height: 1.55;
  color: rgb(var(--ph-muted));
  max-width: 62ch;
  text-wrap: balance;
}
.ph-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

/* ══════════════ INFLUENCIADORAS ══════════════ */
.ph-guests__head {
  margin-bottom: clamp(22px, 5vw, 34px);
  text-align: center;
}
.ph-guests__head .ph-lead {
  margin-inline: auto;
}
/* Tres por linha no desktop, duas no celular. E flex e nao grid de
   proposito: sobrando criadora na ultima linha, o justify-content
   centra o resto sozinho, para qualquer numero de itens na lista. */
.ph-guests {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 36px);
}
.ph-guest {
  width: calc((100% - 2 * clamp(20px, 4vw, 36px)) / 3);
}
/* sem caixa: a foto e o nome ficam soltos sobre o fundo da seção */
.ph-guest {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vw, 18px);
}
.ph-guest__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--ph-radius);
  overflow: hidden;
  position: relative;
  /* moldura de espera enquanto a foto oficial não entra */
  background-color: rgb(246, 231, 228);
  background-image: repeating-linear-gradient(135deg, rgba(var(--ph-ink), .05) 0 8px, transparent 8px 16px);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.ph-guest__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-guest__placeholder {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: rgb(133, 120, 116);
  background: rgba(var(--ph-white), .9);
  padding: 6px 10px;
  border-radius: var(--ph-radius);
  white-space: nowrap;
}
.ph-guest__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ph-guest__name {
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ══════════════ DIFERENCIAIS ══════════════ */
.ph-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.ph-perk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: rgb(var(--ph-white));
  border-radius: var(--ph-radius);
}
.ph-perk__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--ph-radius);
  background: rgb(253, 240, 238);
  color: rgb(var(--ph-red));
}
.ph-perk__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.ph-perk__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgb(var(--ph-muted));
}

/* ══════════════ HORÁRIOS ══════════════ */
.ph-slots__head {
  text-align: center;
}
.ph-slots__head .ph-lead {
  margin-inline: auto;
}
.ph-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(22px, 5vw, 34px);
}
.ph-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 22px;
  background: rgb(var(--ph-sand));
  border: 1px solid rgb(var(--ph-line));
  border-radius: var(--ph-radius);
  text-align: center;
}
.ph-slot__day {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--ph-soft));
}
.ph-slot__date {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ph-slot__rule {
  width: 48px;
  height: 1px;
  margin: 4px 0;
  background: rgb(var(--ph-line-warm));
}
.ph-slot__time {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
}
/* Aviso discreto: informa sem disputar atenção com o botão vermelho. */
.ph-slots__note {
  margin-top: 14px;
  padding: 16px 22px;
  border-radius: var(--ph-radius);
  background: rgb(var(--ph-sand));
  border: 1px solid rgb(var(--ph-line));
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  color: rgb(var(--ph-muted));
}

/* ══════════════ PRAZOS ══════════════ */
.ph-deadlines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(22px, 5vw, 40px);
  align-items: center;
}
.ph-deadlines__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ph-deadline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgb(var(--ph-ink-soft));
  border: 1px solid rgb(48, 38, 35);
  border-radius: var(--ph-radius);
  transition: border-color .2s, background .2s;
}
.ph-deadline:hover {
  background: rgb(40, 31, 28);
  border-color: rgb(66, 52, 48);
}
.ph-deadline__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--ph-radius);
  background: rgba(255, 90, 105, .14);
  color: rgb(var(--ph-red-light));
}
.ph-deadline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ph-deadline__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(167, 158, 154);
}
.ph-deadline__text {
  font-size: 15.5px;
  line-height: 1.45;
  color: rgb(226, 219, 216);
  text-wrap: pretty;
}
.ph-deadline__date {
  flex: none;
  margin-left: auto;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-align: right;
  color: rgb(var(--ph-red-light));
}
/* O "até" mora em cima do número, miúdo. Na mesma linha e no mesmo
   corpo de 28px ele roubaria a leitura de longe, que é da data — e
   prazo é limite, não dia marcado: sem essa palavra, "02/09" se lê como
   "as inscrições são no dia 2". */
.ph-deadline__ate {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(167, 158, 154);
}

/* ══════════════ INSCRIÇÃO ══════════════ */
.ph-signup {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 5vw, 30px);
}
.ph-signup__head {
  text-align: center;
}
/* O título é o único filho do bloco: quem afasta ele do formulário é o
   gap do .ph-signup, não a margem do <h2>. Somadas, as duas abriam um
   vão maior do que o de qualquer outra seção da página. */
.ph-signup__head .ph-title {
  margin-bottom: 0;
}

/* ---------- estrutura do formulário ---------- */
.ph-form {
  display: flex;
  flex-direction: column;
  background: rgb(var(--ph-white));
  border-radius: var(--ph-radius);
  overflow: hidden;
}
.ph-form__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 4.5vw, 34px);
  border: none;
  border-top: 1px solid rgb(240, 236, 234);
}
.ph-form__block:first-child {
  border-top: none;
}
.ph-form__block--cream {
  background: rgb(var(--ph-cream));
}
.ph-form__legend {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--ph-soft));
}
.ph-form__block--cream .ph-form__legend {
  color: rgb(176, 140, 134);
}
/* etiqueta ao lado do número do bloco: avisa que dá para pular */
.ph-form__opcional {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--ph-sand));
  border: 1px solid rgb(var(--ph-line));
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgb(var(--ph-muted));
  vertical-align: middle;
}
.ph-form__hint {
  margin-top: -6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(var(--ph-muted));
}
/* duas colunas fixas: nome + cpf / contato + e-mail / estado */
.ph-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ph-form__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(20px, 4.5vw, 34px);
  border-top: 1px solid rgb(240, 236, 234);
  text-align: center;
}
.ph-form__submit {
  width: 100%;
}
.ph-form__note {
  font-size: 13px;
  line-height: 1.5;
  color: rgb(var(--ph-soft));
  max-width: 52ch;
}

/* ---------- campos ---------- */
.ph-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* o nome ocupa a linha inteira; o resto se divide em duas colunas:
   cpf + contato, e-mail + estado */
.ph-field--full {
  grid-column: 1 / -1;
}
.ph-field__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--ph-ink));
}
.ph-field__label svg {
  color: rgb(var(--ph-soft));
}
.ph-field__input {
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgb(var(--ph-field));
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-white));
  color: rgb(var(--ph-ink));
  transition: border-color .18s;
}
.ph-field__input:focus {
  border-color: rgb(var(--ph-red));
}
select.ph-field__input {
  padding: 0 12px;
  cursor: pointer;
}
.ph-field__input.is-invalid {
  border-color: rgb(var(--ph-error));
}

/* ---------- campo com prefixo fixo (o @ das redes) ---------- */
/* Quem desenha a moldura é o grupo; o input por dentro fica sem borda,
   senão apareceriam duas caixas encostadas. */
.ph-field__grupo {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: 1px solid rgb(var(--ph-field));
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-white));
  overflow: hidden;
  transition: border-color .18s;
}
.ph-field__grupo:focus-within {
  border-color: rgb(var(--ph-red));
}
.ph-field__grupo.is-invalid {
  border-color: rgb(var(--ph-error));
}
.ph-field__prefixo {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0 14px;
  background: rgb(var(--ph-sand));
  border-right: 1px solid rgb(var(--ph-field));
  color: rgb(var(--ph-muted));
  font-weight: 500;
  user-select: none;
}
.ph-field__grupo .ph-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.ph-field__grupo .ph-field__input:focus {
  outline: none;
}
.ph-field__error {
  font-size: 13px;
  line-height: 1.45;
  color: rgb(var(--ph-error));
}
.ph-field__error:empty {
  display: none;
}

/* ---------- seletor de horário: dia → período → janela ---------- */
.ph-picker {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ph-picker__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ph-picker__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(176, 140, 134);
}
/* base comum dos três níveis de botão */
.ph-day,
.ph-period,
.ph-time {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--ph-line-warm));
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-white));
  color: rgb(var(--ph-ink));
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.ph-day:hover:not(:disabled),
.ph-period:hover:not(:disabled),
.ph-time:hover:not(:disabled) {
  border-color: rgba(var(--ph-red), .5);
}
.ph-day.is-selected,
.ph-period.is-selected,
.ph-time.is-selected {
  background: rgb(var(--ph-red));
  border-color: rgb(var(--ph-red));
  color: rgb(var(--ph-white));
}
/* esgotado continua na tela como referência, mas sem ação */
.ph-day:disabled,
.ph-period:disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* passo 1 · dia */
.ph-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.ph-day {
  gap: 4px;
  padding: 16px 18px;
}
.ph-day__week {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--ph-soft));
}
.ph-day.is-selected .ph-day__week {
  color: rgba(var(--ph-white), .8);
}
.ph-day__date {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}
/* Só aparece quando tem algo a dizer — dia lotado. Com vaga, o botão
   mostra apenas o dia e a data. */
.ph-day__note {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgb(var(--ph-muted));
}
.ph-day__note:empty {
  display: none;
}
.ph-day.is-selected .ph-day__note {
  color: rgba(var(--ph-white), .85);
}

/* passo 2 · período */
.ph-periods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ph-period {
  gap: 3px;
  padding: 14px 18px;
}
.ph-period__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ph-period__count {
  font-size: 12.5px;
  color: rgb(var(--ph-muted));
}
.ph-period.is-selected .ph-period__count {
  color: rgba(var(--ph-white), .85);
}

/* passo 3 · janela de 30 minutos */
.ph-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.ph-time {
  gap: 2px;
  padding: 12px 14px;
}
.ph-time__faixa {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ph-time__vagas {
  font-size: 12px;
  color: rgb(var(--ph-soft));
}
.ph-time.is-selected .ph-time__vagas {
  color: rgba(var(--ph-white), .85);
}

/* confirmação da escolha, logo abaixo dos três passos */
.ph-picker__resumo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--ph-radius-sm);
  background: rgb(var(--ph-white));
  border: 1px solid rgb(var(--ph-line-warm));
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(58, 50, 48);
}
.ph-picker__resumo strong {
  font-weight: 700;
}
/* aviso de janela que lotou enquanto o formulário estava aberto */
.ph-picker__resumo.is-alerta {
  border-color: rgba(var(--ph-error), .35);
  color: rgb(var(--ph-error));
}

/* ---------- aceites ---------- */
.ph-accepts {
  display: grid;
  gap: 14px;
}
.ph-accept {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(58, 50, 48);
  cursor: pointer;
}
.ph-accept__input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  accent-color: rgb(var(--ph-red));
  cursor: pointer;
}

/* ---------- confirmação ---------- */
.ph-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: clamp(28px, 7vw, 56px);
  background: rgb(var(--ph-white));
  border-radius: var(--ph-radius);
}
.ph-success__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ph-radius);
  background: rgb(var(--ph-red));
  color: rgb(var(--ph-white));
}
.ph-success .ph-title {
  margin: 0;
  font-size: clamp(28px, 7.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.ph-success .ph-lead {
  font-size: clamp(15.5px, 4.2vw, 18px);
}
.ph-success .ph-lead strong {
  font-weight: 700;
  color: rgb(var(--ph-ink));
}
.ph-success__note {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgb(var(--ph-soft));
  max-width: 46ch;
  margin-inline: auto;
}
.ph-success__note--boa {
  color: rgb(var(--ph-ink));
  font-size: 16px;
}

/* ══════════════ FOOTER ══════════════ */
.ph-footer {
  background: rgb(var(--ph-ink));
  color: rgb(var(--ph-white));
}
.ph-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px, 8vw, 56px) 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.ph-footer__logo {
  height: 28px;
  width: auto;
  display: block;
}
.ph-footer__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgb(167, 158, 154);
  max-width: 58ch;
}
.ph-footer__mail {
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(var(--ph-white));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ph-white), .35);
  transition: border-color .2s;
}
.ph-footer__mail:hover {
  border-bottom-color: rgb(var(--ph-white));
}
.ph-footer__copy {
  font-size: 12px;
  color: rgb(122, 113, 110);
}

/* ══════════════ RESPONSIVO GERAL ══════════════ */
@media (max-width: 560px) {
  .ph-guest {
    width: calc((100% - clamp(20px, 4vw, 36px)) / 2);
  }
  .ph-topbar__logo {
    height: 20px;
  }
  .ph-topbar__event {
    font-size: 14.5px;
  }
  .ph-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .ph-chip {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .ph-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ph-field--full {
    grid-column: auto;
  }
  .ph-deadline {
    flex-wrap: wrap;
    gap: 12px 14px;
  }
  .ph-deadline__body {
    flex: 1 1 100%;
    order: 3;
  }
  .ph-deadline__date {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  /* no celular a agenda vira lista: dois dias por linha e horários
     em duas colunas, para o polegar acertar sem esforço */
  .ph-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ph-day__date {
    font-size: 20px;
  }
  .ph-day__note {
    font-size: 11.5px;
  }
  .ph-periods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ph-period {
    padding: 12px 10px;
    text-align: center;
    align-items: center;
  }
  .ph-period__name {
    font-size: 15px;
  }
  .ph-times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ══════════════ CTA REPETIDO ══════════════ */
/* Blocos de chamada plantados ao longo da página, logo depois dos
   trechos que constroem interesse (diferenciais e horários). */
.ph-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(26px, 5vw, 40px);
  padding: clamp(20px, 4vw, 28px);
  border-radius: var(--ph-radius);
  text-align: center;
}
.ph-cta__text {
  font-size: clamp(15.5px, 4vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}
.ph-cta--claro {
  background: rgb(var(--ph-white));
}
.ph-cta--escuro {
  background: rgb(var(--ph-ink-soft));
}
.ph-cta--escuro .ph-cta__text {
  color: rgb(var(--ph-white));
}
/* Só o botão, sem caixa em volta — serve nas seções claras e na escura. */
.ph-cta--nu {
  padding: 0;
  background: none;
}

/* ══════════════ CTA FIXO DO CELULAR ══════════════ */
/* Fica fora da tela até o JS marcar .is-on. Só existe no celular:
   no desktop os botões do corpo da página já dão conta. */
.ph-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--ph-white), .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgb(var(--ph-line));
  transform: translateY(130%);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.ph-sticky.is-on {
  transform: none;
}
.ph-sticky .ph-btn {
  width: 100%;
  min-height: 52px;
}
@media (min-width: 761px) {
  .ph-sticky {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-sticky {
    transition: none;
  }
}