/* Estilo artístico para Vectores: fondo colorido, pinceladas y fotos colgadas */

.vectors-page {
  background: radial-gradient(800px 600px at 20% 15%, #fff5cc, #fff) ,
              radial-gradient(900px 700px at 80% 70%, #dff2ff, #fff);
  color: #0f172a; /* texto oscuro legible sobre fondo claro */
}

/* Blobs de color animados (pinceladas abstractas) */
.art-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.blob {
  position: absolute;
  width: 40vmax; height: 40vmax;
  border-radius: 50%;
  filter: blur(40px) saturate(1.2);
  opacity: .35;
  mix-blend-mode: multiply;
  animation: drift 28s ease-in-out infinite;
}
.blob.b1 { left: -10vmax; top: -8vmax; background: #ffd166; }
.blob.b2 { right: -12vmax; top: 10vmax; background: #9bf6ff; animation-duration: 34s; }
.blob.b3 { left: 20vmax; bottom: -12vmax; background: #bdb2ff; animation-duration: 42s; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(5vmax, -4vmax) scale(1.08); }
}

/* Pinceladas decorativas */
.vectors-hero {
  position: relative;
}

.marquee-sign { display: grid; place-items: center; padding: 8px 0 0; }
.marquee-sign h2 {
  font-weight: 900;
  letter-spacing: .12em;
  color: #111827;
  background: #ffd166;
  padding: 10px 16px;
  border-radius: 10px;
  outline: 4px solid #111827;
  box-shadow: 0 10px 20px rgba(0,0,0,.2), 0 0 0 8px rgba(255, 255, 255, .8) inset;
  position: relative;
}
.marquee-sign h2::after {
  content: ""; position: absolute; inset: 4px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 4px, rgba(255,255,255,.5) 4px 8px);
  mix-blend-mode: overlay; opacity: .25; pointer-events: none;
}

.vectors-hero .lede { color: #334155; }
.photo::marker { content: none; }

.vectors-hero::before,
.vectors-hero::after {
  content: "";
  position: absolute;
  inset: -10px -10px auto auto;
  width: clamp(160px, 22vmin, 280px);
  height: clamp(60px, 8vmin, 120px);
  background: linear-gradient(90deg, rgba(255,120,120,.25), rgba(255,230,150,.35));
  filter: blur(6px) saturate(1.2);
  transform: rotate(-6deg);
  z-index: -1;
}
.vectors-hero::after {
  inset: auto auto -10px -10px;
  background: linear-gradient(90deg, rgba(120,200,255,.25), rgba(170,255,210,.35));
  transform: rotate(8deg);
}

/* Muro de fotos colgadas */
.hang-wall {
  position: relative;
  padding: 0 clamp(16px, 4vw, 48px) 48px;
}

/* Póster de collage */
.poster-mode .vector-poster { padding: 0 clamp(16px, 4vw, 48px) 48px; }
.poster-mode .poster {
  position: relative;
  aspect-ratio: 4/5;
  width: min(1000px, 92vw);
  margin: 18px auto 48px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(600px 400px at 20% 20%, #fde68a, transparent),
              radial-gradient(600px 400px at 80% 80%, #bae6fd, transparent), #0f172a;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.poster .piece {
  position: absolute; object-fit: cover; width: 34%; height: 28%; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  filter: contrast(1.05) saturate(1.05);
}
/* Grid libre del collage */
.poster .p1 { left: 6%; top: 8%; }
.poster .p2 { left: 40%; top: 6%; height: 34%; }
.poster .p3 { right: 6%; top: 10%; }
.poster .p4 { left: 10%; top: 40%; width: 28%; }
.poster .p5 { left: 42%; top: 42%; width: 30%; height: 26%; }
.poster .p6 { right: 8%; top: 40%; width: 28%; }
.poster .p7 { left: 12%; bottom: 8%; width: 32%; height: 30%; }
.poster .p8 { left: 46%; bottom: 10%; width: 26%; height: 26%; }
.poster .p9 { right: 10%; bottom: 12%; width: 28%; height: 28%; }
.poster .p10 { right: 38%; top: 28%; width: 20%; height: 18%; }
.poster-mode .poster { max-height: calc(100vh - 160px); }

@media (max-width: 640px) {
  .poster-mode .poster { width: 94vw; }
}

.poster .typography { position: absolute; inset: 0; pointer-events: none; }
.poster .typography .t {
  position: absolute;
  font-weight: 900;
  letter-spacing: .1em;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  -webkit-text-fill-color: transparent;
  /* Fallback de contorno con sombras para navegadores sin text-stroke */
  text-shadow:
    2px 0 0 #ffffff,
   -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    0 6px 18px rgba(0,0,0,.45);
  transform: rotate(var(--rot, -12deg));
}
.poster .t1 { top: 6%; left: 4%; font-size: clamp(16px, 2.4vmin, 22px); }
.poster .t2 { top: 22%; right: 6%; font-size: clamp(20px, 3vmin, 28px); --rot: 10deg; }
.poster .t3 { top: 48%; left: 8%; font-size: clamp(22px, 3.4vmin, 32px); }
.poster .t4 { bottom: 22%; right: 10%; font-size: clamp(18px, 2.6vmin, 26px); --rot: 6deg; }
.poster .t5 { bottom: 6%; left: 12%; font-size: clamp(26px, 4vmin, 38px); }

.poster .credit { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); color: rgba(255,255,255,.85); font-weight: 800; letter-spacing: .06em; }

/* Pared con poster y polaroids compactos */
.vector-wall .wall {
  padding: 24px clamp(16px, 4vw, 48px) 48px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 4vw, 40px);
}
.vector-wall .poster-frame {
  width: min(420px, 48vw);
  aspect-ratio: 2/3;
  background: #fff;
  padding: 12px;
  border: 8px solid #fff;
  outline: 3px solid rgba(0,0,0,.25);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  border-radius: 6px;
}
.vector-wall .poster-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

.vector-wall .polaroids {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  gap: 14px 16px;
}
.polaroid {
  position: relative; width: 130px; height: 155px; background: #fff; border-radius: 6px;
  padding: 8px 8px 28px; box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.tape { position: absolute; left: 50%; transform: translateX(-50%); top: -8px; width: 48px; height: 12px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.tape-red { background: #ef4444; }
.tape-mint { background: #34d399; }
.tape-blue { background: #60a5fa; }

.vector-wall .desk { position: relative; height: 60px; margin-top: 20px; background: linear-gradient(180deg, #a16207, #854d0e); border-top: 1px solid rgba(0,0,0,.2); box-shadow: 0 -6px 20px rgba(0,0,0,.15) inset; }

.vector-copy { padding: 0 clamp(16px, 4vw, 48px) 40px; max-width: 980px; margin: 0 auto; text-align: center; }
.vector-copy h3 { margin: 0 0 8px; font-weight: 900; letter-spacing: .04em; color: #0b3b8f; }
.vector-copy p { margin: 0; color: #334155; }

@media (max-width: 900px) {
  .vector-wall .polaroids { grid-template-columns: repeat(2, 120px); }
  .polaroid { width: 120px; height: 145px; }
}
@media (max-width: 640px) {
  .vector-wall .poster-frame { width: 92vw; }
  .vector-wall .polaroids { grid-template-columns: repeat(2, 46vw); gap: 10px; }
  .polaroid { width: 46vw; height: 52vw; }
}

.vectors-gallery {
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.photo {
  position: relative;
  background: #fff;
  border: 10px solid #fff;
  outline: 3px solid rgba(0,0,0,.15);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  border-radius: 6px;
  transform: rotate(var(--r, -1deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.photo img {
  width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 4px;
}
.photo figcaption {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.9);
  color: #0f172a;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.photo:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 28px 60px rgba(0,0,0,.22); }

/* Ganchos de sujeción */
.photo::before {
  content: "";
  position: absolute; left: 50%; top: -18px;
  width: 22px; height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.photo::after {
  content: ""; position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  width: 2px; height: 24px; background: rgba(0,0,0,.25);
}

/* Alternar rotaciones para efecto real */
.vectors-gallery .photo:nth-child(odd) { --r: -2.5deg; }
.vectors-gallery .photo:nth-child(even) { --r: 2.25deg; }

/* Marquee de herramientas creativas */
.tools-marquee { overflow: hidden; padding: 22px 0 34px; }
.tools-marquee .track {
  display: flex; gap: 34px; white-space: nowrap;
  animation: scroll 26s linear infinite;
}
.tools-marquee span {
  font-weight: 900; letter-spacing: .06em;
  color: #0b3b8f;
  background: linear-gradient(90deg, #fb7185, #fcd34d, #60a5fa, #34d399);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 640px) {
  .photo img { height: 200px; }
}