/* Seção independente; os únicos estilos externos são os tokens e as fontes. */
.perfis {
  --perfis-frame: color-mix(in srgb, var(--void) 72%, var(--dim));
  --perfis-screen: color-mix(in srgb, var(--void) 82%, var(--dim));
  --perfis-card: color-mix(in srgb, var(--void) 60%, var(--dim));
  padding: var(--s60) 0 var(--s96);
  color: var(--white); /* sem fundo próprio: o degradê da página passa por trás */
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.5;
}
.perfis *, .perfis *::before, .perfis *::after { box-sizing: border-box; }
.perfis p, .perfis h2, .perfis h3, .perfis h4, .perfis figure { margin: 0; }
.perfis h2, .perfis h3, .perfis h4 { font-weight: 400; }
.perfis [hidden] { display: none !important; }
.perfis :focus-visible { outline: 2px solid var(--saffron); outline-offset: 5px; border-radius: 3px; }
.perfis .perfis__inner {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
  display: grid;
  /* mesmas colunas do bloco de introdução das outras seções (rótulo à esquerda), mais o celular */
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(0, 320px);
  gap: var(--s24) var(--s60);
  align-items: start;
}
.perfis .perfis__eyebrow { padding-top: 14px; } /* o estilo vem de .eyebrow, como nas outras seções */
.perfis .perfis__content { min-width: 0; }
.perfis .perfis__title {
  max-width: 20ch;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.perfis .perfis__tabs { display: flex; gap: clamp(18px, 2.4vw, 36px); margin-top: var(--s36); }
.perfis .perfis__tab {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-block: var(--s6);
  position: relative;
  color: var(--ash);
  font-size: clamp(22px, 2.65vw, 36px);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .2s var(--ease);
}
.perfis .perfis__tab:hover, .perfis .perfis__tab[aria-selected="true"] { color: var(--white); }
.perfis .perfis__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--iris);
}
.perfis .perfis__panels { margin-top: var(--s30); }
.perfis .perfis__panel { scroll-margin-top: var(--s96); }
.perfis .perfis__panel + .perfis__panel { margin-top: var(--s36); }
.perfis.perfis--ready .perfis__panel { margin-top: 0; }
.perfis .perfis__fallback-title { margin-bottom: var(--s18); font-size: var(--text-2xs); }
.perfis.perfis--ready .perfis__fallback-title { display: none; }
.perfis .perfis__lead { max-width: 40ch; font-size: var(--text-2xs); line-height: 1.35; letter-spacing: -.02em; }
.perfis .perfis__list { display: grid; gap: var(--s12); margin: var(--s24) 0 0; padding: 0; list-style: none; }
.perfis .perfis__list li { position: relative; padding-left: 22px; font-size: var(--text-body); color: var(--silver); }
.perfis .perfis__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--saffron);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.perfis .perfis__where { margin-top: var(--s24); font: 300 var(--text-caption)/1.7 var(--mono); color: var(--ash); }
.perfis .perfis__soon { max-width: 52ch; margin-top: var(--s18); color: var(--ash); font-size: var(--text-nav); line-height: 1.6; }
.perfis .perfis__soon--no-ar { color: var(--saffron); }
.perfis .perfis__app { margin-top: var(--s18); } /* botões das lojas dentro da aba (Funcionário: técnico; Cliente: AtalaHub) */ /* funções no ar, em destaque (pedido do Vinicius, 23/09) */
.perfis .perfis__soon > span { margin-right: var(--s6); color: var(--saffron); font-family: var(--mono); font-size: var(--text-caption); white-space: nowrap; }
.perfis .perfis__demo { justify-self: end; width: min(100%, 320px); perspective: 1000px; }
.perfis .perfis__phone {
  --rx: 0deg;
  --ry: 0deg;
  padding: 8px;
  border: 1px solid var(--dim);
  border-radius: 42px;
  background: var(--perfis-frame);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s var(--ease);
}
.perfis .perfis__glass { overflow: hidden; border-radius: 34px; background: var(--perfis-screen); }
.perfis .perfis__device-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding-inline: var(--s18); font: 400 11px var(--mono); }
.perfis .perfis__device-bar i { width: 72px; height: 18px; border-radius: var(--pill); background: var(--void); }
html[data-tema="claro"] .perfis .perfis__device-bar i { background: var(--white); } /* câmera do aparelho sempre escura */
.perfis .perfis__screen { min-height: 530px; padding: var(--s12) var(--s18) var(--s18); font-size: var(--text-caption); line-height: 1.45; }
.perfis .perfis__app-header { margin-bottom: var(--s18); }
.perfis .perfis__app-label { margin-bottom: var(--s6); color: var(--ash); font: 300 10px/1.5 var(--mono); }
.perfis .perfis__app-header h3 { font-size: 23px; line-height: 1.15; letter-spacing: -.035em; text-wrap: pretty; }
.perfis .perfis__app-header > p:last-child:not(:first-child) { margin-top: var(--s6); color: var(--silver); }
.perfis .perfis__counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-bottom: var(--s18); }
.perfis .perfis__counts > div { display: flex; flex-direction: column; gap: var(--s6); }
.perfis .perfis__counts span { min-height: 27px; color: var(--silver); font-size: 10px; line-height: 1.3; }
.perfis .perfis__counts b { font: 400 24px/1 var(--font); }
.perfis .perfis__counts > div:nth-child(3) b { color: var(--saffron); }
.perfis .perfis__jobs { display: grid; gap: 8px; }
.perfis .perfis__job { padding: 10px var(--s12); background: var(--perfis-card); border-radius: 10px; }
.perfis .perfis__code { margin-bottom: 4px; color: var(--ash); font: 300 9px/1.5 var(--mono); }
.perfis .perfis__job h4, .perfis .perfis__appointment h4 { margin-bottom: 4px; font-size: 13px; line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }
.perfis .perfis__job > p:not(.perfis__code), .perfis .perfis__appointment p { color: var(--silver); font-size: 11px; }
.perfis .perfis__job-meta { display: flex; justify-content: space-between; gap: var(--s6); margin-top: var(--s6); }
.perfis .perfis__job-meta time { color: var(--white); font-family: var(--mono); }
.perfis .perfis__app-footer { margin-top: var(--s18); color: var(--silver); font-size: 11px; }
.perfis .perfis__appointments { display: grid; gap: var(--s24); margin-top: var(--s24); }
.perfis .perfis__appointment { display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 10px; }
.perfis .perfis__appointment > time { padding-top: 1px; color: var(--silver); font: 300 10px/1.5 var(--mono); }
.perfis .perfis__status { display: inline-block; margin-top: 8px; font: 300 10px/1.5 var(--mono); color: var(--ash); }
.perfis .perfis__status--current { color: var(--saffron); }
.perfis .perfis__drawn-actions { display: flex; gap: var(--s6); margin-top: var(--s12); }
.perfis .perfis__drawn-actions span { padding: 8px; border-radius: 6px; background: var(--iris); color: var(--sobre-azul); font-size: 10px; white-space: nowrap; }
.perfis .perfis__timeline { margin: var(--s36) 0 0; padding: 0; list-style: none; }
.perfis .perfis__step { position: relative; display: flex; justify-content: space-between; gap: var(--s6); min-height: 68px; padding-left: var(--s24); color: var(--ash); }
.perfis .perfis__step::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border: 1px solid var(--ash); border-radius: 50%; background: var(--perfis-screen); }
.perfis .perfis__step:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 18px; bottom: 0; width: 1px; background: var(--dim); }
.perfis .perfis__step--done { color: var(--silver); }
.perfis .perfis__step--done::before { background: var(--iris); border-color: var(--iris); }
.perfis .perfis__step--done > span:last-child { color: var(--silver); }
.perfis .perfis__step--current { color: var(--white); }
.perfis .perfis__step--current::before { border-color: var(--saffron); background: var(--saffron); }
.perfis .perfis__technician { color: var(--silver); }
.perfis .perfis__home-bar { width: 32%; height: 4px; margin: var(--s6) auto 10px; border-radius: var(--pill); background: var(--silver); }
.perfis .perfis__caption { margin-top: var(--s18); text-align: center; color: var(--ash); font-size: var(--text-caption); }
.perfis.perfis--visible .perfis__screen:not([hidden]), .perfis.perfis--visible.perfis--ready .perfis__panel:not([hidden]) { animation: perfis-enter .24s var(--ease) both; }
.perfis.perfis--visible .perfis__step--current::before { animation: perfis-pulse 2.4s ease-in-out infinite; }
@keyframes perfis-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes perfis-pulse { 50% { opacity: .45; } }
@media (max-width: 1180px) and (min-width: 861px) {
  /* Mantém as colunas de .intro; o aparelho passa para baixo do conteúdo. */
  .perfis .perfis__inner { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
  .perfis .perfis__demo { grid-column: 2; justify-self: center; }
}
@media (max-width: 860px) {
  .perfis { padding-block: var(--s36) var(--s60); }
  .perfis .perfis__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s18); }
  .perfis .perfis__eyebrow { padding-top: 0; }
  .perfis .perfis__title { max-width: 27ch; font-size: clamp(34px, 5.5vw, 48px); }
  .perfis .perfis__tabs { gap: clamp(18px, 4vw, 36px); }
  .perfis .perfis__tab { font-size: clamp(22px, 3.8vw, 32px); }
  .perfis .perfis__demo { justify-self: center; width: min(100%, 280px); margin-top: var(--s24); }
  .perfis .perfis__screen { padding-inline: var(--s12); }
}
@media (max-width: 520px) {
  .perfis .perfis__tabs { gap: var(--s18); margin-top: var(--s30); }
  .perfis .perfis__tab { font-size: 22px; }
  .perfis .perfis__lead { font-size: 22px; }
  .perfis .perfis__list li { font-size: 16px; }
}
/* O seletor continua restrito à seção, mesmo quando a pausa vem do site. */
.perfis:where(html.motion-off *) *, .perfis:where(html.motion-off *) *::before, .perfis:where(html.motion-off *) *::after { animation: none !important; transition: none !important; }
.perfis:where(html.motion-off *) .perfis__phone { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .perfis *, .perfis *::before, .perfis *::after { animation: none !important; transition: none !important; }
  .perfis .perfis__phone { transform: none; }
}