/* Campañas UGC · MOO CHUU */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tabs button { padding: 10px 20px; border: 1.5px solid var(--line); border-radius: 30px; background: var(--white); font-weight: 700; color: var(--ink); cursor: pointer; transition: .25s var(--ease); }
.tabs button.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.ugc { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: start; }

/* Video simulado */
.ad { width: 320px; }
.ad__media { position: absolute; inset: 0; }
.ad__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .6s var(--ease); }
.ad__media img.is-on { opacity: 1; animation: kb 4s linear forwards; }
@keyframes kb { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1.0) translate(-1%, -1%); } }
.ad__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 25%, transparent 55%, rgba(0, 0, 0, .65)); }
.ad__cap { position: absolute; left: 16px; right: 64px; top: 32%; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--white); color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.3; text-align: center; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); transition: opacity .3s; }
.ad__cap:empty { opacity: 0; }
.ad__cap.is-cta { background: var(--pink); color: var(--white); }
.ad__ui { position: absolute; inset: 0; color: var(--white); font-size: .78rem; pointer-events: none; }
.ad__ui .side { position: absolute; right: 10px; bottom: 90px; display: grid; gap: 14px; text-align: center; font-size: .68rem; }
.ad__ui .side i { display: block; font-style: normal; font-size: 1.35rem; line-height: 1; }
.ad__ui .who { position: absolute; left: 12px; right: 60px; bottom: 22px; }
.ad__ui .who b { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.ad__ui .who img { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--white); }
.ad__ui .who p { margin: 4px 0 6px; font-size: .74rem; line-height: 1.35; opacity: .92; }
.ad__ui .cta { display: inline-block; padding: 6px 12px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--ink); font-weight: 700; font-size: .72rem; }
.ad__ui .head { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: .82rem; }
.ad__ui .head span { opacity: .6; margin: 0 8px; font-weight: 500; }
.ad__ui .spons { font-size: .66rem; opacity: .8; font-weight: 500; }
.ad__bar { position: absolute; left: 12px; right: 12px; top: 30px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ad__bar span { display: block; height: 100%; width: 0; background: var(--white); }
.ad--fb .ad__bar { display: none; }
.ad--tt .ad__bar { top: auto; bottom: 8px; }

/* Guion */
.script .tag { margin-bottom: 14px; }
.script h3 { font-size: 2rem; }
.scenes { margin: 22px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.scenes li { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--white); border: 1.5px solid var(--line); transition: .35s var(--ease); }
.scenes time { font-family: var(--display); font-size: 1.05rem; color: var(--pink-deep); }
.scenes b { display: block; color: var(--ink); }
.scenes span { font-size: .9rem; }
.scenes li.is-now { border-color: var(--pink); background: var(--blush); transform: translateX(6px); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; font-size: .92rem; }
.meta dt { font-weight: 700; color: var(--ink); }
.meta dd { margin: 0; }

.plat { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 30px; font-weight: 700; font-size: .8rem; color: var(--white); }
.plat--tt { background: var(--ink); box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.plat--ig { background: linear-gradient(45deg, #f9a825, #e1306c, #833ab4); }
.plat--fb { background: #1877f2; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.week div { padding: 18px 14px; border-radius: 18px; background: var(--cream); border: 1px solid var(--line); }
.week b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--pink-deep); text-transform: uppercase; }
.week span { font-size: .86rem; line-height: 1.4; display: block; margin-top: 6px; }

@media (max-width: 960px) {
  .ugc { grid-template-columns: 1fr; gap: 34px; }
  .ad { justify-self: center; }
  .week { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ad { width: 100%; max-width: 320px; }
}