/* Cordel D' Prata · v2 — guias para autores (/guias/ e /guias/<tema>/)
   ─────────────────────────────────────────────────────────────────────
   Assenta no artigos.css (o cabeçalho e o corpo do artigo) e acrescenta o
   que é só do guia: a resposta curta, o índice, as perguntas frequentes e a
   lista de guias. */

  /* ── cabeçalho ── */
  .guia-topo{max-width:78ch}
  .guia-migalhas a{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-nav);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--red);
  }
  .guia-migalhas a::before{content:"←";font-weight:400}
  .guia-migalhas a:hover{color:var(--red-deep)}
  .guia-hero h1{margin-top:16px}

  /* A resposta curta: é a frase que o Google e as IAs citam, e a que a
     pessoa com pressa lê. Fica à vista logo debaixo da pergunta. */
  .guia-resposta{
    position:relative;margin-top:26px;max-width:66ch;
    padding:22px clamp(18px,2.4vw,28px) 22px;
    background:#fff;border-radius:var(--radius-sm);
    border-left:5px solid var(--red);box-shadow:var(--shadow-sm);
  }
  .guia-resposta-rotulo{
    position:absolute;top:-17px;left:18px;padding:0 8px;
    font-family:var(--font-hand);font-size:1.45rem;line-height:1;color:var(--red);
    background:var(--paper);transform:rotate(-2deg);
  }
  .guia-resposta p{margin:0;font-size:clamp(1.04rem,.35vw + .98rem,1.16rem);line-height:1.62;color:var(--ink-2)}

  .guia-assinatura{
    display:flex;flex-wrap:wrap;gap:6px 10px;margin:20px 0 0;
    font-size:.82rem;color:var(--muted);
  }

  /* ── corpo e índice ── */
  .guia-corpo{
    display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:clamp(24px,4vw,64px);align-items:start;
    padding-block:clamp(30px,4vw,56px) clamp(40px,5vw,72px);
  }
  .guia-corpo:not(:has(.guia-indice:not([hidden]))){grid-template-columns:minmax(0,1fr)}
  .guia-indice{position:sticky;top:calc(var(--menu-h,86px) + 24px)}
  .guia-indice summary{
    list-style:none;cursor:pointer;
    font-family:var(--font-nav);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);
  }
  .guia-indice summary::-webkit-details-marker{display:none}
  .guia-indice ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
  .guia-indice a{
    display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;
    font-size:.9rem;line-height:1.35;color:var(--ink-soft);
    transition:color .2s ease,border-color .2s ease;
  }
  .guia-indice a:hover{color:var(--red);border-left-color:var(--red)}

  .guia-texto{margin-inline:0;grid-column:auto}
  /* num guia a capitular não ajuda: a primeira coisa é informação */
  .guia-texto p:first-child::first-letter{float:none;font:inherit;padding:0;color:inherit}
  .guia-texto h2{
    margin:1.9em 0 .6em;font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.15;
    scroll-margin-top:calc(var(--menu-h,86px) + 20px);
  }
  .guia-texto h2:first-child{margin-top:0}
  .guia-texto h3{margin:1.5em 0 .45em;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.22}
  .guia-texto ul,.guia-texto ol{margin:0 0 1.15em;padding-left:1.3em;font-size:1.04rem;line-height:1.68;color:var(--ink-2)}
  .guia-texto li{margin:.3em 0}
  .guia-texto li::marker{color:var(--red)}
  .guia-texto blockquote{
    margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--red);
    font-family:var(--font-display);font-size:1.18rem;font-style:italic;color:var(--ink-soft);
  }
  .guia-texto img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
  .guia-texto table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:.95rem}
  .guia-texto th,.guia-texto td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
  .guia-texto th{font-family:var(--font-nav);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

  /* ── perguntas frequentes: abrem e fecham sem JavaScript ── */
  .guia-faq{display:grid;gap:10px;margin:0 0 1.4em}
  .guia-faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .25s ease}
  .guia-faq-item[open]{border-color:var(--line-strong)}
  .guia-faq-item summary{
    list-style:none;cursor:pointer;position:relative;
    padding:16px 52px 16px 20px;font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--ink);
  }
  .guia-faq-item summary::-webkit-details-marker{display:none}
  .guia-faq-item summary::after{
    content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    font-size:1.1rem;line-height:1;color:var(--red);background:var(--red-soft);
    transition:transform .3s var(--ease);
  }
  .guia-faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
  .guia-faq-item summary:hover{color:var(--red)}
  .guia-faq-resposta{padding:0 20px 6px}
  .guia-faq-resposta p{font-size:1rem}

  /* ── lista de guias (no fim de cada guia e em /guias/) ── */
  .guia-outros{background:var(--paper-2);border-top:1px solid var(--line);padding-block:clamp(40px,4.6vw,68px)}
  .guia-outros .fila-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .guia-outros .fila-head h2{margin:8px 0 0;font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.022em}

  .guia-lista{
    list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;counter-reset:guia;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  }
  .guia-lista li{counter-increment:guia}
  .guia-lista a{
    position:relative;display:flex;flex-direction:column;height:100%;
    padding:22px 22px 24px;background:#fff;border-radius:var(--radius-sm);
    border:1px solid var(--line);box-shadow:var(--shadow-xs);
    transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;
  }
  .guia-lista a::before{
    content:counter(guia,decimal-leading-zero);
    font-family:var(--font-hand);font-size:1.6rem;line-height:1;color:var(--red);
  }
  .guia-lista a:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
  .guia-lista h3{margin:12px 0 0;font-size:1.12rem;line-height:1.25;letter-spacing:-.015em}
  .guia-lista a:hover h3{color:var(--red)}
  .guia-lista p{
    margin:8px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .guia-lista .link-arrow{margin-top:auto;padding-top:14px}

  .guia-lista--grande h3{font-size:1.24rem}
  .guia-indice-geral{padding-block:clamp(10px,2vw,24px) clamp(48px,6vw,84px)}
  .guia-vazio{color:var(--ink-soft);font-size:1.02rem}
  .guia-vazio a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

  /* ── ecrãs pequenos ── */
  @media (max-width:1000px){
    .guia-corpo{grid-template-columns:minmax(0,1fr)}
    .guia-indice{position:static;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
    .guia-indice summary::after{content:" +";color:var(--red)}
    .guia-indice details[open] summary::after{content:" −"}
    .guia-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:640px){
    .guia-lista{grid-template-columns:minmax(0,1fr)}
    .guia-resposta{margin-top:30px}
    .guia-faq-item summary{padding:14px 48px 14px 16px;font-size:.98rem}
    .guia-faq-resposta{padding:0 16px 4px}
  }