@charset "UTF-8";
/* ============================================================
   IPTV GIRO - complemento para blog, legal e contato.
   Carrega DEPOIS de iptvgiro.css. Usa os mesmos tokens.
   Hero, tabela, callout, crumb e footer vivem na folha principal.
   ============================================================ */

/* ---------- Lista de checagem rapida ---------- */

.gr-check { list-style: none; padding: 0; margin: 0 0 1.15rem; }
.gr-check li {
  position: relative; padding: .45rem 0 .45rem 1.75rem;
  color: var(--ink-2); font-size: var(--step-0); line-height: 1.5;
}
.gr-check li::before {
  content: "\2713"; position: absolute; left: 0; top: .45rem;
  color: var(--team-d); font-weight: 700;
}
.gr-check--x li::before { content: "\00D7"; color: var(--ink-3); }

/* ---------- CTA padrao de post ---------- */

.cta-teste {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-top: 3px solid var(--team);
  border-radius: var(--r-lg);
  padding: 1.65rem 1.4rem; margin: 1.9rem 0; text-align: center;
}
.cta-teste h2, .cta-teste h3 {
  font-size: clamp(1.5rem, 4.6vw, 2.125rem); text-transform: uppercase;
  color: var(--ink); margin: .75rem 0 .65rem; text-wrap: balance;
}
.cta-teste h2 em, .cta-teste h3 em { font-style: normal; color: var(--team); }
.cta-teste p {
  color: var(--ink-2); font-size: var(--step-0); max-width: 54ch;
  margin: 0 auto 1.25rem; line-height: 1.55; text-wrap: pretty;
}
.cta-teste__acts { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cta-teste__acts .gr-btn { flex: 1 1 auto; min-width: 210px; }
@media (min-width: 560px) { .cta-teste__acts .gr-btn { flex: 0 0 auto; } }

/* ---------- Blog: listagem ---------- */

.gr-bgrid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.gr-bcard {
  background: var(--paper);
  padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column;
  border-left: 3px solid transparent;
  transition: border-left-color .28s var(--ease), background-color .28s var(--ease);
}
.gr-bcard:hover { border-left-color: var(--team); background: var(--paper-2); }
.gr-bcard__tag {
  font-family: var(--display); font-weight: 700; font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--team-d); margin-bottom: .55rem;
}
.gr-bcard h3 {
  font-size: var(--step-2); text-transform: uppercase; color: var(--ink);
  margin-bottom: .55rem; line-height: 1.08; text-wrap: balance;
}
.gr-bcard h3 a { transition: color .25s var(--ease); }
.gr-bcard h3 a:hover { color: var(--team-d); }
.gr-bcard p { color: var(--ink-2); font-size: var(--step-0); margin-bottom: .9rem; line-height: 1.55; text-wrap: pretty; }
.gr-bcard__go {
  margin-top: auto; font-family: var(--display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--team-d);
}
.gr-bcard__go::after { content: "\00A0\203A"; }

/* ---------- Blog: corpo do post ---------- */

.gr-article { max-width: 760px; margin: 0 auto; }
.gr-article p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1rem; text-wrap: pretty; }
.gr-article h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 4.8vw, 2.375rem);
  text-transform: uppercase; color: var(--ink);
  margin: 2.15rem 0 .75rem; padding-left: .9rem; border-left: 4px solid var(--team);
  text-wrap: balance; letter-spacing: -.015em;
}
.gr-article h3 {
  font-size: 1.45rem; text-transform: uppercase; color: var(--ink);
  margin: 1.5rem 0 .55rem; letter-spacing: .01em; text-wrap: balance;
}
.gr-article ul, .gr-article ol { color: var(--ink-2); font-size: 1.0625rem; padding-left: 1.35rem; margin-bottom: 1rem; }
.gr-article li { margin-bottom: .5rem; line-height: 1.55; }
.gr-article a { color: var(--team-d); text-decoration: underline; text-underline-offset: 3px; }
.gr-article strong { color: var(--ink); }
.gr-article .gr-note a { color: var(--team-d); }

.gr-posthead { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; margin-bottom: 1.65rem; }
.gr-posthead__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  font-size: var(--step--2); color: var(--ink-3); margin-top: .9rem; letter-spacing: .02em;
}

/* ---------- Paginas legais ---------- */

.gr-legal { max-width: 800px; margin: 0 auto; }
.gr-legal h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4.2vw, 2rem);
  text-transform: uppercase; color: var(--ink); margin: 2rem 0 .65rem;
  padding-left: .8rem; border-left: 4px solid var(--team);
  letter-spacing: -.01em; text-wrap: balance;
}
.gr-legal h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--ink); margin: 1.25rem 0 .5rem; }
.gr-legal p, .gr-legal li { color: var(--ink-2); font-size: var(--step-0); line-height: 1.66; }
.gr-legal p { margin-bottom: .85rem; text-wrap: pretty; }
.gr-legal ul, .gr-legal ol { padding-left: 1.35rem; margin-bottom: .95rem; }
.gr-legal li { margin-bottom: .45rem; }
.gr-legal a { color: var(--team-d); text-decoration: underline; text-underline-offset: 3px; }
.gr-legal__date { font-size: var(--step--1); color: var(--ink-3); margin-bottom: .4rem; letter-spacing: .02em; }
.gr-fill { color: var(--team-d); font-weight: 600; }

/* ---------- Cartao de contato ---------- */

.gr-cgrid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.gr-ccard {
  background: var(--paper);
  border-top: 3px solid var(--team);
  padding: 1.5rem 1.3rem;
}
.gr-ccard__ico {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r);
  background: rgba(215,42,26,.08); border: 1px solid rgba(215,42,26,.22);
  display: grid; place-items: center; margin-bottom: .9rem; color: var(--team-d);
}
.gr-ccard__ico svg { width: 1.35rem; height: 1.35rem; display: block; }
.gr-ccard h2, .gr-ccard h3 {
  font-size: var(--step-2); text-transform: uppercase; color: var(--ink);
  margin-bottom: .5rem; letter-spacing: .01em; text-wrap: balance;
}
.gr-ccard p { color: var(--ink-2); font-size: var(--step-0); margin-bottom: .9rem; line-height: 1.55; text-wrap: pretty; }

@media (min-width: 600px) {
  .gr-bgrid { grid-template-columns: repeat(2, 1fr); }
  .gr-cgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .gr-bgrid { grid-template-columns: repeat(3, 1fr); }
  .gr-cgrid { grid-template-columns: repeat(3, 1fr); }
}

/* Colunas de grid nao podem ser esticadas pelo conteudo: sem isso a tabela
   larga empurra a pagina e cria scroll horizontal no 360px. */
.gr-about__grid > *,
.gr-explore__grid > *,
.gr-bgrid > *,
.gr-cgrid > * { min-width: 0; }
.gr-tablewrap { max-width: 100%; }

/* Tabela com rolagem propria no telefone. */
.gr-swipe { display: none; font-size: var(--step--1); color: var(--ink-3); margin: -.5rem 0 1.25rem; }
@media (max-width: 660px) { .gr-swipe { display: block; } }

/* Correcao de contraste: link do artigo nao pode vencer o botao. */
.gr-article a.gr-btn { text-decoration: none; }
.gr-article a.gr-btn--go { color: var(--paper); }
.gr-article a.gr-btn--ghost { color: var(--ink); }
.gr-article a.gr-btn--ghost:hover { color: var(--team-d); }

/* O h2 do CTA e centralizado: nao herda a barra do h2 do artigo. */
.gr-article .cta-teste h2 { border-left: none; padding-left: 0; margin-top: 0; }