/* ==========================================================================
   iHost Agenda — página de salão de beleza
   Só o que a home não tem. Herda todos os tokens e componentes de style.css;
   nada aqui redefine o que já existe lá.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Prints reais do app
   As imagens já trazem a moldura do aparelho e têm os cantos transparentes,
   por isso não usam .phone (dobraria a borda) e a sombra vem de drop-shadow,
   que segue o recorte em vez de desenhar um retângulo atrás.
   -------------------------------------------------------------------------- */

.pshot {
  width: var(--w, 17rem);
  height: auto;
  display: block;
  flex: 0 0 auto;
  /* Os prints são recortes só da tela: a moldura do aparelho vem daqui.
     Anel claro colado no vidro, bisel preto por fora, e a sombra da luz única. */
  border-radius: calc(var(--w, 17rem) / 11);
  box-shadow:
    0 0 0 1.5px #38406A,
    0 0 0 6px #0B0B0D,
    var(--lift-4);
}

/* dentro do leque do hero, o posicionamento é o mesmo das antigas .phone */
.fan .pshot { position: absolute; }

.side__show .pshot { position: relative; z-index: 1; --w: min(16rem, 42vw); }
.feat__show .pshot { --w: min(17rem, 44vw); }
.dur__show .pshot  { --w: min(16rem, 42vw); }

@media (max-width: 40rem) {
  .side__show .pshot,
  .feat__show .pshot,
  .dur__show .pshot { --w: min(15.5rem, 72vw); }
}

/* --------------------------------------------------------------------------
   Telas montadas em HTML pelo assets/js/site.js — mantidas para reuso
   -------------------------------------------------------------------------- */

.ap-edit { display: flex; gap: .3em; color: #7FA0FF; flex: 0 0 auto; }
.ap-edit svg:last-child { color: #FF8A8A; }

.ap-note {
  margin: 0 0 .1em;
  font-size: .8em;
  line-height: 1.42;
  color: #A3B2D8;
}
.ap-note--tight { margin: .15em 0 .35em; font-weight: 700; color: #C4D0EE; }

/* dia da semana, com os intervalos que o salão abre */
.ap-day {
  background: var(--navy-2);
  border-radius: .5em;
  padding: .55em .6em;
  display: grid;
  gap: .35em;
}
.ap-day > b { font-size: .9em; color: #DCE4FA; }

.ap-slotline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  background: var(--field);
  border: 1px solid rgba(143,174,255,.22);
  border-radius: .38em;
  padding: .34em .5em;
  font-size: .84em;
  color: var(--on-field);
}
.ap-slotline i { font-style: normal; color: #FF8A8A; font-weight: 700; }

.ap-dayacts { display: flex; gap: .34em; }
.ap-add, .ap-all {
  flex: 1 1 0;
  text-align: center;
  border-radius: .38em;
  padding: .32em .3em;
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
}
.ap-add { color: #6C97FF; border: 1px solid rgba(75,124,255,.55); }
.ap-all { color: #C4D0EE; border: 1px solid #46538A; }

/* grade dos horários livres — o buraco do almoço fica visível */
.ap-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3em;
}
.ap-slots span {
  border: 1px solid rgba(143,174,255,.3);
  border-radius: .34em;
  padding: .3em .1em;
  text-align: center;
  font-size: .78em;
  font-weight: 700;
  color: #DCE4FA;
}
.ap-slots span.gap { box-shadow: 0 0 0 1.5px var(--blue); border-color: transparent; }

/* botão de conversa direta na lista de clientes */
.ap-zap {
  flex: 0 0 auto;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: var(--green);
  color: #06240F;
  display: grid;
  place-items: center;
}

/* fim do caminho do cliente */
.ap-done {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .28em;
  padding: 1.2em .9em;
}
.ap-done__mark { color: var(--green); line-height: 0; margin-bottom: .35em; }
.ap-done b { font-size: 1.02em; font-weight: 800; color: var(--white); }
.ap-done small { font-size: .84em; color: #A3B2D8; }

/* --------------------------------------------------------------------------
   Blocos da página
   -------------------------------------------------------------------------- */

/* a dor, em três cartões, logo abaixo da primeira dobra */
.pains { padding: clamp(2.2rem, 5vw, 3.6rem) 0; background: var(--bg-2); }
.pains__row { display: grid; gap: .9rem; }
@media (min-width: 54rem) { .pains__row { grid-template-columns: repeat(3, 1fr); } }

.pain {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--lift-1);
}
.pain h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.pain p { margin: 0; font-size: .96rem; color: var(--txt-2); }
.pain__ico {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--field);
  color: var(--blue-lit);
  margin-bottom: .85rem;
}

/* o lembrete — o argumento mais forte da página */
.remind { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.remind__in {
  background: linear-gradient(180deg, var(--surf-2), var(--surf));
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  box-shadow: var(--lift-2);
}
@media (min-width: 58rem) { .remind__in { grid-template-columns: 1.05fr .95fr; } }
.remind h2 { margin-bottom: .9rem; }
.remind__say > p { font-size: 1.02rem; }

/* a conversa, do jeito que o cliente recebe */
.talk {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 1.1rem 1rem;
  display: grid;
  gap: .55rem;
}
.talk__day {
  justify-self: center;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--txt-3);
  background: var(--navy-3);
  border-radius: 999px;
  padding: .2rem .7rem;
}
.talk__msg {
  justify-self: start;
  max-width: 88%;
  background: var(--surf-2);
  border-radius: var(--r-s) var(--r-s) var(--r-s) var(--r-xs);
  padding: .7rem .85rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--txt);
}
.talk__msg time {
  display: block;
  margin-top: .35rem;
  font-size: .88rem;
  color: var(--txt-3);
}
.talk__note { margin: 0; font-size: .88rem; color: var(--txt-3); text-align: center; }

/* prova de encaixe: duração real de cada serviço */
.dur { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--bg-2); }
.dur__head { margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem); }
.dur__head p { font-size: 1.04rem; max-width: 44rem; }
.dur__row { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
@media (min-width: 58rem) { .dur__row { grid-template-columns: 1fr 1fr; } }

.bars { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; gap: .3rem; }
.bars__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.bars__top b { font-weight: 700; color: var(--txt); }
.bars__top span { color: var(--txt-3); font-size: .88rem; white-space: nowrap; }
.bars__track { height: .55rem; border-radius: 999px; background: var(--navy-3); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-lit)); }

.dur__leg { text-align: left; margin-top: 1.1rem; }

.dur__show { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.dur__show .phone { --w: min(15rem, 40vw); }
.dur__show .shot { width: min(19rem, 88%); }

/* No celular o CTA da barra é o único caminho visível durante quase toda a
   rolagem. 48px é o alvo de toque que o Google cobra em usabilidade móvel;
   o padrão de .btn--sm dá 44px. Sobe só aqui, sem mexer na home. */
@media (max-width: 60rem) {
  .nav__acts .btn--sm { min-height: 48px; display: inline-flex; align-items: center; }
}

/* faixa final antes do rodapé */
.close { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(3rem, 7vw, 5rem); text-align: center; }
.close h2 { margin-bottom: .9rem; }
.close p { margin: 0 auto 1.6rem; max-width: 40rem; font-size: 1.04rem; }
.close .ticks { justify-content: center; max-width: 30rem; margin: 1.4rem auto 0; }

/* --------------------------------------------------------------------------
   Leque do hero: com os prints recortados a moldura ficou mais estreita,
   então os laterais precisavam abrir mais para mostrar tela de verdade.
   -------------------------------------------------------------------------- */
.fan .pshot.fan__b { transform: translate(-62%, -7%) rotate(-7deg); }
.fan .pshot.fan__c { transform: translate(62%, 5%) rotate(7deg); }
@media (max-width: 700px) {
  .fan .pshot.fan__b { transform: translate(-58%, -9%) rotate(-8deg); }
  .fan .pshot.fan__c { transform: translate(58%, 7%) rotate(8deg); }
}