/* =========================================================
   Creatividades DCO · estilos propios del deck
   (sobre assets/css/deck.css — no modifica componentes compartidos)
   Paleta: #8FC1EA #1488EA #29EBFF #0700FA #00478C #060F3D #1A1A1A
   ========================================================= */
#stage { --c-sky: #8fc1ea; --c-blue: #1488ea; --c-cyan: #29ebff; --c-ind: #0700fa; --c-navy: #00478c; --c-deep: #060f3d; --c-ink: #1a1a1a; }

/* ---------- Piezas comunes ---------- */
.cd-lcol { position: absolute; left: 140px; top: 150px; width: 780px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; z-index: 2; }
.cd-lcol.narrow { width: 700px; }
.cd-lead { font-size: 29px; max-width: 700px; }
.cd-mt { margin-top: 6px; }
.cd-h2 { margin-top: 18px; }
.cd-sub { font-size: 27px; margin-top: 14px; max-width: 1300px; }
.cd-wt { color: var(--c-sky); font: 600 17px/1 var(--f-mono); letter-spacing: .04em; }
.cd-vids { display: flex; flex-direction: column; gap: 14px; }
.cd-brand { position: absolute; right: 16px; bottom: 12px; z-index: 5; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .55); font: 700 13px/1 var(--f-mono); letter-spacing: .18em; color: #fff; background: rgba(6, 15, 61, .35); }
.cd-btn { border: 0; border-radius: 10px; padding: 12px 20px; font: 700 17px/1 var(--f-display); color: #fff; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); transition: transform .2s, filter .2s; }
.cd-btn.red { background: #e41e2b; }
.cd-btn.click { transform: scale(.92); filter: brightness(1.3); }
.cd-pillx { display: inline-flex; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(41, 235, 255, .6); background: rgba(7, 0, 250, .35); font: 700 24px/1.2 var(--f-display); color: var(--c-cyan); box-shadow: 0 0 34px -6px rgba(41, 235, 255, .6); }
.cd-hint { position: absolute; left: 140px; bottom: 150px; display: flex; align-items: center; gap: 10px; font: 400 20px/1 var(--f-body); color: var(--ink-3); }
.cd-hint .ico { width: 22px; height: 22px; color: var(--c-cyan); }

/* Escena exterior (derecha) */
.cd-scene { position: absolute; right: 140px; top: 150px; width: 920px; height: 800px; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #060f3d 0%, #0a1b6e 55%, #00478c 100%); border: 1px solid rgba(143, 193, 234, .2); box-shadow: 0 50px 120px -50px rgba(0, 0, 20, .9), inset 0 0 120px rgba(6, 15, 61, .6); }
.cd-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, #0b1650, #060f3d); border-top: 2px solid rgba(143, 193, 234, .25); z-index: 1; }
.cd-city { position: absolute; left: 0; right: 0; bottom: 56px; height: 380px; z-index: 0; pointer-events: none; }
.cd-city svg { width: 100%; height: 100%; display: block; }
.cd-city .bd { fill: #0d1d66; }
.cd-city .bd.b2 { fill: #0a1552; }
.cd-city .wn { fill: #8fc1ea; opacity: .14; }
.cd-city .wn.on { opacity: .55; fill: #29ebff; animation: cdWin 4s ease-in-out infinite; animation-delay: var(--w, 0s); }
@keyframes cdWin { 0%, 100% { opacity: .55; } 50% { opacity: .15; } }

/* Cartel / pantalla digital vectorial */
.cd-bb { position: absolute; left: 50%; bottom: 40px; width: 760px; margin-left: -380px; z-index: 3; }
.cd-bb.big { width: 840px; margin-left: -420px; }
.cd-scr { position: relative; height: 380px; overflow: hidden; border-radius: 10px; border: 14px solid #11163a; box-shadow: 0 0 0 2px #2b3a80, 0 40px 80px -30px #000, 0 0 80px -14px rgba(41, 235, 255, .45); background: var(--c-deep); }
.cd-bb.big .cd-scr { height: 440px; }
.cd-scr::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 4px); }
.cd-poles { display: flex; justify-content: space-between; padding: 0 24%; }
.cd-poles i { width: 30px; height: 150px; background: linear-gradient(90deg, #141a44, #2c3878 50%, #141a44); }
.cd-bb.big .cd-poles i { height: 170px; }

/* Mupi vertical */
.cd-mupi { position: absolute; left: 50%; bottom: 36px; width: 380px; margin-left: -190px; z-index: 3; }
.cd-mupi .fr { padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #2a3366, #11163a); box-shadow: 0 0 0 2px #3a4a8a, 0 50px 90px -30px #000, 0 0 90px -20px rgba(41, 235, 255, .45); }
.cd-mupi .scr { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: var(--c-deep); }
.cd-mupi .leg { width: 120px; height: 70px; margin: 0 auto; background: linear-gradient(90deg, #141a44, #2c3878 50%, #141a44); }

/* Caso real (tarjeta con foto) */
.cd-real { display: flex; align-items: center; gap: 20px; padding: 14px; border-radius: 18px; width: 100%; }
.cd-real .ph { position: relative; flex: none; width: 210px; height: 140px; border-radius: 12px; overflow: hidden; }
.cd-real .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-real .ic { flex: none; width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); }
.cd-real .ic .ico { width: 48px; height: 48px; color: #fff; }
.cd-real .tag { font-size: 12px; padding: 5px 10px; }
.cd-real b { display: block; margin-top: 8px; font: 800 24px/1.15 var(--f-display); }
.cd-real p { margin-top: 4px; font: 300 18px/1.4 var(--f-body); color: var(--ink-2); }
.cd-real .crop-rex img { inset: auto; width: 384px; height: 216px; left: -161px; top: -29px; object-fit: fill; }

/* Mano + celular */
.cd-hand { position: absolute; z-index: 5; }
.cd-ph { width: 240px; height: 480px; border-radius: 38px; padding: 10px; background: linear-gradient(160deg, #2b3157, #0b0d1c); box-shadow: 0 40px 80px -20px rgba(0, 0, 20, .9), inset 0 0 0 2px #4a5380; position: relative; }
.cd-ph::before { content: ''; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #000; z-index: 3; }
.cd-ph .scr { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; }
.cd-ph .pv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 18px 24px; text-align: center; opacity: 0; transition: opacity .5s, translate .5s var(--ease); translate: 0 20px; }
.cd-hand::after { content: ''; position: absolute; left: -40px; right: -30px; bottom: -70px; height: 210px; border-radius: 90px 90px 40px 40px; background: linear-gradient(170deg, #f1c7a6, #d39a76); z-index: -1; transform: rotate(-8deg); }

/* ---------- 01 · Portada ---------- */
.cd-h1 { font-size: 104px !important; }
.cd-cchips { display: flex; gap: 10px; margin-top: 46px; flex-wrap: nowrap; width: 1080px; }
.cd-cchips > div { display: flex; align-items: center; gap: 9px; padding: 11px 14px; white-space: nowrap; border-radius: 16px; background: rgba(20, 34, 120, .45); border: 1px solid var(--line-2); }
.cd-cchips .ico { width: 26px; height: 26px; color: var(--c-cyan); }
.cd-cchips span { font: 600 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cd-cchips b { font: 800 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ---------- 02 · Qué es DCO ---------- */
.cd-drc { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cd-drc > div { width: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 10px; border-radius: 18px; background: rgba(20, 34, 120, .4); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s; }
.cd-drc > div.on { border-color: var(--c-cyan); box-shadow: 0 0 40px -8px rgba(41, 235, 255, .7); }
.cd-drc .o { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); }
.cd-drc .o .ico { width: 30px; height: 30px; color: #fff; }
.cd-drc b { font: 800 24px/1 var(--f-display); }
.cd-drc small { font: 300 16px/1.3 var(--f-body); color: var(--ink-3); }
.cd-drc .ar { width: 34px; height: 3px; background: linear-gradient(90deg, transparent, var(--c-cyan)); position: relative; }
.cd-drc .ar::after { content: ''; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left-color: var(--c-cyan); border-right: 0; }
.cd-whscene { position: absolute; right: 140px; top: 170px; width: 860px; height: 780px; }
.cd-feed { position: absolute; left: 40px; right: 40px; top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; border-radius: 18px; overflow: hidden; }
.cd-feed > div { padding: 18px 22px; border-right: 1px solid var(--line); }
.cd-feed > div:last-child { border-right: 0; }
.cd-feed span { display: block; font: 600 14px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-feed b { display: block; margin-top: 8px; font: 800 24px/1.15 var(--f-display); transition: color .3s; }
.cd-feed b.flash { color: var(--c-cyan); }
.cd-whscene .cd-bb { bottom: 10px; width: 780px; margin-left: -390px; }
.cd-whscene .cd-scr { height: 400px; }
.cd-ver { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 0 46px; opacity: 0; transition: opacity .6s; }
.cd-ver .big { font: 900 104px/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.cd-ver .msg { font: 800 44px/1.05 var(--f-display); }
.cd-ver .msg em { font-style: normal; color: var(--c-cyan); }
.cd-ver .pic { width: 150px; height: 150px; }
.cd-ver.v0 { background: linear-gradient(135deg, #1488ea, #29ebff 140%); }
.cd-ver.v0 .msg em { color: var(--c-deep); }
.cd-ver.v1 { background: linear-gradient(135deg, #060f3d, #0700fa); }
.cd-ver.v2 { background: linear-gradient(135deg, #00478c, #1488ea); }
.cd-ver.v3 { background: linear-gradient(135deg, #0700fa, #1488ea); }
.cd-scr[data-v="0"] .v0, .cd-scr[data-v="1"] .v1, .cd-scr[data-v="2"] .v2, .cd-scr[data-v="3"] .v3 { opacity: 1; }
.cd-scr[data-v="0"] .v0 > *, .cd-scr[data-v="1"] .v1 > *, .cd-scr[data-v="2"] .v2 > *, .cd-scr[data-v="3"] .v3 > * { animation: cdIn .8s var(--ease) both; }
.cd-ver > *:nth-child(2) { animation-delay: .1s !important; } .cd-ver > *:nth-child(3) { animation-delay: .2s !important; }
@keyframes cdIn { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 03 · Agencias y media owners ---------- */
.cd-who { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 40px; align-items: center; margin-top: 60px; }
.cd-wcol { padding: 36px 36px 40px; border-radius: 24px; }
.cd-wcol .hd { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.cd-wcol .hd b { font: 800 34px/1.1 var(--f-display); }
.cd-wcol .checks li { font-size: 23px; }
.cd-whub { position: relative; width: 340px; height: 340px; }
.cd-whub .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(41, 235, 255, .45); animation: spin 22s linear infinite; }
.cd-whub .ring.b { inset: 30px; border: 2px solid rgba(20, 136, 234, .35); border-top-color: var(--c-cyan); animation-duration: 6s; }
.cd-whub .core { position: absolute; inset: 60px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #1488ea, #0700fa 70%); box-shadow: 0 0 80px -10px rgba(41, 235, 255, .7); }
.cd-whub .core .ico { width: 34px; height: 34px; color: var(--c-cyan); }
.cd-whub .core b { font: 900 70px/1 var(--f-display); font-variant-numeric: tabular-nums; margin-top: 4px; }
.cd-whub .core small { font: 400 16px/1.25 var(--f-body); color: rgba(255, 255, 255, .85); margin-top: 6px; }

/* ---------- Separadores ---------- */
.cd-schips { display: flex; gap: 18px; margin-top: 50px; flex-wrap: wrap; max-width: 1300px; }
.cd-schips > div { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 999px; background: rgba(20, 34, 120, .45); border: 1px solid var(--line-2); font: 600 24px/1 var(--f-display); }
.cd-schips .ico { width: 28px; height: 28px; color: var(--c-cyan); }
.cd-cubewrap { position: absolute; right: 300px; top: 300px; perspective: 1100px; }

/* ---------- 05 · Cuenta regresiva ---------- */
.cd-cdscr { display: flex; align-items: center; gap: 34px; padding: 0 44px; background: radial-gradient(120% 140% at 15% 50%, #1488ea, #0700fa 55%, #060f3d) !important; }
.cd-ball { flex: none; width: 170px; height: 170px; animation: cdSpinB 9s linear infinite; filter: drop-shadow(0 20px 30px rgba(0, 0, 30, .6)); }
.cd-ball svg { width: 100%; height: 100%; }
@keyframes cdSpinB { to { rotate: 360deg; } }
.cd-cdtxt { flex: 1; text-align: center; }
.cd-cdtxt small { font: 700 26px/1 var(--f-mono); letter-spacing: .4em; text-transform: uppercase; color: var(--c-cyan); }
.cd-cdtxt p { margin-top: 18px; font: 800 30px/1.1 var(--f-display); }
.cd-flip { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 16px; }
.cd-flip > i { font: 900 60px/110px var(--f-display); font-style: normal; color: var(--c-sky); }
.cd-flip > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-flip b { position: relative; width: 104px; height: 110px; border-radius: 12px; display: grid; place-items: center; font: 800 66px/1 var(--f-mono); color: var(--c-deep); background: linear-gradient(180deg, #fff 0 49%, #e4ecf9 51%); box-shadow: 0 14px 30px -10px rgba(0, 0, 30, .7); overflow: hidden; }
.cd-flip b::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(6, 15, 61, .35); }
.cd-flip b.fl { animation: cdFlip .5s var(--ease); }
@keyframes cdFlip { 0% { transform: perspective(300px) rotateX(0); } 45% { transform: perspective(300px) rotateX(-80deg); filter: brightness(.7); } 100% { transform: none; } }
.cd-flip span { font: 600 15px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-sky); }
.cd-tagr { position: absolute; top: 28px; right: 28px; z-index: 4; }

/* ---------- 06 · Casos de cuenta regresiva ---------- */
.cd-cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 40px; }
.cd-case { padding: 14px 14px 20px; border-radius: 22px; background: rgba(20, 34, 120, .38); border: 1px solid var(--line); cursor: pointer; pointer-events: auto; transition: border-color .3s, translate .3s; }
.cd-case:hover { border-color: var(--c-cyan); translate: 0 -6px; }
.cd-case .ph { position: relative; height: 380px; border-radius: 14px; overflow: hidden; background: #050a30; }
.cd-case .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.active .cd-case .ph img { animation: kenburns 16s ease-in-out infinite alternate; }
.cd-case .crop-coca img { inset: auto; left: -136px; top: -267px; width: 1177px; height: 662px; object-fit: fill; }
.cd-case .crop-enp img { inset: auto; left: -512px; top: -35px; width: 902px; height: 508px; object-fit: fill; }
.cd-case .tick { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 9px; background: rgba(6, 15, 61, .88); border: 1px solid rgba(41, 235, 255, .55); font: 700 17px/1 var(--f-mono); color: #fff; font-variant-numeric: tabular-nums; }
.cd-case .tick::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 8px var(--c-cyan); animation: pulse 1.2s infinite; }
.cd-case .play { position: absolute; right: 10px; top: 10px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); box-shadow: 0 0 24px rgba(41, 235, 255, .6); animation: vidPulse 2.4s ease-out infinite; }
.cd-case .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.cd-case b { display: block; margin-top: 16px; font: 800 26px/1.1 var(--f-display); }
.cd-case p { margin-top: 6px; font: 300 18px/1.35 var(--f-body); color: var(--ink-2); }
.cd-link { color: var(--c-cyan); text-decoration: none; font-weight: 500; pointer-events: auto; }
.cd-link:hover { text-decoration: underline; }

/* ---------- 07 · Fecha, día y hora ---------- */
.cd-rules { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }
.cd-rules > div { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: 14px; background: rgba(20, 34, 120, .38); border: 1px solid var(--line); transition: border-color .4s, background .4s, box-shadow .4s; }
.cd-rules em { width: 120px; font: 700 20px/1 var(--f-mono); font-style: normal; color: var(--c-cyan); }
.cd-rules span { font: 600 24px/1 var(--f-display); }
.cd-rules > div.on { border-color: var(--c-cyan); background: rgba(20, 136, 234, .28); box-shadow: 0 0 34px -8px rgba(41, 235, 255, .7); }
.cd-tscene { transition: background 1.2s; }
#cdTime[data-p="0"] .cd-tscene { background: linear-gradient(180deg, #1488ea, #8fc1ea 70%, #00478c); }
#cdTime[data-p="1"] .cd-tscene { background: linear-gradient(180deg, #29a3ff, #8fc1ea 70%, #00478c); }
#cdTime[data-p="2"] .cd-tscene { background: linear-gradient(180deg, #060f3d, #0700fa 60%, #1488ea); }
#cdTime[data-p="3"] .cd-tscene { background: linear-gradient(180deg, #060f3d, #0a1b6e 60%, #00478c); }
.cd-skyarc { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cd-skyarc i { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; left: var(--x, 50%); top: var(--y, 50%); transition: left 1s linear, top 1s linear, opacity .8s; }
.cd-skyarc .sun { background: radial-gradient(circle, #fff7c2, #ffd23f 60%); box-shadow: 0 0 80px 20px rgba(255, 210, 63, .45); }
.cd-skyarc .moon { background: radial-gradient(circle at 35% 35%, #fff, #8fc1ea); box-shadow: 0 0 60px 10px rgba(143, 193, 234, .4); opacity: 0; }
.cd-clockpill { position: absolute; left: 30px; top: 28px; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: 999px; }
.cd-clockpill .ico { width: 26px; height: 26px; color: var(--c-cyan); }
.cd-clockpill b { font: 800 28px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cd-clockpill b:first-of-type { color: var(--c-cyan); }
.cd-totem { position: absolute; left: 50%; bottom: 112px; width: 330px; margin-left: -165px; z-index: 3; }
.cd-totem .fr { padding: 16px 16px 40px; border-radius: 30px; background: linear-gradient(160deg, #c9d3ea, #7d87ab 45%, #3a4270); box-shadow: 0 50px 90px -30px #000, inset 0 2px 0 rgba(255, 255, 255, .6); }
.cd-totem .scr { position: relative; aspect-ratio: 9 / 15; border-radius: 14px; overflow: hidden; background: var(--c-deep); }
.cd-totem .leg { width: 70%; height: 22px; margin: 0 auto; border-radius: 0 0 10px 10px; background: #1b2150; }
.cd-tv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 24px; text-align: center; opacity: 0; transition: opacity .6s; }
.cd-tv small { font: 700 16px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.cd-tv b { font: 900 40px/1.02 var(--f-display); letter-spacing: -.02em; }
.cd-tv svg { width: 140px; height: 140px; }
.cd-tv em { padding: 8px 16px; border-radius: 999px; font: 700 18px/1 var(--f-display); font-style: normal; background: rgba(255, 255, 255, .92); color: var(--c-deep); }
.cd-tv.t0 { background: linear-gradient(180deg, #1488ea, #8fc1ea); }
.cd-tv.t1 { background: linear-gradient(180deg, #00478c, #29ebff); }
.cd-tv.t2 { background: linear-gradient(180deg, #060f3d, #0700fa); }
.cd-tv.t3 { background: linear-gradient(180deg, #0700fa, #1488ea); }
#tmScr[data-p="0"] .t0, #tmScr[data-p="1"] .t1, #tmScr[data-p="2"] .t2, #tmScr[data-p="3"] .t3 { opacity: 1; }
#tmScr[data-p="0"] .t0 > *, #tmScr[data-p="1"] .t1 > *, #tmScr[data-p="2"] .t2 > *, #tmScr[data-p="3"] .t3 > * { animation: cdIn .7s var(--ease) both; }
.cd-dayline { position: absolute; left: 60px; right: 60px; bottom: 14px; height: 30px; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; border-top: 3px solid rgba(143, 193, 234, .45); }
.cd-dayline span { font: 600 14px/1 var(--f-mono); color: var(--c-sky); translate: 0 -2px; }
.cd-dayline i { position: absolute; top: -11px; left: var(--p, 0%); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 16px var(--c-cyan); transition: left 1s linear; }

/* ---------- 08 · Clima por temperatura ---------- */
.cd-therm { width: 100%; padding: 24px 26px; border-radius: 20px; background: rgba(20, 34, 120, .4); border: 1px solid var(--line); }
.cd-therm .hd { display: flex; align-items: center; gap: 12px; }
.cd-therm .hd .ico { width: 30px; height: 30px; color: var(--c-cyan); }
.cd-therm .hd span { font: 600 16px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-therm .hd b { margin-left: auto; font: 900 52px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cd-therm .bar { position: relative; height: 16px; margin: 20px 0 14px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.cd-therm .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--t, 0%); border-radius: 8px; background: linear-gradient(90deg, #8fc1ea, #29ebff 35%, #ffcc66 70%, #ff5b73); background-size: 640px 100%; transition: width .9s var(--ease); }
.cd-therm .bar u { position: absolute; top: -8px; left: var(--t, 0%); width: 6px; height: 32px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px #fff; transition: left .9s var(--ease); }
.cd-therm .rg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-therm .rg span { padding: 10px 8px; border-radius: 12px; text-align: center; font: 400 15px/1.2 var(--f-body); color: var(--ink-3); border: 1px solid transparent; transition: all .4s; }
.cd-therm .rg b { display: block; font: 800 20px/1.1 var(--f-display); color: var(--ink-2); }
.cd-therm .rg span.on { border-color: var(--c-cyan); background: rgba(20, 136, 234, .28); color: #fff; }
.cd-therm .rg span.on b { color: #fff; }
.cd-sun { position: absolute; right: 70px; top: 60px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #fff7c2, #ffd23f 55%, transparent 72%); opacity: var(--sun, .2); scale: var(--sunS, .7); transition: opacity 1s, scale 1s; z-index: 0; }
.cd-tpscene { transition: background 1s; }
#cdTemp[data-r="0"] .cd-tpscene { background: linear-gradient(180deg, #00478c, #8fc1ea 80%); }
#cdTemp[data-r="1"] .cd-tpscene { background: linear-gradient(180deg, #1488ea, #8fc1ea 80%); }
#cdTemp[data-r="2"] .cd-tpscene { background: linear-gradient(180deg, #1488ea, #ffcc66 120%); }
#cdTemp[data-r="3"] .cd-tpscene { background: linear-gradient(180deg, #1488ea, #ff8a3d 120%); }
.cd-tpscr { transition: background .8s; }
.cd-tpscr[data-r="0"] { background: linear-gradient(180deg, #00478c, #8fc1ea); }
.cd-tpscr[data-r="1"] { background: linear-gradient(180deg, #1488ea, #29ebff); }
.cd-tpscr[data-r="2"] { background: linear-gradient(180deg, #1488ea, #ffcc66); }
.cd-tpscr[data-r="3"] { background: linear-gradient(180deg, #ff8a3d, #ffcc66); }
.cd-tbadge { position: absolute; left: 26px; top: 26px; z-index: 3; padding: 12px 18px; border-radius: 16px; background: #fff; color: var(--c-deep); text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 30, .6); }
.cd-tbadge small { display: block; font: 700 15px/1 var(--f-display); text-transform: uppercase; }
.cd-tbadge b { display: block; font: 900 58px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cd-tpv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 24px; padding: 0 26px 70px; text-align: center; opacity: 0; transition: opacity .6s; }
.cd-tpv b { font: 900 38px/1.05 var(--f-display); letter-spacing: -.02em; text-shadow: 0 4px 20px rgba(0, 0, 40, .35); }
.cd-tpv svg { width: 200px; height: 200px; order: -1; filter: drop-shadow(0 20px 30px rgba(0, 0, 40, .35)); }
.cd-tpscr[data-r="0"] .r0, .cd-tpscr[data-r="1"] .r1, .cd-tpscr[data-r="2"] .r2, .cd-tpscr[data-r="3"] .r3 { opacity: 1; }
.cd-tpscr[data-r="0"] .r0 > *, .cd-tpscr[data-r="1"] .r1 > *, .cd-tpscr[data-r="2"] .r2 > *, .cd-tpscr[data-r="3"] .r3 > * { animation: cdIn .7s var(--ease) both; }

/* ---------- 09 · Clima por estado ---------- */
.cd-wxchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: 8px; }
.cd-wxchips span { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px; background: rgba(20, 34, 120, .38); border: 1px solid var(--line); font: 600 21px/1 var(--f-display); transition: all .4s; }
.cd-wxchips svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--c-cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cd-wxchips span.on { border-color: var(--c-cyan); background: rgba(20, 136, 234, .3); box-shadow: 0 0 30px -8px rgba(41, 235, 255, .7); }
.cd-wxscene .wx-sky { position: absolute; inset: 0; transition: background 1s; background: linear-gradient(180deg, #1488ea, #8fc1ea); }
.cd-wxscene[data-w="1"] .wx-sky { background: linear-gradient(180deg, #4f6f9e, #8fc1ea); }
.cd-wxscene[data-w="2"] .wx-sky { background: linear-gradient(180deg, #5c7699, #a9c2dc); }
.cd-wxscene[data-w="3"] .wx-sky { background: linear-gradient(180deg, #060f3d, #00478c); }
.cd-wxscene[data-w="4"] .wx-sky { background: linear-gradient(180deg, #03071f, #0a1b6e); }
.cd-wxscene[data-w="5"] .wx-sky { background: linear-gradient(180deg, #2b4a78, #8fc1ea); }
.wx-sunb { position: absolute; right: 90px; top: 60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #fff7c2, #ffd23f 55%, transparent 72%); opacity: 0; transition: opacity 1s; }
.cd-wxscene[data-w="0"] .wx-sunb { opacity: 1; }
.wx-clouds { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.wx-clouds i { position: absolute; width: 260px; height: 80px; border-radius: 60px; background: rgba(230, 240, 255, .85); filter: blur(2px); animation: cdCloud 18s linear infinite; }
.wx-clouds i::before { content: ''; position: absolute; left: 50px; top: -44px; width: 130px; height: 110px; border-radius: 50%; background: inherit; }
.wx-clouds i:nth-child(1) { top: 70px; left: -60px; }
.wx-clouds i:nth-child(2) { top: 150px; left: 360px; scale: .8; animation-duration: 24s; }
.wx-clouds i:nth-child(3) { top: 40px; left: 640px; scale: .7; animation-duration: 30s; }
.cd-wxscene[data-w="1"] .wx-clouds, .cd-wxscene[data-w="3"] .wx-clouds, .cd-wxscene[data-w="4"] .wx-clouds { opacity: 1; }
.cd-wxscene[data-w="3"] .wx-clouds i, .cd-wxscene[data-w="4"] .wx-clouds i { background: rgba(40, 56, 110, .9); }
@keyframes cdCloud { from { translate: -80px 0; } to { translate: 180px 0; } }
.wx-flash { position: absolute; inset: 0; background: #e8f4ff; opacity: 0; pointer-events: none; z-index: 2; }
.cd-wxscene[data-w="4"] .wx-flash { animation: cdFlash 2.6s infinite; }
@keyframes cdFlash { 0%, 62%, 70%, 100% { opacity: 0; } 64% { opacity: .55; } 66% { opacity: .1; } 68% { opacity: .4; } }
.wx-rain, .wx-snow { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .8s; }
.wx-rain i { position: absolute; top: -40px; width: 2px; height: 34px; background: linear-gradient(transparent, rgba(200, 230, 255, .85)); animation: drop .9s linear infinite; rotate: 12deg; }
.wx-snow i { position: absolute; top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: cdSnow 5s linear infinite; }
@keyframes cdSnow { from { translate: 0 0; } to { translate: 40px 860px; } }
.cd-wxscene[data-w="3"] .wx-rain, .cd-wxscene[data-w="4"] .wx-rain, .cd-wxscene[data-w="5"] .wx-snow { opacity: 1; }
.wx-fog { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1s; background: repeating-linear-gradient(180deg, rgba(230, 240, 255, .0) 0 40px, rgba(230, 240, 255, .35) 70px, rgba(230, 240, 255, 0) 110px); animation: cdFog 8s ease-in-out infinite alternate; }
.cd-wxscene[data-w="2"] .wx-fog { opacity: 1; }
@keyframes cdFog { to { translate: 60px 0; } }
.cd-wxscene .cd-city .bd { fill: #0b1650; }
.cd-vick { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px; gap: 16px; background: radial-gradient(120% 80% at 50% 30%, #1f5b62, #0b2430 70%) !important; }
.cd-vick .vk { padding: 8px 16px; border-radius: 50% 50% 46% 46%; background: linear-gradient(180deg, #3bbf6a, #148a3e); font: 900 22px/1 var(--f-display); letter-spacing: .04em; }
.cd-vick b { min-height: 120px; display: grid; place-items: center; font: 900 36px/1.08 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cd-vick b.sw { animation: cdIn .7s var(--ease) both; }
.cd-vick small { font: 500 17px/1.35 var(--f-body); color: rgba(255, 255, 255, .85); text-transform: uppercase; letter-spacing: .04em; }
.cd-vick .mug { width: 220px; margin-top: auto; }
.cd-vick .mug .st { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; opacity: .7; animation: cdSteam 2.4s ease-in-out infinite; }
@keyframes cdSteam { 0% { opacity: 0; translate: 0 6px; } 50% { opacity: .8; } 100% { opacity: 0; translate: 0 -10px; } }
.cd-wxlbl { position: absolute; left: 26px; top: 26px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 999px; }
.cd-wxlbl #wxIco svg { width: 30px; height: 30px; fill: none; stroke: var(--c-cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.cd-wxlbl b { font: 800 26px/1 var(--f-display); }
.cd-wxlbl em { font: 700 24px/1 var(--f-mono); font-style: normal; color: var(--c-cyan); }

/* ---------- 10 · Studio ---------- */
.cd-swin { position: absolute; left: 140px; top: 280px; width: 1150px; }
.cd-swin .win-body { padding: 24px 26px 26px; }
.cd-tabs { display: flex; gap: 6px; }
.cd-tabs i { font-style: normal; padding: 8px 16px; border-radius: 8px; color: var(--ink-3); }
.cd-tabs i.on { background: rgba(20, 136, 234, .35); color: #fff; }
.cd-stmode { display: flex; gap: 10px; }
.cd-stmode span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line); font: 600 19px/1 var(--f-display); color: var(--ink-2); transition: all .4s; }
.cd-stmode span .ico { width: 22px; height: 22px; color: var(--c-cyan); }
.cd-stmode span.on { background: rgba(20, 136, 234, .35); border-color: var(--c-cyan); color: #fff; }
.cd-stcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; transition: opacity .4s; }
.cd-stcards .c { padding: 10px 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s; }
.cd-stcards .c.on { border-color: var(--c-cyan); box-shadow: 0 0 34px -8px rgba(41, 235, 255, .7); }
.cd-stcards .pv { position: relative; height: 150px; border-radius: 10px; background: var(--g); display: grid; place-items: center; overflow: hidden; }
.cd-stcards .pv svg { height: 110px; filter: drop-shadow(0 10px 14px rgba(0, 0, 30, .4)); }
.cd-stcards .pv .snow { position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 22px 22px; animation: cdSnowBg 3s linear infinite; }
@keyframes cdSnowBg { to { background-position: 10px 22px; } }
.cd-stcards .pv .moon { position: absolute; right: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; box-shadow: -7px 5px 0 0 #fff7c2; }
.cd-stcards label { display: block; margin-top: 10px; font: 600 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cd-stcards label span { display: flex; align-items: center; height: 40px; margin-top: 6px; padding: 0 12px; border-radius: 8px; background: rgba(4, 8, 40, .6); border: 1px solid var(--line); font: 600 20px/1 var(--f-mono); color: #fff; letter-spacing: 0; text-transform: none; }
.cd-stcards label span.in::after { content: ''; width: 2px; height: 22px; margin-left: 3px; background: var(--c-cyan); animation: blink 1s steps(1) infinite; }
.cd-stdrop { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; opacity: .45; transition: opacity .4s; }
.cd-stdrop span { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); font: 500 17px/1 var(--f-body); color: var(--ink-2); transition: all .3s; }
.cd-stdrop span.on { background: rgba(20, 136, 234, .4); border-color: var(--c-cyan); color: #fff; }
#cdStudio[data-m="w"] .cd-stdrop { opacity: 1; }
#cdStudio[data-m="w"] .cd-stcards { opacity: .45; }
.cd-stsave { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.cd-ok { display: inline-flex; align-items: center; gap: 8px; font: 600 18px/1 var(--f-body); color: var(--ok); opacity: 0; transition: opacity .4s; }
.cd-ok .ico { width: 22px; height: 22px; }
.cd-ok.on { opacity: 1; }
.cd-stprev { position: absolute; left: 1340px; top: 280px; width: 440px; display: flex; flex-direction: column; gap: 16px; }
.cd-stprev > small { font: 600 15px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-stscr { position: relative; height: 300px; border-radius: 12px; overflow: hidden; border: 12px solid #11163a; box-shadow: 0 0 0 2px #2b3a80, 0 0 60px -14px rgba(41, 235, 255, .5); display: flex; align-items: center; justify-content: center; gap: 30px; }
.cd-stscr .sky { position: absolute; inset: 0; background: var(--g, linear-gradient(160deg, #8fc1ea, #29ebff)); transition: background .8s; }
.cd-stscr svg { position: relative; height: 180px; }
.cd-stscr b { position: relative; font: 900 80px/1 var(--f-display); color: #fff; text-shadow: 0 6px 24px rgba(0, 0, 40, .4); }
.cd-stscr em { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 800 24px/1 var(--f-display); font-style: normal; color: #fff; }
.cd-stmeta { display: flex; align-items: center; justify-content: space-between; }
.cd-stmeta b { font: 700 20px/1 var(--f-mono); }

/* ---------- 12 · Noticias ---------- */
.cd-news { background: #1488ea !important; }
.cd-news .nh { position: relative; height: 96px; display: flex; align-items: center; gap: 20px; padding: 0 28px; background: #00478c; }
.cd-news .lg { display: flex; align-items: center; gap: 10px; font: 300 24px/1 var(--f-display); letter-spacing: .06em; }
.cd-news .lg svg { width: 36px; height: 36px; color: #fff; fill: currentColor; }
.cd-news .tt { flex: 1; text-align: center; }
.cd-news .tt b { display: block; font: 800 34px/1 var(--f-display); }
.cd-news .tt small { display: block; margin-top: 6px; font: 400 16px/1 var(--f-body); color: rgba(255, 255, 255, .85); }
.cd-news .ck { font: 800 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cd-news .pg { position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p, 0%); background: var(--c-cyan); box-shadow: 0 0 12px var(--c-cyan); }
.cd-news .nb { padding: 34px 40px; }
.cd-news .cat { display: inline-block; padding: 7px 14px 7px 12px; border-left: 6px solid var(--c-cyan); border-radius: 4px; background: #fff; color: var(--c-deep); font: 600 17px/1 var(--f-body); }
.cd-news h4 { margin-top: 18px; min-height: 92px; font: 800 38px/1.18 var(--f-display); letter-spacing: -.01em; }
.cd-news p { margin-top: 12px; font: 300 22px/1.4 var(--f-body); color: rgba(255, 255, 255, .92); opacity: 0; transition: opacity .6s; }
.cd-news p.on { opacity: 1; }

/* ---------- 13 · Cotizaciones ---------- */
.cd-fx { display: flex; flex-direction: column; }
.cd-fx .ad { flex: 1; display: flex; align-items: center; gap: 40px; padding: 0 50px; background: linear-gradient(120deg, #0700fa, #1488ea 70%, #29ebff 140%); }
.cd-mega { width: 220px; animation: cdShout 1.6s ease-in-out infinite; transform-origin: 30% 60%; }
.cd-mega svg { width: 100%; display: block; }
@keyframes cdShout { 0%, 100% { rotate: -4deg; } 50% { rotate: 3deg; scale: 1.04; } }
.cd-fx .ad b { font: 900 52px/1.04 var(--f-display); letter-spacing: -.02em; }
.cd-fx .ad b span { color: var(--c-cyan); }
.cd-fx .zh { display: flex; justify-content: space-between; padding: 10px 40px; margin: 0 70px; border-radius: 14px 14px 0 0; background: #00478c; font: 500 17px/1 var(--f-body); }
.cd-fx .zc { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 30px 18px; background: #fff; color: var(--c-deep); }
.cd-fx .zc > div { position: relative; padding: 0 10px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 10px; }
.cd-fx .zc > div > small { grid-column: 1; grid-row: 1; } .cd-fx .zc > div > b { grid-column: 1 / 3; grid-row: 2; }
.cd-fx .zc small { display: block; font: 500 17px/1 var(--f-body); color: #4a5a85; }
.cd-fx .zc b { display: block; margin-top: 6px; font: 800 26px/1 var(--f-display); font-variant-numeric: tabular-nums; transition: color .3s; }
.cd-fx .zc i { grid-column: 2; grid-row: 1; width: 0; height: 0; border: 7px solid transparent; }
.cd-fx .zc .up i { border-bottom: 12px solid #18a864; border-top: 0; }
.cd-fx .zc .dn i { border-top: 12px solid #e8344f; border-bottom: 0; }
.cd-fx .zc .up b { color: #0a8a52; } .cd-fx .zc .dn b { color: #c4223b; }

/* ---------- 14 · Tiendas cercanas ---------- */
.cd-map { position: absolute; left: 140px; top: 370px; width: 760px; height: 560px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 100px -40px #000; }
.cd-map svg { display: block; }
.cd-map .blocks rect { fill: #13246f; }
.cd-map .park { fill: #0f4b5a; opacity: .8; }
.cd-map .road { fill: none; stroke: #2a3c8f; stroke-width: 18; }
.cd-map .road.sm { stroke-width: 9; stroke: #22327c; }
.cd-map .route { fill: none; stroke: var(--c-cyan); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; filter: drop-shadow(0 0 8px rgba(41, 235, 255, .8)); }
.cd-map .walker { fill: #fff; filter: drop-shadow(0 0 8px #fff); }
.cd-mpin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.cd-mpin .ico { width: 52px; height: 52px; padding: 11px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 10px 24px rgba(0, 0, 30, .6); }
.cd-mpin.store .ico { background: #e41e2b; }
.cd-mpin span { padding: 4px 10px; border-radius: 6px; background: rgba(6, 15, 61, .85); font: 600 15px/1 var(--f-mono); }
.cd-mpin.store::after { content: ''; position: absolute; left: 50%; top: 26px; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 2px solid #ff5b73; animation: ping 1.8s ease-out infinite; }
.cd-mdist { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 14px 20px; border-radius: 16px; text-align: right; }
.cd-mdist small { display: block; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-mdist b { display: block; margin-top: 6px; font: 900 44px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--c-cyan); }
.cd-shelter { position: absolute; left: 960px; top: 370px; width: 820px; height: 560px; }
.cd-shelter .roof { height: 30px; margin: 0 -10px; border-radius: 6px; background: linear-gradient(180deg, #2c3878, #141a44); box-shadow: 0 16px 30px -10px #000; }
.cd-shelter .cd-scr { height: 400px; margin: 18px 30px 0; }
.cd-shelter .legs { display: flex; justify-content: space-between; padding: 0 30px; }
.cd-shelter .legs i { width: 16px; height: 90px; background: linear-gradient(90deg, #141a44, #2c3878, #141a44); }
.cd-studio { position: absolute; left: 50%; translate: -50% 0; bottom: 40px; z-index: 7; background: rgba(6, 15, 61, .85); white-space: nowrap; }
.cd-coke { background: radial-gradient(120% 120% at 30% 40%, #f0333f, #b3121d) !important; }
.cd-coke .wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.cd-coke .tx { position: absolute; left: 50px; top: 60px; }
.cd-coke .brand, .cd-cokebb .brand, .cd-ph .brand { font: italic 900 40px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; color: #fff; }
.cd-coke .tx b { display: block; margin-top: 24px; font: 900 46px/1.06 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cd-coke .tx b em { font-style: normal; display: inline-block; padding: 0 12px; border-radius: 10px; background: #fff; color: #c4161f; font-variant-numeric: tabular-nums; }
.cd-coke .bottle { position: absolute; right: 50px; top: 24px; height: 300px; filter: drop-shadow(0 20px 30px rgba(60, 0, 0, .5)); animation: floaty 5s ease-in-out infinite; }

/* ---------- 15 · Tiendas cercanas · configuración ---------- */
.cd-nwin { position: absolute; left: 140px; top: 330px; width: 760px; }
.cd-nwin .win-body { padding: 22px 26px 26px; }
.cd-nwin h5 { font: 700 18px/1 var(--f-display); margin: 6px 0 12px; }
.cd-nwin h5 + .cd-frow + h5 { margin-top: 24px; }
.cd-frow { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 14px; border-radius: 12px; background: rgba(20, 136, 234, .12); }
.cd-frow .f small { display: block; font: 600 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.cd-frow .f i { display: flex; align-items: center; height: 44px; margin-top: 8px; padding: 0 12px; border-radius: 8px; background: rgba(4, 8, 40, .6); border: 1px solid var(--line); font: 500 19px/1 var(--f-mono); font-style: normal; white-space: nowrap; overflow: hidden; }
.cd-fbtm { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.cd-addl { font: 500 18px/1 var(--f-body); color: var(--ink-3); }
.cd-n2screens { position: absolute; left: 960px; top: 330px; width: 820px; height: 600px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.cd-n2 { position: relative; display: flex; flex-direction: column; align-items: center; }
.cd-n2 .cd-scr { border-width: 10px; height: auto; }
.cd-n2 .lbl { margin-top: 14px; font: 600 15px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.cd-n2.tot .cd-scr { width: 200px; height: 360px; border-color: #e4e9f5; border-width: 12px; border-radius: 14px; }
.cd-n2.tot::after { content: ''; display: block; width: 220px; height: 20px; margin-top: 6px; border-radius: 6px; background: #8a93b8; order: 1; }
.cd-n2.ev .cd-scr { width: 200px; height: 330px; border-color: #9aa3c4; border-width: 18px 18px 60px; border-radius: 30px 30px 60px 60px; }
.cd-n2.bbd .cd-scr { width: 330px; height: 190px; }
.cd-n2.bbd .pole { width: 26px; height: 200px; background: linear-gradient(90deg, #141a44, #2c3878, #141a44); }
.cd-n2 .lbl { order: 2; }
.cd-cool { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; background: linear-gradient(170deg, #3b2a20, #7a4c2c 60%, #c98b5a); }
.cd-cool small { font: italic 700 26px/1 Georgia, serif; color: #fff; }
.cd-cool b { font: 900 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.cd-cool svg { width: 80px; height: 140px; }
.cd-cool em { padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--c-deep); font: 900 22px/1 var(--f-display); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-cool.h { flex-direction: row; justify-content: space-around; }
.cd-cool.h > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cd-cool.h svg { width: 60px; height: 110px; }
.cd-n2.lit .cd-scr { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 60px -6px rgba(41, 235, 255, .8); }

/* ---------- 16 · Resultados en vivo ---------- */
.cd-scscene { background: linear-gradient(180deg, #0a1552, #060f3d) !important; }
.cd-mall { position: absolute; inset: 0; pointer-events: none; }
.cd-mall i { position: absolute; left: 0; right: 0; height: 4px; background: rgba(143, 193, 234, .25); }
.cd-mall i:nth-child(1) { top: 610px; } .cd-mall i:nth-child(2) { top: 680px; } .cd-mall i:nth-child(3) { top: 740px; }
.cd-mall::before, .cd-mall::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; background: linear-gradient(90deg, #0d1d66, #1a2c80, #0d1d66); }
.cd-mall::before { left: 40px; } .cd-mall::after { right: 40px; }
.cd-led { position: absolute; left: 60px; right: 60px; top: 60px; height: 470px; border-radius: 8px; overflow: hidden; border: 14px solid #10142e; box-shadow: 0 0 0 2px #2b3a80, 0 0 90px -10px rgba(41, 235, 255, .55); background: linear-gradient(135deg, #1488ea, #0700fa 70%); z-index: 2; }
.cd-led::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 4px); }
.cd-ledpost { position: absolute; left: 50%; top: 544px; width: 18px; height: 70px; margin-left: -9px; background: #1b2150; z-index: 1; }
.cd-sb { position: absolute; left: 30px; top: 30px; z-index: 3; width: 210px; padding: 14px; border-radius: 16px; background: rgba(6, 15, 61, .85); border: 2px solid rgba(255, 210, 63, .7); }
.cd-sb .tm { display: flex; align-items: center; gap: 10px; }
.cd-sb .fl { width: 40px; height: 28px; border-radius: 4px; flex: none; }
.cd-sb .fl.arg { background: linear-gradient(180deg, #8fc1ea 0 33%, #fff 33% 66%, #8fc1ea 66%); }
.cd-sb .fl.bra { background: radial-gradient(circle, #1a3c8f 0 6px, transparent 7px), linear-gradient(135deg, transparent 0 20%, #ffd23f 20% 80%, transparent 80%), #19a05a; }
.cd-sb .tm b { font: 800 22px/1 var(--f-display); }
.cd-sb .tm em { margin-left: auto; font: 900 46px/1 var(--f-display); font-style: normal; font-variant-numeric: tabular-nums; }
.cd-sb .tm em.bump { animation: popIn .6s var(--ease-back); color: #ffd23f; }
.cd-sb .mn { margin: 8px 0; padding: 6px; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, .1); font: 700 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cd-ledmsg { position: absolute; right: 36px; top: 40px; z-index: 3; text-align: right; }
.cd-ledmsg small { display: block; font: 800 34px/1 var(--f-display); color: #ffd23f; text-transform: uppercase; }
.cd-ledmsg b { display: block; margin-top: 6px; font: 900 44px/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.cd-ledmsg span { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .2); font: 700 22px/1 var(--f-display); }
.cd-fans { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 2; background:
  radial-gradient(circle at 50% 40%, #060f3d 26px, transparent 27px) 0 0 / 90px 120px repeat-x,
  radial-gradient(ellipse at 50% 100%, #060f3d 44px, transparent 45px) 0 70px / 90px 120px repeat-x,
  radial-gradient(circle at 50% 40%, #0a1b6e 24px, transparent 25px) 45px 50px / 90px 140px repeat-x,
  radial-gradient(ellipse at 50% 100%, #0a1b6e 40px, transparent 41px) 45px 110px / 90px 80px repeat-x; animation: cdCrowd 1.2s ease-in-out infinite alternate; }
@keyframes cdCrowd { to { translate: 0 -8px; } }
.cd-led.goal .cd-fans { animation-duration: .25s; }
.cd-goal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font: 900 150px/1 var(--f-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 0 40px rgba(41, 235, 255, .9), 0 10px 0 #0700fa; opacity: 0; scale: .4; pointer-events: none; }
.cd-led.goal .cd-goal { animation: cdGoal 1.8s var(--ease-back) both; }
@keyframes cdGoal { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; scale: 1.08; } 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.2; } }
.cd-confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cd-confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 2px; opacity: 0; }
.cd-led.goal .cd-confetti i { animation: cdConf 1.8s ease-in both; animation-delay: var(--dl); }
@keyframes cdConf { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0; translate: var(--dx) 520px; rotate: 540deg; } }
.cd-scscene .cd-brand { z-index: 6; }

/* ---------- 17 · Swift ---------- */
.cd-swrail { position: absolute; left: 330px; right: 330px; top: 430px; height: 4px; border-radius: 2px; background: rgba(143, 193, 234, .25); }
.cd-swrail i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, var(--c-blue), var(--c-cyan)); box-shadow: 0 0 14px var(--c-cyan); transition: width 1.2s var(--ease); }
.cd-sw3 { position: absolute; left: 140px; right: 140px; top: 410px; display: grid; grid-template-columns: repeat(3, 1fr); }
.cd-sw3 > div { display: flex; flex-direction: column; align-items: center; gap: 22px; transition: opacity .6s, filter .6s; opacity: .4; filter: saturate(.4); }
.cd-sw3 > div.on { opacity: 1; filter: none; }
.cd-sw3 .st { position: relative; padding: 10px 22px; border-radius: 10px; background: #0a1552; border: 1px solid var(--line-2); font: 800 22px/1 var(--f-display); }
.cd-sw3 > div.on .st { background: var(--c-cyan); color: var(--c-deep); border-color: var(--c-cyan); box-shadow: 0 0 30px -4px rgba(41, 235, 255, .8); }
.cd-swmupi { width: 290px; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, #c9d3ea, #5d6790); box-shadow: 0 30px 60px -20px #000; }
.cd-swmupi .scr { position: relative; height: 440px; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #8fc1ea, #5fa8e0); padding: 30px 20px; text-align: center; }
.cd-swmupi .scr::before { content: ''; position: absolute; left: 50%; top: 150px; width: 220px; height: 220px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); }
.cd-swmupi b { position: relative; z-index: 2; display: block; font: 900 33px/1.02 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; text-shadow: 0 3px 0 #00478c; }
.cd-swmupi b.sw2 { animation: cdIn .6s var(--ease) both; }
.cd-swmupi .bgr { position: absolute; left: 50%; bottom: 58px; width: 190px; height: 190px; margin-left: -95px; filter: drop-shadow(0 14px 20px rgba(0, 30, 80, .5)); animation: floaty 5s ease-in-out infinite; }
.cd-swmupi .sw { position: absolute; right: 16px; bottom: 44px; padding: 6px 14px; border-radius: 40% 50% 40% 50%; background: #e41e2b; font: italic 900 26px/1 var(--f-display); color: #fff; box-shadow: 0 0 0 3px #fff; rotate: -6deg; }
.cd-swmupi small { position: absolute; right: 16px; bottom: 14px; font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.cd-swmupi .sc { position: absolute; z-index: 2; left: 50%; top: 158px; translate: -50% 0; padding: 6px 14px; border-radius: 8px; background: #060f3d; font: 800 20px/1 var(--f-mono); font-style: normal; color: #fff; white-space: nowrap; }

/* ---------- 18 · Lógica Swift ---------- */
.cd-tree { position: absolute; left: 140px; top: 290px; width: 1160px; display: flex; flex-direction: column; gap: 18px; }
.cd-tree .row { display: grid; grid-template-columns: 190px 1fr 1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.cd-tree .ph { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(20, 34, 120, .45); border: 1px solid var(--line); transition: all .4s; }
.cd-tree .ph .ico { width: 30px; height: 30px; color: var(--c-cyan); }
.cd-tree .ph b { font: 800 24px/1 var(--f-display); }
.cd-tree .ph small { font: 400 15px/1.2 var(--f-body); color: var(--ink-3); }
.cd-tree .row.on .ph { border-color: var(--c-cyan); background: rgba(20, 136, 234, .3); }
.cd-tree .nd { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-top: 4px solid var(--c-sky); transition: all .45s var(--ease); }
.cd-tree .nd.ok { border-top-color: var(--ok); } .cd-tree .nd.warn { border-top-color: var(--warn); } .cd-tree .nd.bad { border-top-color: var(--danger); }
.cd-tree .nd b { font: 800 20px/1.1 var(--f-display); }
.cd-tree .nd small { font: 600 14px/1 var(--f-mono); color: var(--ink-3); }
.cd-tree .nd em { margin-top: 4px; font: 600 17px/1.25 var(--f-body); color: var(--c-sky); }
.cd-tree .nd.on { background: rgba(20, 136, 234, .35); border-color: var(--c-cyan); box-shadow: 0 0 40px -8px rgba(41, 235, 255, .8); translate: 0 -4px; }
.cd-tree .nd.on em { color: #fff; }
.cd-tree .nd.on::after { content: '● Activa'; position: absolute; right: 12px; top: 12px; font: 700 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--c-cyan); text-transform: uppercase; }
.cd-lgside { position: absolute; left: 1360px; top: 290px; width: 420px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cd-lgsc { width: 100%; padding: 16px 20px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cd-lgsc .sc { display: flex; align-items: center; gap: 16px; }
.cd-lgsc .sc b { font: 800 24px/1 var(--f-display); color: var(--ink-2); }
.cd-lgsc .sc em { font: 900 54px/1 var(--f-display); font-style: normal; font-variant-numeric: tabular-nums; }
.cd-lgsc .sc em.bump { animation: popIn .6s var(--ease-back); color: var(--c-cyan); }
.cd-lgsc .sc i { font: 300 40px/1 var(--f-display); color: var(--ink-3); font-style: normal; }
.cd-lgsc small { font: 600 16px/1 var(--f-mono); color: var(--ink-3); }
.cd-swmupi.big { width: 300px; }
.cd-swmupi.big .scr { height: 450px; }

/* ---------- 20 · Redes sociales ---------- */
.cd-socs { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 10px; }
.cd-socs > div { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 18px; background: rgba(20, 34, 120, .4); border: 1px solid var(--line); transition: border-color .4s, background .4s, box-shadow .4s; }
.cd-socs > div[data-video] { cursor: pointer; pointer-events: auto; }
.cd-socs > div.on { border-color: var(--c-cyan); background: rgba(20, 136, 234, .28); box-shadow: 0 0 40px -10px rgba(41, 235, 255, .8); }
.cd-socs .o { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); font: 800 30px/1 var(--f-display); color: #fff; }
.cd-socs .o .ico { width: 32px; height: 32px; }
.cd-socs b { display: block; font: 800 26px/1.1 var(--f-display); }
.cd-socs p { margin-top: 6px; font: 300 19px/1.35 var(--f-body); color: var(--ink-2); }
.cd-socs p em { font-style: normal; font-weight: 600; color: var(--c-cyan); }
.cd-socs .pl { margin-left: auto; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(41, 235, 255, .6); }
.cd-socs .pl svg { width: 16px; height: 16px; fill: var(--c-cyan); margin-left: 3px; }
.cd-soc .m { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.cd-soc[data-m="0"] .m0, .cd-soc[data-m="1"] .m1, .cd-soc[data-m="2"] .m2 { opacity: 1; }
.cd-soc .m0 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.cd-soc .m0 .lv { position: absolute; left: 22px; top: 22px; padding: 8px 14px; border-radius: 8px; background: #e8344f; font: 800 18px/1 var(--f-mono); letter-spacing: .08em; animation: pulse 1.4s infinite; }
.cd-soc .m0 .vw { position: absolute; right: 22px; top: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: rgba(6, 15, 61, .8); font: 700 18px/1 var(--f-mono); }
.cd-soc .m0 .vw .ico { width: 20px; height: 20px; }
.cd-soc .m1 { background: linear-gradient(135deg, #0700fa, #00478c); padding: 26px 30px; }
.cd-soc .fbh b { display: block; font: 900 34px/1 var(--f-display); text-transform: uppercase; }
.cd-soc .fbh small { display: block; margin-top: 6px; font: 600 15px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-cyan); }
.cd-soc .fbl { margin-top: 18px; width: 470px; display: flex; flex-direction: column; gap: 10px; }
.cd-soc .fbl > div { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--c-deep); animation: cdIn .6s var(--ease) both; }
.cd-soc .fbl i { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--c-sky), var(--c-blue)); }
.cd-soc .fbl b { display: block; font: 700 16px/1.1 var(--f-display); }
.cd-soc .fbl span { display: block; margin-top: 3px; font: 400 16px/1.3 var(--f-body); }
.cd-soc .tigo { position: absolute; right: 24px; bottom: 24px; width: 250px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 20px 40px -10px #000; }
.cd-soc .m2 { display: flex; flex-direction: column; }
.cd-soc .xad { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: linear-gradient(120deg, #1488ea, #29ebff 130%); }
.cd-soc .xad b { font: 900 70px/1 var(--f-display); letter-spacing: -.03em; }
.cd-soc .xad span { padding: 8px 14px; border: 2px solid #fff; border-radius: 8px; font: 800 20px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.cd-soc .xz { height: 190px; padding: 16px 24px; background: #060f3d; }
.cd-soc .xz > small { font: 800 18px/1 var(--f-display); font-style: italic; color: var(--c-cyan); }
.cd-soc .xl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.cd-soc .xl > div { padding: 12px 14px; border-radius: 12px; background: #13246f; border: 1px solid var(--line-2); animation: cdIn .6s var(--ease) both; }
.cd-soc .xl b { font: 600 15px/1 var(--f-mono); color: var(--c-sky); }
.cd-soc .xl em { float: right; font: 400 13px/1 var(--f-mono); font-style: normal; color: var(--ink-3); }
.cd-soc .xl span { display: block; margin-top: 8px; font: 400 17px/1.3 var(--f-body); }

/* ---------- 21 · QR ---------- */
.cd-qsteps { position: absolute; left: 140px; right: 140px; top: 280px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cd-qsteps > div { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: 16px; background: rgba(20, 34, 120, .4); border: 1px solid var(--line); transition: all .4s; }
.cd-qsteps span { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 22px/1 var(--f-display); background: rgba(255, 255, 255, .1); transition: background .4s; }
.cd-qsteps b { font: 800 22px/1.1 var(--f-display); }
.cd-qsteps small { font: 300 16px/1.3 var(--f-body); color: var(--ink-2); }
.cd-qsteps > div.on { border-color: var(--c-cyan); background: rgba(20, 136, 234, .3); box-shadow: 0 0 34px -8px rgba(41, 235, 255, .8); }
.cd-qsteps > div.on span { background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); }
.cd-qscene { position: absolute; left: 140px; right: 140px; top: 400px; height: 550px; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #060f3d, #0a1b6e 70%, #00478c); border: 1px solid rgba(143, 193, 234, .2); }
.cd-qscene .cd-city { bottom: 0; height: 300px; }
.cd-bb.qbb { left: auto; right: 70px; margin-left: 0; width: 900px; bottom: 20px; }
.cd-bb.qbb .cd-scr { height: 380px; }
.cd-bb.qbb .cd-poles i { height: 110px; }
.cd-cokebb { background: radial-gradient(130% 130% at 30% 40%, #f0333f, #a90f19) !important; }
.cd-cokebb .tx { position: absolute; left: 50px; top: 46px; display: flex; flex-direction: column; gap: 6px; }
.cd-cokebb .tx small { font: 800 30px/1 var(--f-display); text-transform: uppercase; }
.cd-cokebb .tx .brand { font-size: 56px; }
.cd-cokebb .tx b { font: 900 84px/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.cd-cokebb .tx b.sw2 { animation: cdIn .7s var(--ease-back) both; }
.cd-cokebb .tx em { margin-top: 8px; font: 600 18px/1 var(--f-mono); font-style: normal; opacity: .85; }
.cd-cokebb .bottle { position: absolute; left: 520px; top: 20px; height: 330px; filter: drop-shadow(0 20px 30px rgba(60, 0, 0, .5)); }
.cd-cokebb .blbl { position: absolute; left: 532px; top: 207px; width: 100px; text-align: center; font: 900 17px/1 var(--f-display); text-transform: uppercase; color: #fff; }
.cd-cokebb .qr, .cd-gtotem .qr { position: absolute; right: 34px; top: 50%; translate: 0 -50%; padding: 12px; border-radius: 12px; background: #fff; text-align: center; }
.cd-cokebb .qr i, .cd-gtotem .qr i { display: grid; grid-template-columns: repeat(15, 1fr); width: 140px; height: 140px; }
.cd-cokebb .qr i b, .cd-gtotem .qr i b { background: #060f3d; }
.cd-cokebb .qr small, .cd-gtotem .qr small { display: block; margin-top: 8px; font: 800 13px/1 var(--f-display); text-transform: uppercase; color: #c4161f; }
.cd-hand.q { left: 110px; bottom: -120px; rotate: -6deg; }
.cd-qscene .cd-hand { left: 90px; bottom: -110px; rotate: -6deg; }
.cd-qscene .cd-ph { height: 520px; }
.cd-qscene[data-s="0"] .p0, .cd-qscene[data-s="1"] .p1, .cd-qscene[data-s="2"] .p2, .cd-qscene[data-s="3"] .p3 { opacity: 1; translate: 0 0; }
.cd-ph .p0 { background: #1a1a1a; color: #fff; }
.cd-ph .cam { position: relative; width: 160px; height: 160px; border-radius: 10px; background: repeating-conic-gradient(#fff 0 25%, #1a1a1a 0 50%) 0 0 / 24px 24px; opacity: .9; }
.cd-ph .cam::before { content: ''; position: absolute; inset: -14px; border: 4px solid var(--c-cyan); border-radius: 16px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.cd-ph .cam u { position: absolute; left: -8px; right: -8px; top: 0; height: 3px; background: var(--c-cyan); box-shadow: 0 0 12px var(--c-cyan); animation: scanY 1.6s ease-in-out infinite alternate; }
.cd-ph .p0 small { font: 600 16px/1 var(--f-mono); }
.cd-ph .p1 { background: linear-gradient(180deg, #e41e2b 0 34%, #fff 34%); color: var(--c-deep); justify-content: flex-start; padding-top: 60px; }
.cd-ph .p1 .brand { font-size: 32px; }
.cd-ph .p1 b { margin-top: 2px; color: #fff; font: 800 18px/1.15 var(--f-display); }
.cd-ph .p1 label { margin-top: 40px; font: 600 14px/1 var(--f-body); color: #4a5a85; }
.cd-ph .p1 .in { width: 100%; height: 42px; border-radius: 8px; border: 2px solid #c9d3ea; display: flex; align-items: center; padding: 0 12px; font: 700 18px/1 var(--f-mono); font-style: normal; color: var(--c-deep); text-transform: uppercase; }
.cd-ph .p1 .in::after { content: ''; width: 2px; height: 20px; margin-left: 2px; background: #e41e2b; animation: blink 1s steps(1) infinite; }
.cd-ph .p2 { background: #fff; color: var(--c-deep); }
.cd-ph .p2 .ico { width: 70px; height: 70px; color: #18a864; }
.cd-ph .p2 b { font: 900 30px/1 var(--f-display); }
.cd-ph .p2 small { font: 400 16px/1 var(--f-body); color: #4a5a85; }
.cd-ph .p3 { background: #f2f5fb; padding: 46px 12px 20px; }
.cd-ph .post { width: 100%; border-radius: 12px; background: #fff; color: var(--c-deep); overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 40, .15); text-align: left; }
.cd-ph .post .u { display: flex; align-items: center; gap: 8px; padding: 10px; }
.cd-ph .post .u i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ffd23f, #e41e2b); }
.cd-ph .post .u b { font: 700 14px/1 var(--f-body); }
.cd-ph .post .pic { height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 40%, #f0333f, #a90f19); color: #fff; }
.cd-ph .post .pic .brand { font-size: 28px; }
.cd-ph .post .pic b { font: 900 34px/1 var(--f-display); }
.cd-ph .post .lk { padding: 10px; font: 500 13px/1.3 var(--f-body); color: #4a5a85; }
.cd-ph .post .lk b { color: #e41e2b; }

/* ---------- 22 · Juegos ---------- */
.cd-gscene { background: linear-gradient(180deg, #0a1552, #060f3d) !important; }
.cd-gtotem { position: absolute; left: 110px; top: 40px; width: 380px; z-index: 2; }
.cd-gtotem > .scr { position: relative; height: 640px; border-radius: 16px; overflow: hidden; border: 16px solid #11163a; box-shadow: 0 0 0 2px #2b3a80, 0 0 80px -14px rgba(41, 235, 255, .55); background: #060f3d; }
.cd-gtotem .base { height: 60px; margin: 0 20px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #1b2150, #0d1033); display: grid; place-items: center; font: 600 22px/1 var(--f-body); color: rgba(255, 255, 255, .7); }
.cd-gtotem .stands { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: radial-gradient(circle, rgba(143, 193, 234, .5) 2px, transparent 3px) 0 0 / 14px 12px, linear-gradient(180deg, #060f3d, #0a1b6e); }
.cd-gtotem .stands::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(90deg, #e41e2b 0 70px, #fff 70px 74px); }
.cd-gtotem .pitch { position: absolute; left: 0; right: 0; bottom: 0; height: 54%; background: repeating-linear-gradient(180deg, #1f8a4c 0 40px, #23994f 40px 80px); }
.cd-gtotem .goal { position: absolute; left: 50%; top: 32%; width: 220px; height: 96px; margin-left: -110px; border: 6px solid #fff; border-bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 12px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 12px); }
.cd-gtotem .keeper { position: absolute; left: 50%; top: calc(32% + 24px); width: 34px; height: 64px; margin-left: -17px; border-radius: 12px 12px 4px 4px; background: #1a1a1a; animation: cdKeeper 1.6s ease-in-out infinite alternate; }
.cd-gtotem .keeper::before { content: ''; position: absolute; left: 7px; top: -18px; width: 20px; height: 20px; border-radius: 50%; background: #d39a76; }
.cd-gtotem .keeper::after { content: ''; position: absolute; left: -16px; top: 6px; width: 66px; height: 8px; border-radius: 4px; background: #1a1a1a; }
@keyframes cdKeeper { from { translate: -60px 0; } to { translate: 60px 0; } }
.cd-gtotem .ball { position: absolute; left: 50%; top: 74%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d3ea 70%); box-shadow: inset -6px -6px 0 rgba(6, 15, 61, .2), 0 8px 10px rgba(0, 0, 0, .4); transition: translate .7s cubic-bezier(.2, .7, .3, 1), scale .7s; }
.cd-gtotem .ball::after { content: ''; position: absolute; inset: 14px; background: #060f3d; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.cd-gscene[data-s="1"] .ball { translate: 66px -230px; scale: .55; }
.cd-gtotem .qr { top: 14px; translate: 0 0; right: 14px; padding: 6px; z-index: 3; }
.cd-gtotem .qr i { width: 84px; height: 84px; }
.cd-gtotem .qr small { font-size: 10px; }
.cd-gtotem .cap { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font: 900 30px/1.05 var(--f-display); text-transform: uppercase; text-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.cd-gtotem .cap span { display: inline-block; margin-top: 6px; padding: 4px 12px; background: #e41e2b; }
.cd-gtotem .gol { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; font: 900 64px/1 var(--f-display); color: #fff; text-shadow: 0 0 30px rgba(41, 235, 255, .9), 0 6px 0 #e41e2b; opacity: 0; scale: .5; }
.cd-gscene[data-s="1"] .gol { animation: cdGoal 1.9s var(--ease-back) both .5s; }
.cd-gscene .cd-hand { left: 560px; bottom: -80px; rotate: 6deg; }
.cd-gscene .cd-ph .scr { background: #0b2d17; }
.cd-gscene[data-s="0"] .p0, .cd-gscene[data-s="1"] .p1 { opacity: 1; translate: 0 0; }
.cd-gscene .p0 { background: repeating-linear-gradient(180deg, #1f8a4c 0 30px, #23994f 30px 60px); color: #fff; }
.cd-gscene .p0 small { font: 700 16px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.cd-gscene .aim { position: relative; width: 190px; height: 110px; border: 4px solid #fff; border-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cd-gscene .aim i { border: 1px dashed rgba(255, 255, 255, .4); position: relative; }
.cd-gscene .aim i.on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid #ffd23f; box-shadow: 0 0 12px #ffd23f; animation: popIn .4s var(--ease-back); }
.cd-gscene .p1 { background: #e41e2b; color: #fff; }
.cd-gscene .p1 .big { font: 900 44px/1 var(--f-display); }
.cd-gscene .p1 small { font: 700 17px/1.3 var(--f-display); text-transform: uppercase; }
.cd-gscene .p1 .cd-btn { background: #fff; color: #e41e2b; }
.cd-gscore { position: absolute; right: 30px; top: 30px; z-index: 3; padding: 14px 20px; border-radius: 16px; text-align: right; }
.cd-gscore small { display: block; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cd-gscore b { display: block; margin-top: 6px; font: 900 40px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--c-cyan); }

/* ---------- 23 · Realidad aumentada ---------- */
.cd-arscene { background: linear-gradient(180deg, #0a1552, #060f3d) !important; }
.cd-arled { position: absolute; right: 60px; top: 60px; width: 640px; height: 420px; border-radius: 10px; border: 14px solid #11163a; box-shadow: 0 0 0 2px #2b3a80, 0 0 80px -14px rgba(41, 235, 255, .5); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1b3a8f, #060f3d 60%), #060f3d; text-align: center; z-index: 2; }
.cd-arled::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: repeating-linear-gradient(90deg, #1f8a4c 0 50px, #23994f 50px 100px); }
.cd-arled::after { content: ''; position: absolute; inset: 0; border: 12px solid #ffe600; pointer-events: none; }
.cd-arled > b { position: relative; display: block; margin-top: 34px; font: 900 44px/1.02 var(--f-display); text-transform: uppercase; color: #fff; }
.cd-arled > b::first-line { color: #ffe600; }
.cd-arled .boxes { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-top: 22px; }
.cd-arled .boxes i, .cd-ph .box3 { position: relative; width: 120px; height: 110px; border-radius: 6px; background: linear-gradient(160deg, #d7a46a, #a8743e); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15); }
.cd-arled .boxes i:nth-child(2) { width: 140px; height: 130px; }
.cd-arled .boxes i::after, .cd-ph .box3 .star { content: ''; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; background: #ffd23f; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 10px #ffd23f); animation: cdStar 1.6s ease-in-out infinite; }
@keyframes cdStar { 50% { scale: 1.18; } }
.cd-arled .hint { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #1a3c8f; border: 2px solid #ffe600; font: 700 17px/1 var(--f-display); white-space: nowrap; }
.cd-arled .hint .ico { width: 22px; height: 22px; color: #ffe600; }
.cd-arscene .cd-hand { left: 110px; bottom: -90px; rotate: -8deg; }
.cd-arscene .cd-ph .scr { background: #ffe600; }
.cd-ph .arv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(6, 15, 61, .25), rgba(6, 15, 61, 0)); }
.cd-ph .box3 { width: 150px; height: 140px; transition: translate .6s; }
.cd-ph .box3 .lid { position: absolute; left: -8px; right: -8px; top: -18px; height: 26px; border-radius: 4px; background: linear-gradient(160deg, #e2b37c, #b9844b); transform-origin: 0 100%; transition: transform .6s var(--ease-back); }
.cd-ph .box3 .star { position: absolute; }
#arScene[data-s="1"] .box3 .lid, #arScene[data-s="2"] .box3 .lid { transform: rotate(-110deg); }
.cd-ph .coupon { position: absolute; left: 24px; right: 24px; top: 70px; padding: 14px; border-radius: 12px; background: #fff; color: var(--c-deep); text-align: center; box-shadow: 0 16px 30px -10px rgba(0, 0, 40, .5); opacity: 0; translate: 0 120px; scale: .6; transition: all .7s var(--ease-back); }
#arScene[data-s="2"] .coupon { opacity: 1; translate: 0 0; scale: 1; }
#arScene[data-s="2"] .box3 { translate: 0 90px; }
.cd-ph .coupon small { font: 800 13px/1 var(--f-display); text-transform: uppercase; color: #2d3277; }
.cd-ph .coupon b { display: block; margin: 8px 0; font: 900 46px/1 var(--f-display); color: #2d3277; }
.cd-ph .coupon .bc { display: block; height: 34px; margin: 0 20px; background: repeating-linear-gradient(90deg, #1a1a1a 0 2px, transparent 2px 4px, #1a1a1a 4px 7px, transparent 7px 9px); }
.cd-ph .coupon span { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: #ffe600; font: 800 13px/1 var(--f-display); text-transform: uppercase; }
.cd-ph .tap { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font: 800 20px/1 var(--f-display); color: #2d3277; transition: opacity .4s; animation: pulse 1.4s infinite; }
#arScene[data-s="2"] .tap { opacity: 0; }

/* ---------- 24 / 25 · 3D ---------- */
.cd-cube { position: relative; width: 220px; height: 220px; transform-style: preserve-3d; animation: cdCube 9s linear infinite; }
.cd-cube i { position: absolute; inset: 0; border: 2px solid rgba(41, 235, 255, .8); background: linear-gradient(135deg, rgba(20, 136, 234, .55), rgba(7, 0, 250, .45)); box-shadow: inset 0 0 40px rgba(41, 235, 255, .35); }
.cd-cube i:nth-child(1) { transform: translateZ(110px); }
.cd-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(110px); }
.cd-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(110px); }
.cd-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(110px); }
.cd-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(110px); }
.cd-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(110px); }
.cd-cube i:nth-child(1)::after { content: ''; position: absolute; inset: 40px; background: url("../img/isotipo-blanco.svg") center / contain no-repeat; opacity: .9; }
@keyframes cdCube { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
.cd-anascene { background: linear-gradient(180deg, #060f3d, #0a1552) !important; perspective: 1400px; }
.cd-bld { position: absolute; left: 70px; right: 70px; top: 0; bottom: 120px; background: linear-gradient(90deg, #0b1650 0 50%, #0d1d66 50%); }
.cd-bld::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(143, 193, 234, .18) 3px, transparent 4px) 0 0 / 46px 54px; }
.cd-corner { position: absolute; left: 110px; right: 110px; top: 120px; height: 420px; transform-style: preserve-3d; }
.cd-corner .face { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; border: 10px solid #11163a; background: linear-gradient(180deg, #0700fa, #1488ea); box-shadow: 0 0 60px -10px rgba(41, 235, 255, .55); }
.cd-corner .face.l { left: 0; transform-origin: 100% 50%; transform: rotateY(-30deg); border-right-width: 2px; }
.cd-corner .face.r { right: 0; transform-origin: 0 50%; transform: rotateY(30deg); border-left-width: 2px; background: linear-gradient(180deg, #00478c, #1488ea); }
.cd-corner .room { position: absolute; inset: 0; background:
  linear-gradient(rgba(41, 235, 255, .35) 2px, transparent 2px) 0 0 / 100% 46px,
  linear-gradient(90deg, rgba(41, 235, 255, .35) 2px, transparent 2px) 0 0 / 46px 100%; mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 75%); }
.cd-corner .pop3d { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; z-index: 3; }
.cd-corner .pop3d .cd-cube { width: 200px; height: 200px; margin: -100px; animation: cdCube 7s linear infinite, cdOut 3.5s ease-in-out infinite alternate; }
.cd-corner .pop3d .cd-cube i:nth-child(1) { transform: translateZ(100px); } .cd-corner .pop3d .cd-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(100px); }
.cd-corner .pop3d .cd-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(100px); } .cd-corner .pop3d .cd-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); }
.cd-corner .pop3d .cd-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(100px); } .cd-corner .pop3d .cd-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); }
.cd-corner .pop3d .cd-cube i { background: linear-gradient(135deg, rgba(41, 235, 255, .7), rgba(7, 0, 250, .75)); }
@keyframes cdOut { from { translate: 0 0 0; } to { translate: 0 -40px 220px; } }
.cd-corner .txt3d { position: absolute; left: 40px; bottom: 26px; font: 900 110px/1 var(--f-display); letter-spacing: -.04em; color: #8fc1ea; text-shadow: 1px 1px 0 #1488ea, 2px 2px 0 #1488ea, 3px 3px 0 #1488ea, 4px 4px 0 #0700fa, 5px 5px 0 #0700fa, 6px 6px 0 #0700fa, 7px 7px 0 #060f3d, 8px 8px 0 #060f3d, 18px 18px 30px rgba(0, 0, 0, .5); transform: translateZ(140px) rotateY(-24deg); transform-origin: 0 50%; z-index: 4; animation: cdTxt3 4s ease-in-out infinite alternate; }
@keyframes cdTxt3 { to { translate: 20px -10px; } }
.cd-street { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, #11163a, #060f3d); }
.cd-street::before { content: ''; position: absolute; left: 0; right: 0; top: 50px; height: 6px; background: repeating-linear-gradient(90deg, #8fc1ea 0 60px, transparent 60px 120px); opacity: .5; animation: cdRoad 1.2s linear infinite; }
@keyframes cdRoad { to { background-position: 120px 0; } }

/* ---------- 26 · Casos 3D ---------- */
.cd-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.cd-g3 figure { padding: 14px 14px 18px; border-radius: 22px; background: rgba(20, 34, 120, .38); border: 1px solid var(--line); }
.cd-g3 figure[data-video] { cursor: pointer; pointer-events: auto; }
.cd-g3 .ph { position: relative; height: 420px; border-radius: 14px; overflow: hidden; }
.cd-g3 .ph img { width: 100%; height: 100%; object-fit: cover; }
.cd-g3 .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); translate: -120% 0; animation: cdShine 5s ease-in-out infinite; }
.cd-g3 figure:nth-child(2) .ph::after { animation-delay: 1.6s; } .cd-g3 figure:nth-child(3) .ph::after { animation-delay: 3.2s; }
@keyframes cdShine { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }
.slide.active .cd-g3 .ph img { animation: kenburns 18s ease-in-out infinite alternate; }
.cd-g3 .crop-ypf img { object-position: 100% 30%; }
.cd-g3 .ph .play { position: absolute; right: 14px; top: 14px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); animation: vidPulse 2.4s ease-out infinite; }
.cd-g3 .ph .play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.cd-g3 figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cd-g3 figcaption b { font: 800 30px/1 var(--f-display); }
.cd-g3 figcaption span { font: 300 19px/1.2 var(--f-body); color: var(--ink-2); }
.cd-more { display: flex; align-items: center; gap: 14px; margin-top: 34px; font: 400 22px/1 var(--f-body); color: var(--ink-3); }
.cd-more b { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(20, 34, 120, .45); font: 700 20px/1 var(--f-display); color: #fff; }

/* ---------- 27 · Resumen ---------- */
.cd-orbs { grid-template-columns: repeat(5, 1fr); margin-top: 90px; gap: 56px 24px; }
.cd-orbs > .orb.on { border-color: transparent !important; box-shadow: none !important; }
.cd-orbs .orb .o { width: 100px; height: 100px; }
.cd-orbs .orb b { font-size: 22px; }
.cd-orbs .orb.on .o { background: linear-gradient(135deg, var(--c-ind), var(--c-blue)); color: #fff; box-shadow: 0 0 50px -4px rgba(41, 235, 255, .8); }
.cd-q { margin-top: 80px; font-weight: 400; color: #fff; }

/* ---------- 28 · Cierre ---------- */
.cd-byecta { justify-content: center; margin-top: 40px; gap: 20px; }
.cd-follow { margin-top: 44px; margin-bottom: 18px; font: 400 22px/1 var(--f-body); color: var(--ink-3); }