/* Bento tomado de la referencia (Droppy): mismo layout, mismos videos. Provisorio: se reemplaza por contenido propio antes de publicar. */
.bento-sec{--container-width:1120px;--container-pad:24px;--font-display:"Inter Tight",system-ui,sans-serif;--text-primary:#14130f;--text-secondary:#6f6f78;padding-block:clamp(40px,6vw,80px);background:var(--bg,#fff)}
.bento-sec .container{width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:var(--container-pad);position:relative;z-index:1}
.bento-sec .showcase{display:flex;flex-direction:column;gap:20px}
.bento{width:min(100%,1180px);margin:0 auto;padding:8px 0 24px}
.bento__head{text-align:center;margin:0 auto 40px;padding-inline:24px}
.bento__title{margin:0;font-family:var(--font-display);font-size:clamp(2.3rem,4.8vw,4rem);font-weight:600;letter-spacing:-0.032em;line-height:0.98;color:var(--text-primary)}
.bento__sub{margin:16px 0 0;color:var(--text-secondary);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.5}
.bento__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:250px 250px 266px 330px 396px 250px 250px;gap:16px}
.bento__tile{position:relative;margin:0;overflow:hidden;border-radius:28px;background:#1016c9;isolation:isolate}
.bento__tile--lock{grid-column:1 / span 8;grid-row:1 / span 2;background:#0b1726}
.bento__tile--notch{grid-column:9 / span 4;grid-row:1}
.bento__tile--island{grid-column:9 / span 4;grid-row:2}
.bento__tile--calendar{grid-column:1 / -1;grid-row:3;background:#1016c9}
.bento__tile--live{grid-column:1 / -1;grid-row:3}
.bento__tile--tray{grid-column:1 / span 7;grid-row:4}
.bento__tile--split{grid-column:8 / span 5;grid-row:4}
.bento__tile--queue{grid-column:1 / -1;grid-row:6;aspect-ratio:2080 / 1210}
.bento__tile--appletv{grid-column:1 / -1;grid-row:5}
.bento__tile--lyrics{grid-column:1 / span 7;grid-row:6 / span 2;background:#000}
.bento__tile--clipboard{grid-column:8 / span 5;grid-row:6}
.bento__tile--motion{grid-column:8 / span 5;grid-row:7}
.bento__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.bento__tile--appletv .bento__video{object-position:50% 40%}
.bento__tile--lyrics .bento__video{object-position:50% 50%}
.bento__tile--lock .bento__video{object-position:0% 50%}
.bento__tile--lock::after{content:"";position:absolute;inset:auto auto 0 0;z-index:0;width:100%;height:48%;background:linear-gradient(0deg,rgb(4 9 52 / 0.78) 0%,rgb(4 9 52 / 0.5) 45%,rgb(4 9 52 / 0) 100%);pointer-events:none}
.bento__tile--clipboard .bento__video{object-position:50% 100%}
.bento__tile--split .bento__video{object-fit:cover}
.bento{--bento-under: #000;--bento-under-end: #000;--bento-under-fade: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%)}
.bento__tile--tray{display:flex;flex-direction:column;background:var(--bento-under)}
.bento__tile--tray .bento__video{position:static;flex:1 1 auto;min-height:0;height:auto;object-position:50% 50%;-webkit-mask-image:var(--bento-under-fade);mask-image:var(--bento-under-fade)}
.bento__tile--tray .bento__cap{position:static;flex:none;padding:12px 26px 20px;background:linear-gradient(180deg,var(--bento-under) 0%,var(--bento-under-end) 100%)}
.bento__tile--clipboard .bento__cap{inset:0 0 auto 0;padding:22px 26px 48px;background:linear-gradient(180deg,rgb(8 11 104 / 0.6) 0%,rgb(8 11 104 / 0) 100%)}
.bento__tile--queue .bento__cap{inset:0 auto auto 0;width:24%;padding:26px 0 0 28px;background:none}
.bento__cap{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;gap:3px;padding:64px 26px 22px;color:#fff;background:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / 0.55) 55%,rgb(0 0 0 / 0.78) 100%);pointer-events:none}
.bento__tile--lock .bento__cap{right:0;width:auto;padding:0 28px 24px 28px;background:none}
.bento__cap strong{font-size:21px;font-weight:600;letter-spacing:-0.016em;line-height:1.2}
.bento__cap span{font-size:15px;line-height:1.4;color:rgb(255 255 255 / 0.8)}
@media (max-width: 960px){.bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}.bento__tile--lock{grid-column:1 / -1;grid-row:auto;aspect-ratio:1512 / 982}.bento__tile--lyrics{grid-column:1 / -1;grid-row:auto;aspect-ratio:1180 / 982}.bento__tile--notch,.bento__tile--island{grid-column:auto;grid-row:auto;aspect-ratio:1.12}.bento__tile--split{grid-column:1 / -1;grid-row:auto;aspect-ratio:1220 / 720}.bento__tile--live{grid-column:1 / -1;grid-row:auto;aspect-ratio:1600 / 360}.bento__tile--calendar{grid-column:1 / -1;grid-row:auto;aspect-ratio:1920 / 1200}.bento__tile--appletv{grid-column:1 / -1;grid-row:auto;display:flex;flex-direction:column;background:var(--bento-under)}.bento__tile--appletv .bento__video{position:static;height:auto;aspect-ratio:1600 / 538;-webkit-mask-image:var(--bento-under-fade);mask-image:var(--bento-under-fade)}.bento__tile--appletv .bento__cap{position:static;width:auto;padding:12px 20px 20px;background:linear-gradient(180deg,var(--bento-under) 0%,var(--bento-under-end) 100%)}.bento__tile--tray{grid-column:1 / -1;grid-row:auto;aspect-ratio:auto}.bento__tile--tray .bento__video{flex:none;aspect-ratio:1440 / 570}.bento__tile--clipboard{grid-column:1 / -1;grid-row:auto;aspect-ratio:2.5}.bento__tile--queue{grid-column:1 / -1;grid-row:auto;aspect-ratio:auto;display:flex;flex-direction:column;background:var(--bento-under)}.bento__tile--queue .bento__video{position:static;height:auto;aspect-ratio:2080 / 1210;-webkit-mask-image:var(--bento-under-fade);mask-image:var(--bento-under-fade)}.bento__tile--queue .bento__cap{position:static;width:auto;padding:12px 20px 20px;background:linear-gradient(180deg,var(--bento-under) 0%,var(--bento-under-end) 100%)}.bento__tile--motion{grid-column:1 / -1;grid-row:auto;aspect-ratio:880 / 640}}
@media (max-width: 640px){.bento__grid{grid-template-columns:minmax(0,1fr);gap:12px}.bento__tile{border-radius:22px;display:flex;flex-direction:column;aspect-ratio:auto!important}.bento__video{position:static;height:auto;aspect-ratio:var(--bento-ratio)}.bento__tile--lock{--bento-ratio: 1512 / 982}.bento__tile--notch{--bento-ratio: 1200 / 800}.bento__tile--island{--bento-ratio: 1040 / 700}.bento__tile--split{--bento-ratio: 1220 / 720}.bento__tile--queue{--bento-ratio: 1248 / 1210}.bento__tile--queue .bento__video{aspect-ratio:var(--bento-ratio)}.bento__tile--appletv{--bento-ratio: 1600 / 538}.bento__tile--lyrics{--bento-ratio: 1180 / 982}.bento__tile--motion{--bento-ratio: 880 / 640}.bento__tile--live{--bento-ratio: 1600 / 360}.bento__tile--calendar{--bento-ratio: 1920 / 1200}.bento__tile--clipboard{--bento-ratio: 1600 / 588}.bento__tile--tray{--bento-ratio: 1440 / 570}.bento__cap,.bento__tile--lock .bento__cap,.bento__tile--queue .bento__cap,.bento__tile--clipboard .bento__cap{position:static;width:auto;padding:16px 20px 20px;background:none}.bento__cap strong{font-size:18px}.bento__cap span{font-size:14px}.bento__tile--lock::after{display:none}.bento__tile--split .bento__video{transform:none;clip-path:none}.bento__tile{background:var(--bento-under)}.bento__tile--lock{--bento-under: #0b1726;--bento-under-end: #08101c}.bento__tile--lyrics{--bento-under: #000;--bento-under-end: #000}.bento__video{-webkit-mask-image:var(--bento-under-fade);mask-image:var(--bento-under-fade)}.bento__tile .bento__cap,.bento__tile--lock .bento__cap,.bento__tile--queue .bento__cap,.bento__tile--clipboard .bento__cap,.bento__tile--appletv .bento__cap,.bento__tile--tray .bento__cap{padding:10px 20px 20px;background:linear-gradient(180deg,var(--bento-under) 0%,var(--bento-under-end) 100%)}}
/* Tray en escritorio: mismo estilo que el resto (video a pleno y texto encima con degradé suave), sin franja negra. */
@media (min-width: 961px){
.bento__tile--tray{display:block;background:#0b1726}
.bento__tile--tray .bento__video{position:absolute;inset:0;width:100%;height:100%;flex:none;-webkit-mask-image:none;mask-image:none}
.bento__tile--tray .bento__cap{position:absolute;inset:auto 0 0 0;padding:64px 26px 22px;background:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / 0.55) 55%,rgb(0 0 0 / 0.78) 100%)}
}
