/*
Theme Name: Fichado
Description: Theme for Fichado Cassino (BR / pt-BR). Brazilian palette - rainforest ink, flag green, gold yellow and a deep blue accent - on a warm off-white page. Allowed blocks only: headings, text, tables, lists, pros/cons, full-width image, author quote.
Version: 1.0.0
Author: WP-generator
Text Domain: wpgen
*/

/* Nunito Sans, variable, self-hosted. Two files cover every weight from 300 to 800. */
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-var.woff2") format("woff2-variations"),
       url("assets/fonts/nunito-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-var-italic.woff2") format("woff2-variations"),
       url("assets/fonts/nunito-var-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Flag colours with fixed jobs: ink = structure, green = action and links,
     gold = emphasis, blue = the one cold accent. They never swap roles. */
  --tinta: #08231A;
  --tinta-2: #0D3325;
  --tinta-3: #134430;
  --heroi: linear-gradient(148deg, #12492F 0%, #0A2A1D 54%, #051710 100%);
  --ouro: #FFDF00;
  --ouro-fundo: #B98E00;
  --acao: #0A7A3C;
  --acao-forte: #075C2D;
  --anil: #012169;

  --fonte: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --texto: #14241C;
  --suave: #5E7268;
  --linha: #DCE5DE;
  --linha-clara: #ECF2EC;
  --cartao: #ffffff;
  --pagina: #F4F7F3;
  --tom: #F7FAF6;
  --positivo: #E9F5EC;
  --positivo-linha: #0A7A3C;
  --negativo: #FCEDEA;
  --negativo-linha: #C1361F;

  --raio: 14px;
  --raio-lg: 22px;
  --largura: 1180px;

  /* Icon for the note box: the site mascot.
     The path MUST be absolute: the browser resolves url() inside a custom
     property relative to the file where the property is USED, not declared. */
  --nota-icone: url('/wp-content/themes/wpgen-BR/assets/mascote.svg');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--texto);
  font: 400 18px/1.66 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.35px; }

img { max-width: 100%; height: auto; }
a { color: var(--acao); }

.fcd-conteiner { max-width: var(--largura); margin: 0 auto; padding: 0 22px; }

/* ---------------- header ---------------- */

.fcd-cabecalho { background: var(--tinta); }

/* Logo sits on the left and the nav below it: a centred wordmark is what every
   competitor does, and the brand should not look borrowed. */
.fcd-cabecalho-linha {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.fcd-sanduiche {
  display: none;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  cursor: pointer;
}
.fcd-sanduiche span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.fcd-sanduiche span + span { margin-top: 5px; }
.fcd-sanduiche:hover { border-color: var(--ouro); }
.fcd-sanduiche:hover span { background: var(--ouro); }
/* open state: the three bars fold into a cross */
.fcd-sanduiche.fcd-aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fcd-sanduiche.fcd-aberto span:nth-child(2) { opacity: 0; }
.fcd-sanduiche.fcd-aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.fcd-marca { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.fcd-marca-ico {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--ouro);
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.fcd-marca-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fcd-marca-txt { display: block; line-height: 1; }
.fcd-marca-txt .fcd-marca-l1 {
  display: block; color: #9FBAAA; font-size: 12px; font-weight: 700;
  letter-spacing: 2.6px; margin-right: -2.6px; text-transform: uppercase;
  margin-bottom: 5px;
}
/* Wordmark: "Fichado" solid white, "Cassino" light gold, one line, no italics. */
.fcd-marca-txt .fcd-marca-l2 { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.fcd-marca-txt .fcd-marca-l2 b { color: #fff; font-weight: 500; }
.fcd-marca-txt .fcd-marca-l2 i { color: var(--ouro); font-weight: 800; font-style: normal; }

/* The nav carries no accent stripe of its own: the flag already runs along the
   bottom of the hero, and a second one here made the header read as two bands. */
.fcd-menu {
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.fcd-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.fcd-menu a {
  display: block; color: #CFE0D4; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 13px 14px;
}
.fcd-menu a:hover { color: #fff; }
.fcd-menu .current-menu-item > a { color: var(--ouro); }

/* Dropdown: opens on click (assets/nav.js), never on hover. */
.fcd-menu li { position: relative; }

/* Metrics copied from `.fcd-menu a`: otherwise the item with a caret sits lower
   than its neighbours and the whole row shifts. */
.fcd-menu-botao {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  color: #CFE0D4; font: 600 15px/1.66 var(--fonte);
  padding: 13px 14px;
}
.fcd-menu-botao:hover, .menu-item-has-children.fcd-aberto > .fcd-menu-botao { color: #fff; }

.fcd-menu-seta {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
/* The caret belongs to its own toggle: a descendant selector would flip every
   caret inside an open dropdown as well. */
.menu-item-has-children.fcd-aberto > .fcd-menu-botao .fcd-menu-seta { transform: rotate(-135deg) translate(-2px, -2px); }

.fcd-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 236px;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
}
.menu-item-has-children.fcd-aberto > .sub-menu { display: block; }

.fcd-menu .sub-menu a {
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.fcd-menu .sub-menu a:hover { background: var(--tinta-3); color: var(--ouro); }

/* ---------------- menu on narrow screens ---------------- */

@media (max-width: 900px) {
  .fcd-sanduiche { display: block; }

  /* The panel is opened by the button; closed, it takes up no space at all. */
  .fcd-menu {
    display: none;
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fcd-menu.fcd-aberto { display: block; animation: fcd-abrir .22s ease-out; }

  .fcd-menu ul { display: block; }
  .fcd-menu li { position: static; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .fcd-menu li:last-child { border-bottom: 0; }
  .fcd-menu a, .fcd-menu .fcd-menu-botao { display: block; width: 100%; padding: 14px 4px; font-size: 16px; text-align: left; }
  .fcd-menu .fcd-menu-botao { display: flex; justify-content: space-between; }
  .fcd-menu .current-menu-item > a { color: var(--ouro); }

  /* Inside the panel the submenu expands in place, without absolute positioning. */
  .fcd-menu .sub-menu {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, .25);
    margin: 0 -22px;
    padding: 4px 22px 8px;
  }
  .fcd-menu .sub-menu a { padding: 11px 12px; font-size: 15px; }

  /* While the menu is open the page underneath does not scroll. */
  body.fcd-menu-travado { overflow: hidden; }
}

@keyframes fcd-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- hero ---------------- */

.fcd-vitrine { position: relative; overflow: hidden; background: var(--heroi); color: #fff; padding: 34px 0 44px; }
.fcd-vitrine .fcd-conteiner { position: relative; z-index: 2; }

/* Mascot on the right of the first screen.
   Three rules keep it from reading as "someone peeking round a corner": it sits
   entirely inside the dark area, fades out downwards through a mask, and has
   almost no contrast. This is background, not illustration. */
.fcd-vitrine::before {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 26px;
  width: 236px;
  height: 236px;
  background: url("assets/mascote.svg") no-repeat center / contain;
  opacity: .09;
  transform: rotate(4deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .25) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .25) 90%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  animation: fcd-mascote-entrada 1s ease-out both;
}
/* On an author page the portrait stands on the right: two faces side by side is one too many. */
.fcd-vitrine-autor::before { display: none; }

@keyframes fcd-mascote-entrada {
  from { opacity: 0; transform: translate(18px, 10px) rotate(12deg); }
  to   { opacity: .09; transform: rotate(4deg); }
}

/* Flat tricolour baseline instead of a diagonal cut: a straight edge is easier
   to read and does not eat 60px of vertical space on a phone. */
.fcd-vitrine::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--acao) 0 38%, var(--ouro) 38% 72%, var(--anil) 72%);
  pointer-events: none;
}

.fcd-vitrine .fcd-migalhas { font-size: 14px; color: #8FA89A; margin-bottom: 18px; }
.fcd-vitrine .fcd-migalhas a { color: #8FA89A; text-decoration: none; }
.fcd-vitrine .fcd-migalhas a:hover { color: var(--ouro); }

.fcd-vitrine-plana .fcd-vitrine-grid { grid-template-columns: 1fr; }
.fcd-vitrine-plana h1 { max-width: 22ch; }
.fcd-vitrine-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 30px; align-items: center; }
.fcd-vitrine h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.08; margin: 0 0 16px; font-weight: 800; letter-spacing: -1px;
}
.fcd-vitrine p.fcd-introducao { max-width: 64ch; font-size: clamp(16px, 1.35vw, 19px); font-weight: 400; color: #DDEBE0; margin: 0 0 22px; }
.fcd-vitrine p.fcd-introducao strong { color: #fff; font-weight: 700; }
.fcd-vitrine-imagem { border-radius: var(--raio-lg); overflow: hidden; }

.fcd-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.fcd-atalhos-item {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--raio); padding: 16px 12px; text-align: center;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
}
.fcd-atalhos-item:hover { background: rgba(255, 255, 255, .11); border-color: var(--ouro); }
.fcd-atalhos-item .fcd-atalhos-ico { display: block; font-size: 24px; margin-bottom: 8px; }

/* ---------------- author blocks ---------------- */

.fcd-assinatura { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-top: 22px; }
.fcd-assinatura .fcd-assinatura-pessoa { display: flex; align-items: center; gap: 11px; }
.fcd-assinatura img, .fcd-autor img {
  border-radius: 50%; background: var(--tinta-3); object-fit: cover; flex: 0 0 auto;
}
.fcd-assinatura img { width: 42px; height: 42px; border: 2px solid rgba(239, 180, 26, .45); }
.fcd-autor img { width: 74px; height: 74px; }
.fcd-assinatura .fcd-assinatura-meta { font-size: 13.5px; line-height: 1.4; color: #E6F0E8; }
.fcd-assinatura .fcd-assinatura-meta .fcd-assinatura-cargo { color: #8FA89A; }
.fcd-assinatura .fcd-assinatura-meta a { color: #fff; font-weight: 700; text-decoration: none; }
.fcd-assinatura .fcd-assinatura-meta a:hover { color: var(--ouro); }

.fcd-autor {
  position: relative;
  overflow: hidden;
  background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid var(--ouro);
  border-radius: var(--raio);
  padding: 24px; display: flex; gap: 18px; align-items: flex-start; margin: 34px 0;
}
/* The same mascot as in the hero, only fainter: the author card stops being a
   blank rectangle and rhymes with the first screen. */
.fcd-autor::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 168px;
  height: 168px;
  background: url("assets/mascote.svg") no-repeat center / contain;
  opacity: .06;
  transform: rotate(6deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
  pointer-events: none;
}
@media (max-width: 640px) {
  /* In a narrow card the mascot eats the space the text needs. */
  .fcd-autor::after { display: none; }
}
.fcd-autor > * { position: relative; z-index: 1; }
.fcd-autor .fcd-autor-corpo { flex: 1; }
.fcd-autor h2 { margin: 0 0 6px; font-size: 20px; padding-left: 0; border-left: 0; }
.fcd-autor .fcd-assinatura-cargo { color: var(--suave); font-size: 14px; margin: 0 0 10px; }
.fcd-autor p { margin: 0 0 10px; }
.fcd-autor .fcd-autor-link { font-weight: 700; text-decoration: none; }
.fcd-autor .fcd-autor-link:hover { text-decoration: underline; }

/* Pull quote: gold rule on top, not a left border — the quote reads as a
   separate voice in the text rather than as an indented aside.
   Two selectors on purpose: .fcd-citacao is what wpgen_author_quote() prints,
   while a quote written in the page text arrives from the block converter as a
   plain blockquote.wp-block-quote and has to get the same treatment. */
.fcd-citacao,
.fcd-texto blockquote {
  border: 0;
  border-top: 3px solid var(--ouro);
  background: var(--tom);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: 20px 24px; margin: 30px 0; font-size: 19px; font-style: italic; color: #16332A;
}
.fcd-texto blockquote p { margin: 0; }
.fcd-texto blockquote p + p { margin-top: 12px; }
.fcd-citacao footer, .fcd-texto blockquote cite {
  display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: var(--suave);
}

/* ---------------- content ---------------- */

.fcd-corpo { padding: 30px 0 10px; }
.fcd-painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px 32px; }

/* H2 with a gold bar to its left instead of an underline: the section starts at
   a visible edge, which also survives being read at a glance on a phone. */
.fcd-texto h2 {
  font-size: 27px; margin: 38px 0 14px; letter-spacing: -.5px;
  padding-left: 16px; border-left: 5px solid var(--ouro);
  line-height: 1.22;
}
.fcd-texto h3 { font-size: 21px; margin: 28px 0 10px; }
.fcd-texto h2:first-child, .fcd-texto h3:first-child { margin-top: 0; }
.fcd-texto p { margin: 0 0 17px; }
.fcd-texto > *:first-child { margin-top: 0; }
.fcd-texto > *:last-child { margin-bottom: 0; }
.fcd-texto figure.wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.fcd-texto figure.wp-block-table table { margin: 0; }
.fcd-texto ul.wp-block-list, .fcd-texto ol.wp-block-list { margin: 0 0 18px; padding-left: 22px; }
.fcd-texto ul, .fcd-texto ol { margin: 0 0 18px; padding-left: 22px; }
.fcd-texto li { margin-bottom: 8px; }
.fcd-texto li::marker { color: var(--ouro-fundo); font-weight: 700; }

/* Table with an ink header row: the first row is a label strip, not another
   shaded cell, so a wide comparison stays readable while scrolling sideways. */
.fcd-texto table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.fcd-texto th, .fcd-texto td { border: 1px solid var(--linha); padding: 12px 14px; text-align: left; }
.fcd-texto th { background: var(--tinta); color: #fff; font-weight: 700; border-color: var(--tinta); }
.fcd-texto tr:nth-child(even) td { background: var(--tom); }

/* Images in the text share the radius of the cards and tables:
   .fcd-figura is the classic editor, .wp-block-image is Gutenberg. */
.fcd-texto figure.fcd-figura,
.fcd-texto figure.wp-block-image { margin: 30px 0; }
.fcd-texto figure.fcd-figura img,
.fcd-texto figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  box-shadow: 0 8px 20px rgba(23, 20, 15, .09);
  transition: box-shadow .25s ease, transform .25s ease;
}
.fcd-texto figure.fcd-figura img:hover,
.fcd-texto figure.wp-block-image img:hover {
  box-shadow: 0 14px 30px rgba(23, 20, 15, .17);
  transform: translateY(-2px);
}
.fcd-balanca { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.fcd-balanca > div { border-radius: var(--raio); padding: 18px 20px; }
.fcd-balanca .fcd-pro { background: var(--positivo); border: 1px solid var(--positivo-linha); }
.fcd-balanca .fcd-contra { background: var(--negativo); border: 1px solid var(--negativo-linha); }
.fcd-balanca h3 { margin: 0 0 10px; font-size: 17px; }
.fcd-balanca .fcd-pro h3 { color: #0A7A3C; }
.fcd-balanca .fcd-contra h3 { color: #075C2D; }
.fcd-balanca ul { margin: 0; padding-left: 20px; }

.fcd-perguntas h3 { font-size: 19px; margin: 22px 0 8px; }
.fcd-perguntas p { margin: 0 0 14px; }

/* Accordion: H3 + paragraph in the content are turned into a clickable block by the script. */
.fcd-perguntas-item {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.fcd-perguntas-item.fcd-aberto { border-color: var(--ouro); box-shadow: 0 2px 12px rgba(23, 20, 15, .07); }

.fcd-perguntas-botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 16px 18px;
  font: 800 17px/1.4 var(--fonte);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.fcd-perguntas-botao:hover { background: var(--tom); }
.fcd-perguntas-botao-txt { flex: 1; }

.fcd-perguntas-ico {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 7px;
  background: var(--linha-clara);
  transition: transform .18s ease, background .18s ease;
}
.fcd-perguntas-ico::before, .fcd-perguntas-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  margin: -1px 0 0 -5.5px;
  background: var(--tinta);
  border-radius: 2px;
}
.fcd-perguntas-ico::after { transform: rotate(90deg); transition: opacity .18s ease; }
.fcd-perguntas-item.fcd-aberto .fcd-perguntas-ico { background: var(--ouro); }
.fcd-perguntas-item.fcd-aberto .fcd-perguntas-ico::after { opacity: 0; }

.fcd-perguntas-resposta { display: none; padding: 0 18px 16px; }
.fcd-perguntas-item.fcd-aberto .fcd-perguntas-resposta { display: block; }
.fcd-perguntas-resposta p { margin: 0 0 10px; }
.fcd-perguntas-resposta p:last-child { margin-bottom: 0; }

/* ---------------- footer ---------------- */

.fcd-rodape { background: var(--tinta); color: #BFD3C6; margin-top: 44px; padding: 36px 0 26px; font-size: 15px; }
/* Four columns: brand, sections, editorial and legal, outside help. The header
   menu is deliberately short, so the footer is what gives full access. */
.fcd-rodape-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.fcd-rodape h4 { color: var(--ouro); font-size: 14px; margin: 0 0 13px; text-transform: uppercase; letter-spacing: 1px; }
.fcd-rodape ul { list-style: none; margin: 0; padding: 0; }
.fcd-rodape li { margin-bottom: 8px; }
.fcd-rodape a { color: #BFD3C6; text-decoration: none; }
.fcd-rodape a:hover { color: var(--ouro); }
.fcd-rodape-nota { border-top: 1px solid var(--tinta-3); margin-top: 28px; padding-top: 18px; font-size: 13px; color: #7E958A; }
.fcd-idade {
  display: inline-block; border: 2px solid var(--ouro); color: var(--ouro); border-radius: 50%;
  width: 36px; height: 36px; line-height: 32px; text-align: center;
  font-weight: 800; font-size: 12px; margin-right: 10px; vertical-align: middle;
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .fcd-vitrine { padding: 24px 0 34px; }
  /* On a tablet the mascot shrinks: at full size it takes over the first screen. */
  .fcd-vitrine::before { width: 168px; height: 168px; right: 16px; bottom: 20px; opacity: .08; }
  .fcd-vitrine-grid { grid-template-columns: 1fr; gap: 22px; }
  .fcd-vitrine-imagem { order: 2; max-width: 440px; margin: 0 auto; width: 100%; }
  .fcd-atalhos { grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
  .fcd-atalhos-item { padding: 14px 10px; font-size: 12px; }
  .fcd-rodape-grid { grid-template-columns: 1fr 1fr; }
  .fcd-vitrine-plana h1 { max-width: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .fcd-conteiner { padding: 0 16px; }

  .fcd-vitrine-imagem { max-width: 340px; }
  .fcd-vitrine p.fcd-introducao { font-size: 16px; }
  /* On a phone the text takes the full width: a decorative mascot only gets in the way. */
  .fcd-vitrine::before { display: none; }
  .fcd-assinatura { gap: 14px; margin-top: 18px; }
  .fcd-assinatura .fcd-assinatura-pessoa { flex: 1 1 100%; }

  .fcd-corpo { padding: 22px 0 6px; }
  .fcd-painel { padding: 20px 16px; }
  .fcd-texto h2 { font-size: 22px; margin: 28px 0 10px; padding-left: 12px; border-left-width: 4px; }
  .fcd-texto h3 { font-size: 19px; }
  .fcd-balanca { grid-template-columns: 1fr; }
  .fcd-autor { flex-direction: column; }
  .fcd-rodape-grid { grid-template-columns: 1fr; }
  .fcd-texto table { display: block; overflow-x: auto; }
}

/* ---------------- author profile pages ---------------- */

.fcd-perfil {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--tom); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 24px 26px; margin: 0 0 28px;
}
.fcd-perfil img {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; background: var(--tinta-3); flex: 0 0 auto;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(23, 20, 15, .12);
}
.fcd-perfil .fcd-autor-corpo { flex: 1; min-width: 0; }
.fcd-perfil .fcd-assinatura-cargo { font-size: 16px; font-weight: 600; color: var(--texto); margin: 0 0 14px; }
.fcd-perfil ul.fcd-perfil-info { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.fcd-perfil ul.fcd-perfil-info li {
  padding: 8px 0; border-top: 1px solid var(--linha); margin: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.fcd-perfil ul.fcd-perfil-info li:first-child { border-top: 0; padding-top: 0; }
.fcd-perfil ul.fcd-perfil-info strong { flex: 0 0 210px; color: var(--suave); font-weight: 600; }

.fcd-perfil.fcd-perfil-mini { margin: 0 0 18px; padding: 20px 22px; }
.fcd-perfil.fcd-perfil-mini img { width: 120px; height: 120px; }
.fcd-perfil.fcd-perfil-mini h3 { margin: 0 0 4px; font-size: 20px; }
.fcd-perfil.fcd-perfil-mini h3 a { text-decoration: none; }
.fcd-perfil.fcd-perfil-mini .fcd-assinatura-cargo { font-size: 14px; color: var(--suave); font-weight: 600; margin: 0 0 10px; }
.fcd-perfil.fcd-perfil-mini p { margin: 0 0 10px; }
.fcd-perfil.fcd-perfil-mini .fcd-autor-link { font-weight: 700; text-decoration: none; }

/* ---------------- self-assessment test ---------------- */

.fcd-autoteste { margin: 26px 0 32px; }
.fcd-autoteste-app {
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--tom); padding: 26px 28px;
}
.fcd-autoteste-head h3 { margin: 0 0 4px; font-size: 20px; }
.fcd-autoteste-progresso { margin: 0 0 18px; font-size: 14px; color: var(--suave); }

/* The separator is drawn with ::before rather than border-top: a legend with
   display:flex stops "breaking" the fieldset border and the rule runs through the text. */
.fcd-autoteste-pergunta { border: 0; margin: 0; padding: 0 0 4px; }
.fcd-autoteste-pergunta + .fcd-autoteste-pergunta::before {
  content: ""; display: block; height: 1px; background: var(--linha); margin: 18px 0;
}
.fcd-autoteste-pergunta legend { display: flex; gap: 10px; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes { clear: both; }
.fcd-autoteste-pergunta legend .fcd-autoteste-num {
  flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--linha-clara);
  color: var(--suave); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.fcd-autoteste-pergunta.fcd-autoteste-pronta legend .fcd-autoteste-num { background: var(--ouro); color: var(--tinta); }
.fcd-autoteste-pergunta legend .fcd-autoteste-txt { font-weight: 600; }

.fcd-autoteste-pergunta .fcd-autoteste-opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes label {
  display: block; text-align: center; cursor: pointer; user-select: none;
  border: 1px solid var(--linha); border-radius: 8px; background: #fff;
  padding: 10px 8px; font-size: 14px; line-height: 1.3;
}
.fcd-autoteste-pergunta .fcd-autoteste-opcoes label:hover { border-color: var(--acao); }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes input:checked + label {
  background: var(--acao); border-color: var(--acao); color: #fff; font-weight: 600;
}
.fcd-autoteste-pergunta .fcd-autoteste-opcoes input:focus-visible + label { outline: 2px solid var(--ouro); outline-offset: 2px; }

.fcd-autoteste-enviar, .fcd-autoteste-refazer {
  margin-top: 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--acao); color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 800; padding: 13px 26px;
}
.fcd-autoteste-enviar:hover:enabled, .fcd-autoteste-refazer:hover { background: var(--acao-forte); }
.fcd-autoteste-enviar:disabled { background: #D3E0D6; color: #7E958A; cursor: not-allowed; }
.fcd-autoteste-nota { margin: 12px 0 0; font-size: 13.5px; color: var(--suave); }

.fcd-autoteste-resultado { display: none; }
.fcd-autoteste-resultado.fcd-autoteste-visivel { display: block; margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--linha); }
.fcd-autoteste-badge { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--raio); color: #fff; }
.fcd-autoteste-badge .fcd-autoteste-badge-titulo { font-size: 21px; font-weight: 800; }
.fcd-autoteste-badge .fcd-autoteste-badge-score { font-size: 14px; opacity: .92; }
.fcd-autoteste-badge.fcd-n0 { background: #0A7A3C; }
.fcd-autoteste-badge.fcd-n1 { background: #7CA33F; }
.fcd-autoteste-badge.fcd-n2 { background: #D08A1E; }
.fcd-autoteste-badge.fcd-n3 { background: var(--acao); }

.fcd-autoteste-escala-wrap { margin: 18px 0 6px; }
.fcd-autoteste-escala { width: 100%; height: auto; display: block; }
.fcd-autoteste-escala .fcd-autoteste-g-score { font-family: var(--fonte); font-size: 21px; font-weight: 800; fill: var(--tinta); }
.fcd-autoteste-escala .fcd-autoteste-g-faixa { font-family: var(--fonte); font-size: 13px; fill: #4B6055; }
.fcd-autoteste-escala .fcd-autoteste-g-eixo { font-family: var(--fonte); font-size: 12.5px; fill: #7E958A; }

.fcd-autoteste-intro { margin: 6px 0 18px; }
.fcd-autoteste-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 12px; }
.fcd-autoteste-parte .fcd-autoteste-parte-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.fcd-autoteste-parte .fcd-autoteste-parte-label { color: var(--suave); }
.fcd-autoteste-parte .fcd-autoteste-parte-valor { font-weight: 700; }
.fcd-autoteste-parte .fcd-autoteste-parte-trilho { height: 12px; border-radius: 6px; background: var(--linha-clara); overflow: hidden; }
.fcd-autoteste-parte .fcd-autoteste-parte-preenchimento { height: 100%; border-radius: 6px; }
.fcd-autoteste-partes-nota { font-size: 15px; color: var(--suave); margin: 0 0 20px; }
.fcd-autoteste-resultado h4 { font-size: 18px; margin: 0 0 10px; }
.fcd-autoteste-acoes { margin: 0 0 18px; padding-left: 22px; }
.fcd-autoteste-acoes li { margin-bottom: 8px; }
.fcd-autoteste-aviso { font-size: 14px; color: var(--suave); margin: 0; }

@media (max-width: 640px) {
  .fcd-perfil { flex-direction: column; padding: 18px 16px; }
  .fcd-perfil img { width: 120px; height: 120px; }
  .fcd-perfil ul.fcd-perfil-info li { display: block; }
  .fcd-perfil ul.fcd-perfil-info strong { display: block; flex: none; }

  .fcd-autoteste-app { padding: 18px 14px; }
  .fcd-autoteste-pergunta .fcd-autoteste-opcoes { grid-template-columns: 1fr 1fr; }
  .fcd-autoteste-enviar, .fcd-autoteste-refazer { width: 100%; }
  .fcd-autoteste-partes { grid-template-columns: 1fr; }
  /* The svg scales with its viewBox, so on a narrow screen the labels have to
     grow in user units, otherwise they become unreadable. */
  .fcd-autoteste-escala .fcd-autoteste-g-score { font-size: 30px; }
  .fcd-autoteste-escala .fcd-autoteste-g-faixa { font-size: 19px; }
  .fcd-autoteste-escala .fcd-autoteste-g-eixo { font-size: 17px; }
  .fcd-autoteste-parte .fcd-autoteste-parte-head { display: block; }
  .fcd-autoteste-parte .fcd-autoteste-parte-valor { display: block; margin-top: 2px; }
}

/* ---------- "Hoe wij testen": the site-wide method block ----------
   Three layout variants, chosen per site (config key: test_flow).
   The colours come from the variables, so the block always wears the palette
   of the domain it runs on instead of dragging a foreign one along.        */

.fcd-metodo { margin: 32px 0 0; padding: 26px 0 0; border-top: 1px solid var(--linha); }
.fcd-metodo-titulo { font-size: 22px; margin: 0 0 6px; letter-spacing: -.4px; }
.fcd-metodo-intro { color: var(--suave); font-size: 16px; margin: 0 0 22px; max-width: 78ch; }
.fcd-metodo-mais { margin: 18px 0 0; font-size: 15px; }
.fcd-metodo-ico { width: 24px; height: 24px; display: block; }

/* --- "rail" variant: four steps on a shared line --- */

.fcd-metodo-trilho .fcd-metodo-etapas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.fcd-metodo-trilho .fcd-metodo-etapa { position: relative; padding: 0 14px; text-align: center; margin: 0; }
.fcd-metodo-trilho .fcd-metodo-etapa::before {
  content: ""; position: absolute; top: 27px; left: 0; right: 50%;
  border-top: 2px solid var(--linha);
}
.fcd-metodo-trilho .fcd-metodo-etapa::after {
  content: ""; position: absolute; top: 27px; left: 50%; right: 0;
  border-top: 2px solid var(--linha);
}
.fcd-metodo-trilho .fcd-metodo-etapa:first-child::before,
.fcd-metodo-trilho .fcd-metodo-etapa:last-child::after { display: none; }
.fcd-metodo-trilho .fcd-metodo-disco {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--tinta); color: #fff;
}
/* White on gold misses the minimum contrast ratio, so that icon is dark. */
.fcd-metodo-trilho .fcd-etapa-cronometro .fcd-metodo-disco { background: var(--ouro); color: var(--tinta); }
.fcd-metodo-trilho .fcd-metodo-num {
  position: absolute; right: -6px; bottom: -6px;
  width: 22px; height: 22px; border-radius: 7px;
  background: #fff; color: var(--tinta);
  border: 2px solid var(--linha);
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}
.fcd-metodo-trilho .fcd-metodo-corpo { display: block; margin-top: 13px; }
.fcd-metodo-trilho .fcd-metodo-etapa-titulo { display: block; font-size: 16px; line-height: 1.3; }
.fcd-metodo-trilho .fcd-metodo-nota { display: block; color: var(--suave); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.fcd-metodo-trilho .fcd-metodo-detalhe { display: block; font-size: 14px; line-height: 1.5; margin-top: 8px; text-align: left; }

/* --- "tiles" variant: four dense tiles, no connecting line --- */

.fcd-metodo-blocos .fcd-metodo-etapas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.fcd-metodo-blocos .fcd-metodo-etapa {
  position: relative; overflow: hidden; margin: 0;
  padding: 16px 16px 18px;
  background: var(--tinta); color: #fff; border-radius: var(--raio);
}
.fcd-metodo-blocos .fcd-etapa-cronometro { background: linear-gradient(158deg, var(--tinta-3) 0%, var(--tinta) 70%); }
.fcd-metodo-blocos .fcd-metodo-disco { display: block; color: var(--ouro); }
.fcd-metodo-blocos .fcd-metodo-num {
  position: absolute; right: 10px; top: 2px;
  font-size: 44px; font-weight: 800; line-height: 1;
  color: #fff; opacity: .12;
}
.fcd-metodo-blocos .fcd-metodo-corpo { display: block; margin-top: 12px; }
.fcd-metodo-blocos .fcd-metodo-etapa-titulo { display: block; font-size: 16px; line-height: 1.3; }
.fcd-metodo-blocos .fcd-metodo-nota { display: block; color: #A9C2B4; font-size: 14px; line-height: 1.45; margin-top: 4px; }
.fcd-metodo-blocos .fcd-metodo-detalhe { display: block; color: #DDEBE0; font-size: 14px; line-height: 1.5; margin-top: 8px; }

/* --- "stopwatch" variant: one solid SVG, labels inside the drawing --- */

.fcd-metodo-figura { margin: 0; }
.fcd-metodo-svg { width: 100%; height: auto; display: block; }
.fcd-metodo-svg-v { display: none; }

@media (max-width: 860px) {
  .fcd-metodo-trilho .fcd-metodo-etapas, .fcd-metodo-blocos .fcd-metodo-etapas { grid-template-columns: 1fr 1fr; }
  .fcd-metodo-trilho .fcd-metodo-etapa { padding-bottom: 20px; }
  .fcd-metodo-trilho .fcd-metodo-etapa:nth-child(2)::after,
  .fcd-metodo-trilho .fcd-metodo-etapa:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .fcd-metodo-trilho .fcd-metodo-etapas, .fcd-metodo-blocos .fcd-metodo-etapas { grid-template-columns: 1fr; }
  .fcd-metodo-trilho .fcd-metodo-etapa { display: flex; gap: 14px; text-align: left; padding: 0 0 18px; }
  .fcd-metodo-trilho .fcd-metodo-etapa::before, .fcd-metodo-trilho .fcd-metodo-etapa::after { display: none; }
  .fcd-metodo-trilho .fcd-metodo-etapa:not(:last-child) .fcd-metodo-disco::after {
    content: ""; position: absolute; left: 50%; top: 54px; height: 34px;
    border-left: 2px solid var(--linha);
  }
  .fcd-metodo-trilho .fcd-metodo-disco { flex: 0 0 54px; }
  .fcd-metodo-trilho .fcd-metodo-corpo { margin-top: 2px; }
  .fcd-metodo-svg-h { display: none; }
  .fcd-metodo-svg-v { display: block; }
}

/* The "waar het misliep" box: a short log of what went wrong inside a review.
   The icon is the site mascot, set through --nota-icone, because every domain
   has its own. No JS: this is a static block that must behave identically
   across dozens of domains. */
.fcd-registro {
  position: relative;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acao);
  border-radius: var(--raio);
  background: var(--tom);
  padding: 16px 18px 14px 62px;
  margin: 24px 0;
}
.fcd-registro::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 30px;
  height: 30px;
  background: var(--nota-icone, none) center/contain no-repeat;
  opacity: .95;
}
.fcd-registro h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--texto);
}
.fcd-registro p { margin: 0 0 10px; }
.fcd-registro p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .fcd-registro { padding: 14px 14px 12px 14px; }
  .fcd-registro::before { position: static; display: block; margin-bottom: 8px; }
}

/* Index of child pages on a hub. Rendered by the theme, so the styles live
   here: the mechanism is shared, the contents differ per site. */
.fcd-indice { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linha); }
.fcd-indice h2 { margin: 0 0 14px; }
.fcd-indice ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.fcd-indice li { line-height: 1.5; }
.fcd-indice a { font-weight: 700; text-decoration: none; }
.fcd-indice a:hover { text-decoration: underline; }
.fcd-indice span { display: block; color: var(--suave); font-size: 15px; }
@media (max-width: 720px) { .fcd-indice ul { grid-template-columns: 1fr; } }

/* Hub page that is nothing but a list of articles (wpgen_listing_hub) */
.fcd-listagem { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fcd-listagem-item { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.fcd-listagem-rubrica { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acao); }
.fcd-listagem-titulo { font-size: 20px; font-weight: 800; line-height: 1.3; text-decoration: none; color: var(--texto); }
.fcd-listagem-titulo:hover { color: var(--acao); }
.fcd-listagem-txt { margin: 0; color: var(--suave); line-height: 1.55; }
.fcd-listagem-rodape { margin-top: auto; padding-top: 10px; display: flex; gap: 16px; color: var(--suave); font-size: 14px; }
.fcd-listagem-vazia { color: var(--suave); margin: 0; }
@media (max-width: 720px) { .fcd-listagem { grid-template-columns: 1fr; } }
/* On a listing hub the outer card is redundant: the article cards are the content. */
.fcd-texto:has(> .fcd-listagem), .fcd-texto:has(> .fcd-listagem-vazia) { background: none; border: 0; padding: 0; }

/* ---------------- disclaimer under the byline ---------------- */

.fcd-aviso {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.55;
  color: #9FB6A8;
  max-width: 82ch;
}
.fcd-aviso-idade {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 8px;
  border: 1px solid var(--ouro);
  border-radius: 6px;
  color: var(--ouro);
  font-weight: 800;
  font-size: 12px;
}

/* ---------------- portrait on the author page ---------------- */

.fcd-vitrine-autor .fcd-conteiner { position: relative; }
.fcd-retrato {
  position: absolute; right: 0; top: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fcd-retrato img {
  width: 190px; height: 190px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(239, 180, 26, .4);
  box-shadow: 0 14px 34px rgba(10, 8, 6, .5);
}
.fcd-retrato .fcd-retrato-cidade { font-size: 13px; color: #8FA89A; letter-spacing: .3px; }
.fcd-vitrine-autor h1, .fcd-vitrine-autor p.fcd-introducao { max-width: 30ch; }

@media (max-width: 900px) {
  .fcd-retrato { position: static; align-items: flex-start; margin-top: 18px; }
  .fcd-retrato img { width: 128px; height: 128px; }
  .fcd-vitrine-autor h1, .fcd-vitrine-autor p.fcd-introducao { max-width: none; }
}

/* ---------------- trust badge strip above the footer ---------------- */

/* The strip sits flush against the footer: the footer's own top margin would
   otherwise leave a light gap and the strip would float on its own. */
.fcd-selos + .fcd-rodape { margin-top: 0; }

.fcd-selos { background: var(--tom); border-top: 1px solid var(--linha); padding: 22px 0; }
.fcd-selos ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.fcd-selos a, .fcd-selos .fcd-selo-fixo {
  display: flex; align-items: center; gap: 11px;
  min-width: 184px; padding: 11px 16px; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio); text-decoration: none; color: var(--tinta);
}
.fcd-selos a:hover { border-color: var(--acao); }
.fcd-selos a:hover .fcd-selo-ico { color: var(--acao); }
.fcd-selos .fcd-selo-ico { flex: 0 0 auto; color: var(--ouro-fundo); }
.fcd-selos .fcd-selo-txt { display: flex; flex-direction: column; min-width: 0; }
.fcd-selos .fcd-selo-nome { font-weight: 800; font-size: 15px; letter-spacing: .3px; line-height: 1.2; }
.fcd-selos .fcd-selo-nota { font-size: 12px; color: var(--suave); margin-top: 2px; }

@media (max-width: 720px) {
  .fcd-selos { padding: 14px 0; }
  .fcd-selos a, .fcd-selos .fcd-selo-fixo { min-width: calc(50% - 5px); padding: 9px 12px; }
  .fcd-selos .fcd-selo-nota { font-size: 11px; }
}

/* ---------------- in-content CTA banner and explanatory schemes ---------------- */

.fcd-faixa { display: block; margin: 32px 0; }
.fcd-faixa img {
  display: block; width: 100%; height: auto; border-radius: var(--raio-lg);
  box-shadow: 0 12px 28px rgba(23, 20, 15, .15);
}
.fcd-faixa--claro img { box-shadow: 0 10px 24px rgba(23, 20, 15, .09); }

.fcd-esquema { margin: 30px 0; }
.fcd-esquema img { display: block; width: 100%; height: auto; border-radius: var(--raio-lg); }

@media (max-width: 640px) {
  .fcd-faixa { margin: 22px 0; }
  .fcd-faixa img { border-radius: var(--raio); }
  .fcd-esquema { margin: 20px 0; }
}

/* Eight top-level items do not fit a row at 15px with 14px padding, so the
   desktop header packs a little tighter. Submenus stay comfortable. */
@media (min-width: 981px) {
  .fcd-menu a, .fcd-menu .fcd-menu-botao { font-size: 14.5px; padding: 12px 11px; }
  .fcd-menu .sub-menu a { font-size: 14px; padding: 9px 16px; }
}

/* ---------------- motion: hover and entrance ----------------
   One rule: animation signals that something is clickable and never gets in the
   way of reading. So everything is short (0.2-0.3 s) and nothing shifts layout. */

.fcd-marca-ico img { transition: transform .3s ease; }
.fcd-marca:hover .fcd-marca-ico img { transform: rotate(-6deg) scale(1.06); }

.fcd-menu a, .fcd-menu .fcd-menu-botao { transition: color .18s ease, background .18s ease; }

.fcd-texto a { transition: color .18s ease; }
.fcd-texto p a { text-underline-offset: 3px; }
.fcd-texto p a:hover { color: var(--acao-forte); }

/* Cards: a slight lift and shadow, the border picks up the accent. */
.fcd-listagem-item, .fcd-selos a, .fcd-autor {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fcd-listagem-item:hover {
  transform: translateY(-3px);
  border-color: var(--ouro);
  box-shadow: 0 10px 26px rgba(23, 20, 15, .09);
}
.fcd-selos a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(23, 20, 15, .09); }

.fcd-faixa img { transition: transform .25s ease, box-shadow .25s ease; }
.fcd-faixa:hover img { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(23, 20, 15, .2); }

.fcd-texto tbody tr { transition: background .18s ease; }
.fcd-texto tbody tr:hover td { background: #EEF5EE; }

.fcd-metodo-trilho .fcd-metodo-disco { transition: transform .22s ease, box-shadow .22s ease; }
.fcd-metodo-trilho .fcd-metodo-etapa:hover .fcd-metodo-disco {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(23, 20, 15, .22);
}

.fcd-perguntas-botao { transition: background .18s ease; }
.fcd-perguntas-item { transition: border-color .2s ease, box-shadow .2s ease; }

/* The first screen appears with a minimal shift: heading, lead and byline. */
.fcd-vitrine h1,
.fcd-vitrine p.fcd-introducao,
.fcd-vitrine .fcd-assinatura { animation: fcd-entrada .55s ease-out both; }
.fcd-vitrine p.fcd-introducao { animation-delay: .08s; }
.fcd-vitrine .fcd-assinatura { animation-delay: .16s; }

@keyframes fcd-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Whoever turned animations off in their system does not see them here either. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fcd-vitrine h1, .fcd-vitrine p.fcd-introducao, .fcd-vitrine .fcd-assinatura { opacity: 1; transform: none; }
  .fcd-vitrine::before { opacity: .09; transform: rotate(4deg); }
}

/* ================= brand layer: Fichado =================
   Everything that makes this theme its own brand rather than a repaint:
   the flag lozenge, the mosaic wave of the Rio promenade, and the shapes
   the header, headings and cards are cut from. Kept in one block so the
   brand can be lifted out without touching the layout above. */

/* Header: green rule under the brand row, lozenge-cut logo plate. */
.fcd-cabecalho { background: var(--tinta); }
.fcd-cabecalho-linha { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.fcd-marca-ico {
  border-radius: 0;
  border: 0;
  background: none;
  width: 52px; height: 52px; flex: 0 0 52px;
  padding: 0;
}
.fcd-marca-txt .fcd-marca-l2 b { color: #fff; font-weight: 800; }
.fcd-marca-txt .fcd-marca-l2 i { color: var(--ouro); font-weight: 300; font-style: normal; }
.fcd-marca-txt .fcd-marca-l2 { letter-spacing: -.4px; }

/* Mosaic wave: the black-and-white pattern of the Copacabana promenade, drawn
   as a repeating background instead of an image file. */
.fcd-cabecalho::after {
  content: "";
  display: block;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--ouro) 0 26px, transparent 26px 52px),
    var(--acao);
  -webkit-mask-image: radial-gradient(10px 8px at 13px 8px, #000 60%, transparent 62%);
          mask-image: radial-gradient(10px 8px at 13px 8px, #000 60%, transparent 62%);
  -webkit-mask-size: 26px 8px;
          mask-size: 26px 8px;
  opacity: .55;
}

/* Hero: a very quiet lozenge grid on the dark green, so the first screen is
   recognisably Brazilian without a single flag graphic. */
.fcd-vitrine { background: var(--heroi); }
.fcd-vitrine .fcd-conteiner::before,
.fcd-vitrine .fcd-conteiner::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 28px;
  width: 230px; height: 230px;
  border: 2px solid rgba(255, 223, 0, .16);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}
.fcd-vitrine .fcd-conteiner::after {
  right: 66px; top: 76px;
  width: 134px; height: 134px;
  border-color: rgba(0, 194, 94, .22);
}
@media (max-width: 1080px) { .fcd-vitrine .fcd-conteiner::before, .fcd-vitrine .fcd-conteiner::after { display: none; } }

/* Headings: a green bar with a gold tip instead of a plain rule. */
.fcd-texto h2 {
  border-left: 0;
  padding-left: 0;
  position: relative;
  padding-top: 16px;
}
.fcd-texto h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acao) 0 60%, var(--ouro) 60%);
}
.fcd-texto h3 { color: #10362A; }

/* Cards and tables: softer corners, green header row, no borrowed ink. */
.fcd-painel { border-radius: var(--raio-lg); }
.fcd-texto th { background: var(--tinta-2); border-color: var(--tinta-2); }
.fcd-texto tbody tr:hover td { background: #EEF5EE; }
.fcd-texto li::marker { color: var(--acao); }

/* Quote: gold rule on top kept, but the body sits on a green tint. */
.fcd-citacao, .fcd-texto blockquote { background: var(--positivo); color: #163329; border-top-color: var(--ouro); }
.fcd-texto blockquote { color: #16332A; }

/* Buttons and accents inherited from the self-test and the offers table. */
.fcd-autoteste-enviar, .fcd-autoteste-refazer { background: var(--acao); }
.fcd-autoteste-enviar:hover:enabled, .fcd-autoteste-refazer:hover { background: var(--acao-forte); }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes input:checked + label { background: var(--acao); border-color: var(--acao); }
.fcd-autoteste-pergunta .fcd-autoteste-opcoes label:hover { border-color: var(--acao); }
.fcd-autoteste-badge.fcd-n3 { background: var(--negativo-linha); }

/* Age badge in the footer: the flag lozenge, cut with clip-path so the label
   stays upright (a rotate() would turn the text with the box). */
.fcd-idade {
  border: 0;
  border-radius: 0;
  background: var(--ouro);
  color: var(--tinta);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 46px; height: 38px; line-height: 38px;
  font-size: 12px;
  margin-right: 12px;
}

/* Trust strip: green hover instead of red. */
.fcd-selos a:hover { border-color: var(--acao); }
.fcd-selos a:hover .fcd-selo-ico { color: var(--acao); }
.fcd-listagem-rubrica { color: var(--acao); }
.fcd-listagem-titulo:hover { color: var(--acao); }
.fcd-listagem-item:hover { border-color: var(--acao); }

/* ---------------- third menu level ----------------
   The header carries the whole page tree, so a dropdown can itself hold a
   dropdown. On desktop the third level flies out sideways; on the phone panel
   it simply indents, because there is no sideways to fly to. */

.fcd-menu .sub-menu .menu-item-has-children > .fcd-menu-botao {
  width: 100%;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}
.fcd-menu .sub-menu .fcd-menu-seta { flex: 0 0 auto; }

@media (min-width: 901px) {
  .fcd-menu .sub-menu .sub-menu {
    top: -7px;
    left: 100%;
    border-radius: 10px;
    margin-left: 2px;
  }
  /* A flyout that would run off the right edge opens to the left instead. */
  .fcd-menu > .fcd-conteiner > ul > li:nth-last-child(-n+4) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin: 0 2px 0 0;
  }
  .fcd-menu .sub-menu .menu-item-has-children.fcd-aberto > .fcd-menu-botao { background: var(--tinta-3); color: var(--ouro); }
}

@media (max-width: 900px) {
  .fcd-menu .sub-menu .sub-menu {
    margin: 0;
    padding: 0 0 4px 14px;
    background: none;
    border-left: 2px solid rgba(255, 255, 255, .12);
  }
  .fcd-menu .sub-menu .sub-menu a { padding: 10px 12px; font-size: 14.5px; }
  .fcd-menu .sub-menu .menu-item-has-children > .fcd-menu-botao { padding: 11px 12px; font-size: 15px; }
}