/* VitrinaLive — gráfico para OBS (1920×1080, fondo transparente) */
:root {
  --principal: #1E1A2B;
  --texto-principal: #FFFFFF;
  --acento: #FF3D7F;
  --texto-acento: #FFFFFF;
  --sombra: 0 18px 48px rgba(0, 0, 0, .38), 0 4px 12px rgba(0, 0, 0, .25);
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  font-family: var(--fuente);
}

/* Fondo a cuadros para probar en un navegador normal (?prueba=1) */
body.prueba {
  background-color: #8a8a8a;
  background-image:
    linear-gradient(45deg, #b5b5b5 25%, transparent 25%),
    linear-gradient(-45deg, #b5b5b5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #b5b5b5 75%),
    linear-gradient(-45deg, transparent 75%, #b5b5b5 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

.lienzo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  overflow: hidden;
}
.lienzo.vertical { width: 1080px; height: 1920px; }
.lienzo.horizontal { width: 1920px; height: 1080px; }

.zona { position: absolute; }

/* ---------- Horizontal (1920×1080): tarjeta al lado elegido, cinta abajo ---------- */
.horizontal .bloque { display: contents; }
.horizontal .zona-tarjeta {
  top: 50%;
  width: 520px;
  transform: translateY(-50%);
}
.horizontal .zona-tarjeta.lado-derecha { right: 40px; transform-origin: right center; }
.horizontal .zona-tarjeta.lado-izquierda { left: 40px; transform-origin: left center; }
/* Tamaño grande: ~640 px de ancho (520 × 1,23) */
.horizontal .zona-tarjeta.grande { transform: translateY(-50%) scale(1.2308); }
.horizontal .zona-cinta { left: 0; right: 0; bottom: 0; }

/* ---------- Vertical (1080×1920): zona útil x 40–910, y 230–1290 ----------
   Arriba 220 px (perfil), abajo 620 px (comentarios) y derecha 170 px (botones) quedan tapados. */
.vertical .zona-banner { top: 240px; left: 475px; width: 830px; }
.vertical .banner { max-width: 830px; }
.vertical .bloque {
  position: absolute;
  left: 40px;
  width: 870px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* "abajo": borde inferior de la tarjeta en y = 1290 por defecto (1920 − 1290 = 630), justo encima
   de los comentarios; el ajuste de altura lo cambia grafico.js con un "bottom" en línea */
.vertical .bloque.abajo { bottom: 630px; }
.vertical .bloque.centro { top: 760px; transform: translateY(-50%); } /* centro de la zona útil */
.vertical .bloque .zona { position: static; }
.vertical .tarjeta { transform: translateY(80px); }
.vertical .cinta { height: 76px; border-radius: 18px; overflow: hidden; transform: translateY(40px); }
.vertical .cinta-marca { font-size: 26px; padding: 0 20px; }
.vertical .cinta-texto { font-size: 36px; padding-right: 70px; }

/* ---------- Tarjeta del producto ---------- */

.tarjeta {
  background: var(--principal);
  color: var(--texto-principal);
  border-radius: 28px;
  padding: 22px;
  box-shadow: var(--sombra);
  opacity: 0;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.lado-derecha .tarjeta { transform: translateX(110px); }
.lado-izquierda .tarjeta { transform: translateX(-110px); }
.lienzo .tarjeta.dentro { opacity: 1; transform: none; }

/* Arriba: foto vertical a la izquierda y datos a la derecha */
.cabeza { display: flex; gap: 18px; align-items: flex-start; }
.foto {
  position: relative;
  flex: 0 0 196px;
  height: 262px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .inicial { font-size: 120px; font-weight: 800; line-height: 1; opacity: .9; }
.info { flex: 1; min-width: 0; }

.quedan {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  background: #FFD23F;
  color: #1A1400;
  font-weight: 800;
  font-size: 24px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido { 50% { transform: scale(1.06); } }

.nombre {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.color-prod { margin-top: 4px; font-size: 24px; opacity: .78; }

.precios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 8px;
}
.precio { font-size: 60px; font-weight: 900; line-height: 1; color: var(--acento); letter-spacing: -1px; }
.antes { font-size: 28px; text-decoration: line-through; opacity: .65; }
.dto {
  background: var(--acento);
  color: var(--texto-acento);
  font-weight: 800;
  font-size: 24px;
  padding: 2px 10px;
  border-radius: 10px;
}
.bs { margin-top: 4px; font-size: 24px; opacity: .85; }

.tallas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.talla {
  min-width: 46px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: .92;
}
.agotado { margin-top: 10px; font-size: 24px; font-weight: 800; color: var(--acento); }

.etiqueta {
  margin-top: 16px;
  background: var(--acento);
  color: var(--texto-acento);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.15;
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
}

.compra {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}
/* QR: caja blanca de 256 px; el código en sí mide ≥ 220 px */
.qr {
  flex: 0 0 auto;
  width: 256px;
  height: 256px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
}
.qr svg { display: block; width: 100%; height: 100%; }
.compra-texto { flex: 1; font-size: 25px; line-height: 1.25; min-width: 0; }
.compra-texto strong.partir { white-space: normal; }
.compra-texto .trozo { display: inline-block; white-space: nowrap; }
.compra-texto strong {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 900;
  color: var(--acento);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* ---------- Banner ---------- */
.zona-banner {
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  display: flex;
  justify-content: center;
}
/* .banner hace la entrada/salida; .banner-caja lleva el fondo y el pulso,
   así las dos animaciones de "transform" no se pisan */
.banner {
  max-width: 600px;
  opacity: 0;
  transform: translateY(-60px) scale(.96);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.banner.dentro { opacity: 1; transform: none; }
.banner-caja {
  text-align: center;
  padding: 20px 34px 22px;
  border-radius: 26px;
  box-shadow: var(--sombra);
}

/* Efecto "pulso": late en bucle (escala 1 → 1,06 y brillo del color del banner, ~1,2 s).
   En OBS se ve siempre, aunque el sistema pida menos movimiento. */
.banner.pulso .banner-caja { animation: pulso-banner 1.2s ease-in-out infinite; }
@keyframes pulso-banner {
  0%, 100% { transform: scale(1); box-shadow: var(--sombra), 0 0 0 0 var(--brillo); filter: brightness(1); }
  50% { transform: scale(1.06); box-shadow: var(--sombra), 0 0 56px 14px var(--brillo); filter: brightness(1.1); }
}
.banner-titulo { font-size: 56px; font-weight: 900; line-height: 1.05; }
.banner-sub { margin-top: 6px; font-size: 30px; font-weight: 600; opacity: .92; }
.banner-cuenta {
  display: inline-block;
  margin-top: 12px;
  font-size: 34px;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  font-variant-numeric: tabular-nums;
}
.banner-cuenta.ultima { animation: latido .8s ease-in-out infinite; }

/* ---------- Cinta ---------- */
.cinta {
  display: flex;
  align-items: stretch;
  height: 84px;
  background: var(--principal);
  color: var(--texto-principal);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.lienzo .cinta.dentro { opacity: 1; transform: none; }
.cinta-marca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  background: var(--acento);
  color: var(--texto-acento);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}
.cinta-marca::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  animation: punto 1.2s ease-in-out infinite;
}
@keyframes punto { 50% { opacity: .25; } }
.cinta-ventana { flex: 1; overflow: hidden; display: flex; align-items: center; }
.cinta-pista {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: desplazar var(--duracion, 30s) linear infinite;
}
.cinta-grupo { display: flex; flex: 0 0 auto; }
.cinta-texto { font-size: 38px; font-weight: 700; padding-right: 90px; }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* ---------- Tarjeta vertical: foto | datos | QR ---------- */
.tv { padding: 20px; }
.tv-fila { display: flex; gap: 18px; align-items: stretch; }
.tv .foto { flex: 0 0 180px; height: auto; min-height: 256px; }
.tv .nombre { font-size: 30px; -webkit-line-clamp: 2; }
.tv .color-prod { font-size: 22px; }
.tv .precio { font-size: 56px; }
.tv .etiqueta { margin-top: 14px; }
.tv-pie { margin-top: 12px; text-align: center; font-size: 27px; }
.tv-pie strong { color: var(--acento); font-weight: 900; }
.grande .tv .foto { flex-basis: 210px; min-height: 300px; }
.grande .tv .qr { width: 300px; height: 300px; }
.grande .tv .nombre { font-size: 34px; }
.grande .tv .precio { font-size: 64px; }
.grande .tv-pie { font-size: 30px; }

/* ---------- Zonas tapadas (solo vista previa del panel) ---------- */
.zonas { position: absolute; inset: 0; pointer-events: none; }
.tapa {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .5) 0 20px, rgba(0, 0, 0, .32) 20px 40px);
  outline: 4px dashed rgba(255, 255, 255, .55);
  outline-offset: -4px;
  color: rgba(255, 255, 255, .9);
  font: 700 38px var(--fuente);
}
.tapa-arriba { left: 0; right: 0; top: 0; height: 220px; }
.tapa-abajo { left: 0; right: 0; bottom: 0; height: 620px; }
.tapa-derecha { right: 0; top: 220px; bottom: 620px; width: 170px; }
.tapa-derecha span { writing-mode: vertical-rl; }

/* ---------- Aviso (solo en modo prueba) ---------- */
.aviso {
  position: absolute;
  left: 40px;
  top: 40px;
  max-width: 900px;
  background: rgba(20, 18, 28, .85);
  color: #fff;
  font-size: 26px;
  padding: 14px 22px;
  border-radius: 14px;
}

/* Menos movimiento: solo afecta a la vista previa dentro del panel (body.vista);
   el gráfico de OBS se ve siempre igual, pulso incluido. */
@media (prefers-reduced-motion: reduce) {
  body.vista .tarjeta, body.vista .banner, body.vista .cinta { transition: opacity .3s ease; transform: none !important; }
  body.vista .banner.pulso .banner-caja { animation: none; }
}