/* ==========================================================
   TREVO DO DIA — BICHO CERTO
   ========================================================== */

/* ==========================================================
   ISOLAMENTO E ROW
   ========================================================== */

.bc-trevo-dia-row {
  --bs-gutter-x: 0;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 18px;
}

.bc-trevo-dia-row > .col-12 {
  padding-right: 0;
  padding-left: 0;
}

.bc-trevo-dia-widget,
.bc-trevo-dia-widget * {
  box-sizing: border-box;
}

.bc-trevo-dia-widget {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================================
   CARD PRINCIPAL
   ========================================================== */

.bc-trevo-dia-card {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(580px, 1.2fr)
    minmax(410px, .8fr);
  align-items: center;
  width: 100%;
  min-height: 345px;
  max-height: 365px;
  gap: 15px;
  padding: 25px 48px;
  overflow: hidden;
  color: #ffffff;
  border: 1px solid rgba(123, 255, 87, .26);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 80% 35%,
      #0AB58A,
      transparent 33%
    ),
    radial-gradient(
      circle at 82% 90%,
      #09554E,
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #09554E 0%,
      #09554E 48%,
      #09554E 100%
    );

  box-shadow:
    0 18px 52px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.bc-trevo-dia-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .018) 1px,
      transparent 1px
    );

  background-size: 38px 38px;
}

/* ==========================================================
   BLOCO DE INFORMAÇÕES
   ========================================================== */

.bc-trevo-dia-info {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

.bc-trevo-dia-topo {
  margin-bottom: 18px;
}

.bc-trevo-dia-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  color: #a0ff72;
  border: 1px solid rgba(132, 255, 77, .32);
  border-radius: 999px;
  background: rgba(103, 255, 65, .08);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.bc-trevo-dia-badge-icone {
  display: inline-block;
  color: #6fe63e;
  font-size: 18px;
  line-height: 1;

  filter:
    drop-shadow(
      0 0 7px rgba(128, 255, 72, .45)
    );

  animation:
    bcTrevoBadgePulsar
    3.2s
    ease-in-out
    infinite;
}

/* ==========================================================
   DATA E MILHAR LADO A LADO
   ========================================================== */

.bc-trevo-dia-conteudo {
  display: grid;
  grid-template-columns:
    minmax(320px, 1fr)
    minmax(290px, .86fr);
  align-items: stretch;
  width: 100%;
  max-width: 780px;
  gap: 18px;
}

.bc-trevo-dia-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid rgba(133, 255, 69, .28);
  border-radius: 17px;
  background: rgba(0, 0, 0, .23);
}

.bc-trevo-dia-data > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  text-align: center;
  border-right: 1px solid rgba(133, 255, 69, .17);
}

.bc-trevo-dia-data > div:last-child {
  border-right: 0;
}

.bc-trevo-dia-data small,
.bc-trevo-dia-milhar-box small {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .64);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.bc-trevo-dia-data strong {
  color: #ffffff;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================
   BOX DO MILHAR
   ========================================================== */

.bc-trevo-dia-milhar-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 112px;
  padding: 16px 23px;
  overflow: hidden;
  border: 1px solid rgba(139, 255, 77, .40);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 22% 40%,
      rgba(132, 255, 72, .14),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(48, 190, 67, .14),
      rgba(0, 178, 133, .07)
    );

  box-shadow:
    inset 0 0 30px rgba(100, 255, 73, .035),
    0 12px 28px rgba(0, 0, 0, .14);
}

.bc-trevo-dia-milhar-box::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 30%;
  height: 260%;
  transform: rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .12),
      transparent
    );

  animation:
    bcTrevoReflexoMilhar
    7s
    ease-in-out
    infinite;
}

.bc-trevo-dia-milhar {
  position: relative;
  z-index: 2;
  display: block;
  color: #92ff59;
  font-size: clamp(53px, 5vw, 72px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;

  text-shadow:
    0 0 11px rgba(139, 255, 82, .38),
    0 0 32px rgba(100, 255, 65, .18);
}

.bc-trevo-dia-mensagem {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .77);
  font-size: 14px;
}

.bc-trevo-dia-mensagem span {
  color: #83ee45;
  font-size: 20px;
}

/* ==========================================================
   ÁREA DO TREVO
   ========================================================== */

.bc-trevo-dia-area {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 340px;
  overflow: visible;
}

.bc-trevo-dia-brilho-fundo {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(75, 225, 66, .15) 0%,
      rgba(45, 165, 47, .07) 42%,
      transparent 70%
    );

  filter: blur(7px);

  animation:
    bcTrevoFundoRespirar
    5s
    ease-in-out
    infinite;
}

.bc-trevo-dia-svg {
  position: relative;
  z-index: 3;
  display: block;
  width: auto;
  max-width: 100%;
  height: 345px;
  overflow: visible;

  filter:
    drop-shadow(
      0 12px 15px rgba(0, 0, 0, .20)
    );

  animation:
    bcTrevoSvgFlutuar
    5.8s
    ease-in-out
    infinite;
}

/* ==========================================================
   FOLHAS DO SVG
   ========================================================== */

.bc-trevo-dia-grupo-folha {
  transform-box: view-box;
  transform-origin: 250px 277px;
  will-change: transform;
}

.bc-trevo-dia-grupo-folha-1 {
  animation:
    bcTrevoFolhaSuperior
    4.7s
    ease-in-out
    infinite;
}

.bc-trevo-dia-grupo-folha-2 {
  animation:
    bcTrevoFolhaDireita
    5.1s
    ease-in-out
    infinite;
}

.bc-trevo-dia-grupo-folha-3 {
  animation:
    bcTrevoFolhaInferior
    4.9s
    ease-in-out
    infinite;
}

.bc-trevo-dia-grupo-folha-4 {
  animation:
    bcTrevoFolhaEsquerda
    5.3s
    ease-in-out
    infinite;
}

.bc-trevo-dia-forma-folha {
  transition: filter .3s ease;
}

.bc-trevo-dia-nervura-principal {
  fill: none;
  stroke: rgba(214, 255, 163, .34);
  stroke-width: 3;
  stroke-linecap: round;
}

.bc-trevo-dia-nervuras-secundarias {
  fill: none;
  stroke: rgba(208, 255, 160, .18);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bc-trevo-dia-digito {
  fill: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 75px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: rgba(0, 50, 14, .26);
  stroke-width: 3px;

  filter:
    drop-shadow(
      0 7px 5px rgba(0, 0, 0, .34)
    );

  pointer-events: none;
}

.bc-trevo-dia-centro-svg {
  filter:
    drop-shadow(
      0 0 8px rgba(145, 255, 80, .9)
    )
    drop-shadow(
      0 0 18px rgba(93, 255, 55, .55)
    );
}

.bc-trevo-dia-centro-brilho {
  animation:
    bcTrevoCentroPulsar
    3.4s
    ease-in-out
    infinite;
}

.bc-trevo-dia-caule-svg,
.bc-trevo-dia-caule-luz {
  transform-box: fill-box;
  transform-origin: 50% 0%;

  animation:
    bcTrevoCauleMover
    5.8s
    ease-in-out
    infinite;
}

.bc-trevo-dia-sombra-chao {
  transform-box: fill-box;
  transform-origin: center;

  animation:
    bcTrevoSombraMover
    5.8s
    ease-in-out
    infinite;
}

.bc-trevo-dia-particulas circle {
  fill: #9cff58;

  filter:
    drop-shadow(
      0 0 5px #77ff3a
    );

  animation:
    bcTrevoParticula
    3.8s
    ease-in-out
    infinite;
}

.bc-trevo-dia-particulas circle:nth-child(2) {
  animation-delay: -.8s;
}

.bc-trevo-dia-particulas circle:nth-child(3) {
  animation-delay: -1.7s;
}

.bc-trevo-dia-particulas circle:nth-child(4) {
  animation-delay: -2.4s;
}

.bc-trevo-dia-particulas circle:nth-child(5) {
  animation-delay: -3.1s;
}

.bc-trevo-dia-particulas circle:nth-child(6) {
  animation-delay: -1.2s;
}

/* ==========================================================
   ANIMAÇÕES
   ========================================================== */

@keyframes bcTrevoSvgFlutuar {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-.5deg);
  }

  50% {
    transform:
      translateY(-7px)
      rotate(.7deg);
  }
}

@keyframes bcTrevoFolhaSuperior {
  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      rotate(-2.4deg)
      scale(1.018);
  }
}

@keyframes bcTrevoFolhaDireita {
  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      rotate(2.2deg)
      scale(1.016);
  }
}

@keyframes bcTrevoFolhaInferior {
  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      rotate(-1.7deg)
      scale(1.014);
  }
}

@keyframes bcTrevoFolhaEsquerda {
  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      rotate(2.5deg)
      scale(1.018);
  }
}

@keyframes bcTrevoCentroPulsar {
  0%,
  100% {
    opacity: .22;
    transform: scale(.94);
    transform-origin: 250px 277px;
  }

  50% {
    opacity: .42;
    transform: scale(1.15);
    transform-origin: 250px 277px;
  }
}

@keyframes bcTrevoCauleMover {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(1.2deg);
  }
}

@keyframes bcTrevoSombraMover {
  0%,
  100% {
    opacity: .13;
    transform: scaleX(1);
  }

  50% {
    opacity: .09;
    transform: scaleX(.88);
  }
}

@keyframes bcTrevoParticula {
  0%,
  100% {
    opacity: .18;

    transform:
      translateY(5px)
      scale(.72);
  }

  50% {
    opacity: .88;

    transform:
      translateY(-7px)
      scale(1.08);
  }
}

@keyframes bcTrevoFundoRespirar {
  0%,
  100% {
    opacity: .72;

    transform:
      translate(-50%, -50%)
      scale(.96);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.05);
  }
}

@keyframes bcTrevoBadgePulsar {
  0%,
  100% {
    transform:
      scale(1)
      rotate(0deg);
  }

  50% {
    transform:
      scale(1.08)
      rotate(4deg);
  }
}

@keyframes bcTrevoReflexoMilhar {
  0%,
  25% {
    left: -38%;
  }

  55%,
  100% {
    left: 125%;
  }
}

/* ==========================================================
   DESKTOP INTERMEDIÁRIO
   ========================================================== */

@media (max-width: 1199px) {
  .bc-trevo-dia-card {
    grid-template-columns:
      minmax(520px, 1fr)
      390px;

    padding-right: 28px;
    padding-left: 28px;
  }

  .bc-trevo-dia-conteudo {
    grid-template-columns:
      minmax(290px, 1fr)
      minmax(250px, .8fr);
  }

  .bc-trevo-dia-svg {
    height: 325px;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {
  .bc-trevo-dia-card {
    grid-template-columns:
      minmax(0, 1fr)
      340px;

    min-height: 340px;
    padding: 23px 25px;
  }

  .bc-trevo-dia-conteudo {
    grid-template-columns: 1fr;
    max-width: 430px;
    gap: 12px;
  }

  .bc-trevo-dia-data,
  .bc-trevo-dia-milhar-box {
    min-height: 88px;
  }

  .bc-trevo-dia-data > div {
    padding: 11px 8px;
  }

  .bc-trevo-dia-milhar-box {
    padding: 13px 20px;
  }

  .bc-trevo-dia-milhar {
    font-size: 57px;
  }

  .bc-trevo-dia-mensagem {
    margin-top: 13px;
  }

  .bc-trevo-dia-area {
    height: 320px;
  }

  .bc-trevo-dia-svg {
    height: 315px;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {
  .bc-trevo-dia-row {
    margin-bottom: 14px;
  }

  .bc-trevo-dia-card {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: auto;
    gap: 0;
    padding: 24px 18px 20px;
    border-radius: 20px;
  }

  .bc-trevo-dia-info {
    align-items: center;
    text-align: center;
  }

  .bc-trevo-dia-topo {
    margin-bottom: 16px;
  }

  .bc-trevo-dia-conteudo {
    width: 100%;
    max-width: 520px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bc-trevo-dia-data,
  .bc-trevo-dia-milhar-box {
    width: 100%;
  }

  .bc-trevo-dia-mensagem {
    justify-content: center;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 0;
    padding: 0 10px;
    line-height: 1.4;
  }

  /*
   * Espaçamento entre a mensagem, o trevo
   * e as bordas laterais do card.
   */
  .bc-trevo-dia-area {
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 26px;
    padding: 0 22px 10px;
    overflow: hidden;
  }

  .bc-trevo-dia-brilho-fundo {
    width: 290px;
    height: 290px;
  }

  .bc-trevo-dia-svg {
    display: block;
    width: 100%;
    max-width: 390px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
  }

  /*
   * Reduz filtros mais pesados no mobile,
   * preservando a aparência principal.
   */
  .bc-trevo-dia-svg {
    filter:
      drop-shadow(
        0 8px 11px rgba(0, 0, 0, .18)
      );
  }

  .bc-trevo-dia-particulas circle {
    filter:
      drop-shadow(
        0 0 3px rgba(119, 255, 58, .7)
      );
  }
}

/* ==========================================================
   CELULARES
   ========================================================== */

@media (max-width: 480px) {
  .bc-trevo-dia-card {
    padding: 21px 13px 18px;
  }

  .bc-trevo-dia-data strong {
    font-size: 23px;
  }

  .bc-trevo-dia-milhar {
    font-size: 57px;
    letter-spacing: 5px;
  }

  .bc-trevo-dia-mensagem {
    margin-top: 22px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  .bc-trevo-dia-area {
    margin-top: 28px;
    padding-right: 18px;
    padding-bottom: 10px;
    padding-left: 18px;
  }

  .bc-trevo-dia-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
  }

  .bc-trevo-dia-brilho-fundo {
    width: 260px;
    height: 260px;
  }
}

/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 390px) {
  .bc-trevo-dia-card {
    padding-right: 11px;
    padding-left: 11px;
  }

  .bc-trevo-dia-area {
    margin-top: 30px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .bc-trevo-dia-svg {
    max-width: 305px;
  }

  .bc-trevo-dia-milhar {
    font-size: 51px;
    letter-spacing: 4px;
  }

  .bc-trevo-dia-mensagem {
    font-size: 12px;
  }
}

/* ==========================================================
   CELULARES MUITO PEQUENOS
   ========================================================== */

@media (max-width: 340px) {
  .bc-trevo-dia-area {
    padding-right: 14px;
    padding-left: 14px;
  }

  .bc-trevo-dia-svg {
    max-width: 275px;
  }

  .bc-trevo-dia-data > div {
    padding-right: 5px;
    padding-left: 5px;
  }

  .bc-trevo-dia-data strong {
    font-size: 21px;
  }

  .bc-trevo-dia-milhar {
    font-size: 46px;
    letter-spacing: 3px;
  }
}

/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .bc-trevo-dia-widget *,
  .bc-trevo-dia-widget *::before,
  .bc-trevo-dia-widget *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ==========================================================
   TREVO DO DIA — VERSÃO MAIS COMPACTA
   prioridade: mobile
   ========================================================== */

/* DESKTOP */
.bc-trevo-dia-card{
	min-height: 285px;
	max-height: 310px;
	padding: 18px 34px;
	gap: 10px;
	border-radius: 18px;
}

.bc-trevo-dia-topo{
	margin-bottom: 10px;
}

.bc-trevo-dia-badge{
	padding: 7px 13px;
	font-size: 12px;
}

.bc-trevo-dia-badge-icone{
	font-size: 16px;
}

.bc-trevo-dia-data{
	min-height: 78px;
	border-radius: 14px;
}

.bc-trevo-dia-data small{
	margin-bottom: 4px;
	font-size: 9px;
}

.bc-trevo-dia-data strong{
	font-size: 24px;
}

.bc-trevo-dia-area{
	height: 275px;
}

.bc-trevo-dia-svg{
	height: 275px;
}

.bc-trevo-dia-brilho-fundo{
	width: 270px;
	height: 270px;
}


/* TABLET */
@media (max-width: 991px){

	.bc-trevo-dia-card{
		min-height: 285px;
		padding: 18px 20px;
	}

	.bc-trevo-dia-data{
		min-height: 72px;
	}

	.bc-trevo-dia-area{
		height: 265px;
	}

	.bc-trevo-dia-svg{
		height: 260px;
	}
}


/* MOBILE */
@media (max-width: 767px){

	.bc-trevo-dia-row{
		margin-bottom: 10px;
	}

	.bc-trevo-dia-card{
		grid-template-columns: 1fr;
		min-height: auto;
		max-height: none;

		padding: 15px 13px 12px;
		gap: 0;

		border-radius: 17px;
	}

	.bc-trevo-dia-info{
		align-items: center;
		text-align: center;
	}

	.bc-trevo-dia-topo{
		margin-bottom: 9px;
	}

	.bc-trevo-dia-badge{
		padding: 6px 12px;
		font-size: 11px;
	}

	.bc-trevo-dia-badge-icone{
		font-size: 15px;
	}

	.bc-trevo-dia-conteudo{
		width: 100%;
		max-width: none;
		gap: 8px;
	}

	.bc-trevo-dia-data{
		width: 100%;
		min-height: 67px;
		border-radius: 13px;
	}

	.bc-trevo-dia-data > div{
		padding: 5px 4px;
	}

	.bc-trevo-dia-data small{
		margin-bottom: 3px;
		font-size: 8px;
	}

	.bc-trevo-dia-data strong{
		font-size: 22px;
	}

	/* Botão ANALISAR TREVO */
	.bc-trevo-dia-info > .btn{
		height: 30px;
		margin-top: 7px !important;
		padding: 3px 10px;
		font-size: 12px;
		line-height: 20px;
	}

	/*
	 * Principal redução vertical.
	 * Antes havia margin-top de 26/28/30px.
	 */
	.bc-trevo-dia-area{
		width: 100%;
		height: auto;
		min-height: 0;

		margin-top: 8px;
		padding: 0 16px 2px;

		overflow: hidden;
	}

	.bc-trevo-dia-svg{
		display: block;
		width: 100%;
		max-width: 285px;
		height: auto;
		margin: 0 auto;
	}

	.bc-trevo-dia-brilho-fundo{
		width: 235px;
		height: 235px;
	}
}


/* CELULARES */
@media (max-width: 480px){

	.bc-trevo-dia-card{
		padding: 14px 12px 10px;
	}

	.bc-trevo-dia-data{
		min-height: 64px;
	}

	.bc-trevo-dia-data strong{
		font-size: 21px;
	}

	.bc-trevo-dia-area{
		margin-top: 6px;
		padding-right: 15px;
		padding-bottom: 0;
		padding-left: 15px;
	}

	.bc-trevo-dia-svg{
		max-width: 270px;
	}

	.bc-trevo-dia-brilho-fundo{
		width: 220px;
		height: 220px;
	}
}


/* CELULARES PEQUENOS */
@media (max-width: 390px){

	.bc-trevo-dia-card{
		padding: 13px 10px 9px;
	}

	.bc-trevo-dia-data{
		min-height: 61px;
	}

	.bc-trevo-dia-data strong{
		font-size: 20px;
	}

	.bc-trevo-dia-area{
		margin-top: 5px;
		padding-right: 12px;
		padding-left: 12px;
	}

	.bc-trevo-dia-svg{
		max-width: 250px;
	}
}


/* CELULARES MUITO PEQUENOS */
@media (max-width: 340px){

	.bc-trevo-dia-svg{
		max-width: 235px;
	}

	.bc-trevo-dia-data strong{
		font-size: 19px;
	}
}