/* Editorial diagrams and framed product visuals. */
.product-shot { overflow: hidden; padding: .75rem; min-height: 0; background: linear-gradient(145deg, #1d261c, #101412); border-color: #526643; }
.product-window { overflow: hidden; width: 100%; border: 1px solid #3d473b; border-radius: 1rem; background: #090b0a; box-shadow: 0 1.5rem 4rem #0005; }
.window-bar { display: flex; align-items: center; gap: .4rem; height: 2.25rem; padding-inline: .85rem; border-bottom: 1px solid #30382e; background: #171c17; }
.window-bar i { width: .45rem; height: .45rem; border-radius: 50%; background: #718166; }
.window-bar i:first-child { background: var(--acid); }
.product-shot img { display: block; width: 100%; height: auto; object-fit: contain; background: #090b0a; }
.voice-shot { display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 50% 45%, #263425 0, #121713 70%); }
.phone-frame { overflow: hidden; width: min(100%, 17rem); padding: .4rem; border: 1px solid #627357; border-radius: 2.5rem; background: #030403; box-shadow: 0 2rem 4rem #0008, 0 0 0 .4rem #ccff6608; }
.phone-frame img { border-radius: 2.12rem; }
.connectors-shot { display: flex; align-items: center; }
.dashboard-shot { padding: .75rem; background: linear-gradient(145deg, #26341e, #111612); }
.dashboard-shot img { max-height: 48rem; object-fit: contain; margin-inline: auto; }

.parallel-visual { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; }
.research-origin { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid #607a45; border-radius: 50%; background: #202e1c; color: var(--acid); }
.research-origin::after { content: ""; position: absolute; top: 100%; left: 50%; height: 2rem; width: 1px; background: #829b5b; }
.research-lanes { display: grid; gap: .8rem; width: 100%; padding: 1rem 1.25rem; border-inline: 1px solid #647b47; }
.research-lane { position: relative; padding: 1rem; border: 1px solid #4d6040; border-radius: .85rem; background: #19221b; }
.research-lane::before, .research-lane::after { content: ""; position: absolute; width: 1.25rem; height: 1px; background: #829b5b; top: 50%; }
.research-lane::before { right: 100%; }
.research-lane::after { left: 100%; }
.research-lane > span { display: block; color: #b6c5a6; font-size: .875rem; }
.research-lane > b { display: block; color: #f0f4e9; font-size: 1.0625rem; font-weight: 600; }
.research-trace { display: flex; gap: .35rem; margin-top: .75rem; }
.research-trace i { width: .35rem; height: .35rem; border: 1px solid #a3c271; border-radius: 50%; }
.research-trace i:last-child { background: var(--acid); }
.research-merge { position: relative; width: min(100%, 20rem); padding: 1rem; text-align: center; border: 1px solid #809f55; border-radius: 1rem; background: #25331e; }
.research-merge::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 2rem; background: #829b5b; }
.research-merge strong, .research-merge small { display: block; }
.research-merge strong { color: var(--acid); font-size: 1.4rem; font-weight: 550; }
.research-merge small { font-size: .9375rem; color: #cfdbc1; }

.image-process { position: relative; overflow: hidden; gap: 1.5rem; padding: 1.5rem; background: radial-gradient(circle at 75% 68%, #b8ff2a14, transparent 34%), linear-gradient(145deg, #171e17, #0d110f); border-color: #4f6242; }
.image-process::before { position: absolute; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(#8fa87812 1px, transparent 1px), linear-gradient(90deg, #8fa87812 1px, transparent 1px); background-size: 2rem 2rem; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.creative-stage { position: relative; z-index: 1; width: min(100%, 18rem); min-width: 0; }
.creative-stage--input { width: min(88%, 16rem); }
.visual-stage-label { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; color: #d9e4cf; font-size: .9375rem; font-weight: 650; letter-spacing: .02em; }
.visual-stage-label::before { width: .45rem; height: .45rem; content: ""; border-radius: 50%; background: var(--acid); box-shadow: 0 0 1rem #caff6666; }
.reference-board { display: grid; grid-template-columns: 1fr .6fr; gap: .8rem; padding: 1rem; border: 1px solid #5e7450; border-radius: 1rem; background: linear-gradient(145deg, #20291f, #111613); box-shadow: inset 0 1px #ffffff0d, 0 1rem 2.5rem #0004; }
.reference-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2rem 2rem; gap: .3rem; }
.reference-layout i { border: 1px solid #75876b; border-radius: .3rem; background: #2d3929; }
.reference-layout i:first-child { grid-row: span 2; background: linear-gradient(145deg, #425735, #202b1d); }
.reference-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; align-items: center; }
.reference-palette i { width: 100%; aspect-ratio: 1; border: 1px solid #ffffff1a; border-radius: 50%; background: #ccff66; }
.reference-palette i:nth-child(2) { background: #485844; }
.reference-palette i:last-child { background: #edf3e5; }
.reference-lines { grid-column: 1 / -1; display: grid; gap: .4rem; }
.reference-lines i { display: block; height: .3rem; width: 90%; background: #63735b; border-radius: 1rem; }
.reference-lines i:last-child { width: 60%; }
.image-process .creative-stage ul { margin-top: 1rem; gap: .4rem; flex-direction: row; }
.image-process .creative-stage li { font-size: .875rem; }
.creative-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto; border: 1px solid #8eac62; border-radius: 50%; background: #25321f; color: var(--acid); font-size: 1.55rem; line-height: 1; box-shadow: 0 0 0 .35rem #ccff6608; }
.composition-result { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid #829d58; border-radius: 1rem; background: #050705; box-shadow: 0 1.75rem 4rem #0009, .55rem .55rem 0 #33432a; }
.composition-result--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.composition-result--photo::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(to bottom, #0007, transparent 22%, transparent 72%, #0005); }
.composition-format { position: absolute; z-index: 2; top: .8rem; left: .8rem; padding: .42rem .58rem; border: 1px solid #d8ff9866; border-radius: 999px; background: #0b0f0bcc; color: #eff9df; font-size: .6875rem; font-weight: 650; letter-spacing: .08em; backdrop-filter: blur(.35rem); }
.composition-focus { position: absolute; z-index: 2; inset: 1rem; pointer-events: none; }
.composition-focus i { position: absolute; width: 1rem; height: 1rem; border-color: #d7ff92; opacity: .75; }
.composition-focus i:nth-child(1) { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.composition-focus i:nth-child(2) { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.composition-focus i:nth-child(3) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.composition-focus i:nth-child(4) { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }

.file-flow { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.file-inputs { position: relative; display: grid; gap: .65rem; width: 100%; padding-right: 1.25rem; border-right: 1px solid #718954; }
.file-input { position: relative; display: flex; align-items: center; gap: .75rem; padding: .85rem; background: #1c261e; border: 1px solid #455a3d; border-radius: .7rem; }
.file-input::after { position: absolute; content: ""; left: 100%; top: 50%; width: 1.25rem; height: 1px; background: #718954; }
.file-input svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: #b8d58f; }
.file-input span { font-size: 1rem; }
.file-input i { margin-left: auto; color: #9ab879; font-style: normal; }
.file-flow-arrow { color: var(--acid); line-height: 1; font-size: 1.6rem; }
.file-destination { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem; width: min(100%, 14rem); border: 1px solid #7d9b52; border-radius: 1.25rem; background: #24311e; }
.file-ai { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .3rem; border-radius: 50%; background: var(--acid); color: var(--acid-ink); font-weight: 600; }
.file-destination strong { font-size: 1rem; letter-spacing: .05em; color: #d5e9bb; }
.file-destination small { font-size: .9375rem; color: #c8d6bb; }

.skill-blueprint { gap: 1rem; }
.skill-block { position: relative; min-width: 0; padding: 1.25rem; border: 1px solid #4d5c40; border-radius: 1rem; background: #1b241c; }
.skill-block-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; color: var(--acid); }
.skill-block-top b { font-size: .875rem; font-weight: 500; }
.skill-block-top svg { width: 1.5rem; height: 1.5rem; }
.skill-block > strong { font-size: 1.0625rem; font-weight: 550; text-transform: uppercase; letter-spacing: .045em; }
.skill-block-lines { display: grid; gap: .5rem; margin-top: 1.25rem; }
.skill-block-lines i { display: block; width: 90%; height: .3rem; border-radius: 1rem; background: #4c5d42; }
.skill-block-lines i:last-child { width: 60%; }
.skill-block:last-child { background: #26371d; border-color: #8bab5c; color: var(--acid); }

@media (min-width: 44rem) {
  .research-lanes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 0; border-inline: 0; border-block: 1px solid #647b47; }
  .research-lane { padding: 1rem .75rem; }
  .research-lane::before, .research-lane::after { width: 1px; height: 1.5rem; left: 50%; right: auto; }
  .research-lane::before { top: auto; bottom: 100%; }
  .research-lane::after { top: 100%; }
  .image-process { flex-direction: row; gap: 2rem; padding: 2rem; }
  .creative-arrow { transform: rotate(-90deg); }
  .file-flow { flex-direction: row; gap: 1.25rem; }
  .file-inputs { width: min(50%, 18rem); }
  .file-flow-arrow { transform: rotate(-90deg); }
  .file-destination { width: 12rem; padding: 1.5rem .75rem; }
  .skill-blueprint { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  #idea .voice-shot { min-height: 40rem; }
  #conectar .connectors-shot { grid-column: 8 / -1; grid-row: 2; padding: .75rem; align-self: center; }
  #software .dashboard-shot { grid-row: 2; padding: 1rem; }
  #investigar .parallel-visual { min-height: 28rem; padding: 2.5rem 4rem; }
  #imagenes .image-process { flex-direction: column; gap: 1.75rem; justify-content: center; }
  #imagenes .creative-arrow { transform: none; }
  #archivos .file-flow { flex-direction: column; gap: 1.75rem; }
  #archivos .file-inputs { width: min(100%, 22rem); }
  #archivos .file-flow-arrow { transform: none; }
  #procesos .skill-blueprint { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}