/* ============================================================
   Blog editorial — artigos sazonais (Adesivos do Edu)
   Usado junto com styles.css. Cada artigo define as cores do tema
   em <article class="ed" style="--tema:...;--tema-2:...">
   ============================================================ */
.ed {
  --creme: #fbf7f0;
  --creme-2: #f3ece0;
  --tinta: #1b2333;
  --suave: #5d6675;
  --linha: #e6dfd2;
  --tema: #1f6fff;
  --tema-2: #0d1626;
  --tema-claro: #eef4ff;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  background: var(--creme);
  color: var(--tinta);
  padding-top: 76px;
}
.ed a { color: var(--tema); }
.ed-container { width: min(1180px, 100% - 32px); margin: 0 auto; }

/* ---------- Hero ---------- */
.ed-hero { padding: 34px 0 46px; border-bottom: 1px solid var(--linha); }
.ed-trilha { font-size: .82rem; color: var(--suave); margin-bottom: 26px; }
.ed-trilha a { color: var(--suave); text-decoration: none; }
.ed-hero-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ed-sobre { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tema); margin-bottom: 14px; }
.ed h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.35rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; color: var(--tinta); }
.ed h1 em { font-style: italic; color: var(--tema); }
.ed-linha-fina { font-size: 1.1rem; color: var(--suave); line-height: 1.6; margin: 0 0 22px; max-width: 34em; }
.ed-autor { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--suave); }
.ed-autor b { color: var(--tinta); display: block; font-weight: 600; }
.ed-autor-selo { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--linha); display: grid; place-items: center; overflow: hidden; }
.ed-autor-selo img { width: 32px; height: 32px; }
.ed-hero-arte { position: relative; }
.ed-hero-arte img { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 0 24px 60px rgba(27,35,51,.16); }
.ed-hero-arte .stk-wrap { position: absolute; }
.ed-hero-arte .stk-a { left: -22px; bottom: -26px; transform: rotate(-8deg); }
.ed-hero-arte .stk-b { right: -14px; top: -22px; transform: rotate(7deg); }
.ed-legenda { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); text-align: right; margin-top: 34px; }

/* ---------- Corpo com índice ---------- */
.ed-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding: 48px 0 70px; }
.ed-indice { position: sticky; top: 100px; align-self: start; font-size: .88rem; }
.ed-indice p { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tema); margin: 0 0 12px; }
.ed-indice a { display: block; color: var(--suave); text-decoration: none; padding: 6px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.ed-indice a:hover { color: var(--tinta); border-color: var(--tema); }
.ed-indice .ed-frase-lado { font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; color: var(--suave); border-top: 1px solid var(--linha); margin-top: 22px; padding-top: 18px; }
.ed-indice .ed-frase-lado b { color: var(--tema-2); font-weight: 600; }
.ed-texto { max-width: 760px; font-size: 1.04rem; line-height: 1.75; }
.ed-texto p { margin: 0 0 18px; }
.ed-texto h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.05rem); line-height: 1.2; letter-spacing: -.01em; margin: 56px 0 16px; scroll-margin-top: 100px; }
.ed-texto h2:first-child { margin-top: 0; }
.ed-texto h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; margin: 0 0 8px; }
.ed-resposta { font-size: 1.12rem; }
.ed-resposta strong { color: var(--tinta); }

/* ---------- Ideias numeradas ---------- */
.ed-ideias { list-style: none; margin: 26px 0 0; padding: 0; }
.ed-ideia { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--linha); }
.ed-ideia-arte { background: var(--creme-2); border-radius: 18px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.ed-num { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tema); margin-bottom: 6px; }
.ed-ideia p { margin-bottom: 10px; color: #3a4252; font-size: .99rem; }
.ed-dica { font-size: .92rem !important; color: var(--suave) !important; }
.ed-dica b { color: var(--tinta); }
.ed-pedir { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--tema) !important; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }

/* ---------- Adesivos ilustrativos (CSS) ---------- */
.stk { font-family: var(--serif); display: grid; place-items: center; text-align: center; box-shadow: 0 10px 24px rgba(27,35,51,.18); line-height: 1.1; padding: 12px; }
.stk small { display: block; font-family: "Inter", sans-serif; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; opacity: .85; }
.stk-redondo { width: 132px; height: 132px; border-radius: 50%; }
.stk-ret { width: 150px; min-height: 96px; border-radius: 12px; }
.stk-tag { width: 120px; min-height: 150px; border-radius: 10px 10px 14px 14px; position: relative; padding-top: 30px; }
.stk-tag::before { content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--creme-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.stk-mini { width: 96px; height: 96px; font-size: .82rem; }
.stk .ico { font-size: 1.3rem; display: block; margin-bottom: 4px; font-family: system-ui, sans-serif; }

/* ---------- Galeria de estilos ---------- */
.ed-galeria img { width: 100%; height: auto; display: block; border-radius: 20px; margin: 10px 0 8px; }
.ed-estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; }
.ed-estilos li { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; font-size: .9rem; line-height: 1.45; }
.ed-estilos b { display: block; font-size: .95rem; }
.ed-estilos span { color: var(--suave); }

/* ---------- Frases para copiar ---------- */
.ed-frases { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 16px 0 10px; }
.ed-frases button { font-family: var(--serif); font-size: 1.02rem; background: #fff; border: 1px solid var(--linha); color: var(--tinta); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: .15s; }
.ed-frases button:hover { border-color: var(--tema); color: var(--tema); }
.ed-frases button.copiado { background: var(--tema); color: #fff; border-color: var(--tema); }
.ed-nota { font-size: .88rem; color: var(--suave); }

/* ---------- Tabela ---------- */
.ed-tabela { width: 100%; border-collapse: collapse; margin: 16px 0 18px; font-size: .95rem; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); }
.ed-tabela th { text-align: left; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); background: var(--creme-2); padding: 11px 14px; }
.ed-tabela td { padding: 12px 14px; border-top: 1px solid var(--linha); vertical-align: top; }
.ed-tabela td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- Linha do tempo ---------- */
.ed-tempo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 18px 0; counter-reset: passo; }
.ed-tempo li { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 16px; font-size: .93rem; line-height: 1.55; position: relative; }
.ed-tempo b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin-bottom: 4px; color: var(--tema-2); }

/* ---------- Destaques ---------- */
.ed-aviso { border-left: 3px solid var(--tema); background: var(--tema-claro); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 22px 0; font-size: .97rem; }
.ed-aviso b { display: block; margin-bottom: 4px; }
.ed-lista-check { list-style: none; padding: 0; margin: 14px 0 18px; }
.ed-lista-check li { padding: 7px 0 7px 30px; position: relative; border-bottom: 1px dashed var(--linha); }
.ed-lista-check li::before { content: "✓"; position: absolute; left: 4px; top: 7px; color: var(--tema); font-weight: 800; }
.ed-cta { background: var(--tema-2); color: #fff; border-radius: 22px; padding: 34px 36px; margin: 34px 0; }
.ed-cta small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ed-cta h2, .ed-cta h3 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: 8px 0 8px; }
.ed-cta p { color: rgba(255,255,255,.82); margin: 0 0 20px; }
.ed-cta .btn { background: #fff; color: var(--tema-2) !important; border: 0; }
.ed-cta .ed-cta-mini { display: block; font-size: .78rem; color: rgba(255,255,255,.6); margin-top: 14px; }

/* ---------- FAQ ---------- */
.ed-faq details { border-top: 1px solid var(--linha); padding: 4px 0; }
.ed-faq details:last-child { border-bottom: 1px solid var(--linha); }
.ed-faq summary { cursor: pointer; font-weight: 600; padding: 14px 30px 14px 0; list-style: none; position: relative; }
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.4rem; color: var(--tema); transition: .2s; }
.ed-faq details[open] summary::after { transform: rotate(45deg); }
.ed-faq details p { color: var(--suave); margin: 0 0 16px; }
.ed-rodape-nota { font-size: .8rem; color: var(--suave); margin-top: 26px; }

/* ---------- Barra de leitura e índice no celular ---------- */
.ed-progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.ed-progresso span { display: block; height: 100%; width: 0; background: var(--tema); transition: width .1s linear; }
.ed-indice-mobile { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .ed-hero-grade { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ed-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .ed-indice { display: none; }
  .ed-indice-mobile {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: sticky; top: 64px; z-index: 40; background: var(--creme);
    margin: 0 -16px 22px; padding: 12px 16px; border-bottom: 1px solid var(--linha);
  }
  .ed-indice-mobile::-webkit-scrollbar { display: none; }
  .ed-indice-mobile a {
    flex: 0 0 auto; font-size: .84rem; font-weight: 600; color: var(--tinta); text-decoration: none;
    background: #fff; border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px; white-space: nowrap;
  }
  .ed-indice-mobile a:active { border-color: var(--tema); color: var(--tema); }
  .ed-texto h2 { scroll-margin-top: 130px; }
}
@media (max-width: 640px) {
  .ed { padding-top: 64px; padding-bottom: 64px; }
  .ed-hero { padding: 20px 0 40px; }
  .ed-trilha { margin-bottom: 16px; font-size: .78rem; }
  .ed-sobre { font-size: .68rem; margin-bottom: 10px; }
  .ed h1 { font-size: 1.95rem; margin-bottom: 12px; }
  .ed-linha-fina { font-size: 1rem; margin-bottom: 16px; }
  .ed-hero-arte img { border-radius: 20px; }
  .ed-hero-arte .stk-a { left: 4px; bottom: -24px; transform: rotate(-8deg) scale(.72); transform-origin: left bottom; }
  .ed-hero-arte .stk-b { right: 4px; top: -18px; transform: rotate(7deg) scale(.72); transform-origin: right top; }
  .ed-corpo { padding-bottom: 40px; }
  .ed-texto { font-size: 1rem; line-height: 1.7; }
  .ed-texto h2 { font-size: 1.55rem; margin: 40px 0 12px; }
  .ed-texto h3 { font-size: 1.25rem; }
  .ed-resposta { font-size: 1.04rem; }

  /* ideias: adesivo pequeno à esquerda, texto contornando */
  .ed-ideia { display: block; padding: 22px 0; }
  .ed-ideia::after { content: ""; display: table; clear: both; }
  .ed-ideia-arte { float: left; width: 92px; height: 92px; aspect-ratio: auto; padding: 0; margin: 2px 14px 8px 0; border-radius: 14px; }
  .ed-ideia-arte { position: relative; }
  .ed-ideia-arte .stk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.62); }
  .ed-ideia h3 { font-size: 1.2rem; line-height: 1.25; }
  .ed-ideia p { font-size: .96rem; }
  .ed-pedir {
    clear: both; display: flex; justify-content: center; min-height: 44px; margin-top: 4px;
    border: 1.5px solid var(--tema); border-radius: 999px; padding: 10px 16px; font-size: .92rem;
  }

  .ed-estilos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ed-estilos li { padding: 10px 11px; font-size: .82rem; }
  .ed-estilos b { font-size: .86rem; }
  .ed-tempo { grid-template-columns: minmax(0, 1fr); }
  .ed-frases button { font-size: .95rem; padding: 9px 14px; }

  /* tabela vira cartões */
  .ed-tabela, .ed-tabela tbody, .ed-tabela tr, .ed-tabela td { display: block; width: 100%; }
  .ed-tabela { border: 0; background: none; }
  .ed-tabela thead { display: none; }
  .ed-tabela tr { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 6px 14px; margin-bottom: 10px; }
  .ed-tabela td { border: 0; padding: 6px 0; white-space: normal !important; }
  .ed-tabela td:first-child { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; padding-top: 8px; }
  .ed-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }

  .ed-cta { padding: 26px 20px; border-radius: 18px; }
  .ed-cta h3 { font-size: 1.5rem; }
  .ed-cta .btn { width: 100%; justify-content: center; }
  .ed-aviso { padding: 14px 16px; }
}

/* ideia com foto real do adesivo */
.ed-ideia-foto { padding: 0; }
.ed-ideia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }