/* Layout and animation come from the original alegria.css. Only functional
   additions and the requested complete animal palettes belong here. */
body[data-pet="cachorro"] {
  --amarelo: #ffbb67;
  --amarelo-forte: #f6a748;
  --amarelo-claro: #ffe2bb;
  --azul: #673415;
  --azul-escuro: #482510;
  --branco: #fffcf5;
  --suave: #ffead5;
}
body[data-pet="gato"] {
  --amarelo: #d7bdff;
  --amarelo-forte: #c5a0f3;
  --amarelo-claro: #ebddff;
  --azul: #512780;
  --azul-escuro: #361b59;
  --branco: #fdfaff;
  --suave: #ede4ff;
}
body[data-pet="aves"] {
  --amarelo: #9de7b1;
  --amarelo-forte: #76cc96;
  --amarelo-claro: #d3f4cb;
  --azul: #15594d;
  --azul-escuro: #103f37;
  --branco: #fafff7;
  --suave: #d3f3ec;
}
body[data-pet="coelho"] {
  --amarelo: #ffc1d7;
  --amarelo-forte: #f6a4c4;
  --amarelo-claro: #ffe0ec;
  --azul: #813151;
  --azul-escuro: #5e203a;
  --branco: #fffafc;
  --suave: #ffe0ec;
}
body[data-pet="peixe"] {
  --amarelo: #73d9ed;
  --amarelo-forte: #49c3df;
  --amarelo-claro: #c2f2fb;
  --azul: #09576f;
  --azul-escuro: #063c50;
  --branco: #f5fdff;
  --suave: #d8f3fa;
}
body[data-pet="hamster"] {
  --amarelo: #f2cc86;
  --amarelo-forte: #e8b760;
  --amarelo-claro: #ffe8bd;
  --azul: #704516;
  --azul-escuro: #4e2f10;
  --branco: #fffcf4;
  --suave: #fff0d6;
}
body[data-pet="tartaruga"] {
  --amarelo: #badf83;
  --amarelo-forte: #98ca60;
  --amarelo-claro: #e0f0bb;
  --azul: #355822;
  --azul-escuro: #233d18;
  --branco: #fcfff5;
  --suave: #e6f2cf;
}
body[data-pet="porquinho"] {
  --amarelo: #f8b49c;
  --amarelo-forte: #ed977a;
  --amarelo-claro: #ffe0cf;
  --azul: #803f2e;
  --azul-escuro: #572b21;
  --branco: #fffaf5;
  --suave: #ffe4d6;
}
body[data-pet] header {
  background: color-mix(in srgb, var(--amarelo) 94%, transparent);
}
.pular {
  position: absolute;
  left: 12px;
  top: -100px;
  background: var(--branco);
  padding: 12px;
  z-index: 1000;
}
.pular:focus {
  top: 12px;
}
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 5px;
}
.visually-hidden,
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nuvem,
.patinha {
  pointer-events: none;
}
.divisor-nuvem svg {
  height: 113px;
}
.revelar {
  scroll-margin-top: 110px;
}
.js-ok .revelar {
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Animation transforms stay on inner circles; hover remains on the card. */
.card-categoria {
  transition:
    transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.35),
    box-shadow 0.38s,
    background 0.3s,
    color 0.3s;
}
.perfil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px;
}
.perfil-card h3 {
  flex: 1;
  font-size: 1.25rem;
}
.card-categoria[data-pet] .perfil-desenho {
  width: 170px;
  height: 170px;
  padding: 10px;
}
.card-categoria[data-pet] .perfil-desenho img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.card-post .capa {
  background: var(--capa);
  height: 190px;
}
.card-post .capa img {
  width: 170px;
  height: 170px;
  object-fit: contain;
}
.tag[data-category] {
  color: #152b50 !important;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 900;
  display: inline-block;
}
.tag[data-category="alimentacao"] {
  background: #ff8c42;
}
.tag[data-category="saude"] {
  background: #4370c7;
  color: #fff !important;
}
.tag[data-category="comportamento"] {
  background: #3ecf8e;
}
.tag[data-category="cuidados"] {
  background: #b09af1;
}
.tag[data-category="racas"] {
  background: #ff82ae;
}
.tag[data-category="especies"] {
  background: #64ced8;
}
.galeria-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0 0 36px;
}
.galeria-controles label {
  font-weight: 900;
}
.galeria-controles input {
  flex: 1;
  min-width: 180px;
  border: 3px solid var(--azul);
  border-radius: 18px;
  padding: 14px;
  font: inherit;
  color: var(--azul-escuro);
  background: var(--branco);
}
.galeria-expandida .carrossel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  overflow: visible;
  margin: 0;
  padding: 15px 0;
  gap: 22px;
  cursor: auto;
}
.galeria-expandida .seta-carrossel,
.galeria-expandida .trilha-progresso {
  display: none;
}
.galeria-expandida .carrossel > * {
  min-width: 0;
}
.empty-state {
  text-align: center;
  max-width: 700px;
  margin: auto;
}
.empty-state p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 20px 0 28px;
}
.portal-center {
  text-align: center;
}
/* A long sidebar must move with the page. No sticky container or nested scroll. */
.sidebar {
  position: static !important;
  align-self: start;
  max-height: none;
  overflow: visible;
  min-width: 0;
}
.sidebar h2 {
  font-size: 1.25rem;
  margin-bottom: 16px;
}
.sidebar .sobre h2 {
  color: var(--amarelo);
}
.sidebar .sobre p + p {
  margin-top: 12px;
}
.sidebar-perfil img {
  margin: 0 auto 16px;
}
.sidebar .newsletter p {
  margin-bottom: 12px;
  line-height: 1.5;
}
.texto-principal {
  min-width: 0;
}
.portal-leitura {
  padding-top: 56px;
}
.capa-artigo.capa-composta {
  min-height: 280px;
}
.capa-composta .capa-mascote {
  width: 100%;
  height: 100%;
  max-height: 330px;
}
.capa-composta[data-grupo="especies"]::before {
  background: radial-gradient(
    circle at 12px 12px,
    color-mix(in srgb, var(--acento) 20%, transparent) 6px,
    transparent 7px
  );
  background-size: 36px 36px;
}
.aviso-vet,
.fontes-artigo,
.produtos-afiliados {
  background: var(--suave);
  border: 3px dashed var(--azul);
  padding: 24px;
  border-radius: 26px;
  margin-top: 32px;
  line-height: 1.7;
}
.fontes-artigo h2,
.produtos-afiliados h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}
.fontes-artigo ul {
  padding-left: 22px;
}
.fontes-artigo a {
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.produtos-afiliados > div {
  margin-top: 22px;
}
.voltar-animal {
  display: inline-block;
  font-weight: 900;
  margin-top: 28px;
  text-decoration: underline;
}
.corpo-artigo table {
  display: block;
  overflow: auto;
  width: 100%;
  border-collapse: collapse;
}
.corpo-artigo th,
.corpo-artigo td {
  padding: 10px 14px;
  border: 2px solid var(--azul);
  text-align: left;
}
.corpo-artigo th {
  background: var(--suave);
}
.corpo-artigo pre {
  overflow: auto;
  padding: 20px;
  background: var(--suave);
  border-radius: 16px;
}
.corpo-artigo img {
  max-width: 100%;
  height: auto;
}
.portal-busca {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.portal-busca > div:first-child {
  flex: 2;
  min-width: 230px;
}
.portal-busca > div {
  flex: 1;
  min-width: 170px;
}
.portal-busca label {
  display: block;
  font-weight: 900;
  margin-bottom: 8px;
}
.portal-busca input,
.portal-busca select {
  width: 100%;
  font: inherit;
  color: var(--azul-escuro);
  background: var(--branco);
  border: 3px solid var(--azul);
  border-radius: 16px;
  padding: 14px;
  min-height: 54px;
}
.busca-status {
  margin-bottom: 20px;
  line-height: 1.6;
}
.portal-mais {
  display: block;
  margin: 32px auto;
}
.grid-posts {
  align-items: stretch;
}
.grid-posts > .card-post {
  min-width: 0;
}
.paginacao {
  flex-wrap: wrap;
}
.newsletter-box .subtitulo-secao {
  margin-bottom: 0;
}
.newsletter-consent {
  font-size: 0.82rem;
  line-height: 1.5;
  display: block;
  flex-basis: 100%;
  text-align: left;
  font-weight: 600;
  color: var(--azul-escuro);
}
.newsletter-consent input {
  min-width: 0 !important;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  accent-color: var(--azul);
  margin-right: 6px;
}
.newsletter-consent a {
  text-decoration: underline;
}
.newsletter-status {
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.5;
}
.newsletter-status:empty {
  display: none;
}
.newsletter-box input[type="email"] {
  max-width: 100%;
}
.newsletter-box .titulo-secao {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}
.btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.institucional {
  max-width: 830px;
}
.institucional p {
  margin: 20px 0;
}
.institucional h2 {
  margin-top: 35px;
}
footer h2 {
  font-size: 1.3rem;
  margin-bottom: 16px;
}
footer .logo {
  margin-bottom: 18px;
}
.slot-anuncio {
  margin: 24px 0;
}
.sidebar .slot-anuncio {
  margin: 0;
}
.slot-anuncio[data-formato="lateral"] {
  min-height: 300px;
}
@media (max-width: 640px) {
  .divisor-nuvem svg {
    height: 67px;
  }
  .card-categoria[data-pet] .perfil-desenho {
    width: 150px;
    height: 150px;
  }
  .galeria-controles input {
    flex-basis: 100%;
  }
  .galeria-controles .btn {
    width: 100%;
  }
  .galeria-expandida .carrossel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .galeria-expandida .perfil-card {
    padding: 16px 8px;
    border-radius: 26px;
  }
  .galeria-expandida .card-categoria[data-pet] .perfil-desenho {
    height: 115px;
    width: 115px;
  }
  .galeria-expandida .card-categoria[data-pet] .perfil-desenho img {
    height: 95px;
    width: 95px;
  }
  .galeria-expandida .perfil-card h3 {
    font-size: 1rem;
  }
  .galeria-expandida .perfil-card .qtd {
    padding: 6px 10px;
  }
  .portal-busca .btn {
    width: 100%;
  }
  .newsletter-box {
    padding: 30px 20px;
  }
  .newsletter-box input[type="email"] {
    min-width: 0;
    width: 100%;
  }
  .newsletter-box .btn {
    width: 100%;
  }
  .capa-artigo.capa-composta {
    min-height: 240px;
  }
  .capa-composta .capa-mascote {
    height: auto;
    width: 44%;
    max-height: 90%;
  }
  .logo {
    font-size: 1.4rem;
  }
  .hero h1 .junto {
    white-space: normal;
  }
  .artigo-meta {
    gap: 12px;
  }
}
/* Visitors can pause decorative movement without losing any content. */
html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after {
  animation-play-state: paused !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="paused"] .revelar {
  opacity: 1;
  transform: none;
}
.motion-toggle {
  margin: 14px auto 0;
  font-size: 0.85rem;
  padding: 8px 16px;
  display: block;
}
.artigo-topo,
.hub-topo {
  overflow: hidden;
}
.nuvem.n1 {
  animation-delay: -8s;
}

.capa-artigo.capa-composta {
  width: 100%;
  min-width: 0;
}
.capa-texto {
  min-width: 0;
}
@media (max-width: 640px) {
  .capa-artigo.capa-composta {
    aspect-ratio: auto;
    min-height: 240px;
  }
  .capa-composta .capa-mascote {
    right: 0;
    bottom: 12px;
    width: 46%;
    max-height: 90%;
  }
  .capa-chapeu {
    max-width: 100%;
    letter-spacing: 0.7px;
    padding: 6px 10px;
  }
  .sidebar input[type="email"] {
    min-width: 0;
    width: 100%;
  }
}
/* Article opening: answer first, then a direct jump to the complete text. */
.post-abertura.com-divisor {
  padding-top: 36px;
  padding-bottom: 120px !important;
}
.post-abertura .container {
  max-width: 1200px;
}
.post-abertura h1 {
  max-width: 960px;
  margin-top: 18px;
}
.resposta-abertura {
  max-width: 820px;
  margin: 24px 0;
}
.resposta-abertura h2 {
  font-size: 1.08rem;
  margin-bottom: 9px;
  color: var(--azul);
}
.resposta-abertura p {
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--azul-escuro);
  text-align: left;
  text-wrap: pretty;
}
.leitura-direta {
  margin-top: 0;
}
#artigo-completo {
  scroll-margin-top: 100px;
}
.portal-leitura {
  padding-top: 28px;
}
.capa-artigo.capa-composta {
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
  min-height: 250px;
  grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr);
  align-items: center;
  padding: 24px;
  gap: 20px;
}
.capa-composta .capa-texto {
  display: grid;
  max-width: none;
  width: 100%;
  align-self: center;
  gap: 18px;
  min-width: 0;
}
.titulo-retomada {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.14;
  color: var(--azul);
  overflow-wrap: anywhere;
}
.capa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--azul-escuro);
}
.capa-composta .capa-mascote {
  position: relative;
  inset: auto;
  align-self: center;
  width: 100%;
  height: 220px;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.corpo-artigo p,
.corpo-artigo li {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
.aviso-vet h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .post-abertura.com-divisor {
    padding: 26px 20px 82px !important;
  }
  .post-abertura h1 {
    font-size: clamp(1.8rem, 7.6vw, 2.3rem);
    line-height: 1.12;
    margin-top: 14px;
    animation: none;
  }
  .post-abertura .trilha {
    font-size: 0.78rem;
    gap: 6px;
  }
  .resposta-abertura {
    margin: 18px 0;
  }
  .resposta-abertura h2 {
    font-size: 0.94rem;
    margin-bottom: 7px;
  }
  .resposta-abertura p {
    font-size: 1rem;
    line-height: 1.55;
  }
  .leitura-direta {
    padding: 12px 19px;
    font-size: 0.95rem;
  }
  .portal-leitura {
    padding-top: 18px;
  }
  .capa-artigo.capa-composta {
    grid-template-columns: minmax(0, 1fr) 96px;
    min-height: 0;
    padding: 20px 16px;
    gap: 16px 10px;
    grid-template-rows: auto auto;
  }
  .capa-composta .capa-texto {
    display: contents;
  }
  .titulo-retomada {
    grid-column: 1/-1;
    grid-row: 1;
    font-size: 1.4rem;
    line-height: 1.2;
    position: relative;
    z-index: 2;
  }
  .capa-meta {
    grid-column: 1;
    grid-row: 2;
    align-content: center;
    align-self: center;
    gap: 10px;
    font-size: 0.78rem;
    position: relative;
    z-index: 2;
  }
  .capa-meta .tag {
    padding: 6px 10px;
    font-size: 0.74rem;
  }
  .capa-composta .capa-mascote {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    inset: auto;
    width: 96px;
    height: 116px;
    max-height: none;
    max-width: 100%;
    align-self: center;
  }
  .sumario {
    padding: 18px 20px;
  }
  #artigo-completo {
    scroll-margin-top: 88px;
  }
}
html[data-motion="paused"] .hero h1,
html[data-motion="paused"] .hero p,
html[data-motion="paused"] .hero .acoes,
html[data-motion="paused"] .topo-blog h1,
html[data-motion="paused"] .topo-blog p,
html[data-motion="paused"] .artigo-topo h1 {
  animation: none !important;
  opacity: 1;
  transform: none;
}
.grid-posts {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
@media (max-width: 640px) {
  .galeria-expandida .card-categoria[data-pet] .perfil-desenho {
    width: min(115px, 100%);
    height: auto;
    aspect-ratio: 1;
    padding: 8px;
  }
  .galeria-expandida .card-categoria[data-pet] .perfil-desenho img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}