/* Retrato editorial de Erick */
.portrait-art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background: #b9dfe8;
}

.portrait-art::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 27%;
  background-image: linear-gradient(rgba(23, 23, 20, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 23, 20, .1) 1px, transparent 1px);
  background-size: 2rem 2rem;
  opacity: .62;
  pointer-events: none;
}

.portrait-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 56%, rgba(31, 71, 98, .08) 76%, rgba(23, 23, 20, .2));
  pointer-events: none;
}

.portrait-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portrait-network { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.portrait-network::before, .portrait-network::after { content: ""; position: absolute; bottom: 9%; width: 28%; height: 2px; background: #171714; opacity: .58; transform-origin: center; }
.portrait-network::before { left: 6%; transform: rotate(-8deg); }
.portrait-network::after { right: 22%; transform: rotate(8deg); }
.portrait-network i { position: absolute; width: clamp(.78rem, 2.2vw, 1.1rem); aspect-ratio: 1; border: 2px solid #171714; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px rgba(244, 239, 229, .7); }
.portrait-network i:nth-child(1) { top: 6%; left: 5%; }
.portrait-network i:nth-child(2) { top: 8%; right: 5%; background: var(--coral); }
.portrait-network i:nth-child(3) { bottom: 6%; left: 5%; background: var(--blue); }
.portrait-network i:nth-child(4) { right: 27%; bottom: 7%; background: var(--mint); }
.portrait-art > .portrait-monogram { position: absolute; right: 4%; bottom: 3%; z-index: 4; display: grid; width: 3.25rem; aspect-ratio: 1; place-items: center; border: 2px solid #171714; background: var(--coral); color: #171714; font: 2rem/1 var(--display); box-shadow: 3px 3px 0 #171714; transform: rotate(-8deg); }

/* Laboratorio de red */
.project-art--network { display: grid; place-items: center; background: var(--blue); }
.project-art--network::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 85%, var(--yellow) 0 10%, transparent 10.3%), radial-gradient(circle at 91% 20%, var(--mint) 0 8%, transparent 8.3%); }
.topology { position: relative; width: 82%; overflow: visible; filter: drop-shadow(.45rem .55rem 0 rgba(0,0,0,.18)); }
.topology path { fill: none; stroke: #171714; stroke-width: 7; stroke-linecap: round; }
.topology circle, .topology rect { fill: #f4efe5; stroke: #171714; stroke-width: 5; }
.topology rect { fill: var(--coral); }
.topology text { fill: #171714; font: 800 17px var(--body); text-anchor: middle; }

/* Cloud blueprint */
.project-art--cloud { display: grid; place-items: center; background: var(--yellow); }
.project-art--cloud::before { content: "☁"; position: absolute; right: 3%; bottom: -16%; color: rgba(255,255,255,.55); font-size: clamp(10rem, 25vw, 22rem); line-height: 1; }
.cloud-shell { position: relative; display: grid; width: 78%; height: 70%; grid-template-columns: 1fr 1fr; gap: 6%; padding: 3.4rem 1.5rem 1.5rem; border: 2px solid #171714; background: #f4efe5; color: #171714; box-shadow: .75rem .85rem 0 #171714; transform: rotate(2deg); }
.cloud-shell > span { position: absolute; top: 1rem; left: 1.5rem; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.cloud-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #171714; font: clamp(1rem, 2.4vw, 2.2rem) var(--display); }
.cloud-zone small { margin-top: .5rem; font: 700 .55rem var(--body); text-transform: uppercase; }
.cloud-zone--public { background: var(--coral); }
.cloud-zone--private { background: var(--mint); }
.cloud-shell i { position: absolute; width: .8rem; aspect-ratio: 1; border: 2px solid #171714; border-radius: 50%; background: var(--blue); }
.cloud-shell i:nth-of-type(1) { top: 1rem; right: 4.5rem; }
.cloud-shell i:nth-of-type(2) { top: 1rem; right: 2.8rem; background: var(--coral); }
.cloud-shell i:nth-of-type(3) { top: 1rem; right: 1.1rem; background: var(--mint); }

/* Blue Team */
.project-art--soc { display: grid; place-items: center; background: var(--coral); }
.soc-terminal { width: 82%; height: 72%; padding: 1.1rem; border: 2px solid #171714; background: #171714; color: #ecf3ed; box-shadow: .8rem .9rem 0 rgba(0,0,0,.22); transform: rotate(-2deg); }
.soc-terminal header { display: flex; justify-content: space-between; margin-bottom: 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid #555; font-size: .58rem; }
.soc-terminal header span { color: var(--mint); }
.soc-terminal p { margin: .55rem 0; font: clamp(.58rem, 1.25vw, .8rem)/1.4 monospace; }
.soc-terminal p i { color: var(--yellow); font-style: normal; }
.soc-wave { display: flex; height: 28%; align-items: flex-end; gap: 5%; margin-top: 1.1rem; border-bottom: 1px solid #777; }
.soc-wave span { width: 12%; height: 28%; background: var(--blue); }
.soc-wave span:nth-child(2) { height: 64%; }.soc-wave span:nth-child(3) { height: 45%; }.soc-wave span:nth-child(4) { height: 88%; background: var(--coral); }.soc-wave span:nth-child(5) { height: 55%; }.soc-wave span:nth-child(6) { height: 75%; background: var(--mint); }

/* Network automation */
.project-art--automation { display: grid; place-items: center; background: var(--mint); }
.code-window { width: 82%; height: 74%; border: 2px solid #171714; background: #20211e; color: #f4efe5; box-shadow: .8rem .9rem 0 #171714; transform: rotate(2deg); }
.code-window header { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid #555; }
.code-window header i { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }.code-window header i:nth-child(2){background:var(--yellow)}.code-window header i:nth-child(3){background:var(--mint)}
.code-window header span { margin-left: auto; color: #aaa; font: .55rem monospace; }
.code-window code { display: block; padding: 1.2rem clamp(1rem, 3vw, 2.4rem); font-size: clamp(.75rem, 1.9vw, 1.2rem); line-height: 1.55; }
.code-window code b { color: var(--mint); }
.code-caret { color: var(--yellow); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Visuales del diálogo */
.dialog-visual { position: relative; overflow: hidden; }
.dialog-visual[data-visual="network"] { background: var(--blue); }
.dialog-visual[data-visual="cloud"] { background: var(--yellow); }
.dialog-visual[data-visual="soc"] { background: var(--coral); }
.dialog-visual[data-visual="automation"] { background: var(--mint); }
.dialog-visual::before { content: attr(data-mark); position: absolute; top: 50%; left: 50%; z-index: 1; font: clamp(4rem, 16vw, 15rem)/1 var(--display); color: rgba(255,255,255,.92); letter-spacing: -.09em; transform: translate(-50%,-50%) rotate(-4deg); text-shadow: .55rem .65rem 0 rgba(23,23,20,.3); }
.dialog-visual::after { content: ""; position: absolute; inset: 12% 18%; border: 2px solid #171714; box-shadow: 1rem 1.2rem 0 #171714; transform: rotate(3deg); }