:root{--bg:#0e0e18;--card:#181828;--acc:#ff2e63;--txt:#f2f2f7;--mut:#9a9ab0}
*{box-sizing:border-box;margin:0;min-width:0}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--txt);font-family:system-ui,Arial,sans-serif}
img,iframe,video,embed,object{max-width:100%}
header{padding:14px 12px;text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:2px}
header span{color:var(--acc)}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 14px 40px}

/* Reproductor: todo lo que pegues se ajusta al ancho de la pantalla */
#player{background:var(--card);border-radius:14px;padding:14px;margin-bottom:20px;min-height:80px;text-align:center;overflow:hidden}
#player *{max-width:100%}

/* Slider */
#slider{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/6;background:#000;margin-bottom:20px;touch-action:pan-y}
#track{display:flex;height:100%;transition:transform .6s ease}
.slide{flex:0 0 100%;height:100%;position:relative}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 70px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:1.15rem;font-weight:700}
.slide a{color:inherit;text-decoration:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.nav:hover{background:var(--acc)}#prev{left:10px}#next{right:10px}
#dots{position:absolute;bottom:10px;right:12px;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
#dots i{width:8px;height:8px;border-radius:50%;background:#fff6;cursor:pointer}
#dots i.on{background:var(--acc)}

/* Bloques de Facebook: 2 columnas (o filas) */
#boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#boxes.filas{grid-template-columns:minmax(0,1fr)}
.box{background:var(--card);border-radius:14px;padding:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.box .empty{color:var(--mut);font-size:.9rem;padding:30px 10px;text-align:center}
.box h3{font-size:1rem;margin-bottom:10px;color:var(--acc);text-align:center}
.fbc{width:100%;display:flex;justify-content:center;overflow:hidden}
.fbc .fb-page,.fbc .fb-comments{max-width:100%}

/* Celular */
@media(max-width:800px){
  #boxes{grid-template-columns:minmax(0,1fr)}
  #slider{aspect-ratio:16/9}
}
@media(max-width:500px){
  header{font-size:1.3rem}
  .wrap{padding:0 10px 30px}
  #slider{aspect-ratio:4/3;border-radius:10px}
  .slide .cap{font-size:1rem;padding:12px 12px 26px}
  .nav{width:34px;height:34px;font-size:1.2rem}
  #dots{left:0;right:0;max-width:none;justify-content:center;bottom:8px}
}
.btnfb{display:inline-block;background:#1877f2;color:#fff;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:8px;margin-bottom:10px}
.btnfb:hover{background:#0f5fc9}

/* Slider vertical */
.vslider{position:relative;width:100%;height:550px;overflow:hidden;border-radius:10px;background:#000}
.vtrack{display:flex;flex-direction:column;height:100%;transition:transform .6s ease}
.vslide{flex:0 0 100%;height:100%;position:relative}
.vslide img{width:100%;height:100%;object-fit:cover;display:block}
.vslide .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-weight:700}
.vslide a{color:inherit;text-decoration:none}
.vnav{position:absolute;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;border:0;width:40px;height:30px;border-radius:15px;cursor:pointer;font-size:.9rem}
.vnav:hover{background:var(--acc)}.vup{top:8px}.vdn{bottom:8px}
.vdots{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
.vdots i{width:9px;height:9px;border-radius:50%;background:#fff6;cursor:pointer}
.vdots i.on{background:var(--acc)}
@media(max-width:800px){.vslider{height:420px}}
@media(max-width:500px){.vslider{height:340px}}
.box .fbc#lateral{display:block}

/* Banner superior */
#banner{background:#000;border-radius:14px;overflow:hidden;margin:10px auto 18px;max-width:970px;line-height:0}
#banner img{width:100%;height:auto;display:block}
#banner a{display:block}
@media(max-width:500px){#banner{border-radius:10px;margin:8px auto 14px}}