@import url('muestra-video.css');
.ejemplos{margin:54px 0 64px;color:var(--tinta,#f3edf0)}.ejemplos-cabecera{max-width:760px;margin-bottom:26px}.ejemplos-cabecera h2{font-size:clamp(28px,3.5vw,44px);line-height:1.12;letter-spacing:-.045em;margin:8px 0 12px}.ejemplos-cabecera>p:last-child,.ejemplos-nota{color:var(--tinta-dim);font-size:14px;line-height:1.65}.ejemplos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.ejemplo{overflow:hidden;border:1px solid #ffffff18;border-radius:16px;background:var(--papel-2);min-width:0}.ejemplo-imagen{display:block;overflow:hidden;aspect-ratio:3/2}.ejemplo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.ejemplo-imagen:hover img{transform:scale(1.025)}.ejemplo-texto{padding:20px}.ejemplo-tipo{font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--rosa)}.ejemplo h3{font-size:21px;margin:8px 0 14px;line-height:1.2;letter-spacing:-.025em}.ejemplo-prompt{font-size:13px;color:var(--tinta-dim);line-height:1.6;margin-bottom:16px}.ejemplo summary{cursor:pointer;padding:3px 0}.ejemplo-prompt p{padding-top:9px}.ejemplo-usar,.ejemplo-ver-todo{display:inline-block;color:var(--gr-rosa);font-size:13px;font-weight:600;text-decoration:none;padding:8px 0}.ejemplo a:focus-visible,.ejemplo summary:focus-visible{outline:2px solid var(--gr-rosa);outline-offset:4px}.ejemplo-pelicula{display:grid;grid-template-columns:2fr 1fr;align-items:center;margin-bottom:28px}.ejemplo-pelicula video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--g2)}.ejemplo-pelicula .ejemplo-texto{padding:28px}.ejemplo-pelicula h3{margin-bottom:8px}.ejemplos-subtitulo{margin:30px 0 5px;font-size:20px}.ejemplos-nota{margin:18px 0;font-size:12px}.ejemplo-ver-todo{margin:20px 0 4px}#inicio>.ejemplos{padding:64px clamp(20px,5vw,90px);margin:0;background:var(--papel-2)}#inicio>.ejemplos .ejemplos-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1000px){.ejemplos-grid,#inicio>.ejemplos .ejemplos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.ejemplos-grid,#inicio>.ejemplos .ejemplos-grid{grid-template-columns:1fr}.ejemplo-pelicula{grid-template-columns:1fr}.ejemplo-pelicula .ejemplo-texto{padding:20px}.ejemplos{margin:36px 0}.ejemplo img{transition:none}}@media(prefers-reduced-motion:reduce){.ejemplo img{transition:none}.ejemplo-imagen:hover img{transform:none}}

.ejemplos{scroll-margin-top:94px}

.ejemplos-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:28px}.ejemplos-videos .ejemplo-pelicula{display:block;margin:0}.ejemplos-videos .ejemplo-texto{padding:20px}.ejemplos-cabecera h1{font-size:clamp(28px,3.5vw,44px);line-height:1.12;letter-spacing:-.045em;margin:8px 0 12px}
@media(max-width:640px){.ejemplos-videos{grid-template-columns:1fr}}

/* Una sola secuencia continua; los clips se conservan como ejemplos aparte. */
.montaje {margin:0 0 28px}
.montaje video {display:block;width:100%;aspect-ratio:16/9;background:var(--g2);object-fit:contain}
.montaje-info {padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.montaje-escenas {display:flex;gap:8px;flex-wrap:wrap}
.montaje-escenas button,.video-portada-control {font:inherit;font-size:12px;min-height:40px;border:1px solid #ffffff35;border-radius:24px;background:var(--g3);color:var(--tinta);padding:8px 14px;cursor:pointer}
.montaje-escenas button[aria-pressed=true] {background:var(--gr-rosa-hover);color:#291321;border-color:var(--gr-rosa-hover)}
.montaje-escenas button:focus-visible,.video-portada-control:focus-visible {outline:2px solid var(--gr-rosa);outline-offset:3px}
.video-portada-control {position:absolute;bottom:16px;right:16px;z-index:3;background:var(--papel-90)}
@media(max-width:640px){.montaje-info{padding:16px;gap:10px}.montaje-escenas{gap:6px}.montaje-escenas button{padding:8px 12px}}

/* Las muestras propias en video: el prompt ocupa lo que sobra y los botones quedan siempre abajo. */
.ejemplos-videos .ejemplo-pelicula{display:flex;flex-direction:column}
.ejemplos-videos .ejemplo-pelicula video{flex:none}
.ejemplos-videos .ejemplo-pelicula .ejemplo-texto{flex:1;display:flex;flex-direction:column}
.ejemplos-videos .muestra-prompt{flex:1;grid-template-rows:auto 1fr auto}
/* Terror y animación con su video en lugar de la foto (11/10/2026): el mismo marco que la imagen (clipDeEjemplo, ejemplos.js). */
.ejemplo-imagen video{display:block;width:100%;height:100%;object-fit:cover;background:var(--g2)}