/* Obertura · Moxen — los estilos del efecto y de la demostración. */
:root {
  --ob-fondo: #0a0a0a;
  --ob-texto: #f4f4f4;
  --ob-suave: rgba(255, 255, 255, .6);
  --ob-tenue: rgba(255, 255, 255, .14);
  --ob-borde: rgba(255, 255, 255, .16);
  --ob-boton: #f4f4f4;
  --ob-boton-texto: #0a0a0a;
  /* las líneas del fondo (las lee obertura.js) */
  --ob-linea: 255, 255, 255;
  --ob-linea-alfa: .16;
  --ob-curva: cubic-bezier(.22, 1, .36, 1);
}
:root[data-tema="claro"] {
  --ob-fondo: #eeeeee;
  --ob-texto: #0a0a0a;
  --ob-suave: rgba(0, 0, 0, .6);
  --ob-tenue: rgba(0, 0, 0, .08);
  --ob-borde: rgba(0, 0, 0, .14);
  --ob-boton: #0a0a0a;
  --ob-boton-texto: #f4f4f4;
  --ob-linea: 0, 0, 0;
  --ob-linea-alfa: .14;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ob-fondo); color: var(--ob-texto); overflow: hidden; }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ── el efecto ─────────────────────────────────────────────────────── */
.ob-portada { position: relative; height: 100%; min-height: 560px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate; }
.ob-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* un velo en el centro: el texto se lee aunque las líneas pasen detrás */
.ob-portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 42% at 50% 52%, var(--ob-fondo) 20%, transparent 100%);
  opacity: .92;
}

.ob-cabecera { display: flex; align-items: center; gap: 24px; padding: 26px clamp(18px, 4vw, 44px); }
.ob-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; }
.ob-logo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ob-nav { display: flex; gap: 4px; margin: 0 auto; }
.ob-nav a { position: relative; padding: 9px 14px; border-radius: 99px; color: var(--ob-suave); font-size: .94rem; font-weight: 500; transition: color .25s, background-color .3s var(--ob-curva); }
.ob-nav a:hover { color: var(--ob-texto); background: var(--ob-tenue); }
.ob-entrar { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--ob-borde); font-size: .94rem; font-weight: 500; transition: background-color .3s; }
.ob-entrar span { display: inline-block; transition: transform .35s var(--ob-curva); }
.ob-entrar:hover { background: var(--ob-tenue); }
.ob-entrar:hover span { transform: translateX(3px); }
.ob-cabecera a:focus-visible, .ob-boton:focus-visible, .ob-insignia:focus-visible, .ob-repite:focus-visible { outline: 2px solid var(--ob-texto); outline-offset: 3px; }

.ob-centro { display: grid; justify-items: center; align-content: center; text-align: center; padding: 0 20px 70px; }
.ob-insignia {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; margin-bottom: 30px;
  border-radius: 99px; border: 1px solid var(--ob-borde); font-size: .88rem; color: var(--ob-suave); overflow: hidden;
  background: color-mix(in srgb, var(--ob-fondo) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ob-insignia-nuevo { padding: 3px 10px; border-radius: 99px; background: var(--ob-texto); color: var(--ob-fondo); font-weight: 600; font-size: .8rem; }
.ob-insignia svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .35s var(--ob-curva); }
.ob-insignia:hover svg { transform: translateX(3px); }
/* un destello que la cruza de vez en cuando */
.ob-insignia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-100%); animation: ob-destello 4.2s 2.6s var(--ob-curva) infinite;
}
@keyframes ob-destello { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

.ob-titulo { margin: 0; font-size: clamp(2.6rem, 7.6vw, 6.3rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
/* cada letra en su máscara: sube desde abajo de su propia línea */
.ob-palabra { display: inline-block; white-space: nowrap; }
.ob-letra { display: inline-block; }
.ob-mascara { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.ob-bajada { max-width: 540px; margin: 26px 0 0; color: var(--ob-suave); font-size: 1.12rem; line-height: 1.5; }
.ob-botones { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.ob-boton {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 99px;
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em; will-change: transform;
}
.ob-boton-principal { background: var(--ob-boton); color: var(--ob-boton-texto); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .7); }
.ob-boton-txt { display: inline-block; will-change: transform; }
.ob-boton-otro { border: 1px solid var(--ob-borde); background: color-mix(in srgb, var(--ob-fondo) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s; }
.ob-boton-otro:hover { background: var(--ob-tenue); }
.ob-play { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -10px; border-radius: 50%; background: var(--ob-tenue); }
.ob-play svg { width: 11px; height: 11px; fill: currentColor; margin-left: 1px; }
.ob-nota { margin: 18px 0 0; color: var(--ob-suave); font-size: .84rem; opacity: .8; }

.ob-baja { position: absolute; left: 50%; bottom: 26px; width: 22px; height: 34px; margin-left: -11px; border-radius: 11px; border: 1.5px solid var(--ob-borde); }
.ob-baja i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ob-texto); animation: ob-rueda 1.8s 2.4s var(--ob-curva) infinite; }
@keyframes ob-rueda { 0% { transform: none; opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

/* ── la coreografía de entrada ─────────────────────────────────────── */
/* Todo usa «both»: antes de su turno cada pieza espera escondida. Los
   botones se mueven con «translate» y «scale» (propiedades sueltas) para
   que el imán, que usa «transform», siga funcionando después. */
.is-entra .ob-logo, .is-entra .ob-nav a, .is-entra .ob-entrar { animation: ob-cae .9s calc(.2s + var(--o) * 60ms) var(--ob-curva) both; }
.is-entra .ob-insignia { animation: ob-asoma .9s .55s var(--ob-curva) both; }
.is-entra .ob-letra { animation: ob-letra 1.05s calc(.72s + var(--i) * 26ms) var(--ob-curva) both; }
.is-entra .ob-bajada { animation: ob-sube 1s 1.45s var(--ob-curva) both; }
.is-entra .ob-boton-principal { animation: ob-sube 1s 1.6s var(--ob-curva) both; }
.is-entra .ob-boton-otro { animation: ob-sube 1s 1.7s var(--ob-curva) both; }
.is-entra .ob-nota { animation: ob-sube 1s 1.85s var(--ob-curva) both; }
.is-entra .ob-baja { animation: ob-sube 1s 2.1s var(--ob-curva) both; }
@keyframes ob-cae { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: none; } }
@keyframes ob-asoma { from { opacity: 0; translate: 0 10px; scale: .9; filter: blur(4px); } to { opacity: 1; translate: none; scale: none; filter: none; } }
@keyframes ob-letra { from { transform: translateY(108%) rotate(7deg); filter: blur(6px); opacity: 0; } 40% { opacity: 1; } to { transform: none; filter: none; opacity: 1; } }
@keyframes ob-sube { from { opacity: 0; translate: 0 22px; filter: blur(4px); } to { opacity: 1; translate: none; filter: none; } }

/* ── la demostración ───────────────────────────────────────────────── */
.ob-repite {
  position: absolute; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px;
  border: 1px solid var(--ob-borde); border-radius: 99px; background: none; color: var(--ob-suave); font: inherit; font-size: .82rem; cursor: pointer;
  transition: color .2s, background-color .3s;
}
.ob-repite:hover { color: var(--ob-texto); background: var(--ob-tenue); }
.ob-repite svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .ob-nav { display: none; }
  .ob-entrar { margin-left: auto; }
  .ob-bajada { font-size: 1rem; }
  .ob-boton { height: 50px; padding: 0 22px; }
  .ob-baja { display: none; }
  .ob-repite { left: 50%; right: auto; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-entra .ob-logo, .is-entra .ob-nav a, .is-entra .ob-entrar, .is-entra .ob-insignia, .is-entra .ob-letra,
  .is-entra .ob-bajada, .is-entra .ob-boton-principal, .is-entra .ob-boton-otro, .is-entra .ob-nota, .is-entra .ob-baja { animation: none; }
  .ob-insignia::after, .ob-baja i { animation: none; }
}