/* Inauguración de Ionika — la cinta con el moño que se corta con un código.
   Misma paleta y tipos del rediseño. La cinta y el telón se abren; detrás ya está la tienda. */

body.io-ina-on { overflow: hidden; }

.io-ina {
  --io-ina-cinta: clamp(30px, 4.4vw, 42px);
  --io-ina-abrir: cubic-bezier(.72, 0, .18, 1);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px var(--io-gutter) clamp(84px, 12vh, 110px);
  color: var(--global-palette3);
  overflow: hidden;
  isolation: isolate;
}

/* El telón: dos mitades que se abren hacia los lados */
.io-ina__lado {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 100% 50%, var(--global-palette8) 0%, transparent 60%),
    var(--global-palette9);
  transition: transform 1.15s var(--io-ina-abrir);
}
.io-ina__lado--izq { left: 0; }
.io-ina__lado--der { right: 0; background: radial-gradient(120% 70% at 0% 50%, var(--global-palette8) 0%, transparent 60%), var(--global-palette9); }

/* La cinta de satín, cruzando de lado a lado */
.io-ina__cinta {
  position: absolute;
  top: var(--io-ina-y, 50%);
  height: var(--io-ina-cinta);
  margin-top: calc(var(--io-ina-cinta) / -2);
  background: linear-gradient(180deg, #6B7A3C 0%, #56652E 30%, #4E5C2A 55%, #3A4520 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 6px 18px -10px rgba(38, 43, 29, .55);
  transition: transform .55s var(--io-ease), opacity .55s var(--io-ease);
}
.io-ina__cinta::before, .io-ina__cinta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(247, 243, 236, .35);
}
.io-ina__cinta::before { top: 5px; }
.io-ina__cinta::after { bottom: 5px; }
.io-ina__lado--izq .io-ina__cinta { left: 0; right: 0; transform-origin: 0 50%; }
.io-ina__lado--der .io-ina__cinta { left: 0; right: 0; transform-origin: 100% 50%; }

/* Iones: puntos que flotan despacio */
.io-ina__iones { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.io-ina__iones i {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 50%;
  border: 1px solid var(--global-palette4);
  opacity: .45;
  animation: io-ina-flotar var(--d, 9s) ease-in-out infinite alternate;
  transition: transform 1.3s var(--io-ease), opacity 1.3s var(--io-ease);
}
.io-ina__iones i:nth-child(3n) { background: var(--global-palette7); border-color: transparent; opacity: .9; }
@keyframes io-ina-flotar { to { translate: var(--fx, 6px) var(--fy, -14px); } }

/* Arriba: logo y título */
.io-ina__arriba {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  text-align: center;
  padding-bottom: clamp(12px, 2.4vh, 28px);
  transition: opacity .45s var(--io-ease), transform .45s var(--io-ease);
}
.io-ina__kicker { color: var(--global-palette5); }
.io-ina__logo svg { display: block; height: clamp(64px, 10vh, 104px); width: auto; }
.io-ina__titulo {
  max-width: 18ch;
  font-size: clamp(30px, min(4.4vw, 6.4vh), 58px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
.io-ina__titulo .io-acento { display: block; margin-top: .12em; color: var(--global-palette1); }

/* El moño, al centro de la cinta */
.io-ina__mono { flex: none; width: clamp(200px, min(26vw, 34vh), 300px); line-height: 0; filter: drop-shadow(0 10px 14px rgba(38, 43, 29, .22)); }
.io-ina__mono svg { display: block; width: 100%; height: auto; overflow: visible; }
.io-ina__mono g { transform-box: fill-box; transition: transform .8s var(--io-ease), opacity .7s var(--io-ease); }
.io-ina__lazo--izq { transform-origin: 100% 60%; }
.io-ina__lazo--der { transform-origin: 0% 60%; }
.io-ina__nudo { transform-origin: 50% 50%; }
.io-ina__cola--izq { transform-origin: 100% 0; }
.io-ina__cola--der { transform-origin: 0 0; }
.io-ina__mono svg { animation: io-ina-respira 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes io-ina-respira { 50% { transform: scale(1.025); } }

/* Abajo: el código */
.io-ina__form {
  width: min(440px, 100%);
  display: grid;
  gap: 10px;
  margin-top: clamp(14px, 3vh, 36px);
  transition: opacity .4s var(--io-ease), transform .4s var(--io-ease);
}
.io-ina__label { text-align: center; font-size: 15px; color: var(--global-palette5); }
.io-ina__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.io-ina__fila input {
  min-height: 52px;
  padding: 0 16px;
  font-family: var(--io-mono);
  font-size: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--global-palette3);
  background: rgba(247, 243, 236, .9);
  border: 1px solid var(--global-palette6);
  border-radius: 0;
}
.io-ina__fila input:focus { outline: none; border-color: var(--global-palette1); box-shadow: inset 0 0 0 1px var(--global-palette1); }
.io-ina__fila input::placeholder { letter-spacing: .1em; color: var(--global-palette5); }
.io-ina__fila .io-btn { min-height: 52px; }
.io-ina__error { text-align: center; font-size: 14px; color: #8A3B12; }
.io-ina__form.is-mal .io-ina__fila { animation: io-ina-no .4s var(--io-ease); }
@keyframes io-ina-no { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Pie: VADU × WIDDI */
.io-ina__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3.4vh, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  transition: opacity .45s var(--io-ease);
}
.io-ina__pie .io-label { color: var(--global-palette5); }
.io-ina__pie img { width: auto; display: block; }
.io-ina__pie img[alt^="VADU"] { height: clamp(26px, 3.4vh, 34px); }
.io-ina__pie img[alt="WIDDI"] { height: clamp(12px, 1.6vh, 16px); }
.io-ina__x { font-family: var(--io-serif); font-style: italic; font-size: 22px; color: var(--global-palette5); }
.io-ina__bienvenida { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 599px) {
  .io-ina__fila { grid-template-columns: 1fr; }
  .io-ina__pie { flex-wrap: wrap; row-gap: 6px; }
  .io-ina__pie .io-label { width: 100%; text-align: center; }
}
@media (max-height: 640px) {
  .io-ina__kicker { display: none; }
  .io-ina__pie { position: static; margin-top: 16px; }
  .io-ina { padding-bottom: 16px; }
}

/* ---------- Se abre ---------- */
/* 1. Se van el texto y el código; el moño se desata */
.io-ina.is-abriendo .io-ina__arriba { opacity: 0; transform: translateY(-14px); }
.io-ina.is-abriendo .io-ina__form, .io-ina.is-abriendo .io-ina__pie { opacity: 0; transform: translateY(10px); }
.io-ina.is-abriendo .io-ina__mono svg { animation: none; }
.io-ina.is-abriendo .io-ina__nudo { transform: scale(.2); opacity: 0; transition-delay: .25s; }
.io-ina.is-abriendo .io-ina__lazo--izq { transform: translate(-70px, 90px) rotate(-75deg); opacity: 0; transition-delay: .35s; }
.io-ina.is-abriendo .io-ina__lazo--der { transform: translate(70px, 90px) rotate(75deg); opacity: 0; transition-delay: .35s; }
.io-ina.is-abriendo .io-ina__cola--izq { transform: translate(-30px, 140px) rotate(-20deg); opacity: 0; transition-delay: .3s; }
.io-ina.is-abriendo .io-ina__cola--der { transform: translate(30px, 140px) rotate(20deg); opacity: 0; transition-delay: .3s; }

/* 2. La cinta se corta: cada mitad cae hacia su lado */
.io-ina.is-corte .io-ina__lado--izq .io-ina__cinta { transform: rotate(4deg) scaleX(.96); }
.io-ina.is-corte .io-ina__lado--der .io-ina__cinta { transform: rotate(-4deg) scaleX(.96); }

/* 3. Se abre el telón y los iones salen hacia afuera */
.io-ina.is-telon .io-ina__lado--izq { transform: translateX(-102%); }
.io-ina.is-telon .io-ina__lado--der { transform: translateX(102%); }
.io-ina.is-telon .io-ina__iones i { animation: none; transform: translate(var(--sx, 0), var(--sy, 0)) scale(.4); opacity: 0; }
.io-ina.is-fin { opacity: 0; transition: opacity .35s var(--io-ease); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .io-ina *, .io-ina { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .io-ina.is-fin { transition: opacity .4s linear !important; }
}