/* =========================================================
   BAW v23 · Brechas del megaprompt «Sitio pintado con código»
   [ID: ACD-BAW-V23] · Método ACD-IA 5.0 · prefijo v23-
   ========================================================= */

/* 1. Problema → solución diseñada (prueba real del portafolio) */
.v23-sol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  grid-template-areas: "lead card" "arrow card";
  align-items: center;
  column-gap: 34px;
  margin: 34px 0 0;
}
.v23-sol-lead {
  grid-area: lead;
  align-self: end;
  margin: 0;
  font: 500 clamp(19px, 2vw, 24px)/1.3 'Space Grotesk', sans-serif;
  letter-spacing: -0.015em;
  color: #3A4152;
  max-width: 21em;
}
.v23-sol-lead strong { color: #10131A; font-weight: 700; }
.v23-sol-arrow {
  grid-area: arrow;
  align-self: start;
  justify-self: end;
  width: min(100%, 260px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.v23-sol-arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.v23-a1 { stroke: #AC145B; stroke-width: 7; opacity: .78; }
.v23-a2 { stroke: #FF8FB8; stroke-width: 13; opacity: .3; }
.v23-ah { stroke: #AC145B; stroke-width: 7; opacity: .85; }
.v23-sol.v23-prep .v23-sol-arrow path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1); }
.v23-sol.v23-prep .v23-a2 { transition-delay: .12s; }
.v23-sol.v23-prep .v23-ah { transition-duration: .35s; transition-delay: 1.05s; }
.v23-sol.v23-prep.is-on .v23-sol-arrow path { stroke-dashoffset: 0; }

.v23-sol-card {
  grid-area: card;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  align-items: center;
  gap: 21px;
  padding: 13px 21px 13px 13px;
  border-radius: 34px 21px 55px 13px / 21px 34px 13px 55px;
  background: #FFFFFF;
  border: 2px solid #FFE36B;
  box-shadow: 0 13px 34px rgba(81, 37, 201, .14), 0 2px 0 rgba(255, 227, 107, .9);
  color: #10131A;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.v23-sol-card:hover { transform: translateY(-3px); box-shadow: 0 21px 44px rgba(81, 37, 201, .2), 0 2px 0 rgba(255, 227, 107, .9); }
.v23-sol-card:focus-visible { outline: 3px solid #2346D6; outline-offset: 4px; }
.v23-sol-shot {
  display: block;
  overflow: hidden;
  border-radius: 13px 8px 21px 8px;
  border: 1px solid #E4E6EB;
  background: #F4F5F8;
}
.v23-sol-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #F4F5F8; border-bottom: 1px solid #E4E6EB; font: 500 10px 'IBM Plex Mono', monospace; color: #4B5263; white-space: nowrap; overflow: hidden; }
.v23-sol-bar i { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #F87171; }
.v23-sol-bar i:nth-child(2) { background: #FBBF24; }
.v23-sol-bar i:nth-child(3) { background: #34D399; margin-right: 4px; }
.v23-sol-shot img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: top center; }
.v23-sol-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v23-sol-k { font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #5125C9; }
.v23-sol-txt strong { font: 700 clamp(24px, 2.4vw, 30px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.v23-sol-txt > span:nth-child(3) { font: italic 16px/1.4 Georgia, 'Times New Roman', serif; color: #3A4152; }
.v23-sol-go { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #2346D6; color: #FFFFFF; font: 600 15px 'IBM Plex Sans', sans-serif; }

@media (max-width: 760px) {
  .v23-sol { grid-template-columns: 1fr; grid-template-areas: "lead" "arrow" "card"; row-gap: 8px; }
  .v23-sol-arrow { justify-self: center; width: 104px; transform: rotate(70deg); margin: 40px 0 36px; }
  .v23-sol-k { font-size: 11px; letter-spacing: .04em; }
  .v23-sol-go { padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .v23-sol-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 13px; padding: 10px 13px 10px 10px; }
  .v23-sol-shot img { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .v23-sol.v23-prep .v23-sol-arrow path { transition: none; stroke-dashoffset: 0; }
  .v23-sol-card { transition: none; }
  .v23-sol-card:hover { transform: none; }
}