/* ════════════════════════════════════════════════════════════════════════
   omb-meet.css — landing de OMB Meet (meet.omb.cloud, 4-nov-2026). Se carga
   encima de style.css y usa SUS tokens (--dark, --dark2, --card-bg, --border,
   --text-muted, --text-dim, --blue, --pink, --primary, --ff-*), igual que
   omb-mail.css. Antes la página traía su propia paleta (rosa #FF60EE, azul
   #0279FF de la identidad anterior) y otra tipografía; aquí no se define un
   solo color de marca propio. Oscuro por omisión; el claro sólo invierte
   superficies (html[data-theme="light"]). La maqueta de la sala se queda
   oscura en los dos temas: una llamada ES oscura.
   ════════════════════════════════════════════════════════════════════════ */

.mt-front { position: relative; z-index: 2; }
.mt-hero { padding: 4.5rem 0 4rem; }
.mt-hero h1 { margin-bottom: 1.4rem; }
.mt-hero .btn-demo-primary,
.mt-cta .btn-cta-main { cursor: pointer; }
.mt-plans { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font-size: .9rem; color: var(--text-muted); }
.mt-plans:hover { color: var(--blue); }
.mt-plans .omb-ic { width: 1rem; height: 1rem; }

/* ── Maqueta de la sala (decorativa, aria-hidden) ───────────────────────── */
.mt-mock {
  --mk-bg: #0D1421; --mk-bd: rgba(255, 255, 255, .09); --mk-ink: rgba(255, 255, 255, .85); --mk-dim: rgba(255, 255, 255, .38);
  background: var(--mk-bg); border: 1px solid var(--mk-bd); border-radius: calc(var(--ui-scale) * 16px);
  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.mt-mock-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--mk-bd); }
.mt-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-bd); }
.mt-mock-title { margin-left: .6rem; font-family: var(--ff-mono); font-size: .72rem; color: var(--mk-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-mock-body { display: flex; }
.mt-mock-stage { flex: 1; min-width: 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-tile { position: relative; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--mk-bd); aspect-ratio: 16 / 10; overflow: hidden; }
.mt-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-tile.is-speaking { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(167, 139, 250, .55); }
.mt-tag { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, .55); border-radius: 30px; padding: 2px 9px; font-size: .66rem; color: var(--mk-ink); }
.mt-mock-side { display: none; width: 172px; border-left: 1px solid var(--mk-bd); padding: 12px; }
.mt-mock-lbl { font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-dim); margin-bottom: 8px; }
.mt-mock-lbl--gap { margin-top: 14px; }
.mt-mock-note { font-size: .62rem; color: var(--mk-dim); line-height: 1.5; }
.mt-person { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: .7rem; color: var(--mk-ink); }
.mt-person-av { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(167, 139, 250, .22); color: #fff; font-size: .55rem; font-weight: 700; }
.mt-mock-bar { display: flex; justify-content: center; gap: 10px; padding: 12px; border-top: 1px solid var(--mk-bd); }
.mt-ctl { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mk-bd); background: rgba(255, 255, 255, .05);
  display: inline-flex; align-items: center; justify-content: center; color: var(--mk-ink); }
.mt-ctl .omb-ic { width: 15px; height: 15px; }
.mt-ctl--leave { width: auto; padding: 0 14px; border-radius: 30px; border-color: transparent; background: rgba(239, 68, 68, .85);
  color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--ff-display); }
@media (min-width: 992px) { .mt-mock-side { display: block; } }

/* ── Franja ─────────────────────────────────────────────────────────────── */
.mt-strip { padding: 1.1rem 0; background: var(--dark2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.mt-strip p { margin: 0; font-size: .9rem; }
.mt-strip strong { color: #fff; font-weight: 600; }

/* ── Declaración y acentos ─────────────────────────────────────────────────
   El acento es el del sitio: lila en Instrument Serif itálica (.hero h1 .accent). */
.mt-page .accent { color: var(--blue); font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mt-statement { padding: 6.5rem 0; text-align: center; position: relative; overflow: hidden; background:
  radial-gradient(120% 160% at 18% -20%, rgba(167, 139, 250, .12), transparent 45%),
  radial-gradient(120% 160% at 85% 120%, rgba(196, 181, 253, .08), transparent 45%), var(--dark); }
.mt-statement h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 1rem; }
.mt-statement p { font-size: 1.15rem; max-width: 40rem; margin: 0 auto; }
/* Texto metálico: el brillo lo mueve el desplazamiento (omb-meet.js → --mt-metal). */
.mt-metal { background: linear-gradient(110deg, #93a1b4 0%, #eef0ff 22%, #a59fc0 45%, #f6f4ff 68%, #93a1b4 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-position: var(--mt-metal, 30%) 0; }

/* ── Secciones ──────────────────────────────────────────────────────────── */
.mt-sec { padding: 5.5rem 0; background: var(--dark); border-top: 1px solid var(--border); }
.mt-sec-alt { background: var(--dark2); }
.mt-head { max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.mt-head p { font-size: 1.02rem; }
.mt-narrow { max-width: 860px; }
.mt-soon { display: inline-block; margin-left: 8px; font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); border-radius: 30px; padding: 2px 9px; vertical-align: 2px; }
.mt-step-num { width: 44px; height: 44px; border-radius: 50%; background: rgba(167, 139, 250, .12); color: var(--blue);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.mt-step-h { font-size: 1.05rem; }
.mt-step-p { font-size: .92rem; }
/* Haz de luz que recorre «Cómo funciona» con el desplazamiento (--mt-sweep). */
.mt-sweep { position: relative; overflow: hidden; }
.mt-sweep::after { content: ''; position: absolute; top: -60%; left: var(--mt-sweep, -45%); width: 46%; height: 220%; pointer-events: none; filter: blur(22px);
  background: linear-gradient(78deg, transparent 32%, rgba(255, 255, 255, .04) 45%, rgba(167, 139, 250, .10) 50%, rgba(196, 181, 253, .05) 55%, transparent 68%); }

/* ── Privacidad: foto a sangre con parallax (--mt-py lo pone omb-meet.js) ── */
.mt-priv { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; border-top: 1px solid var(--border); background: var(--dark); }
.mt-priv-photo { position: absolute; top: -14%; bottom: -14%; right: 0; width: 46%; background: url('/meet/img/anna-tony-wide.jpg?v=2') center 42% / cover no-repeat;
  transform: translateY(var(--mt-py, 0px)); will-change: transform; }
.mt-priv-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark) 0%, transparent 60%); }
.mt-priv-content { position: relative; z-index: 2; padding: 6rem 0; }
.mt-priv-text { max-width: 36rem; }
@media (max-width: 991px) {
  .mt-priv { display: block; min-height: 0; }
  .mt-priv-photo { position: relative; width: 100%; height: 360px; top: 0; bottom: auto; background-position: center 38%; transform: none; }
  .mt-priv-photo::before { background: linear-gradient(0deg, var(--dark) 0%, transparent 45%); }
  .mt-priv-content { padding: 3rem 0 4rem; }
}

/* ── Preguntas (misma pieza que OMB Mail) ──────────────────────────────── */
.mt-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq summary h3 { margin: 0; }
.mt-faq summary .omb-ic { flex: none; color: var(--text-muted); transition: transform .2s; }
.mt-faq[open] summary .omb-ic { transform: rotate(180deg); }
.mt-faq p { margin-top: .7rem; }

.mt-legal { font-size: .8rem; color: var(--text-dim); margin: 1.25rem 0 0; }

/* Entrada suave al hacer scroll: omb-meet.js esconde (.is-wait) sólo lo que
   aún no está a la vista y lo suelta al llegar. Sin JS, todo se ve. */
.mt-up { transition: opacity .7s ease-out, transform .7s ease-out; }
.mt-up.is-wait { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .mt-up, .mt-up.is-wait { opacity: 1; transform: none; transition: none; }
  .mt-sweep::after { display: none; }
}

@media (max-width: 768px) {
  .mt-hero { padding: 3rem 0 2.5rem; }
  .mt-sec { padding: 4rem 0; }
  .mt-statement { padding: 4.5rem 0; }
}

/* ── Tema claro ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .mt-strip strong { color: #0F172A; }
html[data-theme="light"] .mt-mock { box-shadow: 0 24px 60px rgba(15, 23, 42, .18); }
html[data-theme="light"] .mt-metal { background-image: linear-gradient(110deg, #47506f 0%, #8f86b8 22%, #3d3a5c 45%, #a79fd0 68%, #47506f 100%); }
html[data-theme="light"] .mt-statement { background:
  radial-gradient(120% 160% at 18% -20%, rgba(91, 63, 176, .10), transparent 45%),
  radial-gradient(120% 160% at 85% 120%, rgba(167, 139, 250, .10), transparent 45%), var(--dark); }
html[data-theme="light"] .mt-sweep::after { background: linear-gradient(78deg, transparent 30%, rgba(91, 63, 176, .05) 44%, rgba(91, 63, 176, .10) 50%, transparent 70%); }