@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-400.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/archivo-600.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/archivo-700.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.ttf') format('truetype'); }

/* Encabezado compartido. Neón y trama: mecánica de Codrops masked hero.
   https://github.com/mbarker84/codrops-masked-hero (MIT).
   Una sola composición alimenta ambas capas para conservar sus proporciones. */
[data-hero-prompts] {
  --th-x: 100%; --th-y: 106%; --th-radio: 20vw;
  --th-neon: turquoise; --th-trazo: 2px; --th-brillo: .35rem;
  --th-punto: .11rem; --th-trama: .4rem; --th-parallax: 0px;
  position: relative; isolation: isolate; min-height: 100svh;
  width: 100%; overflow: hidden; z-index: 2; padding: 0;
  font-family: 'Archivo', Arial, sans-serif;
}
[data-hero-prompts] .th-composicion {
  position: absolute; left: 18%; top: 15%; width: 64%;
  display: grid; grid-template-columns: 23% 75%; column-gap: 2%;
  grid-template-rows: auto auto auto; align-items: center;
}
[data-hero-prompts] .th-composicion-base { z-index: 1; }
[data-hero-prompts] [data-th-item] {
  --th-dx: 0vw; --th-dy: 0vh; --th-escala: 1;
  transform: translate(var(--th-dx), var(--th-dy)) scale(var(--th-escala));
  transform-origin: left center;
}
[data-hero-prompts] .th-composicion[data-th-item] {
  transform: translate(var(--th-dx), calc(var(--th-dy) + var(--th-parallax))) scale(var(--th-escala));
  transform-origin: center top;
}
[data-hero-prompts] .th-logo { grid-column: 1; grid-row: 2; width: 100%; margin: 0; }
[data-hero-prompts] .th-logo img {
  display: block; width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 8px 16px #0008); user-select: none; -webkit-user-drag: none;
}
[data-hero-prompts] .th-etiqueta {
  grid-column: 2; grid-row: 1; margin: 0 0 1.6vw; padding: 0;
  font: 400 clamp(10px, 1.15vw, 20px)/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .2em; color: #cfd6d0; text-align: left;
}
[data-hero-prompts] .th-titulo {
  grid-column: 2; grid-row: 2; margin: 0; padding: 0; max-width: none;
  font: 700 6.5vw/1.02 'Archivo', Arial, sans-serif;
  letter-spacing: -.05em; text-wrap: wrap;
  color: transparent; -webkit-text-stroke: var(--th-trazo) var(--th-neon);
  filter: drop-shadow(0 0 var(--th-brillo) var(--th-neon));
  text-shadow: none;
}
[data-hero-prompts] .th-linea { display: block; white-space: pre-wrap; overflow-wrap: break-word; }
[data-hero-prompts] .th-titulo em { font: inherit; color: inherit; font-style: normal; }
[data-hero-prompts] .th-descripcion {
  grid-column: 2; grid-row: 3; max-width: 58ch; margin: 1.2vw 0 0;
  font: 400 clamp(12px, 1.3vw, 21px)/1.5 'Archivo', Arial, sans-serif;
  color: #cfd6d0; text-shadow: 0 1px 12px #000; white-space: pre-line;
}
[data-hero-prompts] .th-pista {
  position: absolute; bottom: 6%; left: 6%; z-index: 3; margin: 0;
  max-width: 88%; font: 400 clamp(9px, .55vw, 12px)/1.5 monospace;
  letter-spacing: .13em; text-transform: uppercase; color: #a5bfc1;
}
[data-hero-prompts] .th-mascara {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(45deg, #40e0d0, #9932cc, #ff1493, orange);
  clip-path: circle(var(--th-radio) at var(--th-x) var(--th-y));
}
[data-hero-prompts] .th-mascara .th-titulo {
  -webkit-text-stroke: 0 transparent; filter: none; color: transparent;
}
[data-hero-prompts] .th-mascara .th-linea {
  background: radial-gradient(circle, #fff var(--th-punto), transparent 0);
  background-size: var(--th-trama) var(--th-trama);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
[data-hero-prompts] .th-aro {
  position: absolute; z-index: 2; pointer-events: none; inset: 0;
  background: linear-gradient(45deg, #40e0d0, #9932cc, #ff1493, orange);
  mask-image: radial-gradient(circle at var(--th-x) var(--th-y),
    transparent calc(var(--th-radio) * 1.4 - 1px),
    #000 calc(var(--th-radio) * 1.4 - 1px),
    #000 calc(var(--th-radio) * 1.4), transparent calc(var(--th-radio) * 1.4));
}
[data-hero-prompts].th-editando .th-composicion-base,
[data-hero-prompts].th-editando .th-composicion-base [data-th-item],
[data-hero-prompts].th-editando .th-pista {
  outline: 1px dashed #70eee777; cursor: grab; touch-action: none;
}
[data-hero-prompts].th-editando [data-th-seleccionado="true"] {
  outline: 2px solid #b0e879; outline-offset: 6px;
}
[data-hero-prompts].th-editando .th-mascara,
[data-hero-prompts].th-editando .th-aro { opacity: .2; }
[data-hero-prompts].th-editando .th-composicion-base { z-index: 3; }
[data-hero-prompts].th-editando .th-composicion-base .th-titulo {
  color: #eaf8f4; -webkit-text-stroke: 0; filter: none;
}
.th-editor { font: 13px/1.45 Arial, sans-serif; color: #e5eee8; }
.th-editor * { box-sizing: border-box; }
.th-editor [hidden] { display: none !important; }
.th-editor button, .th-editor select, .th-editor textarea, .th-editor input[type="number"] {
  font: inherit; border: 1px solid #415047; border-radius: 3px;
  background: #131b17; color: #eef4ef; padding: 7px; min-height: 32px;
}
.th-editor button { cursor: pointer; }
.th-editor button:hover { border-color: #b0e879; }
.th-editor button:focus-visible, .th-editor input:focus-visible,
.th-editor textarea:focus-visible, .th-editor select:focus-visible { outline: 2px solid #70eee7; }
.th-editor .th-activar { width: 100%; color: #b0e879; }
.th-editor .th-controles { display: grid; gap: 12px; padding-block: 12px; }
.th-editor label { display: grid; gap: 5px; font: inherit; text-transform: none; letter-spacing: normal; }
.th-editor select, .th-editor textarea { width: 100%; }
.th-editor textarea { resize: vertical; min-height: 64px; }
.th-editor input[type="range"] { width: 100%; margin: 0; accent-color: #b0e879; }
.th-editor .th-valor { display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 8px; }
.th-editor input[type="number"] { width: 72px; }
.th-editor .th-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.th-editor .th-estado { color: #b0e879; margin: 0; font-size: 12px; }
.th-editor .th-ayuda { margin: 0; color: #aebcb2; font-size: 12px; }
.th-editor .th-comprobar { display: flex; align-items: center; gap: 8px; }
.th-ajustes-react { position: fixed; right: 18px; top: 84px; z-index: 50; }
.th-ajustes-react > summary { cursor: pointer; padding: 8px 12px; border: 1px solid #415047; background: #101712ee; color: #e7eee8; }
.th-ajustes-react[open] { width: min(290px, 90vw); max-height: 84svh; overflow: auto; padding: 12px; background: #0a0d0bf5; }
.th-fondo-react { position: absolute; inset: 0; z-index: -1; background: linear-gradient(#020709aa, #02070955), url('/taller.png') center/cover; }
@media (max-width: 700px) {
  [data-hero-prompts] .th-composicion { left: 5%; top: 24%; width: 90%; grid-template-columns: 22% 76%; }
  [data-hero-prompts] .th-titulo { font-size: 8.9vw; }
  [data-hero-prompts] .th-etiqueta { font-size: clamp(8px, 2vw, 13px); letter-spacing: .12em; margin-bottom: 3vw; }
  [data-hero-prompts] .th-descripcion { font-size: 13px; margin-top: 4vw; }
  [data-hero-prompts] .th-pista { font-size: 9px; bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero-prompts] { --th-parallax: 0px; }
}
/* Cuadros editables de la página y tiradores de ancho/altura. */
[data-pagina-item] {
  --th-dx: 0px; --th-dy: 0px; --th-escala: 1;
  transform: translate(var(--th-dx), var(--th-dy)) scale(var(--th-escala));
  transform-origin: left center;
}
.th-edicion-pagina [data-pagina-item] { outline: 1px dashed #70eee788; outline-offset: 3px; cursor: grab; touch-action: none; }
.th-edicion-pagina [data-pagina-item][data-th-seleccionado="true"] { outline: 2px solid #b0e879; }
.th-marco-caja { position: fixed; z-index: 40; border: 1px dashed turquoise; pointer-events: none; }
.th-marco-caja[hidden] { display: none; }
.th-marco-caja button { position: absolute; width: 14px; height: 14px; min-height: 0; padding: 0; background: #b0e879; border: 2px solid #0b1411; pointer-events: auto; touch-action: none; }
.th-marco-caja [data-redimensionar="ancho"] { right: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.th-marco-caja [data-redimensionar="alto"] { bottom: -7px; left: calc(50% - 7px); cursor: ns-resize; }
.th-marco-caja [data-redimensionar="ambos"] { right: -7px; bottom: -7px; cursor: nwse-resize; }