@font-face {
  font-family: 'Regency Script';
  src: url('/static/fonts/RegencyScriptFLF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --neo-color: #0006cc;
  --line-h: 2px;
  --text-general: #ffffff;
  --qr-color: #ffffff;
  --qr-bg: #000000;
  --qr-modal-color: #ffffff;
  --neo-color-85: color-mix(in srgb, var(--neo-color) 85%, transparent);
  --neo-color-80: color-mix(in srgb, var(--neo-color) 80%, transparent);
  --neo-color-75: color-mix(in srgb, var(--neo-color) 75%, transparent);
  --neo-color-65: color-mix(in srgb, var(--neo-color) 65%, transparent);
  --neo-color-60: color-mix(in srgb, var(--neo-color) 60%, transparent);
  --neo-color-55: color-mix(in srgb, var(--neo-color) 55%, transparent);
  --neo-color-45: color-mix(in srgb, var(--neo-color) 45%, transparent);
  --neo-color-35: color-mix(in srgb, var(--neo-color) 35%, transparent);
  --neo-color-25: color-mix(in srgb, var(--neo-color) 25%, transparent);

  /* Efectos de glow ahora usan estas variables */
  --glow-effect: drop-shadow(0 0 5px var(--neo-color-85))
    drop-shadow(0 0 12px var(--neo-color-55))
    drop-shadow(0 0 24px var(--neo-color-35));

  --soft-glow-effect: drop-shadow(0 0 3px var(--neo-color-85))
    drop-shadow(0 0 8px var(--neo-color-55))
    drop-shadow(0 0 16px var(--neo-color-35));

  --strong-glow-effect: drop-shadow(0 0 12px var(--neo-color))
    drop-shadow(0 0 26px var(--neo-color-80))
    drop-shadow(0 0 44px var(--neo-color-60));
}

/* Clase para desactivar el glow */
/* Clase para desactivar el glow - VERSIÓN CORREGIDA */
/* Clase para desactivar el glow - VERSIÓN MÁS ESPECÍFICA */
.no-glow .text,
.no-glow .side-text,
.no-glow .number,
.no-glow .qr,
.no-glow .qr-modal__title,
.no-glow .qr-modal__img,
.no-glow .brand-row .line,
.no-glow .side-img {
  filter: none !important;
}

/* Logos mantienen la sombra sutil drop-shadow(0 2px 4px rgba(0,0,0,0.5)) en no-glow */
.no-glow .brand-svg,
.no-glow .brand-img,
.no-glow .logo.logo-svg,
.no-glow .logo.logo-svg svg,
.no-glow .logo.logo-svg svg text,
.no-glow .logo-img,
.no-glow .brand-svg text {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== Alternancia de fondos ===== */
.shader-bg,
shader-art,
.video-container,
.image-container {
  display: none;
}

body[data-bg="shader"] .shader-bg,
body[data-bg="shader"] shader-art {
  display: block;
}

body[data-bg="video"] .video-container {
  display: block;
}

body[data-bg="image"] .image-container {
  display: block;
}

.shader-bg,
shader-art,
.video-container,
.image-container,
.gallery-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(var(--bg-blur, 0px));
  transform: scale(1.04);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Video full-cover */
.video-container video,
.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dg.ac {
  display: none;
}

.container {
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  padding: 10px;
  z-index: 4;
  pointer-events: none;
}

.container button,
.container a,
.container input,
.container select,
.container .qr,
.container [role="button"],
.container .clickable {
  pointer-events: auto;
}

.side-container {
  background: inherit;
  width: calc(50vw - 210px);
  height: 100vh;
  position: absolute;
  top: 0;
}

.left-container {
  left: 0;
}

.right-container {
  right: 0;
}

@media only screen and (max-width: 768px) {
  .container {
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
}

@font-face {
  font-family: "URW DIN";
  src: url("URWDIN-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.text {
  font-family: "URW DIN", sans-serif;
  color: var(--text-general);
  font-size: 6px;
  text-align: center;
  margin: 0;
  padding: 0 10px;
  position: absolute;
  bottom: 130px;
  z-index: 2;
}

/* ====== LOGO DE LA ESQUINA (HEADER) ====== */
.logo {
  width: 30%;
  height: auto;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  transition: transform 0.3s ease; /* Transición suave al ajustar */
}

.brand {
  width: 45%;
  max-width: 180px;
  text-align: center;
  pointer-events: none;
}

/* Alternancia IMG/SVG */
.brand-img,
.brand-svg {
  display: none;
  width: 100%;
  height: auto;
}

body[data-brand="img"] .brand-img {
  display: inline-block;
}

body[data-brand="svg"] .brand-svg {
  display: inline-block;
}

.brand .brand-svg {
  overflow: visible;
}

/* Filtros eliminados aquí para evitar doble brillo, se aplican al final del archivo */

.logo img,
.logo svg,
.logo-img,
.logo-svg {
  width: 140px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) var(--glow-effect);
}

/* Logo estándar (Caballo MEZLAT + Plataforma Diseñada Por MEZLAT) */
.logo.logo-standard {
  width: auto;
  max-width: 320px;
  height: auto;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.logo-standard .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo-standard .brand-logo-img {
  height: 52px;
  width: 52px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  background-color: var(--text-general, #ffffff);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.logo-standard .brand-divider {
  width: 2px;
  height: 44px;
  background: var(--text-general, #ffffff);
  border-radius: 1px;
  flex-shrink: 0;
}

.logo-standard .brand-text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  text-align: left;
}

.logo-standard .brand-line {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-general, #ffffff);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

/* Permitir que el SVG del logo inferior no se corte */
.logo svg {
  overflow: visible;
}

.number {
  color: var(--text-general);
  font-size: 30px;
  font-family: "URW DIN", sans-serif;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  right: 110px;
  filter: var(--glow-effect);
  z-index: 2;
}

/* Coloca ambos canvas en la misma posición para que z-index funcione */
#text-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.qr {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 90px;
  height: 90px;
  z-index: 2;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background-color: var(--qr-color);
  -webkit-mask-image: var(--qr-img);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 108% 108%;
  mask-image: var(--qr-img);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 108% 108%;
  filter: var(--glow-effect);
  transition: transform 0.2s ease, filter 0.25s ease, opacity 0.25s ease;
  outline: none;
}

#qrSmall canvas,
#qrSmall svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.qr:active {
  transform: scale(0.98);
}

/* ---------- Modal QR (no toca el layout) ---------- */
.qr-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.qr-modal.open {
  display: flex;
  opacity: 1;
}

.qr-modal__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  gap: 0;
  padding: 28px 24px 24px;
  
  border-radius: 28px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
  
  background: var(--qr-bg);
  transition: transform 0.25s ease;

  width: 350px;
  max-width: 92vw;
  margin: 0 auto;
  box-sizing: border-box;
}

.qr-modal.open .qr-modal__card {
  transform: scale(1);
}

.qr-modal__title {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-general);
  text-align: center;
  margin: 20px 0 4px 0;
  line-height: 1;
}

/* QR grande dentro del modal */
.qr-modal__img {
  display: block;
  width: 270px;
  height: 270px;
  aspect-ratio: 1 / 1;
  
  border-radius: 14px;
  background-color: var(--qr-color);

  /* Máscaras */
  -webkit-mask-image: var(--qr-img);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: var(--qr-img);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  filter: none;
  cursor: pointer;
}

/* en móviles muy pequeños, aprovecha casi toda la pantalla */
@media (max-width: 420px) {
  .qr-modal__card {
    width: 92%;
    padding: 35px 25px 30px;
  }
  
  .qr-modal__img {
    width: 220px;
    height: 220px;
  }
}

.image-left {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: auto;
}

.image-right {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: auto;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

input {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  right: 10px;
  padding: 5px;
  font-size: 14px;
  width: 150px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 5px;
}

/* Alternancia de logos */
.logo-img,
.logo-svg {
  display: none;
}

body[data-logo="img"] .logo-img {
  display: block;
}

body[data-logo="svg"] .logo-svg {
  display: block;
}

/* ⬇️ AGREGA ESTAS LÍNEAS AQUÍ ⬇️ */
/* Asegurar que el logo en modo imagen también tenga glow */
.logo-img {
  filter: var(--glow-effect);
}

/* Alternancia de laterales */
.side-img,
.side-text {
  display: none;
}

body[data-sides="img"] .side-img {
  display: block;
}

body[data-sides="text"] .side-text {
  display: block;
}

/* Posicionamiento base: igual que tus imágenes */
.side-text,
.side-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  z-index: 1;
}

/* Lados */
.left {
  left: 5px;
}

.right {
  right: 5px;
}

/* Tamaño original de las imágenes (se mantiene) */
.image-left,
.image-right {
  width: 60px;
}

/* Asegurar que las imágenes laterales también tengan el margen de 5px */
.side-img.image-left {
  left: 15px;
}

.side-img.image-right {
  right: 15px;
}

/* Texto vertical MESLATT */
.side-text {
  width: 60px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Sans JP", "Montserrat", Arial, sans-serif;
  font-weight: bold; /* Aumentado de 50 para que el glow sea visible */
  font-size: 30px;
  letter-spacing: 20px;
  color: var(--text-general);
  filter: var(--glow-effect);
  user-select: none;
  pointer-events: none;
}

.side-text.right {
  writing-mode: vertical-lr; /* De izquierda a derecha (vertical) */
}

/* ⬇️ AGREGA ESTAS LÍNEAS AQUÍ ⬇️ */
/* Aplicar glow a las imágenes laterales también */
.side-img {
  filter: var(--glow-effect);
}

/* ====== Fila centrada: LÍNEA — LOGO — LÍNEA ====== */
.brand-row {
  position: absolute;
  bottom: 190px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}

/* Líneas neón */
.brand-row .line {
  flex: 1;
  height: var(--line-h);
  border-radius: 999px;
  filter: drop-shadow(0 0 4px var(--neo-color-75))
    drop-shadow(0 0 12px var(--neo-color-45));
  transition: transform 0.3s ease; /* Transición suave al ajustar */
  transform-origin: left center; /* Para la línea izquierda */
}

.brand-row .line.right {
  transform-origin: right center; /* Para la línea derecha */
}

/* Degradados simétricos con fade */
.brand-row .line.left {
  background: linear-gradient(
    to left,
    transparent 0%,
    var(--neo-color-25) 18%,
    var(--neo-color-75) 50%,
    var(--neo-color-25) 82%,
    transparent 100%
  );
}

.brand-row .line.right {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--neo-color-25) 18%,
    var(--neo-color-75) 50%,
    var(--neo-color-25) 82%,
    transparent 100%
  );
}

/* ====== LOGO (ítem flex centrado entre las líneas) ====== */
.brand {
  width: 45%;
  max-width: 180px;
  text-align: center;
  pointer-events: none;
  /* ⬇️ AGREGA ESTAS 2 LÍNEAS PARA CENTRADO PERFECTO ⬇️ */
  display: flex;
  justify-content: center;
}

/* Alternancia IMG/SVG */
/* 1. El SVG se queda igual (debe llenar el ancho) */
.brand-svg {
  display: none;
  width: 100%;
  height: auto;
}

/* 2. La IMAGEN ahora tiene reglas de centrado propias */
.brand-img {
  display: none;
  width: auto;          /* Mantiene la proporción */
  height: auto;         /* 👈 CAMBIO: Dejar en auto para que no fuerce 40px */
  max-width: 100%;      /* Evita que se salga del ancho */
  max-height: 100%;     /* Evita que se salga del alto */
  margin: 0 auto;       /* Centrado horizontal */
  object-fit: contain;  /* Mantiene proporción */
}

body[data-brand="img"] .brand-img {
  display: inline-block;
}

body[data-brand="svg"] .brand-svg {
  display: inline-block;
}

.brand .brand-svg {
  overflow: visible;
}

/* Quitamos "text" para que el filtro aplique a TODO el SVG */
.brand .brand-svg, 
.brand .brand-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) var(--soft-glow-effect);
}

/* Responsive fino */
@media (max-width: 420px) {
  :root {
    --line-h: 1.5px;
  }

  .brand-row {
    gap: 10px;
  }
}