/* Gráficos en código para llenar secciones de texto (10-nov-2026, pedido de Luis).
   .split = texto + gráfico en dos columnas en escritorio; apilado en móvil. */

.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 840px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); }
  .split > .text { max-width: none; }
}
.split__side { display: grid; gap: var(--s-5); }

/* En "Cómo funciona" los pasos ocupan todo el ancho y la sala de montaje va debajo, centrada. */
.split.split--top { display: block; margin-top: var(--s-5); }
.split--top .ed { max-width: 46rem; margin: var(--s-6) auto 0; }

/* ---------- Sala de montaje (simula la edición; la misma del home, con clases ed-*) ---------- */
.ed { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-deep), var(--glow); overflow: hidden; }
.ed .term__bar { display: flex; align-items: center; }
.ed__title { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); }
.ed__view { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--c-line); }
.ed__screen { position: relative; aspect-ratio: 9 / 16; height: 15rem; width: auto; max-width: 100%; justify-self: center; border-radius: 8px; overflow: hidden; background: #000; }
.ed__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed__screen::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(238, 241, 245, 0.45); }
.ed__rec, .ed__tc { position: absolute; z-index: 1; font-family: var(--f-mono); font-size: 0.625rem; color: #fff; text-shadow: 0 1px 2px #000; }
.ed__rec { top: 3%; left: 6%; display: flex; align-items: center; gap: 4px; }
.ed__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; animation: ed-blink 1.2s steps(1) infinite; }
.ed__tc { bottom: 3%; right: 6%; }
@keyframes ed-blink { 50% { opacity: 0; } }
.ed__insp { display: grid; gap: 0.45rem; align-content: start; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); }
.ed__insp .row { display: flex; justify-content: space-between; gap: var(--s-2); border-bottom: 1px dashed var(--c-line); padding-bottom: 0.3rem; }
.ed__insp b { color: var(--c-text); font-weight: 400; }
.ed__insp .ok { color: var(--c-accent); }
.ed__insp .live { color: #C79BFF; animation: ed-live 1.6s ease-in-out infinite; }
@keyframes ed-live { 50% { opacity: 0.45; } }
.ed__tl { position: relative; padding: var(--s-3) var(--s-3) var(--s-4) 2.8rem; display: grid; gap: 6px; }
.ed__track { position: relative; height: 1.15rem; }
.ed__track::before { content: attr(data-t); position: absolute; left: -2.4rem; top: 0; font-family: var(--f-mono); font-size: 0.6rem; line-height: 1.15rem; color: var(--c-text-muted); }
.ed__clip { position: absolute; top: 0; bottom: 0; border-radius: 3px; left: var(--a); width: var(--b); }
.ed__clip--v { background: linear-gradient(180deg, #2BB7CC, #16879A); }
.ed__clip--g { background: linear-gradient(180deg, #A05BFF, #6B22C4); }
.ed__clip--a { background: repeating-linear-gradient(90deg, rgba(30, 200, 224, 0.9) 0 2px, rgba(30, 200, 224, 0.3) 2px 4px); }
.ed__clip--m { background: repeating-linear-gradient(90deg, rgba(192, 139, 255, 0.85) 0 3px, rgba(192, 139, 255, 0.3) 3px 5px); }
.ed__ph { position: absolute; top: var(--s-2); bottom: var(--s-2); left: 2.8rem; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; animation: ed-play 9s linear infinite; }
.ed__ph::before { content: ""; position: absolute; top: -4px; left: -4px; border: 5px solid transparent; border-top-color: #fff; }
@keyframes ed-play { from { left: 2.8rem; } to { left: calc(100% - var(--s-3)); } }
@media (prefers-reduced-motion: reduce) { .ed__ph, .ed__rec::before, .ed__insp .live { animation: none; } }

/* ---------- Muñequito dirigiendo un set ---------- */
.setdir { margin: 0; }
.setdir svg { display: block; width: 100%; height: auto; overflow: visible; }
.setdir .sd-arm { transform-origin: 82px 162px; animation: sd-arm 2.4s ease-in-out infinite; }
@keyframes sd-arm { 50% { transform: rotate(-7deg); } }
.setdir .sd-w { opacity: 0; animation: sd-wave 2.4s ease-out infinite; }
.setdir .sd-w2 { animation-delay: 0.25s; }
@keyframes sd-wave { 10% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } }
.setdir .sd-rec { animation: sd-rec 1.2s steps(1) infinite; }
@keyframes sd-rec { 50% { opacity: 0.15; } }
.setdir .sd-light polygon { animation: sd-light 5s ease-in-out infinite; }
@keyframes sd-light { 50% { opacity: 0.75; } }
.setdir .sd-bubble { transform-origin: 76px 104px; animation: sd-bub 4.8s ease-in-out infinite; }
@keyframes sd-bub { 0%, 8% { transform: scale(0.6); opacity: 0; } 14%, 70% { transform: scale(1); opacity: 1; } 78%, 100% { transform: scale(0.95); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .setdir .sd-arm, .setdir .sd-w, .setdir .sd-rec, .setdir .sd-light polygon, .setdir .sd-bubble { animation: none; opacity: 1; }
}

/* ---------- 1 anuncio = muchas piezas ---------- */
.pack { position: relative; margin: 0; padding: var(--s-5) var(--s-3); display: grid; justify-items: center; gap: var(--s-4); perspective: 900px; }
.pack::before {
  content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(155, 48, 255, 0.22), transparent 70%);
}
.pack__core {
  position: relative; width: 9.5rem; aspect-ratio: 9 / 16; border-radius: 1.2rem;
  display: grid; place-content: center; justify-items: center; gap: 0.4rem; text-align: center;
  background: linear-gradient(160deg, #141826, #07080C 70%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(30, 200, 224, 0.55), 0 0 28px rgba(30, 200, 224, 0.25), 0 24px 48px rgba(0, 0, 0, 0.6);
  transform: rotateY(-14deg) rotateX(6deg);
  animation: pack-float 8s ease-in-out infinite;
}
.pack__core b { font-family: var(--f-display); font-weight: var(--fw-display); font-size: 1.35rem; color: var(--c-text); }
.pack__core small { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); }
.pack__play {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 18px rgba(30, 200, 224, 0.6); position: relative;
}
.pack__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 0.75rem solid #07080C; border-top: 0.48rem solid transparent; border-bottom: 0.48rem solid transparent;
}
@keyframes pack-float { 50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-6px); } }

.pack__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; max-width: 26rem; }
.pack__parts li {
  font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--c-text);
  padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-line);
  opacity: 0; transform: translateY(10px);
  animation: pack-in 0.6s ease-out forwards; animation-delay: calc(0.25s + var(--i) * 0.12s);
}
.pack__parts li.hl { border-color: rgba(155, 48, 255, 0.7); box-shadow: 0 0 14px rgba(155, 48, 255, 0.3); }
.pack__parts li.ok { border-color: rgba(30, 200, 224, 0.7); color: var(--c-accent); }
@keyframes pack-in { to { opacity: 1; transform: none; } }
.pack figcaption { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-muted); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Monitor de dirección ---------- */
.monitor {
  margin: 0; border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-sm, 0.95rem);
  background: linear-gradient(180deg, #10131C, #0A0C12);
  border: 1px solid rgba(30, 200, 224, 0.35);
  box-shadow: 0 0 0 1px rgba(155, 48, 255, 0.25), 0 0 34px rgba(30, 200, 224, 0.18), 0 30px 60px rgba(0, 0, 0, 0.55);
}
.monitor__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-line); }
.monitor__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-line); }
.monitor__bar i:first-child { background: var(--c-accent-2); }
.monitor__bar i:nth-child(2) { background: var(--c-accent); }
.monitor__bar span { margin-left: 0.6rem; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--c-text-muted); }

.monitor__steps { list-style: none; margin: 0; padding: 1rem 1.1rem 0.4rem; display: grid; gap: 0.55rem; }
.monitor__steps li { position: relative; padding-left: 1.6rem; color: var(--c-text-muted); }
.monitor__steps li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 0.9rem; height: 0.9rem; border-radius: 50%;
  border: 2px solid var(--c-line);
}
.monitor__steps li em { font-style: normal; font-family: var(--f-mono); font-size: var(--fs-xs); margin-left: 0.4rem; }
.monitor__steps li.done { color: var(--c-text); }
.monitor__steps li.done::before { background: var(--c-accent); border-color: var(--c-accent); }
.monitor__steps li.done em { color: var(--c-accent); }
.monitor__steps li.live { color: var(--c-text); font-weight: var(--fw-bold); }
.monitor__steps li.live::before { border-color: var(--c-accent-2); box-shadow: 0 0 10px rgba(155, 48, 255, 0.8); animation: live 1.6s ease-in-out infinite; }
.monitor__steps li.live em { color: var(--c-accent-2-text, #C79BFF); font-weight: 400; }
@keyframes live { 50% { background: rgba(155, 48, 255, 0.6); } }

.monitor__ask { margin: 0.8rem 1.1rem; padding: 0.9rem 1rem; border-radius: 0.8rem; background: rgba(30, 200, 224, 0.07); border: 1px solid rgba(30, 200, 224, 0.3); }
.monitor__ask p { margin: 0 0 0.7rem; color: var(--c-text); line-height: 1.45; }
.monitor .who { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.25rem; }
.monitor__btns { display: flex; gap: 0.5rem; }
.monitor__btns .b { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-text); }
.monitor__btns .b--ok { background: var(--c-accent); border-color: var(--c-accent); color: #07080C; }

.monitor__note { margin: 0 1.1rem 1.1rem; padding: 0.8rem 1rem; border-radius: 0.8rem; background: rgba(155, 48, 255, 0.1); border: 1px dashed rgba(155, 48, 255, 0.55); color: var(--c-text); }
.monitor__note .who { color: var(--c-accent-2-text, #C79BFF); }

/* ---------- Gráficos dentro de las tarjetas de "Lo que te llevas" ---------- */
.g-route { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; counter-reset: r; }
.g-route li {
  counter-increment: r; position: relative; padding: 0.55rem 0.6rem 0.55rem 2rem; border-radius: 0.6rem;
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-line);
}
.g-route li::before {
  content: counter(r); position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.65rem;
  background: rgba(30, 200, 224, 0.15); color: var(--c-accent);
}
.g-route li.end { border-color: rgba(155, 48, 255, 0.6); }
.g-route li.end::before { background: rgba(155, 48, 255, 0.25); color: #E2C7FF; }
.g-cap { margin: 0.7rem 0 0; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-accent); }

.g-review { margin-top: var(--s-4); display: grid; gap: 0.45rem; }
.g-review .row {
  display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 0.6rem; background: var(--c-surface); border: 1px solid var(--c-line);
  font-size: var(--fs-xs);
}
.g-review .ic { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.g-review .tx { color: var(--c-text); }
.g-review .st { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; }
.g-review .no .ic { background: rgba(255, 90, 110, 0.15); color: #FF8A98; }
.g-review .no .tx { color: var(--c-text-muted); text-decoration: line-through; text-decoration-color: rgba(255, 90, 110, 0.6); }
.g-review .no .st { color: #FF8A98; }
.g-review .ok .ic { background: rgba(30, 200, 224, 0.15); color: var(--c-accent); }
.g-review .ok .st { color: var(--c-accent); }

.g-wave { margin-top: var(--s-4); }
.g-wave .bars { display: flex; align-items: center; gap: 3px; height: 3.2rem; padding: 0 0.2rem; border-radius: 0.6rem; background: var(--c-surface); border: 1px solid var(--c-line); position: relative; overflow: hidden; }
.g-wave .bars i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2)); height: 30%; animation: wave 1.6s ease-in-out infinite; }
.g-wave .bars i:nth-child(3n) { height: 70%; animation-delay: -0.4s; }
.g-wave .bars i:nth-child(4n) { height: 50%; animation-delay: -0.8s; }
.g-wave .bars i:nth-child(5n) { height: 85%; animation-delay: -1.1s; }
.g-wave .bars i:nth-child(n+21) { opacity: 0.22; animation: none; }
.g-wave .bars::after { content: ""; position: absolute; top: 0; bottom: 0; left: 74%; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(30, 200, 224, 0.9); }
@keyframes wave { 50% { transform: scaleY(0.55); } }
.g-wave .cut { display: flex; justify-content: space-between; margin-top: 0.4rem; font-family: var(--f-mono); font-size: 0.68rem; color: var(--c-text-muted); }
.g-wave .cut b { color: var(--c-accent); font-weight: 400; }

.g-updates { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.g-ring {
  width: 6.5rem; height: 6.5rem; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: radial-gradient(circle at 40% 35%, #182033, #0A0C12 70%);
}
.g-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--c-accent-2), var(--c-accent), var(--c-accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 8px rgba(30, 200, 224, 0.5));
}
.g-ring b { font-family: var(--f-display); font-weight: var(--fw-display); font-size: 2.2rem; line-height: 1; color: var(--c-text); }
.g-ring span { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); }
@media (max-width: 420px) { .g-updates { grid-template-columns: 1fr; } .g-route { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .g-wave .bars i { animation: none; }
  .pack__core, .monitor__steps li.live::before { animation: none; }
  .pack__parts li { animation: none; opacity: 1; transform: none; }
}