/* Anuncios DOOH (js/dooh.js). Lienzo de diseño 1080x1920 escalado al contenedor.
   Solo transform / opacity / clip-path se animan (desde JS con Web Animations). Colores del negocio por variables:
   --d-a (acento) --d-ink (texto AA sobre el acento) --d-b (color2/oscuro) --d-inkb (texto sobre --d-b) --d-dark (muy oscuro).
   Compatible con WebView ~Chrome 90 (sin color-mix, sin cq*). */
.dooh {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #0B1220; background: var(--d-dark, #0B1220);
  color: #fff; font-family: var(--d-fb, "Inter", system-ui, sans-serif); -webkit-font-smoothing: antialiased; text-align: left;
}
.dooh *, .dooh *::before, .dooh *::after { box-sizing: border-box; }
.dooh__bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(160deg, var(--d-b, #1b2f7d), var(--d-dark, #0B1220)); }
.dooh__stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; visibility: hidden; overflow: hidden; background: var(--d-dark, #0B1220); }
.dooh.is-fit .dooh__stage { visibility: visible; }
/* Miniaturas y movimiento reducido: fotograma fijo, sin capas de composición reservadas (hay muchas miniaturas a la vez). */
.dooh.is-still *, .dooh.is-still *::before, .dooh.is-still *::after { will-change: auto !important; }
.dooh__ph, .dooh__veil, .dooh__fx, .dooh__chrome { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; }
.dooh__veil { pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .72) 100%); }
.dooh__fx, .dooh__chrome { pointer-events: none; }

/* ---------- fotos, filtros y formas ---------- */
.dp { position: absolute; overflow: hidden; isolation: isolate; background: var(--d-b, #1b2f7d); }
.dp--full { left: 0; top: 0; width: 1080px; height: 1920px; will-change: opacity; }
.dp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); will-change: transform; }
.dp--bw img { filter: grayscale(1) contrast(1.08); }
.dp--warm img { filter: sepia(.35) saturate(1.25) hue-rotate(-10deg); }
.dp--cool img { filter: sepia(.25) hue-rotate(150deg) saturate(1.1); }
.dp--vivid img { filter: saturate(1.45) contrast(1.1); }
.dp--duotone img { filter: grayscale(1) contrast(1.15) brightness(1.1); }
.dp__tint { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(160deg, var(--d-b, #1b2f7d), var(--d-a, #2B59F0)); mix-blend-mode: color; opacity: .92; }
.dp--shape { background: linear-gradient(150deg, var(--d-b, #1b2f7d), var(--d-dark, #0B1220)); }
.dp--shape1 { background: linear-gradient(210deg, var(--d-a, #2B59F0), var(--d-b, #1b2f7d)); }
.dp--shape2 { background: linear-gradient(120deg, var(--d-dark, #0B1220), var(--d-b, #1b2f7d) 60%, var(--d-a, #2B59F0)); }
.dp__shapes { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; will-change: transform; }
.dp__shapes b { position: absolute; border-radius: 50%; background: var(--d-a, #2B59F0); opacity: .3; }
.dp__shapes b:nth-child(1) { width: 62%; height: 36%; left: -10%; top: 8%; }
.dp__shapes b:nth-child(2) { width: 50%; height: 30%; right: -6%; top: 40%; background: #fff; opacity: .1; }
.dp__shapes b:nth-child(3) { width: 70%; height: 38%; left: 16%; bottom: -12%; background: var(--d-b, #1b2f7d); opacity: .55; }
.dp--shape1 .dp__shapes b:nth-child(1) { left: 40%; top: 50%; }
.dp--shape2 .dp__shapes b:nth-child(2) { left: 0; right: auto; top: 60%; }
.dp__emoji { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.62em; text-align: center; font-size: 230px; line-height: 1.2; }
.dfull .dp__emoji { font-size: 480px; }

/* ---------- titulares y textos ---------- */
.d-h {
  position: absolute; left: 60px; width: 960px; padding: 30px 40px 34px; border-radius: 40px; background: rgba(8, 16, 28, .86); color: #fff;
  font: 800 108px/1.06 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.035em; will-change: transform, opacity;
}
.kw { display: inline-block; will-change: transform, opacity; }
.kw.is-a { background: var(--d-a); color: var(--d-ink); padding: 0 16px; border-radius: 16px; }
.d-h--ribbon { left: 0; width: auto; max-width: 980px; background: var(--d-a); color: var(--d-ink); border-radius: 0 60px 60px 0; padding: 20px 52px 22px 60px; }
.d-h--ribbon .kw.is-a { background: var(--d-b); color: var(--d-inkb); }
.d-sub { position: absolute; left: 60px; max-width: 960px; padding: 22px 38px; border-radius: 28px; background: var(--d-a); color: var(--d-ink); font: 700 52px/1.15 var(--d-fb, "Inter", system-ui, sans-serif); }
.d-author { position: absolute; left: 60px; padding: 16px 36px; background: var(--d-a); color: var(--d-ink); border-radius: 999px; font: 800 46px/1.1 var(--d-fh, "Poppins", system-ui, sans-serif); }

/* palabras de impacto y destellos */
.iw { position: absolute; left: 0; top: 0; width: 1080px; height: 1792px; display: grid; place-items: center; text-align: center; padding: 40px; word-break: break-word; font: 800 220px/.95 var(--d-fh, "Poppins", system-ui, sans-serif); text-transform: uppercase; letter-spacing: -.04em; will-change: transform, opacity; }
.iw--0 { background: var(--d-a); color: var(--d-ink); }
.iw--1 { background: var(--d-b); color: var(--d-inkb); }
.iw--2 { background: #fff; color: #0B1220; }
.flash { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; background: #fff; pointer-events: none; will-change: opacity; }

/* ---------- collage ---------- */
.gt { position: absolute; overflow: hidden; border-radius: 34px; background: var(--d-b, #1b2f7d); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); will-change: transform, opacity; }
.gi, .gh, .dcard { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.gi > .dp, .gh > .dp, .dcard > .dp { left: 0; top: 0; width: 100%; height: 100%; }
.dcard__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; background: linear-gradient(180deg, rgba(8, 16, 28, 0), rgba(8, 16, 28, .9)); color: #fff; }
.dcard__txt strong { font: 800 42px/1.05 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.02em; }
.dcard__txt span { flex: none; padding: 6px 18px; border-radius: 14px; background: var(--d-a); color: var(--d-ink); font: 800 42px/1.1 var(--d-fh, "Poppins", system-ui, sans-serif); }

/* tarjetas a pantalla completa (catálogo / top) */
.dfull { position: absolute; left: 0; top: 0; width: 1080px; height: 1792px; overflow: hidden; will-change: transform, opacity; }
.dfull__txt { position: absolute; left: 50px; right: 50px; bottom: 210px; display: grid; gap: 18px; justify-items: start; }
.dfull__txt strong { padding: 18px 36px 20px; border-radius: 30px; background: rgba(8, 16, 28, .88); color: #fff; font: 800 98px/1.04 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.035em; }
.dfull__txt span { padding: 10px 40px 12px; border-radius: 30px; background: var(--d-a); color: var(--d-ink); font: 800 132px/1 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.03em; }
.d-rank { position: absolute; left: 40px; top: 210px; font: 800 440px/.8 var(--d-fh, "Poppins", system-ui, sans-serif); color: var(--d-a); text-shadow: 0 12px 0 rgba(0, 0, 0, .4), 0 0 0 #000; will-change: transform, opacity; }
.d-rank--mini { font-size: 120px; left: 18px; top: 8px; }
.d-rank--mini span { display: block; }

/* ---------- oferta flash ---------- */
.d-stamp { position: absolute; right: 50px; top: 660px; width: 300px; height: 300px; display: grid; place-items: center; will-change: transform, opacity; }
.d-stamp__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--d-a); border: 10px dashed rgba(255, 255, 255, .85); }
.d-stamp span { position: relative; font: 800 90px/1 var(--d-fh, "Poppins", system-ui, sans-serif); color: var(--d-ink); letter-spacing: -.04em; text-align: center; }
.d-price { position: absolute; left: 60px; top: 740px; will-change: transform, opacity; }
.d-price s { display: inline-block; margin-bottom: 14px; padding: 6px 28px; border-radius: 18px; background: rgba(8, 16, 28, .88); color: #fff; font: 700 62px/1.1 var(--d-fb, "Inter", system-ui, sans-serif); text-decoration: line-through; }
.d-price strong { display: block; padding: 12px 46px 14px; border-radius: 36px; background: var(--d-a); color: var(--d-ink); font: 800 190px/1 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.04em; }
.d-count { position: absolute; left: 60px; top: 1130px; display: flex; align-items: center; gap: 28px; padding: 20px 40px; border-radius: 30px; background: rgba(8, 16, 28, .9); will-change: transform, opacity; }
.d-count small { max-width: 280px; font: 700 34px/1.15 var(--d-fb, "Inter", system-ui, sans-serif); letter-spacing: .08em; color: #E2E8F0; }
.d-count b { font: 800 118px/1 var(--d-fh, "Poppins", system-ui, sans-serif); font-variant-numeric: tabular-nums; color: #fff; }
.d-count--ev { top: 930px; }

/* ---------- testimonio ---------- */
.d-polaroid { position: absolute; right: 50px; top: 330px; width: 420px; height: 520px; background: #fff; box-shadow: 0 20px 44px rgba(0, 0, 0, .45); will-change: transform, opacity; }
.d-polaroid > .dp { left: 16px; top: 16px; width: 388px; height: 430px; }
.d-stars { position: absolute; left: 60px; top: 880px; display: flex; gap: 12px; padding: 10px 24px; border-radius: 999px; background: rgba(8, 16, 28, .88); will-change: transform, opacity; }
.d-star { position: relative; width: 96px; height: 96px; font-size: 92px; line-height: 1.05; text-align: center; }
.d-star i { font-style: normal; color: #94A3B8; }
.d-star b { position: absolute; left: 0; top: 0; width: 100%; color: #FFC53D; font-weight: 400; will-change: transform, opacity; }
.d-quote { position: absolute; left: 60px; top: 1030px; width: 960px; padding: 46px 48px; border-radius: 40px; background: rgba(8, 16, 28, .9); color: #fff; font: 700 54px/1.22 var(--d-fb, "Inter", system-ui, sans-serif); will-change: transform, opacity; }
.d-quote p { margin: 0; }
.d-quote__mark { position: absolute; left: 30px; top: -78px; font: 800 230px/1 var(--d-fh, "Poppins", system-ui, sans-serif); color: var(--d-a); }
.kw--q { display: inline-block; }

/* ---------- antes / después ---------- */
.d-lab { position: absolute; top: 210px; padding: 14px 40px; border-radius: 999px; background: var(--d-a); color: var(--d-ink); font: 800 54px/1.1 var(--d-fh, "Poppins", system-ui, sans-serif); will-change: transform, opacity; }
.d-lab--l { left: 50px; }
.d-lab--r { right: 50px; }
.d-curtain { position: absolute; left: -4px; top: 0; width: 8px; height: 1792px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .18); will-change: transform, opacity; }
.d-curtain i { display: none; }
.d-curtain b { position: absolute; left: -56px; top: 800px; width: 120px; height: 120px; border-radius: 50%; background: #fff; color: #0B1220; display: grid; place-items: center; font-size: 62px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.dsplit { position: absolute; top: 0; width: 536px; height: 1792px; overflow: hidden; will-change: transform, opacity; }
.dsplit--l { left: 0; }
.dsplit--r { right: 0; }

/* ---------- evento / juego ---------- */
.d-when { position: absolute; left: 0; top: 340px; padding: 24px 62px 28px 60px; border-radius: 0 70px 70px 0; background: var(--d-a); color: var(--d-ink); font: 800 122px/1 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.03em; will-change: transform, opacity; }
.d-place { position: absolute; left: 60px; top: 840px; padding: 16px 36px; border-radius: 999px; background: rgba(8, 16, 28, .88); color: #fff; font: 700 50px/1.1 var(--d-fb, "Inter", system-ui, sans-serif); will-change: transform, opacity; }
.d-gicon { position: absolute; left: 0; top: 420px; width: 1080px; text-align: center; font-size: 400px; line-height: 1.1; will-change: transform, opacity; }
.d-gicon span { display: inline-block; will-change: transform; }
.d-conf { position: absolute; width: 28px; height: 28px; border-radius: 6px; will-change: transform, opacity; }
.d-conf--0 { background: var(--d-a); }
.d-conf--1 { background: #fff; }
.d-conf--2 { background: #FFC53D; }

/* ---------- elementos fijos ---------- */
.d-logo { position: absolute; left: 50px; top: 48px; height: 112px; padding: 14px 32px; display: flex; align-items: center; border-radius: 30px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); will-change: transform, opacity; }
.d-logo__img { width: 190px; height: 84px; }
.d-logo__img > .media { width: 100%; height: 100%; background: transparent; }
.d-logo img { display: block; height: 84px; width: auto; max-width: 340px; object-fit: contain; }
.d-logo__word { font: 800 54px/1 var(--d-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.03em; color: var(--d-b, #1b2f7d); white-space: nowrap; }
.d-tick { position: absolute; left: 0; bottom: 0; width: 1080px; height: 128px; display: flex; overflow: hidden; background: var(--d-dark, #0B1220); color: #fff; border-top: 6px solid var(--d-a); will-change: transform; }
.d-tick__time { flex: none; width: 270px; display: grid; align-content: center; justify-items: center; background: var(--d-a); color: var(--d-ink); }
.d-tick__time b { font: 800 56px/1 var(--d-fh, "Poppins", system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.d-tick__time span { font: 700 28px/1.2 var(--d-fb, "Inter", system-ui, sans-serif); }
.d-tick__run { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.d-tick__in { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.d-tick__in span { padding: 0 26px; font: 700 46px/1 var(--d-fb, "Inter", system-ui, sans-serif); }
.d-tick__in i { font-style: normal; font-size: 28px; color: var(--d-a); }
.d-cta { position: absolute; left: 50px; top: 1612px; will-change: transform, opacity; }
.d-cta__in { display: flex; align-items: center; gap: 20px; padding: 20px 52px 22px 38px; border-radius: 999px; background: var(--d-a); color: var(--d-ink); font: 800 56px/1.05 var(--d-fh, "Poppins", system-ui, sans-serif); box-shadow: 0 10px 0 rgba(0, 0, 0, .28); will-change: transform; }
.d-cta__in i { font-style: normal; font-size: 60px; line-height: 1; }
.d-cta--big { top: 1480px; left: 50px; }
.d-cta--big .d-cta__in { font-size: 78px; padding: 28px 68px 30px 52px; }
.d-qr { position: absolute; right: 50px; top: 1440px; width: 240px; padding: 16px 16px 10px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); will-change: transform, opacity; }
.d-qr svg { display: block; width: 208px; height: 208px; }
.d-qr small { display: block; margin-top: 4px; color: #0B1220; font: 700 28px/1.2 var(--d-fb, "Inter", system-ui, sans-serif); }