/* =====================================================================
   Horizon Padel · redes.css (oct-2026) — vídeos propios de Instagram/TikTok.
   Cada vídeo aparece UNA sola vez en toda la web.
   ===================================================================== */

/* ---------- Patrocinios · «Nuestro contenido» (3 reels en bucle, sin sonido) ---------- */
.rd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.rd-card { margin: 0; display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; }
.rd-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000;
  border: 6px solid #1b2236; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.5); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.rd-card:hover .rd-phone { transform: translateY(-6px); }
.rd-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-phone::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.7)); }
.rd-views { position: absolute; z-index: 1; left: 12px; bottom: 12px; font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.rd-views small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; color: #dfe8f7; }
.rd-user { position: absolute; z-index: 1; top: 12px; left: 12px; color: #fff; font-weight: 700; font-size: .72rem; }
.rd-tit { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; color: #fff; margin: 0; }
.rd-sub { color: #8a97b3; font-size: .86rem; margin: -.4rem 0 0; }
.rd-sub b { color: #ff8fb8; font-weight: 600; }
@media (max-width: 760px) {
  .rd-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66vw; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px .4rem; scrollbar-width: none; }
  .rd-grid::-webkit-scrollbar { display: none; }
  .rd-card { scroll-snap-align: start; }
}

/* ---------- ¿Qué es una americana? · vídeo con sonido (al pulsar) ---------- */
.rd-feature { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-top: 2.4rem; }
.rd-feature .rd-phone { width: 100%; max-width: 320px; justify-self: center; cursor: pointer; }
.rd-play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.rd-play span { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,87,255,.92); box-shadow: 0 0 0 10px rgba(0,87,255,.25), 0 16px 40px rgba(0,0,0,.5);
  color: #fff; font-size: 1.8rem; padding-left: 5px; transition: transform .2s; }
.rd-play:hover span { transform: scale(1.08); }
.rd-phone.is-playing .rd-play, .rd-phone.is-playing::after { display: none; }
.rd-feature ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.rd-feature li { display: flex; gap: .7rem; color: #c9d5ea; line-height: 1.5; }
.rd-feature li b { color: #fff; }
.rd-feature li i { font-style: normal; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,59,92,.15); color: #ff6b85; font-weight: 700; font-size: .85rem; }
@media (max-width: 860px) { .rd-feature { grid-template-columns: 1fr; } .rd-feature .rd-phone { max-width: 280px; } }