/* /mimesis: copiar la edición de un vídeo de referencia (web/i18n/<l>/paginas/mimesis.html).
   Hero en dos columnas con una ilustración en CSS de dos vídeos: la referencia (ritmo de cortes, zooms, subtítulos y luz)
   y el tuyo, que pasa de crudo a editado igual. Todo es ilustración: no hay resultados ni imágenes generadas. */
.ms-cab{padding:48px 0 0;display:grid;gap:40px;align-items:center}
@media (min-width:980px){.ms-cab{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;padding-top:64px}}
.ms-txt{min-width:0}
.ms-txt h1{font:800 clamp(42px,6.4vw,76px)/.95 var(--display);letter-spacing:-.05em;margin:16px 0 0;text-wrap:balance}
.ms-txt h1 .serif{display:block;font-size:.72em;letter-spacing:-.04em;margin-top:.16em;color:var(--acc-txt)}
.ms-txt>p{color:var(--muted);font-size:clamp(17px,2vw,19px);max-width:54ch;margin:20px 0 0;text-wrap:pretty}
.ms-txt .eti::before{animation:msLatido 1.6s ease-in-out infinite}
@keyframes msLatido{50%{transform:scale(1.6);opacity:.5}}

/* ---------- Ilustración: referencia → tu vídeo ---------- */
.ms-vis{margin:0;min-width:0}
.ms-vis figcaption{margin-top:12px;font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim);text-align:center}
.ms-escena{--d:9s;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;
  padding:22px;border-radius:24px;background:radial-gradient(120% 90% at 50% 0%,rgba(61,90,254,.28),transparent 60%),#0A0F1E;border:1px solid #223052;
  box-shadow:0 40px 100px -40px rgba(61,90,254,.45);overflow:hidden;isolation:isolate}
.ms-escena::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(138,156,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(138,156,255,.07) 1px,transparent 1px);background-size:28px 28px}
.ms-tel{min-width:0;display:grid;gap:8px}
.ms-rot{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A3AECB;display:flex;align-items:center;gap:6px}
.ms-rot::before{content:"";width:6px;height:6px;border-radius:50%;background:#7582A6}
.ms-ref .ms-rot::before{background:#FF5C7A}
.ms-tuyo .ms-rot::before{background:#3D5AFE}
.ms-pant{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid #2E3E66;
  background:radial-gradient(70% 45% at 70% 22%,rgba(255,170,120,.55),transparent 70%),linear-gradient(180deg,#3B2F7A 0%,#1A2A80 52%,#0B1230 100%)}
.ms-zoom{position:absolute;inset:0;transform-origin:50% 40%}
.ms-fig{position:absolute;left:0;right:0;bottom:0;width:100%;height:74%;fill:rgba(10,15,30,.82);stroke:rgba(238,242,255,.55);stroke-width:1.4}
.ms-fmt{position:absolute;top:8px;right:8px;font:500 9.5px var(--mono);letter-spacing:.06em;color:#EEF2FF;background:rgba(10,15,30,.6);border:1px solid rgba(238,242,255,.18);padding:3px 6px;border-radius:6px}
.ms-sub{position:absolute;left:6%;right:6%;top:72%;text-align:center;line-height:1.05;color:#fff;transition:none}
.ms-viral{font:900 clamp(12px,1.55vw,17px)/1.05 Montserrat,var(--f);letter-spacing:-.01em;-webkit-text-stroke:.6px #000;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.7)}
.ms-viral em{font-style:normal;color:#FFE14D}
.ms-plano{font:500 clamp(10px,1.1vw,12px)/1.2 Inter,var(--f);color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ms-scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,transparent,rgba(138,156,255,.35) 85%,#8A9CFF);border-bottom:1.5px solid #8A9CFF;
  animation:msScan var(--d) linear infinite;pointer-events:none}
@keyframes msScan{0%{transform:translateY(-100%);opacity:0}4%{opacity:1}30%{transform:translateY(460%);opacity:1}34%,100%{transform:translateY(460%);opacity:0}}
/* Línea de tiempo: la referencia con sus cortes; la tuya, con los silencios (coral) que se quitan */
.ms-tl{display:flex;gap:3px;height:12px}
.ms-tl i{flex:1 1 0;border-radius:3px;background:#3D5AFE;position:relative}
.ms-ref .ms-tl i{background:#5A6FE0}
.ms-tl2 b{flex:0 0 14%;border-radius:3px;background:repeating-linear-gradient(135deg,rgba(255,92,122,.95) 0 3px,rgba(255,92,122,.45) 3px 6px);animation:msHueco var(--d) ease-in-out infinite}
.ms-tl2 i{background:#7582A6;animation:msVoz var(--d) ease-in-out infinite}
@keyframes msHueco{0%,34%{flex-basis:14%;opacity:1}46%,92%{flex-basis:0%;opacity:0;margin-left:-3px}100%{flex-basis:14%;opacity:1}}
@keyframes msVoz{0%,40%{background:#7582A6}48%,92%{background:#3D5AFE}100%{background:#7582A6}}
/* La referencia: zooms de golpe en sus cortes, todo el rato */
.ms-ref .ms-zoom{animation:msPunch calc(var(--d) / 3) steps(1,end) infinite}
@keyframes msPunch{0%{transform:scale(1)}50%{transform:scale(1.14)}}
/* Tu vídeo: luz apagada → igualada, subtítulo plano → el de la referencia, y zooms en los cortes */
.ms-tuyo .ms-pant{animation:msLuz var(--d) ease-in-out infinite}
@keyframes msLuz{0%,46%{filter:saturate(.25) brightness(.72) contrast(.9)}58%,92%{filter:none}100%{filter:saturate(.25) brightness(.72) contrast(.9)}}
.ms-tuyo .ms-zoom{animation:msPunch2 var(--d) steps(1,end) infinite}
@keyframes msPunch2{0%,62%{transform:scale(1)}62.1%,74%{transform:scale(1.14)}74.1%,86%{transform:scale(1)}86.1%,96%{transform:scale(1.14)}96.1%,100%{transform:scale(1)}}
.ms-tuyo .ms-plano{animation:msFuera var(--d) ease infinite}
.ms-tuyo .ms-viral{animation:msDentro var(--d) cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes msFuera{0%,50%{opacity:1;transform:none}54%,96%{opacity:0;transform:translateY(-4px)}100%{opacity:1}}
@keyframes msDentro{0%,52%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1.08)}62%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(1)}}
/* Lo que pasa de una a otra */
.ms-flujo{display:grid;gap:6px;justify-items:center;color:#8A9CFF}
.ms-chip{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:5px 8px;border-radius:99px;
  color:#A3AECB;background:rgba(18,26,48,.9);border:1px solid #2E3E66;animation:msChip var(--d) ease infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes msChip{0%,8%{opacity:.45;transform:translateX(-8px)}14%,88%{opacity:1;transform:none;color:#fff;background:#3D5AFE;border-color:#3D5AFE}96%,100%{opacity:.45;transform:translateX(-8px)}}
.ms-flecha{width:40px;height:12px;margin-top:4px}
@media (max-width:620px){
  .ms-escena{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:16px}
  .ms-flujo{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .ms-flecha{display:none}
  .ms-chip{font-size:9.5px;padding:4px 7px}
}
@media (prefers-reduced-motion:reduce){
  .ms-escena *,.ms-txt .eti::before{animation:none!important}
  .ms-tuyo .ms-plano,.ms-scan{opacity:0}
  .ms-tuyo .ms-viral{opacity:1}
  .ms-tl2 b{flex-basis:0;opacity:0;margin-left:-3px}
  .ms-tl2 i{background:#3D5AFE}
  .ms-chip{color:#fff;background:#3D5AFE;border-color:#3D5AFE}
}

/* ---------- Qué copia y qué no ---------- */
.ms-que{display:grid;gap:14px;margin-top:32px}
@media (min-width:860px){.ms-que{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.ms-col{padding:26px}
.ms-col h3{margin:0 0 6px;font:800 22px var(--display);letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.ms-col h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}
.ms-no h3::before{background:var(--dim)}
.ms-col ul{list-style:none;margin:0;padding:0;display:grid}
.ms-col li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.ms-col li:first-child{border-top:0}
.ms-col li>svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--acc-txt)}
.ms-no li>svg{color:var(--dim)}
.ms-col li span{color:var(--muted);font-size:15.5px;line-height:1.5;min-width:0}
.ms-col li b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:2px}
.ms-priv{display:flex;gap:10px;margin:14px 0 0;padding:14px;border-radius:14px;background:var(--acc-soft);color:var(--ink);font-size:14.5px;line-height:1.5}
.ms-priv svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--acc-txt)}

/* ---------- Captura real del paso 1 ---------- */
.fig.ms-captura{margin-top:28px;max-width:980px}

/* ---------- Planes (el impulso, solo en el botón de compra) ---------- */
.ms-planes{display:grid;gap:14px;margin-top:32px;max-width:860px}
@media (min-width:720px){.ms-planes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ms-plan{padding:26px;display:grid;align-content:start;gap:6px}
.ms-plan-eti{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.ms-plan h3{margin:2px 0 0;font:800 28px var(--display);letter-spacing:-.035em}
.ms-precio{display:flex;align-items:baseline;gap:8px}
.ms-precio b{font:800 34px var(--display);letter-spacing:-.04em}
.ms-precio span{color:var(--muted)}
.ms-plan small{color:var(--dim);font-size:13px}
.ms-plan ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ms-plan li{display:flex;gap:9px;font-size:15px}
.ms-plan li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--acc-txt)}
.ms-plan li:first-child{font-weight:600}
.ms-comprar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.ms-comprar p{margin:0;color:var(--dim);font-size:14px}
.ms-btn-comprar{background:var(--imp-lima);color:var(--imp-tinta);font-weight:800;box-shadow:0 4px 0 var(--imp-lima-sombra),0 10px 30px -8px rgba(228,255,58,.55)}
.ms-btn-comprar:active{transform:translateY(3px);box-shadow:0 1px 0 var(--imp-lima-sombra)}
.ms-btn-comprar svg{width:18px;height:18px}