/* [fs_videos] — videos de nuestro trabajo (16-oct-2026). Celular: fila deslizable; escritorio: 4 en fila.
 * El reproductor de YouTube solo se carga al tocar (ventana .fs-videos-modal). Para revertir: borra este archivo. */
.fs-videos{--v-ink:#0D281A;--v-head:#204E36;--v-soft:#56665C;--v-leaf:#22A366;--v-cream:#FDEFBE;--v-line:#E1EBE3;width:100%;max-width:1120px;margin:0 auto;padding:0 16px;box-sizing:border-box;font-family:Poppins,sans-serif}
.fs-videos *,.fs-videos *::before,.fs-videos *::after{box-sizing:border-box}

/* Tira tipo «historia» */
.fs-videos__historia{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px auto 22px;padding:14px 18px;border:1px solid var(--v-line);border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(13,40,26,.04),0 10px 28px rgba(13,40,26,.06)}
.fs-videos__avatar{position:relative;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center}
.fs-videos__anillo{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,#FDEFBE,#E2B95C,#22A366,#1B7F4F,#E2B95C,#FDEFBE);animation:fs-videos-gira 6s linear infinite}
.fs-videos__anillo::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}
.fs-videos__avatar img{position:relative;width:52px;height:52px;border-radius:50%;display:block}
@keyframes fs-videos-gira{to{transform:rotate(360deg)}}
.fs-videos__quien{flex:1 1 180px;min-width:0;display:grid;gap:2px}
.fs-videos__quien strong{font:600 16px/1.2 Poppins,sans-serif;color:var(--v-ink)}
.fs-videos__quien span{font:400 14px/1.4 Poppins,sans-serif;color:var(--v-soft)}
.fs-videos__redes{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.fs-videos__red{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--v-line);background:#F6FAF7;color:var(--v-head) !important;font:600 13px/1 Poppins,sans-serif;text-decoration:none !important;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.fs-videos__red svg{width:18px;height:18px}
.fs-videos__red:hover,.fs-videos__red:focus-visible{background:var(--v-ink);border-color:var(--v-ink);color:var(--v-cream) !important;transform:translateY(-1px)}

/* Tarjetas */
.fs-videos__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fs-videos__item{margin:0;padding:0;min-width:0}
.fs-videos__tarjeta{position:relative;display:block;aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#173D29;color:#fff !important;text-decoration:none !important;box-shadow:0 2px 4px rgba(13,40,26,.06),0 16px 36px rgba(13,40,26,.16);isolation:isolate;transform:translateZ(0)}
.fs-videos__tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fs-videos__tarjeta::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,40,26,.35) 0%,transparent 22%,transparent 50%,rgba(13,40,26,.88) 100%)}
.fs-videos__dur{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(13,40,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 12px/1 Poppins,sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.fs-videos__dur svg{width:12px;height:12px}
.fs-videos__play{position:absolute;z-index:2;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:rgba(253,239,190,.92);color:var(--v-ink);box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .25s ease,background-color .25s ease}
.fs-videos__play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(253,239,190,.55);animation:fs-videos-pulso 2.4s ease-out infinite}
.fs-videos__play svg{width:26px;height:26px;margin-left:3px}
@keyframes fs-videos-pulso{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.fs-videos__titulo{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;font:600 15px/1.35 Poppins,sans-serif;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.fs-videos__tarjeta:hover img,.fs-videos__tarjeta:focus-visible img{transform:scale(1.05)}
.fs-videos__tarjeta:hover .fs-videos__play,.fs-videos__tarjeta:focus-visible .fs-videos__play{transform:scale(1.08);background:#fff}
.fs-videos__tarjeta:focus-visible{outline:3px solid var(--v-leaf);outline-offset:3px}

/* Celular y tableta: fila deslizable con «asomo» de la siguiente tarjeta */
@media (max-width:899px){
.fs-videos{padding:0}
.fs-videos__historia{margin:0 16px 18px;padding:12px 14px}
.fs-videos__redes{width:100%;gap:6px;flex-wrap:nowrap}
.fs-videos__redes li{flex:1 1 0;min-width:0}
.fs-videos__red{width:100%;justify-content:center;gap:6px;padding:0 6px;font-size:12.5px}
.fs-videos__red svg{width:16px;height:16px;flex:none}
.fs-videos__lista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;scroll-padding:0 16px;scrollbar-width:none}
.fs-videos__lista::-webkit-scrollbar{display:none}
.fs-videos__item{flex:0 0 clamp(190px,58vw,260px);scroll-snap-align:start}
.fs-videos__titulo{font-size:14px;left:14px;right:14px;bottom:14px}
.fs-videos__play{width:56px;height:56px;margin:-28px 0 0 -28px}
}
@media (prefers-reduced-motion:reduce){.fs-videos__anillo,.fs-videos__play::before{animation:none}.fs-videos__tarjeta img{transition:none}}

/* Ventana del reproductor */
.fs-videos-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;background:rgba(6,20,13,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fs-videos-modal[hidden]{display:none !important}
.fs-videos-modal__caja{position:relative;display:grid;justify-items:center;gap:12px;width:min(420px,100%,calc((100vh - 120px) * 9 / 16))}
.fs-videos-modal__marco{width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.fs-videos-modal__marco iframe{width:100%;height:100%;border:0;display:block}
.fs-videos-modal__cerrar{position:absolute;z-index:1;top:-6px;right:-6px;width:44px;height:44px;border:0;border-radius:50%;background:#FDEFBE;color:#0D281A;font:400 28px/1 Poppins,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);transform:translate(30%,-30%)}
.fs-videos-modal__yt{color:#FDEFBE !important;font:500 14px/1 Poppins,sans-serif;text-decoration:underline !important;text-underline-offset:3px}
html.fs-videos-abierto{overflow:hidden}
@media (max-width:480px){.fs-videos-modal__caja{padding-top:54px;width:min(100%,calc((100vh - 150px) * 9 / 16))}.fs-videos-modal__cerrar{transform:none;top:0;right:0}}