.cd-section { display: flex; justify-content: center; align-items: center; margin-bottom: 6rem; padding: 60px 20px; font-family: system-ui, sans-serif; }
.cd-section { position: relative; overflow: hidden; }
.cd-bg-carousel { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: flex; align-items: center; }
.cd-bg-carousel::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.35); }
.cd-bg-track { display: flex; gap: 20px; width: max-content; animation: cdBgScroll var(--cd-bg-duration, 40s) linear infinite; }
.cd-bg-track img { height: 260px; width: auto; border-radius: 20px; object-fit: cover; flex-shrink: 0; opacity: 0.8; }
.cd-widget { position: relative; z-index: 1; }
@keyframes cdBgScroll { to { transform: translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .cd-bg-track { animation: none; } }
.cd-section *, .cd-section *::before, .cd-section *::after { box-sizing: border-box; }
.cd-widget { background-color: white; border-radius: 32px; padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); display: flex; gap: 40px; align-items: center; max-width: 980px; width: 100%; }
.cd-widget-image { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 500ms ease; }
.cd-widget-image:first-child { background-image: url("../../uploads/cipel/Cipel.jpg"); }
.cd-widget-image.is-active { opacity: 1; }
.cd-widget > :not(.cd-widget-image) { position: relative; z-index: 1; }
.cd-scene { position: relative; width: 380px; height: 420px; flex-shrink: 0; }
.cd-mascot { position: absolute; width: 220px; height: 275px; left: 0; bottom: 0; z-index: 4; pointer-events: none; }
.cd-mascot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
/* Em repouso, só o Frame1 aparece (estático) */
.cd-mascot img:nth-child(1) { opacity: 1; }
/* A classe .cd-play (ligada via JS a cada 5 min) roda 1.2s e depois volta ao Frame1 */
.cd-scene.cd-play .cd-mascot img { animation: cdShowFrame 1.2s steps(1, end); }
.cd-scene.cd-play .cd-mascot img:nth-child(2) { animation-delay: 0.24s; }
.cd-scene.cd-play .cd-mascot img:nth-child(3) { animation-delay: 0.48s; }
.cd-scene.cd-play .cd-mascot img:nth-child(4) { animation-delay: 0.72s; }
.cd-scene.cd-play .cd-mascot img:nth-child(5) { animation-delay: 0.96s; }
@keyframes cdShowFrame {
  0%, 19.99% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
.cd-calendar { position: absolute; width: 190px; left: 155px; top: 55px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); z-index: 2; overflow: hidden; }
.cd-cal-header { background: #4ade80; height: 38px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #14532d; font-size: 13px; letter-spacing: 1px; }
.cd-cal-body { padding: 18px 10px 28px; text-align: center; }
.cd-day { font-size: 82px; font-weight: 800; color: #16a34a; line-height: 0.85; }
.cd-cal-title { margin-top: 8px; font-size: 17px; font-weight: 700; color: #15803d; }
/* Folha destacável: fica por cima do calendário mostrando o dia ANTERIOR;
   ao se soltar, revela o dia atual de trás. */
.cd-page-flipping { position: absolute; width: 190px; left: 155px; top: 55px; background: white; border-radius: 12px; overflow: hidden; z-index: 5; pointer-events: none; transform-origin: top center; backface-visibility: hidden; will-change: transform, opacity, box-shadow; opacity: 0; }
.cd-scene.cd-play .cd-page-flipping { animation: cdFlipPage 3.6s ease-in-out; }
.cd-page-flipping::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,83,45,0) 0%, rgba(20,83,45,0.28) 100%); opacity: 0; }
.cd-scene.cd-play .cd-page-flipping::after { animation: cdPageShade 3.6s ease-in-out; }
@keyframes cdFlipPage {
  0%, 12% { transform: perspective(700px) translateY(0) rotateX(0deg); box-shadow: 0 10px 30px rgba(0,0,0,0.12); opacity: 1; }
  40% { transform: perspective(700px) rotateX(90deg); box-shadow: 0 -20px 30px rgba(0,0,0,0.25); opacity: 1; z-index: 5; }
  41% { z-index: 1; }
  70% { transform: perspective(700px) rotateX(-178deg); box-shadow: 0 0 10px rgba(0,0,0,0.1); opacity: 0.8; z-index: 1; }
  82%, 100% { transform: perspective(700px) rotateX(-180deg); box-shadow: none; opacity: 0; z-index: 1; }
}
@keyframes cdPageShade {
  0%, 12% { opacity: 0; }
  40% { opacity: 0.8; }
  70% { opacity: 1; }
  82%, 100% { opacity: 1; }
}
.cd-product { flex: 1; position: relative; align-self: stretch; min-height: 420px; border-radius: 24px; overflow: hidden; text-align: center; }
.cd-card { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; min-height: 56px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.75); padding: 0 16px; border-top: 1px solid rgba(255,255,255,0.6); text-align: left; overflow: hidden; }
.cd-card h2 { font-size: 16px; color: #166534; margin: 0; white-space: nowrap; }
.cd-card p { flex: 1; min-width: 0; font-size: 12px; color: #475569; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-btn { display: inline-block; flex-shrink: 0; background: #16a34a; color: white; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 12px; }
@media (max-width: 740px) {
  .cd-section { padding: 32px 12px; margin-bottom: 3rem; }
  .cd-widget { width: 100%; padding: clamp(14px, 4vw, 24px); gap: 16px; border-radius: 24px; flex-direction: column; }
  .cd-product { order: 1; width: 100%; min-height: clamp(240px, 75vw, 360px); border-radius: 18px; }
  .cd-scene { order: 2; width: min(100%, 380px); height: clamp(280px, 90vw, 380px); margin: 0 auto; flex-shrink: 1; }
  .cd-scene { transition: height 300ms ease, opacity 300ms ease; }
  .cd-scene.cd-mobile-hidden { height: 0; min-height: 0; opacity: 0; overflow: hidden; }
  .cd-product .cd-card { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; }
  .cd-product.cd-card-visible .cd-card { opacity: 1; visibility: visible; }
  .cd-mascot { width: 58%; height: 66%; }
  .cd-calendar, .cd-page-flipping { left: 41%; top: 13%; width: 50%; }
  .cd-cal-header { height: 32px; font-size: 11px; }
  .cd-cal-body { padding: 14px 8px 20px; }
  .cd-day { font-size: clamp(56px, 19vw, 72px); }
  .cd-cal-title { font-size: clamp(12px, 4vw, 15px); }
  .cd-card { gap: 6px; padding: 0 10px; min-height: 52px; }
  .cd-card h2 { font-size: 13px; }
  .cd-card p { font-size: 10px; }
  .cd-btn { padding: 5px 8px; font-size: 10px; }
}
@media (max-width: 380px) {
  .cd-section { padding-right: 8px; padding-left: 8px; }
  .cd-widget { padding: 12px; gap: 12px; }
  .cd-product { min-height: 230px; }
  .cd-card { gap: 5px; padding: 0 8px; }
  .cd-card h2 { font-size: 12px; }
  .cd-btn { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-widget-image { transition: none; }
  .cd-scene, .cd-product .cd-card { transition: none; }
}