/* Lección gratis · editor de la escena 3D */
@font-face { font-family: "Mont K"; src: url("/fonts/montserrat-ui.woff2") format("woff2"); font-weight: 700 900; font-display: block; }
@font-face { font-family: "Anton K"; src: url("/fonts/anton-neon.woff2") format("woff2"); font-weight: 400; font-display: block; }

.editor-sec { border-top: 0; padding: 36px 0 72px; }
@media (min-width: 960px) { .editor-sec { padding: 56px 0 96px; } }
.intro { max-width: 680px; margin-bottom: 28px; }
.intro h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.038em; }
.intro p:last-child { margin-top: 14px; color: var(--muted); font-size: 18px; }

.editor { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .editor { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 48px; } .escenario-col { position: sticky; top: 84px; } }

.escenario {
  position: relative; width: min(100%, 420px, calc((100svh - 220px) * 9 / 16)); min-width: 220px; margin: 0 auto;
  aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 900px) { .escenario { width: 100%; max-width: calc((100vh - 170px) * 9 / 16); } }
.escenario .poster, .escenario .respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escenario .host { position: absolute; inset: 0; }
.escenario .host #root {
  --cue: "Mont K", "Montserrat", system-ui, sans-serif; --tit: "Anton K", Impact, sans-serif;
  position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; overflow: hidden; transform-origin: 0 0;
  font-family: var(--cue); color: #fff; background: #140b2e;
}
.escenario .estado {
  position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(20, 11, 46, 0.88); color: var(--text); font: 500 13px/1.4 var(--font-mono); text-align: center;
}
.escenario .estado:empty { display: none; }
.controles-video { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.controles-video .tiempo { min-width: 56px; color: var(--muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.panel { display: grid; gap: 26px; }
.grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.grupo legend { padding: 0; margin-bottom: 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input, .colores input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-fuerte); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
}
.chips label:hover span { border-color: var(--muted); }
.chips input:checked + span { background: var(--fdm-luz); border-color: var(--fdm-luz); color: var(--fdm-noche); }
.chips input:focus-visible + span, .colores input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.campo input {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line-fuerte);
  background: rgba(20, 11, 46, 0.6); color: var(--text); font: 500 16px/1.3 var(--font-marca);
}
.campo input:hover { border-color: var(--muted); }
.campo input:focus { outline: none; border-color: var(--fdm-cian); box-shadow: 0 0 0 3px rgba(25, 227, 227, 0.25); }

.colores { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.colores label { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.colores span { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(20, 11, 46, 0.35); }
.colores input:checked + span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fdm-luz); }
.colores b { font-size: 14px; font-weight: 600; color: var(--muted); }
.colores input:checked ~ b { color: var(--text); }

.codigo { border: 1px solid var(--line); border-radius: var(--r); background: #0f0824; overflow: hidden; }
.codigo-tit {
  display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.codigo-tit .mono { font-size: 12px; color: var(--fdm-cian); }
.codigo pre { margin: 0; padding: 14px; overflow-x: auto; font: 500 12.5px/1.75 var(--font-mono); color: #d9cff0; }
.codigo .v { color: var(--highlight); }
.codigo .f { color: var(--fdm-cian); }

.explica code.mono { padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: 0.92em; }

.mini-planes { display: grid; gap: 14px; }
@media (min-width: 900px) { .mini-planes { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.mini-plan {
  display: grid; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  color: var(--text); text-decoration: none;
}
.mini-plan:hover { border-color: var(--muted); color: var(--text); }
.mini-pro { border: 2px solid var(--fdm-luz); padding: 21px; background: var(--surface-2); }
@media (max-width: 899px) { .mini-pro { order: -1; } }
.mini-plan b { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -0.02em; }
.mini-plan span:not(.chip-rec):not(.js-precio) { color: var(--muted); font-size: 15px; line-height: 1.45; }
.mini-plan em { margin-top: 8px; font-style: normal; font-size: 18px; color: var(--text); }
.nota-planes { margin-top: 22px; color: var(--muted); font-size: 15px; }

/* Teléfono: la escena queda a la vista mientras editas */
@media (max-width: 899px) and (min-height: 600px) {
  .escenario-col { position: sticky; top: 58px; z-index: 5; margin: 0 -16px; padding: 10px 16px 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .escenario { width: max(200px, min(100%, calc((100svh - 400px) * 9 / 16))); border-radius: 14px; }
  .controles-video { margin-top: 8px; }
  .controles-video .btn-chico { min-height: 36px; padding: 6px 14px; font-size: 14px; }
}
@media (max-width: 899px) {
  /* con el teclado abierto la escena se achica para no tapar el campo */
  .escribiendo .escenario { width: 128px; min-width: 0; }
  .escribiendo .controles-video { display: none; }
}