/* ==========================================================================
   Artur Magnani — tema com composição visual de referência Alara
   Implementação própria. Nenhum código do Framer foi reutilizado.
   Medidas: valores CONFIRMADOS por medição no Alara (ver auditoria).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Cores medidas no Alara — modo claro */
  --am-bg:        #ffffff;
  --am-surface:   #f0f0f0;
  --am-ink:       #000000;
  --am-muted:     #696969;
  --am-faint:     #8a8a8a;
  --am-line:      #dfe4df;
  --am-line-2:    #cfd8cf;
  --am-line-3:    #d4d4d4;

  /* Medidas confirmadas */
  --am-edge:      8px;    /* padding externo */
  --am-sidebar:   360px;  /* coluna da sidebar */
  --am-aside-pad: 32px;   /* padding do aside */
  --am-radius:    24px;   /* radius principal (aside e cards) */
  --am-radius-img: 8px;   /* radius das imagens */
  --am-gap-side:  24px;   /* gap da coluna sidebar */
  --am-gap-aside: 20px;   /* gap interno do aside */
  --am-gap-card:  8px;    /* gap entre cards */
  --am-gap-media: 16px;   /* gap do bloco de mídia */
  --am-gap-img:   8px;    /* gap entre imagens */

  /* Tipografia medida */
  --am-display: "Gasoek One", Impact, "Arial Black", sans-serif;
  --am-sans:    "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --am-mono:    "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --am-ease: cubic-bezier(0.44, 0, 0.56, 1); /* easing lido do CSS do Alara */
  color-scheme: light dark;
}

/* Modo escuro automático — comportamento do Alara (sem seletor manual) */
@media (prefers-color-scheme: dark) {
  :root {
    --am-bg:      #0c0c0c;
    --am-surface: #1a1a1a;
    --am-ink:     #f5f5f5;
    --am-muted:   #8a8a8a;
    --am-faint:   #696969;
    --am-line:    #2a2a2a;
    --am-line-2:  #404040;
    --am-line-3:  #333333;
  }
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.am {
  margin: 0;
  background: var(--am-bg);
  color: var(--am-ink);
  font-family: var(--am-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.am img, .am video { max-width: 100%; display: block; }

.am a { color: inherit; transition: color .3s var(--am-ease); }

.am :focus-visible { outline: 2px solid var(--am-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout base (mobile-first: empilhado) ---------- */
.am-shell {
  display: flex;
  flex-direction: column;
}

.am-sidebar-col {
  padding: var(--am-edge);
  display: flex;
  flex-direction: column;
  gap: var(--am-gap-side);
}

.am-aside {
  background: var(--am-surface);
  border-radius: var(--am-radius);
  padding: var(--am-aside-pad);
  display: flex;
  flex-direction: column;
  gap: var(--am-gap-aside);
}

.am-content {
  display: flex;
  flex-direction: column;
}

.am-cards {
  padding: 0 var(--am-edge) var(--am-edge);
  display: flex;
  flex-direction: column;
  gap: var(--am-gap-card);
}

/* ---------- Sidebar ---------- */
.am-wordmark {
  font-family: var(--am-display);
  font-weight: 400;
  /* "Artur Magnani" tem 13 caracteres (o wordmark do Alara tem 5).
     O tamanho é reduzido para preencher a largura sem transbordar,
     preservando a proporção "wordmark ocupa a largura da sidebar". */
  /* 52px é o máximo em que "MAGNANI" cabe nos 277px úteis da sidebar (medido). */
  font-size: clamp(38px, 10.5vw, 52px);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--am-ink);
}
.am-wordmark a { text-decoration: none; }

/* H1 — mantém a hierarquia semântica no ponto de maior destaque, como no Alara */
.am-lede {
  font-family: var(--am-sans);
  font-weight: 500;
  font-size: 20px;      /* medida mobile do Alara */
  line-height: 23px;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--am-muted);
}
.am-lede strong { color: var(--am-ink); font-weight: 500; }

.am-sub {
  font-size: 13px;
  line-height: 18.85px;
  letter-spacing: -.01em;
  color: var(--am-muted);
  margin: 0;
}

.am-label {
  font-family: var(--am-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 14.95px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--am-ink);
  margin: 0 0 10px;
}

.am-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-list a {
  font-size: 13px;
  line-height: 18.85px;
  letter-spacing: -.01em;
  color: var(--am-muted);
  text-decoration: none;
}
.am-list a:hover { color: var(--am-ink); }

/* Link da página atual — tratamento mínimo, só com tokens existentes */
.am-list a[aria-current="page"] {
  color: var(--am-ink);
  font-weight: 500;
}
.am .am-pill[aria-current="page"] {
  background: var(--am-ink);
  color: var(--am-bg);
  border-color: var(--am-ink);
}

/* Botões-pílula (referência: "Book a call" / "Copy email" do Alara) */
.am-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.am-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .35s var(--am-ease), background-color .3s var(--am-ease), color .3s var(--am-ease);
}
/* especificidade elevada: `.am a { color: inherit }` sobrescreveria estas cores */
.am .am-pill--primary { background: var(--am-ink); color: var(--am-bg); }
.am .am-pill--ghost   { background: transparent; color: var(--am-ink); border-color: var(--am-line-2); }
.am-pill:hover { transform: scale(1.04); }

/* Bloco "Sobre Artur" — preserva H2, avatar e link do site atual */
.am-about { display: flex; flex-direction: column; gap: 10px; }
.am-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.am-about a { color: var(--am-ink); text-decoration: underline; text-underline-offset: 2px; }
.am-about a:hover { color: var(--am-muted); }

.am-media__link { display: block; border-radius: var(--am-radius-img); overflow: hidden; }

.am-socials { display: flex; gap: 14px; align-items: center; }
.am-socials a { color: var(--am-faint); text-decoration: none; display: inline-flex; }
.am-socials a:hover { color: var(--am-ink); }
.am-socials svg { width: 18px; height: 18px; display: block; }

.am-fineprint {
  font-size: 12px;
  line-height: 2.1;              /* espaçamento suficiente para alvos de toque */
  color: var(--am-muted);        /* #696969 sobre #f0f0f0 = contraste AA */
  margin: 0;
}
.am-fineprint a {
  color: var(--am-muted);
  display: inline-block;
  padding: 4px 0;                /* aumenta a área de toque */
}
.am-fineprint a:hover { color: var(--am-ink); }

/* ---------- Cards ---------- */
.am-card {
  background: var(--am-surface);
  border-radius: var(--am-radius);
  padding: 20px 32px 32px;   /* medida confirmada */
  display: flex;
  flex-direction: column;
  gap: var(--am-gap-media);
}

.am-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--am-gap-img);
  min-height: 28px;
}

.am-card__title {
  font-family: var(--am-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: .01em;
  color: var(--am-ink);
  margin: 0;
}

.am-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.am-tag {
  font-family: var(--am-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 14.95px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--am-muted);
  text-decoration: none;
  /* sem nowrap: as tags do Artur são mais longas que as do Alara e precisam
     quebrar em telas estreitas para não forçar overflow horizontal */
}
.am-tag:hover { color: var(--am-ink); }
@media (min-width: 810px) { .am-tag { white-space: nowrap; } }

.am-card__body { display: flex; flex-direction: column; gap: 14px; }
.am-card__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--am-muted); }
.am-card__body p strong { color: var(--am-ink); font-weight: 500; }
.am-card__body a { color: var(--am-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.am-card__body a:hover { color: var(--am-muted); }

.am-card__body h2 {
  font-family: var(--am-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 27.6px;
  letter-spacing: -.025em;
  color: var(--am-ink);
  margin: 0;
}
.am-card__body h3 {
  font-family: var(--am-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: .01em;
  color: var(--am-ink);
  margin: 10px 0 0;
}

/* Mídia dentro do card */
.am-media { display: flex; flex-direction: column; gap: var(--am-gap-img); }
.am-media img { width: 100%; height: auto; border-radius: var(--am-radius-img); }

.am-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--am-gap-img);
}
.am-grid__item {
  position: relative;
  display: block;
  border-radius: var(--am-radius-img);
  overflow: hidden;
  background: var(--am-line);
}
.am-grid__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--am-radius-img);
  transition: transform .5s var(--am-ease), opacity .3s var(--am-ease);
}
.am-grid__item:hover img { transform: scale(1.03); }

.am-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  pointer-events: none;
}

.am-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Extensões para conteúdos que existem só nas páginas internas.
   Usam exclusivamente os tokens já aprovados no sistema. */
.am-card__body address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--am-muted);
}
.am-card__body ul, .am-card__body ol {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--am-muted);
}
.am-card__body li::marker { color: var(--am-faint); }

/* Newsletter — PENDENTE de aprovação visual (sem referência direta no Alara) */
.am-form { display: flex; flex-direction: column; gap: 8px; }
.am-form label {
  font-family: var(--am-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--am-muted);
}
.am-form input {
  font-family: var(--am-sans);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--am-radius-img);
  border: 1px solid var(--am-line-2);
  background: var(--am-bg);
  color: var(--am-ink);
  width: 100%;
}
.am-form input:focus { outline: none; border-color: var(--am-ink); }
.am-form button {
  font-family: var(--am-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: var(--am-ink);
  color: var(--am-bg);
  cursor: pointer;
  transition: transform .35s var(--am-ease);
}
.am-form button:hover { transform: scale(1.04); }
.am-status { font-size: 12px; color: var(--am-muted); margin: 0; min-height: 1em; }

/* WhatsApp flutuante — preservado do site atual */
.am-wa {
  position: fixed; bottom: 20px; right: 20px;
  width: 60px; height: 60px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 20px rgba(0,0,0,.3);
  z-index: 9000; text-decoration: none;
  transition: transform .35s var(--am-ease);
}
.am-wa:hover { transform: scale(1.06); }
.am-wa svg { width: 30px; height: 30px; }

/* ---------- Lightbox (implementação própria) ---------- */
.am-lb {
  position: fixed; inset: 0;
  z-index: 100000;             /* z-index observado no Alara */
  background: var(--am-bg);
  display: none;
  flex-direction: column;
  padding: var(--am-edge);
  gap: var(--am-edge);
}
.am-lb[open], .am-lb.is-open { display: flex; }
.am-lb__stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.am-lb__stage img, .am-lb__stage video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--am-radius-img);
  object-fit: contain;
}
.am-lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 8px;
}
.am-lb__count {
  font-family: var(--am-mono);
  font-size: 13px; letter-spacing: -.02em;
  color: var(--am-muted);
}
.am-lb__nav { display: flex; gap: 8px; }
.am-lb__btn {
  font-family: var(--am-mono);
  font-size: 13px;
  background: transparent;
  color: var(--am-ink);
  border: 1px solid var(--am-line-2);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color .3s var(--am-ease), color .3s var(--am-ease);
}
.am-lb__btn:hover { background: var(--am-ink); color: var(--am-bg); }
.am-lb__caption {
  font-size: 13px; color: var(--am-muted); margin: 0;
  max-width: 60ch;
}

/* ---------- Animação de entrada (timing APROXIMADO — ver relatório) ----------
   Regra de segurança: o estado padrão é VISÍVEL. A animação usa keyframes com
   fill-mode "both", portanto o elemento sempre termina visível, mesmo que o JS
   falhe. Nenhum conteúdo depende de JS para ser exibido. */
.am-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .am-reveal { animation: am-in .55s var(--am-ease) both; }
  .js .am-reveal:nth-child(2) { animation-delay: .06s; }
  .js .am-reveal:nth-child(3) { animation-delay: .12s; }
  .js .am-reveal:nth-child(n+4) { animation-delay: .18s; }
}

@keyframes am-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Transição de navegação pela sidebar ----------
   Aplicada só por JS e só na navegação iniciada na sidebar.
   O estado padrão é sempre visível: nenhuma página depende disto
   para exibir conteúdo. */
@media (prefers-reduced-motion: no-preference) {
  body.am-navout { opacity: 0; transition: opacity .2s var(--am-ease); }
  body.am-navin  { animation: am-navfade .2s var(--am-ease) both; }
}
@keyframes am-navfade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .am-reveal, .js .am-reveal { opacity: 1; transform: none; animation: none; }
  .am *, .am *::before, .am *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .am-grid__item:hover img, .am-pill:hover, .am-wa:hover, .am-form button:hover { transform: none; }
}

/* ==========================================================================
   Breakpoints — valores confirmados no Alara
   tablet: 810px – 1199.98px   |   desktop: >= 1200px
   ========================================================================== */

@media (min-width: 810px) {
  .am-lede { font-size: 24px; line-height: 27.6px; letter-spacing: -.025em; }
  .am-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet (810–1199.98px): o Alara mantém a coluna empilhada sticky no topo,
   com altura natural (medido ao vivo em 810/900/1199px).
   A sidebar do Artur tem ~955px contra ~539px da do Alara (lista de 11
   serviços), então esse sticky só é reproduzível quando a altura da viewport
   comporta a sidebar inteira. Acima de 1000px de altura reproduzimos o
   comportamento do Alara; abaixo disso a sidebar entra no fluxo normal,
   sem compressão nem rolagem interna. */
@media (min-width: 810px) and (max-width: 1199.98px) and (min-height: 1000px) {
  .am-sidebar-col { position: sticky; top: 0; }
}

@media (min-width: 1200px) {
  .am-shell {
    flex-direction: row;
    align-items: flex-start;
  }
  .am-sidebar-col {
    width: var(--am-sidebar);      /* 360px confirmado */
    flex: 0 0 var(--am-sidebar);
    padding: var(--am-edge) 0 var(--am-edge) var(--am-edge);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
  .am-aside {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .am-content { flex: 1; min-width: 0; }
  .am-cards { padding: var(--am-edge); }
}