@import url("tiendas-online-paraguay.css?v=20260721-1");

.conversion-flow {
  position: relative;
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(11, 27, 59, .98), rgba(5, 15, 35, .98));
  box-shadow: var(--shadow);
}

.conversion-flow::before {
  content: "";
  position: absolute;
  inset: 20% 14%;
  background: radial-gradient(circle, rgba(20, 230, 110, .17), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

.flow-card {
  position: relative;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(3, 17, 41, .92);
}

.flow-card + .flow-card::after {
  content: "→";
  position: absolute;
  left: -21px;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #031129;
  background: var(--green);
  font-weight: 900;
  transform: translateY(-50%);
}

.flow-label {
  color: #9af3bd;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.flow-card strong { font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.2; }
.flow-card p { color: var(--muted); font-size: .83rem; line-height: 1.5; }
.flow-card:last-child { border-color: rgba(20, 230, 110, .3); background: linear-gradient(160deg, rgba(20, 230, 110, .11), rgba(3, 17, 41, .96)); }

.signal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.signal {
  padding: 16px;
  border-left: 3px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .035);
}

.signal strong { display: block; margin-bottom: 3px; }
.signal span { color: var(--muted); font-size: .86rem; }
.use-card { min-height: 210px; }
.use-card .card-icon { font-size: .78rem; font-weight: 900; }

.project-note {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(20, 230, 110, .15);
  border-radius: 13px;
  color: #b8c8e6;
  background: rgba(20, 230, 110, .045);
  font-size: .86rem;
}

.lightbox { z-index: 2000; }
.lightbox-image {
  max-width: 95vw;
  max-height: 90vh;
  cursor: zoom-out;
}

@media (max-width: 900px) {
  .conversion-flow { width: min(100%, 720px); }
}

@media (max-width: 768px) {
  .conversion-flow {
    grid-template-columns: 1fr;
    max-width: 520px;
    padding: 14px;
  }
  .flow-card { min-height: 122px; text-align: left; }
  .flow-card + .flow-card::after {
    content: "↓";
    left: 50%;
    top: -21px;
    transform: translateX(-50%);
  }
  .signal-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .signal-strip::-webkit-scrollbar { display: none; }
  .signal { flex: 0 0 82%; scroll-snap-align: start; text-align: left; }
  .use-card { min-height: auto; }
  .section[aria-labelledby="proyecto-title"] .project-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .section[aria-labelledby="proyecto-title"] .project-main-image {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .section[aria-labelledby="proyecto-title"] .project-main-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
  }
  .lightbox { padding: 56px 10px 24px; }
  .lightbox-image {
    max-width: 95vw;
    max-height: 90vh;
  }
}