/* ============================================================
   IMAGAS — RECURSOS / CONTROLE INDEPENDENTE
   Edite APENAS estas variáveis para personalizar a página.
   ============================================================ */
body.page-recursos {
  --ir-font: "Courier New", monospace;
  --ir-ink: var(--page-ui-color, #4b5d8a);
  --ir-content-width: 880px;        /* LARGURA DESKTOP */
  --ir-content-x: 0px;             /* AJUSTE HORIZONTAL */
  --ir-content-y: 0px;             /* AJUSTE VERTICAL */
  --ir-top: 38px;                  /* DISTÂNCIA DO TOPO DO CONTEÚDO */
  --ir-bottom: 160px;
  --ir-text-size: 14px;
  --ir-title-size: 36px;
  --ir-heading-size: 22px;
  --ir-small-size: 11px;
  --ir-section-gap: 58px;
  --ir-card-gap: 13px;
  --ir-links-columns: 2;
  --ir-download-columns: 2;
  --ir-tool-columns: 2;
  --ir-book-columns: 4;            /* 8 LIVROS = 4 x 2 */
  --ir-film-columns: 4;            /* 8 FILMES = 4 x 2 */
  --ir-cover-gap: 17px;
  --ir-cover-fit: contain;         /* NÃO RECORTAR AS CAPAS */
  --ir-book-ratio: 2 / 3;
  --ir-film-ratio: 2 / 3;
  --ir-card-border: 1px;
  --ir-card-padding: 15px;
  --ir-card-background: transparent;
  --ir-portfolio-max-width: 540px;
}

html:has(body.page-recursos),body.page-recursos {overflow-x:hidden;overflow-y:auto;}
body.page-recursos .ir-main {
  display:block !important; position:relative; z-index:10;
  box-sizing:border-box; width:100%; height:auto !important;min-height:0 !important;
  margin:0 !important; padding:var(--ir-top) 12px var(--ir-bottom) !important;
  pointer-events:auto;
}
body.page-recursos .ir-stage {
  display:block !important;box-sizing:border-box; width:100%;max-width:none;
  height:auto !important;min-height:0 !important;aspect-ratio:auto !important;
  margin:0 auto !important;padding:0 !important;
}
body.page-recursos .ir-stage>.subpage-mesh {display:none !important;}
body.page-recursos .ir-page {
  box-sizing:border-box;position:relative;z-index:2;
  width:min(var(--ir-content-width),calc(100vw - 32px));
  margin:0 auto;padding:0;
  transform:translate(var(--ir-content-x),var(--ir-content-y));
  color:var(--ir-ink);
  font:400 var(--ir-text-size)/1.57 var(--ir-font);
  text-align:center;overflow-wrap:anywhere;
}
body.page-recursos .ir-page * {box-sizing:border-box;}
body.page-recursos .ir-page p,body.page-recursos .ir-page figure {margin:0;}
body.page-recursos .ir-page a {color:inherit;}
body.page-recursos .ir-page a:focus-visible {outline:2px solid currentColor;outline-offset:3px;}
body.page-recursos .ir-heading {display:flex;flex-direction:column;align-items:center;gap:9px;margin:0 0 25px;}
body.page-recursos .ir-kicker {font-size:var(--ir-small-size);letter-spacing:.13em;opacity:.83;}
body.page-recursos .ir-heading h1 {margin:0;font:700 var(--ir-title-size)/1.2 var(--ir-font);}
body.page-recursos .ir-heading>p:last-child {max-width:650px;}
body.page-recursos .ir-index {
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:7px 14px;margin:0 auto 33px;
}
body.page-recursos .ir-index a {font-size:var(--ir-small-size);text-decoration:none;border-bottom:1px solid currentColor;line-height:1.7;}
body.page-recursos .ir-index a:hover {opacity:.65;}
body.page-recursos .ir-section {
    scroll-margin-top: 130px;
}

/* MOBILE */
@media (max-width: 650px) {
    body.page-recursos .ir-section {
        scroll-margin-top: 90px;
    }
}
body.page-recursos .ir-section+.ir-section {margin-top:var(--ir-section-gap);}
body.page-recursos .ir-section-id {font-size:var(--ir-small-size);letter-spacing:.14em;opacity:.8;margin-bottom:7px !important;}
body.page-recursos .ir-section h2 {font:700 var(--ir-heading-size)/1.3 var(--ir-font);letter-spacing:.035em;margin:0 0 12px;}
body.page-recursos .ir-section-intro {margin:0 auto 20px !important;max-width:680px;}
body.page-recursos .ir-section-note {margin:14px auto 0 !important;font-size:var(--ir-small-size);max-width:660px;opacity:.8;}
body.page-recursos .ir-link-grid,body.page-recursos .ir-download-grid {display:grid;gap:var(--ir-card-gap);}
body.page-recursos .ir-link-grid {grid-template-columns:repeat(var(--ir-links-columns),minmax(0,1fr));}
body.page-recursos .ir-download-grid {grid-template-columns:repeat(var(--ir-download-columns),minmax(0,1fr));}
body.page-recursos .ir-link-card,body.page-recursos .ir-download-card {
  min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;text-decoration:none;text-align:left;
  border:var(--ir-card-border) solid currentColor;
  background:var(--ir-card-background);
  padding:var(--ir-card-padding);transition:background .15s ease,color .15s ease;
}
body.page-recursos .ir-link-card strong,body.page-recursos .ir-download-card strong {
  display:block;width:100%;font:700 var(--ir-text-size)/1.34 var(--ir-font);
}
body.page-recursos .ir-link-card>span:not(.ir-link-index):not(.ir-link-open),
body.page-recursos .ir-download-card>span:not(.ir-file-type):not(.ir-download-action) {font-size:var(--ir-small-size);opacity:.82;}
body.page-recursos .ir-link-index,body.page-recursos .ir-file-type {font-size:var(--ir-small-size);letter-spacing:.12em;opacity:.76;}
body.page-recursos .ir-link-open,body.page-recursos .ir-download-action {align-self:flex-end;margin-top:auto;font-size:var(--ir-small-size);text-decoration:underline;}
body.page-recursos .ir-link-card:hover,body.page-recursos .ir-download-card:hover,
body.page-recursos .ir-portfolio-button:hover {background:var(--ir-ink);color:var(--panel-backdrop,#fff);}
body.page-recursos .ir-portfolio-button {
  display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;
  max-width:var(--ir-portfolio-max-width);min-height:94px;margin:0 auto 22px;padding:13px;
  text-decoration:none;border:1px solid currentColor;background:transparent;
  transition:background .15s ease,color .15s ease;
}
body.page-recursos .ir-portfolio-button strong {font-size:clamp(13px,1.5vw,18px);line-height:1.35;}
body.page-recursos .ir-portfolio-button>span {font-size:var(--ir-small-size);}
body.page-recursos .ir-subheading {margin:22px 0 14px;font:700 15px/1.4 var(--ir-font);}
body.page-recursos .ir-tools-grid {display:grid;grid-template-columns:repeat(var(--ir-tool-columns),minmax(0,1fr));gap:var(--ir-card-gap);}
body.page-recursos .ir-tools-list {border:1px solid currentColor;text-align:left;padding:17px;min-width:0;}
body.page-recursos .ir-tools-list h3 {margin:0 0 10px;font:700 var(--ir-text-size)/1.35 var(--ir-font);}
body.page-recursos .ir-tools-list ul {margin:0;padding:0;list-style:none;}
body.page-recursos .ir-tools-list li {display:flex;gap:10px;border-top:1px dotted currentColor;padding:8px 0;overflow-wrap:anywhere;}
body.page-recursos .ir-tools-list li>span {font-variant-numeric:tabular-nums;opacity:.6;flex:none;}
body.page-recursos .ir-cover-grid {display:grid;grid-template-columns:repeat(var(--ir-book-columns),minmax(0,1fr));gap:26px var(--ir-cover-gap);align-items:start;}
body.page-recursos .ir-film-grid {grid-template-columns:repeat(var(--ir-film-columns),minmax(0,1fr));}
body.page-recursos .ir-cover-card {min-width:0;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;}
body.page-recursos .ir-cover-card img {display:block;width:100%;height:auto;aspect-ratio:var(--ir-book-ratio);object-fit:var(--ir-cover-fit);}
body.page-recursos .ir-film-grid .ir-cover-card img {aspect-ratio:var(--ir-film-ratio);}
body.page-recursos .ir-cover-card h3 {margin:0;font:700 var(--ir-text-size)/1.35 var(--ir-font);overflow-wrap:anywhere;}
body.page-recursos .ir-cover-card .ir-cover-index {font-size:var(--ir-small-size);opacity:.78;}
body.page-recursos .ir-cover-card>p:not(.ir-cover-index) {font-size:var(--ir-small-size);}
body.page-recursos .ir-cover-comment {opacity:.84;}
body.page-recursos .ir-footer {display:flex;flex-direction:column;align-items:center;gap:8px;margin:70px auto 0;font-size:var(--ir-small-size);}
body.page-recursos .ir-footer a {text-decoration:none;}
body.page-recursos .ir-footer a:hover {text-decoration:underline;}

/* MOBILE — corredor branco entre as faixas ASCII */
html[data-imagas-layout="mobile"] body.page-recursos {
  --ir-content-width:58vw;  /* ajuste a largura se quiser */
  --ir-content-x:0px;--ir-content-y:0px;
  --ir-top:22px;--ir-bottom:130px;
  --ir-text-size:clamp(10px,2.7vw,12px);
  --ir-title-size:clamp(20px,5.4vw,27px);
  --ir-heading-size:clamp(12px,3.1vw,17px);
  --ir-small-size:clamp(9px,2.35vw,11px);
  --ir-section-gap:36px;
  --ir-card-gap:9px;--ir-cover-gap:9px;
  --ir-links-columns:1;--ir-download-columns:1;--ir-tool-columns:1;
  --ir-book-columns:2;--ir-film-columns:2;
  --ir-card-padding:10px;
}
html[data-imagas-layout="mobile"] body.page-recursos .ir-page {width:min(var(--ir-content-width),calc(100vw - 18px));}
html[data-imagas-layout="mobile"] body.page-recursos .ir-index {gap:5px 10px;}
html[data-imagas-layout="mobile"] body.page-recursos .ir-portfolio-button {min-height:74px;padding:8px;}
html[data-imagas-layout="mobile"] body.page-recursos .ir-portfolio-button strong {font-size:11px;}
html[data-imagas-layout="mobile"] body.page-recursos .ir-tools-list {padding:10px;}
html[data-imagas-layout="mobile"] body.page-recursos .ir-subheading {font-size:12px;}
@media(max-width:650px){
  body.page-recursos {
    --ir-content-width:58vw;--ir-top:22px;--ir-bottom:130px;
    --ir-text-size:11px;--ir-title-size:23px;--ir-heading-size:14px;--ir-small-size:10px;
    --ir-section-gap:36px;--ir-card-gap:9px;--ir-cover-gap:9px;
    --ir-links-columns:1;--ir-download-columns:1;--ir-tool-columns:1;
    --ir-book-columns:2;--ir-film-columns:2;--ir-card-padding:10px;
  }
  body.page-recursos .ir-page {width:min(var(--ir-content-width),calc(100vw - 18px));}
  body.page-recursos .ir-portfolio-button strong {font-size:11px;}
}
@media(prefers-reduced-motion:reduce){body.page-recursos .ir-link-card,body.page-recursos .ir-download-card,body.page-recursos .ir-portfolio-button{transition:none;}}


/* ================================================================
   IMAGAS / RECURSOS — BOTÕES PNG, LISTAS RETRO, HOVER NAS CAPAS
   As regras abaixo são independentes do ASCII, controles e MP3.
   ================================================================ */
body.page-recursos {
  --ir-inspiration-button-width: 100%;  /* largura das 6 imagens de sites */
  --ir-inspiration-button-max: 340px; /* máximo de cada imagem no desktop */
  --ir-inspiration-gap: 18px;
  --ir-portfolio-art-width: 440px;  /* PNG do botão baixar portfólio */
  --ir-list-gap: 11px;             /* espaçamento entre itens das listas */
  --ir-cover-hover-scale: 1.12;   /* 1.12 = aumenta 12% ao passar o mouse */
}

/* Sites favoritos: imagens clicáveis PNG sem moldura. */
body.page-recursos .ir-inspiration-grid {
  display:grid;
  grid-template-columns:repeat(var(--ir-links-columns),minmax(0,1fr));
  gap:var(--ir-inspiration-gap);
  align-items:start;
}
body.page-recursos .ir-inspiration-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-align:center;
}
body.page-recursos .ir-inspiration-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(var(--ir-inspiration-button-width),var(--ir-inspiration-button-max));
  max-width:100%;
  text-decoration:none;
  padding:0;
  border:0;
  background:transparent;
}
body.page-recursos .ir-inspiration-button img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  transition:transform .18s ease,opacity .18s ease;
}
body.page-recursos .ir-inspiration-button:hover img {transform:scale(1.035);opacity:.87;}
body.page-recursos .ir-inspiration-item strong {font-size:var(--ir-text-size);line-height:1.25;}
body.page-recursos .ir-inspiration-item p {font-size:var(--ir-small-size);opacity:.8;}

/* Portfólio: substitua o PNG e mantenha o endereço do PDF. */
body.page-recursos .ir-portfolio-button {
  display:block;
  width:min(var(--ir-portfolio-art-width),100%);
  max-width:100%;min-height:0;
  padding:0;margin:0 auto 22px;
  border:0; background:transparent;
  text-decoration:none;
}
body.page-recursos .ir-portfolio-button img {
  display:block;width:100%;height:auto;object-fit:contain;
  transition:transform .18s ease,opacity .18s ease;
}
body.page-recursos .ir-portfolio-button:hover {background:transparent;color:inherit;}
body.page-recursos .ir-portfolio-button:hover img {transform:scale(1.035);opacity:.87;}

/* PDFs e referências: listas de links tradicionais, sem caixas nem molduras. */
body.page-recursos .ir-retro-list {
  padding:0;margin:0 auto;
  list-style:none;
  width:min(100%,680px);
  display:flex;flex-direction:column;
  gap:var(--ir-list-gap);
  text-align:left;
}
body.page-recursos .ir-retro-list li {
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  line-height:1.45;
}
body.page-recursos .ir-retro-list .ir-list-number {
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:var(--ir-small-size);
  opacity:.68;
}
body.page-recursos .ir-retro-list a {
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
body.page-recursos .ir-retro-list a:hover {opacity:.67;}
body.page-recursos .ir-list-entry {display:flex;flex-direction:column;gap:2px;min-width:0;}
body.page-recursos .ir-list-entry small {font-size:var(--ir-small-size);opacity:.77;}

/* Hardware e software: duas listas simples de texto, sem tabelas. */
body.page-recursos .ir-simple-tools {
  width:min(100%,630px);
  display:flex;flex-direction:column;
  gap:27px;
  margin:0 auto;
  text-align:left;
}
body.page-recursos .ir-tool-group {border:0;padding:0;background:transparent;}
body.page-recursos .ir-tool-group h3 {margin:0 0 9px;font:700 var(--ir-text-size)/1.35 var(--ir-font);}
body.page-recursos .ir-tool-group ul {
  list-style:disc outside;
  margin:0;
  padding-left:20px;
}
body.page-recursos .ir-tool-group li {padding:3px 0;overflow-wrap:anywhere;}

/* Capas: zoom suave e sobreposição ao passar o mouse. */
body.page-recursos .ir-cover-card {position:relative;z-index:0;}
body.page-recursos .ir-cover-card img {
  transform-origin:50% 50%;
  transform:scale(1);
  transition:transform .22s ease,filter .22s ease;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine) {
  body.page-recursos .ir-cover-card:hover {z-index:5;}
  body.page-recursos .ir-cover-card:hover img {transform:scale(var(--ir-cover-hover-scale));}
}

/* Layout mobile do imAgas: respeita o corredor branco do ASCII. */
html[data-imagas-layout="mobile"] body.page-recursos {
  --ir-inspiration-button-max:100%;
  --ir-inspiration-gap:15px;
  --ir-portfolio-art-width:100%;
  --ir-list-gap:9px;
}
@media(max-width:650px) {
  body.page-recursos {
    --ir-inspiration-button-max:100%;
    --ir-inspiration-gap:15px;
    --ir-portfolio-art-width:100%;
    --ir-list-gap:9px;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.page-recursos .ir-inspiration-button img,
  body.page-recursos .ir-portfolio-button img,
  body.page-recursos .ir-cover-card img {transition:none;}
}
/* DESKTOP */
body.page-recursos {
    --ir-top: 135px;
}

/* MOBILE */
html[data-imagas-layout="mobile"] body.page-recursos {
    --ir-top: 40px;
}

/* ============================================================
   IMAGAS — BOTÕES POR HOTLINK (GIF / PNG EXTERNOS)
   A imagem conserva as proporções e o tamanho natural, como 88x31.
   Os demais botões PNG locais permanecem com o layout anterior.
   ============================================================ */
body.page-recursos .ir-inspiration-button.ir-hotlink {
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
body.page-recursos .ir-inspiration-button.ir-hotlink img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
/* ==========================================
   IMAGAS — BOTÕES 88x31
   6 BOTÕES POR FILEIRA
   ========================================== */

body.page-recursos .ir-inspiration-grid {
    display: grid;
    grid-template-columns: repeat(6, 88px);
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Cada botão */
body.page-recursos .ir-inspiration-item {
    width: 88px;
    display: block;
}

/* Imagens dos botões */
body.page-recursos .ir-inspiration-button,
body.page-recursos .ir-inspiration-button img {
    width: 88px;
    height: 31px;
}

/* Ocultar títulos e descrições */
body.page-recursos .ir-inspiration-item strong,
body.page-recursos .ir-inspiration-item p {
    display: none;
}

/* Mobile: ajustar quantidade de colunas */
@media (max-width: 650px) {
    body.page-recursos .ir-inspiration-grid {
        grid-template-columns: repeat(3, 88px);
    }
}