.criatura-features{
  --cf-accent:#CB360F;
  --cf-text:#111;
  --cf-backdrop:rgba(203,54,15,.10);
  --cf-gap:14px;
  --cf-row-gap:14px;
  --cf-icon:42px;
  --cf-minw:260px;
  --cf-ticker-speed:25s;
}

/* =========================
   MODO NORMAL (não ticker)
   ========================= */
.criatura-features-inner{
  display:flex;
  gap:var(--cf-gap);
}

.criatura-layout-vertical .criatura-features-inner{
  flex-direction:column;
}

.criatura-layout-horizontal .criatura-features-inner{
  flex-direction:row;
  flex-wrap:wrap;
  row-gap:var(--cf-row-gap);
  column-gap:var(--cf-gap);
}

.criatura-feature-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.criatura-layout-horizontal .criatura-feature-row{
  min-width:var(--cf-minw);
}

.criatura-feature-icon{
  color:var(--cf-accent);
  display:inline-flex;
  line-height:0;
}

.criatura-feature-icon svg{
  width:var(--cf-icon);
  height:auto;
  display:block;
}

.criatura-feature-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
}

.criatura-feature-text{
  background:var(--cf-backdrop);
  color:var(--cf-text);
  padding:6px 10px;
  border-radius:10px;
  font-weight:600;
  white-space:nowrap;
}

/* animações de entrada */
.criatura-anim-left{ animation: criaturaEnterLeft .6s ease both; }
@keyframes criaturaEnterLeft{
  from{opacity:0;transform:translateX(16px);}
  to{opacity:1;transform:translateX(0);}
}

.criatura-anim-right{ animation: criaturaEnterRight .6s ease both; }
@keyframes criaturaEnterRight{
  from{opacity:0;transform:translateX(-16px);}
  to{opacity:1;transform:translateX(0);}
}

/* =========================
   MODO TICKER (scroll infinito)
   ========================= */
.criatura-ticker-viewport{
  overflow:hidden;
  width:100%;
}

.criatura-ticker-track{
  display:flex;
  width:max-content;
  will-change: transform;
  animation-duration: var(--cf-ticker-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* duas cópias do mesmo grupo */
.criatura-ticker-group{
  display:flex;
  gap: var(--cf-gap);
  padding-right: var(--cf-gap);
}

/* no ticker, cada item não deve quebrar linha */
.criatura-ticker .criatura-feature-row{
  min-width: max-content;
}

/* direção */
.criatura-ticker-left .criatura-ticker-track{
  animation-name: criaturaTickerLeft;
}
@keyframes criaturaTickerLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.criatura-ticker-right .criatura-ticker-track{
  animation-name: criaturaTickerRight;
}
@keyframes criaturaTickerRight{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .criatura-ticker-track,
  .criatura-anim-left,
  .criatura-anim-right{
    animation: none !important;
    transform: none !important;
  }
}