/* Sección «Estrategia» (estrategia.html). Tokens del tema .tema de styles.css. Poco texto, mucho movimiento. */
.est-ancho { max-width: 76rem; }
.est-hero { padding-block: clamp(1rem, 2.5vw, 1.6rem) clamp(1.5rem, 3vw, 2.4rem); text-align: center; }
.est-titulo { font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 350; line-height: 1.1; max-width: 26ch; margin: 0 auto .3rem; font-variation-settings: "opsz" 144; }
@media (min-width: 62rem) { .est-titulo { max-width: none; } }
.est-sub { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--real-txt-2); margin: 0 auto 1rem; }
.est-h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 350; margin: 0 0 1.4rem; text-align: center; }
.est-analisis { padding-block: clamp(2.5rem, 6vw, 4.5rem); scroll-margin-top: 4.5rem; }
.est-planes-sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.est-planes-sec .envoltura { max-width: 44rem; }
.est-paso-t { font: 400 1.35rem/1.25 "Fraunces", Georgia, serif; margin: 0 0 1rem; }
.est-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: 1rem 0 0; color: var(--real-txt-2); font-size: .9rem; }
.est-chip { font-size: .85rem; padding: .15rem .6rem; border: 1px solid oklch(93% 0.02 85 / .3); color: var(--real-txt-2); }
.est-chip--sim { border-color: var(--neon-violeta); color: oklch(86% 0.09 300); }
.est-enlace { background: none; border: 0; color: var(--real-txt); text-decoration: underline; cursor: pointer; font: inherit; padding: .6rem .4rem; min-height: 44px; display: inline-flex; align-items: center; }
.est-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -.6rem 0 1.4rem; }

/* ---------- 1. CRM (izquierda) + WhatsApp (derecha) ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; height: clamp(30rem, calc(100svh - 16rem), 46rem); text-align: left; }
.crm { --c-fondo: oklch(98% 0.004 85); --c-panel: oklch(95% 0.006 85); --c-borde: oklch(86% 0.01 85); --c-txt: oklch(22% 0.02 60); --c-txt2: oklch(42% 0.02 60); --c-acento: oklch(46% 0.2 295);
  color: var(--c-txt); background: var(--c-fondo); border: 1px solid oklch(93% 0.02 85 / .25); border-radius: 14px; overflow: hidden; min-height: 0;
  box-shadow: 0 30px 80px oklch(0% 0 0 / .55), 0 0 0 1px oklch(0% 0 0 / .4); display: flex; flex-direction: column; }
.crm__barra { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; background: oklch(90% 0.01 85); border-bottom: 1px solid var(--c-borde); flex-wrap: wrap; }
.crm__puntos { display: inline-flex; gap: .35rem; }
.crm__puntos i { width: .7rem; height: .7rem; border-radius: 50%; background: oklch(70% 0.02 60); }
.crm__marca { font-weight: 600; font-size: .9rem; margin-right: auto; }
.crm .est-chip { color: var(--c-acento); border-color: var(--c-acento); background: oklch(97% 0.02 295); }
.crm__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 13rem; }
.crm__lado { display: none; }
@media (min-width: 80rem) { .crm__cuerpo { grid-template-columns: 8rem minmax(0, 1fr) 14rem; } .crm__lado { display: flex; } }
.crm__lado { background: var(--c-panel); border-right: 1px solid var(--c-borde); padding: .8rem .5rem; flex-direction: column; gap: .2rem; }
.crm__nav { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem; border-radius: 8px; font-size: .9rem; color: var(--c-txt2); }
.crm__nav--on { background: oklch(92% 0.04 295); color: var(--c-acento); font-weight: 600; }
.crm svg, .wa svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.crm__chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.crm__cab { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--c-borde); }
.crm__cab small { display: block; color: var(--c-txt2); font-size: .8rem; }
.crm__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: oklch(60% 0.12 160); color: #fff; font: 600 1.1rem "Fraunces", Georgia, serif; }
.crm__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: oklch(96% 0.008 85); }
.crm__ficha { background: var(--c-panel); border-left: 1px solid var(--c-borde); padding: 1rem; overflow-y: auto; }
.crm__ficha-t { font: 600 .8rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--c-txt2); margin: 0 0 .8rem; }
.crm__ficha dl { margin: 0; display: grid; gap: .7rem; }
.crm__ficha dt { font-size: .78rem; color: var(--c-txt2); }
.crm__ficha dd { margin: 0; font-weight: 600; font-size: .95rem; }

/* burbujas (CRM y WhatsApp) */
.m { max-width: 86%; padding: .55rem .85rem; font-size: 1rem; line-height: 1.4; border-radius: 14px; animation: est-entra .25s both; overflow-wrap: anywhere; color: oklch(22% 0.02 60); }
.m--in { background: #fff; border: 1px solid oklch(86% 0.01 85); align-self: flex-start; border-bottom-left-radius: 4px; }
.m--out { align-self: flex-end; border-bottom-right-radius: 4px; }
.m--crm { background: oklch(46% 0.2 295); color: #fff; }
.m--wa { background: oklch(90% 0.09 145); }
.m a { color: inherit; text-decoration: underline; display: inline-block; padding: .55rem 0; }
.m--esc { letter-spacing: .2em; color: oklch(42% 0.02 60); }
.m--crm.m--esc { color: #fff; }
@keyframes est-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wa { display: flex; flex-direction: column; min-height: 0; background: oklch(94% 0.02 95); color: oklch(22% 0.02 60); border: 8px solid oklch(20% 0.01 60); border-radius: 30px; overflow: hidden; box-shadow: 0 30px 80px oklch(0% 0 0 / .55), 0 0 0 1px oklch(93% 0.02 85 / .25); }
.wa__cab { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; background: oklch(36% 0.08 170); color: #fff; }
.wa__cab small { display: block; opacity: .85; font-size: .8rem; }
.wa__avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: oklch(46% 0.2 295); color: #fff; font: 600 1.05rem "Fraunces", Georgia, serif; }
.wa__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: .9rem .8rem; display: flex; flex-direction: column; gap: .5rem; background-image: radial-gradient(oklch(88% 0.03 95) 1px, transparent 1px); background-size: 14px 14px; }
.wa__rapidas { display: flex; gap: .4rem; padding: .5rem .8rem 0; overflow-x: auto; min-height: 3.2rem; align-items: flex-start; }
.wa__rapida { flex: none; white-space: nowrap; font: inherit; font-size: .9rem; cursor: pointer; padding: .35rem .8rem; min-height: 44px; border: 1px solid oklch(46% 0.1 160); color: oklch(30% 0.08 160); background: #fff; border-radius: 99px; }
.wa__form { display: flex; gap: .5rem; padding: .5rem .8rem .8rem; }
.wa__form input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; min-height: 48px; padding: 0 .9rem; border: 1px solid oklch(80% 0.01 85); border-radius: 99px; background: #fff; color: oklch(22% 0.02 60); }
.wa__form input:disabled { background: oklch(92% 0.005 85); }
.wa__form input:focus-visible { outline: 2px solid oklch(46% 0.1 160); outline-offset: 1px; }
.wa__form button { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; background: oklch(40% 0.1 165); color: #fff; }
.wa__form button:disabled { background: oklch(70% 0.01 85); cursor: default; }
.sim__ctrl { margin: 1.2rem 0 .4rem; }
.sim__nota { margin: 0 auto; max-width: 46rem; font-size: .9rem; color: var(--real-txt-2); }

@media (max-width: 62rem) {
  .sim { grid-template-columns: 1fr; height: auto; }
  .crm { height: 26rem; }
  .wa { height: 30rem; }
  .crm__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .crm__ficha { order: -1; border-left: 0; border-bottom: 1px solid var(--c-borde); padding: .5rem 1rem; overflow: visible; }
  .crm__ficha-t { display: none; }
  .crm__ficha dl { grid-template-columns: repeat(2, auto); gap: .2rem .8rem; justify-content: space-between; }
  .crm__ficha dl > div:nth-child(1), .crm__ficha dl > div:nth-child(3), .crm__ficha dl > div:nth-child(4) { display: none; }
  .crm__ficha dt { display: inline; margin-right: .3rem; }
  .crm__ficha dd { display: inline; font-size: .85rem; }
  .est-titulo { font-size: 1.3rem; margin-bottom: .1rem; }
}

/* ---------- 2. Reel → carga → informe ---------- */
.an { position: relative; min-height: min(84svh, 52rem); display: grid; align-items: center; justify-items: center; isolation: isolate; }
.an::before { content: ""; position: absolute; inset: -2rem; z-index: -1; background: radial-gradient(40rem 26rem at 50% 45%, oklch(40% 0.14 295 / .35), transparent 70%); pointer-events: none; }
.an__fase { width: 100%; display: grid; justify-items: center; gap: 1.2rem; animation: est-entra .45s both; }
.an__fase[hidden] { display: none; }
.tel { width: min(21rem, 52svh, 100%); display: grid; border: 7px solid oklch(30% 0.01 60); border-radius: 38px; background: #000; box-shadow: 0 0 0 1px oklch(93% 0.02 85 / .3), 0 30px 80px oklch(0% 0 0 / .6); overflow: hidden; }
.tel__pantalla { position: relative; aspect-ratio: 9 / 16; color: #fff; overflow: hidden; }
.tel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.ig__sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0% 0 0 / .45), transparent 18%, transparent 55%, oklch(0% 0 0 / .75)); }
.ig__top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; pointer-events: none; }
.ig__top b { font: 700 1.25rem/1 system-ui, sans-serif; }
.tel svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tel__centro { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 0; cursor: pointer; background: oklch(0% 0 0 / .55); color: #fff; display: grid; place-items: center; }
.tel__centro[hidden] { display: none; }
.tel__centro svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.ig__riel { position: absolute; right: .35rem; bottom: 6.6rem; display: grid; justify-items: center; gap: .55rem; }
.ig__riel button { background: none; border: 0; color: #fff; cursor: pointer; display: grid; justify-items: center; gap: .1rem; min-width: 44px; min-height: 44px; font: 600 .7rem/1 system-ui, sans-serif; }
.ig__ico { display: grid; place-items: center; width: 44px; height: 38px; }
.ig__pie { position: absolute; left: 0; right: 3.6rem; bottom: 2.4rem; padding: 0 .8rem; display: grid; gap: .4rem; font: 400 .85rem/1.3 system-ui, sans-serif; }
.ig__pie p { margin: 0; }
.ig__user { display: flex; align-items: center; gap: .5rem; }
.ig__user b { font-weight: 600; }
.ig__av { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, oklch(70% .2 40), oklch(55% .25 340)); font: 700 .85rem system-ui, sans-serif; }
.ig__seg { border: 1px solid #fff; border-radius: 6px; padding: .1rem .55rem; font-size: .8rem; font-weight: 600; }
.ig__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig__audio { display: flex; align-items: center; gap: .35rem; font-size: .8rem; opacity: .95; }
.ig__audio svg { width: .95rem; height: .95rem; }
.tel__barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .1rem; padding: 0 .5rem 0 .2rem; }
.tel__barra button { width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.tel__barra svg { width: 1.2rem; height: 1.2rem; fill: currentColor; stroke: none; }
.tel__barra input { flex: 1; min-width: 0; accent-color: #fff; height: 44px; background: none; cursor: pointer; }
.ig__nav { display: flex; justify-content: space-around; align-items: center; padding: .6rem .4rem .7rem; background: #000; color: #fff; }
.ig__nav svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig__nav .ig__nav--on { stroke-width: 2.4; }
.ig__perfil { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid #fff; background: oklch(35% .02 60); }
.an__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* pantalla de carga */
.an__fase--carga { gap: 1rem; }
.cargador { position: relative; width: 17rem; height: 17rem; display: grid; place-items: center; }
.cargador__anillo { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.cargador__anillo--a { border-top-color: var(--oro); border-right-color: oklch(70% 0.15 300 / .6); animation: est-gira 2.4s linear infinite; }
.cargador__anillo--b { inset: 1.1rem; border-bottom-color: var(--neon-violeta); border-left-color: oklch(80% 0.12 85 / .5); animation: est-gira 3.6s linear infinite reverse; }
.cargador__tel { position: relative; width: 6.6rem; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; border: 3px solid oklch(20% 0.01 60); box-shadow: 0 0 40px oklch(60% 0.2 295 / .5); }
.cargador__tel img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.cargador__calor { position: absolute; border-radius: 50%; filter: blur(10px); mix-blend-mode: screen; animation: est-pulso 1.8s ease-in-out infinite; }
.cargador__calor--1 { width: 46%; height: 30%; left: 28%; top: 16%; background: oklch(70% 0.25 25 / .8); }
.cargador__calor--2 { width: 34%; height: 22%; left: 12%; top: 52%; background: oklch(80% 0.18 85 / .75); animation-delay: .5s; }
.cargador__calor--3 { width: 30%; height: 20%; left: 56%; top: 66%; background: oklch(65% 0.22 300 / .8); animation-delay: 1s; }
.cargador__barrido { position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(transparent, oklch(90% 0.15 90 / .85), transparent); animation: est-barrido 1.8s ease-in-out infinite; }
@keyframes est-gira { to { transform: rotate(360deg); } }
@keyframes est-pulso { 50% { transform: scale(1.4); opacity: .5; } }
@keyframes est-barrido { to { top: 100%; } }
.carga__pct { margin: 0; font: 300 clamp(3.4rem, 9vw, 5.6rem)/1 "Fraunces", Georgia, serif; color: var(--real-txt); font-variant-numeric: tabular-nums; }
.carga__pct span { color: var(--oro); font-size: .5em; margin-left: .1em; }
.carga__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; width: min(100%, 24rem); }
.carga__lista li { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; color: var(--real-txt-2); opacity: .55; transition: opacity .3s, color .3s; }
.carga__lista li::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid currentColor; flex: none; transition: background .3s, border-color .3s; }
.carga__lista li.ahora { opacity: 1; color: var(--real-txt); }
.carga__lista li.ahora::before { border-color: var(--oro); animation: est-pulso 1s ease-in-out infinite; }
.carga__lista li.ok { opacity: 1; color: var(--real-txt); }
.carga__lista li.ok::before { background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201810' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--oro); }

/* informe */
.an__fase--informe { align-self: stretch; align-content: start; gap: .6rem; }
.informe__barra { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.an__fase--informe iframe { width: 100%; height: min(80svh, 52rem); border: 0; background: #fff; border-radius: 8px; }
.an__fase--informe:focus { outline: none; }
.an__fase--informe:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* subir mi reel */
.an__fase--subir { max-width: 34rem; }
.subir { width: 100%; display: grid; gap: 1rem; }
.subir__zona { display: grid; justify-items: center; gap: .6rem; padding: 2.2rem 1rem; border: 2px dashed oklch(93% 0.02 85 / .4); text-align: center; cursor: pointer; color: var(--real-txt-2); position: relative; transition: border-color .2s, background .2s; }
.subir__zona:hover, .subir__zona.arrastra, .subir__zona:focus-within { border-color: var(--oro); background: oklch(25% 0.04 70 / .35); }
.subir__zona svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oculto-foco { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.subir__ok { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--real-txt-2); text-align: left; }
.subir__ok input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--oro); flex: none; }
.subir__error { margin: 0; color: oklch(78% 0.14 55); font-weight: 500; }
.subir__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* ---------- 3. Flujo: cinco escenas en una sola pantalla ---------- */
.flujo { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: center; width: 100%; padding: clamp(1.2rem, 3vw, 2.4rem) 0 !important; overflow: hidden; isolation: isolate; }
.flujo__fondo { position: absolute; inset: 0; z-index: -1; background: oklch(11% 0.02 280); }
.flujo__fondo::before, .flujo__fondo::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .45; animation: est-deriva 20s ease-in-out infinite alternate; }
.flujo__fondo::before { background: oklch(40% 0.2 295 / .6); left: -15vmax; top: -20vmax; }
.flujo__fondo::after { background: oklch(55% 0.16 70 / .4); right: -20vmax; bottom: -25vmax; animation-duration: 26s; }
@keyframes est-deriva { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.flujo__cont { width: 100%; text-align: center; display: grid; gap: .7rem; justify-items: center; }
.fl-h { margin: 0; font: 350 clamp(1.5rem, 3.4vw, 2.6rem)/1.1 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; }
.fl-h em { color: var(--oro); font-style: italic; }
.fl-sub { margin: 0; max-width: 44rem; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.35; color: var(--real-txt-2); }
.fl-nota { margin: 0; font-size: .9rem; color: var(--real-txt-2); max-width: 44rem; }

/* escenario */
.escena { position: relative; width: 100%; height: clamp(24rem, 58svh, 36rem); border: 1px solid oklch(93% 0.02 85 / .14); border-radius: 22px; background: oklch(9% 0.02 285 / .7); overflow: hidden; }
.esc { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; text-align: center; padding: 1.2rem 1rem 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s .6s; }
.esc.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.esc__tit { display: grid; gap: .2rem; justify-items: center; }
.esc__k { margin: 0; font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); font-weight: 600; }
.esc__tit h3 { margin: 0; font: 350 clamp(1.7rem, 4vw, 3.2rem)/1.05 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; max-width: 22ch; }
.esc__tit p:not(.esc__k) { margin: 0; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--real-txt-2); }
.esc__arte { position: relative; width: 100%; height: 100%; min-height: 0; }
.esc.on .esc__tit > * { animation: e-entra .7s both; }
.esc.on .esc__tit h3 { animation-delay: .1s; } .esc.on .esc__tit p:not(.esc__k) { animation-delay: .25s; }
@keyframes e-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
@keyframes e-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; } }

/* escena 1: tú grabas */
.e1 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 3rem); padding-top: .8rem; }
.e1__guia { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; justify-self: end; text-align: left; }
.e1__guia li { padding: .5rem .9rem; border-left: 3px solid var(--oro); background: oklch(20% 0.04 285 / .8); font-size: 1.05rem; }
.esc1.on .e1__guia li { animation: e-entra .6s both; }
.esc1.on .e1__guia li:nth-child(1) { animation-delay: .5s; } .esc1.on .e1__guia li:nth-child(2) { animation-delay: 1.2s; } .esc1.on .e1__guia li:nth-child(3) { animation-delay: 1.9s; }
.e1__visor { position: relative; height: min(100%, 17rem); aspect-ratio: 9 / 14; border-radius: 16px; background: radial-gradient(circle at 50% 40%, oklch(28% 0.06 285), oklch(12% 0.02 285)); overflow: hidden; display: grid; place-items: center; }
.e1__esq { position: absolute; width: 1.3rem; height: 1.3rem; border: 3px solid #fff; }
.e1__esq--a { top: .6rem; left: .6rem; border-right: 0; border-bottom: 0; } .e1__esq--b { top: .6rem; right: .6rem; border-left: 0; border-bottom: 0; }
.e1__esq--c { bottom: .6rem; left: .6rem; border-right: 0; border-top: 0; } .e1__esq--d { bottom: .6rem; right: .6rem; border-left: 0; border-top: 0; }
.e1__yo svg { width: 5rem; height: 5rem; fill: none; stroke: oklch(80% 0.04 85 / .55); stroke-width: 1.4; }
.e1__rec { position: absolute; top: 1.2rem; left: 1.4rem; display: flex; align-items: center; gap: .4rem; font: 700 .85rem/1 system-ui, sans-serif; letter-spacing: .06em; opacity: 0; }
.e1__rec b { width: .7rem; height: .7rem; border-radius: 50%; background: oklch(60% 0.25 25); }
.e1__rec time { font-variant-numeric: tabular-nums; }
.esc1.on .e1__rec { animation: e-entra .4s 1.3s both; }
.esc1.on .e1__rec b { animation: e1-parpadea 1s 1.3s steps(2) infinite; }
@keyframes e1-parpadea { 50% { opacity: .15; } }
.e1__boton { justify-self: start; width: 5rem; height: 5rem; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; }
.e1__boton i { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: oklch(38% 0.02 60); }
.esc1.on .e1__boton i { animation: e1-enciende .6s 1.2s both; }
.esc1.on .e1__boton { animation: e1-aro 1.6s 1.4s ease-out infinite; }
@keyframes e1-enciende { from { background: oklch(38% 0.02 60); transform: scale(.8); } 60% { transform: scale(1.12); } to { background: oklch(58% 0.26 25); box-shadow: 0 0 30px oklch(58% 0.26 25 / .8); } }
@keyframes e1-aro { 0% { box-shadow: 0 0 0 0 oklch(58% 0.26 25 / .6); } 100% { box-shadow: 0 0 0 1.6rem transparent; } }

/* escena 2: se fragmenta (video real) */
.e2 { padding-top: .4rem; }
.e2__zona { position: relative; width: 100%; height: 100%; container-type: size; }
.e2__orig, .e2__clip { position: absolute; left: 50%; top: 50%; border-radius: 10px; border: 1px solid oklch(93% 0.02 85 / .45); overflow: hidden; background: #000; box-shadow: 0 8px 28px oklch(0% 0 0 / .5); }
.e2__orig video, .e2__clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.e2__orig { width: 6.4rem; height: 10rem; margin: -5rem 0 0 -3.2rem; z-index: 2; opacity: 0; }
.e2__orig span { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .3rem .3rem; font-size: .85rem; background: linear-gradient(transparent, oklch(0% 0 0 / .8)); }
.e2__clip { width: 3.2rem; height: 5.2rem; margin: -2.6rem 0 0 -1.6rem; opacity: 0; transform: translate(0, 0) scale(.5); }
.esc2.on .e2__orig { animation: e2-orig 2.6s .2s both; }
.esc2.on .e2__clip { animation: e2-sale 1.5s calc(1.8s + var(--k) * .09s) cubic-bezier(.2, .8, .2, 1) both, e2-flota 3s calc(3.4s + var(--k) * .1s) ease-in-out infinite alternate, e2-comprime 1.3s 7.4s ease-in forwards; }
@keyframes e2-orig { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(1) rotate(0); } 70% { transform: translateX(-4px) rotate(-3deg); } 80% { transform: translateX(4px) rotate(3deg); } 90% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes e2-sale { from { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0); } 15% { opacity: 1; } to { opacity: 1; transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)) scale(1) rotate(var(--r)); } }
@keyframes e2-flota { from { margin-top: -2.6rem; } to { margin-top: -3rem; } }
@keyframes e2-comprime { to { opacity: 0; margin-top: -2.6rem; transform: translate(0, 0) scale(.1) rotate(0); } }

/* escena 3: un cerebro revisa cada escena */
.e3 { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .7rem; width: 100%; padding-top: .6rem; }
.e3__estim { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.e3__cer { position: relative; flex: none; width: 2.6rem; height: 2.4rem; display: grid; place-items: center; }
.e3__cer svg { width: 100%; fill: none; stroke: var(--oro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px oklch(70% .16 85 / .7)); }
.e3__cer i { position: absolute; inset: -.3rem; border: 2px solid var(--neon-violeta); border-radius: 50%; opacity: 0; }
.esc3.on .e3__cer i { animation: e3-onda 2s ease-out infinite; }
@keyframes e3-onda { from { opacity: .8; transform: scale(.7); } to { opacity: 0; transform: scale(1.9); } }
.e3__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-width: 52rem; }
.e3__lista li { font-size: .85rem; line-height: 1.2; padding: .22rem .6rem; border: 1px solid oklch(93% 0.02 85 / .3); border-radius: 99px; background: oklch(16% 0.03 285 / .85); opacity: .4; text-align: left; }
.e3__lista b { color: var(--oro); font-weight: 600; }
.esc3.on .e3__lista li { animation: e3-chip 1.3s calc(.9s + var(--k) * 1.25s) both; }
@keyframes e3-chip { 0% { opacity: .4; } 12%, 82% { opacity: 1; border-color: var(--oro); background: oklch(28% .08 85 / .7); transform: translateY(-3px); } 100% { opacity: .75; border-color: oklch(93% 0.02 85 / .3); } }
.e3__fila { position: relative; display: flex; justify-content: center; gap: clamp(.4rem, 1.6vw, 1rem); min-height: 0; height: 100%; }
.e3__col { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 0; }
.e3__cuadro { position: relative; height: calc(100% - 1.5rem); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; border: 2px solid oklch(93% 0.02 85 / .3); background: #000; }
.e3__cuadro video, .e3__cuadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.e3__obj, .e3__calor { opacity: 0; }
.esc3.on .e3__obj { animation: e-fundir .6s calc(1s + var(--k) * 1.75s) both; }
.esc3.on .e3__calor { animation: e-fundir .9s calc(2.3s + var(--k) * 1.75s) both; }
.esc3.on .e3__cuadro { animation: e3-rev .6s calc(2.3s + var(--k) * 1.75s) both; }
@keyframes e-fundir { to { opacity: 1; } }
@keyframes e3-rev { to { border-color: var(--oro); box-shadow: 0 0 24px oklch(78% .16 85 / .7); } }
.e3__col figcaption { position: relative; width: 100%; height: 1.2rem; font-size: .8rem; color: var(--real-txt-2); white-space: nowrap; }
.e3__col figcaption span { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; }
.e3__l1 { opacity: 1 !important; }
.esc3.on .e3__l1 { animation: e3-sale .4s calc(1s + var(--k) * 1.75s) both; }
.esc3.on .e3__l2 { animation: e3-medio 1.3s calc(1s + var(--k) * 1.75s) both; color: var(--real-txt); }
.esc3.on .e3__l3 { animation: e-entra .4s calc(2.3s + var(--k) * 1.75s) both; color: var(--oro); font-weight: 600; }
@keyframes e3-sale { to { opacity: 0 !important; } }
@keyframes e3-medio { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
.e3__haz { position: absolute; top: 0; bottom: 1.4rem; left: 0; width: 3px; background: var(--oro); box-shadow: 0 0 18px 4px oklch(78% .16 85 / .8); opacity: 0; border-radius: 2px; z-index: 3; }
.esc3.on .e3__haz { animation: e3-barre 8.8s .9s linear both; }
@keyframes e3-barre { 0% { opacity: 1; left: 0; } 98% { opacity: 1; } 100% { opacity: 0; left: 100%; } }

/* escena 4: se publican, un celular por subcuenta */
.e4 { display: grid; place-items: center; padding-top: .4rem; }
.e4__zona { position: relative; width: min(40rem, 100%); height: 100%; container-type: size; }
.e4__hilos { position: absolute; inset: 0; width: 100%; height: 100%; }
.e4__hilos path { stroke: var(--oro); stroke-width: 2; fill: none; stroke-dasharray: 6 7; opacity: .7; vector-effect: non-scaling-stroke; }
.e4__nodo--c { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%); min-width: 6.4rem; padding: .5rem .9rem; border-radius: 99px; text-align: center; font-size: 1rem; font-weight: 600; background: oklch(28% .09 295); border: 2px solid var(--oro); z-index: 3; }
.e4__tel { position: absolute; top: 22%; left: calc(12.5% + (var(--n) - 1) * 25%); height: 62%; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.e4__pant { position: relative; width: 100%; height: 100%; border: 4px solid oklch(30% 0.01 60); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 8px 26px oklch(0% 0 0 / .55); }
.e4__pant video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.e4__top, .e4__usr { position: absolute; left: .4rem; color: #fff; font: 700 .62rem/1 system-ui, sans-serif; text-shadow: 0 1px 4px #000; }
.e4__top { top: .4rem; font-size: .7rem; } .e4__usr { bottom: .4rem; font-weight: 600; }
.e4__pub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .15rem; white-space: nowrap; font-size: .8rem; color: oklch(80% .16 150); opacity: 0; }
.e4__nom { display: none; }
.esc4.on .e4__tel { animation: e4-pop .6s calc(.3s + var(--n) * .2s) both; }
@keyframes e4-pop { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.7); } to { opacity: 1; transform: translateX(-50%); } }
.esc4.on .e4__pub { animation: e-entra .4s calc(2.5s + var(--n) * .5s) both; }
.e4__bala { position: absolute; left: 50%; top: 8%; width: 1.1rem; height: 1.8rem; margin: -.9rem 0 0 -.55rem; border-radius: 4px; background: linear-gradient(160deg, oklch(70% .2 295), oklch(60% .2 40)); opacity: 0; z-index: 4; }
.e4__bala--1 { --bx: -37.5cqw; --by: 40cqh; --n: 1; } .e4__bala--2 { --bx: -12.5cqw; --by: 40cqh; --n: 2; } .e4__bala--3 { --bx: 12.5cqw; --by: 40cqh; --n: 3; } .e4__bala--4 { --bx: 37.5cqw; --by: 40cqh; --n: 4; }
.esc4.on .e4__bala { animation: e4-vuela 1.3s calc(1.5s + var(--n) * .5s) cubic-bezier(.45, 0, .2, 1) both; }
@keyframes e4-vuela { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.9); } }

/* escena 5: Susana atiende */
.e5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-content: center; padding: .8rem 0 0; }
.e5__post { display: grid; gap: .5rem; align-content: start; justify-items: start; text-align: left; padding: 1rem; border-radius: 16px; border: 1px solid oklch(93% 0.02 85 / .25); background: oklch(17% 0.03 285 / .9); }
.e5__post b { color: var(--oro); font-size: 1.1rem; }
.e5__c, .e5__r { font-size: 1rem; line-height: 1.3; padding: .45rem .8rem; border-radius: 12px; opacity: 0; max-width: 92%; }
.e5__c { background: #fff; color: oklch(22% 0.02 60); border-bottom-left-radius: 3px; }
.e5__r { background: oklch(46% 0.2 295); color: #fff; justify-self: end; border-bottom-right-radius: 3px; }
.esc5.on .e5__post { animation: e-entra .6s calc(.1s + var(--p, 0) * .2s) both; }
.e5__post--2 { --p: 1; --t: 1; } .e5__post--3 { --p: 2; --t: 2; } .e5__post--1 { --t: 0; }
.esc5.on .e5__c { animation: e-pop .5s calc(1.2s + var(--t) * 1.8s) both; }
.esc5.on .e5__r { animation: e-pop .5s calc(2.6s + var(--t) * 1.8s) both; }

/* controles */
.cine__ctrl { width: 100%; display: flex; align-items: center; gap: .8rem; }
.cine__pp { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; font: inherit; font-size: .95rem; color: var(--real-txt); background: transparent; border: 1px solid oklch(93% 0.02 85 / .35); border-radius: 99px; cursor: pointer; }
.cine__pp svg { width: 1rem; height: 1rem; fill: currentColor; }
.cine__seg { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.cine__seg button { width: 100%; min-height: 44px; display: grid; align-content: center; gap: .35rem; padding: 0; background: none; border: 0; color: var(--real-txt-2); font: inherit; font-size: .95rem; cursor: pointer; text-align: left; }
.cine__seg li.on button { color: var(--real-txt); }
.cine__seg i { display: block; height: 4px; border-radius: 2px; background: oklch(93% 0.02 85 / .18); overflow: hidden; position: relative; }
.cine__seg i::after { content: ""; position: absolute; inset: 0; background: var(--oro); transform: scaleX(0); transform-origin: left; }
.cine__seg li.on i::after { animation: cine-prog var(--d) linear both; }
@keyframes cine-prog { to { transform: scaleX(1); } }
.cine--pausa .esc *, .cine--pausa .cine__seg i::after { animation-play-state: paused !important; }
.cine__pp:focus-visible, .cine__seg button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

@media (max-width: 52rem) {
  .escena { height: clamp(26rem, 64svh, 34rem); }
  .e1 { grid-template-columns: auto auto; justify-content: center; }
  .e1__guia { display: none; }
  .e1__boton { width: 4rem; height: 4rem; } .e1__boton i { width: 2.8rem; height: 2.8rem; }
  .e5 { grid-template-columns: 1fr; gap: .4rem; }
  .e5__post { grid-template-columns: auto 1fr; padding: .5rem .7rem; gap: .2rem .6rem; align-items: center; }
  .e5__post b { grid-row: span 2; font-size: .95rem; }
  .e5__c, .e5__r { font-size: .85rem; padding: .25rem .6rem; }
  .esc__tit p:not(.esc__k):not(.esc__sello) { display: none; }
  .cine__pp span { display: none; } .cine__pp { padding: 0 .7rem; }
  .cine__seg button { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flujo__fondo::before, .flujo__fondo::after, .esc3.on .e3__cerebro i, .esc1.on .e1__boton, .esc1.on .e1__rec b, .e2__clip { animation-iteration-count: 1 !important; }
  .esc2.on .e2__clip { animation: e2-sale 1.5s calc(1.8s + var(--k) * .09s) cubic-bezier(.2, .8, .2, 1) both, e2-comprime 1.3s 6.9s ease-in forwards; }
}

/* ---------- tarjetas y planes ---------- */
.est-pares { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 44rem; }
@media (min-width: 40rem) { .est-pares { grid-template-columns: 1fr 1fr; } }
.est-par svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--oro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.est-par { border: 1px solid oklch(93% 0.02 85 / .16); padding: 1rem 1.2rem; }
.est-par h3 { margin: .4rem 0 .2rem; font-size: 1.1rem; font-weight: 500; }
.est-par p { margin: 0; color: var(--real-txt-2); }
.est-par--pend { border-style: dashed; }
.est-dos-sec { padding-block: clamp(2rem, 5vw, 3rem); }
.est-planes-sec .envoltura { text-align: center; }
.est-planes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 40rem) { .est-planes { grid-template-columns: repeat(4, 1fr); } }
.est-plan { display: grid; gap: .2rem; padding: 1rem .5rem; border: 1px solid oklch(93% 0.02 85 / .2); color: var(--real-txt); text-decoration: none; min-height: 44px; transition: border-color .2s, transform .2s; }
.est-plan:hover { border-color: var(--oro); }
.est-plan:active { transform: scale(.97); }
.est-plan b { font-weight: 500; }
.est-plan small { color: var(--real-txt-2); font-size: .8rem; line-height: 1.25; }
.est-plan span { font: 400 1.25rem/1.1 "Fraunces", Georgia, serif; color: var(--oro); }
.est-planes-sec .boton { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .fl-cinta__pista, .flujo__fondo::before, .flujo__fondo::after { animation: none; }
  .m, .an__fase { animation: none; }
  .cargador__anillo, .cargador__calor, .cargador__barrido, .carga__lista li.ahora::before, .flujo__fondo::before, .flujo__fondo::after { animation: none; }
  .cargador__barrido { top: 40%; }
}

@media (max-width: 52rem) {
  .e3__col:nth-of-type(n+4) { display: none; }
  .e3__lista li:nth-child(n+5) { display: none; }
  .e3__lista li { font-size: .75rem; }
  .e2__clip:nth-child(n+10) { display: none; }
  .e4__usr, .e4__top { font-size: .55rem; }
}

/* escena 4: celulares sin video */
.e4__fondo { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, oklch(45% .16 295), transparent 60%), linear-gradient(170deg, oklch(24% .06 285), oklch(14% .03 285)); }
.e4__play { position: absolute; left: 50%; top: 50%; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border-radius: 50%; background: oklch(100% 0 0 / .16); }
.e4__play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-left: .5rem solid #fff; border-top: .32rem solid transparent; border-bottom: .32rem solid transparent; }