/* Anuncios HTML/CSS animados (js/creatives.js). Lienzo de diseño 1080x1920 escalado al contenedor.
   Base = fotograma FINAL (thumb y prefers-reduced-motion). Con .cr--play las piezas animan desde su estado inicial.
   Los retardos son fracciones de la duración de la pieza: calc(var(--D) * .25s) = 25 % de D segundos.
   Variables inline (creatives.js): --cr-a/--cr-a2/--cr-a-rgb (acento), --cr-b/b2/b3/bx (azul petróleo y derivados),
   --cr-fh (titulares, Poppins) y --cr-fb (texto, Inter). Compatible con WebView ~Chrome 90 (sin color-mix, sin cq*). */

.media--creative { background: #07202E; }
.cr {
  --e: cubic-bezier(.2, .8, .2, 1);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
  background: #07202E; background: var(--cr-bx, #07202E); color: #fff; font-family: var(--cr-fb, "Inter", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased; text-align: left;
}
.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr .icon { display: block; width: 1em; height: 1em; flex: none; }

/* Fondo: degradado profundo + resplandores (+ imagen opcional de Magnific si existe) */
.cr__bg {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background:
    radial-gradient(120% 55% at 50% 0%, var(--cr-b3, #2f6382) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(90% 45% at 100% 100%, rgba(var(--cr-a-rgb, 255, 165, 38), .22) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(170deg, var(--cr-b2, #1a5273) 0%, var(--cr-b, #0D3B55) 46%, var(--cr-bx, #04141e) 100%);
}
.cr__img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center; opacity: .5; }
.cr--hablo-3am .cr__img { background-image: url("../img/mac/hablo-fondo-noche.webp"); }
.cr--hablo-no-escapa .cr__img { background-image: url("../img/mac/hablo-fondo-negocio.webp"); opacity: .42; }
.cr__img::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(4, 20, 30, .45), rgba(4, 20, 30, .82)); }
.cr__orb { position: absolute; width: 90%; height: 0; padding-bottom: 90%; border-radius: 50%; }
.cr__orb--1 { left: -30%; top: -18%; background: radial-gradient(circle, rgba(var(--cr-a-rgb, 255, 165, 38), .26), rgba(0, 0, 0, 0) 66%); }
.cr__orb--2 { right: -35%; bottom: -20%; background: radial-gradient(circle, rgba(70, 150, 190, .28), rgba(0, 0, 0, 0) 66%); }

.cr__stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; visibility: hidden; }
.cr.is-fit .cr__stage { visibility: visible; }
.cr__brand { position: absolute; left: 80px; top: 70px; height: 92px; display: flex; align-items: center; }
.cr__word { font: 800 70px/1 var(--cr-fh, "Poppins", system-ui, sans-serif); letter-spacing: -.03em; color: #fff; }
.cr__logo { display: block; height: 92px; width: auto; max-width: 420px; object-fit: contain; }
.cr__brand.has-logo .cr__word { display: none; }
.cr--light .cr__word { color: var(--cr-b); }
.cr__h {
  position: absolute; left: 80px; right: 80px; margin: 0; font-family: var(--cr-fh, "Poppins", system-ui, sans-serif); font-weight: 800;
  font-size: 108px; line-height: 1.04; letter-spacing: -.035em; text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.cr__h em { font-style: normal; color: var(--cr-a, #FFA526); }

/* ===== 1) hablo-3am ===== */
.s3-stars i { position: absolute; border-radius: 50%; background: #fff; opacity: .9; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
.s3-moon {
  position: absolute; left: 640px; top: 210px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffaf0, #f4e6b8 55%, #c8b27c);
  box-shadow: 0 0 120px rgba(255, 236, 170, .45), 0 0 40px rgba(255, 236, 170, .4);
}
.s3-moon b { position: absolute; border-radius: 50%; background: rgba(120, 100, 60, .22); }
.s3-moon b:nth-child(1) { left: 44px; top: 56px; width: 46px; height: 46px; }
.s3-moon b:nth-child(2) { left: 116px; top: 108px; width: 62px; height: 62px; }
.s3-moon b:nth-child(3) { left: 70px; top: 140px; width: 28px; height: 28px; }
.s3-clock {
  position: absolute; left: 80px; top: 470px; width: 920px; height: 300px; border-radius: 64px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .6), 0 0 100px rgba(var(--cr-a-rgb), .18);
}
.s3-clock__a, .s3-clock__b {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font: 800 232px/1 var(--cr-fh, "Poppins", system-ui, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.s3-clock__a { opacity: 0; }
.colon { margin: 0 6px; color: var(--cr-a); position: relative; top: -8px; }
.s3-h { top: 830px; font-size: 122px; }
.s3-phone { position: absolute; left: 90px; top: 1320px; width: 200px; height: 200px; }
.s3-phone i { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 4px solid var(--cr-a); opacity: 0; }
.s3-phone__ico {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; display: grid; place-items: center; font-size: 96px; color: #1a1205;
  background: linear-gradient(145deg, var(--cr-a2), var(--cr-a)); box-shadow: 0 20px 60px -10px rgba(var(--cr-a-rgb), .6);
}
.s3-phone__ico .icon { stroke-width: 2; }
.s3-typing { position: absolute; left: 350px; top: 1370px; padding: 30px 40px; border-radius: 50px 50px 50px 12px; background: rgba(255, 255, 255, .16); display: flex; gap: 14px; opacity: 0; }
.s3-typing i { width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: .85; }
.s3-bubble {
  position: absolute; left: 350px; top: 1320px; width: 640px; padding: 36px 42px; border-radius: 50px 50px 50px 12px; transform-origin: 0 100%;
  background: linear-gradient(135deg, var(--cr-a2), var(--cr-a)); color: #1a1205; font: 600 44px/1.25 var(--cr-fb);
  box-shadow: 0 30px 80px -20px rgba(var(--cr-a-rgb), .55);
}
.s3-bubble__ok { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 32px; font-weight: 700; opacity: .8; }
.s3-bubble__ok .icon { font-size: 38px; }

/* ===== 2) hablo-247 ===== */
.s2-orbitline { position: absolute; left: 210px; top: 370px; width: 660px; height: 660px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .24); }
.s2-core {
  position: absolute; left: 390px; top: 550px; width: 300px; height: 300px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--cr-a2), var(--cr-a) 62%, #c96f00);
  box-shadow: 0 0 0 18px rgba(var(--cr-a-rgb), .18), 0 0 0 44px rgba(var(--cr-a-rgb), .09), 0 40px 120px -10px rgba(var(--cr-a-rgb), .6);
}
.s2-core span { font: 800 106px/1 var(--cr-fh); letter-spacing: -.04em; color: #1a1205; }
.s2-orbit { position: absolute; left: 540px; top: 700px; width: 0; height: 0; }
.s2-sat { position: absolute; left: -85px; top: -85px; width: 170px; height: 170px; }
.s2-sat--1 { transform: rotate(-90deg) translateX(330px) rotate(90deg); }
.s2-sat--2 { transform: rotate(30deg) translateX(330px) rotate(-30deg); }
.s2-sat--3 { transform: rotate(150deg) translateX(330px) rotate(-150deg); }
.s2-sat__in { position: relative; width: 170px; height: 170px; }
.s2-sat__in span { position: absolute; left: -40px; right: -40px; top: 184px; text-align: center; white-space: nowrap; font: 700 36px var(--cr-fb); color: #fff; text-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.s2-ico { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; font-size: 84px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6); }
.s2-ico .icon { stroke-width: 2; }
.s2-ico--phone { background: linear-gradient(145deg, var(--cr-a2), var(--cr-a)); color: #1a1205; }
.s2-ico--wa { background: linear-gradient(145deg, #4BE08F, #1FB864); color: #fff; }
.s2-ico--chat { background: #fff; color: var(--cr-b); }
.s2-h { top: 1130px; font-size: 100px; }
.cr__h em.s2-big { display: inline-block; font-size: 200px; line-height: 1.05; background: linear-gradient(90deg, var(--cr-a2), var(--cr-a)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== 3) hablo-no-escapa ===== */
.s4-h { top: 230px; }
.s4-count {
  position: absolute; left: 80px; top: 570px; height: 110px; padding: 0 22px 0 40px; border-radius: 60px; display: flex; align-items: center; gap: 26px;
  background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .18); font: 600 40px var(--cr-fb);
}
.cnt { display: block; height: 76px; width: 70px; overflow: hidden; border-radius: 20px; background: var(--cr-a); color: #1a1205; font: 800 60px/76px var(--cr-fh); text-align: center; }
.cnt__col { display: block; transform: translateY(-80%); }
.cnt__col i { display: block; height: 76px; font-style: normal; }
.s4-list { position: absolute; left: 100px; top: 740px; width: 880px; }
.s4-card {
  position: relative; height: 180px; margin-bottom: 28px; padding: 0 40px; border-radius: 44px; display: flex; align-items: center; gap: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 2px solid rgba(var(--cr-a-rgb), .45);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.s4-av { width: 108px; height: 108px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 56px; background: linear-gradient(145deg, var(--cr-b3), var(--cr-b2)); }
.s4-lines { flex: 1; display: grid; gap: 18px; }
.s4-lines i { display: block; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .3); }
.s4-lines i:last-child { width: 62%; background: rgba(255, 255, 255, .16); }
.s4-st { position: relative; flex: none; width: 250px; height: 80px; }
.s4-ok { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 40px; background: rgba(43, 227, 139, .16); border: 2px solid rgba(43, 227, 139, .55); color: #4DF0A0; font: 700 34px var(--cr-fb); }
.s4-ok .icon { font-size: 40px; }
.s4-wait { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .25); border-top-color: #fff; opacity: 0; }

/* ===== 4) hablo-no-inventa ===== */
.s5-h { top: 230px; }
.s5-chat { position: absolute; left: 80px; right: 80px; top: 600px; display: flex; flex-direction: column; gap: 34px; }
.s5-msg--u { align-self: flex-end; max-width: 700px; padding: 30px 40px; border-radius: 44px 44px 12px 44px; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .22); font: 500 42px/1.25 var(--cr-fb); }
.s5-msg--a { align-self: flex-start; display: flex; gap: 24px; max-width: 920px; padding: 30px 36px; border-radius: 44px 44px 44px 12px; background: rgba(255, 255, 255, .1); border: 2px solid rgba(var(--cr-a-rgb), .5); }
.s5-msg--a p { margin: 0; font: 600 42px/1.25 var(--cr-fb); }
.s5-av { width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 46px; color: #1a1205; background: linear-gradient(145deg, var(--cr-a2), var(--cr-a)); }
.s5-bars { margin-top: 18px; display: grid; gap: 14px; }
.s5-bars i { display: block; height: 22px; width: 560px; border-radius: 11px; background: rgba(255, 255, 255, .3); }
.s5-bars i:last-child { width: 380px; background: rgba(255, 255, 255, .18); }
.s5-chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 26px; border-radius: 40px; font: 700 34px var(--cr-fb); }
.s5-chip .icon { font-size: 38px; }
.s5-chip--ok { background: rgba(43, 227, 139, .16); color: #4DF0A0; border: 2px solid rgba(43, 227, 139, .55); }
.s5-chip--warn { background: rgba(var(--cr-a-rgb), .16); color: var(--cr-a2); border: 2px solid rgba(var(--cr-a-rgb), .55); }

/* ===== 5) hablo-hablito ===== */
.s6-spark i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--cr-a2); box-shadow: 0 0 24px var(--cr-a); }
.s6-spark i:nth-child(1) { left: 130px; top: 360px; } .s6-spark i:nth-child(2) { left: 930px; top: 330px; width: 22px; height: 22px; }
.s6-spark i:nth-child(3) { left: 90px; top: 760px; width: 12px; height: 12px; } .s6-spark i:nth-child(4) { left: 960px; top: 700px; }
.s6-spark i:nth-child(5) { left: 200px; top: 1060px; width: 12px; height: 12px; } .s6-spark i:nth-child(6) { left: 900px; top: 1030px; width: 20px; height: 20px; }
.s6-frame {
  position: absolute; left: 190px; top: 290px; width: 700px; height: 700px; border-radius: 90px; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)); border: 3px solid rgba(var(--cr-a-rgb), .55);
  box-shadow: 0 0 0 20px rgba(var(--cr-a-rgb), .08), 0 50px 140px -30px rgba(var(--cr-a-rgb), .5);
}
.s6-robot { width: 520px; height: 520px; }
.s6-robot svg { width: 100%; height: 100%; display: block; fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .34); stroke-width: 4; }
.s6-robot svg line { stroke-linecap: round; stroke-width: 6px; }
.s6-robot svg .face { fill: rgba(0, 0, 0, .28); stroke: none; }
.s6-robot svg .eye { fill: rgba(var(--cr-a-rgb), .85); stroke: none; }
.s6-robot__media { width: 100%; height: 100%; }
.s6-label { position: absolute; left: 260px; top: 1030px; width: 560px; padding: 12px 0; text-align: center; border: 2px dashed rgba(255, 255, 255, .4); border-radius: 40px; font: 700 36px var(--cr-fb); color: rgba(255, 255, 255, .8); }
.s6-tap { position: absolute; left: 660px; top: 760px; width: 170px; height: 170px; font-size: 150px; color: #fff; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5)); }
.s6-tap .icon { position: relative; z-index: 2; stroke-width: 1.5; fill: rgba(255, 255, 255, .15); }
.s6-tap i { position: absolute; left: 20px; top: 0; width: 70px; height: 70px; border-radius: 50%; border: 5px solid var(--cr-a); opacity: 0; }
.s6-h { top: 1190px; font-size: 100px; }

/* ===== 6) hablo-qr ===== */
.s7-h { top: 230px; font-size: 92px; }
.cr__h em.s7-big { display: inline-block; font-size: 210px; line-height: 1.12; background: linear-gradient(90deg, var(--cr-a2), var(--cr-a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s7-card { position: absolute; left: 190px; top: 690px; width: 700px; height: 700px; padding: 46px; border-radius: 64px; background: #fff; box-shadow: 0 0 0 16px rgba(var(--cr-a-rgb), .18), 0 50px 140px -30px rgba(var(--cr-a-rgb), .6); }
.s7-qr, .s7-qr svg { width: 100%; height: 100%; display: block; }
.s7-c { position: absolute; width: 96px; height: 96px; border: 12px solid var(--cr-a); }
.s7-c--tl { left: -26px; top: -26px; border-right: 0; border-bottom: 0; border-radius: 40px 0 0 0; }
.s7-c--tr { right: -26px; top: -26px; border-left: 0; border-bottom: 0; border-radius: 0 40px 0 0; }
.s7-c--bl { left: -26px; bottom: -26px; border-right: 0; border-top: 0; border-radius: 0 0 0 40px; }
.s7-c--br { right: -26px; bottom: -26px; border-left: 0; border-top: 0; border-radius: 0 0 40px 0; }
.s7-scan { position: absolute; left: 46px; right: 46px; top: 46px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--cr-a), rgba(0, 0, 0, 0)); box-shadow: 0 0 30px var(--cr-a); opacity: 0; }
.s7-card.is-pending { background: rgba(255, 255, 255, .07); border: 4px dashed rgba(255, 255, 255, .42); box-shadow: none; }
.s7-pending { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.s7-pending .icon { font-size: 230px; opacity: .45; stroke-width: 1.2; }
.s7-pending strong { font: 800 78px/1.05 var(--cr-fh); }
.s7-pending span { font-size: 36px; color: rgba(255, 255, 255, .7); }
.s7-note { position: absolute; left: 80px; right: 80px; top: 1440px; margin: 0; text-align: center; font: 600 46px/1.3 var(--cr-fb); color: rgba(255, 255, 255, .85); word-break: break-all; }

/* ===== 7) hablo-foto y 8) hablo-fondo: imagen generada + tarjeta petróleo con el titular ===== */
.cr--hablo-foto .cr__img, .cr--hablo-fondo .cr__img { opacity: 1; }
.cr--hablo-foto .cr__img::after, .cr--hablo-fondo .cr__img::after { display: none; }
.cr--hablo-foto .cr__orb, .cr--hablo-fondo .cr__orb { display: none; }
.cr__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cr__velo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.cr__velo--bottom { background: linear-gradient(180deg, rgba(4, 20, 30, .72) 0%, rgba(4, 20, 30, 0) 20%, rgba(4, 20, 30, 0) 46%, rgba(4, 20, 30, .9) 100%); }

.fx-block { position: absolute; left: 60px; right: 60px; }
.fx-block--bottom { bottom: 240px; }
.fx-block--top { top: 250px; }
/* Foto real 9:16 con banda inferior lisa: tarjeta más baja y compacta para no tapar a Hablito */
.fx-block--photo { bottom: 120px; }
.fx-block--photo .fx-card { padding: 44px 52px 48px; background: linear-gradient(160deg, rgba(13, 59, 85, .94), rgba(5, 22, 32, .96)); }
.fx-card {
  position: relative; padding: 52px 56px 56px; border-radius: 56px; z-index: 2;
  background: linear-gradient(160deg, var(--cr-b), var(--cr-bx)); border: 2px solid rgba(var(--cr-a-rgb), .6);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .75), 0 0 90px rgba(var(--cr-a-rgb), .2);
}
.fx-bar { display: block; width: 130px; height: 12px; border-radius: 6px; margin-bottom: 30px; background: linear-gradient(90deg, var(--cr-a2), var(--cr-a)); }
.fx-h { margin: 0; font-family: var(--cr-fh); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: #fff; }
.fx-h .w { display: inline-block; }
.fx-h .w.is-a {
  color: var(--cr-a); background: linear-gradient(100deg, var(--cr-a) 0%, #ffe0b0 45%, var(--cr-a) 60%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.fx-sub { margin: 26px 0 0; font: 500 44px/1.3 var(--cr-fb); color: rgba(255, 255, 255, .9); }
.fx-robot { position: absolute; right: 40px; width: 400px; height: auto; max-height: 440px; object-fit: contain; z-index: 1; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }
.fx-block--bottom .fx-robot { bottom: calc(100% - 70px); }
.fx-block--top .fx-robot { top: calc(100% - 70px); }

/* Hablito (robot real: pose del pack o pieza rellena) */
.s6-robot { position: relative; }
.s6-robot__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.s6-robot.has-pose svg { display: none; }
.s6-robot.has-pose.is-broken svg { display: block; }
.s6-robot.is-broken .s6-robot__img { display: none; }

/* ====================== Animaciones (solo .cr--play) ====================== */
.cr--play.cr--hablo-foto .cr__photo, .cr--play.cr--hablo-foto .cr__img, .cr--play.cr--hablo-fondo .cr__img { animation: cr-kb calc(var(--D) * 1.1s) ease-out both; }
.cr--play .fx-card { animation: cr-rise .9s var(--e) both; animation-delay: calc(var(--D) * .06s); }
.cr--play .fx-bar { animation: cr-bar 1s var(--e) both; animation-delay: calc(var(--D) * .1s); }
.cr--play .fx-h .w { animation: cr-word .7s var(--e) both; animation-delay: calc(var(--D) * .12s + var(--i) * .09s); }
.cr--play .fx-h .w.is-a { animation: cr-word .7s var(--e) both, cr-shine 3.2s linear infinite; animation-delay: calc(var(--D) * .12s + var(--i) * .09s), calc(var(--D) * .3s); }
.cr--play .fx-sub { animation: cr-fade .8s ease both; animation-delay: calc(var(--D) * .4s); }
.cr--play .fx-robot { animation: cr-robot-in .9s var(--e) both, cr-float 4.2s ease-in-out .9s infinite; animation-delay: calc(var(--D) * .2s), calc(var(--D) * .2s + .9s); }
.cr--play .s6-robot__img { animation: cr-float 4.2s ease-in-out infinite; }
.cr--play .cr__orb--1 { animation: cr-drift 14s ease-in-out infinite alternate; }
.cr--play .cr__orb--2 { animation: cr-drift 17s ease-in-out infinite alternate-reverse; }
.cr--play .cr__brand, .cr--play .cr__h { animation: cr-rise .9s var(--e) both; animation-delay: calc(var(--D) * .03s); }
.cr--play .cr__brand { animation-delay: 0s; }

/* 3am */
.cr--play .s3-stars i { animation: cr-twinkle 2.4s ease-in-out infinite; }
.cr--play .s3-moon { animation: cr-bob 8s ease-in-out infinite; }
.cr--play .s3-clock { animation: cr-pop .9s var(--e) both; animation-delay: calc(var(--D) * .05s); }
.cr--play .s3-clock__a { animation: cr-hide .01s both; animation-delay: calc(var(--D) * .13s); }
.cr--play .s3-clock__b { animation: cr-show .01s both; animation-delay: calc(var(--D) * .13s); }
.cr--play .colon { animation: cr-blinkc 1s steps(1) infinite; }
.cr--play .s3-phone { animation: cr-rise .8s var(--e) both; animation-delay: calc(var(--D) * .1s); }
.cr--play .s3-phone__ico { animation: cr-shake .5s ease-in-out 6; animation-delay: calc(var(--D) * .16s); }
.cr--play .s3-phone i { animation: cr-wave 1.4s ease-out 2 forwards; animation-delay: calc(var(--D) * .16s); }
.cr--play .s3-phone i.w2 { animation-delay: calc(var(--D) * .16s + .45s); }
.cr--play .s3-phone i.w3 { animation-delay: calc(var(--D) * .16s + .9s); }
.cr--play .s3-typing { animation: cr-blip 2s ease-in-out both; animation-delay: calc(var(--D) * .44s); }
.cr--play .s3-typing i { animation: cr-dot .9s ease-in-out infinite; }
.cr--play .s3-typing i:nth-child(2) { animation-delay: .15s; } .cr--play .s3-typing i:nth-child(3) { animation-delay: .3s; }
.cr--play .s3-bubble { animation: cr-pop .6s var(--e) both; animation-delay: calc(var(--D) * .6s); }
.cr--play .s3-bubble__ok { animation: cr-fade .6s ease both; animation-delay: calc(var(--D) * .7s); }

/* 24/7 */
.cr--play .s2-orbitline { animation: cr-fade 1s ease both; }
.cr--play .s2-core { animation: cr-pop .9s var(--e) both, cr-pulse 3s ease-in-out .9s infinite; animation-delay: calc(var(--D) * .04s), calc(var(--D) * .04s + .9s); }
.cr--play .s2-orbit { animation: cr-spin 18s linear infinite; }
.cr--play .s2-sat__in { animation: cr-spinrev 18s linear infinite; }

/* No deja escapar */
.cr--play .s4-count { animation: cr-rise .8s var(--e) both; animation-delay: calc(var(--D) * .06s); }
.cr--play .s4-card--0 { animation: cr-in-r .8s var(--e) both; animation-delay: calc(var(--D) * .1s); }
.cr--play .s4-card--1 { animation: cr-in-r .8s var(--e) both; animation-delay: calc(var(--D) * .26s); }
.cr--play .s4-card--2 { animation: cr-in-r .8s var(--e) both; animation-delay: calc(var(--D) * .42s); }
.cr--play .s4-card--3 { animation: cr-in-r .8s var(--e) both; animation-delay: calc(var(--D) * .58s); }
.cr--play .s4-card--0 .s4-ok { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .22s); }
.cr--play .s4-card--1 .s4-ok { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .38s); }
.cr--play .s4-card--2 .s4-ok { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .54s); }
.cr--play .s4-card--3 .s4-ok { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .7s); }
.cr--play .s4-card--0 .s4-wait { animation: cr-wait calc(var(--D) * .06s) linear both; animation-delay: calc(var(--D) * .16s); }
.cr--play .s4-card--1 .s4-wait { animation: cr-wait calc(var(--D) * .06s) linear both; animation-delay: calc(var(--D) * .32s); }
.cr--play .s4-card--2 .s4-wait { animation: cr-wait calc(var(--D) * .06s) linear both; animation-delay: calc(var(--D) * .48s); }
.cr--play .s4-card--3 .s4-wait { animation: cr-wait calc(var(--D) * .06s) linear both; animation-delay: calc(var(--D) * .64s); }
.cr--play .cnt__col { animation: cr-cnt calc(var(--D) * 1s) step-end both; }

/* No se inventa nada */
.cr--play .s5-m1 { animation: cr-rise .7s var(--e) both; animation-delay: calc(var(--D) * .1s); }
.cr--play .s5-m2 { animation: cr-rise .7s var(--e) both; animation-delay: calc(var(--D) * .24s); }
.cr--play .s5-c1 { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .38s); }
.cr--play .s5-m3 { animation: cr-rise .7s var(--e) both; animation-delay: calc(var(--D) * .5s); }
.cr--play .s5-m4 { animation: cr-rise .7s var(--e) both; animation-delay: calc(var(--D) * .62s); }
.cr--play .s5-c2 { animation: cr-pop .5s var(--e) both; animation-delay: calc(var(--D) * .76s); }

/* Hablito */
.cr--play .s6-spark i { animation: cr-twinkle 2.2s ease-in-out infinite; }
.cr--play .s6-spark i:nth-child(even) { animation-delay: .8s; }
.cr--play .s6-frame { animation: cr-pop .9s var(--e) both, cr-bob 5s ease-in-out .9s infinite; animation-delay: calc(var(--D) * .04s), calc(var(--D) * .04s + .9s); }
.cr--play .s6-label { animation: cr-fade .8s ease both; animation-delay: calc(var(--D) * .2s); }
.cr--play .s6-tap { animation: cr-tap 2.2s ease-in-out infinite; animation-delay: calc(var(--D) * .25s); }
.cr--play .s6-tap i { animation: cr-wave 2.2s ease-out infinite; animation-delay: calc(var(--D) * .25s + .9s); }
.cr--play .s6-tap i:nth-child(2) { animation-delay: calc(var(--D) * .25s + 1.4s); }

/* QR */
.cr--play .s7-card { animation: cr-pop .9s var(--e) both; animation-delay: calc(var(--D) * .08s); }
.cr--play .s7-c { animation: cr-pulse 1.8s ease-in-out infinite; }
.cr--play .s7-scan { animation: cr-scan 2.8s ease-in-out infinite; animation-delay: calc(var(--D) * .25s); }
.cr--play .s7-note { animation: cr-fade .8s ease both; animation-delay: calc(var(--D) * .3s); }

@keyframes cr-kb { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes cr-word { from { opacity: 0; transform: translateY(40px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes cr-bar { from { transform: scaleX(0); transform-origin: 0 50%; } to { transform: scaleX(1); transform-origin: 0 50%; } }
@keyframes cr-shine { from { background-position: 0% 0; } to { background-position: -220% 0; } }
@keyframes cr-float { 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes cr-robot-in { from { opacity: 0; transform: translateY(60px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cr-rise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes cr-pop { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes cr-in-r { from { opacity: 0; transform: translateX(300px); } to { opacity: 1; transform: none; } }
@keyframes cr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes cr-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cr-bob { 50% { transform: translateY(-18px); } }
@keyframes cr-spin { to { transform: rotate(360deg); } }
@keyframes cr-spinrev { to { transform: rotate(-360deg); } }
@keyframes cr-blinkc { 50% { opacity: .15; } }
@keyframes cr-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes cr-wave { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes cr-blip { 0% { opacity: 0; transform: translateY(20px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cr-dot { 50% { transform: translateY(-10px); opacity: 1; } }
@keyframes cr-pulse { 50% { transform: scale(1.045); } }
@keyframes cr-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(588px); } }
@keyframes cr-drift { to { transform: translate(8%, 6%) scale(1.15); } }
@keyframes cr-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-24px, -30px) scale(1.05); } 55% { transform: translate(-24px, -30px) scale(.88); } }
@keyframes cr-wait { 0% { opacity: 0; transform: rotate(0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: rotate(720deg); } }
@keyframes cr-cnt { 0% { transform: translateY(0); } 22% { transform: translateY(-20%); } 38% { transform: translateY(-40%); } 54% { transform: translateY(-60%); } 70%, 100% { transform: translateY(-80%); } }

/* Reduced motion: fotograma final, sin animación */
@media (prefers-reduced-motion: reduce) {
  .cr, .cr *, .cr *::before, .cr *::after { animation: none !important; }
}