/* ============================================================
   MOVEO · Anuncio lateral — componente autónomo
   Todo va bajo .mv-ann (no choca con tus estilos).
   Dos modos:  type:"platform" -> logo MOVEO  ·  type:"coach" -> foto
   ============================================================ */
.mv-ann, .mv-ann *{ box-sizing:border-box; }

.mv-ann{
  /* tokens MOVEO (aislados) */
  --mv-sand:#F2EBDE; --mv-sand2:#E8DFCC; --mv-sand3:#D8CDB6; --mv-paper:#F7F2E9;
  --mv-ink:#1A1A1A; --mv-espresso:#3F352B; --mv-taupe:#A89B85; --mv-olive:#6B6A4E;
  --mv-rule:#C9BFAD; --mv-gold:#B8924A;
  --mv-serif:'Cormorant Garamond',Garamond,serif;
  --mv-sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --mv-mono:'JetBrains Mono',ui-monospace,monospace;
  --mv-ease:cubic-bezier(.22,1,.36,1);

  position:fixed; z-index:1200;
  width:286px; max-width:calc(100% - 40px);
  font-family:var(--mv-sans); font-weight:300;
  opacity:0; pointer-events:none;
  transition:transform .7s var(--mv-ease), opacity .5s var(--mv-ease);
  will-change:transform,opacity;
}
.mv-ann.mv-show{ opacity:1; pointer-events:auto; }

/* ---- posiciones ---- */
.mv-ann[data-pos="right"]{ right:20px; top:50%; transform:translateY(-50%) translateX(135%); }
.mv-ann[data-pos="right"].mv-show{ transform:translateY(-50%) translateX(0); }
.mv-ann[data-pos="left"]{ left:20px; top:50%; transform:translateY(-50%) translateX(-135%); }
.mv-ann[data-pos="left"].mv-show{ transform:translateY(-50%) translateX(0); }

.mv-ann__card{
  position:relative; overflow:hidden; border-radius:16px; padding:15px 16px 16px;
  background:linear-gradient(160deg, rgba(247,242,233,.96), rgba(232,223,204,.96));
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);
  border:1px solid var(--mv-rule);
  box-shadow:0 26px 50px -28px rgba(26,26,26,.55);
}
.mv-ann__top{ display:flex; align-items:center; gap:13px; position:relative; z-index:2; }

.mv-ann__icon{
  position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--mv-ink) center/cover no-repeat; display:grid; place-items:center;
  border:2px solid #fff; box-shadow:0 4px 12px -5px rgba(60,45,20,.5);
}
.mv-ann__icon.is-coach{ background-color:var(--mv-sand3); }
.mv-ann__icon .mv-ann__mk{ width:24px; height:24px; color:var(--mv-sand); display:grid; place-items:center; }
.mv-ann__icon.is-coach .mv-ann__mk{ display:none; }
.mv-ann__icon .mv-ann__mk svg{ width:100%; height:100%; }
/* ondas alrededor del icono */
.mv-ann__icon .mv-onda{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--mv-olive); opacity:0; z-index:-1; }
.mv-ann.mv-show .mv-ann__icon .mv-onda{ animation:mv-onda 2.6s var(--mv-ease) infinite; }
.mv-ann.mv-show .mv-ann__icon .mv-onda:nth-child(2){ animation-delay:1.3s; }
@keyframes mv-onda{ 0%{transform:scale(.6);opacity:.55} 80%{opacity:0} 100%{transform:scale(2);opacity:0} }

.mv-ann__eyebrow{ font-family:var(--mv-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mv-gold); display:block; }
.mv-ann__title{ font-family:var(--mv-serif); font-weight:500; font-size:1.3rem; line-height:1.05; color:var(--mv-ink); margin:2px 0 0; }
.mv-ann__text{ font-size:12.5px; line-height:1.45; color:var(--mv-espresso); margin:10px 0 0; position:relative; z-index:2; max-width:32ch; }

.mv-ann__close{
  position:absolute; top:9px; right:9px; z-index:3; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--mv-rule); background:rgba(255,255,255,.55); color:var(--mv-espresso);
  font-size:13px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0;
}

/* ondas: ola animada inferior */
.mv-ann__wave{ position:absolute; left:0; right:0; bottom:-2px; height:32px; opacity:.5; pointer-events:none; }
.mv-ann__wave svg{ width:200%; height:100%; animation:mv-wave 7s linear infinite; }
@keyframes mv-wave{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* barra de progreso */
.mv-ann__bar{ position:absolute; left:0; bottom:0; height:3px; background:var(--mv-olive); width:0; z-index:3; }
.mv-ann.mv-show .mv-ann__bar{ animation:mv-bar var(--mv-dur,5s) linear forwards; }
@keyframes mv-bar{ from{width:0} to{width:100%} }

/* puntos */
.mv-ann__dots{ display:flex; gap:6px; margin-top:12px; position:relative; z-index:2; }
.mv-ann__dots i{ width:6px; height:6px; border-radius:50%; background:var(--mv-rule); transition:all .3s var(--mv-ease); }
.mv-ann__dots i.on{ background:var(--mv-ink); width:18px; border-radius:4px; }

/* móvil: abajo, deslizando desde abajo */
@media (max-width:680px){
  .mv-ann[data-pos]{ left:14px; right:14px; top:auto; bottom:14px; width:auto; transform:translateY(135%); }
  .mv-ann[data-pos].mv-show{ transform:translateY(0); }
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  .mv-ann__card{
    background:linear-gradient(160deg, rgba(38,33,28,.97), rgba(28,24,20,.97)) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  .mv-ann__title{ color:#F2EBDE !important; }
  .mv-ann__text{ color:#C4B99A !important; }
  .mv-ann__close{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.15) !important; color:#F2EBDE !important; }
}
/* Body class override (MOVEO theme toggle) */
body.dark .mv-ann__card,
html[data-theme='dark'] .mv-ann__card{
  background:linear-gradient(160deg, rgba(38,33,28,.97), rgba(28,24,20,.97)) !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.dark .mv-ann__title, html[data-theme='dark'] .mv-ann__title{ color:#F2EBDE !important; }
body.dark .mv-ann__text, html[data-theme='dark'] .mv-ann__text{ color:#C4B99A !important; }
body.dark .mv-ann__close, html[data-theme='dark'] .mv-ann__close{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:#F2EBDE !important;
}
@media (prefers-reduced-motion:reduce){
  .mv-ann, .mv-ann *{ animation:none !important; transition-duration:.001ms !important; }
  .mv-ann[data-pos]{ transform:none; }
  .mv-ann[data-pos="right"]{ right:20px; top:50%; transform:translateY(-50%); }
  .mv-ann[data-pos="left"]{ left:20px; top:50%; transform:translateY(-50%); }
}