/* Espacios de fotos y videos. Logica: js/media-slots.js · configuracion: js/media-config.js */
.mini, .link, .svc, .sect > div, .media-split > * { min-width: 0; } /* el marcador no debe ensanchar columnas ni tarjetas */
figure.media-slot { width: 100%; min-width: 0; display: none; margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-m); background: var(--surface); aspect-ratio: var(--r, 3 / 2); }
figure.media-slot[data-state] { display: block; }
figure.media-slot[hidden] { display: none !important; }
figure.media-slot > img, figure.media-slot > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
figure.media-slot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-2) var(--sp-3); font: var(--fs-xs) var(--font-mono); color: var(--idma-blanco); background: linear-gradient(0deg, rgba(10,20,32,.85), transparent); }
figure.media-slot.is-filled { opacity: 0; transition: opacity .4s var(--ease); }
figure.media-slot.is-filled.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { figure.media-slot.is-filled { transition: none; } }

/* Poster de video externo (Bunny Stream): boton de play y reproductor en el mismo lugar */
figure.media-slot > picture { display: block; width: 100%; height: 100%; }
figure.media-slot > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: var(--idma-blanco); cursor: pointer; }
.vid-play:focus-visible { outline: 2px solid var(--idma-naranja); outline-offset: -6px; }
.vid-play .vp-circ { display: grid; place-items: center; width: clamp(56px, 7vw, 88px); height: clamp(56px, 7vw, 88px); border-radius: 50%;
  background: color-mix(in srgb, var(--idma-acero) 78%, transparent); border: 2px solid var(--idma-niebla); transition: background .25s var(--ease), border-color .25s var(--ease); }
.vid-play .vp-circ svg { width: 40%; height: 40%; margin-left: 6%; fill: var(--idma-blanco); transition: fill .25s var(--ease); }
.vid-play:hover .vp-circ, .vid-play:focus-visible .vp-circ { background: var(--idma-naranja); border-color: var(--idma-naranja); }
.vid-play:hover .vp-circ svg, .vid-play:focus-visible .vp-circ svg { fill: var(--idma-noche); }
.vid-play .vp-txt { position: absolute; left: var(--sp-4); bottom: var(--sp-4); padding: .4rem .8rem; border-radius: var(--radius-s); background: rgba(10,20,32,.86); color: var(--idma-blanco); font: 500 var(--fs-sm)/1.2 var(--font-mono); letter-spacing: .02em; }
.vid-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.vid-dev { position: absolute; left: var(--sp-3); top: var(--sp-3); padding: .25rem .6rem; border: 1px dashed var(--idma-guardia-claro); border-radius: var(--radius-s); background: rgba(10,20,32,.88); color: var(--idma-naranja); font: var(--fs-xs)/1.3 var(--font-mono); }
@media (max-width: 767px) { .vid-play .vp-txt { left: var(--sp-2); bottom: var(--sp-2); font-size: var(--fs-xs); } }
@media (prefers-reduced-motion: reduce) { .vid-play .vp-circ, .vid-play .vp-circ svg { transition: none; } }

/* Marcador (solo modo desarrollo o ?slots=1): crece con su texto, nunca recorta */
figure.media-slot.is-empty { overflow: visible; display: grid; gap: .3rem; align-content: center; padding: var(--sp-4); border: 1.5px dashed var(--idma-guardia-claro); font-family: var(--font-mono); }
figure.media-slot.is-empty .ms-k { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--idma-naranja); }
figure.media-slot.is-empty .ms-id { font-size: var(--fs-sm); font-weight: 500; color: var(--idma-blanco); overflow-wrap: anywhere; }
figure.media-slot.is-empty .ms-m { font-size: var(--fs-xs); color: var(--idma-guardia-claro); }
figure.media-slot.is-empty .ms-d { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-soft); }

/* Ubicaciones */
.container > figure.media-slot { margin: 0 0 var(--sp-6); }                         /* bandas a todo el ancho del contenedor */
.mini > figure.media-slot, .link > figure.media-slot { margin-bottom: var(--sp-4); } /* parte superior de tarjetas y eslabones */
.sect figure.media-slot { margin-bottom: var(--sp-3); }                              /* miniatura sobre el titulo del sector */
.svc > figure.media-slot { margin: 0; }                                              /* .svc ya separa con gap */
.media-split { margin-bottom: var(--sp-7); align-items: center; }                    /* texto + medio en dos columnas (.intel); en movil queda debajo */
.contact-info + figure.media-slot { margin-top: var(--sp-5); }
.media-split.no-media { grid-template-columns: 1fr; margin-bottom: var(--sp-6); }    /* sin medio: una sola columna, sin hueco */