/* ==========================================
   PECHY PLAYERS — MODAL MÓVIL
========================================== */

@media (max-width:768px){

  #productosGrid .cover{
    cursor:pointer;
  }

  .producto-modal{
    --modal-color:#ff2d2d;

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

    display:flex;
    align-items:flex-end;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .3s ease,
      visibility .3s ease;
  }

  .producto-modal.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .producto-modal-fondo{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.82);
    backdrop-filter:blur(8px);
  }

  .producto-modal-contenido{
    position:relative;
    z-index:2;

    width:100%;
    max-height:92dvh;
    overflow-y:auto;

    border-radius:28px 28px 0 0;
    border-top:2px solid var(--modal-color);

    background:
      radial-gradient(
        circle at 50% 15%,
        color-mix(in srgb, var(--modal-color) 28%, transparent),
        transparent 38%
      ),
      linear-gradient(180deg,#101827,#03060b);

    transform:translateY(105%);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);

    box-shadow:0 -25px 70px rgba(0,0,0,.75);
  }

  .producto-modal-contenido::before{
    content:"";
    display:block;

    width:52px;
    height:5px;

    margin:10px auto 4px;

    border-radius:999px;
    background:rgba(255,255,255,.28);
  }

  .producto-modal.abierto .producto-modal-contenido{
    transform:translateY(0);
  }

  .cerrar-producto-modal{
    position:absolute;
    top:15px;
    right:15px;
    z-index:7;

    width:42px;
    height:42px;

    border:1px solid
      color-mix(
        in srgb,
        var(--modal-color) 55%,
        transparent
      );

    border-radius:50%;

    background:rgba(0,0,0,.70);
    color:white;

    font-size:18px;
    cursor:pointer;
  }

  .modal-topbar{
    position:absolute;
    top:14px;
    left:16px;
    right:68px;
    z-index:6;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    padding:11px 13px;

    border-radius:15px;

    background:rgba(3,6,11,.72);
    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);
  }

  .modal-topbar > div{
    min-width:0;
  }

  .modal-topbar small{
    display:block;

    color:var(--modal-color);

    font-size:9px;
    font-weight:900;
    letter-spacing:1.3px;
  }

  .modal-topbar strong{
    display:block;

    margin-top:3px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:white;

    font-size:14px;
    text-transform:uppercase;
  }

  .modal-topbar > span{
    flex-shrink:0;

    color:#6ee7b7;

    font-size:10px;
    font-weight:900;
  }

  .modal-producto-imagen{
    display:block;

    width:100%;
    height:360px;

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

    border-radius:28px 28px 0 0;
  }

  .modal-producto-info{
    position:relative;

    padding:24px 20px 32px;

    background:
      linear-gradient(
        to bottom,
        rgba(3,6,11,.45),
        #03060b 30%
      );
  }

  .modal-producto-etiqueta{
    color:var(--modal-color);

    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
  }

  .modal-producto-info h2{
    margin:8px 0 20px;

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

    text-shadow:
      0 0 22px
      color-mix(
        in srgb,
        var(--modal-color) 55%,
        transparent
      );
  }

  .modal-plan{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.09);
  }

  .modal-plan span{
    color:#e5e7eb;
  }

  .modal-plan strong{
    color:#ffd700;
    font-size:19px;
  }

  .modal-beneficios{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;

    margin-top:20px;
  }

  .modal-beneficios div{
    padding:13px 14px;

    border-radius:13px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    color:#e5e7eb;

    font-size:14px;
    font-weight:800;
  }

  .producto-modal.abierto .modal-beneficios div{
    animation:beneficioEntrada .4s ease both;
  }

  .producto-modal.abierto .modal-beneficios div:nth-child(2){
    animation-delay:.08s;
  }

  .producto-modal.abierto .modal-beneficios div:nth-child(3){
    animation-delay:.16s;
  }

  @keyframes beneficioEntrada{
    from{
      opacity:0;
      transform:translateY(12px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  .modal-producto-comprar{
    display:block;

    margin-top:24px;
    padding:17px;

    border-radius:15px;

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

    color:white;

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

    box-shadow:
      0 0 28px
      color-mix(
        in srgb,
        var(--modal-color) 48%,
        transparent
      );
  }

  .modal-recomendaciones{
    margin-top:30px;
    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.09);
  }

  .modal-recomendaciones-titulo{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:15px;

    margin-bottom:15px;
  }

  .modal-recomendaciones-titulo small{
    display:block;

    margin-bottom:4px;

    color:var(--modal-color);

    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
  }

  .modal-recomendaciones-titulo h3{
    margin:0;

    color:white;
    font-size:20px;
  }

  .modal-recomendaciones-titulo > span{
    flex-shrink:0;

    color:#9ca3af;

    font-size:12px;
    font-weight:800;
  }

  .modal-recomendaciones-lista{
    display:flex;
    gap:12px;

    overflow-x:auto;

    padding:3px 2px 12px;

    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .modal-recomendaciones-lista::-webkit-scrollbar{
    display:none;
  }

  .modal-recomendacion{
    flex:0 0 145px;

    padding:0;
    overflow:hidden;

    scroll-snap-align:start;

    border:1px solid rgba(255,255,255,.11);
    border-radius:17px;

    background:#0a111d;
    color:white;

    text-align:left;
    cursor:pointer;

    transition:
      transform .2s ease,
      border-color .2s ease;
  }

  .modal-recomendacion:active{
    transform:scale(.96);
    border-color:var(--modal-color);
  }

  .modal-recomendacion img{
    display:block;

    width:100%;
    height:112px;

    object-fit:cover;
  }

  .modal-recomendacion-info{
    padding:11px;
  }

  .modal-recomendacion-info strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:white;

    font-size:13px;
    text-transform:uppercase;
  }

  .modal-recomendacion-info span{
    display:block;

    margin-top:5px;

    color:var(--modal-color);

    font-size:11px;
    font-weight:900;
  }

  .modal-favorito{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:0 0 18px;
    padding:10px 14px;

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

    background:rgba(255,255,255,.06);
    color:white;

    font-size:13px;
    font-weight:900;
    cursor:pointer;

    transition:
      transform .2s ease,
      background .2s ease,
      border-color .2s ease;
  }

  .modal-favorito:active{
    transform:scale(.96);
  }

  .modal-favorito.activo{
    background:
      color-mix(
        in srgb,
        var(--modal-color) 22%,
        rgba(255,255,255,.05)
      );

    border-color:var(--modal-color);
    color:var(--modal-color);
  }

  .modal-favorito.confirmado{
    animation:recordatorioConfirmado .55s ease;
  }

  @keyframes recordatorioConfirmado{
    0%{
      transform:scale(1);
    }

    35%{
      transform:scale(.94);
    }

    70%{
      transform:scale(1.06);
    }

    100%{
      transform:scale(1);
    }
  }

  body.modal-abierto{
    overflow:hidden;
  }
}

@media (min-width:769px){
  .producto-modal{
    --modal-color:#ff2d2d;
    position:fixed;
    inset:0;
    z-index:99990;
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:clamp(20px, 3vw, 44px);
    box-sizing:border-box;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
  }

  .producto-modal.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .producto-modal-fondo{
    position:absolute;
    inset:0;
    background:rgba(1,3,7,.82);
    backdrop-filter:blur(10px);
  }

  .producto-modal-contenido{
    position:relative;
    z-index:2;
    width:min(1100px, 100%);
    max-height:88vh;
    display:grid;
    grid-template-columns:minmax(320px, .82fr) minmax(440px, 1.18fr);
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid color-mix(in srgb, var(--modal-color) 32%, rgba(255,255,255,.12));
    border-radius:26px;
    background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, #111827), color-mix(in srgb, var(--bg-primary) 94%, #020409));
    box-shadow:0 38px 110px rgba(0,0,0,.72), 0 0 38px color-mix(in srgb, var(--modal-color) 12%, transparent);
    transform:translateY(18px) scale(.985);
    transition:transform .32s cubic-bezier(.2,.72,.2,1);
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--modal-color) 55%, #555) transparent;
  }

  .producto-modal.abierto .producto-modal-contenido{
    transform:translateY(0) scale(1);
  }

  .producto-modal-contenido.is-switching .modal-producto-media,
  .producto-modal-contenido.is-switching .modal-producto-info{
    opacity:.68;
  }

  .cerrar-producto-modal{
    position:absolute;
    z-index:10;
    top:16px;
    right:16px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(3,5,9,.78);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    backdrop-filter:blur(8px);
  }

  .cerrar-producto-modal:hover{
    border-color:var(--modal-color);
    background:color-mix(in srgb, var(--modal-color) 18%, rgba(3,5,9,.9));
  }

  .modal-topbar{
    position:absolute;
    z-index:6;
    top:18px;
    left:18px;
    width:calc(36% - 36px);
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:11px 13px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    background:rgba(3,5,9,.72);
    backdrop-filter:blur(9px);
  }

  .modal-topbar div{
    min-width:0;
  }

  .modal-topbar small,
  .modal-topbar strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .modal-topbar small{
    color:var(--modal-color);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.12em;
  }

  .modal-topbar strong{
    margin-top:3px;
    color:#fff;
    font-size:.82rem;
  }

  .modal-topbar > span{
    flex:0 0 auto;
    color:#6ee7b7;
    font-size:.62rem;
    font-weight:900;
  }

  .modal-producto-media{
    position:sticky;
    top:0;
    height:88vh;
    min-height:560px;
    overflow:hidden;
    isolation:isolate;
    background:var(--bg-secondary);
    border-right:1px solid rgba(255,255,255,.09);
    transition:opacity .16s ease;
  }

  .modal-producto-media::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg, transparent 64%, color-mix(in srgb, var(--bg-primary) 88%, transparent) 100%);
  }

  .modal-producto-imagen-fondo{
    position:absolute;
    z-index:0;
    inset:-24px;
    display:block;
    width:calc(100% + 48px);
    height:calc(100% + 48px);
    object-fit:cover;
    filter:blur(22px) brightness(.32) saturate(.78);
    transform:scale(1.08);
  }

  .modal-producto-imagen{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.42));
  }

  .modal-producto-info{
    min-width:0;
    padding:clamp(34px, 4vw, 54px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--modal-color) 7%, transparent), transparent 260px);
    transition:opacity .16s ease;
  }

  .modal-producto-etiqueta,
  .modal-recomendaciones-titulo small,
  .modal-incluye small,
  .modal-seguridad-titulo strong,
  .modal-oferta-inteligente small{
    color:var(--modal-color);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.14em;
  }

  .modal-producto-info h2{
    margin:9px 54px 16px 0;
    color:#fff;
    font-size:clamp(2.1rem, 3.2vw, 3.4rem);
    line-height:.96;
    text-transform:uppercase;
    text-shadow:0 0 28px color-mix(in srgb, var(--modal-color) 35%, transparent);
  }

  .modal-favorito,
  .modal-producto-compartir{
    width:100%;
    min-height:44px;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.045);
    color:#d9dde5;
    font-family:inherit;
    font-size:.82rem;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
  }

  .modal-favorito{
    margin-bottom:14px;
  }

  .modal-favorito.activo{
    border-color:var(--modal-color);
    color:var(--modal-color);
  }

  #modalProductoPlanes{
    padding:4px 16px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.035);
  }

  .modal-plan{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .modal-plan:last-child{
    border-bottom:0;
  }

  .modal-plan > span{
    color:#e5e7eb;
  }

  .modal-plan strong{
    color:color-mix(in srgb, var(--brand-accent) 86%, white);
    font-size:1rem;
    text-align:right;
  }

  .modal-actividad{
    margin:16px 0 0;
  }

  .modal-beneficios{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
    margin-top:16px;
  }

  .modal-beneficios div,
  .modal-incluye,
  .modal-seguridad,
  .modal-oferta-inteligente{
    border:1px solid rgba(255,255,255,.085);
    background:rgba(255,255,255,.035);
  }

  .modal-beneficios div{
    padding:12px;
    border-radius:12px;
    color:#dfe3ea;
    font-size:.76rem;
    font-weight:800;
  }

  .modal-incluye,
  .modal-seguridad,
  .modal-oferta-inteligente{
    margin-top:18px;
    padding:18px;
    border-radius:16px;
  }

  .modal-incluye h3,
  .modal-oferta-inteligente h3{
    margin:7px 0 12px;
    color:#fff;
  }

  .modal-incluye-lista{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 18px;
    color:#cbd1dc;
    font-size:.82rem;
  }

  .modal-seguridad-titulo{
    display:flex;
    justify-content:space-between;
    gap:15px;
    color:#fff;
    font-weight:800;
  }

  .modal-seguridad-barra{
    height:6px;
    margin-top:12px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
  }

  .modal-seguridad-progreso{
    width:100%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--modal-color), #6ee7b7);
  }

  .modal-seguridad p,
  .modal-oferta-inteligente p{
    margin:11px 0 0;
    color:#aeb6c4;
    font-size:.82rem;
    line-height:1.5;
  }

  .modal-producto-comprar,
  .oferta-inteligente-boton{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg, var(--modal-color), color-mix(in srgb, var(--modal-color) 70%, white)) !important;
    color:#fff !important;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 12px 28px color-mix(in srgb, var(--modal-color) 25%, transparent);
  }

  .modal-producto-comprar{
    margin-top:20px;
  }

  .modal-producto-compartir{
    margin-top:9px;
  }

  .oferta-inteligente-boton{
    width:100%;
    margin-top:14px;
  }

  .modal-recomendaciones{
    margin-top:22px;
  }

  .modal-recomendaciones-titulo{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
  }

  .modal-recomendaciones-titulo h3{
    margin:5px 0 0;
    color:#fff;
  }

  .modal-recomendaciones-titulo > span{
    color:#8f98a8;
    font-size:.72rem;
  }

  .modal-recomendaciones-lista{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .modal-recomendacion{
    min-width:0;
    padding:0;
    overflow:hidden;
    display:grid;
    grid-template-columns:92px minmax(0, 1fr);
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(255,255,255,.035);
    color:#fff;
    text-align:left;
    cursor:pointer;
  }

  .modal-recomendacion-imagen{
    position:relative;
    min-height:76px;
    overflow:hidden;
  }

  .modal-recomendacion img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }

  .modal-recomendacion-info{
    min-width:0;
    padding:11px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .modal-recomendacion-info strong,
  .modal-recomendacion-info span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .modal-recomendacion-info span{
    margin-top:5px;
    color:var(--modal-color);
    font-size:.7rem;
    font-weight:800;
  }

  body.modal-abierto{
    overflow:hidden;
  }
}
.modal-actividad{

display:inline-flex;
align-items:center;
gap:8px;

margin:0 0 18px;

padding:10px 14px;

border-radius:999px;

background:rgba(255,255,255,.06);

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

font-size:13px;
font-weight:800;

color:#fff;

backdrop-filter:blur(10px);

animation:actividadEntrada .45s ease;

}

@keyframes actividadEntrada{

from{

opacity:0;
transform:translateY(10px);

}

to{

opacity:1;
transform:translateY(0);

}

}
@media (max-width:768px){

  .modal-incluye{
    margin-top:24px;
    padding:18px;

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

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--modal-color) 12%,
          rgba(255,255,255,.04)
        ),
        rgba(255,255,255,.025)
      );
  }

  .modal-incluye small{
    display:block;

    color:var(--modal-color);

    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
  }

  .modal-incluye h3{
    margin:7px 0 15px;

    color:white;

    font-size:21px;
    line-height:1.1;
  }

  .modal-incluye-lista{
    display:grid;
    gap:10px;
  }

  .modal-incluye-lista div{
    padding:11px 12px;

    border-radius:12px;

    background:rgba(3,6,11,.42);
    border:1px solid rgba(255,255,255,.07);

    color:#e5e7eb;

    font-size:14px;
    font-weight:800;
  }

  .modal-incluye-lista div::first-letter{
    color:var(--modal-color);
  }

  .producto-modal.abierto .modal-incluye{
    animation:incluyeEntrada .45s ease both;
  }

  @keyframes incluyeEntrada{
    from{
      opacity:0;
      transform:translateY(12px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}
@media (max-width:768px){

  .modal-seguridad{
    margin-top:22px;
    padding:16px;

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

    background:rgba(255,255,255,.045);
  }

  .modal-seguridad-titulo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }

  .modal-seguridad-titulo span{
    color:white;
    font-size:14px;
    font-weight:900;
  }

  .modal-seguridad-titulo strong{
    color:var(--modal-color);
    font-size:12px;
    font-weight:900;
  }

  .modal-seguridad-barra{
    width:100%;
    height:7px;

    margin-top:13px;
    overflow:hidden;

    border-radius:999px;
    background:rgba(255,255,255,.10);
  }

  .modal-seguridad-progreso{
    width:100%;
    height:100%;

    border-radius:999px;

    background:
      linear-gradient(
        90deg,
        var(--modal-color),
        color-mix(
          in srgb,
          var(--modal-color) 60%,
          white
        )
      );

    transform:scaleX(0);
    transform-origin:left;

    box-shadow:
      0 0 16px
      color-mix(
        in srgb,
        var(--modal-color) 55%,
        transparent
      );
  }

  .producto-modal.abierto .modal-seguridad-progreso{
    animation:seguridadCarga .9s .15s ease forwards;
  }

  .modal-seguridad p{
    margin:12px 0 0;

    color:#cbd5e1;
    font-size:12px;
    line-height:1.45;
  }

  @keyframes seguridadCarga{
    from{
      transform:scaleX(0);
    }

    to{
      transform:scaleX(1);
    }
  }
}
@media (max-width:768px){

  .modal-oferta-inteligente{
    margin-top:24px;
    padding:18px;

    border-radius:18px;
    border:1px solid
      color-mix(
        in srgb,
        var(--modal-color) 35%,
        rgba(255,255,255,.10)
      );

    background:
      radial-gradient(
        circle at top right,
        color-mix(
          in srgb,
          var(--modal-color) 18%,
          transparent
        ),
        transparent 48%
      ),
      rgba(255,255,255,.045);
  }

  .modal-oferta-inteligente small{
    display:block;

    color:var(--modal-color);

    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
  }

  .modal-oferta-inteligente h3{
    margin:8px 0 9px;

    color:white;

    font-size:21px;
    line-height:1.1;
  }

  .modal-oferta-inteligente p{
    margin:0 0 16px;

    color:#cbd5e1;

    font-size:13px;
    line-height:1.45;
  }

  .oferta-inteligente-boton{
    width:100%;

    padding:13px 15px;

    border:none;
    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        var(--modal-color),
        color-mix(
          in srgb,
          var(--modal-color) 68%,
          white
        )
      );

    color:white;

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

    cursor:pointer;

    box-shadow:
      0 0 22px
      color-mix(
        in srgb,
        var(--modal-color) 38%,
        transparent
      );
  }

  .oferta-inteligente-boton:active{
    transform:scale(.97);
  }

  .producto-modal.abierto .modal-oferta-inteligente{
    animation:ofertaInteligenteEntrada .45s ease both;
  }

  @keyframes ofertaInteligenteEntrada{
    from{
      opacity:0;
      transform:translateY(12px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}
@media (max-width:768px){

  .modal-producto-compartir{
    display:block;
    width:100%;

    margin-top:10px;
    padding:15px;

    border-radius:15px;
    border:1px solid rgba(255,255,255,.13);

    background:rgba(255,255,255,.06);
    color:white;

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

    cursor:pointer;
    transition:
      transform .2s ease,
      border-color .2s ease,
      background .2s ease;
  }

  .modal-producto-compartir:active{
    transform:scale(.97);
    border-color:var(--modal-color);

    background:
      color-mix(
        in srgb,
        var(--modal-color) 16%,
        rgba(255,255,255,.05)
      );
  }
}

/* ==========================================
   MODAL CARTELERA
========================================== */

.cartelera-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    z-index:99999;

}

.cartelera-modal.activo{

    display:flex;

}

.cartelera-modal-fondo{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(12px);

}

.cartelera-modal-contenido{

    position:relative;

    width:min(92%,900px);

    max-height:92vh;

    overflow:auto;

    border-radius:24px;

    background:#111;

    box-shadow:
        0 25px 80px rgba(0,0,0,.7);

    animation:modalCartelera .35s ease;

}

@keyframes modalCartelera{

    from{

        opacity:0;
        transform:translateY(30px) scale(.95);

    }

    to{

        opacity:1;
        transform:none;

    }

}

.cerrar-cartelera-modal{

    position:absolute;

    top:18px;
    right:18px;

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.55);

    color:white;

    font-size:22px;

    cursor:pointer;

    z-index:5;

}

.cartelera-modal-banner{

    width:100%;

    height:420px;

    object-fit:cover;

    object-position:top;

    display:block;

}

.cartelera-modal-info{

    position:relative;

    margin-top:-110px;

    padding:130px 30px 30px;

    background:
        linear-gradient(
            to top,
            #111 72%,
            rgba(17,17,17,.97) 82%,
            rgba(17,17,17,.75) 90%,
            transparent 100%
        );

    z-index:2;

}

.cartelera-modal-info small{

    color:#e50914;

    font-weight:800;

    letter-spacing:2px;

}

.cartelera-modal-info h2{

    margin-top:14px;
    margin-bottom:12px;

    color:#fff;

    font-size:52px;

    font-weight:900;

    line-height:1;

    letter-spacing:-1px;

    text-shadow:
        0 3px 18px rgba(0,0,0,.55);

}

#carteleraModalDetalles{

    margin:18px 0;

    color:#cfcfcf;

}

#carteleraModalDescripcion{

    margin-top:24px;

    color:#d7d7d7;

    font-size:16px;

    line-height:1.9;

    text-align:justify;

    opacity:.92;

}

#carteleraModalPlataformas{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:28px;

}

#carteleraModalPlataformas .cartelera-plataforma{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:.3px;

    transition:.25s;

}

#carteleraModalPlataformas .cartelera-plataforma:hover{

    transform:translateY(-2px);

    background:#e50914;

    border-color:#e50914;

}

#carteleraModalBadges{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:22px;

}

.cartelera-modal-badge{

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:900;

    color:#fff;

}

.cartelera-modal-badge.tendencia{

    background:#e50914;

}

.cartelera-modal-badge.destacado{

    background:#f5b301;

    color:#111;

}


/* ==========================================
   APARIENCIA GLOBAL CONFIGURABLE — MODALES
   RESPETA EL COLOR INDIVIDUAL DEL PRODUCTO
========================================== */


/* ========================================
   MODAL DE PRODUCTOS EN MÓVIL
======================================== */

@media (max-width:768px){

  .modal-producto-media{
    display:contents;
  }

  .modal-producto-imagen-fondo{
    display:none;
  }

  .producto-modal{
    --modal-color:
      var(
        --modal-color,
        var(--pechy-principal)
      );
  }


  .producto-modal-contenido{
    background:
      radial-gradient(
        circle at 50% 15%,
        color-mix(
          in srgb,
          var(--modal-color) 28%,
          transparent
        ),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        color-mix(
          in srgb,
          var(--pechy-secundario) 78%,
          #101827
        ),
        color-mix(
          in srgb,
          var(--pechy-secundario) 28%,
          #03060b
        )
      );
  }


  .modal-producto-info{
    background:
      linear-gradient(
        to bottom,
        color-mix(
          in srgb,
          var(--pechy-secundario) 40%,
          rgba(3,6,11,.45)
        ),
        color-mix(
          in srgb,
          var(--pechy-secundario) 25%,
          #03060b
        ) 30%
      );
  }


  .modal-plan strong{
    color:
      var(
        --pechy-acento,
        #ffd700
      );
  }


  .modal-producto-comprar,
  .oferta-inteligente-boton{

    background:
      linear-gradient(
        135deg,
        var(--modal-color),
        color-mix(
          in srgb,
          var(--modal-color) 72%,
          white
        )
      ) !important;

    color:white !important;

  }


  .modal-producto-etiqueta,
  .modal-recomendaciones-titulo small,
  .modal-recomendacion-info span,
  .modal-incluye small,
  .modal-seguridad-titulo strong,
  .modal-oferta-inteligente small{

    color:
      var(--modal-color) !important;

  }


  .modal-favorito.activo{

    color:
      var(--modal-color) !important;

    border-color:
      var(--modal-color) !important;

  }

}


/* ========================================
   MODAL DE CARTELERA
======================================== */

.cartelera-modal-contenido{

  background:
    color-mix(
      in srgb,
      var(--pechy-secundario) 55%,
      #111
    );

}


.cartelera-modal-info{

  background:
    linear-gradient(
      to top,
      color-mix(
        in srgb,
        var(--pechy-secundario) 55%,
        #111
      ) 72%,
      color-mix(
        in srgb,
        var(--pechy-secundario) 50%,
        rgba(17,17,17,.97)
      ) 82%,
      rgba(17,17,17,.75) 90%,
      transparent 100%
    );

}


.cartelera-modal-info small{

  color:
    var(--pechy-principal);

}


#carteleraModalPlataformas
.cartelera-plataforma:hover{

  background:
    var(--pechy-principal);

  border-color:
    var(--pechy-principal);

}


.cartelera-modal-badge.tendencia{

  background:
    var(--pechy-principal);

}


.cartelera-modal-badge.destacado{

  background:
    var(--pechy-acento);

  color:
    color-mix(
      in srgb,
      var(--pechy-acento) 18%,
      #111
    );

}