/* ═══════════════════════════════════════════════════════════════
   bio.ajuliacalais — folha de estilo única

   Identidade herdada do Media Kit 2026 (creme / marrom / terracota / limão).
   Tema único proposital: a página é a marca, não inverte no modo escuro.

   Grades de tela
     base      até 599px   celular — coluna cheia, capa sangrando
     ≥ 600px   tablet      coluna com respiro, capa emoldurada
     ≥ 1024px  desktop     home em duas colunas, retrato fixo à esquerda
     ≥ 1440px  telas largas
   ═══════════════════════════════════════════════════════════════ */

/* ── tipografia própria (self-hosted, sem CDN) ─────────────── */
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/playfair-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── tokens ────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --ground:#FBF8DE;      /* creme — fundo da página            */
  --card:#FFFDF0;        /* creme claro — superfície dos cards  */
  --lime:#DFE59D;        /* limão — ação prioritária            */
  --ink:#43301D;         /* marrom profundo — texto             */
  --ink-2:#6E5A3C;
  --ink-3:#9C8C6C;
  --accent:#D6491F;      /* terracota — hover, foco, destaques  */
  --rule:rgba(67,48,29,.20);
  --rule-soft:rgba(67,48,29,.10);

  --pad:20px;            /* respiro lateral — cresce por grade  */
  --col:100%;            /* largura do miolo — cresce por grade */
  --gap:10px;            /* vão entre itens de lista            */
  --radius:4px;

  --f-display:"Playfair Display","Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  --f-body:Georgia,"Charter","Iowan Old Style",Palatino,serif;
  --f-ui:"Avenir Next","Futura","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;          /* nada empurra a página de lado */
}

img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-weight:400; margin:0}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* pular para o conteúdo — teclado e leitor de tela */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--ground);
  font-family:var(--f-ui); font-size:13px;
  padding:12px 18px; z-index:99; border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

/* ── esqueleto ─────────────────────────────────────────────── */
.page{
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  padding:0 var(--pad) 56px;
}

/* ── capa ──────────────────────────────────────────────────── */
.cover{margin:0 calc(var(--pad) * -1) 26px}
.cover img{
  width:100%;
  aspect-ratio:1/1;               /* a foto já vem recortada no enquadramento final */
  object-fit:cover;
  object-position:center;
}

/* ── cabeçalho ─────────────────────────────────────────────── */
.name{
  font-family:var(--f-display);
  font-size:clamp(36px,9vw,46px);
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.handle{
  font-family:var(--f-ui);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:10px 0 0;
}
.bio{
  font-style:italic;
  font-size:clamp(17px,4.4vw,18px);
  line-height:1.45;
  color:var(--ink-2);
  margin:16px 0 0;
  max-width:32ch;
}

/* ── redes sociais ─────────────────────────────────────────── */
.socials-label{
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:30px 0 8px;
}
.socials{
  display:flex;
  gap:4px;
  list-style:none;
  padding:0;
  margin:0 0 34px -10px;    /* alinha o glifo à margem, não a área de toque */
}
.socials a{
  display:grid;
  place-items:center;
  width:44px; height:44px;   /* alvo de toque confortável */
  color:var(--ink);
  transition:color .14s ease, transform .14s ease;
}
.socials a:hover{color:var(--accent); transform:translateY(-2px)}
.socials svg{width:21px; height:21px; fill:currentColor}

/* ── rótulo de seção (a "etiqueta" do deck) ────────────────── */
.eyebrow{
  display:inline-block;
  font-family:var(--f-ui);
  font-size:10px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:3px;
  padding:5px 10px 4px;
  margin:0 0 16px;
}
section{margin:0 0 40px}
section:last-of-type{margin-bottom:0}

/* ── cor por seção (home) ──────────────────────────────────
   Toque discreto: a cor de cada seção aparece só na etiqueta do
   título e no hover dos botões. O fundo continua o creme de sempre. */
.tone--terracota{--tone:var(--accent); --tone-fg:var(--card)}
.tone--oliva{--tone:#6F7B00; --tone-fg:var(--card)}   /* oliva do Media Kit, escurecido para o texto creme passar no contraste */
.tone--azul{--tone:#00699E; --tone-fg:var(--card)}
.tone--tinta{--tone:var(--ink); --tone-fg:var(--card)}
.tone--areia{--tone:#EDE4CE; --tone-fg:var(--ink)}

.tone .eyebrow{background:var(--tone); border-color:var(--tone); color:var(--tone-fg)}
.tone--areia .eyebrow{border-color:rgba(67,48,29,.28)}

.tone .link:hover{background:var(--tone); border-color:var(--tone); color:var(--tone-fg)}
.tone .link:hover .link__sub,
.tone .link:hover .link__arrow{color:var(--tone-fg)}
.tone .link:hover .link__sub{opacity:.75}

/* ── botões de link ────────────────────────────────────────── */
.links{display:grid; gap:var(--gap)}

.link{
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 18px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  min-height:64px;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.link:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--card);
  transform:translateY(-1px);
}
.link__text{flex:1; min-width:0}
.link__title{
  font-family:var(--f-display);
  font-size:19px;
  line-height:1.25;
  display:block;
}
.link__sub{
  font-family:var(--f-ui);
  font-size:11px;
  overflow-wrap:break-word;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:block;
  margin-top:6px;
  transition:color .14s ease;
}
.link:hover .link__sub{color:rgba(255,253,240,.75)}
.link__arrow{
  flex:none;
  font-family:var(--f-ui);
  font-size:17px;
  line-height:1;
  color:var(--ink-3);
  transition:color .14s ease, transform .14s ease;
}
.link:hover .link__arrow{color:var(--card); transform:translate(2px,-2px)}

.link--primary{background:var(--lime); border-color:rgba(67,48,29,.28)}
.link--primary .link__sub{color:var(--ink-2)}

/* item ainda sem destino definido */
.link[data-todo][href="#"]{opacity:.6}

.coupon__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  margin-top:16px;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .14s ease;
}
.coupon__cta:hover{border-bottom-color:var(--accent)}

/* ── marcas ────────────────────────────────────────────────── */
.brands{display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0}
.brands li{
  font-family:var(--f-ui);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--ink-2);
  border:1px solid var(--rule-soft);
  border-radius:999px;
  padding:7px 13px;
  background:var(--card);
}

/* ── contato ───────────────────────────────────────────────── */
/* A grade se distribui sozinha: cada item pede no mínimo 210px, então o
   número de colunas cai de 3 para 2 para 1 conforme a tela aperta — o
   e-mail nunca fica espremido. Sem divisórias verticais, que quebravam
   quando a contagem de colunas mudava; a separação vem do vão. */
.contact{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px 34px;
  padding:20px 0;
  margin:0;
}
.contact > div{min-width:0}
.contact dt{
  font-family:var(--f-ui);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.contact dd{
  margin:7px 0 0;
  font-family:var(--f-display);
  font-size:15.5px;
  line-height:1.35;
  overflow-wrap:break-word;   /* rede de segurança para o e-mail */
}
.contact a{text-decoration:none; border-bottom:1px solid var(--rule); transition:color .14s, border-color .14s}
.contact a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ── rodapé ────────────────────────────────────────────────── */
.foot{
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--f-ui);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
/* aviso de cookies: menor e mais apagado que a assinatura, de propósito */
.foot__cookies{font-size:10px; letter-spacing:.02em; text-transform:none; opacity:.75}
.foot a{color:inherit; text-underline-offset:2px}
.foot a:hover{color:var(--accent)}

/* ═══════════════ PÁGINAS INTERNAS ═══════════════ */

.topbar{display:flex; align-items:center; padding:18px 0 2px}
.back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  padding:10px 0;
  transition:color .14s ease;
}
.back:hover{color:var(--accent)}
.back span[aria-hidden]{font-size:14px; line-height:1}

.subhead{margin:12px 0 20px}
.subhead h1{
  font-family:var(--f-display);
  font-size:clamp(31px,8vw,40px);
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.subhead p{
  font-size:clamp(15.5px,4.2vw,16.5px);
  line-height:1.5;
  color:var(--ink-2);
  margin:14px 0 0;
  max-width:46ch;
}

/* ── abas — sempre alcançáveis ao rolar ────────────────────── */
.tabs-wrap{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--ground);
  border-bottom:1px solid var(--rule-soft);
  margin:0 calc(var(--pad) * -1) 28px;
  padding:10px var(--pad);
}
.tabs{
  display:flex;
  gap:6px;
  list-style:none;
  padding:0;
  margin:0;
  overflow-x:auto;              /* rola de lado no celular estreito */
  flex-wrap:nowrap;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none}
.tabs li{flex:none}
.tabs a{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--f-ui);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  border:1px solid var(--rule);
  border-radius:999px;
  padding:11px 15px;
  background:var(--card);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.tabs a:hover{border-color:var(--accent); color:var(--accent)}
.tabs a[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}

.group{margin:0 0 38px}
.group:last-of-type{margin-bottom:0}

/* ── cupom ─────────────────────────────────────────────────── */
.coupons{display:grid; gap:12px}

.coupon{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:18px;
  display:flex;
  flex-direction:column;
}
.coupon__brand{font-family:var(--f-display); font-size:21px; line-height:1.2}
.coupon__desc{font-size:15px; line-height:1.45; color:var(--ink-2); margin:7px 0 0}
.coupon__row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:15px}
.coupon__code{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--ground);
  border:1.5px dashed var(--ink-3);   /* fio picotado: metáfora do cupom */
  border-radius:3px;
  padding:11px 13px;
  min-height:44px;
  cursor:pointer;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.coupon__code:hover{border-color:var(--accent); color:var(--accent)}
.coupon__code svg{width:14px; height:14px; fill:currentColor; flex:none; opacity:.65}
.coupon__terms{
  font-family:var(--f-ui);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-3);
  margin:12px 0 0;
}
.coupon__code.is-copied{border-style:solid; border-color:var(--accent); background:var(--accent); color:var(--card)}
.coupon__code.is-copied svg{opacity:1}
.coupon__off{
  font-family:var(--f-ui);
  font-size:12px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.coupon__cta{margin-top:auto; align-self:flex-start; padding-top:16px}

/* ── aviso de conteúdo de exemplo ──────────────────────────── */
.note{
  border-left:3px solid var(--accent);
  background:var(--card);
  padding:14px 16px;
  margin:0 0 26px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-2);
  border-radius:0 var(--radius) var(--radius) 0;
}
.note b{color:var(--ink); font-weight:400}
.note code{font-family:var(--f-ui); font-size:13px; background:var(--ground); padding:1px 5px; border-radius:3px}

/* ── página 404 ────────────────────────────────────────────── */
.notfound{padding:80px 0 60px; max-width:420px; margin:0 auto}
.notfound h1{font-family:var(--f-display); font-size:clamp(32px,8vw,40px); margin-bottom:12px}
.notfound p{color:var(--ink-2); margin:0 0 28px}

/* ═══════════════ GRADE: TABLET ≥ 600px ═══════════════ */
@media (min-width:600px){
  :root{--pad:32px; --col:600px; --gap:11px}

  body{font-size:17.5px}

  .cover{
    margin:28px 0 28px;
    border-radius:var(--radius);
    overflow:hidden;
  }

  .tabs-wrap{margin-left:0; margin-right:0; padding-left:0; padding-right:0}
  .tabs{flex-wrap:wrap; overflow:visible}

  /* listas em duas colunas assim que houver espaço */
  .links,
  .coupons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links--single{grid-template-columns:1fr}

  /* sobrando um item ímpar no fim, ele ocupa a linha toda — sem buraco.
     Na aba de parceiros não: lá todas as marcas têm o mesmo tamanho. */
  .page--home .links > :last-child:nth-child(odd),
  .coupons > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* ═══════════════ GRADE: DESKTOP ≥ 1024px ═══════════════ */
@media (min-width:1024px){
  :root{--pad:40px; --col:1080px; --gap:12px}

  /* home em duas colunas: retrato fixo à esquerda, conteúdo rolando à direita */
  .page--home{
    display:grid;
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:56px;
    align-items:start;
    padding-top:48px;
  }
  .rail{
    position:sticky;
    top:48px;
    align-self:start;
  }
  .rail .cover{margin:0 0 26px}
  .rail .socials{margin-bottom:0}
  .content{min-width:0}
  .content > section:first-child{margin-top:0}

  /* o rodapé volta a atravessar as duas colunas */
  .page--home > .foot{grid-column:1 / -1; margin-top:56px}

  /* páginas internas ganham corpo, sem virar parede de texto */
  .page--inner{max-width:840px}
  .tabs-wrap{top:0; padding-top:14px; padding-bottom:14px}

  .link{padding:19px 20px}
  .link__title{font-size:20px}
}

/* ═══════════════ GRADE: TELAS LARGAS ≥ 1440px ═══════════════ */
@media (min-width:1440px){
  :root{--col:1160px}
  .page--home{grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:72px}
}

/* ── quem prefere menos movimento ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
  .link:hover,.socials a:hover{transform:none}
}

/* ── impressão ─────────────────────────────────────────────── */
@media print{
  .tabs-wrap,.socials,.skip{display:none}
  .link,.coupon{border-color:#999; break-inside:avoid}
  body{background:#fff}
}