/* ==========================================
   PECHY PLAYERS — RECORDATORIOS MÓVILES
========================================== */

@media (max-width:768px){

  .recordatorios-screen{
    --recordatorio-fondo:#ff2d2d;

    position:fixed;
    inset:0;
    z-index:99998;

    display:none;
    overflow:hidden;

    background:
      radial-gradient(
        circle at 50% 38%,
        color-mix(
          in srgb,
          var(--recordatorio-fondo) 22%,
          transparent
        ),
        transparent 42%
      ),
      #03060b;

    transition:background .45s ease;
  }

  .recordatorios-screen.mostrar{
    display:flex;
    align-items:center;
  }

  .recordatorios-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
      linear-gradient(
        to bottom,
        rgba(3,6,11,.12),
        rgba(3,6,11,.88)
      );
  }

  .recordatorios-slider{
    position:relative;
    z-index:2;

    width:100%;
    max-height:100dvh;

    padding:78px 0 28px;
    overflow-y:auto;
  }

  .recordatorios-slider > small,
  .recordatorios-slider > h2{
    display:block;
    padding-left:18px;
    padding-right:18px;
  }

  .recordatorios-slider > small{
    color:#ff7070;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
  }

  .recordatorios-slider > h2{
    margin:8px 0 15px;
    font-size:25px;
    line-height:1.1;
  }

  #flechaRecordatorios{
    width:max-content;
    margin:0 20px 12px auto;
    padding:9px 15px;

    display:flex !important;
    align-items:center;
    gap:10px;

    position:relative;
    z-index:50;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    background:rgba(3,6,11,.92);
    color:white;

    font-size:12px;
    font-weight:900;

    box-shadow:0 10px 30px rgba(0,0,0,.45);
    backdrop-filter:blur(10px);

    animation:moverFlechaRecordatorio 1s ease-in-out infinite;
    transition:opacity .3s ease, visibility .3s ease;
  }

  #flechaRecordatorios strong{
    color:var(--recordatorio-fondo);
    font-size:24px;
    line-height:1;
  }

  #flechaRecordatorios.oculta{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  @keyframes moverFlechaRecordatorio{
    0%,100%{
      transform:translateX(0);
    }

    50%{
      transform:translateX(9px);
    }
  }

  #recordatoriosTrack{
    display:flex;
    gap:14px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    padding:8px 42px 24px;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  #recordatoriosTrack::-webkit-scrollbar{
    display:none;
  }

  .recordatorio-card{
    --recordatorio-color:#ff2d2d;

    flex:0 0 calc(100vw - 95px);
    width:calc(100vw - 95px);
    max-width:390px;

    margin:0;
    overflow:hidden;

    scroll-snap-align:center;
    scroll-snap-stop:always;

    border-radius:24px;
    border:1px solid rgba(255,255,255,.10);

    background:
      radial-gradient(
        circle at top,
        color-mix(
          in srgb,
          var(--recordatorio-color) 18%,
          transparent
        ),
        transparent 40%
      ),
      #07101c;

    transform:scale(.86) translateY(14px);
    opacity:.35;
    filter:brightness(.55) blur(.7px);

    transition:
      transform .32s ease,
      opacity .32s ease,
      filter .32s ease,
      border-color .32s ease,
      box-shadow .32s ease;
  }

  .recordatorio-card.recordatorio-activo{
    transform:scale(1) translateY(0);
    opacity:1;
    filter:brightness(1) blur(0);

    border-color:var(--recordatorio-color);

    box-shadow:
      0 0 32px
      color-mix(
        in srgb,
        var(--recordatorio-color) 52%,
        transparent
      ),
      0 24px 58px rgba(0,0,0,.75);
  }

  .recordatorio-imagen{
    display:block;
    width:100%;
    height:290px;

    object-fit:cover;
    object-position:center;

    transform:scale(1.02);
    transition:transform .45s ease;
  }

  .recordatorio-card.recordatorio-activo .recordatorio-imagen{
    transform:scale(1.09);
  }

  .recordatorio-contenido{
    padding:18px;
  }

  .recordatorio-contenido small{
    color:var(--recordatorio-color);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
  }

  .recordatorio-contenido h3{
    margin:7px 0 14px;

    font-size:28px;
    line-height:1;
    text-transform:uppercase;
  }

  .recordatorio-planes{
    display:grid;
    gap:7px;
    margin-bottom:17px;
  }

  .recordatorio-plan{
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .recordatorio-comprar,
  .recordatorio-explorar{
    display:block;
    width:100%;

    padding:15px;
    border-radius:14px;

    text-align:center;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
  }

  .recordatorio-comprar{
    margin-top:16px;
    margin-bottom:10px;

    color:white;

    background:
      linear-gradient(
        135deg,
        var(--recordatorio-color),
        color-mix(
          in srgb,
          var(--recordatorio-color) 72%,
          white
        )
      );
  }

  .recordatorio-explorar{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.07);
    color:white;
  }

  .recordatorios-contador{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:2px;

    color:#9ca3af;
    font-weight:900;
  }

  .recordatorios-contador strong{
    color:white;
    font-size:17px;
  }

  .recordatorios-puntos{
    display:flex;
    justify-content:center;
    gap:7px;

    margin-top:10px;
  }

  .recordatorio-punto{
    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.28);
    transition:.25s;
  }

  .recordatorio-punto.activo{
    width:26px;
    border-radius:999px;

    background:var(--recordatorio-fondo);

    box-shadow:
      0 0 12px
      color-mix(
        in srgb,
        var(--recordatorio-fondo) 60%,
        transparent
      );
  }
}

@media (min-width:769px){
  .recordatorios-screen{
    display:none !important;
  }
}