/* ============================================================
   CREATV MYNDZ — ESTILOS
   Cielo en video controlado por scroll + lista CRTV
   ============================================================ */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #101c4e;
  --navy-deep: #0a1238;
  --white: #ffffff;
  --ink: #eef3ff;
  --muted: #a9b6dd;
  --accent: #22d3ee;
  --font: "Outfit", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow: 0 2px 18px rgba(10, 18, 56, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--navy-deep);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== CIELO (canvas fijo + velo) ===== */
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
  background: linear-gradient(180deg, #5d9fd8 0%, #b7d9f5 60%, #e9f4fd 100%);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 85% at 50% 38%, rgba(10, 18, 56, 0.30) 0%, rgba(10, 18, 56, 0.66) 100%);
  opacity: 1;
  transition: opacity 0.2s linear;
}

/* ===== BARRA SUPERIOR ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  padding-top: max(0.85rem, env(safe-area-inset-top));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--white);
  text-shadow: var(--shadow);
}

.topbar span, .topbar button { white-space: nowrap; }

/* FLYING arriba y los relojes justo debajo */
.topbar-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; }
.flying-row { display: flex; align-items: center; gap: 0.45rem; }

/* Solo en playground.html: a diferencia de FLYING/los relojes, este no
   se desvanece — se queda fijo arriba todo el recorrido, para volver
   a la portada sin tener que abrir el menú. */
.back-index {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--white);
  text-shadow: var(--shadow);
  transition: opacity 0.15s;
}
.back-index:hover { opacity: 0.75; }
.clocks { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.plane { display: inline-block; animation: bob 3s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

/* Aviso de "hay que hacer scroll" al entrar a index.html — se apaga
   solo apenas la persona hace el primer scroll (ver assets/app.js). */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--white);
  text-shadow: var(--shadow);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.scroll-hint.hidden { opacity: 0; }
.scroll-hint-arrow {
  font-size: 1.05rem;
  animation: scrollHintBounce 1.6s ease-in-out infinite;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}

.menu-btn {
  flex: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); }

/* Mismo look que .menu-btn, para las llamadas a la acción que van
   dentro de una tarjeta que ya es un enlace (mask, playground) o como
   enlace suelto (comenzar a crear) — por eso no son <button> reales. */
.pill-btn {
  display: inline-block;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.pill-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); }

.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.topbar-right .lang {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  opacity: 0.55;
}
.topbar-right .lang.active { opacity: 1; background: rgba(255, 255, 255, 0.18); }

/* ===== MENÚ ===== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 5rem 1.5rem 3rem;
  background: rgba(10, 18, 56, 0.94);
  animation: fade 0.22s ease;
}
.menu[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.menu-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1.2rem;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.4rem;
}

.menu-list { list-style: none; display: grid; gap: 0.4rem; }
.menu-list a {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 3vw, 1.4rem);
  font-size: clamp(1.9rem, 8vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--white);
  padding: 0.35rem 0.5rem;
  transition: color 0.15s, transform 0.15s;
}
.menu-list a:hover { color: var(--accent); transform: translateX(6px); }
.menu-num {
  flex: none;
  width: 2.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Con el menú abierto la barra estorba: la escondemos. */
body.menu-open .topbar { opacity: 0; pointer-events: none; }

.menu-foot {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--muted);
}

/* ===== HERO ===== */
.hero { position: relative; }

.hero-inner { text-align: center; }

/* Logo pequeño y minimalista, protagonista el cielo. */
.logo {
  display: block;
  margin: 0 auto;
  width: min(40vw, 380px);
  height: auto;
  filter: drop-shadow(0 8px 34px rgba(10, 18, 56, 0.45));
}

/* Relojes y CRTV© se desvanecen al bajar: solo se leen arriba del todo. */
.fades { transition: opacity 0.35s ease; }
body.scrolled .fades { opacity: 0; pointer-events: none; }

.crtv-mark {
  align-self: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PROFUNDIDAD
   Cada bloque llega desde el fondo, se enfoca y sale al frente.
   Las posiciones las calcula assets/app.js según el scroll; aquí
   solo preparamos los elementos para que el navegador lo mueva
   con la tarjeta gráfica y no se sienta pesado.
   ============================================================ */
/* La sección es solo el "riel" de scroll; el contenido va anclado dentro
   de .pin, así se queda quieto en el centro mientras el cielo avanza y
   nunca queda la pantalla vacía entre una sección y la siguiente. Es alta
   a propósito: la llegada Y la despedida (assets/app.js) pasan enteras
   mientras sigue anclada, para que nunca se la vea "subir" con la página. */
.scene {
  display: block;
  min-height: 240vh;
  min-height: 240svh;
  padding: 0;
}

/* Sin clics propios: cuando dos secciones se cruzan (una llegando, otra
   despidiéndose) ambos .pin ocupan toda la pantalla al mismo tiempo, y
   el de encima (aunque su contenido todavía sea invisible) taparía los
   clics del que sí se ve. assets/app.js reactiva el clic (pointer-events:
   auto) solo en el contenido .depth una vez que ya está visible. */
.pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.5rem 1.2rem 4rem;
  pointer-events: none;
}

/* Al crecer, los bloques se salen por los lados a propósito (así se siente
   que te pasan por al lado). Los recortamos aquí para que eso no ensanche
   la página ni permita moverla en horizontal en el celular.
   `clip` en vez de `hidden`: no crea un contenedor de scroll. */
.scene { overflow-x: clip; }

/* Entre dos secciones ancladas, la siguiente empieza a aparecer justo
   cuando la anterior empieza a despedirse (todavía anclada ella también),
   para que se crucen en el aire en vez de dejar un hueco. */
.scene + .scene { margin-top: -150vh; margin-top: -150svh; }

.depth, .depth-item {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.depth { will-change: transform, opacity; }

/* Si el sistema pide menos movimiento, todo se ve quieto y completo. */
@media (prefers-reduced-motion: reduce) {
  .depth, .depth-item {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Todo este efecto de "anclado + acercándose" depende de que
   position: sticky funcione de verdad. Si el navegador no lo soporta
   (o lo ignora, como se vio en el navegador interno de Instagram), el
   margen negativo de abajo (pensado para que la siguiente sección se
   monte sobre la que se está yendo) hace que TODAS las secciones
   queden apiladas unas encima de otras y nada se pueda tocar. Acá cae
   a un diseño simple, uno debajo del otro, sin la animación — feo,
   pero nunca roto. */
@supports not (position: sticky) {
  .scene { min-height: auto; }
  .scene + .scene { margin-top: 0; }
  .pin { position: static; }
  .depth, .depth-item {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
  }
}

/* Mismo respaldo, pero activado a mano (assets/app.js) para el
   navegador interno de Instagram/Facebook — ver el comentario junto a
   "iab-fallback" ahí. */
html.iab-fallback .scene { min-height: auto; }
html.iab-fallback .scene + .scene { margin-top: 0; }
html.iab-fallback .pin { position: static; }
html.iab-fallback .depth,
html.iab-fallback .depth-item {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* ===== MANIFIESTO (CREATV MASK) ===== */

.mask-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-shadow: var(--shadow);
  transition: opacity 0.15s;
}
.mask-link:hover, .mask-link:focus-visible { opacity: 0.85; }

.mask-logo {
  display: block;
  width: min(58vw, 340px);
  height: auto;
  filter: drop-shadow(0 8px 34px rgba(10, 18, 56, 0.45));
}

/* Al hacer clic: se agiganta rápido y luego se encoge — para cuando ya
   está chiquito, entra la pantalla roja de creativmask.html (assets/app.js
   dispara la animación y navega justo al terminar). */
.mask-link.zooming .mask-logo {
  animation: maskZoom 0.5s cubic-bezier(.3, 0, .7, 1) forwards;
}
@keyframes maskZoom {
  0%   { transform: scale(1); }
  32%  { transform: scale(3.2); }
  100% { transform: scale(0.08); }
}

/* ===== CRTV ===== */
/* Estilos compartidos entre la tarjeta "CREATIVE PLAYGROUND" de la
   portada y cada CRTV de playground.html: la misma tipografía grande y
   centrada, sin tarjeta ni fondo — solo la letra flotando sobre el
   cielo (misma mecánica .scene/.pin de más arriba). */
.project-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 56rem;
  text-align: center;
  color: var(--white);
  text-shadow: var(--shadow);
  transition: opacity 0.14s;
}
.project-inner:hover, .project-inner:focus-visible { opacity: 0.8; }

.playground-logo {
  width: min(80vw, 620px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(10, 18, 56, 0.5));
}

.p-num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.p-title {
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-wrap: balance;
  transition: filter 0.2s;
}

/* ===== LOGO ARRIBA DE LA LISTA (playground.html) =====
   Ya no es una pantalla propia — es lo primero del <main>, así que
   sube con el scroll igual que el resto de la lista. */
.playground-logo-wrap {
  display: flex;
  justify-content: center;
  padding: 7rem 1.2rem 1.6rem;
}

/* ===== LISTA DE CRTV (playground.html) =====
   Mampostería real: cada CRTV en su propia burbuja, de alto distinto
   según el título, empacadas sin dejar huecos — antes, con grid, la
   fila se estiraba a la burbuja más alta de las dos y la corta quedaba
   con mucho espacio vacío adentro. assets/app.js (layoutMasonry) ubica
   cada una con left/top, en la columna que en ese momento está más
   corta; el motor de profundidad usa transform encima para el efecto
   de burbuja subiendo, así que no chocan. */
.project-list {
  list-style: none;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem 22vh;
  position: relative;
  overflow-x: clip;
}

/* El número va chiquito arriba de la burbuja, no adentro. */
.project-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.project-row .p-num { font-size: 0.62rem; padding-left: 0.3rem; }

.project-bubble {
  width: 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(5, 10, 30, 0.35);
  padding: clamp(1.1rem, 5vw, 1.7rem) clamp(0.9rem, 4vw, 1.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-row .project-inner { gap: 0.4rem; }
.project-row .p-title { font-size: clamp(1.25rem, 5.4vw, 1.9rem); line-height: 1.08; }

/* Los próximos van borrosos: se intuyen, no se leen. */
.project-row.soon .p-title { filter: blur(6px); opacity: 0.85; }
.project-row.soon .project-inner:hover .p-title { filter: blur(2.5px); }

/* ===== QUIÉNES SOMOS ===== */
.about-inner { width: 100%; }
.about-inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.about h2 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--white);
  text-shadow: var(--shadow);
  text-wrap: balance;
}
.about p {
  margin-top: 1.4rem;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height: 1.75;
  color: var(--white);
  text-shadow: var(--shadow);
}

.about-grid {
  list-style: none;
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  text-align: left;
}
.about-grid li {
  padding: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(10, 18, 56, 0.35);
}
.about-grid strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.about-grid span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--white);
}

.about .pill-btn { margin-top: 2rem; }

/* ===== WAKE UP ===== */
.wakeup-inner { width: 100%; }

.wakeup-inner { max-width: 44rem; margin: 0 auto; text-align: center; }

.wakeup-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  color: var(--accent);
  text-shadow: var(--shadow);
}

.wakeup-logo {
  width: min(62vw, 300px);
  height: auto;
  margin-top: 1.4rem;
  filter: drop-shadow(0 0 50px rgba(34, 211, 238, 0.45)) drop-shadow(0 8px 26px rgba(10, 18, 56, 0.5));
}

.wakeup-sub {
  margin: 1.8rem auto 0;
  max-width: 34rem;
  font-size: clamp(0.92rem, 2.2vw, 1.08rem);
  line-height: 1.7;
  color: var(--white);
  text-shadow: var(--shadow);
}

.wakeup-features {
  list-style: none;
  margin: 2.6rem auto 0;
  max-width: 31rem;
  text-align: left;
  display: grid;
  gap: 1rem;
}
.wakeup-features li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--white);
  text-shadow: var(--shadow);
}
.wakeup-features span { color: var(--accent); }

.wakeup-form { margin-top: 3rem; }
.wakeup-form label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--white);
  text-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.wakeup-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.wakeup-row input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.9rem 1.2rem;
  min-width: min(20rem, 82vw);
  background: rgba(10, 18, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: var(--white);
  outline: none;
}
.wakeup-row input::placeholder { color: rgba(255, 255, 255, 0.5); }
.wakeup-row input:focus { border-color: var(--accent); }
.wakeup-row button {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.9rem 1.7rem;
  background: var(--accent);
  color: var(--navy-deep);
  border: none;
  border-radius: 10px;
  transition: transform 0.12s;
}
.wakeup-row button:hover { transform: translateY(-2px); }

.wakeup-note {
  margin-top: 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-shadow: var(--shadow);
}

/* Chiquito y discreto a propósito — es para ir viendo cómo va la
   construcción de los módulos, no compite con el CTA principal. */
.wakeup-preview-link {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-shadow: var(--shadow);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.wakeup-preview-link:hover { opacity: 1; }

/* ===== FOOTER ===== */
.footer {
  padding: 3.5rem 1.2rem 2.4rem;
  padding-bottom: max(2.4rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
  text-shadow: var(--shadow);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 2rem;
}

.footer-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  opacity: 0.75;
}

/* ===== CAÍDA (playground.html) =====
   Al llegar desde "VER TODOS LOS CRTV" de la portada, el cielo se
   desvanece mientras el pasto sube desde un punto y se traga la
   pantalla — se siente como bajar de verdad del cielo a la tierra
   antes de soltarte el control del scroll. */
.playground-fall {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(180deg, #4f86c4 0%, #cfe8ff 100%);
  animation: fallSky 0.9s ease-in forwards;
}
.playground-fall::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #6fae4a 0%, #4c8a34 65%, #2f5a22 100%);
  animation: fallGround 0.9s cubic-bezier(.6, 0, .15, 1) forwards;
}
@keyframes fallSky { to { opacity: 0; } }
@keyframes fallGround { to { width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; } }

/* ===== PÁGINA DE DETALLE DE CADA CRTV (crtv-*.html) =====
   Cada una es una sola imagen larga (el diseño completo, exportado tal
   cual de Canva) a todo el ancho — así no se pierde nada de calidad ni
   de diseño al pasarlo a HTML. La barra de arriba queda flotando encima. */
.crtv-detail img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CREATV MASK (creativmask.html) ===== */
.mask-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #1a0505 url("mask/img/fondo-mask.jpg") center center / cover no-repeat;
}

.mask-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vh, 2.6rem);
  padding: 5.2rem 1.2rem 2.5rem;
}

/* Sello chiquito arriba del todo — quién produce el drop. */
.studio-logo {
  display: block;
  height: clamp(14px, 2.6vw, 22px);
  width: auto;
  margin-bottom: -0.6rem;
  opacity: 0.92;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  animation: maskArrive 0.4s cubic-bezier(.2, .8, .2, 1) both;
}

/* Los dos logos de la portada, uno al lado del otro. */
.mask-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.4rem);
}
.mask-hero-logo, .mask-myndz-logo {
  width: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  /* Llegan chiquitos y crecen a su tamaño, como si hubieran entrado
     volando a esta pantalla. */
  animation: maskArrive 0.4s cubic-bezier(.2, .8, .2, 1) both;
}
.mask-myndz-logo { height: clamp(40px, 6.5vw, 66px); }
/* El PNG de CREATV MASK trae mucho margen transparente alrededor del
   ticket (el dibujo solo ocupa ~la mitad del alto del archivo) — por
   eso su caja tiene que ser bastante más alta para que el ticket se
   vea más grande que el wordmark de al lado: es el protagonista de
   esta pantalla. */
.mask-hero-logo { height: clamp(130px, 22vw, 230px); }
@keyframes maskArrive {
  0%   { transform: scale(0.08); }
  100% { transform: scale(1); }
}

/* ===== DROP #10: máscara girando en 3D (creativmask.html) =====
   Va debajo de los logos, en la misma pantalla — nada de scroll para
   verla. La máscara gira arrastrando la barra (assets/mask3d.js). */
.mask3d-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  max-width: 74rem;
  width: 100%;
}

.mask3d-visual { flex: none; width: min(46vw, 220px); }
.mask-2d-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

.mask3d-canvas-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
}
.mask3d-canvas-btn canvas {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 819;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
  transition: filter 0.15s;
}
.mask3d-canvas-btn:hover canvas { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)) brightness(1.08); }

.mask3d-scrub {
  width: 100%;
  margin-top: 0.8rem;
  accent-color: var(--accent);
}

.mask3d-hint {
  margin-top: 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--white);
  text-shadow: var(--shadow);
  opacity: 0.7;
}

/* El titular grande "Conviértete / en un súper héroe" — letra pintada
   a mano, exportada del diseño de Canva. */
.mask-hero-headline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}
.mask-hero-headline-img {
  display: block;
  width: min(88vw, 420px);
  height: auto;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.5));
}

.mask3d-copy { flex: 1; min-width: 0; color: var(--white); text-shadow: var(--shadow); text-align: center; }
.mask3d-title {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  text-wrap: balance;
}
.mask3d-price {
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 600;
  opacity: 0.65;
  margin-bottom: 0.6rem;
}
.mask3d-subtitle-img {
  display: block;
  width: min(60vw, 260px);
  height: auto;
  margin: 0 auto 0.8rem;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
.mask3d-body {
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  line-height: 1.5;
  opacity: 0.92;
  max-width: 32rem;
  margin: 0.9rem auto 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mask3d-buy {
  margin-top: 0.2rem;
  padding: 0.85rem 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5b5b, #e42a2a);
  box-shadow: 0 10px 24px rgba(228, 42, 42, 0.45);
  transition: transform 0.15s, opacity 0.15s;
}
.mask3d-buy:hover { transform: translateY(-2px); opacity: 0.9; }
.mask3d-buy-word { display: block; height: 1.4rem; width: auto; }

.mask3d-buy-wrap { position: relative; display: inline-flex; }
.mask-arrow {
  position: absolute;
  left: -1.6rem;
  bottom: -1.3rem;
  width: 2.6rem;
  height: auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* ===== VIDEO DEL DROP: aparece más abajo, con scroll normal (el fondo
   rojo de .mask-bg queda fijo porque ya es position:fixed). Ahora es
   toda una sección con titulares de marcador antes/después. ===== */
.mask-video-section {
  position: relative;
  padding: 3rem 1.2rem 4rem;
  text-align: center;
}
.mask-video {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin: 1.6rem auto;
  border-radius: 12px;
  background: #000;
}

/* ===== FOTOS: cierre de la página — evidencia real de la zona del
   terremoto, cada una con su propio alto (columnas al estilo
   Pinterest), sin recortar ninguna a la fuerza. ===== */
.mask-photos-section {
  padding: 1rem 1.2rem 4rem;
}
.mask-photo-grid {
  column-count: 2;
  column-gap: 0.6rem;
  max-width: 48rem;
  margin: 2.2rem auto 0;
  text-align: left;
}
.mask-photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
  border-radius: 10px;
  break-inside: avoid;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) {
  .mask-photo-grid { column-count: 3; column-gap: 0.8rem; }
  .mask-photo-grid img { margin-bottom: 0.8rem; }
}

.mask-script-heading {
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.15;
  color: var(--white);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.mask-script-heading-big {
  margin-top: 2.4rem;
  font-size: clamp(2.2rem, 8vw, 3.2rem);
}

/* ===== MURO DE DONANTES: nombres traídos de Sheets (assets/mask3d.js).
   Cada uno con su propio tamaño/inclinación (--s/--r, al azar por
   nombre) para que se sienta escrito a mano, no una lista prolija. */
.donor-wall { padding: 2rem 1.2rem 4rem; text-align: center; }

.mask-avengers-logo {
  display: block;
  width: min(85vw, 460px);
  height: auto;
  margin: 0 auto 2.2rem;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.donor-wall-title-img {
  display: block;
  width: min(92vw, 520px);
  height: auto;
  margin: 0 auto 0.4rem;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.5));
}
.donor-wall-sub {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  opacity: 0.8;
  text-transform: uppercase;
}
.donor-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3rem 1.4rem;
  max-width: 48rem;
  margin: 2.2rem auto 0;
}
.donor-name {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: calc(1.7rem * var(--s, 1));
  color: var(--white);
  text-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
  opacity: 0.92;
}
.donor-loading, .donor-empty {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  text-shadow: var(--shadow);
  opacity: 0.75;
}
.donor-loading { animation: donorPulse 1.4s ease-in-out infinite; }
@keyframes donorPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .donor-loading { animation: none; }
}
.donor-wall-count {
  margin-top: 2.4rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.donor-wall-foot {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--white);
  opacity: 0.75;
}

/* ===== BONUS: la máscara girando en 3D, al final de todo. La
   protagonista de la portada ahora es la foto 2D; esto es el cierre
   interactivo, no repite la ficha del producto (ya se donó arriba). ===== */
.mask3d-standalone {
  position: relative;
  padding: 1rem 1.2rem 5rem;
  text-align: center;
  overflow: hidden;
}
.mask3d-standalone-inner {
  position: relative;
  max-width: 14rem;
  margin: 1.8rem auto 0;
}
.mask3d-standalone-inner .mask3d-hint { margin-top: 0.7rem; }

.mask-spiderweb {
  position: absolute;
  top: 0;
  right: 0;
  width: min(70vw, 320px);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ===== GALERÍA DE FOTOS: se abre al tocar la máscara. ===== */
body.modal-open { overflow: hidden; }
.mask-gallery {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  background: rgba(10, 2, 2, 0.94);
  animation: fade 0.2s ease;
}
.mask-gallery[hidden] { display: none; }
.mask-gallery-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 5rem 1.2rem 4rem;
}
.mask-gallery-close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: 1.2rem;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
}
.mask-gallery-title {
  color: var(--white);
  text-shadow: var(--shadow);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 1.5rem;
}
.mask-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
}
.mask-gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 819;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* ===== PEDIDO: formulario de envío, se abre al tocar COMPRAR. ===== */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
  background: rgba(10, 2, 2, 0.94);
  animation: fade 0.2s ease;
}
.order-modal[hidden] { display: none; }
.order-modal-inner {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 2.2rem 1.6rem 1.8rem;
}
.order-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
}
.order-modal-title {
  color: var(--white);
  text-shadow: var(--shadow);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}
.order-modal-sub {
  margin-top: 0.5rem;
  color: var(--white);
  opacity: 0.85;
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.5;
}

.order-form { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.order-form[hidden] { display: none; }
.order-form label {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
  opacity: 0.85;
}
.order-form input {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  background: rgba(10, 2, 2, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  color: var(--white);
  outline: none;
}
.order-form input:focus { border-color: var(--white); }

.order-check {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
  opacity: 0.9;
}
.order-check input {
  display: block;
  width: auto;
  margin-top: 0;
  accent-color: var(--white);
}

.order-equiv {
  margin-top: -0.5rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--white);
  opacity: 0.75;
}

.order-note {
  margin-top: -0.4rem;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--white);
  opacity: 0.65;
}

.order-submit {
  align-self: center;
  border: none;
  background: var(--white);
  color: #1a0505;
  font-family: inherit;
  cursor: pointer;
}
.order-submit:hover { background: rgba(255, 255, 255, 0.85); border-color: transparent; }
.order-submit:disabled { opacity: 0.6; cursor: default; }

/* ===== REVISIÓN: paso intermedio antes de ir a Bold — muestra lo que
   la persona escribió para que lo confirme (o vuelva a editar). ===== */
.order-review { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.order-review[hidden] { display: none; }
.order-review-title {
  text-align: center;
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
}
.order-review-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.8rem;
  font-size: 0.78rem;
  color: var(--white);
  background: rgba(10, 2, 2, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 1rem;
}
.order-review-list dt { opacity: 0.65; font-weight: 600; }
.order-review-list dd { font-weight: 700; text-align: right; }
.order-review-back {
  align-self: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.order-review-back:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 780px) {
  .mask-screen { gap: 1rem; padding: 4.6rem 1.2rem 2rem; }
  .mask-myndz-logo { height: clamp(30px, 7.5vw, 44px); }
  .mask-hero-logo { height: clamp(96px, 26vw, 140px); }
}

/* ===== MÓVIL ===== */
@media (max-width: 680px) {
  .topbar { font-size: 0.6rem; gap: 0.5rem; padding-left: 0.8rem; padding-right: 0.8rem; letter-spacing: 0.1em; }

  /* En el celular los relojes bajan a su propia línea: si se quedan dentro
     de la columna izquierda chocan con el botón MENÚ. */
  .clocks {
    position: absolute;
    top: 100%;
    left: 0.8rem;
    right: 0.8rem;
    font-size: 0.53rem;
    letter-spacing: 0.04em;
    max-width: none;
  }
  .menu-btn { padding: 0.35rem 0.8rem; letter-spacing: 0.14em; }
  .topbar-right .lang { padding: 0.22rem 0.45rem; }
  .logo { width: min(56vw, 300px); }
  .p-num { font-size: 0.68rem; }
  .playground-logo-wrap { padding-top: 8.5rem; }
  .project-row.soon .p-title { filter: blur(3.5px); }
  .footer { justify-content: center; text-align: center; }
}

/* ===== WAKE UP: EL PROGRAMA (wakeup-program.html) ===== */
.wakeup-body { background: var(--navy-deep); }

.wakeup-gate {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.2rem 3rem;
}
.wakeup-gate-inner { width: 100%; max-width: 24rem; text-align: center; }
.wakeup-gate-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  color: var(--accent);
}
.wakeup-gate-title {
  margin-top: 0.5rem;
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.wakeup-gate-sub {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.wakeup-gate-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.wakeup-gate-form label {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.wakeup-gate-form input {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--white);
  outline: none;
}
.wakeup-gate-form input:focus { border-color: var(--accent); }
.wakeup-gate-form .pill-btn {
  align-self: center;
  margin-top: 0.4rem;
  border: none;
  background: var(--accent);
  color: var(--navy-deep);
  font-family: inherit;
}
.wakeup-gate-form .pill-btn:hover { background: rgba(34, 211, 238, 0.85); }
.wakeup-gate-error { color: #ff8a8a; font-size: 0.8rem; text-align: center; }

.wakeup-hub { max-width: 40rem; margin: 0 auto; padding: 6.5rem 1.2rem 5rem; }
.wakeup-hub-head { text-align: center; }
.wakeup-hub-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  color: var(--accent);
}
.wakeup-hub-title { margin-top: 0.5rem; font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; }
.wakeup-hub-sub { margin-top: 0.7rem; color: var(--muted); font-size: 0.9rem; }

/* El camino: una línea vertical conectando cada módulo. */
.wakeup-path { position: relative; margin-top: 3rem; display: flex; flex-direction: column; gap: 1.4rem; }
.wakeup-path::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.wakeup-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--white);
}
.wakeup-node-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--muted);
}
.wakeup-node-info { display: flex; flex-direction: column; gap: 0.15rem; }
.wakeup-node-kicker { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; color: var(--muted); }
.wakeup-node-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }

.wakeup-node.locked { opacity: 0.45; cursor: not-allowed; }
.wakeup-node.locked .wakeup-node-dot { font-size: 1.3rem; }

.wakeup-node.current .wakeup-node-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
  box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.16);
}
.wakeup-node.current .wakeup-node-title { color: var(--accent); }
.wakeup-node.current, .wakeup-node.done { cursor: pointer; transition: transform 0.15s; }
.wakeup-node.current:hover, .wakeup-node.done:hover { transform: translateX(4px); }

.wakeup-node.done .wakeup-node-dot {
  background: rgba(34, 211, 238, 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.wakeup-node.done .wakeup-node-title { opacity: 0.75; }

/* Detalle de un módulo — mismo look que .order-modal/.mask-gallery. */
.module-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
  background: rgba(10, 18, 56, 0.94);
  animation: fade 0.2s ease;
}
.module-modal[hidden] { display: none; }
.module-modal-inner {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.2rem 1.6rem 1.8rem;
}
.module-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
}
.module-modal-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.module-modal-title { margin-top: 0.4rem; font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 800; }

.module-block { margin-top: 1.4rem; }
.module-block h3 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.module-block p { font-size: 0.9rem; line-height: 1.6; }

.module-complete-btn {
  display: block;
  width: 100%;
  margin-top: 1.8rem;
  border: none;
  background: var(--accent);
  color: var(--navy-deep);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.module-complete-btn:hover { background: rgba(34, 211, 238, 0.85); }
.module-complete-btn:disabled { opacity: 0.6; cursor: default; }
.module-done-note { margin-top: 1.8rem; text-align: center; color: var(--accent); font-weight: 700; font-size: 0.85rem; }

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}